/* Soft Signal · web de recursos. Un albarán por recurso: el ticket se imprime al llegar y lo de dentro se copia de un toque. */

@font-face { font-family: "Bricolage Grotesque"; src: url("fuentes/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fuentes/jetbrains-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --crema: #f3efe8; --tinta: #161614; --azul: #5e7fc8; --azul-hondo: #3e5a9e; --azul-claro: #8aa3db; --rosa: #e6a39a;

  --fondo: var(--crema);
  --papel: #fbf9f5;
  --codigo: #ece6db;
  --texto: var(--tinta);
  --suave: #5b5850;
  --linea: #d9d1c3;
  --guia: #b9b1a3;
  --acento: var(--azul);          /* grande: titulares, sellos */
  --acento-texto: var(--azul-hondo); /* pequeño: enlaces y datos */
  --boton: var(--tinta);
  --boton-texto: var(--crema);
  --sombra: 22 22 20;
  --seleccion: #cfdaf2;

  --sans: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sale: cubic-bezier(.16, 1, .3, 1);
  --margen: max(20px, env(safe-area-inset-left, 0px));
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: var(--tinta); --papel: #211f1c; --codigo: #1b1a17; --texto: #f3efe8; --suave: #aaa59b; --linea: #3a3833; --guia: #5a574f;
    --acento: var(--azul-claro); --acento-texto: var(--azul-claro); --boton: var(--crema); --boton-texto: var(--tinta); --sombra: 0 0 0; --seleccion: #34406a;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: var(--tinta); --papel: #211f1c; --codigo: #1b1a17; --texto: #f3efe8; --suave: #aaa59b; --linea: #3a3833; --guia: #5a574f;
  --acento: var(--azul-claro); --acento-texto: var(--azul-claro); --boton: var(--crema); --boton-texto: var(--tinta); --sombra: 0 0 0; --seleccion: #34406a;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; scrollbar-color: var(--guia) var(--fondo); }
body {
  margin: 0; background: var(--fondo); color: var(--texto);
  font: 400 1.0625rem/1.6 var(--sans); font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; caret-color: var(--acento);
  padding-inline: var(--margen) max(20px, env(safe-area-inset-right, 0px));
  min-height: 100svh; display: flex; flex-direction: column;
}
::selection { background: var(--seleccion); color: var(--texto); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.035em; line-height: 1; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
a, button { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2.5px solid var(--acento); outline-offset: 3px; border-radius: 6px; }
code { font: 400 .88em var(--mono); background: var(--codigo); padding: .1em .4em; border-radius: 5px; }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.azul { color: var(--acento); }
main { flex: 1; width: 100%; max-width: 1240px; margin-inline: auto; }

/* ---------- Barra ---------- */
.barra { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; max-width: 1240px; margin: 0 auto; padding-block: max(14px, env(safe-area-inset-top, 0px)) 14px; }
.marca { display: block; padding: 6px 0; border-radius: 6px; }
.wordmark, .simbolo { display: block; background: var(--acento); -webkit-mask: var(--img) center / contain no-repeat; mask: var(--img) center / contain no-repeat; }
.wordmark { --img: url("img/wordmark.png"); width: 60px; height: 38px; transition: transform .5s var(--sale); }
.marca:hover .wordmark { transform: rotate(-3deg) scale(1.04); }
.simbolo { --img: url("img/simbolo.png"); width: 28px; height: 28px; }
.barra-lema { font: 400 .8125rem/1 var(--mono); color: var(--suave); text-transform: uppercase; letter-spacing: .08em; }
.volver { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-weight: 600; font-size: .9375rem; text-decoration: none; color: var(--suave); transition: color .2s; }
.volver .ico { transition: transform .35s var(--sale); }
.volver:hover { color: var(--texto); }
.volver:hover .ico { transform: translateX(-4px); }

/* ---------- Botones ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  font: 600 .9375rem/1 var(--sans); letter-spacing: -0.005em; color: var(--boton-texto); background: var(--boton);
  border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; user-select: none;
  transition: transform .35s var(--sale), background-color .2s, color .2s, box-shadow .35s var(--sale);
}
.boton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgb(var(--sombra) / .55); }
.boton:active { transform: translateY(0) scale(.97); transition-duration: .08s; }
.boton .ico { width: 18px; height: 18px; }
.boton-sec { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--guia); }
.boton-sec:hover { box-shadow: inset 0 0 0 1.5px var(--texto); }
.boton-grande { width: 100%; min-height: 56px; padding: 16px 22px; justify-content: space-between; font-size: 1.0625rem; }
.boton-grande .ico { width: 22px; height: 22px; transition: transform .45s var(--sale); }
.boton.hecho { background: var(--acento); color: var(--tinta); }

/* ---------- Softy ---------- */
.softy { display: block; overflow: visible; }
.softy .onda { animation: onda 2.6s steps(1) infinite; }
.softy .onda-1 { animation-delay: .35s; }
.softy .onda-2 { animation-delay: .7s; }
.softy-felices { opacity: 0; }
.softy-ojos { animation: parpadeo 5.2s steps(1) infinite; }
.softy-cuerpo { animation: flota 3.2s ease-in-out infinite; }
.softy-brazo { transform-box: fill-box; }
.softy-brazo-i { transform-origin: 100% 0; }
.softy-brazo-d { transform-origin: 0 0; animation: saluda 1.4s .9s var(--sale) both; }
.softy:hover .softy-ojos, .softy.contento .softy-ojos { opacity: 0; animation: none; }
.softy:hover .softy-felices, .softy.contento .softy-felices { opacity: 1; }
.softy.contento .softy-brazo-i { animation: brazo-i .7s var(--sale); }
.softy.contento .softy-brazo-d { animation: brazo-d .7s var(--sale); }
@keyframes onda { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .18; } }
@keyframes parpadeo { 0%, 94% { transform: none; } 95%, 97% { transform: translateY(1.4px) scaleY(.2); } 98%, 100% { transform: none; } }
.softy-ojos { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-.6px); } }
@keyframes saluda { 0%, 100% { transform: rotate(0); } 20%, 60% { transform: rotate(-150deg); } 40%, 80% { transform: rotate(-115deg); } }
@keyframes brazo-i { 50% { transform: rotate(140deg); } }
@keyframes brazo-d { 50% { transform: rotate(-140deg); } }

