/* Clínica Dental Inmaculada Sánchez · sistema visual del rediseño
   Paleta medida en el logo: marino de la «I», azul y cian de la cinta, turquesa del corazón-diente. */

/* ---------- Tipografías (locales) ---------- */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/manrope/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/manrope/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader/newsreader-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/newsreader/newsreader-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens ---------- */
:root {
  --papel: #faf8f4;
  --blanco: #ffffff;
  --bruma: #eaf5f8;
  --marino-950: #021e38;
  --marino-800: #022747;
  --marino-700: #0a3a63;
  --tinta: #1b2b3a;
  --tinta-suave: #4a5a6a;
  --linea: #dce3e8;
  --linea-fuerte: #b9c6d0;
  --azul-500: #01a6fa;
  --azul-700: #0072b2;
  --cian-300: #11eade;
  --turquesa-500: #01aeb6;
  --en-oscuro: #ffffff;
  --en-oscuro-suave: #b8c7d6;
  --linea-oscura: rgb(255 255 255 / 0.14);
  --whatsapp: #25d366;
  --cinta: linear-gradient(115deg, #01a6fa 0%, #008cd1 30%, #11eade 62%, #01aeb6 100%);

  /* alias usados por navigation-no-js.css */
  --color-border: var(--linea);
  --color-primary-dark: var(--marino-800);

  --f-titular: "Newsreader", Georgia, "Times New Roman", serif;
  --f-texto: "Manrope", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --t-cuerpo: 1.125rem;
  --t-entrada: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem);
  --t-pequeno: 0.9375rem;
  --t-h1: clamp(2.5rem, 1.55rem + 3.6vw, 4.5rem);
  --t-h2: clamp(1.95rem, 1.4rem + 2.1vw, 3.125rem);
  --t-h3: clamp(1.3rem, 1.18rem + 0.5vw, 1.625rem);

  --contenedor: 1200px;
  --ancho: 1360px;
  --margen: clamp(20px, 4vw, 40px);
  --seccion: clamp(72px, 9vw, 136px);

  --r-pequeno: 8px;
  --r-tarjeta: 16px;
  --r-medio: 28px;

  --sombra: 0 1px 2px rgb(2 39 71 / 0.06), 0 12px 32px rgb(2 39 71 / 0.08);
  --sombra-alta: 0 2px 4px rgb(2 39 71 / 0.06), 0 24px 56px rgb(2 39 71 / 0.12);

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --header-height: 84px;
}

