/* ============================================
   APL Gestión — estilos
   Estética: fondo claro, mucho aire, tarjetas
   con borde sutil. Marca: negro + oro #E0C000
   ============================================ */

:root{
--bg:#ffffff;
--bg-2:#f5f5f7;
--bg-3:#fbfbfd;
--ink:#1d1d1f;
--muted:#6e6e73;
--border:rgba(0,0,0,.08);
--border-strong:rgba(0,0,0,.14);
--gold:#e0c000;
--gold-suave:#fdf6d8;
--gold-oscuro:#8a7400;
--radio:16px;
--sombra:0 10px 30px -12px rgba(0,0,0,.12);
--transicion:300ms cubic-bezier(0.28,0.11,0.32,1);
}

*{
box-sizing:border-box;
}

body{
font-family:'Manrope',-apple-system,system-ui,sans-serif;
margin:0;
background:var(--bg);
color:var(--ink);
line-height:1.6;
}

/* CONTENEDOR */

.container{
width:90%;
max-width:1140px;
margin:auto;
}

/* TITULARES */

h1,h2,h3{
line-height:1.15;
}

h1{
font-size:clamp(34px,5vw,58px);
font-weight:800;
letter-spacing:-0.03em;
margin:0 0 20px;
}

h2{
font-size:clamp(26px,3.5vw,40px);
font-weight:700;
letter-spacing:-0.02em;
margin:0 0 12px;
}

h3{
font-size:19px;
font-weight:700;
letter-spacing:-0.01em;
}

.subtitulo{
color:var(--muted);
font-size:clamp(16px,2vw,20px);
max-width:640px;
margin:0 auto 0;
}

/* ETIQUETA pequeña sobre los títulos de sección */

.kicker{
display:inline-block;
font-size:13px;
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--gold-oscuro);
margin-bottom:14px;
}

/* HEADER */

header{
background:rgba(255,255,255,.82);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
padding:10px 0;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:1000;
}

.nav{
display:flex;
align-items:center;
justify-content:space-between;
}

/* LOGO */

.logo img{
height:56px;
display:block;
}

/* MENU */

nav{
display:flex;
align-items:center;
}

nav a{
color:var(--ink);
margin-left:26px;
text-decoration:none;
font-weight:600;
font-size:15px;
transition:color var(--transicion);
}

nav a:hover{
color:var(--gold-oscuro);
}

nav a.activo{
color:var(--gold-oscuro);
}

/* Botón contacto del menú */

nav a.btn-nav{
background:var(--ink);
color:white;
padding:9px 20px;
border-radius:999px;
transition:background var(--transicion);
}

nav a.btn-nav:hover{
background:#3a3a3c;
color:white;
}

.menu-toggle{
display:none;
font-size:26px;
cursor:pointer;
}

/* HERO */

.hero{
background:
radial-gradient(1000px 420px at 85% -10%, var(--gold-suave), transparent 65%),
var(--bg);
padding:110px 0 90px;
text-align:center;
}

.hero p.subtitulo{
margin:0 auto;
}

.hero .acciones{
margin-top:34px;
display:flex;
gap:14px;
justify-content:center;
flex-wrap:wrap;
}

.hero-nota{
margin-top:22px;
color:var(--muted);
font-size:14px;
}

/* Franja dorada bajo palabras clave del titular */

.marca{
background:linear-gradient(transparent 62%, var(--gold) 62%, var(--gold) 92%, transparent 92%);
padding:0 2px;
}

/* BOTONES */

.btn{
background:var(--ink);
padding:14px 30px;
color:white;
text-decoration:none;
border-radius:999px;
display:inline-block;
font-weight:700;
font-size:16px;
border:none;
cursor:pointer;
transition:background var(--transicion), transform var(--transicion);
}

.btn:hover{
background:#3a3a3c;
transform:translateY(-1px);
}

.btn-secundario{
background:transparent;
color:var(--ink);
border:1px solid var(--border-strong);
}

.btn-secundario:hover{
background:var(--bg-2);
}

/* CIFRAS (franja de datos) */

.cifras{
padding:34px 0;
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
background:var(--bg-3);
}

.cifras-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
text-align:center;
}

.cifra b{
display:block;
font-size:34px;
font-weight:800;
letter-spacing:-0.02em;
}

.cifra span{
color:var(--muted);
font-size:14px;
}

/* SECCIONES */

.seccion{
padding:90px 0;
}

.seccion.gris{
background:var(--bg-2);
}

.seccion .encabezado{
text-align:center;
max-width:720px;
margin:0 auto 50px;
}

/* TARJETAS */

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:22px;
}

.card{
background:white;
padding:30px 26px;
border-radius:var(--radio);
border:1px solid var(--border);
transition:transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
}

.card:hover{
transform:translateY(-4px);
box-shadow:var(--sombra);
border-color:var(--border-strong);
}

.card .icono{
font-size:30px;
margin-bottom:12px;
}

.card h3{
margin:0 0 8px;
}

.card p{
color:var(--muted);
margin:0;
font-size:15px;
}

/* PRODUCTOS */

.producto-card{
display:flex;
flex-direction:column;
}

.producto-card .sector{
display:inline-block;
align-self:flex-start;
font-size:12px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
background:var(--gold-suave);
color:var(--gold-oscuro);
padding:4px 12px;
border-radius:999px;
margin-bottom:14px;
}

.producto-card .enlace{
margin-top:auto;
padding-top:18px;
font-weight:700;
color:var(--ink);
text-decoration:none;
}

