/* ==========================================================================
   NatSens — "The Women Behind NatSens" · Rediseño editorial (journal)
   Referencias: Kinfolk, Aman Journal. Minimal, cálido, humano, atemporal.

   Principios aplicados:
   - Sin foto de hero: apertura tipográfica pura con mucho aire.
   - Ilustración de comunidad como pieza visual a lo ancho.
   - Historias como pliegos de revista: retrato + texto, alternando lados,
     separadas por líneas finas doradas.
   - Transiciones: solo fundidos lentos (nada llamativo).

   Todas las reglas viven bajo `.page-women`: esta hoja NO afecta
   a index.html ni a ninguna otra página del sitio.
   ========================================================================== */

.page-women section{padding:110px 0}

/* --------------------------------------------------------------------------
   Navegación clara (fondo crema translúcido, texto tinta, línea dorada)
   -------------------------------------------------------------------------- */
.page-women .nav{position:sticky;top:0;background:rgba(247,241,231,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--ink);border-bottom:1px solid var(--line);padding:18px 0;z-index:30}
.page-women .brand span{color:var(--gold)}
.page-women .nav-links a{opacity:.72;transition:opacity .35s ease}
.page-women .nav-links a:hover{opacity:1}

/* --------------------------------------------------------------------------
   Hero editorial mínimo: etiqueta, titular grande, introducción en serif.
   Sin imagen, sin botones. El blanco es parte del diseño.
   -------------------------------------------------------------------------- */
.page-women .j-hero{padding:140px 0 100px;text-align:center}
.page-women .j-hero h1{color:var(--ink);font-size:clamp(44px,6vw,76px);max-width:820px;margin:0 auto}
.page-women .j-intro{font-family:"Cormorant Garamond",serif;font-style:italic;font-size:clamp(19px,2vw,23px);color:var(--muted);max-width:620px;margin:28px auto 0;line-height:1.65}

/* --------------------------------------------------------------------------
   Ilustración de comunidad, a lo ancho. Su fondo marfil casi coincide con
   el crema de la página, así que se integra sin bordes ni marcos.
   -------------------------------------------------------------------------- */
.page-women .j-illustration{padding:0}
/* Escala contenida: la ilustración acompaña, no domina la página */
.page-women .j-illustration img{display:block;width:min(680px,88vw);height:auto;margin:0 auto}
.page-women .j-caption{text-align:center;margin-top:26px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* --------------------------------------------------------------------------
   "Meet the women" — pliegos editoriales tipo revista
   -------------------------------------------------------------------------- */
.page-women .j-meet-head{text-align:center;margin-bottom:96px}
.page-women .j-meet-head h2{max-width:640px;margin:0 auto}

/* Cada historia: retrato + texto en dos columnas, centrado y estrecho
   (ancho de lectura de revista, no de landing) */
.page-women .j-story{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start;width:min(980px,92vw);margin:0 auto}
/* Alternancia de lados: en las historias pares el retrato pasa a la derecha */
.page-women .j-story.is-flipped .j-portrait{order:2}

/* Separación generosa + línea fina dorada entre historias */
.page-women .j-story + .j-story{margin-top:110px;padding-top:110px;border-top:1px solid var(--line)}

/* Retrato anclado (sticky): en artículos largos acompaña la lectura en
   lugar de flotar centrado dejando grandes vacíos arriba y abajo */
.page-women .j-portrait{aspect-ratio:3/4;background:url('../Images/placeholder-portrait.svg') center/cover;position:sticky;top:104px}

.page-women .j-role{text-transform:uppercase;letter-spacing:.22em;font-size:11px;color:var(--gold);font-weight:500;margin-bottom:12px}
.page-women .j-story h3{font-size:clamp(28px,3vw,38px);margin-bottom:18px}
.page-women .j-story-text p{color:var(--muted);font-size:16px;line-height:1.85}
/* Ajustes mínimos para el artículo real: separación entre párrafos y
   subtítulos h4 en serif (los bloques placeholder, con un solo párrafo
   y sin h4, no cambian en absoluto) */
.page-women .j-story-text p + p{margin-top:16px}
.page-women .j-story-text h4{font-family:"Cormorant Garamond",serif;font-weight:500;font-size:23px;line-height:1.2;color:var(--ink);margin:36px 0 14px}
/* Titular del artículo: en cursiva bajo el nombre, formato de revista
   (la profesión pequeña en dorado arriba y el nombre grande quedan como
   en las tarjetas placeholder) */
.page-women .j-story-text h4.j-article-title{font-style:italic;font-size:clamp(22px,2.4vw,27px);margin:2px 0 24px}

/* "Favourite place in Madeira": etiqueta pequeña + valor en serif */
.page-women .j-fav{margin-top:26px}
.page-women .j-fav-label{text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--gold);margin-bottom:6px}
.page-women .j-fav-value{font-family:"Cormorant Garamond",serif;font-size:19px;color:var(--ink)}

/* Cita pequeña: serif en cursiva con filete dorado a la izquierda */
.page-women .j-quote{margin-top:28px;padding-left:20px;border-left:1px solid var(--gold);font-family:"Cormorant Garamond",serif;font-style:italic;font-size:19px;line-height:1.55;color:var(--ink)}

/* --------------------------------------------------------------------------
   CTA de cierre (se mantiene, sereno) + enlace subrayado discreto
   -------------------------------------------------------------------------- */
.page-women .w-cta{background:var(--warm);text-align:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.page-women .w-cta h2{max-width:720px;margin:0 auto}
.page-women .w-cta .lead{margin:20px auto 34px;max-width:520px}
.page-women .w-cta-note{margin-top:18px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

.page-women .w-link{display:inline-block;font-size:13px;letter-spacing:.08em;color:var(--ink);padding-bottom:5px;position:relative;cursor:pointer;background:none;border:none;font-family:Jost,sans-serif}
.page-women .w-link::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);transition:width .45s ease}
.page-women .w-link:hover::after{width:40%}

/* --------------------------------------------------------------------------
   Transiciones entre historias: SOLO fundido, lento y discreto.
   El estado oculto se aplica únicamente bajo `html.anim` (clase que añade
   un script inline): sin JavaScript, todo es visible desde el inicio.
   -------------------------------------------------------------------------- */
.anim .page-women .reveal{opacity:0;transition:opacity 1.4s ease}
.anim .page-women .reveal.is-visible{opacity:1}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media(max-width:980px){
  .page-women .j-story{grid-template-columns:1fr;gap:36px}
  /* En una columna el retrato siempre abre el pliego, sin sticky */
  .page-women .j-story.is-flipped .j-portrait{order:0}
  .page-women .j-portrait{position:static}
  .page-women .j-story + .j-story{margin-top:80px;padding-top:80px}
}
@media(max-width:620px){
  .page-women section{padding:70px 0}
  .page-women .j-hero{padding:80px 0 60px}
  .page-women .j-meet-head{margin-bottom:64px}
}