:root{
  --bg:#f5f6f8; --surface:#ffffff; --ink:#0e2238; --muted:#4a5b6e; --line:#d5dbe3;
  --eu:#1f4fb4; --plate:#ffc82e; --plate-ink:#1a1400; --cta:#0e2238; --cta-ink:#ffffff;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0b1624; --surface:#112136; --ink:#eef2f7; --muted:#a3b2c4; --line:#223650;
    --eu:#6b9bff; --cta:#ffc82e; --cta-ink:#1a1400;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1624; --surface:#112136; --ink:#eef2f7; --muted:#a3b2c4; --line:#223650;
  --eu:#6b9bff; --cta:#ffc82e; --cta-ink:#1a1400;
}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);color-scheme:light dark}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Georgia,"Times New Roman",serif}
h1,h2,h3,.sans{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
a{color:inherit}
.wrap{max-width:1060px;margin:0 auto;padding:0 1.25rem}
section{padding:4rem 0}
h2{font-size:clamp(1.7rem,4vw,2.4rem);line-height:1.12;margin:0 0 1rem;font-weight:800;letter-spacing:-.01em;max-width:22ch}
p{max-width:62ch;margin:.5rem 0}
.muted{color:var(--muted)}

header.top{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.25rem;max-width:1060px;margin:0 auto}
.brand{font:800 1.15rem Arial,Helvetica,sans-serif;text-decoration:none}
.btn{display:inline-block;background:var(--cta);color:var(--cta-ink);font:700 1rem Arial,Helvetica,sans-serif;padding:.85rem 1.4rem;border-radius:6px;text-decoration:none;border:2px solid var(--cta)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid var(--eu);outline-offset:2px}

/* Hero */
.hero{padding:2.5rem 0 4rem}
.hero .wrap{display:grid;gap:2.5rem;grid-template-columns:1.1fr .9fr;align-items:center}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);line-height:1.02;font-weight:900;letter-spacing:-.02em;margin:0 0 1.2rem}
.hero p.lead{font-size:1.2rem}
.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.plate{display:flex;border:4px solid #111;border-radius:10px;background:#fff;color:#111;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.18);max-width:430px;margin-inline:auto}
.plate .eu{background:#1f4fb4;color:#fff;width:64px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:800 1.3rem Arial,Helvetica,sans-serif;gap:.2rem}
.plate .eu i{font-style:normal;color:var(--plate);font-size:.9rem;letter-spacing:2px}
.plate .num{flex:1;text-align:center;font:900 clamp(2.4rem,7vw,3.6rem) Arial,Helvetica,sans-serif;letter-spacing:.06em;padding:.5rem .3rem}
.plate-cap{text-align:center;margin-top:1rem;font:600 .95rem Arial,Helvetica,sans-serif}
.clock{display:inline-block;background:var(--plate);color:var(--plate-ink);font:900 .95rem Arial,Helvetica,sans-serif;padding:.3rem .7rem;border-radius:4px;margin-top:.6rem}

/* Includes */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);grid-template-columns:repeat(3,1fr);margin-top:1.8rem}
.grid>div{background:var(--surface);padding:1.4rem}
.grid h3{margin:0 0 .35rem;font-size:1.05rem;font-weight:800}
.grid p{margin:0;font-size:.98rem;color:var(--muted)}

/* Band */
.band{background:var(--ink);color:var(--bg)}
.band .muted{color:inherit;opacity:.8}
.band h2{color:var(--bg)}
.band .btn{background:var(--plate);border-color:var(--plate);color:var(--plate-ink)}
.cols{display:grid;gap:2rem;grid-template-columns:1fr 1fr}
.tags{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0;padding:0;list-style:none}
.tags li{border:1.5px solid currentColor;border-radius:99px;padding:.25rem .8rem;font:600 .95rem Arial,Helvetica,sans-serif}

/* Steps */
ol.steps{list-style:none;margin:1.8rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:s}
ol.steps li{counter-increment:s;border-top:4px solid var(--eu);padding-top:.8rem}
ol.steps li::before{content:"Paso " counter(s);font:700 .85rem Arial,Helvetica,sans-serif;color:var(--eu)}
ol.steps h3{margin:.2rem 0;font-size:1.1rem;font-weight:800}
ol.steps p{margin:0;font-size:.97rem;color:var(--muted)}

/* FAQ */
details{border-bottom:1px solid var(--line);padding:1rem 0}
summary{cursor:pointer;font:700 1.1rem Arial,Helvetica,sans-serif}
details p{margin-top:.6rem}

/* Contact */
form{display:grid;gap:.9rem;max-width:520px;margin-top:1.4rem}
label{font:600 .95rem Arial,Helvetica,sans-serif;display:grid;gap:.3rem}
input,textarea,select{font:inherit;padding:.7rem;border:1.5px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink)}
footer{border-top:1px solid var(--line);padding:2rem 0;font-size:.92rem;color:var(--muted)}

@media(max-width:820px){
  .hero .wrap,.cols{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  ol.steps{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){ol.steps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Contacto y WhatsApp */
.contact{align-items:start}
.contact-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:1.4rem}
.open365{margin:0 0 1rem;background:var(--plate);color:var(--plate-ink);border-radius:6px;padding:.7rem .9rem;display:grid;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
.open365 strong{font-weight:900;font-size:1.05rem}
.open365 span{font-size:.92rem}
.cbtn{display:grid;gap:.1rem;text-decoration:none;border:2px solid var(--ink);border-radius:8px;padding:.8rem 1rem;margin:.6rem 0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:var(--ink)}
.cbtn b{font-size:1.05rem}
.cbtn span{font-size:.95rem;color:var(--muted);overflow-wrap:anywhere}
.cbtn.wa{background:#25d366;border-color:#25d366;color:#06240f}
.cbtn.wa span{color:#06240f}
.cbtn:focus-visible,.wa-float:focus-visible{outline:3px solid var(--eu);outline-offset:3px}
.wa-float{position:fixed;right:max(1rem,env(safe-area-inset-right,0px));bottom:calc(1rem + env(safe-area-inset-bottom,0px));z-index:50;display:flex;align-items:center;gap:.5rem;background:#25d366;color:#06240f;font:800 1rem "Helvetica Neue",Helvetica,Arial,sans-serif;text-decoration:none;padding:.8rem 1.1rem;border-radius:99px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
footer{padding-bottom:5.5rem}
@media(max-width:480px){.wa-float span{display:none}.wa-float{padding:.9rem}}