/* ==========================================================================
   Clínica Paula Vega — Base
   Reset, tipografía, rejilla, secciones, utilidades y lenguaje de movimiento.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }
address { font-style: normal; }
table { border-collapse: collapse; width: 100%; }
strong { font-weight: 650; }

a {
  color: var(--teal-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 750; letter-spacing: -0.028em; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; line-height: 1.2; }
h4, .h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; line-height: var(--lh-snug); }
h1 em, h2 em { font-style: normal; }
p { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; border-radius: 2px; }
::selection { background: var(--teal-tint); color: var(--ink); }

/* --- Rejilla ------------------------------------------------------------ */
.container,
.shell {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell--narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* --- Secciones ---------------------------------------------------------- */
.section { padding-block: var(--section-y) calc(var(--section-y) + 8px); }
.section--alt,
.section--sand { background: var(--gray-50); border-block: 1px solid var(--gray-100); }
.section--night { background: var(--navy); color: var(--on-navy); }

.section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--flush { margin-bottom: 0; }
.section-head--center { margin-inline: auto; text-align: center; }

/* Título de sección con una barra corta teal: marca corporativa. */
.section-head > h2::before,
.reviews-summary h2::before,
.team__intro h2::before,
.visit__info h2::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--teal);
  margin-bottom: 20px;
}
.section-head--center > h2::before { margin-inline: auto; }

.lead { font-size: var(--fs-lg); color: var(--ink-2); line-height: 1.55; max-width: var(--measure); }
.section--night .lead { color: var(--on-navy-2); }
.note { font-size: var(--fs-sm); color: var(--ink-3); }

/* Rótulo pequeño (404, categoría del post). Uno por página como mucho. */
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-ink);
}

/* --- Utilidades --------------------------------------------------------- */
.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.icon--star { color: var(--star); }
.nowrap { white-space: nowrap; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: var(--z-skip);
  background: var(--navy); color: var(--on-navy); padding: 10px 16px; border-radius: var(--r-sm);
}
.skip-link:focus { top: 16px; }

/* ==========================================================================
   Movimiento — un solo lenguaje para toda la web
   Todo sube poco (8-16 px) y se asienta con --ease-out. Solo transform y
   opacity (y clip-path en la foto del hero). Todo dentro de
   prefers-reduced-motion: no-preference; con reduce, la página se pinta
   quieta y completa.
   ========================================================================== */

/* --- 1. Entrada del hero (CSS puro, no espera a JS) ------------------------
   El LCP suele ser el h1: se pinta desde el primer frame (nunca opacity 0).
   · h1: cada palabra (.hw, _src/hero_words.py) termina de subir dentro de su
     máscara, palabra a palabra (+45 ms).
   · Entradilla y CTA: suben y ganan contraste. Nunca parten de 0.
   · Foto: ya pintada, se descubre con un recorte lateral y se asienta.     */

@media (prefers-reduced-motion: no-preference) {
  .hw { clip-path: inset(-0.35em -0.2em 0 -0.2em); }
  .hw > span {
    display: inline-block;
    animation: hero-word 720ms var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 45ms + 40ms);
  }

  .hero__lead,
  .lp-hero__lead,
  .blog-hero .lead {
    animation: hero-lead 640ms var(--ease-out) 200ms both;
  }

  .hero [data-hero-ctas],
  .lp-hero [data-hero-ctas],
  .hero__alt {
    animation: hero-cta 480ms var(--ease-out) 240ms both;
  }

  .facts__item,
  .lp-facts,
  .article-head .byline {
    animation: hero-rise 520ms var(--ease-out) both;
    animation-delay: calc(280ms + var(--i, 0) * 60ms);
  }
  .facts__item:nth-child(2) { --i: 1; }
  .facts__item:nth-child(3) { --i: 2; }
  .facts__item:nth-child(4) { --i: 3; }

  .hero__media img,
  .lp-hero__media img {
    animation: hero-media 900ms var(--ease-out) 60ms both;
  }
  .article-hero img { animation: hero-scale 900ms var(--ease-out) both; }

  /* Llegada desde otra página de la web: ya hay transición entre páginas
     (sección 4), así que el hero no repite su entrada. La clase la pone el
     script del <head> en el evento pagereveal. */
  .vt-nav .hw > span,
  .vt-nav .hero__lead,
  .vt-nav .lp-hero__lead,
  .vt-nav .blog-hero .lead,
  .vt-nav [data-hero-ctas],
  .vt-nav .hero__alt,
  .vt-nav .facts__item,
  .vt-nav .lp-facts,
  .vt-nav .article-head .byline,
  .vt-nav .hero__media img,
  .vt-nav .lp-hero__media img,
  .vt-nav .article-hero img {
    animation: none;
  }
}

@keyframes hero-word { from { transform: translateY(0.62em); } }
@keyframes hero-lead { from { transform: translateY(12px); opacity: 0.4; } }
@keyframes hero-cta { from { transform: translateY(8px); opacity: 0.35; } }
@keyframes hero-rise { from { transform: translateY(10px); opacity: 0; } }
@keyframes hero-scale { from { transform: scale(1.03); } }
@keyframes hero-media {
  from { clip-path: inset(0 0 0 10% round var(--r-md)); transform: scale(1.02); }
  to { clip-path: inset(0 0 0 0 round var(--r-md)); transform: none; }
}

/* --- 2. Aparición al hacer scroll ----------------------------------------
   main.js marca con .reveal + data-reveal solo lo que está por debajo del
   pliegue al cargar (nunca oculta algo que ya se ve). Sin JS, todo visible.
   Variantes: up (cabeceras), card (tarjetas), side (pasos), media (figuras),
   fade (bandas y listados densos). Escalonado de 70 ms por tanda (máx. 5). */

@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .js .reveal[data-reveal='card'] { transform: translateY(18px); }
  .js .reveal[data-reveal='side'] { transform: translateX(-14px); }
  .js .reveal[data-reveal='media'] { transform: scale(0.98); transition-duration: 700ms; }
  .js .reveal[data-reveal='fade'] { transform: none; transition-duration: 600ms; }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* Al marcar (main.js) el estado oculto se aplica sin transición. */
  .reveal-init .reveal { transition: none; }
}

/* --- 3. Contador de reseñas ----------------------------------------------
   El número real sigue en el HTML (SEO, sin JS, lectores de pantalla). Mientras
   cuenta, main.js pone data-n y se pinta encima con ::after; el texto real se
   oculta con color transparente (no solo text-fill) y el ancho lo fija el
   número final, así que no se mueve nada. Cifras tabulares: sin baile.      */

.count { position: relative; display: inline-block; font-variant-numeric: tabular-nums; }
.count[data-n] { color: transparent; -webkit-text-fill-color: transparent; }
.count[data-n]::after {
  content: attr(data-n);
  content: attr(data-n) / '';
  position: absolute;
  inset: 0;
  text-align: right;
  color: var(--count-color, var(--ink-2));
  -webkit-text-fill-color: var(--count-color, var(--ink-2));
}

/* --- 4. Transición entre páginas (View Transitions entre documentos) -----
   Sin soporte: navegación normal. Barra superior y cabecera se quedan
   quietas; el contenido funde y sube 8 px.                                  */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .header { view-transition-name: site-header; }
  .topbar { view-transition-name: site-topbar; }
  ::view-transition-group(site-header),
  ::view-transition-group(site-topbar) { animation-duration: 0s; }
  ::view-transition-old(root) { animation: vt-out 160ms var(--ease-out) both; }
  ::view-transition-new(root) { animation: vt-in 280ms var(--ease-out) 60ms both; }
}

@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(8px); } }