/* ---------- Base ---------- */
.defs-globales { position: absolute; width: 0; height: 0; overflow: hidden; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-height) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font: 400 var(--t-cuerpo) / 1.65 var(--f-texto);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
button { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titular); font-weight: 450; color: var(--marino-800); text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); line-height: 1.1; letter-spacing: -0.018em; }
h3 { font-size: var(--t-h3); line-height: 1.22; letter-spacing: -0.01em; font-weight: 500; }
a { color: var(--azul-700); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:hover { color: var(--marino-800); }
::selection { background: rgb(17 234 222 / 0.35); color: var(--marino-950); }
:focus-visible { outline: 3px solid var(--azul-700); outline-offset: 3px; border-radius: 4px; }
.oscuro :focus-visible { outline-color: var(--cian-300); }
main { display: block; }
main:focus { outline: none; }

.skip-link {
  position: absolute; left: 16px; top: 12px; z-index: 2000;
  padding: 12px 18px; border-radius: var(--r-pequeno);
  background: var(--marino-800); color: #fff; font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus { transform: none; color: #fff; }

.contenedor { width: min(100% - 2 * var(--margen), var(--contenedor)); margin-inline: auto; }
.contenedor-ancho { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; }
.seccion { padding-block: var(--seccion); position: relative; }
.visualmente-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Antetítulo: orienta sin gritar (sin mayúsculas forzadas) */
.antetitulo {
  margin: 0 0 14px;
  color: var(--azul-700);
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: 0.005em;
}
.oscuro .antetitulo { color: var(--cian-300); }
.entrada { font-size: var(--t-entrada); line-height: 1.6; color: var(--tinta); }
.texto-suave { color: var(--tinta-suave); }

/* Enlace de texto con flecha */
.enlace {
  display: inline-flex; align-items: center; gap: 0.5em;
  font-weight: 650; color: var(--marino-800); text-decoration: none;
  border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.enlace:hover { color: var(--azul-700); }
.enlace .flecha { transition: transform 0.25s var(--curva); }
.enlace:hover .flecha { transform: translateX(4px); }
.oscuro .enlace { color: #fff; }
.oscuro .enlace:hover { color: var(--cian-300); }

/* ---------- Botones ---------- */
.boton {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 26px;
  border-radius: 999px; border: 1.5px solid transparent;
  font: 650 1.0625rem/1.2 var(--f-texto); text-decoration: none; text-align: center;
  cursor: pointer; overflow: hidden;
  /* el relleno entra de izquierda a derecha al pasar el ratón o con el foco */
  background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size 0.45s var(--curva), border-color 0.25s, color 0.2s, box-shadow 0.25s;
}
.boton svg { flex: none; width: 20px; height: 20px; }
.boton:hover, .boton:focus-visible { background-size: 100% 100%; }
.boton--principal { background-color: var(--marino-800); background-image: linear-gradient(var(--marino-700), var(--marino-700)); color: #fff; box-shadow: 0 6px 18px rgb(2 39 71 / 0.18); }
.boton--principal:hover, .boton--principal:focus-visible { color: #fff; box-shadow: 0 10px 24px rgb(2 39 71 / 0.26); }
.boton--whatsapp { background-color: var(--blanco); border-color: var(--linea-fuerte); color: var(--marino-800); }
.boton--whatsapp { background-image: linear-gradient(#e2f6e9, #e2f6e9); }
.boton--whatsapp:hover, .boton--whatsapp:focus-visible { border-color: #1fa855; color: var(--marino-800); }
.boton--whatsapp svg { color: #1fa855; }
.oscuro .boton--principal { background-color: #fff; background-image: linear-gradient(var(--bruma), var(--bruma)); color: var(--marino-950); box-shadow: none; }
.oscuro .boton--principal:hover { color: var(--marino-950); }
.oscuro .boton--whatsapp { background-color: transparent; background-image: linear-gradient(rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.1)); border-color: rgb(255 255 255 / 0.45); color: #fff; }
.oscuro .boton--whatsapp:hover { border-color: #fff; color: #fff; }
.oscuro .boton--whatsapp svg { color: #4ee38a; }
@media (prefers-reduced-motion: no-preference) {
  .boton--principal:hover svg, .header-phone:hover svg { animation: timbre 0.55s ease-in-out; }
  .boton--whatsapp:hover svg { animation: rebote 0.45s var(--curva); }
}
@keyframes timbre { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(12deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
@keyframes rebote { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Enlace con flecha en círculo: mismo lenguaje que las filas de tratamientos */
.enlace-circulo {
  display: inline-flex; align-items: center; gap: 14px;
  font: 650 1.0625rem/1.3 var(--f-texto); color: var(--marino-800); text-decoration: none;
}
.enlace-circulo .circulo {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1.5px solid var(--linea-fuerte); background-color: transparent;
  background-image: linear-gradient(var(--marino-800), var(--marino-800)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size 0.4s var(--curva), border-color 0.25s, color 0.25s, transform 0.35s var(--curva);
}
.enlace-circulo:hover { color: var(--marino-800); }
.enlace-circulo:hover .circulo, .enlace-circulo:focus-visible .circulo { background-size: 100% 100%; border-color: var(--marino-800); color: #fff; transform: translateX(4px); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* Indicador de horario («abierto ahora»): lo rellena site.js */
.horario-ahora {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0; font-size: var(--t-pequeno); font-weight: 600; color: var(--tinta-suave);
}
.horario-ahora[hidden] { display: none; }
.horario-ahora::before {
  content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: #9aa7b3; box-shadow: 0 0 0 4px rgb(154 167 179 / 0.18);
}
.horario-ahora[data-estado="abierto"]::before { background: #1fa855; box-shadow: 0 0 0 4px rgb(31 168 85 / 0.18); animation: respira 3.2s ease-in-out infinite; animation-play-state: paused; }
.bucle-activo.horario-ahora[data-estado="abierto"]::before { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .horario-ahora[data-estado="abierto"]::before { animation: none; } }
.oscuro .horario-ahora { color: var(--en-oscuro-suave); }
@keyframes respira { 0%, 100% { box-shadow: 0 0 0 3px rgb(31 168 85 / 0.22); } 50% { box-shadow: 0 0 0 8px rgb(31 168 85 / 0.05); } }

/* ---------- Cabecera ---------- */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: rgb(250 248 244 / 0.96);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid rgb(2 39 71 / 0.06);
  box-shadow: 0 1px 0 rgb(2 39 71 / 0.03), 0 8px 20px -10px rgb(2 39 71 / 0.1);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.site-header.compacta { border-bottom-color: var(--linea); box-shadow: 0 6px 24px rgb(2 39 71 / 0.06); }
.header-inner {
  width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto;
  min-height: 84px; display: flex; align-items: center; gap: 24px;
  transition: min-height 0.3s var(--curva);
}
.compacta .header-inner { min-height: 68px; }
.brand { flex: none; display: block; }
.brand-logo { height: 54px; width: auto; transition: height 0.3s var(--curva); }
.compacta .brand-logo { height: 44px; }
.main-nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: 2px; }
.nav-list > li { position: relative; }
.nav-list a, .nav-dropdown-toggle {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 12px;
  border: 0; background: none; cursor: pointer;
  color: var(--tinta); font: 600 0.9875rem/1 var(--f-texto); text-decoration: none; white-space: nowrap;
}
.nav-list a:hover, .nav-dropdown-toggle:hover { color: var(--azul-700); }
.nav-list > li > a::after, .nav-dropdown-toggle::before {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; border-radius: 2px;
  background: var(--cinta); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--curva);
}
.nav-list > li > a[aria-current="page"]::after,
.nav-item-has-dropdown:has(.nav-dropdown a[aria-current="page"]) > .nav-dropdown-toggle::before,
.nav-list > li > a:hover::after { transform: scaleX(1); }
.nav-list a[aria-current="page"] { color: var(--marino-800); }
.nav-dropdown-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.75px solid currentColor; border-bottom: 1.75px solid currentColor;
  transform: rotate(45deg); transition: transform 0.25s var(--curva);
}
.nav-item-has-dropdown.is-open > .nav-dropdown-toggle::after { transform: translateY(3px) rotate(225deg); }
.nav-dropdown {
  position: absolute; left: -8px; top: calc(100% + 8px); z-index: 10;
  min-width: 270px; padding: 10px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-tarjeta);
  box-shadow: var(--sombra-alta);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s, transform 0.25s var(--curva), visibility 0s 0.25s;
}
.nav-item-has-dropdown.is-open > .nav-dropdown { opacity: 1; visibility: visible; transform: none; transition: opacity 0.2s, transform 0.25s var(--curva); }
.nav-dropdown a { display: flex; width: 100%; padding: 10px 12px; border-radius: var(--r-pequeno); min-height: 44px; }
.nav-dropdown a:hover { background: var(--bruma); }
.nav-dropdown a[aria-current="page"] { background: var(--bruma); color: var(--marino-800); }
.nav-dropdown-overview { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--linea); }
.nav-dropdown-overview a { color: var(--azul-700); }

.header-phone {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  min-height: 46px; padding: 0 18px; border-radius: 999px;
  background: var(--marino-800); color: #fff; text-decoration: none;
  font: 650 0.9875rem/1 var(--f-texto); white-space: nowrap;
  transition: background-color 0.2s;
}
.header-phone:hover { background: var(--marino-700); color: #fff; }
.header-phone svg { width: 18px; height: 18px; }

/* Selector de idioma: informativo (VAL y EN «próximamente») */
.language-preview { position: relative; flex: none; }
.language-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px;
  border: 1px solid transparent; border-radius: 999px; background: none; cursor: pointer;
  font: 650 0.9375rem/1 var(--f-texto); color: var(--tinta);
}
.language-toggle:hover { border-color: var(--linea); }
.language-options {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 10; min-width: 240px; padding: 10px 14px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-alta);
  font-size: var(--t-pequeno);
}
.language-options li { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.language-options li[aria-disabled="true"] { color: var(--tinta-suave); }
.language-flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; background: center / cover no-repeat; box-shadow: 0 0 0 1px rgb(2 39 71 / 0.12); flex: none; }
.language-flag-es { background-image: url(../img/ui/flag-es.svg); }
.language-flag-val { background-image: url(../img/ui/flag-val.svg); }
.language-flag-en { background-image: url(../img/ui/flag-en.svg); }
/* Saludo: detalle autónomo (Hola · Bon dia · Hello) */
.saludo {
  position: relative; display: inline-block; min-width: 3.9em; height: 1.4em; overflow: hidden; margin-right: 2px;
  font: 500 0.875rem/1.4 var(--f-titular); font-style: italic; color: var(--azul-700); text-align: left;
}
.saludo span { position: absolute; inset: 0; transition: opacity 0.6s, transform 0.6s var(--curva); }
.saludo span[data-sale] { opacity: 0; transform: translateY(-60%); }
.saludo span[data-entra] { opacity: 0; transform: translateY(60%); }
.language-mobile { display: none; }
.mobile-menu-toggle { display: none; }

/* ---------- Portada (Inicio) ---------- */
.portada { padding-block: clamp(32px, 5vw, 72px) clamp(40px, 5vw, 76px); overflow: clip; }
/* La sección siguiente ya aporta su propio aire (--seccion): no hace falta sumarlo al de la portada */
.portada + .seccion { padding-top: clamp(40px, 5vw, 80px); }
.portada-texto { max-width: 620px; }
.portada h1 { margin-bottom: 28px; }
.portada .entrada { margin-bottom: 32px; max-width: 34em; }
.portada .horario-ahora { margin-top: 24px; }
.portada-visual { position: relative; aspect-ratio: 720 / 780; container-type: inline-size; }
.portada-visual > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.portada-foto {
  position: absolute; left: 20.833%; top: 7.692%; width: 55.556%; height: 64.103%;
  border-radius: 3.9cqw; overflow: hidden; background: #d9cdbf;
}
/* La sombra de la foto va en su propia capa, debajo de la cinta: así no oscurece el tramo que pasa por detrás */
.portada-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; }
.cinta-detras { z-index: 1; }
.portada-foto { z-index: 2; }

/* Cinta: se dibuja al cargar, después brilla y flota (todo CSS; sin JS se ve completa al instante si se reduce el movimiento) */
.cinta-trazo { fill: none; stroke: #fff; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.cinta-punta { opacity: 0; pointer-events: none; }
.cinta-destellos { pointer-events: none; }
.cinta-brillo { fill: none; stroke: rgb(255 255 255 / 0.6); stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.15; opacity: 0.85; }
/* Sin JavaScript se dibuja por CSS; con JavaScript la dirige site.js (espera a la foto, lleva la punta luminosa y añade los destellos) */
@media (prefers-reduced-motion: no-preference) {
  .cinta-trazo { animation: dibuja 2.8s cubic-bezier(0.37, 0, 0.63, 1) 0.8s forwards; }
  .cinta-js .cinta-trazo { animation: none; }
  .cinta-dibujada.bucle-activo .cinta-brillo { animation: brilla 11s ease-in-out 1.5s infinite; }
  .cinta-dibujada.bucle-activo .cinta-flota { animation: flota 7s ease-in-out infinite alternate; }
}
@media (prefers-reduced-motion: reduce) { .cinta-trazo { stroke-dashoffset: 0; } }
@keyframes dibuja { to { stroke-dashoffset: 0; } }
@keyframes brilla { 0% { stroke-dashoffset: 0.15; } 24%, 100% { stroke-dashoffset: -1.15; } }
@keyframes flota { from { transform: translateY(0); } to { transform: translateY(-4px); } }

/* Destello: pequeño diente que florece y se desvanece a lo largo del arco justo al completarse el dibujado */
.cinta-destello { opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .cinta-destello.en-flor { animation: destello-flor 1s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes destello-flor { 0% { opacity: 0; transform: scale(0.2); } 35% { opacity: 1; transform: scale(1.15); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(0.7); } }

/* ---------- Patrón «bloque-hilo»: bloques de solo texto unidos al hilo de la marca ----------
   Nodo con el anillo de la marca a la altura del antetítulo y una línea con el degradado de la cinta que baja
   junto al texto (mismo lenguaje que la línea de tiempo del recorrido). La línea se dibuja al entrar en pantalla. */
.bloque-hilo { position: relative; padding-left: 38px; }
.bloque-hilo::before {
  content: ""; position: absolute; left: 7px; top: 26px; bottom: 4px; width: 2px; border-radius: 2px;
  background: linear-gradient(#01a6fa, #11eade 55%, rgb(1 174 182 / 0));
  transform-origin: top; transition: transform 1.3s var(--curva) 0.15s;
}
.bloque-hilo::after {
  content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--papel); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 5px rgb(1 166 250 / 0.14);
  transition: opacity 0.5s var(--curva) 0.1s, transform 0.5s var(--curva) 0.1s;
}
.recorrido .bloque-hilo::after { background: var(--blanco); }
.contacto .bloque-hilo::after { background: var(--bruma); }
.oscuro .bloque-hilo::after { background: var(--marino-950); box-shadow: inset 0 0 0 2px var(--cian-300), 0 0 0 5px rgb(17 234 222 / 0.16); }
.js .bloque-hilo:not(.en-vista)::before { transform: scaleY(0); }
.js .bloque-hilo:not(.en-vista)::after { opacity: 0; transform: scale(0.4); }
@media (prefers-reduced-motion: reduce) { .js .bloque-hilo:not(.en-vista)::before { transform: none; } .js .bloque-hilo:not(.en-vista)::after { opacity: 1; transform: none; } }
@media (forced-colors: active) { .bloque-hilo::before { background: CanvasText; } }

/* ---------- Portada a sangre (Inicio; también en pruebas/hero.html) ----------
   Foto de la sala de espera a pantalla completa, con el color corregido en tools/imagenes.mjs; velo en degradado
   solo sobre la zona del texto; zoom lento ligado al scroll (hero-foto.js fija --zoom de 1 a 1,06). */
.hero-foto { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: center; min-height: calc(100svh - var(--header-height)); }
/* La foto se funde con el papel por abajo en todos los tamaños: no corta de golpe contra la sección siguiente */
.hero-foto-imagen { position: absolute; inset: 0; z-index: -2; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%); mask-image: linear-gradient(180deg, #000 68%, transparent 100%); }
.hero-foto-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; transform: scale(var(--zoom, 1)); transform-origin: 62% 45%; }
.hero-foto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(250 248 244 / 0.96) 0%, rgb(250 248 244 / 0.9) 30%, rgb(250 248 244 / 0.62) 46%, rgb(250 248 244 / 0) 66%);
}
.hero-foto-inner { width: min(100% - 2 * var(--margen), var(--ancho)); margin-inline: auto; padding-block: clamp(48px, 9vh, 112px); }
.hero-foto .portada-texto { max-width: 600px; }
.hero-foto h1 { margin-bottom: 28px; }
.hero-foto .entrada { margin-bottom: 32px; max-width: 34em; }
.hero-foto .horario-ahora { margin-top: 24px; }
/* Indicador de que hay más contenido debajo: discreto, con el degradado de la marca y un rebote lento */
.hero-scroll { position: absolute; left: 50%; bottom: 22px; width: 26px; height: 26px; transform: translateX(-50%); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.75; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .hero-scroll { animation: hero-scroll-rebote 2.6s ease-in-out infinite; }
}
@keyframes hero-scroll-rebote { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 7px); } }
@media (max-width: 900px) { .hero-scroll { display: none; } }
/* En pantallas estrechas la foto ocupa la mitad superior, encuadrada en el sofá y la lámpara (no en el techo),
   y se funde con el papel debajo del texto */
@media (max-width: 900px) {
  .hero-foto { align-items: end; }
  .hero-foto-imagen { inset: 0 0 auto 0; height: 50svh; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%); mask-image: linear-gradient(180deg, #000 60%, transparent 100%); }
  .hero-foto-imagen img { position: absolute; left: 0; bottom: 0; height: 150%; object-position: 58% 50%; transform-origin: 58% 75%; }
  .hero-foto::before { background: linear-gradient(180deg, rgb(250 248 244 / 0) 0, rgb(250 248 244 / 0) 26svh, rgb(250 248 244 / 0.84) 38svh, var(--papel) 50svh); }
  .hero-foto-inner { padding-top: 38svh; padding-bottom: 40px; }
}

/* Titular: degradado de la marca (marino → azul → turquesa oscuro, legible sobre el velo claro) solo en una parte
   de la frase, con una luz que la recorre despacio. Sin movimiento: color sólido. */
.titular-luz {
  background-image: linear-gradient(105deg, transparent 38%, rgb(150 246 238 / 0.95) 50%, transparent 62%), linear-gradient(90deg, #022747 0%, #0072b2 52%, #01848a 100%);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 100% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: slice; box-decoration-break: slice;
}
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .titular-luz { animation: titular-luz 7s ease-in-out 1.2s infinite; }
}
@keyframes titular-luz { 0% { background-position: 100% 0, 0 0; } 45%, 100% { background-position: 0% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .titular-luz { background: none; color: var(--azul-700); -webkit-text-fill-color: currentColor; } }
@media (forced-colors: active) { .titular-luz { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }

/* ---------- Presentación (declaración) ---------- */
.presentacion-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.presentacion h2 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.5rem); line-height: 1.08; }
/* El acompañamiento continúa tras la cita: un camino a todo el ancho que une los tres momentos y sigue más allá (se desvanece
   a la derecha: la relación continúa). Se dibuja al llegar; luego lo recorre un paciente (ciclo de 14 s) que se detiene antes de cada hito y lo enciende
   (los retrasos de los hitos son 2,4 s más su llegada: 10 %, 42 % y 74 % del ciclo). El SVG y los hitos
   comparten la misma caja (1200 × 300), así que los hitos van en las mismas coordenadas que el camino. */
.camino { position: relative; grid-column: 1 / -1; aspect-ratio: 1200 / 300; margin-top: clamp(24px, 4vw, 56px); border-radius: var(--r-medio); background: radial-gradient(60% 120% at 50% 100%, rgb(17 234 222 / 0.1), transparent 70%), linear-gradient(180deg, var(--blanco), var(--bruma)); box-shadow: inset 0 0 0 1px var(--linea), 0 30px 60px -36px rgb(2 39 71 / 0.35); }
.camino-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camino-base { fill: none; stroke: rgb(1 166 250 / 0.1); stroke-width: 18; stroke-linecap: round; }
.camino-trazo { fill: none; stroke: url(#camino-g); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--curva) 0.3s; }
.camino .acompana { position: absolute; inset: 0; display: block; margin: 0; padding: 0; max-width: none; list-style: none; }
.camino .acompana::before { content: none; }
.camino .acompana-paso { position: absolute; top: 50%; left: 16.667%; display: flex; flex-direction: column; align-items: center; gap: 14px; transform: translate(-50%, calc(var(--nodo) / -2)); }
.camino .acompana-paso:nth-child(2) { left: 50%; }
.camino .acompana-paso:nth-child(3) { left: 83.333%; }
.camino { --nodo: clamp(56px, 6vw, 84px); }
.camino .acompana-nodo { width: var(--nodo); height: var(--nodo); background: var(--blanco); color: var(--azul-700); box-shadow: inset 0 0 0 2px rgb(1 166 250 / 0.25), 0 14px 28px -12px rgb(2 39 71 / 0.4); }
.camino .acompana-nodo svg { width: 42%; height: 42%; }
.camino .acompana-paso p { max-width: none; white-space: nowrap; font-size: clamp(0.875rem, 0.8rem + 0.3vw, 1.0625rem); font-weight: 700; color: var(--marino-800); }
@media screen { .revela-pendiente .camino:not(.revelado) .camino-trazo { stroke-dashoffset: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .camino.bucle-activo .acompana-nodo { animation: camino-hito 14s ease-out infinite backwards; animation-delay: 3.8s; }
  .camino.bucle-activo .acompana-paso:nth-child(2) .acompana-nodo { animation-delay: 8.28s; }
  .camino.bucle-activo .acompana-paso:nth-child(3) .acompana-nodo { animation-delay: 12.76s; }
}
.camino-paciente { opacity: 0; }
.cp-figura { filter: drop-shadow(0 0 2px #fff) drop-shadow(0 3px 4px rgb(2 39 71 / 0.25)); }
.cp-tronco { fill: none; stroke: var(--marino-800); stroke-width: 13; stroke-linecap: round; }
.cp-cabeza { fill: var(--marino-800); }
.cp-pierna { fill: none; stroke: var(--marino-800); stroke-width: 5.5; stroke-linecap: round; transform-origin: 0 -18px; }
.cp-brazo { fill: none; stroke: var(--marino-800); stroke-width: 4.5; stroke-linecap: round; transform-origin: 0 -33px; }
.cp-pierna--b, .cp-brazo--b { stroke: #2b5276; }
.cp-burbuja path { fill: var(--blanco); stroke: var(--azul-500); stroke-width: 2; stroke-linejoin: round; }
.cp-punto { fill: var(--azul-500); }
.cp-chispas path { fill: none; stroke: var(--turquesa-500); stroke-width: 2.6; stroke-linecap: round; }
.cp-corazon { fill: #ef6f86; }
.cp-burbuja, .cp-chispas path, .cp-corazon { opacity: 0; }
.cp-burbuja { transform-origin: 10px -36px; }
.cp-chispas path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .camino.bucle-activo .camino-paciente { animation: camino-paciente 14s linear 2.4s infinite; }
  .camino.bucle-activo .cp-pierna--a { animation: cp-pierna-a 14s linear 2.4s infinite; }
  .camino.bucle-activo .cp-pierna--b { animation: cp-pierna-b 14s linear 2.4s infinite; }
  .camino.bucle-activo .cp-brazo--a { animation: cp-pierna-b 14s linear 2.4s infinite; }
  .camino.bucle-activo .cp-brazo--b { animation: cp-pierna-a 14s linear 2.4s infinite; }
  .camino.bucle-activo .cp-burbuja { animation: cp-burbuja 14s ease-out 2.4s infinite; }
  .camino.bucle-activo .cp-punto { animation: cp-punto 0.9s ease-in-out infinite; }
  .camino.bucle-activo .cp-punto:nth-of-type(2) { animation-delay: 0.15s; }
  .camino.bucle-activo .cp-punto:nth-of-type(3) { animation-delay: 0.3s; }
  .camino.bucle-activo .cp-chispas path { animation: cp-chispa 14s ease-out 2.4s infinite; }
  .camino.bucle-activo .cp-chispas path:nth-child(2) { animation-delay: 2.65s; }
  .camino.bucle-activo .cp-chispas path:nth-child(3) { animation-delay: 2.9s; }
  .camino.bucle-activo .cp-corazon { animation: cp-corazon 14s ease-out 2.4s infinite; }
}
@keyframes camino-paciente { 0% { opacity: 0; } 2%, 93% { opacity: 1; } 96%, 100% { opacity: 0; } 0% { transform: translate(0.0px, 150.0px); } 1.67% { transform: translate(8.7px, 150.0px); } 3.33% { transform: translate(32.5px, 150.0px); } 5% { transform: translate(65.0px, 150.0px); } 6.67% { transform: translate(97.5px, 150.0px); } 8.33% { transform: translate(121.3px, 150.0px); } 10% { transform: translate(130.0px, 150.0px); } 24% { transform: translate(130.0px, 150.0px); } 24.86% { transform: translate(132.6px, 150.0px); } 25.71% { transform: translate(140.2px, 150.0px); } 26.57% { transform: translate(152.8px, 150.0px); } 27.43% { transform: translate(169.9px, 150.0px); } 28.29% { transform: translate(191.3px, 150.0px); } 29.14% { transform: translate(216.4px, 149.1px); } 30% { transform: translate(243.9px, 142.7px); } 30.86% { transform: translate(271.1px, 128.3px); } 31.71% { transform: translate(296.3px, 107.4px); } 32.57% { transform: translate(321.8px, 85.0px); } 33.43% { transform: translate(351.0px, 67.3px); } 34.29% { transform: translate(383.7px, 58.9px); } 35.14% { transform: translate(416.4px, 58.9px); } 36% { transform: translate(446.3px, 66.2px); } 36.86% { transform: translate(471.2px, 79.8px); } 37.71% { transform: translate(490.7px, 95.5px); } 38.57% { transform: translate(506.5px, 109.9px); } 39.43% { transform: translate(519.5px, 121.1px); } 40.29% { transform: translate(529.5px, 128.7px); } 41.14% { transform: translate(535.9px, 132.8px); } 42% { transform: translate(538.0px, 134.2px); } 56% { transform: translate(538.0px, 134.2px); } 56.9% { transform: translate(540.4px, 135.5px); } 57.8% { transform: translate(547.7px, 139.2px); } 58.7% { transform: translate(560.2px, 144.1px); } 59.6% { transform: translate(577.9px, 148.3px); } 60.5% { transform: translate(600.6px, 150.0px); } 61.4% { transform: translate(627.0px, 152.5px); } 62.3% { transform: translate(655.1px, 162.2px); } 63.2% { transform: translate(682.0px, 180.0px); } 64.1% { transform: translate(707.3px, 202.7px); } 65% { transform: translate(734.8px, 224.2px); } 65.9% { transform: translate(766.6px, 238.0px); } 66.8% { transform: translate(800.3px, 242.0px); } 67.7% { transform: translate(832.4px, 238.3px); } 68.6% { transform: translate(860.0px, 227.3px); } 69.5% { transform: translate(881.8px, 212.1px); } 70.4% { transform: translate(898.8px, 197.1px); } 71.3% { transform: translate(912.4px, 184.8px); } 72.2% { transform: translate(922.7px, 176.3px); } 73.1% { transform: translate(929.3px, 171.5px); } 74% { transform: translate(931.6px, 169.9px); } 88% { transform: translate(931.6px, 169.9px); } 88.8% { transform: translate(936.3px, 166.9px); } 89.6% { transform: translate(950.7px, 159.4px); } 90.4% { transform: translate(974.9px, 152.2px); } 91.2% { transform: translate(1006.6px, 149.9px); } 92% { transform: translate(1041.6px, 145.0px); } 92.8% { transform: translate(1075.1px, 133.8px); } 93.6% { transform: translate(1104.3px, 121.1px); } 94.4% { transform: translate(1127.5px, 111.1px); } 95.2% { transform: translate(1142.8px, 105.5px); } 96% { transform: translate(1148.1px, 103.9px); } 100% { transform: translate(1148.1px, 103.9px); } }
@keyframes cp-pierna-a { 0% { transform: rotate(0deg); } 0.75% { transform: rotate(22deg); } 2.25% { transform: rotate(-22deg); } 3.75% { transform: rotate(22deg); } 5.25% { transform: rotate(-22deg); } 6.75% { transform: rotate(22deg); } 8.25% { transform: rotate(-22deg); } 10% { transform: rotate(0deg); } 24% { transform: rotate(0deg); } 24.75% { transform: rotate(22deg); } 26.25% { transform: rotate(-22deg); } 27.75% { transform: rotate(22deg); } 29.25% { transform: rotate(-22deg); } 30.75% { transform: rotate(22deg); } 32.25% { transform: rotate(-22deg); } 33.75% { transform: rotate(22deg); } 35.25% { transform: rotate(-22deg); } 36.75% { transform: rotate(22deg); } 38.25% { transform: rotate(-22deg); } 39.75% { transform: rotate(22deg); } 41.25% { transform: rotate(-22deg); } 42% { transform: rotate(0deg); } 56% { transform: rotate(0deg); } 56.75% { transform: rotate(22deg); } 58.25% { transform: rotate(-22deg); } 59.75% { transform: rotate(22deg); } 61.25% { transform: rotate(-22deg); } 62.75% { transform: rotate(22deg); } 64.25% { transform: rotate(-22deg); } 65.75% { transform: rotate(22deg); } 67.25% { transform: rotate(-22deg); } 68.75% { transform: rotate(22deg); } 70.25% { transform: rotate(-22deg); } 71.75% { transform: rotate(22deg); } 73.25% { transform: rotate(-22deg); } 74% { transform: rotate(0deg); } 88% { transform: rotate(0deg); } 88.75% { transform: rotate(22deg); } 90.25% { transform: rotate(-22deg); } 91.75% { transform: rotate(22deg); } 93.25% { transform: rotate(-22deg); } 94.75% { transform: rotate(22deg); } 96% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes cp-pierna-b { 0% { transform: rotate(0deg); } 0.75% { transform: rotate(-22deg); } 2.25% { transform: rotate(22deg); } 3.75% { transform: rotate(-22deg); } 5.25% { transform: rotate(22deg); } 6.75% { transform: rotate(-22deg); } 8.25% { transform: rotate(22deg); } 10% { transform: rotate(0deg); } 24% { transform: rotate(0deg); } 24.75% { transform: rotate(-22deg); } 26.25% { transform: rotate(22deg); } 27.75% { transform: rotate(-22deg); } 29.25% { transform: rotate(22deg); } 30.75% { transform: rotate(-22deg); } 32.25% { transform: rotate(22deg); } 33.75% { transform: rotate(-22deg); } 35.25% { transform: rotate(22deg); } 36.75% { transform: rotate(-22deg); } 38.25% { transform: rotate(22deg); } 39.75% { transform: rotate(-22deg); } 41.25% { transform: rotate(22deg); } 42% { transform: rotate(0deg); } 56% { transform: rotate(0deg); } 56.75% { transform: rotate(-22deg); } 58.25% { transform: rotate(22deg); } 59.75% { transform: rotate(-22deg); } 61.25% { transform: rotate(22deg); } 62.75% { transform: rotate(-22deg); } 64.25% { transform: rotate(22deg); } 65.75% { transform: rotate(-22deg); } 67.25% { transform: rotate(22deg); } 68.75% { transform: rotate(-22deg); } 70.25% { transform: rotate(22deg); } 71.75% { transform: rotate(-22deg); } 73.25% { transform: rotate(22deg); } 74% { transform: rotate(0deg); } 88% { transform: rotate(0deg); } 88.75% { transform: rotate(-22deg); } 90.25% { transform: rotate(22deg); } 91.75% { transform: rotate(-22deg); } 93.25% { transform: rotate(22deg); } 94.75% { transform: rotate(-22deg); } 96% { transform: rotate(0deg); } 100% { transform: rotate(0deg); } }
@keyframes cp-burbuja { 0%, 10.5% { opacity: 0; transform: scale(0.3); } 12.5% { opacity: 1; transform: scale(1.06); } 13.5%, 22% { opacity: 1; transform: scale(1); } 23.5%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes cp-punto { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes cp-chispa { 0%, 42.5% { opacity: 0; transform: scale(0.2) rotate(0deg); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 49% { opacity: 0.2; transform: scale(0.7) rotate(90deg); } 51% { opacity: 1; transform: scale(1.1) rotate(135deg); } 55%, 100% { opacity: 0; transform: scale(0.4) rotate(180deg); } }
@keyframes cp-corazon { 0%, 74.5% { opacity: 0; transform: translateY(8px) scale(0.5); } 77% { opacity: 1; transform: translateY(0) scale(1.1); } 79% { transform: translateY(-2px) scale(1); } 86% { opacity: 1; transform: translateY(-14px) scale(1); } 89%, 100% { opacity: 0; transform: translateY(-20px) scale(0.9); } }
@keyframes camino-hito {
  0%, 24%, 100% { color: var(--azul-700); box-shadow: inset 0 0 0 2px rgb(1 166 250 / 0.25), 0 14px 28px -12px rgb(2 39 71 / 0.4); }
  4% { color: var(--turquesa-500); box-shadow: inset 0 0 0 2.5px var(--turquesa-500), 0 0 0 10px rgb(17 234 222 / 0.18), 0 0 34px 2px rgb(17 234 222 / 0.45); }
}
/* Móvil: los hitos en vertical sobre una línea (el camino ondulado no cabe con legibilidad) */
@media (max-width: 700px) {
  .camino { aspect-ratio: auto; padding: 24px 22px; --nodo: 52px; }
  .camino-svg { display: none; }
  .camino .acompana { position: relative; display: grid; gap: 22px; }
  .camino .acompana::before { content: ""; position: absolute; top: 26px; bottom: 26px; left: 25px; width: 2px; background: linear-gradient(#01a6fa, #11eade); }
  .camino .acompana-paso, .camino .acompana-paso:nth-child(n) { position: relative; top: auto; left: auto; flex-direction: row; gap: 16px; transform: none; }
}
.acompana-nodo { display: grid; place-items: center; border-radius: 50%; flex-shrink: 0; }
.acompana-paso p { margin: 0; }

/* ---------- Tratamientos (Inicio) ---------- */
.tratamientos-cabecera { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 5vw, 64px); }
.tratamientos-cabecera p { color: var(--tinta-suave); }
.tratamientos-rejilla { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.ortodoncia-destacada {
  position: relative; display: grid; gap: 28px;
  padding: clamp(28px, 3.4vw, 44px);
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--r-medio); box-shadow: var(--sombra);
}
.ortodoncia-destacada .arcada { width: 100%; max-width: 440px; margin-inline: auto; }
.ortodoncia-destacada .etiqueta { margin: 0 0 6px; color: var(--azul-700); font-weight: 650; font-size: 1rem; }
.ortodoncia-destacada h3 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); margin-bottom: 14px; }
.arcada rect { fill: #fff; stroke: var(--marino-800); stroke-width: 1.75; }
.arcada-alineador { fill: rgb(1 166 250 / 0.07); stroke: url(#arcada-g); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.pieza { transform-box: fill-box; transform-origin: center; transition: transform 1.1s var(--curva) 0.25s; }
.arcada-preparada .pieza-d1 { transform: translate(0, -7px) rotate(-14deg); }
.arcada-preparada .pieza-i1 { transform: translate(0, 5px) rotate(11deg); }
.arcada-preparada .pieza-d2 { transform: translate(0, -4px) rotate(9deg); }
.arcada-preparada .arcada-alineador { stroke-dashoffset: 1; fill-opacity: 0; }
.arcada-alineada .pieza { transform: none; }
.arcada-alineada .arcada-alineador { stroke-dashoffset: 0; fill-opacity: 1; transition: stroke-dashoffset 1.6s var(--curva) 0.9s, fill-opacity 0.8s 2s; }
/* Vida continua: los incisivos se desplazan un poco y el alineador vuelve a dibujarse y los recoloca (ciclo de 10 s) */
.arcada-brillo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.06 1.2; stroke-dashoffset: 0.1; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .arcada:not(.arcada-preparada) .pieza-d1 { animation: arcada-d1 10s var(--curva) 2.6s infinite; }
  .bucle-activo .arcada:not(.arcada-preparada) .pieza-i1 { animation: arcada-i1 10s var(--curva) 2.6s infinite; }
  .bucle-activo .arcada:not(.arcada-preparada) .pieza-d2 { animation: arcada-d2 10s var(--curva) 2.6s infinite; }
  .bucle-activo .arcada:not(.arcada-preparada) .arcada-alineador { animation: arcada-alineador 10s ease-in-out 2.6s infinite; }
  .bucle-activo .arcada:not(.arcada-preparada) .arcada-brillo { animation: arcada-brillo 10s ease-in-out 2.6s infinite; }
}
@keyframes arcada-d1 { 0%, 18% { transform: none; } 34%, 48% { transform: translate(0, -6px) rotate(-12deg); } 66%, 100% { transform: none; } }
@keyframes arcada-i1 { 0%, 20% { transform: none; } 36%, 48% { transform: translate(0, 4px) rotate(9deg); } 68%, 100% { transform: none; } }
@keyframes arcada-d2 { 0%, 22% { transform: none; } 38%, 48% { transform: translate(0, -3px) rotate(7deg); } 70%, 100% { transform: none; } }
@keyframes arcada-alineador {
  0%, 16% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 1; }
  30% { stroke-dashoffset: 0; fill-opacity: 0.15; stroke-opacity: 0.2; }
  46% { stroke-dashoffset: 1; fill-opacity: 0; stroke-opacity: 0.2; }
  48% { stroke-dashoffset: 1; stroke-opacity: 1; }
  64% { stroke-dashoffset: 0; fill-opacity: 0.4; }
  74%, 100% { stroke-dashoffset: 0; fill-opacity: 1; stroke-opacity: 1; }
}
@keyframes arcada-brillo { 0%, 74% { stroke-dashoffset: 0.1; opacity: 0; } 76% { opacity: 0.9; } 92% { stroke-dashoffset: -1.15; opacity: 0.9; } 94%, 100% { stroke-dashoffset: -1.15; opacity: 0; } }

.lista-tratamientos { border-top: 1px solid var(--linea); }
.fila-tratamiento {
  display: grid; grid-template-columns: 56px minmax(0, 1fr) 40px; gap: 20px; align-items: center;
  padding: 22px 12px; margin-inline: -12px; border-bottom: 1px solid var(--linea); border-radius: var(--r-pequeno);
  color: inherit; text-decoration: none;
  transition: background-color 0.25s;
}
.fila-tratamiento:hover { background: var(--blanco); color: inherit; }
.fila-tratamiento h3 { font-size: clamp(1.3rem, 1.2rem + 0.4vw, 1.5rem); margin-bottom: 4px; }
.fila-tratamiento p { color: var(--tinta-suave); font-size: 1rem; line-height: 1.55; margin: 0; }
.fila-tratamiento:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.icono-tratamiento { width: 56px; height: 56px; padding: 6px; border-radius: 16px; background: var(--bruma); }
.icono-tratamiento path, .icono-tratamiento circle, .icono-tratamiento rect { fill: none; stroke: var(--marino-800); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icono-tratamiento .acento { stroke: url(#icono-g); stroke-width: 2; }
.fila-flecha {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid var(--linea-fuerte); color: var(--marino-800);
  transition: transform 0.3s var(--curva), background-color 0.2s, border-color 0.2s, color 0.2s;
}
.fila-tratamiento:hover .fila-flecha { transform: translateX(4px); background: var(--marino-800); border-color: var(--marino-800); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .fila-tratamiento:hover .icono-tratamiento path, .fila-tratamiento:focus-visible .icono-tratamiento path { stroke-dasharray: 1 1; animation: redibuja 0.7s var(--curva); }
}
@keyframes redibuja { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* Vida ambiental de los iconos (cada uno con un gesto propio de su tratamiento, ciclos desfasados) */
.icono-tratamiento .acento { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  /* Implantología: la rosca «gira» */
  .bucle-activo .fila-tratamiento:nth-child(1) .acento { stroke-dasharray: 0.16 0.06; animation: rosca 2.2s linear infinite; }
  /* Odontología general: el espejo de exploración se inclina despacio */
  .bucle-activo .fila-tratamiento:nth-child(2) .acento { transform-origin: 27px 43px; animation: espejo 5.5s ease-in-out 0.6s infinite; }
  /* Odontopediatría: el arco sobre los dientes se dibuja y se recoge */
  .bucle-activo .fila-tratamiento:nth-child(3) .acento { stroke-dasharray: 1 1; animation: arco-nino 6.5s ease-in-out 1.2s infinite; }
  /* Endodoncia: un flujo recorre los conductos */
  .bucle-activo .fila-tratamiento:nth-child(4) .acento { stroke-dasharray: 0.12 0.1; animation: flujo 2.8s linear 0.3s infinite; }
}
@keyframes rosca { to { stroke-dashoffset: -0.22; } }
@keyframes espejo { 0%, 100% { transform: rotate(0deg); } 40% { transform: rotate(-12deg); } 70% { transform: rotate(6deg); } }
@keyframes arco-nino { 0% { stroke-dashoffset: 1; } 35%, 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
@keyframes flujo { to { stroke-dashoffset: -0.22; } }
.tratamientos-pie { margin-top: 40px; }

/* ---------- Sección marina: experiencia ---------- */
.oscuro { background: var(--marino-950); color: var(--en-oscuro); }
.oscuro h2, .oscuro h3 { color: #fff; }
.oscuro p { color: var(--en-oscuro-suave); }
.oscuro .entrada { color: #fff; }
.experiencia { overflow: clip; }
.experiencia-inner { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* La cifra es la protagonista: grande, limpia, con el «+» en el cian de la cinta y un brillo que la recorre despacio */
.experiencia-cifra { padding-right: clamp(0px, 4vw, 64px); }
.experiencia-cifra .cifra { margin: 0; }
.cifra-svg { display: block; width: min(100%, 380px); height: auto; overflow: visible; }
.cifra-svg text { font-family: var(--f-titular); font-weight: 300; font-size: 250px; letter-spacing: -10px; }
.cifra-svg .cifra-mas { font-size: 105px; }
.cifra-relleno { fill: #fff; }
.cifra-relleno .cifra-mas { fill: var(--cian-300); }
.cifra-contorno { fill: none; stroke: url(#cifra-g); stroke-width: 1.2; stroke-opacity: 0.35; }
.cifra-luz { fill: none; stroke: url(#cifra-g); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0 10000; filter: drop-shadow(0 0 7px rgb(17 234 222 / 0.65)); }
.experiencia-cifra .cifra-pie { margin: 22px 0 0; color: var(--en-oscuro-suave); font-size: 1.0625rem; font-weight: 600; letter-spacing: 0.01em; }
@media (prefers-reduced-motion: no-preference) {
  /* tramos de luz que dan la vuelta al contorno de cada glifo, despacio, para que se note sin buscarla */
  .bucle-activo .cifra-luz { stroke-dasharray: 170 480; animation: contorno 9s linear infinite; }
}
@keyframes contorno { to { stroke-dashoffset: -630; } }
.experiencia h2 { margin-bottom: 24px; }

/* ---------- La clínica (tira de fotos) ---------- */
.clinica-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.clinica-texto h2 { margin-bottom: 22px; }
.clinica-texto .enlace { margin-top: 12px; }
/* Mosaico: una foto alta y dos apiladas, todas con la misma altura total y recortadas con object-fit (sin huecos) */
.tira { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 14px; aspect-ratio: 6 / 5; }
.tira figure { margin: 0; min-height: 0; overflow: hidden; border-radius: var(--r-tarjeta); background: #ddd2c4; }
.tira picture { height: 100%; }
.tira img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--curva); }
.tira figure:hover img { transform: scale(1.03); }
.tira .principal { grid-row: span 2; }
.tira .principal img { object-position: 35% 50%; }

/* ---------- Equipo ---------- */
.equipo-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.equipo-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-medio); overflow: hidden; background: #ddd2c4; }
.equipo-foto picture { height: 100%; }
.equipo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 46% 50%; }
.equipo-texto h2 { margin-bottom: 22px; }
.equipo-texto .enlace { margin-top: 12px; }

/* ---------- Nosotros ---------- */
/* Marco de la marca: un bloque con el degradado de la cinta desplazado detrás de la foto y el nodo del patrón
   bloque-hilo en la esquina. Lo comparten el retrato, la tarjeta volteable y la foto de los diplomas. */
.marco-cinta { position: relative; isolation: isolate; --marco: 20px; }
.marco-cinta::before {
  content: ""; position: absolute; z-index: -1; inset: var(--marco) calc(-1 * var(--marco)) calc(-1 * var(--marco)) var(--marco);
  border-radius: var(--r-medio); background: linear-gradient(135deg, #01a6fa 0%, #11eade 55%, #01aeb6 100%); opacity: 0.92;
}
.nos-retrato-marco { max-width: 460px; justify-self: center; width: 100%; }
.nos-retrato { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-medio); overflow: hidden; background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.nos-retrato picture { height: 100%; }
.nos-retrato img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.nos-hero .portada-texto { max-width: 640px; }
.nos-hero .trat-hero-inner { align-items: center; }

/* Cita: comillas grandes con el degradado de la marca */
.nos-cita .bloque-hilo { max-width: 52rem; }
.nos-comillas { display: block; height: 0.62em; margin: 6px 0 4px -0.04em; font-family: var(--f-titular); font-size: clamp(5rem, 3.5rem + 5vw, 8rem); line-height: 1; background: linear-gradient(135deg, #01a6fa, #11eade 70%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.nos-cita blockquote { margin: 0; max-width: 30em; font-family: var(--f-titular); font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.35rem); line-height: 1.3; color: var(--marino-800); text-wrap: balance; }
@media (forced-colors: active) { .nos-comillas { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
/* Filosofía junto a la tarjeta volteable; y el equipo (Inma con una auxiliar) en el marco del degradado */
.nos-cita-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.nos-equipo-marco { max-width: 460px; width: 100%; justify-self: center; }
.nos-equipo-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--r-medio); overflow: hidden; background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.nos-equipo-foto picture { height: 100%; }
.nos-equipo-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 40%; }

/* Tarjeta volteable: cara frontal de la marca y, detrás, Inma con su hija.
   Un botón transparente cubre la tarjeta; la pista («Dale la vuelta») es su texto visible. */
.marco-cinta--giro { max-width: 460px; width: 100%; justify-self: center; }
.giro { position: relative; aspect-ratio: 1; perspective: 1400px; }
.giro-interior { position: relative; height: 100%; transform-style: preserve-3d; transition: transform 0.9s var(--curva); }
.girada .giro-interior { transform: rotateY(180deg); }
.giro-cara { position: absolute; inset: 0; margin: 0; border-radius: var(--r-medio); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.giro-frente { display: grid; place-content: center; justify-items: center; gap: 22px; padding: 32px; text-align: center; background: radial-gradient(120% 90% at 30% 20%, #0a3a63 0%, var(--marino-950) 70%); }
.giro-simbolo { width: clamp(84px, 22%, 128px); height: auto; }
.giro-frase { margin: 0; font-family: var(--f-titular); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); color: #fff; }
.giro-reverso { transform: rotateY(180deg); background: #ddd2c4; }
.giro-reverso picture { height: 100%; }
.giro-reverso img { width: 100%; height: 100%; object-fit: cover; }
.giro-boton { position: absolute; inset: 0; z-index: 2; align-items: flex-end; justify-content: flex-start; padding: 16px; border: 0; border-radius: var(--r-medio); background: transparent; cursor: pointer; font: inherit; }
.giro-boton:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 4px; }
.giro-pista { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border-radius: 999px; background: rgb(255 255 255 / 0.94); color: var(--marino-800); font-weight: 650; font-size: 0.9375rem; box-shadow: 0 0 0 4px rgb(1 166 250 / 0.16), var(--sombra); transition: box-shadow 0.25s, transform 0.25s var(--curva); }
.giro-pista svg { width: 20px; height: 20px; color: var(--azul-700); }
.giro-boton:hover .giro-pista, .giro-boton:focus-visible .giro-pista { box-shadow: 0 0 0 5px rgb(17 234 222 / 0.3), var(--sombra); transform: translateY(-2px); }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo:not(.girada) .giro-pista svg { animation: giro-aviso 4.5s var(--curva) 1.5s infinite; }
}
@keyframes giro-aviso { 0%, 70%, 100% { transform: rotate(0); } 82% { transform: rotate(200deg); } 90% { transform: rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .giro-interior { transition: none; } }
html:not(.js) .giro-frente { display: none; }
html:not(.js) .giro-reverso { transform: none; }

/* Invisalign: vitrina oscura con foco de luz, contorno de alineador al fondo, insignias metálicas y un destello
   lento que recorre el cristal de las placas (pieza reutilizable: Nosotros y, más adelante, Ortodoncia) */
.invisalign { overflow: clip; background: radial-gradient(70% 90% at 78% 45%, #0d4673 0%, var(--marino-950) 62%); }
.invisalign-arco { position: absolute; right: -4%; top: 50%; width: min(62vw, 760px); transform: translateY(-46%); fill: none; stroke: var(--cian-300); stroke-width: 1.5; opacity: 0.16; pointer-events: none; }
.invisalign-inner { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.invisalign-texto h2 { margin-bottom: 20px; }
.invisalign-placas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
.invisalign-placa { margin: 0; }
.placa-marco { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-tarjeta); overflow: hidden; background: #2a3a48; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 30px 60px -18px rgb(0 0 0 / 0.6), 0 0 80px -20px rgb(17 234 222 / 0.35); }
.placa-marco picture { height: 100%; }
.placa-marco img { width: 100%; height: 100%; object-fit: cover; }
.placa-marco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgb(255 255 255 / 0.32) 50%, transparent 62%); background-size: 280% 100%; background-position: 120% 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .placa-marco::after { animation: placa-destello 7s ease-in-out 1s infinite; }
  .bucle-activo .invisalign-placa:nth-child(2) .placa-marco::after { animation-delay: 4.5s; }
}
@keyframes placa-destello { 0% { background-position: 120% 0; } 30%, 100% { background-position: -20% 0; } }
.invisalign-placa figcaption { margin-top: 14px; font-size: var(--t-pequeno); color: var(--en-oscuro-suave); }
.placa-nivel { display: inline-block; margin-right: 6px; padding: 4px 12px; border-radius: 999px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8125rem; color: #1d1a12; }
.placa-nivel--gold { background: linear-gradient(120deg, #a57a22, #f2d68a 45%, #c79a3a 70%, #f5e3a8); }
.placa-nivel--platinum { background: linear-gradient(120deg, #8d97a1, #f1f4f7 45%, #aab3bc 70%, #eef1f4); }
.invisalign-placa:nth-child(2) { margin-top: clamp(28px, 6vw, 72px); }
@media (forced-colors: active) { .placa-nivel { background: none; border: 1px solid CanvasText; } }

/* Formación: línea de tiempo (años a la izquierda, nodos sobre el degradado de la marca); la foto de los
   diplomas queda como apoyo, fija junto al título mientras se recorre la lista */
.formacion-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.formacion-lado { position: sticky; top: calc(var(--header-height) + 40px); display: grid; gap: clamp(40px, 5vw, 56px); }
/* Dato de volumen + tres diplomas sueltos a modo de collage, en vez de una sola foto plana de la pared */
.formacion-destacado { max-width: 420px; }
.formacion-cifra { position: relative; margin: 0 0 36px; }
.formacion-cifra::before {
  content: ""; position: absolute; left: -28px; top: -34px; width: 190px; height: 190px; z-index: -1;
  background: radial-gradient(closest-side, rgb(1 166 250 / 0.16), rgb(17 234 222 / 0.08) 65%, transparent 100%);
}
.formacion-cifra strong { display: block; font-family: var(--f-titular); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(3.5rem, 2.2rem + 6vw, 5.75rem); line-height: 0.96; background: linear-gradient(135deg, #01a6fa, #11eade 55%, #01aeb6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.formacion-cifra span { display: block; margin: 10px 0 0; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tinta-suave); }
.formacion-diplomas { display: flex; align-items: flex-end; padding: 8px 0 4px; }
.formacion-diploma { position: relative; width: 38%; margin: 0 0 0 -13%; border-radius: 9px; overflow: hidden; background: var(--blanco); padding: 5px; box-shadow: 0 18px 32px -14px rgb(2 39 71 / 0.4); transition: transform 0.25s var(--curva); }
.formacion-diploma:first-child { margin-left: 0; }
.formacion-diploma:nth-child(1) { transform: rotate(-6deg); z-index: 1; }
.formacion-diploma:nth-child(2) { transform: translateY(-16px) rotate(3deg); z-index: 3; }
.formacion-diploma:nth-child(3) { transform: rotate(7deg); z-index: 2; }
.formacion-diploma picture { display: block; aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; }
.formacion-diploma img { width: 100%; height: 100%; object-fit: cover; }
@media (forced-colors: active) { .formacion-cifra strong { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
.formacion-linea { position: relative; margin: 0; padding: 0; list-style: none; --col-ano: 104px; --hueco: 44px; }
.formacion-linea::before { content: ""; position: absolute; left: calc(var(--col-ano) + var(--hueco) / 2 - 1px); top: 12px; bottom: 12px; width: 2px; border-radius: 2px; background: linear-gradient(#01a6fa, #11eade 55%, rgb(1 174 182 / 0.15)); }
.formacion-linea li { position: relative; display: grid; grid-template-columns: var(--col-ano) minmax(0, 1fr); column-gap: var(--hueco); padding-bottom: 28px; }
.formacion-linea li:last-child { padding-bottom: 0; }
.formacion-linea li::before { content: ""; position: absolute; left: calc(var(--col-ano) + var(--hueco) / 2 - 7px); top: 7px; width: 14px; height: 14px; border-radius: 50%; background: var(--papel); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 5px rgb(1 166 250 / 0.12); }
.formacion-ano { padding-top: 2px; text-align: right; font-family: var(--f-titular); font-size: 1.25rem; line-height: 1.2; color: var(--azul-700); font-variant-numeric: tabular-nums; }
.formacion-linea h3 { font-size: 1.1875rem; line-height: 1.3; margin-bottom: 4px; }
.formacion-linea p { margin: 0; font-size: var(--t-pequeno); color: var(--tinta-suave); }

/* Forma de trabajar: tres tarjetas escalonadas. Cada ilustración (trazo de los iconos de la web, en blanco) va sobre un panel
   del degradado de la marca, con su número grande en contorno. Se dibujan una tras otra (con una pausa) una sola vez, al llegar
   a la sección (site.js añade .dibujado); el texto aparece con cada una */
.nos-valores { position: relative; overflow: clip; background: linear-gradient(180deg, var(--papel) 0%, var(--bruma) 100%); }
.nos-valores-lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); align-items: start; margin: clamp(36px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
.nos-valores-lista > li { --retraso: 0s; overflow: hidden; border-radius: var(--r-medio); background: var(--blanco); box-shadow: 0 2px 6px rgb(2 39 71 / 0.06), 0 30px 60px -28px rgb(2 39 71 / 0.4); transition: opacity 0.7s var(--curva) var(--retraso), transform 0.7s var(--curva) var(--retraso), box-shadow 0.3s; }
.nos-valores-lista > li:nth-child(2) { --retraso: 1.5s; margin-top: clamp(0px, 4vw, 56px); }
.nos-valores-lista > li:nth-child(3) { --retraso: 3s; margin-top: clamp(0px, 8vw, 112px); }
.valor-panel { position: relative; padding: clamp(28px, 3vw, 40px) clamp(18px, 2vw, 28px) 10px; background: radial-gradient(120% 90% at 85% 0%, rgb(17 234 222 / 0.45), transparent 55%), linear-gradient(150deg, #0a4f86 0%, var(--marino-900, #032c50) 100%); }
.valor-panel::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: linear-gradient(90deg, #01a6fa, #11eade 60%, #01aeb6); }
.nos-valor-num { position: absolute; top: 10px; right: 18px; font-family: var(--f-titular); font-size: clamp(3.5rem, 2.4rem + 3vw, 5.25rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(255 255 255 / 0.4); }
.valor-ilu { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; }
.valor-ilu path, .valor-ilu circle, .valor-ilu rect { fill: none; stroke: #fff; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--curva) calc(var(--retraso) + 0.15s); }
.valor-ilu .acento { stroke: var(--cian-300); stroke-width: 1.6; transition-delay: calc(var(--retraso) + 0.7s); filter: drop-shadow(0 0 3px rgb(17 234 222 / 0.7)); }
.valor-texto { padding: clamp(22px, 2.4vw, 30px) clamp(20px, 2.2vw, 30px) clamp(26px, 2.6vw, 34px); }
.nos-valores-lista h3 { margin-bottom: 10px; }
.nos-valores-lista p { margin: 0; color: var(--tinta-suave); }
@media (hover: hover) { .nos-valores-lista > li:hover { box-shadow: 0 2px 6px rgb(2 39 71 / 0.08), 0 40px 70px -26px rgb(2 39 71 / 0.5); } }
@media screen {
  .revela-pendiente .nos-valores-lista:not(.dibujado) > li { opacity: 0; transform: translateY(24px); }
  .revela-pendiente .nos-valores-lista:not(.dibujado) .valor-ilu :is(path, circle, rect) { stroke-dashoffset: 1; }
}
@media (forced-colors: active) { .nos-valor-num { color: CanvasText; -webkit-text-stroke: 0; } .valor-ilu :is(path, circle, rect) { stroke: CanvasText; } }
/* Vida continua, una por ilustración y con sentido propio, solo tras terminar su dibujo inicial */
.bocadillo, .puntero { transform-box: fill-box; transform-origin: center; }
.nos-valores-lista li:nth-child(3) .acento { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .dibujado.bucle-activo li:nth-child(1) .bocadillo { animation: bocadillo-respira 3.4s ease-in-out 1.3s infinite; }
  .dibujado.bucle-activo li:nth-child(2) .puntero { animation: puntero-gesto 2.6s ease-in-out 1.3s infinite; }
  .dibujado.bucle-activo li:nth-child(3) .acento { animation: corazon-late 3.6s ease-in-out 1.3s infinite; }
}
@keyframes bocadillo-respira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes puntero-gesto { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(2.5px, -2.5px); } }
@keyframes corazon-late { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.2); } 24% { transform: scale(1); } 34% { transform: scale(1.12); } 46%, 100% { transform: scale(1); } }

/* Profesionales colaboradores (marino): tres paneles de cristal con el icono animado de cada área. Una luz recorre los
   paneles uno tras otro (la coordinación); el icono de cada uno tiene su gesto (burbujas, lectura, destello) */
.nos-colab { overflow: clip; background: radial-gradient(60% 80% at 85% 30%, #0d4673 0%, var(--marino-950) 65%); }
.nos-colab-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.nos-colab-texto .texto-suave { max-width: 34em; margin: 24px 0 0; color: var(--en-oscuro-suave); }
.colab-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(14px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.colab-tarjeta { position: relative; display: grid; justify-items: center; align-content: start; gap: 18px; padding: clamp(26px, 3vw, 38px) 14px clamp(24px, 3vw, 32px); border-radius: var(--r-medio); text-align: center; background: linear-gradient(160deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 24px 50px -24px rgb(0 0 0 / 0.6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.colab-tarjeta:nth-child(2) { margin-top: clamp(0px, 4vw, 48px); }
.colab-tarjeta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; background: linear-gradient(135deg, #01a6fa, #11eade 55%, #01aeb6); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; pointer-events: none; }
.colab-medalla { position: relative; display: grid; place-items: center; width: clamp(100px, 10vw, 132px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #e6f4f8 70%); box-shadow: 0 0 0 6px rgb(17 234 222 / 0.1), 0 16px 30px -12px rgb(0 0 0 / 0.5); }
.colab-icono { width: 86%; height: auto; padding: 0; background: none; border-radius: 0; overflow: visible; }
.colab-nombre { font-family: var(--f-titular); font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); line-height: 1.25; color: #fff; }
.colab-icono .colab-liquido { fill: rgb(17 234 222 / 0.28); stroke: none; }
.colab-icono .colab-burbuja { fill: var(--turquesa-500); stroke: none; opacity: 0; transform-box: fill-box; transform-origin: center; }
.colab-icono .colab-lectura { stroke: var(--cian-300); stroke-width: 2.2; opacity: 0; filter: drop-shadow(0 0 2px rgb(17 234 222 / 0.9)); }
.colab-icono .colab-destello { stroke: #fff; stroke-width: 1.6; stroke-dasharray: 0.18 1; stroke-dashoffset: 0.18; opacity: 0; }
.colab-medalla::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; border: 1.5px dashed rgb(17 234 222 / 0.35); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .colab-tarjetas.bucle-activo .colab-medalla::after { animation: colab-orbita 40s linear infinite; }
  .colab-tarjetas.bucle-activo .colab-tarjeta:nth-child(2) .colab-medalla::after { animation-direction: reverse; }
  .colab-tarjetas.bucle-activo .colab-tarjeta::before { animation: colab-turno 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
  .colab-tarjetas.bucle-activo .colab-medalla { animation: colab-medalla 7.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
  .colab-tarjetas.bucle-activo .colab-burbuja { animation: colab-burbuja 2.4s ease-in infinite; }
  .colab-tarjetas.bucle-activo .colab-burbuja--2 { animation-delay: 0.8s; }
  .colab-tarjetas.bucle-activo .colab-burbuja--3 { animation-delay: 1.6s; }
  .colab-tarjetas.bucle-activo .colab-lectura { animation: colab-lectura 3s ease-in-out infinite; }
  .colab-tarjetas.bucle-activo .colab-destello { animation: colab-destello 3.6s ease-in-out infinite; }
}
@keyframes colab-orbita { to { transform: rotate(360deg); } }
@keyframes colab-turno { 0%, 40%, 100% { opacity: 0; } 8%, 28% { opacity: 1; } }
@keyframes colab-medalla { 0%, 40%, 100% { box-shadow: 0 0 0 6px rgb(17 234 222 / 0.1), 0 16px 30px -12px rgb(0 0 0 / 0.5); } 14%, 26% { box-shadow: 0 0 0 10px rgb(17 234 222 / 0.22), 0 0 40px 4px rgb(17 234 222 / 0.35); } }
@keyframes colab-burbuja { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-16px) scale(1.1); } }
@keyframes colab-lectura { 0% { opacity: 0; transform: translateY(0); } 10%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(18px); } }
@keyframes colab-destello { 0%, 55% { opacity: 0; stroke-dashoffset: 0.18; } 60% { opacity: 1; } 90% { opacity: 1; stroke-dashoffset: -0.85; } 100% { opacity: 0; stroke-dashoffset: -0.85; } }
@media (forced-colors: active) { .colab-tarjeta { border: 1px solid CanvasText; } }
/* Formación hoy: el primer nodo late (sigue formándose) y su año va en el degradado */
.formacion-hoy .formacion-ano { font-weight: 600; background: linear-gradient(135deg, #01a6fa, #11eade); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.formacion-linea li.formacion-hoy::before { background: var(--turquesa-500); box-shadow: 0 0 0 4px var(--papel), 0 0 0 7px rgb(17 234 222 / 0.35); }
.formacion-hoy > div { padding: 14px 18px 16px; margin-top: -10px; border-radius: var(--r-tarjeta); background: var(--blanco); box-shadow: inset 0 0 0 1px rgb(1 174 182 / 0.25), var(--sombra); }
@media (prefers-reduced-motion: no-preference) {
  .formacion-linea li.formacion-hoy::after { content: ""; position: absolute; left: calc(var(--col-ano) + var(--hueco) / 2 - 7px); top: 7px; width: 14px; height: 14px; border-radius: 50%; background: rgb(17 234 222 / 0.5); animation: formacion-latido 2.4s ease-out infinite; pointer-events: none; }
}
@keyframes formacion-latido { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(2.8); opacity: 0; } }
@media (forced-colors: active) { .formacion-hoy .formacion-ano { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }

@media (max-width: 900px) {
  .invisalign-inner, .formacion-inner, .nos-cita-inner, .nos-colab-inner { grid-template-columns: minmax(0, 1fr); }
  .formacion-lado { position: static; }
  .nos-valores-lista { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; padding-bottom: 0; }
  .nos-valores-lista > li:nth-child(n) { margin-top: 0; }
  .invisalign-arco { width: 120vw; right: -40%; top: auto; bottom: -10%; transform: none; }
}
@media (max-width: 560px) {
  .marco-cinta { --marco: 12px; }
  .formacion-linea { --col-ano: 70px; --hueco: 30px; }
  .formacion-ano { font-size: 1.0625rem; }
  .colab-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .colab-tarjeta { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; padding: 16px 18px; text-align: left; }
  .colab-tarjeta:nth-child(2) { margin-top: 0; }
  .colab-medalla { width: 76px; }
  .colab-medalla::after { inset: -7px; }
}

/* ---------- Dudas frecuentes ---------- */
.faq-inner { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq-cabecera h2 { margin-bottom: 20px; }
.faq-cabecera p { color: var(--tinta-suave); }
.faq-cabecera .enlace { margin-top: 8px; }
.faq-lista { border-top: 1px solid var(--linea); }
.faq-item { border-bottom: 1px solid var(--linea); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 4px; cursor: pointer; list-style: none;
  font: 600 1.125rem/1.45 var(--f-texto); color: var(--marino-800);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 30px; height: 30px; border-radius: 50%;
  background:
    linear-gradient(135deg, #01a6fa, #11eade 70%) center / 12px 1.75px no-repeat,
    linear-gradient(135deg, #01a6fa, #11eade 70%) center / 1.75px 12px no-repeat;
  box-shadow: inset 0 0 0 1.5px var(--linea-fuerte);
  transition: transform 0.3s var(--curva), background-size 0.3s;
}
.faq-item[open] summary::after { background-size: 12px 1.75px, 1.75px 0; transform: rotate(180deg); box-shadow: inset 0 0 0 1.5px var(--azul-500); }
.faq-item summary:hover { color: var(--azul-700); }
/* Separación inferior con padding (no margen): en el último elemento del grupo, sin borde, el margen se colapsaba fuera del
   <details> y la animación de apertura (altura fija) terminaba con un salto de 24 px */
.faq-item > p { margin: -6px 52px 0 4px; padding-bottom: 24px; color: var(--tinta-suave); }
@media (forced-colors: active) { .faq-item summary::after { background: linear-gradient(CanvasText, CanvasText) center / 12px 1.75px no-repeat, linear-gradient(CanvasText, CanvasText) center / 1.75px 12px no-repeat; } }

/* ---------- Dudas frecuentes ----------
   Hero: una conversación que se resuelve. El estado base es la conversación ya resuelta (sin movimiento, fuera de pantalla o
   sin JavaScript); con .bucle-activo se repite cada 9 s: pregunta → escribiendo → respuesta → marca → corazón. */
.trat-hero-visual.dudas-hero-visual::before { content: none; }
.dudas-chat { display: block; width: min(100%, 500px); margin-inline: auto; overflow: visible; }
.dc-fondo { fill: rgb(1 166 250 / 0.07); }
.dc-anillo { fill: none; stroke: rgb(1 166 250 / 0.25); stroke-width: 1.5; stroke-dasharray: 3 9; stroke-linecap: round; }
.dc-mueve { transform-box: fill-box; transform-origin: 20% 100%; }
.dc-caja { fill: var(--blanco); filter: drop-shadow(0 14px 22px rgb(2 39 71 / 0.16)) drop-shadow(0 2px 4px rgb(2 39 71 / 0.08)); }
.dc-caja--clinica { fill: #0a3a63; filter: drop-shadow(0 16px 26px rgb(2 39 71 / 0.35)); }
.dc-escribe .dc-mueve, .dc-respuesta .dc-mueve { transform-origin: 85% 100%; }
.dc-signo-fondo { fill: url(#icono-g); }
.dc-signo { fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.dc-linea { fill: none; stroke: #dbe6ec; stroke-width: 9; stroke-linecap: round; }
.dc-linea--clara { stroke: rgb(255 255 255 / 0.22); }
.dc-punto { fill: var(--cian-300); }
.dc-check-fondo { fill: var(--turquesa-500); }
.dc-check { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dc-heart { fill: #f0617a; }
.dc-chispas path { fill: none; stroke: var(--turquesa-500); stroke-width: 2.4; stroke-linecap: round; opacity: 0.8; }
.dc-escribe { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .dc-pregunta .dc-mueve { animation: dc-pregunta 9s var(--curva) infinite backwards; }
  .bucle-activo .dc-escribe { opacity: 1; }
  .bucle-activo .dc-escribe .dc-mueve { animation: dc-escribe 9s var(--curva) infinite backwards; }
  .bucle-activo .dc-punto { animation: dc-punto 0.9s ease-in-out infinite; }
  .bucle-activo .dc-punto:nth-child(3) { animation-delay: 0.15s; }
  .bucle-activo .dc-punto:nth-child(4) { animation-delay: 0.3s; }
  .bucle-activo .dc-respuesta .dc-mueve { animation: dc-respuesta 9s var(--curva) infinite backwards; }
  .bucle-activo .dc-check { animation: dc-check 9s ease-out infinite backwards; }
  .bucle-activo .dc-corazon .dc-mueve { animation: dc-corazon 9s var(--curva) infinite backwards; transform-origin: center; }
  .bucle-activo .dc-chispas path { animation: dc-chispa 9s ease-in-out infinite backwards; transform-box: fill-box; transform-origin: center; }
  .bucle-activo .dc-chispas path:nth-child(2) { animation-delay: 0.3s; }
  .bucle-activo .dc-chispas path:nth-child(3) { animation-delay: 0.6s; }
}
@keyframes dc-pregunta { 0% { opacity: 0; transform: translateY(14px) scale(0.85); } 6%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes dc-escribe { 0%, 13% { opacity: 0; transform: scale(0.7); } 17%, 31% { opacity: 1; transform: none; } 34%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes dc-punto { 0%, 100% { transform: translateY(0); opacity: 0.55; } 50% { transform: translateY(-5px); opacity: 1; } }
@keyframes dc-respuesta { 0%, 33% { opacity: 0; transform: translateY(14px) scale(0.85); } 39%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes dc-check { 0%, 41% { stroke-dashoffset: 1; } 49%, 100% { stroke-dashoffset: 0; } }
@keyframes dc-corazon { 0%, 51% { opacity: 0; transform: scale(0.3); } 55% { opacity: 1; transform: scale(1.18); } 58% { transform: scale(0.94); } 61%, 88% { opacity: 1; transform: none; } 95%, 100% { opacity: 0; transform: scale(0.8); } }
@keyframes dc-chispa { 0%, 53% { opacity: 0; transform: scale(0.4) rotate(0); } 58% { opacity: 1; transform: scale(1.1) rotate(45deg); } 70%, 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }

/* Preguntas habituales: índice fijo de los temas (marca el que se está leyendo) y cada tema en una tarjeta con su medallón */
.dudas-cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; margin-top: clamp(32px, 5vw, 56px); }
.dudas-indice { position: sticky; top: calc(var(--header-height) + 32px); }
.dudas-indice ol { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dudas-indice a { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; color: var(--tinta-suave); font-weight: 650; text-decoration: none; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.dudas-indice-num { font-family: var(--f-titular); font-size: 1.375rem; line-height: 1; color: var(--linea-fuerte); transition: color 0.25s; }
.dudas-indice a:hover { color: var(--marino-800); background: rgb(255 255 255 / 0.7); }
.dudas-indice a.activo { color: var(--marino-800); background: var(--blanco); box-shadow: inset 3px 0 0 var(--turquesa-500), var(--sombra); }
.dudas-indice a.activo .dudas-indice-num { color: var(--azul-500); }
.dudas-grupos { display: grid; gap: clamp(20px, 3vw, 32px); }
.dudas-grupo { scroll-margin-top: calc(var(--header-height) + 24px); padding: clamp(22px, 3vw, 34px) clamp(20px, 3vw, 36px) clamp(10px, 1.5vw, 16px); border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -30px rgb(2 39 71 / 0.35); }
.dudas-grupo h3 { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; font-family: var(--f-titular); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.2; color: var(--marino-800); }
.dudas-grupo-medalla { display: grid; place-items: center; width: 56px; height: 56px; flex: none; border-radius: 18px; background: radial-gradient(circle at 30% 25%, #fff, var(--bruma)); box-shadow: inset 0 0 0 1.5px rgb(1 166 250 / 0.2); }
.dudas-grupo-icono { width: 30px; height: 30px; flex: none; }
.dudas-grupo-icono path, .dudas-grupo-icono circle, .dudas-grupo-icono rect { fill: none; stroke: var(--marino-800); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dudas-grupo-icono .acento { stroke: url(#icono-g); }
.dudas-grupo .faq-lista { border-top: 1px solid var(--linea); counter-reset: duda; }
.dudas-grupo .faq-item:last-child { border-bottom: 0; }
.dudas-grupo .faq-item summary { justify-content: flex-start; gap: 14px; }
.dudas-grupo .faq-item summary::after { margin-left: auto; }
.dudas-grupo .faq-item summary::before { counter-increment: duda; content: counter(duda, decimal-leading-zero); flex: none; width: 1.75rem; font-family: var(--f-titular); font-size: 1.125rem; color: var(--azul-500); }
.dudas-grupo .faq-item[open] { margin-inline: calc(-1 * clamp(10px, 1.5vw, 18px)); padding-inline: clamp(10px, 1.5vw, 18px); border-radius: 14px; background: linear-gradient(180deg, var(--bruma), transparent 90%); }
.dudas-grupo .faq-item > p { margin-left: calc(1.75rem + 18px); }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .dudas-grupo-icono--cita .dia-marcado { animation: cita-marca 2.6s ease-in-out 1s infinite; transform-box: fill-box; transform-origin: center; }
  .bucle-activo .dudas-grupo-icono--reloj .aguja { animation: reloj-tictac 3.2s steps(1) 1s infinite; transform-box: view-box; transform-origin: 13px 13px; }
  .bucle-activo .dudas-grupo-icono--pago .chip { animation: pago-brillo 3.8s ease-in-out 1.2s infinite; }
}
@keyframes cita-marca { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }
@keyframes reloj-tictac { 0%, 20% { transform: rotate(0deg); } 50%, 70% { transform: rotate(90deg); } 100% { transform: rotate(180deg); } }
@keyframes pago-brillo { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Por tratamiento: mosaico. Ortodoncia (tratamiento principal) ocupa dos filas en marino; las otras cuatro, en dos por dos */
.dudas-trat-lista { display: grid; grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.2vw, 24px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.dudas-trat-lista li { margin: 0; }
.dudas-trat-lista li:first-child { grid-row: span 2; }
.dudas-trat-lista a {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 18px; row-gap: 4px; align-items: start;
  height: 100%; padding: 22px 22px 20px; border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra);
  font-weight: 650; color: var(--marino-800); text-decoration: none;
  transition: box-shadow 0.25s, transform 0.25s var(--curva);
}
.dudas-trat-lista a::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgb(1 166 250 / 0.12) 50%, transparent 60%);
  background-size: 280% 100%; background-position: 120% 0;
}
.dudas-trat-lista .icono-tratamiento { grid-row: span 2; width: 64px; height: 64px; padding: 12px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, #fff, var(--bruma)); box-shadow: inset 0 0 0 1.5px rgb(1 166 250 / 0.18); }
.dudas-trat-nombre { align-self: end; font-family: var(--f-titular); font-weight: 500; font-size: 1.375rem; line-height: 1.2; }
.dudas-trat-desc { font-size: 0.9375rem; font-weight: 500; color: var(--tinta-suave); }
.dudas-trat-flecha { grid-column: 1 / -1; align-self: end; display: inline-flex; align-items: center; gap: 0.5em; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--linea); font-weight: 650; color: var(--azul-700); }
.dudas-trat-flecha span { transition: transform 0.25s var(--curva); }
.dudas-trat-lista a:hover, .dudas-trat-lista a:focus-visible { box-shadow: inset 0 0 0 1px rgb(1 166 250 / 0.35), var(--sombra-alta); transform: translateY(-3px); }
.dudas-trat-lista a:hover .dudas-trat-flecha span, .dudas-trat-lista a:focus-visible .dudas-trat-flecha span { transform: translateX(4px); }
/* La destacada */
.dudas-trat-lista li:first-child a { grid-template-columns: minmax(0, 1fr); grid-template-rows: 1fr auto auto auto; padding: clamp(26px, 3vw, 38px); color: #fff; background: radial-gradient(90% 70% at 85% 10%, rgb(17 234 222 / 0.35), transparent 60%), linear-gradient(160deg, #0a4f86, var(--marino-950)); box-shadow: 0 30px 60px -28px rgb(2 39 71 / 0.6); }
.dudas-trat-lista li:first-child .icono-tratamiento { grid-row: auto; width: clamp(96px, 9vw, 128px); height: auto; aspect-ratio: 1; padding: 20px; margin-bottom: 18px; border-radius: 28px; background: radial-gradient(circle at 30% 25%, #fff, #dff3f8); box-shadow: 0 0 0 8px rgb(255 255 255 / 0.08), 0 20px 40px -16px rgb(0 0 0 / 0.5); }
.dudas-trat-lista li:first-child .dudas-trat-nombre { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }
.dudas-trat-lista li:first-child .dudas-trat-desc { color: var(--en-oscuro-suave); font-size: 1.0625rem; }
.dudas-trat-lista li:first-child .dudas-trat-flecha { border-top-color: rgb(255 255 255 / 0.18); color: var(--cian-300); }
.dudas-trat-lista li:first-child a::after { background-image: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / 0.12) 50%, transparent 60%); }
@media (prefers-reduced-motion: no-preference) {
  .dudas-trat-lista.bucle-activo a::after { animation: placa-destello 7s ease-in-out 1s infinite; }
  .dudas-trat-lista.bucle-activo li:nth-child(2) a::after { animation-delay: 2.5s; }
  .dudas-trat-lista.bucle-activo li:nth-child(3) a::after { animation-delay: 4s; }
  .dudas-trat-lista.bucle-activo li:nth-child(4) a::after { animation-delay: 1.5s; }
  .dudas-trat-lista.bucle-activo li:nth-child(5) a::after { animation-delay: 3.2s; }
  .dudas-trat-lista.bucle-activo li:nth-child(1) .icono-tratamiento .acento { stroke-dasharray: 0.12 0.1; animation: flujo 2.8s linear 0.3s infinite; }
  .dudas-trat-lista.bucle-activo li:nth-child(2) .icono-tratamiento .acento { stroke-dasharray: 0.16 0.06; animation: rosca 2.2s linear infinite; }
  .dudas-trat-lista.bucle-activo li:nth-child(3) .icono-tratamiento .acento { transform-box: fill-box; transform-origin: 27px 43px; animation: espejo 5.5s ease-in-out 0.6s infinite; }
  .dudas-trat-lista.bucle-activo li:nth-child(4) .icono-tratamiento .acento { stroke-dasharray: 1 1; animation: arco-nino 6.5s ease-in-out 1.2s infinite; }
  .dudas-trat-lista.bucle-activo li:nth-child(5) .icono-tratamiento .acento { stroke-dasharray: 0.12 0.1; animation: flujo 2.8s linear 0.3s infinite; }
}
@media (max-width: 900px) {
  .dudas-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .dudas-indice { position: static; }
  .dudas-indice ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .dudas-indice a { flex-direction: column; align-items: flex-start; gap: 6px; padding: 12px; font-size: 0.875rem; background: rgb(255 255 255 / 0.6); }
  .dudas-trat-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dudas-trat-lista li:first-child { grid-row: auto; grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .dudas-indice ol { grid-template-columns: minmax(0, 1fr); }
  .dudas-indice a { flex-direction: row; align-items: center; }
  .dudas-trat-lista { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Aviso legal: hero con documento sellado (decorativo), índice fijo y cada apartado en su tarjeta ----------
   El texto legal no se toca; aquí solo el diseño. */
.legal-hero .trat-hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.trat-hero-visual.legal-hero-visual::before { content: none; }
.legal-doc { display: block; width: min(100%, 400px); margin-inline: auto; overflow: visible; }
.ld-fondo { fill: rgb(1 166 250 / 0.07); }
.ld-hoja rect { fill: var(--blanco); filter: drop-shadow(0 18px 28px rgb(2 39 71 / 0.16)) drop-shadow(0 2px 4px rgb(2 39 71 / 0.08)); }
.ld-hoja--atras rect { fill: #eef5f8; transform: rotate(6deg); transform-box: fill-box; transform-origin: center; }
.ld-linea { fill: none; stroke: #dbe6ec; stroke-width: 8; stroke-linecap: round; }
.ld-linea--titulo { stroke: var(--azul-500); stroke-width: 10; }
.ld-sello-aro { fill: #0a3a63; filter: drop-shadow(0 12px 20px rgb(2 39 71 / 0.35)); }
.ld-sello-borde { fill: none; stroke: rgb(17 234 222 / 0.6); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ld-brillo { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 3; stroke-linecap: round; opacity: 0; }
.ld-sello { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ld-sello-borde { animation: ld-gira 24s linear infinite; transform-box: fill-box; transform-origin: center; }
  .bucle-activo .ld-brillo { animation: ld-brillo 6s ease-in-out 1.5s infinite; }
  .revela-pendiente .legal-hero-visual:not(.revelado) .ld-sello { transform: scale(1.4); opacity: 0; }
  .legal-hero-visual .ld-sello { transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1) 0.6s, opacity 0.3s 0.6s; }
}
@keyframes ld-gira { to { transform: rotate(360deg); } }
@keyframes ld-brillo { 0%, 70%, 100% { opacity: 0; } 80% { opacity: 1; } }

.legal-cuerpo-seccion { padding-top: clamp(16px, 3vw, 40px); }
.legal-cuerpo { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.legal-indice { position: sticky; top: calc(var(--header-height) + 32px); max-height: calc(100vh - var(--header-height) - 64px); overflow: auto; }
.legal-indice .antetitulo { margin-bottom: 12px; }
.legal-indice ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.legal-indice a { display: block; padding: 9px 14px; border-radius: 12px; color: var(--tinta-suave); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; text-decoration: none; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.legal-indice a:hover { color: var(--marino-800); background: rgb(255 255 255 / 0.7); }
.legal-indice a.activo { color: var(--marino-800); background: var(--blanco); box-shadow: inset 3px 0 0 var(--turquesa-500), var(--sombra); }
.legal-contenido { display: grid; gap: clamp(16px, 2vw, 22px); }
.legal-tarjeta { position: relative; scroll-margin-top: calc(var(--header-height) + 24px); padding: clamp(24px, 3vw, 36px) clamp(22px, 3vw, 40px); border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), 0 20px 44px -30px rgb(2 39 71 / 0.35); }
.legal-num { position: absolute; top: clamp(16px, 2vw, 24px); right: clamp(18px, 2.4vw, 32px); font-family: var(--f-titular); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: transparent; -webkit-text-stroke: 1.5px rgb(1 166 250 / 0.28); pointer-events: none; }
.legal-tarjeta h2 { max-width: calc(100% - 4.5rem); margin-bottom: 16px; font-size: clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem); line-height: 1.25; }
.legal-tarjeta p { color: var(--tinta-suave); max-width: 68ch; }
.legal-tarjeta p:last-child { margin-bottom: 0; }
.legal-tarjeta a { color: var(--azul-700); font-weight: 600; overflow-wrap: anywhere; }
/* Datos identificativos: ficha en dos columnas sobre bruma */
.legal-details { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); margin: 22px 0 0; border-radius: 16px; overflow: hidden; background: var(--bruma); box-shadow: inset 0 0 0 1px rgb(1 166 250 / 0.14); }
.legal-details dt, .legal-details dd { margin: 0; padding: 13px 18px; border-top: 1px solid rgb(1 166 250 / 0.12); }
.legal-details dt:first-of-type, .legal-details dt:first-of-type + dd { border-top: 0; }
.legal-details dt { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--azul-700); }
.legal-details dd { color: var(--marino-800); font-weight: 550; }
@media (forced-colors: active) { .legal-num { color: CanvasText; -webkit-text-stroke: 0; } }
@media (max-width: 900px) {
  .legal-hero .trat-hero-inner, .legal-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .legal-indice { position: static; max-height: none; padding: 18px; border-radius: var(--r-medio); background: rgb(255 255 255 / 0.6); box-shadow: inset 0 0 0 1px var(--linea); }
}
@media (max-width: 600px) {
  .legal-details { grid-template-columns: minmax(0, 1fr); }
  .legal-details dt { padding-bottom: 2px; }
  .legal-details dd { padding-top: 0; border-top: 0; }
}

/* ---------- Contacto (página): hero con foto del rótulo, tarjetas de información y mapa embebido ---------- */
.contacto-pg-foto-marco { max-width: 420px; justify-self: center; width: 100%; }
.contacto-pg-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-medio); background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.contacto-pg-foto picture { height: 100%; }
.contacto-pg-foto img { width: 100%; height: 100%; object-fit: cover; }
.horario-ahora--grande { margin-top: 20px; }
.horario-ahora--grande .horario-ahora { padding: 12px 20px; border-radius: 999px; background: var(--blanco); box-shadow: var(--sombra); font-size: 1rem; gap: 12px; }
.horario-ahora--grande .horario-ahora::before { width: 13px; height: 13px; }

.contacto-pg-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(32px, 5vw, 56px); }
/* Ronda 16: algo más de peso visual. Barra de acento arriba, icono en medallón y el dato (número) en grande */
.contacto-pg-tarjeta { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 30px 28px 28px; border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), 0 24px 50px -30px rgb(2 39 71 / 0.4); transition: transform 0.3s var(--curva), box-shadow 0.3s; }
.contacto-pg-tarjeta::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #01a6fa, #11eade 60%, #01aeb6); }
.contacto-pg-tarjeta:nth-child(2)::before { background: linear-gradient(90deg, #25d366, #7be3a4); }
@media (hover: hover) { .contacto-pg-tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgb(1 166 250 / 0.25), 0 30px 60px -28px rgb(2 39 71 / 0.5); } }
.contacto-pg-tarjeta > svg:first-child { box-sizing: content-box; width: 26px; height: 26px; padding: 15px; margin-bottom: 18px; border-radius: 18px; background: radial-gradient(circle at 30% 25%, #fff, var(--bruma)); box-shadow: inset 0 0 0 1.5px rgb(1 166 250 / 0.2); }
.contacto-pg-tarjeta > svg:first-child:not(.dudas-grupo-icono) { color: var(--azul-700); }
.contacto-pg-tarjeta:nth-child(2) > svg:first-child { color: #128c4a; background: radial-gradient(circle at 30% 25%, #fff, #e3f7ec); box-shadow: inset 0 0 0 1.5px rgb(37 211 102 / 0.3); }
.contacto-pg-tarjeta h3 { margin-bottom: 6px; font-size: 1.125rem; }
.contacto-pg-tarjeta p { color: var(--tinta-suave); margin: 0 0 4px; }
.contacto-pg-tarjeta > a { display: inline-block; margin-top: auto; padding-top: 16px; font-family: var(--f-titular); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; font-weight: 500; color: var(--marino-800); text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: rgb(1 166 250 / 0.35); text-underline-offset: 0.18em; }
.contacto-pg-tarjeta > a:hover { text-decoration-color: currentColor; }
.contacto-pg-horas { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-top: 1px solid var(--linea); font-size: 0.9375rem; }
.contacto-pg-horas:first-of-type { margin-top: 8px; }
.contacto-pg-horas span:last-child { white-space: nowrap; font-weight: 650; color: var(--marino-800); font-variant-numeric: tabular-nums; text-align: right; }
/* Sobre marino (la única franja oscura de la página antes del cierre): tarjetas de cristal con borde claro */
.contacto-pg-info.oscuro { background: radial-gradient(70% 90% at 85% 0%, rgb(1 166 250 / 0.16), transparent 70%), radial-gradient(60% 80% at 0% 100%, rgb(17 234 222 / 0.1), transparent 70%), var(--marino-950); }
.oscuro .contacto-pg-tarjeta { background: rgb(255 255 255 / 0.05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12), 0 30px 60px -34px rgb(0 0 0 / 0.6); }
@media (hover: hover) { .oscuro .contacto-pg-tarjeta:hover { box-shadow: inset 0 0 0 1px rgb(17 234 222 / 0.4), 0 34px 64px -30px rgb(0 0 0 / 0.7); } }
.oscuro .contacto-pg-tarjeta > svg:first-child { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); }
.oscuro .contacto-pg-tarjeta > svg:first-child:not(.dudas-grupo-icono) { color: var(--cian-300); }
.oscuro .contacto-pg-tarjeta:nth-child(2) > svg:first-child { color: #4ee38a; background: rgb(37 211 102 / 0.12); box-shadow: inset 0 0 0 1px rgb(37 211 102 / 0.3); }
.oscuro .contacto-pg-tarjeta .dudas-grupo-icono path, .oscuro .contacto-pg-tarjeta .dudas-grupo-icono circle { stroke: #fff; }
.oscuro .contacto-pg-tarjeta .dudas-grupo-icono .acento { stroke: var(--cian-300); }
.oscuro .contacto-pg-tarjeta > a { color: #fff; text-decoration-color: rgb(17 234 222 / 0.5); }
.oscuro .contacto-pg-tarjeta > a:hover { color: #fff; text-decoration-color: var(--cian-300); }
.oscuro .contacto-pg-tarjeta p { color: var(--en-oscuro-suave); }
.oscuro .contacto-pg-horas { border-top-color: rgb(255 255 255 / 0.12); }
.oscuro .contacto-pg-horas span:last-child { color: #fff; }
/* Correo de administración: línea discreta bajo las tarjetas, no una cuarta tarjeta (descuadraría la rejilla de 3 columnas) */
.contacto-pg-correo { margin: clamp(20px, 3vw, 32px) 0 0; color: var(--en-oscuro-suave); font-size: 0.9375rem; text-align: center; }
.contacto-pg-correo a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: 0.2em; }
.contacto-pg-correo a:hover { color: var(--cian-300); text-decoration-color: currentColor; }
@media (max-width: 900px) { .contacto-pg-tarjetas { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .contacto-pg-horas { flex-direction: column; gap: 2px; } .contacto-pg-horas span:last-child { text-align: left; } .contacto-pg-correo { text-align: left; } }

.contacto-pg-mapa-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.contacto-pg-mapa-grid .entrada { margin: 0 0 24px; }
/* Nota de acceso: discreta, debajo del botón «Cómo llegar» (no es una tarjeta ni un dato de contacto) */
.contacto-pg-acceso { margin: 14px 0 0; font-size: 0.9375rem; }
@media (max-width: 900px) { .contacto-pg-mapa-grid { grid-template-columns: minmax(0, 1fr); } }

/* Mapa bajo demanda (La clínica y Contacto): tarjeta propia hasta que se pide el mapa; después, el iframe de Google ocupa
   el mismo lienzo (su interfaz es la nativa de Google y no se puede estilar). */
.mapa-demanda { width: 100%; }
.mapa-marco { max-width: 640px; }
.mapa-lienzo { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-medio); background: var(--blanco); box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.mapa-lienzo iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(0.15) contrast(1.02); }
/* Aviso de carga: el iframe de Google tarda varios segundos en pintar algo y, hasta entonces, es blanco; sin este aviso
   da sensación de que la página se ha quedado atascada. Se quita solo (evento «load» del iframe) o, como red de
   seguridad si ese evento no llega, a los 10 s. El texto es siempre visible (no depende de la animación) y un lector
   de pantalla lo anuncia (role="status"); con movimiento reducido el anillo no gira. */
.mapa-cargando { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: var(--blanco); }
.mapa-espera-anillo { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgb(1 166 250 / 0.18); border-top-color: var(--azul-500); }
@media (prefers-reduced-motion: no-preference) { .mapa-espera-anillo { animation: mapa-gira 0.8s linear infinite; } }
@keyframes mapa-gira { to { transform: rotate(360deg); } }
.mapa-espera-texto { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--tinta-suave); }
.mapa-tarjeta { position: relative; display: grid; place-items: center; height: 100%; padding: clamp(20px, 4vw, 40px); text-align: center; background: radial-gradient(90% 80% at 50% 30%, var(--blanco), var(--bruma)); }
.mapa-trazos { position: absolute; inset: 0; width: 100%; height: 100%; }
.mapa-trazos path { fill: none; stroke: rgb(1 166 250 / 0.12); stroke-width: 10; stroke-linecap: round; }
/* Luz que recorre cada calle (el mismo recurso que el contorno de la cifra «+25» de Inicio: un tramo luminoso que viaja por el trazo).
   Un tramo de 0,16 de la longitud (pathLength=1) por calle, con duración y sentido distintos para que no vayan a compás.
   Solo se ve con .bucle-activo (en pantalla, movimiento permitido y sin pausa); con movimiento reducido no se muestra. */
.mapa-trazos .mapa-luz { stroke: url(#icono-g); stroke-width: 4; stroke-opacity: 0; stroke-dasharray: 0.16 1; stroke-dashoffset: 0.16; }
@media (prefers-reduced-motion: no-preference) {
  .mapa-demanda.bucle-activo .mapa-luz { stroke-opacity: 0.6; animation: mapa-luz 7s linear infinite; }
  .mapa-demanda.bucle-activo .mapa-luz:nth-of-type(6) { animation-duration: 9.5s; animation-direction: reverse; animation-delay: -3s; }
  .mapa-demanda.bucle-activo .mapa-luz:nth-of-type(7) { animation-duration: 8.2s; animation-delay: -5.5s; }
  .mapa-demanda.bucle-activo .mapa-luz:nth-of-type(8) { animation-duration: 11s; animation-direction: reverse; animation-delay: -1.5s; }
}
@keyframes mapa-luz { to { stroke-dashoffset: -1; } }
.mapa-contenido { position: relative; display: grid; justify-items: center; gap: 6px; max-width: 26rem; }
.mapa-pin { width: 64px; height: 64px; margin-bottom: 6px; background: var(--blanco); box-shadow: 0 8px 22px -10px rgb(2 39 71 / 0.35); }
.mapa-nombre { margin: 0; font: 500 1.25rem/1.25 var(--f-titular); color: var(--marino-800); }
.mapa-direccion { margin: 0 0 14px; color: var(--tinta-suave); }
.mapa-aviso { margin: 8px 0 0; max-width: 22rem; font-size: 0.8125rem; line-height: 1.45; color: var(--tinta-suave); }
.mapa-abrir { margin-top: 44px; }
html:not(.js) .mapa-contenido [data-mapa-cargar], html:not(.js) .mapa-aviso { display: none; }
@media (max-width: 520px) { .mapa-lienzo { aspect-ratio: 1 / 1; } }

/* ---------- La clínica: hero con marco-cinta, galería de instalaciones, recorrido y tecnología ---------- */
.clinica-hero-foto-marco { max-width: 500px; justify-self: center; width: 100%; }
.clinica-hero-foto { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-medio); background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.clinica-hero-foto picture { height: 100%; }
.clinica-hero-foto img { width: 100%; height: 100%; object-fit: cover; }

.clinica-galeria { display: grid; grid-template-columns: 3fr 2fr; gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(32px, 5vw, 56px); }
.clinica-galeria figure { margin: 0; border-radius: var(--r-medio); overflow: hidden; box-shadow: var(--sombra); aspect-ratio: 4 / 3; }
.clinica-galeria picture { height: 100%; display: block; }
.clinica-galeria img { width: 100%; height: 100%; object-fit: cover; }
/* La columna de la derecha (dos fotos 4:3 apiladas) fija la altura; la grande ocupa justo esas dos filas,
   con la imagen fuera del flujo para que su proporción no estire la rejilla: las dos columnas cierran a la par */
.clinica-galeria .clinica-galeria-principal { grid-row: 1 / 3; position: relative; aspect-ratio: auto; }
.clinica-galeria-principal picture { position: absolute; inset: 0; }
.clinica-galeria--dos { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; }
@media (max-width: 900px) {
  .clinica-galeria { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .clinica-galeria .clinica-galeria-principal { grid-row: auto; aspect-ratio: 4 / 3; }
  .clinica-galeria--dos { grid-template-columns: minmax(0, 1fr); }
}

.clinica-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); margin: clamp(32px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
.clinica-pasos li { padding: 22px 22px 26px; border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); }
.clinica-pasos .icono-tratamiento { margin-bottom: 4px; }
.clinica-paso-num { display: block; margin-bottom: 10px; font-family: var(--f-titular); font-size: 1.375rem; color: var(--azul-700); }
.clinica-pasos h3 { margin-bottom: 8px; }
.clinica-pasos p { margin: 0; color: var(--tinta-suave); }
@media (max-width: 900px) { .clinica-pasos { grid-template-columns: minmax(0, 1fr); } }
/* Recorrido sobre el marino del pie (.oscuro): tarjetas de cristal en vez de las blancas, iconos en claro */
.oscuro .clinica-pasos li { background: rgb(255 255 255 / 0.04); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); }
.oscuro .clinica-pasos p { color: var(--en-oscuro-suave); }
.oscuro .clinica-paso-num { color: var(--cian-300); }
.oscuro .clinica-pasos .icono-tratamiento { background: rgb(255 255 255 / 0.07); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1); }
.oscuro .clinica-pasos .icono-tratamiento path, .oscuro .clinica-pasos .icono-tratamiento circle { stroke: #fff; }
.oscuro .clinica-pasos .icono-tratamiento .acento { stroke: var(--cian-300); }
@media (prefers-reduced-motion: no-preference) {
  /* Cada icono hace un gesto reconocible y descansa antes de repetirlo: se nota sin ser nervioso */
  .clinica-pasos.bucle-activo li:nth-child(1) .flecha-entra { animation: paso-entra 2.8s ease-in-out 0.8s infinite; }
  .clinica-pasos.bucle-activo li:nth-child(1) .pomo { animation: paso-pulso 2.8s ease-in-out 0.8s infinite; transform-box: fill-box; transform-origin: center; }
  .clinica-pasos.bucle-activo li:nth-child(2) .campana { animation: paso-campana 3.6s ease-in-out 1.1s infinite; transform-box: view-box; transform-origin: 24px 34px; }
  .clinica-pasos.bucle-activo li:nth-child(2) .ding { animation: paso-ding 3.6s ease-in-out 1.1s infinite; transform-box: fill-box; transform-origin: center; }
  .clinica-pasos.bucle-activo li:nth-child(3) .foco { animation: paso-pulso 2.4s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
  .clinica-pasos.bucle-activo li:nth-child(3) .rayos { animation: paso-rayos 2.4s ease-in-out 1.4s infinite; transform-box: fill-box; transform-origin: center; }
}
@keyframes paso-entra { 0% { transform: translateX(-8px); opacity: 0; } 25% { opacity: 1; } 60% { transform: translateX(2px); opacity: 1; } 85%, 100% { transform: translateX(6px); opacity: 0; } }
@keyframes paso-pulso { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.9); } }
@keyframes paso-campana { 0%, 36%, 100% { transform: rotate(0deg); } 6% { transform: rotate(-12deg); } 12% { transform: rotate(10deg); } 18% { transform: rotate(-8deg); } 24% { transform: rotate(6deg); } 30% { transform: rotate(-3deg); } }
@keyframes paso-ding { 0%, 4%, 42%, 100% { opacity: 0; transform: scale(0.6); } 12% { opacity: 1; transform: scale(1.2); } 30% { opacity: 1; transform: scale(1); } }
@keyframes paso-rayos { 0%, 100% { opacity: 0.35; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.3); } }

.clinica-ubicacion-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.clinica-ubicacion-grid .entrada { margin: 0 0 24px; }
@media (max-width: 900px) { .clinica-ubicacion-grid { grid-template-columns: minmax(0, 1fr); } }

/* Cinta «Más del espacio»: tres tandas iguales en una pista; se desplaza una tanda exacta (-33,33 %) y vuelve a empezar sin
   que se note el salto. Pausa al pasar el ratón y con el botón global de pausa (site.js quita .bucle-activo); se queda en su sitio. */
.clinica-mas { overflow: clip; }
.clinica-cinta {
  --alto: clamp(200px, 22vw, 300px); --hueco: clamp(14px, 2vw, 24px);
  margin-top: clamp(32px, 5vw, 56px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.clinica-cinta-pista { display: flex; width: max-content; }
.clinica-cinta-tanda { display: flex; flex: none; gap: var(--hueco); padding-right: var(--hueco); }
.clinica-cinta figure { flex: none; margin: 0; height: var(--alto); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-medio); box-shadow: var(--sombra); background: #ddd2c4; }
.clinica-cinta figure.cinta-vertical { aspect-ratio: 3 / 4; }
.clinica-cinta picture { display: block; height: 100%; }
.clinica-cinta img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .clinica-cinta-pista { animation: cinta-desliza 80s linear infinite; animation-play-state: paused; }
  .clinica-cinta.bucle-activo .clinica-cinta-pista { animation-play-state: running; }
  .clinica-cinta.bucle-activo:hover .clinica-cinta-pista, .clinica-cinta.bucle-activo:focus-visible .clinica-cinta-pista { animation-play-state: paused; }
}
@keyframes cinta-desliza { to { transform: translateX(-33.3333%); } }
/* Sin movimiento (preferencia del sistema) o sin JavaScript: una sola tanda, sin desvanecido, que se recorre con el dedo o el ratón */
@media (prefers-reduced-motion: reduce) {
  .clinica-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .clinica-cinta-tanda:nth-child(n+2) { display: none; }
}
html:not(.js) .clinica-cinta { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
html:not(.js) .clinica-cinta-tanda:nth-child(n+2) { display: none; }
/* Arrastre (site.js, [data-arrastra]): solo hay agarre cuando existe la animación. touch-action: pan-y deja que el dedo siga
   haciendo scroll vertical de la página y reserva el gesto horizontal para la cinta. Agarrada, se pausa (gana al autoplay por orden). */
@media (prefers-reduced-motion: no-preference) {
  .clinica-cinta[data-arrastra] { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }
  .clinica-cinta[data-arrastra].arrastrando { cursor: grabbing; }
  .clinica-cinta.arrastrando .clinica-cinta-pista { animation-play-state: paused; }
}
.clinica-cinta img { -webkit-user-drag: none; }

/* PROTOTIPO (solo La clínica): el bloque oscuro del recorrido se funde con las secciones vecinas en vez de cortar en seco.
   Dos franjas fuera de su caja, sobre el relleno vacío de la sección de arriba y la de abajo (que son --papel), de la altura
   de referencia --fundido (≈96 px, siempre menor que el relleno de sección para no tocar contenido). Para revertir: borrar este bloque. */
.clinica-recorrido { --fundido: min(96px, calc(var(--seccion) - 16px)); }
.clinica-recorrido::before, .clinica-recorrido::after { content: ""; position: absolute; left: 0; right: 0; height: var(--fundido); pointer-events: none; }
/* Marino con opacidad creciente sobre el --papel de debajo; los tramos siguen una curva suave (smoothstep) en vez de lineal para que
   no se vea el borde donde la franja se une al marino ni una banda gris en medio. */
.clinica-recorrido::before { bottom: 100%; background: linear-gradient(to bottom, rgb(2 30 56 / 0) 0%, rgb(2 30 56 / 0.104) 20%, rgb(2 30 56 / 0.352) 40%, rgb(2 30 56 / 0.648) 60%, rgb(2 30 56 / 0.896) 80%, rgb(2 30 56 / 1) 100%); }
.clinica-recorrido::after { top: 100%; background: linear-gradient(to bottom, rgb(2 30 56 / 1) 0%, rgb(2 30 56 / 0.896) 20%, rgb(2 30 56 / 0.648) 40%, rgb(2 30 56 / 0.352) 60%, rgb(2 30 56 / 0.104) 80%, rgb(2 30 56 / 0) 100%); }

/* ---------- Contacto (cierre): cabecera compartida + dos tarjetas del mismo peso visual ---------- */
.contacto { background: var(--bruma); }
.contacto h2 { font-size: clamp(2.3rem, 1.5rem + 3vw, 4rem); margin-bottom: 18px; }
.contacto-inicio .entrada { max-width: 46rem; margin-bottom: 0; }
.contacto-tarjetas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(32px, 5vw, 56px); }
.tarjeta-datos { background: var(--blanco); border-radius: var(--r-medio); padding: clamp(26px, 3.5vw, 38px); box-shadow: var(--sombra-alta); }
.tarjeta-datos .acciones { margin-bottom: 32px; }
.datos-contacto { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: 28px; border-top: 1px solid var(--linea-fuerte); }
.dato-etiqueta { display: block; margin-bottom: 6px; font-weight: 700; color: var(--marino-800); font-size: 1rem; }
.datos-contacto p { color: var(--tinta); }
.datos-contacto a, .ubicacion-texto p a { color: inherit; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.22em; }
.datos-contacto a:hover, .ubicacion-texto p a:hover { color: var(--azul-700); text-decoration-color: currentColor; }
.tarjeta-datos .horario-ahora { margin-top: 20px; }
.tarjeta-ubicacion { height: 100%; }
.ubicacion { margin: 0; overflow: hidden; border-radius: var(--r-medio); background: var(--blanco); box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.ubicacion picture { aspect-ratio: 1; background: #ddd2c4; }
.ubicacion img { width: 100%; height: 100%; object-fit: cover; }
.ubicacion-texto { padding: 22px 26px 26px; }
.ubicacion-texto .dato-etiqueta { color: var(--azul-700); font-size: var(--t-pequeno); }
.ubicacion-texto strong { display: block; font: 500 1.375rem/1.25 var(--f-titular); color: var(--marino-800); margin-bottom: 6px; }
.ubicacion-texto p { color: var(--tinta-suave); margin-bottom: 14px; }
@media (max-width: 900px) { .contacto-tarjetas { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Pie ---------- */
.site-footer { background: var(--marino-950); color: var(--en-oscuro-suave); padding-top: clamp(64px, 7vw, 96px); }
.footer-inner { display: grid; grid-template-columns: minmax(0, 1.25fr) repeat(3, minmax(0, 1fr)); gap: clamp(32px, 4vw, 56px); padding-bottom: 56px; }
.footer-brand img { width: 240px; height: auto; }
.footer-block h2 { margin-bottom: 18px; font: 650 1rem/1.3 var(--f-texto); color: #fff; letter-spacing: 0.01em; }
.footer-block li + li { margin-top: 10px; }
.footer-block a { color: var(--en-oscuro-suave); text-decoration: none; }
.footer-block a:hover { color: #fff; text-decoration: underline; }
.footer-block p { margin-bottom: 12px; font-size: 1rem; }
.footer-contact-row { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; }
.footer-contact-row svg { flex: none; margin-top: 4px; color: var(--cian-300); }
.footer-contact-row span { min-width: 0; overflow-wrap: anywhere; }
.footer-horario { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linea-oscura); font-size: 0.9375rem; }
.footer-horario strong { display: block; color: #fff; font-weight: 650; margin-bottom: 4px; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  width: min(100% - 2 * var(--margen), var(--contenedor)); margin-inline: auto;
  padding-block: 24px 32px; border-top: 1px solid var(--linea-oscura); font-size: 0.9375rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom nav { display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.footer-bottom a { color: var(--en-oscuro-suave); }
.footer-bottom a:hover { color: #fff; }
.pausa-movimiento {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px;
  border: 1px solid var(--linea-oscura); border-radius: 999px; background: none; color: var(--en-oscuro-suave); cursor: pointer; font-size: 0.875rem;
}
.pausa-movimiento:hover { color: #fff; border-color: rgb(255 255 255 / 0.4); }
.pausa-movimiento[hidden] { display: none; }

/* ---------- Flotantes ---------- */
.whatsapp-float {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 900;
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 14px;
  border-radius: 999px; background: var(--whatsapp); color: var(--marino-950);
  font: 700 1rem/1 var(--f-texto); text-decoration: none; box-shadow: 0 10px 28px rgb(2 30 56 / 0.25);
  transition: transform 0.25s var(--curva), box-shadow 0.25s;
}
.whatsapp-float:hover { color: var(--marino-950); transform: translateY(-2px); box-shadow: 0 14px 32px rgb(2 30 56 / 0.3); }
.whatsapp-float svg { width: 24px; height: 24px; }
/* Pulso suave, como una respiración: cada 9 s salen tres ondas escalonadas (1,1 s entre ellas) que se abren desde el borde del
   botón y se desvanecen; luego reposo. Crecen con un box-shadow de extensión, así rodean la píldora por igual (sin óvalos).
   Con movimiento reducido no aparecen; la pausa global las detiene. */
.wa-ondas { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.wa-ondas span { position: absolute; inset: 0; border-radius: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .wa-ondas span { animation: wa-onda 9s cubic-bezier(0.25, 0.5, 0.35, 1) 2s infinite backwards; }
  .wa-ondas span:nth-child(2) { animation-delay: 3.1s; }
  .wa-ondas span:nth-child(3) { animation-delay: 4.2s; }
}
@keyframes wa-onda { 0% { box-shadow: 0 0 0 0 rgb(37 211 102 / 0.42); } 45%, 100% { box-shadow: 0 0 0 20px rgb(37 211 102 / 0); } }

/* ---------- Endodoncia ---------- */
.trat-hero { padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px); overflow: clip; }
.trat-hero-inner { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.trat-hero h1 { margin-bottom: 26px; font-size: clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem); }
.trat-hero .entrada { margin-bottom: 30px; max-width: 34em; }
.trat-hero-visual { position: relative; }
.trat-hero-visual::before {
  content: ""; position: absolute; pointer-events: none; inset: 6% 2% 4% 2%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--bruma), rgb(234 245 248 / 0));
}
@keyframes destello { 0%, 70%, 100% { stroke-opacity: 0.9; } 78% { stroke-opacity: 0.2; } 86% { stroke-opacity: 1; } }

/* «Mira dentro»: lente sobre el diente */
.trat-hero-visual { touch-action: pan-y; }
.lupa { position: relative; width: min(100%, 390px); height: auto; margin-inline: auto; cursor: crosshair; overflow: visible; }
.lupa-aro circle:first-child { filter: drop-shadow(0 6px 14px rgb(2 39 71 / 0.22)); }
.lupa-rotulo { font: 700 17px var(--f-texto); fill: var(--marino-800); paint-order: stroke; stroke: var(--papel); stroke-width: 6px; stroke-linejoin: round; transition: opacity 0.3s; }
.pista { justify-content: center; margin: 14px 0 0; text-align: center; font-size: var(--t-pequeno); font-weight: 600; color: var(--tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .lupa-aro circle:nth-child(2) { animation: late-aro 3.2s ease-in-out infinite; }
}
@keyframes late-aro { 0%, 100% { stroke-opacity: 0.22; } 50% { stroke-opacity: 0.5; } }

.proposito-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.proposito .entrada { color: var(--marino-800); font-family: var(--f-titular); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.35; }
/* Conservar la pieza: escena comparativa a todo el ancho. El diente conservado (conductos tratados, una luz los recorre) domina
   con dos tercios del ancho; la extracción, menor y apagada, tiene su propia escena: el diente sale y deja el alveolo vacío */
.comparacion { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.5vw, 32px); margin: clamp(28px, 4vw, 52px) 0 0; }
.comparacion-opcion { position: relative; margin: 0; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; gap: clamp(16px, 2.5vw, 36px); padding: clamp(18px, 2.5vw, 32px); border-radius: var(--r-medio); background: var(--blanco); }
.comparacion-escena { display: block; width: 100%; height: auto; border-radius: calc(var(--r-medio) - 8px); background: linear-gradient(180deg, #fbfdfe, var(--bruma)); }
.comparacion-opcion figcaption { display: flex; flex-direction: column; gap: 8px; }
.comparacion-opcion strong { font-family: var(--f-titular); font-weight: 500; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.6rem); line-height: 1.1; color: var(--marino-800); }
.comparacion-opcion span { font-size: 1.0625rem; color: var(--tinta-suave); line-height: 1.5; }
.comparacion-vs { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea); color: var(--tinta-suave); font-family: var(--f-titular); font-size: 1.125rem; }
.comparacion-opcion--si { background: linear-gradient(140deg, #fff 40%, #effbfb); box-shadow: inset 0 0 0 2px rgb(1 174 182 / 0.4), 0 40px 80px -32px rgb(2 39 71 / 0.5); }
.comparacion-opcion--no { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: clamp(16px, 2vw, 24px); background: transparent; box-shadow: inset 0 0 0 1px var(--linea); }
.comparacion-opcion--no .comparacion-escena { max-width: 200px; filter: saturate(0.55); }
.comparacion-opcion--no strong { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.375rem); }
.comparacion-opcion--no span { font-size: 0.9375rem; }
.cmp-hueso { fill: #ece5d9; }
.cmp-trabecula { fill: none; stroke: #ddd3c3; stroke-width: 2.5; stroke-linecap: round; }
.cmp-encia { fill: #f5cfc9; }
.cmp-diente { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 2; stroke-linejoin: round; }
.cmp-camara { fill: rgb(17 234 222 / 0.35); }
.cmp-conducto { fill: none; stroke: url(#icono-g); stroke-width: 4; stroke-linecap: round; }
.cmp-luz { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.14 1; stroke-dashoffset: 0.14; opacity: 0; filter: drop-shadow(0 0 4px #11eade); }
.cmp-reflejo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.cmp-insignia circle { fill: var(--blanco); stroke: var(--turquesa-500); stroke-width: 2.5; filter: drop-shadow(0 6px 10px rgb(2 39 71 / 0.18)); }
.comparacion-check { fill: none; stroke: var(--turquesa-500); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.cmp-chispas path { fill: none; stroke: var(--turquesa-500); stroke-width: 2.4; stroke-linecap: round; opacity: 0.7; }
/* Extracción: alveolo con la forma de las raíces, el diente fuera (inclinado, apagado) y una estela de subida */
.cmp-alveolo { fill: #c99c91; stroke: #b07f74; stroke-width: 1.5; }
.cmp-alveolo-sombra { fill: none; stroke: rgb(120 60 50 / 0.18); stroke-width: 5; stroke-linecap: round; }
.cmp-encia-borde { fill: none; stroke: #e2a9a0; stroke-width: 3; stroke-linecap: round; }
.cmp-diente--fuera { fill: #f4efe7; stroke: #7d8790; }
.cmp-sale { transform: translate(-6px, -64px) rotate(-10deg); transform-box: fill-box; transform-origin: 50% 100%; }
.cmp-estela path { fill: none; stroke: #9aa5ae; stroke-width: 2.4; stroke-linecap: round; opacity: 0.5; }
.cmp-insignia, .cmp-chispas path { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .cmp-luz { animation: cmp-luz 4.5s ease-in-out infinite; }
  .bucle-activo .cmp-luz--2 { animation-delay: 0.35s; }
  .bucle-activo .cmp-insignia { animation: cmp-insignia 4.5s ease-in-out infinite; }
  .bucle-activo .comparacion-check { animation: comparacion-check 4.5s ease-in-out infinite; }
  .bucle-activo .cmp-chispas path { animation: cmp-chispa 4.5s ease-in-out infinite; }
  .bucle-activo .cmp-chispas path:nth-child(2) { animation-delay: 0.4s; }
  .bucle-activo .cmp-sale { animation: cmp-sale 6s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
  .bucle-activo .cmp-estela path { animation: cmp-estela 6s ease-out infinite; }
  .bucle-activo .cmp-estela path:nth-child(2) { animation-delay: 0.2s; }
}
@keyframes cmp-luz { 0% { opacity: 0; stroke-dashoffset: 0.14; } 8% { opacity: 1; } 55% { opacity: 1; stroke-dashoffset: -0.95; } 60%, 100% { opacity: 0; stroke-dashoffset: -0.95; } }
@keyframes cmp-insignia { 0%, 55%, 100% { transform: scale(1); } 64% { transform: scale(1.14); } 72% { transform: scale(1); } }
@keyframes comparacion-check { 0%, 56% { stroke-dashoffset: 1; } 70%, 100% { stroke-dashoffset: 0; } }
@keyframes cmp-chispa { 0%, 58% { opacity: 0; transform: scale(0.4) rotate(0); } 66% { opacity: 1; transform: scale(1.1) rotate(45deg); } 80%, 100% { opacity: 0; transform: scale(0.6) rotate(90deg); } }
@keyframes cmp-sale {
  0% { opacity: 0; transform: none; }
  6%, 16% { opacity: 1; transform: none; }
  50%, 84% { opacity: 1; transform: translate(-6px, -64px) rotate(-10deg); }
  94%, 100% { opacity: 0; transform: translate(-6px, -64px) rotate(-10deg); }
}
@keyframes oc-halo { 0%, 100% { transform: scale(0.82); opacity: 0.4; } 50% { transform: scale(1); opacity: 1; } }
@keyframes cmp-estela { 0%, 18% { opacity: 0; transform: translateY(14px); } 34% { opacity: 0.8; } 52%, 100% { opacity: 0; transform: translateY(-10px); } }
@media (max-width: 900px) {
  .comparacion { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .comparacion-vs { justify-self: center; }
  .comparacion-opcion--no { grid-template-columns: minmax(0, 120px) minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .comparacion-opcion--si { grid-template-columns: minmax(0, 1fr); }
}

/* Recorrido: figura fija + pasos */
.recorrido { background: var(--blanco); border-block: 1px solid var(--linea); }
.recorrido-cabecera { max-width: 760px; margin-bottom: clamp(32px, 5vw, 64px); }
.recorrido-cabecera h2 { margin-bottom: 18px; }
.recorrido-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.recorrido-figura { position: relative; margin: 0; }
.js .recorrido-figura { position: sticky; top: calc(var(--header-height) + 24px); }
.recorrido-lienzo { position: relative; max-width: 420px; margin-inline: auto; }
.recorrido-lienzo .diente { width: 100%; height: auto; }
.rotulo {
  position: absolute; margin: 0; padding: 2px 6px; border-radius: 6px; background: rgb(255 255 255 / 0.85);
  font-size: 0.875rem; font-weight: 700; color: var(--marino-800); line-height: 1.3; white-space: nowrap;
  transform: translate(0, -115%); transition: opacity 0.35s;
}
.rotulo--derecha { transform: translate(-100%, -115%); }
.rotulo--esmalte { left: 10%; top: 26.786%; }
.rotulo--dentina { left: 90%; top: 35.714%; }
.rotulo--pulpa { left: 90%; top: 46.786%; }
.rotulo--conductos { left: 10%; top: 75%; }
.rotulo--raiz { left: 90%; top: 83.929%; }
.diente .dc-guias, .rotulo { opacity: 1; }
.recorrido-figura:not([data-estado="capas"]) .rotulo { opacity: 0; }
.recorrido-controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.recorrido-controles button {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px;
  border: 1.5px solid var(--linea-fuerte); background: #fff; color: var(--marino-800); font-weight: 650; cursor: pointer;
}
.recorrido-controles button:hover:not(:disabled) { border-color: var(--marino-800); }
.recorrido-controles button:disabled { opacity: 0.45; cursor: default; }
.recorrido-progreso { height: 4px; margin: 16px auto 0; max-width: 320px; border-radius: 4px; background: var(--linea); overflow: hidden; }
.recorrido-progreso span { display: block; height: 100%; width: calc(var(--progreso, 0) * 100%); background: var(--cinta); transition: width 0.5s var(--curva); }
.recorrido-estado { margin: 10px 0 0; text-align: center; font-size: var(--t-pequeno); font-weight: 650; color: var(--tinta-suave); min-height: 1.6em; }
.recorrido-figura figcaption { margin-top: 10px; text-align: center; font-size: 0.875rem; color: var(--tinta-suave); }
.no-js-oculto { display: none; }
.js .no-js-oculto { display: flex; }
.js .recorrido-estado.no-js-oculto { display: block; }

.fases { position: relative; }
.fases > li { position: relative; padding: 0 0 8px 34px; }
/* línea de tiempo: gris de fondo y, encima, el tramo recorrido con el degradado de la cinta */
.fases::before, .fases::after { content: ""; position: absolute; left: 7px; top: 14px; width: 2px; border-radius: 2px; }
.fases::before { bottom: 40px; background: var(--linea); }
.fases::after { height: var(--avance, 0px); background: linear-gradient(#01a6fa, #11eade 60%, #01aeb6); transition: height 0.6s var(--curva); }
.fase-cabecera, .paso { position: relative; }
.marca {
  position: absolute; left: -34px; top: calc(var(--pad-paso, 0px) + 0.35em); width: 16px; height: 16px; border-radius: 50%;
  background: var(--blanco); box-shadow: inset 0 0 0 2px var(--linea-fuerte); transition: box-shadow 0.3s, background 0.3s;
}
.activo > .marca { background: var(--azul-700); box-shadow: 0 0 0 5px rgb(1 166 250 / 0.18); }
.fase-cabecera h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); margin-bottom: 10px; }
.fase-cabecera p { color: var(--tinta-suave); max-width: 34em; }
.fase-cabecera, .paso { transition: color 0.3s; }
.fase-cabecera, .paso { --pad-paso: 14px; padding-block: var(--pad-paso) 26px; }
.pasos { margin: 8px 0 0; }
.paso h4 { font: 650 1.1875rem/1.35 var(--f-texto); color: var(--marino-800); margin-bottom: 8px; }
.paso h4 .num { display: inline-block; min-width: 1.6em; color: var(--azul-700); }
.paso p { color: var(--tinta-suave); max-width: 34em; }
.paso.activo h4, .fase-cabecera.activo h3 { color: var(--marino-950); }
.nota-ilustrativa { margin-top: 24px; padding: 14px 16px; border-radius: var(--r-pequeno); background: var(--bruma); font-size: var(--t-pequeno); color: var(--tinta); }

/* Estados del corte */
.diente g, .diente .dc-guias { transition: opacity 0.45s var(--curva); }
.diente .dc-pulpa-inflamada, .diente .dc-limpios, .diente .dc-sellado, .diente .dc-caries, .diente .dc-acceso, .diente .dc-lima, .diente .dc-restauracion, .diente .dc-seguimiento { opacity: 0; }
[data-estado="caries"] .dc-pulpa-sana, [data-estado="acceso"] .dc-pulpa-sana, [data-estado="limpieza"] .dc-pulpa-sana, [data-estado="sellado"] .dc-pulpa-sana, [data-estado="restauracion"] .dc-pulpa-sana, [data-estado="seguimiento"] .dc-pulpa-sana { opacity: 0; }
[data-estado="caries"] .dc-pulpa-inflamada, [data-estado="caries"] .dc-caries, [data-estado="acceso"] .dc-pulpa-inflamada, [data-estado="acceso"] .dc-acceso { opacity: 1; }
[data-estado="limpieza"] .dc-acceso, [data-estado="limpieza"] .dc-limpios, [data-estado="limpieza"] .dc-lima { opacity: 1; }
[data-estado="sellado"] .dc-acceso, [data-estado="sellado"] .dc-sellado { opacity: 1; }
[data-estado="restauracion"] .dc-sellado, [data-estado="restauracion"] .dc-restauracion, [data-estado="seguimiento"] .dc-sellado, [data-estado="seguimiento"] .dc-restauracion, [data-estado="seguimiento"] .dc-seguimiento { opacity: 1; }
[data-estado]:not([data-estado="capas"]) .dc-guias { opacity: 0; }
.dc-lima, .dc-seguimiento circle { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo[data-estado="limpieza"] .dc-lima { animation: lima 1.6s ease-in-out infinite alternate; }
  .bucle-activo[data-estado="caries"] .dc-halo { animation: late 2.4s ease-in-out infinite; }
  .bucle-activo[data-estado="seguimiento"] .dc-seguimiento circle { animation: gira 40s linear infinite; }
}
@keyframes lima { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes late { 0%, 100% { stroke-opacity: 0.15; } 50% { stroke-opacity: 0.5; } }
@keyframes gira { to { transform: rotate(360deg); } }

/* Guía (sección marina) */
.guia-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.guia h2 { margin-bottom: 22px; }

/* Ocular del microscopio (sección marina) */
.guia-visual { position: relative; margin: 0; }
.ocular { display: block; width: 100%; max-width: 760px; height: auto; margin-inline: auto; overflow: visible; }
.ocular-escala, .ocular-enfoque, .ocular-giro { transform-box: fill-box; transform-origin: center; }
.ocular-guias path { fill: none; stroke: rgb(255 255 255 / 0.55); stroke-width: 1.3; }
.ocular-guias circle { fill: var(--cian-300); }
/* Leyenda anotada: posiciones = extremos de las líneas guía (viewBox 640 × 520) */
.leyenda-ocular { position: absolute; inset: 0; pointer-events: none; }
.leyenda-ocular li { position: absolute; left: 68.4%; max-width: 31%; transform: translateY(-50%); color: #fff; font-weight: 650; font-size: 0.9375rem; line-height: 1.3; }
.leyenda-ocular li.leyenda-ocular--a { top: 5%; left: 73.6%; max-width: 26%; }
.ocular-profesional-halo { transform-box: fill-box; transform-origin: center; }
.leyenda-ocular--b { top: 32.7%; }
.leyenda-ocular--c { top: 57.7%; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ocular-estrias { animation: estrias 0.45s linear infinite; }
  .bucle-activo .ocular-lima { animation: lima-avanza 7s ease-in-out infinite; }
  .bucle-activo .ocular-escala { animation: gira 80s linear infinite; }
  .bucle-activo .ocular-enfoque { animation: enfoque 7s ease-in-out infinite; }
  .bucle-activo .ocular-giro { animation: gira 1.6s linear infinite; }
  .bucle-activo .ocular-profesional-halo { animation: oc-halo 3.5s ease-in-out infinite; }
}
@keyframes estrias { to { transform: translateY(14px); } }
@keyframes lima-avanza { 0%, 100% { transform: translateY(-30px); } 50% { transform: translateY(60px); } }
@keyframes enfoque { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Cierre de tratamiento */
.cierre .contenedor { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px clamp(32px, 6vw, 96px); align-items: center; }
.cierre h2 { margin-bottom: 18px; }
.cierre.contacto h2 { font-size: var(--t-h2); }

.cierre .acciones { justify-content: flex-start; }

/* ---------- Odontopediatría ---------- */
/* Hero «Crecer»: diente de leche y germen del definitivo (mismo estilo que el corte de Endodoncia). En bucle, el germen sube
   un poco, como empujando, su raíz futura se va trazando y la flecha marca hacia dónde crece. */
.ped-ilu { position: relative; display: block; width: min(100%, 400px); height: auto; margin-inline: auto; }
.ped-germen, .ped-brillo { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ped-germen { animation: ped-germen 6s ease-in-out infinite; }
  .bucle-activo .ped-raiz-futura { animation: ped-traza 1.6s linear infinite; }
  .bucle-activo .ped-foliculo { animation: ped-traza 4s linear infinite; }
  .bucle-activo .ped-flecha { animation: ped-flecha 6s ease-in-out infinite; }
  .bucle-activo .ped-brillo { animation: destello-esmalte 6s ease-in-out 1s infinite; }
}
@keyframes ped-germen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ped-traza { to { stroke-dashoffset: -14; } }
@keyframes ped-flecha { 0%, 100% { opacity: 0.35; transform: translateY(4px); } 50% { opacity: 1; transform: translateY(-3px); } }
@keyframes destello-esmalte { 0%, 60%, 100% { opacity: 1; } 75% { opacity: 0.3; } }
/* Interacción: el diente de leche se tambalea (cursor o foco) y, al tocarlo, se cae y sale el definitivo (pieza-odontopediatria.js).
   El germen sube 170 unidades: su corona queda donde estaba la del diente de leche; su raíz se forma y el saco y la flecha se apagan. */
.ped-boton { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-medio); background: none; font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ped-boton:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 6px; }
.ped-ilu { transition: opacity 0.35s; }
.ped-leche { transform-box: view-box; transform-origin: 200px 200px; }
.ped-germen-sube { transform-box: view-box; transform-origin: 200px 362px; }
.ped-raiz-nueva, .ped-estrellas, .ped-encia-nueva { opacity: 0; }
.ped-estrellas path { transform-box: fill-box; transform-origin: center; }
.ped-cambio .pista { margin-top: 8px; }
@media (prefers-reduced-motion: no-preference) {
  .tambalea .ped-leche { animation: ped-tambalea 0.9s ease-in-out infinite; }
  .cambiando .ped-leche { animation: ped-sale 1.6s cubic-bezier(0.45, 0, 0.6, 1) forwards; }
  .cambiando .ped-germen { animation: none; }
  .cambiando .ped-germen-sube { animation: ped-erupciona 1.6s cubic-bezier(0.3, 0, 0.15, 1) 1.2s forwards; }
  .cambiando .ped-foliculo, .cambiando .ped-raiz-futura, .cambiando .ped-flecha { animation: ped-apaga 0.6s ease 0.9s forwards; }
  .cambiando .ped-raiz-nueva, .cambiando .ped-encia-nueva { animation: ped-enciende 0.9s ease 2.6s forwards; }
  .cambiando .ped-estrellas { animation: ped-enciende 0.3s ease 3s forwards; }
  .cambiando .ped-estrellas path { animation: ped-chispa 1.4s ease-in-out 3s infinite; }
  .cambiando .ped-estrellas path:nth-child(2) { animation-delay: 3.3s; }
  .cambiando .ped-estrellas path:nth-child(3) { animation-delay: 3.6s; }
}
@keyframes ped-tambalea { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes ped-sale {
  0% { transform: none; opacity: 1; } 8% { transform: rotate(-5deg); } 16% { transform: rotate(5deg); } 24% { transform: rotate(-4deg); }
  32% { transform: rotate(3deg); } 40% { transform: rotate(0deg); opacity: 1; } 100% { transform: translate(-40px, -120px) rotate(-24deg); opacity: 0; }
}
@keyframes ped-erupciona { to { transform: translateY(-170px) scale(1.4); } }
@keyframes ped-chispa { 0%, 100% { opacity: 0.2; transform: scale(0.5); } 40% { opacity: 1; transform: scale(1.15); } }
@keyframes ped-apaga { to { opacity: 0; } }
@keyframes ped-enciende { to { opacity: 1; } }
/* Movimiento reducido: cada pulsación alterna sin animación entre el antes y el después */
.cambiado .ped-leche, .cambiado .ped-foliculo, .cambiado .ped-raiz-futura, .cambiado .ped-flecha { opacity: 0; }
.cambiado .ped-germen-sube { transform: translateY(-170px) scale(1.4); }
.cambiado .ped-raiz-nueva, .cambiado .ped-encia-nueva { opacity: 1; }

/* Enfoque: foto real del rincón infantil en el marco de la marca, junto al texto */
.ped-enfoque-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.ped-foto-marco { max-width: 440px; width: 100%; justify-self: center; }
.ped-foto { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-medio); background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.ped-foto picture { height: 100%; }
.ped-foto img { width: 100%; height: 100%; object-fit: cover; }
.ped-enfoque h2 { margin-bottom: 26px; }
.ped-enfoque-texto { padding-left: 38px; }
.ped-enfoque-texto .entrada { margin-bottom: 18px; }

/* Tres claves: medallones redondos unidos por el hilo de la marca (horizontal en escritorio, vertical en móvil) */
.ped-pilares { background: var(--blanco); border-block: 1px solid var(--linea); }
.ped-pilares .bloque-hilo::after { background: var(--blanco); }
.ped-pilares-cabecera { max-width: 760px; }
.ped-pilares-lista { --medalla: clamp(112px, 11vw, 148px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px); margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; list-style: none; }
.ped-pilares-lista::before { content: ""; position: absolute; top: calc(var(--medalla) / 2); left: calc(var(--medalla) / 2); right: 12%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, #01a6fa, #11eade 60%, rgb(1 174 182 / 0)); }
.ped-pilar { position: relative; }
.ped-medalla { display: block; width: var(--medalla); height: var(--medalla); margin-bottom: 22px; padding: calc(var(--medalla) * 0.13); border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--blanco), var(--bruma) 72%); box-shadow: 0 0 0 8px var(--blanco), inset 0 0 0 1.5px rgb(1 166 250 / 0.22), 0 18px 36px -18px rgb(2 39 71 / 0.35); overflow: visible; }
.ped-medalla path { fill: none; stroke: var(--marino-800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ped-medalla .acento { stroke: url(#icono-g); stroke-width: 2; }
.ped-pilar-num { display: block; margin-bottom: 8px; font-family: var(--f-titular); font-size: 1.75rem; line-height: 1; background: linear-gradient(135deg, #01a6fa, #01aeb6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.ped-pilar h3 { margin-bottom: 10px; }
.ped-pilar p { margin: 0; color: var(--tinta-suave); max-width: 30em; }
@media (forced-colors: active) { .ped-pilar-num { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
.ped-medalla .gota, .ped-medalla .destello, .ped-medalla .diente-crece { transform-box: fill-box; transform-origin: center; }
.ped-medalla .diente-crece { transform-origin: 50% 100%; }
@media (prefers-reduced-motion: no-preference) {
  /* Prevención: cae una gota (flúor) y el sellador de la muela brilla al recibirla */
  .bucle-activo .ped-pilar--prevencion .gota { animation: ped-gota 4.2s ease-in infinite; }
  .bucle-activo .ped-pilar--prevencion .sellador { animation: ped-sella 4.2s ease-in-out infinite; }
  /* Conservadora: el empaste se repasa y la pieza queda reluciente */
  .bucle-activo .ped-pilar--conservadora .empaste { stroke-dasharray: 1 1; animation: ped-empaste 5s ease-in-out 0.6s infinite; }
  .bucle-activo .ped-pilar--conservadora .destello { animation: ped-destello 5s ease-in-out 0.6s infinite; }
  .bucle-activo .ped-pilar--conservadora .destello--2 { animation-delay: 1.2s; }
  /* Crecimiento: el diente pequeño crece hacia el grande y la flecha lo acompaña */
  .bucle-activo .ped-pilar--crecimiento .diente-crece { animation: ped-crece 5.6s ease-in-out 1.2s infinite; }
  .bucle-activo .ped-pilar--crecimiento .sube { stroke-dasharray: 1 1; animation: arco-nino 5.6s ease-in-out 1.2s infinite; }
}
@keyframes ped-gota { 0% { opacity: 0; transform: translateY(-6px); } 15% { opacity: 1; transform: translateY(0); } 55% { opacity: 1; transform: translateY(14px); } 62%, 100% { opacity: 0; transform: translateY(17px); } }
@keyframes ped-sella { 0%, 52%, 100% { stroke-width: 2; } 64% { stroke-width: 3.6; } 80% { stroke-width: 2; } }
@keyframes ped-empaste { 0%, 10% { stroke-dashoffset: 0; } 30% { stroke-dashoffset: 1; } 55%, 100% { stroke-dashoffset: 0; } }
@keyframes ped-destello { 0%, 50%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); } 66% { opacity: 1; transform: scale(1.1) rotate(45deg); } 82% { opacity: 0; transform: scale(0.5) rotate(90deg); } }
@keyframes ped-crece { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* Crecimiento y seguimiento (marino): línea de crecimiento con dientes cada vez mayores; la lente de revisión se detiene en cada
   etapa y su nodo se ilumina. Ciclo de 12 s: lente y nodos usan los mismos tiempos (delays = inicio de cada parada). */
.ped-linea-visual { margin: 0; }
.ped-linea { display: block; width: 100%; max-width: 560px; height: auto; margin-inline: auto; overflow: visible; }
.ped-halo { fill: rgb(17 234 222 / 0.06); }
.ped-guia { fill: none; stroke: #fff; stroke-opacity: 0.28; stroke-width: 1.5; stroke-dasharray: 2 4; stroke-linecap: round; }
.ped-linea-hilo { fill: none; stroke: url(#hilo-g); stroke-width: 2.5; stroke-linecap: round; }
.ped-etapa, .ped-germen-mini { fill: none; stroke: #fff; stroke-opacity: 0.85; stroke-width: 1.75; stroke-linejoin: round; }
.ped-germen-mini { stroke: var(--cian-300); stroke-opacity: 0.6; stroke-dasharray: 3 4; }
.ped-nodo { fill: var(--marino-950); stroke: var(--cian-300); stroke-width: 2; transform-box: fill-box; transform-origin: center; }
.ped-lente circle { fill: none; stroke: url(#arco-g); stroke-width: 3; }
.ped-lente .ped-lente-halo { stroke: var(--cian-300); stroke-opacity: 0.25; stroke-width: 1.5; }
.ped-lente-reflejo { fill: none; stroke: #fff; stroke-opacity: 0.7; stroke-width: 3; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ped-lente-pos { animation: ped-lente 12s ease-in-out infinite; }
  .bucle-activo .ped-nodo, .bucle-activo .ped-etapa { animation: ped-nodo 12s ease-in-out infinite; }
  .bucle-activo .ped-etapa { animation-name: ped-etapa; }
  .bucle-activo .ped-nodo--1, .bucle-activo .ped-etapa--1 { animation-delay: 0.4s; }
  .bucle-activo .ped-nodo--2, .bucle-activo .ped-etapa--2 { animation-delay: 3.4s; }
  .bucle-activo .ped-nodo--3, .bucle-activo .ped-etapa--3 { animation-delay: 6.4s; }
  .bucle-activo .ped-nodo--4, .bucle-activo .ped-etapa--4 { animation-delay: 9.4s; }
  .bucle-activo .ped-germen-mini { animation: ped-traza 2.4s linear infinite; }
}
@keyframes ped-lente {
  0% { transform: translate(70px, 184.5px); opacity: 0; }
  4% { transform: translate(70px, 184.5px); opacity: 1; }
  16% { transform: translate(70px, 184.5px); }
  25%, 41% { transform: translate(190px, 149px); }
  50%, 66% { transform: translate(310px, 101.5px); }
  75%, 91% { transform: translate(430px, 42px); opacity: 1; }
  97% { transform: translate(430px, 42px); opacity: 0; }
  100% { transform: translate(70px, 184.5px); opacity: 0; }
}
@keyframes ped-nodo { 0%, 14%, 100% { transform: scale(1); fill: var(--marino-950); } 4%, 10% { transform: scale(1.6); fill: var(--cian-300); } }
@keyframes ped-etapa { 0%, 14%, 100% { stroke: #fff; stroke-opacity: 0.85; } 4%, 10% { stroke: var(--cian-300); stroke-opacity: 1; } }

@media (max-width: 900px) {
  .ped-enfoque-inner { grid-template-columns: minmax(0, 1fr); }
  .ped-foto-marco { max-width: 380px; }
  .ped-pilares-lista { grid-template-columns: minmax(0, 1fr); gap: 36px; --medalla: 104px; }
  .ped-pilares-lista::before { top: calc(var(--medalla) / 2); bottom: 40px; left: calc(var(--medalla) / 2 - 1px); right: auto; width: 2px; height: auto; background: linear-gradient(#01a6fa, #11eade 60%, rgb(1 174 182 / 0)); }
  .ped-pilar { display: grid; grid-template-columns: var(--medalla) minmax(0, 1fr); column-gap: 24px; align-items: start; }
  .ped-medalla { grid-row: span 3; margin-bottom: 0; }
}
@media (max-width: 560px) {
  .ped-enfoque-texto { padding-left: 0; }
  .ped-pilares-lista { --medalla: 84px; }
  .ped-pilar { column-gap: 18px; }
}

/* ---------- Ortodoncia ---------- */
/* Hero: simulación. --p (0 → 1) lo pone pieza-ortodoncia.js; sin JavaScript queda en 1 (resultado). Cada diente se desplaza
   (1 − p) veces su desalineación; el plan en discontinua se apaga y los alineadores se forman. */
.orto-hero .trat-hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.orto-sim { margin: 0; }
.orto-svg { --p: 1; position: relative; display: block; width: min(100%, 560px); height: auto; margin-inline: auto; overflow: visible; touch-action: pan-y; cursor: ew-resize; transition: opacity 0.35s; }
.orto-boca { fill: #f1e2de; }
.orto-corona { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.5; stroke-linejoin: round; }
.orto-diente { --q: calc(1 - var(--p)); transform-box: fill-box; transform-origin: 50% 50%; transform: translate(calc(var(--dx) * var(--q) * 1px), calc(var(--dy) * var(--q) * 1px)) rotate(calc(var(--rot) * var(--q) * 1deg)); }
.orto-plan path { fill: none; stroke: var(--azul-500); stroke-width: 1.3; stroke-dasharray: 3 3.5; opacity: calc((1 - var(--p)) * 0.95); }
.orto-alineador { fill: rgb(1 166 250 / 0.05); stroke: url(#hilo-g); stroke-opacity: 0.75; stroke-width: 1.4; stroke-linejoin: round; opacity: calc(var(--p) * 1.5 - 0.5); }
.orto-brillo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.08 1.2; stroke-dashoffset: 0.1; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .orto-sim.alineada .orto-brillo { animation: orto-brillo 1.5s ease-out 0.15s 1; }
}
@keyframes orto-brillo { 0% { stroke-dashoffset: 0.1; opacity: 0; } 10% { opacity: 1; } 90% { stroke-dashoffset: -1.15; opacity: 1; } 100% { stroke-dashoffset: -1.15; opacity: 0; } }
/* Control: pista con el degradado de la marca hasta el valor; mando redondo con el anillo de la marca */
/* Control: pista con el degradado de la marca hasta el valor; mando con flechas ‹ › que crece al pasar, al pulsar y con foco
   (que se lea arrastrable). position: relative para quedar por encima del halo decorativo del hero (::before). */
.orto-control { position: relative; align-items: center; gap: 12px; max-width: 440px; margin: 14px auto 0; }
.orto-control-icono { flex: none; width: 28px; height: 28px; fill: none; stroke: var(--marino-800); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.orto-control-icono .acento { stroke: url(#icono-g); }
.orto-rango { --valor: 0%; flex: 1; min-width: 0; height: 48px; margin: 0; background: transparent; cursor: grab; touch-action: pan-y; -webkit-appearance: none; appearance: none; }
.orto-rango:active { cursor: grabbing; }
.orto-rango::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #01a6fa, #11eade) 0 0 / var(--valor) 100% no-repeat, var(--linea); }
.orto-rango::-moz-range-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, #01a6fa, #11eade) 0 0 / var(--valor) 100% no-repeat, var(--linea); }
.orto-rango::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -13px; border-radius: 50%; cursor: grab; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 11l-5 5 5 5M19 11l5 5-5 5' fill='none' stroke='%230072b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 6px rgb(1 166 250 / 0.16), 0 4px 12px rgb(2 39 71 / 0.22); transition: transform 0.2s var(--curva), box-shadow 0.2s; }
.orto-rango::-moz-range-thumb { width: 34px; height: 34px; border: 0; border-radius: 50%; cursor: grab; background: var(--blanco) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M13 11l-5 5 5 5M19 11l5 5-5 5' fill='none' stroke='%230072b2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 26px no-repeat; box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 6px rgb(1 166 250 / 0.16), 0 4px 12px rgb(2 39 71 / 0.22); transition: transform 0.2s var(--curva), box-shadow 0.2s; }
.orto-rango:hover::-webkit-slider-thumb { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 9px rgb(1 166 250 / 0.2), 0 6px 16px rgb(2 39 71 / 0.26); }
.orto-rango:hover::-moz-range-thumb { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 9px rgb(1 166 250 / 0.2), 0 6px 16px rgb(2 39 71 / 0.26); }
.orto-rango:active::-webkit-slider-thumb { cursor: grabbing; transform: scale(1.2); }
.orto-rango:active::-moz-range-thumb { cursor: grabbing; transform: scale(1.2); }
.orto-rango:focus-visible { outline: none; }
.orto-rango:focus-visible::-webkit-slider-thumb { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 4px var(--papel), 0 0 0 7px var(--azul-500); }
.orto-rango:focus-visible::-moz-range-thumb { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 4px var(--papel), 0 0 0 7px var(--azul-500); }
@media (forced-colors: active) { .orto-rango { appearance: auto; -webkit-appearance: auto; } }
.orto-sim .pista { max-width: 30rem; margin-inline: auto; }
.js .orto-sim .pista.no-js-oculto { display: block; }

/* Objetivo: mordida de lado; la mandíbula se abre y se cierra sobre su articulación y el plano de oclusión se ilumina al encajar */
.orto-objetivo { align-items: center; }
.orto-mordida-marco { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 460px; }
.orto-mordida { display: block; width: 100%; height: auto; overflow: visible; }
.orto-mordida-encia { fill: url(#os-encia); }
.orto-mordida-sup path, .orto-mordida-inf path { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.5; stroke-linejoin: round; }
.orto-oclusion { fill: none; stroke: url(#hilo-g); stroke-width: 2; stroke-dasharray: 5 6; stroke-linecap: round; }
.orto-mandibula { transform-box: view-box; transform-origin: 300px 150px; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .orto-mandibula { animation: orto-mandibula 5.5s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
  .bucle-activo .orto-oclusion { animation: orto-oclusion 5.5s ease-in-out infinite; }
}
@keyframes orto-mandibula { 0%, 34%, 100% { transform: rotate(0deg); } 52%, 70% { transform: rotate(7deg); } }
@keyframes orto-oclusion { 0%, 30%, 92%, 100% { opacity: 1; stroke-dashoffset: 0; } 50%, 74% { opacity: 0.25; stroke-dashoffset: -22; } }

/* Proceso (momento destacado): zigzag de imagen y texto con el hilo de la marca por el centro y un nodo por paso */
.orto-proceso { background: var(--blanco); border-block: 1px solid var(--linea); }
.orto-proceso .bloque-hilo::after { background: var(--blanco); }
.orto-proceso-cabecera { max-width: 760px; margin-bottom: clamp(40px, 6vw, 80px); }
.orto-pasos { position: relative; margin: 0; padding: 0; list-style: none; display: grid; gap: clamp(48px, 7vw, 104px); }
.orto-pasos::before { content: ""; position: absolute; left: 50%; top: 10px; bottom: 10px; width: 2px; margin-left: -1px; border-radius: 2px; background: linear-gradient(#01a6fa, #11eade 50%, #01aeb6 85%, rgb(1 174 182 / 0)); }
.orto-paso { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(56px, 9vw, 128px); align-items: center; }
.orto-paso::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 6px rgb(1 166 250 / 0.14); }
.orto-paso:nth-child(even) .orto-paso-media { order: 2; }
.orto-paso-media { display: grid; place-items: center; min-height: 260px; padding: clamp(18px, 3vw, 32px); border-radius: var(--r-medio); background: radial-gradient(90% 90% at 50% 40%, var(--blanco), var(--bruma)); box-shadow: inset 0 0 0 1px var(--linea); }
.orto-paso--estudio .orto-paso-media { background: none; box-shadow: none; padding: 0; }
.orto-paso-num { display: block; margin-bottom: 10px; font-family: var(--f-titular); font-size: clamp(2.4rem, 1.8rem + 2vw, 3.5rem); line-height: 1; background: linear-gradient(135deg, #01a6fa, #11eade 60%, #01aeb6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.orto-paso h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); margin-bottom: 12px; }
.orto-paso p { color: var(--tinta-suave); max-width: 32em; }
@media (forced-colors: active) { .orto-paso-num { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
.orto-paso-ilu { display: block; width: min(100%, 230px); height: auto; overflow: visible; }
.orto-paso-ilu path, .orto-paso-ilu rect, .orto-paso-ilu circle { fill: none; stroke: var(--marino-800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orto-paso-ilu .acento { stroke: url(#icono-g); stroke-width: 2.2; }
.orto-paso-ilu .orto-check { stroke-dasharray: 1 1; }
.orto-paso-ilu .orto-anillo-fondo { stroke: var(--linea); stroke-width: 3; }
.orto-paso-ilu .orto-anillo { stroke-width: 3; stroke-dasharray: 1 1; stroke-dashoffset: 0.25; }
.orto-paso-ilu .orto-revision { fill: var(--blanco); stroke: var(--azul-500); transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  /* Valoración: las tres casillas se marcan una tras otra y la lista se reinicia */
  .bucle-activo .orto-check { animation: orto-check 6s ease-in-out infinite; }
  .bucle-activo .orto-check:nth-of-type(2) { animation-delay: 0.7s; }
  .bucle-activo .orto-check:nth-of-type(3) { animation-delay: 1.4s; }
  /* Seguimiento: el anillo avanza y cada revisión se enciende al pasar */
  .bucle-activo .orto-anillo { animation: orto-anillo 8s linear infinite; }
  .bucle-activo .orto-revision { animation: orto-revision 8s ease-out infinite; }
  .bucle-activo .orto-revision:nth-of-type(2) { animation-delay: 1s; } .bucle-activo .orto-revision:nth-of-type(3) { animation-delay: 2s; }
  .bucle-activo .orto-revision:nth-of-type(4) { animation-delay: 3s; } .bucle-activo .orto-revision:nth-of-type(5) { animation-delay: 4s; }
  .bucle-activo .orto-revision:nth-of-type(6) { animation-delay: 5s; } .bucle-activo .orto-revision:nth-of-type(7) { animation-delay: 6s; }
  .bucle-activo .orto-revision:nth-of-type(8) { animation-delay: 7s; }
}
@keyframes orto-check { 0%, 8% { stroke-dashoffset: 1; } 22%, 82% { stroke-dashoffset: 0; } 96%, 100% { stroke-dashoffset: 1; } }
@keyframes orto-anillo { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes orto-revision { 0% { fill: var(--cian-300); transform: scale(1.5); } 12% { fill: var(--azul-500); transform: scale(1); } 85% { fill: var(--azul-500); } 100% { fill: var(--blanco); } }
/* Estudio: foto real del TAC en el marco de la marca y las pruebas que nombra el texto (el TAC en discontinua: «cuando está indicado») */
.orto-foto-marco { margin: 0; max-width: 400px; width: 100%; }
.orto-foto { aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-medio); background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.orto-foto picture { height: 100%; }
.orto-foto img { width: 100%; height: 100%; object-fit: cover; }
.orto-pruebas { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.orto-pruebas li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border-radius: 999px; background: var(--bruma); color: var(--marino-800); font-size: 0.9375rem; font-weight: 650; }
.orto-pruebas svg { width: 20px; height: 20px; fill: none; stroke: var(--marino-800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orto-pruebas .acento { stroke: url(#icono-g); }
.orto-pruebas .orto-prueba-opcional { background: transparent; outline: 1.5px dashed var(--azul-500); outline-offset: -1.5px; }
/* Planificación: pantalla con la arcada digital (la de Inicio) sobre una malla de escaneado y una barra de simulación */
.orto-monitor { position: relative; width: min(100%, 360px); margin-bottom: 26px; padding: 12px 12px 14px; border-radius: 18px; background: var(--marino-800); box-shadow: 0 24px 48px -20px rgb(2 39 71 / 0.55); }
.orto-monitor::after { content: ""; position: absolute; left: 50%; top: 100%; width: 70px; height: 22px; margin-left: -35px; background: linear-gradient(var(--marino-700), var(--marino-800)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.orto-pantalla { position: relative; display: grid; gap: 10px; padding: 16px 16px 14px; border-radius: 9px; background: linear-gradient(rgb(1 166 250 / 0.07) 1px, transparent 1px) 0 0 / 18px 18px, linear-gradient(90deg, rgb(1 166 250 / 0.07) 1px, transparent 1px) 0 0 / 18px 18px, #f7fbfd; }
.orto-pantalla .arcada { width: 100%; height: auto; }
.orto-pantalla-barra { display: block; height: 5px; border-radius: 5px; background: var(--linea); overflow: hidden; }
.orto-pantalla-barra span { display: block; height: 100%; width: 100%; background: var(--cinta); transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .orto-pantalla-barra span { animation: orto-barra 10s ease-in-out 2.6s infinite; }
}
@keyframes orto-barra { 0%, 46% { transform: scaleX(0.15); } 74%, 100% { transform: scaleX(1); } }

/* Opciones: invisible destacada a todo el ancho; brackets e infantil debajo; terapia miofuncional en un aparte */
.orto-opciones-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; list-style: none; }
.orto-opcion { padding: clamp(22px, 3vw, 32px); border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); }
.orto-opcion h3 { margin-bottom: 10px; }
.orto-opcion p { color: var(--tinta-suave); margin-bottom: 10px; }
.orto-opcion p:last-child { margin-bottom: 0; }
.orto-opcion-ilu { display: grid; place-items: center; margin-bottom: 22px; padding: 14px; aspect-ratio: 2 / 1; border-radius: var(--r-tarjeta); background: radial-gradient(90% 90% at 50% 30%, var(--blanco), var(--bruma)); }
.orto-opcion-ilu svg { width: 100%; max-width: 300px; height: auto; max-height: 100%; overflow: visible; }
.orto-opcion--invisible { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; background: radial-gradient(80% 120% at 0% 50%, #e9f6fb, var(--blanco) 60%); }
.orto-opcion--invisible .orto-opcion-ilu { margin: 0; aspect-ratio: 16 / 9; background: radial-gradient(90% 90% at 50% 30%, var(--blanco), #dff1f7); }
.orto-opcion--invisible .orto-opcion-ilu svg { max-width: 420px; }
.orto-opcion--invisible h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.125rem); }
.orto-opcion .orto-insignias { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--t-pequeno); font-weight: 650; color: var(--marino-800); }
.orto-insignias .placa-nivel { margin: 0; }
.orto-arco { fill: none; stroke: #8d9aa6; stroke-width: 2; }
.orto-arco-brillo { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.12; opacity: 0; }
.orto-bracket { fill: #b7c3ce; stroke: #6f7f8d; stroke-width: 1.2; }
.orto-funda { transform-box: fill-box; transform-origin: center; }
.orto-funda .orto-alineador { opacity: 1; }
.orto-funda-brillo { fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.12; opacity: 0; }
.orto-infantil-arcada { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; stroke-dasharray: 3 5; }
.orto-infantil-dientes rect { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.4; }
.orto-infantil-flecha { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transform-box: fill-box; transform-origin: center; }
.orto-infantil .acento, .orto-perfil .acento { stroke: url(#icono-g); }
@media (prefers-reduced-motion: no-preference) {
  /* Invisible: el alineador baja y se ajusta a los dientes, un brillo lo recorre y se retira */
  .bucle-activo .orto-funda { animation: orto-funda 6s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
  .bucle-activo .orto-funda-brillo { animation: orto-funda-brillo 6s ease-in-out infinite; }
  /* Brackets: alternan metálicos y estéticos; un brillo recorre el arco */
  .bucle-activo .orto-bracket { animation: orto-bracket 8s ease-in-out infinite; }
  .bucle-activo .orto-arco-brillo { animation: orto-arco-brillo 4s ease-in-out 1s infinite; }
  /* Infantil: la arcada se acompaña en su crecimiento (flechas hacia fuera) */
  .bucle-activo .orto-infantil-flecha { animation: orto-flecha-i 3s ease-in-out infinite; }
  .bucle-activo .orto-infantil-flecha--d { animation-name: orto-flecha-d; }
}
@keyframes orto-funda { 0%, 8% { transform: translateY(-26px); opacity: 0; } 30%, 72% { transform: translateY(0); opacity: 1; } 92%, 100% { transform: translateY(-26px); opacity: 0; } }
@keyframes orto-funda-brillo { 0%, 34% { stroke-dashoffset: 0.12; opacity: 0; } 38% { opacity: 1; } 62% { stroke-dashoffset: -1.15; opacity: 1; } 66%, 100% { stroke-dashoffset: -1.15; opacity: 0; } }
@keyframes orto-bracket { 0%, 40% { fill: #b7c3ce; stroke: #6f7f8d; } 50%, 90% { fill: #fbfcfd; stroke: #c9d4dc; } 100% { fill: #b7c3ce; stroke: #6f7f8d; } }
@keyframes orto-arco-brillo { 0% { stroke-dashoffset: 0.12; opacity: 0; } 10% { opacity: 1; } 60% { stroke-dashoffset: -1.15; opacity: 1; } 70%, 100% { stroke-dashoffset: -1.15; opacity: 0; } }
@keyframes orto-flecha-i { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(-7px); opacity: 1; } }
@keyframes orto-flecha-d { 0%, 100% { transform: translateX(0); opacity: 0.4; } 50% { transform: translateX(7px); opacity: 1; } }
.orto-miofuncional { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: clamp(18px, 3vw, 32px); align-items: center; margin-top: clamp(20px, 3vw, 36px); padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px); border-radius: var(--r-medio); background: var(--bruma); }
.orto-miofuncional h3 { margin-bottom: 8px; font-size: var(--t-h3); }
.orto-miofuncional p { margin: 0; color: var(--tinta); }
.orto-perfil { width: 96px; height: 96px; padding: 8px; border-radius: 50%; background: var(--blanco); }
.orto-perfil path { fill: none; stroke: var(--marino-800); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orto-perfil .orto-aire { stroke-width: 2.2; stroke-dasharray: 4 5; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .orto-aire { animation: orto-aire 1.8s linear infinite; }
}
@keyframes orto-aire { to { stroke-dashoffset: 18; } }

/* Todas las etapas (marino): cuatro personas de distinta edad sobre el hilo; una luz lo recorre y enciende cada sonrisa al pasar */
.orto-etapas-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.orto-etapas h2 { margin-bottom: 22px; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.75rem); line-height: 1.06; }
.orto-etapas-visual { margin: 0; }
.orto-personas { display: block; width: 100%; height: auto; overflow: visible; }
.orto-persona path, .orto-persona circle { fill: none; stroke: #fff; stroke-opacity: 0.88; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.orto-persona .sonrisa { stroke: var(--cian-300); stroke-opacity: 1; stroke-width: 2.4; }
.orto-personas-hilo { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 2; }
.orto-personas-luz { fill: none; stroke: url(#hilo-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.18 1; stroke-dashoffset: 0.18; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .orto-personas-luz { opacity: 1; animation: orto-luz 8s linear infinite; }
  .bucle-activo .orto-persona .sonrisa { animation: orto-sonrisa 8s ease-in-out infinite; }
  .bucle-activo .orto-persona--2 .sonrisa { animation-delay: 1.9s; }
  .bucle-activo .orto-persona--3 .sonrisa { animation-delay: 3.8s; }
  .bucle-activo .orto-persona--4 .sonrisa { animation-delay: 5.7s; }
}
@keyframes orto-luz { to { stroke-dashoffset: -1; } }
@keyframes orto-sonrisa { 0%, 30%, 100% { stroke-width: 2.4; filter: none; } 10% { stroke-width: 4; filter: drop-shadow(0 0 5px rgb(17 234 222 / 0.9)); } }

@media (max-width: 900px) {
  .orto-hero .trat-hero-inner, .orto-etapas-inner { grid-template-columns: minmax(0, 1fr); }
  .orto-pasos::before { left: 9px; }
  .orto-paso { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-left: 40px; }
  .orto-paso::after { left: 9px; top: 8px; margin-top: 0; }
  .orto-paso:nth-child(even) .orto-paso-media { order: 0; }
  .orto-paso-media { min-height: 0; }
  .orto-opciones-lista { grid-template-columns: minmax(0, 1fr); }
  .orto-opcion--invisible { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .orto-paso { padding-left: 30px; }
  .orto-pasos::before, .orto-paso::after { left: 4px; }
  .orto-miofuncional { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Odontología general ---------- */
/* Hero «revisa a tiempo»: arcada en vista oclusal. pieza-general.js marca cada diente (.revisada) al pasar el cursor, el dedo o la
   luz del barrido; el de la caries se detecta (.detectada) y se restaura (.tratada); con todo revisado, .completa en la caja. */
.gen-hero .trat-hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.gen-svg { position: relative; display: block; width: min(100%, 520px); height: auto; margin-inline: auto; overflow: visible; transition: opacity 0.35s; }
.gen-encia { fill: url(#os-encia); }
.gen-paladar { fill: #f9e6e2; }
.gen-rugas { fill: none; stroke: #efc9c1; stroke-width: 3; stroke-linecap: round; }
.gen-cuerpo { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.5; stroke-linejoin: round; transition: stroke 0.3s; }
.gen-fisura { fill: none; stroke: #8fa3b3; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.gen-caries { fill: #7b5137; opacity: 0.8; transition: opacity 0.5s; }
.gen-empaste { fill: #fff; stroke: var(--azul-500); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.5s, transform 0.6s var(--curva); }
.gen-aviso { fill: none; stroke: #e0873e; stroke-width: 2; stroke-dasharray: 4 3; opacity: 0; }
.gen-marca { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.3); transition: opacity 0.3s, transform 0.45s var(--curva); }
.gen-marca circle { fill: var(--blanco); stroke: url(#icono-g); stroke-width: 2; }
.gen-marca path { fill: none; stroke: var(--turquesa-500); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.revisada .gen-marca { opacity: 1; transform: none; }
.revisada .gen-cuerpo { stroke: var(--azul-700); }
.detectada .gen-aviso { opacity: 1; }
.tratada .gen-caries, .tratada .gen-aviso { opacity: 0; }
.tratada .gen-empaste { opacity: 1; transform: none; }
.gen-luz { opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.12s linear; }
.gen-luz circle:first-child { fill: rgb(17 234 222 / 0.16); stroke: rgb(17 234 222 / 0.5); stroke-width: 1.5; }
.gen-luz circle:last-child { fill: var(--cian-300); }
.cargando .gen-luz { opacity: 1; }
/* El mando del paladar: el botón real (HTML, transparente) va encima del dibujo; el anillo se carga con --carga (pieza-general.js) */
.gen-lienzo { position: relative; width: min(100%, 520px); margin-inline: auto; }
.gen-lienzo .gen-svg { width: 100%; }
.gen-boton { position: absolute; left: 50%; top: 72.9%; width: 21%; aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; transform: translate(-50%, -50%); cursor: pointer; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
.js .gen-boton.no-js-oculto { display: block; }
.gen-boton:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 2px; }
.completa .gen-boton { cursor: default; }
.gen-mando-cuerpo { transform-box: fill-box; transform-origin: center; transition: transform 0.25s var(--curva); }
.pulsando .gen-mando-cuerpo { transform: scale(0.92); }
.completa .gen-mando-cuerpo { transform: scale(1.06); }
.gen-mando-halo { fill: rgb(17 234 222 / 0.22); stroke: none; transform-box: fill-box; transform-origin: center; opacity: 0; }
.gen-completa-fondo { fill: var(--blanco); stroke: var(--linea-fuerte); stroke-width: 2; filter: drop-shadow(0 6px 10px rgb(2 39 71 / 0.18)); transition: stroke 0.3s; }
.gen-carga { fill: none; stroke: url(#icono-g); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--carga, 0)); }
.completa .gen-completa-fondo { stroke: var(--turquesa-500); }
.gen-espejo { fill: none; stroke: var(--marino-800); stroke-width: 3; stroke-linecap: round; transition: opacity 0.3s; }
.gen-espejo circle { fill: rgb(17 234 222 / 0.18); stroke: url(#icono-g); }
.gen-espejo-brillo { stroke: var(--blanco); stroke-width: 2; }
.completa .gen-espejo { opacity: 0; }
.gen-completa-check { fill: none; stroke: url(#icono-g); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset 0.6s var(--curva) 0.2s; }
.gen-recordatorio { opacity: 0; transition: opacity 0.4s 0.7s; }
.gen-recordatorio > rect:first-child, .gen-recordatorio > path:first-of-type { fill: var(--blanco); stroke: var(--linea-fuerte); stroke-width: 1.5; stroke-linejoin: round; }
.gen-cal { fill: none; stroke: var(--marino-800); stroke-width: 1.6; stroke-linecap: round; }
.gen-punto { fill: var(--whatsapp); }
.completa .gen-recordatorio { opacity: 1; }
.completa .gen-completa-check { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .detectada:not(.tratada) .gen-aviso { animation: gen-aviso 0.8s ease-in-out infinite; }
  /* En reposo, el mando «llama» con una onda; mientras se carga, la onda late más deprisa */
  .gen-revision.bucle-activo:not(.completa) .gen-mando-halo { animation: gen-halo 2.2s ease-out infinite; }
  .gen-revision.cargando .gen-mando-halo { animation-duration: 0.9s; }
}
@keyframes gen-aviso { 0%, 100% { stroke-opacity: 0.4; } 50% { stroke-opacity: 1; } }
@keyframes gen-halo { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.55); } }
/* Pie del dibujo: la pista y, con la revisión completa, el mensaje de cierre en el mismo sitio (se cruzan) */
.gen-pie { display: grid; justify-items: center; margin-top: 6px; }
.js .gen-pie.no-js-oculto { display: grid; }
.gen-pie > p { grid-area: 1 / 1; margin: 0; text-align: center; transition: opacity 0.4s, transform 0.5s var(--curva); }
.gen-mensaje { max-width: 26rem; padding: 10px 18px; border-radius: 16px; background: var(--blanco); box-shadow: inset 0 0 0 1.5px rgb(1 174 182 / 0.35), var(--sombra); font-weight: 650; font-size: var(--t-pequeno); color: var(--marino-800); opacity: 0; transform: translateY(6px); }
.completa .gen-pie .pista { opacity: 0; }
.completa .gen-mensaje { opacity: 1; transform: none; transition-delay: 0.6s; }

/* Prevenir, detectar y tratar: texto y foto real de la segunda sala */
.gen-cuidado-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 7vw, 112px); align-items: center; }
.gen-cuidado-texto { padding-left: 38px; margin-top: 26px; }
.gen-cuidado-texto .entrada { color: var(--marino-800); font-family: var(--f-titular); font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.875rem); line-height: 1.35; margin-bottom: 18px; }
.gen-foto-marco { max-width: 560px; width: 100%; justify-self: center; }
.gen-foto { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-medio); background: #ddd2c4; box-shadow: 0 2px 6px rgb(2 39 71 / 0.1), 0 34px 70px -24px rgb(2 39 71 / 0.5); }
.gen-foto picture { height: 100%; }
.gen-foto img { width: 100%; height: 100%; object-fit: cover; }

/* Proceso: tres estaciones en una vía horizontal; una luz la recorre (cada paso, un tercio del ciclo de 9 s) y cada estación se
   enciende al llegar. La luz vive en el primer paso y avanza por left: 100 % = una columna, más el hueco. */
.gen-proceso { background: var(--blanco); border-block: 1px solid var(--linea); }
.gen-proceso .bloque-hilo::after { background: var(--blanco); }
.gen-proceso-cabecera { max-width: 760px; }
.gen-pasos { --nodo: 76px; --hueco: clamp(24px, 4vw, 64px); position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco); margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; list-style: none; }
.gen-pasos::before { content: ""; position: absolute; top: calc(var(--nodo) / 2 - 1px); left: calc(var(--nodo) / 2); width: calc((100% - 2 * var(--hueco)) / 3 * 2 + 2 * var(--hueco)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, #01a6fa, #11eade 60%, #01aeb6); opacity: 0.45; }
.gen-luz-via { position: absolute; z-index: 2; top: calc(var(--nodo) / 2 - 6px); left: calc(var(--nodo) / 2 - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--cian-300); box-shadow: 0 0 0 5px rgb(17 234 222 / 0.25), 0 0 16px rgb(17 234 222 / 0.85); opacity: 0; pointer-events: none; }
.gen-paso { position: relative; }
.gen-paso-nodo { position: relative; z-index: 1; display: grid; place-items: center; width: var(--nodo); height: var(--nodo); margin-bottom: 20px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--linea-fuerte), 0 0 0 8px var(--blanco); }
.gen-paso-nodo svg { width: 46%; height: 46%; fill: none; stroke: var(--marino-800); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gen-paso-nodo .acento { stroke: url(#icono-g); }
.gen-paso-num { display: block; margin-bottom: 6px; font-family: var(--f-titular); font-size: 1.5rem; color: var(--azul-700); }
.gen-paso h3 { margin-bottom: 10px; }
.gen-paso p { margin: 0; color: var(--tinta-suave); max-width: 30em; }
@media (prefers-reduced-motion: no-preference) {
  .gen-pasos.bucle-activo .gen-paso:first-child .gen-luz-via { opacity: 1; animation: gen-via 9s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
  .gen-pasos.bucle-activo .gen-paso-nodo { animation: gen-estacion 9s ease-in-out infinite; }
  .gen-pasos.bucle-activo .gen-paso:nth-child(2) .gen-paso-nodo { animation-delay: 3s; }
  .gen-pasos.bucle-activo .gen-paso:nth-child(3) .gen-paso-nodo { animation-delay: 6s; }
}
@keyframes gen-via {
  0%, 6% { left: calc(var(--nodo) / 2 - 6px); opacity: 1; }
  33%, 39% { left: calc(100% + var(--hueco) + var(--nodo) / 2 - 6px); }
  66%, 92% { left: calc(200% + 2 * var(--hueco) + var(--nodo) / 2 - 6px); opacity: 1; }
  100% { left: calc(200% + 2 * var(--hueco) + var(--nodo) / 2 - 6px); opacity: 0; }
}
@keyframes gen-estacion { 0%, 22%, 100% { box-shadow: inset 0 0 0 1.5px var(--linea-fuerte), 0 0 0 8px var(--blanco); } 4%, 16% { box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 8px var(--blanco), 0 0 0 14px rgb(1 166 250 / 0.14); } }

/* Servicios: tres tarjetas con una escena animada cada una (cepillado, restauración, prevención en el tiempo) y la derivación a
   otras áreas en una banda. Las escenas usan el mismo estilo relleno que las ilustraciones de los tratamientos. */
.gen-servicios-cabecera { max-width: 760px; }
.gen-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 36px); margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; list-style: none; }
.gen-tarjeta { display: flex; flex-direction: column; padding: 14px 14px 26px; border-radius: var(--r-medio); background: var(--blanco); box-shadow: inset 0 0 0 1px var(--linea), var(--sombra); transition: transform 0.3s var(--curva), box-shadow 0.3s; }
.gen-tarjeta:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgb(1 166 250 / 0.3), var(--sombra-alta); }
.gen-tarjeta h3 { margin: 22px 12px 8px; }
.gen-tarjeta p { margin: 0 12px; color: var(--tinta-suave); }
.gen-escena { position: relative; overflow: hidden; aspect-ratio: 14 / 9; border-radius: calc(var(--r-medio) - 8px); background: radial-gradient(90% 100% at 50% 20%, var(--blanco), var(--bruma) 80%); }
.esc { display: block; width: 100%; height: 100%; }
.esc path, .esc rect, .esc circle, .esc ellipse { stroke-linecap: round; stroke-linejoin: round; }
.esc-esmalte { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.6; }
.esc-reflejo { fill: none; stroke: #fff; stroke-width: 4; }
.esc-encia { fill: url(#os-encia); }
.esc-raiz { fill: #e9dcc1; stroke: #c9b28a; stroke-width: 1.4; }
.esc .acento { fill: none; stroke: url(#icono-g); stroke-width: 2.4; }
/* Higiene */
.esc-placa { fill: #d6ae45; opacity: 0.9; }
.esc-chispa { opacity: 0; transform-box: fill-box; transform-origin: center; }
.esc-mango { fill: #dff1f7; stroke: var(--marino-800); stroke-width: 1.6; }
.esc-cabezal { fill: var(--blanco); stroke: var(--marino-800); stroke-width: 1.6; }
.esc-cerdas { fill: none; stroke: var(--azul-500); stroke-width: 2.4; }
.esc-burbuja { fill: rgb(255 255 255 / 0.7); stroke: var(--azul-500); stroke-width: 1.4; opacity: 0; }
/* Restauración */
.esc-caries { fill: #7b5137; opacity: 0.85; }
.esc-capa { fill: #fff; stroke: var(--azul-500); stroke-width: 1.6; opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; }
.esc-luz { fill: rgb(1 166 250 / 0.28); opacity: 0; }
.esc-lampara { transform-box: view-box; }
.esc-lampara-cuerpo { fill: none; stroke: var(--marino-800); stroke-width: 9; }
.esc-lampara-punta { fill: none; stroke: var(--azul-500); stroke-width: 6; }
.esc-brillo { fill: none; stroke: #fff; stroke-width: 4; stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.12; opacity: 0; }
/* Prevención y seguimiento */
.esc-reloj { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; stroke-dasharray: 2 7; }
.esc-escudo { fill: rgb(1 166 250 / 0.1); stroke: url(#icono-g); stroke-width: 2.2; transform-box: fill-box; transform-origin: center; }
.esc-aguja { transform-box: view-box; transform-origin: 140px 92px; }
.esc-aguja circle { fill: var(--cian-300); stroke: var(--blanco); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgb(17 234 222 / 0.8)); }
.esc-revision { transform-box: fill-box; transform-origin: center; }
.esc-revision circle { fill: var(--blanco); stroke: url(#icono-g); stroke-width: 2; }
.esc-revision path { fill: none; stroke: var(--turquesa-500); stroke-width: 2.4; }
/* Sin animación (movimiento reducido o fuera de pantalla): se ve el resultado de cada escena */
.esc-placa { opacity: 0; }
.esc--restauracion .esc-caries { opacity: 0; }
.esc--restauracion .esc-capa { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .gen-tarjetas:not(.bucle-activo) .esc-placa { opacity: 0.9; }
  .gen-tarjetas:not(.bucle-activo) .esc--restauracion .esc-caries { opacity: 0.85; }
  .gen-tarjetas:not(.bucle-activo) .esc--restauracion .esc-capa { opacity: 0; }
  /* Higiene: el cepillo cruza (0–55 %); cada mancha se limpia cuando pasa por su diente y salen destellos */
  .gen-tarjetas.bucle-activo .esc-cepillo { animation: esc-cepillo 6s ease-in-out infinite; }
  .gen-tarjetas.bucle-activo .esc-burbuja { animation: esc-burbuja 1.2s ease-out infinite; }
  .gen-tarjetas.bucle-activo .esc-burbuja--2 { animation-delay: 0.6s; }
  .gen-tarjetas.bucle-activo .esc-placa { animation: esc-placa 6s linear infinite backwards; animation-delay: calc(0.35s + var(--i) * 0.62s); }
  .gen-tarjetas.bucle-activo .esc-chispa { animation: esc-chispa 6s ease-in-out infinite; animation-delay: calc(0.5s + var(--i) * 0.62s); }
  /* Restauración: caries → dos capas → lámpara → brillo */
  .gen-tarjetas.bucle-activo .esc--restauracion .esc-caries { animation: esc-caries 7s ease-in-out infinite; }
  .gen-tarjetas.bucle-activo .esc-capa--1 { animation: esc-capa 7s var(--curva) infinite; }
  .gen-tarjetas.bucle-activo .esc-capa--2 { animation: esc-capa-2 7s var(--curva) infinite; }
  .gen-tarjetas.bucle-activo .esc-luz { animation: esc-luz 7s ease-in-out infinite; }
  .gen-tarjetas.bucle-activo .esc-lampara { animation: esc-lampara 7s ease-in-out infinite; }
  .gen-tarjetas.bucle-activo .esc--restauracion .esc-brillo { animation: esc-brillo 7s ease-out infinite; }
  /* Prevención: el escudo respira; la aguja da la vuelta y cada revisión se marca al pasar */
  .gen-tarjetas.bucle-activo .esc-escudo { animation: esc-escudo 3s ease-in-out infinite; }
  .gen-tarjetas.bucle-activo .esc-aguja { animation: gira 6s linear infinite; }
  .gen-tarjetas.bucle-activo .esc-revision { animation: esc-revision 6s ease-out infinite; animation-delay: calc(var(--i) * 2s); }
}
@keyframes esc-cepillo { 0% { transform: translateX(-30px); opacity: 0; } 6% { opacity: 1; } 55% { transform: translateX(200px); opacity: 1; } 62%, 100% { transform: translateX(200px); opacity: 0; } }
@keyframes esc-burbuja { 0% { opacity: 0; transform: translateY(4px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@keyframes esc-placa { 0% { opacity: 0.85; } 6% { opacity: 0; } 66% { opacity: 0; } 76%, 100% { opacity: 0.85; } }
@keyframes esc-chispa { 0%, 2% { opacity: 0; transform: scale(0.3); } 8% { opacity: 1; transform: scale(1.15); } 20% { opacity: 0; transform: scale(0.6); } 100% { opacity: 0; } }
@keyframes esc-caries { 0%, 22% { opacity: 0.85; } 30%, 94% { opacity: 0; } 100% { opacity: 0.85; } }
@keyframes esc-capa { 0%, 20% { opacity: 0; transform: scaleY(0.2); } 30%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes esc-capa-2 { 0%, 34% { opacity: 0; transform: scaleY(0.2); } 44%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes esc-luz { 0%, 48% { opacity: 0; } 54%, 68% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes esc-lampara { 0%, 42% { transform: translate(30px, -20px); opacity: 0; } 50%, 72% { transform: none; opacity: 1; } 80%, 100% { transform: translate(30px, -20px); opacity: 0; } }
@keyframes esc-brillo { 0%, 74% { stroke-dashoffset: 0.12; opacity: 0; } 76% { opacity: 1; } 88% { stroke-dashoffset: -1.15; opacity: 1; } 90%, 100% { stroke-dashoffset: -1.15; opacity: 0; } }
@keyframes esc-escudo { 0%, 100% { transform: scale(1); stroke-opacity: 0.7; } 50% { transform: scale(1.04); stroke-opacity: 1; } }
@keyframes esc-revision { 0% { transform: scale(0); opacity: 0; } 5% { transform: scale(1.25); opacity: 1; } 10% { transform: scale(1); } 90% { opacity: 1; } 100% { opacity: 0; transform: scale(0.8); } }
/* Derivación a otras áreas */
.gen-derivacion { display: flex; align-items: center; gap: 20px; margin-top: clamp(24px, 3vw, 36px); padding: 18px 24px; border-radius: var(--r-medio); background: var(--bruma); }
.gen-derivacion-iconos { display: flex; flex: none; }
.gen-derivacion-iconos .icono-tratamiento { width: 52px; height: 52px; padding: 6px; background: var(--blanco); box-shadow: 0 0 0 4px var(--bruma); }
.gen-derivacion-iconos .icono-tratamiento + .icono-tratamiento { margin-left: -10px; }
.gen-derivacion p { margin: 0; color: var(--tinta); }
.gen-derivacion a { color: var(--azul-700); font-weight: 650; text-decoration: underline; text-decoration-color: var(--linea-fuerte); text-underline-offset: 0.22em; }
.gen-derivacion a:hover { text-decoration-color: currentColor; }

/* Revisión anual (marino): el marcador da la vuelta al año, el anillo se completa y, al acercarse la cita, llega el aviso por WhatsApp */
.gen-anual-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.gen-anual h2 { margin-bottom: 22px; }
.gen-anual-visual { margin: 0; }
.gen-ano { display: block; width: 100%; max-width: 540px; height: auto; margin-inline: auto; overflow: visible; }
.gen-ano-fondo { fill: none; stroke: rgb(255 255 255 / 0.12); stroke-width: 6; }
.gen-ano-avance { fill: none; stroke: url(#hilo-g); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0.08; }
.gen-ano-meses circle { fill: var(--marino-950); stroke: rgb(255 255 255 / 0.45); stroke-width: 2; }
.gen-ano-cita { fill: none; stroke: var(--whatsapp); stroke-width: 2.5; }
.gen-ano-marcador { fill: #fff; stroke: var(--cian-300); stroke-width: 3; }
.gen-ano-giro { transform-box: view-box; transform-origin: 150px 150px; transform: rotate(330deg); }
.gen-ano-diente { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.gen-movil { fill: rgb(255 255 255 / 0.04); stroke: rgb(255 255 255 / 0.5); stroke-width: 2; }
.gen-movil-altavoz { stroke: rgb(255 255 255 / 0.35); stroke-width: 4; stroke-linecap: round; }
.gen-aviso-wa { transform-box: fill-box; transform-origin: center; }
.gen-aviso-wa rect { fill: #fff; }
.gen-aviso-icono { fill: var(--whatsapp); }
.gen-aviso-glifo { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.gen-aviso-linea { stroke: #c8d3dc; stroke-width: 5; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .gen-ano-giro { animation: gen-ano-giro 10s linear infinite; }
  .bucle-activo .gen-ano-avance { animation: gen-ano-avance 10s linear infinite; }
  .bucle-activo .gen-ano-cita { animation: gen-ano-cita 10s ease-in-out infinite; }
  .bucle-activo .gen-aviso-wa { animation: gen-aviso-wa 10s var(--curva) infinite; }
}
@keyframes gen-ano-giro { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes gen-ano-avance { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes gen-ano-cita { 0%, 76%, 100% { stroke-opacity: 0.4; stroke-width: 2.5; } 86%, 96% { stroke-opacity: 1; stroke-width: 4; } }
@keyframes gen-aviso-wa { 0%, 78% { opacity: 0; transform: translateY(-18px) scale(0.92); } 84%, 96% { opacity: 1; transform: none; } 100% { opacity: 0; transform: none; } }

@media (max-width: 900px) {
  .gen-hero .trat-hero-inner, .gen-cuidado-inner, .gen-anual-inner, .gen-tarjetas { grid-template-columns: minmax(0, 1fr); }
  .gen-tarjetas { max-width: 520px; }
  .gen-pasos { grid-template-columns: minmax(0, 1fr); --nodo: 64px; gap: 32px; }
  .gen-pasos::before { top: calc(var(--nodo) / 2); bottom: 40px; left: calc(var(--nodo) / 2 - 1px); width: 2px; height: auto; background: linear-gradient(#01a6fa, #11eade 60%, #01aeb6); }
  .gen-luz-via { display: none; }
  .gen-paso { display: grid; grid-template-columns: var(--nodo) minmax(0, 1fr); column-gap: 22px; }
  .gen-paso-nodo { grid-row: span 3; margin-bottom: 0; }
}
@media (max-width: 560px) {
  .gen-cuidado-texto { padding-left: 0; }
  .gen-derivacion { flex-direction: column; align-items: flex-start; }
}

/* ---------- Implantología (estructura modesta, decisión de Inma: plan §4.4) ---------- */
/* Hero: montaje. data-paso (0–3) lo cambia pieza-implante.js: cada parte baja a su sitio con su propio ritmo (el implante
   girando, el pilar con un pequeño golpe, la corona con un brillo). .despiece separa las partes y muestra los rótulos. */
.imp-boton { display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-medio); background: none; font: inherit; color: inherit; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.despiece .imp-boton { cursor: zoom-out; }
.imp-boton:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 6px; }
.imp-lienzo { position: relative; display: block; width: min(100%, 420px); margin-inline: auto; }
.imp-svg { display: block; width: 100%; height: auto; overflow: visible; transition: opacity 0.35s; }
.imp-raiz { fill: #e9dcc1; stroke: #c9b28a; stroke-width: 1.5; }
.imp-encia { fill: url(#os-encia); }
.imp-corona-vecina, .imp-corona-forma { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 2; stroke-linejoin: round; }
.imp-reflejo { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; }
.imp-metal { fill: url(#im-titanio); stroke: #5d6b78; stroke-width: 1.5; }
.imp-metal-pilar { fill: url(#im-pilar); }
.imp-contorno { fill: none; stroke: #5d6b78; stroke-width: 1.5; stroke-linejoin: round; }
.imp-rosca path { fill: none; stroke: #6f7d89; stroke-width: 2.4; stroke-linecap: round; }
.imp-brillo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.1 1.2; stroke-dashoffset: 0.12; opacity: 0; }
.imp-implante, .imp-pilar, .imp-corona { transition: transform 0.9s cubic-bezier(0.3, 0, 0.2, 1), opacity 0.4s; }
.imp-implante { transition-duration: 1.4s; }
/* Hueco vacío: las tres partes, arriba y transparentes */
[data-paso="0"] .imp-implante { transform: translateY(-120px); opacity: 0; }
[data-paso="0"] .imp-pilar, [data-paso="1"] .imp-pilar { transform: translateY(-80px); opacity: 0; }
[data-paso="0"] .imp-corona, [data-paso="1"] .imp-corona, [data-paso="2"] .imp-corona { transform: translateY(-110px); opacity: 0; }
.sin-transicion .imp-implante, .sin-transicion .imp-pilar, .sin-transicion .imp-corona { transition: none; }
.imp-rosca { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  /* el implante entra girando (la rosca avanza mientras baja) */
  .bucle-activo[data-paso="1"] .imp-rosca { animation: imp-rosca 0.35s linear 4; }
  .bucle-activo[data-paso="2"] .imp-pilar { animation: imp-golpe 0.9s cubic-bezier(0.3, 0, 0.2, 1); }
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-brillo { animation: orto-brillo 1.4s ease-out 0.8s 1; }
}
@keyframes imp-rosca { to { transform: translateY(16px); } }
@keyframes imp-golpe { 0% { transform: translateY(-80px); opacity: 0; } 70% { transform: translateY(3px); opacity: 1; } 85% { transform: translateY(-2px); } 100% { transform: none; } }
/* Despiece: las partes se separan (el implante se queda en el hueso) y aparecen las guías y los rótulos */
.despiece .imp-pilar { transform: translateY(-46px); }
.despiece .imp-corona { transform: translateY(-104px); }
.imp-guias { opacity: 0; transition: opacity 0.4s 0.3s; }
.imp-guias path { fill: none; stroke: var(--azul-700); stroke-width: 1.5; }
.imp-guias circle { fill: var(--azul-500); }
.despiece .imp-guias { opacity: 1; }
.imp-rotulo { position: absolute; left: 73.5%; transform: translateY(-50%); padding: 3px 9px; border-radius: 8px; background: var(--blanco); box-shadow: var(--sombra); font-size: 0.875rem; font-weight: 700; color: var(--marino-800); white-space: nowrap; opacity: 0; transition: opacity 0.35s 0.35s; }
/* posición = extremo de las guías (viewBox 0 -14 400 470): y del SVG + 14, entre 470 */
.imp-rotulo--corona { top: 18.3%; }
.imp-rotulo--pilar { top: 38.7%; }
.imp-rotulo--implante { top: 70.2%; }
.despiece .imp-rotulo { opacity: 1; }
.imp-montaje .pista { margin-top: 8px; }

/* Hero, vida ambiental: con el implante montado, un destello recorre el metal cada pocos segundos; al completarse el montaje,
   unas chispas alrededor de la corona (además del brillo de su contorno) */
.imp-barrido { fill: rgb(255 255 255 / 0.75); opacity: 0; }
.imp-chispas path { stroke: url(#icono-g); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-barrido { animation: imp-barrido 4.2s ease-in-out 1.8s infinite; }
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-chispas path { animation: imp-chispa 1.3s ease-out 0.9s 1 both; }
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-chispas path:nth-child(2) { animation-delay: 1.1s; }
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-chispas path:nth-child(3) { animation-delay: 1.25s; }
  .bucle-activo[data-paso="3"]:not(.despiece) .imp-chispas path:nth-child(4) { animation-delay: 1.4s; }
}
@keyframes imp-barrido { 0% { transform: translateX(-60px); opacity: 0; } 8% { opacity: 1; } 40% { transform: translateX(110px); opacity: 1; } 46%, 100% { transform: translateX(110px); opacity: 0; } }
@keyframes imp-chispa { 0% { opacity: 0; transform: scale(0.2) rotate(0deg); } 35% { opacity: 1; transform: scale(1.2) rotate(30deg); } 100% { opacity: 0; transform: scale(0.6) rotate(60deg); } }

/* Valoración y planificación: el hueco de la pieza perdida, que respira, unido a la función (mordida) y a la estética (sonrisa) */
.imp-objetivo { align-items: center; }
.imp-objetivo-marco { margin: clamp(28px, 4vw, 44px) 0 0; max-width: 440px; }
.imp-objetivo-svg { display: block; width: 100%; height: auto; overflow: visible; }
.io-encia { fill: url(#os-encia); }
.io-esmalte { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.7; stroke-linejoin: round; }
.io-reflejo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; }
.io-hueco { fill: rgb(1 166 250 / 0.06); stroke: var(--azul-500); stroke-width: 1.8; stroke-dasharray: 5 5; }
.io-chispa { fill: none; stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.io-guia { fill: none; stroke: var(--linea-fuerte); stroke-width: 1.6; stroke-dasharray: 3 5; }
.io-pulso { fill: none; stroke: url(#hilo-g); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.2 1; stroke-dashoffset: 0.2; opacity: 0; }
.io-insignia > circle { fill: var(--blanco); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.io-muela { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.7; stroke-linejoin: round; }
.io-muela-falta { fill: none; stroke: var(--azul-500); stroke-width: 1.6; stroke-dasharray: 3 3; stroke-linejoin: round; }
.io-labios { fill: #f2b8b0; stroke: #c47d74; stroke-width: 1.4; stroke-linejoin: round; }
.io-dientes { fill: #fff; stroke: var(--marino-800); stroke-width: 1.2; stroke-linejoin: round; }
.io-separa { fill: none; stroke: var(--marino-800); stroke-width: 1; opacity: 0.6; }
.io-falta { fill: #7a3f45; stroke: var(--azul-500); stroke-width: 1.2; stroke-dasharray: 2 2; }
.io-insignia .acento { fill: none; stroke: url(#icono-g); stroke-width: 2.4; stroke-linecap: round; }
.io-muela-arriba { transform-box: view-box; }
.io-destello { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .io-hueco { animation: io-hueco 3.6s ease-in-out infinite; }
  .bucle-activo .io-chispa { animation: ped-chispa 3.6s ease-in-out infinite; }
  .bucle-activo .io-pulso { opacity: 1; animation: imp-pulso 3.6s ease-in-out infinite; }
  .bucle-activo .io-pulso--2 { animation-delay: 1.8s; }
  .bucle-activo .io-destello { animation: ped-chispa 2.4s ease-in-out infinite; }
  .bucle-activo .io-muela-arriba { animation: io-muerde 1.8s ease-in-out infinite; }
  .bucle-activo .io-muela-falta, .bucle-activo .io-falta { animation: io-falta 1.8s ease-in-out infinite; }
}
@keyframes io-muerde { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(7px); } }
@keyframes io-falta { 0%, 100% { stroke-opacity: 0.45; } 45% { stroke-opacity: 1; } }
@keyframes io-hueco { 0%, 100% { fill-opacity: 0.4; stroke-dashoffset: 0; } 50% { fill-opacity: 1; stroke-dashoffset: -10; } }
@keyframes imp-pulso { 0% { stroke-dashoffset: 0.2; } 45%, 100% { stroke-dashoffset: -1; } }

/* El proceso: tres «radiografías» (pantallas oscuras) de la misma zona, una por paso, unidas por una línea con flechas */
.imp-proceso { background: var(--blanco); border-block: 1px solid var(--linea); }
.imp-proceso .bloque-hilo::after { background: var(--blanco); }
.imp-pasos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); margin: clamp(36px, 5vw, 60px) 0 0; padding: 0; list-style: none; }
.imp-paso { position: relative; }
.imp-paso:not(:last-child)::after { content: ""; position: absolute; top: calc((100% - 0px) * 0); right: calc(-1 * clamp(28px, 4vw, 56px)); width: clamp(28px, 4vw, 56px); height: 0; }
.imp-pantalla { position: relative; aspect-ratio: 10 / 7; overflow: hidden; border-radius: var(--r-tarjeta); background: radial-gradient(100% 90% at 50% 40%, #13324d, #071a2b); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08), 0 20px 40px -22px rgb(2 39 71 / 0.6); }
.imp-pantalla::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgb(255 255 255 / 0.03) 1px, transparent 1px) 0 0 / 100% 4px; pointer-events: none; }
.imp-paso:not(:last-child) .imp-pantalla::before { content: ""; position: absolute; z-index: 1; top: 50%; right: -1px; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--cian-300); box-shadow: 0 0 10px rgb(17 234 222 / 0.8); }
.rx { display: block; width: 100%; height: 100%; }
.rx-hueso { fill: #2a4a63; opacity: 0.55; }
.rx-trama { fill: none; stroke: rgb(255 255 255 / 0.12); stroke-width: 2; stroke-linecap: round; }
.rx-diente { fill: rgb(214 232 244 / 0.82); }
.rx-esmalte { fill: none; stroke: #fff; stroke-width: 3; opacity: 0.9; }
.rx-pulpa { fill: none; stroke: #2a4a63; stroke-width: 3; stroke-linecap: round; opacity: 0.8; }
.rx-corchete { fill: none; stroke: var(--cian-300); stroke-width: 2; stroke-linejoin: round; }
.rx-barrido { fill: var(--cian-300); opacity: 0.85; filter: drop-shadow(0 0 6px rgb(17 234 222 / 0.9)); }
.rx-plan { fill: rgb(17 234 222 / 0.08); stroke: var(--cian-300); stroke-width: 2; stroke-dasharray: 0.03 0.02; stroke-linejoin: round; }
.rx-cota { fill: none; stroke: #ffd27a; stroke-width: 1.6; stroke-linecap: round; }
.rx-cota-punto { fill: #ffd27a; }
.rx-implante { fill: #f2f6f9; stroke: #fff; stroke-width: 1; }
.rx-rosca { fill: none; stroke: #9fb1c1; stroke-width: 1.6; }
.rx-corona { fill: rgb(232 242 249 / 0.95); stroke: #fff; stroke-width: 2.5; }
.rx-check { transform-box: fill-box; transform-origin: center; }
.rx-check circle { fill: rgb(17 234 222 / 0.15); stroke: var(--cian-300); stroke-width: 2; }
.rx-check path { fill: none; stroke: var(--cian-300); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.imp-paso-num { display: block; margin: 20px 0 4px; font-family: var(--f-titular); font-size: 1.5rem; color: var(--azul-700); }
.imp-paso h3 { margin-bottom: 8px; }
.imp-paso p { margin: 0; color: var(--tinta-suave); }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .rx-barrido { animation: rx-barrido 3.2s ease-in-out infinite alternate; }
  .bucle-activo .rx-plan { animation: rx-plan 1.6s linear infinite; }
  .bucle-activo .rx-cota-punto { animation: respira 2s ease-in-out infinite; }
  .bucle-activo .rx-check { animation: rx-check 3s ease-in-out infinite; }
}
@keyframes rx-barrido { from { transform: translateY(0); } to { transform: translateY(150px); } }
@keyframes rx-plan { to { stroke-dashoffset: -0.05; } }
@keyframes rx-check { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.18); } 30% { transform: scale(1); } }

/* Atención coordinada (marino): la clínica (símbolo de la marca) con el paciente; el expediente viaja a cada área y vuelve,
   y el área se enciende al recibirlo. Ciclo de 9 s: laboratorio, radiología, cirugía. Rótulos: HTML sobre el SVG (440 × 360). */
.imp-coordinada-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.imp-coordinada h2 { margin-bottom: 22px; }
.imp-colab { margin: 0; }
.imp-colab-lienzo { position: relative; max-width: 500px; margin-inline: auto; }
.imp-colab-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ic-hilo { fill: none; stroke: rgb(255 255 255 / 0.22); stroke-width: 2; stroke-dasharray: 4 7; }
.ic-acomp { fill: none; stroke: var(--cian-300); stroke-width: 3; stroke-linecap: butt; } /* de borde a borde: el aro de la clínica acaba en y = 242 y el del paciente empieza en 282 */ /* color sólido: un degradado objectBoundingBox no se pinta en una línea recta vertical */
.ic-area circle:first-child { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.35); stroke-width: 1.8; }
.ic-area > :not(:first-child), .ic-paciente > :not(:first-child) { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-area .acento, .ic-paciente .acento { stroke: var(--cian-300); }
.ic-paciente > circle:first-child { fill: rgb(255 255 255 / 0.05); stroke: rgb(255 255 255 / 0.35); stroke-width: 1.8; }
.ic-clinica-aro { fill: none; stroke: url(#hilo-g); stroke-width: 3; }
.ic-clinica-fondo { fill: rgb(255 255 255 / 0.06); }
.ic-expediente { opacity: 0; transform: translate(220px, 190px); }
.ic-expediente rect { fill: var(--blanco); stroke: var(--cian-300); stroke-width: 2; }
.ic-expediente path { fill: none; stroke: var(--marino-800); stroke-width: 1.8; stroke-linecap: round; }
.ic-corazon { transform-box: fill-box; transform-origin: center; }
.imp-colab-rotulo { position: absolute; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.1); color: #fff; font-size: 0.8125rem; font-weight: 650; white-space: nowrap; }
.imp-colab-rotulo--lab { left: 19.1%; top: 37%; }
.imp-colab-rotulo--rx { left: 50%; top: 30%; }
.imp-colab-rotulo--cir { left: 80.9%; top: 37%; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ic-expediente { animation: ic-expediente 9s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
  .bucle-activo .ic-area--lab circle:first-child { animation: ic-lab 9s ease-in-out infinite; }
  .bucle-activo .ic-area--rx circle:first-child { animation: ic-rx 9s ease-in-out infinite; }
  .bucle-activo .ic-area--cir circle:first-child { animation: ic-cir 9s ease-in-out infinite; }
  .bucle-activo .ic-corazon { animation: corazon-late 3s ease-in-out infinite; }
}
@keyframes ic-expediente {
  0% { transform: translate(220px, 190px); opacity: 0; } 4% { opacity: 1; }
  16%, 22% { transform: translate(84px, 86px); } 33% { transform: translate(220px, 190px); }
  44%, 50% { transform: translate(220px, 62px); } 61% { transform: translate(220px, 190px); }
  72%, 78% { transform: translate(356px, 86px); } 89% { transform: translate(220px, 190px); opacity: 1; }
  95%, 100% { transform: translate(220px, 190px); opacity: 0; }
}
@keyframes ic-lab { 0%, 14%, 28%, 100% { stroke: rgb(255 255 255 / 0.35); fill: rgb(255 255 255 / 0.05); } 17%, 25% { stroke: var(--cian-300); fill: rgb(17 234 222 / 0.16); } }
@keyframes ic-rx { 0%, 42%, 56%, 100% { stroke: rgb(255 255 255 / 0.35); fill: rgb(255 255 255 / 0.05); } 45%, 53% { stroke: var(--cian-300); fill: rgb(17 234 222 / 0.16); } }
@keyframes ic-cir { 0%, 70%, 84%, 100% { stroke: rgb(255 255 255 / 0.35); fill: rgb(255 255 255 / 0.05); } 73%, 81% { stroke: var(--cian-300); fill: rgb(17 234 222 / 0.16); } }

@media (max-width: 900px) {
  .imp-pasos, .imp-coordinada-inner { grid-template-columns: minmax(0, 1fr); }
  .imp-pasos { max-width: 520px; }
  .imp-paso:not(:last-child) .imp-pantalla::before { display: none; }
}
@media (max-width: 560px) {
  .imp-colab-rotulo { font-size: 0.6875rem; padding: 2px 7px; }
}

/* ---------- Tratamientos (índice): página de orientación ---------- */
/* Hero «un diente, cinco cuidados»: anillo de cinco enlaces alrededor del diente. data-estado (pieza-indice.js) elige la capa:
   ortodoncia (se coloca y aparece el alineador), implantología (la raíz deja paso al implante), general (caries que se restaura),
   pediatría (diente de leche y definitivo debajo), endodoncia (interior y luz por los conductos). */
.ix-hero .trat-hero-inner { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
.ix-figura { position: relative; width: min(100%, 520px); aspect-ratio: 1; margin: 0 auto; }
.ix-anillo { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ix-anillo-base { fill: none; stroke: var(--linea-fuerte); stroke-width: 0.35; stroke-dasharray: 0.6 1.6; }
.ix-anillo-luz { transform-box: view-box; transform-origin: 50px 50px; transform: rotate(-18deg); transition: transform 0.9s var(--curva); }
.ix-anillo-luz path { fill: none; stroke: url(#hilo-g); stroke-width: 1.1; stroke-linecap: round; }
.ix-svg { position: absolute; left: 50%; top: 50%; width: 46%; height: auto; transform: translate(-50%, -53%); overflow: visible; }
.ix-enlace { --r: 44%; position: absolute; left: calc(50% + var(--r) * cos(var(--angulo))); top: calc(50% + var(--r) * sin(var(--angulo))); display: grid; place-items: center; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--blanco); box-shadow: inset 0 0 0 1.5px var(--linea), var(--sombra); transition: transform 0.3s var(--curva), box-shadow 0.3s; }
.ix-enlace .icono-tratamiento { width: 48px; height: 48px; padding: 4px; background: none; }
.ix-enlace.activo, .ix-enlace:hover { transform: scale(1.12); box-shadow: inset 0 0 0 2px var(--azul-500), 0 0 0 6px rgb(1 166 250 / 0.14), var(--sombra-alta); }
.ix-enlace:focus-visible { outline: 3px solid var(--azul-500); outline-offset: 4px; }
.ix-nombre { position: absolute; left: 50%; bottom: 1%; transform: translateX(-50%); margin: 0; padding: 6px 16px; border-radius: 999px; background: var(--blanco); box-shadow: var(--sombra); font-weight: 700; color: var(--marino-800); white-space: nowrap; }
.js .ix-nombre.no-js-oculto { display: block; }
/* Capas del diente */
.ix-entorno { opacity: 0.85; }
.ix-dentina { fill: #f4ead8; transition: fill-opacity 0.5s; }
.ix-esmalte { fill: url(#os-esmalte); transition: opacity 0.5s; }
.ix-contorno { fill: none; stroke: var(--marino-800); stroke-width: 2.2; stroke-linejoin: round; }
.ix-reflejo { fill: none; stroke: #fff; stroke-width: 7; stroke-linecap: round; }
.ix-pulpa { fill: #f2a79c; opacity: 0; transition: opacity 0.5s; }
.ix-conducto { fill: none; stroke: var(--cian-300); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 0.16 1; stroke-dashoffset: 0.16; opacity: 0; filter: drop-shadow(0 0 4px rgb(17 234 222 / 0.9)); }
.ix-caries { fill: #7b5137; opacity: 0; transition: opacity 0.4s; }
.ix-empaste { fill: #fff; stroke: var(--azul-500); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ix-alineador { fill: rgb(1 166 250 / 0.07); stroke: url(#hilo-g); stroke-width: 2.4; opacity: 0; transition: opacity 0.5s; }
.ix-objetivo { fill: none; stroke: var(--azul-500); stroke-width: 2; stroke-dasharray: 6 6; opacity: 0; }
.ix-implante { opacity: 0; transition: opacity 0.6s; }
.ix-metal { fill: #c6d0d8; }
.ix-rosca { fill: none; stroke: #7f8d99; stroke-width: 3.5; stroke-linecap: round; }
.ix-contorno-metal { fill: none; stroke: #5d6b78; stroke-width: 2; }
.ix-raiz { transition: opacity 0.6s; }
.ix-germen { opacity: 0; transition: opacity 0.6s; }
.ix-foliculo { fill: rgb(242 167 156 / 0.18); stroke: var(--cian-300); stroke-width: 2; stroke-dasharray: 4 6; }
.ix-germen-corona { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 2; }
.ix-chispas path { fill: none; stroke: url(#icono-g); stroke-width: 3.5; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ix-ped { transform-box: view-box; transform-origin: 200px 262px; transition: transform 0.7s var(--curva); }
.ix-orto { transform-box: view-box; transform-origin: 200px 300px; }
/* Estados */
[data-estado="ortodoncia"] .ix-alineador { opacity: 1; }
[data-estado="implantologia"] .ix-raiz { opacity: 0; }
[data-estado="implantologia"] .ix-implante { opacity: 1; }
[data-estado="general"] .ix-empaste { opacity: 1; }
[data-estado="pediatria"] .ix-ped { transform: scale(0.72); }
[data-estado="pediatria"] .ix-germen { opacity: 1; }
[data-estado="endodoncia"] .ix-dentina { fill-opacity: 0.5; }
[data-estado="endodoncia"] .ix-esmalte { opacity: 0.55; }
[data-estado="endodoncia"] .ix-pulpa { opacity: 0.9; }
@media (prefers-reduced-motion: no-preference) {
  /* cada estado tiene su gesto al entrar (las animaciones arrancan cuando el selector empieza a cumplirse) */
  [data-estado="ortodoncia"] .ix-orto { animation: ix-alinea 1.6s cubic-bezier(0.3, 0, 0.2, 1) both; }
  [data-estado="ortodoncia"] .ix-objetivo { animation: ix-objetivo 1.6s ease both; }
  [data-estado="ortodoncia"] .ix-alineador { animation: ix-aparece 1.6s ease both; }
  [data-estado="general"] .ix-caries { animation: ix-caries 1.6s ease both; }
  [data-estado="general"] .ix-empaste { animation: ix-empaste 1.6s var(--curva) both; }
  [data-estado="general"] .ix-chispas path { animation: ix-chispa 1.2s ease-out 1s both; }
  [data-estado="general"] .ix-chispas path:nth-child(2) { animation-delay: 1.15s; }
  [data-estado="general"] .ix-chispas path:nth-child(3) { animation-delay: 1.3s; }
  [data-estado="implantologia"] .ix-implante { animation: ix-sube 1.2s cubic-bezier(0.3, 0, 0.2, 1) both; }
  [data-estado="pediatria"] .ix-germen { animation: ix-germen 2.4s ease-in-out infinite alternate; }
  [data-estado="endodoncia"] .ix-conducto { opacity: 1; animation: mapa-luz 1.6s linear infinite; }
  [data-estado="endodoncia"] .ix-conducto--2 { animation-delay: 0.8s; }
  .bucle-activo .ix-anillo-luz path { animation: ix-respira 2.4s ease-in-out infinite; }
}
@keyframes ix-alinea { 0% { transform: translate(-16px, 4px) rotate(-11deg); } 15% { transform: translate(-16px, 4px) rotate(-11deg); } 70%, 100% { transform: none; } }
@keyframes ix-objetivo { 0%, 50% { opacity: 1; } 80%, 100% { opacity: 0; } }
@keyframes ix-aparece { 0%, 55% { opacity: 0; } 85%, 100% { opacity: 1; } }
@keyframes ix-caries { 0%, 30% { opacity: 0.85; } 55%, 100% { opacity: 0; } }
@keyframes ix-empaste { 0%, 30% { opacity: 0; transform: scale(0.3); } 60%, 100% { opacity: 1; transform: none; } }
@keyframes ix-chispa { 0% { opacity: 0; transform: scale(0.3); } 40% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(0.6); } }
@keyframes ix-sube { 0% { transform: translateY(60px); } 100% { transform: none; } }
@keyframes ix-germen { from { transform: translateY(6px); } to { transform: translateY(-6px); } }
@keyframes ix-respira { 0%, 100% { stroke-width: 1.1; } 50% { stroke-width: 1.7; } }

/* Ortodoncia destacada (marino): número grande, insignias y las arcadas de la simulación alineándose solas.
   --p registrado con @property para poder animarlo en CSS (sin @property queda en 1: el resultado). */
@property --p { syntax: "<number>"; inherits: true; initial-value: 1; }
.ix-orto-destacada { overflow: clip; background: radial-gradient(70% 90% at 80% 50%, #0d4673 0%, var(--marino-950) 62%); }
.ix-orto-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ix-num { display: block; font-family: var(--f-titular); font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem); line-height: 1; background: linear-gradient(135deg, #01a6fa, #11eade 60%, #01aeb6); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
@media (forced-colors: active) { .ix-num { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } }
.ix-orto-destacada h2 { margin: 6px 0 20px; font-size: clamp(2.6rem, 1.8rem + 3vw, 4.25rem); }
.ix-orto-destacada .ix-insignias { margin: 18px 0 28px; color: #fff; }
.ix-orto-escena { margin: 0; }
.ix-orto-pantalla { padding: clamp(18px, 3vw, 32px); border-radius: var(--r-medio); background: radial-gradient(90% 90% at 50% 35%, var(--blanco), var(--bruma)); box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1), 0 40px 80px -30px rgb(0 0 0 / 0.6), 0 0 90px -30px rgb(17 234 222 / 0.35); }
.ix-orto-pantalla .orto-svg { cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .ix-orto-escena.bucle-activo .orto-svg { animation: ix-p 9s ease-in-out infinite; }
}
@keyframes ix-p { 0%, 12% { --p: 0; } 58%, 88% { --p: 1; } 100% { --p: 0; } }

/* Resto de tratamientos: lista editorial. Cada fila es un enlace (el «Conocer…» se extiende a toda la fila) con la miniatura
   animada del dibujo de su página; al pasar, la fila se ilumina y la flecha avanza. */
.ix-areas-cabecera { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 56px); }
.ix-lista { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--linea); }
.ix-fila { position: relative; display: grid; grid-template-columns: 132px 80px minmax(0, 1fr) auto; gap: clamp(16px, 3vw, 40px); align-items: center; padding: 26px 18px; margin-inline: -18px; border-bottom: 1px solid var(--linea); border-radius: var(--r-tarjeta); transition: background-color 0.3s; }
.ix-fila:hover, .ix-fila:focus-within { background: var(--blanco); }
.ix-fila-mini { width: 132px; height: 132px; border-radius: 28px; background: radial-gradient(90% 90% at 50% 30%, var(--blanco), var(--bruma)); box-shadow: inset 0 0 0 1px var(--linea); overflow: hidden; transition: transform 0.4s var(--curva), box-shadow 0.3s; }
.ix-fila:hover .ix-fila-mini { transform: scale(1.05) rotate(-2deg); box-shadow: inset 0 0 0 1.5px rgb(1 166 250 / 0.35), var(--sombra); }
.ix-fila .ix-num { font-size: clamp(2.2rem, 1.8rem + 1.2vw, 3rem); }
.ix-fila-texto h3 { margin-bottom: 6px; font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem); }
.ix-fila-texto p { margin: 0; color: var(--tinta-suave); max-width: 40em; }
.ix-fila-enlace { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; color: var(--azul-700); text-decoration: none; white-space: nowrap; }
.ix-fila-enlace::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-tarjeta); }
.ix-fila-enlace span { transition: transform 0.3s var(--curva); }
.ix-fila:hover .ix-fila-enlace span { transform: translateX(5px); }
.ix-fila-enlace:focus-visible { outline: none; }
.ix-fila-enlace:focus-visible::after { outline: 3px solid var(--azul-500); outline-offset: 2px; }
/* Miniaturas */
.ix-mini { display: block; width: 100%; height: 100%; }
.ix-mini .m-esmalte, .ix-mini .m-vecina { fill: url(#os-esmalte); stroke: var(--marino-800); stroke-width: 1.4; stroke-linejoin: round; }
.ix-mini .m-encia, .ix-mini .m-encia-arco { fill: url(#os-encia); }
.ix-mini .m-hueso { fill: #ece5d9; }
.ix-mini .m-metal { fill: #c6d0d8; stroke: #5d6b78; stroke-width: 1.2; }
.ix-mini .m-rosca { fill: none; stroke: #7f8d99; stroke-width: 1.6; stroke-linecap: round; }
.ix-mini .m-check { fill: var(--cian-300); opacity: 0; transform-box: fill-box; transform-origin: center; }
.ix-mini .m-foliculo { fill: rgb(242 167 156 / 0.2); stroke: var(--cian-300); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ix-mini .m-dentina { fill: #f4ead8; }
.ix-mini .m-pulpa { fill: #f2a79c; }
.ix-mini .m-aro { fill: none; stroke: url(#arco-g); stroke-width: 2.4; }
.ix-mini .m-corona, .ix-mini .m-germen, .ix-mini .m-aro, .ix-mini .m-lente-forma { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .ix-lista.bucle-activo .m-corona { animation: ix-m-corona 4s cubic-bezier(0.3, 0, 0.2, 1) infinite; }
  .ix-lista.bucle-activo .m-check { animation: ix-m-check 4.8s ease-out infinite; animation-delay: calc(var(--i) * 0.4s); }
  .ix-lista.bucle-activo .m-germen { animation: ix-m-germen 3s ease-in-out infinite alternate; }
  .ix-lista.bucle-activo .m-aro, .ix-lista.bucle-activo .m-lente-forma { animation: ix-m-lente 4s ease-in-out infinite alternate; }
}
@keyframes ix-m-corona { 0%, 10% { transform: translateY(-30px); opacity: 0; } 40%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes ix-m-check { 0% { opacity: 0; transform: scale(0.2); } 8% { opacity: 1; transform: scale(1.4); } 14% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ix-m-germen { from { transform: translateY(6px); } to { transform: translateY(-4px); } }
@keyframes ix-m-lente { from { transform: translate(0, 0); } to { transform: translate(0, 52px); } }

/* Valoración individual: un punto de partida y cinco caminos; la luz recorre uno cada vez (ciclo de 12,5 s) y su destino se enciende */
.ix-valoracion-inner { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.ix-valoracion-texto { padding-left: 38px; margin-top: 24px; }
.ix-valoracion-texto .entrada { margin-bottom: 16px; }
.ix-camino-marco { margin: 0; }
.ix-camino { display: block; width: 100%; height: auto; overflow: visible; }
.ix-camino-base { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; stroke-dasharray: 3 6; }
.ix-camino-luz { fill: none; stroke: url(#hilo-g); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.22 1; stroke-dashoffset: 0.22; opacity: 0; }
.ix-camino-inicio circle { fill: var(--blanco); stroke: url(#icono-g); stroke-width: 2.5; }
.ix-camino-inicio rect, .ix-camino-inicio path { fill: none; stroke: var(--marino-800); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ix-camino-inicio .acento { stroke: url(#icono-g); }
.ix-camino-fin > circle { fill: var(--blanco); stroke: var(--linea-fuerte); stroke-width: 1.5; }
.ix-camino-fin .icono-tratamiento { padding: 0; background: none; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .ix-camino-luz { opacity: 1; animation: ix-camino 12.5s ease-in-out infinite backwards; animation-delay: calc(var(--i) * 2.5s); }
  .bucle-activo .ix-camino-fin > circle { animation: ix-destino 12.5s ease-in-out infinite; animation-delay: calc(var(--i) * 2.5s); }
}
@keyframes ix-camino { 0% { stroke-dashoffset: 0.22; } 16%, 100% { stroke-dashoffset: -1; } }
@keyframes ix-destino { 0%, 12%, 24%, 100% { stroke: var(--linea-fuerte); stroke-width: 1.5; } 15%, 21% { stroke: var(--azul-500); stroke-width: 3; } }

@media (max-width: 900px) {
  .ix-hero .trat-hero-inner, .ix-orto-inner, .ix-areas-cabecera, .ix-valoracion-inner { grid-template-columns: minmax(0, 1fr); }
  .ix-fila { grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "mini texto" "mini enlace"; row-gap: 10px; }
  .ix-fila-mini { grid-area: mini; width: 96px; height: 96px; border-radius: 22px; align-self: start; }
  .ix-fila .ix-num { display: none; }
  .ix-fila-texto { grid-area: texto; }
  .ix-fila-enlace { grid-area: enlace; white-space: normal; }
}
@media (max-width: 560px) {
  .ix-enlace { width: 52px; height: 52px; margin: -26px 0 0 -26px; }
  .ix-enlace .icono-tratamiento { width: 40px; height: 40px; }
  .ix-valoracion-texto { padding-left: 0; }
}

/* ---------- 404 «Completa la sonrisa» ---------- */
.pagina-404 { min-height: calc(100vh - var(--header-height) - 120px); display: grid; align-items: center; }
.pagina-404-inner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.pagina-404 h1 { margin-bottom: 20px; }
.pagina-404 .entrada { margin-bottom: 14px; }
.pagina-404-animo { margin: 0 0 30px; }
.pagina-404-mas { margin-top: 28px; }
.pagina-404-visual { text-align: center; }
.pagina-404-juego { flex-direction: column; align-items: center; }
.sonrisa-404 { width: 100%; max-width: 460px; margin-inline: auto; overflow: visible; }
.sonrisa-arco { fill: none; stroke: var(--linea-fuerte); stroke-width: 2; stroke-linecap: round; }
.sonrisa-diente { fill: #fff; stroke: var(--marino-700); stroke-width: 1.5; }
.sonrisa-veta { fill: none; stroke: var(--marino-700); stroke-width: 1; stroke-linecap: round; opacity: 0.2; }
.sonrisa-brillo-esmalte { fill: #fff; opacity: 0.75; }
.sonrisa-hueco-forma { fill: none; stroke: var(--azul-700); stroke-width: 1.5; stroke-dasharray: 3 4; transition: opacity 0.3s 0.1s; }
.sonrisa-hueco.llena .sonrisa-hueco-forma { opacity: 0; }
.sonrisa-brillo, .sonrisa-arco-brillo { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.06 1.2; stroke-dashoffset: 0.1; opacity: 0; }
.sonrisa-pieza { cursor: grab; touch-action: none; }
.sonrisa-pieza-flota { transform-box: fill-box; transform-origin: center; }
.sonrisa-pieza-forma { fill: #fff; stroke: var(--marino-800); stroke-width: 1.75; filter: drop-shadow(0 6px 8px rgb(2 39 71 / 0.18)); }
.sonrisa-pieza.arrastrando { filter: drop-shadow(0 10px 14px rgb(2 39 71 / 0.24)); }
.sonrisa-pieza.colocada { cursor: default; }
.sonrisa-pieza.colocada .sonrisa-pieza-forma { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .bucle-activo .sonrisa-pieza:not(.arrastrando):not(.colocada) .sonrisa-pieza-flota { animation: sonrisa-flota 6s ease-in-out infinite; }
  .sonrisa-brillo.encaja { animation: arcada-brillo 1s ease-out 1; }
  .sonrisa-arco-brillo.encaja { animation: arcada-brillo 1.6s ease-out 1; }
}
@keyframes sonrisa-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.colocar-pieza {
  margin-top: 18px; min-height: 48px; padding: 0 22px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid var(--linea-fuerte); color: var(--marino-800); font-weight: 650;
  background-color: var(--blanco); background-image: linear-gradient(var(--bruma), var(--bruma)); background-repeat: no-repeat; background-position: left center; background-size: 0% 100%;
  transition: background-size 0.4s var(--curva), border-color 0.25s;
}
.colocar-pieza:hover:not(:disabled) { background-size: 100% 100%; border-color: var(--marino-800); }
.colocar-pieza:disabled { opacity: 0.5; cursor: default; }
.estado-404 { min-height: 1.6em; margin: 10px 0 0; font-weight: 650; color: var(--azul-700); }
@media (max-width: 900px) { .pagina-404-inner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Revelado al hacer scroll ----------
   La clase revela-pendiente la pone el script en línea del <head> (solo con JS y movimiento permitido),
   así el bloque está oculto desde el primer pintado; site.js añade .revelado y anima la llegada. */
@media screen {
  .revela-pendiente [data-revela]:not(.revelado), .revela-pendiente [data-revela-grupo]:not(.revelado) > * { opacity: 0; }
  /* Entrada del hero: igual que data-revela-grupo, pero se dispara al cargar porque es lo primero que se ve */
  .revela-pendiente [data-entrada]:not(.revelado) > * { opacity: 0; }
}

/* ---------- Pausa, gama baja y reducción de movimiento ---------- */
.gama-baja .cinta-brillo { display: none; }
.pausado *, .pausado *::before, .pausado *::after { animation-play-state: paused !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .cinta-brillo { display: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1380px) {
  .header-phone .numero { display: none; }
}
@media (max-width: 1100px) {
  .main-nav {
    position: fixed; left: 0; right: 0; top: var(--header-height); z-index: 999;
    max-height: calc(100dvh - var(--header-height)); overflow-y: auto;
    padding: 12px var(--margen) 32px; background: var(--papel); border-top: 1px solid var(--linea); box-shadow: 0 20px 40px rgb(2 39 71 / 0.12);
    display: none; margin: 0;
  }
  .main-nav.is-mobile-open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list > li { border-bottom: 1px solid var(--linea); }
  .nav-list a, .nav-dropdown-toggle { width: 100%; min-height: 56px; padding: 0 4px; font-size: 1.125rem; justify-content: space-between; }
  .nav-list > li > a::after, .nav-dropdown-toggle::before { left: 4px; right: auto; width: 32px; bottom: 10px; }
  .nav-dropdown { position: static; min-width: 0; padding: 0 0 12px 12px; border: 0; box-shadow: none; display: none; opacity: 1; visibility: visible; transform: none; transition: none; }
  .nav-item-has-dropdown.is-open > .nav-dropdown { display: block; }
  .nav-dropdown a { min-height: 48px; font-size: 1.0625rem; }
  .language-preview { display: none; }
  .language-mobile { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 18px 4px 4px; font-size: var(--t-pequeno); color: var(--tinta-suave); }
  .language-mobile .language-label { width: 100%; font-weight: 700; color: var(--marino-800); }
  .language-mobile > span { display: inline-flex; align-items: center; gap: 6px; }
  .mobile-menu-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px;
    border: 1.5px solid var(--linea-fuerte); border-radius: 999px; background: var(--blanco); cursor: pointer;
    font-weight: 650; color: var(--marino-800); order: 3;
  }
  .header-inner { gap: 10px; }
  .brand { margin-right: auto; }
  .header-phone { order: 2; padding: 0 16px; }
}
@media (max-width: 900px) {
  .presentacion-inner, .tratamientos-cabecera, .tratamientos-rejilla, .experiencia-inner, .clinica-inner, .equipo-inner, .faq-inner, .trat-hero-inner, .proposito-inner, .recorrido-inner, .guia-inner, .cierre .contenedor { grid-template-columns: minmax(0, 1fr); }
  .portada-visual { max-width: 560px; margin-inline: auto; width: 100%; }
  .experiencia-cifra { padding: 0 0 8px; }
  .cifra-svg { width: min(100%, 300px); }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .js .recorrido-figura { top: calc(var(--header-height) + 8px); z-index: 2; background: var(--blanco); padding: 0 var(--margen) 8px; margin-inline: calc(-1 * var(--margen)); border-bottom: 1px solid var(--linea); }
  .recorrido-lienzo { max-width: 168px; }
  .recorrido-controles { margin-top: 6px; }
  .recorrido-controles button { min-height: 40px; padding: 0 12px; font-size: 0.9375rem; }
  .recorrido-progreso { margin-top: 10px; }
  .recorrido-estado { margin-top: 6px; }
  .recorrido-figura figcaption { display: none; }
  .fase-cabecera, .paso { --pad-paso: 18px; padding-block: var(--pad-paso) 40px; }
  .rotulo { font-size: 0.75rem; }
  .equipo-foto { max-width: 520px; }
  .lupa { width: min(100%, 320px); }
}
@media (max-width: 640px) {
  body { font-size: 1.0625rem; }
  .leyenda-ocular li { font-size: 0.8125rem; }
  .portada-visual { width: calc(100% + 2 * var(--margen)); max-width: none; margin-inline: calc(-1 * var(--margen)); }
  .brand-logo { height: 42px; }
  .compacta .brand-logo { height: 38px; }
  .header-inner { min-height: 72px; }
  .compacta .header-inner { min-height: 64px; }
  .header-phone { width: 46px; padding: 0; justify-content: center; }
  .header-phone .texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .acciones { flex-direction: column; align-items: stretch; }
  .boton { width: 100%; }
  .tira { grid-template-columns: repeat(3, 78%); grid-template-rows: auto; aspect-ratio: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; margin-right: calc(-1 * var(--margen)); }
  .tira figure { scroll-snap-align: start; }
  .tira .principal, .tira .secundaria { grid-row: auto; aspect-ratio: 4 / 5; }
  .tira figure:hover img { transform: none; }
  .datos-contacto { grid-template-columns: minmax(0, 1fr); }
  .footer-inner { grid-template-columns: minmax(0, 1fr); }
  .fila-tratamiento { grid-template-columns: 48px minmax(0, 1fr); }
  .fila-flecha { display: none; }
  .icono-tratamiento { width: 48px; height: 48px; }
  .faq-item > p { margin-right: 4px; }
  .whatsapp-float { padding: 0 14px; }
  .whatsapp-float .texto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---------- Alto contraste (Windows) ---------- */
@media (forced-colors: active) {
  .boton, .header-phone, .fila-flecha, .mobile-menu-toggle, .recorrido-controles button { border: 2px solid ButtonText; }
  .nav-list > li > a::after { background: Highlight; }
  .cifra-relleno, .cifra-relleno .cifra-mas { fill: CanvasText; } .cifra-luz, .cifra-contorno { display: none; }
  .cinta-detras { forced-color-adjust: none; }
}

/* ---------- Impresión ---------- */
@media print {
  .site-header, .whatsapp-float, .cinta-detras, .recorrido-controles { display: none !important; }
  .fase-cabecera, .paso { --pad-paso: 8px; padding-block: var(--pad-paso) 16px; }
  .js .recorrido-figura { position: static; }
  body { background: #fff; }
}
/* Números decorativos como contenido generado (no son texto: no cuentan para el contraste ni para los lectores de pantalla) */
.legal-num::before, .dudas-indice-num::before { content: attr(data-n); }