/* Midad · gemelo web. Sistema visual de DISENO.md, territorio F: «la etiqueta leída».
   Papel con grano, una tinta (cobalto), cuatro sellos. Los colores de veredicto viven solo en los sellos y las insignias.
   Tipos: Barlow Condensed (grito), Barlow Semi Condensed (lectura), IBM Plex Mono (susurro), Reem Kufi (árabe). Todas OFL 1.1. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 800; font-style: normal; font-display: swap; src: url('/fonts/BarlowCondensed-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 900; font-style: normal; font-display: swap; src: url('/fonts/BarlowCondensed-Black.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/BarlowSemiCondensed-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('/fonts/BarlowSemiCondensed-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('/fonts/IBMPlexMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Reem Kufi'; font-weight: 400 700; font-style: normal; font-display: swap; src: url('/fonts/ReemKufi.woff2') format('woff2'); }

:root {
  --papel: #F5F0E8;
  --papel-hondo: #EDE6D6;
  --papel-claro: #FAF7F0;
  --tinta: #1F3D9B;
  --suave: #44579C;
  --halal: #1E7A4F;
  --dudoso: #B8790A;
  --dudoso-txt: #7A5208;
  --haram: #C4321C;
  --grito: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --lectura: 'Barlow Semi Condensed', 'Arial Narrow', 'Helvetica Neue', sans-serif;
  --susurro: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --ancho: 70rem;
  --m: clamp(1.1rem, 4vw, 2rem);
  /* grano del papel: ruido fijo, una sola tesela */
  --grano: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='11'/><feColorMatrix type='matrix' values='0 0 0 0 .55  0 0 0 0 .5  0 0 0 0 .42  0 0 0 .5 0'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='.5'/></svg>");
  /* retícula de estrella de ocho, trazada a regla */
  --girih: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120' fill='none' stroke='%231F3D9B' stroke-width='1'><rect x='34' y='34' width='52' height='52'/><rect x='34' y='34' width='52' height='52' transform='rotate(45 60 60)'/><circle cx='60' cy='60' r='16'/><path d='M0 0 L34 34 M120 0 L86 34 M0 120 L34 86 M120 120 L86 86'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papel) var(--grano);
  color: var(--tinta);
  font: 400 1.25rem/1.5 var(--lectura);
  min-height: 100vh;
  display: flex; flex-direction: column;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; border-radius: 2px; }
.defs-svg { position: absolute; width: 0; height: 0; overflow: hidden; }
.oculto, [hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: var(--m); top: -4rem; background: var(--tinta); color: var(--papel); padding: .6rem 1rem; z-index: 50; font-family: var(--susurro); font-size: .85rem; }
.saltar:focus { top: .5rem; }

.mono, .rot { font-family: var(--susurro); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 400; line-height: 1.5; }
.rot { margin: 0 0 .6rem; color: var(--suave); }
.mono b, .mono strong { font-weight: 500; }
.sin-transf { text-transform: none; letter-spacing: .02em; }

/* ───────── cabecera ───────── */
.cab { max-width: var(--ancho); width: 100%; margin: 0 auto; padding: 1rem var(--m) .4rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1.4rem; }
.marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.marca svg { width: 2.1rem; height: 2.1rem; flex: none; }
.marca span { font: 900 1.9rem/1 var(--grito); text-transform: uppercase; letter-spacing: .01em; }
.marca i { font: 700 1.25rem/1 'Reem Kufi', serif; font-style: normal; color: var(--suave); }
.nav { display: flex; flex-wrap: wrap; gap: .2rem 1.1rem; font: 500 .78rem/1.4 var(--susurro); letter-spacing: .08em; text-transform: uppercase; }
.nav a { text-decoration: none; padding: .35rem 0; border-bottom: 2px solid transparent; }
.nav a:hover, .nav a[aria-current] { border-bottom-color: var(--tinta); }
.idiomas { display: flex; gap: .3rem; font: 500 .78rem/1 var(--susurro); letter-spacing: .08em; }
.idiomas a { text-decoration: none; padding: .42rem .55rem; border: 1.5px solid var(--tinta); border-radius: 3px; text-transform: uppercase; }
.idiomas a[aria-current] { background: var(--tinta); color: var(--papel); }
.cab .nav { order: 2; margin-left: auto; }
.cab .idiomas { order: 3; }
@media (max-width: 52rem) { .cab .idiomas { margin-left: auto; } .cab .nav { order: 4; flex-basis: 100%; margin-left: 0; } }

