/* ==========================================================================
   AV Diagnostico v4 — areas (seccion 3)
   Tres "paginas" que se apilan al scrollear (position: sticky) con mundos de
   color distintos: claro -> oscuro -> tinte. Sensacion de pasar de pagina.
   Sistema del hero: Fraunces + Inter + mono, teal, acido = 1 punto en eyebrow.
   No redefine .btn. Namespaced .areas / .area__*.
   ========================================================================== */

.areas { position: relative; z-index: 1; }

/* ---- cada area es una PAGINA sticky que cubre a la anterior ----
   Los mundos de color se hacen SOLO con variables (--w-*): el default vive en
   .area y los modificadores solo las sobreescriben (orden correcto de cascada). */
.area {
  /* MUNDO CLARO (clinico, default) */
  --w-bg: var(--bg);
  --w-text: var(--ink);
  --w-dim: var(--ink-2);
  --w-rule: var(--rule);
  --w-accent: var(--teal-deep);

  position: sticky;
  top: 0;
  /* mas alto que el viewport: la pagina (100vh, arriba) se sostiene un rato
     ANTES de que la siguiente la cubra. Esa cola de +50vh es la "pausa". */
  min-height: 150vh;
  display: block;
  overflow: hidden;
  background: var(--w-bg);
  color: var(--w-text);
}

/* la ultima area no necesita "cola" de pausa (no hay siguiente que la cubra) */
.areas .area:last-child { min-height: 100vh; }

/* MUNDO OSCURO (veterinario) — solo variables */
.area--dark {
  --w-bg: #0C171B;
  --w-text: #EAF2F1;
  --w-dim: #9FB3B7;
  --w-rule: rgba(234,242,241,.16);
  --w-accent: #29C9D6;
}
/* MUNDO TINTE (industrial) — solo variables */
.area--tint {
  --w-bg: #EDF4F4;
  --w-rule: #D2E0E0;
}

.area__inner {
  width: var(--container);
  margin-inline: auto;
  min-height: 100vh;                 /* la pagina visible arriba del bloque de 150vh */
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: center;
  gap: clamp(40px, 5.5vw, 100px);
  padding-block: clamp(96px, 12vh, 140px);
}
.area--flip .area__media { order: -1; }

/* ---- texto ---- */
.area__text { max-width: 620px; }

.area__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 22px;
  font-family: var(--mono); font-weight: 500;
  font-size: var(--fs-label); letter-spacing: .18em; text-transform: uppercase;
  color: var(--w-dim);
}
.area__num { color: var(--w-text); }
.area__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acid); flex: none; }  /* unico acido */
.area__eyebrow-name { color: var(--w-dim); }

.area__title {
  margin: 0;
  font-family: var(--serif); font-weight: 460;
  font-size: var(--fs-h2); line-height: 1.05; letter-spacing: -0.02em;
  color: var(--w-text);
  max-width: 15ch; text-wrap: balance;
}
.area__title em { font-family: var(--serif); font-style: italic; font-weight: 420; color: var(--w-accent); }

.area__deck {
  margin: 24px 0 0; max-width: 46ch;
  font-family: var(--sans); font-size: var(--fs-deck); line-height: 1.6;
  color: var(--w-dim);
}

/* ---- chips ---- */
.area__chips { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.area__chip {
  display: inline-block; padding: 8px 12px;
  font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .11em; line-height: 1;
  text-transform: uppercase; color: var(--w-dim);
  background: transparent; border: 1px solid var(--w-rule); border-radius: 0;
}

/* ---- destaque clinico ---- */
.area__home { margin: 32px 0 0; border-top: 1px solid var(--w-rule); border-bottom: 1px solid var(--w-rule); }
.area__home-label {
  display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 0 4px;
  font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--w-dim);
}
.area__home-mark { width: 14px; height: 2px; background: var(--w-accent); flex: none; }
.area__home-list { list-style: none; margin: 0; padding: 0; }
.area__home-list li {
  padding: 14px 0; border-top: 1px solid var(--w-rule);
  font-family: var(--sans); font-size: 0.95rem; line-height: 1.5; color: var(--w-dim);
}
.area__home-list li strong { color: var(--w-text); font-weight: 600; }