/* ---------- Portada: saludo ---------- */
.hola { position: relative; padding-block: clamp(12px, 4vw, 48px) 26px; }
.softy-hola { width: 64px; height: auto; position: absolute; right: 0; top: clamp(8px, 4vw, 40px); }
.hola h1 { font-size: clamp(2.25rem, 7.4vw, 5.25rem); line-height: .93; letter-spacing: -0.04em; max-width: 11ch; padding-right: 64px; }
.hola-texto { margin-top: 14px; max-width: 34ch; font-size: 1.0625rem; line-height: 1.5; color: var(--suave); }

.entregas { display: flex; flex-direction: column; gap: 56px; }
.vacio { color: var(--suave); padding: 18px 0; border-top: 1px solid var(--linea); }

/* ---------- El albarán ---------- */
.albaran { position: relative; max-width: 560px; padding-top: 10px; }
/* La ranura de la impresora de la que sale el ticket */
.albaran::before { content: ""; position: absolute; z-index: 2; top: 0; left: -10px; right: -10px; height: 12px; border-radius: 999px; background: var(--texto); box-shadow: inset 0 -3px 0 rgb(255 255 255 / .12); }
.albaran-papel { position: relative; background: var(--papel); padding: 30px 22px 30px; margin-bottom: 12px; box-shadow: 0 1px 0 rgb(var(--sombra) / .05), 0 26px 34px -22px rgb(var(--sombra) / .3); }
/* Borde troquelado inferior */
.albaran-papel::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 10px; background: linear-gradient(135deg, var(--papel) 50%, transparent 50.5%) 0 0 / 14px 14px repeat-x, linear-gradient(-135deg, var(--papel) 50%, transparent 50.5%) 0 0 / 14px 14px repeat-x; }
.albaran-campos { display: grid; grid-template-columns: auto auto 1fr; gap: 6px 22px; margin: 0; padding-bottom: 16px; border-bottom: 1.5px dashed var(--guia); }
.albaran-campos div { min-width: 0; }
.albaran-campos dt { font: 400 .6875rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); }
.albaran-campos dd { margin: 4px 0 0; font: 400 .875rem/1.2 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.campo-palabra { justify-self: end; text-align: right; }
.campo-palabra dd { display: inline-block; margin-top: 3px; padding: 3px 8px 2px; color: var(--acento-texto); border: 1.5px solid currentColor; border-radius: 5px; letter-spacing: .06em; transform: rotate(-2deg); }
.albaran-titulo { margin-top: 22px; font-size: clamp(2rem, 7vw, 2.75rem); line-height: .95; letter-spacing: -0.04em; }
.albaran-titulo a { text-decoration: none; }
.albaran-portada .albaran-titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.albaran-resumen { margin-top: 10px; color: var(--suave); font-size: 1rem; line-height: 1.5; }

.albaran-filas { list-style: none; margin: 22px 0 0; padding: 0; }
.fila { display: grid; grid-template-columns: 1.6em auto 1fr auto; align-items: baseline; gap: 10px; padding-block: 12px; border-top: 1px solid var(--linea); }
.fila:last-child { border-bottom: 1px solid var(--linea); }
.fila-n, .fila-dato { font: 400 .8125rem/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--suave); }
.fila-nombre { font-weight: 600; font-size: 1rem; line-height: 1.25; text-decoration: none; min-width: 0; }
.fila-guia { align-self: end; height: 1px; margin-bottom: .32em; background: radial-gradient(circle, var(--guia) 1px, transparent 1.2px) 0 0 / 6px 2px repeat-x; height: 2px; transition: opacity .3s; }
a.fila-nombre { position: relative; z-index: 1; }
a.fila-nombre:hover { color: var(--acento-texto); }

