/* Web pública · estilos sobre tokens.css (sistema de diseño único, Plan Maestro §8). Nada de color se decide aquí. */
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--t-fondo); color: var(--t-texto); font-family: var(--t-cuerpo); font-size: 16px; line-height: var(--t-interlineado); -webkit-font-smoothing: antialiased; }
a { color: var(--t-acento-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--t-acento); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--t-display); font-weight: var(--t-peso-fuerte); letter-spacing: -.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.6rem); }
h2 { font-size: clamp(1.4rem, 2.6vw, 2.1rem); }
h3 { font-size: 1.15rem; }
h1 em, h2 em { font-style: normal; color: var(--t-acento-2); }
p { margin: 0 0 .9em; }
.mono, .num { font-family: var(--t-mono); font-variant-numeric: tabular-nums; }
.apagado { color: var(--t-apagado); }
.kicker { font-family: var(--t-mono); font-size: var(--t-tam-0); letter-spacing: .14em; text-transform: uppercase; color: var(--t-acento); margin: 0 0 var(--t-e3); }
.lead { font-size: 1.15rem; color: var(--t-texto-2); max-width: 62ch; }
.sub { color: var(--t-texto-2); max-width: 70ch; }
.salto { position: absolute; left: -999px; top: 8px; background: var(--t-acento); color: #000; padding: 8px 12px; z-index: 100; border-radius: 6px; }
.salto:focus { left: 8px; }

/* cabecera */
.cab { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--t-e5); padding: 12px clamp(16px, 4vw, 48px); background: rgba(12,14,18,.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--t-linea-suave); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--t-texto); font-weight: var(--t-peso-medio); letter-spacing: .04em; white-space: nowrap; }
.marca b { color: var(--t-acento-2); font-weight: var(--t-peso-fuerte); }
.marca:hover { text-decoration: none; }
.marca-simbolo { width: 14px; height: 14px; border: 2px solid var(--t-acento); border-radius: 3px; transform: rotate(45deg); }
.nav { display: flex; gap: 2px; }
.nav a { color: var(--t-texto-2); padding: 6px 11px; border-radius: 999px; font-size: var(--t-tam-2); font-weight: var(--t-peso-medio); white-space: nowrap; }
.nav a:hover { color: var(--t-texto); background: rgba(255,255,255,.05); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--t-fondo); background: var(--t-acento); }
.cab-derecha { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.idioma { border: 1px solid var(--t-linea); background: transparent; color: var(--t-texto-2); font: inherit; font-size: var(--t-tam-1); font-weight: 600; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.menu-boton { display: none; width: 40px; height: 40px; background: none; border: 1px solid var(--t-linea); border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: center; }
.menu-boton span { width: 18px; height: 2px; background: var(--t-texto-2); }
.nav-movil { display: none; }
@media (max-width: 1100px) {
  .nav { display: none; } .menu-boton { display: flex; }
  .nav-movil { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 16px 14px; background: var(--t-fondo-2); border-bottom: 1px solid var(--t-linea); position: sticky; top: 65px; z-index: 39; }
  .nav-movil[hidden] { display: none; }
  .nav-movil a { padding: 10px 12px; border: 1px solid var(--t-linea); border-radius: 10px; color: var(--t-texto-2); text-align: center; }
}

/* contenido */
.contenido { max-width: var(--t-ancho); margin: 0 auto; padding: var(--t-e6) clamp(16px, 4vw, 48px) var(--t-e8); }
.contenido:focus { outline: none; }
.seccion { margin-top: var(--t-e7); }
.seccion-cab { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--t-e4); margin-bottom: var(--t-e4); flex-wrap: wrap; }
.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--t-e7); align-items: center; padding: var(--t-e6) 0 var(--t-e5); }
@media (max-width: 900px) { .hero { grid-template-columns: 1fr; } }
.cifras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--t-e3); margin-top: var(--t-e5); }
@media (max-width: 640px) { .cifras { grid-template-columns: 1fr; } }
.cifra { background: var(--t-superficie); border: 1px solid var(--t-linea-suave); border-radius: var(--t-radio); padding: var(--t-e4); }
.cifra .valor { font-family: var(--t-mono); font-size: var(--t-tam-6); font-weight: 600; line-height: 1; margin: 6px 0; }
.cifra .etiqueta { font-size: var(--t-tam-1); color: var(--t-texto-2); }
.cifra .fuente { font-family: var(--t-mono); font-size: var(--t-tam-0); color: var(--t-tenue); margin-top: 8px; }
.rejilla { display: grid; gap: var(--t-e4); }
.rejilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rejilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; } }
.tarjeta { background: var(--t-superficie); border: 1px solid var(--t-linea-suave); border-radius: var(--t-radio); padding: var(--t-e5); }
.tarjeta h3 { margin-bottom: var(--t-e2); }
.tarjeta p:last-child { margin-bottom: 0; }
.boton { display: inline-block; border: 1px solid var(--t-linea); background: var(--t-superficie-2); color: var(--t-texto); padding: 10px 16px; border-radius: 999px; font: inherit; font-weight: 600; cursor: pointer; }
.boton:hover { border-color: var(--t-acento); text-decoration: none; }
.boton.primario { background: var(--t-acento); color: var(--t-fondo); border-color: var(--t-acento); }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--t-tam-2); }
.tabla th, .tabla td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--t-linea-suave); vertical-align: top; }
.tabla th { font-family: var(--t-mono); font-size: var(--t-tam-0); letter-spacing: .1em; text-transform: uppercase; color: var(--t-apagado); font-weight: 500; }
.tabla td.num, .tabla th.num { text-align: right; font-family: var(--t-mono); font-variant-numeric: tabular-nums; }
.tabla-envoltura { overflow-x: auto; }
.puerta { display: grid; grid-template-columns: 64px 1fr; gap: var(--t-e4); padding: var(--t-e4) 0; border-top: 1px solid var(--t-linea-suave); }
.puerta .n { font-family: var(--t-mono); font-size: var(--t-tam-5); color: var(--t-acento); font-weight: 600; line-height: 1; }
.estado { display: inline-block; font-family: var(--t-mono); font-size: var(--t-tam-0); letter-spacing: .08em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--t-linea); color: var(--t-texto-2); }
.estado[data-e="hecho"] { color: var(--t-ok); border-color: rgba(55,196,140,.45); }
.estado[data-e="pendiente"] { color: var(--t-aviso); border-color: rgba(242,184,75,.45); }
.estado[data-e="abierto"] { color: var(--t-rojo); border-color: rgba(255,77,77,.45); }
.incidente { display: grid; grid-template-columns: 110px 1fr auto; gap: var(--t-e3); padding: 12px 0; border-top: 1px solid var(--t-linea-suave); align-items: baseline; }
.incidente .cuando { font-family: var(--t-mono); font-size: var(--t-tam-1); color: var(--t-apagado); }
@media (max-width: 640px) { .incidente { grid-template-columns: 1fr; gap: 4px; } }
.arquitectura { width: 100%; height: auto; display: block; }
.arquitectura text { font-family: var(--t-mono); font-size: 11px; fill: var(--t-texto-2); }
.arquitectura .capa { fill: var(--t-superficie); stroke: var(--t-linea); }
.arquitectura .carril { stroke: var(--t-acento); stroke-width: 2; fill: none; }
.arquitectura .titulo { fill: var(--t-texto); font-weight: 600; font-size: 12px; letter-spacing: .08em; }
.formulario { display: grid; gap: var(--t-e3); max-width: 560px; }
.formulario label { display: grid; gap: 6px; font-size: var(--t-tam-2); color: var(--t-texto-2); }
.formulario input, .formulario textarea { width: 100%; padding: 10px 12px; border-radius: var(--t-radio-s); border: 1px solid var(--t-linea); background: var(--t-fondo-2); color: var(--t-texto); font: inherit; }
.formulario textarea { min-height: 130px; resize: vertical; }
.nota { font-size: var(--t-tam-1); color: var(--t-apagado); }
.borrador { border-left: 3px solid var(--t-aviso); padding: 10px 14px; background: rgba(242,184,75,.06); border-radius: 0 var(--t-radio-s) var(--t-radio-s) 0; font-size: var(--t-tam-2); color: var(--t-texto-2); }
.pie { max-width: var(--t-ancho); margin: 0 auto; padding: var(--t-e5) clamp(16px, 4vw, 48px) var(--t-e7); border-top: 1px solid var(--t-linea-suave); color: var(--t-apagado); font-size: var(--t-tam-1); }
.aviso-riesgo { color: var(--t-texto-2); max-width: 90ch; }
.pie-meta { font-family: var(--t-mono); font-size: var(--t-tam-0); }
.cargando { padding: var(--t-e8); text-align: center; color: var(--t-apagado); }