:root{
  --ground:#F2F3F8; --surface:#FFFFFF; --surface-2:#E8EAF3; --sunk:#DCDFEC;
  --ink:#191A33; --ink-2:#4B4D6E; --ink-3:#7B7D9B;
  --line:#DDDFEB; --line-2:#C3C6DA;
  --accent:#3B3E9C; --accent-2:#2C2E7C; --accent-soft:#E4E5F6; --on-accent:#F4F4FD;
  --dawn:#A17518; --dawn-soft:#F6EDD8;
  --ok:#2C7154; --warn:#9A6A1B; --crit:#A63A48; --crit-soft:#F7E3E6;
  --night:#191A33; --night-2:#22244A; --night-line:#33365F;
  --night-ink:#DCDDEF; --night-dim:#8E90BC; --night-gold:#E8B865;
  --shadow:0 1px 2px rgba(25,26,51,.05), 0 16px 40px -22px rgba(25,26,51,.35);
  --rail:104px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#0F1022; --surface:#181A33; --surface-2:#1F2140; --sunk:#141628;
    --ink:#E9EAF6; --ink-2:#B2B5D4; --ink-3:#82859F;
    --line:#2A2D4E; --line-2:#3B3F66;
    --accent:#9195EC; --accent-2:#AAAEF5; --accent-soft:#22254B; --on-accent:#0E0F24;
    --dawn:#DFB160; --dawn-soft:#2C2415;
    --ok:#5CB68D; --warn:#D2A055; --crit:#E4838E; --crit-soft:#33191E;
    --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 42px -24px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --ground:#0F1022; --surface:#181A33; --surface-2:#1F2140; --sunk:#141628;
  --ink:#E9EAF6; --ink-2:#B2B5D4; --ink-3:#82859F;
  --line:#2A2D4E; --line-2:#3B3F66;
  --accent:#9195EC; --accent-2:#AAAEF5; --accent-soft:#22254B; --on-accent:#0E0F24;
  --dawn:#DFB160; --dawn-soft:#2C2415;
  --ok:#5CB68D; --warn:#D2A055; --crit:#E4838E; --crit-soft:#33191E;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 18px 42px -24px rgba(0,0,0,.8);
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:16.5px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Fraunces,Georgia,"Times New Roman",serif; margin:0; text-wrap:balance; line-height:1.14; font-weight:600; letter-spacing:-.008em}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}
.mono{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; overflow-wrap:anywhere}

.frame{max-width:1120px; margin:0 auto; padding:0 26px}
.narrow{max-width:820px; margin:0 auto; padding:0 26px}

.btn{display:inline-flex; align-items:center; gap:9px; padding:12px 22px; font-family:"Public Sans",sans-serif;
  font-size:15px; font-weight:500; border-radius:6px; text-decoration:none; border:1px solid transparent; cursor:pointer}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{border-color:var(--line-2); color:var(--ink); background:none}
.btn-ghost:hover{border-color:var(--accent); color:var(--accent)}

/* ── top bar ───────────────────────────── */
.topbar{border-bottom:1px solid var(--line); background:var(--ground)}
.topbar-in{display:flex; align-items:center; gap:24px; height:64px}
.brand{display:flex; align-items:center; gap:10px; font-family:Fraunces,serif; font-weight:600; font-size:20px; text-decoration:none; color:var(--ink)}
.navlinks{display:flex; gap:24px; margin-left:auto; font-size:14.5px; color:var(--ink-2)}
.navlinks a{text-decoration:none}
.navlinks a:hover{color:var(--accent)}
.navlinks a[aria-current="page"]{color:var(--accent); font-weight:600}

