/* ============================================================
   Clínica Dental Dr. Héctor Manuel Rojas Pérez — Atlacomulco
   Hoja de estilos única. Mobile-first (base = 360px).
   Puntos de quiebre: 768px (tablet), 1024px (escritorio).
   Ver Spec-Driven-Development.md, sección 5, para el porqué de
   cada token.
   ============================================================ */

/* ---------- 0. Fuentes autoalojadas (D-16) ---------- */
/* Playfair Display es una fuente variable: un solo archivo cubre 400–700 (spec 003). El respaldo local reserva casi el mismo
   espacio mientras llega, para evitar saltos de diseño. */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../assets/fonts/playfair-display.woff2') format('woff2');
}
@font-face {
  font-family: 'Playfair Fallback';
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 106%;
  ascent-override: 102%;
  descent-override: 24%;
  line-gap-override: 0%;
}
/* Inter es una fuente variable: un solo archivo cubre 400 y 500 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../assets/fonts/inter-400.woff2') format('woff2');
}

/* ---------- 1. Tokens de diseño (sección 5.1 / 5.2 / 5.3) ---------- */
:root {
  /* Paleta de marca (spec 003, D-23): escala de azules de la captura del cliente, gris oscuro frío, blanco y dorado */
  --azul-50: #E6F2FF;
  --azul-100: #B8DBFF;
  --azul-200: #8AC4FF;
  --azul-300: #5CADFF;
  --azul-400: #2E96FF;
  --azul-500: #0080FF;
  --azul-600: #0069D1;
  --azul-700: #0052A3;
  --azul-800: #003B75;
  --azul-900: #002347;
  --azul-950: #000D1A;
  --color-gris: #1A1D21;
  --color-gris-claro: #262B31;
  --color-blanco: #FFFFFF;
  --color-dorado: #F5C451;
  --color-dorado-oscuro: #7A5400;  /* estrellas si el fondo es claro (data-tono="claro") */
  /* Textos: el oscuro es casi negro (luminancia ≤ 0,0013) para que, en el punto de igual contraste con el fondo
     (js/principal.js conmuta ahí entre oscuro y claro), ambos den ≥ 4,5 : 1 */
  --color-texto-oscuro: #00050A;
  --color-texto-claro: #FFFFFF;

  /* Semánticos (los usa el resto de la hoja) */
  --color-fondo: var(--azul-50);
  --color-superficie: var(--color-blanco);
  --color-texto: var(--color-texto-oscuro);
  --color-texto-suave: var(--azul-900);
  --color-acento: var(--azul-600);        /* blanco sobre él: 5,3 : 1 */
  --color-acento-oscuro: var(--azul-800);
  --color-acento-claro: var(--azul-300);
  --color-foco: var(--azul-800);
  --color-whatsapp: #11803D;   /* verde de WhatsApp oscurecido: texto blanco con contraste ≥ 4,5:1 (Lighthouse) */
  --color-whatsapp-oscuro: #0D6A32;
  --color-overlay: rgba(0, 0, 0, .45);
  --color-borde: color-mix(in srgb, var(--azul-600) 22%, transparent);
  --color-acento-suave: color-mix(in srgb, var(--azul-600) 10%, transparent);
  --color-estrella: var(--color-dorado);
  --color-header: var(--azul-950);
  --color-header-vidrio: rgb(0 13 26 / .76);

  /* Hero: velos de luz y radiografía (los lee también js/dentadura.js) */
  --color-velo-fondo: #EEF8FB;
  --color-velo-1: #8ED2E4;
  --color-velo-2: #2F86B7;
  --color-rayosx: #0D2B57;
  --color-rayosx-luz: #A9BBD8;

  /* Tipografía */
  --fuente-titulos: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, sans-serif;

  /* Espaciado — múltiplos de 8px */
  --espacio-1: .5rem;
  --espacio-2: 1rem;
  --espacio-3: 1.5rem;
  --espacio-4: 2rem;
  --espacio-5: 3rem;
  --espacio-6: 4rem;
  --espacio-7: 5rem;
  --espacio-8: 6rem;

  --radio: 12px;
  --sombra: 0 10px 30px rgb(0 13 26 / .14);
  --sombra-suave: 0 2px 10px rgb(0 13 26 / .10);
  --sombra-barra: 0 -4px 16px rgba(0, 0, 0, .12);

  /* Altura del header en escritorio, usada para el scroll-margin de anclas */
  --alto-header: 76px;

  /* Alto de la barra fija de contacto en móvil */
  --alto-barra-fija: 60px;

  /* Alto del header en móvil (no es fijo): el hero mide el resto de la pantalla para verse completo al cargar */
  --alto-header-movil: 76px;

  /* Escala con la que arranca el cráneo en el hero (tamaño del último acercamiento) */
  --escala-figura: 1.6;
}

/* ---------- 2. Reinicio mínimo ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-fondo);
  color: var(--texto, var(--color-texto));
  font-family: var(--fuente-texto);
  line-height: 1.6;
  font-size: 16px;
  padding-bottom: calc(var(--alto-barra-fija) + env(safe-area-inset-bottom, 0px));
}
img { max-width: 100%; display: block; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { font-family: var(--fuente-titulos); font-weight: 600; line-height: 1.2; margin: 0; }
p { margin: 0 0 var(--espacio-2); }
button { font: inherit; border: none; background: none; cursor: pointer; }

@media (min-width: 1024px) {
  body { padding-bottom: 0; }
}

/* Movimiento reducido: se anula toda animación/transición y el scroll suave */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

.contenedor {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--espacio-3);
}

/* Enlace de salto, oculto hasta recibir foco (accesibilidad de teclado) */
.salto-contenido {
  position: absolute;
  left: var(--espacio-2);
  top: -100px;
  background: var(--color-superficie);
  color: var(--color-acento-oscuro);
  padding: var(--espacio-2) var(--espacio-3);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  z-index: 200;
  transition: top .2s ease;
  font-weight: 600;
}
.salto-contenido:focus { top: var(--espacio-2); }