.albaran-total { margin: 18px 0 0; display: grid; gap: 8px; }
.albaran-total div { display: flex; justify-content: space-between; gap: 18px; align-items: baseline; }
.albaran-total div:last-child { padding-top: 10px; border-top: 3px double var(--texto); }
.albaran-total dt { font: 400 .75rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--suave); flex: none; }
.albaran-total dd { margin: 0; text-align: right; font: 400 .875rem/1.35 var(--mono); font-variant-numeric: tabular-nums; }
.albaran-total div:last-child dd { font-weight: 400; color: var(--texto); }
.albaran-portada .boton-grande { margin-top: 24px; }
.albaran-portada:hover .boton-grande { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgb(var(--sombra) / .6); }
.albaran-portada:hover .boton-grande .ico { transform: translateX(5px); }
.albaran-portada:hover .fila-guia { opacity: .55; }

/* El ticket se imprime al llegar */
.albaran-papel { animation: imprime 1.05s .15s var(--sale) backwards; }
.albaran-papel > * { animation: tinta .6s var(--sale) backwards; }
.albaran-papel > :nth-child(1) { animation-delay: .35s; }
.albaran-papel > :nth-child(2) { animation-delay: .45s; }
.albaran-papel > :nth-child(3) { animation-delay: .55s; }
.albaran-papel > :nth-child(4) { animation-delay: .65s; }
.albaran-papel > :nth-child(5) { animation-delay: .75s; }
.albaran-papel > :nth-child(6) { animation-delay: .85s; }
@keyframes imprime { from { clip-path: inset(0 -60px 100% -60px); transform: translateY(-36px); } to { clip-path: inset(-60px -60px -60px -60px); transform: none; } }
@keyframes tinta { from { opacity: 0; transform: translateY(-6px); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.via-transicion .albaran-papel, .via-transicion .albaran-papel > * { animation: none; }

/* ---------- Listas de recursos ---------- */
.anteriores h2 { font-size: 1.375rem; letter-spacing: -0.025em; margin-bottom: 14px; }
.lista { list-style: none; margin: 0; padding: 0; }
.lista a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "n titulo ico" "n meta ico"; column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 4px; border-top: 1px solid var(--linea); text-decoration: none; transition: background-color .25s, padding .45s var(--sale); }
.lista li:last-child a { border-bottom: 1px solid var(--linea); }
.lista-n { grid-area: n; align-self: start; padding-top: 5px; font: 400 .8125rem/1 var(--mono); color: var(--suave); font-variant-numeric: tabular-nums; }
.lista-titulo { grid-area: titulo; font-weight: 700; font-size: 1.125rem; line-height: 1.2; letter-spacing: -0.015em; }
.lista-meta { grid-area: meta; font: 400 .8125rem/1.4 var(--mono); color: var(--suave); }
.lista .ico { grid-area: ico; transition: transform .45s var(--sale); }
.lista a:hover { padding-inline: 12px 8px; background: var(--papel); }
.lista a:hover .ico { transform: translateX(4px); color: var(--acento-texto); }

/* ---------- Síguenos ---------- */
.siguenos { width: 100%; max-width: 1240px; margin: clamp(72px, 12vw, 160px) auto 0; padding-top: 36px; border-top: 1.5px solid var(--texto); display: grid; grid-template-columns: 1fr; gap: 24px; }
.softy-pie { width: 84px; height: auto; }
.siguenos h2 { font-size: clamp(2rem, 6vw, 3.75rem); line-height: .95; letter-spacing: -0.04em; max-width: 14ch; }
.siguenos p { margin-top: 14px; color: var(--suave); max-width: 40ch; }
.redes { list-style: none; margin: 28px 0 0; padding: 0; }
.redes a { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 16px 0; border-top: 1px solid var(--linea); text-decoration: none; transition: color .2s; }
.redes li:last-child a { border-bottom: 1px solid var(--linea); }
.red-nombre { font-weight: 800; font-size: clamp(1.5rem, 4.6vw, 2rem); letter-spacing: -0.03em; line-height: 1; }
.red-usuario { font: 400 .8125rem/1 var(--mono); color: var(--suave); justify-self: end; }
.redes .ico { align-self: center; transition: transform .45s var(--sale); }
.redes a:hover { color: var(--acento-texto); }
.redes a:hover .ico { transform: translate(3px, -3px); }

.pie { width: 100%; max-width: 1240px; margin: 72px auto 0; padding-block: 24px max(28px, env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 12px; font-size: .875rem; color: var(--suave); }

/* ---------- Página de recurso ---------- */
.recurso-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; padding-top: 12px; }
.recurso .albaran { max-width: none; }
.recurso .albaran-titulo { font-size: clamp(2.25rem, 8vw, 3rem); }
.lectura { min-width: 0; max-width: 46rem; }
.intro > p { font-size: 1.1875rem; line-height: 1.55; max-width: 60ch; }
.intro > p + p { margin-top: 1em; }
.notas { list-style: none; margin: 28px 0 0; padding: 0; }
.notas li { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--linea); }
.notas li:last-child { border-bottom: 1px solid var(--linea); }
.notas strong { font-weight: 700; letter-spacing: -0.01em; }
.notas span { color: var(--suave); font-size: 1rem; line-height: 1.5; }

