/* Blindaje 369 · dirección B "Ingeniería" */
:root {
  --bg: #0c0c0c;
  --bg-2: #161616;
  --bg-3: #1f1f1f;
  --line: #2c2c2c;
  --paper: #f2f2f2;
  --muted: #a3a3a3;
  --orange: #f7931a;
  --green: #3ddc84;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;
  --sans: "IBM Plex Sans", system-ui, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg); color: var(--paper); font: 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* barra */
.bar { position: sticky; top: 0; z-index: 10; background: rgba(12,12,12,.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.bar .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.logo { font: 600 20px var(--mono); text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--orange); }
.cur { display: inline-block; width: .55em; height: 1em; background: var(--green); vertical-align: -.14em; margin-left: 3px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cur { animation: none; } }
.bar-wa { font: 400 14px var(--mono); text-decoration: none; color: var(--muted); }
.bar-wa:hover { color: var(--green); }

/* botones */
.btn { display: inline-block; font: 600 16px var(--mono); padding: 14px 20px; border-radius: 8px; border: 1px solid var(--orange); background: var(--orange); color: #111; text-decoration: none; cursor: pointer; text-align: center; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--paper); border-color: #555; }
.btn.ghost:hover { border-color: var(--green); color: var(--green); }
.btn:focus-visible, .chat button:focus-visible, .chat input:focus-visible, a:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

/* secciones */
section { padding: 72px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
.k { font: 400 14px var(--mono); color: var(--green); }
h1 { font: 600 clamp(36px, 8vw, 64px)/1.08 var(--sans); letter-spacing: -.02em; margin-top: 14px; }
h2 { font: 600 clamp(28px, 5vw, 40px)/1.15 var(--sans); letter-spacing: -.01em; margin-top: 10px; }
h3 { font: 600 20px/1.3 var(--sans); }
.lead { font-size: clamp(19px, 3.2vw, 23px); margin-top: 16px; max-width: 34ch; }
.sub { color: var(--muted); margin-top: 14px; max-width: 54ch; }
.muted { color: var(--muted); }

/* hero */
.hero { padding: 64px 0 72px; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ctas .btn { flex: 1 1 240px; }
@media (min-width: 640px) { .ctas .btn { flex: 0 0 auto; } }
.tag { font: 400 13px var(--mono); color: var(--muted); margin-top: 14px; }

/* hero: las cinco piezas del anuncio */
.piezas { list-style: none; margin-top: 22px; display: grid; gap: 4px; }
.piezas li { font: 600 clamp(20px, 3.6vw, 26px)/1.3 var(--mono); color: var(--orange); }
.piezas li::before { content: "› "; color: var(--green); }
.piezas li.alerta { color: var(--paper); }
.sostiene { margin-top: 22px; font-size: clamp(18px, 3vw, 21px); color: var(--muted); }
.sostiene b { color: var(--green); font-weight: 600; }

/* protección 369: cada pieza con su protección */
.mapa { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .mapa { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .mapa { grid-template-columns: repeat(5, 1fr); } }
.pieza { display: flex; flex-direction: column; gap: 6px; background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid var(--orange); border-radius: 10px; padding: 16px; }
.pieza.alerta { border-top-color: var(--paper); }
.pieza .que { font: 400 13px var(--mono); color: var(--muted); }
.pieza h3 { font-size: 19px; }
.pieza p { color: var(--muted); font-size: 15px; line-height: 1.45; }
.pieza .pilar { margin-top: auto; padding-top: 6px; font: 400 12px var(--mono); color: var(--green); text-transform: uppercase; letter-spacing: .06em; }
#proteccion .ctas { margin-top: 24px; }

/* 3-6-9 */
.num-block { display: grid; grid-template-columns: 1fr; gap: 8px; padding: 36px 0; border-top: 1px dashed var(--line); }
.num-block:first-of-type { margin-top: 28px; }
.big { font: 600 clamp(96px, 26vw, 168px)/.85 var(--mono); color: var(--orange); letter-spacing: -.04em; }
.num-block h3 { font: 600 26px var(--mono); }
.num-block > div > p { color: var(--muted); }
@media (min-width: 760px) { .num-block { grid-template-columns: 200px 1fr; gap: 32px; align-items: start; } }

.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chips li { font: 400 15px var(--mono); border: 1px solid #444; border-radius: 6px; padding: 6px 12px; }

.rubros { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .rubros { grid-template-columns: repeat(3, 1fr); } }
.rubros > div { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.rubros dt { font: 600 13px var(--mono); color: var(--orange); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 6px; }
.rubros dd { font-size: 16px; }
.rubros dd::before { content: "› "; color: var(--green); font-family: var(--mono); }

.fases { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 16px; }
@media (min-width: 760px) { .fases { grid-template-columns: repeat(3, 1fr); } }
.fase { background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.fase h4 { font: 600 15px var(--mono); color: var(--green); }
.fase h4 small { color: var(--muted); font-weight: 400; }
.fase em { font-style: normal; }
.fase ol { list-style: none; margin-top: 10px; display: grid; gap: 10px; }
.fase li { display: grid; grid-template-columns: 30px 1fr; gap: 4px; }
.fase li b { font: 600 15px var(--mono); color: var(--orange); }
.fase li span { display: block; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* núcleo 369 */
.capas { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .capas { grid-template-columns: repeat(3, 1fr); } }
.capa { background: var(--bg-2); border: 1px solid var(--line); border-top: 2px solid var(--green); border-radius: 10px; padding: 18px; }
.capa .pasos { font: 400 13px var(--mono); color: var(--muted); }
.capa h3 { font-family: var(--mono); margin-top: 6px; }
.capa h3::before { content: "$ "; color: var(--green); }
.capa p:last-child { color: var(--muted); margin-top: 6px; font-size: 15px; }

/* para quién */
.cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.card { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 20px; }
.card h3::before { content: "> "; color: var(--orange); font-family: var(--mono); }
.card p { color: var(--muted); margin-top: 6px; }

/* diagnóstico */
.steps { list-style: none; display: grid; gap: 14px; margin-top: 28px; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { border-left: 2px solid var(--orange); padding: 4px 0 4px 16px; counter-increment: s; }
.steps li::before { content: "0" counter(s); font: 600 14px var(--mono); color: var(--orange); }
.steps p { color: var(--muted); margin-top: 4px; }
.aviso { margin-top: 28px; background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--green); border-radius: 8px; padding: 16px 18px; font-size: 16px; }
.aviso b { color: var(--green); font-family: var(--mono); font-weight: 600; }

/* oferta */
.oferta { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 28px; }
@media (min-width: 760px) { .oferta { grid-template-columns: repeat(3, 1fr); } }
.prod { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--bg-2); }
.prod.destacado { border-color: var(--orange); }
.prod .pasos { font: 400 13px var(--mono); color: var(--muted); }
.prod h3 { margin-top: 6px; }
.prod p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.prod .precio { font: 600 15px var(--mono); color: var(--orange); margin-top: 14px; }

/* sobre mí */
.yo { display: grid; gap: 16px; margin-top: 20px; max-width: 64ch; }
.yo p { color: #d6d6d6; }
.firma { font: 400 14px var(--mono); color: var(--muted) !important; }

footer { padding: 36px 0 48px; color: var(--muted); font-size: 14px; }
footer .wrap { display: grid; gap: 10px; }
footer .logo { font-size: 16px; color: var(--paper); }
footer a { color: var(--paper); }

/* chat */
.chat { position: fixed; inset: auto 0 0 0; z-index: 50; display: flex; flex-direction: column; height: min(86vh, 640px); background: var(--bg-2); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 40px rgba(0,0,0,.6); }
.chat[hidden] { display: none; }
@media (min-width: 640px) { .chat { inset: auto 24px 24px auto; width: 400px; border: 1px solid var(--line); border-radius: 16px; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chat-head strong { font: 600 15px var(--mono); }
.chat-head small { display: block; color: var(--muted); font-size: 12px; }
.chat-close { background: none; border: 1px solid #444; color: var(--paper); border-radius: 6px; width: 34px; height: 34px; font-size: 18px; cursor: pointer; }
.chat-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.msg { max-width: 85%; padding: 10px 14px; border-radius: 12px; font-size: 15px; line-height: 1.45; white-space: pre-wrap; }
.msg.bot { background: var(--bg-3); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.yo { background: var(--orange); color: #111; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg .btn { margin-top: 10px; padding: 10px 14px; font-size: 14px; }
.chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-width: 0; background: var(--bg); border: 1px solid #444; color: var(--paper); border-radius: 8px; padding: 12px; font: 16px var(--sans); }
.chat-form button { font: 600 14px var(--mono); padding: 0 16px; border-radius: 8px; border: 0; background: var(--orange); color: #111; cursor: pointer; }
.chat-form button:disabled, .chat-form input:read-only { opacity: .5; cursor: not-allowed; }

.contacto { display: grid; gap: 10px; background: var(--bg-3); border-radius: 12px; padding: 14px; }
.contacto label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.contacto input:not([type=checkbox]) { background: var(--bg); border: 1px solid #444; color: var(--paper); border-radius: 8px; padding: 10px; font: 16px var(--sans); }
.contacto .check { grid-template-columns: auto 1fr; align-items: start; gap: 8px; }
.contacto .check input { margin-top: 3px; accent-color: var(--orange); }
.contacto .btn { padding: 10px 14px; font-size: 14px; }

/* página legal */
.legal { padding: 48px 0 64px; border: 0; }
.legal h1 { font-size: clamp(30px, 6vw, 44px); }
.legal h2 { font-size: 22px; margin-top: 32px; }
.legal p, .legal li { color: #d6d6d6; margin-top: 10px; max-width: 70ch; }
.legal ul { padding-left: 20px; }