/* Estilos de la página web y las páginas legales de Garita Sur (la app tiene los suyos en src/styles.css). */
:root{
  --bg:#F4F3EE; --surface:#FFFFFF; --surface-2:#EAE9E2; --line:#D3D1C7;
  --ink:#14212A; --ink-2:#44525B; --muted:#66727A;
  --accent:#E0A800; --accent-ink:#5A4300; --accent-soft:#FBEFC2;
  --sea:#185F68; --sea-soft:#DCEDEF;
  --ok:#256B43; --bad:#A3241C;
  --focus:#185F68;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0F161B; --surface:#172127; --surface-2:#1E2A31; --line:#2E3B43;
    --ink:#E8ECE9; --ink-2:#BAC4C9; --muted:#97A3AA;
    --accent:#F2BE2B; --accent-ink:#F7D978; --accent-soft:#3A3010;
    --sea:#6CC3CC; --sea-soft:#14343A;
    --ok:#6CC58F; --bad:#F2918A;
    --focus:#F2BE2B;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Source Sans 3","Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:"Archivo","Arial Narrow",Arial,sans-serif;font-variation-settings:"wdth" 80;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:-.01em}
h1{font-size:clamp(2.3rem,5.4vw,4rem);font-weight:800}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem);font-weight:800}
h3{font-size:1.2rem;font-weight:700;font-variation-settings:"wdth" 90}
p{margin:0}
a{color:var(--sea);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding:0 clamp(18px,4vw,44px)}
.prose{max-width:66ch}
.eyebrow{font-family:"Archivo",Arial,sans-serif;font-variation-settings:"wdth" 90;font-weight:700;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink)}
.saltar{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:6px;z-index:50}
.saltar:focus{left:12px}
.franja{height:10px;background:repeating-linear-gradient(135deg,var(--accent) 0 18px,var(--ink) 18px 36px)}

