/* Tipografía Heebo servida desde el propio portal (sin conexión a Google Fonts). Licencia SIL OFL 1.1: fonts/Heebo-OFL.txt */
@font-face {
  font-family: 'Heebo';
  src: url('../../fonts/heebo-variable-latin.woff') format('woff');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Portal del Proyectista SEI® — estilos base
   Vocabulario visual: plano de estructura. Papel frío, grafito, gris hormigón,
   ejes en rojo de plano (trazo y punto) y azul de plano para lo interactivo. */

:root {
  --papel: #f5f6f4;
  --superficie: #ffffff;
  --grafito: #111b3f;
  --grafito-suave: #4a5358;
  --hormigon: #d6d9d7;
  --hormigon-oscuro: #9aa1a4;
  --linea: #c3c8c6;
  --eje: #d92925;
  --logo-rojo: #d92925;
  --logo-azul: #004cbc;
  --azul: #004cbc;
  --azul-hover: #003a90;
  --ok: #2b6b4a;
  --no: #b3261e;
  --consultar: #8f5600;
  --singular: #8f5600;
  --singular-fondo: #fdf1dc;
  --foco: #004cbc;

  --s-placa: #e4e7e5;
  --s-placa-int: #d2d7d4;
  --s-viga: #8e979b;
  --s-brochal: #6d7a80;
  --s-hueco: #ffffff;
  --s-bandeja: #004cbc;

  --fuente: 'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ancho-texto: 66ch;
  --ancho-pagina: 1160px;
  --radio: 4px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --papel: #15191b;
    --superficie: #1d2225;
    --grafito: #e8eceb;
    --grafito-suave: #aab3b6;
    --hormigon: #3a4246;
    --hormigon-oscuro: #6c777b;
    --linea: #3b4447;
    --eje: #e0675b;
    --logo-rojo: #ef4b45;
    --logo-azul: #6f9cf0;
    --azul: #79aee0;
    --azul-hover: #a5c9ec;
    --ok: #6fc59a;
    --no: #f08b83;
    --consultar: #e3b15f;
    --singular: #e3b15f;
    --singular-fondo: #3a2e18;
    --foco: #79aee0;
    --s-placa: #2c3336;
    --s-placa-int: #384144;
    --s-viga: #6c777b;
    --s-brochal: #8a979c;
    --s-hueco: #15191b;
    --s-bandeja: #79aee0;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --papel: #15191b;
    --superficie: #1d2225;
    --grafito: #e8eceb;
    --grafito-suave: #aab3b6;
    --hormigon: #3a4246;
    --hormigon-oscuro: #6c777b;
    --linea: #3b4447;
    --eje: #e0675b;
    --logo-rojo: #ef4b45;
    --logo-azul: #6f9cf0;
    --azul: #79aee0;
    --azul-hover: #a5c9ec;
    --ok: #6fc59a;
    --no: #f08b83;
    --consultar: #e3b15f;
    --singular: #e3b15f;
    --singular-fondo: #3a2e18;
    --foco: #79aee0;
    --s-placa: #2c3336;
    --s-placa-int: #384144;
    --s-viga: #6c777b;
    --s-brochal: #8a979c;
    --s-hueco: #15191b;
    --s-bandeja: #79aee0;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papel);
  color: var(--grafito);
  font-family: var(--fuente);
  font-size: 1.0625rem;
  line-height: 1.55;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--azul); text-underline-offset: 0.18em; }
a:hover { color: var(--azul-hover); }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 2px; }

.saltar { position: absolute; left: -999px; top: 0; background: var(--superficie); padding: .5rem 1rem; z-index: 10; }
.saltar:focus { left: 1rem; }

h1, h2, h3 {
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.4rem); }
h2 { font-size: clamp(1.45rem, 1.2rem + 1vw, 1.9rem); margin-top: 2.4em; }
h3 { font-size: 1.2rem; margin-top: 1.8em; }
p, ul, ol { margin: 0 0 1em; max-width: var(--ancho-texto); }
li + li { margin-top: .35em; }