/* Foco visible consistente en toda la página */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--color-foco);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Secciones ancladas: que el header fijo de escritorio no las tape */
section[id], footer[id] { scroll-margin-top: var(--espacio-3); }
@media (min-width: 1024px) {
  section[id], footer[id] { scroll-margin-top: calc(var(--alto-header) + var(--espacio-2)); }
}

.seccion__intro {
  max-width: 60ch;
  font-size: 1.05rem;
}

h2 { font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: var(--espacio-2); }
h3 { font-size: clamp(1.15rem, 2.5vw, 1.35rem); margin-bottom: var(--espacio-1); }

section { padding: var(--espacio-7) 0; }

/* ---------- 3. Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--espacio-1);
  min-height: 44px;
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.boton svg { width: 1.2em; height: 1.2em; flex-shrink: 0; }
.boton:hover { transform: translateY(-2px); }

.boton--acento { background: var(--color-acento); color: var(--color-superficie); }
.boton--acento:hover { background: var(--color-acento-oscuro); }

.boton--whatsapp { background: var(--color-whatsapp); color: var(--color-superficie); }
.boton--whatsapp:hover { background: var(--color-whatsapp-oscuro); }

.boton--fantasma {
  background: transparent;
  color: var(--color-acento-oscuro);
  border: 2px solid var(--color-borde);
}
.boton--fantasma:hover { background: var(--color-acento-suave); }
.encabezado .boton--fantasma {
  color: var(--azul-100);
  border-color: color-mix(in srgb, var(--azul-100) 38%, transparent);
}
.encabezado .boton--fantasma:hover { background: color-mix(in srgb, var(--azul-100) 14%, transparent); }

.boton--grande { padding: 1.1rem 2.2rem; font-size: 1.1rem; box-shadow: var(--sombra); }

/* ---------- 4. Header ---------- */
/* Oscuro desde el inicio; en escritorio (sticky) pasa a semitranslúcido con desenfoque al desplazarse (is-desplazado,
   js/principal.js). En móvil no es fijo y se queda oscuro. */
.encabezado {
  --color-foco: var(--azul-300);
  background: var(--color-header);
  color: var(--color-texto-claro);
  box-shadow: var(--sombra-suave);
  position: relative;
  z-index: 100;
}
.encabezado__contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding-top: var(--espacio-2);
  padding-bottom: var(--espacio-2);
}
.encabezado__logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--fuente-titulos);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: .01em;
  color: var(--azul-100);
}
.encabezado__logo img { width: 44px; height: 44px; flex-shrink: 0; }
.encabezado__logo strong { display: block; font-weight: 600; font-size: 1.12em; color: var(--color-texto-claro); }

/* Menú desplegable en móvil y tableta: el mismo <nav> se muestra como panel bajo el header */
.encabezado__nav {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--color-header);
  border-top: 1px solid color-mix(in srgb, var(--azul-100) 16%, transparent);
  box-shadow: 0 18px 30px rgb(0 13 26 / .35);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s;
}
.encabezado.is-abierto .encabezado__nav {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .2s ease, transform .2s ease;
}
.encabezado__nav ul { padding: var(--espacio-1) var(--espacio-3) var(--espacio-2); }
.encabezado__nav li + li { border-top: 1px solid color-mix(in srgb, var(--azul-100) 12%, transparent); }
.encabezado__nav a {
  display: flex;
  align-items: center;
  min-height: 52px;
  font-family: var(--fuente-titulos);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--azul-100);
}
.encabezado__nav a:hover, .encabezado__nav a:focus-visible { color: var(--color-texto-claro); }

.encabezado__telefono { display: none; }

