:root{
  --bg:#0b1b3a; --bg-dark:#071228; --fg:#eaf2ff; --muted:#a8b3d1;
  --primary:#1e90ff; --primary-2:#63b3ff; --accent:#e11d48; --ok:#22c55e;
  --card:#0f2046; --shadow:0 10px 30px rgba(0,0,0,.25);
  --gold:#f5c542; --danger:#e11d48;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  color:var(--fg);
  background:linear-gradient(180deg,var(--bg) 0%, #0c1f42 100%);
  line-height:1.5;
  padding-top:72px; /* header fijo */
}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}
.container{width:min(1100px,92%);margin-inline:auto}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:1rem;top:1rem;width:auto;height:auto;background:#fff;color:#000;padding:.5rem 1rem;border-radius:.5rem;z-index:20000}

/* ===== Header fijo ===== */
.site-header{
  position:fixed !important; top:0; left:0; right:0;
  z-index:10050 !important;
  backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(7,18,40,.55);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.header-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px;gap:1rem}
.brand{display:flex;align-items:center;gap:.6rem;color:#fff}
.brand .logo{color:var(--accent)}
.brand-text{font-weight:800;letter-spacing:.2px}

.nav-list{display:flex;align-items:center;gap:1rem;list-style:none;margin:0;padding:0}
.nav-list a{color:var(--fg);padding:.6rem .8rem;border-radius:.6rem}
.nav-list a:hover{background:rgba(255,255,255,.07)}
@media (max-width: 960px){ .nav-list{ display:none } }

/* ===== Burger ===== */
.burger{
  display:none; width:42px; height:42px; border-radius:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:blur(6px);
  align-items:center; justify-content:center; gap:5px;
  cursor:pointer; transition:transform .15s ease, background .2s ease;
  position:relative; z-index:10053;
}
.burger:active{ transform:translateY(1px) }
.burger span{ display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition:transform .25s ease, opacity .2s ease }
.burger.open .b1{ transform:translateY(6px) rotate(45deg) }
.burger.open .b2{ opacity:0 }
.burger.open .b3{ transform:translateY(-6px) rotate(-45deg) }
@media (max-width: 960px){ .burger{ display:flex } }

/* ===== Drawer + backdrop ===== */
.mobile-drawer{
  position:fixed; inset:0 0 0 auto; width:min(340px,86%);
  transform:translateX(100%); opacity:0; pointer-events:none;
  transition:transform .35s ease, opacity .25s ease;
  z-index:10052 !important; overflow:hidden !important; height:100dvh;
}
.mobile-drawer .drawer-inner{
  height:100%; overflow:hidden;
  padding:calc(env(safe-area-inset-top, 12px) + 12px) 16px 20px 16px;
  background:linear-gradient(150deg, rgba(12,31,66,.95), rgba(8,17,34,.92));
  backdrop-filter:blur(14px);
  border-left:1px solid rgba(255,255,255,.08);
  display:flex; flex-direction:column; gap:10px;
}
.mobile-drawer.open{ transform:translateX(0); opacity:1; pointer-events:auto; }

.drawer-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem }
.drawer-title{ font-weight:800; letter-spacing:.4px }
.close{ font-size:1.6rem; line-height:1; background:none; border:1px solid rgba(255,255,255,.18);
  color:#fff; width:36px; height:36px; border-radius:10px; cursor:pointer }

.drawer-nav{ display:flex; flex-direction:column; gap:.3rem; margin-top:.25rem }
.drawer-link{
  display:block; padding:1rem; border-radius:.9rem; color:#fff;
  border:1px solid rgba(255,255,255,.06);
  background:radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.05), rgba(255,255,255,0) 60%);
}
.drawer-link:hover{ border-color:rgba(99,179,255,.3) }
.btn-primary-ghost{
  text-align:center; font-weight:800; background:rgba(30,144,255,.15);
  border-color:rgba(30,144,255,.35);
}

.drawer-footer{ margin-top:auto; padding-top:.6rem; border-top:1px dashed rgba(255,255,255,.12) }
.mini-link{ color:#cfe3ff; font-size:.9rem }

.backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(2px);
  z-index:10051 !important; opacity:0; pointer-events:none; transition:opacity .25s ease; overflow:hidden;
}
.backdrop.show{ opacity:1; pointer-events:auto }