/* Cabecera */
.cab{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.cab .wrap{display:flex;align-items:center;gap:18px;min-height:64px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.marca .sq{width:34px;height:34px;border-radius:7px;background:var(--accent);display:grid;place-items:center;font-family:"Archivo",Arial,sans-serif;font-weight:800;color:#14212A;font-size:.9rem}
.marca b{font-family:"Archivo",Arial,sans-serif;font-variation-settings:"wdth" 85;font-weight:800;font-size:1.15rem}
.cab nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.cab nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 12px;border-radius:6px}
.cab nav a:hover{background:var(--surface-2);color:var(--ink)}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:8px;font-weight:700;font-size:1rem;text-decoration:none;border:2px solid transparent;cursor:pointer;font-family:inherit}
.btn-pri{background:var(--accent);color:#14212A}
.btn-pri:hover{filter:brightness(1.06)}
.btn-sec{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-sec:hover{background:var(--surface-2)}
.btn[disabled]{opacity:.6;cursor:wait}
.cab .btn{min-height:42px;padding:8px 16px;font-size:.95rem}

/* Héroe */
.heroe{padding:64px 0 56px;background:var(--surface);border-bottom:1px solid var(--line)}
.heroe .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:48px;align-items:center}
@media (max-width:900px){.heroe .wrap{grid-template-columns:1fr}}
.heroe .txt{display:grid;gap:22px}
.heroe .sub{font-size:1.2rem;color:var(--ink-2);max-width:56ch}
.ctas{display:flex;gap:12px;flex-wrap:wrap}
.estado{display:inline-flex;align-items:center;gap:8px;font-size:.92rem;color:var(--ink-2);background:var(--surface-2);border-radius:999px;padding:6px 14px;width:fit-content}
.estado i{width:9px;height:9px;border-radius:50%;background:var(--ok);display:inline-block}

/* Maquetas de pantalla dibujadas con CSS */
.pantallas{position:relative;min-height:420px}
.tableta{background:#0B1014;border-radius:18px;padding:12px;box-shadow:0 24px 60px rgba(10,20,25,.28);max-width:420px}
.tableta .scr{background:#11181D;border-radius:10px;padding:16px;display:grid;gap:10px;color:#fff}
.tableta .sup{display:flex;justify-content:space-between;font-size:.8rem;color:#A9B5BB}
.tableta .grande{font-family:"Archivo",Arial,sans-serif;font-variation-settings:"wdth" 80;font-weight:800;font-size:1.35rem}
.fila{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 13px;border-radius:8px;background:#1F2B32;font-size:.92rem;color:#E8ECE9}
.fila.ok{border-left:7px solid #6CC58F}.fila.av{border-left:7px solid #F0A04B}.fila.sol{border-left:7px solid #F2BE2B}
.tableta .boton{background:#F2BE2B;color:#14212A;font-weight:800;text-align:center;border-radius:8px;padding:12px;font-family:"Archivo",Arial,sans-serif}
.celular{position:absolute;right:0;bottom:-14px;width:205px;background:#0B1014;border-radius:26px;padding:9px;box-shadow:0 24px 60px rgba(10,20,25,.32)}
.celular .scr{background:#E5DDD5;border-radius:19px;padding:12px;display:grid;gap:7px;font-size:.78rem;color:#111;min-height:260px}
.celular .b{background:#fff;border-radius:9px;padding:7px 9px;max-width:92%}
.celular .b.yo{background:#DCF8C6;justify-self:end}
.celular .qr{width:76px;height:76px;margin:4px 0;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0 0/13px 13px;border:5px solid #fff;border-radius:3px}
@media (max-width:520px){.celular{position:relative;right:auto;bottom:auto;margin:18px 0 0 auto}}

/* Secciones */
main section{padding:76px 0;border-bottom:1px solid var(--line)}
.cab-sec{display:grid;gap:10px;margin-bottom:34px;max-width:780px}
.cab-sec p{color:var(--ink-2);font-size:1.1rem}
.rejilla{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.tarjeta{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:24px;display:grid;gap:10px;align-content:start}
.tarjeta p{color:var(--ink-2)}
.tarjeta ul{margin:0;padding-left:1.2rem;color:var(--ink-2);display:grid;gap:6px}
.rol{border-top:6px solid var(--sea)}
.rol.v{border-top-color:var(--accent)}
.rol.j{border-top-color:var(--ink)}
.oscura{background:#14212A;color:#E8ECE9}
.oscura h2,.oscura h3{color:#FFFFFF}
.oscura .cab-sec p,.oscura .tarjeta p{color:#C9D3D7}
.oscura .eyebrow{color:#F2BE2B}
.oscura .tarjeta{background:#1C2B33;border-color:#2E3B43}
.oscura a{color:#F2BE2B}
.comparar{width:100%;border-collapse:collapse;background:var(--surface);font-size:1rem}
.comparar th,.comparar td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.comparar thead th{background:var(--surface-2);font-family:"Archivo",Arial,sans-serif;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase}
.tabla-envuelta{overflow-x:auto;border:1px solid var(--line);border-radius:10px}

/* Formulario */
.piloto{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:40px;align-items:start}
@media (max-width:900px){.piloto{grid-template-columns:1fr}}
.piloto ul{margin:0;padding-left:1.2rem;display:grid;gap:8px;color:var(--ink-2)}
form.contacto{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:26px;display:grid;gap:16px}
.campo{display:grid;gap:6px}
.campo label{font-weight:700;font-size:.98rem}
.campo .ayuda{font-size:.88rem;color:var(--muted)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:560px){.dos{grid-template-columns:1fr}}
input[type=text],input[type=email],input[type=tel],select,textarea{width:100%;min-height:48px;padding:11px 13px;border:1.5px solid var(--muted);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:1rem}
textarea{min-height:96px;resize:vertical}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.95rem}
.check input{width:22px;height:22px;margin-top:3px;flex-shrink:0;accent-color:var(--sea)}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.aviso{padding:12px 14px;border-radius:8px;font-weight:600}
.aviso.ok{background:#DDF1E4;color:#1D5636}
.aviso.err{background:#F8DEDC;color:#8A1F18}
.nota-legal{font-size:.86rem;color:var(--muted)}

/* Preguntas frecuentes */
details{background:var(--surface);border:1px solid var(--line);border-radius:10px}
details+details{margin-top:10px}
summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:700;font-size:1.05rem;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:"Archivo",Arial,sans-serif;font-size:1.4rem;line-height:1;color:var(--accent-ink)}
details[open] summary::after{content:"\2212"}
details p{padding:0 22px 20px;color:var(--ink-2);max-width:72ch}

/* Pie */
.pie{background:var(--surface);padding:40px 0 48px;font-size:.92rem;color:var(--ink-2)}
.pie .wrap{display:grid;gap:18px}
.pie nav{display:flex;gap:18px;flex-wrap:wrap}
.pie .datos{display:grid;gap:2px}

/* Páginas legales */
.legal main{padding:48px 0 80px}
.legal article{max-width:76ch;display:grid;gap:16px}
.legal article h2{font-size:1.4rem;margin-top:18px}
.legal article ul{margin:0;padding-left:1.3rem;display:grid;gap:6px}
.pendiente{background:var(--accent-soft);color:var(--accent-ink);padding:1px 6px;border-radius:4px;font-weight:600}
.legal table{border-collapse:collapse;width:100%;font-size:.95rem}
.legal th,.legal td{border:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}