/* Implantica Studio · el ritual del baño termal
   Cámaras de piedra cálida (Brown Cedar) con fotos en marcos de esquinas suaves; el vapor se despeja hasta la sala de luz (Almond Clear). */

@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("../fonts/noto-sans-italic.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }

:root {
  --radio: clamp(18px, 1.7vw, 28px); /* marco de las fotos: esquinas suaves, sin arcos */
  --cedro: #3F312E;
  --cedro-2: #54423E;
  --cedro-3: #6B534F;
  --arena: #A28078;
  --rubor: #D8B5A1;
  --almendra: #EFE8DF;
  --almendra-2: #E6D3C5;
  --fondo: var(--cedro);
  --tinta: var(--almendra);
  --tinta-2: #D9C3B4;
  --linea: rgba(216, 181, 161, .28);
  --sombra: 30 22 20;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --ease-lento: cubic-bezier(.16, 1, .3, 1);
  --margen: clamp(1.25rem, 5vw, 5.5rem);
  --ancho: 1360px;
  color-scheme: dark;
}

/* La sala de luz: un único cambio deliberado al salir del ritual */
body.luz { --fondo: var(--almendra); --tinta: var(--cedro); --tinta-2: #6B534F; --linea: rgba(107, 83, 79, .22); color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Desplazamiento con inercia (Lenis): él lleva el ritmo, no el navegador */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body {
  margin: 0; min-height: 100dvh; overflow-x: clip;
  font-family: "Noto Sans", system-ui, sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.65;
  color: var(--tinta); background: var(--fondo);
  transition: background-color 1.6s var(--ease-lento), color 1.6s var(--ease-lento);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .22em; text-decoration-thickness: 1px; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
svg use, .nav-marca svg, .pie-marca svg, .pie-iso, .velo-iso, .form-listo-iso { fill: currentColor; }
::selection { background: var(--rubor); color: var(--cedro); }
:focus-visible { outline: 2px solid var(--rubor); outline-offset: 4px; border-radius: 6px; }
body.luz :focus-visible { outline-color: var(--cedro-3); }
html { scrollbar-color: var(--arena) var(--cedro); scrollbar-width: thin; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* Tipografía: Noto Sans Light grande y apretada; la marca habla bajito */
.titulo-xl { font-weight: 300; font-size: clamp(2.5rem, 5.1vw, 5.25rem); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.titulo-l { font-weight: 300; font-size: clamp(2.1rem, 3.8vw, 3.9rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.titulo-m { font-weight: 300; font-size: clamp(1.7rem, 2.6vw, 2.6rem); line-height: 1.12; letter-spacing: -.025em; text-wrap: balance; }

/* Botones en cápsula: almendra sobre piedra; secundario con trazo rubor */
.boton {
  --b-fondo: var(--almendra); --b-tinta: var(--cedro);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 3.25rem; padding: 0 1.7rem; border-radius: 999px; border: 0;
  background: var(--b-fondo); color: var(--b-tinta);
  font: 500 .98rem/1 "Noto Sans", sans-serif; letter-spacing: .005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 14px 30px -18px rgb(var(--sombra) / .9);
  transition: transform 160ms var(--ease-out), background-color 240ms ease, color 240ms ease, box-shadow 300ms var(--ease-out);
  overflow: hidden; isolation: isolate;
}
/* Al pasar, una luz tibia sube desde la base como el vapor */
.boton::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(120% 140% at 50% 120%, var(--rubor), transparent 60%);
  opacity: 0; transform: translateY(30%); transition: opacity 320ms var(--ease-out), transform 420ms var(--ease-out);
}
.boton:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .boton:hover::before { opacity: 1; transform: none; }
  .boton:hover { box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset, 0 18px 36px -16px rgb(var(--sombra) / .95); }
}
.boton-linea { --b-fondo: transparent; --b-tinta: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); }
.boton-linea::before { background: radial-gradient(120% 160% at 50% 130%, rgba(216, 181, 161, .28), transparent 65%); }
@media (hover: hover) and (pointer: fine) { .boton-linea:hover { box-shadow: inset 0 0 0 1px var(--rubor); } }
body.luz .boton { --b-fondo: var(--cedro); --b-tinta: var(--almendra); box-shadow: 0 14px 30px -18px rgb(var(--sombra) / .7); }
body.luz .boton::before { background: radial-gradient(120% 140% at 50% 120%, var(--cedro-3), transparent 60%); }

/* Navegación */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 40; height: 76px;
  display: flex; align-items: center; gap: 2.2rem; padding: 0 var(--margen);
  transition: background-color 400ms ease, box-shadow 400ms ease, transform 500ms var(--ease-out), color 1.1s var(--ease-io);
}
.nav.solida { background: color-mix(in srgb, var(--fondo) 82%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 1px 0 var(--linea); }
.nav-marca { display: block; width: 152px; color: var(--tinta); }
.nav-marca svg { display: block; width: 100%; height: auto; }
.nav-links { display: flex; gap: 2rem; margin-left: auto; }
.nav-links a { position: relative; font-size: .94rem; text-decoration: none; color: var(--tinta-2); transition: color 200ms ease; padding: .4rem 0; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover { color: var(--tinta); } .nav-links a:hover::after { transform: scaleX(1); transform-origin: left; } }
.nav-links a[aria-current="true"] { color: var(--tinta); }
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.boton-nav { min-height: 2.75rem; padding: 0 1.3rem; font-size: .9rem; }
.nav-menu { display: none; margin-left: auto; width: 46px; height: 46px; border: 0; border-radius: 999px; background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; place-items: center; align-content: center; gap: 6px; }
.nav-menu span:not(.sr) { display: block; width: 18px; height: 1.5px; background: currentColor; transition: transform 300ms var(--ease-out); }
.nav-menu[aria-expanded="true"] span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-menu[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
.menu-movil[hidden] { display: none; }
.menu-movil { position: fixed; inset: 0; z-index: 35; display: grid; align-content: center; gap: 1.1rem; padding: 6rem var(--margen) 3rem; background: var(--cedro); color: var(--almendra); }
.menu-movil a:not(.boton) { font-size: 2.2rem; font-weight: 300; letter-spacing: -.02em; text-decoration: none; }
.menu-movil .boton { justify-self: start; margin-top: 1rem; }
.menu-movil:not([hidden]) a { animation: entra 520ms var(--ease-out) both; }
.menu-movil a:nth-child(2) { animation-delay: 40ms; } .menu-movil a:nth-child(3) { animation-delay: 80ms; } .menu-movil a:nth-child(4) { animation-delay: 120ms; } .menu-movil a:nth-child(5) { animation-delay: 160ms; }
@keyframes entra { from { opacity: 0; transform: translateY(14px); } }

/* Vapor (WebGL) sobre las cámaras de piedra */
.vapor { position: fixed; inset: 0; z-index: 30; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0; transition: opacity 1.4s ease; }
.vapor.on { opacity: 1; }
body.luz .vapor { opacity: 0; }

/* Velo de entrada: el isotipo aparece desde el vapor */
.velo { position: fixed; inset: 0; z-index: 60; display: grid; place-content: center; justify-items: center; gap: 2rem; background: radial-gradient(60% 50% at 50% 46%, #54423E 0%, var(--cedro) 70%); color: var(--almendra); pointer-events: none; animation: velo-sale 900ms var(--ease-io) 2.05s forwards; }
.velo-marca { position: relative; width: 104px; height: 104px; display: grid; place-items: center; animation: velo-entra 1.2s var(--ease-lento) both; }
/* Anillo fino que se dibuja alrededor del isotipo */
.velo-anillo { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.velo-anillo circle { fill: none; stroke: var(--rubor); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .7; animation: velo-traza 1.9s var(--ease-io) .15s forwards; }
/* El isotipo gira suavemente mientras un brillo lo recorre */
.velo-giro { position: relative; width: 58px; aspect-ratio: 110 / 117; animation: velo-gira 2.4s cubic-bezier(.3, 0, .15, 1) both; }
.velo-iso { display: block; width: 100%; height: 100%; animation: velo-luz 2.4s ease-in-out both; }
.velo-brillo { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 246, 236, .95) 47%, rgba(216, 181, 161, .9) 53%, transparent 68%) 130% 0 / 320% 100% no-repeat;
  -webkit-mask: url(../img/implantica-isotipo.svg) center / contain no-repeat; mask: url(../img/implantica-isotipo.svg) center / contain no-repeat;
  animation: velo-brilla 1.5s var(--ease-io) .55s both; }
.velo-logo { width: 150px; height: auto; fill: currentColor; animation: velo-logo 1.1s var(--ease-lento) .5s both; }
@keyframes velo-entra { from { opacity: 0; transform: scale(.9); } }
@keyframes velo-traza { to { stroke-dashoffset: 0; } }
@keyframes velo-gira { from { opacity: 0; transform: rotate(-120deg) scale(.85); } 40% { opacity: 1; } to { transform: rotate(0deg) scale(1); } }
@keyframes velo-luz { 0%, 30% { filter: drop-shadow(0 0 0 rgba(216, 181, 161, 0)); } 65% { filter: drop-shadow(0 0 18px rgba(216, 181, 161, .55)); } 100% { filter: drop-shadow(0 0 8px rgba(216, 181, 161, .25)); } }
@keyframes velo-brilla { to { background-position: -30% 0; } }
@keyframes velo-logo { from { opacity: 0; transform: translateY(10px); letter-spacing: .2em; } }
@keyframes velo-sale { to { opacity: 0; visibility: hidden; transform: scale(1.03); } }
.js .velo.listo { animation-delay: 0s; }

/* ── Llegada ─────────────────────────────────────── */
.llegada {
  position: relative; overflow-x: clip; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: clamp(2rem, 5vw, 6rem);
  padding: 7.5rem var(--margen) clamp(2.5rem, 6vh, 4.5rem); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; isolation: isolate;
}

.llegada-texto { display: grid; gap: 1.6rem; padding-bottom: clamp(1rem, 6vh, 4rem); max-width: 46rem; }
.llegada .titulo-xl { font-size: clamp(2.4rem, 3.75vw, 4.4rem); }
.llegada-sub { max-width: 30rem; font-size: clamp(1.05rem, 1.25vw, 1.2rem); color: var(--tinta-2); }
.acciones { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.llegada-arco {
  position: relative; justify-self: end; width: min(36vw, 540px); height: min(80dvh, 820px); border-radius: var(--radio); overflow: hidden;
  box-shadow: 0 0 0 1px rgba(216, 181, 161, .18), 0 40px 80px -40px rgb(var(--sombra) / 1);
}
.llegada-arco img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 50%; transform: scale(1.08); transition: transform 2.4s var(--ease-lento); }
.llegada-arco::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(63, 49, 46, .25), transparent 30%, transparent 70%, rgba(63, 49, 46, .45)); pointer-events: none; }
.js .llegada-texto > * { opacity: 0; transform: translateY(18px); }
.cargada .llegada-texto > * { opacity: 1; transform: none; transition: opacity 900ms var(--ease-out), transform 1.1s var(--ease-out); }
.cargada .llegada-texto > :nth-child(2) { transition-delay: 90ms; } .cargada .llegada-texto > :nth-child(3) { transition-delay: 180ms; }
.js .llegada-arco { opacity: 0; transform: translateY(14px); filter: blur(10px); }
.cargada .llegada-arco { opacity: 1; transform: none; filter: none; transition: opacity 1.4s var(--ease-lento) 120ms, transform 1.8s var(--ease-lento) 120ms, filter 1.4s var(--ease-lento) 120ms; }
.cargada .llegada-arco img { transform: scale(1); }

/* ── El estudio ──────────────────────────────────── */
.estudio {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1.5rem clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(4rem, 9vh, 6.5rem) var(--margen) clamp(3rem, 6vh, 4.5rem); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
}
.estudio::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0; width: 100vw; height: 70%; transform: translateX(-50%); background: linear-gradient(180deg, rgba(84, 66, 62, 0), rgba(84, 66, 62, .7) 50%, #3F312E 100%); pointer-events: none; }
.estudio::after { content: ""; position: absolute; z-index: -1; left: calc(var(--margen) - 2rem); top: clamp(3rem, 8vh, 6rem); width: min(44vw, 620px); height: 78%; border: 1px solid rgba(216, 181, 161, .14); border-bottom: 0; -webkit-mask: linear-gradient(#000 60%, transparent); mask: linear-gradient(#000 60%, transparent); border-radius: calc(var(--radio) * 1.4) calc(var(--radio) * 1.4) 0 0; pointer-events: none; }
.estudio-texto { grid-column: 1 / 7; grid-row: 1; align-self: start; display: grid; gap: 1.5rem; padding-top: 2rem; }
.estudio-texto p { max-width: 34rem; color: var(--tinta-2); font-size: 1.12rem; }
.arco { position: relative; border-radius: var(--radio); overflow: hidden; background: var(--cedro-2); }
.arco img { width: 100%; height: 100%; object-fit: cover; }
.estudio-equipo { grid-column: 7 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 5; }
.estudio-equipo img { object-position: 45% 50%; }
.estudio-recepcion { grid-column: 3 / 6; grid-row: 2 / 4; aspect-ratio: 3 / 4; margin-top: 2rem; }
.estudio-frase { grid-column: 7 / 13; grid-row: 3; align-self: end; font-weight: 300; font-size: clamp(1.6rem, 2.4vw, 2.4rem); line-height: 1.15; letter-spacing: -.02em; padding-top: 1.75rem; border-top: 1px solid var(--linea); }
.estudio-frase em { font-style: italic; color: var(--rubor); }

/* ── Tu visita: un marco de esquinas suaves se abre y cada momento se funde lentamente en el siguiente ──
   Variables que pone el JS: --abre (0 puerta cerrada → 1 abierta) en la escena; --o, --velo, --zoom y --txt en cada momento. */
.ritual { position: relative; z-index: 0; height: 560vh; }
.ritual-escena {
  --ah: min(52dvh, 580px); --aw: calc(var(--ah) * .76); --atop: max(11dvh, 6rem);
  position: sticky; top: 0; height: 100dvh; overflow: hidden; background: radial-gradient(80% 60% at 50% 100%, #6B534F, #54423E 45%, #3F312E 85%);
}
.camara { position: absolute; inset: 0; opacity: var(--o, 0); will-change: opacity; }
.camara:first-of-type { opacity: var(--o, 1); }
/* El fondo es la misma foto, ampliada y desenfocada: envuelve sin que se note su tamaño */
.camara-fondo { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(22px) brightness(.5) saturate(.9); transform: scale(var(--zoom, 1.06)); opacity: var(--abre, 1); will-change: transform, opacity; }
.camara::after { content: ""; position: absolute; z-index: 1; inset: 0; opacity: var(--abre, 1); pointer-events: none;
  background: radial-gradient(70% 55% at 50% 42%, transparent 0%, rgba(40, 30, 28, .35) 70%, rgba(40, 30, 28, .7) 100%), linear-gradient(0deg, rgba(40, 30, 28, .92) 0%, rgba(40, 30, 28, .55) 24%, transparent 46%); }
/* La foto nítida vive en un gran marco al centro; al entrar es pequeño y se abre con suavidad */
.camara-arco {
  position: absolute; z-index: 2; left: 50%; top: var(--atop); width: var(--aw); height: var(--ah); margin: 0;
  border-radius: var(--radio); overflow: hidden; background: var(--cedro-2);
  box-shadow: 0 0 0 1px rgba(216, 181, 161, .22), 0 50px 100px -40px rgba(20, 14, 12, .85);
  transform-origin: 50% 100%;
  transform: translateX(-50%) translateY(calc((1 - var(--velo, 1)) * 26px - var(--sal, 0) * 34px)) scale(calc((.42 + .58 * var(--abre, 1)) * (.96 + .04 * var(--velo, 1)) * (1 - .05 * var(--sal, 0)) * (1 + .08 * var(--fin, 0))));
  will-change: transform;
}
/* La foto que entra se acerca despacio; la que sale sube y se oscurece bajo el fundido */
.camara-arco img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(var(--zoom, 1.06)); filter: brightness(calc(1 - .4 * var(--sal, 0))); }
/* Texto centrado bajo la foto */
.camara-texto {
  position: absolute; z-index: 3; left: 50%; top: calc(var(--atop) + var(--ah) + clamp(1rem, 3.2dvh, 2.25rem)); width: min(48rem, calc(100% - 2 * var(--margen)));
  display: grid; justify-items: center; gap: clamp(.55rem, 1.4dvh, .9rem); text-align: center; color: var(--almendra);
  transform: translateX(-50%);
}
/* Cada línea entra por separado, sin desenfoque: rótulo, título y frase */
.camara-texto > * { opacity: clamp(0, calc(var(--txt, 0) * 2.2 - var(--d, 0)), 1); transform: translateY(calc((1 - clamp(0, calc(var(--txt, 0) * 1.6 - var(--d, 0) * .5), 1)) * 22px)); }
.camara-texto > :nth-child(2) { --d: .45; }
.camara-texto > :nth-child(3) { --d: .9; }
.camara-kicker { display: inline-flex; align-items: center; gap: .8rem; font-size: .76rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--rubor); }
.camara-kicker .num { letter-spacing: .1em; opacity: .75; }
.camara-kicker .num::after { content: ""; display: inline-block; width: 2.2rem; height: 1px; margin-left: .8rem; vertical-align: middle; background: currentColor; opacity: .6; }
.camara-texto h3 { font-weight: 300; font-size: clamp(1.9rem, min(3.5vw, 6.2dvh), 3.7rem); line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; max-width: 18ch; text-shadow: 0 2px 24px rgba(30, 22, 20, .45); }
.camara-texto p:last-child { font-size: clamp(1rem, 1.15vw, 1.12rem); color: #E6D3C5; max-width: 34rem; text-wrap: pretty; }
/* Antes de abrir la puerta: el título de la sección, centrado sobre ella */
.ritual-intro {
  position: absolute; z-index: 20; left: 50%; top: calc(var(--atop) - 1rem); width: min(40rem, calc(100% - 2 * var(--margen)));
  display: grid; justify-items: center; gap: .9rem; text-align: center; color: var(--almendra);
  opacity: var(--intro, 1); transform: translateX(-50%) translateY(calc((1 - var(--intro, 1)) * -26px)); pointer-events: none;
}
.ritual-kicker { font-size: .76rem; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--rubor); }
.ritual-intro p:last-child { color: var(--tinta-2); font-size: 1.1rem; max-width: 26rem; }
/* Línea fina alrededor del marco: se dibuja a medida que avanzas por la visita */
.ritual-anillo { position: absolute; z-index: 10; left: 50%; top: calc(var(--atop) - 14px); width: calc(var(--aw) + 28px); height: calc(var(--ah) + 28px); overflow: visible; pointer-events: none;
  transform-origin: 50% calc(100% - 14px); transform: translateX(-50%) scale(calc(.42 + .58 * var(--abre, 1))); opacity: var(--abre, 1); }
.ritual-anillo path { fill: none; vector-effect: non-scaling-stroke; }
.ritual-anillo .pista { stroke: rgba(216, 181, 161, .14); stroke-width: 1; }
.ritual-anillo .trazo { stroke: var(--rubor); stroke-width: 1.25; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--prog, 0)); stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(216, 181, 161, .6)); }
/* Al terminar, la escena se disuelve en el mismo rubor con el que empieza la sección siguiente */
.ritual-salida { position: absolute; z-index: 30; inset: 0; pointer-events: none; opacity: calc(var(--fin, 0) * .35);
  background: radial-gradient(90% 70% at 50% 60%, #E0C6B5 0%, #D8B5A1 70%); }
.ritual-anillo, .ritual-guia { transition: none; }
/* Guía de los cinco momentos, a la derecha */
.ritual-guia {
  position: absolute; z-index: 20; right: var(--margen); top: 50%; transform: translateY(-50%); display: grid; gap: 1.1rem; justify-items: end;
  list-style: none; margin: 0; padding: 0; font-size: .8rem; letter-spacing: .04em; color: rgba(239, 232, 223, .5); opacity: var(--abre, 1);
}
.ritual-guia li { display: flex; align-items: center; gap: .8rem; transition: color 600ms ease; }
.ritual-guia li::after { content: ""; width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px currentColor; transition: background-color 600ms ease, transform 600ms var(--ease-out); }
.ritual-guia li.activa { color: var(--almendra); }
.ritual-guia li.activa::after { background: var(--rubor); box-shadow: none; transform: scale(1.4); }

/* ── Implantes (sala de luz) ─────────────────────── */
.implantes { position: relative; z-index: 1; margin-top: -70vh; isolation: isolate; padding: clamp(4rem, 8vh, 6rem) var(--margen) clamp(2.5rem, 5vh, 3.5rem); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; display: grid; gap: clamp(2rem, 4vh, 3rem); }
/* Niebla de entrada: el borde superior es un degradado largo y suave, así la sección cubre la escena anterior sin línea ni vacío */
.implantes::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -45vh; width: 100vw; height: calc(45vh + 75%); transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, rgba(216, 181, 161, 0) 0, rgba(216, 181, 161, .2) 9vh, rgba(216, 181, 161, .55) 20vh, rgba(216, 181, 161, .88) 32vh, #D8B5A1 42vh, #E0C6B5 calc(45vh + 18%), #E6D3C5 calc(45vh + 40%), rgba(239, 232, 223, 0) 100%); }
.kicker { font-size: .76rem; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--arena); }
.implantes-cab { display: grid; justify-items: center; gap: 1.1rem; text-align: center; max-width: 46rem; margin: 0 auto; }
.implantes-cab .titulo-l { max-width: 20ch; }
.implantes-lead { color: var(--tinta-2); font-size: clamp(1.02rem, 1.2vw, 1.15rem); max-width: 36rem; text-wrap: pretty; }
.implantes-plano { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 2.5rem clamp(1.5rem, 4vw, 4rem); align-items: center; }
.implantes-modelo { grid-column: 2; grid-row: 1 / 3; aspect-ratio: 4 / 5; background: var(--almendra-2); animation: flota 9s ease-in-out infinite, respira 9s ease-in-out infinite; }
.implantes-modelo img { translate: 0 calc(var(--par, 0) * -26px); scale: 1.1; }
@keyframes flota { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes respira { 0%, 100% { box-shadow: 0 30px 70px -40px rgb(var(--sombra) / .55), 0 0 0 0 rgba(216, 181, 161, 0); } 50% { box-shadow: 0 40px 90px -40px rgb(var(--sombra) / .45), 0 0 60px 6px rgba(216, 181, 161, .35); } }
.razones { display: contents; list-style: none; margin: 0; padding: 0; }
.razones li { position: relative; display: grid; gap: .45rem; padding-top: 1.1rem; max-width: 20rem; }
/* La línea de cada razón se dibuja al aparecer */
.razones li::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea); transform-origin: left; transform: scaleX(var(--linea-x, 1)); transition: transform 1.4s var(--ease-lento) .2s; }
.razones li:nth-child(n+3)::before { transform-origin: right; }
.js .razones li.revela { --linea-x: 0; } .js .razones li.revela.visto { --linea-x: 1; }
.razon-n { font-size: .74rem; font-weight: 600; letter-spacing: .24em; color: var(--arena); }
@media (hover: hover) and (pointer: fine) { .razones li h3 { transition: color 300ms ease, transform 400ms var(--ease-out); } .razones li:hover h3 { color: var(--arena); transform: translateX(4px); } .razones li:nth-child(n+3):hover h3 { transform: translateX(-4px); } }
.razones li:nth-child(1) { grid-column: 1; grid-row: 1; align-self: end; }
.razones li:nth-child(2) { grid-column: 1; grid-row: 2; align-self: start; }
.razones li:nth-child(3) { grid-column: 3; grid-row: 1; align-self: end; justify-self: end; }
.razones li:nth-child(4) { grid-column: 3; grid-row: 2; align-self: start; justify-self: end; }
.razones h3 { font-weight: 500; font-size: 1.15rem; letter-spacing: -.01em; }
.razones p { color: var(--tinta-2); font-size: 1rem; }

/* ── Detalles: carrusel de fotos; el del centro crece y muestra su nombre ── */
.detalles { padding: clamp(2.5rem, 5vh, 3.5rem) 0 clamp(3rem, 6vh, 4.5rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 3vh, 2.25rem); overflow: hidden; }
.detalles-cab { display: flex; align-items: end; justify-content: space-between; gap: 2rem; padding: 0 var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); width: 100%; margin: 0 auto; }
.detalles-cab .titulo-m { max-width: 22ch; }
.carrusel-ctrl { display: flex; gap: .6rem; flex: none; }
.carrusel-btn { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 999px; border: 0; background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1px var(--linea); cursor: pointer; transition: background-color 260ms ease, color 260ms ease, box-shadow 260ms ease, transform 160ms var(--ease-out), opacity 260ms ease; }
.carrusel-btn .ic { width: 1.2rem; height: 1.2rem; }
.carrusel-btn:active { transform: scale(.94); }
.carrusel-btn[disabled] { opacity: .35; cursor: default; }
@media (hover: hover) and (pointer: fine) { .carrusel-btn:not([disabled]):hover { background: var(--cedro); color: var(--almendra); box-shadow: none; } }
/* Anillo 3D: las fotos giran en 360°; el del frente manda y muestra su nombre */
.carrusel { --w: clamp(130px, 12.5vw, 215px); position: relative; height: calc(var(--w) * 4 / 3 + 3rem); perspective: 2200px; perspective-origin: 50% 30%; outline: none; touch-action: pan-y; cursor: grab; user-select: none; -webkit-user-select: none; overflow: hidden; }
.carrusel.arrastrando { cursor: grabbing; }
.carrusel-pista { position: absolute; left: 50%; top: 1.25rem; width: var(--w); height: calc(var(--w) * 4 / 3); margin: 0 0 0 calc(var(--w) / -2); padding: 0; list-style: none; transform-style: preserve-3d; }
.carrusel-item { position: absolute; inset: 0; transform: translate3d(var(--x, 0px), 0, var(--z, 0px)) rotateY(var(--ry, 0deg)); will-change: transform; cursor: pointer; }
.carrusel-item.atras { pointer-events: none; }
.carrusel-item figure { width: 100%; height: 100%; margin: 0; border-radius: var(--radio); overflow: hidden; background: var(--almendra-2); opacity: var(--o, 1); filter: brightness(var(--b, 1)); box-shadow: 0 30px 60px -36px rgb(var(--sombra) / .8); transition: opacity 200ms linear; }
.carrusel-item img { pointer-events: none; -webkit-user-drag: none; }
.carrusel-pie { display: none; }
.carrusel:focus-visible .carrusel-item.activo figure { outline: 2px solid var(--cedro-3); outline-offset: 6px; }
.carrusel-nombre { min-height: 1.6em; text-align: center; font-size: .78rem; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--tinta-2); transition: opacity 400ms ease, transform 500ms var(--ease-out); }
.carrusel-nombre.cambia { opacity: 0; transform: translateY(6px); }
@media (prefers-reduced-motion: reduce) { .carrusel-nombre { transition: none; } }

