/* =============================================================================
   TESTIGO · oglcn.com — assets/css/main.css
   Sistema visual de producción. Deriva del prototipo B (laboratorio doméstico).

   Sin frameworks. Sin gradientes decorativos. Sin sombras. Radios 0–3 px.
   La jerarquía se construye con escala, espacio, filetes, fotografía y tipografía.

   ÍNDICE
     1. Variables            9. Recorridos (guías)
     2. Base               10. Protocolo
     3. Utilidades         11. Calculadora
     4. Cabecera           12. Publicidad
     5. Pie                13. Artículo
     6. Hero               14. Categoría
     7. Fotografía         15. Accesibilidad
     8. Selector           16. Borradores legales
                           17. Impresión
   ========================================================================== */

/* --- 1. VARIABLES --------------------------------------------------------- */
:root{
  color-scheme: light dark;

  --fondo:#FBFAF8;
  --fondo-2:#F3F1ED;
  --panel:#FFFFFF;
  --grafito:#1C1F24;
  --grafito-2:#585E66;
  /* 4,6:1 sobre --fondo y --fondo-2. El anterior (#7C828A) se quedaba en 3,6:1
     y dejaba por debajo del minimo los creditos de foto y las etiquetas. */
  --grafito-3:#676D75;
  --borde:#DDD9D2;
  --borde-2:#EBE8E2;
  /* Borde de elementos interactivos. Separado de --borde porque el limite de
     un control es su unica pista visual y necesita 3:1, que --borde no da. */
  --borde-control:#8E8880;
  --cobalto:#2547D0;
  --cobalto-2:#1B36A8;
  --cobalto-sd:#EAEDFB;
  --naranja:#B94A0B;
  --naranja-sd:#FAEDE2;
  --verde:#2C6A43;
  /* Rojo de marca: sólo en el logotipo. No se usa como color funcional. */
  --marca-rojo:#C42B1C;
  --sobre-cobalto:#FFFFFF;   /* texto legible sobre el azul cobalto */

  /* Retícula técnica: sólo en zonas concretas, nunca en toda la página. */
  --reja:rgba(28,31,36,.020);

  --serif:"Literata",Georgia,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,"Courier New",monospace;

  --ancho:1240px;
  --lectura:70ch;   /* columna de lectura objetivo: 680–780 px */
  --gutter:clamp(18px,3vw,34px);
  --r:3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-tema="claro"]){
    --fondo:#14161A;
    --fondo-2:#1B1E23;
    --panel:#1A1D22;
    --grafito:#ECEAE5;
    --grafito-2:#A0A5AC;
    --grafito-3:#868C94;
    --borde:#32363D;
    --borde-2:#25282E;
    --borde-control:#646B76;
    --cobalto:#8FA6F7;
    --cobalto-2:#B0C0FA;
    --cobalto-sd:#1B2340;
    --naranja:#E79157;
    --naranja-sd:#33200F;
    --verde:#79B58E;
    --reja:rgba(236,234,229,.026);
    --sobre-cobalto:#12151A;
  }
}
:root[data-tema="oscuro"]{
  --fondo:#14161A;
  --fondo-2:#1B1E23;
  --panel:#1A1D22;
  --grafito:#ECEAE5;
  --grafito-2:#A0A5AC;
  --grafito-3:#868C94;
  --borde:#32363D;
  --borde-2:#25282E;
  --borde-control:#646B76;
  --cobalto:#8FA6F7;
  --cobalto-2:#B0C0FA;
  --cobalto-sd:#1B2340;
  --naranja:#E79157;
  --naranja-sd:#33200F;
  --verde:#79B58E;
  --reja:rgba(236,234,229,.026);
  --sobre-cobalto:#12151A;
}

/* --- 2. BASE -------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

body{
  margin:0;background:var(--fondo);color:var(--grafito);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
@media (min-width:768px){body{font-size:17.5px}}
@media (min-width:1100px){body{font-size:18px}}

img,svg,video{max-width:100%}
img{height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--serif);font-weight:600;
  margin:0;line-height:1.18;letter-spacing:-.012em;text-wrap:balance;
}
h1{font-weight:700}
p{margin:0 0 1rem}
ul,ol{margin:0 0 1.15rem;padding-left:1.3rem}
li{margin-bottom:.42rem}
strong,b{font-weight:600}

a{color:var(--cobalto);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}

code,kbd{font-family:var(--mono);font-size:.88em;background:var(--fondo-2);padding:.06em .32em;border-radius:2px}

hr{border:0;border-top:1px solid var(--borde);margin:2.2rem 0}

/* --- 3. UTILIDADES -------------------------------------------------------- */
/* Un unico contenedor de ancho. .pie-in y .cab-in comparten esta regla en
   lugar de repetir sus tres declaraciones. */
.env,.pie-in,.cab-in{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}

/* Monoespaciada: SÓLO códigos, mediciones, fechas de revisión y etiquetas. */
.tec{
  font-family:var(--mono);font-size:12.5px;font-weight:500;
  letter-spacing:.05em;text-transform:uppercase;color:var(--grafito-2);
}
.tec--co{color:var(--cobalto)}
.tec--na{color:var(--naranja)}
.dato{font-family:var(--mono);font-size:13px;color:var(--grafito-2)}

