/* =====================
   Variables de marca
   ===================== */
:root{
  --brand-blue: #095092;   /* primario */
  --brand-yellow: #EDF13B; /* acento */
  --brand-blue-600:#0b3f73; /* sombreado */
  --brand-blue-400:#2b6ea7; /* claro */
  --brand-sky:#87AACA;     /* complementario */
  --brand-ice:#ECF5EB;     /* fondo claro */
  --ink:#0d1b2a;           /* texto alto contraste */
  --muted:#5b6b7a;         /* texto secundario */
  --bg:#f7fafc;            /* fondo */
  --card:#ffffff;          /* tarjeta */
  --radius: 16px;
  --shadow: 0 10px 30px rgba(9,80,146,.15);
  --shadow-strong: 0 20px 50px rgba(9,80,146,.25);
}

/* Reset y base */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui,-apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
  line-height:1.5;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3{line-height:1.15;margin:0 0 .6rem}

.container{width:min(1200px, 92vw);margin:0 auto}

/* =====================
   Encabezado sticky
   ===================== */
header{
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.72);
  backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid rgba(9,80,146,.08);
}
.nav{
  display:flex;align-items:center;gap:18px;justify-content:space-between;padding:.6rem 0;
}
.brand{display:flex;align-items:center;gap:.8rem}
.brand img{height:44px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.15))}
.brand strong{font-weight:800;letter-spacing:.5px;color:var(--brand-blue)}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0}
nav a{padding:.6rem .8rem;border-radius:999px;font-weight:600;color:var(--brand-blue)}
nav a:hover{background:rgba(9,80,146,.08)}
.cta{background:var(--brand-blue);color:#fff;padding:.6rem 1rem;border-radius:999px;box-shadow:var(--shadow)}
.cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}

/* =====================
   HERO con video
   ===================== */
.hero{position:relative;min-height:92vh;display:grid;place-items:center;overflow:hidden}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:contrast(1.05) saturate(1.1) brightness(.9)}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(1200px 600px at 20% 20%, rgba(237,241,59,.25), transparent 55%),
                                                radial-gradient(1000px 500px at 90% 90%, rgba(9,80,146,.35), transparent 55%),
                                                linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.55));}
.hero-inner{position:relative;z-index:1;color:#fff;text-align:left;width:min(1100px,92vw);margin-inline:auto;padding:4rem 0}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;background:rgba(237,241,59,.2);color:#fff;border:1px solid rgba(237,241,59,.35);
  padding:.25rem .6rem;border-radius:999px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;font-size:.8rem}