.encabezado__menu-boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 44px;
  padding: .5rem 1rem;
  border: 1px solid color-mix(in srgb, var(--azul-100) 38%, transparent);
  border-radius: 999px;
  color: var(--azul-100);
  font-weight: 600;
  font-size: .95rem;
}
.encabezado__menu-boton:hover { background: color-mix(in srgb, var(--azul-100) 14%, transparent); }
.encabezado__menu-icono { position: relative; display: block; width: 18px; height: 14px; }
.encabezado__menu-icono i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .2s ease, opacity .2s ease, top .2s ease;
}
.encabezado__menu-icono i:nth-child(1) { top: 0; }
.encabezado__menu-icono i:nth-child(2) { top: 6px; }
.encabezado__menu-icono i:nth-child(3) { top: 12px; }
.encabezado.is-abierto .encabezado__menu-icono i:nth-child(1) { top: 6px; transform: rotate(45deg); }
.encabezado.is-abierto .encabezado__menu-icono i:nth-child(2) { opacity: 0; }
.encabezado.is-abierto .encabezado__menu-icono i:nth-child(3) { top: 6px; transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .encabezado {
    position: sticky;
    top: 0;
    border-bottom: 1px solid transparent;
    transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  }
  .encabezado__contenedor { min-height: var(--alto-header); }
  .encabezado__nav {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    background: none;
    border: 0;
    box-shadow: none;
    transition: none;
  }
  .encabezado__nav ul { display: flex; gap: var(--espacio-4); padding: 0; }
  .encabezado__nav li + li { border: 0; }
  .encabezado__nav a {
    display: inline;
    min-height: 0;
    font-family: var(--fuente-texto);
    font-size: 1rem;
    font-weight: 500;
    color: var(--azul-100);
    padding: .5rem 0;
    border-bottom: 2px solid transparent;
    transition: border-color .15s ease, color .15s ease;
  }
  .encabezado__nav a:hover { color: var(--color-texto-claro); border-color: var(--azul-300); }
  .encabezado__telefono {
    display: inline-flex;
    padding: .55rem 1.1rem;
    font-size: .95rem;
  }
  .encabezado__menu-boton { display: none; }

  /* Tras desplazarse: oscuro translúcido; el contenido que pasa por debajo se adivina difuminado */
  .encabezado.is-desplazado {
    background: var(--color-header-vidrio);
    border-bottom-color: color-mix(in srgb, var(--azul-100) 16%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .encabezado.is-desplazado { background: color-mix(in srgb, var(--color-header) 94%, transparent); }
  }
}

/* ---------- 5. Hero ---------- */
/* Una sola disposición para todos los modos (specs/002-hero-estatico-scroll): el escenario mide el resto de la
   pantalla y el eslogan y «Servicios» van superpuestos a la figura, en el hueco de la boca abierta, igual que en el
   3D, de modo que las imágenes estáticas y el canvas coinciden en posición. --apertura (0–1) gobierna el revelado:
   la escribe js/principal.js (bloqueo de introducción en el modo 3D, scroll en el estático con transición). Por
   defecto vale 1 (composición final: sin JS, movimiento reducido, móvil apaisado bajo). Con data-hero="animado"
   js/dentadura.js dibuja un canvas (velos que siguen al cursor + radiografía 3D) detrás del contenido. */
.hero {
  position: relative;
  padding: 0;
  color: var(--color-texto);
  --apertura: 1;
  /* t = smoothstep(apertura / 0,7): mismas curvas que el 3D (js/dentadura.js) para el fundido y la traslación */
  --x: clamp(0, var(--apertura) / .7, 1);
  --t: calc(var(--x) * var(--x) * (3 - 2 * var(--x)));
  /* El póster cerrado solo desaparece cuando el cráneo abierto ya cargó (onload del <img> → data-abierto-listo) */
  --listo: 0;
}
html[data-abierto-listo] .hero { --listo: 1; }
/* Con JS (data-hero en los dos modos: 3D e imágenes) el hero arranca cerrado y el bloqueo de introducción de
   js/principal.js escribe --apertura; sin JS queda la composición final (--apertura: 1) */
html[data-hero] .hero { --apertura: 0; }
.hero__escenario {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: calc(100svh - var(--alto-barra-fija) - var(--alto-header-movil));
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  justify-items: center;
  gap: var(--espacio-2);
  padding: var(--espacio-3) var(--espacio-3) var(--espacio-2);
  text-align: center;
  /* Fondo de imagen con una versión apaisada (PC) y otra vertical (móvil): el navegador pide solo la que casa.
     Mientras llega se ve el color liso del token; con el 3D listo el canvas lo cubre. */
  background-color: var(--color-velo-fondo);
  background-size: cover;
  background-position: center;
}
@media (orientation: landscape) {
  .hero__escenario { background-image: url('../assets/img/fondo-hero-pc.webp'); }
}
@media (orientation: portrait) {
  .hero__escenario { background-image: url('../assets/img/fondo-hero-movil.webp'); }
}
.hero__escenario > :not(.hero__canvas) { grid-column: 1; }
.hero__canvas {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  touch-action: pan-y;
}
.hero__canvas.is-listo { opacity: 1; }

.hero__cabecera {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
}
.hero__logo {
  width: 64px;
  height: 64px;
}
.hero__titulo {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .07em;
  color: var(--color-acento-oscuro);
  text-transform: uppercase;
  max-width: 40ch;
  text-shadow: 0 0 .3rem var(--color-superficie), 0 0 .8rem var(--color-superficie), 0 0 1.4rem var(--color-superficie);
}
.hero__figura,
.hero__dientes {
  position: relative;
  grid-row: 2;
  width: 100%;
  max-width: 44rem;
  min-height: 0;
  /* Contenedor de tamaño: .hero__poster-caja mide el rectángulo «contain» del póster con unidades de contenedor */
  container-type: size;
  /* El cráneo arranca ya «acercado»; las imágenes y el 3D comparten esta escala (js/dentadura.js mide el recuadro ya escalado) */
  transform: scale(var(--escala-figura));
}
/* el póster es opaco y blanco: multiplicar deja ver el fondo a través del hueso
   (va en la figura, no en la imagen, porque transform crea su propio contexto de apilamiento) */
.hero__figura { mix-blend-mode: multiply; }
/* Los dientes van aparte, sin multiply (con él se teñirían del color del fondo): capas con transparencia, hermanas de
   la figura, con su misma caja, escala y fundido; no reciben clics (el clic es de la figura) */
.hero__dientes { pointer-events: none; }
/* Rectángulo del póster (proporción fija 524:564, centrado, como object-fit: contain): es la referencia de
   js/dentadura.js para calibrar la cámara y de las imágenes del cráneo (póster y cráneo abierto) */
.hero__poster-caja {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, calc(100cqh * 524 / 564));
  aspect-ratio: 524 / 564;
  transform: translate(-50%, -50%);
}
.hero__poster-caja {
  /* Recuadro del cráneo abierto y desplazamiento de la cámara (% del rectángulo del póster); salida de
     referencias/herramientas/codificar-craneo.py, una por variante de imagen (< 1024 px y ≥ 1024 px) */
  --abierto-izq: -.62%;
  --abierto-arr: -11.96%;
  --abierto-ancho: 103.47%;
  --abierto-alto: 113.90%;
  --despl-x: .85%;
  --despl-y: -14.05%;
}
.hero__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Se funde con el abierto (--t) y acompaña la bajada de la cámara con la traslación t·Δ */
  opacity: calc(1 - var(--t) * var(--listo));
  transform: translate(calc(var(--despl-x) * var(--t)), calc(var(--despl-y) * var(--t)));
}
/* Cráneo abierto: la caja ocupa el póster (para que el % del translate sea del póster) y la imagen se coloca dentro */
.hero__abierto {
  position: absolute;
  inset: 0;
  display: block;
  opacity: var(--t);
  transform: translate(calc(var(--despl-x) * (var(--t) - 1)), calc(var(--despl-y) * (var(--t) - 1)));
}
.hero__abierto img {
  position: absolute;
  left: var(--abierto-izq);
  top: var(--abierto-arr);
  width: var(--abierto-ancho);
  height: var(--abierto-alto);
  max-width: none;
}
/* Los dientes son opacos: con la misma curva que el hueso el cruce de las dos poses dejaría ver el fondo a través de ellos
   a mitad de la apertura; el cerrado se retira más tarde (1 - t²) para que la suma siga cubriendo casi todo */