.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.saltar{
  position:absolute;left:-9999px;top:0;z-index:120;
  background:var(--cobalto);color:var(--sobre-cobalto);padding:.7rem 1.1rem;
  font-size:15px;font-weight:600;border-radius:var(--r);
}
.saltar:focus{left:10px;top:10px}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* Retícula técnica de zona. Se aplica sólo donde se pide explícitamente. */
.reja{
  background-image:
    linear-gradient(var(--reja) 1px,transparent 1px),
    linear-gradient(90deg,var(--reja) 1px,transparent 1px);
  background-size:76px 76px,76px 76px;
}

.btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--cobalto);color:var(--sobre-cobalto);border:1px solid var(--cobalto);
  padding:11px 20px;font-size:15.5px;font-weight:600;border-radius:var(--r);
}
.btn:hover{background:var(--cobalto-2);border-color:var(--cobalto-2);color:var(--sobre-cobalto);text-decoration:none}
.btn--sec{background:transparent;color:var(--grafito);border-color:var(--borde-control)}
.btn--sec:hover{background:transparent;color:var(--cobalto);border-color:var(--cobalto)}

/* --- 4. CABECERA ---------------------------------------------------------- */
.cab{background:var(--fondo);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:60}
.cab-in{padding-block:11px;display:flex;align-items:center;gap:18px}
.marca{display:flex;align-items:center;gap:13px;color:var(--grafito)}
.marca:hover{text-decoration:none}
.marca svg{width:42px;height:40px;flex:none}
.marca-n{
  display:block;font-family:var(--serif);font-weight:700;font-size:30px;
  line-height:1;letter-spacing:.055em;
}
.marca-d{
  display:block;font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grafito-2);margin-top:6px;
}
@media (max-width:860px){.marca-d{display:none}.marca-n{font-size:27px}.marca svg{width:36px;height:34px}}

.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{font-size:15.5px;font-weight:500;color:var(--grafito-2);padding:8px 12px;border-radius:var(--r)}
.nav a:hover{color:var(--cobalto);background:var(--cobalto-sd);text-decoration:none}
.nav a[aria-current="page"]{color:var(--grafito);box-shadow:inset 0 -2px 0 var(--cobalto)}

/* Selector de tema: discreto, no protagonista. */
.tema{display:inline-flex;margin-left:10px;border:1px solid var(--borde-control);border-radius:var(--r);overflow:hidden}
.tema button{
  background:transparent;border:0;border-right:1px solid var(--borde-control);
  padding:6px 9px;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.04em;color:var(--grafito-2);
}
.tema button:last-child{border-right:0}
.tema button:hover{color:var(--cobalto)}
.tema button[aria-pressed="true"]{background:var(--fondo-2);color:var(--grafito)}

.menu-btn{
  display:none;margin-left:auto;background:transparent;border:1px solid var(--borde-control);
  padding:9px 14px;font-size:15px;font-weight:600;border-radius:var(--r);
}
@media (max-width:940px){
  .menu-btn{display:inline-block}
  .cab-in{flex-wrap:wrap}
  .nav{
    display:none;order:3;width:100%;margin-left:0;flex-direction:column;
    align-items:stretch;gap:0;border-top:1px solid var(--borde);margin-top:10px;padding-top:4px;
  }
  .nav.abierto{display:flex}
  .nav a{padding:13px 4px;font-size:17px;border-radius:0;border-bottom:1px solid var(--borde-2)}
  .tema{margin:12px 0 6px;align-self:flex-start}
}

/* --- 5. PIE --------------------------------------------------------------- */
.pie{border-top:1px solid var(--borde);background:var(--fondo-2);margin-top:clamp(40px,5vw,72px);padding:30px 0 34px}
.pie-lema{
  font-family:var(--serif);font-weight:600;font-size:clamp(17px,1rem + .5vw,21px);
  line-height:1.35;max-width:34ch;margin:0 0 22px;
}
.pie-cols{display:grid;gap:22px}
@media (min-width:700px){.pie-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pie-cols h2{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grafito-3);margin-bottom:10px}
.pie-cols ul{list-style:none;margin:0;padding:0;font-size:15px}
.pie-cols li{margin-bottom:5px}
.pie-cols a{color:var(--grafito-2)}
.pie-legal{
  margin:26px 0 0;padding-top:16px;border-top:1px solid var(--borde);
  font-size:13.5px;line-height:1.6;color:var(--grafito-2);max-width:88ch;
}

/* --- 6. HERO ASIMÉTRICO --------------------------------------------------- */
.hero{border-bottom:1px solid var(--borde);padding:clamp(28px,3.6vw,52px) 0 clamp(28px,3.4vw,48px)}
.hero-g{display:grid;gap:clamp(24px,3vw,40px);align-items:start}
@media (min-width:960px){.hero-g{grid-template-columns:54fr 46fr}}

.hero .ante{display:block;margin-bottom:14px}
.hero h1{
  font-size:clamp(36px,1.9rem + 2.5vw,58px);line-height:1.08;
  margin:0 0 18px;max-width:15ch;
}
.hero .sumario{
  font-size:clamp(17px,1rem + .3vw,19.5px);line-height:1.55;
  color:var(--grafito-2);max-width:52ch;margin:0 0 24px;
}
/* Fila de botones. La usan el hero y las calculadoras: una sola regla. */
.hero-acc,.acciones{display:flex;flex-wrap:wrap;gap:11px}
.hero-acc{margin-bottom:24px}
/* El lema es una anotacion editorial al pie del bloque de texto, no una tercera
   accion: filete fino, cuerpo menor y color secundario para que no compita con
   los dos botones. */