/* ---- acciones ---- */
.area__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
/* en mundo oscuro el ghost blanco ya contrasta; solo ajusto su hover-paint (hereda .btn) */

/* ---- imagen: card con tilt 3D + reveal por clip ---- */
.area__media {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 5; border: 1px solid var(--w-rule); border-radius: 0;
  background: rgba(0,0,0,.04);
  transform-style: preserve-3d; will-change: transform;
}
.area__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.96) contrast(1.02);
  transform: scale(1.06);           /* recorrido para el parallax sin bordes */
}
.area--dark .area__media img { filter: saturate(.9) contrast(1.03) brightness(.94); }

/* ---- campo de microscopio: se muestra ENTERO, no recortado ----
   Una fotomicrografia es un CIRCULO, no una foto rectangular. Con
   object-fit: cover, cualquier diferencia de proporcion entre la imagen y la
   tarjeta le muerde el borde del disco — y la tarjeta cambia de 4/5 en desktop
   a 4/3 en mobile, asi que ahi el disco quedaba cortado arriba y abajo.
   Con contain el encuadre deja de depender de la proporcion del contenedor: el
   disco entra completo en cualquiera de las dos. Tampoco lleva scale ni
   parallax, que volverian a comerle el borde: areas.js saltea estos frames. */
/* El disco viene recortado con canal alfa (av-frotis-*-cut.webp): sin fondo y
   sin marco, flota directo sobre el color del mundo de la seccion. Asi el tilt
   3D de la tarjeta mueve el CIRCULO y no una caja negra alrededor. */
.area__media--field { background: transparent; border-color: transparent; }
.area__media--field img { object-fit: contain; transform: none; }

/* ============================================================ RESPONSIVE */
@media (max-width: 900px) {
  /* Sticky-stack tambien en mobile, pero ANCLADO POR EL FONDO.
     Ninguna de las tres areas entra en una pantalla de telefono (medido a
     390x844: clinico 1220px, veterinario 944, industrial 949). Fijarlas en
     top:0 como en desktop, con overflow:hidden, les cortaria entre 100 y 376px
     de contenido. Con un top NEGATIVO el area scrollea entera y recien queda
     fija cuando su fondo toca el fondo de la pantalla; ahi la siguiente se le
     monta encima, que es el mismo pasaje de pagina del desktop sin perder una
     linea de texto. El top exacto depende de la altura real de cada area
     (cambia con el ancho, la fuente y las fotos), asi que lo calcula areas.js
     -> stickyTops() y lo recalcula al rotar o redimensionar. */
  .area { position: sticky; min-height: auto; }
  .areas .area:last-child { min-height: auto; }   /* pisa el 100vh de desktop */
  .area__inner {
    grid-template-columns: 1fr; gap: 28px;
    /* el tope extra despeja la isla de nav (fixed, borde inferior ~76px): al
       ser sticky, el scroll a un ancla aterriza en el techo del area sin
       restarle el alto de la nav */
    padding-block: 100px clamp(72px, 14vw, 104px);
  }
  .area__media, .area--flip .area__media { order: -1; }
  .area__media { aspect-ratio: 4 / 3; }
  .area__text { max-width: none; }
  .area__title { max-width: 18ch; font-size: clamp(1.9rem, 7vw, 2.6rem); }
  .area__deck { max-width: 52ch; }
  .area__actions { flex-direction: column; }
  .area__actions .btn { width: 100%; justify-content: center; }
}

/* ============================================================ REDUCED MOTION
   sin sticky-stack: las paginas se apilan normal y todo queda visible. */
@media (prefers-reduced-motion: reduce) {
  .area { position: relative; min-height: auto; }
}