.hero__dientes .hero__poster { opacity: calc(1 - var(--t) * var(--t) * var(--listo)); }
/* Con el 3D listo las imágenes se retiran con un fundido */
.hero__figura.is-3d .hero__poster,
.hero__figura.is-3d .hero__abierto,
.hero__figura.is-3d ~ .hero__dientes .hero__poster,
.hero__figura.is-3d ~ .hero__dientes .hero__abierto {
  opacity: 0;
  transition: opacity .35s ease;
}
/* Pantallas táctiles: un toque abre/cierra la mandíbula, pero si se mantiene pulsado el modelo no se selecciona ni ofrece guardar
   la imagen (menú de pulsación larga, arrastre): las imágenes no reciben el puntero, que va al contenedor de la figura */
@media (pointer: coarse) {
  .hero__figura, .hero__dientes, .hero__efectos, .hero__canvas, .hero__poster-caja img {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-tap-highlight-color: transparent;
  }
  .hero__figura img, .hero__dientes img, .hero__efectos img { pointer-events: none; }
}
/* Clic sobre el cráneo: abre/cierra la mandíbula (js/principal.js añade role="button") */
.hero__figura[role="button"] { -webkit-tap-highlight-color: transparent; }
/* El clic solo cuenta cerca del cráneo: el cursor de mano aparece únicamente ahí (js/principal.js) */
.hero__figura.is-sobre-modelo { cursor: pointer; }
.hero__figura[role="button"]:focus-visible {
  outline: 3px solid var(--color-acento-oscuro);
  outline-offset: -3px;
  border-radius: 8px;
}

/* Sobre la figura: eslogan y botón juntos, en la parte baja de la boca abierta */
.hero__revelado {
  grid-row: 2;
  align-self: stretch;
  justify-self: stretch;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding-top: 10%;
  /* Revelado del eslogan y «Servicios» ligado a --apertura. Solo opacity/transform; el botón sigue en el
     orden de tabulación y se muestra con foco. */
  --rev-eslogan: clamp(0, (var(--apertura, 0) - 0.3) / 0.3, 1);
  --rev-boton: clamp(0, (var(--apertura, 0) - 0.4) / 0.3, 1);
}
.hero__eslogan {
  font-family: var(--fuente-titulos);
  font-weight: 600;
  font-size: clamp(1.25rem, 3.6vw, 1.85rem);
  line-height: 1.15;
  max-width: 16ch;
  margin: 0;
  color: var(--azul-900);
  text-shadow: 0 0 .3rem var(--color-superficie);
  opacity: var(--rev-eslogan);
  transform: translateY(calc((1 - var(--rev-eslogan)) * 18px));
}
.hero__servicios {
  opacity: var(--rev-boton);
  transform: translateY(calc((1 - var(--rev-boton)) * 14px));
}
.hero__servicios svg { width: 1.1em; height: 1.1em; }
/* Botón de cristal transparente (spec 003, R6): vidrio azul translúcido con desenfoque, borde luminoso y reflejo */
.hero__servicios {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--azul-900);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--azul-100) 58%, transparent), color-mix(in srgb, var(--azul-300) 24%, transparent));
  border: 1px solid color-mix(in srgb, var(--color-blanco) 78%, transparent);
  box-shadow:
    0 10px 26px color-mix(in srgb, var(--azul-700) 24%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--color-blanco) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--azul-400) 28%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  backdrop-filter: blur(10px) saturate(150%);
}
.hero__servicios::before {
  content: "";
  position: absolute;
  inset: 0 0 52% 0;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--color-blanco) 62%, transparent), transparent);
  border-radius: inherit;
  pointer-events: none;
}
.hero__servicios:hover {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--azul-100) 72%, transparent), color-mix(in srgb, var(--azul-300) 38%, transparent));
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__servicios { background: color-mix(in srgb, var(--azul-100) 82%, transparent); }
}

/* Efectos sobre el cráneo (spec 003, R7 y R8): destellos sobre los dientes y gesto de toque. Misma caja, escala y fundido
   que las imágenes de dientes; decorativos, sin clics. Posiciones: referencias/herramientas/puntos-destellos.py */
.hero__efectos {
  position: relative;
  grid-row: 2;
  width: 100%;
  max-width: 44rem;
  min-height: 0;
  container-type: size;
  transform: scale(var(--escala-figura));
  pointer-events: none;
  z-index: 1;
  --l: var(--listo);
}
.hero__figura.is-3d ~ .hero__efectos { --l: 1; }
.hero__destellos { position: absolute; inset: 0; }
.hero__destellos--cerrado { opacity: calc(1 - var(--t) * var(--l)); }
.hero__destellos--abierto { opacity: calc(var(--t) * var(--l)); }
.hero__destellos i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(18px, 6.4cqmin, 38px);
  aspect-ratio: 1;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  /* Núcleo blanco con halo azul (el diente ya es blanco: sin el halo el brillo no se vería) y cuatro rayos */
  background:
    radial-gradient(ellipse 50% 7% at 50% 50%, var(--color-blanco), color-mix(in srgb, var(--azul-200) 60%, transparent) 70%, transparent),
    radial-gradient(ellipse 7% 50% at 50% 50%, var(--color-blanco), color-mix(in srgb, var(--azul-200) 60%, transparent) 70%, transparent),
    radial-gradient(circle at 50% 50%, var(--color-blanco) 0 10%, color-mix(in srgb, var(--azul-200) 75%, transparent) 24%, transparent 56%);
  filter: drop-shadow(0 0 3px var(--azul-400));
  animation: destello var(--d, 5s) ease-in-out var(--r, 0s) infinite;
}
.hero__destellos i:nth-child(3n + 1) { --d: 5.2s; --r: .3s; }
.hero__destellos i:nth-child(3n + 2) { --d: 6.4s; --r: 2.1s; }
.hero__destellos i:nth-child(3n) { --d: 4.6s; --r: 3.4s; }
.hero__destellos i:nth-child(4n) { --d: 7s; --r: 1.2s; }
@keyframes destello {
  0%, 68%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(0deg); }
  78% { opacity: .95; transform: translate(-50%, -50%) scale(1) rotate(18deg); }
  90% { opacity: 0; transform: translate(-50%, -50%) scale(.35) rotate(40deg); }
}
/* Gesto de scroll: con la mandíbula cerrada invita a desplazar para abrirla (js/principal.js alterna is-gesto). Con ratón, una
   rueda que baja; en pantallas táctiles, un dedo que desliza hacia arriba */