.hero .lema{
  font-family:var(--serif);font-size:15.5px;line-height:1.5;font-weight:600;
  color:var(--grafito-2);border-top:1px solid var(--borde);
  padding:13px 0 0;margin:0;max-width:46ch;
}
.hero .lema::before{
  content:"";display:inline-block;width:9px;height:2px;background:var(--naranja);
  vertical-align:.28em;margin-right:9px;
}

/* La fotografia del hero no es una tarjeta: sin marco, sin radio y con mas
   presencia vertical en escritorio. En movil va despues del mensaje y se
   comprime a una banda para no dejar hueco muerto antes del contenido. */
.hero .foto .marco{border:0;border-radius:0;background:var(--fondo-2);aspect-ratio:16/9}
@media (min-width:700px){.hero .foto .marco{aspect-ratio:3/2}}
@media (min-width:960px){
  .hero .foto{margin-top:6px}
  .hero .foto .marco{aspect-ratio:4/5}
}
.hero .foto figcaption{border-top:1px solid var(--borde-2);padding-top:8px;margin-top:8px}

/* --- 7. FOTOGRAFÍA -------------------------------------------------------- */
.foto{margin:0}
.foto .marco{
  position:relative;overflow:hidden;background:var(--fondo-2);
  border:1px solid var(--borde);border-radius:var(--r);
}
/* Punto focal doble: --foco en escritorio, --foco-m en pantallas estrechas.
   Los dos se declaran en el atributo style de cada <img> y salen del
   manifiesto config/imagenes.json. */
.foto img{width:100%;height:100%;object-fit:cover;object-position:var(--foco,50% 50%)}
@media (max-width:640px){.foto img{object-position:var(--foco-m,var(--foco,50% 50%))}}
.foto picture{display:contents}
.foto--43 .marco{aspect-ratio:4/3}
.foto--32 .marco{aspect-ratio:3/2}
.foto--169 .marco{aspect-ratio:16/9}
.foto figcaption{
  font-size:13.5px;line-height:1.5;color:var(--grafito-2);
  padding-top:9px;border-top:1px solid var(--borde-2);margin-top:9px;
}
.foto figcaption .fuente{display:block;font-family:var(--mono);font-size:12px;line-height:1.5;color:var(--grafito-3);margin-top:5px}
.foto figcaption .fuente a{color:var(--grafito-3);text-decoration:underline;text-underline-offset:.15em}
.foto figcaption .fuente a:hover{color:var(--cobalto)}
/* Fotografia que abre una seccion: se limita a la columna de lectura para que
   no parezca un banner. */
.foto--seccion{max-width:var(--lectura);margin:22px 0 0}
.foto .etiqueta{
  display:block;width:-moz-fit-content;width:fit-content;
  font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:2px;
  border:1px solid var(--borde);color:var(--grafito-2);margin-bottom:7px;
}
.foto .etiqueta--caso{border-color:var(--cobalto);color:var(--cobalto)}
.foto .etiqueta--ilustrativa{border-color:var(--borde);color:var(--grafito-3)}
.foto .etiqueta--documental{border-color:var(--grafito-3);color:var(--grafito-2)}

/* Marcador documental: la maqueta funciona sin la fotografía definitiva. */
.pendiente{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:10px;padding:24px;text-align:center;height:100%;
  background:var(--fondo-2);
}
.pendiente .rot{
  font-family:var(--mono);font-size:12.5px;font-weight:500;letter-spacing:.11em;
  text-transform:uppercase;color:var(--grafito-2);
}
.pendiente .arch{font-family:var(--mono);font-size:13px;color:var(--cobalto);word-break:break-all}
.pendiente .desc{font-size:14px;line-height:1.5;color:var(--grafito-2);max-width:44ch;margin:0}
.pendiente .cruz{width:26px;height:26px;color:var(--borde)}

/* --- 8. SELECTOR DE SÍNTOMAS ---------------------------------------------- */
.seccion{padding:clamp(36px,4.2vw,62px) 0}
.seccion--linea{border-top:1px solid var(--borde-2)}
.sec-cab{margin-bottom:clamp(20px,2.4vw,30px);max-width:70ch}
.sec-cab .tec{display:block;margin-bottom:8px}
.sec-cab h2{font-size:clamp(23px,1.2rem + 1vw,31px)}
.sec-cab p{margin:9px 0 0;color:var(--grafito-2);font-size:16.5px}

