/* ═══════════════════════════════════════════════════════════════
   PIEL — Andrea Israel · La Tercera Palabra
   ───────────────────────────────────────────────────────────────
   Todos los colores salen medidos de la tapa impresa a 400 dpi
   (`portada_contraportada.pdf`), no de las cinco muestras del
   formulario. La clienta había elegido "rosa editorial": no hay
   una sola gota de rosa en su tapa ni en su rubro.

   OJO — este archivo se carga ANTES que `nucleo.css`. Para pisar
   cualquier cosa del núcleo hace falta MÁS especificidad; con la
   misma gana el núcleo. Por eso los `html` adelante.
   ═══════════════════════════════════════════════════════════════ */

/* ── TIPOGRAFÍAS ──────────────────────────────────────────────── */
/* Newsreader es una serif de lectura: la voz humana.
   IBM Plex es la tipografía que IBM hizo para hablar como máquina.
   El libro es sobre lo humano frente al algoritmo — las dos voces
   conviven en la página igual que en el texto. */
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader';src:url('../fonts/newsreader-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/plexsans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Sans';src:url('../fonts/plexsans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('../fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* ── TOKENS ───────────────────────────────────────────────────── */
:root{
  /* Medidos en la tapa */
  --papel:#EDEFF3;        /* la luz de la ventana, fría — no crema */
  --papel-alto:#FFFFFF;
  --profundo:#0F2540;     /* el océano del globo, oscurecido */
  --marino:#19447C;       /* el océano, tal cual */
  --oro:#F2B975;          /* el anillo del globo, tal cual */
  --oro-tierra:#8A5A16;   /* el mismo oro, legible sobre papel: 5.13:1 */
  --sobre-oscuro:#C9D4E4;
  --sobre-oscuro-tenue:#8FA3BC;

  /* Lo que consume el núcleo */
  --fondo:var(--papel);
  --fondo-oscuro:var(--profundo);
  --texto:#101720;
  --texto-suave:#3D4A5C;
  --texto-claro:#FFFFFF;
  --texto-claro-suave:rgba(255,255,255,.55);
  --acento:var(--marino);        /* oscuro a propósito: es el anillo de foco */
  --acento-claro:var(--oro);
  --acento-oscuro:#12325C;
  --acento-texto:var(--oro-tierra);

  --medida:39rem;
  --espacio-md:2rem;
  --radio-sm:2px;
  --radio-md:3px;
  --suave:cubic-bezier(.2,.7,.3,1);
  --sombra-foto:0 18px 44px -18px rgba(15,37,64,.55);
  --sombra-foto-hover:0 26px 56px -20px rgba(15,37,64,.62);

  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;
  --font-display:var(--font-serif);
  --font-sans:'Plex Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'Plex Mono',ui-monospace,SFMono-Regular,monospace;
}

/* ── BASE ─────────────────────────────────────────────────────── */
html body{font-size:1.0625rem;line-height:1.75;background:var(--papel)}
html h1,html h2,html h3{font-family:var(--font-serif);font-weight:500;
  letter-spacing:-.015em;line-height:1.08;text-wrap:balance}
p{margin:0 0 1.15em}
em{font-style:italic}
::selection{background:var(--oro);color:var(--profundo)}

.env{max-width:1120px;margin:0 auto;padding:0 1.75rem}
.env--texto{max-width:44rem}

/* ── SECCIONES ────────────────────────────────────────────────── */
.seccion{padding:clamp(4.5rem,9vw,7.5rem) 0}
.seccion--profunda{background:var(--profundo);color:var(--sobre-oscuro)}
.seccion--profunda h2,.seccion--profunda h3{color:#fff}
.seccion--blanca{background:var(--papel-alto)}
.seccion__titulo{font-size:clamp(2rem,4.2vw,3rem);margin:0 0 1.6rem}

html .ojo{font-family:var(--font-mono);font-weight:500;font-size:.68rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--oro-tierra);
  margin:0 0 1rem}
html .seccion--profunda .ojo{color:var(--oro)}

/* ── EL FIEL ──────────────────────────────────────────────────── */
/* El recurso propio de esta web. Dos opuestos, un filete que los
   separa y un rombo dorado justo en el medio: el tercer elemento.
   Es el argumento del libro convertido en pieza de diseño, y va
   sólo donde hay una oposición real, nunca de adorno.
   Permiso escrito, Jung citado en la página 80 del libro:
   "toda reconciliación de los opuestos exige un tercer elemento
   que sirva de puente".                                          */
.fiel{display:flex;align-items:center;gap:.9rem;margin:0 0 1.9rem;
  max-width:30rem;font-family:var(--font-mono);font-weight:500;
  font-size:.68rem;letter-spacing:.19em;text-transform:uppercase}
.fiel__rama{flex:1 1 0;height:1px;background:currentColor;opacity:.32;
  transform:scaleX(0);transform-origin:var(--org,left);
  transition:transform .7s var(--suave) .1s}
.fiel__rama--der{--org:right}
.fiel__punto{width:7px;height:7px;flex:none;background:var(--oro);
  transform:rotate(45deg) scale(0);
  transition:transform .5s cubic-bezier(.2,1.5,.4,1) .55s}
.fiel span{flex:none;white-space:nowrap}
.visible .fiel__rama{transform:scaleX(1)}
.visible .fiel__punto{transform:rotate(45deg) scale(1)}
.fiel--claro{color:var(--texto-suave)}
.fiel--oscuro{color:var(--sobre-oscuro)}

/* ── BOTONES ──────────────────────────────────────────────────── */
/* El CTA principal es siempre el mismo: relleno oro con tinta.
   Y vive siempre adentro de un bloque azul profundo — por eso el
   oro no necesita filete: contra el profundo da 8.81:1.
   Si alguna vez cae sobre papel, la superficie sola da 1.52:1 y
   hay que ponerle el filete de --oro-tierra. Está previsto abajo. */
html .boton{font-family:var(--font-sans);font-weight:600;font-size:.95rem;
  padding:1rem 1.9rem;border-radius:var(--radio-sm);letter-spacing:.01em;
  justify-content:center}
html .boton--oro{background:var(--oro);color:var(--texto);border-color:transparent}
html .boton--oro:hover{background:#FFD79B}
html .seccion:not(.seccion--profunda) .boton--oro,
html .bloque-cta--claro .boton--oro{border-color:var(--oro-tierra)}
html .boton--linea{border-color:rgba(25,68,124,.5);color:var(--marino);background:none}
html .boton--linea:hover{background:rgba(25,68,124,.07);border-color:var(--marino)}

html a:focus-visible,html button:focus-visible{outline:2px solid var(--marino);
  outline-offset:3px}
/* Trampa conocida del núcleo: el anillo de foco es --acento y sobre
   fondo oscuro desaparece. Sobre profundo va el oro. */
html .seccion--profunda a:focus-visible,html .seccion--profunda button:focus-visible,
html .hero a:focus-visible,html .hero button:focus-visible,
html .bloque-cta a:focus-visible,html .cita-banda a:focus-visible,
html .barra-fija a:focus-visible{outline-color:var(--oro)}

/* ── HERO ─────────────────────────────────────────────────────── */
.hero{background:var(--profundo);color:var(--sobre-oscuro);position:relative;
  overflow:hidden}
/* La foto sangra hasta el borde derecho de la pantalla: el .env del
   hero suelta su padding derecho y compensa el izquierdo con la
   cuenta del centrado. */
.hero .env{max-width:none;padding-left:max(1.75rem,calc((100% - 1120px)/2 + 1.75rem));
  padding-right:0}
.hero__grilla{display:grid;grid-template-columns:1fr min(40%,30rem);align-items:stretch}
.hero__texto{padding:clamp(3.5rem,6vw,5.5rem) clamp(2rem,5vw,4rem)
  clamp(3rem,5vw,4.5rem) 0}
html .hero h1{font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.03;color:#fff;
  letter-spacing:-.022em;margin:0 0 1.35rem}
.hero__tercera{font-family:var(--font-serif);font-style:italic;
  font-size:clamp(1.22rem,2vw,1.5rem);color:var(--oro);line-height:1.35;
  margin:0 0 .95rem}
.hero__oferta{max-width:33rem;font-size:1rem;margin:0 0 2rem}
/* La aclaración abajo del botón: chica, sin competirle. */
.hero__nota{margin:.85rem 0 0;font-size:.84rem;line-height:1.5;
  color:var(--sobre-oscuro-tenue);max-width:28rem}
.hero__firma{margin-top:1.9rem;padding-top:1.4rem;
  border-top:1px solid rgba(201,212,228,.18);font-size:.88rem;line-height:1.55}
.hero__firma strong{display:block;font-family:var(--font-serif);font-weight:600;
  font-size:1.05rem;color:#fff;letter-spacing:.01em}
.hero__foto{position:relative;align-self:stretch;min-height:100%;overflow:hidden}
.hero__foto img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:50% 12%}
.hero__foto::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  z-index:2;opacity:.8;
  background:linear-gradient(180deg,transparent,var(--oro) 22%,var(--oro) 78%,transparent)}
.hero__foto::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--profundo) 0%,rgba(15,37,64,.35) 26%,rgba(15,37,64,0) 62%)}