main { flex: 1; width: 100%; }
.caja { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--m); }
.seccion { padding: clamp(2rem, 6vw, 3.5rem) 0; }
.seccion + .seccion { border-top: 1.5px solid var(--tinta); }
h1, h2, h3 { font-family: var(--grito); text-transform: uppercase; font-weight: 800; line-height: .98; margin: 0 0 .7rem; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 8.2vw, 5rem); font-weight: 900; }
h2 { font-size: clamp(1.8rem, 4.6vw, 2.7rem); }
h3 { font-size: 1.45rem; }
p { margin: 0 0 1rem; text-wrap: pretty; max-width: 42rem; }
.lede { font-size: 1.4rem; line-height: 1.4; max-width: 38rem; }

/* ───────── portada ───────── */
.heroe { position: relative; padding: clamp(1.5rem, 5vw, 3rem) 0 clamp(2rem, 6vw, 3.5rem); }
.heroe::before { content: ''; position: absolute; right: -4rem; top: -1rem; width: min(34rem, 70vw); height: 24rem; background: var(--girih); background-size: 120px 120px; opacity: .13; pointer-events: none; mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%); }
.heroe .caja { position: relative; }
.heroe h1 { max-width: 14ch; }

.etiqueta { position: relative; background: var(--papel-claro) var(--grano); border: 1.5px solid var(--tinta); border-radius: 6px; box-shadow: 0 1px 0 rgba(31,61,155,.15), 0 18px 40px -22px rgba(31,61,155,.45); margin-top: 1.6rem; overflow: hidden; }
.etiqueta::after { content: ''; position: absolute; left: 50%; top: .5rem; width: 2.8rem; height: .28rem; margin-left: -1.4rem; border-radius: 3px; background: var(--tinta); opacity: .35; }
.etiqueta-in { display: grid; gap: 0; }
@media (min-width: 62rem) { .etiqueta-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .etiqueta-in > .col-res { border-left: 1.5px solid var(--tinta); } }
.col-ent, .col-res { padding: 1.6rem clamp(1.1rem, 3vw, 1.8rem) 1.5rem; position: relative; }
.col-res { border-top: 1.5px solid var(--tinta); }
@media (min-width: 62rem) { .col-res { border-top: 0; background-image: var(--girih); background-size: 120px 120px; background-position: right -30px bottom -30px; background-repeat: no-repeat; } }
.col-ent label.rot { display: block; }
#cmp-texto { width: 100%; min-height: 9.5rem; resize: vertical; border: 0; border-bottom: 1.5px solid var(--tinta); background: transparent; color: var(--tinta); font: 400 1.3rem/1.6em var(--lectura); padding: 0 0 .5rem; background-image: repeating-linear-gradient(transparent 0 calc(1.6em - 1px), rgba(31,61,155,.18) calc(1.6em - 1px) 1.6em); border-radius: 0; }
#cmp-texto::placeholder { color: var(--suave); opacity: .85; }
.ejemplos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .9rem; }
.ejemplos .rot { margin: 0 .3rem 0 0; }
.ficha-btn { font: 500 .8rem/1 var(--susurro); letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--tinta); border: 1.5px solid var(--tinta); border-radius: 999px; padding: .6rem .95rem; cursor: pointer; min-height: 2.6rem; transition: background .12s, color .12s; }
.ficha-btn:hover { background: var(--papel-hondo); }
.ficha-btn[aria-pressed='true'] { background: var(--tinta); color: var(--papel); }
.privado { margin-top: 1.1rem; max-width: none; color: var(--suave); }