.sintomas{display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
@media (min-width:620px){.sintomas{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.sintomas{grid-template-columns:repeat(3,1fr)}}
.sintoma{
  background:var(--panel);border:0;text-align:left;padding:17px 19px;
  display:flex;flex-direction:column;gap:4px;min-height:88px;
}
.sintoma:hover{background:var(--cobalto-sd)}
.sintoma[aria-pressed="true"]{background:var(--cobalto-sd);box-shadow:inset 3px 0 0 var(--naranja)}
.sintoma b{font-size:16.5px;font-weight:600;line-height:1.25}
.sintoma span{font-size:14px;color:var(--grafito-2);line-height:1.4}
.filtro-aviso{margin:16px 0 0;font-size:15px;color:var(--grafito-2)}
.filtro-aviso b{color:var(--grafito)}
.filtro-aviso button{background:none;border:0;padding:0;color:var(--cobalto);text-decoration:underline;font-size:15px}

/* Accesos a secciones */
/* auto-fit, no un numero fijo de columnas: con dos entradas la rejilla no deja
   celdas grises vacias al lado, que es lo que hace que una pagina parezca a
   medio hacer. */
.accesos{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--borde);border:1px solid var(--borde);border-radius:var(--r);overflow:hidden}
@media (min-width:640px){.accesos{grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}}
.accesos li{margin:0}
/* height:100% para que la celda se rellene entera: si no, con textos de
   distinta longitud asoma el fondo de la rejilla y la fila parece rota. */
.accesos a{display:block;height:100%;background:var(--panel);padding:16px 18px;color:var(--grafito)}
.accesos a:hover{background:var(--cobalto-sd);text-decoration:none}
.accesos b{display:block;font-size:16.5px;font-weight:600;margin-bottom:3px}
.accesos span{display:block;font-size:14px;color:var(--grafito-2);line-height:1.45}

/* --- 9. RECORRIDOS (guías) ------------------------------------------------ */
.guias{list-style:none;margin:0;padding:0;display:grid;gap:26px}
@media (min-width:700px){.guias{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1060px){.guias{grid-template-columns:repeat(3,1fr)}}
.guia{margin:0;display:flex;flex-direction:column;gap:11px}
.guia .foto{margin:0}
.guia .meta{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.guia h3{font-size:19.5px;line-height:1.26}
.guia h3 a{color:var(--grafito)}
.guia h3 a:hover{color:var(--cobalto)}
.guia p{margin:0;font-size:15px;color:var(--grafito-2);line-height:1.5}

/* Mientras sólo haya una guía publicada, la rejilla no finge tres columnas:
   la destacada ocupa todo el ancho y no deja huecos vacíos al lado. */
.guias--unica{grid-template-columns:1fr!important}

/* Guía destacada: ocupa dos columnas y sube la escala */
@media (min-width:1060px){
  .guia--destacada{grid-column:span 2;flex-direction:row;gap:22px;align-items:flex-start}
  .guia--destacada .foto{flex:1 1 52%}
  .guia--destacada .txt{flex:1 1 48%}
  .guia--destacada h3{font-size:26px}
  .guia--destacada p{font-size:16.5px}
}

/* Proximas investigaciones: no son enlaces ni botones desactivados. Es una
   lista de trabajo declarada, con una etiqueta discreta de estado. */
.proximas{margin-top:clamp(26px,3vw,38px);border-top:1px solid var(--borde-2);padding-top:18px}
.proximas > h3{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grafito-3);margin-bottom:4px;
}
.proximas > p{margin:0 0 14px;font-size:15px;color:var(--grafito-2);max-width:70ch}
.proximas ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
@media (min-width:760px){.proximas ul{grid-template-columns:repeat(2,1fr);column-gap:34px}}
.proximas li{margin:0;padding:14px 0;border-top:1px solid var(--borde-2)}
.proximas .est{
  display:inline-block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grafito-3);
  border:1px solid var(--borde);border-radius:2px;padding:2px 6px;margin-bottom:7px;
}
.proximas b{display:block;font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.28;margin-bottom:3px}
.proximas span{display:block;font-size:14.5px;line-height:1.5;color:var(--grafito-2)}

/* --- 10. PROTOCOLO -------------------------------------------------------- */
.protocolo{border:1px solid var(--borde);border-radius:var(--r);overflow:hidden;background:var(--panel)}
.protocolo-cab{padding:18px 20px;border-bottom:1px solid var(--borde);background:var(--fondo-2)}
.protocolo-cab h2{font-size:clamp(21px,1.1rem + .9vw,27px)}
.protocolo-cab p{margin:7px 0 0;color:var(--grafito-2);font-size:15.5px;max-width:70ch}
.pasos{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:var(--borde)}
@media (min-width:900px){.pasos{grid-template-columns:repeat(4,1fr)}}
.paso{background:var(--panel);margin:0;padding:20px;display:flex;flex-direction:column;gap:12px}
.paso-n{
  font-family:var(--mono);font-size:34px;font-weight:500;line-height:1;
  color:var(--cobalto);letter-spacing:-.02em;
}
.paso h3{font-size:17.5px;line-height:1.25}
.paso .fig{border:1px solid var(--borde-2);border-radius:2px;background:var(--fondo)}
.paso .fig svg{display:block;width:100%;height:auto}
.paso p{margin:0;font-size:14.5px;color:var(--grafito-2);line-height:1.5}
.paso .error{
  margin-top:auto;padding-top:11px;border-top:1px solid var(--borde-2);
  font-size:13.5px;line-height:1.5;color:var(--grafito-2);
}
.paso .error b{color:var(--naranja);font-weight:600}
/* En móvil la secuencia se lee como línea de procedimiento */
@media (max-width:899px){
  .paso{flex-direction:row;flex-wrap:wrap;gap:10px 16px;padding:18px 20px}
  .paso-n{flex:none;font-size:28px}
  .paso h3{flex:1 1 auto;align-self:center}
  .paso .fig,.paso p,.paso .error{flex:1 1 100%}
}
.protocolo-pie{padding:15px 20px;border-top:1px solid var(--borde);background:var(--fondo-2);font-size:14px;line-height:1.55;color:var(--grafito-2)}

/* --- 11. CALCULADORA ------------------------------------------------------ */
.calc{border:1px solid var(--borde);border-radius:var(--r);background:var(--panel);overflow:hidden}
.calc-cab{padding:20px clamp(18px,2.2vw,26px);border-bottom:1px solid var(--borde);background:var(--fondo-2)}
.calc-cab h2,.calc-cab h1{font-size:clamp(22px,1.15rem + 1vw,29px);margin-bottom:8px}
.calc-cab p{margin:0;color:var(--grafito-2);font-size:16px;max-width:72ch}
/* min-width:0 en los hijos: sin esto, la anchura minima de una tabla ancha
   dentro de .scroll-x arrastra a toda la columna y desborda en movil. */
.calc-g{display:grid}
.calc-g > *{min-width:0}
.scroll-x{min-width:0;max-width:100%}
@media (min-width:940px){.calc-g{grid-template-columns:1fr 1fr}}
/* Herramientas con tabla: el formulario necesita todo el ancho y el resultado
   va debajo, no al lado. */
.calc-g--ancho{grid-template-columns:1fr!important}
.calc-g--ancho .calc-form{border-right:0;border-bottom:1px solid var(--borde)}
.calc-form{padding:clamp(18px,2.2vw,26px)}
@media (min-width:940px){.calc-form{border-right:1px solid var(--borde)}}
.calc-res{padding:clamp(18px,2.2vw,26px);background:var(--fondo-2)}

.campos{border:0;padding:0;margin:0 0 20px;display:grid;gap:15px}
@media (min-width:540px){.campos{grid-template-columns:1fr 1fr}}
.campos legend{
  padding:0;margin-bottom:11px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);
}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:14.5px;font-weight:600}
.campo .u{font-family:var(--mono);font-size:12.5px;font-weight:400;color:var(--naranja)}
.campo input,.campo select{
  width:100%;font-size:16px;padding:10px 12px;background:var(--fondo);
  border:1px solid var(--borde-control);border-radius:var(--r);color:var(--grafito);
}
.campo input:focus,.campo select:focus{border-color:var(--cobalto)}
.campo input[aria-invalid="true"],.campo select[aria-invalid="true"]{border-color:var(--naranja);border-width:2px}
.campo .error{font-size:13px;color:var(--naranja);line-height:1.4}
.calc-errores{
  margin-top:15px;background:var(--naranja-sd);border:1px solid var(--naranja);
  border-radius:var(--r);padding:11px 13px;font-size:14.5px;
}
.calc-errores:empty{display:none}
.calc-errores ul{margin:7px 0 0;padding-left:18px}