/* Cabecera */
.cabecera { background: var(--superficie); border-bottom: 1px solid var(--linea); }
.cabecera__dentro {
  max-width: var(--ancho-pagina); margin: 0 auto; padding: .9rem 1rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; justify-content: space-between;
}
.marca { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--grafito); }
.logo { height: 1.9rem; width: auto; display: block; }
.logo__se { fill: var(--logo-rojo); }
.logo__i { fill: var(--logo-azul); }
.marca__portal { font-size: 1rem; color: var(--grafito-suave); padding-left: .7rem; border-left: 1px solid var(--linea); line-height: 1.6rem; }
.nav { display: flex; flex-wrap: wrap; gap: .25rem 1.4rem; font-size: .98rem; }
.nav a { color: var(--grafito); text-decoration: none; padding: .3rem 0; border-bottom: 2px solid transparent; }
.nav a:hover { border-bottom-color: var(--hormigon-oscuro); }
.nav a[aria-current="page"] { border-bottom-color: var(--eje); }

/* Contenido */
main { display: block; }
.pagina { max-width: var(--ancho-pagina); margin: 0 auto; padding: 2.5rem 1rem 4rem; }
.migas { font-size: .92rem; color: var(--grafito-suave); margin-bottom: 1.5rem; }
.migas a { color: var(--grafito-suave); }
.entradilla { font-size: 1.22rem; line-height: 1.45; max-width: 58ch; color: var(--grafito); }

/* Pie */
.pie { border-top: 1px solid var(--linea); background: var(--superficie); }
.pie__dentro { max-width: var(--ancho-pagina); margin: 0 auto; padding: 1.6rem 1rem; font-size: .92rem; color: var(--grafito-suave); }
.pie__dentro p { margin: .3rem 0; max-width: none; }

/* Ejes de plano: separador con burbuja, solo en las cabeceras de bloque de una ficha */
.eje {
  display: flex; align-items: center; gap: .8rem; margin: 3rem 0 1rem;
}
.eje::before {
  content: attr(data-eje);
  flex: none; width: 2rem; height: 2rem; border: 1.5px solid var(--eje); border-radius: 50%;
  display: grid; place-items: center; color: var(--eje); font-weight: 600; font-size: .95rem;
}
.eje::after {
  content: ''; flex: 1 0 1.5rem; height: 0; border-top: 1.5px dashed var(--eje);
  border-image: repeating-linear-gradient(90deg, var(--eje) 0 18px, transparent 18px 24px, var(--eje) 24px 27px, transparent 27px 33px) 1;
}
.eje h2 { margin: 0; flex: 0 1 auto; min-width: 0; text-wrap: balance; }