.hero__gesto {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 13%;
  aspect-ratio: 32 / 44;
  overflow: visible;
  opacity: 0;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--azul-950) 45%, transparent));
}
/* Placa oscura translúcida detrás: los trazos blancos se leen también sobre los dientes */
.hero__gesto .placa { fill: color-mix(in srgb, var(--azul-950) 58%, transparent); }
.hero__gesto .gesto__mano { display: none; }
@media (pointer: coarse) {
  .hero__gesto .gesto__raton { display: none; }
  .hero__gesto .gesto__mano { display: inline; }
}
.hero__gesto .cuerpo {
  fill: color-mix(in srgb, var(--azul-950) 45%, transparent);
  stroke: var(--color-blanco);
  stroke-width: 1.6;
}
.hero__gesto .rueda { fill: var(--color-blanco); }
.hero__gesto .flecha, .hero__gesto .flecha-arriba {
  fill: none;
  stroke: var(--color-blanco);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero__gesto .mano {
  fill: var(--color-blanco);
  stroke: var(--azul-800);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.hero__efectos.is-gesto .hero__gesto { animation: gesto-visible 2.6s ease-in-out 1; }
.hero__efectos.is-gesto .rueda { animation: rueda 2.6s ease-in-out 1; }
.hero__efectos.is-gesto .flecha { animation: flecha 2.6s ease-in-out 1; }
.hero__efectos.is-gesto .flecha:nth-of-type(2) { animation-delay: .15s; }
.hero__efectos.is-gesto .mano-g { animation: desliza 2.6s ease-in-out 1; }
.hero__efectos.is-gesto .flecha-arriba { animation: flecha-sube 2.6s ease-in-out 1; }
@keyframes gesto-visible {
  0% { opacity: 0; }
  12%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
/* La rueda baja dos veces y las flechas la siguen */
@keyframes rueda {
  0%, 12% { transform: translateY(0); opacity: 1; }
  40% { transform: translateY(9px); opacity: 0; }
  41%, 55% { transform: translateY(0); opacity: 0; }
  60% { transform: translateY(0); opacity: 1; }
  85% { transform: translateY(9px); opacity: 0; }
  100% { transform: translateY(9px); opacity: 0; }
}
@keyframes flecha {
  0%, 14% { opacity: .25; }
  35% { opacity: 1; }
  50% { opacity: .25; }
  60% { opacity: .25; }
  80% { opacity: 1; }
  100% { opacity: .25; }
}
/* El dedo desliza hacia arriba dos veces */
@keyframes desliza {
  0%, 12% { transform: translateY(12px); }
  42% { transform: translateY(-6px); }
  52%, 56% { transform: translateY(12px); }
  86% { transform: translateY(-6px); }
  100% { transform: translateY(-6px); }
}
@keyframes flecha-sube {
  0%, 12% { opacity: .3; }
  42% { opacity: 1; }
  52%, 56% { opacity: .3; }
  86% { opacity: 1; }
  100% { opacity: .3; }
}
/* Mientras el bloqueo de introducción gobierna el progreso, el botón solo recibe clics una vez revelado */
html[data-hero] .hero__revelado { pointer-events: none; }
html[data-hero] .hero__servicios { pointer-events: none; }
html[data-hero] #inicio[data-revelado] .hero__servicios,
html[data-hero] .hero__servicios:focus-visible,
.hero__servicios:focus-visible {
  pointer-events: auto;
}
.hero__servicios:focus-visible {
  opacity: 1;
  transform: none;
}
/* Si la imagen del cráneo abierto falla, el póster cerrado se queda y el eslogan y el botón se ven siempre */
html[data-abierto-fallo] .hero__revelado {
  --rev-eslogan: 1;
  --rev-boton: 1;
}
html[data-abierto-fallo] .hero__servicios { pointer-events: auto; }
.hero__contacto {
  grid-row: 3;
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espacio-1);
}
.hero__telefono {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--azul-900);
  padding: .3rem .6rem;
}
.hero__telefono svg { width: 1.1em; height: 1.1em; }
.hero__horario {
  font-size: .9rem;
  color: var(--color-texto-suave);
  margin: 0;
  /* Una línea reservada: el texto llega por JavaScript (data-campo) y, sin esto, movería la fila central */
  min-height: 1.6em;
  text-shadow: 0 0 .25rem var(--color-superficie);
}

@media (max-height: 700px) {
  .hero__escenario { gap: var(--espacio-1); padding-top: var(--espacio-2); }
  .hero__logo { width: 48px; height: 48px; }
  .hero__titulo { font-size: .8rem; }
}
@media (min-width: 768px) {
  .hero__eslogan { max-width: 30ch; }
}
@media (min-width: 1024px) {
  .hero__poster-caja {
    --abierto-izq: .13%;
    --abierto-arr: -12.80%;
    --abierto-ancho: 102.07%;
    --abierto-alto: 114.48%;
    --despl-x: .86%;
    --despl-y: -14.18%;
  }
  /* En escritorio la boca abierta es más baja: subir el grupo para ver los dientes de arriba y de abajo */
  .hero__revelado { padding-top: 5%; padding-bottom: 0; }
  .hero__eslogan { max-width: 40ch; }
  .hero__escenario { height: calc(100svh - var(--alto-header)); }
}

/* Móvil en horizontal: la pantalla es muy baja (≈ 300 px útiles). El hero deja de ajustarse a la
   pantalla, mide lo que necesita su contenido y la figura se acota; se desplaza como una página normal.
   Con container-type: size la figura no aporta tamaño propio: su alto sale de la proporción del póster. */
@media (orientation: landscape) and (max-height: 500px) {
  .hero__escenario {
    height: auto;
    min-height: 26rem;
  }
  .hero__figura,
  .hero__dientes { max-width: 17rem; aspect-ratio: 524 / 564; }
}

/* Solo hay dos modos: 3D e imágenes (también con «reducir movimiento»), con el mismo bloqueo de introducción: el
   cráneo se abre con las primeras acciones de scroll. La única excepción es el móvil apaisado bajo, donde el hero no
   cabe en pantalla: composición final (cráneo abierto, eslogan y botón en la boca) y página normal. js/principal.js
   también escribe --apertura: 1 allí; esto evita el salto mientras tanto. */
@media (prefers-reduced-motion: reduce) {
  .hero__canvas,
  .hero__figura.is-3d .hero__poster,
  .hero__figura.is-3d .hero__abierto,
  .hero__figura.is-3d ~ .hero__dientes .hero__poster,
  .hero__figura.is-3d ~ .hero__dientes .hero__abierto { transition: none; }
}
@media (orientation: landscape) and (max-height: 500px) {
  html[data-hero] .hero { --apertura: 1; }
  .hero__gesto { display: none; }
  .hero__efectos { max-width: 17rem; aspect-ratio: 524 / 564; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__efectos { display: none; }
}

/* Posiciones de los destellos (salida de referencias/herramientas/puntos-destellos.py, % de la caja del póster) */
/* Cerrado: coordenadas = % de la caja del póster */
.hero__destellos--cerrado i:nth-child(1) { --x: 70.5%; --y: 55.3%; }
.hero__destellos--cerrado i:nth-child(2) { --x: 43.0%; --y: 54.9%; }
.hero__destellos--cerrado i:nth-child(3) { --x: 31.0%; --y: 59.1%; }
.hero__destellos--cerrado i:nth-child(4) { --x: 55.5%; --y: 49.8%; }
.hero__destellos--cerrado i:nth-child(5) { --x: 56.5%; --y: 62.8%; }
.hero__destellos--cerrado i:nth-child(6) { --x: 21.5%; --y: 49.3%; }
.hero__destellos--cerrado i:nth-child(7) { --x: 32.0%; --y: 49.3%; }
.hero__destellos--cerrado i:nth-child(8) { --x: 39.0%; --y: 62.3%; }
.hero__destellos--cerrado i:nth-child(9) { --x: 76.5%; --y: 48.8%; }
.hero__destellos--cerrado i:nth-child(10) { --x: 64.5%; --y: 49.3%; }

/* Abierto, < 1024 px */
.hero__destellos--abierto i:nth-child(1) { --x: 31.5%; --y: 60.4%; }
.hero__destellos--abierto i:nth-child(2) { --x: 41.8%; --y: 39.2%; }
.hero__destellos--abierto i:nth-child(3) { --x: 57.3%; --y: 74.4%; }
.hero__destellos--abierto i:nth-child(4) { --x: 74.4%; --y: 55.1%; }
.hero__destellos--abierto i:nth-child(5) { --x: 66.6%; --y: 36.8%; }
.hero__destellos--abierto i:nth-child(6) { --x: 68.2%; --y: 65.3%; }
.hero__destellos--abierto i:nth-child(7) { --x: 24.2%; --y: 38.2%; }
.hero__destellos--abierto i:nth-child(8) { --x: 41.3%; --y: 73.5%; }
.hero__destellos--abierto i:nth-child(9) { --x: 54.2%; --y: 40.6%; }
.hero__destellos--abierto i:nth-child(10) { --x: 25.2%; --y: 50.3%; }

@media (min-width: 1024px) {
  .hero__destellos--abierto i:nth-child(1) { --x: 46.1%; --y: 39.9%; }
  .hero__destellos--abierto i:nth-child(2) { --x: 70.0%; --y: 58.0%; }
  .hero__destellos--abierto i:nth-child(3) { --x: 61.4%; --y: 34.7%; }
  .hero__destellos--abierto i:nth-child(4) { --x: 76.2%; --y: 34.7%; }
  .hero__destellos--abierto i:nth-child(5) { --x: 32.3%; --y: 33.3%; }
  .hero__destellos--abierto i:nth-child(6) { --x: 30.2%; --y: 59.4%; }
  .hero__destellos--abierto i:nth-child(7) { --x: 48.6%; --y: 74.1%; }
  .hero__destellos--abierto i:nth-child(8) { --x: 60.9%; --y: 74.6%; }
  .hero__destellos--abierto i:nth-child(9) { --x: 35.9%; --y: 70.3%; }
  .hero__destellos--abierto i:nth-child(10) { --x: 22.1%; --y: 36.1%; }
}

/* Hero → servicios sin corte: la base del hero se funde con el color de fondo */
.hero__escenario::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3.5rem;
  background: linear-gradient(180deg, transparent, var(--fondo, var(--azul-50)));
  pointer-events: none;
}

/* ---------- 5a. Pantalla de presentación (spec 003, D-25) ---------- */
/* Solo existe con la clase «cargando» (la pone el <head> con JavaScript). Entran 4 pares de dientes (arriba desde la izquierda,
   abajo desde la derecha) sobre el logo; js/principal.js añade --cierra (las filas se juntan sobre el logo) y --sale (fundido).
   Respaldo sin JavaScript de principal.js: la animación --segura la oculta sola a los 7 s (el tope de JS es 4,5 s). */
.presentacion { display: none; }
html.cargando .presentacion {
  --d: clamp(64px, min(18.5vw, 21vh), 150px);   /* lado del diente */
  --pad: max(4vh, 20px);
  --cierre: calc(50cqh - var(--pad) - var(--d) * .98);   /* las coronas quedan a ≈ .08 d una de otra: separación ligera */
  position: fixed;
  inset: 0;
  z-index: 1000;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--azul-950);
  color: var(--color-texto-claro);
  animation: presentacion-segura 0s linear 7s forwards;
}
/* En pausa hasta que el logo y la tipografía estén cargados (clase --lista): así nada «salta» al aparecer */
html.cargando .presentacion:not(.presentacion--lista) * { animation-play-state: paused; }
.presentacion__fila {
  z-index: 1;   /* por encima del logo: al cerrarse, los dientes lo tapan */
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: calc(var(--d) * .26);
}
.presentacion__fila--arriba { top: var(--pad); }
.presentacion__fila--abajo { bottom: var(--pad); }
.presentacion__diente { width: var(--d); height: var(--d); overflow: visible; opacity: 0; animation: diente-entra .38s cubic-bezier(.2, .8, .3, 1) forwards; }
/* El <symbol> es el original que clonan los <use>: sus reglas van sobre él (trazo blanco; relleno del color del fondo, que tapa el logo) */
#diente-presentacion path { fill: var(--color-blanco); }
#diente-presentacion .presentacion__relleno { fill: var(--azul-950); }
/* Pares: el n.º 1 arriba a la izquierda y abajo a la derecha; el 4.º cierra la cuadrícula */
.presentacion__fila--arriba .presentacion__diente:nth-child(1), .presentacion__fila--abajo .presentacion__diente:nth-child(4) { animation-delay: .2s; }
.presentacion__fila--arriba .presentacion__diente:nth-child(2), .presentacion__fila--abajo .presentacion__diente:nth-child(3) { animation-delay: .55s; }
.presentacion__fila--arriba .presentacion__diente:nth-child(3), .presentacion__fila--abajo .presentacion__diente:nth-child(2) { animation-delay: .9s; }
.presentacion__fila--arriba .presentacion__diente:nth-child(4), .presentacion__fila--abajo .presentacion__diente:nth-child(1) { animation-delay: 1.25s; }
.presentacion__marca {
  position: relative;
  z-index: 0;
  display: flex;
  align-items: center;
  gap: clamp(.75rem, 3vw, 1.6rem);
  opacity: 0;
  animation: marca-entra .5s ease .05s forwards;
}
.presentacion__marca img { width: clamp(64px, 16vh, 128px); height: auto; flex-shrink: 0; }
.presentacion__nombre { margin: 0; font-family: var(--fuente-titulos); line-height: 1.15; font-size: clamp(1.15rem, 3.3vw, 2.3rem); }
.presentacion__nombre span { display: block; font-weight: 600; color: var(--azul-100); }
.presentacion__nombre strong { display: block; font-weight: 700; color: var(--color-blanco); font-size: 1.12em; }
@keyframes diente-entra {
  from { opacity: 0; transform: scale(.72); }
  to { opacity: 1; transform: none; }
}
@keyframes marca-entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
/* Cierre: las dos filas se juntan sobre el logo (los dientes llevan relleno y lo tapan) y el logo se apaga */
/* El logo se apaga primero (.35 s) y las filas empiezan a cerrarse un instante después (.15 s) */
.presentacion--cierra .presentacion__fila--arriba { animation: fila-baja .6s cubic-bezier(.7, 0, .3, 1) .15s forwards; }
.presentacion--cierra .presentacion__fila--abajo { animation: fila-sube .6s cubic-bezier(.7, 0, .3, 1) .15s forwards; }
.presentacion--cierra .presentacion__marca { animation: marca-sale .35s ease-in forwards; }
/* Al cerrar las filas bajan y suben hasta casi tocarse (sin solaparse ni juntarse entre sí) */
@keyframes fila-baja { to { transform: translateY(var(--cierre)); } }
@keyframes fila-sube { to { transform: translateY(calc(var(--cierre) * -1)); } }
@keyframes marca-sale { from { opacity: 1; } to { opacity: 0; transform: scale(.94); } }
.presentacion--sale { animation: presentacion-sale .45s ease forwards !important; }
@keyframes presentacion-sale { to { opacity: 0; } }
@keyframes presentacion-segura { to { opacity: 0; visibility: hidden; pointer-events: none; } }
@media (max-width: 767px) {
  /* Móvil: dientes más grandes y juntos (4 por fila en el ancho) y el logo y el nombre apilados entre las dos filas */
  html.cargando .presentacion { --d: clamp(64px, min(22vw, 18vh), 120px); }
  .presentacion__fila { gap: calc(var(--d) * .08); }
  .presentacion__marca { flex-direction: column; text-align: center; gap: .6rem; }
  .presentacion__marca img { width: clamp(72px, 14vh, 112px); }
  .presentacion__nombre { font-size: clamp(1.25rem, 6.2vw, 1.7rem); }
}

