/* Sitio de Murox. Marca Cobalto editorial, la de los reportes de murox-evaluar: piedra, grafito y
   cobalto; Epilogue en títulos, Public Sans en texto e IBM Plex Mono solo para cifras.
   Lo memorable es el muro de la portada: cada bloque es una revisión, el punteado es una grieta y
   el cobalto es la grieta que se cerró, como en el logo. Todo lo demás se queda sobrio.
   Todo sale de este sitio: la CSP de _headers no permite nada de fuera. */

@font-face { font-family: "Epilogue"; src: url("fuentes/epilogue.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fuentes/public-sans.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fuentes/public-sans-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fuentes/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Fondo blanco (9 de noviembre): el piedra de la marca queda en los bloques del muro y en la hoja
     del reporte, para no leerse como gris en pantalla. */
  --bg: #FFFFFF;
  --surface: #F4F1EB;
  --ink: #1E1C1A;
  --muted: #57524B;
  --line: #E4DFD6;
  --ladrillo: #E6E0D5;
  --ladrillo-ink: #57524B;
  /* Relieve del muro: cara clara arriba, cara oscura abajo, canto y sombra; la grieta es un hueco */
  --cara-1: #F1ECE3; --cara-2: #E2DACC; --canto: #CFC5B4; --luz: rgba(255, 255, 255, 0.9);
  --hueco: #EEE9E1; --hueco-sombra: rgba(30, 28, 26, 0.16); --grieta-borde: #A39B8F;
  --cerrada-1: #3A5BDB; --cerrada-2: #2342BC; --cerrada-canto: #1A3192; --cerrada-brillo: rgba(39, 71, 199, 0.6);
  --sombra-bloque: rgba(30, 28, 26, 0.45);
  --grieta: #8A8277;
  --accent: #2747C7;
  --accent-ink: #FFFFFF;
  --accent-soft: #E3E8FA;
  --ambar: #A35D00;
  --ambar-soft: #F8EDDC;
  --verde: #2B7A4B;
  --panel: #FFFFFF;
  --piedra: #F4F1EB;
  --cobalto: #2747C7;
  --cobalto-muted: #D5DCF6;
  --banda: #1E1C1A;
  --banda-ink: #F4F1EB;
  --banda-muted: #B9B2A7;
  --banda-accent: #8FA6FF;
  --font-head: "Epilogue", "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "SF Mono", Menlo, ui-monospace, monospace;
  /* Escala: 13 · 15 · 17 · 21 · 28 · 44 · 72 */
  --t-1: 13px; --t0: 15px; --t1: 17px; --t2: 21px; --t3: 28px; --t4: clamp(30px, 4vw, 44px); --t5: clamp(42px, 6.4vw, 76px);
  --ancho: 1120px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141210;
    --surface: #1E1C1A;
    --ink: #E6E1D8;
    --muted: #A8A196;
    --line: #36322D;
    --ladrillo: #2A2723;
    --ladrillo-ink: #A8A196;
    --cara-1: #36322D; --cara-2: #2A2723; --canto: #161412; --luz: rgba(255, 255, 255, 0.07);
    --hueco: #24211E; --hueco-sombra: rgba(0, 0, 0, 0.5); --grieta-borde: #6E675D;
    --cerrada-1: #A3B5FF; --cerrada-2: #8098F2; --cerrada-canto: #5B70C9; --cerrada-brillo: rgba(143, 166, 255, 0.35);
    --sombra-bloque: rgba(0, 0, 0, 0.6);
    --grieta: #8A8277;
    --accent: #8FA6FF;
    --accent-ink: #141210;
    --accent-soft: #1C2547;
    --ambar: #F0B44F;
    --ambar-soft: #36280F;
    --verde: #6DCB93;
    --panel: #2A2723;
    --banda: #1C2547;
    --banda-muted: #C3C9E0;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: var(--t1); line-height: 1.6; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.12; text-wrap: balance; }
p, dd { text-wrap: pretty; }
a { color: var(--accent); }
b, strong, dt { font-weight: 650; }
[id] { scroll-margin-top: 16px; }

.saltar { position: absolute; left: -9999px; }
.saltar:focus { left: 16px; top: 16px; background: var(--surface); padding: 8px 12px; z-index: 10; }
.lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 32px; }

/* Encabezado */
.cabecera { padding: 28px 0; }
.cabecera .contenedor { display: flex; align-items: center; gap: 32px; }
.logo { display: block; margin-right: auto; }
.logo svg { display: block; width: 150px; height: auto; }
.muro-logo, .logo .nombre { fill: var(--ink); }
.logo .nombre { font-family: var(--font-head); font-weight: 800; }
.bloque-logo { fill: var(--accent); }
.menu { display: flex; gap: 28px; font-size: var(--t0); font-weight: 600; }
.menu a { color: var(--muted); text-decoration: none; }
.menu a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 6px; }