/* ── hero ──────────────────────────────── */
.hero{padding:60px 0 0}
.hero-top{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:52px; align-items:end; margin-bottom:44px}
.kicker{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:20px}
.hero h1{font-size:clamp(36px,5vw,58px); line-height:1.04; letter-spacing:-.02em}
.hero h1 span{color:var(--dawn)}
.hero .sub{margin-top:22px; font-size:19px; color:var(--ink-2); max-width:34ch}
.hero-cta{display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; align-items:center}
.hero-cta small{font-size:13.5px; color:var(--ink-3)}

/* page hero (subpages, no split layout) */
.pagehero{padding:56px 0 44px; border-bottom:1px solid var(--line)}
.pagehero h1{font-size:clamp(32px,4.4vw,46px); letter-spacing:-.018em; max-width:18ch}
.pagehero .sub{margin-top:18px; font-size:18px; color:var(--ink-2); max-width:62ch}

/* message card */
.msg{background:var(--surface); border:1px solid var(--line); border-radius:10px; box-shadow:var(--shadow); overflow:hidden}
.msg-head{display:flex; align-items:center; gap:9px; padding:11px 16px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--ink-3)}
.msg-head b{color:var(--ink); font-weight:600; font-size:13.5px}
.msg-head time{margin-left:auto; font-family:"IBM Plex Mono",monospace; font-size:11.5px}
.msg-body{padding:16px}
.sev{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--warn); background:var(--dawn-soft); border:1px solid color-mix(in srgb,var(--warn) 32%,transparent); padding:3px 9px; border-radius:4px}
.msg-body h4{margin:12px 0 6px; font-size:16.5px; font-family:Fraunces,serif; font-weight:600}
.msg-body p{font-size:14.5px; color:var(--ink-2)}
.msg-rec{margin-top:14px; padding:12px 14px; background:var(--surface-2); border-radius:7px; font-size:14px}
.msg-rec b{display:block; font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); font-weight:600; margin-bottom:5px}
.msg-rec em{font-style:normal; color:var(--ink-3); font-size:12.5px; display:block; margin-top:6px}
.msg-acts{display:flex; gap:9px; margin-top:14px}
.msg-acts span{flex:1; text-align:center; padding:9px; font-size:13.5px; font-weight:500; border-radius:6px}
.msg-acts .a1{background:var(--accent); color:var(--on-accent)}
.msg-acts .a2{border:1px solid var(--line-2); color:var(--ink-2)}
.msg-foot{padding:11px 16px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-3); background:var(--sunk)}

/* night strip */
.night{background:var(--night); border-radius:12px; padding:26px 22px 18px; color:var(--night-ink); box-shadow:var(--shadow)}
.night svg{display:block; width:100%; height:auto}
.night-cap{display:flex; justify-content:space-between; gap:16px; margin-top:6px; font-family:"IBM Plex Mono",monospace; font-size:11.5px; color:var(--night-dim); flex-wrap:wrap}

/* ── hour rail sections ────────────────── */
.beat{border-top:1px solid var(--line)}
.beat-in{display:grid; grid-template-columns:var(--rail) minmax(0,1fr); gap:32px; padding:56px 0}
.hour{position:relative; padding-top:4px}
.hour time{font-family:"IBM Plex Mono",monospace; font-size:15px; font-weight:500; color:var(--accent); display:block}
.hour small{display:block; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-top:5px}
.hour::after{content:""; position:absolute; left:-19px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--accent)}
.hour.gold time{color:var(--dawn)}
.hour.gold::after{background:var(--dawn)}
.beat-body h2{font-size:clamp(24px,3vw,32px); margin-bottom:16px}
.beat-body > p{font-size:17.5px; color:var(--ink-2); max-width:62ch}
.beat-body > p + p{margin-top:16px}

.two{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-top:28px}
.two > div{background:var(--surface); padding:22px 20px}
.two h3{font-size:17px; margin-bottom:8px; font-family:Fraunces,serif}
.two p{font-size:14.5px; color:var(--ink-2)}
.two .tag{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; display:block; margin-bottom:11px}
.tag.before{color:var(--crit)}
.tag.after{color:var(--ok)}