/* ---------- 5b. Fondo continuo y color por sección (spec 003) ---------- */
/* Con JavaScript (html[data-fondo]) js/principal.js escribe --fondo (capa fija) y --texto (texto libre, que conmuta entre
   oscuro y claro en el punto de igual contraste), y las secciones son transparentes. Sin JavaScript o con «reducir
   movimiento» cada sección lleva su color fijo: servicios con un degradado de azul muy claro a oscuro, doctor,
   consultorio y reseñas en gris, ubicación en blanco; el texto usa --texto-seccion. --tx es el color de texto vigente. */
.fondo-continuo {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-color: var(--fondo, var(--azul-50));
  pointer-events: none;
}
section:not(.hero), .pie {
  --tx: var(--texto, var(--texto-seccion, var(--color-texto)));
  color: var(--tx);
}
.servicios {
  --texto-seccion: var(--color-texto-oscuro);
  background: linear-gradient(180deg, var(--azul-50) 0%, var(--azul-100) 18%, var(--azul-300) 42%, var(--azul-600) 70%, var(--azul-800) 100%);
}
.doctor {
  --texto-seccion: var(--color-texto-claro);
  background: linear-gradient(180deg, var(--azul-800) 0, var(--color-gris) 9rem), var(--color-gris);
}
.galeria, .resenas {
  --texto-seccion: var(--color-texto-claro);
  background: var(--color-gris);
}
.pie {
  --texto-seccion: var(--color-texto-oscuro);
  background: linear-gradient(180deg, var(--color-gris) 0, var(--color-blanco) 6rem), var(--color-blanco);
  padding-top: calc(var(--espacio-7) + 2rem);
}
html[data-fondo="continuo"] section:not(.hero),
html[data-fondo="continuo"] .pie {
  background: transparent;
}
html[data-fondo="continuo"] .pie { padding-top: var(--espacio-7); }
html[data-fondo="continuo"] { background: transparent; }
html[data-fondo="continuo"] body { background: transparent; }
/* Foco visible en cada fondo */
html[data-tono="oscuro"] { --color-foco: var(--azul-300); }
.doctor, .galeria, .resenas { --color-foco: var(--azul-300); }
.servicios, .pie { --color-foco: var(--azul-800); }