.boton { display: inline-block; font-weight: 650; text-decoration: none; border-radius: 4px; padding: 13px 24px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); }
.boton:hover { filter: brightness(1.08); }
.boton.secundario { background: transparent; color: var(--ink); border-color: var(--line); }
.boton.secundario:hover { border-color: var(--ink); filter: none; }
.boton.chico { padding: 8px 16px; font-size: var(--t0); }
.cabecera .boton.secundario { color: var(--accent); border-color: var(--accent); }
.cabecera .boton.secundario:hover { background: var(--accent-soft); }

/* Portada */
.portada { padding: 40px 0 104px; }
.portada .contenedor { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.portada h1 { font-size: var(--t5); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; }
.entrada { font-size: 20px; color: var(--muted); max-width: 31em; margin-top: 28px; }
.entrada strong { color: var(--ink); }
.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* El muro de revisiones: una pared de ladrillos de medida fija que sigue más allá del borde derecho
   de la pantalla. Solo las grietas y la grieta cerrada llevan texto, y al pasar el cursor, al
   tocarlas o al enfocarlas con el teclado explican qué significan. */
.portada { overflow: hidden; }
.muro-revisiones { min-width: 0; }
.pared { position: relative; padding-bottom: 8px; }
/* La pared se queda en su columna: se recorta solo por la derecha (las explicaciones de arriba y
   de los lados siguen visibles) y se desvanece con una capa encima, no con mask-image, que también
   recortaría las explicaciones */
.ventana { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; clip-path: inset(-200px 0 -200px -200px); }
.ventana::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 30%; z-index: 3; pointer-events: none; background: linear-gradient(to right, transparent, var(--bg) 85%); }
.l:hover, .l:focus { z-index: 6; }
.fila { display: flex; gap: 8px; }
.fila { margin-left: 79px; }
.fila.corrida { margin-left: 0; }
.l { flex: none; position: relative; width: 150px; height: 66px; border-radius: 3px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 10px; font-family: var(--font-head); font-weight: 700; font-size: var(--t0); line-height: 1.2;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 100%); box-shadow: inset 0 1px 0 var(--luz), 0 3px 0 var(--canto), 0 8px 14px -8px var(--sombra-bloque); }
.l.t1 { --c1: #F4EFE7; --c2: #E6DED1; }
.l.t2 { --c1: #ECE5D9; --c2: #DBD1C1; }
.l.t3 { --c1: #F0EAE0; --c2: #E0D7C8; }
.l.t4 { --c1: #E7DFD1; --c2: #D5CAB8; }
@media (prefers-color-scheme: dark) {
  .l.t1 { --c1: #38342F; --c2: #2C2925; }
  .l.t2 { --c1: #332F2A; --c2: #282521; }
  .l.t3 { --c1: #36322D; --c2: #2A2723; }
  .l.t4 { --c1: #302C28; --c2: #25221F; }
}
.l.bien { color: var(--ladrillo-ink); font-weight: 600; font-size: 14px; cursor: help; }
.l.grieta { background: var(--ambar-soft); color: var(--ink); border: 1.5px dashed var(--ambar); box-shadow: inset 0 4px 8px var(--hueco-sombra); cursor: help; }
.l.cerrada { background: linear-gradient(180deg, var(--cerrada-1) 0%, var(--cerrada-2) 100%); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 0 var(--cerrada-canto), 0 10px 18px -8px var(--cerrada-brillo); cursor: help; }
.l:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
/* Una grieta que se cierra: el hueco punteado queda debajo y el bloque cobalto baja encima */
.l.hueco { padding: 0; cursor: default; }
.l.grieta:not(.hueco) { z-index: 2; }
.l.grieta:not(.hueco)::before { content: "!"; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--bg); border-radius: 50%; background: var(--ambar); color: var(--bg); font-family: var(--font-body); font-size: 12px; font-weight: 800; line-height: 20px; text-align: center; }
.hueco > .cerrada { position: absolute; inset: -1.5px; width: auto; height: auto; }
.l .que { position: absolute; left: 50%; bottom: calc(100% + 12px); z-index: 5; width: 240px; padding: 10px 12px; border-radius: 4px; background: var(--ink); color: var(--bg); font-family: var(--font-body); font-weight: 500; font-size: 14px; line-height: 1.4; text-align: left; opacity: 0; transform: translate(-50%, 4px); pointer-events: none; transition: opacity 0.15s, transform 0.15s; }
.l .que::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.l:hover .que, .l:focus .que { opacity: 1; transform: translate(-50%, 0); }
/* El primer ladrillo de una hilada está en la orilla: su explicación se alinea a la izquierda */
.fila > .l:first-child .que { left: 0; transform: translate(0, 4px); }
.fila > .l:first-child .que::after { left: 36px; }
.fila > .l:first-child:hover .que, .fila > .l:first-child:focus .que { transform: none; }

/* La Solidez sube de 58 a 71 con el primer bloque cobalto y a 86, ya en verde, con el segundo
   (ilustrativo; respeta el contrato: en verde ya no queda ninguna grieta alta abierta) */
@property --solidez { syntax: "<integer>"; initial-value: 58; inherits: false; }
@property --avance { syntax: "<percentage>"; initial-value: 58%; inherits: false; }
.marcador { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 4px 16px; margin-bottom: 22px; }
.marcador-nombre { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: var(--t0); font-weight: 650; color: var(--muted); }
.marcador-cifra { --solidez: 86; counter-reset: solidez var(--solidez); font-family: var(--font-head); font-weight: 800; font-size: 38px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--verde); animation: subir 1.9s linear 1.9s backwards; }
.marcador-cifra::before { content: counter(solidez); }
.marcador-cifra small { margin-left: 2px; font-size: 20px; font-weight: 700; letter-spacing: 0; color: var(--muted); }
.marcador-barra { grid-column: 1 / -1; height: 6px; margin-top: 8px; border-radius: 3px; overflow: hidden; background: var(--line); }
.marcador-barra span { --avance: 86%; display: block; height: 100%; width: var(--avance); background: var(--verde); animation: llenar 1.9s linear 1.9s backwards; }
@keyframes subir {
  0% { --solidez: 58; color: var(--ambar); }
  22% { --solidez: 71; color: var(--ambar); }
  60% { --solidez: 71; color: var(--ambar); }
  84% { --solidez: 86; color: var(--verde); }
  100% { --solidez: 86; color: var(--verde); }
}
@keyframes llenar {
  0% { --avance: 58%; background: var(--ambar); }
  22% { --avance: 71%; background: var(--ambar); }
  60% { --avance: 71%; background: var(--ambar); }
  84% { --avance: 86%; background: var(--verde); }
  100% { --avance: 86%; background: var(--verde); }
}

/* El único momento de movimiento: la pared se levanta hilada por hilada (de abajo hacia arriba),
   se marcan las grietas, bajan dos bloques cobalto y la Solidez sube hasta verde. Nada se mueve al
   hacer scroll. */
.fila > .l { animation: asentar 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }
.fila:nth-child(6) > .l { animation-delay: 0s; }
.fila:nth-child(5) > .l { animation-delay: 0.08s; }
.fila:nth-child(4) > .l { animation-delay: 0.16s; }
.fila:nth-child(3) > .l { animation-delay: 0.24s; }
.fila:nth-child(2) > .l { animation-delay: 0.32s; }
.fila:nth-child(1) > .l { animation-delay: 0.4s; }
.fila > .l.grieta { animation: marcar 0.6s ease-out 0.8s backwards; }
.hueco > .cerrada.primera { animation: cerrar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 1.35s backwards; }
.hueco > .cerrada.segunda { animation: cerrar 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) 2.6s backwards; }
@keyframes asentar {
  from { transform: translateY(14px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes marcar {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes cerrar {
  from { transform: translateY(-40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.leyenda { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 28px; font-size: var(--t0); color: var(--muted); }
.clave { display: inline-flex; align-items: center; gap: 8px; }
.muestra { display: inline-block; width: 22px; height: 12px; border-radius: 2px; }
.muestra.bien { background: linear-gradient(180deg, var(--cara-1), var(--cara-2)); box-shadow: 0 1px 0 var(--canto); }
.muestra.grieta { border: 1.5px dashed var(--ambar); background: var(--ambar-soft); }
.muestra.cerrada { background: var(--accent); }

/* Secciones */
.seccion { padding: 96px 0; border-top: 1px solid var(--line); }
.seccion-titulo { display: flex; flex-direction: column; gap: 16px; max-width: 44em; margin-bottom: 52px; }
.seccion-titulo h2 { font-size: var(--t4); font-weight: 800; letter-spacing: -0.02em; }
.seccion-titulo p { color: var(--muted); font-size: 19px; max-width: 38em; }

/* Grietas comunes: el mismo bloque punteado del muro, con el nombre de la revisión */
.comunes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; list-style: none; padding: 0; }
.comunes li { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
/* Íconos de Material Symbols (Google, Apache 2.0; ver licencias/material-symbols.txt), incrustados
   en la página, dentro de un bloque hundido: el mismo hueco del muro. */
.icono { margin-bottom: 16px; }
.comunes h3 { font-size: var(--t2); font-weight: 700; }
.comunes p { color: var(--muted); }

/* Pilares: el verbo es el elemento visual */
.pilares { list-style: none; padding: 0; }
.pilar { display: grid; grid-template-columns: minmax(220px, 0.8fr) 1.2fr; gap: 16px 48px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--line); }
.pilar:last-child { border-bottom: 1px solid var(--line); }
.pilar h3 { font-size: clamp(40px, 5.6vw, 68px); font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.pilar p { color: var(--muted); max-width: 40em; }

/* Diagnóstico */
.diagnostico { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.pasos { list-style: none; padding: 0; counter-reset: paso; }
.paso { counter-increment: paso; display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; border-top: 1px solid var(--line); }
.paso:first-child { border-top: 0; padding-top: 0; }
.paso::before { content: counter(paso); font-family: var(--font-mono); font-weight: 600; font-size: var(--t2); line-height: 1.3; color: var(--accent); }
.paso h3 { font-size: var(--t2); font-weight: 700; margin-bottom: 6px; }
.paso p { color: var(--muted); }

/* Capturas de los reportes de referencia (empresa ficticia, scripts/Sitio-Imagenes.ps1), dentro
   de una laptop y una tableta genéricas dibujadas con CSS: sin logotipos ni la forma de un modelo
   de marca. */
.captura { display: flex; flex-direction: column; gap: 18px; }
.captura img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.captura figcaption { font-size: var(--t0); color: var(--muted); }
.laptop-pantalla { aspect-ratio: 16 / 10.5; overflow: hidden; background: var(--piedra); border: 12px solid #1E1C1A; border-bottom-width: 16px; border-radius: 14px 14px 0 0; }
.laptop-base { position: relative; height: 14px; margin: 0 -7%; border-radius: 0 0 12px 12px; background: linear-gradient(180deg, #D9D3C9 0%, #BDB5A9 100%); box-shadow: 0 18px 30px -16px rgba(30, 28, 26, 0.45); }
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 5px; margin-left: -8%; border-radius: 0 0 6px 6px; background: #A9A094; }
.tableta { aspect-ratio: 4 / 3; overflow: hidden; background: var(--piedra); border: 16px solid #1E1C1A; border-radius: 26px; box-shadow: 0 40px 80px -36px rgba(8, 16, 60, 0.7); }

/* Antes y después: la única banda de color. El cobalto es, en la marca, la grieta cerrada. */
.banda-cobalto { background: var(--cobalto); color: #FFFFFF; padding: 112px 0; }
.banda-cobalto .contenedor { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center; }
.banda-cobalto h2 { font-size: var(--t4); font-weight: 800; letter-spacing: -0.02em; }
.banda-texto p { color: var(--cobalto-muted); font-size: 19px; margin-top: 20px; max-width: 30em; }

.recibes { margin-top: 88px; display: grid; grid-template-columns: minmax(220px, 0.8fr) 3.2fr; gap: 24px 48px; padding-top: 32px; border-top: 1px solid var(--line); }
.recibes h3 { font-size: var(--t3); font-weight: 800; letter-spacing: -0.01em; }
.recibes dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 48px; }
/* El ícono va dentro del <dt> (un <div> de <dl> solo admite dt y dd) y se coloca a la izquierda */
.recibes dl > div { position: relative; padding-left: 68px; min-height: 48px; }
.recibes-icono { position: absolute; left: 0; top: 0; }
.recibes dd { color: var(--muted); margin-top: 4px; }

/* Confianza */
.confianza { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 72px; list-style: none; padding: 0; }
.confianza li { display: grid; grid-template-columns: 48px 1fr; column-gap: 20px; align-content: start; padding: 28px 0; border-top: 1px solid var(--line); }
.confianza li > :not(.confianza-icono) { grid-column: 2; }
/* Íconos de Material Symbols, en el mismo círculo que los de las historias (aquí sobre fondo claro) */
.confianza-icono { grid-row: 1 / span 2; }
.icono, .confianza-icono, .recibes-icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--surface); color: var(--accent); }
.icono svg, .confianza-icono svg, .recibes-icono svg { width: 26px; height: 26px; fill: currentColor; }
.confianza h3 { font-size: var(--t2); font-weight: 700; margin-bottom: 6px; }
.confianza p { color: var(--muted); }

/* Para quién: una historia corta y los sectores con lo que tienen en juego */
/* Carrusel de historias, solo con CSS: tarjetas que se deslizan con imán (scroll-snap) y dejan
   asomar la siguiente. Donde el navegador lo soporta, ::scroll-button y ::scroll-marker agregan
   flechas y puntos; si no, la pista "Desliza para ver más historias" lo explica. */
.historias { display: grid; grid-auto-flow: column; grid-auto-columns: min(80%, 600px); gap: 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding: 4px 0 8px; margin-bottom: 12px; }
.historias::-webkit-scrollbar { display: none; }
.historias:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; }
.historias-titulo { font-size: var(--t3); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; max-width: 22em; margin: 0 0 24px; }
.historia { scroll-snap-align: start; padding: 30px 32px; border-radius: 6px; background: var(--surface); }
/* El ícono dice qué revisa Murox en esa historia; el relato va en cursiva y el cierre, derecho */
.historia-icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--bg); color: var(--accent); margin-bottom: 18px; }
.historia-icono svg { width: 26px; height: 26px; fill: currentColor; }
.historia p { font-size: 19px; line-height: 1.5; color: var(--muted); }
.historia .historia-entrada { font-family: var(--font-head); font-size: var(--t3); font-weight: 800; line-height: 1.15; color: var(--ink); margin-bottom: 10px; }
.historia .historia-relato { font-style: italic; }
.historias-pista { font-size: var(--t0); color: var(--muted); margin-bottom: 56px; }

@supports selector(::scroll-marker) {
  /* Puntos a la izquierda y flechas a la derecha, en la misma fila debajo de las tarjetas. Los
     botones y los puntos se generan como hermanos del carrusel, así que se acomodan con la
     cuadrícula de .carrusel (posicionarlos con anchor() rompía el clic en Chromium) */
  .carrusel { display: grid; grid-template-columns: 1fr auto auto; column-gap: 10px; row-gap: 14px; align-items: center; }
  .historias { grid-column: 1 / -1; scroll-marker-group: after; margin-bottom: 0; }
  .historias::scroll-marker-group { grid-row: 2; grid-column: 1; display: flex; align-items: center; gap: 10px; }
  .historias::scroll-button(left) { grid-row: 2; grid-column: 2; }
  .historias::scroll-button(right) { grid-row: 2; grid-column: 3; }
  .historia::scroll-marker { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--line); }
  .historia::scroll-marker:target-current { background: var(--accent); }
  /* Flechas: íconos arrow_back y arrow_forward de Material Symbols, como archivo (la CSP no
     permite data:) y uno por tema, porque una imagen de fondo no hereda el color del texto */
  .historias::scroll-button(*) { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--bg) center / 24px 24px no-repeat; cursor: pointer; transition: border-color 0.15s; }
  .historias::scroll-button(*):hover { border-color: var(--ink); }
  .historias::scroll-button(*):disabled { opacity: 0.35; cursor: default; border-color: var(--line); }
  .historias::scroll-button(*):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
  .historias::scroll-button(left) { content: "" / "Historia anterior"; background-image: url("iconos/flecha-anterior.svg"); }
  .historias::scroll-button(right) { content: "" / "Historia siguiente"; background-image: url("iconos/flecha-siguiente.svg"); }
  @media (prefers-color-scheme: dark) {
    .historias::scroll-button(left) { background-image: url("iconos/flecha-anterior-oscuro.svg"); }
    .historias::scroll-button(right) { background-image: url("iconos/flecha-siguiente-oscuro.svg"); }
  }
  .historias-pista { display: none; }
  .sectores { margin-top: 56px; }
}
.sectores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.sectores > div { padding: 22px 0; border-top: 1px solid var(--line); }
.sectores dt { font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.25; }
.sectores dd { margin-top: 6px; color: var(--muted); font-size: var(--t0); }

/* Contacto */
.contacto { background: var(--banda); color: var(--banda-ink); padding: 112px 0; }
.contacto .contenedor { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 64px; }
/* El símbolo de la marca cierra la página, igual que brand/logo-oscuro.svg: muro en el tono del texto y bloque en el cobalto del correo */
.contacto-muro { display: block; width: clamp(180px, 20vw, 260px); height: auto; margin-right: 4%; }
.contacto-muro .muro-logo { fill: var(--banda-ink); }
.contacto-muro .bloque-logo { fill: var(--banda-accent); }
.contacto h2 { font-size: var(--t5); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; max-width: 12em; }
.contacto p { color: var(--banda-muted); font-size: 19px; margin-top: 24px; max-width: 34em; }
.correo { display: inline-block; margin-top: 40px; font-family: var(--font-head); font-weight: 800; font-size: clamp(26px, 3.6vw, 40px); letter-spacing: -0.02em; color: var(--banda-accent); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.correo:hover { color: var(--banda-ink); }

/* Pie */
.pie { padding: 32px 0 40px; font-size: 14px; color: var(--muted); }
.pie .contenedor { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
.pie .lema { font-family: var(--font-head); font-weight: 700; color: var(--ink); }

/* Página 404 */
.perdido { min-height: 70vh; display: flex; align-items: center; }
.perdido h1 { font-size: clamp(36px, 6vw, 60px); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 18px; }
.perdido p { color: var(--muted); font-size: 19px; margin-bottom: 32px; max-width: 36em; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fila > .l, .hueco > .cerrada, .marcador-cifra, .marcador-barra span { animation: none !important; }
}

@media (max-width: 960px) {
  .menu { display: none; }
  .portada .contenedor, .diagnostico, .banda-cobalto .contenedor { grid-template-columns: 1fr; gap: 56px; }
  .sectores { grid-template-columns: repeat(2, 1fr); }
  .captura { max-width: 560px; }
  .comunes { grid-template-columns: 1fr; gap: 40px; }
  .pilar, .recibes { grid-template-columns: 1fr; }
  .confianza { grid-template-columns: 1fr; }
  .contacto .contenedor { grid-template-columns: 1fr; }
  .contacto-muro { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .contenedor { padding: 0 16px; }
  .cabecera { padding: 20px 0; }
  .cabecera .contenedor { gap: 16px; }
  .logo svg { width: 118px; }
  .portada { padding: 16px 0 72px; }
  .entrada { font-size: 18px; }
  .acciones .boton { flex: 1 1 auto; text-align: center; }
  /* En teléfono los ladrillos son más chicos y la pared se desvanece más tarde: las grietas
     están en las primeras columnas para que se vean completas */
  .ventana::after { width: 16%; }
  .l { width: 118px; height: 58px; font-size: 13px; }
  .fila { margin-left: 63px; }
  .fila.corrida { margin-left: 0; }
  .l .que { width: 210px; }
  .seccion { padding: 72px 0; }
  .seccion-titulo { margin-bottom: 40px; }
  .seccion-titulo p, .contacto p { font-size: 17px; }
  .pilar { padding: 24px 0; }
  .sectores { grid-template-columns: 1fr; }
  .historias { grid-auto-columns: 88%; gap: 12px; }
  .historia { padding: 24px 22px; }
  .historia p { font-size: 18px; }
  .historia .historia-entrada { font-size: 24px; }
  .laptop-pantalla { border-width: 8px; border-bottom-width: 12px; }
  .laptop-base { margin: 0 -4%; height: 11px; }
  .tableta { border-width: 10px; border-radius: 18px; }

  .recibes { margin-top: 64px; }
  .recibes dl { grid-template-columns: 1fr; gap: 20px; }
  .contacto, .banda-cobalto { padding: 80px 0; }
  .banda-texto p { font-size: 17px; }
}

@media print {
  .cabecera .boton, .menu, .acciones, .saltar { display: none; }
  .contacto { background: none; color: var(--ink); }
  .correo { color: var(--ink); }
}