/* ── PROSA ────────────────────────────────────────────────────── */
/* El núcleo pone peso 300; Plex Sans 300 no está bajada y además a
   este cuerpo le queda flaca. Se pisa con html adelante. */
html .prosa{font-weight:400;line-height:1.8}
.prosa p{margin:0 0 1.3em}
html .prosa h3{font-family:var(--font-serif);font-size:1.32rem;font-weight:600;
  margin:2.6rem 0 .9rem;letter-spacing:-.005em}
.env--texto .medida,.env--texto .lee{max-width:none}

.golpe{font-family:var(--font-serif);font-size:clamp(1.7rem,3.4vw,2.35rem);
  font-weight:500;line-height:1.15;color:var(--texto);margin:2.2rem 0 0;
  letter-spacing:-.02em}
.seccion--profunda .golpe{color:#fff}

/* ── CITA A TODO EL ANCHO ─────────────────────────────────────── */
.cita-banda{background:var(--marino);color:#fff;text-align:center;
  padding:clamp(3.5rem,7vw,5.5rem) 0}
html .cita-banda blockquote{margin:0 auto;font-family:var(--font-serif);
  font-weight:400;font-style:italic;font-size:clamp(1.5rem,3.4vw,2.3rem);
  line-height:1.3;max-width:26ch;color:#fff;text-wrap:balance}

/* ── QUIÉN ES ─────────────────────────────────────────────────── */
.quien{display:grid;grid-template-columns:22rem 1fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.quien__foto{position:relative}
html .quien__foto.marco-foto{aspect-ratio:3/4;border-radius:var(--radio-md)}
.cifras{display:flex;flex-wrap:wrap;gap:.55rem 1.4rem;margin:0 0 2rem;
  padding:0;list-style:none;font-family:var(--font-mono);font-weight:500;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--oro-tierra)}
.cifras li{display:flex;align-items:center;gap:1.4rem}
.cifras li+li::before{content:'';flex:none;width:3px;height:3px;
  background:var(--oro-tierra);transform:rotate(45deg)}
html .quien blockquote{margin:2.4rem 0 0;padding-left:1.4rem;
  border-left:2px solid var(--oro-tierra);font-family:var(--font-serif);
  font-style:italic;font-size:1.12rem;line-height:1.65;color:var(--texto-suave);
  max-width:34rem}

/* ── MÉTODO ───────────────────────────────────────────────────── */
.epigrafe{margin:0 0 2.6rem;padding-left:1.4rem;
  border-left:1px solid rgba(242,185,117,.4);font-family:var(--font-serif);
  font-style:italic;font-size:1.06rem;line-height:1.6;color:var(--sobre-oscuro);
  max-width:36rem}
.epigrafe cite{display:block;margin-top:.7rem;font-family:var(--font-mono);
  font-style:normal;font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--oro)}
.metodo__marco{margin:0 0 3.5rem;font-size:1.1rem}
.etapas{list-style:none;margin:0;padding:0;border-left:1px solid rgba(242,185,117,.28)}
.etapa{position:relative;padding:0 0 3rem 2.6rem}
.etapa:last-child{padding-bottom:0}
.etapa__n{position:absolute;left:0;top:.1rem;transform:translateX(-50%);
  background:var(--profundo);padding:.15rem 0;font-family:var(--font-mono);
  font-weight:500;font-size:.8rem;color:var(--oro);letter-spacing:.06em}
html .etapa h3{font-family:var(--font-serif);font-size:1.4rem;font-weight:500;
  margin:0 0 .7rem}
/* La pregunta con la que la autora abre el capítulo. Es lo primero que se
   lee de cada etapa: la página plantea el problema y no entrega la respuesta.
   El método completo está en el libro, que se vende más abajo. */
.etapa__pregunta{font-family:var(--font-serif);font-style:italic;
  font-size:1.18rem;line-height:1.45;color:#fff;margin:0 0 .9rem;
  max-width:34rem;text-wrap:pretty}
.etapa__pregunta::before{content:'«'}
.etapa__pregunta::after{content:'»'}
.etapa p{margin:0 0 .8rem}
.etapa__llevas{font-family:var(--font-serif);font-style:italic;font-size:1.06rem;
  color:var(--oro);margin:0}
.etapa__llevas b{display:block;margin-bottom:.25rem;font-style:normal;
  font-weight:400;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.19em;text-transform:uppercase;color:var(--sobre-oscuro-tenue)}

/* ── SERVICIO ─────────────────────────────────────────────────── */
.incluye{list-style:none;margin:0 0 2.8rem;padding:0}
.incluye li{position:relative;padding:.85rem 0 .85rem 2rem;
  border-bottom:1px solid rgba(16,23,32,.1)}
.incluye li:first-child{border-top:1px solid rgba(16,23,32,.1)}
.incluye li::before{content:'';position:absolute;left:.35rem;top:1.5rem;
  width:6px;height:6px;background:var(--oro-tierra);transform:rotate(45deg)}
.entregas{display:grid;gap:1.6rem;margin:0 0 3rem}
.entrega{padding-left:1.4rem;border-left:2px solid rgba(138,90,22,.35)}
html .entrega h4{font-family:var(--font-serif);font-size:1.22rem;font-weight:600;
  line-height:1.25;letter-spacing:-.01em;margin:0 0 .35rem}
.entrega p{margin:0;color:var(--texto-suave)}

/* El CTA vive en un bloque azul: así el botón oro es siempre igual
   y siempre está sobre profundo. */
.bloque-cta{background:var(--profundo);color:var(--sobre-oscuro);
  padding:clamp(2.5rem,5vw,3.5rem);border-radius:var(--radio-md);
  text-align:center}
html .bloque-cta h3{font-family:var(--font-serif);font-size:clamp(1.4rem,2.6vw,1.85rem);
  font-weight:500;color:#fff;margin:0 0 .8rem}
.bloque-cta p{max-width:34rem;margin:0 auto 1.8rem;font-size:.98rem}
.bloque-cta p.bloque-cta__nota{max-width:32rem;margin:1.4rem auto 0;
  font-size:.85rem;color:var(--sobre-oscuro-tenue);line-height:1.6}

/* ── EL LIBRO ─────────────────────────────────────────────────── */
.libro{display:grid;grid-template-columns:19rem 1fr;
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start}
.libro__tapa img{width:100%;height:auto;border-radius:var(--radio-md);
  box-shadow:var(--sombra-foto)}
.libro__bajada{font-family:var(--font-serif);font-style:italic;font-size:1.15rem;
  color:var(--texto-suave);margin:0 0 1.6rem}
.ficha{list-style:none;margin:2rem 0;padding:0;font-size:.9rem}
.ficha li{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.6rem 0;border-bottom:1px solid rgba(16,23,32,.1)}
.ficha li:first-child{border-top:1px solid rgba(16,23,32,.1)}
.ficha dt,.ficha .et{font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--texto-suave)}
.ficha .val{font-variant-numeric:tabular-nums;text-align:right}

/* ── OBJECIONES ───────────────────────────────────────────────── */
.faq{margin:0;padding:0}
.faq__item{padding:1.8rem 0;border-bottom:1px solid rgba(16,23,32,.12)}
.faq__item:first-child{border-top:1px solid rgba(16,23,32,.12)}
html .faq__item h3{font-family:var(--font-serif);font-size:1.3rem;font-weight:600;
  margin:0 0 .7rem}
.faq__item p{margin:0;color:var(--texto-suave)}

/* ── CIERRE ───────────────────────────────────────────────────── */
.cierre{text-align:center}
html .cierre h2{font-size:clamp(2rem,4.4vw,3.1rem);margin:0 0 1.4rem;color:#fff}
.cierre__texto{max-width:36rem;margin:0 auto 2.2rem}
.redes{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1.6rem;
  margin:3rem 0 0;padding:2rem 0 0;border-top:1px solid rgba(201,212,228,.18)}
.red{display:inline-flex;align-items:center;gap:.5rem;font-size:.9rem;
  color:var(--sobre-oscuro);transition:color .2s var(--suave)}
.red:hover{color:var(--oro)}
.red svg{flex:none}

/* Pie de imprenta: una línea sola, como la de un libro. */
.pie{background:var(--profundo);color:var(--sobre-oscuro-tenue);
  padding:0 0 2.6rem;text-align:center;font-family:var(--font-mono);
  font-size:.64rem;letter-spacing:.19em;text-transform:uppercase}
.pie a{color:var(--sobre-oscuro);text-decoration:underline;
  text-underline-offset:.35em;text-decoration-thickness:1px}
.pie a:hover{color:var(--oro)}

/* ── BARRA FIJA (móvil) ───────────────────────────────────────── */
/* No es barra de compra: acá el objetivo es que escriban. Deja
   lugar al WhatsApp flotante a la derecha, como el núcleo. */
/* Lleva también la clase `barra-compra` para que la maneje main.js:
   el núcleo no se toca. Acá sólo se le cambia el aspecto. */
html .barra-fija{background:var(--profundo);
  border-top:1px solid rgba(242,185,117,.25)}
html .barra-fija__titulo{font-family:var(--font-serif);font-size:.9rem;color:#fff;
  line-height:1.3;white-space:normal}
html .barra-fija .boton{padding:.7rem 1.05rem;font-size:.85rem;flex-shrink:0}

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width:980px){
  .quien{grid-template-columns:1fr;gap:2.5rem}
  .quien__foto{max-width:20rem}
  .libro{grid-template-columns:1fr;gap:2.5rem}
  .libro__tapa{max-width:16rem}
}
@media (max-width:880px){
  .hero .env{padding-left:1.75rem;padding-right:1.75rem}
  .hero__grilla{grid-template-columns:1fr}
  .hero__texto{padding:0 0 2.5rem}
  .hero__foto{min-height:clamp(15rem,68vw,20rem);order:-1;margin:0 -1.75rem}
  .hero__foto img{object-position:50% 16%}
  .hero__foto::before{left:0;right:0;top:auto;bottom:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--oro),transparent)}
  .hero__foto::after{background:linear-gradient(180deg,
    rgba(15,37,64,0) 0%,rgba(15,37,64,0) 52%,
    rgba(15,37,64,.5) 82%,var(--profundo) 100%)}
}
@media (max-width:760px){
  /* Trampa de Daniela: el núcleo le pone padding-bottom al body para
     que la barra no tape el final, pero el body es claro y el pie es
     azul, así que ese aire queda como una franja muerta abajo de todo.
     Se le saca al body y se le mete adentro del pie. */
  html body.con-barra{padding-bottom:0}
  html body.con-barra .pie{padding-bottom:calc(2.6rem + 76px)}
}
@media (max-width:640px){
  /* En una columna de 334 px un botón chico queda varado y con poca
     superficie para el pulgar. Van a todo el ancho: se tocan mejor y
     desaparece el problema de alineación. La jerarquía la sigue marcando
     el relleno —oro lleno es el principal, de línea el secundario—, así que
     que midan lo mismo no los empata.
     Ojo: la barra fija y la barra de navegación quedan afuera a propósito. */
  .hero .boton,
  .bloque-cta .boton,
  .cierre .boton,
  .libro .boton{display:flex;width:100%}

  /* Las imágenes con ancho máximo quedaban pegadas a la izquierda con un
     hueco muerto a la derecha: se lee como un error, no como una decisión. */
  .quien__foto,
  .libro__tapa{margin-inline:auto}

  .fiel{font-size:.66rem;letter-spacing:.15em;gap:.55rem}
  .fiel--largo{flex-direction:column;align-items:flex-start;gap:.45rem;
    max-width:none}
  .fiel--largo span{white-space:normal;line-height:1.45}
  .fiel--largo .fiel__rama{flex:none;width:1px;height:14px;margin-left:.4rem;
    transform:scaleY(0);transform-origin:top}
  .fiel--largo .fiel__rama--der{transform-origin:bottom}
  .fiel--largo .fiel__punto{margin-left:.15rem}
  .visible .fiel--largo .fiel__rama{transform:scaleY(1)}
  .ficha li{flex-direction:column;gap:.15rem}
  .ficha .val{text-align:left}
  /* En una línea las tres cifras no entran y la tercera arrancaba con un
     rombo suelto. Se apilan, y el rombo pasa a ser viñeta de todas. */
  .cifras{flex-direction:column;align-items:flex-start;gap:.35rem}
  .cifras li::before{content:'';flex:none;width:3px;height:3px;
    background:var(--oro-tierra);transform:rotate(45deg)}
}
@media (prefers-reduced-motion:reduce){
  .fiel__rama{transform:none !important;opacity:.32}
  .fiel__punto{transform:rotate(45deg) scale(1) !important}
}