.rulelist{list-style:none; margin:26px 0 0; padding:0; border-top:1px solid var(--line)}
.rulelist li{display:grid; grid-template-columns:132px minmax(0,1fr); gap:22px; padding:15px 0; border-bottom:1px solid var(--line); font-size:15.5px; color:var(--ink-2); align-items:baseline}
.rulelist b{font-family:"IBM Plex Mono",monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink); font-weight:500}
.rulelist li.hi b{color:var(--crit)}

.never{margin-top:28px; border:1px solid var(--line); border-radius:9px; background:var(--surface); padding:24px 22px}
.never h3{font-family:Fraunces,serif; font-size:18px; margin-bottom:14px}
.never ul{list-style:none; margin:0; padding:0; display:grid; gap:11px}
.never li{display:grid; grid-template-columns:22px 1fr; gap:12px; font-size:15px; color:var(--ink-2)}
.never svg{margin-top:5px}

.ticketcard{margin-top:28px; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--surface)}
.tk-head{padding:14px 20px; background:var(--surface-2); border-bottom:1px solid var(--line); display:flex; gap:14px; align-items:baseline; flex-wrap:wrap}
.tk-head b{font-family:"IBM Plex Mono",monospace; font-size:13px}
.tk-head span{font-size:13px; color:var(--ink-3)}
.tk-sec{padding:18px 20px; border-bottom:1px solid var(--line)}
.tk-sec:last-child{border-bottom:none}
.tk-sec h4{margin:0 0 8px; font-family:"IBM Plex Mono",monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); font-weight:500}
.tk-sec p{font-size:15px; color:var(--ink-2)}
.tk-sec ol{margin:0; padding-left:20px; display:grid; gap:12px; font-size:15px; color:var(--ink-2)}
.tk-sec li strong{color:var(--ink); font-weight:600}
.tk-meta{display:flex; gap:8px; flex-wrap:wrap; margin-top:7px}
.tk-meta em{font-style:normal; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--line-2); color:var(--ink-3); padding:2px 7px; border-radius:4px}

/* chart */
.chartbox{margin-top:28px; border:1px solid var(--line); border-radius:10px; background:var(--surface); padding:24px 22px 16px; overflow-x:auto}
.chartbox svg{display:block; width:100%; min-width:560px; height:auto}
.legend{display:flex; gap:20px; flex-wrap:wrap; margin-top:10px; font-size:13px; color:var(--ink-2)}
.legend i{display:inline-block; width:18px; border-top-width:2px; border-top-style:solid; vertical-align:middle; margin-right:7px}

/* ficha */
.ficha{background:var(--surface-2); border-top:1px solid var(--line); padding:56px 0}
.ficha h2{font-size:26px; margin-bottom:8px}
.ficha .sub{color:var(--ink-2); font-size:16px; margin-bottom:28px; max-width:60ch}
.fgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden}
.fgrid > div{background:var(--surface); padding:20px 18px}
.fgrid dt{font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); margin-bottom:8px}
.fgrid dd{margin:0; font-size:14.5px; color:var(--ink-2)}
.fgrid dd b{color:var(--ink); font-weight:600; display:block; font-size:15.5px; margin-bottom:3px}

