/* Lo Montamos · estilos */
:root{
  --azul:#3A8FD4;
  --azul-medio:#6BB3EA;
  --celeste:#A9D2F3;
  --azul-btn:#2A6FB0;
  --azul-btn-hover:#215C94;
  --marino:#24324A;
  --marino-2:#1B263A;
  --texto:#24324A;
  --texto-suave:#55657B;
  --niebla:#F5F9FD;
  --linea:#E1EAF4;
  --blanco:#FFFFFF;
  --wa:#25D366;
  --wa-texto:#0B3B1F;
  --radio:18px;
  --sombra:0 10px 30px rgba(36,50,74,.08);
  --sombra-fuerte:0 18px 48px rgba(36,50,74,.14);
  --ancho:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;font-size:17px;line-height:1.6;color:var(--texto);background:var(--blanco)}
img,svg{max-width:100%;display:block}
a{color:var(--azul-btn);text-decoration:none}
a:hover{color:var(--azul-btn-hover)}
h1,h2,h3,h4{line-height:1.15;margin:0 0 .5em;font-weight:600;letter-spacing:-.02em;color:var(--marino)}
h1{font-size:clamp(2.3rem,5.2vw,3.8rem)}
h2{font-size:clamp(1.8rem,3.6vw,2.6rem)}
h3{font-size:1.3rem}
p{margin:0 0 1em}
ul{margin:0;padding:0}
.container{width:100%;max-width:var(--ancho);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-999px;top:0;background:var(--marino);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--azul);outline-offset:3px;border-radius:6px}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:12px 24px;border-radius:999px;font:inherit;font-weight:600;font-size:1rem;border:2px solid transparent;cursor:pointer;transition:transform .15s ease,background .15s ease,box-shadow .15s ease;text-align:center}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:20px;height:20px;flex:none}
.btn-primario{background:var(--azul-btn);color:#fff}
.btn-primario:hover{background:var(--azul-btn-hover);color:#fff;box-shadow:0 8px 20px rgba(42,111,176,.28)}
.btn-borde{background:#fff;color:var(--marino);border-color:var(--linea)}
.btn-borde:hover{border-color:var(--azul);color:var(--marino)}
.btn-wa{background:var(--wa);color:var(--wa-texto)}
.btn-wa:hover{background:#1FBF5B;color:var(--wa-texto)}
.btn-blanco{background:#fff;color:var(--marino)}
.btn-blanco:hover{color:var(--marino);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.btn-transp{background:transparent;color:#fff;border-color:rgba(255,255,255,.4)}
.btn-transp:hover{color:#fff;border-color:#fff}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* Cabecera */
.cabecera{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(12px);-webkit-backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--linea)}
.cabecera .container{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:76px}
.logo{display:flex;align-items:center;gap:10px;color:var(--marino);font-weight:600;font-size:1.45rem;letter-spacing:-.03em;white-space:nowrap}
.logo:hover{color:var(--marino)}
.logo svg{width:34px;height:34px}
.nav{display:flex;align-items:center;gap:6px}
.nav>a,.nav .sub>button{color:var(--marino);font:inherit;font-weight:500;font-size:1rem;padding:10px 14px;border-radius:999px;background:none;border:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nav>a:hover,.nav .sub>button:hover,.nav>a[aria-current="page"]{background:var(--niebla);color:var(--marino)}
.nav .sub{position:relative}
.nav .sub>button svg{width:16px;height:16px}
.nav .menu-sub{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:560px;background:#fff;border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra-fuerte);padding:12px;display:none;grid-template-columns:1fr 1fr;gap:4px}
.nav .sub:hover .menu-sub,.nav .sub:focus-within .menu-sub,.nav .sub.abierto .menu-sub{display:grid}
.nav .sub::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.menu-sub a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:12px;color:var(--marino)}
.menu-sub a:hover{background:var(--niebla);color:var(--marino)}
.menu-sub .ico{width:38px;height:38px;border-radius:10px;background:var(--niebla);display:flex;align-items:center;justify-content:center;flex:none;color:var(--azul-btn)}
.menu-sub .ico svg{width:20px;height:20px}
.menu-sub strong{display:block;font-weight:600;font-size:.98rem}
.menu-sub span{display:block;font-size:.85rem;color:var(--texto-suave);line-height:1.35}
.nav .btn{margin-left:8px;min-height:44px;padding:8px 20px}
.burger{display:none;width:48px;height:48px;border-radius:12px;border:1px solid var(--linea);background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--marino)}
.burger svg{width:24px;height:24px}

@media (max-width:980px){
  .burger{display:inline-flex}
  .nav{position:fixed;inset:76px 0 0 0;background:#fff;flex-direction:column;align-items:stretch;gap:2px;padding:16px 24px 32px;overflow-y:auto;display:none}
  .nav.abierta{display:flex}
  .nav>a,.nav .sub>button{font-size:1.1rem;padding:14px 12px;justify-content:space-between;width:100%;border-radius:12px}
  .nav .sub>button{display:none}
  .nav .menu-sub{position:static;transform:none;width:auto;display:grid;grid-template-columns:1fr;box-shadow:none;border:0;padding:0 0 8px}
  .nav .sub::after{display:none}
  .nav .btn{margin:16px 0 0}
  body.menu-abierto{overflow:hidden}
}

/* Secciones */
.seccion{padding:96px 0}
.seccion-niebla{background:var(--niebla)}
.seccion-marino{background:var(--marino);color:#DCE5F0}
.seccion-marino h2,.seccion-marino h3{color:#fff}
.cabecera-seccion{max-width:720px;margin:0 0 48px}
.cabecera-seccion.centro{margin-left:auto;margin-right:auto;text-align:center}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--azul-btn);margin-bottom:14px}
.seccion-marino .eyebrow{color:var(--celeste)}
.lead{font-size:1.2rem;color:var(--texto-suave)}
.seccion-marino .lead{color:#C3D0E0}
@media (max-width:720px){.seccion{padding:64px 0}body{font-size:16px}.lead{font-size:1.08rem}}

/* Hero */
.hero{background:var(--niebla);padding:72px 0 88px;overflow:hidden;position:relative}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.hero h1 span{color:var(--azul)}
.hero .lead{max-width:560px;margin-bottom:28px}
.garantias{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;list-style:none;color:var(--texto-suave);font-size:.98rem}
.garantias li{display:flex;align-items:center;gap:8px}
.garantias svg{width:20px;height:20px;color:var(--azul);flex:none}
.hero-visual{position:relative;min-height:440px}
.mock-nav{background:#fff;border-radius:20px;box-shadow:var(--sombra-fuerte);border:1px solid var(--linea);overflow:hidden;position:absolute;inset:0 40px 70px 0}
.mock-nav .barra{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--linea);background:#FBFDFF}
.mock-nav .barra i{width:10px;height:10px;border-radius:50%;background:var(--celeste)}
.mock-nav .barra span{margin-left:10px;font-size:.8rem;color:var(--texto-suave);background:var(--niebla);border-radius:999px;padding:3px 12px}
.mock-cuerpo{padding:26px}
.mock-cuerpo .l{height:12px;border-radius:6px;background:var(--niebla);margin-bottom:10px}
.mock-cuerpo .t{height:22px;width:70%;border-radius:8px;background:var(--marino);opacity:.9;margin-bottom:14px}
.mock-cuerpo .b{display:inline-block;height:34px;width:130px;border-radius:999px;background:var(--azul);margin:10px 0 22px}
.mock-cuerpo .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.mock-cuerpo .grid3 div{height:74px;border-radius:12px;background:var(--niebla);border:1px solid var(--linea)}
.flota{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--sombra-fuerte);border:1px solid var(--linea);padding:14px 16px;display:flex;align-items:center;gap:12px;font-size:.92rem;color:var(--marino)}
.flota strong{display:block;font-weight:600}
.flota small{color:var(--texto-suave);font-size:.8rem}
.flota .ico{width:42px;height:42px;border-radius:12px;background:var(--niebla);display:flex;align-items:center;justify-content:center;color:var(--azul-btn);flex:none}
.flota .ico svg{width:22px;height:22px}
.flota.f1{right:0;top:64px}
.flota.f2{left:24px;bottom:18px}
.flota.f3{right:12px;bottom:0}
.estrellas{color:#F4B740;letter-spacing:2px}
@media (max-width:980px){
  .hero .container{grid-template-columns:1fr}
  .hero-visual{min-height:380px}
}
@media (max-width:520px){
  .hero{padding:48px 0 64px}
  .hero-visual{min-height:330px}
  .mock-nav{inset:0 0 70px 0}
  .flota.f1{display:none}
  .flota.f2{left:0}
}

/* Tarjetas de servicio */
.grid{display:grid;gap:24px}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:980px){.grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid-3,.grid-2,.grid-4{grid-template-columns:1fr}}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:28px;transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;display:flex;flex-direction:column}
a.tarjeta{color:var(--texto)}
a.tarjeta:hover{box-shadow:var(--sombra-fuerte);transform:translateY(-3px);border-color:var(--celeste);color:var(--texto)}
.tarjeta .ico{width:52px;height:52px;border-radius:14px;background:var(--niebla);display:flex;align-items:center;justify-content:center;color:var(--azul-btn);margin-bottom:18px}
.tarjeta .ico svg{width:26px;height:26px}
.tarjeta h3{margin-bottom:8px}
.tarjeta p{color:var(--texto-suave);font-size:.98rem}
.tarjeta .base{margin-top:auto;padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--linea)}
.tarjeta .desde{font-size:.9rem;color:var(--texto-suave)}
.tarjeta .desde b{color:var(--marino);font-size:1.15rem;font-weight:600}
.tarjeta .flecha{width:36px;height:36px;border-radius:50%;background:var(--niebla);display:flex;align-items:center;justify-content:center;color:var(--azul-btn)}
.tarjeta .flecha svg{width:18px;height:18px}

/* Ventajas */
.ventaja{display:flex;gap:16px;align-items:flex-start}
.ventaja .ico{width:46px;height:46px;border-radius:12px;background:#fff;border:1px solid var(--linea);display:flex;align-items:center;justify-content:center;color:var(--azul-btn);flex:none}
.ventaja .ico svg{width:22px;height:22px}
.ventaja h3{font-size:1.12rem;margin-bottom:4px}
.ventaja p{color:var(--texto-suave);font-size:.97rem;margin:0}
.seccion-marino .ventaja .ico{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:var(--celeste)}
.seccion-marino .ventaja p{color:#C3D0E0}

/* Pasos */
.pasos{counter-reset:paso;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;list-style:none}
.pasos li{position:relative;padding-top:56px}
.pasos li::before{counter-increment:paso;content:counter(paso);position:absolute;top:0;left:0;width:42px;height:42px;border-radius:12px;background:var(--azul-btn);color:#fff;font-weight:600;display:flex;align-items:center;justify-content:center}
.pasos h3{font-size:1.12rem;margin-bottom:6px}
.pasos p{color:var(--texto-suave);font-size:.97rem;margin:0}
@media (max-width:980px){.pasos{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pasos{grid-template-columns:1fr}}

/* Banda plan estrella */
.estrella{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.estrella .precio-grande{font-size:clamp(3rem,6vw,4.4rem);font-weight:600;color:#fff;line-height:1;letter-spacing:-.03em}
.estrella .precio-grande small{font-size:1.1rem;font-weight:500;color:#C3D0E0;letter-spacing:0}
.estrella-caja{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:24px;padding:32px}
.check-lista{list-style:none;display:grid;gap:12px;margin:0 0 24px}
.check-lista li{display:flex;gap:12px;align-items:flex-start}
.check-lista svg{width:22px;height:22px;flex:none;color:var(--azul);margin-top:2px}
.seccion-marino .check-lista svg{color:var(--azul-medio)}
.contador{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
.contador div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;text-align:center}
.contador b{display:block;font-size:1.8rem;color:#fff;font-weight:600;line-height:1.1}
.contador span{font-size:.85rem;color:#C3D0E0}
@media (max-width:900px){.estrella{grid-template-columns:1fr}}

/* Trabajos */
.trabajo{background:#fff;border:1px solid var(--linea);border-radius:22px;overflow:hidden;display:flex;flex-direction:column;color:var(--texto);transition:box-shadow .2s ease,transform .2s ease}
.trabajo:hover{box-shadow:var(--sombra-fuerte);transform:translateY(-3px);color:var(--texto)}
.trabajo .pantalla{aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.trabajo .pantalla .logo-cliente{position:relative;width:auto;height:auto;max-width:70%;max-height:66%;transition:transform .3s ease}
.trabajo:hover .pantalla .logo-cliente{transform:scale(1.04)}
.trabajo .pantalla .marca{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:600;color:#fff;letter-spacing:-.02em;text-align:center;padding:0 24px}
.trabajo .pantalla .barra{position:absolute;top:0;left:0;right:0;display:flex;gap:6px;padding:12px 14px}
.trabajo .pantalla .barra i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.6)}
.trabajo .info{padding:24px 26px 26px}
.trabajo .info small{color:var(--texto-suave);font-size:.88rem}
.trabajo .info h3{margin:4px 0 8px}
.trabajo .info p{color:var(--texto-suave);font-size:.97rem}
.etiquetas{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin-top:12px}
.etiquetas li{font-size:.82rem;background:var(--niebla);border:1px solid var(--linea);border-radius:999px;padding:4px 12px;color:var(--marino)}
.ver{display:inline-flex;align-items:center;gap:6px;font-weight:600;margin-top:16px;color:var(--azul-btn)}
.ver svg{width:18px;height:18px}

/* Zona */
.zona{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.pueblos{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.pueblos li{background:#fff;border:1px solid var(--linea);border-radius:999px;padding:8px 16px;font-size:.95rem}
@media (max-width:900px){.zona{grid-template-columns:1fr}}

/* Precios */
.planes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.planes.dos{grid-template-columns:repeat(2,minmax(0,1fr));max-width:860px;margin:0 auto}
.planes.uno{grid-template-columns:minmax(0,1fr);max-width:560px;margin:0 auto}
@media (max-width:980px){.planes{grid-template-columns:1fr;max-width:560px;margin:0 auto}.planes.dos{grid-template-columns:1fr}}
.plan{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:32px;display:flex;flex-direction:column;position:relative}
.plan.destacado{border:2px solid var(--azul);box-shadow:var(--sombra-fuerte)}
.plan .insignia{position:absolute;top:-14px;left:32px;background:var(--azul-btn);color:#fff;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px}
.plan h3{font-size:1.35rem;margin-bottom:6px}
.plan .desc{color:var(--texto-suave);font-size:.97rem;min-height:3em}
.plan .precio{margin:12px 0 22px;color:var(--marino)}
.plan .precio .desde{display:block;font-size:.88rem;color:var(--texto-suave)}
.plan .precio b{font-size:2.6rem;font-weight:600;letter-spacing:-.03em;line-height:1}
.plan .precio span{font-size:1rem;color:var(--texto-suave)}
.plan .check-lista{margin-bottom:28px}
.plan .check-lista li{font-size:.98rem}
.plan .btn{margin-top:auto;width:100%}
.letra-pequena{font-size:.85rem;color:var(--texto-suave);max-width:760px;margin:28px auto 0;text-align:center;line-height:1.5}

/* Bloques de servicio */
.hero-servicio{background:var(--niebla);padding:64px 0 72px}
.hero-servicio .container{display:grid;grid-template-columns:1.2fr .8fr;gap:48px;align-items:center}
.migas{font-size:.9rem;color:var(--texto-suave);margin-bottom:18px}
.migas a{color:var(--texto-suave)}
.migas a:hover{color:var(--azul-btn)}
.resumen-precio{background:#fff;border:1px solid var(--linea);border-radius:22px;padding:28px;box-shadow:var(--sombra)}
.resumen-precio .fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea)}
.resumen-precio .fila:last-of-type{border-bottom:0}
.resumen-precio .fila span{color:var(--texto-suave);font-size:.97rem}
.resumen-precio .fila b{font-size:1.25rem;font-weight:600;color:var(--marino);white-space:nowrap}
.resumen-precio small{display:block;color:var(--texto-suave);font-size:.82rem;margin-top:10px}
.resumen-precio .btn{width:100%;margin-top:16px}
@media (max-width:900px){.hero-servicio .container{grid-template-columns:1fr}}

.comparativa{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.comparativa .col{border-radius:22px;padding:28px;border:1px solid var(--linea);background:#fff}
.comparativa .col.mala{background:var(--niebla)}
.comparativa h3{display:flex;align-items:center;gap:10px}
.comparativa ul{list-style:none;display:grid;gap:10px}
.comparativa li{display:flex;gap:10px;align-items:flex-start;font-size:.98rem}
.comparativa li svg{width:20px;height:20px;flex:none;margin-top:3px}
.comparativa .mala li svg{color:#9AA7B8}
.comparativa .buena li svg{color:var(--azul)}
@media (max-width:760px){.comparativa{grid-template-columns:1fr}}

.aviso{display:flex;gap:16px;align-items:flex-start;background:#fff;border:1px dashed var(--azul-medio);border-radius:18px;padding:22px 24px}
.aviso .ico{width:44px;height:44px;border-radius:12px;background:var(--niebla);display:flex;align-items:center;justify-content:center;color:var(--azul-btn);flex:none}
.aviso .ico svg{width:22px;height:22px}
.aviso p{margin:0;color:var(--texto-suave)}
.aviso strong{color:var(--marino)}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border:1px solid var(--linea);border-radius:16px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;color:var(--marino);display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{width:20px;height:20px;flex:none;transition:transform .2s ease;color:var(--azul-btn)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{color:var(--texto-suave);padding-bottom:20px;margin:0}

/* CTA final */
.cta{background:var(--marino);border-radius:28px;padding:56px;display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;color:#C3D0E0;position:relative;overflow:hidden}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{margin:0}
.cta .btns{justify-content:flex-end}
.cta .deco{position:absolute;right:-30px;bottom:-40px;width:220px;opacity:.08;pointer-events:none}
@media (max-width:860px){.cta{grid-template-columns:1fr;padding:40px 28px}.cta .btns{justify-content:flex-start}}

/* Contacto */
.contacto-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:start}
@media (max-width:940px){.contacto-grid{grid-template-columns:1fr}}
.formulario{background:#fff;border:1px solid var(--linea);border-radius:24px;padding:36px;box-shadow:var(--sombra)}
.formulario h2{font-size:1.7rem}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo.ancho{grid-column:1/-1}
.campo label{font-weight:500;font-size:.95rem;color:var(--marino)}
.campo label .opc{color:var(--texto-suave);font-weight:400}
.campo input,.campo select,.campo textarea{font:inherit;font-size:1rem;color:var(--texto);background:#FBFDFF;border:1px solid #CBD8E6;border-radius:12px;padding:13px 14px;min-height:50px;width:100%}
.campo textarea{min-height:130px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--azul);box-shadow:0 0 0 4px rgba(58,143,212,.18);background:#fff}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{display:flex;align-items:center;gap:8px;border:1px solid #CBD8E6;border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:500;font-size:.95rem;min-height:44px;background:#FBFDFF}
.radios input{accent-color:var(--azul-btn);width:18px;height:18px;margin:0}
.radios label:has(input:checked){border-color:var(--azul);background:#EEF6FD}
.legal-check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--texto-suave)}
.legal-check input{width:20px;height:20px;margin-top:2px;accent-color:var(--azul-btn);flex:none}
.oculto{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.videollamada-extra{display:none}
.videollamada-extra.visible{display:grid}
.formulario .btn{width:100%;margin-top:6px}
.nota-form{font-size:.85rem;color:var(--texto-suave);margin-top:12px;text-align:center}
@media (max-width:600px){.campos{grid-template-columns:1fr}.formulario{padding:26px 20px}}
.canales{display:grid;gap:14px}
.canal{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--linea);border-radius:18px;padding:18px 20px;color:var(--texto);transition:border-color .2s ease,box-shadow .2s ease}
a.canal:hover{border-color:var(--celeste);box-shadow:var(--sombra);color:var(--texto)}
.canal .ico{width:48px;height:48px;border-radius:14px;background:var(--niebla);display:flex;align-items:center;justify-content:center;color:var(--azul-btn);flex:none}
.canal .ico.wa{background:#E7F9EE;color:#128C4A}
.canal .ico svg{width:24px;height:24px}
.canal strong{display:block;color:var(--marino);font-weight:600}
.canal span{color:var(--texto-suave);font-size:.93rem}
.caja-video{background:var(--marino);color:#C3D0E0;border-radius:22px;padding:26px}
.caja-video h3{color:#fff;font-size:1.2rem}
.caja-video p{font-size:.95rem}

/* Legales */
.legal{max-width:820px}
.legal h2{font-size:1.45rem;margin-top:2em}
.legal p,.legal li{color:var(--texto-suave)}
.legal ul{padding-left:1.2em;margin-bottom:1em}
.legal .pendiente{background:#FFF6DB;border-radius:6px;padding:0 6px;color:#6B5200}

/* Pie */
.pie-web{background:var(--marino-2);color:#AFBDD0;padding:72px 0 28px;font-size:.95rem}
.pie-web a{color:#DCE5F0}
.pie-web a:hover{color:#fff}
.pie-web .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;margin-bottom:48px}
.pie-web h4{color:#fff;font-size:1rem;margin-bottom:16px}
.pie-web ul{list-style:none;display:grid;gap:10px}
.pie-web .logo{color:#fff;margin-bottom:14px}
.pie-web .logo:hover{color:#fff}
.pie-web .legales{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);padding-top:24px;font-size:.88rem}
.pie-web .legales div{display:flex;flex-wrap:wrap;gap:8px 20px}
@media (max-width:900px){.pie-web .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.pie-web .cols{grid-template-columns:1fr}}

/* WhatsApp flotante */
.wa-flotante{position:fixed;right:20px;bottom:20px;z-index:40;width:60px;height:60px;border-radius:50%;background:var(--wa);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,0,0,.2);transition:transform .15s ease}
.wa-flotante:hover{transform:scale(1.06);color:#fff}
.wa-flotante svg{width:32px;height:32px}

/* Gracias */
.gracias{min-height:60vh;display:flex;align-items:center;text-align:center}
.gracias .ico{width:80px;height:80px;border-radius:50%;background:#E7F5EE;color:#1E8E55;display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
.gracias .ico svg{width:40px;height:40px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Ajustes */
.nav>a.btn-primario{background:var(--azul-btn);color:#fff;padding:8px 20px}
.nav>a.btn-primario:hover{background:var(--azul-btn-hover);color:#fff}
ol.pasos{padding:0;margin:0}
@media (max-width:520px){.flota.f2{display:none}.flota.f3{right:0;left:auto}}
section[id]{scroll-margin-top:84px}

/* =========================================================
   EFECTOS Y ANIMACIONES
   ========================================================= */

/* Barra de progreso de lectura */
.progreso{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:linear-gradient(90deg,var(--celeste),var(--azul-medio),var(--azul));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* Cabecera al hacer scroll */
.cabecera{transition:box-shadow .3s ease,background .3s ease}
.cabecera.con-scroll{box-shadow:0 6px 24px rgba(36,50,74,.08)}

/* Logo: las barras "se montan" */
.logo svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:montar-barra .7s cubic-bezier(.2,.9,.3,1.3) both}
.logo svg rect:nth-child(2){animation-delay:.12s}
.logo svg rect:nth-child(3){animation-delay:.24s}
.logo:hover svg rect{animation:rebote-barra .6s ease both}
.logo:hover svg rect:nth-child(2){animation-delay:.08s}
.logo:hover svg rect:nth-child(3){animation-delay:.16s}
@keyframes montar-barra{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}
@keyframes rebote-barra{0%,100%{transform:scaleY(1)}40%{transform:scaleY(.6)}70%{transform:scaleY(1.08)}}

/* Hero: fondo vivo */
.hero{isolation:isolate}
.hero-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  background-image:radial-gradient(rgba(58,143,212,.14) 1.2px,transparent 1.2px);background-size:26px 26px}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55}
.blob.b1{width:420px;height:420px;background:#CFE6FA;top:-120px;right:-80px;animation:flotar-blob 18s ease-in-out infinite}
.blob.b2{width:340px;height:340px;background:#DCEFFF;bottom:-140px;left:-100px;animation:flotar-blob 22s ease-in-out infinite reverse}
.blob.b3{width:260px;height:260px;background:#BFE0F7;top:40%;left:45%;opacity:.35;animation:flotar-blob 26s ease-in-out infinite}
@keyframes flotar-blob{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(40px,-30px) scale(1.08)}66%{transform:translate(-30px,25px) scale(.95)}}

/* Hero: entrada del texto */
.hero-texto>*{animation:subir .8s cubic-bezier(.2,.8,.2,1) both}
.hero-texto>*:nth-child(2){animation-delay:.08s}
.hero-texto>*:nth-child(3){animation-delay:.16s}
.hero-texto>*:nth-child(4){animation-delay:.26s}
.hero-texto>*:nth-child(5){animation-delay:.36s}
.hero-texto>*:nth-child(6){animation-delay:.46s}
@keyframes subir{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* Hero: palabra que rota */
.rotador{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--linea);border-radius:999px;padding:7px 16px 7px 12px;font-size:.95rem;color:var(--texto-suave);box-shadow:var(--sombra);margin:0 0 18px}
.rotador .punto{width:9px;height:9px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 0 rgba(34,197,94,.5);animation:latido 1.8s ease-out infinite}
.rotador .rot{color:var(--azul-btn);font-weight:600;display:inline-block;transition:opacity .35s ease,transform .35s ease}
.rotador .rot.saliendo{opacity:0;transform:translateY(-8px)}
.rotador .rot.entrando{opacity:0;transform:translateY(8px)}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 10px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}

/* Hero: la web "se monta" sola */
.mock-nav{animation:aparecer-mock .9s cubic-bezier(.2,.8,.2,1) .2s both}
@keyframes aparecer-mock{from{opacity:0;transform:translateY(30px) rotate(-1.5deg)}to{opacity:1;transform:none}}
.mock-cuerpo .t,.mock-cuerpo .l,.mock-cuerpo .b{transform-origin:0 50%;animation:construir 6s cubic-bezier(.3,.8,.3,1) infinite}
.mock-cuerpo .t{animation-delay:.6s}
.mock-cuerpo .l:nth-of-type(2){animation-delay:.8s}
.mock-cuerpo .l:nth-of-type(3){animation-delay:.95s}
.mock-cuerpo .b{animation-delay:1.1s}
.mock-cuerpo .grid3 div{animation:construir-caja 6s cubic-bezier(.3,.8,.3,1) infinite}
.mock-cuerpo .grid3 div:nth-child(1){animation-delay:1.3s}
.mock-cuerpo .grid3 div:nth-child(2){animation-delay:1.45s}
.mock-cuerpo .grid3 div:nth-child(3){animation-delay:1.6s}
@keyframes construir{0%{transform:scaleX(0);opacity:0}12%,85%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
@keyframes construir-caja{0%{transform:scale(.6);opacity:0}12%,85%{transform:scale(1);opacity:1}100%{opacity:0}}
.mock-nav{position:absolute}
.cursor{position:absolute;width:18px;height:18px;z-index:3;left:30%;top:40%;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l16 9-7 2-3 7z' fill='%2324324A' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:mover-cursor 6s ease-in-out infinite}
@keyframes mover-cursor{0%{left:70%;top:80%}20%{left:22%;top:22%}40%{left:28%;top:52%}55%{left:28%;top:52%;transform:scale(.85)}60%{transform:scale(1)}80%{left:62%;top:78%}100%{left:70%;top:80%}}

/* Tarjetas flotantes del hero */
.flota{animation:entrar-flota .7s cubic-bezier(.2,.9,.3,1.2) both,bob 6s ease-in-out infinite}
.flota.f1{animation-delay:.7s,1.4s}
.flota.f2{animation-delay:.9s,2s}
.flota.f3{animation-delay:1.1s,2.6s}
@keyframes entrar-flota{from{opacity:0;transform:translateY(20px) scale(.9)}to{opacity:1;transform:none}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* Cinta de servicios en movimiento */
.cinta{background:var(--marino);color:#DCE5F0;overflow:hidden;padding:18px 0;border-top:1px solid rgba(255,255,255,.06)}
.cinta-track{display:flex;gap:48px;width:max-content;animation:cinta 32s linear infinite}
.cinta:hover .cinta-track{animation-play-state:paused}
.cinta span{display:inline-flex;align-items:center;gap:12px;font-size:1.15rem;font-weight:500;white-space:nowrap}
.cinta svg{width:22px;height:22px;color:var(--azul-medio)}
.cinta span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--azul);margin-left:36px}
@keyframes cinta{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Aparición al hacer scroll */
.js .revelar{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:var(--retraso,0s)}
.js .revelar.visible{opacity:1;transform:none}
.js .revelar.desde-izq{transform:translateX(-30px)}
.js .revelar.zoom{transform:scale(.94)}
.js .revelar.visible.desde-izq,.js .revelar.visible.zoom{transform:none}

/* Foco de luz que sigue al ratón en las tarjetas */
.tarjeta,.trabajo{position:relative;overflow:hidden}
.tarjeta::before,.trabajo::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:0;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(58,143,212,.10),transparent 45%)}
.tarjeta:hover::before,.trabajo:hover::before{opacity:1}
.tarjeta>*,.trabajo>*{position:relative;z-index:1}
.tarjeta .ico{transition:transform .35s cubic-bezier(.2,.9,.3,1.4),background .3s ease,color .3s ease}
a.tarjeta:hover .ico{transform:rotate(-8deg) scale(1.1);background:var(--azul-btn);color:#fff}
a.tarjeta .flecha{transition:transform .3s ease,background .3s ease,color .3s ease}
a.tarjeta:hover .flecha{transform:translateX(4px);background:var(--azul-btn);color:#fff}

/* Botones con brillo */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn-primario::after,.btn-wa::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;z-index:-1;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.btn-primario:hover::after,.btn-wa:hover::after{left:120%}
.btn svg{transition:transform .25s ease}
.btn:hover svg{transform:translateX(3px)}

/* WhatsApp flotante con pulso */
.wa-flotante{animation:entrar-flota .6s cubic-bezier(.2,.9,.3,1.3) 1.2s both}
.wa-flotante::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--wa);z-index:-1;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.7);opacity:0}}

/* Pasos con línea que se dibuja */
.pasos{position:relative}
@media (min-width:981px){
  .pasos::before{content:"";position:absolute;top:21px;left:21px;right:12%;height:2px;background:linear-gradient(90deg,var(--azul-btn),var(--celeste));transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s cubic-bezier(.3,.8,.3,1) .2s;z-index:0}
  .pasos.visible::before{transform:scaleX(1)}
  .pasos li::before{z-index:1;box-shadow:0 0 0 6px #fff}
}
.pasos li::before{transition:transform .3s ease}
.pasos li:hover::before{transform:scale(1.12) rotate(-6deg)}

/* Plan destacado: brillo en el borde */
.plan{transition:transform .3s ease,box-shadow .3s ease}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sombra-fuerte)}
.plan.destacado::after{content:"";position:absolute;inset:-2px;border-radius:24px;padding:2px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0 70%,var(--azul-medio) 80%,var(--azul) 90%,transparent 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:girar-borde 4s linear infinite}
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes girar-borde{to{--ang:360deg}}
.plan .insignia{animation:latido-insignia 2.6s ease-in-out infinite}
@keyframes latido-insignia{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* Trabajos: logo con zoom suave */
.trabajo .pantalla::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 120%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}

/* Pueblos: chips con hover */
.pueblos li{transition:background .25s ease,color .25s ease,border-color .25s ease,transform .25s ease}
.pueblos li:hover{background:var(--azul-btn);color:#fff;border-color:var(--azul-btn);transform:translateY(-2px)}

/* Banda plan estrella: brillo de fondo */
.seccion-marino{position:relative;overflow:hidden;isolation:isolate}
.seccion-marino::before{content:"";position:absolute;width:600px;height:600px;border-radius:50%;right:-200px;top:-250px;z-index:-1;
  background:radial-gradient(circle,rgba(58,143,212,.35),transparent 65%);animation:flotar-blob 20s ease-in-out infinite}
.precio-grande{display:inline-block}

/* CTA final: decoración animada */
.cta .deco svg rect{transform-box:fill-box;transform-origin:50% 100%;animation:respirar 3s ease-in-out infinite}
.cta .deco svg rect:nth-child(2){animation-delay:.3s}
.cta .deco svg rect:nth-child(3){animation-delay:.6s}
.cta .deco{opacity:.14}
@keyframes respirar{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.75)}}

/* FAQ suave */
.faq details{transition:border-color .25s ease,box-shadow .25s ease}
.faq details[open]{border-color:var(--celeste);box-shadow:var(--sombra)}
.faq details[open] p{animation:subir .4s ease both}

/* Hero de páginas de servicio */
.hero-servicio .container>div:first-child>*{animation:subir .7s cubic-bezier(.2,.8,.2,1) both}
.hero-servicio .container>div:first-child>*:nth-child(2){animation-delay:.06s}
.hero-servicio .container>div:first-child>*:nth-child(3){animation-delay:.12s}
.hero-servicio .container>div:first-child>*:nth-child(4){animation-delay:.2s}
.hero-servicio .container>div:first-child>*:nth-child(5){animation-delay:.28s}
.resumen-precio{animation:aparecer-mock .9s cubic-bezier(.2,.8,.2,1) .3s both}
.resumen-precio .fila{transition:background .2s ease,padding .2s ease}
.resumen-precio .fila:hover{background:var(--niebla);padding-left:10px;padding-right:10px;border-radius:10px}

/* Formulario */
.campo input,.campo select,.campo textarea{transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}

/* Accesibilidad: sin animaciones si el usuario lo prefiere */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .revelar{opacity:1;transform:none}
  .progreso{display:none}
}