:root{
  --azul-oscuro:#0b2b45;
  --azul:#0f3d5c;
  --azul-claro:#1f6396;
  --naranja:#f5a623;
  --naranja-oscuro:#dd8b0a;
  --gris-fondo:#f6f8fa;
  --gris-texto:#4a5560;
  --blanco:#ffffff;
  --borde:#e3e8ec;
  --sombra:0 10px 30px rgba(11,43,69,0.08);
  --radio:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color:var(--azul-oscuro);
  background:var(--blanco);
  line-height:1.6;
  padding-bottom:74px;
}
img{max-width:100%; display:block;}
a{text-decoration:none; color:inherit;}
ul{list-style:none;}
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}
section{padding:88px 0;}
h1,h2,h3,h4{font-weight:800; line-height:1.2;}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:1.5px;
  font-size:13px;
  font-weight:700;
  color:var(--naranja-oscuro);
  margin-bottom:12px;
  display:inline-block;
}
.section-title{font-size:clamp(26px,4vw,38px); margin-bottom:16px; color:var(--azul-oscuro);}
.section-sub{color:var(--gris-texto); font-size:17px; max-width:620px;}
.center{text-align:center; margin-left:auto; margin-right:auto;}

/* Botones */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:15px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:15.5px;
  border:2px solid transparent;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn-primary{background:var(--naranja); color:var(--azul-oscuro);}
