/* QUINTA — web pública. Carbón y lima, como la app. */
:root{
  --bg:#0b0d0f; --surf:#11151a; --card:#141a20; --bord:#1e2530; --bordA:#2e3a4a;
  --txt:#e8ecf0; --txtS:#a8b3bf; --txtF:#6b7785;
  --lima:#a3e635; --limaD:#84cc16; --naranja:#f97316; --azul:#60a5fa; --rojo:#ef4444;
  --display:'Archivo',ui-sans-serif,system-ui,sans-serif;
  --body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font-family:var(--body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:var(--lima);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#c4f27a}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--lima);outline-offset:3px;border-radius:4px}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.estrecho{max-width:720px}

/* Cabecera */
.cab{position:sticky;top:0;z-index:20;background:rgba(11,13,15,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--bord)}
.cab .wrap{display:flex;align-items:center;gap:18px;min-height:60px}
.marca{display:flex;align-items:center;gap:10px;color:var(--txt);text-decoration:none;font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:-.02em}
.marca svg{flex-shrink:0}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{color:var(--txtS);text-decoration:none;font-size:14px;font-weight:600;padding:8px 10px;border-radius:8px}
.nav a:hover,.nav a[aria-current="page"]{color:var(--txt);background:var(--card)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--body);font-weight:800;font-size:15px;text-decoration:none;border-radius:12px;padding:13px 20px;border:1.5px solid transparent;cursor:pointer;transition:transform .12s,background .12s}
.btn:active{transform:scale(.98)}
.btn-lima{background:var(--lima);color:#101408}
.btn-lima:hover{background:#b8f05a;color:#101408}
.btn-borde{border-color:var(--bordA);color:var(--txt)}
.btn-borde:hover{border-color:var(--lima);color:var(--txt)}
.cab .btn{padding:9px 14px;font-size:14px}
@media (max-width:760px){.nav{display:none}.cab .btn{margin-left:auto}}

/* Portada */
.hero{padding-block:56px 40px;display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.eyebrow{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--lima)}
h1,h2,h3{font-family:var(--display);line-height:1.15;letter-spacing:-.02em;text-wrap:balance;margin:0}
h1{font-size:clamp(34px,6vw,58px);font-weight:900;margin:12px 0 16px}
h1 em{font-style:normal;color:var(--lima)}
.lead{font-size:clamp(17px,2.1vw,19px);color:var(--txtS);max-width:34em;margin:0 0 26px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.nota{font-size:13px;color:var(--txtF);margin-top:14px}
.telefonos{position:relative;display:flex;justify-content:center;gap:16px}
.tel{border-radius:28px;border:6px solid #1b2129;background:#000;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.5);width:min(250px,44%)}
.tel:nth-child(2){transform:translateY(34px)}
@media (max-width:860px){.hero{grid-template-columns:1fr;padding-block:36px 28px}.telefonos{margin-top:8px}}

/* Marcador decorativo: palotes */
.palotes{display:flex;gap:6px;align-items:flex-end;margin:6px 0 0}
.palotes i{display:block;width:5px;height:22px;background:var(--txtF);border-radius:3px}

/* Bandas y secciones */
section{padding-block:56px}
.banda{background:var(--surf);border-block:1px solid var(--bord)}
h2{font-size:clamp(26px,3.6vw,38px);font-weight:900;margin-bottom:10px}
.sub{color:var(--txtS);margin:0 0 30px;max-width:40em}
.rejilla{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.rejilla{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.rejilla{grid-template-columns:1fr}}
.tarjeta{background:var(--card);border:1px solid var(--bord);border-radius:16px;padding:20px;min-width:0}
.tarjeta h3{font-size:18px;font-weight:800;margin:10px 0 6px}
.tarjeta p{margin:0;color:var(--txtS);font-size:15px}
.ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(163,230,53,.12);color:var(--lima)}
.ico.n{background:rgba(249,115,22,.12);color:var(--naranja)}
.ico svg{width:20px;height:20px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:36px;align-items:center}
.dos.inv>:first-child{order:2}
@media (max-width:820px){.dos{grid-template-columns:1fr}.dos.inv>:first-child{order:0}}
.captura{max-width:300px;margin:0 auto;border-radius:24px;border:5px solid #1b2129;overflow:hidden;box-shadow:0 24px 50px rgba(0,0,0,.45)}
.lista{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.lista li{display:flex;gap:12px;align-items:flex-start;color:var(--txtS)}
.lista li b{color:var(--txt)}
.num{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--lima);color:#101408;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;border:1px solid var(--bordA);color:var(--txtS);margin:0 6px 6px 0}
.chip.f{border-color:rgba(163,230,53,.5);color:var(--lima)}
.chip.b{border-color:rgba(249,115,22,.5);color:var(--naranja)}

/* Artículos y guías */
.migas{font-size:13px;color:var(--txtF);padding-top:28px}
.migas a{color:var(--txtS);text-decoration:none}
.articulo{padding-block:14px 60px}
.articulo h1{font-size:clamp(30px,5vw,44px)}
.articulo .meta{color:var(--txtF);font-size:14px;margin-bottom:26px}
.articulo h2{font-size:clamp(22px,3vw,28px);margin:38px 0 10px}
.articulo h3{font-size:19px;margin:26px 0 8px}
.articulo p,.articulo li{color:#cfd6dd}
.articulo ul,.articulo ol{padding-left:22px}
.articulo li{margin-bottom:6px}
.articulo figure{margin:26px 0}
.articulo figcaption{font-size:13px;color:var(--txtF);margin-top:8px;text-align:center}
.caja{background:var(--card);border:1px solid var(--bord);border-left:3px solid var(--lima);border-radius:10px;padding:14px 16px;margin:22px 0}
.caja.aviso{border-left-color:#f59e0b}
.caja p{margin:0}
.tabla{overflow-x:auto;margin:20px 0}
.tabla table{border-collapse:collapse;width:100%;font-size:15px;font-variant-numeric:tabular-nums}
.tabla th,.tabla td{padding:9px 10px;border-bottom:1px solid var(--bord);text-align:left}
.tabla th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--txtF)}
.formula{font-family:ui-monospace,Menlo,Consolas,monospace;background:var(--card);border:1px solid var(--bord);border-radius:10px;padding:14px 16px;overflow-x:auto;font-size:14.5px;color:var(--txt)}
.siguientes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
@media (max-width:620px){.siguientes{grid-template-columns:1fr}}
.siguientes a{display:block;background:var(--card);border:1px solid var(--bord);border-radius:12px;padding:14px 16px;text-decoration:none;color:var(--txt);font-weight:700}
.siguientes a span{display:block;font-size:12px;color:var(--txtF);font-weight:600;margin-bottom:3px}
.indice-art{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:700px){.indice-art{grid-template-columns:1fr}}
.indice-art a{display:block;background:var(--card);border:1px solid var(--bord);border-radius:14px;padding:18px;text-decoration:none;color:var(--txt)}
.indice-art a:hover{border-color:var(--bordA)}
.indice-art h3{font-size:18px;margin:6px 0}
.indice-art p{margin:0;color:var(--txtS);font-size:14.5px}

/* Anuncio (solo aparece cuando AdSense está configurado) */
.anuncio{margin:30px 0;min-height:0}
.anuncio:empty{display:none}
.anuncio .et{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--txtF);text-align:center;margin-bottom:4px}

/* Pie */
.pie{border-top:1px solid var(--bord);padding-block:34px;color:var(--txtF);font-size:14px}
.pie .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:24px}
@media (max-width:760px){.pie .wrap{grid-template-columns:1fr 1fr}}
.pie h4{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--txtS);margin:0 0 10px}
.pie a{display:block;color:var(--txtF);text-decoration:none;padding:3px 0}
.pie a:hover{color:var(--txt)}
.pie .legal{grid-column:1/-1;border-top:1px solid var(--bord);padding-top:18px;font-size:13px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
.btn-naranja{background:var(--naranja);color:#1a0d03}
.apps{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}
@media(max-width:640px){.apps{grid-template-columns:1fr}}
.app-tarj{display:flex;flex-direction:column;gap:10px;padding:18px;border-radius:16px;border:1.5px solid var(--bordA);text-decoration:none;color:var(--txt)}
.app-tarj.f{border-color:rgba(163,230,53,.45)}.app-tarj.b{border-color:rgba(249,115,22,.45)}
.app-tarj img{width:56px;height:56px;border-radius:13px}
.app-tarj h3{margin:0;font-size:19px}.app-tarj p{margin:0;color:var(--txtS);font-size:14px;line-height:1.5}