/* Portada. El eje del informe está al 42 % del ancho: los títulos empiezan en él. */

.es-portada main > section { padding-inline: var(--margin); }

/* ---------- 1 · primera pantalla ---------- */
.mosaico {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  height: 38svh; min-height: 15rem;
}
.tesela { position: relative; overflow: hidden; min-height: 0; }
.tesela img, .tesela video { filter: grayscale(1) contrast(1.05); }
.t-video { grid-column: 1 / 3; grid-row: 1; }
.t-etiqueta { grid-column: 3; grid-row: 1 / 3; display: grid; place-items: center; padding: 8%; }
.t-etiqueta .etiqueta { width: auto; height: 100%; max-width: 100%; }
.t-mini { display: grid; place-items: center; padding: 9%; }
.t-mini .etiqueta { width: auto; height: 100%; max-width: 100%; }
.t-lupulo { grid-column: 1; grid-row: 2; }
.t-negro { grid-column: 2; grid-row: 2; }
.t-cebada, .t-alambiques, .t-gris, .t-lupulino, .t-campo { display: none; }

.portada-texto { display: grid; gap: 1.5rem; padding-top: 2.25rem; }
.portada-titulo { font-size: var(--step-display); line-height: .9; letter-spacing: -0.03em; }
.portada-titulo .linea { display: block; }
.portada-entradilla { font-size: var(--step-body); line-height: 1.4; max-width: 30ch; }
.portada-accion { justify-self: start; }

.declaracion { display: grid; grid-template-columns: 62fr 38fr; gap: 1.25rem 1rem; padding-top: clamp(3.5rem, 8vw, 6rem); }
.declaracion-texto { grid-column: 1 / -1; font-size: clamp(1.35rem, 1rem + 1.1vw, 1.875rem); line-height: 1.25; letter-spacing: -0.01em; max-width: 46ch; }
.declaracion-foto { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 3; }
.declaracion-foto img { filter: grayscale(1) contrast(1.05); }
.declaracion-nota { grid-column: 1 / -1; grid-row: 3; font-size: var(--step-body); }
.declaracion-nota a { color: var(--ink); }

@media (min-width: 48em) {
  .mosaico { grid-template-columns: repeat(6, minmax(0, 1fr)); height: 52svh; min-height: 22rem; max-height: 38rem; }
  .t-video { grid-column: 1 / 3; grid-row: 1; }
  .t-etiqueta { grid-column: 3; grid-row: 1 / 3; padding: 6%; }
  .t-lupulo { grid-column: 4; grid-row: 1; }
  .t-negro { grid-column: 5; grid-row: 1; }
  .t-cebada { display: block; grid-column: 6; grid-row: 1 / 3; }
  .t-alambiques { display: block; grid-column: 1; grid-row: 2; }
  .t-gris { display: block; grid-column: 2; grid-row: 2; }
  .t-lupulino { display: block; grid-column: 4; grid-row: 2; }
  .t-campo { display: block; grid-column: 5; grid-row: 2; }

  .portada-texto { grid-template-columns: 42fr 58fr; grid-template-rows: auto 1fr; column-gap: 0; row-gap: 2rem; padding-top: clamp(2.5rem, 5vw, 4.5rem); }
  .portada-titulo { grid-column: 2; grid-row: 1 / 3; }
  .portada-entradilla { grid-column: 1; grid-row: 1; font-size: var(--step-lead); padding-right: 2rem; padding-top: .6rem; }
  .portada-accion { grid-column: 1; grid-row: 2; align-self: end; }

  .declaracion { grid-template-columns: 42fr 58fr; column-gap: 0; row-gap: 0; padding-top: clamp(4rem, 7vw, 6.5rem); align-items: start; }
  .declaracion-texto { grid-column: 2; grid-row: 1; max-width: 46ch; }
  .declaracion-foto { grid-column: 1; grid-row: 1 / 3; width: calc(100% - 2.5rem); aspect-ratio: 4 / 5; max-height: 34rem; }
  .declaracion-nota { grid-column: 2; grid-row: 2; align-self: start; margin-top: 2.5rem; max-width: 52ch; font-size: var(--step-body); color: var(--ink); }
}