.pieza { margin-top: clamp(64px, 10vw, 96px); scroll-margin-top: 20px; }
.pieza-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pieza-cab h2 { font-size: clamp(1.75rem, 5.4vw, 2.375rem); letter-spacing: -0.035em; }
.pieza-paso { flex: none; font: 400 .8125rem/1 var(--mono); color: var(--suave); font-variant-numeric: tabular-nums; }
.pieza > p { margin-top: 12px; color: var(--suave); max-width: 60ch; }
.pieza > p code { color: var(--texto); }

/* La caja del prompt: barra fija arriba con Copiar, texto completo sin scroll interno */
.caja { position: relative; margin: 22px 0 0; background: var(--codigo); border-radius: 16px; }
.caja-barra { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 18px; background: var(--codigo); border-radius: 16px 16px 0 0; box-shadow: 0 1px 0 var(--linea); }
.caja-dato { font: 400 .75rem/1 var(--mono); letter-spacing: .04em; color: var(--suave); font-variant-numeric: tabular-nums; }
.caja-dato { white-space: nowrap; }
.caja-dato .corto { display: none; }
.caja-acciones { display: flex; gap: 8px; }
@media (max-width: 419px) {
  .caja-dato .largo { display: none; }
  .caja-dato .corto { display: inline; }
  .caja-barra { padding-left: 14px; }
  .caja-barra .boton { padding: 0 14px; }
}
.caja pre { margin: 0; padding: 18px 20px 24px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 .875rem/1.7 var(--mono); color: var(--texto); tab-size: 2; border-radius: 0 0 16px 16px; }
.caja pre:focus-visible { outline-offset: -3px; }
.caja pre::selection, .caja pre ::selection { background: var(--acento); color: var(--tinta); }
.sello { position: absolute; z-index: 3; right: 18px; top: 64px; padding: 6px 12px 5px; font: 400 .9375rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--acento-texto); border: 2.5px solid currentColor; border-radius: 6px; background: color-mix(in srgb, var(--codigo) 70%, transparent); opacity: 0; transform: rotate(-9deg); pointer-events: none; }
.caja.copiada .sello { animation: sello 2.4s var(--sale) both; }
@keyframes sello { 0% { opacity: 0; transform: rotate(-9deg) scale(1.7); } 12% { opacity: 1; transform: rotate(-9deg) scale(1); } 80% { opacity: 1; transform: rotate(-9deg) scale(1); } 100% { opacity: 0; transform: rotate(-9deg) scale(1); } }
.caja.copiada { animation: golpe .35s var(--sale); }
@keyframes golpe { 30% { transform: translateY(2px); } }