.producto-card .enlace:hover{
color:var(--gold-oscuro);
}

/* FICHA DE PRODUCTO */

.lista-check{
list-style:none;
padding:0;
margin:20px 0;
}

.lista-check li{
padding:10px 0 10px 34px;
position:relative;
border-bottom:1px solid var(--border);
}

.lista-check li::before{
content:"✓";
position:absolute;
left:4px;
color:var(--gold-oscuro);
font-weight:800;
}

/* PASOS (cómo trabajamos) */

.pasos{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:22px;
}

.paso{
background:white;
border:1px solid var(--border);
border-radius:var(--radio);
padding:28px 24px;
}

.paso .num{
font-size:14px;
font-weight:800;
color:var(--gold-oscuro);
letter-spacing:.1em;
}

.paso h3{
margin:10px 0 8px;
}

.paso p{
color:var(--muted);
margin:0;
font-size:15px;
}

/* CTA FINAL */

.cta-final{
background:var(--ink);
color:white;
text-align:center;
padding:80px 0;
}

.cta-final h2{
color:white;
}

.cta-final p{
color:#a1a1a6;
max-width:560px;
margin:0 auto 30px;
}

.cta-final .btn{
background:var(--gold);
color:var(--ink);
}

.cta-final .btn:hover{
background:#f0d020;
}

/* FORMULARIO */

.formulario{
max-width:640px;
margin:0 auto;
background:white;
border:1px solid var(--border);
border-radius:var(--radio);
padding:36px;
}

.formulario label{
display:block;
font-weight:700;
font-size:14px;
margin:18px 0 6px;
}

.formulario input,
.formulario textarea{
width:100%;
padding:13px 14px;
border:1px solid var(--border-strong);
border-radius:10px;
font-family:inherit;
font-size:15px;
background:var(--bg-3);
transition:border-color var(--transicion), box-shadow var(--transicion);
}

.formulario input:focus,
.formulario textarea:focus{
outline:none;
border-color:var(--gold-oscuro);
box-shadow:0 0 0 3px var(--gold-suave);
}

.formulario textarea{
min-height:140px;
resize:vertical;
}

.formulario .btn{
margin-top:24px;
width:100%;
}

.form-nota{
font-size:13px;
color:var(--muted);
text-align:center;
margin-top:14px;
}

/* Honeypot oculto */

.campo-empresa{
position:absolute;
left:-9999px;
opacity:0;
}

/* AVISOS */

.aviso-ok{
background:#e8f6e8;
border:1px solid #bfe3bf;
color:#1e5c1e;
padding:16px 20px;
border-radius:10px;
margin-bottom:24px;
text-align:center;
font-weight:600;
}

.aviso-error{
background:#fdecec;
border:1px solid #f2c4c4;
color:#8a1f1f;
padding:16px 20px;
border-radius:10px;
margin-bottom:24px;
text-align:center;
font-weight:600;
}

/* PÁGINAS DE TEXTO (legal, soporte...) */

.texto{
max-width:760px;
margin:0 auto;
}

.texto h2{
margin-top:40px;
font-size:24px;
}

.texto p, .texto li{
color:#3a3a3c;
}

/* DESCARGAS */

.descarga-fila{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
background:white;
border:1px solid var(--border);
border-radius:var(--radio);
padding:22px 26px;
margin-bottom:16px;
flex-wrap:wrap;
}

.descarga-fila .info h3{
margin:0 0 4px;
}

.descarga-fila .info p{
margin:0;
color:var(--muted);
font-size:14px;
}

.badges{
display:flex;
gap:10px;
flex-wrap:wrap;
}

/* ANIMACIÓN DE APARICIÓN */

.anima{
opacity:0;
transform:translateY(18px);
transition:opacity 600ms ease, transform 600ms ease;
}

.anima.visible{
opacity:1;
transform:none;
}

/* Sin animación si el usuario lo prefiere */

@media (prefers-reduced-motion: reduce){
.anima{
opacity:1;
transform:none;
transition:none;
}
}

/* FOOTER */

footer{
background:var(--bg-2);
border-top:1px solid var(--border);
padding:60px 0 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:36px;
padding-bottom:40px;
}

.footer-col h3{
margin-top:0;
font-size:16px;
}

.footer-col p{
color:var(--muted);
font-size:14px;
margin:8px 0;
}

.footer-col a{
color:var(--muted);
text-decoration:none;
}

.footer-col a:hover{
color:var(--ink);
}

.footer-bottom{
border-top:1px solid var(--border);
padding:20px 0;
text-align:center;
color:var(--muted);
font-size:13px;
}

.footer-bottom a{
color:var(--muted);
}

/* RESPONSIVE */

@media (max-width: 860px){

.menu-toggle{
display:block;
}

nav{
display:none;
position:absolute;
top:100%;
left:0;
right:0;
background:white;
flex-direction:column;
align-items:flex-start;
padding:16px 5%;
border-bottom:1px solid var(--border);
box-shadow:var(--sombra);
}

nav.show{
display:flex;
}

nav a{
margin:10px 0;
font-size:17px;
}

nav a.btn-nav{
margin-top:14px;
}

.hero{
padding:70px 0 60px;
}

.seccion{
padding:60px 0;
}

}


/* MAPA DE LOCALIZACIÓN */

.mapa{
margin-top:26px;
border-radius:var(--radio);
overflow:hidden;
border:1px solid var(--border);
box-shadow:var(--sombra);
}

.mapa iframe{
display:block;
width:100%;
height:420px;
border:0;
}