.title{font-size:clamp(2rem, 5vw, 4rem);font-weight:900;margin:.6rem 0}
.title strong{color:var(--brand-yellow);text-shadow:0 0 12px rgba(237,241,59,.5)}
.lead{font-size:clamp(1rem, 2.4vw, 1.25rem);max-width:60ch;color:#e9f1f8}
.cta-row{display:flex;gap:1rem;margin-top:1.4rem;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.85rem 1.1rem;border-radius:12px;font-weight:700;border:2px solid transparent;cursor:pointer;transition:.2s transform, .2s box-shadow}
.btn-primary{background:var(--brand-yellow);color:#0b2142}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(237,241,59,.35)}
.btn-outline{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.35);color:#fff}
.btn-outline:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(255,255,255,.25)}

/* Líneas eléctricas animadas (detalle visual) */
.electric-lines{position:absolute;inset:0;pointer-events:none}
.line{position:absolute;height:2px;left:-20%;right:-20%;opacity:.55;background:linear-gradient(90deg, transparent, var(--brand-yellow), transparent);
  filter:drop-shadow(0 0 8px rgba(237,241,59,.6));animation:scan 8s linear infinite}
.line:nth-child(1){top:20%;animation-duration:11s}
.line:nth-child(2){top:40%;animation-delay:2s}
.line:nth-child(3){top:60%;animation-duration:9s}
.line:nth-child(4){top:80%;animation-delay:4s}
@keyframes scan{0%{transform:translateX(-8%)}100%{transform:translateX(8%)}}

/* =====================
   Secciones
   ===================== */
section{padding: clamp(48px, 7vw, 96px) 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2rem}
.section-head h2{font-size:clamp(1.6rem, 3vw, 2.2rem)}
.tag{display:inline-block;background:rgba(9,80,146,.08);border:1px solid rgba(9,80,146,.15);color:var(--brand-blue);padding:.25rem .6rem;border-radius:999px;font-weight:700;font-size:.8rem}

/* Cards de cursos */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.cards .card{grid-column:span 4;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;position:relative;overflow:hidden}
.cards .card:hover{transform:translateY(-6px);box-shadow:var(--shadow-strong)}
.cards .card::before{content:"";position:absolute;inset:-2px;z-index:0;background:conic-gradient(from 90deg, var(--brand-blue) 0 25%, rgba(9,80,146,.2) 25% 70%, var(--brand-yellow) 70% 100%);
  filter:blur(24px);opacity:.08}
.card > *{position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--brand-blue);color:#fff;padding:.3rem .55rem;border-radius:999px;font-weight:700;font-size:.78rem}
.price{margin-left:auto;background:var(--brand-yellow);color:#0b2142;padding:.25rem .5rem;border-radius:8px;font-weight:900}
.card h3{font-size:1.3rem}
.meta{display:flex;gap:.6rem;flex-wrap:wrap;margin:.4rem 0 1rem;color:var(--muted)}
.card ul{margin:.5rem 0 0 1.1rem}

/* === Cursos: tarjetas con imagen + botón Más Info === */
.course-card{position:relative;overflow:hidden;padding:0}
.course-card .thumb{position:relative;aspect-ratio:16/9;background:linear-gradient(135deg, rgba(9,80,146,.1), rgba(237,241,59,.08));overflow:hidden}
.course-card .thumb img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform .5s ease}
.course-card:hover .thumb img{transform:scale(1.06)}
.course-card .body{padding:18px}
.course-card .row{display:flex;align-items:center;gap:.6rem}
.course-card h3{margin:.4rem 0 .2rem;font-size:1.1rem}
.course-card .actions{display:flex;gap:.6rem;margin-top:.6rem;flex-wrap:wrap}
.btn-info{background:rgba(9,80,146,.06);border:1.5px solid var(--brand-blue);color:var(--brand-blue)}
.btn-info:hover{background:rgba(9,80,146,.12)}
.btn-wa{background:var(--brand-yellow);color:#0b2142}
.course-card .details{max-height:0;opacity:.0;overflow:hidden;transition:max-height .5s ease, opacity .3s ease;margin-top:.6rem}
.course-card.open .details{opacity:1}
.course-card .meta{margin:.2rem 0 0;color:var(--muted)}

/* === Lightbox para ampliar pósters === */
.lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.82); padding:24px; z-index:1000}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1000px,92vw); max-height:88vh; border-radius:12px; box-shadow:var(--shadow-strong)}
.lightbox .close{position:absolute; top:14px; right:14px; width:42px; height:42px; border-radius:999px; border:0; cursor:pointer; background:#fff; color:#0b2142; font-size:22px; box-shadow:var(--shadow)}

/* === Menú móvil (hamburguesa) === */
.menu-toggle{display:none; align-items:center; justify-content:center; width:44px; height:44px; border-radius:10px; border:1px solid rgba(9,80,146,.15); background:#fff; box-shadow:var(--shadow)}
.menu-toggle span{display:block; width:20px; height:2px; background:var(--brand-blue); margin:3px 0; transition:.25s}
header.open .menu-toggle span:nth-child(1){transform:translateY(5px) rotate(45deg)}
header.open .menu-toggle span:nth-child(2){opacity:0}
header.open .menu-toggle span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}
#mainnav ul{display:flex}
@media (max-width: 900px){
  .menu-toggle{display:inline-flex}
  #mainnav ul{position:fixed; inset:64px 0 0 0; background:rgba(255,255,255,.98); display:grid; gap:6px; padding:16px 20px; border-top:1px solid rgba(9,80,146,.1); transform:translateY(-6px); opacity:0; pointer-events:none; transition:.25s ease}
  header.open #mainnav ul{transform:none; opacity:1; pointer-events:auto}
  nav a{padding:12px 16px; font-size:1.08rem}
}

/* Beneficios */
.beneficios .benefit{grid-column:span 4;background:var(--card);border:1px solid rgba(9,80,146,.08);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);
  display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:start}
.benefit svg{width:44px;height:44px;color:var(--brand-blue)}
.benefit h4{margin:0}