.origen { margin-top: clamp(72px, 10vw, 112px); display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: start; padding-top: 28px; border-top: 1.5px solid var(--texto); }
.origen-img { width: 92px; height: auto; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 10px; background: var(--tinta); transform: rotate(-3deg); box-shadow: 0 14px 24px -14px rgb(var(--sombra) / .6); transition: transform .5s var(--sale); }
.origen:hover .origen-img { transform: rotate(0deg) translateY(-4px); }
.origen h2 { font-size: clamp(1.375rem, 4vw, 1.75rem); letter-spacing: -0.03em; line-height: 1.05; }
.origen p { margin-top: 10px; color: var(--suave); font-size: 1rem; }
.enlace { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; font-weight: 600; color: var(--acento-texto); text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); transition: text-decoration-color .2s; }
.enlace:hover { text-decoration-color: currentColor; }
.enlace .ico { width: 18px; height: 18px; transition: transform .45s var(--sale); }
.enlace:hover .ico { transform: translate(3px, -3px); }
.lectura .anteriores { margin-top: 72px; }
.recurso .siguenos { margin-top: clamp(96px, 12vw, 160px); }

/* ---------- Error ---------- */
.error .hola { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; max-width: 640px; }
.error .softy-hola { position: static; width: 88px; }
.error .boton-grande { width: auto; gap: 24px; }

/* ---------- Aparición al hacer scroll ---------- */
.js [data-revela] { transition: opacity .9s var(--sale), transform .9s var(--sale), filter .9s var(--sale); }
.js [data-revela]:not(.visto) { opacity: 0; transform: translateY(28px); filter: blur(3px); }

/* ---------- Transiciones entre páginas ---------- */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: .55s; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
::view-transition-old(root) { animation: .22s ease-in both salir; }
::view-transition-new(root) { animation: .5s .08s var(--sale) both entrar; }
@keyframes salir { to { opacity: 0; transform: translateY(-8px); } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }

/* ---------- Tableta ---------- */
@media (min-width: 700px) {
  .softy-hola { width: 96px; }
  .hola h1 { padding-right: 110px; max-width: 13ch; }
  .albaran-papel { padding: 36px 34px 36px; }
  .notas li { grid-template-columns: 11rem 1fr; gap: 20px; }
  .siguenos { grid-template-columns: 120px 1fr; gap: 40px; }
  .softy-pie { width: 120px; }
  .caja pre { padding: 20px 26px 28px; font-size: .9375rem; }
  .origen { grid-template-columns: 120px 1fr; gap: 28px; }
  .origen-img { width: 120px; }
}

@media (min-width: 700px) and (max-width: 1023px) {
  .portada main, .recurso-rejilla { max-width: 640px; }
  .portada .albaran { max-width: none; }
  .siguenos, .barra, .pie { max-width: 640px; }
}

/* ---------- Escritorio ---------- */
@media (min-width: 1024px) {
  body { padding-inline: 48px; }
  .portada main { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 7vw, 120px); align-items: start; padding-top: 32px; }
  .portada .hola { position: sticky; top: 40px; padding-top: 24px; }
  .portada .softy-hola { position: static; width: 120px; margin-bottom: 32px; }
  .portada .hola h1 { padding-right: 0; max-width: 10ch; }
  .portada .entregas { padding-top: 24px; }
  .portada .albaran { max-width: 600px; }
  .portada .siguenos { grid-column: 1 / -1; }
  .siguenos { grid-template-columns: 5fr 6fr; column-gap: clamp(48px, 7vw, 120px); }
  .siguenos .softy-pie { width: 160px; justify-self: start; }

  .recurso-rejilla { grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); column-gap: clamp(48px, 6vw, 96px); padding-top: 24px; }
  .recurso-lado { position: sticky; top: 28px; }
  .recurso .albaran-titulo { font-size: 2.5rem; }
  .lectura { padding-top: 22px; }
}
@media (min-width: 1024px) and (max-height: 760px) {
  .recurso-lado { position: static; }
}

/* ---------- Movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-revela]:not(.visto) { opacity: 1; transform: none; filter: none; }
  .caja.copiada .sello { opacity: 1; transform: rotate(-9deg); }
  @view-transition { navigation: none; }
}