@import url('assets/fonts/fonts.css');
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased;background:var(--bg);transition:background-color .25s ease}
h1,h2,h3{font-family:'Sora','Plus Jakarta Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
:root{
--bg:#FFFFFF;--surface:#FFFFFF;--alt:#F7FAFF;
--ink:#101828;--muted:#475467;--border:#E6ECF5;
--brand:#055CB4;--brand-soft:#E7F0FB;--deep:#020360;--accent:#11D15E;--accent-soft:#E3FBEC;
--hero-grad:linear-gradient(180deg,#F7FAFF 0%,#FFFFFF 70%);
--panel:#020360;--panel-ink:#FFFFFF;--panel-muted:#A9B0E0;--panel-surface:rgba(255,255,255,.06);--panel-border:rgba(255,255,255,.14);
--ring:#055CB4;--header-bg:rgba(255,255,255,.82);--emp-cta:var(--deep);--emp-cta-ink:#fff;
}
:root[data-theme="dark"]{
--bg:#0A0F1F;--surface:#18213B;--alt:#0E1426;
--ink:#E8EEFC;--muted:#94A1C2;--border:rgba(255,255,255,.10);
--brand:#4C93EA;--brand-soft:rgba(76,147,234,.16);--deep:#111A33;--accent:#1ED978;--accent-soft:rgba(30,217,120,.15);
--hero-grad:radial-gradient(120% 100% at 72% 0%,#14224A 0%,#0A0F1F 62%);
--panel:#111A33;--panel-ink:#E8EEFC;--panel-muted:#9DA9C8;--panel-surface:rgba(255,255,255,.06);--panel-border:rgba(255,255,255,.12);
--ring:#4C93EA;--header-bg:rgba(10,15,31,.82);--emp-cta:var(--accent);--emp-cta-ink:#0A0F1F;
}
@keyframes fu{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pls{0%,100%{transform:scale(1);opacity:.5}50%{transform:scale(1.25);opacity:0}}
.ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}

/* ===== Estados :hover =====
   Reemplazan los atributos style-hover que generaba el runtime DC.
   Llevan !important para sobreescribir el valor base en el atributo style inline. */
.nav-link:hover{color:var(--brand)!important}
.btn-reg:hover{transform:translateY(-2px)!important;box-shadow:0 12px 22px -8px var(--brand)!important}
.aud-card:hover{transform:translateY(-4px)!important;box-shadow:0 32px 60px -28px rgba(2,3,96,.4)!important}
.btn-todeep:hover{background:var(--deep)!important}
.btn-bright25:hover{filter:brightness(1.25)!important}
.valcard-b:hover{transform:translateY(-5px)!important;box-shadow:0 26px 50px -30px rgba(2,3,96,.32)!important;border-color:var(--brand)!important}
.valcard-a:hover{transform:translateY(-5px)!important;box-shadow:0 26px 50px -30px rgba(2,3,96,.32)!important;border-color:var(--accent)!important}
.lift4:hover{transform:translateY(-4px)!important}
.btn-up:hover{transform:translateY(-2px)!important}
.benefit-card:hover{transform:translateY(-4px)!important;box-shadow:0 22px 44px -28px rgba(2,3,96,.32)!important}
.cta-card:hover{transform:translateY(-5px)!important;box-shadow:0 30px 56px -30px rgba(2,3,96,.4)!important}
.cta-card-plain:hover{transform:translateY(-5px)!important}
.btn-bright08:hover{filter:brightness(1.08)!important}
.faq-item:hover{border-color:var(--brand)!important}
.foot-link:hover{color:#fff!important}

/* ===== Paso 3: variedad de micro-interacciones ===== */
/* "pop" del ícono al pasar por encima de las tarjetas (rompe la monotonía del translateY) */
.valcard-a:hover .ico,.valcard-b:hover .ico,.benefit-card:hover .ico,.lift4:hover .ico{transform:scale(1.14)}
/* Tarjetas de "Cómo funciona" (bento) */
.step-badge{transition:transform .2s ease}
.step-card:hover{transform:translateY(-4px)!important;box-shadow:0 24px 44px -28px rgba(2,3,96,.3)!important;border-color:var(--brand)!important}
.step-card:hover .step-badge{transform:scale(1.08)}

/* ===== Responsividad (las media queries vencen al estilo inline con !important) ===== */
/* Tablet / pantallas medianas */
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr!important;gap:40px!important}
  .panel-row{grid-template-columns:1fr!important;gap:32px!important}
  .bento-2{grid-template-columns:1fr!important}
  .flow-grid{grid-template-columns:1fr!important}
  .flow-arrow{display:none!important}
  .europe-img{display:none!important}
  .footer-grid{grid-template-columns:1fr 1fr!important;gap:32px!important}
}
/* Móvil grande / tablet en vertical */
@media (max-width: 720px){
  .main-nav{display:none!important}
  .login-link{display:none!important}
  .nav-toggle{display:inline-flex!important}
  .two-col{grid-template-columns:1fr!important}
  .feat-strip{grid-template-columns:1fr 1fr!important}
  .steps-grid{grid-template-columns:1fr 1fr!important}
  .cta-europe{padding:44px 28px!important}
  h1{font-size:42px!important;letter-spacing:-1.3px!important}
  h2{font-size:30px!important;letter-spacing:-1px!important}
}
/* Móvil */
@media (max-width: 480px){
  .two-col,.feat-strip,.steps-grid,.footer-grid,.form-row{grid-template-columns:1fr!important}
  .hero-card{width:86vw!important;max-width:360px!important}
  h1{font-size:33px!important}
  h2{font-size:25px!important}
}

/* ===== Menú móvil (hamburguesa) ===== */
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer}
.mobile-menu{display:none;flex-direction:column;max-width:1200px;margin:0 auto;padding:6px 18px 16px}
.mobile-menu a{padding:13px 10px;font-size:16px;font-weight:600;color:var(--ink);text-decoration:none;border-radius:9px;border-bottom:1px solid var(--border)}
.mobile-menu a:last-child{border-bottom:none}
.mobile-menu a:hover{background:var(--alt)}
.mobile-menu.open{display:flex}
@media (min-width: 721px){ .mobile-menu{display:none!important} }

/* ===== Formulario de contacto ===== */
.field{width:100%;margin-top:6px;padding:12px 14px;font-family:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:11px;outline:none;transition:border-color .15s,box-shadow .15s}
.field:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.form-label{display:block;font-size:13.5px;font-weight:700;color:var(--ink)}

/* ===== Logo según tema (claro / oscuro) ===== */
.logo-light,.logo-dark{display:block}
.logo-dark{display:none}
:root[data-theme="dark"] .logo-light{display:none}
:root[data-theme="dark"] .logo-dark{display:block}

/* ===== Páginas legales (cookies/aviso-legal/privacidad): header compartido + modo oscuro ===== */
header{padding:0;box-shadow:none}
:root[data-theme="dark"] .legal-content p,
:root[data-theme="dark"] .legal-content li{color:#C7D0E6}
:root[data-theme="dark"] .legal-content strong{color:var(--ink)}
:root[data-theme="dark"] .legal-content h2{color:#6FB1F2;border-bottom-color:var(--accent)}
:root[data-theme="dark"] .legal-content h3{color:var(--ink)}
:root[data-theme="dark"] .legal-content a{color:var(--brand)}
:root[data-theme="dark"] .legal-content .highlight-box,
:root[data-theme="dark"] .legal-content .update-date{background:var(--alt);color:var(--muted)}
:root[data-theme="dark"] .cookie-table tbody td{color:#C7D0E6;border-color:var(--border)}

/* ===== Botón de tema (sol/luna) ===== */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer;flex:none}
.theme-toggle:hover{border-color:var(--brand)}

/* ===== Banner de cookies ===== */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:880px;margin:0 auto;display:none;align-items:center;gap:18px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px 22px;box-shadow:0 24px 60px -24px rgba(2,3,96,.45)}
.cookie-banner.show{display:flex;animation:fu .35s ease both}
.cookie-btn{font-family:inherit;font-size:14px;font-weight:700;color:#fff;background:var(--brand);border:none;cursor:pointer;padding:11px 20px;border-radius:10px;transition:transform .15s}
.cookie-btn:hover{transform:translateY(-1px)}
.cookie-btn-ghost{font-family:inherit;font-size:14px;font-weight:700;color:var(--ink);background:transparent;border:1px solid var(--border);cursor:pointer;padding:11px 18px;border-radius:10px}
.cookie-btn-ghost:hover{border-color:var(--muted)}