/* Ficha */
.ficha-cabecera { display: grid; gap: 1.5rem; margin-bottom: 1.5rem; }
.regla {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.8rem); line-height: 1.3; font-weight: 400; max-width: 34ch; margin: 0;
}
.etiquetas { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.etiqueta {
  display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 550;
  padding: .2rem .6rem; border-radius: 999px; border: 1px solid var(--linea); color: var(--grafito-suave); background: var(--superficie);
}
.etiqueta--singular { border-color: var(--singular); color: var(--singular); background: var(--singular-fondo); }
li.etiqueta + li.etiqueta { margin-top: 0; }

.valores { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0; margin: 2rem 0; border: 1px solid var(--linea); background: var(--superficie); border-radius: var(--radio); }
.valor { padding: 1.1rem 1.2rem; border-right: 1px solid var(--linea); }
.valor:last-child { border-right: 0; }
.valor__rango { font-size: 1.6rem; font-weight: 500; display: block; line-height: 1.1; }
.valor__que { display: block; margin-top: .35rem; color: var(--grafito-suave); font-size: .97rem; }
@media (max-width: 640px) {
  .valor { border-right: 0; border-bottom: 1px solid var(--linea); }
  .valor:last-child { border-bottom: 0; }
}

/* Herramienta integrada */
.herramienta { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: 1.25rem; margin: 1rem 0 2rem; }
.herramienta__rejilla { display: grid; gap: 1.5rem; grid-template-columns: minmax(16rem, 22rem) 1fr; align-items: start; }
@media (max-width: 820px) { .herramienta__rejilla { grid-template-columns: 1fr; } }
.campo { display: grid; gap: .35rem; margin-bottom: 1rem; }
.campo label, .campo legend { font-weight: 550; font-size: .97rem; }
.campo .ayuda { font-size: .88rem; color: var(--grafito-suave); margin: 0; }
.entrada-unidad { display: flex; align-items: stretch; max-width: 12rem; }
.entrada-unidad input {
  width: 100%; font: inherit; padding: .5rem .6rem; border: 1px solid var(--hormigon-oscuro); border-right: 0;
  border-radius: var(--radio) 0 0 var(--radio); background: var(--papel); color: var(--grafito);
}
.entrada-unidad span { padding: .5rem .6rem; border: 1px solid var(--hormigon-oscuro); border-radius: 0 var(--radio) var(--radio) 0; color: var(--grafito-suave); background: var(--superficie); }
input[type="range"] { width: 100%; accent-color: var(--azul); }
fieldset { border: 0; padding: 0; margin: 0 0 1rem; }
.opciones { display: grid; gap: .4rem; }
.opciones label { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }
select { font: inherit; padding: .45rem .5rem; border: 1px solid var(--hormigon-oscuro); border-radius: var(--radio); background: var(--papel); color: var(--grafito); max-width: 16rem; }

.resultado { border-left: 4px solid var(--hormigon-oscuro); padding: .8rem 1rem; background: var(--papel); border-radius: 0 var(--radio) var(--radio) 0; }
.resultado[data-estado="viable"], .resultado[data-estado="admisible"] { border-left-color: var(--ok); }
.resultado[data-estado="no-viable"], .resultado[data-estado="no-admisible"] { border-left-color: var(--no); }
.resultado[data-estado="consultar"] { border-left-color: var(--consultar); }
.resultado__titulo { font-weight: 650; font-size: 1.15rem; margin: 0 0 .25rem; }
.resultado[data-estado="viable"] .resultado__titulo, .resultado[data-estado="admisible"] .resultado__titulo { color: var(--ok); }
.resultado[data-estado="no-viable"] .resultado__titulo, .resultado[data-estado="no-admisible"] .resultado__titulo { color: var(--no); }
.resultado[data-estado="consultar"] .resultado__titulo { color: var(--consultar); }
.resultado p { margin: 0 0 .4rem; }
.resultado ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.aviso { font-size: .88rem; color: var(--grafito-suave); margin-top: .8rem; }

/* Escala de tramos (huecos) */
.tramos { display: grid; grid-template-columns: 6fr 6fr 5fr; margin: .5rem 0 .3rem; font-size: .85rem; }
.tramos span { padding: .3rem .5rem; border-top: 6px solid var(--hormigon); color: var(--grafito-suave); }
.tramos span[data-activo="true"] { border-top-color: var(--azul); color: var(--grafito); font-weight: 600; }

/* Planos SVG generados */
figure { margin: 0; }
.plano-marco { background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); padding: .75rem; }
.plano-marco figcaption { font-size: .88rem; color: var(--grafito-suave); margin-top: .5rem; }
.plano { width: 100%; }
.plano .s-placa { fill: var(--s-placa); stroke: var(--hormigon-oscuro); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-placa--interrumpida { fill: var(--s-placa-int); }
.plano .s-viga { fill: var(--s-viga); }
.plano .s-brochal { fill: var(--s-brochal); }
.plano .s-hueco { fill: var(--s-hueco); stroke: var(--grafito); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plano .s-hueco-real { fill: none; stroke: var(--grafito); stroke-width: 1; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.plano .s-bandeja { fill: var(--s-bandeja); }
.plano .s-aspa line { stroke: var(--grafito-suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-cota line { stroke: var(--grafito-suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-cota text, .plano .s-txt { fill: var(--grafito); font-family: var(--fuente); }
.plano .s-txt--fuerte { font-weight: 600; }
.plano .s-txt--viga { fill: #fff; font-weight: 550; }
.plano .s-dir line, .plano .s-dir path { stroke: var(--grafito-suave); stroke-width: 1.25; fill: none; vector-effect: non-scaling-stroke; }

/* Listado de fichas */
.fichas { list-style: none; padding: 0; margin: 2rem 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 0; border-top: 1px solid var(--linea); max-width: none; }
.fichas li { margin: 0; border-bottom: 1px solid var(--linea); }
.fichas a, .fichas .pendiente { display: grid; grid-template-columns: 2.4rem 1fr; gap: .2rem .8rem; padding: 1rem .25rem; text-decoration: none; color: var(--grafito); }
.fichas a:hover .fichas__nombre { color: var(--azul); text-decoration: underline; }
.fichas__paso { grid-row: span 2; width: 2rem; height: 2rem; border: 1.5px solid var(--eje); color: var(--eje); border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: .92rem; }
.fichas__nombre { font-weight: 600; }
.fichas__desc { font-size: .93rem; color: var(--grafito-suave); }
.fichas .pendiente { opacity: .6; }
.fichas__grupo { font-size: .85rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--grafito-suave); margin: 2.2rem 0 0; }
.fichas__grupo + .fichas { margin-top: .6rem; }

/* Portada */
.portada { max-width: var(--ancho-pagina); margin: 0 auto; padding: 3rem 1rem 2rem; display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .portada { grid-template-columns: 5fr 6fr; align-items: center; } }
.boton {
  display: inline-block; background: var(--azul); color: #fff; text-decoration: none; font-weight: 600;
  padding: .7rem 1.2rem; border-radius: var(--radio);
}
.boton:hover { background: var(--azul-hover); color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton, :root:not([data-theme="light"]) .boton:hover { color: #0f1a24; } }
:root[data-theme="dark"] .boton, :root[data-theme="dark"] .boton:hover { color: #0f1a24; }

.tabla-envoltura { overflow-x: auto; }
table { border-collapse: collapse; font-size: .95rem; background: var(--superficie); }
th, td { border: 1px solid var(--linea); padding: .4rem .55rem; text-align: center; }
th { font-weight: 600; background: var(--papel); }
td.si { color: var(--ok); }
td.no { color: var(--no); background: color-mix(in srgb, var(--no) 7%, transparent); }
td.actual { outline: 3px solid var(--azul); outline-offset: -3px; font-weight: 700; }

@media (prefers-reduced-motion: no-preference) {
  .plano-vivo { transition: opacity .15s ease; }
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* El plano avisa cuando el hueco no es admisible */
.plano-marco { position: relative; }
.plano-marco[data-estado="no-admisible"] { border: 2px solid var(--no); }
.plano-marco[data-estado="no-admisible"]::before {
  content: 'No admisible'; position: absolute; top: .75rem; left: .75rem; z-index: 1;
  background: var(--no); color: var(--superficie); font-weight: 600; font-size: .9rem;
  padding: .2rem .6rem; border-radius: var(--radio);
}
.plano-marco[data-estado="no-admisible"] .plano { opacity: .45; }
.herramienta__entradas .resultado { margin-top: .5rem; }

/* Elementos de los esquemas a escala */
.plano .s-junta { stroke: var(--hormigon-oscuro); stroke-width: .75; vector-effect: non-scaling-stroke; }
.plano .s-pilar { fill: var(--grafito); }
.plano .s-contorno { fill: none; stroke: var(--grafito); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plano .s-eje line { stroke: var(--eje); stroke-width: 1; stroke-dasharray: 14 4 2 4; vector-effect: non-scaling-stroke; }
.plano .s-eje circle { fill: var(--superficie); stroke: var(--eje); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
.plano .s-eje text { fill: var(--eje); font-family: var(--fuente); font-weight: 600; }
.plano .s-fachada { stroke: var(--grafito); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.plano .s-viga--giro { fill: var(--s-brochal); }
.plano .s-alerta { fill: none; stroke: var(--no); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.plano .s-viga--fuera { fill: var(--no); fill-opacity: .55; }
.plano .s-limite { stroke: var(--consultar); stroke-width: 1.25; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plano .s-txt--limite { fill: var(--consultar); font-weight: 600; }
.plano .s-suelo { stroke: var(--grafito-suave); stroke-width: 1; vector-effect: non-scaling-stroke; }
.esquemas-pareja { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 1rem 0 2rem; }
.esquemas-pareja figcaption strong.si { color: var(--ok); }
.esquemas-pareja figcaption strong.no { color: var(--no); }

[hidden] { display: none !important; }
.boton { border: 0; font: inherit; cursor: pointer; }
.boton--secundario { background: transparent; color: var(--azul); border: 1px solid var(--azul); }
.boton--secundario:hover { background: var(--papel); color: var(--azul-hover); }
.acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Checklist */
.checklist form { display: grid; gap: 0; }
.pregunta { display: grid; grid-template-columns: 1fr auto; gap: .5rem 1.5rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--linea); margin: 0; }
.pregunta:last-child { border-bottom: 0; }
.pregunta legend { float: left; padding: 0; font-weight: 500; display: flex; gap: .7rem; align-items: baseline; max-width: 60ch; }
.pregunta__n { flex: none; width: 1.7rem; height: 1.7rem; border: 1.5px solid var(--eje); color: var(--eje); border-radius: 50%; display: inline-grid; place-items: center; font-size: .85rem; font-weight: 600; }
.pregunta__opciones { display: flex; gap: .4rem; grid-row: span 2; }
.pregunta__opciones label { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .7rem; border: 1px solid var(--hormigon-oscuro); border-radius: 999px; cursor: pointer; font-size: .95rem; }
.pregunta__opciones label:has(input:checked) { background: var(--azul); border-color: var(--azul); color: var(--superficie); }
.pregunta__opciones input { accent-color: var(--azul); }
.pregunta__ficha { font-size: .88rem; margin-left: 2.4rem; }
@media (max-width: 720px) { .pregunta { grid-template-columns: 1fr; } .pregunta__opciones { grid-row: auto; margin-left: 2.4rem; flex-wrap: wrap; } }
.resumen__progreso { color: var(--grafito-suave); }
.resumen__bloques { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.resumen__bloque { background: var(--superficie); border: 1px solid var(--linea); border-top: 4px solid var(--hormigon-oscuro); border-radius: var(--radio); padding: .9rem 1rem; }
.resumen__bloque[data-tipo="revisar"] { border-top-color: var(--no); }
.resumen__bloque[data-tipo="singular"] { border-top-color: var(--singular); }
.resumen__bloque[data-tipo="consultar"] { border-top-color: var(--azul); }
.resumen__bloque h3 { margin: 0 0 .5rem; display: flex; justify-content: space-between; }
.resumen__bloque ul { padding-left: 1.1rem; margin: 0; font-size: .95rem; }

@media print {
  .cabecera, .pie, .acciones, .migas, .pregunta__ficha { display: none; }
  body { background: #fff; color: #000; }
  .herramienta, .resumen__bloque { border-color: #999; }
}

/* Componentes */
.indice { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: 1.5rem 0 1rem; font-size: .97rem; }
.componente { display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; padding: 2rem 0; border-top: 1px solid var(--linea); }
.componente img { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.componente h2 { margin-top: 0; }
@media (max-width: 760px) { .componente { grid-template-columns: 1fr; } }
.tabla-texto th, .tabla-texto td { text-align: left; vertical-align: top; }
.tabla-texto { max-width: 52rem; }

/* Secuencia de montaje */
.montaje { list-style: none; padding: 0; margin: 2rem 0; max-width: none; display: grid; gap: 2.5rem; counter-reset: paso; }
.paso { display: grid; gap: 1.25rem 2rem; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; counter-increment: paso; margin: 0; }
.paso figure img { border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); }
.paso h2 { margin-top: 0; display: flex; gap: .8rem; align-items: center; }
.paso h2::before { content: attr(data-n); flex: none; width: 2.2rem; height: 2.2rem; border: 1.5px solid var(--eje); color: var(--eje); border-radius: 50%; display: grid; place-items: center; font-size: 1rem; font-weight: 600; }
@media (max-width: 760px) { .paso { grid-template-columns: 1fr; } }
.montaje--visor { margin: 1rem 0; min-height: 22rem; }
.montaje__puntos { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 1.5rem 0 0; max-width: none; }
.montaje__puntos li { margin: 0; }
.montaje__puntos button { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--hormigon-oscuro); background: var(--superficie); color: var(--grafito); font: inherit; font-weight: 600; cursor: pointer; }
.montaje__puntos button[aria-current="step"] { border-color: var(--eje); background: var(--eje); color: var(--superficie); }
.montaje__barra { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.montaje__contador { color: var(--grafito-suave); }
.boton:disabled { opacity: .4; cursor: default; }

/* Comparador arquitectura / estructura */
.comparador { margin: 1.5rem 0 2rem; }
.comparador__marco { position: relative; overflow-x: auto; background: #fff; border: 1px solid var(--linea); border-radius: var(--radio); }
.comparador__marco img { width: 100%; display: block; }
.comparador__lienzo { position: relative; min-width: 720px; cursor: ew-resize; }
.comparador__linea { position: absolute; top: 0; bottom: 0; left: 50%; width: 32px; margin-left: -16px; cursor: ew-resize; touch-action: none; }
.comparador__linea::before { content: ''; position: absolute; top: 0; bottom: 0; left: 15px; width: 2px; background: var(--eje); }
.comparador__tirador { position: absolute; top: 50%; left: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%; background: var(--eje); box-shadow: 0 1px 4px rgb(0 0 0 / .3); }
.comparador__tirador::before, .comparador__tirador::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.comparador__tirador::before { left: 3px; border-right-color: #fff; }
.comparador__tirador::after { right: 3px; border-left-color: #fff; }
.comparador__etiqueta { position: absolute; top: .6rem; padding: .2rem .6rem; font-size: .8rem; font-weight: 500; border-radius: 999px; background: rgb(17 27 63 / .85); color: #fff; pointer-events: none; }
.comparador__etiqueta--izq { left: .6rem; }
.comparador__etiqueta--der { right: .6rem; }
.comparador--destacado .comparador__marco { box-shadow: 0 6px 24px rgb(17 27 63 / .12); }
.claves__titulo { margin-top: 1.5rem; }
.claves { list-style: none; padding: 0; margin: 1rem 0 2.5rem; max-width: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; counter-reset: clave; }
.claves li { counter-increment: clave; position: relative; margin: 0; max-width: none; padding: 3rem 1rem 1rem; border: 1px solid var(--linea); border-radius: var(--radio); background: var(--superficie); font-size: .95rem; }
.claves li::before { content: counter(clave); position: absolute; left: 1rem; top: 1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid var(--eje); color: var(--eje); font-weight: 500; font-size: .85rem; display: grid; place-items: center; }
.claves li a { display: block; margin-top: .4rem; font-size: .9rem; }
.comparador__arriba { position: absolute; inset: 0; height: 100%; object-fit: contain; background: #fff; }
.comparador__control { display: flex; align-items: center; gap: .8rem; margin-top: .8rem; font-size: .95rem; color: var(--grafito-suave); max-width: 40rem; }
.comparador__control input { flex: 1; }
.comparador figcaption { font-size: .88rem; color: var(--grafito-suave); margin-top: .4rem; }

/* Marca registrada: discreta, como superíndice */
sup.r { font-size: .42em; vertical-align: super; line-height: 0; font-weight: 400; margin-left: .05em; }

/* Voladizos y cambios de nivel */
.plano .s-vuelo { fill: var(--azul); fill-opacity: .14; stroke: var(--azul); stroke-width: 1.25; stroke-dasharray: 6 3; vector-effect: non-scaling-stroke; }
.plano .s-vuelo--fuera { fill: var(--no); fill-opacity: .25; stroke: var(--no); }
.plano .s-balcon { fill: var(--azul); fill-opacity: .2; stroke: var(--azul); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.plano .s-union { fill: var(--azul); }
.plano .s-balcon.s-vuelo--fuera { fill: var(--no); fill-opacity: .25; stroke: var(--no); }
.plano .s-placa-sec { fill: var(--s-placa); stroke: var(--hormigon-oscuro); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-capa { fill: var(--hormigon); stroke: var(--hormigon-oscuro); stroke-width: .75; vector-effect: non-scaling-stroke; }
.plano .s-calce { fill: var(--consultar); }
.plano .s-murete { fill: var(--s-brochal); stroke: var(--grafito); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-pilar--enano { fill: var(--s-brochal); }
/* Escalera */
.plano .s-escalera { fill: var(--s-brochal); stroke: var(--grafito); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-escalera--vista { fill: none; stroke: var(--hormigon-oscuro); stroke-dasharray: 5 3; }
.plano .s-muro-sec { fill: var(--s-placa); stroke: var(--hormigon-oscuro); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-nervio { stroke: var(--grafito); stroke-width: 1; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plano .s-dintel { fill: var(--azul); fill-opacity: .55; stroke: var(--azul); stroke-width: 1; vector-effect: non-scaling-stroke; }
.plano .s-oculto { fill: none; stroke: var(--azul); stroke-width: 1; stroke-dasharray: 5 3; vector-effect: non-scaling-stroke; }
.campo__ayuda { font-size: .85rem; color: var(--grafito-suave); margin: .3rem 0 0; }
/* Subnavegación de sección y tarjetas de apartado */
.subnav { display: flex; gap: .25rem; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linea); margin: 0 0 2rem; }
.subnav a { white-space: nowrap; padding: .65rem 1rem; text-decoration: none; color: var(--grafito); border-bottom: 3px solid transparent; margin-bottom: -1px; font-weight: 500; }
.subnav a:hover { color: var(--azul); background: var(--superficie); }
.subnav a[aria-current="page"] { color: var(--azul); border-bottom-color: var(--eje); }
.apartados { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; margin: 2rem 0 2.5rem; }
.apartado { display: grid; grid-template-columns: 9rem 1fr; text-decoration: none; color: var(--grafito); background: var(--superficie); border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; transition: border-color .15s, box-shadow .15s, transform .15s; }
.apartado img { width: 100%; height: 100%; object-fit: cover; }
.apartado__texto { padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.apartado__titulo { font-size: 1.2rem; font-weight: 500; }
.apartado__desc { font-size: .93rem; color: var(--grafito-suave); flex: 1; }
.apartado__ir { color: var(--azul); font-weight: 500; }
.apartado:hover, .apartado:focus-visible { border-color: var(--azul); box-shadow: 0 4px 16px rgb(17 27 63 / .12); }
.apartado:hover .apartado__ir { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { .apartado:hover { transform: translateY(-2px); } }
@media (max-width: 30rem) { .apartado { grid-template-columns: 6.5rem 1fr; } }
.siguiente { margin-top: 3rem; padding-top: 1.2rem; border-top: 1px solid var(--linea); font-weight: 500; }