/* Escritorio · sistema de anchos y layouts propios (01/10/2026)
   Tres anchos para toda la web:
     --a-amplio  1280 px  cabecera, pie, home, glosario, test, resultado
     --a-ficha   1120 px  ficha: lectura + panel lateral
     --a-lectura   68ch   texto largo
   Por debajo de 1024 px no cambia nada de lo que ya había en móvil. */

html:root{
  --a-amplio:1280px; --a-ficha:1120px; --a-lectura:68ch;
  --gutter:clamp(16px, 4vw, 48px);
  --sec-gap:clamp(48px, 6vw, 96px);
}

/* Texto base fluido e igual en todas las páginas (16 → 18 px) */
html body{font-size:clamp(16px, .94rem + .22vw, 18px)}

/* ---------- Cabecera y pie: el mismo ancho y la misma línea en todas las páginas ---------- */
html header.top .shell, html footer.foot .shell,
html .hbp-top .shell, html .hbp-foot .shell{
  max-width:calc(var(--a-amplio) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter);
}

/* ---------- Home ---------- */
html main.home, html .banda .in{
  max-width:calc(var(--a-amplio) + 2 * var(--gutter)); padding-inline:var(--gutter);
}

/* ---------- Ficha: lectura + panel lateral fijo ---------- */
.f-lat{display:none}
@media (min-width:1080px){
  html main > .wrap{
    max-width:calc(var(--a-ficha) + 2 * var(--gutter)); padding-inline:var(--gutter);
    display:grid; grid-template-columns:minmax(0,1fr) 320px; column-gap:clamp(40px, 4vw, 64px); row-gap:var(--sec-gap);
    align-items:start;
  }
  html main > .wrap > *{grid-column:1; min-width:0}
  html main > .wrap > header{grid-column:1 / -1}
  /* Lo que pasa al panel se oculta en la cabecera (sigue igual en móvil) */
  html main > .wrap > header figure.mp,
  html main > .wrap > header .carnet,
  html main > .wrap > header nav.accesos,
  html main > .wrap > header aside.tiene-sentido{display:none}
  html main > .wrap > header .hero{grid-template-columns:minmax(0,1fr) 300px}
  html main > .wrap section p, html main > .wrap section li{max-width:var(--a-lectura)}

  html main > .wrap > .f-lat{display:block; grid-column:2; grid-row:2 / span 40; align-self:start; position:sticky; top:92px;
    max-height:calc(100vh - 108px); overflow:auto; scrollbar-width:thin}
  .f-lat > * + *{margin-top:12px}
  .f-lat .fl-img{border-radius:16px; overflow:hidden; position:relative; aspect-ratio:16/10; background:var(--d-acc-soft)}
  .f-lat .fl-img img.foto{width:100%; height:100%; object-fit:cover; display:block}
  .f-lat .fl-img .placa{position:absolute; right:10px; bottom:10px; width:42%; aspect-ratio:1; background:#fff; border-radius:12px; padding:8px; box-shadow:0 6px 18px -8px rgba(14,18,32,.35)}
  .f-lat .fl-img .placa img{width:100%; height:100%; object-fit:contain}
  .f-lat .fl-dosis{background:var(--d-card); border:1px solid var(--d-line); border-radius:16px; padding:16px}
  .f-lat .fl-dosis small{display:block; font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--d-ink-2); font-weight:700}
  .f-lat .fl-dosis b{display:block; font-size:2.4rem; line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--d-acc); margin-top:6px; font-variant-numeric:tabular-nums}
  .f-lat .fl-dosis .gauge{margin-top:10px; padding:0; background:none; border:0; box-shadow:none}
  .f-lat .fl-dosis .gauge .legend{display:none}
  .f-lat .fl-datos{display:grid; gap:0; background:var(--d-card); border:1px solid var(--d-line); border-radius:16px; padding:4px 16px}
  .f-lat .fl-datos div{padding:8px 0; display:flex; justify-content:space-between; gap:12px; align-items:baseline; border-top:1px solid var(--d-line)}
  .f-lat .fl-datos div:first-child{border-top:0}
  .f-lat .fl-datos small{font-size:.8rem; color:var(--d-ink-2)}
  .f-lat .fl-datos b{text-align:right}
  .f-lat .fl-datos b{font-size:.95rem; color:var(--d-ink)}
  .f-lat .fl-indice{border-left:2px solid var(--d-line); padding-left:2px}
  .f-lat .fl-indice p{font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--d-ink-2); font-weight:700; padding:0 0 6px 12px}
  .f-lat .fl-indice a{display:flex; align-items:center; min-height:36px; padding:0 12px; margin-left:-4px; border-left:2px solid transparent;
    color:var(--d-ink-2); text-decoration:none; font-size:.92rem; font-weight:600}
  .f-lat .fl-indice a[aria-current="true"]{color:var(--d-acc); border-left-color:var(--d-acc)}
  .f-lat .fl-cta{display:flex; align-items:center; justify-content:center; min-height:48px; border-radius:14px; background:var(--d-acc); color:#fff; font-weight:700; text-decoration:none}
  @media (hover:hover){ .f-lat .fl-indice a:hover{color:var(--d-ink)} .f-lat .fl-cta:hover{background:var(--d-acc-2)} }
}
@media (min-width:1080px) and (prefers-color-scheme:dark){html:root:not([data-theme="light"]) .f-lat .fl-cta{color:#0E1220}}
@media (min-width:1080px){html:root[data-theme="dark"] .f-lat .fl-cta{color:#0E1220}}

/* ---------- Glosario: 3 columnas de 1024 a 1279, 4 desde 1280 ---------- */
@media (min-width:1024px){
  html main.gl{max-width:calc(var(--a-amplio) + 2 * var(--gutter)); padding-inline:var(--gutter)}
  html main.gl .grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
}
@media (min-width:1280px){ html main.gl .grid{grid-template-columns:repeat(4,minmax(0,1fr))} }

/* ---------- Cómo funciona y Sobre mí: título a la izquierda, texto a la derecha ---------- */
@media (min-width:1024px){
  html main.shell{max-width:calc(var(--a-amplio) + 2 * var(--gutter)); padding-inline:var(--gutter)}
  html main.shell .sec{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); column-gap:clamp(40px,5vw,96px); align-items:start}
  html main.shell .sec > .sec-h{grid-column:1; grid-row:1 / span 20; position:sticky; top:96px; margin-bottom:0}
  html main.shell .sec > *:not(.sec-h){grid-column:2; min-width:0}
  html main.shell .sec .bloque-txt, html main.shell .sec .texto{max-width:var(--a-lectura)}
  html main.shell .sec .sec-h h2{font-size:clamp(1.6rem,2.4vw,2.4rem); line-height:1.08}
}

/* ---------- Textos legales: índice a la izquierda, texto en ancho de lectura ---------- */
.doc-indice{display:none}
@media (min-width:1024px){
  html main.doc{max-width:calc(var(--a-amplio) + 2 * var(--gutter)); padding-inline:var(--gutter);
    display:grid; grid-template-columns:240px minmax(0, var(--a-lectura)); column-gap:clamp(40px,6vw,120px); align-items:start}
  html main.doc > *{grid-column:2; min-width:0}
  html main.doc > .doc-indice{display:block; grid-column:1; grid-row:1 / span 60; position:sticky; top:96px;
    border-left:2px solid var(--d-line); padding-left:2px}
  .doc-indice p{font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; color:var(--d-ink-2); font-weight:700; padding:0 0 6px 12px}
  .doc-indice a{display:flex; align-items:center; min-height:36px; padding:0 12px; color:var(--d-ink-2); text-decoration:none; font-size:.92rem; font-weight:600}
  @media (hover:hover){ .doc-indice a:hover{color:var(--d-acc)} }
}