.banda-sello { display: flex; justify-content: center; margin: .2rem 0 .4rem; min-height: 12rem; }
.sello { display: block; width: min(100%, 22rem); height: auto; overflow: visible; }
.cae .sello { animation: cae .3s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes cae { from { transform: scale(1.4) rotate(-7deg); opacity: 0; } 60% { opacity: 1; } to { transform: none; opacity: 1; } }

#cmp-lista { font: 400 1.2rem/1.7 var(--lectura); white-space: pre-wrap; margin: .6rem 0 0; padding-top: .9rem; border-top: 1.5px solid var(--tinta); }
#cmp-lista:empty { display: none; }
mark { background: none; color: inherit; font-weight: 600; padding: 0; }
mark.nota { border-bottom: 2px dotted var(--tinta); font-weight: 400; }
mark.desconocido { border-bottom: 2px dashed var(--tinta); }
mark.haram, mark.dudoso { font-weight: 600; }
.rodea { position: relative; display: inline-block; white-space: nowrap; font-weight: 800; }
.ovalo { position: absolute; left: -.5em; top: -.28em; width: calc(100% + 1em); height: calc(100% + .56em); color: var(--tinta); pointer-events: none; overflow: visible; }
.ovalo path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.on .ovalo path { animation: dib .55s .1s ease-out both; }
@keyframes dib { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

.porque { list-style: none; margin: 1rem 0 0; padding: 0; }
.porque li { margin: .55rem 0; max-width: 40rem; }
.porque li b { font: 800 1.6rem/1.05 var(--grito); text-transform: uppercase; letter-spacing: -.005em; display: block; }
.porque li.mono { text-transform: none; letter-spacing: .03em; font-size: .82rem; color: var(--suave); }
.porque li.vacio { color: var(--suave); }
.quien-caja { margin-top: 1.1rem; }
.fuentes { list-style: none; margin: 0; padding: 0; }
.fuentes li { margin: .3rem 0; }
.fuentes .mono { text-transform: none; letter-spacing: .02em; color: var(--suave); }
.enlaces { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.enlaces li { display: inline-flex; align-items: center; gap: .5rem; }
#cmp-fichas { margin-top: 1rem; }
#cmp-fichas h3 { font: 400 .78rem var(--susurro); letter-spacing: .09em; color: var(--suave); }

details.criterios { margin-top: 1.4rem; border-top: 1.5px solid var(--tinta); padding-top: .9rem; }
details.criterios summary { cursor: pointer; font: 500 .85rem/1.3 var(--susurro); letter-spacing: .07em; text-transform: uppercase; padding: .4rem 0; list-style: none; }
details.criterios summary::-webkit-details-marker { display: none; }
details.criterios summary::after { content: ' +'; }
details.criterios[open] summary::after { content: ' \2212'; }
.crit { display: grid; gap: .3rem; margin: .8rem 0; font-size: 1.05rem; }
.crit span { font-weight: 600; }
select { font: 400 1.1rem var(--lectura); color: var(--tinta); background: var(--papel-claro); border: 1.5px solid var(--tinta); border-radius: 3px; padding: .55rem .6rem; min-height: 2.8rem; width: 100%; }
.crit-texto { color: var(--suave); font-size: 1rem; max-width: 36rem; }

/* ───────── insignias de veredicto (forma + tinta, nunca solo color) ───────── */
.vb { display: inline-block; font: 800 .95rem/1 var(--grito); text-transform: uppercase; letter-spacing: .05em; padding: .22em .6em .2em; white-space: nowrap; vertical-align: .1em; }
.vb-halal { color: var(--halal); border-radius: 999px; box-shadow: inset 0 0 0 2px var(--halal), inset 0 0 0 3.5px var(--papel), inset 0 0 0 4.5px var(--halal); padding: .3em .85em .26em; }
.vb-dudoso { color: var(--dudoso-txt); background: linear-gradient(var(--papel-claro), var(--papel-claro)) center / calc(100% - 12px) calc(100% - 6px) no-repeat, repeating-linear-gradient(128deg, var(--dudoso) 0 2px, transparent 2px 6px); box-shadow: inset 0 0 0 1.5px var(--dudoso); padding: .22em .85em .2em; }
.vb-dudoso::before { content: ''; }
.vb-haram { color: var(--papel); background: var(--haram); }
.vb-desconocido { color: var(--tinta); border: 2px dashed var(--tinta); padding: .15em .5em; }

/* ───────── bloques de la portada ───────── */
.rejilla { display: grid; gap: 1rem 1.4rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); margin: 1.3rem 0 0; padding: 0; list-style: none; }
.tarj { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .95rem 1.05rem; background: var(--papel-claro); border: 1.5px solid var(--tinta); border-radius: 4px; text-decoration: none; min-height: 3.6rem; transition: transform .14s cubic-bezier(.2, 1.4, .4, 1), box-shadow .14s; }
.tarj:hover { transform: translateY(-2px) rotate(-.4deg); box-shadow: 0 8px 18px -12px rgba(31, 61, 155, .6); }
.tarj b { font: 800 1.25rem/1.05 var(--grito); text-transform: uppercase; display: block; }
.tarj .mono { display: block; color: var(--suave); text-transform: none; letter-spacing: .02em; font-size: .74rem; }
.como { display: grid; gap: 1.2rem 2rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin-top: 1.3rem; counter-reset: p; }
.como > div { counter-increment: p; border-top: 1.5px solid var(--tinta); padding-top: .8rem; }
.como > div::before { content: counter(p, decimal-leading-zero); font: 500 .8rem var(--susurro); color: var(--suave); display: block; margin-bottom: .3rem; }
.como h3 { font-size: 1.55rem; }
.como p { font-size: 1.1rem; }

.app { background: var(--papel-hondo) var(--grano); border: 1.5px solid var(--tinta); border-radius: 6px; padding: clamp(1.3rem, 4vw, 2.2rem); display: grid; gap: 1.2rem 2rem; align-items: center; position: relative; overflow: hidden; }
@media (min-width: 52rem) { .app { grid-template-columns: 1.3fr 1fr; } }
.app::before { content: ''; position: absolute; right: -3rem; bottom: -3rem; width: 16rem; height: 16rem; background: var(--girih); background-size: 120px 120px; opacity: .12; pointer-events: none; }
.app > * { position: relative; }
.app h2 { margin-bottom: .5rem; }
.app p { margin-bottom: .4rem; }
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.4rem; padding: .7rem 1.6rem; background: var(--tinta); color: var(--papel); font: 800 1.3rem/1 var(--grito); text-transform: uppercase; letter-spacing: .04em; text-decoration: none; border-radius: 3px; border: 0; cursor: pointer; transition: transform .12s cubic-bezier(.2, 1.4, .4, 1); }
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-borde { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); }
.btn-pronto { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 1.5px var(--tinta); cursor: default; }
.btn-pronto:hover { transform: none; }
.app .mono { color: var(--suave); text-transform: none; letter-spacing: .03em; margin-top: .6rem; display: block; }
.captura { justify-self: center; width: min(14rem, 60vw); }