/* ── Visítanos ───────────────────────────────────── */
.visitanos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 6vw, 7rem); padding: clamp(3.5rem, 7vh, 5rem) var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto; align-items: start; }
.visitanos { position: relative; isolation: isolate; }
.visitanos::before { content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: 100vw; height: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(50% 40% at 18% 20%, rgba(216, 181, 161, .38), transparent 70%), radial-gradient(40% 40% at 85% 75%, rgba(162, 128, 120, .16), transparent 70%); }
.visitanos-cab { grid-column: 1 / -1; position: relative; display: grid; justify-items: center; gap: 1.1rem; text-align: center; padding-bottom: clamp(1rem, 3vh, 2rem); }
.visitanos-cab .titulo-xl em { font-style: italic; font-weight: 300; color: var(--arena); }
.visitanos-intro { max-width: 36rem; color: var(--tinta-2); font-size: clamp(1.05rem, 1.25vw, 1.2rem); text-wrap: pretty; }
/* Isotipo grande de fondo que gira muy despacio */
.visitanos-iso { position: absolute; z-index: -1; top: 50%; left: 50%; width: clamp(220px, 26vw, 380px); height: auto; translate: -50% -50%; color: var(--rubor); opacity: .16; animation: gira-lento 60s linear infinite; }
@keyframes gira-lento { to { rotate: 360deg; } }
.visitanos-form { display: grid; gap: 1.25rem; }
/* La tarjeta de reserva: superficie clara elevada, con borde fino y luz suave */
.tarjeta-cita { position: relative; display: grid; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.75rem); border-radius: 32px; background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(251, 246, 240, .55)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px var(--linea), 0 50px 100px -60px rgb(var(--sombra) / .7); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); overflow: hidden; }
.tarjeta-cita::before { content: ""; position: absolute; top: -40%; right: -30%; width: 70%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(216, 181, 161, .35), transparent 70%); pointer-events: none; animation: deriva 14s ease-in-out infinite alternate; }
@keyframes deriva { to { translate: -30% 25%; } }
.tarjeta-cab { position: relative; display: grid; gap: .5rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--linea); }
.tarjeta-cab h3 { font-weight: 300; font-size: clamp(1.5rem, 2vw, 1.9rem); letter-spacing: -.02em; }
.tarjeta-cita .form { margin-top: 0; }
.atajos { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; padding: 0 .5rem; font-size: .92rem; color: var(--tinta-2); }
.atajo { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--linea); color: var(--cedro); text-decoration: none; font-weight: 500; transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, transform 300ms var(--ease-out); }
.atajo .ic { width: 1.05rem; height: 1.05rem; }
@media (hover: hover) and (pointer: fine) { .atajo:hover { background: var(--cedro); color: var(--almendra); box-shadow: none; transform: translateY(-2px); } }
.visitanos-sub { color: var(--tinta-2); max-width: 32rem; font-size: 1rem; }
.form { display: grid; gap: 1.25rem; margin-top: 1rem; }
.campo { display: grid; gap: .45rem; min-width: 0; border: 0; margin: 0; padding: 0; }
.campo-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.campo label, .campo legend { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); padding: 0; transition: color 300ms ease; }
.campo:focus-within label { color: var(--cedro); }
.campo label span { font-weight: 400; letter-spacing: .05em; text-transform: none; color: var(--tinta-2); }
/* Campos de línea: una línea fina que se ilumina de lado a lado al escribir */
.campo input, .campo textarea {
  width: 100%; min-height: 3rem; padding: .7rem 0 .75rem; border: 0; border-radius: 0; background: transparent;
  background-image: linear-gradient(var(--cedro-3), var(--cedro-3)), linear-gradient(rgba(107, 83, 79, .3), rgba(107, 83, 79, .3));
  background-size: 0 1.5px, 100% 1px; background-position: 0 100%, 0 100%; background-repeat: no-repeat;
  font: 400 1.05rem/1.4 "Noto Sans", sans-serif; color: var(--cedro); caret-color: var(--cedro-3); transition: background-size 600ms var(--ease-lento);
}
.campo textarea { resize: vertical; min-height: 5.5rem; }
.campo input::placeholder, .campo textarea::placeholder { color: #9A8580; }
.campo input:focus, .campo textarea:focus { outline: none; background-size: 100% 1.5px, 100% 1px; }
.campo [aria-invalid="true"] { background-image: linear-gradient(#A1453A, #A1453A), linear-gradient(#A1453A, #A1453A); background-size: 100% 1.5px, 100% 1px; }
.error { min-height: 0; color: #9A3F35; font-size: .86rem; }
.error:empty { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem; }
.chips label { cursor: pointer; }
.chips label { position: relative; }
.chips input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 2.6rem; padding: 0 1.15rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(107, 83, 79, .32); font-size: .94rem; transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 160ms var(--ease-out); }
.chips label:active span { transform: scale(.97); }
.chips input:checked + span { background: var(--cedro); color: var(--almendra); box-shadow: none; }
.chips input:focus-visible + span { outline: 2px solid var(--cedro-3); outline-offset: 3px; }
.boton-enviar { position: relative; overflow: hidden; justify-self: start; margin-top: .5rem; min-width: 15rem; gap: .8rem; }
.boton-enviar .ic { width: 1.1rem; height: 1.1rem; transition: translate 500ms var(--ease-out); }
/* Un brillo cruza el botón al pasar el mouse */
.boton-enviar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 246, 236, .35) 50%, transparent 70%); translate: -120% 0; transition: translate 900ms var(--ease-lento); pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .boton-enviar:hover::after { translate: 120% 0; } .boton-enviar:hover .ic { translate: 5px 0; } }
.boton-enviar[aria-busy="true"] span { opacity: .55; filter: blur(1px); }
.form-listo { display: grid; gap: 1rem; justify-items: start; padding: 2rem; border-radius: 28px; background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 1px var(--linea); animation: entra 600ms var(--ease-out) both; }
.form-listo:focus { outline: none; }
.form-listo-iso { width: 44px; height: auto; color: var(--cedro-3); }
.form-listo h3 { font-weight: 300; font-size: 2rem; letter-spacing: -.02em; }
.form-listo p { color: var(--tinta-2); max-width: 30rem; }
.visitanos-lugar { display: grid; gap: 2rem; position: sticky; top: 6.5rem; }
.mapa { aspect-ratio: 4 / 4.4; background: var(--almendra-2); box-shadow: 0 30px 60px -40px rgb(var(--sombra) / .8); }
/* Mapa ilustrado */
.mapa-ilustrado { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mapa-calle { font: 600 9px/1 "Noto Sans", sans-serif; letter-spacing: .32em; fill: #8C6A60; }
.mapa-zona { font: 600 11px/1 "Noto Sans", sans-serif; letter-spacing: .42em; fill: #A28078; }
.mapa-norte text { font: 600 9px/1 "Noto Sans", sans-serif; fill: #8C6A60; }
.mapa-ruta { stroke: #3F312E; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 8; stroke-dashoffset: 0; opacity: .75; animation: ruta-corre 1.6s linear infinite; }
@keyframes ruta-corre { to { stroke-dashoffset: -20; } }
.mapa-halo { fill: none; stroke: #A28078; stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: halo 3s var(--ease-out) infinite; }
.mapa-halo.h2 { animation-delay: 1.5s; }
@keyframes halo { from { transform: scale(1); opacity: .8; } to { transform: scale(2.6); opacity: 0; } }
.mapa-marca { transition: transform 1s var(--ease-lento); }
/* El marcador cae suavemente cuando el mapa aparece */
.js .mapa.revela-arco .mapa-marca > circle:not(.mapa-halo), .js .mapa.revela-arco .mapa-marca use { opacity: 0; transform: translateY(-18px); transition: opacity .8s ease .9s, transform 1.1s var(--ease-lento) .9s; }
.js .mapa.revela-arco.visto .mapa-marca > circle:not(.mapa-halo), .js .mapa.revela-arco.visto .mapa-marca use { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .mapa:hover .mapa-ilustrado { scale: 1.03; } }
.mapa-ilustrado { transition: scale 1.6s var(--ease-lento); }
.mapa-acciones { position: absolute; left: 50%; bottom: 1.25rem; translate: -50% 0; display: flex; gap: .5rem; }
.mapa-boton { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.15rem; border-radius: 999px; background: rgba(63, 49, 46, .9); color: var(--almendra); font-size: .84rem; font-weight: 500; letter-spacing: .03em; text-decoration: none; white-space: nowrap; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color 300ms ease, transform 300ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .mapa-boton:hover { background: var(--cedro); transform: translateY(-2px); } }
@keyframes pulso { from { transform: scale(1); opacity: .8; } to { transform: scale(3.2); opacity: 0; } }
.datos { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.4rem 1.5rem; }
.datos div { position: relative; display: grid; gap: .3rem; padding-top: .9rem; }
.datos div::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--linea); transform-origin: left; transform: scaleX(var(--linea-x, 1)); transition: transform 1.3s var(--ease-lento) .15s; }
.js .datos div.revela { --linea-x: 0; } .js .datos div.revela.visto { --linea-x: 1; }
.como-llegar { display: inline-block; margin-top: .35rem; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--cedro-3); }
.datos dt { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-2); }
.datos dd { font-size: .98rem; }
.datos a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 380ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .datos a:hover { background-size: 100% 1px; } }

/* ── Pie ─────────────────────────────────────────── */
.pie { position: relative; overflow: hidden; display: grid; gap: 2rem; padding: clamp(3.5rem, 8vh, 5rem) var(--margen) 2rem; background: var(--cedro); color: var(--almendra); }
.pie-iso { position: absolute; right: -4vw; top: -6vw; width: min(46vw, 560px); height: auto; color: rgba(216, 181, 161, .07); pointer-events: none; }
.pie-fila { position: relative; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 2rem; max-width: var(--ancho); width: 100%; margin: 0 auto; }
.pie-marca { display: block; width: min(420px, 70vw); color: var(--almendra); }
.pie-marca svg { display: block; width: 100%; height: auto; }
.pie-links { display: flex; flex-wrap: wrap; gap: .6rem 1.8rem; font-size: .95rem; }
.pie-links a { display: inline-flex; align-items: center; gap: .45rem; text-decoration: none; color: #D9C3B4; transition: color 200ms ease; }
@media (hover: hover) and (pointer: fine) { .pie-links a:hover { color: var(--almendra); } }
.pie-legal { position: relative; max-width: var(--ancho); width: 100%; margin: 0 auto; padding-top: 1.5rem; border-top: 1px solid rgba(216, 181, 161, .2); font-size: .84rem; color: #BFA79A; }

/* WhatsApp siempre a mano, sin interrumpir */
.wa-flotante {
  position: fixed; z-index: 38; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
  display: inline-flex; align-items: center; gap: .55rem; min-height: 3.25rem; padding: 0 1.25rem 0 1.05rem; border-radius: 999px;
  background: var(--almendra); color: var(--cedro); font: 500 .92rem/1 "Noto Sans", sans-serif; text-decoration: none;
  box-shadow: 0 18px 40px -18px rgb(var(--sombra) / .95), inset 0 0 0 1px rgba(63, 49, 46, .08);
  transform: translateY(calc(100% + 3rem)); transition: transform 600ms var(--ease-out), background-color 1.1s var(--ease-io), color 1.1s var(--ease-io);
}
.wa-flotante.ver { transform: none; }
.wa-flotante:active { transform: scale(.97); }
body.luz .wa-flotante { background: var(--cedro); color: var(--almendra); }
body .wa-flotante.sobre-pie { background: var(--almendra); color: var(--cedro); }

/* Revelados al entrar en pantalla (el contenido es visible si no hay JS) */
.js .revela { opacity: 0; transform: translateY(22px); transition: opacity 1.2s var(--ease-lento), transform 1.4s var(--ease-lento); }
.js .revela.visto { opacity: 1; transform: none; }
.js .revela-arco { opacity: 0; transform: translateY(18px); filter: blur(8px); transition: opacity 1.3s var(--ease-lento), transform 1.6s var(--ease-lento), filter 1.3s var(--ease-lento); }
.js .revela-arco.visto { opacity: 1; transform: none; filter: none; }
.js .revela-arco img { transform: scale(1.06); transition: transform 2.2s var(--ease-lento); }
.js .revela-arco.visto img { transform: none; }
.js .razones li.revela:nth-child(-n+2) { transform: translateX(-28px); } .js .razones li.revela:nth-child(n+3) { transform: translateX(28px); } .js .razones li.revela.visto { transform: none; }
.form > .revela:nth-child(2) { transition-delay: 70ms; } .form > .revela:nth-child(3) { transition-delay: 140ms; } .form > .revela:nth-child(4) { transition-delay: 210ms; } .form > .revela:nth-child(5) { transition-delay: 280ms; } .form > .revela:nth-child(6) { transition-delay: 350ms; } .form > .revela:nth-child(7) { transition-delay: 420ms; } .form > .revela:nth-child(8) { transition-delay: 490ms; }
.datos .revela:nth-child(2) { transition-delay: 90ms; } .datos .revela:nth-child(3) { transition-delay: 180ms; } .datos .revela:nth-child(4) { transition-delay: 270ms; }
.razones li.revela:nth-child(2) { transition-delay: 80ms; } .razones li.revela:nth-child(3) { transition-delay: 160ms; } .razones li.revela:nth-child(4) { transition-delay: 240ms; }

/* ── Adaptación ──────────────────────────────────── */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .boton-nav { margin-left: auto; }
}
@media (max-width: 860px) {
  .nav { height: 66px; gap: 1rem; }
  .nav-marca { width: 124px; }
  .boton-nav { display: none; }
  .nav-menu { display: grid; }
  .llegada { grid-template-columns: minmax(0, 1fr); align-items: start; padding-top: 5.5rem; gap: 2rem; }
  .llegada { padding-top: 5rem; gap: 1.4rem; min-height: auto; padding-bottom: 3rem; }
  .llegada-arco { order: -1; justify-self: center; width: min(100%, 24rem); height: auto; aspect-ratio: 3 / 4; max-height: 60dvh; }
  .llegada-texto { padding-bottom: 0; gap: 1.1rem; }
  .llegada .titulo-xl { font-size: clamp(2.1rem, 9vw, 2.6rem); }
  .estudio { grid-template-columns: minmax(0, 1fr); }
  .estudio-texto, .estudio-equipo, .estudio-recepcion, .estudio-frase { grid-column: 1; grid-row: auto; }
  .estudio-equipo { aspect-ratio: 4 / 4.6; }
  .estudio-recepcion { width: 62%; justify-self: end; margin-top: -4rem; }
  .carrusel { --w: 24vw; perspective: 1300px; }
  .carrusel-ctrl { display: none; }
  /* Tu visita en celular: foto más angosta arriba, texto centrado abajo y la guía en una fila de puntos */
  .ritual-escena { --aw: min(72vw, calc(44dvh * .77)); --ah: calc(var(--aw) * 1.3); --atop: 7.25rem; }
  .ritual-intro { top: 6rem; }
  .ritual-guia { top: 5.1rem; right: auto; left: 50%; transform: translateX(-50%); display: flex; gap: .55rem; }
  .ritual-guia li span { display: none; }
  .ritual-guia li::after { width: 6px; height: 6px; }
  .camara-texto { gap: .55rem; }
  .camara-texto h3 { font-size: clamp(1.75rem, 7.6vw, 2.35rem); }
  .camara-kicker { font-size: .7rem; letter-spacing: .26em; }
  .implantes-plano { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .implantes-modelo { grid-column: 1 / -1; grid-row: 1; aspect-ratio: 4 / 4.2; }
  .razones li:nth-child(n) { grid-column: auto; grid-row: auto; justify-self: stretch; align-self: start; }
  .visitanos { grid-template-columns: minmax(0, 1fr); }
  .visitanos-lugar { position: static; }
}
@media (max-width: 560px) {
  .campo-par { grid-template-columns: minmax(0, 1fr); }
  .implantes-plano { grid-template-columns: minmax(0, 1fr); }
  .datos { grid-template-columns: minmax(0, 1fr); }
  .acciones { flex-wrap: wrap; }
  .acciones .boton { flex: 1 1 auto; justify-content: center; }
  .wa-flotante span { display: none; }
  .pie-legal { padding-right: 4.5rem; }
  .wa-flotante { padding: 0; width: 3.25rem; justify-content: center; }
}

/* Movimiento reducido: la visita se recorre como una sucesión de fotos, sin fundidos ni vapor */
@media (prefers-reduced-motion: reduce) {
  .ritual { height: auto; }
  .implantes { margin-top: 0; }
  .ritual-escena { position: relative; height: auto; display: grid; gap: 3.5rem; padding: 5rem var(--margen); }
  .ritual-intro, .camara, .camara-arco, .camara-texto { position: relative; inset: auto; left: auto; top: auto; bottom: auto; opacity: 1; transform: none; filter: none; }
  .camara { display: grid; justify-items: center; gap: 1.75rem; }
  .ritual-intro, .camara-texto { justify-self: center; }
  .camara-fondo, .camara::after, .ritual-guia, .ritual-anillo, .ritual-salida { display: none; }
  .camara-texto > * { opacity: 1; transform: none; }
  .camara-arco img { transform: none; }
  .js .revela, .js .revela-arco, .js .llegada-texto > *, .js .llegada-arco { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
  .velo { animation-duration: 1ms; animation-delay: 0s; }
  .velo *, .implantes-modelo, .visitanos-iso, .tarjeta-cita::before, .mapa-ruta, .mapa-halo { animation: none !important; }
  .vapor { display: none; }
}

/* ══ Fotos tipo banner ══════════════════════════════════════════════════════════
   Cada foto se muestra completa y se funde con el fondo por sus bordes; el texto queda
   siempre en la zona libre, nunca encima de la foto. Las fotos de objetos van en círculo. */
.llegada-arco, .banner-der .banner-foto {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.banner-izq .banner-foto {
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 42%, #000 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 16%, #000 76%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* Portada: la sala de espera a la derecha, a toda la altura; el texto a la izquierda */
.llegada { grid-template-columns: minmax(0, 1fr); }
.llegada-texto { position: relative; z-index: 1; max-width: 40rem; }
.llegada-arco {
  position: absolute; z-index: 0; top: 0; right: var(--margen); bottom: 0; justify-self: auto; margin: 0;
  width: auto; height: 100%; aspect-ratio: 3 / 4; max-width: 58%; border-radius: 0; box-shadow: none;
}
.llegada-arco::after { display: none; }

/* Franjas: la foto ocupa un lado a toda la altura; el texto, el otro */
.banner {
  position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; gap: 0 clamp(1rem, 2.5vw, 2.5rem);
  min-height: min(86vh, 860px); padding: clamp(3rem, 7vh, 5rem) var(--margen); max-width: calc(var(--ancho) + 2 * var(--margen)); margin: 0 auto;
}
.banner-foto { position: absolute; z-index: -1; top: 0; bottom: 0; height: 100%; width: auto; aspect-ratio: 3 / 4; max-width: 60%; margin: 0; overflow: hidden; border-radius: 0; background: none; }
.banner-foto img { width: 100%; height: 100%; object-fit: cover; }
.banner-der .banner-foto { right: var(--margen); }
.banner-izq .banner-foto { left: var(--margen); }
.banner-der .banner-texto { grid-column: 1 / 6; }
.banner-izq .banner-texto { grid-column: 8 / 13; }
.banner-texto { position: relative; z-index: 1; display: grid; gap: 1.5rem; }
.banner-frase { margin: 0; padding-top: 1.75rem; border-top: 1px solid var(--linea); font-weight: 300; font-size: clamp(1.8rem, 3vw, 3rem); line-height: 1.12; letter-spacing: -.02em; text-wrap: balance; }
.banner-frase em { font-style: italic; color: var(--rubor); }
/* Foto horizontal (el equipo): ancho fijo, completa, centrada en la altura */
.banner-ancha { min-height: min(72vh, 680px); }
.banner-ancha .banner-foto { top: 50%; bottom: auto; height: auto; width: 62%; max-width: none; aspect-ratio: 16 / 9; translate: 0 -50%; }
.estudio.banner::after { display: none; }
.estudio .estudio-texto { grid-column: 1 / 6; grid-row: auto; padding-top: 0; }
.estudio-equipo { grid-column: auto; grid-row: auto; }

/* Fotos de objetos en círculo */
.implantes-modelo.arco { border-radius: 50%; aspect-ratio: 1 / 1; }
.carrusel { height: calc(var(--w) + 3rem); }
.carrusel-pista { height: var(--w); }
.carrusel-item figure { border-radius: 50%; }

/* Tu visita: cada momento es la foto completa, fundida con el fondo; el texto debajo, en la zona libre */
.ritual-anillo { display: none; }
.ritual-escena { --ah: 64dvh; --atop: 0px; }
.camara-fondo { filter: blur(40px) brightness(.38) saturate(.9); }
.camara-arco {
  top: 0; height: var(--ah); width: auto; aspect-ratio: var(--ar, 8 / 9); max-width: 100%;
  border-radius: 0; box-shadow: none; background: none; opacity: var(--abre, 1); transform-origin: 50% 45%;
  transform: translateX(-50%) translateY(calc(var(--sal, 0) * -24px)) scale(calc((1.08 - .08 * var(--abre, 1)) * (1 + .03 * (1 - var(--velo, 1)))));
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 14%, #000 58%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.camara-arco img { object-position: 50% 50%; }
.camara-texto { top: calc(var(--ah) + clamp(1.5rem, 4.5dvh, 3.25rem)); }
.ritual-intro { top: 32dvh; }

@media (max-width: 860px) {
  .llegada { padding-top: 0; }
  .llegada-arco, .banner-foto, .banner-ancha .banner-foto {
    position: relative; z-index: 0; inset: auto; translate: none; order: -1; justify-self: stretch;
    width: calc(100% + 2 * var(--margen)); max-width: none; max-height: none; height: auto; margin: 0 calc(-1 * var(--margen));
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 70%, transparent 100%);
  }
  .llegada-arco, .banner-foto { aspect-ratio: 4 / 5; }
  .banner-ancha .banner-foto { aspect-ratio: 16 / 10; }
  .banner { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 1rem; padding-top: 1.5rem; padding-bottom: 3rem; }
  .banner .banner-texto, .estudio .estudio-texto { grid-column: 1; }
  .estudio .banner-foto { order: 0; }
  .implantes-modelo.arco { aspect-ratio: 1 / 1; width: min(100%, 26rem); justify-self: center; }
  .ritual-escena { --ah: 54dvh; --atop: 0px; }
  .camara-arco { width: 100%; aspect-ratio: auto; transform-origin: 50% 40%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 18%, #000 58%, transparent 100%); }
  .camara-texto { top: calc(var(--ah) + 1.25rem); }
  .ritual-intro { top: 30dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .camara-arco { position: relative; left: auto; top: auto; transform: none; opacity: 1; height: auto; width: min(100%, 40rem); aspect-ratio: var(--ar, 8 / 9); }
  .camara-texto { top: auto; }
  .banner-ancha .banner-foto { translate: 0 -50%; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 860px) {
  .camara-arco { width: 100%; }
  .banner-ancha .banner-foto { translate: none; }
}

/* Los 5 momentos: el nombre va junto al número y la frase es el texto principal */
.camara-texto p.camara-frase { font-weight: 300; font-size: clamp(1.3rem, min(2.1vw, 3.6dvh), 2rem); line-height: 1.3; letter-spacing: -.01em; color: var(--almendra); max-width: 40rem; text-wrap: balance; text-shadow: 0 2px 24px rgba(30, 22, 20, .45); }
.camara-texto > .camara-frase { --d: .45; }
@media (max-width: 860px) { .camara-texto p.camara-frase { font-size: clamp(1.15rem, 4.8vw, 1.4rem); } }

/* Cita bajo el texto de un momento: cursiva, en rubor, entra al final */
.camara-texto p.camara-cita { font-style: italic; font-weight: 300; font-size: clamp(1.02rem, min(1.35vw, 2.4dvh), 1.3rem); line-height: 1.4; color: var(--rubor); max-width: 34rem; text-wrap: balance; text-shadow: 0 2px 20px rgba(30, 22, 20, .5); }
@media (max-width: 860px) { .camara-texto p.camara-cita { font-size: clamp(.98rem, 4vw, 1.1rem); } }

/* Botón «Ingresar» (acceso al sistema) junto a «Agenda tu evaluación» */
.nav .boton-ingresar { margin-left: .6rem; }
.menu-movil .boton-linea { --b-tinta: var(--almendra); box-shadow: inset 0 0 0 1px rgba(239, 232, 223, .35); margin-top: 0; }
.menu-movil a:nth-child(6) { animation-delay: 200ms; }