/* Timeline */
.timeline{position:relative;padding-left:36px}
.timeline::before{content:"";position:absolute;left:16px;top:0;bottom:0;width:4px;background:linear-gradient(var(--brand-blue), var(--brand-yellow));border-radius:999px}
.step{position:relative;margin:18px 0;padding:18px;background:var(--card);border-radius:12px;box-shadow:var(--shadow)}
.step::before{content:"";position:absolute;left:-26px;top:22px;width:14px;height:14px;border-radius:999px;background:var(--brand-yellow);box-shadow:0 0 0 4px rgba(237,241,59,.3),0 0 20px rgba(237,241,59,.5)}

/* Contacto */
form{display:grid;gap:12px}
input,textarea{padding:14px;border-radius:12px;border:1px solid rgba(9,80,146,.2);outline:none}
input:focus,textarea:focus{border-color:var(--brand-blue);box-shadow:0 0 0 4px rgba(9,80,146,.12)}
button[type="submit"]{background:var(--brand-blue);color:#fff;border:none;padding:14px 18px;border-radius:12px;font-weight:800}
button[type="submit"]:hover{transform:translateY(-2px);box-shadow:var(--shadow-strong)}

/* Footer */
footer{background:linear-gradient(180deg, var(--brand-blue-600), #071f3d);color:#d9e6f2;padding:48px 0;margin-top:40px}
.footer-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.footer-grid > div{grid-column:span 4}

/* =====================
   Animaciones al hacer scroll
   ===================== */
[data-animate]{opacity:0;transform:translateY(18px);transition:.6s ease}
[data-animate].in{opacity:1;transform:none}

/* Micro-animación: iconos con trazo eléctrico */
.draw path{stroke-dasharray:240;stroke-dashoffset:240;animation:draw 1.6s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* Responsive */
@media (max-width: 900px){
  .cards .card{grid-column:span 12}
  .beneficios .benefit{grid-column:span 12}
  .section-head{flex-direction:column;align-items:flex-start;gap:.6rem}
}

/* === Corrección menú móvil (overlay limpio y responsivo) === */
:root{ --headerH: 64px; }
@media (max-width: 900px){
  .nav{gap:.6rem}
  .menu-toggle{display:inline-flex}
  #mainnav{position:fixed; top:var(--headerH); left:0; right:0; bottom:0; z-index:60}
  #mainnav ul{display:grid; gap:8px; padding:16px 20px; background:#ffffff; height:calc(100vh - var(--headerH)); overflow:auto; border-top:1px solid rgba(9,80,146,.1); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.25s ease}
  header.open #mainnav ul{transform:none; opacity:1; pointer-events:auto}
  nav a{padding:14px 14px; font-size:1.08rem}
}
@media (min-width:901px){
  #mainnav{position:static}
  #mainnav ul{display:flex; height:auto; background:transparent; transform:none; opacity:1; pointer-events:auto}
  .menu-toggle{display:none}
}

/* === Refinamiento menú móvil compacto con etiqueta “Menu” === */
@media (max-width: 900px){
  .menu-toggle{display:inline-flex; gap:8px; align-items:center; justify-content:center; height:40px; padding:0 10px; width:auto; border-radius:12px}
  .menu-toggle > .label{display:inline-block; width:auto; height:auto; background:transparent; margin:0; font-weight:800; color:var(--brand-blue); font-size:.95rem; letter-spacing:.2px}
  .menu-toggle .bars{display:grid}
  .menu-toggle .bars span{display:block; width:18px; height:2px; background:var(--brand-blue); margin:3px 0; transition:.25s}
  header.open .menu-toggle .bars span:nth-child(1){transform:translateY(5px) rotate(45deg)}
  header.open .menu-toggle .bars span:nth-child(2){opacity:0}
  header.open .menu-toggle .bars span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

  #mainnav{position:fixed; top:var(--headerH); left:0; right:0; bottom:0; z-index:60}
  #mainnav ul{display:grid; gap:4px; padding:12px 14px; background:#ffffff; height:calc(100vh - var(--headerH)); overflow:auto; border-top:1px solid rgba(9,80,146,.1); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.25s ease; max-width:520px; margin:0 auto; border-radius:14px; box-shadow:var(--shadow)}
  #mainnav ul::before{content:"Menu"; display:block; font-weight:900; font-size:1rem; color:var(--brand-blue); margin:6px 2px 10px}
  header.open #mainnav ul{transform:none; opacity:1; pointer-events:auto}
  nav a{padding:10px 12px; font-size:.98rem; border:1px solid rgba(9,80,146,.12); border-radius:10px; background:#f8fbff}
}

@media (min-width:901px){
  #mainnav{position:static}
  #mainnav ul{display:flex; height:auto; background:transparent; transform:none; opacity:1; pointer-events:auto; max-width:none; margin:0; box-shadow:none; border-radius:0; padding:0}
  .menu-toggle{display:none}
}

/* === Ajuste fino menú móvil compacto === */
@media (max-width:900px){
  #mainnav ul{gap:2px; padding:10px 10px; max-width:480px; width:min(92vw,480px); margin:8px auto}
  nav a{padding:8px 10px; font-size:.95rem}
}

/* === Overrides menú móvil: más angosto, menos separación, sin 3 líneas === */
@media (max-width:900px){
  .menu-toggle{height:36px; padding:0 10px; gap:6px}
  .menu-toggle .bars{display:none} /* oculta el ícono de 3 líneas */
  .menu-toggle .label{font-size:.9rem; font-weight:800}
  .menu-toggle .label::after{content:'▾'; margin-left:6px; font-weight:900}
  header.open .menu-toggle .label::after{content:'✕'}

  #mainnav ul{gap:0; padding:8px 8px; max-width:420px; width:min(90vw,420px); margin:6px auto; border-radius:12px}
  #mainnav li+li{border-top:1px solid rgba(9,80,146,.08)}
  #mainnav a{padding:7px 10px; font-size:.92rem; line-height:1.15; background:transparent; border:none}
}

/* === Menú móvil: más angosto, opciones a la derecha y header con gradiente amarillo-azul === */
@media (max-width:900px){
  header{background:linear-gradient(90deg, var(--brand-yellow), var(--brand-blue))}
  .nav{padding:.35rem 0}
  .brand strong{color:#fff}
  .menu-toggle{height:32px; padding:0 8px}
  #mainnav ul{justify-items:end; text-align:right; max-width:360px; width:min(88vw,360px);}
  #mainnav a{padding:6px 10px; font-size:.9rem}
}

/* === Header con degradado amarillo→azul también en escritorio === */
header{background:linear-gradient(90deg, var(--brand-yellow), var(--brand-blue)); color:#fff}
.brand strong{color:#fff}
nav a{color:#fff}
nav a:hover{background:rgba(255,255,255,.12)}
.cta{background:#fff; color:var(--brand-blue)}

/* === Menú móvil aún más angosto, alineado a la izquierda y botón “Menu” con degradado === */
@media (max-width:900px){
  #mainnav ul{justify-items:start; text-align:left; max-width:320px; width:min(86vw,320px); margin:6px auto}
  nav a{padding:8px 10px; font-size:.92rem}

  .menu-toggle{height:32px; padding:0 10px; background:linear-gradient(90deg, var(--brand-yellow), var(--brand-blue)); color:#fff; border:1px solid rgba(255,255,255,.6); box-shadow:0 6px 18px rgba(9,80,146,.25)}
  .menu-toggle .label{color:#fff}
  .menu-toggle:hover{filter:brightness(1.05); box-shadow:0 10px 24px rgba(9,80,146,.35)}
  .menu-toggle:active{transform:translateY(1px)}
}

/* === Escritorio: enlaces blancos sobre header degradado === */
@media (min-width:901px){
  nav a{color:#fff}
  nav a:hover{background:rgba(255,255,255,.12)}
}

/* === Fix visibilidad: links azules en panel móvil + hover legible === */
@media (max-width:900px){
  #mainnav ul{background:#fff}
  #mainnav a{color:var(--brand-blue); display:block; font-weight:700}
  #mainnav a:hover{background:rgba(9,80,146,.06)}
}

/* === Ajuste final: menú móvil con opciones a la izquierda, compactas y CTA uniforme === */
@media (max-width:900px){
  #mainnav ul{gap:0; padding:8px 8px; max-width:320px; width:min(86vw,320px)}
  #mainnav li+li{border-top:1px solid rgba(9,80,146,.08)}
  #mainnav a{display:block; padding:6px 8px; font-size:.9rem; line-height:1.1; color:var(--brand-blue)}
  #mainnav a:hover{background:rgba(9,80,146,.06)}
  #mainnav a.cta{background:transparent; color:var(--brand-blue); border:none; box-shadow:none; padding:6px 8px}
}

/* === Ultra compacto + rótulo “Menu ×” visible al abrir === */
@media (max-width:900px){
  /* Botón */
  .menu-toggle{height:30px; padding:0 8px}
  .menu-toggle .label{font-size:.9rem; font-weight:800}
  .menu-toggle .label::after{content:' ▾'; margin-left:6px}
  header.open .menu-toggle .label::after{content:' ×'}

  /* Panel */
  #mainnav ul{position:relative; gap:0; padding:6px 6px; max-width:300px; width:min(84vw,300px)}
  #mainnav ul::before{content:'Menu'; display:block; font-weight:900; font-size:.95rem; color:var(--brand-blue); padding:2px 4px}
  #mainnav ul::after{content:'×'; position:absolute; top:6px; right:8px; font-weight:900; color:var(--brand-blue); opacity:.8}
  #mainnav li+li{border-top:1px solid rgba(9,80,146,.08)}
  #mainnav a{display:block; padding:5px 6px; font-size:.88rem; line-height:1.05; color:var(--brand-blue)}
  #mainnav a:hover{background:rgba(9,80,146,.06)}
}

/* === Compactación extra + botón de cerrado real en el panel === */
@media (max-width:900px){
  /* ocultar CTA en móvil */
  #mainnav a.cta{display:none !important}

  /* panel aún más compacto */
  #mainnav ul{gap:0; padding:4px 6px; max-width:300px; width:min(84vw,300px)}
  #mainnav ul::after{content:none !important} /* quitamos la X pseudo-elemento */
  #mainnav li+li{border-top:1px solid rgba(9,80,146,.06)}
  #mainnav a{padding:4px 6px; font-size:.86rem; line-height:1}

  /* botón X clicable */
  #mainnav .panel-close{position:absolute; top:6px; right:6px; width:28px; height:28px; border-radius:999px; border:1px solid rgba(9,80,146,.2); background:#fff; color:var(--brand-blue); font-weight:900; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow)}
  #mainnav .panel-close:hover{filter:brightness(1.05)}
}

/* === Escritorio: ocultar cualquier “×” y el botón de menú === */
@media (min-width:901px){
  .menu-toggle{display:none !important}
  .menu-toggle .label::after{content:'' !important}
  #mainnav ul::before, #mainnav ul::after{content:none !important}
  #mainnav .panel-close{display:none !important}
}

/* ===== Footer mejorado ===== */
.site-footer{
  background: linear-gradient(180deg, var(--brand-blue-600), #071f3d);
  color:#d9e6f2; padding:48px 0; margin-top:40px
}
.site-footer .footer-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px}
.site-footer .footer-col{grid-column:span 3}
.site-footer .brand-col .brand{display:flex; align-items:center; gap:.6rem; color:#fff; font-weight:900}
.site-footer .brand-col img{height:38px; width:auto; filter:drop-shadow(0 2px 4px rgba(0,0,0,.25))}
.site-footer p{margin:.4rem 0 0; max-width:42ch; color:#cfe0ef}

.site-footer .footer-title{margin:0 0 .6rem; font-size:1.05rem; color:#fff}
.site-footer .footer-links,
.site-footer .contact{list-style:none; padding:0; margin:0}
.site-footer .footer-links li{margin:.35rem 0}
.site-footer .footer-links a,
.site-footer .link-like{color:#d9e6f2; text-decoration:none; font-weight:600}
.site-footer .footer-links a:hover,
.site-footer .link-like:hover{color:#EDF13B}
.site-footer .link-like{background:none; border:0; padding:0; cursor:pointer}

.site-footer .contact li{display:grid; grid-template-columns:20px 1fr; align-items:start; gap:.5rem; margin:.35rem 0}
.site-footer .contact svg{width:18px; height:18px; opacity:.9}
.site-footer .contact a{color:#e6f0f8; text-decoration:none}
.site-footer .contact a:hover{color:#EDF13B}

.site-footer .social{display:flex; gap:.5rem; margin-top:.6rem}
.site-footer .social .ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:10px;
  background:rgba(255,255,255,.1); color:#fff;
  box-shadow: 0 6px 18px rgba(9,80,146,.25)
}
.site-footer .social .ic:hover{background:rgba(237,241,59,.25); color:#0b2142}

.site-footer .copy{margin-top:.6rem; color:#aac6df; font-size:.95rem}

/* Responsive */
@media (max-width: 900px){
  .site-footer .footer-col{grid-column:span 12}
  .site-footer .footer-grid{gap:16px}
}

/* ===== Modales legales ===== */
.modal-legal{position:fixed; inset:0; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; padding:24px; z-index:1200}
.modal-legal[aria-hidden="false"]{display:flex}
.modal-legal .modal-card{
  width:min(760px, 92vw); max-height:80vh; overflow:auto;
  background:#fff; color:#0b2142; border-radius:16px; padding:22px;
  box-shadow:0 20px 60px rgba(9,80,146,.35);
}
.modal-legal h3{margin:0 0 .6rem}
.modal-legal .modal-close{
  position:sticky; top:0; float:right; transform:translate(6px, -6px);
  width:36px; height:36px; border-radius:999px; border:1px solid rgba(9,80,146,.15);
  background:#fff; color:var(--brand-blue); font-size:20px; cursor:pointer;
  box-shadow:0 10px 24px rgba(9,80,146,.2)
}
.modal-legal a{color:#095092; font-weight:700}
.modal-legal a:hover{color:#0b3f73}

/* ===== Barra de Cookies ===== */
.cookie-consent{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1300;
  background: #ffffff;
  border-top: 1px solid rgba(9,80,146,.12);
  box-shadow: 0 -8px 30px rgba(9,80,146,.18);
  transform: translateY(100%);
  opacity: 0;
  transition: transform .35s ease, opacity .35s ease;
  padding: 12px 0;
  font-size: .98rem;
}
.cookie-consent.show{ transform: translateY(0); opacity: 1; }
.cookie-inner{
  display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center;
}
.cookie-text{ margin: 0; color: var(--ink, #0d1b2a); }
.cookie-text .link-like{
  border: 0; background: none; padding: 0; margin: 0 0 0 2px; cursor: pointer;
  color: var(--brand-blue, #095092); font-weight: 800; text-decoration: underline;
}
.cookie-actions{ display: inline-flex; gap: 10px; }
.btn-cc{
  appearance: none; border: 0; cursor: pointer;
  padding: 10px 14px; border-radius: 10px; font-weight: 900; color: #fff;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.btn-accept{ background: #2e7d32; }   /* Verde aceptar */
.btn-accept:hover{ filter: brightness(1.05); }
.btn-reject{ background: #d32f2f; }   /* Rojo rechazar */
.btn-reject:hover{ filter: brightness(1.05); }

/* Responsive */
@media (max-width: 900px){
  .cookie-inner{ grid-template-columns: 1fr; gap: 10px; }
  .cookie-actions{ justify-content: flex-start; }
  .cookie-consent{ font-size: .95rem; padding: 10px 0; }
}

/* ===== FAB WhatsApp ===== */
.wa-fab{
  position: fixed;
  right: 20px; bottom: 20px;
  width: 56px; height: 56px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #25D366;
  box-shadow: 0 10px 30px rgba(0,0,0,.25), 0 0 0 6px rgba(37,211,102,.15);
  z-index: 1400; /* por encima del contenido; cookie bar usa ~1300 en tu sitio */
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.wa-fab:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 16px 36px rgba(0,0,0,.28), 0 0 0 8px rgba(37,211,102,.18) }
.wa-fab:active{ transform: translateY(0) }

.wa-fab::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(37,211,102,.45);
  animation: wa-ping 2s ease-out infinite;
}
@keyframes wa-ping{
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,.45) }
  70%  { box-shadow: 0 0 0 18px rgba(37,211,102,0) }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0) }
}

/* Evitar choque con la barra de cookies en pantallas pequeñas */
@media (max-width:900px){
  .wa-fab{ right: 16px; bottom: 16px; width: 52px; height: 52px; }
}

/* Respeta usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .wa-fab{ transition: none }
  .wa-fab::before{ animation: none; box-shadow: none }
}

/* ===== Toast Styles (migrado desde JS) ===== */
#toast{
  position: fixed; z-index: 9999;
  right: 24px; bottom: 24px;
  background: linear-gradient(135deg, #EDF13B, #095092);
  color: #0b2142; font-weight: 900;
  padding: 14px 16px; border-radius: 14px;
  box-shadow: 0 10px 30px rgba(9,80,146,.25);
  opacity: 0; transform: translateY(10px) scale(.98);
  pointer-events: none; transition: .35s ease;
}
#toast.show{opacity:1; transform: translateY(0) scale(1);}