@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("../assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

@property --fondo { syntax: "<color>"; inherits: true; initial-value: #fbfcfc; }
@property --superficie { syntax: "<color>"; inherits: true; initial-value: #f1f5f5; }
@property --tinta { syntax: "<color>"; inherits: true; initial-value: #0b1416; }
@property --suave { syntax: "<color>"; inherits: true; initial-value: #5b6f73; }
@property --tenue { syntax: "<color>"; inherits: true; initial-value: #b9c6c8; }
@property --linea { syntax: "<color>"; inherits: true; initial-value: rgba(11, 20, 22, .1); }
@property --teal { syntax: "<color>"; inherits: true; initial-value: #09687f; }

:root {
  --fondo: #fbfcfc; --superficie: #f1f5f5; --tinta: #0b1416; --suave: #5b6f73; --tenue: #b9c6c8; --linea: rgba(11, 20, 22, .1);
  --celeste: #d9f8fa; --celeste-2: #b5f0f4; --cian: #22f3fe; --vivo: #12bfcb; --teal: #09687f;
  --lado: clamp(20px, 4.4vw, 72px); --radio: clamp(16px, 1.8vw, 28px);
  --sombra: 0 1px 1px rgba(11, 20, 22, .04), 0 12px 32px -12px rgba(11, 20, 22, .18), 0 40px 80px -40px rgba(9, 104, 127, .25);
  color-scheme: light;
}
* { box-sizing: border-box; }
html { background: var(--fondo); transition: --fondo .9s, --superficie .9s, --tinta .9s, --suave .9s, --tenue .9s, --linea .9s, --teal .9s; }
/* resultados y caso: la página pasa a oscuro */
html.oscuro { --fondo: #061a1f; --superficie: #0c262c; --tinta: #eaf7f8; --suave: #8aa6ab; --tenue: #2b464b; --linea: rgba(234, 247, 248, .12); --teal: #5ee9f1; }
/* superficies blancas: conservan la paleta clara */
.svc, .fase, .formulario, .vidrio, .vidrio-v { --fondo: #fbfcfc; --superficie: #f1f5f5; --tinta: #0b1416; --suave: #5b6f73; --tenue: #b9c6c8; --linea: rgba(11, 20, 22, .1); --teal: #09687f; color: var(--tinta); }
body { margin: 0; background: var(--fondo); color: var(--tinta); font-family: "Geist", system-ui, sans-serif; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; }
main, .pie { overflow-x: clip; }
a { color: inherit; }
::selection { background: var(--celeste-2); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.mono { font-family: "Geist Mono", monospace; font-size: .74rem; letter-spacing: .04em; }
.soft { color: var(--suave); }
.rotulo { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-family: "Geist Mono", monospace; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.titulo { margin: 0; font-weight: 300; font-size: clamp(2.2rem, 1.2rem + 3vw, 4.6rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.cabecera { display: grid; gap: 18px; max-width: 52rem; margin-bottom: clamp(40px, 5vw, 80px); }
.punto { position: relative; width: 8px; height: 8px; border-radius: 50%; background: var(--vivo); }
.punto::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--vivo); animation: latido 2.2s ease-out infinite; }
@keyframes latido { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.2); opacity: 0; } }

/* botones */
.boton { position: relative; display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 999px; border: 0; font: 500 .92rem "Geist", system-ui; text-decoration: none; cursor: pointer; white-space: nowrap; overflow: hidden; isolation: isolate; }
.boton span { position: relative; z-index: 1; }
.boton--oscuro { background: var(--tinta); color: var(--fondo); }
.boton--oscuro::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--teal); transform: translateY(101%); border-radius: inherit; transition: transform .45s cubic-bezier(.7, 0, .2, 1); }
.boton--oscuro:hover::before { transform: none; }
.boton--grande { height: 54px; padding: 0 30px; font-size: 1rem; }
/* texto que rueda al pasar el mouse */
.rueda { display: inline-block; height: 1.3em; line-height: 1.3; overflow: hidden; vertical-align: middle; }
.rueda > span { display: block; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
a:hover .rueda > span, button:hover .rueda > span { transform: translateY(-100%); }
.enlace { font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s; padding-bottom: 2px; }
.enlace:hover { background-size: 100% 1px; }

/* entrada */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; background: var(--fondo); animation: intro-respaldo .6s 8s forwards; }
.intro__halo { position: absolute; left: 50%; top: 50%; width: min(70vw, 620px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(34, 243, 254, .16), rgba(181, 240, 244, .1) 40%, transparent 68%); filter: blur(28px); animation: intro-halo 3.2s ease-in-out infinite alternate; pointer-events: none; }
.intro__nombre { position: relative; display: flex; margin: 0; padding: .06em 0 .14em; overflow: hidden; font-weight: 600; font-size: clamp(2.6rem, 1.6rem + 4vw, 5rem); line-height: 1; letter-spacing: -0.02em; color: var(--tinta); white-space: pre; transform-origin: 50% 50%; }
.intro__nombre i { display: inline-block; font-style: normal; transform: translateY(110%); }
.intro__lema { position: relative; margin: 18px 0 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--suave); opacity: 0; }
.intro__barra { position: relative; width: 160px; height: 2px; margin-top: 30px; border-radius: 2px; background: rgba(11, 20, 22, .08); overflow: hidden; opacity: 0; }
.intro__barra i { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #09687F, #12BFCB 60%, #22F3FE); transform: scaleX(0); transform-origin: left; }
@keyframes intro-halo { from { scale: .92; } to { scale: 1.06; } }
@keyframes intro-respaldo { to { opacity: 0; visibility: hidden; } }
.no-intro .intro { display: none; }

/* luz que sigue al cursor */
.luz-cursor { position: fixed; z-index: 1; left: 0; top: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(34, 243, 254, .16), transparent 62%); opacity: 0; transition: opacity .6s; mix-blend-mode: multiply; }
.con-cursor .luz-cursor { opacity: 1; }
.oscuro .luz-cursor { mix-blend-mode: screen; }

/* barra */
.barra { position: fixed; z-index: 30; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 32px; height: 78px; padding: 0 var(--lado); transition: background-color .35s, box-shadow .35s, height .35s; }
.barra.con-fondo { background: color-mix(in srgb, var(--fondo) 80%, transparent); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--linea); height: 64px; }
.barra__logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 1.05rem; letter-spacing: -0.02em; }
.barra__nav { display: flex; gap: 30px; margin-left: auto; font-size: .92rem; color: var(--suave); }
.barra__nav a { text-decoration: none; transition: color .16s; }
.barra__nav a:hover { color: var(--tinta); }

/* menú de servicios de la barra */
.barra__nav a { display: inline-flex; align-items: center; }
.barra__nav a.con-menu::after { content: ""; width: 6px; height: 6px; margin: -3px 0 0 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .35s cubic-bezier(.2, .8, .2, 1), margin .35s; }
.barra.menu-abierto .barra__nav a.con-menu { color: var(--tinta); }
.barra.menu-abierto .barra__nav a.con-menu::after { margin-top: 3px; transform: rotate(-135deg); }
.mm-ancla { position: relative; display: inline-flex; }
.megamenu { --fondo: #fbfcfc; --superficie: #f1f5f5; --tinta: #0b1416; --suave: #5b6f73; --tenue: #b9c6c8; --linea: rgba(11, 20, 22, .1); --teal: #09687f;
  position: absolute; top: calc(100% + 26px); left: -14px; display: flex; align-items: stretch; padding: 8px; border-radius: 20px; color: var(--tinta); background: #fbfcfc; border: 1px solid var(--linea); box-shadow: 0 1px 2px rgba(11, 20, 22, .05), 0 34px 80px -34px rgba(9, 60, 72, .45);
  clip-path: inset(0 0 100% 0 round 20px); opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: clip-path .4s cubic-bezier(.7, 0, .2, 1), opacity .25s, transform .4s, visibility 0s .4s; }
.megamenu::before { content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; }
.megamenu.abierto { clip-path: inset(0 0 0 0 round 20px); opacity: 1; visibility: visible; transform: none; transition: clip-path .6s cubic-bezier(.2, .8, .2, 1), opacity .2s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.mm-cats { display: grid; align-content: start; gap: 2px; width: 268px; }
.mm-cat, .mm-dest { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 0; border-radius: 13px; background: transparent; color: var(--tinta); font: inherit; text-align: left; text-decoration: none; cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity .15s, transform .15s, background .25s; }
.mm-cat span, .mm-dest span { display: grid; gap: 1px; }
.mm-cat b, .mm-dest b { font-weight: 500; font-size: .95rem; letter-spacing: -0.01em; }
.mm-cat small, .mm-dest small { font-size: .78rem; line-height: 1.35; color: var(--suave); }
.mm-cat i, .mm-dest i { font-style: normal; color: var(--tenue); transition: transform .3s, color .3s; }
.mm-cat:hover, .mm-cat.activa, .mm-cat:focus-visible { background: var(--superficie); }
.mm-cat.activa i { color: var(--teal); transform: translateX(3px); }
.mm-dest { margin-top: 6px; color: #eaf7f8; background: radial-gradient(130% 120% at 90% 0%, #0d6a7c 0%, #08414c 45%, #061a1f 90%); }
.mm-dest small { color: #5ee9f1; }
.mm-dest i { color: #22f3fe; }
.mm-dest:hover i { transform: translateX(3px); }
.megamenu.abierto .mm-cat, .megamenu.abierto .mm-dest { opacity: 1; transform: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1), background .25s; transition-delay: calc(var(--i) * 45ms + 120ms), calc(var(--i) * 45ms + 120ms), 0s; }
/* segundo nivel: los servicios de la categoría se abren a la derecha */
.mm-subs { position: relative; width: 0; overflow: hidden; transition: width .5s cubic-bezier(.2, .8, .2, 1); }
.megamenu.con-sub .mm-subs { width: 324px; }
.mm-sub { position: absolute; top: 0; left: 0; width: 324px; display: grid; align-content: start; gap: 2px; margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--linea); visibility: hidden; }
.mm-sub.activa { position: relative; visibility: visible; }
.mm-sub .mono { margin: 8px 12px 6px; color: var(--teal); font-size: .64rem; letter-spacing: .12em; text-transform: uppercase; opacity: 0; transition: opacity .2s; }
.mm-sub.activa .mono { opacity: 1; transition: opacity .4s .1s; }
.barra__nav .megamenu a { color: var(--tinta); }
.barra__nav .megamenu .mm-dest { display: flex; color: #eaf7f8; }
.barra__nav .megamenu .mm-item { display: grid; }
.mm-item { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; opacity: 0; transform: translateX(-12px); transition: opacity .15s, transform .15s, background .25s; }
.mm-item b { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 500; font-size: .93rem; letter-spacing: -0.01em; }
.mm-item b::after { content: "→"; color: var(--teal); opacity: 0; transform: translateX(-6px); transition: opacity .25s, transform .3s; }
.mm-item small { color: var(--suave); font-size: .78rem; line-height: 1.35; }
.mm-item:hover, .mm-item:focus-visible { background: var(--superficie); }
.mm-item:hover b::after, .mm-item:focus-visible b::after { opacity: 1; transform: none; }
.mm-sub.activa .mm-item { opacity: 1; transform: none; transition: opacity .4s, transform .5s cubic-bezier(.2, .8, .2, 1), background .25s; transition-delay: calc(var(--j) * 50ms + 120ms), calc(var(--j) * 50ms + 120ms), 0s; }

/* ═════ portada */
.portada { position: relative; min-height: 100vh; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 120px 0 0; overflow: hidden; }
.aurora { position: absolute; inset: -20% -10% 0; z-index: 0; filter: blur(70px) saturate(1.2); opacity: .9; }
.aurora i { position: absolute; border-radius: 50%; }
.aurora i:nth-child(1) { width: 52vw; height: 52vw; right: -6vw; top: 0; background: radial-gradient(circle, rgba(34, 243, 254, .55), transparent 65%); animation: flota1 18s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: 22vw; top: 22vh; background: radial-gradient(circle, rgba(181, 240, 244, .9), transparent 65%); animation: flota2 22s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 34vw; height: 34vw; right: 4vw; top: 48vh; background: radial-gradient(circle, rgba(9, 104, 127, .28), transparent 65%); animation: flota3 26s ease-in-out infinite alternate; }
@keyframes flota1 { to { transform: translate(-8vw, 10vh) scale(1.15); } }
@keyframes flota2 { to { transform: translate(10vw, -6vh) scale(.85); } }
@keyframes flota3 { to { transform: translate(-12vw, -8vh) scale(1.2); } }
.grano { position: absolute; inset: 0; z-index: 1; opacity: .05; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.portada__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center; gap: clamp(24px, 4vw, 72px); padding: 0 var(--lado); }
.portada__texto { display: grid; gap: 26px; justify-items: start; }
.portada h1 { margin: 0; font-weight: 300; font-size: clamp(3rem, 1rem + 6vw, 7.6rem); line-height: .98; letter-spacing: -0.058em; }
.portada h1 .linea-m { padding-bottom: .12em; margin-bottom: -.12em; }
.js .portada h1 .linea-m > span { transform: translateY(110%); }
.cambia { display: inline-block; color: var(--teal); white-space: nowrap; }
.pal { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
[data-url] { display: inline-block; }
.portada__sub { margin: 0; max-width: 33rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--suave); text-wrap: pretty; }
.portada__botones { display: flex; flex-wrap: wrap; align-items: center; gap: 26px; }

/* tarjetas de vidrio con la IA trabajando */
.vidrios { position: relative; height: min(560px, 62vh); perspective: 1400px; }
.vidrio { position: absolute; border-radius: 22px; background: rgba(255, 255, 255, .62); border: 1px solid rgba(255, 255, 255, .9); backdrop-filter: blur(22px) saturate(1.5); box-shadow: var(--sombra); will-change: transform; }
.vidrio--chat { left: 0; top: 2%; width: min(390px, 82%); padding: 16px; z-index: 2; }
.vidrio--chat header { display: flex; align-items: center; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--linea); }
.vidrio--chat header div { display: grid; flex: 1; line-height: 1.25; }
.vidrio--chat header small { font-size: .78rem; color: var(--suave); }
.avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(140deg, var(--teal), var(--vivo)); color: #fff; font-size: .78rem; font-weight: 600; }
.chat { list-style: none; margin: 0; padding: 14px 0 2px; display: flex; flex-direction: column; gap: 8px; height: 210px; overflow: hidden; justify-content: flex-end; -webkit-mask-image: linear-gradient(transparent, #000 22%); mask-image: linear-gradient(transparent, #000 22%); }
.chat li { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: .9rem; line-height: 1.4; animation: burbuja .5s cubic-bezier(.2, .8, .2, 1) both; }
.chat .p { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; box-shadow: 0 1px 2px rgba(11, 20, 22, .06); }
.chat .ia { align-self: flex-end; background: var(--tinta); color: #fff; border-bottom-right-radius: 5px; }
.chat .escribe { align-self: flex-end; background: var(--tinta); display: flex; gap: 4px; padding: 13px 14px; }
.chat .escribe i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: parpadeo 1s infinite; }
.chat .escribe i:nth-child(2) { animation-delay: .15s; } .chat .escribe i:nth-child(3) { animation-delay: .3s; }
@keyframes burbuja { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes parpadeo { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.vidrio--cita { right: 0; top: 60%; z-index: 3; display: flex; gap: 14px; align-items: center; padding: 16px 20px 16px 16px; width: min(320px, 80%); }
.vidrio--cita div { display: grid; line-height: 1.3; }
.vidrio--cita small { color: var(--teal); }
.vidrio--cita b { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.02em; }
.vidrio--cita span:last-child { font-size: .82rem; color: var(--suave); }
.check { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--celeste); }
.check svg { width: 24px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; animation: trazo 1.2s .6s cubic-bezier(.6, 0, .2, 1) infinite alternate; }
@keyframes trazo { to { stroke-dashoffset: 0; } }
.vidrio--aviso { left: 6%; bottom: -2%; z-index: 1; display: grid; gap: 2px; padding: 16px 20px; width: min(290px, 72%); }
.vidrio--aviso small { color: var(--teal); }
.vidrio--aviso b { font-weight: 500; }
.vidrio--aviso span { font-size: .82rem; color: var(--suave); }
.barrita { margin-top: 10px; height: 4px; border-radius: 4px; background: var(--superficie); overflow: hidden; }
.barrita i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--teal), var(--vivo)); transform-origin: left; animation: carga 3.4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes carga { from { transform: scaleX(0); } 70%, to { transform: scaleX(1); } }

.cinta { position: relative; z-index: 2; margin-top: clamp(30px, 5vh, 60px); padding: 22px 0; border-top: 1px solid var(--linea); overflow: hidden; }
.cinta__pista { display: flex; gap: 64px; width: max-content; animation: corre 40s linear infinite; }
.cinta span { font-size: clamp(1rem, .9rem + .5vw, 1.4rem); font-weight: 300; letter-spacing: -0.02em; color: var(--suave); white-space: nowrap; }
.cinta span::before { content: "✦"; margin-right: 64px; color: var(--vivo); font-size: .7em; vertical-align: .15em; }
@keyframes corre { to { transform: translateX(-50%); } }

.chip { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-family: "Geist Mono", monospace; font-size: .72rem; background: var(--superficie); color: var(--suave); white-space: nowrap; }
.chip--ok { background: var(--celeste); color: var(--teal); }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px var(--celeste); }
.etis { display: flex; flex-wrap: wrap; gap: 8px; }
.etis span { padding: 8px 14px; border-radius: 999px; background: var(--celeste); color: var(--teal); font-size: .85rem; font-weight: 500; }

/* ═════ recorrido: la ventana se abre y el video avanza con el scroll */
.recorrido { position: relative; height: 680vh; }
.recorrido__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.recorrido__frase { position: absolute; z-index: 1; left: var(--lado); right: var(--lado); margin: 0; text-align: center; font-weight: 300; font-size: clamp(1.9rem, 1rem + 2.6vw, 3.9rem); line-height: 1.05; letter-spacing: -0.045em; text-wrap: balance; }
.recorrido__frase--a { top: 10%; }
.recorrido__frase--b { bottom: 10%; color: var(--teal); }
.recorrido__ventana { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: var(--superficie); }
.recorrido__lienzo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; }
.recorrido__escena { position: absolute; inset: 0; transform-origin: 50% 50%; will-change: transform; }
.recorrido__destello { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 255, 255, .85) 0%, rgba(34, 243, 254, .35) 32%, rgba(34, 243, 254, 0) 68%); }
.recorrido__velo { position: absolute; inset: 0; opacity: 0; background: linear-gradient(90deg, rgba(251, 252, 252, .94) 0%, rgba(251, 252, 252, .74) 34%, rgba(251, 252, 252, 0) 60%); }
.recorrido__textos { position: absolute; left: var(--lado); top: 0; bottom: 0; width: min(34rem, 40vw); display: grid; align-items: center; }
.recorrido__texto { grid-area: 1 / 1; visibility: hidden; }
.recorrido__texto .mono { color: var(--teal); font-size: .8rem; }
.recorrido__texto h3 { margin: 14px 0; font-weight: 300; font-size: clamp(2rem, 1.1rem + 2.3vw, 3.8rem); line-height: 1.02; letter-spacing: -0.045em; text-wrap: balance; }
.recorrido__texto p { margin: 0; max-width: 26rem; color: var(--suave); font-size: 1.08rem; }
.recorrido__ui { position: absolute; right: clamp(20px, 6vw, 110px); top: 0; bottom: 0; width: min(390px, 30vw); display: grid; align-items: center; perspective: 1200px; }
.vidrio-v { grid-area: 1 / 1; display: grid; gap: 10px; padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .74); border: 1px solid rgba(255, 255, 255, .95); backdrop-filter: blur(24px) saturate(1.5); -webkit-backdrop-filter: blur(24px) saturate(1.5); box-shadow: var(--sombra); visibility: hidden; }
.vidrio-v header { display: flex; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--linea); }
.vidrio-v header div { display: grid; flex: 1; line-height: 1.25; }
.vidrio-v header small { font-size: .78rem; color: var(--suave); }
.vidrio-v header small.mono { font-size: .7rem; color: var(--teal); }
.vidrio-v .grande { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.02em; }
.vidrio-v .check svg { animation: none; stroke-dashoffset: 0; }
.burb-v { justify-self: start; max-width: 85%; margin: 0; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: #fff; font-size: .9rem; line-height: 1.4; box-shadow: 0 1px 2px rgba(11, 20, 22, .06); }
.burb-v.ia { justify-self: end; background: var(--tinta); color: #fff; border-radius: 16px 16px 5px 16px; }
.linea-v { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .8); font-size: .88rem; }
.linea-v b { font-weight: 500; }
.linea-v em { font-style: normal; font-size: .78rem; color: var(--teal); }
.barras-v { list-style: none; margin: 0; padding: 4px 0 0; display: grid; gap: 11px; }
.barras-v li { display: grid; grid-template-columns: 118px 1fr 40px; align-items: center; gap: 10px; font-size: .85rem; }
.barras-v i { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--teal), var(--vivo)); transform-origin: left; transform: scaleX(0); transition: transform 1.1s .45s cubic-bezier(.2, .8, .2, 1); }
.vidrio-v.ver .barras-v i { transform: scaleX(var(--v)); }
.barras-v li.ia span:first-child { color: var(--teal); }
.recorrido__pasos { position: absolute; left: 50%; bottom: 30px; display: flex; gap: 12px; margin: 0; padding: 0; list-style: none; transform: translateX(-50%); opacity: 0; }
.recorrido__pasos li { display: grid; gap: 9px; width: clamp(84px, 10vw, 150px); font-family: "Geist Mono", monospace; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--suave); transition: color .3s; }
.recorrido__pasos li.activo { color: var(--tinta); }
.recorrido__pasos i { position: relative; height: 2px; border-radius: 2px; background: rgba(11, 20, 22, .14); overflow: hidden; }
.recorrido__pasos i::after { content: ""; position: absolute; inset: 0; background: var(--teal); transform-origin: left; transform: scaleX(var(--p, 0)); }
.recorrido__ejemplo { position: absolute; right: 18px; top: 84px; padding: 5px 10px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--suave); opacity: 0; }