/* cta */
.cta{background:var(--night); color:var(--night-ink); padding:64px 0}
.cta-in{display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center}
.cta h2{color:#fff; font-size:clamp(26px,3.4vw,36px)}
.cta p{color:var(--night-dim); margin-top:16px; font-size:17px; max-width:52ch}
.cta .btn-primary{background:var(--night-gold); color:#221A08; margin-top:28px}
.cta .btn-primary:hover{background:#F2CB86}
.cta-side{border-left:1px solid var(--night-line); padding-left:26px; display:grid; gap:16px; font-size:14px; color:var(--night-dim)}
.cta-side b{display:block; color:var(--night-ink); font-weight:600; font-size:14.5px; margin-bottom:2px}
footer{padding:32px 0; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3)}
.foot-in{display:flex; gap:18px; justify-content:space-between; flex-wrap:wrap}

/* ── tabla de capas (seguridad) ──────────── */
.layers{display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:9px; overflow:hidden; margin-top:28px}
.layer{background:var(--surface); padding:22px 24px; display:grid; grid-template-columns:44px minmax(0,1fr); gap:18px}
.layer .n{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--accent); font-weight:600; padding-top:2px}
.layer h3{font-size:17.5px; margin-bottom:7px; font-family:Fraunces,serif}
.layer p{font-size:15px; color:var(--ink-2)}
.layer ul{margin:10px 0 0; padding-left:18px; display:grid; gap:6px; font-size:14.5px; color:var(--ink-2)}

/* ── tabla de cobertura ──────────────────── */
.covtable{width:100%; border-collapse:collapse; margin-top:20px; font-size:14.5px}
.covtable th{text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); font-weight:500; padding:10px 14px; border-bottom:2px solid var(--line-2)}
.covtable td{padding:12px 14px; border-bottom:1px solid var(--line); color:var(--ink-2); vertical-align:top}
.covtable td.code{font-family:"IBM Plex Mono",monospace; font-size:13px; color:var(--ink); white-space:nowrap}
.covtable-wrap{overflow-x:auto; margin-top:8px}
.covtable td.corto{white-space:nowrap}
.covtable td.que{min-width:15em; color:var(--ink)}
.catgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:28px}
.catcard{background:var(--surface); border:1px solid var(--line); border-radius:9px; padding:18px 16px}
.catcard .count{font-family:"IBM Plex Mono",monospace; font-size:22px; color:var(--accent); font-weight:600}
.catcard h4{font-size:14px; margin-top:6px; font-family:"Public Sans",sans-serif; font-weight:600}
.catcard p{font-size:12.5px; color:var(--ink-3); margin-top:4px}

/* ── formulario de contacto ──────────────── */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:32px}
.field{display:grid; gap:7px}
.field.full{grid-column:1/-1}
.field label{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.field label .req{color:var(--crit)}
.field input, .field select, .field textarea{
  font:inherit; font-size:15px; padding:11px 13px; border:1px solid var(--line-2); border-radius:7px;
  background:var(--surface); color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.field textarea{resize:vertical; min-height:110px; font-family:inherit}
.field small{font-size:12.5px; color:var(--ink-3)}
.hp-field{position:absolute; left:-9999px; top:-9999px; width:1px; height:1px; overflow:hidden}
.formfoot{margin-top:24px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.formnote{font-size:13px; color:var(--ink-3); max-width:44ch}
.formstatus{margin-top:18px; padding:13px 16px; border-radius:7px; font-size:14.5px; display:none}
.formstatus.show{display:block}
.formstatus.ok{background:var(--surface-2); color:var(--ok); border:1px solid color-mix(in srgb, var(--ok) 30%, transparent)}
.formstatus.err{background:var(--crit-soft); color:var(--crit); border:1px solid color-mix(in srgb, var(--crit) 30%, transparent)}

@media (max-width:900px){
  .hero-top{grid-template-columns:1fr; gap:36px; align-items:start}
  .beat-in{grid-template-columns:minmax(0,1fr); gap:14px; padding:44px 0}
  .hour{display:flex; align-items:baseline; gap:12px; padding-top:0}
  .hour::after{display:none}
  .hour small{margin-top:0}
  .two,.fgrid{grid-template-columns:1fr}
  .cta-in{grid-template-columns:1fr}
  .cta-side{border-left:none; border-top:1px solid var(--night-line); padding-left:0; padding-top:24px}
  .navlinks{display:none}
  .rulelist li{grid-template-columns:1fr; gap:4px}
  .layer{grid-template-columns:1fr}
  .catgrid{grid-template-columns:1fr 1fr}
  .formgrid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}