:root{
    --bg:#0b1020;           /* azul pizarra muy oscuro */
    --bg-soft:#121934;      /* variante */
    --text:#e5e7eb;         /* gris claro */
    --muted:#a5adbd;        /* gris medio */
    --brand:#22d3ee;        /* cian */
    --brand-600:#0891b2;    /* cian oscuro */
    --ok:#10b981;           /* verde */
    --warn:#f59e0b;         /* ámbar */
    --danger:#ef4444;       /* rojo */
    --card:#0f172a;         /* slate-900 */
    --border:#1f2937;       /* slate-800 */
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --radius:18px;
}
*{
    box-sizing:border-box
}
html{
    scroll-behavior:smooth
}
body{
    margin:0; 
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
    color:var(--text); 
    background: var(--bg);
}
a{
    color:inherit; 
    text-decoration:none}
img{
    max-width:100%; 
    display:block}
.container{
    width:min(1100px, 92%); 
    margin-inline:auto}

/* Header */
header{
    position:sticky; 
    top:0; 
    z-index:50; 
    backdrop-filter:saturate(150%) blur(8px);
    background: linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.6));
    border-bottom:1px solid var(--border);
}
.nav{
    display:flex; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px; 
    padding:14px 0;
}
.brand{
    display:flex; 
    align-items:center; 
    gap:12px
}
.brand img{
    width:150px; 
    height:auto;
    margin-right: 12px;
}

nav ul{
    display:flex; 
    list-style:none; 
    gap:18px; 
    padding:0; 
    margin:0
}
nav a{
    padding:10px 12px; 
    border-radius:12px; 
    opacity:.9
}
nav a:hover{
    background:rgba(255,255,255,.06); 
    opacity:1
}
/* Estilos para el selector de idioma */
.lang-switch {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-left: auto;
}