.calc-resultado[hidden]{display:none}
.calc-resultado > .et{
  display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);margin-bottom:14px;
}
.intervalo{border:1px solid var(--cobalto);background:var(--cobalto-sd);border-radius:var(--r);padding:17px 19px;margin-bottom:15px}
.intervalo .m-et{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalto);margin-bottom:5px}
.intervalo .m-val{font-family:var(--serif);font-size:clamp(31px,1.7rem + 1.4vw,42px);font-weight:700;line-height:1.05;margin:0;letter-spacing:-.02em}
.intervalo .m-uni{font-family:var(--sans);font-size:16px;font-weight:500;color:var(--grafito-2);letter-spacing:0}
.intervalo .m-nivel{font-family:var(--mono);font-size:12.5px;color:var(--grafito-2);margin:9px 0 0;line-height:1.5}
/* Rotulo que separa lo calculado de lo asumido dentro del resultado. */
.calc-grupo{
  display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);
  border-top:1px solid var(--borde);padding-top:11px;margin-bottom:9px;
}
.magnitudes{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-bottom:15px}
@media (min-width:560px){.magnitudes{grid-template-columns:repeat(4,1fr)}}
.magnitud{background:var(--panel);border:1px solid var(--borde);border-radius:var(--r);padding:11px 12px}
.m-et{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--grafito-2);margin-bottom:4px}
.m-val{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.15}
.m-uni{font-family:var(--sans);font-size:12.5px;font-weight:400;color:var(--grafito-2)}
.calc-tiempo{
  font-size:14.5px;line-height:1.55;color:var(--grafito-2);background:var(--panel);
  border:1px solid var(--borde);border-radius:var(--r);padding:11px 13px;margin:0 0 15px;
}
.avisos{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:9px}
.avisos li{
  font-size:14.5px;line-height:1.55;background:var(--panel);border:1px solid var(--borde);
  border-left:3px solid var(--borde);border-radius:var(--r);padding:11px 13px;margin:0;
}
.avisos li.aviso--alto{border-left-color:var(--naranja);background:var(--naranja-sd)}
.avisos li.aviso--medio{border-left-color:var(--naranja)}
.calc-detalle{border:1px solid var(--borde);border-radius:var(--r);background:var(--panel)}
.calc-detalle summary{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--cobalto);padding:12px 13px}
.calc-detalle .contenido{font-size:14.5px;padding:0 13px 11px}
.calc-detalle ul{margin:0;padding-left:18px}
.calc-detalle li{margin-bottom:7px;line-height:1.5}
.calc-nota{margin:15px 0 0;padding-top:14px;border-top:1px solid var(--borde);font-size:14px;line-height:1.55;color:var(--grafito-2)}

/* --- 11 bis. HERRAMIENTAS DE LISTA Y TABLA -------------------------------- */
/* Mismo lenguaje que la calculadora: filete, monoespaciada para lo tecnico y
   ningun elemento que pueda confundirse con un anuncio. */

.campos--ancho{grid-template-columns:1fr}
@media (min-width:640px){.campos--ancho{grid-template-columns:1fr 1fr}}