/* ───────── fichas por ingrediente ───────── */
.migas.caja { padding-top: 1rem; padding-bottom: 0; }
.migas { font: 400 .78rem/1.5 var(--susurro); letter-spacing: .06em; text-transform: uppercase; color: var(--suave); }
.migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .1rem .5rem; }
.migas li:not(:last-child)::after { content: '/'; margin-left: .5rem; }
.migas a { color: var(--tinta); }
.ficha-cab { display: grid; gap: 1rem 2rem; padding: clamp(1.2rem, 4vw, 2.4rem) 0 1.5rem; align-items: center; }
@media (min-width: 52rem) { .ficha-cab { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.ficha-cab h1 { font-size: clamp(2.2rem, 6.4vw, 4.2rem); margin-bottom: .8rem; }
.ficha-cab .sello { width: min(100%, 24rem); justify-self: center; }
.ficha-cab .banda-sello { min-height: 0; }
.veredicto-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: .4rem .8rem; margin: 0 0 .4rem; max-width: none; }
.veredicto-linea .mono { color: var(--suave); }
.gran-porque { font: 800 clamp(1.7rem, 4.6vw, 2.5rem)/1.04 var(--grito); text-transform: uppercase; max-width: 30ch; margin: 0 0 1rem; }
.bloque { margin-top: 2.2rem; }
.bloque h2 { font-size: 1.9rem; }
.tabla { width: 100%; border-collapse: collapse; margin: 1rem 0 0; font-size: 1.1rem; }
.tabla th, .tabla td { text-align: left; vertical-align: top; padding: .75rem .9rem .75rem 0; border-top: 1.5px solid var(--tinta); }
.tabla th { font: 500 .75rem var(--susurro); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); border-top: 0; border-bottom: 1.5px solid var(--tinta); }
.tabla td ul { list-style: none; margin: 0; padding: 0; }
.tabla td li { margin: .15rem 0; }
@media (max-width: 40rem) {
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla td { display: block; width: 100%; }
  .tabla tr { border-top: 1.5px solid var(--tinta); padding: .7rem 0; }
  .tabla td { border: 0; padding: .15rem 0; }
}
.cita { margin: .8rem 0 0; padding: .1rem 0 .1rem 1rem; border-left: 3px solid var(--tinta); font-size: 1.05rem; color: var(--tinta); max-width: 44rem; }
.cita .mono { display: block; margin-top: .3rem; color: var(--suave); text-transform: none; letter-spacing: .02em; }
.fuente { margin: 1.1rem 0 0; }
.fuente > b { font: 800 1.35rem/1.1 var(--grito); text-transform: uppercase; }
.aviso { border: 2px dashed var(--tinta); border-radius: 4px; padding: .9rem 1.1rem; max-width: 44rem; margin: 2rem 0 0; font-size: 1.1rem; background: rgba(250, 247, 240, .6); }
.aviso b { font: 800 1.15rem var(--grito); text-transform: uppercase; letter-spacing: .03em; }
dl.faq { margin: 1rem 0 0; max-width: 44rem; }
dl.faq dt { font: 800 1.35rem/1.15 var(--grito); text-transform: uppercase; margin-top: 1.2rem; }
dl.faq dd { margin: .3rem 0 0; }
.relac { display: flex; flex-wrap: wrap; gap: .5rem .6rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.relac a { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .8rem; border: 1.5px solid var(--tinta); border-radius: 3px; text-decoration: none; background: var(--papel-claro); min-height: 2.6rem; }
.relac a:hover { background: var(--papel-hondo); }

/* ───────── índices ───────── */
.letras { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 1.2rem 0 0; }
.letras a, .letras span { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6rem; height: 2.6rem; padding: 0 .5rem; border: 1.5px solid var(--tinta); border-radius: 3px; text-decoration: none; font: 800 1.2rem var(--grito); }
.letras a:hover { background: var(--papel-hondo); }
.letras a[aria-current] { background: var(--tinta); color: var(--papel); }
.letras span { opacity: .35; border-style: dashed; }
.indice { columns: 16rem; column-gap: 2rem; list-style: none; margin: 1.4rem 0 0; padding: 0; }
.indice li { break-inside: avoid; margin: 0 0 .45rem; display: flex; align-items: baseline; gap: .5rem; }
.indice li a { flex: 0 1 auto; }

/* ───────── textos largos ───────── */
.texto { padding: 1.5rem 0 3rem; }
article.texto { max-width: 46rem; }
.caja.texto { max-width: var(--ancho); }
.texto h1 { font-size: clamp(2.3rem, 6.4vw, 4rem); margin-bottom: 1rem; }
.texto h2 { margin-top: 2.4rem; font-size: 2rem; }
.texto h3 { margin-top: 1.6rem; }
.texto ul, .texto ol { padding-left: 1.3rem; max-width: 42rem; }
.texto li { margin: .35rem 0; }
.texto .tabla td, .texto .tabla th { font-size: 1.05rem; }
.texto table { max-width: 100%; }
.fecha-linea { color: var(--suave); }
.registro { list-style: none; padding: 0; margin: 1.2rem 0; }
.registro li { border-top: 1.5px solid var(--tinta); padding: .9rem 0; }
.registro b { font: 800 1.25rem/1.1 var(--grito); text-transform: uppercase; }

/* ───────── pie ───────── */
.pie { margin-top: 3rem; border-top: 1.5px solid var(--tinta); background: var(--papel-hondo) var(--grano); }
.pie-in { max-width: var(--ancho); margin: 0 auto; padding: 2rem var(--m) 2.4rem; display: grid; gap: 1.6rem 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); font-size: 1.05rem; }
.pie ul { list-style: none; padding: 0; margin: 0; }
.pie li { margin: .3rem 0; }
.pie p { font-size: 1rem; margin-bottom: .6rem; }
.pie .mono { color: var(--suave); text-transform: none; letter-spacing: .03em; }