/* ═════ servicios: vitrina con columnas desfasadas */
.servicios { padding: 0 var(--lado) clamp(24px, 3vw, 48px); }
/* cabecera de servicios: panel petróleo que se levanta como una hoja */
.servicios__intro { --tinta: #eaf7f8; --suave: #9fbcc0; --linea: rgba(234, 247, 248, .16); --teal: #5ee9f1;
  position: relative; isolation: isolate; overflow: hidden; margin: 0 calc(var(--lado) * -1 + 12px) clamp(60px, 7vw, 110px); padding: clamp(90px, 10vw, 150px) calc(var(--lado) - 12px) clamp(40px, 5vw, 70px);
  border-radius: clamp(26px, 3vw, 44px); color: var(--tinta); background: radial-gradient(120% 100% at 88% 0%, #0d6a7c 0%, #08414c 36%, #061a1f 78%); transform-origin: 50% 100%; }
.servicios__intro::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.servicios__intro::before { content: ""; position: absolute; z-index: -1; left: var(--mx, 70%); top: var(--my, 30%); width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 243, 254, .22), transparent 62%); pointer-events: none; transition: left .6s cubic-bezier(.2, .8, .2, 1), top .6s cubic-bezier(.2, .8, .2, 1); }
.intro-luces { position: absolute; inset: 0; z-index: -2; filter: blur(60px); pointer-events: none; }
.intro-luces i { position: absolute; border-radius: 50%; }
.intro-luces i:nth-child(1) { width: 38vw; height: 38vw; right: -8vw; top: -12vw; background: rgba(34, 243, 254, .32); animation: flota1 16s ease-in-out infinite alternate; }
.intro-luces i:nth-child(2) { width: 30vw; height: 30vw; left: 30%; bottom: -16vw; background: rgba(18, 191, 203, .28); animation: flota2 20s ease-in-out infinite alternate; }
.intro-luces i:nth-child(3) { width: 22vw; height: 22vw; left: -6vw; top: 20%; background: rgba(9, 104, 127, .55); animation: flota3 24s ease-in-out infinite alternate; }
.servicios__cabeza { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: clamp(40px, 5vw, 70px); }
.servicios__cabeza .cabecera { margin: 0; }
.servicios__cuenta { display: grid; justify-items: end; gap: 6px; margin: 0; text-align: right; }
.servicios__cuenta b { font-weight: 200; font-size: clamp(4.4rem, 2.6rem + 5vw, 8.5rem); line-height: .85; letter-spacing: -0.07em; background: linear-gradient(180deg, #fff 20%, var(--cian)); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.servicios__cuenta span { max-width: 12rem; color: var(--suave); font-size: .92rem; }
.servicios__intro .indice { margin: 0; border-color: var(--linea); }
.servicios__intro .indice a { color: var(--tinta); border-bottom: 1px solid transparent; }
.servicios__intro .indice a:hover { color: var(--cian); }
.servicios__intro .indice a::after { color: var(--cian); }
/* palabras que giran hasta quedar en su sitio */
[data-giro] { perspective: 900px; }
[data-giro] .pg { display: inline-block; transform-origin: 50% 100%; }
/* servicios: pastillas pequeñas que flotan; al pasar el cursor se despliega su burbuja */
.vitrina { position: relative; z-index: 4; padding: clamp(10px, 2vw, 30px) 0 clamp(20px, 3vw, 50px); }
.nube__pastillas { position: relative; z-index: 1; pointer-events: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px 18px; max-width: 1340px; margin: 0 auto; }
.pastilla { position: relative; z-index: 1; pointer-events: auto; display: inline-flex; align-items: center; gap: 14px; padding: 10px 28px 10px 10px; border-radius: 999px; border: 1px solid var(--linea); background: rgba(255, 255, 255, .78); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 16px 36px -22px rgba(9, 104, 127, .5); color: var(--tinta); font-size: clamp(1.05rem, .75rem + .75vw, 1.45rem); font-weight: 450; letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; animation: flotar var(--dur, 6s) ease-in-out var(--del, 0s) infinite alternate; transition: background .35s, border-color .35s, box-shadow .35s, color .35s; }
.pastilla .mono { display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 9px; border-radius: 999px; background: var(--celeste); color: var(--teal); font-size: .8rem; letter-spacing: .04em; transition: background .35s, color .35s; }
.pastilla:hover, .pastilla.activa { background: #fff; border-color: var(--celeste-2); box-shadow: 0 20px 44px -22px rgba(9, 104, 127, .6); }
.pastilla:hover .mono, .pastilla.activa .mono { background: var(--teal); color: #fff; }
.pastilla--cta { border-color: var(--tinta); background: var(--tinta); color: var(--fondo); }
.pastilla--cta .mono { background: rgba(255, 255, 255, .12); color: var(--cian); }
.pastilla--cta:hover, .pastilla--cta.activa { background: #0f2328; border-color: #0f2328; }
@keyframes flotar { from { transform: translateY(calc(var(--a, 5px) * -1)); } to { transform: translateY(var(--a, 5px)); } }
.nube__burbujas { position: absolute; inset: 0; pointer-events: none; }
.burbuja { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(300px, 25vw, 380px); opacity: 0; visibility: hidden; transform-origin: 0 0; pointer-events: none; filter: drop-shadow(0 34px 50px rgba(6, 26, 31, .2)); will-change: transform, opacity; }
.burbuja.abierta { visibility: visible; pointer-events: auto; }
.burbuja.foco { z-index: 3; }
.burbuja .svc { transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .35s; }
.burbuja.abierta:hover .svc { transform: translateY(-8px); }
.nube__burbujas:has(.burbuja.abierta:hover) .burbuja.abierta:not(:hover) .svc { opacity: .72; }
.nube__puente { position: absolute; z-index: 0; left: 0; top: 0; pointer-events: none; }
.nube__puente.activo { pointer-events: auto; }
.nube__burbujas::before { content: ""; position: fixed; inset: 0; z-index: 0; background: var(--fondo); opacity: 0; transition: opacity .4s ease; }
.vitrina.con-burbuja .nube__burbujas::before { opacity: 1; }
.burbuja .svc { width: 100%; }
/* dentro de la burbuja la foto entra sola, sin pasar el cursor por la tarjeta */
.svc.ver-foto .svc__foto { opacity: 1; }
.svc.ver-foto .svc__foto img, .svc.ver-foto .svc__foto video { transform: scale(1); }
.svc.ver-foto .svc__foto ~ .svc__obj { opacity: 0; transform: scale(.9) translateY(-12px); }
.svc.ver-foto .svc__foto ~ .svc__cabeza, .svc.ver-foto .svc__foto ~ .svc__cabeza .mono { color: #fff; }
.svc.ver-foto .svc__foto ~ .svc__cabeza p { color: rgba(255, 255, 255, .86); }
.svc.ver-foto .svc__marco path { stroke: var(--vivo); stroke-width: 2; }
.svc { position: relative; display: block; aspect-ratio: 1 / 1.03; color: var(--tinta); text-decoration: none; isolation: isolate; }
.svc__base, .svc__foto { position: absolute; inset: 0; clip-path: polygon(1.2% 0, 98.8% 0, 100% 1.2%, 100% 90.5%, 42% 90.5%, 36.6% 100%, 1.2% 100%, 0 98.8%, 0 1.2%); }
.svc__base { background: linear-gradient(165deg, #fff 0%, var(--superficie) 100%); }
.svc__foto { opacity: 0; transition: opacity .6s; }
.svc__foto img, .svc__foto video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.14); transition: transform 1.3s cubic-bezier(.2, .8, .2, 1); }
.svc__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 26, 31, .74) 0%, rgba(6, 26, 31, .35) 40%, rgba(6, 26, 31, 0) 64%); }
.svc--ficha { aspect-ratio: 1 / 1.24; }
.svc__cabeza { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: grid; gap: 7px; padding: clamp(18px, 1.7vw, 26px) clamp(18px, 1.7vw, 26px) 0; transition: color .4s; }
.svc__cabeza .mono { color: var(--teal); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; transition: color .4s; }
.svc__cabeza h3 { margin: 0; font-weight: 500; font-size: clamp(1.12rem, .8rem + .55vw, 1.5rem); line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.svc__cabeza p { margin: 0; color: var(--suave); font-size: clamp(.82rem, .7rem + .2vw, .95rem); line-height: 1.4; transition: color .4s; }
a.svc:hover .svc__foto ~ .svc__cabeza, a.svc:hover .svc__foto ~ .svc__cabeza .mono { color: #fff; }
a.svc:hover .svc__foto ~ .svc__cabeza p { color: rgba(255, 255, 255, .86); }
.svc__cabeza ~ .svc__obj { top: 33%; }
.svc__obj { position: absolute; z-index: 1; inset: 0 0 9.5% 0; display: grid; place-items: center; transition: opacity .45s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.svc__marco { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.svc__marco path { fill: none; stroke: var(--linea); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .4s, stroke-width .4s; }
.svc__nombre { position: absolute; z-index: 3; right: 0; bottom: 0; left: 42%; height: 9.5%; display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; font-size: clamp(.78rem, .5rem + .38vw, .98rem); white-space: nowrap; }
.svc__nombre b { font-weight: 500; letter-spacing: -0.01em; }
.svc__nombre span { font-family: "Geist Mono", monospace; color: var(--teal); transition: transform .4s; }
a.svc:hover .svc__nombre span { transform: translateX(5px); }
a.svc:hover .svc__foto { opacity: 1; }
a.svc:hover .svc__foto img, a.svc:hover .svc__foto video { transform: scale(1); }
a.svc:hover .svc__foto ~ .svc__obj { opacity: 0; transform: scale(.9) translateY(-12px); }
a.svc:hover .svc__marco path { stroke: var(--vivo); stroke-width: 2; }
.svc--cta .svc__base { background: linear-gradient(150deg, var(--celeste) 0%, #f3fdfd 60%, #fff 100%); }
/* tarjetas sin foto: al pasar el mouse sube el objeto y el fondo se vuelve celeste */
.svc__base { transition: background .5s; }
.svc--sinfoto:hover .svc__obj { transform: translateY(-4%); }
.svc--sinfoto:hover .svc__base { background: linear-gradient(165deg, #fff 0%, var(--celeste) 100%); }

/* índice: todos los servicios por categoría */
.indice { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin: 0 0 clamp(50px, 6vw, 90px); padding: 26px 0 22px; border-top: 1px solid var(--linea); border-bottom: 1px solid var(--linea); }
.indice div { display: grid; align-content: start; gap: 2px; }
.indice .mono { margin: 0 0 8px; color: var(--teal); text-transform: uppercase; letter-spacing: .12em; }
.indice a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); letter-spacing: -0.01em; text-decoration: none; transition: color .2s, padding .35s cubic-bezier(.2, .8, .2, 1); }
.indice a::after { content: "→"; color: var(--teal); opacity: 0; transform: translateX(-6px); transition: opacity .3s, transform .35s; }
.indice a:hover { color: var(--teal); padding-left: 6px; }
.indice a:hover::after { opacity: 1; transform: none; }

/* portadas de cada servicio: piezas de interfaz */
.mini { width: 82%; display: grid; gap: .7em; font-size: clamp(.72rem, .5rem + .3vw, .84rem); line-height: 1.3; }
.mini__caja { padding: .8em 1em; border-radius: 1em; background: #fff; border: 1px solid var(--linea); box-shadow: 0 22px 40px -24px rgba(11, 20, 22, .4), 0 2px 6px rgba(11, 20, 22, .05); }
.mini__barra { display: flex; align-items: center; gap: 4px; margin-bottom: .6em; color: var(--suave); }
.mini__barra i { width: 6px; height: 6px; border-radius: 50%; background: var(--tenue); }
.mini__barra span { margin-left: 6px; font-family: "Geist Mono", monospace; font-size: .8em; }
.mini .mono { font-size: .78em; letter-spacing: 0; }
.mini .avatar { width: 2.5em; height: 2.5em; font-size: .78em; }
.mini small { color: var(--suave); font-size: .82em; }
.mini__aviso { display: flex; align-items: center; gap: .7em; }
.mini__aviso div { display: grid; }
.burb { max-width: 86%; padding: .65em .9em; border-radius: 1.1em 1.1em 1.1em .3em; background: #fff; box-shadow: 0 10px 24px -16px rgba(11, 20, 22, .45); }
.burb.ia { justify-self: end; background: var(--tinta); color: #fff; border-radius: 1.1em 1.1em .3em 1.1em; }
.chip--aviso { background: #fff3dc; color: #946200; }
/* asistente de voz */
.ondas-m { display: flex; align-items: center; justify-content: center; gap: 4px; height: 3.2em; }
.ondas-m i { width: 4px; height: 100%; border-radius: 2px; background: var(--vivo); transform: scaleY(.25); animation: onda 1s ease-in-out infinite alternate; }
.ondas-m i:nth-child(odd) { animation-delay: .25s; } .ondas-m i:nth-child(3n) { animation-delay: .5s; --h: .6; }
/* reseñas */
.mini__resena { display: grid; justify-items: center; gap: 2px; padding: 1.3em 1em; text-align: center; }
.estrellas { color: #f2b01e; font-size: 1.4em; letter-spacing: .12em; }
/* panel y portal: ventana del panel con el móvil del paciente delante */
.mini--panel { position: relative; display: block; width: 86%; aspect-ratio: 1.3; }
.pv-ventana { position: absolute; left: 0; top: 4%; width: 80%; height: 74%; display: grid; grid-template-rows: auto 1fr; padding: .8em; border-radius: 1em; background: #fff; border: 1px solid var(--linea); box-shadow: 0 22px 40px -24px rgba(11, 20, 22, .4); }
.pv-cuerpo { display: grid; grid-template-columns: 20% 1fr; gap: .6em; min-height: 0; }
.pv-lado { border-radius: .5em; background: var(--superficie); }
.pv-grilla { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: .4em; }
.pv-grilla i { border-radius: .4em; background: var(--superficie); }
.pv-grilla i.on { background: var(--celeste-2); animation: pv-late 3s ease-in-out infinite; }
.pv-grilla i.on:nth-child(4) { animation-delay: 1s; } .pv-grilla i.on:nth-child(9) { animation-delay: 2s; }
@keyframes pv-late { 50% { background: var(--vivo); } }
.pv-movil { position: absolute; right: 0; bottom: 0; width: 38%; aspect-ratio: 9 / 17; display: grid; align-content: start; gap: .35em; padding: 1.5em .7em .7em; border-radius: 1.3em; background: #fff; border: .32em solid var(--tinta); box-shadow: 0 24px 40px -20px rgba(11, 20, 22, .5); }
.pv-notch { position: absolute; top: .35em; left: 50%; width: 34%; height: .45em; border-radius: 1em; background: var(--tinta); transform: translateX(-50%); }
.pv-movil b { font-size: 1.05em; font-weight: 600; }
.pv-firma { margin-top: .3em; padding: .4em .5em; border-radius: .6em; background: var(--celeste); color: var(--teal); font-size: .72em; font-weight: 600; line-height: 1.2; }
/* whatsapp: la hora de la noche y la respuesta al momento */
.mini--wa { justify-items: start; gap: .6em; }
.wa-hora { display: flex; align-items: center; gap: .5em; }
.wa-num { font-weight: 300; font-size: 2.7em; line-height: 1; letter-spacing: -0.05em; }
.luna { width: 1.5em; height: 1.5em; border-radius: 50%; box-shadow: inset -.45em -.15em 0 0 var(--teal); transform: rotate(-20deg); }
.mini--wa .chip { justify-self: end; }
/* aeo: la ia recomienda y tu clínica sale primera */
.aeo-p { display: flex; align-items: center; gap: .5em; padding: .65em .95em; border-radius: 999px; }
.chispa { color: var(--vivo); font-size: 1.1em; }
.aeo-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .45em; }
.aeo-lista li { display: grid; grid-template-columns: 1.4em 1fr auto; align-items: center; gap: .5em; min-height: 2.6em; padding: .4em .8em; border-radius: .8em; background: rgba(255, 255, 255, .6); border: 1px solid var(--linea); }
.aeo-lista li i { height: .55em; border-radius: 1em; background: var(--superficie); }
.aeo-lista li .mono { color: var(--suave); }
.aeo-lista li.top { background: #fff; border-color: var(--vivo); box-shadow: 0 0 0 4px rgba(34, 243, 254, .15), 0 18px 34px -20px rgba(9, 104, 127, .55); transform: scale(1.04); }
.aeo-lista li.top b { font-weight: 600; }
.aeo-lista li.top em { padding: .25em .6em; border-radius: 999px; background: var(--celeste); color: var(--teal); font-style: normal; font-family: "Geist Mono", monospace; font-size: .68em; }
/* web: el cursor pulsa «Reservar cita» */
.mini--web { position: relative; }
.web-v { display: grid; gap: .6em; padding: .7em; }
.web-hero { display: grid; grid-template-columns: 1fr 42%; gap: .7em; align-items: center; }
.web-txt { position: relative; display: grid; gap: .45em; }
.web-l { display: block; height: .55em; border-radius: 4px; background: var(--superficie); }
.web-l.corta { width: 62%; }
.web-btn { justify-self: start; margin-top: .3em; padding: .5em 1em; border-radius: 999px; background: var(--tinta); color: #fff; font-weight: 500; }
.web-img { aspect-ratio: 4 / 5; border-radius: .6em; background: linear-gradient(160deg, var(--celeste-2), var(--teal)); }
.cursor-m { position: absolute; left: 3.6em; bottom: -.5em; width: 1.15em; height: 1.4em; background: var(--tinta); clip-path: polygon(0 0, 0 78%, 24% 60%, 40% 96%, 56% 90%, 41% 55%, 72% 55%); animation: web-cursor 4s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes web-cursor { 0% { transform: translate(5em, 3em); opacity: 0; } 15% { opacity: 1; } 42% { transform: none; } 48% { transform: scale(.8); } 54%, 85% { transform: none; opacity: 1; } 100% { transform: translate(5em, 3em); opacity: 0; } }
.web-toast { position: absolute; right: -4%; top: -9%; animation: web-toast 4s ease-in-out infinite; }
@keyframes web-toast { 0%, 48% { opacity: 0; transform: translateY(8px); } 56%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* recovery: el hueco cancelado vuelve a llenarse */
.rc-dia { display: grid; gap: .45em; padding: .8em; }
.rc-slot { display: grid; grid-template-columns: 3.2em 1fr; align-items: center; min-height: 2.5em; padding: 0 .8em; border-radius: .6em; background: var(--superficie); }
.rc-slot i { width: 60%; height: .5em; border-radius: 1em; background: rgba(11, 20, 22, .08); }
.rc-vivo { animation: rc-fondo 4.5s infinite; }
.rc-vivo b { grid-column: 2; grid-row: 1; font-weight: 600; }
.rc-a { color: var(--suave); text-decoration: line-through; animation: rc-a 4.5s infinite; }
.rc-b { color: var(--teal); opacity: 0; animation: rc-b 4.5s infinite; }
@keyframes rc-fondo { 0%, 40% { background: #fdecea; } 55%, 100% { background: var(--celeste); } }
@keyframes rc-a { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes rc-b { 0%, 48% { opacity: 0; transform: translateY(6px); } 58%, 100% { opacity: 1; transform: none; } }
/* nurture: el flujo con el punto que lo recorre */
.mini--flow { position: relative; display: block; width: 92%; }
.mini--flow svg { display: block; width: 100%; overflow: visible; }
.fl-linea { fill: none; stroke: var(--teal); stroke-width: 2; stroke-dasharray: 4 6; }
.fl-punto { fill: var(--vivo); filter: drop-shadow(0 0 6px rgba(34, 243, 254, .9)); }
.fl-nodo { position: absolute; display: grid; justify-items: center; padding: .5em .85em; border-radius: .8em; background: #fff; border: 1px solid var(--linea); box-shadow: 0 14px 28px -18px rgba(11, 20, 22, .45); transform: translate(-50%, -50%); white-space: nowrap; }
.fl-nodo b { font-weight: 600; }
.fl-nodo small { font-family: "Geist Mono", monospace; font-size: .62em; color: var(--teal); }
/* smartmail: ningún correo sin responder */
.mini--mail { justify-items: center; gap: .2em; text-align: center; }
.ml-sobre { position: relative; width: 3em; height: 2.1em; margin-bottom: .4em; border-radius: .35em; border: 2px solid var(--teal); overflow: hidden; }
.ml-sobre::before { content: ""; position: absolute; left: 50%; top: -1.25em; width: 2.1em; height: 2.1em; border: 2px solid var(--teal); transform: translateX(-50%) rotate(45deg); }
.ml-num b { display: block; font-weight: 200; font-size: 4.6em; line-height: .95; letter-spacing: -0.06em; }
.ml-num small { font-size: .9em; }
.ml-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .35em; margin-top: .7em; }
/* seo y sem: el pin de tu clínica en el mapa */
.mini--mapa { position: relative; display: block; width: 84%; padding-bottom: 1.6em; }
.mapa { position: relative; aspect-ratio: 1.5; border-radius: 1em; overflow: hidden; background: #e7f2f2; border: 1px solid var(--linea); }
.calle { position: absolute; background: #fff; }
.calle.c1 { left: -10%; right: -10%; top: 36%; height: 9%; transform: rotate(-8deg); }
.calle.c2 { top: -10%; bottom: -10%; left: 28%; width: 7%; transform: rotate(12deg); }
.calle.c3 { top: -10%; bottom: -10%; left: 72%; width: 5%; transform: rotate(-6deg); }
.pin { position: absolute; left: 52%; top: 50%; display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 50% 50% 50% 0; background: var(--teal); box-shadow: 0 8px 16px -6px rgba(9, 104, 127, .6); transform: translate(-50%, -100%) rotate(-45deg); animation: pin-cae 6s cubic-bezier(.3, 0, .2, 1) infinite; }
.pin b { color: #fff; font-size: .9em; transform: rotate(45deg); }
.pin-sombra { position: absolute; left: 52%; top: 50%; width: 1.7em; height: .55em; border-radius: 50%; background: rgba(9, 104, 127, .22); transform: translate(-50%, -50%); }
.mapa-ficha { position: absolute; left: 7%; right: 7%; bottom: 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .1em .6em; padding: .6em .85em; }
.mapa-ficha b { font-weight: 600; }
.mapa-ficha small { grid-column: 1 / -1; }
.mapa-ficha .estrellas { font-size: .9em; }
/* ── cada portada cuenta cómo funciona su servicio, en bucle ── */
/* panel: entra una cita nueva y el paciente firma */
.pv-nueva { animation: pv-nueva 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes pv-nueva { 0%, 12% { background: var(--superficie); transform: scale(.7); opacity: .4; } 20% { background: var(--vivo); transform: scale(1.12); opacity: 1; } 26%, 88% { background: var(--vivo); transform: none; opacity: 1; } 100% { background: var(--superficie); transform: scale(.7); opacity: .4; } }
.pv-cita { animation: pv-aparece 6s ease infinite; animation-delay: .2s; }
.pv-firma { animation: pv-firma 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes pv-aparece { 0%, 24% { opacity: 0; transform: translateY(6px); } 32%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes pv-firma { 0%, 46% { opacity: 0; transform: scale(.85); } 54%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* whatsapp: escribe el paciente, la IA escribe y responde */
.wa-resp { display: grid; justify-items: end; width: 100%; }
.wa-resp > * { grid-area: 1 / 1; }
.wa-esc { display: flex; gap: 4px; padding: .8em .9em; }
.wa-esc i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: parpadeo 1s infinite; }
.wa-esc i:nth-child(2) { animation-delay: .15s; } .wa-esc i:nth-child(3) { animation-delay: .3s; }
.wa-1 { animation: wa-1 6s ease infinite; }
.wa-esc { animation: wa-esc 6s ease infinite; }
.wa-2 { animation: wa-2 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.wa-3 { animation: wa-3 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes wa-1 { 0%, 6% { opacity: 0; transform: translateY(8px); } 14%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wa-esc { 0%, 20% { opacity: 0; } 24%, 40% { opacity: 1; } 44%, 100% { opacity: 0; } }
@keyframes wa-2 { 0%, 42% { opacity: 0; transform: translateY(8px) scale(.96); } 50%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes wa-3 { 0%, 54% { opacity: 0; transform: scale(.8); } 62%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* voz: la llamada suena, se atiende y queda la cita */
.mini--voz { justify-items: center; }
.voz-av { animation: voz-anillo 1.6s ease-out infinite; }
@keyframes voz-anillo { 0% { box-shadow: 0 0 0 0 rgba(34, 243, 254, .55); } 100% { box-shadow: 0 0 0 14px rgba(34, 243, 254, 0); } }
.voz-cita { animation: voz-cita 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes voz-cita { 0%, 50% { opacity: 0; transform: translateY(10px) scale(.92); } 58%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* aeo: se escribe la pregunta y tu clínica sube al puesto 1 */
.aeo-q { display: inline-block; white-space: nowrap; animation: aeo-escribe 6s steps(34, end) infinite; }
@keyframes aeo-escribe { 0% { clip-path: inset(0 100% 0 0); } 30%, 92% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
.aeo-lista li.top { animation: aeo-sube 6s cubic-bezier(.6, 0, .2, 1) infinite; }
.aeo-lista li.otra { animation: aeo-baja 6s cubic-bezier(.6, 0, .2, 1) infinite; }
.aeo-lista li.top em { animation: aeo-sello 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes aeo-sube { 0%, 36% { transform: translateY(calc(200% + .9em)); box-shadow: none; border-color: var(--linea); } 52%, 92% { transform: scale(1.04); box-shadow: 0 0 0 4px rgba(34, 243, 254, .15), 0 18px 34px -20px rgba(9, 104, 127, .55); border-color: var(--vivo); } 100% { transform: translateY(calc(200% + .9em)); } }
@keyframes aeo-baja { 0%, 36% { transform: translateY(calc(-100% - .45em)); } 52%, 92% { transform: none; } 100% { transform: translateY(calc(-100% - .45em)); } }
@keyframes aeo-sello { 0%, 52% { opacity: 0; transform: scale(.6); } 60%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* recovery: aviso al paciente entre la cancelación y la recuperación */
.mini--recovery { position: relative; }
.rc-msg { position: absolute; left: 50%; bottom: -1.2em; transform: translateX(-50%); white-space: nowrap; background: #fff; border: 1px solid var(--linea); box-shadow: 0 12px 24px -16px rgba(11, 20, 22, .4); animation: rc-msg 4.5s ease infinite; }
@keyframes rc-msg { 0%, 22% { opacity: 0; transform: translate(-50%, 8px); } 30%, 46% { opacity: 1; transform: translate(-50%, 0); } 54%, 100% { opacity: 0; transform: translate(-50%, -6px); } }
/* nurture: cada etapa se enciende cuando llega el mensaje */
.fl-nodo { transition: none; }
.fl-1 { animation: fl-1 4.5s ease infinite; } .fl-2 { animation: fl-2 4.5s ease infinite; } .fl-3 { animation: fl-3 4.5s ease infinite; }
@keyframes fl-1 { 0%, 12% { border-color: var(--vivo); box-shadow: 0 0 0 4px rgba(34, 243, 254, .2), 0 14px 28px -18px rgba(11, 20, 22, .45); } 20%, 100% { border-color: var(--linea); } }
@keyframes fl-2 { 0%, 38% { border-color: var(--linea); } 44%, 56% { border-color: var(--vivo); box-shadow: 0 0 0 4px rgba(34, 243, 254, .2), 0 14px 28px -18px rgba(11, 20, 22, .45); transform: translate(-50%, -50%) scale(1.06); } 64%, 100% { border-color: var(--linea); } }
@keyframes fl-3 { 0%, 76% { border-color: var(--linea); } 82%, 96% { border-color: var(--vivo); box-shadow: 0 0 0 4px rgba(34, 243, 254, .2), 0 14px 28px -18px rgba(11, 20, 22, .45); transform: translate(-50%, -50%) scale(1.06); } 100% { border-color: var(--linea); } }
/* reseñas: se encienden las estrellas y llega la reseña */
.mini--rs { justify-items: center; }
.mini--rs .estrellas i { display: inline-block; font-style: normal; color: var(--tenue); animation: rs-estrella 5s ease infinite; }
.mini--rs .estrellas i:nth-child(1) { animation-delay: .3s; } .mini--rs .estrellas i:nth-child(2) { animation-delay: .45s; } .mini--rs .estrellas i:nth-child(3) { animation-delay: .6s; } .mini--rs .estrellas i:nth-child(4) { animation-delay: .75s; } .mini--rs .estrellas i:nth-child(5) { animation-delay: .9s; }
@keyframes rs-estrella { 0% { color: var(--tenue); transform: none; } 6% { color: #f2b01e; transform: scale(1.35); } 10%, 86% { color: #f2b01e; transform: none; } 94%, 100% { color: var(--tenue); } }
.rs-nueva { animation: rs-nueva 5s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes rs-nueva { 0%, 36% { opacity: 0; transform: translateY(8px); } 44%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* smartmail: la bandeja baja a cero */
.ml-dig { display: block; height: 1em; overflow: hidden; font-weight: 200; font-size: 4.6em; line-height: 1; letter-spacing: -0.06em; }
.ml-dig > span { display: block; height: 1em; animation: ml-cuenta 6s cubic-bezier(.6, 0, .2, 1) infinite; }
@keyframes ml-cuenta { 0%, 12% { transform: none; } 24%, 32% { transform: translateY(-100%); } 42%, 50% { transform: translateY(-200%); } 60%, 92% { transform: translateY(-300%); } 100% { transform: none; } }
.ml-c1, .ml-c2, .ml-c3 { animation: ml-chip 6s cubic-bezier(.2, .8, .2, 1) infinite; }
.ml-c2 { animation-delay: .9s; } .ml-c3 { animation-delay: 1.8s; }
@keyframes ml-chip { 0%, 20% { opacity: 0; transform: translateY(6px); } 26%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; } }
.ml-sobre { animation: ml-sobre 6s ease infinite; }
@keyframes ml-sobre { 0%, 8% { transform: translateY(-6px); } 14% { transform: none; } 100% { transform: none; } }
/* seo y sem: el pin cae en el mapa y aparece la ficha */
@keyframes pin-cae { 0%, 6% { opacity: 0; transform: translate(-50%, -320%) rotate(-45deg); } 16% { opacity: 1; transform: translate(-50%, -100%) rotate(-45deg); } 21% { transform: translate(-50%, -122%) rotate(-45deg); } 26%, 90% { opacity: 1; transform: translate(-50%, -100%) rotate(-45deg); } 100% { opacity: 0; transform: translate(-50%, -100%) rotate(-45deg); } }
.pin-sombra { animation: pin-sombra 6s ease infinite; }
@keyframes pin-sombra { 0%, 6% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 16%, 90% { opacity: 1; transform: translate(-50%, -50%); } 100% { opacity: 0; } }
.mapa-ficha { animation: mapa-ficha 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes mapa-ficha { 0%, 26% { opacity: 0; transform: translateY(10px); } 34%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
/* diagnóstico gratis: tarjeta oscura con la videollamada en marcha */
.svc.svc--diag { --tinta: #eaf7f8; --suave: #9fbcc0; --teal: #5ee9f1; --linea: rgba(234, 247, 248, .2); color: var(--tinta); }
.svc--diag .svc__base, .svc--diag:hover .svc__base { background: radial-gradient(120% 90% at 85% 0%, #0d6a7c 0%, #08414c 40%, #061a1f 85%); }
.svc--diag .svc__nombre { color: #0b1416; }
.svc--diag .svc__nombre span { color: #09687f; }
.svc--diag .chip--ok { background: rgba(34, 243, 254, .16); color: #c4fbfd; }
.mini--diag { justify-items: center; gap: 1.1em; }
.dg-fila { display: flex; align-items: center; gap: 1.1em; }
.mini--diag .avatar { width: 3.6em; height: 3.6em; font-size: .9em; }
.dg-tu { background: #fff; color: #0b1416; }
.dg-ondas { display: flex; align-items: center; gap: 4px; height: 2.6em; }
.dg-ondas i { width: 4px; height: 100%; border-radius: 2px; background: var(--cian); transform: scaleY(.2); animation: onda .8s ease-in-out infinite alternate; }
.dg-ondas i:nth-child(2n) { animation-delay: .2s; } .dg-ondas i:nth-child(3n) { animation-delay: .4s; --h: .6; }
/* anuncios: del anuncio a la cita */
.mini--ads { position: relative; width: 74%; }
.ad-post { display: grid; gap: .55em; padding: .7em; }
.ad-cab { display: flex; align-items: center; gap: .55em; }
.ad-cab div { display: grid; line-height: 1.2; }
.ad-img { display: block; aspect-ratio: 16 / 8; border-radius: .6em; background: linear-gradient(120deg, var(--celeste-2), var(--teal) 55%, var(--vivo)); background-size: 220% 100%; animation: ad-brillo 6s ease-in-out infinite; }
@keyframes ad-brillo { 50% { background-position: 100% 0; } }
.ad-cta { position: relative; display: block; padding: .55em; border-radius: .6em; background: var(--tinta); color: #fff; text-align: center; font-weight: 500; animation: ad-pulsa 6s ease infinite; }
@keyframes ad-pulsa { 0%, 26% { transform: none; } 29% { transform: scale(.95); } 33%, 100% { transform: none; } }
.ad-tap { position: absolute; left: 70%; top: 50%; width: 1.8em; height: 1.8em; margin: -.9em 0 0 -.9em; border-radius: 50%; background: rgba(34, 243, 254, .6); opacity: 0; animation: ad-tap 6s ease-out infinite; }
@keyframes ad-tap { 0%, 24% { opacity: 0; transform: scale(.3); } 28% { opacity: 1; transform: scale(.6); } 40% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; } }
.ad-lead { position: absolute; left: 20%; right: -10%; bottom: -1.8em; animation: ad-lead 6s cubic-bezier(.2, .8, .2, 1) infinite; }
@keyframes ad-lead { 0%, 38% { opacity: 0; transform: translateY(14px) scale(.95); } 46%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* fuera de pantalla, las portadas se detienen */
.svc:not(.en-vista) .mini:not(.mini--flow) *, .svc:not(.en-vista) .mini:not(.mini--flow) *::before { animation-play-state: paused; }

/* lo que necesites */
.mini--cta { place-items: center; width: auto; }
.mini--cta .mas { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 50%; background: #fff; box-shadow: 0 20px 40px -22px rgba(9, 104, 127, .6); color: var(--teal); font-weight: 200; font-size: 3em; line-height: 1; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.svc--cta:hover .mas { transform: rotate(90deg); }
.mini--cta .mas { animation: mas-late 3s ease-in-out infinite; }
@keyframes mas-late { 50% { box-shadow: 0 0 0 12px rgba(34, 243, 254, .14), 0 20px 40px -22px rgba(9, 104, 127, .6); } }

/* ═════ páginas de servicio */
.srv-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(30px, 5vw, 90px); align-items: center; min-height: 100vh; min-height: 100svh; padding: 120px var(--lado) 60px; overflow: hidden; }
.srv-hero__texto { position: relative; z-index: 2; display: grid; gap: 22px; justify-items: start; }
.srv-hero h1 { margin: 0; font-weight: 300; font-size: clamp(2.6rem, 1rem + 4.2vw, 5.8rem); line-height: 1; letter-spacing: -0.05em; text-wrap: balance; }
.srv-hero__sub { margin: 0; max-width: 34rem; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--suave); text-wrap: pretty; }
.volver { color: var(--suave); text-decoration: none; transition: color .2s; }
.volver:hover { color: var(--tinta); }
.srv-hero__vis { position: relative; z-index: 2; width: min(100%, 560px); justify-self: end; }
.svc--grande .mini { zoom: 1.45; width: 76%; }
.svc--grande .svc__foto { opacity: 1; }
.svc--grande .svc__foto:has(video) ~ .svc__obj { display: none; }
.svc--grande .svc__foto video { transform: none; }
.svc--grande .svc__foto img { transform: scale(1.04); }
.svc--grande .svc__foto::after { background: linear-gradient(180deg, rgba(251, 252, 252, 0) 40%, rgba(6, 26, 31, .28) 100%); }
.svc--grande .svc__marco path { stroke: rgba(11, 20, 22, .14); }
.srv-bloque { padding: clamp(80px, 10vw, 150px) var(--lado) 0; }
.beneficios { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.beneficio { display: grid; align-content: start; gap: 12px; padding: 28px 24px 30px; border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); }
.beneficio .mono { color: var(--teal); }
.beneficio h3 { margin: 0; font-weight: 400; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.03em; }
.beneficio p { margin: 0; color: var(--suave); }
.pasos-s { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; border-top: 1px solid var(--linea); }
.pasos-s li { position: relative; display: grid; align-content: start; gap: 10px; padding-top: 34px; }
.pasos-s li::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 5px var(--celeste); }
.pasos-s__num { width: fit-content; font-weight: 300; font-size: clamp(2.8rem, 1.9rem + 2.2vw, 4.4rem); line-height: 1; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(170deg, var(--teal) 15%, rgba(18, 191, 203, .25) 95%); -webkit-background-clip: text; background-clip: text; }
.pasos-s h3 { margin: 0; font-weight: 400; font-size: 1.4rem; letter-spacing: -0.03em; }
.pasos-s p { margin: 0; max-width: 20rem; color: var(--suave); }
.srv-foto { margin: clamp(80px, 10vw, 150px) var(--lado) 0; border-radius: var(--radio); overflow: hidden; aspect-ratio: 21 / 9; }
.srv-foto img { width: 100%; height: 100%; object-fit: cover; }
.resultados-s { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.resultados-s li { display: flex; align-items: center; gap: 22px; padding: 26px 0; border-bottom: 1px solid var(--linea); font-weight: 300; font-size: clamp(1.4rem, 1rem + 1.4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.04em; }
.check-s { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--celeste); }
.check-s::before { content: ""; width: 14px; height: 8px; border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: translate(0, -2px) rotate(-45deg); }
.relacionados { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
.srv-cta { display: grid; justify-items: center; gap: 26px; padding: clamp(110px, 14vw, 200px) var(--lado); text-align: center; }
.srv-cta p { margin: 0; max-width: 34rem; color: var(--suave); }
.srv-cta .circulo { margin-top: 10px; }

/* ═════ páginas legales */
.legal { max-width: 50rem; margin: 0 auto; padding: 150px var(--lado) clamp(90px, 10vw, 140px); }
.legal h1 { margin: 14px 0 10px; font-weight: 300; font-size: clamp(2.6rem, 1.4rem + 3.4vw, 4.6rem); line-height: 1; letter-spacing: -0.05em; }
.legal__fecha { margin: 0 0 28px; color: var(--suave); }
.legal__nav { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.legal__nav a { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--linea); font-size: .9rem; text-decoration: none; transition: background .2s, color .2s; }
.legal__nav a:hover { background: var(--superficie); }
.legal__nav a[aria-current] { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.legal h2 { margin: 44px 0 12px; font-weight: 500; font-size: 1.3rem; letter-spacing: -0.02em; }
.legal p, .legal li { color: var(--suave); line-height: 1.65; }
.legal ul { padding-left: 1.2em; }
.legal li { margin: 6px 0; }
.legal b { color: var(--tinta); font-weight: 500; }
.legal a { color: var(--teal); }
.legal h3 { margin: 26px 0 8px; font-weight: 500; font-size: 1.05rem; letter-spacing: -0.01em; }
.legal__tabla { width: 100%; margin: 14px 0 6px; border-collapse: collapse; font-size: .92rem; }
.legal__tabla th, .legal__tabla td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; line-height: 1.5; }
.legal__tabla th { width: 26%; color: var(--tinta); font-weight: 500; background: var(--superficie); }
.legal__tabla td { color: var(--suave); }
.legal__tabla--cols th { width: auto; }
.legal__tabla--cols td:first-child { font-family: "Geist Mono", monospace; font-size: .82rem; color: var(--tinta); }
.form-legal { margin: 0; font-size: .78rem; line-height: 1.5; color: var(--suave); }
.form-legal a { color: var(--teal); }
.pendiente { padding: 1px 6px; border-radius: 5px; background: #fff3dc; color: #946200; font-weight: 500; }
.privacidad a { color: var(--teal); }

/* blog */
.articulo .volver { display: block; width: fit-content; margin-bottom: 26px; font-size: .8rem; }
.articulo h1 { font-size: clamp(2.2rem, 1.3rem + 2.8vw, 3.8rem); line-height: 1.04; }
.articulo > p:first-of-type { color: var(--tinta); font-size: 1.15rem; }
.articulo strong { color: var(--tinta); font-weight: 500; }
.articulo ol { padding-left: 1.3em; }
.articulo table { width: 100%; margin: 18px 0; border-collapse: collapse; font-size: .94rem; }
.articulo th, .articulo td { padding: 12px 14px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; line-height: 1.5; }
.articulo th { color: var(--tinta); font-weight: 500; background: var(--superficie); }
.articulo td { color: var(--suave); }
.articulo__cta { margin-top: 56px; padding: 26px 28px; border-radius: 22px; background: linear-gradient(135deg, var(--celeste), #eefcfd); }
.articulo__cta p { margin: 0 0 8px; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--teal); }
.articulo__cta a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--tinta); text-decoration: none; }
.articulo__cta b { font-size: 1.5rem; font-weight: 400; letter-spacing: -0.03em; }
.articulo__cta span { color: var(--teal); }
.blog__lead { max-width: 36rem; font-size: 1.15rem; }
.blog__lista { display: grid; gap: 14px; margin-top: 48px; }
.blog__item a { display: grid; gap: 10px; padding: 28px 30px; border: 1px solid var(--linea); border-radius: 22px; background: #fff; color: inherit; text-decoration: none; transition: border-color .3s, transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .5s; }
.blog__item a:hover { border-color: var(--celeste-2, #b5f0f4); transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(9, 104, 127, .35); }
.blog__item span { font-size: .74rem; color: var(--suave); }
.blog__item h2 { margin: 0; font-size: clamp(1.3rem, 1.05rem + .9vw, 1.8rem); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; color: var(--tinta); }
.blog__item p { margin: 0; }
.blog__item b { color: var(--teal); font-weight: 500; }

/* 404 */
.error404 { min-height: 70vh; }
.error404__enlaces { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.error404__enlaces a { padding: 12px 20px; border: 1px solid var(--linea); border-radius: 999px; color: var(--tinta); text-decoration: none; transition: background .2s, border-color .2s; }
.error404__enlaces a:hover { background: var(--celeste); border-color: var(--celeste-2); }
.error404__enlaces a:last-child { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }

/* aviso de cookies (js/medicion.js): aceptar y rechazar con el mismo peso; queda bajo la entrada y la cortina */
.aviso-cookies { --fondo: #fbfcfc; --tinta: #0b1416; --suave: #5b6f73; --linea: rgba(11, 20, 22, .1); --teal: #09687f;
  position: fixed; z-index: 90; left: var(--lado); bottom: 24px; display: grid; gap: 16px; width: min(30rem, calc(100vw - 32px)); padding: 22px 24px;
  border: 1px solid var(--linea); border-radius: var(--radio); background: var(--fondo); box-shadow: var(--sombra); color: var(--tinta);
  opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.aviso-cookies.visible { opacity: 1; transform: none; }
.aviso-cookies p { margin: 0; font-size: .9rem; line-height: 1.55; color: var(--suave); }
.aviso-cookies b { color: var(--tinta); font-weight: 500; }
.aviso-cookies a { color: var(--teal); }
.aviso-cookies__botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pie__legal button { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.pie__legal button:hover { color: var(--tinta); }
@media (max-width: 600px) { .aviso-cookies { left: 16px; bottom: 16px; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .aviso-cookies { transition: none; } }

/* preguntas frecuentes */
.faq__lista { display: grid; 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: 24px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary h3 { margin: 0; font-weight: 400; font-size: clamp(1.15rem, 1rem + .6vw, 1.6rem); letter-spacing: -0.03em; line-height: 1.2; }
.faq__item summary::after { content: ""; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2309687f' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat; transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .3s; }
.faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--celeste); }
.faq__item p { max-width: 52rem; margin: -6px 0 26px; color: var(--suave); font-size: 1.05rem; line-height: 1.6; }
.faq--home { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 90px); align-items: start; padding-top: clamp(60px, 7vw, 100px); padding-bottom: clamp(70px, 8vw, 120px); }
.faq--home .cabecera { position: sticky; top: 110px; margin: 0; gap: 12px; }
.faq--home .titulo { font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem); }
.faq--home .faq__item summary { padding: 16px 0; }
.faq--home .faq__item summary h3 { font-size: clamp(1rem, .95rem + .3vw, 1.18rem); letter-spacing: -0.015em; }
.faq--home .faq__item summary::after { width: 28px; height: 28px; background-size: 13px; }
.faq--home .faq__item p { margin: -4px 0 18px; font-size: .95rem; line-height: 1.55; }
/* prueba con cifras en la portada */
.portada__prueba { margin: 0; max-width: 30rem; color: var(--suave); font-size: .92rem; }
.portada__prueba b { color: var(--teal); font-weight: 600; }
/* índice de servicios como página */
.servicios--hub { padding-top: 92px; }
.servicios__lead { margin: 0; max-width: 40rem; color: var(--suave); font-size: clamp(1rem, .95rem + .25vw, 1.15rem); }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* menú del móvil */
.barra__menu { display: none; }
.menu-movil { position: fixed; inset: 0; z-index: 25; display: grid; align-content: space-between; gap: 30px; padding: 92px var(--lado) 34px; background: #fbfcfc; color: #0b1416; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .55s cubic-bezier(.7, 0, .2, 1), visibility 0s .55s; }
.menu-movil-abierto .menu-movil { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s cubic-bezier(.2, .8, .2, 1); }
.menu-movil__nav { display: grid; }
.menu-movil__nav > a, .menu-movil__serv summary { display: block; padding: 14px 0; border-bottom: 1px solid rgba(11, 20, 22, .1); font-weight: 300; font-size: 2rem; letter-spacing: -0.04em; text-decoration: none; list-style: none; cursor: pointer; }
.menu-movil__serv summary::-webkit-details-marker { display: none; }
.menu-movil__serv[open] summary { color: #09687f; }
.menu-movil__serv .mono { margin: 16px 0 4px; color: #09687f; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.menu-movil__sub { display: block; padding: 8px 0; font-size: 1.05rem; text-decoration: none; }
.menu-movil__nav > *, .menu-movil > .boton { opacity: 0; transform: translateY(16px); transition: opacity .2s, transform .2s; }
.menu-movil-abierto .menu-movil__nav > *, .menu-movil-abierto .menu-movil > .boton { opacity: 1; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .8, .2, 1); }
.menu-movil-abierto .menu-movil__nav > :nth-child(1) { transition-delay: .12s; } .menu-movil-abierto .menu-movil__nav > :nth-child(2) { transition-delay: .17s; } .menu-movil-abierto .menu-movil__nav > :nth-child(3) { transition-delay: .22s; } .menu-movil-abierto .menu-movil__nav > :nth-child(4) { transition-delay: .27s; } .menu-movil-abierto .menu-movil__nav > :nth-child(5) { transition-delay: .32s; } .menu-movil-abierto .menu-movil > .boton { transition-delay: .38s; }
.menu-movil-abierto { overflow: hidden; }

/* cortina entre páginas */
.cortina { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; background: linear-gradient(150deg, var(--celeste) 0%, #f3fdfd 55%, #fbfcfc 100%); transform: translateY(100%); pointer-events: none; }
.con-cortina .cortina { transform: none; }
.cortina__nombre { font-weight: 600; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.02em; color: var(--tinta); }

/* ═════ proceso: pista horizontal */
.proceso { position: relative; height: 290vh; }
.proceso__fijo { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: clamp(22px, 4vh, 44px); padding: 92px 0 36px; perspective: 1800px; }
.proceso__cabeza { display: grid; gap: 16px; padding: 0 var(--lado); }
.proceso__pista { display: flex; gap: clamp(16px, 2vw, 28px); width: max-content; padding: 0 var(--lado) 0 calc(var(--lado) + 30vw); transform-style: preserve-3d; }
.fase { position: relative; flex: none; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 14px; width: clamp(300px, 34vw, 520px); padding: clamp(22px, 2.2vw, 34px); border-radius: var(--radio); background: #fff; border: 1px solid var(--linea); box-shadow: var(--sombra); overflow: hidden; }
.fase__num { position: absolute; z-index: 1; top: 14px; right: 22px; font-weight: 300; font-size: clamp(3.6rem, 2.6rem + 2.6vw, 6rem); line-height: 1; letter-spacing: -0.07em; font-variant-numeric: tabular-nums; color: transparent; background: linear-gradient(170deg, var(--vivo) 10%, rgba(18, 191, 203, .1) 92%); -webkit-background-clip: text; background-clip: text; }
.fase h3 { margin: 0; font-weight: 400; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.2rem); line-height: 1.05; letter-spacing: -0.035em; }
.fase p { margin: 0; color: var(--suave); max-width: 28rem; }
.fase__ui { position: relative; min-height: 0; border-radius: 16px; background: var(--superficie); overflow: hidden; }
.fase__ui small { position: absolute; left: 16px; bottom: 14px; color: var(--suave); }
.ui-llamada { display: flex; align-items: center; justify-content: center; gap: 18px; }
.av-g { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(140deg, var(--teal), var(--vivo)); color: #fff; font-weight: 600; font-size: .9rem; }
.av-g--tu { background: #fff; color: var(--tinta); border: 1px solid var(--linea); }
.ondas { display: flex; align-items: center; gap: 4px; height: 46px; }
.ondas i { width: 4px; height: 100%; border-radius: 2px; background: var(--vivo); transform: scaleY(.15); }
.fase.activa .ondas i { animation: onda .9s ease-in-out infinite alternate; }
.ondas i:nth-child(2n) { animation-delay: .2s; } .ondas i:nth-child(3n) { animation-delay: .4s; }
@keyframes onda { to { transform: scaleY(var(--h, 1)); } }
.ui-marca { display: grid; place-content: center; justify-items: center; gap: 20px; padding: 16px; }
.muestras { display: flex; }
.muestras i { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; margin-left: -20px; transition: margin .9s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 6px 16px -8px rgba(11, 20, 22, .3); }
.muestras i:first-child { margin-left: 0; }
.muestras i:nth-child(1) { background: var(--celeste-2); } .muestras i:nth-child(2) { background: var(--cian); } .muestras i:nth-child(3) { background: var(--teal); } .muestras i:nth-child(4) { background: var(--tinta); }
.fase.activa .muestras i:not(:first-child) { margin-left: 10px; }
.ui-marca .etis { justify-content: center; }
.ui-nodos { display: flex; align-items: center; padding: 0 18px; }
.ui-nodos span { flex: none; padding: 9px 12px; border-radius: 12px; background: #fff; border: 1px solid var(--linea); font-size: .82rem; font-weight: 500; box-shadow: 0 8px 18px -12px rgba(11, 20, 22, .4); }
.ui-nodos i { position: relative; flex: 1; height: 1px; margin: 0 6px; background: repeating-linear-gradient(90deg, var(--tenue) 0 4px, transparent 4px 8px); }
.ui-nodos i::after { content: ""; position: absolute; top: -3px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--vivo); box-shadow: 0 0 0 4px rgba(34, 243, 254, .22); opacity: 0; }
.fase.activa .ui-nodos i::after { animation: viaja 1.6s cubic-bezier(.6, 0, .4, 1) infinite; }
.ui-nodos i:nth-of-type(2)::after { animation-delay: .8s; }
@keyframes viaja { 0% { left: 0; opacity: 0; } 15%, 85% { opacity: 1; } 100% { left: calc(100% - 7px); opacity: 0; } }
.ui-mejora { display: grid; align-items: end; padding: 24px 24px 46px; }
.barritas { display: flex; align-items: flex-end; gap: 8px; height: min(130px, 100%); }
.barritas i { flex: 1; height: calc(var(--h) * 100%); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, var(--vivo), var(--teal)); transform-origin: bottom; transform: scaleY(0); transition: transform 1s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--d) * 90ms); }
.fase.activa .barritas i { transform: scaleY(1); }
.proceso__barra { margin: 0 var(--lado); height: 1px; background: var(--linea); }
.proceso__barra i { display: block; height: 100%; background: var(--teal); transform-origin: left; transform: scaleX(0); }

/* ═════ resultados */
.resultados { position: relative; padding: clamp(60px, 8vw, 120px) var(--lado) clamp(48px, 5vw, 80px); }
.resultados::before { content: ""; position: absolute; top: -10%; right: -15%; width: 70vw; height: 70vw; border-radius: 50%; background: radial-gradient(circle, rgba(34, 243, 254, .13), transparent 62%); opacity: 0; transition: opacity 1.2s; pointer-events: none; }
.oscuro .resultados::before { opacity: 1; }
.resultados > * { position: relative; }
.oscuro .odometro { filter: drop-shadow(0 0 26px rgba(34, 243, 254, .28)); }
.cifras { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--linea); }
.cifra { padding: 36px 30px 0 0; }
.cifra + .cifra { padding-left: 30px; border-left: 1px solid var(--linea); }
.odometro { display: flex; align-items: baseline; margin: 0 0 12px; font-weight: 200; font-size: clamp(3.6rem, 2rem + 5vw, 7.6rem); line-height: 1; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.odometro small { font-size: .3em; letter-spacing: -0.02em; color: var(--suave); font-weight: 400; margin-left: .3em; }
.digito { display: inline-block; height: 1em; overflow: hidden; }
.digito > span { display: flex; flex-direction: column; }
.digito > span > span { height: 1em; }
.cifra > p:last-child { margin: 0; max-width: 16rem; color: var(--suave); }
.nota { margin: 30px 0 0; color: var(--suave); }
.resultados__cabeza { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-bottom: clamp(40px, 5vw, 80px); }
.resultados__cabeza .cabecera { margin: 0; }
.resultados__cliente { display: grid; justify-items: center; gap: 10px; flex: none; margin: 0 clamp(0px, 9vw, 170px) 0 0; }
.resultados__cliente img { width: clamp(150px, 15vw, 230px); height: auto; opacity: .92; }
.resultados__cliente figcaption { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--suave); }
.cifra { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: start; }
.cifra > p { grid-column: 1; }
.cifra__anim { grid-column: 2; grid-row: 1 / span 2; position: relative; width: clamp(108px, 9vw, 150px); aspect-ratio: 1; margin-top: 4px; }
/* 460 · conversaciones: burbujas que llegan y la IA contesta */
.anim-chat { display: grid; align-content: end; gap: 7px; height: 100%; padding-bottom: 30px; }
.anim-chat i { display: block; height: 14px; border-radius: 9px; opacity: 0; transform: translateY(8px) scale(.92); animation: burbuja-dato 4.8s cubic-bezier(.2, .8, .2, 1) infinite; }
.anim-chat .entra { width: 62%; background: rgba(255, 255, 255, .14); border-bottom-left-radius: 3px; }
.anim-chat .sale { width: 70%; justify-self: end; background: linear-gradient(120deg, var(--vivo), var(--cian)); border-bottom-right-radius: 3px; box-shadow: 0 0 18px rgba(34, 243, 254, .35); }
.anim-chat i:nth-child(2) { animation-delay: .5s; } .anim-chat i:nth-child(3) { animation-delay: 1.3s; } .anim-chat i:nth-child(4) { animation-delay: 1.8s; }
.orbe { position: absolute; left: 0; bottom: 0; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--cian) 45%, var(--teal)); box-shadow: 0 0 14px rgba(34, 243, 254, .7); }
.orbe::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid rgba(34, 243, 254, .6); animation: pulso 2.4s ease-out infinite; }
.anim-chat b { position: absolute; left: 30px; bottom: 4px; font: 500 .62rem/1 "Geist Mono", monospace; letter-spacing: .08em; color: var(--cian); opacity: .8; }
@keyframes burbuja-dato { 0%, 6% { opacity: 0; transform: translateY(8px) scale(.92); } 14%, 78% { opacity: 1; transform: none; } 90%, 100% { opacity: 0; transform: translateY(-6px); } }
@keyframes pulso { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
/* 33 · citas: el calendario se llena */
.anim-agenda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: center; height: 100%; }
.anim-agenda span { aspect-ratio: 1; border-radius: 6px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .08); }
.anim-agenda .cita { position: relative; animation: cita 5.6s ease infinite; }
.anim-agenda .cita::after { content: ""; position: absolute; inset: 28% 24% 34%; border: solid #061a1f; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0); animation: tilde 5.6s ease infinite; animation-delay: inherit; }
@keyframes cita { 0%, 8% { background: rgba(255, 255, 255, .07); box-shadow: none; } 16%, 82% { background: var(--cian); border-color: var(--cian); box-shadow: 0 0 14px rgba(34, 243, 254, .45); } 95%, 100% { background: rgba(255, 255, 255, .07); } }
@keyframes tilde { 0%, 10% { transform: rotate(-45deg) scale(0); } 18%, 82% { transform: rotate(-45deg) scale(1); } 92%, 100% { transform: rotate(-45deg) scale(0); } }
/* 6 de 10 · con la clínica cerrada: noche y 6 puntos encendidos */
.anim-noche { height: 100%; }
.anim-noche .luna { position: absolute; top: 2px; right: 6px; width: 30px; height: 30px; border-radius: 50%; box-shadow: inset -8px -3px 0 0 #dff9fb; transform: rotate(-20deg); filter: drop-shadow(0 0 10px rgba(223, 249, 251, .5)); animation: flota 6s ease-in-out infinite; }
.anim-noche .estrella { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; animation: titila 3s ease-in-out infinite; }
.anim-noche .puntos { position: absolute; left: 0; right: 0; bottom: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.anim-noche .puntos span { aspect-ratio: 1; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.anim-noche .puntos .on { animation: enciende 5s ease infinite; }
@keyframes enciende { 0%, 6% { background: rgba(255, 255, 255, .1); box-shadow: none; } 14%, 84% { background: var(--cian); box-shadow: 0 0 12px rgba(34, 243, 254, .7); } 96%, 100% { background: rgba(255, 255, 255, .1); } }
@keyframes titila { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
@keyframes flota { 0%, 100% { transform: rotate(-20deg) translateY(0); } 50% { transform: rotate(-20deg) translateY(-4px); } }

/* ═════ caso */
.caso { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 5vw, 90px); align-items: center; padding: 0 var(--lado) clamp(110px, 14vw, 200px); }
.caso__foto { margin: 0; border-radius: var(--radio); overflow: hidden; aspect-ratio: 16 / 11; }
.caso__foto img { width: 100%; height: 100%; object-fit: cover; }
/* testimonio en video: portada con botón; al pulsar suena con controles */
.caso__video { position: relative; justify-self: end; width: min(100%, 440px); aspect-ratio: 4 / 5; background: #000; }
.caso__video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.caso__video video::cue { background: rgba(6, 26, 31, .72); color: #fff; font-family: "Geist", sans-serif; font-size: .95em; }
.caso__play { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 14px; border: 0; background: linear-gradient(180deg, rgba(6, 26, 31, 0) 40%, rgba(6, 26, 31, .55)); color: #fff; font: 500 1rem "Geist", system-ui; cursor: pointer; transition: opacity .4s; }
.caso__play span { position: relative; width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .22); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .5); transition: transform .5s cubic-bezier(.2, .8, .2, 1), background .3s; }
.caso__play span::before { content: ""; position: absolute; left: 50%; top: 50%; border-style: solid; border-width: 11px 0 11px 18px; border-color: transparent transparent transparent #fff; transform: translate(-35%, -50%); }
.caso__play span::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(34, 243, 254, .7); animation: latido 2.2s ease-out infinite; }
.caso__play:hover span { transform: scale(1.08); background: rgba(34, 243, 254, .35); }
.caso__video.sonando .caso__play { opacity: 0; pointer-events: none; }
blockquote { margin: 0 0 22px; font-weight: 300; font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.8rem); line-height: 1.15; letter-spacing: -0.035em; text-wrap: balance; }
.caso__autor { margin: 0 0 30px; font-size: .9rem; color: var(--suave); }
.caso__lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.caso__lista li { display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid var(--linea); }
.caso__lista .mono { color: var(--teal); padding-top: 3px; }

/* ═════ cierre */
.cierre { position: relative; display: grid; justify-items: center; gap: clamp(40px, 6vw, 80px); padding: 0 var(--lado) clamp(100px, 12vw, 180px); overflow: hidden; }
.cierre__cinta { width: 100vw; overflow: hidden; padding: 10px 0; }
.cierre__cinta div { display: flex; gap: 6vw; width: max-content; animation: corre 26s linear infinite; }
.cierre__cinta span { display: inline-flex; align-items: center; gap: 6vw; font-weight: 500; font-size: clamp(3.4rem, 1.6rem + 7vw, 9.2rem); letter-spacing: -0.055em; line-height: 1.05; white-space: nowrap; }
.cierre__cinta span::after { content: "✦"; font-size: .32em; color: var(--vivo); }
.cierre__cinta span:nth-child(even) { color: transparent; background: linear-gradient(90deg, var(--teal) 0%, var(--vivo) 55%, var(--cian) 100%); -webkit-background-clip: text; background-clip: text; }
.circulo { position: relative; display: grid; place-items: center; width: clamp(150px, 15vw, 210px); aspect-ratio: 1; border-radius: 50%; background: var(--tinta); color: #fff; text-decoration: none; text-align: center; font-weight: 500; font-size: 1.05rem; line-height: 1.2; overflow: hidden; isolation: isolate; margin-top: -40px; }
.circulo::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: linear-gradient(140deg, var(--teal), var(--vivo)); transform: scale(0); transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.circulo:hover::before { transform: scale(1); }
.formulario { display: grid; gap: 16px; width: min(100%, 44rem); padding: clamp(26px, 4vw, 56px); border-radius: var(--radio); background: linear-gradient(160deg, var(--celeste) 0%, #f3fdfd 55%, var(--superficie) 100%); }
.formulario__sub { margin: 0 0 6px; color: var(--suave); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campos label { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; background: rgba(255, 255, 255, .85); border: 1px solid transparent; transition: border-color .16s; }
.campos label:focus-within { border-color: var(--teal); }
.campos span { font-size: .75rem; color: var(--suave); }
.campos input { border: 0; outline: 0; background: transparent; color: var(--tinta); font: 16px "Geist", system-ui; }
.privacidad { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--suave); }
.privacidad input { width: 18px; height: 18px; accent-color: var(--teal); }
.formulario .boton { justify-self: start; }
.formulario__nota { margin: 0; color: var(--teal); }

/* ═════ pie */
.pie { padding: clamp(50px, 6vw, 90px) var(--lado) 34px; border-top: 1px solid var(--linea); overflow: hidden; }
.pie__marca { margin: 0 0 clamp(30px, 4vw, 60px); font-weight: 200; font-size: clamp(4rem, 1rem + 13vw, 16rem); line-height: .85; letter-spacing: -0.065em; white-space: nowrap; }
.pie__marca .l { display: inline-block; transition: translate .5s cubic-bezier(.2, .8, .2, 1), color .3s; }
.pie__marca .l:hover { translate: 0 -.12em; color: var(--teal); }
.pie__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: .9rem; color: var(--suave); }
.pie__fila p { margin: 0; }
.pie__fila nav { display: flex; gap: 24px; }
.pie__fila a { text-decoration: none; }
.pie__fila a:hover { color: var(--tinta); }

/* movimiento: sin JS todo queda visible */
.js .entra { opacity: 0; transform: translateY(30px); }
.js .revela { clip-path: inset(0 100% 0 0); }
.linea-m { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.linea-m > span { display: block; }

@media (max-width: 960px) {
  .barra__nav { display: none; }
  .barra__menu { display: grid; place-content: center; gap: 6px; flex: none; width: 40px; height: 40px; margin-left: 2px; padding: 0; border: 0; border-radius: 50%; background: var(--superficie); cursor: pointer; }
  .barra__menu span { display: block; width: 17px; height: 1.5px; background: var(--tinta); transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
  .menu-movil-abierto .barra__menu span:first-child { transform: translateY(3.75px) rotate(45deg); }
  .menu-movil-abierto .barra__menu span:last-child { transform: translateY(-3.75px) rotate(-45deg); }
  .faq__item summary h3 { font-size: 1.1rem; }
  .megamenu { display: none; }
  .barra { gap: 12px; height: 64px; } .barra .boton { margin-left: auto; height: 38px; padding: 0 16px; font-size: .86rem; }
  .portada { padding-top: 100px; }
  .portada__grid { grid-template-columns: minmax(0, 1fr); }
  .cambia { display: block; white-space: normal; min-height: 1.96em; }
  .vidrios { height: 530px; margin-top: 10px; }
  .vidrio--chat { left: 0; width: 92%; }
  .vidrio--cita { top: 318px; }
  .vidrio--aviso { left: 4%; top: 420px; bottom: auto; }
  .recorrido { height: 320vh; }
  .recorrido__velo { background: linear-gradient(0deg, rgba(251, 252, 252, .96) 0%, rgba(251, 252, 252, .82) 40%, rgba(251, 252, 252, 0) 64%); }
  .recorrido__textos { left: var(--lado); right: var(--lado); width: auto; top: auto; bottom: 74px; height: 44%; align-items: end; }
  .recorrido__texto h3 { font-size: 1.9rem; margin: 10px 0; }
  .recorrido__texto p { font-size: .95rem; }
  .recorrido__ui { left: var(--lado); right: var(--lado); width: auto; top: 102px; bottom: auto; zoom: .82; }
  .recorrido__pasos { bottom: 22px; gap: 8px; }
  .recorrido__pasos li { width: 74px; font-size: .6rem; }
  .recorrido__ejemplo { top: 72px; right: 12px; padding: 3px 8px; font-size: .58rem; }
  /* móvil: en vez de pastillas, las fichas en un carrusel que se desliza con el dedo */
  .vitrina { padding: 0; margin-top: -24px; }
  .nube__pastillas { display: none; }
  .nube__burbujas { position: static; display: flex; gap: 14px; width: 100vw; margin-left: calc(50% - 50vw); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lado); padding: 6px var(--lado) 26px; pointer-events: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .nube__burbujas::-webkit-scrollbar { display: none; }
  .nube__burbujas::before, .nube__puente { display: none; }
  .burbuja { position: relative; flex: 0 0 min(78vw, 340px); opacity: 1; visibility: visible; transform: none !important; pointer-events: auto; scroll-snap-align: start; filter: none; }
  .servicios__cabeza { flex-direction: column; align-items: flex-start; }
  .servicios__cuenta { justify-items: start; text-align: left; }
  .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .srv-hero { grid-template-columns: minmax(0, 1fr); padding-top: 100px; }
  .srv-hero__vis { justify-self: center; width: min(100%, 440px); }
  .beneficios, .relacionados { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasos-s { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .srv-foto { aspect-ratio: 4 / 3; }
  .proceso { height: auto; }
  .proceso__fijo { position: relative; height: auto; overflow: visible; padding: 90px 0 20px; }
  .proceso__pista { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--lado) 20px; scrollbar-width: none; }
  .fase { width: 84vw; min-height: 460px; scroll-snap-align: center; }
  .proceso__barra { display: none; }
  .cifras { grid-template-columns: 1fr; }
  .cifra + .cifra { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea); }
  .cifra { padding-bottom: 28px; }
  .resultados__cabeza { flex-direction: column; align-items: flex-start; gap: 24px; }
  .resultados__cliente { justify-items: start; margin: 0; }
  .cifra__anim { width: 96px; }
  .faq--home { grid-template-columns: 1fr; }
  .faq--home .cabecera { position: static; }
  .caso { grid-template-columns: 1fr; }
  .campos { grid-template-columns: 1fr; }
  .legal__tabla--cols { display: block; overflow-x: auto; }
}
@media (max-width: 600px) {
  .svc__nombre { font-size: .95rem; }
  .indice { grid-template-columns: minmax(0, 1fr); }
  .beneficios, .relacionados, .pasos-s { grid-template-columns: minmax(0, 1fr); }
  .svc--grande .mini { zoom: 1.15; }
}
/* sin movimiento: el recorrido queda como una escena fija */
.quieto .recorrido { height: 100vh; }
.quieto .recorrido__frase { display: none; }
.quieto .recorrido__texto:first-child, .quieto .vidrio-v:first-child { visibility: visible; }
.quieto .recorrido__velo, .quieto .recorrido__pasos, .quieto .recorrido__ejemplo { opacity: 1; }
.quieto .vidrio-v .barras-v i { transform: scaleX(var(--v)); }
@media (prefers-reduced-motion: reduce) {
  .pastilla { animation: none; }
  .cifra__anim *, .cifra__anim *::before, .cifra__anim *::after { animation: none !important; opacity: 1 !important; transform: none !important; }
  .js .entra { opacity: 1; transform: none; } .js .revela { clip-path: none; } .js .portada h1 .linea-m > span { transform: none; }
  .aurora i, .cinta__pista, .cierre__cinta div, .barrita i, .check svg, .punto::after, .fase.activa .ondas i, .fase.activa .ui-nodos i::after, .ondas-m i, .pv-grilla i.on, .mini--wa .burb.ia, .cursor-m, .web-toast, .rc-vivo, .rc-a, .rc-b, .pin { animation: none; }
  .check svg { stroke-dashoffset: 0; }
}