/* Grupos de casillas: rejilla compacta, area de pulsacion generosa. */
.opciones{border:0;padding:0;margin:0 0 20px}
.opciones legend{
  padding:0;margin-bottom:10px;font-family:var(--mono);font-size:12px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);
}
.opciones .ayuda{margin:-4px 0 11px;font-size:14px;line-height:1.5;color:var(--grafito-2)}
.opciones .rejilla{display:grid;gap:2px 18px}
@media (min-width:520px){.opciones .rejilla{grid-template-columns:repeat(2,1fr)}}
@media (min-width:980px){.opciones .rejilla--3{grid-template-columns:repeat(3,1fr)}}
.opcion{display:flex;align-items:flex-start;gap:9px;padding:7px 0;margin:0}
.opcion input{width:18px;height:18px;margin:1px 0 0;flex:none;accent-color:var(--cobalto)}
.opcion label{font-size:15.5px;line-height:1.4;cursor:pointer}

/* Resumen de errores: es un role="alert" y recibe el foco. */
.calc-errores b{display:block;margin-bottom:5px}
.calc-errores:focus{outline:2px solid var(--naranja);outline-offset:3px}

/* Lista fotografica generada */
.lista-foto{display:grid;gap:0;margin:0 0 18px}
.lf-bloque{border-top:1px solid var(--borde);padding:15px 0 4px}
.lf-bloque h3{
  display:flex;align-items:baseline;gap:11px;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--grafito);margin:0 0 5px;
}
.lf-n{font-family:var(--mono);font-size:15px;font-weight:500;color:var(--cobalto);letter-spacing:0}
.lf-nota{margin:0 0 9px;font-size:14px;line-height:1.5;color:var(--grafito-2)}
.lf-bloque ol{margin:0 0 4px;padding-left:20px;font-size:15.5px}
.lf-bloque li{margin-bottom:7px;line-height:1.55}

/* Tablas rellenables */
.tabla-editable{width:100%;border-collapse:collapse;font-size:14.5px;min-width:52rem}
.tabla-editable caption{
  text-align:left;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);padding-bottom:10px;
}
.tabla-editable th{
  text-align:left;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--grafito-2);
  padding:6px 8px 6px 0;border-bottom:1px solid var(--grafito-3);white-space:nowrap;
}
.tabla-editable td{padding:5px 8px 5px 0;border-bottom:1px solid var(--borde-2);vertical-align:middle}
.tabla-editable input,.tabla-editable select{
  width:100%;min-width:5.5rem;font-size:15px;padding:7px 9px;background:var(--fondo);
  border:1px solid var(--borde-control);border-radius:var(--r);color:var(--grafito);
}
.tabla-editable input:focus,.tabla-editable select:focus{border-color:var(--cobalto)}
.inv-campo{display:block}
.inv-quitar{
  background:transparent;border:1px solid var(--borde-control);border-radius:var(--r);
  width:30px;height:30px;line-height:1;font-size:17px;color:var(--grafito-2);padding:0;
}
.inv-quitar:hover{border-color:var(--naranja);color:var(--naranja)}

/* Tabla de salida ya rellenada */
.inv-salida{width:100%;border-collapse:collapse;font-size:14.5px;min-width:46rem}
.inv-salida caption{
  text-align:left;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);padding-bottom:10px;
}
.inv-salida th{
  text-align:left;font-family:var(--sans);font-size:12.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;color:var(--grafito-2);
  padding:6px 14px 6px 0;border-bottom:1px solid var(--grafito-3);
}
.inv-salida td{padding:9px 14px 9px 0;border-bottom:1px solid var(--borde-2);vertical-align:top;line-height:1.45}

/* Memoria local: siempre visible, siempre opcional, siempre borrable. */
.memoria{
  border:1px solid var(--borde);border-radius:var(--r);background:var(--fondo-2);
  padding:12px 14px;margin:0 0 18px;
}
.memoria .opcion{padding:0}
.memoria p{margin:7px 0 0;font-size:13.5px;line-height:1.5;color:var(--grafito-2)}
.memoria button{
  background:transparent;border:0;padding:0;color:var(--cobalto);
  text-decoration:underline;font-size:13.5px;
}
.memoria [data-memoria-aviso]{font-family:var(--mono);font-size:12px;color:var(--grafito-3)}

/* Hoja en blanco para rellenar a mano */
.hoja-blanca{display:none}
@media print{
  .imprimir-hoja .calc-form,.imprimir-hoja .calc-res,.imprimir-hoja .art-cuerpo > *:not(.hoja-blanca){display:none!important}
  .imprimir-hoja .hoja-blanca{display:block!important}
}
.hoja-blanca table{width:100%;border-collapse:collapse;font-size:11pt}
.hoja-blanca th,.hoja-blanca td{border:1px solid #666;padding:9px 6px;text-align:left}
.hoja-blanca td{height:2.1em}

/* --- 12. PUBLICIDAD ------------------------------------------------------- */
/* Altura reservada para no introducir CLS. Nunca junto a formularios,
   controles o resultados de calculadora. */
.publicidad{margin:clamp(30px,3.4vw,46px) 0}
.publicidad > .rot{
  display:block;font-family:var(--mono);font-size:12px;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;color:var(--grafito-3);margin-bottom:6px;
}
/* Sin anuncio real, la ubicacion NO existe para el lector: ni altura, ni
   rotulo, ni recuadro. Un hueco anunciado y vacio es una pagina a medio hacer.
   La clase publicidad--activa se anade al contenedor en el momento en que se
   inserta la etiqueta real, y es entonces cuando se reserva la dimension exacta
   del formato contratado, que es cuando el CLS importa. */
.publicidad{display:none}
.publicidad--activa{display:block}
.publicidad .hueco{
  display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--borde);border-radius:var(--r);min-height:250px;
}
@media (min-width:768px){.publicidad .hueco{min-height:280px}}
.publicidad .hueco::after{
  content:attr(data-hueco);font-family:var(--mono);font-size:12px;
  letter-spacing:.09em;color:var(--grafito-3);
}