/* ───────── pasarela del dominio raíz y 404 ───────── */
.pasarela { min-height: 100vh; display: grid; place-items: center; padding: 2rem var(--m); }
.pasarela-in { max-width: 44rem; width: 100%; }
.pasarela h1 { font-size: clamp(2.8rem, 12vw, 6rem); }
.pasarela ul { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .8rem; }
.pasarela li a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border: 1.5px solid var(--tinta); border-radius: 4px; background: var(--papel-claro); text-decoration: none; font: 800 1.8rem/1 var(--grito); text-transform: uppercase; min-height: 4rem; }
.pasarela li a:hover { background: var(--papel-hondo); }
.pasarela li a .mono { font-weight: 400; text-transform: none; letter-spacing: .03em; color: var(--suave); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) {
  .vb-haram { border: 2px solid; }
  .etiqueta, .tarj, .app, .btn { border: 2px solid; }
}
@media print {
  body { background: #fff; }
  .cab, .pie, .app, .ejemplos, details.criterios { display: none; }
}

/* ───────── pequeños ajustes (sin estilos en línea: la CSP no los admite) ───────── */
.sep { margin-top: 1.4rem; }
.h-404 { font-size: clamp(1.8rem, 6vw, 2.6rem); margin-top: 1.4rem; }
.pasarela .sello { width: min(100%, 15rem); margin: 1rem 0; }
.pasarela .marca { margin-bottom: 1.2rem; }
.mini { background: var(--papel-claro) var(--grano); border: 1.5px solid var(--tinta); border-radius: 6px; padding: 1rem 1rem .8rem; transform: rotate(2deg); box-shadow: 0 18px 30px -18px rgba(31, 61, 155, .6); position: relative; overflow: hidden; }
.mini::before { content: ''; position: absolute; right: -2rem; bottom: -2rem; width: 10rem; height: 10rem; background: var(--girih); background-size: 120px 120px; opacity: .14; }
.mini > * { position: relative; }
.mini-cab { color: var(--suave); }
.mini .mini-sello { width: 78%; margin: .1rem 0 0 auto; }
.mini-frase { font: 800 1.25rem/1.05 var(--grito); text-transform: uppercase; margin: .2rem 0 .8rem; max-width: none; }
.mini-pie { border-top: 1.5px solid var(--tinta); padding-top: .4rem; color: var(--suave); font-size: .66rem; }
.captura { justify-self: center; width: min(17rem, 80vw); }
.fuente > a.mono { display: inline-block; margin-top: .45rem; }