/* Menentum: estilos de la portada */

/* ---------- Portada ---------- */
.portada{position:relative;overflow-x:clip;padding:calc(var(--tope) + clamp(40px,6vw,88px)) 0 clamp(96px,10vw,150px);background:radial-gradient(min(560px,60vw) circle at 78% 52%,rgba(230,57,70,.26),rgba(230,57,70,0) 100%),var(--negro)}
@media (max-width:1000px){.portada{background:radial-gradient(min(420px,80vw) circle at 50% 22%,rgba(230,57,70,.26),rgba(230,57,70,0) 100%),var(--negro)}}
.portada-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,4vw,64px);align-items:center}
.portada h1{margin:22px 0 24px;max-width:13.5ch}
.portada .entradilla{color:#DCCFC9}
.portada .entradilla strong{color:var(--crema)}
.portada .acciones{margin-top:32px}
/* Franja de la oferta de lanzamiento, justo debajo de la cabecera (desaparece sola cuando no quedan plazas) */
.franja-oferta{position:fixed;top:var(--alto-cab);left:0;right:0;z-index:59;height:var(--alto-franja);background:linear-gradient(90deg,var(--vino),var(--rojo-boton) 50%,var(--vino));color:#fff;box-shadow:0 12px 30px -16px rgba(214,42,58,.7)}
.franja-oferta p{height:100%;max-width:var(--ancho);margin:0 auto;padding:0 var(--margen);display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;font-size:.9rem;line-height:1.2}
.f-corta{display:none}
@media (max-width:760px){.franja-oferta .f-larga{display:none}.franja-oferta .f-corta{display:inline}.franja-oferta p{font-size:.8rem;gap:5px}.franja-plazas{font-size:.72rem;padding:1px 8px;margin:0 2px}}
@media (max-width:370px){.franja-oferta p{font-size:.74rem}}
.franja-plazas{display:inline-block;margin:0 4px;padding:1px 10px;border-radius:999px;background:#fff;color:var(--rojo-texto);font-weight:800;font-size:.8rem;white-space:nowrap}
.franja-oferta a{color:#fff;font-weight:700;white-space:nowrap;text-underline-offset:3px}
/* Cuatro ventajas bajo los botones, en columnas iguales. Al aparecer: la línea roja se dibuja, la palabra sube y el 90 cuenta */
.sellos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:46px;border-top:1px solid var(--linea-osc)}
.sellos li{position:relative;padding:20px 12px 0 16px;border-left:1px solid var(--linea-osc)}
.sellos li:first-child{padding-left:0;border-left:0}
.sellos li::before{content:"";position:absolute;left:0;right:0;top:-1px;height:2px;background:linear-gradient(90deg,var(--rojo),rgba(230,57,70,0) 85%);transform-origin:left}
.sello-t{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em;font-weight:800;font-size:clamp(1.3rem,1rem + .7vw,1.6rem);line-height:1.1;letter-spacing:-.035em;color:var(--crema);white-space:nowrap}
.sello-t>span{display:inline-block}
.sello-t .mas{display:inline-block;margin-left:.03em;color:var(--rojo-claro);transition:opacity .35s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
.espera+.mas{opacity:0;transform:scale(.2) translateY(-.3em)}
.sello-d{display:block;margin-top:8px;font-size:.84rem;line-height:1.4;color:#C9BAB4}
.sellos li::before,.sello-t>span,.sello-d{transition:transform 1s var(--ease),opacity 1s var(--ease);transition-delay:calc(var(--i) * 130ms + 200ms)}
.sello-d{transition-delay:calc(var(--i) * 130ms + 420ms)}
.js .sellos:not(.visto) li::before{transform:scaleX(0)}
.js .sellos:not(.visto) .sello-t>span{transform:translateY(110%)}
.js .sellos:not(.visto) .sello-d{opacity:0;transform:translateY(8px)}
.portada-logo{display:grid;justify-items:center;gap:22px;min-width:0}
.portada-logo .lema{max-width:100%;overflow:hidden}
.logo-escena{position:relative;width:min(100%,560px);isolation:isolate}
.logo-animado{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 34px 60px rgba(214,42,58,.32))}
/* Niebla eléctrica (js/niebla.js): más grande que el logo, por detrás, y aparece suave cuando arranca */
.niebla{position:absolute;left:-45%;top:-58%;width:190%;height:200%;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.2s ease}
.niebla.activa{opacity:1}
.logo-animado g{transform-box:fill-box;transform-origin:center}
.portada-logo .lema{color:#E9E1DA;font-size:clamp(.66rem,.55rem + .35vw,.82rem)}
@media (prefers-reduced-motion:no-preference){
  .logo-animado .m-ala-i{animation:ala-i 1s var(--ease) .15s both}
  .logo-animado .m-ala-d{animation:ala-d 1s var(--ease) .3s both}
  .logo-animado .m-cinta{animation:cinta 1.1s cubic-bezier(.65,0,.35,1) .65s both}
  .logo-animado .m-brillo rect{animation:brillo-cinta 1.1s cubic-bezier(.4,0,.2,1) 1.6s both;transform-box:fill-box;transform-origin:center}
  .portada-logo .lema{animation:lema 1s var(--ease) 1.9s both}
}
.logo-animado .m-brillo rect{transform:rotate(30deg) translateX(-100px)}
@keyframes ala-i{from{opacity:0;transform:translateX(-90px) rotate(-8deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes ala-d{from{opacity:0;transform:translateX(90px) rotate(8deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes cinta{from{clip-path:polygon(-12% -12%,-12% -12%,-12% -12%);transform:translateY(-12px)}to{clip-path:polygon(-12% -12%,250% -12%,-12% 250%);transform:none}}
@keyframes brillo-cinta{from{transform:rotate(30deg) translateX(-100px)}to{transform:rotate(30deg) translateX(1250px)}}
@keyframes lema{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (max-width:1000px){
  .portada-grid{grid-template-columns:minmax(0,1fr)}
  .portada-logo{margin-top:8px}
  .logo-escena{width:min(70%,380px)}
}
@media (max-width:560px){
  .portada .acciones .btn{flex:1 1 100%}
  .sellos{grid-template-columns:1fr 1fr}
  .sellos li:nth-child(odd){padding-left:0;border-left:0}
  .sellos li:nth-child(n+3){margin-top:22px;border-top:1px solid var(--linea-osc)}
}

/* ---------- Así te ven en Google (simulador) ---------- */
/* Fondo con vida: crema cálido, un resplandor rojo detrás del móvil y un plano de calles que se dibuja al llegar */
.google{--arriba:clamp(110px,12vw,170px);--tr-alto:clamp(120px,15vw,230px);padding-top:var(--arriba);padding-bottom:calc(var(--tr-alto) + 24px);background:radial-gradient(48% 62% at 80% 56%,rgba(230,57,70,.13),rgba(230,57,70,0) 72%),linear-gradient(180deg,var(--crema) 0%,#F1E7DB 100%)}
@media (max-width:1000px){.google{background:radial-gradient(95% 36% at 50% 80%,rgba(230,57,70,.13),rgba(230,57,70,0) 72%),linear-gradient(180deg,var(--crema) 0%,#F1E7DB 100%)}}
.google-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:center}
.google-texto .entradilla{margin:20px 0 0}

/* El formulario es una frase que se rellena: "Tengo [un restaurante] en [Cullera] y se llama [Tu negocio]" */
.sim-frase{margin:30px 0 0}
.sim-frase p{position:relative;margin:0;font-size:clamp(1.3rem,1.02rem + .95vw,1.8rem);font-weight:500;line-height:1.85;letter-spacing:-.02em;color:var(--tinta)}
.sim-hueco{display:inline-block;margin:0 .05em;vertical-align:baseline}
.sim-hueco select,.sim-hueco input,.sim-regla{font:inherit;font-weight:750;letter-spacing:-.02em}
.sim-hueco select,.sim-hueco input{appearance:none;-webkit-appearance:none;max-width:100%;height:1.5em;margin:0;padding:0 .4em;border:0;border-bottom:2px solid var(--rojo);border-radius:.3em .3em .1em .1em;background-color:rgba(230,57,70,.09);color:var(--rojo-texto);line-height:1.5;vertical-align:baseline;cursor:pointer;transition:background-color .2s}
.sim-hueco select{padding-right:1.25em;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Cpath d='m2 4.2 4 4 4-4' fill='none' stroke='%23B3141F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .38em center;background-size:.5em}
.sim-hueco input{min-width:4ch;cursor:text}
.sim-hueco input::placeholder{color:rgba(179,20,31,.5);opacity:1}
.sim-hueco select:hover,.sim-hueco input:hover{background-color:rgba(230,57,70,.16)}
.sim-hueco select:focus-visible,.sim-hueco input:focus-visible{outline:3px solid rgba(230,57,70,.4);outline-offset:3px}
.sim-regla{position:absolute;left:0;top:0;visibility:hidden;white-space:pre;pointer-events:none}

/* Lo que trabajo, con los mismos números que señalan el móvil */
.sim-claves-t{margin:36px 0 14px;font-size:.88rem;font-weight:700;color:var(--tinta)}
.sim-claves{list-style:none;display:grid;gap:12px;max-width:52ch}
.sim-claves li{display:flex;align-items:flex-start;gap:14px;font-size:1rem;line-height:1.5;color:var(--gris);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:calc(var(--i) * 140ms)}
.sim-claves b{color:var(--tinta);font-weight:700}
.js .sim-claves:not(.visto) li{opacity:0;transform:translateX(-14px)}
.sim-num{flex:none;display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--rojo-boton);color:#fff;font-size:.78rem;font-weight:800;line-height:1;box-shadow:0 0 0 5px rgba(230,57,70,.14)}
.sim-nota{margin:26px 0 0;max-width:58ch;font-size:.8rem;line-height:1.5;color:var(--gris)}

/* El móvil */
.sim{position:relative;width:100%;max-width:392px;justify-self:center}
.sim::before{content:"";position:absolute;inset:6% -22% 2%;z-index:0;background:radial-gradient(closest-side,rgba(230,57,70,.24),rgba(230,57,70,0));pointer-events:none}
.sim-plano{position:absolute;left:50%;top:50%;z-index:0;width:175%;height:140%;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 50%,transparent);mask-image:radial-gradient(closest-side,#000 50%,transparent)}
.sim-plano path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.2s var(--ease)}
.sim-plano .rio{stroke:#DCCCBA;stroke-width:16}
.sim-plano .viales path{stroke:rgba(230,57,70,.4);stroke-width:2.5;transition-delay:.15s}
.sim-plano .calles path{stroke:rgba(122,14,14,.18);stroke-width:1.5;transition-delay:.35s}
.sim-plano circle{fill:var(--crema);stroke:rgba(122,14,14,.45);stroke-width:2.5;transform-box:fill-box;transform-origin:center;transition:transform .6s cubic-bezier(.34,1.56,.64,1) 1.1s}
.sim-plano circle:last-child{fill:var(--rojo);stroke:#fff;stroke-width:3}
.sim-movil{position:relative;z-index:1;padding:10px;border-radius:50px;background:linear-gradient(155deg,#3B1B1B 0%,#160808 38%,#2A1111 100%);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.07),0 0 0 1px #0D0404,0 70px 90px -50px rgba(90,10,10,.6),0 30px 50px -30px rgba(40,0,0,.5);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.sim-pantalla{position:relative;background:#fff;color:#1F1A18;border-radius:40px;overflow:hidden;font-size:14px;line-height:1.4}
.sim-estado{display:flex;align-items:center;justify-content:space-between;padding:12px 26px 2px 30px;font-size:13px;color:#1A1412}
.sim-isla{width:88px;height:25px;border-radius:999px;background:#120707}
.sim-senal{display:flex;align-items:flex-end;gap:2px;height:11px}
.sim-senal i{width:3px;border-radius:1px;background:#1A1412}
.sim-senal i:nth-child(1){height:4px}.sim-senal i:nth-child(2){height:6px}.sim-senal i:nth-child(3){height:8.5px}.sim-senal i:nth-child(4){height:11px}
.sim-busca{display:flex;align-items:center;gap:10px;margin:12px 14px 8px;height:46px;padding:0 18px;border-radius:999px;box-shadow:0 1px 6px rgba(40,20,20,.2);font-size:15px;color:#221C1A}
.sim-busca svg{width:18px;height:18px;color:#7A706B;flex:none}
.sim-q{white-space:nowrap;overflow:hidden}
.sim-cursor{width:2px;height:19px;background:var(--rojo);margin-left:-8px;flex:none}
@media (prefers-reduced-motion:no-preference){.sim-cursor{animation:parpadeo 1s steps(2) infinite}}
.sim-pestanas{display:flex;gap:18px;padding:0 22px;border-bottom:1px solid #EEE7DF;font-size:12.5px;color:#73685F}
.sim-pestanas span{padding:6px 0 9px}
.sim-pestanas .activa{color:var(--vino);font-weight:700;box-shadow:inset 0 -3px 0 var(--rojo)}
.sim-mapa{position:relative;height:132px;overflow:hidden}
.sim-mapa svg{position:absolute;inset:0;width:100%;height:100%}
.sim-pin{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#9C918B;border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.sim-pin.tuyo{width:26px;height:26px;margin:-26px 0 0 -13px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--rojo-boton);border:3px solid #fff;box-shadow:0 6px 12px -4px rgba(122,14,14,.6)}
.sim-pin.tuyo i{position:absolute;inset:-9px;border-radius:50%;border:2px solid var(--rojo);opacity:0}
@media (prefers-reduced-motion:no-preference){.sim-pin.tuyo i{animation:onda 2.2s ease-out infinite}@keyframes onda{0%{transform:scale(.5);opacity:.8}100%{transform:scale(1.6);opacity:0}}}
.sim-etiqueta{position:absolute;margin:-40px 0 0 18px;background:#fff;border-radius:6px;padding:3px 8px;font-size:12px;font-weight:700;box-shadow:0 1px 4px rgba(0,0,0,.2);white-space:nowrap;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.sim-pueblo{position:absolute;left:12px;bottom:8px;font-size:11px;font-weight:700;color:#5E5550}
.sim-fichas{list-style:none}
/* Tu ficha: inicial de tu negocio, datos y botones, como en Google en el móvil */
.sim-tuya{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 14px;padding:14px 16px;border-top:1px solid #EEE7DF}
.sim-avatar{order:-1;width:56px;height:56px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(140deg,var(--rojo) 0%,var(--vino) 100%);color:#fff;font-size:24px;font-weight:800;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 6px 14px -8px rgba(122,14,14,.7)}
.sim-ficha-txt{display:grid;gap:1px;min-width:0;padding-right:26px}
.sim-nombre{font-size:15.5px;color:#1A1412;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-estrellas{font-size:12.5px;color:#73685F}
.sim-estrellas span{color:#E8860F;letter-spacing:1px}
.sim-cat{font-size:12.5px;color:#5E5550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-abierto{font-size:12.5px;color:#13804A;font-weight:600}
.sim-abierto span{color:#73685F;font-weight:400}
.sim-botones{grid-column:1/-1;display:flex;gap:6px}
.sim-botones i{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid #F0DCD8;border-radius:999px;background:#FBF1EF;color:var(--vino);font-style:normal;font-size:12px;font-weight:700;white-space:nowrap}
.sim-botones i:first-child{background:var(--rojo-boton);border-color:var(--rojo-boton);color:#fff}
.sim-botones svg{width:12px;height:12px}
.sim-otra{display:grid;gap:7px;padding:12px 16px;border-top:1px solid #EEE7DF}
.sim-otra i{height:9px;border-radius:9px;background:#EFE8E0;width:58%}
.sim-otra i+i{width:38%;height:7px}
.sim-web{position:relative;display:grid;gap:3px;padding:12px 16px 22px;border-top:6px solid #F6F1EA}
.sim-url{display:flex;align-items:center;gap:6px;padding-right:26px;font-size:12px;color:#5E5550;white-space:nowrap;overflow:hidden}
.sim-fav{width:18px;height:18px;border-radius:50%;background:var(--crema-2);flex:none;position:relative}
.sim-fav::after{content:"";position:absolute;inset:5px;background:var(--rojo);transform:rotate(45deg);border-radius:1px}
.sim-titulo{font-size:17px;font-weight:700;color:var(--vino);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sim-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;color:#5E5550}
/* Números que señalan el mapa, la ficha y la web */
.sim-marca{position:absolute;top:10px;right:10px;z-index:3;width:22px;height:22px;font-size:11px;box-shadow:0 0 0 3px #fff,0 4px 10px -2px rgba(122,14,14,.5);transition:transform .5s cubic-bezier(.34,1.56,.64,1) 1.2s}
.sim-tuya .sim-marca{transition-delay:1.35s}
.sim-web .sim-marca{transition-delay:1.5s}

/* Líneas eléctricas: arriba a la izquierda (en el hueco de encima del título, así nunca pasan por detrás del texto)
   y por las calles del plano de detrás del móvil. Los pulsos solo se mueven mientras la sección está en pantalla. */
.google-cables{position:absolute;left:0;top:calc(30px + 3.5vw);width:min(70%,980px);height:calc(var(--arriba) - 48px - 3.5vw);pointer-events:none;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent 99%);mask-image:linear-gradient(90deg,#000 82%,transparent 99%)}
.google-cables svg{display:block;width:100%;height:100%;overflow:visible}
.cables-base path{fill:none;stroke:rgba(230,57,70,.32);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cables-base .nodo{stroke:var(--rojo);stroke-width:7}
.pulsos path{fill:none;stroke:#FF2E3E;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.07 .93;stroke-dashoffset:.07;animation:pulso 4.2s linear infinite;animation-play-state:paused}
.sim-plano .pulsos path{stroke-width:3.2;stroke-dasharray:.06 .94}
.pulsos path:nth-child(2){animation-duration:5.1s;animation-delay:-1.8s}
.pulsos path:nth-child(3){animation-duration:3.6s;animation-delay:-2.6s}
.pulsos path:nth-child(4){animation-duration:4.6s;animation-delay:-.9s}
.pulsos path:nth-child(5){animation-duration:5.6s;animation-delay:-3.3s}
.google.activo .pulsos path{animation-play-state:running}
.sim-plano .pulsos{transition:opacity 1s ease 1.2s}
.js .sim:not(.visto) .sim-plano .pulsos{opacity:0}
@keyframes pulso{to{stroke-dashoffset:-1}}
/* Los cables de encima del título: cada luz va de izquierda a derecha, entra en su punto (que se enciende) y vuelve a salir
   desde la izquierda. El hueco largo del trazo (2) evita que asome una segunda luz al principio mientras la primera entra */
.google-cables .pulsos path{stroke-dasharray:.07 2;stroke-dashoffset:.07;animation:pulso 3.4s linear infinite paused}
.google-cables .pulsos path:nth-child(2){animation-duration:3.9s;animation-delay:.6s}
.google-cables .pulsos path:nth-child(3){animation-duration:3.1s;animation-delay:1.2s}
.cables-base .nodo{animation:nodo 3.4s linear infinite paused}
.cables-base .n2{animation-duration:3.9s;animation-delay:.6s}
.cables-base .n3{animation-duration:3.1s;animation-delay:1.2s}
.google.activo .cables-base .nodo{animation-play-state:running}
@keyframes nodo{0%,91%{stroke-width:7;stroke:var(--rojo)}96%{stroke-width:14;stroke:#FF6B5A}100%{stroke-width:7;stroke:var(--rojo)}}
@media (prefers-reduced-motion:reduce){.pulsos{display:none}}

/* Cinta curva entre esta sección (clara) y la siguiente (oscura): se dibuja al llegar y el texto corre por ella */
.transicion{position:absolute;left:0;right:0;bottom:-1px;z-index:2;height:var(--tr-alto);pointer-events:none}
.transicion svg{display:block;width:100%;height:100%;overflow:visible}
.tr-fondo{fill:var(--negro)}
.tr-cinta{fill:none;stroke:url(#tr-color);stroke-width:58;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ease)}
.tr-texto{fill:#fff;font-weight:700;font-size:21px;letter-spacing:3.2px;text-transform:uppercase;dominant-baseline:central;transition:opacity .8s ease .9s}
.js .transicion:not(.visto) .tr-cinta{stroke-dashoffset:1}
.js .transicion:not(.visto) .tr-texto{opacity:0}
@media (max-width:700px){.tr-cinta{stroke-width:84}.tr-texto{font-size:30px;letter-spacing:4.5px}}

/* Entrada: el móvil sube girando, el plano se dibuja, aparecen los pueblos y los números */
.js .sim:not(.visto) .sim-movil{opacity:0;transform:perspective(1400px) translateY(80px) rotateX(26deg) rotateY(-18deg) scale(.92)}
.js .sim:not(.visto) .sim-plano path{stroke-dashoffset:1}
.js .sim:not(.visto) .sim-plano circle,.js .sim:not(.visto) .sim-marca{transform:scale(0)}
@media (max-width:1000px){.google-grid{grid-template-columns:minmax(0,1fr)}.sim{max-width:380px}}
@media (max-width:420px){.sim-movil{padding:8px;border-radius:44px}.sim-pantalla{border-radius:36px}.sim-botones i{padding:6px 9px}}

/* ---------- Cómo llega un cliente ---------- */
.ruta{overflow:clip;padding-top:clamp(56px,6vw,96px)}
.ruta-brillo{width:900px;aspect-ratio:1;left:-360px;top:20px}
.ruta-brillo-2{width:860px;aspect-ratio:1;right:-340px;bottom:-380px}
.ruta-pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.paso{display:flex;flex-direction:column;gap:14px}
/* El contorno de los números lo dibuja un filtro (#f-contorno, en los iconos de la página): así no salen las líneas
   de dentro de cada cifra que deja el trazo de texto con esta tipografía */
.paso-n{font-weight:900;font-size:clamp(2.8rem,2rem + 2vw,4rem);line-height:.9;letter-spacing:.09em;color:var(--rojo);filter:url(#f-contorno);padding-left:4px;transition:filter .4s}
.paso-caja{position:relative;flex:1;display:flex;flex-direction:column;background:var(--negro-2);border-radius:var(--r-l);padding:26px 24px 22px;box-shadow:inset 0 0 0 1px var(--linea-osc);transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
/* Borde que se ilumina: una línea de luz recorre la tarjeta entera (al pasar el ratón; en el móvil, al aparecer) */
@property --traza{syntax:"<angle>";inherits:false;initial-value:0deg}
@property --punta{syntax:"<color>";inherits:false;initial-value:#FFE3D8}
.paso-caja::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from 200deg,var(--rojo) 0deg,var(--rojo) calc(var(--traza) - 22deg),var(--punta) var(--traza),transparent var(--traza));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:--traza 1.3s cubic-bezier(.45,.05,.3,1),--punta .35s ease}
@media (hover:hover){
  .paso:hover .paso-caja::before{--traza:360deg;--punta:var(--rojo);transition:--traza 1.3s cubic-bezier(.45,.05,.3,1),--punta .4s ease 1.15s}
  .paso:hover .paso-caja{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(230,57,70,.2),0 0 36px -8px rgba(230,57,70,.45),0 28px 60px -30px rgba(230,57,70,.6)}
  .paso:hover .paso-n{filter:url(#f-contorno) drop-shadow(0 0 12px rgba(230,57,70,.7))}
}
@media (hover:none){.paso.visto .paso-caja::before{--traza:360deg;--punta:var(--rojo);transition:--traza 1.6s cubic-bezier(.45,.05,.3,1) calc(var(--i) * 160ms + .5s),--punta .4s ease calc(var(--i) * 160ms + 2s)}}
.paso-ico{width:28px;height:28px;color:var(--rojo-claro);margin-bottom:16px}
.paso-caja h3{margin-bottom:10px}
.paso-caja p{color:#CBBDB7;font-size:.94rem}
.paso-caja .paso-hago{margin:auto 0 0;padding-top:16px;border-top:1px dashed rgba(246,243,237,.2);color:var(--crema)}
.paso-hago b{color:var(--rojo-claro)}
@media (max-width:1000px){.ruta-pasos{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.ruta-pasos{grid-template-columns:1fr}.paso{flex-direction:row;align-items:flex-start;gap:12px}.paso-n{font-size:2.4rem;width:60px;flex:none}}

/* ---------- Packs: la cuota baja con el compromiso (mes a mes, 3, 6 o 12 meses) ---------- */
.packs-sec{--ola:clamp(100px,12vw,190px);padding-top:clamp(44px,5vw,80px);padding-bottom:calc(var(--ola) + clamp(48px,6vw,88px));background:radial-gradient(46% 34% at 50% 66%,rgba(230,57,70,.11),rgba(230,57,70,0) 72%),radial-gradient(30% 30% at 86% 24%,rgba(122,14,14,.12),rgba(122,14,14,0) 70%),var(--crema-2)}
.packs-cab{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:clamp(36px,5vw,64px)}
.packs-cab .cabeza-sec{margin-bottom:0}
/* Sello giratorio: el texto da vueltas alrededor del descuento máximo */
.packs-sello{position:relative;flex:none;display:grid;place-items:center;width:clamp(160px,15vw,206px);aspect-ratio:1;margin-right:clamp(0px,3vw,48px);border-radius:50%;background:radial-gradient(circle at 34% 28%,#43100F,var(--negro) 68%);box-shadow:0 0 0 1px rgba(230,57,70,.45),0 0 0 9px rgba(230,57,70,.07),0 34px 60px -26px rgba(122,14,14,.85),0 0 70px -14px rgba(230,57,70,.45)}
.packs-sello svg{position:absolute;inset:0;width:100%;height:100%;animation:gira-sello 26s linear infinite}
.packs-sello text{fill:var(--crema);font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase}
.sello-centro{position:relative;display:grid;justify-items:center;line-height:1.1;text-align:center}
.sello-centro small{font-size:.72rem;font-weight:600;color:var(--niebla)}
.sello-centro b{font-size:clamp(1.7rem,1.3rem + 1vw,2.3rem);font-weight:850;letter-spacing:-.04em;background:linear-gradient(90deg,#E63946,#FF8A6E);-webkit-background-clip:text;background-clip:text;color:transparent;margin:2px 0}
@keyframes gira-sello{to{transform:rotate(360deg)}}
@media (max-width:800px){.packs-sello{display:none}.packs-sec{background:radial-gradient(90% 30% at 50% 55%,rgba(230,57,70,.10),rgba(230,57,70,0) 72%),var(--crema-2)}}
@media (prefers-reduced-motion:reduce){.packs-sello svg{animation:none}}
.plazos{border:0;margin:0 0 34px;padding:0;text-align:center}
.plazos legend{width:100%;margin-bottom:12px;padding:0;font-size:.92rem;font-weight:650;color:var(--gris)}
.plazos-op{position:relative;display:inline-grid;grid-template-columns:repeat(var(--n,3),1fr);padding:6px;border-radius:20px;background:#fff;box-shadow:0 1px 0 var(--linea),var(--sombra-s)}
.plazos-op::before{content:"";position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / var(--n,3));border-radius:15px;background:var(--negro);box-shadow:0 8px 18px -10px rgba(40,0,0,.6);transition:transform .55s var(--ease)}
.plazos-op:has(label:nth-child(2) input:checked)::before{transform:translateX(100%)}
.plazos-op:has(label:nth-child(3) input:checked)::before{transform:translateX(200%)}
.plazos-op:has(label:nth-child(4) input:checked)::before{transform:translateX(300%)}
.plazos-op:has(label:nth-child(5) input:checked)::before{transform:translateX(400%)}
.plazos-op label{position:relative;z-index:1;cursor:pointer}
.plazos-op input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.plazos-op span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;padding:0 22px;border-radius:15px;font-weight:700;font-size:.95rem;white-space:nowrap;transition:color .35s}
.plazos-op em{font-style:normal;font-size:.72rem;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(230,57,70,.13);color:var(--rojo-texto);transition:background-color .35s,color .35s}
.plazos-op input:checked+span{color:var(--crema)}
.plazos-op input:checked+span em{background:var(--rojo-boton);color:#fff}
.plazos-op em.sin{background:none;padding:0;font-weight:600;color:var(--gris)}
.plazos-op input:checked+span em.sin{background:none;color:var(--niebla)}
.plazos-op input:focus-visible+span{outline:2px solid var(--rojo-boton);outline-offset:3px}

.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;perspective:1600px}
.pack{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--r-l);padding:30px 28px 28px;box-shadow:0 1px 0 var(--linea),var(--sombra-s);transition:transform .45s var(--ease),box-shadow .25s ease,opacity .6s ease}
.packs.entrando .pack{transition:transform 1.3s cubic-bezier(.2,1.2,.3,1) calc(var(--i) * 90ms + .1s),opacity .6s ease calc(var(--i) * 90ms + .1s),box-shadow .25s ease}
.pack h3{font-size:1.22rem}
.pack-lema{margin:6px 0 0;color:var(--gris);font-size:.93rem}
.pack-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 7px;margin:22px 0 0}
.pack-desde{font-size:.85rem;font-weight:600;color:var(--gris)}
.pack-cuota{display:inline-flex;font-size:clamp(2.8rem,2.2rem + 1.6vw,3.6rem);font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.pack-eur{font-size:1rem;font-weight:700;color:var(--gris)}
.pack-antes{font-size:.95rem;font-weight:600;color:var(--gris)}
.cifra{display:inline-block;height:1em;overflow:hidden}
.cifra>span{display:block;transform:translateY(calc(var(--d,0) * -1em));transition:transform .8s cubic-bezier(.2,1,.3,1)}
.cifra>span>span{display:block;height:1em;line-height:1}
.pack-ahorro{min-height:26px;margin:8px 0 0;font-size:.84rem;font-weight:750;color:var(--rojo-texto)}
.pack-ahorro span{display:inline-block;padding:3px 10px;border-radius:999px;background:rgba(230,57,70,.12);animation:ahorro .6s var(--ease)}
@keyframes ahorro{from{opacity:0;transform:translateY(6px) scale(.9)}}
.pack-inicial{margin:8px 0 0;padding:11px 14px;border-radius:var(--r-m);background:var(--crema);font-size:.92rem;color:var(--gris)}
.pack-inicial b{color:var(--tinta)}
.pack-lista{list-style:none;display:grid;gap:10px;margin:22px 0 26px;padding:0;font-size:.93rem}
.pack-lista li{position:relative;padding-left:26px}
.pack-lista li::before{content:"";position:absolute;left:5px;top:.22em;width:6px;height:11px;border:solid var(--rojo-boton);border-width:0 2.2px 2.2px 0;transform:rotate(45deg)}
.pack-btn{margin-top:auto;width:100%}
/* El recomendado: oscuro, con borde rojo y su sello */
.pack-top{z-index:2;background:var(--negro);color:var(--crema);box-shadow:0 0 0 2px var(--rojo-boton),var(--sombra);overflow:hidden}
.pack-top::before{content:"";position:absolute;width:420px;aspect-ratio:1;right:-190px;top:-210px;border-radius:50%;background:radial-gradient(closest-side,rgba(230,57,70,.32),transparent);pointer-events:none;transition:transform .6s var(--ease)}
.pack-top>*{position:relative}
.pack-top .pack-lema,.pack-top .pack-desde,.pack-top .pack-eur,.pack-top .pack-antes{color:var(--niebla)}
.pack-top .pack-ahorro{color:var(--rojo-claro)}
.pack-top .pack-ahorro span{background:rgba(230,57,70,.2)}
.pack-top .pack-inicial{background:rgba(246,243,237,.07);color:var(--niebla)}
.pack-top .pack-inicial b{color:var(--crema)}
.pack-top .pack-lista{color:#DCCFC9}
.pack-top .pack-lista li::before{border-color:var(--rojo-claro)}
.pack-sello{position:absolute!important;top:0;right:0;display:flex;align-items:center;gap:7px;padding:7px 14px 7px 12px;border-radius:0 var(--r-l) 0 var(--r-m);background:var(--rojo-boton);color:#fff;font-size:.76rem;font-weight:800}
.pack-sello::before{content:"";width:7px;height:7px;border-radius:1.5px;background:#fff;transform:rotate(45deg)}
.packs-oferta{display:block;width:fit-content;max-width:100%;margin:30px auto 0;padding:9px 18px;border-radius:999px;background:rgba(230,57,70,.11);box-shadow:inset 0 0 0 1px rgba(230,57,70,.35);color:var(--rojo-texto);font-weight:650;font-size:.93rem;text-align:center}
.packs-nota{max-width:72ch;margin:16px auto 0;text-align:center;font-size:.88rem;color:var(--gris)}
.confeti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}
/* En escritorio: los de los lados un poco atrás y girados hacia el centro; el recomendado, adelante */
/* Al pasar por encima: el borde se ilumina con una luz roja que da vueltas, la tarjeta sube y se tiñe de rojo */
@property --giro{syntax:"<angle>";inherits:false;initial-value:0deg}
.pack::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--giro),rgba(230,57,70,.35) 0deg,rgba(230,57,70,.35) 210deg,var(--rojo) 290deg,#FFC2B4 330deg,var(--rojo) 350deg,rgba(230,57,70,.35) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;animation:giro 3s linear infinite paused}
.pack:hover::after{opacity:1;animation-play-state:running}
@keyframes giro{to{--giro:360deg}}
.pack:not(.pack-top):hover{box-shadow:inset 0 150px 120px -110px rgba(230,57,70,.16),0 30px 60px -28px rgba(212,42,58,.5)}
.pack-top:hover{box-shadow:0 0 0 2px var(--rojo),0 0 90px -4px rgba(230,57,70,.7),var(--sombra)}
.pack-top:hover::before{transform:scale(1.35) translate(-30px,30px)}
.pack:hover{transform:translateY(-8px)}
/* En escritorio: los de los lados un poco atrás y girados hacia el centro; el recomendado, adelante */
@media (min-width:1001px){
  .pack:first-child{transform-origin:right center;transform:translateX(14px) scale(.95) rotateY(6deg)}
  .pack:last-child{transform-origin:left center;transform:translateX(-14px) scale(.95) rotateY(-6deg)}
  .pack-top{transform:translateY(-16px)}
  .pack:first-child:hover,.pack:last-child:hover{transform:translateY(-10px) scale(.97)}
  .pack-top:hover{transform:translateY(-26px)}
}
/* Entrada: suben desde abajo al llegar a la sección (js/home.js pone "anima" y luego "visto") */
.packs.anima:not(.visto) .pack{opacity:0;transform:translateY(60px)}
@media (max-width:1000px){.packs{grid-template-columns:1fr;max-width:560px;margin:0 auto}}
@media (max-width:620px){.plazos-op{display:grid;width:100%}.plazos-op span{min-height:58px;padding:0 4px;font-size:.86rem;white-space:normal;text-align:center}.plazos-op em{font-size:.66rem;padding:2px 6px}.plazos-op em.sin{font-size:.64rem;line-height:1.15}.pack{padding:26px 22px 24px}}
@media (prefers-reduced-motion:reduce){.pack,.cifra>span,.plazos-op::before{transition:none!important}.pack::after{animation:none}}

.noes{list-style:none;display:grid;gap:10px}
.noes li{position:relative;padding-left:24px}
.noes li::before{content:"";position:absolute;left:1px;top:.75em;width:12px;height:2px;border-radius:2px;background:currentColor;opacity:.55}

/* ---------- Web de muestra ---------- */
.muestra{background:radial-gradient(38% 45% at 4% 72%,rgba(230,57,70,.09),rgba(230,57,70,0) 70%),radial-gradient(30% 40% at 98% 30%,rgba(122,14,14,.08),rgba(122,14,14,0) 70%),linear-gradient(180deg,var(--crema) 0%,#F1EBE3 100%)}
.muestra-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(36px,5vw,80px);align-items:center}
.muestra-texto .entradilla{margin:20px 0 24px}
.muestra-texto .bolas{margin-bottom:30px}
.muestra-visual{position:relative;margin:0;padding:0 44px 56px 0}
.muestra-visual::before{content:"";position:absolute;inset:10% -5% 2% 9%;border-radius:34px;background:radial-gradient(60% 70% at 78% 22%,rgba(230,57,70,.42),rgba(230,57,70,0) 70%),var(--p-trama-osc),linear-gradient(140deg,#2C0E0E,var(--negro) 62%);box-shadow:var(--sombra);transform:rotate(-2.5deg);z-index:0}
.muestra-visual .navegador{position:relative;z-index:1}
.telefono{position:absolute;right:0;bottom:0;z-index:2;width:clamp(120px,27%,190px);padding:7px;border-radius:28px;background:var(--negro);box-shadow:var(--sombra)}
.telefono img{border-radius:22px;width:100%}
.lh{margin-top:clamp(64px,8vw,104px);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:center;padding:clamp(28px,4vw,52px);border-radius:var(--r-xl);background:var(--negro);color:var(--crema);position:relative;overflow:hidden}
.lh::before{content:"";position:absolute;width:520px;aspect-ratio:1;left:-260px;bottom:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(230,57,70,.25),transparent)}
.lh>*{position:relative}
.lh h3{font-size:clamp(1.3rem,1.1rem + .8vw,1.75rem);margin-bottom:14px}
.lh-texto p{color:#CBBDB7}
.lh-tiempo{margin:22px 0 0}
.lh-tiempo b{display:block;font-weight:800;font-size:clamp(1.8rem,1.4rem + 1.2vw,2.4rem);color:var(--rojo-claro);letter-spacing:-.03em;line-height:1.1}
@media (max-width:900px){.muestra-grid,.lh{grid-template-columns:1fr}.muestra-visual{padding:0 28px 48px 0}}

/* ---------- Proceso ---------- */
.proceso-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(36px,6vw,104px);align-items:start}
.proceso-lado{position:sticky;top:calc(var(--tope) + 32px)}
.proceso-lado .entradilla{margin-top:20px}
.garantias{margin-top:30px;padding:24px 26px;border-radius:var(--r-l);background:var(--crema-2);display:grid;gap:12px}
.garantias p{margin:0;color:#3A302C}
.pasos{list-style:none}
.pasos li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:20px;padding-bottom:36px;position:relative}
.pasos li:not(:last-child)::before{content:"";position:absolute;left:31px;top:66px;bottom:8px;width:2px;background:repeating-linear-gradient(to bottom,var(--rojo) 0 6px,transparent 6px 12px);opacity:.7}
.pasos-n{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--negro);color:var(--crema);font-weight:800;font-size:1.2rem;letter-spacing:-.03em;position:relative}
.pasos-n::after{content:"";position:absolute;right:-4px;top:-4px;width:12px;height:12px;background:var(--rojo);transform:rotate(45deg);border-radius:2px}
.pasos-cuando{margin:2px 0 4px;font-size:.84rem;font-weight:700;color:var(--rojo-texto)}
.pasos h3{margin-bottom:8px}
.pasos li p:last-child{margin:0;color:var(--gris)}
@media (max-width:900px){.proceso-grid{grid-template-columns:1fr}.proceso-lado{position:static}}
@media (max-width:520px){.pasos li{grid-template-columns:48px minmax(0,1fr);gap:16px}.pasos-n{width:48px;height:48px;font-size:1rem;border-radius:14px}.pasos li:not(:last-child)::before{left:23px;top:54px}}

/* ---------- Revisión gratis ---------- */
.revision-brillo{width:900px;aspect-ratio:1;right:-300px;top:10%}
.revision-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(36px,5vw,80px);align-items:start}
.revision-texto .entradilla{margin-top:20px}
.revision-texto .bolas{margin:28px 0;color:#DCCFC9}
.revision-sin{color:var(--crema);font-weight:650}
/* Conversación de WhatsApp de ejemplo */
.wa-demo{margin:34px 0 0;max-width:440px;border-radius:22px;overflow:hidden;background:#0B141A;box-shadow:var(--sombra),0 0 0 1px rgba(246,243,237,.08)}
.wa-cab{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#1F2C33;color:#E9EDEF;font-size:.86rem}
.wa-cab b{display:block;font-weight:700}
.wa-cab small{color:#8696A0;font-size:.76rem}
.wa-avatar{width:38px;height:38px;border-radius:50%;background:var(--negro);display:grid;place-items:center}
.wa-avatar svg{width:26px;height:auto;aspect-ratio:836/590}
.wa-cuerpo{display:flex;flex-direction:column;gap:6px;padding:16px 14px 18px;min-height:340px;background:#0B141A var(--p-trama-osc)}
.wa-m{max-width:84%;margin:0;padding:8px 10px 6px;border-radius:10px;font-size:.86rem;line-height:1.4;color:#E9EDEF;display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 10px}
.wa-m time{margin-left:auto;font-size:.66rem;color:#8696A0}
.wa-m.tu{align-self:flex-end;background:#005C4B;border-top-right-radius:2px}
.wa-m.tu time{color:#9FD3C7}
.wa-m.el{align-self:flex-start;background:#202C33;border-top-left-radius:2px}
.wa-dia{align-self:center;margin:6px 0;padding:4px 10px;border-radius:8px;background:#182229;color:#8696A0;font-size:.72rem}
.wa-pdf{align-items:center;flex-wrap:nowrap;gap:10px}
.wa-pdf img{width:44px;border-radius:4px;flex:none}
.wa-pdf span{display:grid;gap:1px}
.wa-pdf b{font-size:.84rem;font-weight:700}
.wa-pdf small{font-size:.72rem;color:#8696A0}
.wa-demo figcaption{padding:10px 16px;font-size:.74rem;color:#8696A0;background:#111B21}
.wa-m{position:relative}
.wa-js [data-paso]{visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s var(--ease)}
.wa-js [data-paso].on,.wa-js .wa-m.tecleando{visibility:visible;opacity:1;transform:none}
.wa-js .wa-m.tecleando>*{visibility:hidden}
.wa-js .wa-m.tecleando::after{content:"";position:absolute;left:14px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#8696A0;box-shadow:11px 0 #8696A0,22px 0 #8696A0;animation:late-wa 1s infinite}
@keyframes late-wa{50%{opacity:.4}}

.rev-lado{position:sticky;top:calc(var(--tope) + 24px)}
.rev-form{position:relative;z-index:1;background:var(--crema);color:var(--tinta);border-radius:var(--r-xl);padding:clamp(24px,3.5vw,40px);box-shadow:var(--sombra)}
.rev-form h3{font-size:clamp(1.35rem,1.2rem + .7vw,1.7rem)}
.rev-intro{color:var(--gris);margin:10px 0 22px;font-size:.95rem}
.campo{margin-bottom:16px}
.campo>label:first-child{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px}
.rev-form input[type=text]{width:100%;height:50px;padding:0 14px;border-radius:12px;border:1.5px solid #D2C4B6;background:#fff;font-size:1rem}
.rev-form input[type=text]:focus{border-color:var(--rojo);outline:none;box-shadow:0 0 0 3px rgba(230,57,70,.2)}
.rev-form input[aria-invalid=true]{border-color:#B3261E}
.rev-form input:disabled{background:#EFE9E1;color:var(--gris)}
.casilla{display:flex;align-items:flex-start;gap:10px;margin-top:10px;font-size:.88rem;line-height:1.45;cursor:pointer}
.casilla input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--vino)}
.osc .rev-form a,.rev-form .casilla a{color:var(--rojo-texto);font-weight:700}
.campos-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.consentimiento{margin:4px 0 18px}
.error{margin:6px 0 0;color:#B3261E;font-size:.86rem;font-weight:700}
.rev-form .btn{width:100%}
.rev-nota{margin:12px 0 0;font-size:.8rem;color:var(--gris)}
@media (max-width:900px){.revision-grid{grid-template-columns:1fr}.rev-lado{position:relative;top:auto}}
@media (max-width:480px){.campos-2{grid-template-columns:1fr}}

/* ---------- Sobre mí ---------- */
.sobre-grid{display:grid;grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);gap:clamp(36px,6vw,104px);align-items:start}
.sobre-tarjeta{position:sticky;top:calc(var(--tope) + 32px);aspect-ratio:4/5;border-radius:var(--r-xl);background:var(--negro);color:var(--crema);display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(24px,3vw,36px);overflow:hidden;box-shadow:var(--sombra)}
.sobre-brillo{width:500px;aspect-ratio:1;right:-220px;top:-180px}
.sobre-logo{position:absolute;top:clamp(28px,3.5vw,44px);left:clamp(24px,3vw,36px);width:58%;height:auto;aspect-ratio:836/590;filter:drop-shadow(0 20px 40px rgba(214,42,58,.35))}
.sobre-firma{position:relative;font-weight:800;font-size:clamp(1.8rem,1.2rem + 1.8vw,2.6rem);letter-spacing:-.04em;line-height:1;margin:0 0 12px}
.sobre-lugar{position:relative;margin:0;color:var(--niebla);font-size:.92rem}
.sobre-texto .entradilla{margin:20px 0 22px}
.sobre-texto>p:not(.entradilla){color:#3A302C;max-width:66ch}
.promesas{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.promesas>div{background:#fff;border-radius:var(--r-l);padding:24px;box-shadow:0 1px 0 var(--linea)}
.promesas>div+div{background:var(--crema-2);box-shadow:none}
.promesas h3{font-size:1.1rem;margin-bottom:14px}
.promesas li{font-size:.94rem}
@media (max-width:900px){
  .sobre-grid{grid-template-columns:1fr}
  .sobre-tarjeta{position:relative;top:0;aspect-ratio:auto;min-height:300px;max-width:480px}
  .sobre-logo{width:150px}
}
@media (max-width:620px){.promesas{grid-template-columns:1fr}}

/* ---------- Contacto: título que se escribe solo ---------- */
.escribe.escribiendo::after{content:"";display:inline-block;width:.08em;height:.9em;margin-left:.06em;background:var(--rojo);vertical-align:-.08em;animation:parpadeo 1s steps(2) infinite}
@keyframes parpadeo{50%{opacity:0}}

/* ---------- Olas entre secciones: capas que se mueven despacio y una línea eléctrica roja en la cresta ----------
   Viven en el relleno inferior de la sección (nunca detrás de texto). js/home.js pone "activo" mientras se ven. */
.ola{position:absolute;left:0;right:0;bottom:-1px;height:var(--ola);overflow:hidden;pointer-events:none;z-index:1}
.ola i{position:absolute;left:0;top:0;bottom:0;width:calc(100% + var(--p));-webkit-mask:var(--m) repeat-x 0 0/var(--p) 100%;mask:var(--m) repeat-x 0 0/var(--p) 100%;animation:ola var(--t) linear infinite paused;will-change:transform}
.ola.activo i,.ola.activo .o-linea::after{animation-play-state:running}
@keyframes ola{to{transform:translateX(calc(var(--p) * -1))}}
.ola .o1{--p:1100px;--t:34s;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1100 160' preserveAspectRatio='none'%3E%3Cpath d='M0 50 Q275 20 550 50 T1100 50 V160 H0Z'/%3E%3C/svg%3E")}
.ola .o2{--p:760px;--t:24s;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 760 160' preserveAspectRatio='none'%3E%3Cpath d='M0 78 Q190 52 380 78 T760 78 V160 H0Z'/%3E%3C/svg%3E");animation-direction:reverse}
.ola .o3{--p:960px;--t:40s;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 160' preserveAspectRatio='none'%3E%3Cpath d='M0 106 Q240 82 480 106 T960 106 V160 H0Z'/%3E%3C/svg%3E")}
.ola .o-linea{--p:960px;--t:40s;--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 160' preserveAspectRatio='none'%3E%3Cfilter id='b' x='-20%' y='-60%' width='140%' height='220%'%3E%3CfeGaussianBlur stdDeviation='4'/%3E%3C/filter%3E%3Cpath d='M-480 106 Q-240 130 0 106 T480 106 T960 106 T1440 106' fill='none' stroke='%23000' stroke-opacity='.5' stroke-width='10' filter='url(%23b)'/%3E%3Cpath d='M-480 106 Q-240 130 0 106 T480 106 T960 106 T1440 106' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E");background:linear-gradient(90deg,var(--rojo-boton),#FF6B5A 50%,var(--rojo-boton))}
.o-linea::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34vw;background:linear-gradient(90deg,transparent,#FFE3D8 50%,transparent);animation:chispa 5.5s linear infinite paused}
@keyframes chispa{from{transform:translateX(-40vw)}to{transform:translateX(140vw)}}
/* Clara: sube la crema dentro de una sección oscura. Oscura: sube el negro dentro de una sección clara */
.ola-clara .o1{background:rgba(122,14,14,.8)}
.ola-clara .o2{background:rgba(237,230,220,.2)}
.ola-clara .o3{background:var(--crema-2)}
.ola-oscura .o1{background:rgba(230,57,70,.16)}
.ola-oscura .o2{background:rgba(122,14,14,.55)}
.ola-oscura .o3{background:var(--negro)}
.ruta{--ola:clamp(100px,12vw,190px);padding-bottom:calc(var(--ola) + clamp(48px,6vw,88px))}
/* En pantallas estrechas, olas más cortas para que se note el ondulado */
@media (max-width:700px){.ola .o1{--p:520px}.ola .o2{--p:380px}.ola .o3,.ola .o-linea{--p:460px}.o-linea::after{width:60vw}}
@media (prefers-reduced-motion:reduce){.ola i,.o-linea::after{animation:none}}

/* ---------- Servicios: luces que se mueven despacio en el fondo ---------- */
.serv-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.serv-aurora i{position:absolute;border-radius:50%;aspect-ratio:1;background:radial-gradient(closest-side,rgba(230,57,70,.26),rgba(230,57,70,0));animation:deriva 24s ease-in-out infinite alternate}
.serv-aurora i:nth-child(1){width:640px;left:-300px;top:4%}
.serv-aurora i:nth-child(2){width:560px;right:-240px;top:34%;background:radial-gradient(closest-side,rgba(122,14,14,.6),rgba(122,14,14,0));animation-duration:30s;animation-delay:-9s}
.serv-aurora i:nth-child(3){width:720px;left:28%;bottom:-460px;animation-duration:36s;animation-delay:-15s}
@keyframes deriva{0%{transform:translate(0,0) scale(1)}50%{transform:translate(70px,-50px) scale(1.18)}100%{transform:translate(-50px,60px) scale(.9)}}
@media (prefers-reduced-motion:reduce){.serv-aurora i{animation:none}}

/* ---------- Packs: suelo de cuadrícula en perspectiva que avanza despacio, y un foco detrás del recomendado ----------
   Queda detrás de las tarjetas (que son opacas): solo se ve entre ellas y por los lados */
.packs-escena{position:relative;isolation:isolate}
.packs-escena::after{content:"";position:absolute;z-index:-2;left:50%;top:-110px;width:min(1000px,90vw);height:calc(100% + 160px);transform:translateX(-50%);pointer-events:none;background:conic-gradient(from 180deg at 50% 0%,transparent 148deg,rgba(230,57,70,.16) 164deg,transparent 173deg,rgba(230,57,70,.2) 180deg,transparent 187deg,rgba(230,57,70,.16) 196deg,transparent 212deg);-webkit-mask:linear-gradient(#000 40%,transparent);mask:linear-gradient(#000 40%,transparent)}
.packs-suelo{position:absolute;z-index:-1;left:-16%;right:-16%;top:30%;bottom:-170px;perspective:460px;perspective-origin:50% 0;overflow:hidden;pointer-events:none;-webkit-mask:radial-gradient(70% 85% at 50% 0%,#000 40%,transparent 85%);mask:radial-gradient(70% 85% at 50% 0%,#000 40%,transparent 85%)}
.packs-suelo i{position:absolute;left:0;right:0;top:-64px;height:260%;transform-origin:50% 0;transform:rotateX(64deg);background-image:linear-gradient(rgba(180,30,36,.38) 2px,transparent 2px),linear-gradient(90deg,rgba(180,30,36,.38) 2px,transparent 2px);background-size:64px 64px;background-position:center 0;animation:suelo 4.5s linear infinite}
.packs-suelo::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:1;background:linear-gradient(90deg,transparent,rgba(230,57,70,.7),transparent);box-shadow:0 0 18px 4px rgba(230,57,70,.35)}
@keyframes suelo{from{transform:rotateX(64deg) translateY(0)}to{transform:rotateX(64deg) translateY(64px)}}
@media (max-width:1000px){.packs-suelo,.packs-escena::after{display:none}}
@media (prefers-reduced-motion:reduce){.packs-suelo i{animation:none}}

/* ---------- Servicios: cabecera con el símbolo de Menentum dibujado en trazo ---------- */
.serv-cabecera{display:flex;align-items:center;justify-content:space-between;gap:40px;margin-bottom:clamp(36px,5vw,64px)}
.serv-cabecera .cabeza-sec{margin-bottom:0}
.serv-trazo{position:relative;flex:none;width:clamp(220px,24vw,330px);margin-right:clamp(0px,2vw,32px)}
.serv-trazo::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(230,57,70,.2),transparent)}
.serv-trazo svg{position:relative;display:block;width:100%;height:auto;aspect-ratio:836/590;overflow:visible;filter:drop-shadow(0 0 7px rgba(230,57,70,.55))}
.st-base{fill:rgba(122,14,14,.22);stroke:rgba(230,57,70,.6);stroke-width:4;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;transition:stroke-dashoffset 2.4s var(--ease) calc(var(--i) * .25s),fill 1s ease calc(var(--i) * .25s + 1.4s)}
.js .serv-trazo:not(.visto) .st-base{stroke-dashoffset:1;fill:rgba(122,14,14,0)}
.st-luz{fill:none;stroke:#FFC2B4;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:.07 .93;animation:recorre 7s linear infinite paused;animation-delay:calc(var(--i) * -2.3s)}
.serv-trazo.activo .st-luz{animation-play-state:running}
.js .serv-trazo:not(.visto) .st-luz{opacity:0}
.st-luz{transition:opacity .8s ease 2s}
@keyframes recorre{to{stroke-dashoffset:-1}}
@media (max-width:800px){.serv-trazo{display:none}}
@media (prefers-reduced-motion:reduce){.st-luz{animation:none;opacity:0}}

/* ---------- Servicios → web de muestra: píxeles de color crema que suben y se rellenan ---------- */
:root{--alto-pix:max(18.75vw,160px)} /* el dibujo de los píxeles: 270 unidades, 150 en Servicios y 120 en la web de muestra */
.servicios:has(> .pixeles){padding-bottom:calc(var(--alto-pix) * .5556 + clamp(48px,6vw,88px))}
.pixeles{position:absolute;left:0;right:0;bottom:calc(var(--alto-pix) * -.4444);height:var(--alto-pix);pointer-events:none;z-index:1}
.muestra{padding-top:calc(var(--alto-pix) * .4444 + clamp(28px,4vw,52px))}
.pixeles svg{display:block;width:100%;height:100%}
.pixeles rect{fill:var(--crema);transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease) var(--d,0ms)}
.pixeles .px-rojo{fill:var(--rojo)}
.js .pixeles:not(.visto) rect:not(.px-base){transform:scale(0)}
.pixeles.visto .px-rojo{animation:titila 2.6s ease-in-out infinite alternate;animation-delay:calc(var(--d) + .6s)}
@keyframes titila{0%{opacity:1}100%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.pixeles rect{transition:none}.pixeles .px-rojo{animation:none}}

/* ---------- Cuadro de velocidad: luz que recorre el borde, fondo con más color y las notas buenas en un aro como el de Google ---------- */
.lh{background:radial-gradient(70% 90% at 100% 0%,rgba(230,57,70,.17),rgba(230,57,70,0) 62%),linear-gradient(160deg,#230C0C,var(--negro) 58%)}
.lh::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--giro),rgba(230,57,70,.2) 0deg,rgba(230,57,70,.2) 220deg,var(--rojo) 300deg,#FFC2B4 335deg,var(--rojo) 350deg,rgba(230,57,70,.2) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 6s linear infinite paused}
.lh.activo::after{animation-play-state:running}
@property --aro{syntax:"<number>";inherits:true;initial-value:0}
@media (prefers-reduced-motion:reduce){.lh::after{animation:none}}

.pixeles .px-osc{fill:var(--negro)}

/* ---------- Web de muestra → Cómo trabajo: escalera de seis peldaños con una luz que la sube ---------- */
.muestra:has(> .escalera){--esc:clamp(90px,9vw,140px);padding-bottom:calc(var(--esc) + clamp(40px,5vw,72px))}
.escalera{position:absolute;left:0;right:0;bottom:0;height:var(--esc);pointer-events:none;z-index:1}
.esc-relleno{position:absolute;inset:0;background:var(--crema)}
.esc-relleno::before{content:"";position:absolute;inset:0;background-image:var(--p-trama);background-position:0 100%;-webkit-mask:linear-gradient(90deg,transparent 40%,#000 62%);mask:linear-gradient(90deg,transparent 40%,#000 62%)}
@media (max-width:900px){.esc-relleno::before{display:none}}
.escalera svg{display:block;width:100%;height:100%;overflow:visible}
.esc-fondo{fill:var(--crema);filter:drop-shadow(0 -8px 14px rgba(122,14,14,.12))}
.esc-borde{fill:none;stroke:rgba(230,57,70,.6);stroke-width:2;vector-effect:non-scaling-stroke}
.esc-luz{fill:none;stroke:#FF2E3E;stroke-width:4;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:.05 2;stroke-dashoffset:.05;filter:drop-shadow(0 0 5px rgba(255,46,62,.9));animation:pulso 5s linear infinite paused}
.escalera.activo .esc-luz{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.esc-luz{display:none}}

/* ---------- Cuadro de velocidad: panel de notas, barras más vistosas y fondo con puntos lejos del texto ---------- */
.lh>.lh-fondo{position:absolute;inset:0;pointer-events:none;background-image:var(--p-trama-osc);-webkit-mask:radial-gradient(46% 70% at 24% 50%,transparent 52%,#000 96%);mask:radial-gradient(46% 70% at 24% 50%,transparent 52%,#000 96%)}
@media (max-width:900px){.lh>.lh-fondo{-webkit-mask:radial-gradient(90% 34% at 50% 22%,transparent 55%,#000 96%);mask:radial-gradient(90% 34% at 50% 22%,transparent 55%,#000 96%)}}
.lh-panel{position:relative;padding:20px 24px 26px;border-radius:var(--r-l);background:#1B0A0A;box-shadow:inset 0 0 0 1px rgba(246,243,237,.09),0 30px 60px -34px rgba(0,0,0,.9);overflow:hidden}
.lh-panel>*{position:relative;z-index:1}
.lh-panel::after{content:"";position:absolute;top:-40%;bottom:-40%;left:0;width:28%;background:linear-gradient(90deg,transparent,rgba(246,243,237,.07),transparent);transform:translateX(-160%) skewX(-18deg);animation:brillo-lh 7s ease-in-out infinite paused;pointer-events:none}
.lh.activo .lh-panel::after{animation-play-state:running}
@keyframes brillo-lh{0%,60%{transform:translateX(-160%) skewX(-18deg)}100%{transform:translateX(460%) skewX(-18deg)}}
@media (max-width:600px){.lh{padding:24px 16px}.lh-panel{padding:16px 14px 20px}}
@media (prefers-reduced-motion:reduce){.lh-panel::after{animation:none;display:none}}

/* ---------- Cómo trabajo: fondo con puntos entre las tarjetas, números con un cuadrito que da vueltas ---------- */
.proceso{isolation:isolate;background:radial-gradient(38% 40% at 96% 24%,rgba(230,57,70,.1),rgba(230,57,70,0) 70%),radial-gradient(34% 40% at 0% 96%,rgba(122,14,14,.08),rgba(122,14,14,0) 70%),var(--crema)}
.proceso::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--p-trama);-webkit-mask:linear-gradient(90deg,transparent 40%,#000 62%);mask:linear-gradient(90deg,transparent 40%,#000 62%)}
@media (max-width:900px){.proceso::before{display:none}}
.pasos li>div{padding:20px 24px;border-radius:var(--r-l);background:#fff;box-shadow:0 1px 0 var(--linea),var(--sombra-s);transition:box-shadow .2s}
.pasos li:hover>div{box-shadow:0 0 0 1.5px rgba(230,57,70,.45),0 18px 40px -24px rgba(212,42,58,.5)}
.pasos-n{transition:box-shadow .2s,transform .2s}
.pasos li:hover .pasos-n{transform:scale(1.06);box-shadow:0 0 0 2px var(--rojo),0 0 26px -2px rgba(230,57,70,.6)}
/* El cuadrito rojo recorre el borde del número sin parar */
.pasos-n::after{right:auto;left:0;top:0;offset-path:path("M18 0H46A18 18 0 0 1 64 18V46A18 18 0 0 1 46 64H18A18 18 0 0 1 0 46V18A18 18 0 0 1 18 0Z");offset-anchor:center;offset-rotate:0deg;offset-distance:12%;box-shadow:0 0 10px rgba(230,57,70,.85);animation:orbita 8s linear infinite paused}
.proceso.activo .pasos-n::after{animation-play-state:running}
.pasos li:nth-child(2) .pasos-n::after{animation-delay:-1.3s}
.pasos li:nth-child(3) .pasos-n::after{animation-delay:-2.6s}
.pasos li:nth-child(4) .pasos-n::after{animation-delay:-3.9s}
.pasos li:nth-child(5) .pasos-n::after{animation-delay:-5.2s}
.pasos li:nth-child(6) .pasos-n::after{animation-delay:-6.5s}
@keyframes orbita{from{offset-distance:12%}to{offset-distance:112%}}
@media (max-width:520px){.pasos-n::after{offset-path:path("M14 0H34A14 14 0 0 1 48 14V34A14 14 0 0 1 34 48H14A14 14 0 0 1 0 34V14A14 14 0 0 1 14 0Z")}.pasos li>div{padding:16px 18px}}
/* "Pago en dos partes": dos luces (roja y granate) que dan vueltas al borde */
.garantias{position:relative}
.garantias::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--giro),transparent 0deg,transparent 50deg,var(--rojo) 120deg,transparent 175deg,transparent 230deg,var(--vino) 300deg,transparent 355deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 5s linear infinite paused}
.proceso.activo .garantias::after{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.pasos-n::after,.garantias::after{animation:none}}

/* ---------- Cómo trabajo → revisión: barras oscuras que suben y bajan, como un informe ---------- */
.proceso:has(> .barras-eq){--eq:clamp(100px,10vw,150px);padding-bottom:calc(var(--eq) + clamp(40px,5vw,72px))}
.barras-eq{position:absolute;left:0;right:0;bottom:-1px;height:var(--eq);pointer-events:none;z-index:1}
.barras-eq svg{display:block;width:100%;height:100%}
.barras-eq rect{fill:var(--negro);transform-box:fill-box;transform-origin:50% 100%;animation:eq var(--t) ease-in-out var(--d) infinite alternate paused}
.barras-eq .eq-rojo{fill:var(--rojo)}
.barras-eq .eq-base{animation:none}
.barras-eq.activo rect{animation-play-state:running}
@keyframes eq{from{transform:scaleY(.42)}to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){.barras-eq rect{animation:none}}

/* ---------- Revisión: lo que incluye en cuatro cajitas, la conversación a la vista y el formulario con luz en el borde ---------- */
.revision-texto .wa-demo{margin-top:30px;box-shadow:var(--sombra),0 0 0 1px rgba(246,243,237,.08),0 0 90px -24px rgba(37,211,102,.35)}
.rev-incluye{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:520px;margin:26px 0 18px;padding:0}
.rev-incluye li{position:relative;display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:center;padding:14px 14px;border-radius:14px;background:rgba(246,243,237,.05);box-shadow:inset 0 0 0 1px rgba(246,243,237,.09);transition:background-color .2s}
.rev-incluye b{display:block;margin-bottom:2px;color:var(--rojo-claro);font-size:.95rem}
.ri-txt span{display:block;font-size:.86rem;line-height:1.4;color:#DCCFC9}
.rev-form::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:3px;pointer-events:none;background:conic-gradient(from var(--giro),transparent 0deg,transparent 200deg,var(--rojo) 290deg,#FF8A6E 330deg,var(--rojo) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 4.5s linear infinite paused}
.rev-form.activo::after{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.rev-form::after{animation:none}}

/* ---------- Revisión: iconos animados en las cuatro cajitas, luz en el borde al pasar por encima ---------- */
.ri-ico{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(230,57,70,.15);color:var(--rojo-claro);box-shadow:inset 0 0 0 1px rgba(230,57,70,.3)}
.ri-ico svg{width:24px;height:24px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ic-aguja{transform-origin:12px 17px;animation:aguja 2.4s ease-in-out infinite alternate paused}
@keyframes aguja{from{transform:rotate(-80deg)}to{transform:rotate(12deg)}}
.ic-onda{transform-origin:10.5px 10.5px;animation:onda 2.2s ease-out infinite paused}
@keyframes onda{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.9);opacity:0}}
.ic-aviso{fill:var(--rojo);stroke:none;transform-origin:17.5px 5.5px;animation:aviso 1.6s ease-in-out infinite paused}
@keyframes aviso{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
.ic-b{transform-box:fill-box;transform-origin:50% 100%;animation:barra-ic 1.8s ease-in-out infinite alternate paused}
.ic-b:nth-child(2){animation-delay:-.6s}
.ic-b:nth-child(3){animation-delay:-1.2s}
@keyframes barra-ic{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.rev-incluye.activo .ri-ico *{animation-play-state:running}
.rev-incluye li::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--giro),transparent 0deg,transparent 220deg,var(--rojo) 300deg,#FF8A6E 335deg,var(--rojo) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;animation:giro 2.6s linear infinite paused}
.rev-incluye li:hover{background:rgba(230,57,70,.1)}
.rev-incluye li:hover::after{opacity:1;animation-play-state:running}
@media (prefers-reduced-motion:reduce){.ri-ico *,.rev-incluye li::after{animation:none!important}}

@media (max-width:560px){.rev-incluye{grid-template-columns:1fr}}

/* Panel para ir al formulario */
.rev-cta{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;max-width:520px;margin-top:4px;padding:18px 20px;border-radius:var(--r-l);background:linear-gradient(120deg,rgba(230,57,70,.24),rgba(122,14,14,.4));box-shadow:inset 0 0 0 1px rgba(230,57,70,.5),0 20px 44px -26px rgba(230,57,70,.7)}
.rev-cta p{margin:0}
.rev-cta b{display:block;font-size:1.05rem}
.rev-cta p span{display:block;margin-top:2px;font-size:.88rem;line-height:1.45;color:#DCCFC9}
.rev-cta .btn{flex:none}

/* Formulario: un brillo rojo que gira detrás, además de la luz del borde */
.rev-lado::before{content:"";position:absolute;inset:-8px;border-radius:calc(var(--r-xl) + 8px);pointer-events:none;background:conic-gradient(from var(--giro),transparent 0deg,transparent 160deg,rgba(230,57,70,.95) 250deg,#FF8A6E 310deg,rgba(230,57,70,.95) 340deg,transparent 360deg);filter:blur(22px);opacity:.85;animation:giro 4.5s linear infinite paused}
.rev-lado:has(.rev-form.activo)::before{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.rev-lado::before{animation:none}}

/* ---------- Revisión → zona: las barras de ecualizador, ahora colgando hacia abajo ---------- */
.sobre:has(> .barras-cuelgan){--eq:clamp(100px,10vw,150px);padding-top:calc(var(--eq) + clamp(36px,4vw,64px))}
.barras-cuelgan{top:-1px;bottom:auto}
.barras-cuelgan svg{transform:scaleY(-1)}

/* ---------- Servicios: empieza más arriba ---------- */
.servicios:has(> .serv-aurora){padding-top:clamp(44px,5vw,80px)}

/* ---------- Sobre mí: tarjeta con el logo centrado, tres claves y promesas con luz en el borde ---------- */
.sobre-tarjeta{justify-content:center;align-items:center;text-align:center}
.sobre-logo{position:relative;top:auto;left:auto;width:64%;margin:0 auto 26px}
.sobre-claves{list-style:none;display:grid;gap:10px;margin:0;padding:0}
/* Los tres pilares: icono, y al pasar por encima la tarjeta se desliza, el icono se pone rojo y una luz recorre el borde */
.sobre-claves li{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);gap:16px;align-items:center;padding:16px 20px;border-radius:16px;background:#fff;box-shadow:inset 3px 0 0 var(--rojo),0 1px 0 var(--linea);transition:transform .3s var(--ease),box-shadow .3s}
.pilar-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;background:rgba(230,57,70,.1);color:var(--rojo-texto);transition:background-color .25s,color .25s,transform .45s var(--ease)}
.pilar-ico svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pilar-txt b{display:block;font-size:1.02rem;letter-spacing:-.01em}
.pilar-txt span{display:block;margin-top:2px;font-size:.93rem;color:var(--gris)}
.sobre-claves li::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;background:conic-gradient(from var(--giro),transparent 0deg,transparent 200deg,var(--rojo) 290deg,#FF8A6E 330deg,var(--rojo) 350deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;animation:giro 2.8s linear infinite paused}
.sobre-claves li:hover{transform:translateX(8px);box-shadow:inset 6px 0 0 var(--rojo),0 22px 44px -26px rgba(212,42,58,.55)}
.sobre-claves li:hover .pilar-ico{background:var(--rojo-boton);color:#fff;transform:rotate(-10deg) scale(1.1)}
.sobre-claves li:hover::after{opacity:1;animation-play-state:running}
@media (prefers-reduced-motion:reduce){.sobre-claves li::after{animation:none}}
/* La tarjeta del logo: una luz da vueltas a su borde */
.sobre-tarjeta::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;padding:2.5px;pointer-events:none;background:conic-gradient(from var(--giro),rgba(230,57,70,.18) 0deg,rgba(230,57,70,.18) 200deg,var(--rojo) 290deg,#FFC2B4 330deg,var(--rojo) 350deg,rgba(230,57,70,.18) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 5s linear infinite paused}
.sobre-tarjeta.activo::after{animation-play-state:running}
@media (prefers-reduced-motion:reduce){.sobre-tarjeta::after{animation:none}}
.promesa{position:relative;transition:transform .25s var(--ease),box-shadow .25s}
.promesa h3{display:flex;align-items:center;gap:10px}
.pr-ico{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%}
.pr-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.promesa-si .pr-ico{background:var(--rojo-boton);color:#fff;box-shadow:0 6px 16px -6px rgba(212,42,58,.7)}
.promesa-no .pr-ico{background:var(--negro);color:var(--crema)}
.promesa::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .2s;animation:giro 3s linear infinite paused}
.promesa-si::after{background:conic-gradient(from var(--giro),transparent 0deg,transparent 200deg,var(--rojo) 290deg,#FF8A6E 330deg,var(--rojo) 350deg,transparent 360deg)}
.promesa-no::after{background:conic-gradient(from var(--giro),transparent 0deg,transparent 60deg,var(--negro) 120deg,transparent 175deg,transparent 240deg,var(--vino) 300deg,transparent 355deg)}
.promesa:hover{transform:translateY(-4px)}
.promesa-si:hover{box-shadow:0 22px 44px -26px rgba(212,42,58,.55)}
.promesa-no:hover{box-shadow:0 22px 44px -26px rgba(40,0,0,.45)}
.promesa:hover::after{opacity:1;animation-play-state:running}
@media (prefers-reduced-motion:reduce){.promesa::after{animation:none}}

/* ---------- Sobre mí → preguntas: hoja rasgada ---------- */
.sobre:has(> .rasgado){padding-bottom:calc(70px + clamp(40px,5vw,72px))}
.rasgado{position:absolute;left:0;right:0;bottom:-1px;height:70px;pointer-events:none;z-index:1}
.rasgado svg{display:block;width:100%;height:100%;overflow:visible}
.ras-abajo{fill:var(--crema-2)}
.ras-sombra{fill:none;stroke:rgba(70,25,15,.32);stroke-width:9;transform:translateY(3px)}
.ras-fibra{fill:none;stroke:#fff;stroke-width:3;stroke-linejoin:round;opacity:.95}

/* ---------- Preguntas → contacto: trama de puntos de imprenta ---------- */
.preguntas:has(> .semitono){--st:clamp(110px,11.7vw,168px);padding-bottom:calc(var(--st) + clamp(40px,5vw,72px))}
.semitono{position:absolute;left:0;right:0;bottom:-1px;height:var(--st);pointer-events:none;z-index:1}
.semitono svg{display:block;width:100%;height:100%}
.semitono circle,.semitono rect{fill:var(--negro)}
.semitono circle{transform-box:fill-box;transform-origin:center;transition:transform .5s var(--ease) var(--d,0ms)}
.semitono .ht-rojo{fill:var(--rojo)}
.js .semitono:not(.visto) circle{transform:scale(0)}
.semitono.visto .ht-rojo{animation:titila 2.4s ease-in-out infinite alternate;animation-delay:calc(var(--d) + .8s)}
@media (prefers-reduced-motion:reduce){.semitono circle{transition:none}.semitono .ht-rojo{animation:none}}

/* ---------- Preguntas: fondo con puntos entre las tarjetas y la tarjeta del asistente ---------- */
.preguntas{isolation:isolate;background:radial-gradient(40% 45% at 0% 28%,rgba(230,57,70,.09),rgba(230,57,70,0) 70%),radial-gradient(35% 40% at 100% 70%,rgba(122,14,14,.08),rgba(122,14,14,0) 70%),var(--crema-2)}
.preguntas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--p-trama);-webkit-mask:linear-gradient(90deg,transparent 38%,#000 58%);mask:linear-gradient(90deg,transparent 38%,#000 58%)}
@media (max-width:900px){.preguntas::before{display:none}}
.faq-ayuda{position:relative;overflow:hidden;padding:22px;border-radius:var(--r-l);background:var(--negro);color:var(--crema);box-shadow:var(--sombra)}
.faq-ayuda::before{content:"";position:absolute;width:320px;aspect-ratio:1;right:-140px;top:-160px;border-radius:50%;background:radial-gradient(closest-side,rgba(230,57,70,.35),transparent);pointer-events:none}
.faq-ayuda>*{position:relative}
.faq-burbuja{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;align-items:start;margin-bottom:18px}
.faq-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#2A0E0E;box-shadow:inset 0 0 0 1px rgba(230,57,70,.4)}
.faq-avatar svg{width:27px;height:auto;aspect-ratio:836/590}
.faq-burbuja p{margin:0;padding:12px 14px;border-radius:4px 16px 16px 16px;background:rgba(246,243,237,.08);font-size:.93rem;line-height:1.45;color:#DCCFC9}
.faq-burbuja b{display:block;margin-bottom:2px;color:var(--crema)}
.faq-escribe{display:flex;gap:4px;margin-top:8px}
.faq-escribe i{width:6px;height:6px;border-radius:50%;background:var(--rojo-claro);animation:late-faq 1.2s ease-in-out infinite}
.faq-escribe i:nth-child(2){animation-delay:.15s}
.faq-escribe i:nth-child(3){animation-delay:.3s}
@keyframes late-faq{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.faq-ayuda .btn{width:100%}
.faq-wa{display:block;margin-top:12px;text-align:center;font-size:.88rem;color:var(--niebla);text-underline-offset:3px}
.faq-wa:hover{color:var(--crema)}
@media (prefers-reduced-motion:reduce){.faq-escribe i{animation:none}}

/* ---------- Contacto: texto a la izquierda, tres formas de empezar a la derecha, luz en el borde ---------- */
.contacto-caja:has(.contacto-opciones){grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;justify-items:stretch;gap:clamp(28px,5vw,64px);text-align:left;background:radial-gradient(60% 80% at 100% 0%,rgba(230,57,70,.22),rgba(230,57,70,0) 60%),radial-gradient(50% 70% at 0% 100%,rgba(122,14,14,.4),rgba(122,14,14,0) 70%),var(--negro-2)}
.contacto-caja:has(.contacto-opciones) h2{margin:14px 0 16px}
.contacto-caja:has(.contacto-opciones) .entradilla{margin:0 0 22px;max-width:44ch}
.contacto-caja:has(.contacto-opciones)::after{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;z-index:2;background:conic-gradient(from var(--giro),rgba(230,57,70,.15) 0deg,rgba(230,57,70,.15) 210deg,var(--rojo) 295deg,#FFC2B4 330deg,var(--rojo) 350deg,rgba(230,57,70,.15) 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:giro 6s linear infinite paused}
.contacto-caja.activo::after{animation-play-state:running}
.contacto-badge{display:inline-flex;align-items:center;gap:10px;margin:0;padding:7px 14px 7px 12px;border-radius:999px;background:rgba(246,243,237,.07);box-shadow:inset 0 0 0 1px rgba(246,243,237,.12);font-size:.86rem;font-weight:650;color:#E9E1DA}
.contacto-badge i{width:9px;height:9px;border-radius:50%;background:#3BE58F;box-shadow:0 0 0 0 rgba(59,229,143,.6);animation:latido 2s ease-out infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(59,229,143,.55)}80%,100%{box-shadow:0 0 0 10px rgba(59,229,143,0)}}
.contacto-opciones{display:grid;gap:12px}
.contacto-caja:has(.contacto-opciones)>.contacto-cinta{display:none}
.c-op{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) auto;align-items:center;gap:16px;padding:16px 18px;border-radius:18px;background:rgba(246,243,237,.05);box-shadow:inset 0 0 0 1px rgba(246,243,237,.1);color:var(--crema);text-decoration:none;transition:transform .25s var(--ease),background-color .2s,box-shadow .2s}
.c-op-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--rojo-boton);color:#fff;box-shadow:0 10px 22px -12px rgba(212,42,58,.8)}
.c-op-wa .c-op-ico{background:#1A9E4B;box-shadow:0 10px 22px -12px rgba(37,211,102,.8)}
.c-op-ico svg{width:24px;height:24px}
.c-op-txt b{display:block;font-size:1.05rem}
.c-op-txt small{display:block;margin-top:2px;font-size:.86rem;color:var(--niebla)}
.c-op-flecha{width:20px;height:20px;color:var(--rojo-claro);transition:transform .25s var(--ease)}
.c-op:hover,.c-op:focus-visible{transform:translateX(6px);background:rgba(230,57,70,.12);box-shadow:inset 0 0 0 1.5px rgba(230,57,70,.55),0 18px 40px -26px rgba(230,57,70,.7)}
.c-op-wa:hover,.c-op-wa:focus-visible{background:rgba(37,211,102,.1);box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.5),0 18px 40px -26px rgba(37,211,102,.6)}
.c-op:hover .c-op-flecha,.c-op:focus-visible .c-op-flecha{transform:translateX(4px)}
.contacto-opciones .contacto-horario{margin:4px 0 0;text-align:center}
@media (max-width:900px){.contacto-caja:has(.contacto-opciones){grid-template-columns:1fr;text-align:center;justify-items:center}.contacto-caja:has(.contacto-opciones) .entradilla{margin-inline:auto}.contacto-opciones{width:100%;text-align:left}}
@media (max-width:600px){.c-op{grid-template-columns:44px minmax(0,1fr) auto;gap:12px;padding:12px 14px}.c-op-ico{width:44px;height:44px;border-radius:13px}.c-op-txt b{font-size:.98rem}.c-op-txt small{font-size:.8rem}.contacto-badge{font-size:.78rem}}
@media (prefers-reduced-motion:reduce){.contacto-caja::after,.contacto-badge i{animation:none}}

/* ---------- Cuadro de Lighthouse: las cinco notas en aros, como en el informe de Google, en móvil y en ordenador ---------- */
.lh-cab{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin:0 0 22px;padding-bottom:16px;border-bottom:1px solid rgba(246,243,237,.08)}
.lh-marca{display:flex;align-items:center;gap:8px;margin:0;font-size:.86rem;font-weight:700;color:var(--crema)}
.lh-marca svg{width:20px;height:20px;fill:none;stroke:var(--rojo-claro);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lh-modo{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:rgba(246,243,237,.07)}
.lh-modo::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:var(--rojo-boton);transition:transform .4s var(--ease)}
.lh-modo:has([data-modo=ordenador][aria-pressed=true])::before{transform:translateX(100%)}
.lh-modo button{position:relative;z-index:1;padding:6px 16px;border:0;background:none;color:var(--niebla);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;transition:color .3s}
.lh-modo button[aria-pressed=true]{color:#fff}
.lh-modo button:focus-visible{outline:2px solid var(--rojo-claro);outline-offset:2px;border-radius:999px}
.lh-notas{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px 10px;margin:0;padding:0}
.lh-notas li{display:grid;justify-items:center;gap:10px;text-align:center}
@property --aro{syntax:"<number>";inherits:true;initial-value:0}
.lh-aro{--aro:var(--nota);--c:#0CCE6B;--t:#3BE58F;--f:rgba(12,206,107,.1);position:relative;display:grid;place-items:center;width:clamp(62px,5.6vw,78px);aspect-ratio:1;border-radius:50%;background:var(--f);transition:--aro 1.3s var(--ease),background-color .3s}
.lh-aro.n{--c:#FFA400;--t:#FFB84D;--f:rgba(255,164,0,.1)}
.lh-aro.r{--c:#FF4E42;--t:#FF7A70;--f:rgba(255,78,66,.1)}
.lh-aro::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c) calc(var(--aro) * 1%),rgba(246,243,237,.1) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5.5px))}
.lh-aro b{position:relative;font-size:clamp(1.2rem,1rem + .5vw,1.5rem);font-weight:800;color:var(--t);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.lh-notas.espera .lh-aro{--aro:0}
.lh-cat{font-size:.8rem;line-height:1.3;color:#DCCFC9}
.lh-cat sup{color:var(--niebla)}
/* La escala de colores de Lighthouse: triángulo rojo, cuadrado naranja y círculo verde */
.lh-leyenda{display:flex;justify-content:center;flex-wrap:wrap;gap:6px 20px;margin:22px 0 0;font-size:.76rem;color:var(--niebla)}
.ley{display:inline-flex;align-items:center;gap:7px}
.ley::before{content:"";width:10px;height:10px}
.ley.r::before{background:#FF4E42;clip-path:polygon(50% 0,100% 100%,0 100%)}
.ley.n::before{background:#FFA400}
.ley.v::before{background:#0CCE6B;border-radius:50%}
.lh-pie{margin:14px 0 0;font-size:.74rem;line-height:1.5;color:var(--niebla);text-align:center}
@media (max-width:600px){.lh-notas{grid-template-columns:repeat(3,minmax(0,1fr))}.lh-cab{justify-content:center}}
@media (prefers-reduced-motion:reduce){.lh-aro,.lh-modo::before{transition:none}}

/* ---------- Web de muestra: fondo con puntos (solo a la derecha, detrás de las capturas) y dos órbitas en los huecos libres ---------- */
.muestra{isolation:isolate}
.muestra::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--p-trama);-webkit-mask:linear-gradient(90deg,transparent 44%,#000 66%);mask:linear-gradient(90deg,transparent 44%,#000 66%)}
.orbita{position:absolute;z-index:0;pointer-events:none;aspect-ratio:1}
.orbita i{position:absolute;inset:0;border-radius:50%}
.orbita .o-fuera{border:2px dashed rgba(230,57,70,.55);animation:gira-sello 36s linear infinite}
.orbita .o-dentro{inset:22%;border:1.5px solid rgba(122,14,14,.35);background:radial-gradient(closest-side,rgba(230,57,70,.14),transparent)}
.orbita .o-centro{inset:44%;border-radius:3px;background:var(--rojo);transform:rotate(45deg);box-shadow:0 0 12px rgba(230,57,70,.7)}
.orbita .o-luna{animation:gira-sello 9s linear infinite}
.orbita .o-luna::before{content:"";position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--rojo-boton);box-shadow:0 0 0 4px rgba(230,57,70,.18),0 0 14px rgba(230,57,70,.7)}
.orbita-1{width:clamp(96px,9vw,128px);right:6%;top:calc(clamp(96px,9vw,128px) * -1 - 10px)}
.orbita-2{width:clamp(56px,5vw,70px);left:3%;bottom:calc(clamp(56px,5vw,70px) * -1 - 6px)}
.orbita-2 .o-luna{animation-duration:6s;animation-direction:reverse}
@media (max-width:900px){.orbita,.muestra::before{display:none}}
@media (prefers-reduced-motion:reduce){.orbita i{animation:none!important}}

/* ---------- Móvil: animaciones más ligeras ----------
   Los brillos difuminados (filtros) obligan al móvil a recalcularlos en cada fotograma: ahí se quitan.
   Las líneas de "Así te ven en Google" ocupan todo el ancho con su proporción, para que lleguen enteras a sus puntos. */
.transicion .tr-capa{position:absolute;inset:0;width:100%;height:100%;overflow:visible;will-change:transform}
@media (max-width:900px){
  .google-cables{top:calc(var(--arriba) * .3);left:0;width:100%;height:auto;aspect-ratio:1000/80}
  .pulsos,.esc-luz,.serv-trazo svg{filter:none!important}
  .google-cables .pulsos path,.sim-plano .pulsos path{stroke-width:3.4}
  .tr-cinta{filter:none}
  .rev-lado::before{animation:none!important}
  .js .sube{transition-duration:.55s;transition-delay:calc(var(--i,0) * 40ms)}
}
@media (max-width:900px){.sim-plano{clip-path:inset(14.5% -20% 0 -20%)}} /* en el móvil el texto va encima del teléfono: el plano no sube hasta él */

/* ---------- Portada: la oferta en grande (titular en tres líneas, precio y garantía) ---------- */
.portada h1.gancho{margin:0 0 22px;max-width:none;font-size:clamp(2.7rem,1.3rem + 5.4vw,5.5rem);font-weight:900;line-height:.92;letter-spacing:-.03em;text-transform:uppercase}
.gancho .g-l{display:block}
.g-contorno{color:var(--crema);filter:url(#f-contorno);letter-spacing:.01em}
.g-precio{width:fit-content;padding-bottom:.06em;background:linear-gradient(90deg,#E63946,#FF8A6E);-webkit-background-clip:text;background-clip:text;color:transparent}
.g-sub{margin:0 0 8px;font-size:clamp(1rem,.95rem + .3vw,1.15rem);color:#DCCFC9}
.g-sub s{margin-right:10px;color:var(--niebla)}
.g-promesa{margin:0;font-size:clamp(1.05rem,.98rem + .45vw,1.35rem);font-weight:750;color:var(--crema)}
.g-promesa mark{padding:0 .08em;color:inherit;background:linear-gradient(transparent 58%,rgba(230,57,70,.65) 58%,rgba(230,57,70,.65) 90%,transparent 90%)}
.portada .g-acciones{margin-top:30px}
.g-btn{box-shadow:0 14px 32px -12px rgba(212,42,58,.75)}

/* ---------- Packs: pago único arriba y mensualidad debajo ---------- */
.pack-que{width:fit-content;margin:0 0 10px;padding:4px 11px;border-radius:999px;background:rgba(230,57,70,.1);color:var(--rojo-texto);font-size:.76rem;font-weight:800}
.pack-top .pack-que{background:rgba(230,57,70,.2);color:var(--rojo-claro)}
.pack-etiq{margin:0 0 4px;font-size:.78rem;font-weight:800;color:var(--gris)}
.pack-top .pack-etiq{color:var(--niebla)}
.pack-unico{margin-top:20px}
.pack-unico .pack-precio{margin:0;align-items:baseline}
.pack-unico .pack-precio b{font-size:clamp(2.5rem,2rem + 1.4vw,3.2rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.pack-unico .pack-precio s{font-size:1rem;font-weight:600;color:var(--gris)}
.pack-top .pack-unico .pack-precio s{color:var(--niebla)}
.pack-lanza{width:fit-content;margin:8px 0 0;padding:3px 10px;border-radius:999px;background:var(--rojo-boton);color:#fff;font-size:.74rem;font-weight:800}
.pack-unico+.pack-lista{margin:18px 0 0}
.pack-mes{margin:22px 0 24px;padding:16px 16px 6px;border-radius:var(--r-m);background:var(--crema);box-shadow:inset 0 0 0 1px var(--linea)}
.pack-top .pack-mes{background:rgba(246,243,237,.06);box-shadow:inset 0 0 0 1px rgba(246,243,237,.1)}
.pack-mes-precio{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 6px;margin:0}
.pack-mas{font-size:1.2rem;font-weight:800;color:var(--rojo-texto)}
.pack-top .pack-mas{color:var(--rojo-claro)}
.pack-mes .pack-cuota{font-size:clamp(1.8rem,1.5rem + .8vw,2.2rem)}
.pack-mes .pack-ahorro{margin:6px 0 0;min-height:0}
.pack-sin{margin:2px 0 0;font-size:.9rem;font-weight:650;line-height:1.45}
.pack-mes .pack-lista{margin:12px 0 10px;font-size:.88rem}
.pack.sin-cuota .pack-lista-mes{opacity:.38}
.pack-lista-mes,.pack-mes-precio,.pack-sin{transition:opacity .3s}
@media (max-width:620px){
  .plazos-op{grid-template-columns:repeat(3,minmax(0,1fr))}
  .plazos-op::before{display:none}
  .plazos-op input:checked+span{background:var(--negro)}
  .plazos-op label{display:flex}
  .plazos-op span{flex:1;height:auto;min-height:62px;padding:8px 4px;line-height:1.15}
}

/* Franja de contacto, justo debajo del inicio: WhatsApp, teléfono y correo (el correo lleva al formulario) */
.rapido{background:var(--negro-2);border-block:1px solid rgba(246,243,237,.08);color:var(--crema)}
.rapido-fila{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 22px;padding-block:12px 66px}
.rapido-tit{margin:0;font-weight:700;font-size:.95rem;color:var(--niebla)}
.rapido-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.rp-chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 18px;border-radius:999px;background:rgba(246,243,237,.06);box-shadow:inset 0 0 0 1px rgba(246,243,237,.16);color:var(--crema);font-weight:650;font-size:.95rem;text-decoration:none;transition:background-color .2s,box-shadow .2s,transform .2s}
.rp-chip svg{width:19px;height:19px;flex:none;color:var(--rojo-claro)}
.rp-wa svg{color:#3DDC84}
.rp-chip:hover,.rp-chip:focus-visible{background:rgba(230,57,70,.14);box-shadow:inset 0 0 0 1.5px rgba(230,57,70,.6);transform:translateY(-2px)}
.rp-wa:hover,.rp-wa:focus-visible{background:rgba(37,211,102,.12);box-shadow:inset 0 0 0 1.5px rgba(37,211,102,.55)}
.rapido-horario{margin:0;font-size:.85rem;color:var(--niebla)}
@media (max-width:640px){.rapido-fila{gap:10px}.rapido-tit,.rapido-horario{width:100%;text-align:center}.rp-chip{padding:0 14px;font-size:.9rem}}
/* Formulario de revisión: botón de correo, aviso de envío y campo trampa para robots */
.rev-form .rev-correo{margin-top:10px;background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1.5px #C9BBAD}
.rev-form .rev-correo:hover,.rev-form .rev-correo:focus-visible{box-shadow:inset 0 0 0 2px var(--rojo);color:var(--rojo-texto)}
.rev-form .rev-correo svg{width:20px;height:20px;margin-right:8px}
.rev-form .rev-correo:disabled{opacity:.6;cursor:progress}
.rev-estado{margin:12px 0 0;padding:10px 14px;border-radius:12px;background:#E6F4EA;color:#14532D;font-weight:650;font-size:.92rem}
.rev-estado.mal{background:#FDE8E7;color:#8A1C14}
.trampa{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Con la franja de contacto debajo, el inicio no necesita tanto aire por abajo */
.portada:has(+ .rapido){padding-bottom:clamp(8px,1.5vw,20px)}

/* ===== Panel de clientes (entre las preguntas frecuentes y el contacto) ===== */
.panel-sec{isolation:isolate;overflow:hidden;background:radial-gradient(46% 55% at 82% 50%,rgba(230,57,70,.2),rgba(230,57,70,0) 70%),var(--negro)}
.panel-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);align-items:center;gap:clamp(36px,6vw,88px)}
.panel-badge{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px;border-radius:999px;background:rgba(246,243,237,.07);box-shadow:inset 0 0 0 1px var(--linea-osc);font-size:.84rem;font-weight:650;color:var(--niebla)}
.panel-badge i{width:8px;height:8px;border-radius:50%;background:var(--rojo)}
.panel-texto h2{margin:0 0 14px}
.panel-texto .entradilla{max-width:46ch;margin:0 0 26px;color:var(--niebla)}
.panel-puntos{list-style:none;display:grid;gap:16px;margin:0 0 30px}
.panel-puntos li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.pnl-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:rgba(230,57,70,.14);color:var(--rojo-claro);box-shadow:inset 0 0 0 1px rgba(230,57,70,.28)}
.pnl-ico svg{width:22px;height:22px}
.pnl-txt b{display:block;font-size:1.02rem}
.pnl-txt span span{display:block;margin-top:2px;font-size:.92rem;color:var(--niebla)}
.panel-acciones{display:grid;gap:12px;justify-items:start}
.panel-acciones .btn svg{width:20px;height:20px}
.panel-nota{margin:0;font-size:.88rem;color:var(--niebla)}

/* La maqueta: un navegador con el panel dibujado (datos inventados) */
.panel-maqueta{margin:0;position:relative}
.panel-maqueta figcaption{margin-top:14px;text-align:center;font-size:.82rem;color:var(--niebla)}
.pnl-ventana{border-radius:18px;overflow:hidden;background:var(--crema);color:var(--tinta);box-shadow:0 50px 90px -40px rgba(0,0,0,.9),0 0 0 1px rgba(246,243,237,.14);transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);transform-origin:80% 50%;transition:transform .5s var(--ease)}
.pnl-ventana:hover{transform:perspective(1400px) rotateY(-2deg) rotateX(0)}
.pnl-barra{display:flex;align-items:center;gap:7px;padding:11px 14px;background:#E4DCD1}
.pnl-barra i{width:10px;height:10px;border-radius:50%;background:#C9BBAD}
.pnl-barra span{margin-left:10px;flex:1;max-width:260px;padding:4px 12px;border-radius:999px;background:#F6F3ED;font-size:.76rem;font-weight:600;color:var(--gris)}
.pnl-cuerpo{padding:18px;display:grid;gap:12px}
.pnl-saludo{display:flex;align-items:center;gap:12px}
.pnl-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--negro)}
.pnl-logo svg{width:24px;height:24px;color:var(--rojo)}
.pnl-saludo p{margin:0;line-height:1.25}.pnl-saludo b{display:block;font-size:1rem}.pnl-saludo small{font-size:.78rem;color:var(--gris)}
.pnl-fila{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:12px}
.pnl-fila+.pnl-fila{grid-template-columns:repeat(2,minmax(0,1fr))}
.pnl-tarjeta{padding:14px;border-radius:14px;background:#fff;box-shadow:0 1px 0 rgba(26,26,26,.1),0 0 0 1px rgba(26,26,26,.05)}
.pnl-et{margin:0 0 10px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--vino)}
.pnl-progreso{display:grid;justify-items:center;align-content:center}
.pnl-progreso .pnl-et{justify-self:start}
.pnl-anillo{position:relative;width:104px;aspect-ratio:1}
.pnl-anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.pnl-anillo circle{fill:none;stroke-width:11;stroke-linecap:round}
.pnl-anillo .fondo{stroke:#EDE6DC}
.pnl-anillo .valor{stroke:var(--rojo-boton);stroke-dasharray:100;stroke-dashoffset:35}
.pnl-anillo b{position:absolute;inset:0;display:grid;place-items:center;font-size:1.55rem;font-weight:800}
.pnl-anillo b small{font-size:.8rem;font-weight:700;margin-left:2px;align-self:center}
.pnl-fases{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.pnl-fases li{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600;color:var(--gris)}
.pnl-fases i{flex:none;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#EDE6DC;box-shadow:inset 0 0 0 1.5px #D4C8BA}
.pnl-fases svg{width:11px;height:11px;fill:none;stroke:#fff;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.pnl-fases .hecha{color:var(--tinta)}.pnl-fases .hecha i{background:var(--rojo-boton);box-shadow:none}
.pnl-fases .ahora{color:var(--tinta);font-weight:800}.pnl-fases .ahora i{background:#fff;box-shadow:inset 0 0 0 3px var(--rojo-boton)}
.pnl-fases em{margin-left:auto;padding:2px 9px;border-radius:999px;background:var(--rojo-boton);color:#fff;font-size:.68rem;font-style:normal;font-weight:800}
.pnl-tareas,.pnl-docs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pnl-tareas li,.pnl-docs li{display:flex;align-items:center;gap:9px;font-size:.84rem;font-weight:600}
.pnl-tareas i{flex:none;width:16px;height:16px;border-radius:5px;box-shadow:inset 0 0 0 1.8px var(--rojo-boton);background:#fff}
.pnl-tareas .hecha i{background:var(--rojo-boton)}
.pnl-tareas .hecha{color:var(--gris)}
.pnl-tareas em,.pnl-docs em{margin-left:auto;padding:2px 9px;border-radius:999px;background:#EDE6DC;font-size:.68rem;font-style:normal;font-weight:800;color:var(--gris)}
.pnl-tareas em.pide{background:var(--rojo-boton);color:#fff}
.pnl-docs em.pagada{background:#DDF1E3;color:#14532D}
@media (max-width:980px){
  .panel-grid{grid-template-columns:1fr}
  .pnl-ventana{transform:none}
}
@media (max-width:520px){
  .pnl-fila,.pnl-fila+.pnl-fila{grid-template-columns:1fr}
  .pnl-cuerpo{padding:14px}
}
@media (prefers-reduced-motion:reduce){.pnl-ventana{transition:none}}
.pnl-anillo b{display:flex;align-items:baseline;justify-content:center;align-content:center;padding-top:34px;line-height:1}
.pnl-anillo b small{margin-left:1px;font-size:.78rem;align-self:auto}
/* Panel y contacto van seguidos y los dos son oscuros: menos aire entre ellos */
.panel-sec{padding-bottom:clamp(28px,4vw,56px)}
.panel-sec+.contacto{padding-top:clamp(28px,4vw,56px)}
/* El panel de clientes está al final de la página: el navegador no lo dibuja hasta que se acerca (la web carga más ligera) */
.panel-sec{content-visibility:auto;contain-intrinsic-size:auto 920px}
@media (max-width:980px){.panel-sec{contain-intrinsic-size:auto 2300px}}