/* --- 13. ARTÍCULO --------------------------------------------------------- */
.migas{font-size:14px;color:var(--grafito-2);padding:16px 0 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.migas li{margin:0}
.migas li+li::before{content:"›";color:var(--grafito-3);margin-right:6px}

.art{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--gutter)}
.art-cab{padding:18px 0 0;max-width:var(--lectura)}
.art-cab .tec{display:block;margin-bottom:10px}
.art-cab h1{font-size:clamp(30px,1.6rem + 2vw,46px);line-height:1.12;margin-bottom:16px}
.art-cab .entradilla{font-size:clamp(17px,1rem + .3vw,19.5px);line-height:1.55;color:var(--grafito-2);margin:0 0 18px}
.art-meta{
  display:flex;flex-wrap:wrap;gap:6px 20px;font-family:var(--mono);font-size:12.5px;
  color:var(--grafito-2);border-top:1px solid var(--borde);border-bottom:1px solid var(--borde);
  padding:10px 0;margin:0 0 26px;
}
.art-meta b{color:var(--grafito);font-weight:500}

.art-cuerpo{max-width:var(--lectura)}
.art-cuerpo > h2{
  font-size:clamp(22px,1.15rem + .9vw,28px);margin:2.4rem 0 .8rem;
  padding-top:1rem;border-top:1px solid var(--borde-2);
}
.art-cuerpo > h3{font-size:19px;margin:1.8rem 0 .55rem}
.art-cuerpo p,.art-cuerpo li{font-size:17.5px;line-height:1.68}
@media (min-width:1100px){.art-cuerpo p,.art-cuerpo li{font-size:18px}}

/* La fotografía puede romper la columna de lectura de forma controlada */
.art-cuerpo .foto{margin:2rem 0}
@media (min-width:1100px){
  .art-cuerpo .foto--ancha{width:min(1100px,calc(100vw - 2 * var(--gutter)));max-width:none}
}

.nota{
  border-left:3px solid var(--borde);padding:2px 0 2px 14px;margin:1.7rem 0;
  font-size:15px;line-height:1.55;color:var(--grafito-2);
}
.nota .rot{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;color:var(--cobalto);margin-bottom:3px}
.nota--medida{border-left-color:var(--naranja)}
.nota--medida .rot{color:var(--naranja)}

.decide{border:1px solid var(--cobalto);background:var(--cobalto-sd);border-radius:var(--r);padding:16px 18px;margin:2rem 0}
.decide > .rot{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cobalto);margin-bottom:10px}
.decide ol{margin:0;padding-left:20px;font-size:16.5px}
.decide li{margin-bottom:9px}
.decide li:last-child{margin-bottom:0}

.riesgo{border-left:3px solid var(--naranja);padding:2px 0 2px 15px;margin:2rem 0}
.riesgo > .rot{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja);margin-bottom:9px}
.riesgo ul{margin:0;padding-left:19px;font-size:16.5px}
.riesgo .apostilla{font-size:14px;color:var(--grafito-2);margin:10px 0 0;line-height:1.55}

.limites{border:1px solid var(--naranja);border-radius:var(--r);padding:16px 18px;margin:2rem 0}
.limites > .rot{display:block;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--naranja);margin-bottom:10px}
.limites ul{margin:0;padding-left:19px;font-size:16.5px}

.normativa{margin:2.2rem 0}
.normativa table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:40rem}
.normativa caption{text-align:left;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--grafito-2);padding-bottom:10px}
.normativa th{
  text-align:left;vertical-align:bottom;font-family:var(--sans);font-size:12.5px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--grafito-2);
  padding:6px 14px 6px 0;border-bottom:1px solid var(--grafito-3);
}
.normativa td{padding:11px 14px 11px 0;border-bottom:1px solid var(--borde-2);vertical-align:top;line-height:1.5}
.normativa td:first-child{white-space:nowrap;font-weight:600}
.normativa .consulta{display:block;font-family:var(--mono);font-size:12px;color:var(--grafito-3);margin-top:4px}

.art-pie{max-width:var(--lectura);margin-top:2.6rem;border-top:1px solid var(--borde);padding-top:20px}
.autoria{font-size:14.5px;line-height:1.6;color:var(--grafito-2);border-left:3px solid var(--borde);padding-left:14px;margin:0 0 18px}
.autoria b{color:var(--grafito);font-weight:600}
.descargo{
  background:var(--fondo-2);border:1px solid var(--borde);border-radius:var(--r);
  padding:14px 16px;font-size:14px;line-height:1.6;color:var(--grafito-2);margin:0 0 22px;
}
.relacionados{margin:2rem 0 0}
.relacionados h2{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grafito-3);margin-bottom:12px}
.relacionados ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:700px){.relacionados ul{grid-template-columns:repeat(3,1fr)}}
.relacionados li{margin:0;border-top:1px solid var(--borde);padding-top:11px}
.relacionados a{font-family:var(--serif);font-weight:600;font-size:16.5px;line-height:1.28;color:var(--grafito)}
.relacionados a:hover{color:var(--cobalto)}

/* Índice del artículo */
.indice{border:1px solid var(--borde);border-radius:var(--r);padding:15px 17px;margin:0 0 26px;background:var(--panel)}
.indice h2{font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--grafito-3);margin-bottom:10px}
.indice ol{margin:0;padding-left:20px;font-size:15.5px}
.indice li{margin-bottom:5px}
.indice a{color:var(--grafito-2)}
.indice a:hover{color:var(--cobalto)}