/* ===== HERO ===== */
.hero { position:relative; z-index:0; min-height:88dvh; display:grid; place-items:center; overflow:hidden }
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(1.1) contrast(1.05) brightness(.9); z-index:0 }
.hero-overlay{ position:absolute; inset:0; background:radial-gradient(1200px 500px at 20% 20%, rgba(30,144,255,.25), transparent 60%), linear-gradient(180deg, rgba(7,18,40,.70) 0%, rgba(7,18,40,.35) 45%, rgba(7,18,40,.85) 100%); z-index:1 }
.hero-content{ position:relative; z-index:2; text-align:center; padding-block:3.5rem }
.hero h1{ font-size:clamp(2rem,5vw,3.2rem); line-height:1.1; margin:0 0 .6rem }
.hero h1 span{ color:var(--primary) }
.lead{ color:var(--muted); max-width:52ch; margin-inline:auto }
.hero-cta{ display:flex; gap:.6rem; justify-content:center; margin-top:1rem; flex-wrap:wrap }
.hero-badges{ display:flex; gap:.8rem; justify-content:center; list-style:none; padding:0; margin:1rem 0 0; color:#d7e4ff; flex-wrap:wrap }
.fx-clip{ background:linear-gradient(90deg,#fff 0%,#cfe3ff 50%,#fff 100%); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-wave{ position:absolute; bottom:-2px; left:0; right:0; height:40px; background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.08) 100%) }

/* ===== Botones ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:700;border-radius:.9rem;padding:.8rem 1rem;transition:transform .15s ease, box-shadow .2s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--primary) 0%,var(--primary-2) 100%);color:#061226;box-shadow:0 10px 25px rgba(30,144,255,.33)}
.btn-outline{border:1px solid rgba(255,255,255,.2);color:#fff}
.btn-ghost{border:1px dashed rgba(255,255,255,.25);color:#fff}
.btn-decline{background:linear-gradient(135deg, var(--danger) 0%, #ff4b6b 100%); color:#fff; border:none;}

/* ===== Secciones ===== */
.section{padding-block:72px}
.section-dark{background:linear-gradient(180deg,var(--bg-dark), #0c1f42)}
.section-gradient{background:linear-gradient(135deg,rgba(30,144,255,.15),rgba(225,29,72,.15))}
.section-header{text-align:center;margin-bottom:1.5rem}
.section-header h2{font-size:clamp(1.6rem,3.4vw,2.2rem);margin:.2rem 0}
.section-header p{color:var(--muted)}

/* ===== Cards ===== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.card{background:linear-gradient(180deg,#0f2046, #0b1b3a);border:1px solid rgba(255,255,255,.06);border-radius:1.2rem;padding:1.1rem;box-shadow:var(--shadow);transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(0,0,0,.35);border-color:rgba(99,179,255,.25)}
.card .icon{font-size:1.6rem}

/* ===== Grid ===== */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}

/* ===== Checklist ===== */
.checklist{list-style:none;padding:0;margin:1rem 0;color:#d7e4ff}
.checklist li{padding-left:1.8rem;position:relative;margin:.5rem 0}
.checklist li:before{content:"✔";position:absolute;left:0;top:.1rem;color:var(--ok)}

/* ===== Stats ===== */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.stat{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem;text-align:center}
.stat .num{font-size:2rem;font-weight:800}
.stat .unit{margin-left:.2rem;color:#c9dbff}

/* ===== Carrusel Testimonios ===== */
.carousel-viewport{ overflow:hidden; }
.carousel-track{ display:flex; gap:1rem; transition:transform .35s ease; will-change:transform; }
.t-card{
  min-width:clamp(280px, 45%, 520px);
  display:grid; grid-template-columns:56px 1fr; gap:1rem; align-items:start;
  background:#0f2046; border:1px solid rgba(255,255,255,.06); border-radius:1rem; padding:1rem;
}
.t-avatar{ width:56px; height:56px; border-radius:50%; object-fit:cover; border:2px solid rgba(255,255,255,.2); }
.t-body{ display:flex; flex-direction:column; gap:.35rem; }
.t-head{ display:flex; justify-content:space-between; align-items:center; }
.t-stars{ letter-spacing:2px; background:linear-gradient(180deg,#fff,#f5c542); -webkit-background-clip:text; background-clip:text; color:transparent; font-weight:800; }
.carousel-controls{ display:flex; justify-content:center; align-items:center; gap:.8rem; margin-top:1rem; }
.c-btn{ background:#0b1b3a; border:1px solid rgba(255,255,255,.15); border-radius:.8rem; padding:.4rem .8rem; color:#fff; cursor:pointer; }
.c-btn:active{ transform:translateY(1px); }
.c-dots{ display:flex; gap:.4rem; align-items:center; }
.c-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:#6b7aa6; opacity:.6; }
.c-dots button[aria-current="true"]{ opacity:1; background:#cfe3ff; }
@media (min-width: 960px){ .t-card{ min-width: calc(50% - .5rem); } }
@media (min-width:1200px){ .t-card{ min-width: calc(33.333% - .67rem); } }

/* ===== Contacto ===== */
.contact-list{list-style:none;padding:0;margin:1rem 0}
.contact-list a{color:#fff;border-bottom:1px dotted rgba(255,255,255,.4)}
.contact-form{background:#0f2046;border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem;box-shadow:var(--shadow)}
.field{display:grid;gap:.3rem;margin:.6rem 0}
input,select,textarea{background:#0b1b3a;color:#fff;border:1px solid rgba(255,255,255,.12);border-radius:.6rem;padding:.7rem .8rem;outline:none}
input:focus,select:focus,textarea:focus{border-color:#63b3ff;box-shadow:0 0 0 3px rgba(99,179,255,.2)}
.form-note{color:#a8b3d1;font-size:.9rem}
.form-status{margin-top:.4rem;font-weight:600}
.g-recaptcha{ margin-top:.6rem; }

/* ===== Mapa ===== */
.map-wrap{margin-top:1rem;border-radius:1rem;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.map-wrap iframe{width:100%;height:320px;border:0}

/* ===== Footer (RESPONSIVO) ===== */
.site-footer{padding-block:28px;border-top:1px solid rgba(255,255,255,.08);background:#081122}
.footer-grid{
  display:grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap:1rem;
  align-items:center;
}
.footer-brand{font-weight:700}
.footer-contact a{color:#cfe3ff}
.footer-links a{color:#cfe3ff}
.footer-copy{color:#a8b3d1;font-size:.9rem;grid-column:1 / -1;margin-top:.4rem}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr 1fr;
    align-items:start;
    gap: .8rem 1rem;
  }
  .footer-links{ justify-self:end }
  .footer-copy{ grid-column:1 / -1; text-align:center; }
}
@media (max-width: 600px){
  .footer-grid{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .footer-links{ justify-self:center }
  .footer-contact{ margin-top:.2rem }
  .footer-copy{ margin-top:.6rem }
}

/* ===== Cookiebar ===== */
.cookiebar{position:fixed;left:1rem;right:1rem;bottom:1rem;z-index:1500;background:#0f2046;color:#fff;border:1px solid rgba(255,255,255,.08);border-radius:1rem;box-shadow:var(--shadow);display:flex;gap:1rem;align-items:center;justify-content:space-between;padding:.8rem 1rem}
.cookie-text a{color:#cfe3ff;text-decoration:underline}
.cookie-actions{display:flex;gap:.6rem}

/* ===== FAB WhatsApp ===== */
.fab-whatsapp{
  position:fixed;
  right:16px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0));
  width:56px; height:56px;
  display:grid; place-items:center;
  background:#25D366; color:#fff;
  border-radius:9999px;
  box-shadow:0 16px 30px rgba(0,0,0,.35), 0 0 0 4px rgba(37,211,102,.15);
  z-index:10060;
  transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.fab-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 20px 36px rgba(0,0,0,.4), 0 0 0 6px rgba(37,211,102,.18); }
.fab-whatsapp:active{ transform:translateY(0); }

/* ===== Toast (ventana flotante de gracias) ===== */
.toast{
  position:fixed; inset:auto 50% 8vh 50%;
  transform:translate(-50%, 30px) scale(.98);
  display:flex; align-items:center; gap:.8rem;
  padding:1rem 1.2rem; border-radius:1rem;
  background:linear-gradient(160deg, rgba(15,32,70,.98), rgba(12,25,50,.96));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(0,0,0,.45);
  color:#eafff4; z-index:20000; opacity:0;
  transition:opacity .25s ease, transform .25s ease;
  max-width:min(92%, 560px);
}
.toast.show{ opacity:1; transform:translate(-50%, 0) scale(1); }
.toast-icon{ font-size:1.4rem }
.toast-text{ line-height:1.35 }
.toast-close{ background:none; border:1px solid rgba(255,255,255,.25); color:#fff; width:32px; height:32px; border-radius:.6rem; cursor:pointer }

/* ===== Reveal ===== */
.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* ===== Bloqueo scroll cuando menú abierto ===== */
html.menu-open, body.menu-open{ overflow:hidden !important; height:100%; overscroll-behavior:none; touch-action:none }
body.menu-open{ position:relative }

/* ===== Responsive util ===== */
@media (max-width:960px){
  .grid-2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
}


/* === Ajustes móviles y texto justificado para "¿Por qué elegirnos?" === */
#ventajas .reveal { text-align: justify; }
#ventajas .reveal h2 { text-align: left; } /* Mantiene el título elegante */
@media (max-width: 720px){
  #ventajas .stats { grid-template-columns: 1fr !important; }
}


/* === Testimonios: 1 por vista siempre === */
#testimonios .carousel-track { gap: 0.75rem; }
#testimonios .t-card { min-width: 100% !important; }
@media (min-width: 1200px){
  #testimonios .t-card { min-width: 100% !important; }
}