/* ---------- 6. Servicios ---------- */
.servicios__rejilla {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}
@media (min-width: 768px) {
  .servicios__rejilla { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .servicios__rejilla { grid-template-columns: repeat(3, 1fr); }
}
.servicios__tarjeta {
  --color-foco: var(--azul-300);
  background: var(--color-gris);
  color: var(--color-texto-claro);
  border: 1px solid var(--color-gris-claro);
  border-radius: var(--radio);
  padding: var(--espacio-4);
  box-shadow: var(--sombra);
  text-align: left;
}
.servicios__icono {
  width: 64px;
  height: 64px;
  object-fit: contain;
  margin-bottom: var(--espacio-2);
}
.servicios__tarjeta h3 { color: var(--color-texto-claro); }
.servicios__tarjeta p { color: var(--azul-100); margin: 0; }

/* ---------- 7. Sobre el doctor ---------- */
.doctor__grid {
  display: grid;
  gap: var(--espacio-4);
  align-items: center;
}
.doctor__foto {
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  /* height:auto explícito: sin esto, el atributo HTML height="1000" de la
     etiqueta <img> gana la cascada frente a aspect-ratio (no hay ninguna
     otra regla de "height" con la que competir) y la imagen se estira a
     1000px reales en vez de calcularse por la proporción 4:5. */
  height: auto;
}
.doctor__credencial {
  font-weight: 600;
  letter-spacing: .02em;
}
@media (min-width: 768px) {
  .doctor__grid { grid-template-columns: 320px 1fr; }
}

/* ---------- 8. Galería ---------- */
.galeria__rejilla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--espacio-2);
  margin-top: var(--espacio-4);
}
.galeria__rejilla img {
  border-radius: var(--radio);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto; /* ver nota en .doctor__foto: evita que el atributo HTML height gane la cascada */
}
@media (min-width: 1024px) {
  .galeria__rejilla { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- 9. Reseñas ---------- */
.resenas__rejilla {
  display: grid;
  gap: var(--espacio-3);
  margin-top: var(--espacio-4);
}
@media (min-width: 768px) {
  .resenas__rejilla { grid-template-columns: repeat(3, 1fr); }
}
/* Tarjetas del color del fondo (transparentes) con delineado claro; el delineado sigue al color del texto */
.resenas__tarjeta {
  background: transparent;
  border: 1px solid var(--tx);
  border-radius: var(--radio);
  padding: var(--espacio-3);
}
.resenas__estrellas {
  color: var(--color-estrella);
  letter-spacing: .12em;
  text-shadow:
    0 0 6px color-mix(in srgb, var(--color-dorado) 70%, transparent),
    0 0 18px color-mix(in srgb, var(--color-dorado) 40%, transparent);
  animation: brillo-estrellas 3.6s ease-in-out infinite alternate;
}
html[data-tono="claro"] .resenas__estrellas { color: var(--color-dorado-oscuro); text-shadow: none; }
.resenas__tarjeta:nth-child(2) .resenas__estrellas { animation-delay: -1.2s; }
.resenas__tarjeta:nth-child(3) .resenas__estrellas { animation-delay: -2.4s; }
@keyframes brillo-estrellas {
  from { opacity: .82; }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .resenas__estrellas { animation: none; }
}
.resenas__ver-todas {
  display: inline-block;
  margin-top: var(--espacio-3);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
}

/* ---------- 10. Footer / ubicación ---------- */
.pie__grid {
  display: grid;
  gap: var(--espacio-4);
}
.pie__mapa a { display: block; border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra-suave); }
.pie__mapa img { aspect-ratio: 2 / 1; object-fit: cover; width: 100%; height: auto; }
.pie__info h2 { margin-bottom: var(--espacio-2); }
.pie__info h3 { margin-top: var(--espacio-3); }
.pie__horario li {
  display: flex;
  justify-content: space-between;
  gap: var(--espacio-2);
  padding: .3rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--tx) 22%, transparent);
  font-size: .95rem;
}
.pie__telefono {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .25em;
  margin-top: var(--espacio-3);
}
.pie__acciones { display: flex; flex-wrap: wrap; gap: var(--espacio-2); margin-top: var(--espacio-3); }
.pie__derechos {
  text-align: center;
  font-size: .85rem;
  padding: var(--espacio-4) var(--espacio-3);
  margin-top: var(--espacio-6);
  border-top: 1px solid color-mix(in srgb, var(--tx) 22%, transparent);
}
@media (min-width: 768px) {
  .pie__grid { grid-template-columns: 1.1fr 1fr; align-items: start; }
}

/* ---------- 11. Elementos fijos de contacto (sección 4.8) ---------- */
.barra-fija {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 150;
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--alto-barra-fija);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  box-shadow: var(--sombra-barra);
}
.barra-fija__boton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--color-superficie);
}
.barra-fija__boton svg { width: 1.2em; height: 1.2em; }
.barra-fija__boton--llamar { background: var(--color-acento); }
.barra-fija__boton--whatsapp { background: var(--color-whatsapp); }

.whatsapp-flotante {
  display: none;
  position: fixed;
  bottom: var(--espacio-3);
  right: var(--espacio-3);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-superficie);
  align-items: center;
  justify-content: center;
  box-shadow: var(--sombra);
  z-index: 150;
  transition: transform .15s ease;
}
.whatsapp-flotante svg { width: 32px; height: 32px; }
.whatsapp-flotante:hover { transform: scale(1.06); }

@media (min-width: 1024px) {
  .barra-fija { display: none; }
  .whatsapp-flotante { display: flex; }
}