/* ---------- 2 · cinco cosas que mirar (escena) ---------- */
.senales { display: grid; gap: 2.5rem; padding-top: var(--section); }
.senales-figura { display: grid; place-items: center; padding: 2rem 12%; }
.senales-fijo { width: 100%; max-width: 22rem; }
.senales-texto { display: grid; gap: 1.5rem; align-content: start; }
.senales-lista { display: grid; gap: 2rem; margin-top: 1rem; }
.senal h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.5rem); margin-bottom: .75rem; letter-spacing: -0.02em; }
.senal-cita { margin-bottom: .9rem; }
.senal-cita span { display: inline; background: var(--field-2); padding: .15em .35em; font-weight: 700; font-size: var(--step-body); line-height: 1.7; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.senal p:not(.senal-cita) { max-width: 40ch; font-size: var(--step-lead); line-height: 1.35; }
.senales-texto .enlace { justify-self: start; }

@media (min-width: 48em) {
  .senales { grid-template-columns: 42fr 58fr; gap: 0; padding-top: var(--section); }
  .senales-figura { display: block; padding: 0; margin-right: 2.5rem; }
  .senales-fijo { position: sticky; top: 0; height: 100svh; max-width: none; display: grid; place-items: center; padding: 8svh 14%; overflow: clip; }
  .senales-fijo .etiqueta { width: auto; max-width: 100%; max-height: 84svh; }
  .senales-texto { padding: 10svh 0 8svh; gap: 1.5rem; }
  .senales-lista { gap: 0; }
  .senal { min-height: 40svh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
}

/* ---------- 2b · lo que la ley exige (mosaico) ---------- */
.ley { padding-top: var(--section); }
.ley-mosaico { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.ley-t { padding: 1.25rem; position: relative; }
.ley-cabeza, .ley-foto, .ley-frase, .ley-frase-b, .ley-frase-c { grid-column: 1 / -1; }
.ley-foto { padding: 0; aspect-ratio: 4 / 3; }
.ley-foto img { filter: grayscale(1) contrast(1.05); }
.ley-foto figcaption { position: absolute; left: 0; bottom: 0; background: var(--bg); padding: .5rem .75rem; font-size: var(--step-small); max-width: 34ch; }
.ley-cifra { display: flex; flex-direction: column; gap: .5rem; }
.cifra { font-variant-numeric: normal; font-size: var(--step-head); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.ley-cifra p:not(.cifra), .ley-lista { font-size: var(--step-small); }
.ley-lista-titulo { font-weight: 700; margin-bottom: .4rem; }
.ley-lista ul { margin: 0; padding-left: 1.1em; }
.ley-lista li + li { margin-top: .15rem; }
.ley-frase p, .ley-frase-b p, .ley-frase-c p { font-size: var(--step-lead); line-height: 1.25; max-width: 24ch; }
.ley-fuentes { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); max-width: 70ch; }
.ley-fuentes a { color: var(--ink); }

@media (min-width: 48em) {
  .ley-mosaico { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: 96px; gap: 8px; }
  .ley-t { padding: 1.5rem; }
  .ley-cabeza { grid-column: 1 / 7; grid-row: 1 / 4; }
  .ley-cabeza .titulo-seccion { max-width: 8em; }
  .ley-foto { grid-column: 7 / 13; grid-row: 1 / 6; aspect-ratio: auto; }
  .ley-cifra { grid-column: 1 / 4; grid-row: 4 / 7; }
  .ley-lista { grid-column: 4 / 7; grid-row: 4 / 7; font-size: var(--step-body); }
  .ley-cifra p:not(.cifra) { font-size: var(--step-body); line-height: 1.35; }
  .ley-frase { grid-column: 7 / 13; grid-row: 6 / 9; }
  .ley-frase-b { grid-column: 1 / 4; grid-row: 7 / 9; }
  .ley-frase-c { grid-column: 4 / 7; grid-row: 7 / 9; }
  .ley-frase-b p, .ley-frase-c p { font-size: var(--step-body); font-weight: 600; line-height: 1.3; }
}

/* ---------- 3 · por / para ---------- */
.porpara { padding-top: var(--section); }
.porpara-cabeza { display: grid; gap: 1.25rem; }
.porpara-cabeza p { max-width: 52ch; }
.porpara-cabeza .enlace { display: inline-block; margin-top: .5rem; }
.porpara-especimenes { display: grid; gap: 1.5rem; margin-top: 3rem; --esp: 44vw; }
.especimen { display: flex; flex-direction: column-reverse; }
.especimen figcaption { font-size: var(--step-body); font-weight: 600; margin-top: .75rem; }
.especimen-caja { height: calc(var(--esp) * 0.7); overflow: hidden; background: var(--surface); padding-left: .04em; }
.especimen-caja span { display: block; font-size: var(--esp); font-weight: 700; line-height: .8; letter-spacing: -0.04em; padding-top: .02em; }
.especimen-b .especimen-caja { background: var(--ink); color: var(--bg); }
.porpara-etiquetas { display: grid; gap: 2rem; margin-top: 3rem; }
.porpara-etiquetas figure { display: grid; gap: .75rem; }
.porpara-etiquetas .etiqueta { max-width: 26rem; background: var(--surface); padding: 6%; }
.porpara-etiquetas figcaption { max-width: 34ch; }
.porpara-enlace { display: inline-block; margin-top: 2rem; }

@media (min-width: 48em) {
  .porpara-cabeza { grid-template-columns: 42fr 58fr; column-gap: 0; align-items: start; }
  .porpara-cabeza .titulo-seccion { grid-column: 1; padding-right: 2rem; }
  .porpara-cabeza p { grid-column: 2; padding-top: .5rem; }
  .porpara-especimenes { grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 12vh; --esp: min(21vw, 19rem); }
  .especimen-caja { background: none; }
  .especimen-b .especimen-caja { background: none; color: var(--ink); }
  .porpara-etiquetas { grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: 4rem; }
}

/* ---------- 4 · familias ---------- */
.familias { padding-top: var(--section); }
.familias-cabeza { display: grid; gap: 1.5rem; justify-items: start; }
.familias-cabeza .titulo-seccion { max-width: 11em; }
.familias-cuerpo { margin-top: 2.5rem; display: grid; gap: 1rem; }
.pestanas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; position: sticky; top: 0; z-index: 2; background: var(--bg); padding-block: 6px; }
.pestanas[hidden] { display: none; }
.pestana { display: grid; gap: .1rem; align-content: center; text-align: left; min-height: 4rem; padding: .6rem .75rem; background: var(--surface); transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.pestana:active { transform: scale(0.97); }
.pestana[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.pestana-nombre { font-weight: 700; line-height: 1.15; font-size: var(--step-small); }
.pestana-dato { font-size: var(--step-small); opacity: .75; }
.paneles { display: grid; gap: 3rem; }
.panel-titulo { font-size: var(--step-lead); margin-bottom: 1rem; }
.js .con-pestanas .panel-titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.panel[hidden] { display: none; }
.bandas { display: grid; gap: 4px; }
.banda { display: grid; gap: .25rem; padding: 1rem; background: var(--surface); }
.banda:nth-child(even) { background: var(--surface-2); }
.banda-donde { font-weight: 700; }
.banda-pista { font-weight: 500; display: grid; gap: .15rem; }
.banda-nota { font-weight: 400; font-size: var(--step-small); color: var(--muted); }
.panel-enlace { display: inline-block; margin-top: 1.25rem; }

@media (min-width: 48em) {
  .familias-cabeza { grid-template-columns: 1fr auto; align-items: end; }
  .familias-cabeza .titulo-seccion { max-width: 9em; }
  .familias-cuerpo { grid-template-columns: 42fr 58fr; gap: 0; margin-top: 3.5rem; align-items: start; }
  .pestanas { grid-template-columns: 1fr; position: static; padding: 0; margin-right: 2.5rem; }
  .pestana { min-height: 5rem; padding: .9rem 1.25rem; grid-template-columns: 1fr auto; align-items: center; }
  .pestana-nombre { font-size: var(--step-lead); }
  .banda { grid-template-columns: 22% 1fr; align-items: center; min-height: 5rem; padding: .9rem 1.25rem; column-gap: 1rem; }
  .banda-donde { font-size: var(--step-body); }
}

/* ---------- 5 · mapa ---------- */
.mapa-portada { margin-top: var(--section); padding-block: clamp(4rem, 8vw, 7rem); display: grid; gap: 2rem; }
.mapa-lado { order: 2; }
.mapa-video { aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.mapa-video img, .mapa-video video { filter: grayscale(1) contrast(1.05); }
.mapa-recuento { margin-top: 1rem; font-size: var(--step-lead); line-height: 1.25; max-width: 20ch; font-weight: 600; }
.mapa-comunidades { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; font-size: var(--step-small); }
.mapa-comunidades li { display: flex; justify-content: space-between; gap: .5rem; padding: .3rem 0; }
.mapa-comunidades .nums { font-weight: 700; }
.mapa-principal { display: grid; gap: 1.25rem; align-content: start; }
.mapa-principal > p { max-width: 46ch; }
.filtros { display: flex; flex-wrap: wrap; gap: 6px; }
.filtros[hidden] { display: none; }
.filtro { min-height: 2.75rem; padding: 0 1rem; background: var(--bg); font-weight: 600; transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.filtro:active { transform: scale(0.97); }
.filtro[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.mapa-svg { width: 100%; max-height: 70svh; margin-top: .5rem; }
.mapa-tierra { fill: #fff; }
.mapa-canarias { fill: none; stroke: var(--ink); stroke-width: 3; }
.punto { fill: var(--ink); stroke: var(--field-2); stroke-width: 2; transition: opacity var(--t-ui) ease; }
.punto.fuera { opacity: .12; }
.mapa-principal .boton { justify-self: start; }

@media (min-width: 48em) {
  .mapa-portada { grid-template-columns: 42fr 58fr; gap: 0; }
  .mapa-lado { order: 0; padding-right: 2.5rem; padding-top: .5rem; }
}

/* ---------- 6 · comprueba ---------- */
.comprueba { padding-top: var(--section); display: grid; gap: 2rem; }
.comprueba-figura { background: var(--surface); display: grid; place-items: center; padding: 2rem; aspect-ratio: 4 / 3; }
.comprueba-figura:has(picture) { padding: 0; display: block; overflow: clip; }
.comprueba-figura picture { width: 100%; height: 100%; }
.comprueba-figura picture img { filter: grayscale(1) contrast(1.05); }
.comprueba-figura .botella { height: 100%; width: auto; max-height: 26rem; }
.comprueba-texto { display: grid; gap: 1.25rem; align-content: center; justify-items: start; }
.comprueba-texto > p { max-width: 34ch; font-size: var(--step-lead); line-height: 1.3; }
.comprueba-desplegable { width: 100%; }
.comprueba-desplegable > summary { list-style: none; display: inline-flex; cursor: pointer; }
.comprueba-desplegable > summary::-webkit-details-marker { display: none; }
.comprueba-desplegable[open] > summary { display: none; }
.comprueba-desplegable:not([open]) > :not(summary) { display: none; }
.comprueba-desplegable .test { margin-top: .5rem; }

@media (min-width: 48em) {
  .comprueba { grid-template-columns: 42fr 58fr; gap: 0; }
  .comprueba-figura { aspect-ratio: auto; height: 26rem; margin-right: 2.5rem; }
}

/* ---------- 7 · cierre ---------- */
.cierre { padding-top: var(--section); display: grid; gap: 2rem; }
.cierre-derecha { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; align-items: start; }
.cierre-frase { font-size: var(--step-lead); line-height: 1.25; max-width: 30ch; font-weight: 600; }
.cierre-foto { width: 100%; aspect-ratio: 1; }
.cierre-foto img { filter: grayscale(1) contrast(1.05); }
.cierre-contacto { display: grid; gap: .75rem; align-content: start; }
.cierre-pregunta { font-size: var(--step-lead); font-weight: 700; letter-spacing: -0.01em; }
.cierre-enlaces { display: grid; gap: .35rem; }
.cierre-enlaces a { font-weight: 600; font-size: var(--step-lead); }
.cierre-nota { font-size: var(--step-body); overflow-wrap: anywhere; }

@media (min-width: 48em) {
  .cierre { grid-template-columns: 42fr 58fr; gap: 0; align-items: start; padding-top: var(--section); }
  .cierre-frase { padding-right: 2.5rem; }
  .cierre-derecha { grid-template-columns: 13rem minmax(0, 1fr); gap: 2rem; }
  .cierre-frase { font-size: clamp(1.35rem, 1rem + 1.1vw, 1.875rem); line-height: 1.22; max-width: 26ch; }
}
.es-portada .pie { margin-top: 7.5rem; }

/* ---------- movimiento de la portada ---------- */
.portada-titulo .linea { overflow: clip; padding-bottom: .1em; margin-bottom: -.1em; }
.portada-titulo [data-linea] { display: block; }
.etiqueta-escena { transform-origin: 50% var(--zy, 50%); }
.senal { transition: opacity var(--t-ui) ease; }
@media (prefers-reduced-motion: no-preference) {
  /* carga: titular por líneas, mosaico tesela a tesela, frase y botón; todo listo en 1,2 s */
  .js .portada-titulo [data-linea] { transform: translateY(105%); animation: subir-linea 900ms var(--ease-expo) forwards; animation-delay: calc(120ms + var(--i) * var(--stagger-line)); }
  .js .tesela { clip-path: inset(100% 0 0 0); animation: abrir-tesela 900ms var(--ease-in-out) forwards; animation-delay: calc(60ms + var(--i) * 45ms); }
  .js [data-carga] { opacity: 0; transform: translateY(12px); animation: aparecer 500ms var(--ease-out) forwards; animation-delay: var(--d); }

  /* escena: la etiqueta se acerca a la zona de cada señal */
  .js .etiqueta-escena { transition: transform 800ms var(--ease-in-out); }
  .js [data-escena].con-zona .etiqueta-escena { transform: scale(1.32); }

  .zona-fondo { transition: fill var(--t-ui) ease; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 48em) {
  .js [data-escena].con-zona .senal { opacity: .45; }
  .js [data-escena].con-zona .senal.activa { opacity: 1; }
}
@media (prefers-reduced-motion: no-preference) {
  /* por / para: las palabras emergen desde dentro de su caja */
  .js [data-revelar="palabras"] .especimen-caja span { transform: translateY(70%); transition: transform 1100ms var(--ease-expo); }
  .js [data-revelar="palabras"] .especimen-b .especimen-caja span { transition-delay: 140ms; }
  .js [data-revelar="palabras"].is-in .especimen-caja span { transform: none; }

  /* mapa: los puntos aparecen uno tras otro */
  .js [data-revelar="puntos"] .punto { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity 400ms var(--ease-out), transform 500ms var(--ease-out); transition-delay: calc(var(--i, 0) * 18ms); }
  .js [data-revelar="puntos"].is-in .punto { opacity: 1; transform: none; }
  .js [data-revelar="puntos"].is-in .punto.fuera { opacity: .12; transition-delay: 0ms; }

  /* al cambiar de pestaña, las bandas vuelven a entrar */
  .panel.recien .bandas > * { animation: aparecer 500ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms); }
}
@keyframes subir-linea { to { transform: none; } }
@keyframes abrir-tesela { to { clip-path: inset(0); } }
@keyframes aparecer { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* en el móvil cada señal enseña su recorte de la etiqueta; en escritorio lo hace la escena fija */
.senal-recorte { display: block; width: 100%; max-width: 22rem; height: auto; background: var(--field-2); padding: .75rem; margin-bottom: .9rem; font-family: var(--font); }
@media (min-width: 48em) { .senal-recorte { display: none; } }

.declaracion-texto .line { text-indent: 0; }


/* ---------- capítulos de color: cortes limpios, sin degradados ---------- */
.capitulo-negro { background: var(--field-1); color: var(--field-1-ink); margin-top: var(--section); padding-block: clamp(4rem, 8vw, 7rem); }
.capitulo-negro .especimen-caja { background: none; }
.capitulo-negro .especimen-b .especimen-caja { background: none; color: inherit; }
.capitulo-negro .porpara-etiquetas .etiqueta { background: #1d1d1d; }
.capitulo-negro .enlace { color: #fff; }
.capitulo-negro .especimen figcaption, .capitulo-negro figcaption { color: #e6e6e1; }
@media (max-width: 47.99em) {
  .capitulo-negro .especimen-caja { background: #1d1d1d; }
  .capitulo-negro .especimen-b .especimen-caja { background: #fff; color: var(--ink); }
}
.capitulo-gris { background: var(--surface); margin-top: var(--section); padding-block: clamp(4rem, 8vw, 7rem); }
.capitulo-gris .comprueba-figura { background: var(--surface-2); }
.capitulo-gris .test-pregunta fieldset { background: var(--bg); }
.capitulo-gris .test-pregunta:nth-child(even) fieldset { background: #fafaf8; }
.familias { padding-top: var(--section); }
.cierre { padding-bottom: 0; }
.mapa-portada + .capitulo-gris { margin-top: 0; }