/* Dirección: el diente como una nube de partículas de porcelana en un estudio oscuro (motor de Wordbox).
   Colores y letras de la marca Fernando Rey (logo y afiches, 04/11/2026): negro, blanco y coral #E47860,
   todo en Montserrat con el contraste de pesos de sus afiches: delgada (300) con la palabra clave en negra (800). */
:root {
  --fondo: #060606;
  --fondo-2: #121212;
  --linea: #272727;
  --marfil: #f4f1ec;
  --tenue: #a9a4a0;
  --acento: #e47860;
  --acento-fuerte: #ee927d;
  --f-titulo: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --f-texto: "Montserrat", "Segoe UI", system-ui, sans-serif;
  --ancho: 1240px;
  --sale: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

* { box-sizing: border-box; }
/* «hidden» siempre oculta, aunque un estilo le dé display (antes la confirmación de la cita se veía siempre) */
[hidden] { display: none !important; }
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--marfil);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--acento); color: var(--fondo); }
/* Fondo de video: el de la marca, en gris apagado, difuminado y oscuro (ya viene así de fábrica, ver DESIGN.md),
   más rayones y polvo de película vieja encima. Va debajo de la textura de concreto y nunca le gana a los textos. */
.fondo-video { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.fondo-video video { width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: sepia(.22) contrast(1.08); transform: scale(1.04); }
.fondo-video::before { /* oscurece el centro, donde van los textos, y deja respirar los bordes */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(70% 60% at 50% 50%, rgb(6 6 6 / .55), rgb(6 6 6 / .15) 70%, rgb(6 6 6 / .5)), linear-gradient(rgb(6 6 6 / .35), transparent 30%, transparent 70%, rgb(6 6 6 / .45));
}
.fondo-video::after { /* rayones verticales y polvo que saltan de lugar, como la película al pasar por el proyector */
  content: ""; position: absolute; inset: -10%; z-index: 2; opacity: .4;
  background:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='1100'%20height='800'%3E%3Cg%20stroke='%23ece6de'%20fill='none'%20stroke-linecap='round'%3E%3Cpath%20d='M97%2040%20C99%20180%2094%20300%2097%20470'%20stroke-width='.7'%20opacity='.45'/%3E%3Cpath%20d='M341%20300%20C344%20360%20339%20430%20342%20520'%20stroke-width='.5'%20opacity='.35'/%3E%3Cpath%20d='M612%200%20C608%20120%20616%20260%20611%20330%20S609%20600%20613%20800'%20stroke-width='1'%20opacity='.18'/%3E%3Cpath%20d='M803%20520%20C801%20600%20806%20660%20802%20760'%20stroke-width='.6'%20opacity='.4'/%3E%3Cpath%20d='M1012%2090%20C1016%20150%201009%20210%201013%20260'%20stroke-width='.8'%20opacity='.35'/%3E%3Cpath%20d='M230%20610%20c40%20-6%2070%204%20104%20-3'%20stroke-width='.5'%20opacity='.3'/%3E%3Cpath%20d='M720%20170%20c18%2010%2030%2032%2034%2060'%20stroke-width='.5'%20opacity='.3'/%3E%3Cpath%20d='M470%20700%20c-6%20-20%204%20-36%20-2%20-58'%20stroke-width='.6'%20opacity='.35'/%3E%3C/g%3E%3Cg%20fill='%23ece6de'%3E%3Ccircle%20cx='180'%20cy='220'%20r='1.6'%20opacity='.5'/%3E%3Ccircle%20cx='905'%20cy='410'%20r='2.2'%20opacity='.35'/%3E%3Ccircle%20cx='540'%20cy='90'%20r='1.2'%20opacity='.5'/%3E%3Cellipse%20cx='690'%20cy='620'%20rx='3'%20ry='1.4'%20opacity='.3'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .92 0 0 0 0 .89 0 0 0 0 .85 0 0 0 -14 1.6'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='.6'/%3E%3C/svg%3E");
  background-size: 1100px 800px, 600px 600px;
  animation: rayones 1.1s steps(1) infinite;
}
@keyframes rayones {
  0% { background-position: 0 0, 0 0; opacity: .4; }
  14% { background-position: 380px -260px, 210px 340px; opacity: .28; }
  28% { background-position: -170px 330px, 470px 90px; opacity: .44; }
  43% { background-position: 520px 120px, 60px 500px; opacity: .3; }
  57% { background-position: 90px -410px, 330px 260px; opacity: .4; }
  71% { background-position: -430px 560px, 540px 410px; opacity: .26; }
  86% { background-position: 240px -90px, 150px 30px; opacity: .42; }
}
@media (prefers-reduced-motion: reduce) { .fondo-video::after { animation: none; } }

/* Fondo con textura de concreto, basado en la portada de Facebook de la marca (gris rayado y el círculo rosa viejo):
   ruido fino + manchas grandes + vetas como rayones, generados con filtros SVG (sin foto: no pesa y es nítido).
   Aparece por zonas que se funden en el negro y queda fijo detrás de todo, sin animación. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(45% 40% at 82% 18%, rgb(216 168 168 / .07), transparent 70%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='turbulence' baseFrequency='.003 .55' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 -2.6 1.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23v)' opacity='.14'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.005' numOctaves='5' seed='9'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='1.9' intercept='-.42'/%3E%3CfeFuncG type='linear' slope='1.9' intercept='-.42'/%3E%3CfeFuncB type='linear' slope='1.9' intercept='-.42'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: auto, 900px 900px, 1200px 1200px, 260px 260px;
  opacity: .13;
  /* solo por zonas: arriba a la izquierda, a la derecha y abajo; el resto se queda negro */
  -webkit-mask:
    radial-gradient(55% 45% at 8% 12%, #000, transparent 72%),
    radial-gradient(45% 55% at 96% 55%, #000, transparent 70%),
    radial-gradient(60% 40% at 35% 100%, #000, transparent 72%);
  mask:
    radial-gradient(55% 45% at 8% 12%, #000, transparent 72%),
    radial-gradient(45% 55% at 96% 55%, #000, transparent 70%),
    radial-gradient(60% 40% at 35% 100%, #000, transparent 72%);
}
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: #3a3a3a var(--fondo); }
a { color: var(--acento); text-underline-offset: .2em; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
/* ── SISTEMA TIPOGRÁFICO (todo en Montserrat, la letra de la marca) ──
   1. Títulos (h1, h2, h3), en mayúsculas, con tres pesos y un solo degradado (el de la marca):
      · delgada 200, en blanco: el contexto;
      · negrita 900 con relleno en degradado (<strong>): el mensaje clave de cada sección;
      · contorno con degradado (.contorno): SOLO en la portada («PERFECCIONANDO»).
      La portada combina los tres; el resto de la página, delgada + negrita con degradado.
   2. Botones y menú: mayúsculas, negrita 800, letras espaciadas.
   3. Textos, formulario y preguntas: minúsculas, 400 (destacados en 600).
   4. Etiquetas pequeñas (señales del diente, pistas): mayúsculas 600 de 11-12 px, muy espaciadas.
   Degradado medido en el diseño del curso de la marca. */
:root { --degradado: linear-gradient(90deg, #8061d6, #ce6bbb 25%, #fb6ea2 48%, #ff7774 72%, #f69e3d); }
h1, h2, h3 { text-transform: uppercase; font-weight: 200; line-height: 1; letter-spacing: -.005em; color: var(--marfil); }
h1 :where(strong), h2 :where(strong), h3 :where(strong) { font-weight: 900; letter-spacing: -.01em; }
/* contorno en degradado: el degradado se recorta a la letra con su trazo, y el relleno del color del fondo tapa
   el centro (y los trazos superpuestos que la fuente variable tiene por dentro). */
.contorno, .anima .contorno .palabra > span {
  font-weight: 900; color: var(--fondo); -webkit-text-stroke: 3px transparent;
  background: var(--degradado); -webkit-background-clip: text; background-clip: text;
}
.anima .contorno { background: none; }
.sobre, .anima .sobre .palabra > span {
  font-weight: 800; color: transparent; letter-spacing: .06em;
  background: var(--degradado); -webkit-background-clip: text; background-clip: text;
}
.anima .sobre { background: none; }
:is(h1, h2, h3) strong, .anima :is(h1, h2, h3) strong .palabra > span {
  color: transparent; background: var(--degradado); -webkit-background-clip: text; background-clip: text;
}
.anima :is(h1, h2, h3) strong:has(.palabra) { background: none; } /* solo si está partido en palabras: si no, el degradado va en el propio strong */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .contorno, .anima .contorno .palabra > span { color: var(--marfil); background: none; -webkit-text-stroke: 0; }
  .sobre, .anima .sobre .palabra > span, :is(h1, h2, h3) strong, .anima :is(h1, h2, h3) strong .palabra > span { color: var(--acento); background: none; }
}
h1 { font-size: clamp(2rem, 3.4vw, 2.9rem); }
h1 .linea { display: block; }
h1 .linea + .linea { margin-top: .08em; }
h1 .sobre { font-size: .62em; }
h1 .contorno { font-size: 1.12em; }
h2 { font-size: clamp(1.8rem, 3vw, 2.7rem); }
/* en los capítulos, el título nunca es más ancho que su columna: una palabra larga no invade el diente */
.capitulo { container-type: inline-size; }
.capitulo h1 { font-size: min(clamp(2rem, 3.4vw, 2.9rem), 7.4cqi); }
.capitulo h2 { font-size: min(clamp(1.8rem, 3vw, 2.7rem), 8.2cqi); }
h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
p { margin: 0; max-width: 62ch; text-wrap: pretty; }

.pendiente {
  color: var(--acento);
  border-bottom: 1px dashed currentColor;
  cursor: help;
}
.nota { font-size: .92rem; color: var(--tenue); }

.aviso-boceto {
  background: #1f100c;
  color: var(--acento);
  font-size: .82rem;
  text-align: center;
  padding: 6px 16px;
}

/* Barra */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  /* el contenido de la barra se alinea con el de las secciones (que tienen un ancho máximo y van centradas) */
  padding: 14px max(clamp(16px, 4vw, 48px), calc((100% - var(--ancho)) / 2 + clamp(16px, 4vw, 48px)));
  background: rgb(6 6 6 / .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--linea);
}
.marca { display: inline-flex; align-items: center; gap: 14px; color: var(--marfil); text-decoration: none; min-height: 44px; }
.marca img { width: 40px; height: 40px; display: block; }
.marca .marca-texto { width: auto; height: 12px; }
.barra nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.barra nav a:not(.boton) { color: var(--tenue); text-decoration: none; font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; }
.barra nav a:not(.boton):hover { color: var(--marfil); }

.boton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 28px;
  background: var(--acento); color: #1c0d08;
  font: 800 .82rem/1 var(--f-texto); text-transform: uppercase; letter-spacing: .1em;
  border: 0; border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background .25s var(--sale), transform .25s var(--sale);
}
.boton:hover { background: var(--acento-fuerte); }
.boton:active { transform: translateY(1px); }
.boton-chico { min-height: 44px; padding: 0 20px; font-size: .74rem; }

/* El recorrido */
.recorrido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  max-width: var(--ancho);
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
}
.escenario {
  grid-column: 2; grid-row: 1;
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  pointer-events: none;
  /* los bordes se desvanecen: así la encía y el hueso no terminan en un corte recto */
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 54%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 54%, #000 58%, transparent 100%);
}
.capitulos { grid-column: 1; grid-row: 1; position: relative; z-index: 1; }
.capitulo {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding-block: 96px;
  max-width: 34rem;
}
.capitulo p { color: #d9d5d0; font-size: 1.08rem; }
.capitulo .boton { align-self: flex-start; }
.capitulo .frase { font-weight: 300; font-size: 1.3rem; line-height: 1.45; color: var(--marfil); }
.capitulo-portada { gap: 28px; }
.capitulo-portada .bajada { font-size: 1.2rem; color: #d9d5d0; }
.bajada strong { font-weight: 700; color: var(--marfil); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.sigue { font-size: .72rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); margin-top: 32px; } /* etiqueta pequeña */

/* Entrada con el logo (intro.js). Mientras dura, la página no se desplaza y el logo de la barra espera oculto:
   el de la entrada vuela hasta ese mismo lugar y, al terminar, se cambian sin que se note. */
.intro-capa { display: none; }
.intro .intro-capa { display: block; position: fixed; inset: 0; z-index: 100; cursor: pointer; }
.intro, .intro body { overflow: hidden; }
.intro .barra .marca { visibility: hidden; }
.intro-telon {
  position: absolute; inset: 0; background: var(--fondo);
  --r: 0px; --cx: 50%; --cy: 50%;
  -webkit-mask: radial-gradient(circle var(--r) at var(--cx) var(--cy), transparent 99%, #000 100%);
  mask: radial-gradient(circle var(--r) at var(--cx) var(--cy), transparent 99%, #000 100%);
}
.intro-aro { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.intro-aro circle { fill: none; stroke: var(--acento); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.intro-logo { position: absolute; display: flex; align-items: center; transform-origin: 0 0; will-change: transform; }
.intro-r { display: block; clip-path: circle(0% at 50% 50%); transform-origin: 0 0; }
/* Al terminar la entrada, el nombre se despliega junto a la R, ya en la barra (se abre de izquierda a derecha) */
.nombre-entra .barra .marca .marca-texto { animation: nombre-entra .9s cubic-bezier(.16, 1, .3, 1) .05s both; }
/* el menú y el botón de la barra bajan y se aclaran uno tras otro, junto con el nombre */
.anima .barra nav > *, .anima .aviso-boceto { opacity: 0; transform: translateY(-12px); transition: opacity .7s var(--sale), transform .7s var(--sale); }
.anima .barra nav > :nth-child(1) { transition-delay: .25s; }
.anima .barra nav > :nth-child(2) { transition-delay: .33s; }
.anima .barra nav > :nth-child(3) { transition-delay: .41s; }
.anima .barra nav > :nth-child(4) { transition-delay: .52s; }
.anima.barra-lista .barra nav > *, .anima.barra-lista .aviso-boceto { opacity: 1; transform: none; }
@keyframes nombre-entra {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); opacity: .3; }
  to { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
}

/* El diente en 3D: modelo real (diente-modelo.js) o, si no hay WebGL, partículas (diente-3d.js). */
#lienzo, #lienzo3d { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: auto; cursor: grab; touch-action: pan-y; }
#lienzo.arrastrando, #lienzo3d.arrastrando { cursor: grabbing; }
.con-modelo #lienzo { display: none; }
/* señal del modelo 3D: un cuadro coral, una línea y el nombre de la capa */
.etiqueta3d { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 8px; margin-top: -10px; opacity: 0; transition: opacity .5s var(--sale); pointer-events: none; }
.etiqueta3d.ver { opacity: 1; }
.etiqueta3d i { width: 9px; height: 9px; background: var(--acento); outline: 1px solid var(--acento); outline-offset: 4px; }
.etiqueta3d span { width: 44px; height: 1px; background: var(--acento); }
.etiqueta3d b { font-weight: 600; font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--acento); background: rgb(6 6 6 / .8); padding: 3px 6px; }
/* redes en el pie: íconos solo en contorno, con el degradado de la marca */
.redes { display: flex; gap: 10px; align-items: center; }
.firma { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--tenue); }
.firma strong { font-weight: 800; color: var(--marfil); }
/* botón flotante de WhatsApp: círculo negro con el ícono en contorno de degradado, como las redes del pie */
.whatsapp-flotante {
  position: fixed; right: clamp(14px, 2.5vw, 28px); bottom: clamp(14px, 2.5vw, 28px); z-index: 30;
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid transparent;
  background: linear-gradient(rgb(10 8 8 / .92), rgb(10 8 8 / .92)) padding-box, var(--degradado) border-box;
  box-shadow: 0 8px 28px rgb(0 0 0 / .5); transition: transform .3s var(--sale), opacity .5s;
}
.whatsapp-flotante:hover, .whatsapp-flotante:focus-visible { transform: translateY(-3px) scale(1.04); }
.whatsapp-flotante svg { width: 28px; height: 28px; fill: none; stroke: url(#degradado-redes); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.intro .whatsapp-flotante { opacity: 0; pointer-events: none; }
.redes a {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--linea); transition: border-color .3s var(--sale), transform .3s var(--sale), background .3s var(--sale);
}
.redes a:hover, .redes a:focus-visible { border-color: #5a3a31; background: #140d0b; transform: translateY(-2px); }
.redes svg { width: 22px; height: 22px; fill: none; stroke: url(#degradado-redes); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* créditos de los modelos 3D (los exige su licencia CC BY 4.0): un enlace pequeño que se despliega */
.creditos, .creditos:last-child { font-size: .74rem; flex-basis: 100%; border: 0; } /* sin las líneas de las preguntas */
.creditos summary { cursor: pointer; list-style: none; display: inline-flex; min-height: 44px; align-items: center; font: 600 .7rem var(--f-texto); letter-spacing: .2em; text-transform: uppercase; color: var(--tenue); padding: 0; }
.creditos summary::-webkit-details-marker { display: none; }
.creditos summary::after { content: none; }
.creditos summary:hover { color: var(--marfil); }
.creditos p { padding: 0 0 8px; color: var(--tenue); max-width: 70ch; }
.creditos a { color: var(--tenue); }
.pista { position: absolute; left: 0; right: 0; bottom: 7%; text-align: center; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--tenue); max-width: none; }

/* El cursor de la escritura letra por letra */
.cursor { display: inline-block; width: .5em; height: 1em; margin-left: .08em; vertical-align: -.12em; background: var(--acento); animation: parpadeo 1s steps(1) infinite; }
@keyframes parpadeo { 50% { opacity: 0; } }

/* El doctor */
.doctor, .aliados, .primera-cita, .agendar, .preguntas, .ubicacion, .cierre {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: clamp(80px, 12vw, 160px) clamp(16px, 4vw, 48px) 0;
}
.doctor {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.foto-pendiente, .mapa-pendiente {
  aspect-ratio: 4 / 5;
  border: 1px dashed #5a3a31;
  border-radius: 4px;
  display: grid; place-content: center; text-align: center; gap: 6px;
  color: var(--acento);
  background: var(--fondo-2);
  font-weight: 300; font-size: 1.3rem;
}
.doctor-foto img { display: block; width: 100%; height: auto; aspect-ratio: 691 / 864; object-fit: cover; border-radius: 4px; }
.foto-pendiente small { font: .85rem var(--f-texto); color: var(--tenue); }
.doctor-texto { display: grid; gap: 36px; }
blockquote { margin: 0; display: grid; gap: 16px; }
blockquote p { font-weight: 300; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.45; max-width: 36ch; }
blockquote footer { color: var(--tenue); font-size: .95rem; }
.principios { margin: 0; display: grid; gap: 18px; padding-top: 28px; border-top: 1px solid var(--linea); }
.principios div { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 4px 24px; }
.principios dt { font-weight: 600; }
.principios dd { margin: 0; color: #d9d5d0; }
.pendiente-linea { font-size: .92rem; }
/* formación y trayectoria del doctor: una lista con líneas finas, el título del logro en blanco y el detalle tenue */
.trayectoria { display: grid; gap: 18px; }
.trayectoria h3 { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.credenciales { list-style: none; margin: 0; padding: 0; display: grid; }
.credenciales li { display: grid; gap: 2px; padding: 14px 0; border-top: 1px solid var(--linea); }
.credenciales li:last-child { border-bottom: 1px solid var(--linea); }
.credenciales strong { font-weight: 600; }
.credenciales li > span { color: var(--tenue); font-size: .95rem; }

/* Marcas aliadas: carrusel continuo de logos, que se detiene al pasar el mouse o al tocarlo */
.aliados { display: grid; gap: 28px; }
.aliados-intro { color: #d9d5d0; }
.carrusel {
  overflow: hidden; padding: 28px 0; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea);
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.carrusel-pista { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(48px, 7vw, 110px); width: max-content; animation: carrusel 28s linear infinite; }
.carrusel:hover .carrusel-pista, .carrusel:focus-within .carrusel-pista, .carrusel:active .carrusel-pista { animation-play-state: paused; }
.carrusel li { flex: none; display: grid; place-items: center; height: 64px; }
.carrusel img { display: block; height: 100%; width: auto; max-width: 240px; object-fit: contain; opacity: .85; transition: opacity .3s; }
.carrusel li:hover img { opacity: 1; }
@keyframes carrusel { to { transform: translateX(-50%); } }
/* Glitch de los logos mientras pasan (efectos.js elige uno al azar y le pone .falla un instante):
   dos copias del logo, violeta y coral, se corren a los lados en franjas, y el logo tiembla */
.carrusel li { position: relative; }
.carrusel li::before, .carrusel li::after {
  content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  -webkit-mask: var(--logo) center / contain no-repeat; mask: var(--logo) center / contain no-repeat;
}
.carrusel li::before { background: #8061d6; }
.carrusel li::after { background: #ff7774; }
.carrusel li.falla img { animation: falla-logo .34s steps(2) both; }
.carrusel li.falla::before { animation: falla-a .34s steps(1) both; }
.carrusel li.falla::after { animation: falla-b .34s steps(1) both; }
@keyframes falla-logo {
  0% { transform: translate(0); } 25% { transform: translate(-3px, 1px) skewX(-8deg); }
  50% { transform: translate(4px, -1px); clip-path: inset(10% 0 35% 0); } 75% { transform: translate(-2px, 0) skewX(6deg); } 100% { transform: none; }
}
@keyframes falla-a {
  0% { opacity: .9; transform: translateX(-7px); clip-path: inset(0 0 62% 0); }
  30% { opacity: .9; transform: translateX(5px); clip-path: inset(48% 0 18% 0); }
  60% { opacity: .8; transform: translateX(-4px); clip-path: inset(72% 0 0 0); }
  90%, 100% { opacity: 0; }
}
@keyframes falla-b {
  0% { opacity: .85; transform: translateX(6px); clip-path: inset(30% 0 40% 0); }
  35% { opacity: .9; transform: translateX(-8px); clip-path: inset(0 0 75% 0); }
  65% { opacity: .75; transform: translateX(3px); clip-path: inset(60% 0 8% 0); }
  90%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .carrusel-pista { animation: none; flex-wrap: wrap; justify-content: center; width: auto; }
  .carrusel li[aria-hidden="true"] { display: none; }
}

/* Primera cita */
.primera-cita { display: grid; gap: 40px; }
.pasos {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px;
  counter-reset: paso;
}
.pasos li { counter-increment: paso; display: grid; gap: 12px; align-content: start; color: #d9d5d0; padding-top: 20px; border-top: 1px solid var(--linea); }
/* los números de los pasos, en contorno con el degradado de la marca (como «PERFECCIONANDO») */
.pasos li::before {
  content: counter(paso); font-weight: 900; font-size: 3.4rem; line-height: 1; justify-self: start;
  color: var(--fondo); -webkit-text-stroke: 3px transparent; padding: 0 .06em;
  background: var(--degradado); -webkit-background-clip: text; background-clip: text;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) { .pasos li::before { color: var(--acento); background: none; -webkit-text-stroke: 0; } }
.pasos strong { color: var(--marfil); font-weight: 600; }

/* Agendar */
.agendar {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
}
.agendar-intro { display: grid; gap: 20px; position: sticky; top: 110px; }
.agenda, .confirmacion {
  display: grid; gap: 28px;
  background: var(--fondo-2);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: clamp(20px, 3vw, 40px);
}
.confirmacion { gap: 16px; grid-column: 2; } /* ocupa el lugar del formulario */
/* borde del formulario: sin animación, coral fijo; con animación lo dibuja recorrido.js (contorno en degradado → coral) */
.agenda { position: relative; border-color: var(--acento); }
.anima .agenda { border-color: transparent; }
.agenda .borde { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.agenda .borde rect { x: 0; y: 0; width: 100%; height: 100%; fill: none; stroke-width: 1.5; stroke-dasharray: 1; }
.agenda .borde .deg { stroke: url(#borde-degradado); stroke-dashoffset: 1; }
.agenda .borde .coral { stroke: var(--acento); stroke-dashoffset: 0; opacity: 0; }
.confirmacion:focus { outline: none; }
fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 12px; min-width: 0; }
legend { font-weight: 600; margin-bottom: 12px; padding: 0; }
.opciones, .dias, .horas { display: flex; flex-wrap: wrap; gap: 10px; }
.dias { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }

.opciones label, .dia, .hora {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; padding: 8px 16px;
  border: 1px solid #3a3a3a; border-radius: 999px;
  background: transparent; color: var(--marfil);
  font: 500 .95rem var(--f-texto);
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.opciones label:hover, .dia:hover, .hora:hover { border-color: var(--acento); }
.opciones input { accent-color: var(--acento); width: 18px; height: 18px; margin: 0; }
.opciones label:has(input:checked) { border-color: var(--acento); background: #2a1611; }
.dia { flex-direction: column; gap: 0; border-radius: 10px; min-width: 76px; padding: 10px 12px; line-height: 1.25; }
.dia small { color: var(--tenue); font-size: .78rem; text-transform: capitalize; }
.dia b { font-size: 1.35rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dia[aria-pressed="true"], .hora[aria-pressed="true"] { background: var(--acento); border-color: var(--acento); color: #1c0d08; }
.dia[aria-pressed="true"] small { color: #4f2216; }
.dia[aria-pressed="true"] b { color: #1c0d08; }
.hora:disabled { opacity: .38; text-decoration: line-through; cursor: not-allowed; }
.hora:disabled:hover { border-color: #3a3a3a; }
.hora { font-variant-numeric: tabular-nums; }
.vacio { color: var(--tenue); font-size: .95rem; }

.campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.campos label { display: grid; gap: 8px; font-weight: 500; font-size: .95rem; }
.campos input {
  min-height: 48px; padding: 0 14px;
  background: var(--fondo); color: var(--marfil);
  border: 1px solid #3a3a3a; border-radius: 6px;
  font: 1rem var(--f-texto); caret-color: var(--acento);
}
.campos input::placeholder { color: #8d887d; }
.campos .opcional { font-weight: 400; color: var(--tenue); }
.campos input[type=number] { -moz-appearance: textfield; }
.campos input::-webkit-outer-spin-button, .campos input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.campos input:focus-visible { outline: 2px solid var(--acento); outline-offset: 0; border-color: var(--acento); }
.campos input[aria-invalid="true"] { border-color: #e0907f; }
.acepto { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; color: #d9d5d0; cursor: pointer; }
.acepto input { accent-color: var(--acento); width: 20px; height: 20px; margin: 2px 0 0; flex: none; }
.error { color: #f0a493; font-size: .95rem; }
.agenda .boton { justify-self: start; }

/* Preguntas */
.preguntas { display: grid; gap: 8px; }
.preguntas h2 { margin-bottom: 32px; }
details { border-top: 1px solid var(--linea); }
details:last-child { border-bottom: 1px solid var(--linea); }
summary {
  cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; min-height: 44px;
  font-weight: 600; font-size: 1.1rem;
}
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 1.5px solid var(--acento); border-bottom: 1.5px solid var(--acento); transform: rotate(45deg) translateY(-4px); transition: transform .3s var(--sale); }
details[open] summary::after { transform: rotate(225deg) translateY(-2px); }
details p { padding-bottom: 24px; color: #d9d5d0; }

/* Ubicación */
.ubicacion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ubicacion > div:first-child { display: grid; gap: 18px; }
.lugar { font-style: normal; font-weight: 600; font-size: 1.15rem; line-height: 1.5; }
.lugar span { font-weight: 400; color: #d9d5d0; }
.ubicacion .boton { justify-self: start; }
/* botón secundario: contorno coral, para no competir con «Agendar» */
.boton-claro { background: transparent; color: var(--acento); box-shadow: inset 0 0 0 1.5px var(--acento); }
.boton-claro:hover { background: #1f100c; color: var(--acento-fuerte); }
/* mapa real, oscurecido para que combine con la página */
.mapa { aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; border: 1px solid var(--linea); background: var(--fondo-2); }
.mapa iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(.92) contrast(.88) brightness(.95); }
.horario { border-collapse: collapse; margin-top: 12px; font-variant-numeric: tabular-nums; }
.horario caption { text-align: left; font-weight: 600; padding-bottom: 8px; }
.horario th, .horario td { text-align: left; vertical-align: top; padding: 10px 24px 10px 0; border-top: 1px solid var(--linea); font-weight: 400; }
.horario th { color: var(--tenue); }
.mapa-pendiente { aspect-ratio: 4 / 3; font-size: 1.2rem; }

/* Cierre */
.cierre { display: grid; justify-items: center; text-align: center; gap: 24px; padding-bottom: clamp(80px, 12vw, 160px); }
.cierre p { color: #d9d5d0; }
.pie {
  border-top: 1px solid var(--linea);
  padding: 32px max(clamp(16px, 4vw, 48px), calc((100% - var(--ancho)) / 2 + clamp(16px, 4vw, 48px))); /* alineado con las secciones */
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  color: var(--tenue); font-size: .9rem;
}

/* Celular: el diente queda de fondo y el texto pasa por encima, en la parte de abajo. */
@media (max-width: 860px) {
  .barra nav a:not(.boton) { display: none; }
  .marca .marca-texto { display: none; }
  .recorrido { display: block; padding-inline: 0; }
  .escenario { height: 100svh; }
  #lienzo, #lienzo3d { pointer-events: none; height: 62%; }
  .pista { display: none; }
  .capitulos { margin-top: -100svh; position: relative; }
  .capitulo {
    justify-content: flex-end;
    max-width: none;
    padding: 0 20px 48px;
    background: linear-gradient(to bottom, rgb(6 6 6 / 0) 34%, rgb(6 6 6 / .94) 52%, var(--fondo) 100%);
  }
  .capitulo-portada h1 { font-size: 1.75rem; }
  .contorno, .anima .contorno .palabra > span { -webkit-text-stroke-width: 2.4px; }
  .capitulo-portada .bajada { font-size: 1.05rem; }
  .sigue { display: none; }
  .capitulo-portada { justify-content: flex-end; }
  .doctor, .agendar, .ubicacion { grid-template-columns: minmax(0, 1fr); }
  .carrusel li { height: 48px; }
  .doctor-foto { max-width: 360px; }
  .agendar-intro { position: static; }
  .confirmacion { grid-column: auto; }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .campos { grid-template-columns: minmax(0, 1fr); }
  .principios div { grid-template-columns: minmax(0, 1fr); }
}
.pista-movil { display: none; }
/* Celular con el modelo 3D: una sola pantalla, solo el diente. Deslizar de lado lo gira y trae los textos;
   deslizar hacia arriba o abajo sigue siendo el scroll de la página. */
@media (max-width: 860px) {
  /* la pantalla visible menos la barra de arriba */
  .con-modelo .recorrido { position: relative; height: calc(100vh - var(--arriba, 73px)); height: calc(100svh - var(--arriba, 73px)); overflow: hidden; touch-action: pan-y; }
  .con-modelo .escenario { position: absolute; inset: 0; height: 100%; }
  .con-modelo #lienzo3d { height: 66%; pointer-events: none; }
  .con-modelo .capitulos { position: absolute; inset: 0; margin-top: 0; pointer-events: none; z-index: 1; }
  .con-modelo .capitulo {
    position: absolute; left: 0; right: 0; bottom: 0; min-height: 0; justify-content: flex-end;
    padding: 96px 20px 44px; pointer-events: auto; will-change: transform, opacity;
    background: linear-gradient(to bottom, rgb(6 6 6 / 0), rgb(6 6 6 / .92) 34%, var(--fondo) 100%);
  }
  .con-modelo .capitulo { gap: 14px; }
  .con-modelo .capitulo-portada h1 { font-size: 1.75rem; }
  .con-modelo .capitulo-portada .bajada, .con-modelo .capitulo p { font-size: .95rem; line-height: 1.5; }
  .con-modelo .capitulo .nota, .con-modelo .capitulo p + p:not(.frase) { display: none; } /* un solo párrafo: el diente se sigue viendo */
  .etiqueta3d span { width: 22px; }
  .con-modelo .pista-movil {
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; pointer-events: none;
    color: var(--tenue); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; text-align: center;
  }
  .pista-movil .puntos { display: flex; gap: 8px; }
  .pista-movil i { width: 6px; height: 6px; border-radius: 50%; background: #444; transition: background .3s, transform .3s; }
  .pista-movil i.activo { background: var(--acento); transform: scale(1.3); }
}
@media (max-width: 480px) {
  .pasos { grid-template-columns: minmax(0, 1fr); }
  .barra .boton-chico { padding: 0 14px; font-size: .85rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor { animation: none; }
}

/* Animación de los textos. Solo con la clase .anima (la pone el <head> si no se pidió reducir movimiento):
   sin JavaScript o con movimiento reducido, todo se ve quieto desde el principio.
   Los títulos suben palabra por palabra desde una ranura; lo demás aparece desenfocado y se aclara. */
.anima .palabra { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .07em .12em; margin: -.08em -.07em -.12em; }
.anima .palabra > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--sale) calc(var(--i, 0) * 60ms);
}
.anima .sigue-titulo {
  opacity: 0;
  transform: translateY(18px);
  filter: blur(8px);
  transition: opacity .9s var(--sale), transform .9s var(--sale), filter .9s var(--sale);
  transition-delay: calc(var(--d, 0) * 110ms + 280ms);
}
.anima .visible .palabra > span { transform: none; }
/* en las secciones de abajo el movimiento lo lleva el scroll (recorrido.js): sin transiciones que lo retrasen */
.anima .scrub .palabra > span { transition: none; }
/* la línea punteada de un dato pendiente aparece con sus palabras, no antes */
.anima .capitulo:not(.visible) .pendiente { border-bottom-color: transparent; }
.anima .pendiente { transition: border-color .6s var(--sale) .5s; }
.anima .visible .sigue-titulo { opacity: 1; transform: none; filter: none; }
/* al salir de un capítulo del recorrido se recoge rápido y sin esperas */
.anima .capitulo:not(.visible) .palabra > span,
.anima .capitulo:not(.visible) .sigue-titulo { transition-duration: .45s; transition-delay: 0s; }
/* En computador, los textos del inicio entran con el armado del diente (efectos.js): cada palabra llega dispersa
   como un fragmento y se acomoda, y la línea de calor del diente les pasa por encima. Aquí solo se apagan las
   transiciones normales para que no peleen con esa animación. */
.motas .capitulo-portada .palabra { overflow: visible; }
.motas .capitulo-portada .palabra > span, .motas .capitulo-portada .sigue-titulo { transition: none !important; transform: none; opacity: 1; filter: none; }
.motas .capitulo-portada .mota { display: inline-block; }
.motas-espera .capitulo-portada > * { opacity: 0 !important; }