.btn-primary:hover{background:var(--naranja-oscuro); transform:translateY(-2px); box-shadow:0 8px 20px rgba(245,166,35,0.35);}
.btn-secondary{background:transparent; border-color:rgba(255,255,255,0.5); color:var(--blanco);}
.btn-secondary:hover{background:rgba(255,255,255,0.12); transform:translateY(-2px);}
.btn-whatsapp{background:#25D366; color:#fff;}
.btn-whatsapp:hover{background:#1ebe57; transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,211,102,0.35);}
.btn-outline-dark{background:transparent; border-color:var(--azul); color:var(--azul);}
.btn-outline-dark:hover{background:var(--azul); color:var(--blanco);}
.btn-block{width:100%; justify-content:center;}

/* Header */
header{
  position:sticky; top:0; z-index:100;
  background:var(--blanco);
  border-bottom:1px solid var(--borde);
}
.topbar{
  background:var(--azul-oscuro);
  color:#cfe0ee;
  font-size:13.5px;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px;
  flex-wrap:wrap; gap:8px;
}
.topbar-item{display:flex; align-items:center; gap:6px;}
.topbar-item strong{color:var(--naranja);}
.navwrap{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 0;
}
.logo{display:flex; align-items:center;}
.logo img{height:40px; width:auto;}
nav.mainnav{display:flex; gap:32px;}
nav.mainnav a{font-weight:600; font-size:15px; color:var(--azul); position:relative; padding:6px 0;}
nav.mainnav a:hover{color:var(--naranja-oscuro);}
.nav-actions{display:flex; align-items:center; gap:14px;}
.phone-pill{
  display:flex; align-items:center; gap:8px;
  font-weight:700; color:var(--azul-oscuro); font-size:15px;
}
.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:26px; height:3px; background:var(--azul-oscuro); border-radius:2px;
  transition:transform .25s ease, opacity .15s ease;}
/* Abierta, las tres barras se convierten en una X: el mismo boton cierra */
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
/* Con el menu abierto no se scrollea el fondo */
body.menu-abierto{overflow:hidden;}

/* Hero */
.hero{
  background:radial-gradient(circle at 15% 20%, rgba(255,255,255,0.08), transparent 40%), linear-gradient(135deg,var(--azul-oscuro),var(--azul) 60%, var(--azul-claro));
  color:var(--blanco);
  padding:64px 0 60px;
  position:relative;
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:56px;
  align-items:center;
}
.hero h1{font-size:clamp(32px,4.4vw,48px); margin-bottom:20px;}
.hero h1 span{color:var(--naranja);}
.hero p.lead{font-size:18px; color:#d6e3ee; max-width:520px; margin-bottom:32px;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:36px;}
.hero-badges{display:flex; gap:22px; flex-wrap:wrap;}
.hero-badge{display:flex; align-items:center; gap:10px; font-size:14px; color:#d6e3ee;}
.hero-badge .ico{color:var(--naranja); font-size:18px;}
.hero-badge.pendiente{color:#ffd699; font-weight:700;}
.hero-visual{
  position:relative;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:20px;
  padding:64px 40px;
  backdrop-filter:blur(3px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.hero-visual::before{
  content:"";
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 50% 45%, rgba(245,166,35,0.22), transparent 62%);
  pointer-events:none;
}
.hero-visual img{
  position:relative;
  width:100%;
  max-width:340px;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,0.35));
}

/* Trust strip */
.trust-strip{background:var(--gris-fondo); border-bottom:1px solid var(--borde);}
.trust-strip .container{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:20px; padding-top:32px; padding-bottom:32px;
}
.trust-item{text-align:center; display:flex; flex-direction:column; align-items:center; gap:8px;}
.trust-item .ico{color:var(--naranja-oscuro); display:flex; align-items:center; justify-content:center;}
.trust-item .ico svg{width:28px; height:28px;}
.trust-item .lbl{font-size:14px; color:var(--azul-oscuro); font-weight:700;}

/* Servicios */
.servicios-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:26px;
  margin-top:48px;
}
.servicio-card{
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  padding:32px 26px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  flex:1 1 calc((100% - 52px) / 3);
  max-width:calc((100% - 52px) / 3);
}
.servicio-card:hover{transform:translateY(-6px); box-shadow:var(--sombra); border-color:transparent;}
.servicio-icon{
  width:56px; height:56px; border-radius:12px;
  background:linear-gradient(135deg,var(--azul),var(--azul-claro));
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.servicio-card h3{font-size:19px; margin-bottom:10px;}
.servicio-card p{color:var(--gris-texto); font-size:15px; margin-bottom:14px;}
.servicio-card .link{color:var(--azul); font-weight:700; font-size:14px;}
.servicio-card.urgente{background:var(--azul-oscuro); border-color:var(--azul-oscuro); color:var(--blanco);}
.servicio-card.urgente p{color:#c9d9e6;}
.servicio-card.urgente .servicio-icon{background:linear-gradient(135deg,var(--naranja),var(--naranja-oscuro));}
.servicio-card.urgente .link{color:var(--naranja);}

/* Por que elegirnos */
.porque{background:var(--gris-fondo);}
.porque-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:44px;
  align-items:center;
  margin-top:20px;
}
.porque-list{display:flex; flex-direction:column; gap:26px;}
.porque-item{display:flex; gap:18px;}
.porque-num{
  flex:0 0 auto; width:44px; height:44px; border-radius:50%;
  background:var(--azul); color:var(--blanco);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:16px;
}
.porque-item h4{font-size:17px; margin-bottom:6px;}
.porque-item p{color:var(--gris-texto); font-size:15px;}
.porque-visual{
  background:linear-gradient(150deg,var(--azul-oscuro),var(--azul-claro));
  border-radius:20px; padding:44px; color:var(--blanco);
  display:flex; flex-direction:column; gap:22px;
}
.porque-visual h3{font-size:22px;}
.porque-visual p{color:#d6e3ee; font-size:15px;}
.porque-visual .ctas{display:flex; flex-direction:column; gap:12px;}

/* Proceso */
.proceso-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin-top:48px; position:relative;
}
.proceso-item{
  background:var(--blanco); border:1px solid var(--borde); border-radius:var(--radio);
  padding:28px 22px; text-align:center; position:relative;
}
.proceso-step{
  width:38px; height:38px; border-radius:50%;
  background:var(--naranja); color:var(--azul-oscuro); font-weight:800;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 16px;
}
.proceso-item h4{font-size:16.5px; margin-bottom:8px;}
.proceso-item p{font-size:14px; color:var(--gris-texto);}

/* Cobertura */
.cobertura-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:50px; align-items:center; margin-top:20px;
}
.zonas-list{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 24px; margin-top:24px;}
.zonas-list li{
  display:flex; align-items:center; gap:10px; font-size:15px; color:var(--azul-oscuro); font-weight:600;
}
.zonas-list li .dot{width:8px; height:8px; border-radius:50%; background:var(--naranja);}
.pendiente-tag{
  display:inline-block; background:#fff3d9; color:#8a5a00; border:1px dashed var(--naranja-oscuro);
  border-radius:8px; padding:10px 16px; font-size:14px; font-weight:700;
}

/* CTA banda urgencia */
.cta-banda{
  background:linear-gradient(120deg,var(--naranja),var(--naranja-oscuro));
  color:var(--azul-oscuro);
}
.cta-banda .container{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;
  padding:52px 24px;
}
.cta-banda h3{font-size:24px; margin-bottom:8px;}
.cta-banda p{font-size:15px; color:#5a3a05;}
.cta-banda .cta-btns{display:flex; gap:12px; flex-wrap:wrap;}
.cta-banda .btn-primary{background:var(--azul-oscuro); color:var(--blanco);}
.cta-banda .btn-primary:hover{background:var(--azul);}

/* FAQ */
.faq-list{max-width:760px; margin:48px auto 0;}
.faq-item{border-bottom:1px solid var(--borde);}
.faq-q{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:20px 4px; display:flex; justify-content:space-between; align-items:center;
  font-weight:700; font-size:16px; color:var(--azul-oscuro);
}
.faq-q .plus{font-size:22px; color:var(--naranja-oscuro); transition:transform .2s ease;}
.faq-item.open .faq-q .plus{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease;}
.faq-a p{padding:0 4px 20px; color:var(--gris-texto); font-size:15px;}
.fee-panel{padding:0 4px 22px;}
.faq-a .fee-intro{padding:0 0 12px; margin:0;}
.fee-list{
  margin:0; border:1px solid var(--borde); border-radius:12px; overflow:hidden;
  background:var(--blanco);
}
.fee-row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:20px; align-items:center;
  padding:13px 16px; border-bottom:1px solid var(--borde);
}
.fee-row:last-child{border-bottom:0;}
.fee-row-featured{background:#fff8ec;}
.fee-row dt{font-size:14px; font-weight:700; color:var(--azul-oscuro);}
.fee-row dt small{
  display:block; margin-top:3px; font-size:12px; line-height:1.45;
  font-weight:400; color:var(--gris-texto);
}
.fee-row dd{margin:0; color:var(--azul-oscuro); font-size:16px; font-weight:800; white-space:nowrap;}
.faq-a .fee-note{
  margin:12px 0 0; padding:11px 14px; border-left:3px solid var(--naranja);
  border-radius:0 8px 8px 0; background:var(--gris-fondo); font-size:13px; line-height:1.5;
}

@media(max-width:520px){
  .fee-row{gap:12px; padding:12px;}
  .fee-row dd{font-size:15px;}
}

/* Contacto */
.contacto{background:var(--gris-fondo);}
.contacto-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-top:20px; align-items:start;
}
.contacto-info{display:flex; flex-direction:column; gap:22px;}
.info-row{display:flex; gap:16px; align-items:flex-start;}
.info-icon{
  width:44px; height:44px; border-radius:10px; flex:0 0 auto;
  background:var(--blanco); border:1px solid var(--borde);
  display:flex; align-items:center; justify-content:center; color:var(--azul); font-size:19px;
}
.info-row h4{font-size:15.5px; margin-bottom:4px;}
.info-row p{font-size:14.5px; color:var(--gris-texto);}
.contacto-cta-card{
  background:var(--blanco); border-radius:var(--radio); padding:36px;
  border:1px solid var(--borde); box-shadow:var(--sombra);
  display:flex; flex-direction:column; gap:16px; text-align:center;
}
.contacto-cta-card h3{font-size:21px;}
.contacto-cta-card p{color:var(--gris-texto); font-size:14.5px;}
.contacto-cta-card .btn{width:100%; justify-content:center;}
.contacto-cta-card .privacy-note{font-size:12.5px; text-align:left; line-height:1.5; margin-top:4px;}
.contacto-cta-card .privacy-note a{color:var(--azul-claro); text-decoration:underline;}

/* Footer */
footer{background:var(--azul-oscuro); color:#c9d9e6; padding:64px 0 24px;}
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:40px; border-bottom:1px solid rgba(255,255,255,0.1);
}
.footer-logo img{height:32px; width:auto; margin-bottom:14px;}
.footer-grid p{font-size:14px; line-height:1.7;}
.footer-col h5{color:var(--blanco); font-size:14.5px; margin-bottom:16px; letter-spacing:0.5px; text-transform:uppercase;}
.footer-col ul{display:flex; flex-direction:column; gap:10px;}
.footer-col a{font-size:14px; color:#c9d9e6;}
.footer-col a:hover{color:var(--naranja);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px;
  padding-top:22px; font-size:13px; color:#8fa3b3;
}
.footer-bottom a{color:#8fa3b3;}
.footer-bottom a:hover{color:var(--naranja);}

/* Botones flotantes */
.whatsapp-float{
  position:fixed; right:20px; bottom:90px; z-index:210;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; box-shadow:0 8px 20px rgba(0,0,0,0.25);
  display:flex; align-items:center; justify-content:center;
}
.whatsapp-float:hover{transform:scale(1.06); transition:transform .15s ease;}
.sticky-mobile-cta{
  display:none; position:fixed; bottom:0; left:0; right:0; z-index:200;
  background:var(--blanco); border-top:1px solid var(--borde);
  box-shadow:0 -6px 20px rgba(0,0,0,0.08);
  padding:12px 16px; gap:12px;
}
.sticky-mobile-cta a{flex:1;}

/* Paginas legales */
.legal{padding:64px 0 96px;}
.legal h1{font-size:clamp(26px,4vw,34px); margin-bottom:8px;}
.legal .updated{color:var(--gris-texto); font-size:14px; margin-bottom:36px;}
.legal h2{font-size:20px; margin:32px 0 12px; color:var(--azul);}
.legal p, .legal li{color:var(--gris-texto); font-size:15.5px; margin-bottom:12px;}
.legal ul{list-style:disc; padding-left:22px;}
.legal a{color:var(--azul-claro); text-decoration:underline;}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{order:-1; margin-bottom:10px;}
  .porque-grid, .cobertura-grid, .contacto-grid{grid-template-columns:1fr;}
  .servicio-card{flex-basis:calc((100% - 26px) / 2); max-width:calc((100% - 26px) / 2);}
  .proceso-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:720px){
  nav.mainnav{
    /* --alto-cabecera lo fija main.js con la altura real del header */
    position:fixed; top:var(--alto-cabecera, 116px); left:0; right:0; bottom:0;
    background:var(--blanco); flex-direction:column; padding:20px 24px 28px; gap:6px;
    transform:translateX(100%); z-index:90;
    overflow-y:auto; overscroll-behavior:contain;
    /* cerrado no debe ser enfocable con el teclado ni leible por lectores */
    visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
  }
  nav.mainnav.open{transform:translateX(0); visibility:visible; transition:transform .25s ease, visibility 0s;}
  nav.mainnav a{padding:14px 4px; border-bottom:1px solid var(--borde); font-size:17px;}
  .burger{display:flex; position:relative; z-index:95;}
  .nav-actions .phone-pill{display:none;}
  .topbar .container{justify-content:center; text-align:center;}
  .servicio-card{flex-basis:100%; max-width:100%;}
  .proceso-grid{grid-template-columns:1fr;}
  .trust-strip .container{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .zonas-list{grid-template-columns:1fr;}
  section{padding:56px 0;}
  .sticky-mobile-cta{display:flex;}
  .whatsapp-float{bottom:90px; right:16px; width:52px; height:52px;}
  .cta-banda .container{flex-direction:column; text-align:center;}
  /* En movil deja hueco a la barra fija de llamar/WhatsApp y al boton flotante */
  .cookie-banner{bottom:150px;}
}

/* Aviso de cookies */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px;
  max-width:620px; margin:0 auto;
  background:var(--blanco);
  border:1px solid var(--borde);
  border-radius:var(--radio);
  box-shadow:var(--sombra);
  padding:22px 24px;
  z-index:300;
  display:flex; flex-direction:column; gap:14px;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner p{color:var(--gris-texto); font-size:14.5px; line-height:1.55;}
.cookie-banner a{color:var(--azul-claro); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; flex-wrap:wrap;}
.cookie-banner-actions .btn{padding:11px 20px; font-size:14.5px;}
@media (max-width:480px){
  .cookie-banner{left:12px; right:12px; padding:18px;}
}