/* Árbol de lectura: listas anidadas, sin JavaScript ni imagen. */
.arbol{list-style:none;margin:2rem 0;padding:0;border-left:2px solid var(--borde)}
.arbol > li{margin:0 0 16px;padding-left:16px;font-size:16.5px;line-height:1.55}
.arbol > li:last-child{margin-bottom:0}
.arbol ul{list-style:none;margin:8px 0 0;padding-left:16px;border-left:1px solid var(--borde-2)}
.arbol ul li{font-size:15.5px;color:var(--grafito-2);margin-bottom:6px}
.arbol b{color:var(--grafito)}

/* Cierre editorial: fuentes, fechas, alcance y limites. Va al final de cada
   guia y se lee como aparato critico, no como contenido. */
.art-pie--cierre{border-top:0;padding-top:0}
.cierre{border-top:2px solid var(--grafito);margin:2.8rem 0 0;padding-top:20px}
.art-pie--cierre > .cierre:first-child{margin-top:0}
.cierre > h2{
  font-family:var(--sans);font-size:12.5px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--grafito-3);margin:0 0 16px;border:0;padding:0;
}
.cierre h3{
  font-family:var(--sans);font-size:13px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--grafito-2);margin:1.6rem 0 .55rem;
}
.cierre p,.cierre li{font-size:15.5px;line-height:1.6}
.cierre ul,.cierre ol{padding-left:19px}
.cierre .fechas{
  list-style:none;margin:0 0 1.4rem;padding:0;display:grid;gap:10px;
}
@media (min-width:620px){.cierre .fechas{grid-template-columns:repeat(3,1fr)}}
.cierre .fechas li{margin:0;font-family:var(--mono);font-size:12.5px;line-height:1.5;color:var(--grafito-2);border-top:1px solid var(--borde-2);padding-top:8px}
.cierre .fechas b{display:block;color:var(--grafito);font-weight:500;font-size:14px;font-family:var(--sans);letter-spacing:0;text-transform:none}
.cierre .fuentes{list-style:none;margin:0 0 1.2rem;padding:0}
.cierre .fuentes li{margin-bottom:12px;border-left:2px solid var(--borde-2);padding-left:13px}
.cierre .fuentes .ref{display:block;font-family:var(--mono);font-size:12px;color:var(--grafito-3);margin-top:3px}

/* --- 14. CATEGORÍA -------------------------------------------------------- */
.cat-cab{padding:20px 0 0;max-width:74ch}
.cat-cab .tec{display:block;margin-bottom:9px}
.cat-cab h1{font-size:clamp(30px,1.6rem + 2vw,44px);margin-bottom:14px}
.cat-cab .sumario{font-size:clamp(17px,1rem + .3vw,19px);line-height:1.6;color:var(--grafito-2);margin:0}
.cat-intro{max-width:var(--lectura);margin-top:26px}
.cat-intro p{font-size:17.5px;line-height:1.68}

/* --- 15. ACCESIBILIDAD ---------------------------------------------------- */
:focus{outline:2px solid var(--cobalto);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--cobalto);outline-offset:2px}
a:focus-visible{outline-offset:3px}
/* Sobre el propio cobalto (boton primario, enlace de salto) el contorno del
   mismo color desaparece: se dibuja con el color del texto que va encima. */
.btn:focus-visible,.saltar:focus-visible{outline-color:var(--sobre-cobalto);outline-offset:-4px}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* --- 16. BORRADORES LEGALES ---------------------------------------------- */
/* Marca visible de dato pendiente. Deliberadamente incomoda de leer: si queda
   uno solo en la pagina, la pagina no se publica. */
.pdte{
  font-family:var(--mono);font-size:.86em;font-weight:500;letter-spacing:.04em;
  color:var(--naranja);background:var(--naranja-sd);border:1px dashed var(--naranja);
  border-radius:2px;padding:1px 6px;
  /* Son identificadores largos sin espacios: sin esto desbordan a 320 px. */
  overflow-wrap:anywhere;word-break:break-word;
}
.apunte{font-size:.86em;color:var(--grafito-3)}
.borrador{
  border:2px solid var(--naranja);border-radius:var(--r);
  padding:16px 18px;margin:0 0 2rem;background:var(--naranja-sd);
}
.borrador > .rot{
  display:block;font-family:var(--mono);font-size:12px;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;color:var(--naranja);margin-bottom:9px;
}
.borrador p{font-size:15px;line-height:1.6;margin-bottom:.7rem}
.borrador p:last-child{margin-bottom:0}

/* --- 17. IMPRESIÓN -------------------------------------------------------- */
@media print{
  .cab,.pie-cols,.publicidad,.tema,.menu-btn,.saltar,.acciones,.indice,.relacionados{display:none!important}
  .cierre{break-inside:avoid}
  html,body{background:#fff;color:#000}
  body{font-size:10.5pt;line-height:1.5}
  .art,.env{max-width:none;padding:0}
  .art-cuerpo,.art-cab,.art-pie{max-width:none}
  .decide,.limites,.riesgo,.protocolo,.calc,.intervalo{border-color:#999;background:#fff;break-inside:avoid}
  a{color:#000;text-decoration:none}
  .art-cuerpo a[href^="http"]::after{content:" [" attr(href) "]";font-size:8pt;color:#555}
  h1,h2,h3{break-after:avoid}
  figure,table,.calc-resultado{break-inside:avoid}
}