.lang-switch .btn {
    padding: 8px 16px;
    border-radius: 12px;
    font-weight: 600;
    border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(34,211,238,.08));
    color: var(--text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lang-switch .btn.ghost {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
}

.lang-switch .btn:hover {
    background: var(--brand);
    color: #05202b;
}
/* Hero */
.hero{
    position:relative; 
    isolation:isolate; 
    padding:96px 0 72px; 
    overflow:hidden;
    background: radial-gradient(1200px 600px at 70% -100px, rgba(34,211,238,.25), transparent 60%),
                radial-gradient(900px 400px at 10% -80px, rgba(16,185,129,.18), transparent 60%),
                var(--bg);
}
.hero::before{ /* imagen de fondo con overlay */
    content:""; 
    position:absolute; 
    inset:0; 
    z-index:-1;
    background-image: url('/imgs/fondo_pantalla.jpg');
    background-size:cover; 
    background-position:center; 
    opacity:.44; /*.14*/
    mix-blend-mode:overlay;
    filter: saturate(90%) contrast(105%);
}
.hero-grid{
    display:grid; 
    grid-template-columns:1.1fr .9fr; 
    gap:36px; 
    align-items:center
}
.kicker{
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    font-size:13px; 
    color:var(--muted); 
    letter-spacing:.4px; 
    text-transform:uppercase
}
.kicker .dot{
    width:8px; 
    height:8px; 
    background:var(--ok); 
    border-radius:99px; 
    box-shadow:0 0 0 4px rgba(16,185,129,.12)
}
.hero h1{
    font-size: clamp(28px, 4.6vw, 46px); 
    line-height:1.1; 
    margin:10px 0 12px
}
.subtitle{
    color:#cbd5e1; 
    font-size: clamp(15px, 2vw, 18px); 
    margin:0 0 22px; 
    max-width:52ch
}
.cta{
    display:flex; 
    gap:12px; 
    flex-wrap:wrap
}
.btn{
    display:inline-flex; 
    align-items:center; 
    gap:10px; 
    padding:12px 16px; 
    border-radius:14px; 
    font-weight:600; 
    border:1px solid var(--border);
    background: linear-gradient(180deg, rgba(34,211,238,.14), rgba(34,211,238,.08)); 
    box-shadow: var(--shadow);
}
.btn.primary{
    background:linear-gradient(180deg, var(--brand), #14b8a6); 
    color:#05202b; border:0
}
.btn.ghost{
    background:transparent
}
.hero-card{
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    border:1px solid var(--border); 
    border-radius: var(--radius); 
    padding:18px; 
    box-shadow: var(--shadow);
}
.hero-card h3{
    margin:0 0 6px; 
    font-size:16px; 
    color:#d1d5db
}
.hero-card ul{
    margin:0; 
    padding-left:18px; 
    color:#c9d4e2
}

/* Sections */
section{
    padding:70px 0; 
    border-top:1px solid var(--border)
}
.sec-head{
    margin:0 0 26px
}
.grid-3{
    display:grid; 
    grid-template-columns:repeat(3, 1fr); 
    gap:18px
}
.card{
    background:var(--card); 
    border:1px solid var(--border); 
    border-radius:var(--radius); 
    padding:22px; 
    box-shadow: var(--shadow)
}
.card h4, .card img, .card p{
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.card h4{
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 20px;
}

.muted{
    color:var(--muted)
}

/* Steps */
.steps{
    display:grid; 
    grid-template-columns:repeat(3,1fr); 
    gap:16px
}
.step{
    position:relative; 
    padding:18px 18px 18px 54px; 
    border-radius:16px; 
    border:1px dashed #264055; 
    background:rgba(255,255,255,.02)
}
.step .num{
    position:absolute; 
    left:14px; 
    top:14px; 
    width:28px; 
    height:28px; 
    display:grid; 
    place-items:center; 
    border-radius:9px; 
    background:var(--brand); 
    color:#04212b; 
    font-weight:800}

/* CTA band */
.band{ 
    display:flex; 
    flex-wrap:wrap; 
    align-items:center; 
    justify-content:space-between; 
    gap:16px; 
    background:linear-gradient(90deg, rgba(34,211,238,.12), rgba(16,185,129,.12)); 
    padding:22px; 
    border:1px solid var(--border); 
    border-radius:var(--radius); 
}

/* Footer */
footer{
    padding:40px 0; 
    color:#b1bacb
}
.foot{
    display:flex; 
    justify-content:space-between; 
    gap:24px; 
    flex-wrap:wrap
}
.foot small{
    display:block
}

/* Responsive */
@media (max-width: 980px){
    .hero-grid{
        grid-template-columns:1fr
    }
    .steps,.grid-3{
        grid-template-columns:1fr
    }
    nav ul{
        display:none
    }
    .menu-btn{
        display:inline-flex
    }
}
.menu-btn{
    display:none; 
    background:transparent; 
    color:var(--text); 
    border:1px solid var(--border); 
    padding:8px 10px; 
    border-radius:12px
}
.mobile-nav{
    display:none; 
    border-top:1px solid var(--border); 
    background:rgba(10,14,28,.9)
}
.mobile-nav a{
    display:block; 
    padding:14px 10px; 
    border-bottom:1px solid var(--border)
}

/* Campos de formulario (estilo separado para claridad) */
form{
    display:grid; 
    gap:10px}
input, select, textarea{
    background:#0b142b; 
    color:var(--text); 
    border:1px solid var(--border); 
    border-radius:12px; 
    padding:12px
}
label{
    font-size:14px; 
    color:#cbd5e1
}
input:focus, select:focus, textarea:focus{
    outline:2px solid var(--brand)
}
/* Offset para anclas bajo header sticky */
main[id], section[id]{
  scroll-margin-top: 96px;
}

/* Estado activo del nav */
nav a.active,
nav a[aria-current="true"]{
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* Accesibilidad foco teclado en enlaces de navegación */
nav a:focus-visible,
.mobile-nav a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 12px;
}
/* Honeypot oculto */
.hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0; }

/* Estado del formulario */
.form-status
{ 
    margin-top:8px; 
    font-size:14px; 
    min-height:20px; 
}
.form-status.ok
{ 
    color: var(--ok); 
}
.form-status.warn
{ 
    color: var(--warn); 
}
.form-status.err
{ 
    color: var(--danger); 
}
/* Botón deshabilitado durante envío */
button[disabled]
{ 
    opacity:.6; 
    cursor:not-allowed; 
}