/* =====================================================================
   TRES GATOS · estilos
   Rojo, blanco hueso y negro. Brochazos, fotos en blanco y negro,
   letras gastadas. Los colores principales están en :root.
   ===================================================================== */

@font-face { font-family: "Staatliches"; src: url("../fonts/staatliches.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/crimson-pro-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/crimson-pro-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/crimson-pro-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Crimson Pro"; src: url("../fonts/crimson-pro-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --rojo: #c5170e;
  --rojo-osc: #8f1009;
  --rojo-vivo: #e0301f;
  --negro: #0d0c0b;
  --carbon: #171513;
  --carbon-2: #221f1c;
  --humo: #3d3833;
  --hueso: #f2ede4;
  --papel: #ebe4d6;
  --tinta: #1b1815;
  --gris: #a69d91;
  --gris-osc: #6f675d;

  --f-titulo: "Staatliches", Impact, "Arial Narrow", sans-serif;
  --f-texto: "Crimson Pro", Georgia, "Times New Roman", serif;

  --tx-brochazo: url("../img/texturas/brochazo.png");
  --tx-panel: url("../img/texturas/panel.png");
  --tx-borde: url("../img/texturas/borde.png");
  --tx-desgaste: url("../img/texturas/desgaste.png");
  --tx-grano: url("../img/texturas/grano.png");
  --tx-vetas: url("../img/texturas/vetas.png");

  --ancho: 1200px;
  --info-alto: 12.6rem;
  --cabecera-alto: 92px;
  --radio: 3px;
  --sombra: 0 18px 40px rgba(0, 0, 0, .55);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--cabecera-alto) + 16px); }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--negro);
  color: var(--hueso);
  font: 400 1.125rem/1.55 var(--f-texto);
  overflow-x: hidden;
}
/* grano de película sobre todo el sitio */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: var(--tx-grano) 0 0 / 256px;
  mix-blend-mode: overlay;
  opacity: .22;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--rojo-vivo); outline-offset: 3px; }
main:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--f-titulo); font-weight: 400; letter-spacing: .02em; line-height: 1; margin: 0; }

[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--hueso); color: var(--negro); padding: .5rem 1rem; font-family: var(--f-titulo); text-decoration: none; }
.saltar:focus { top: 12px; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* letras gastadas, como pintadas a mano */
.desgaste {
  -webkit-mask: var(--tx-desgaste) 0 0 / 260px repeat;
          mask: var(--tx-desgaste) 0 0 / 260px repeat;
}

/* Botón de mando (A, B, Q, E...) */
.tecla {
  display: inline-grid;
  place-items: center;
  min-width: 1.45em;
  height: 1.45em;
  padding: 0 .3em;
  border-radius: 999px;
  background: var(--hueso);
  color: var(--negro);
  font: 700 .72em/1 system-ui, sans-serif;
  vertical-align: .12em;
}
.tecla--texto { border-radius: 4px; font-size: .62em; letter-spacing: .04em; }

/* ---------- Botones ---------- */
.boton {
  --fondo: var(--rojo);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .55em 1.5em;
  border: 0;
  background: var(--fondo);
  color: var(--negro);
  font: 1.15rem/1 var(--f-titulo);
  letter-spacing: .06em;
  text-decoration: none;
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
  transition: background-color .2s, transform .15s;
}
.boton:hover { --fondo: var(--rojo-vivo); transform: translateY(-1px); }
.boton:active { transform: translateY(1px); }
.boton--negro { --fondo: var(--negro); color: var(--hueso); }
.boton--negro:hover { --fondo: #000; color: #fff; }
.boton--linea, .boton--linea-oscura {
  -webkit-mask: none; mask: none;
  background: transparent;
  border: 2px solid currentColor;
  color: var(--hueso);
  border-radius: var(--radio);
}
.boton--linea:hover { background: rgba(255, 255, 255, .08); }
.boton--linea-oscura { color: var(--negro); }
.boton--linea-oscura:hover { background: rgba(0, 0, 0, .08); }

/* Título de sección pintado sobre brochazo rojo */
.titulo-seccion {
  margin: 0 0 1.4rem;
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  color: var(--negro);
}
.titulo-seccion span {
  display: inline-block;
  padding: .32em 1.1em .26em .9em;
  background: var(--rojo);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
}
.titulo-seccion--grande { font-size: clamp(2.3rem, 6vw, 3.6rem); }

/* =====================================================================
   CABECERA
   ===================================================================== */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--rojo);
  color: var(--negro);
  transition: box-shadow .3s;
}
.cabecera::before { /* vetas de pintura */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tx-vetas) 0 0 / 900px auto repeat;
  opacity: .55;
  pointer-events: none;
}
.cabecera::after { /* borde inferior rasgado */
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% - 1px);
  height: 26px;
  background: var(--rojo);
  -webkit-mask: var(--tx-borde) 0 0 / 640px 26px repeat-x;
          mask: var(--tx-borde) 0 0 / 640px 26px repeat-x;
  pointer-events: none;
}
.cabecera__in {
  position: relative;
  z-index: 1;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 12px 16px 8px;
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 36px);
  transition: padding .3s;
}
.marca {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  flex: none;
}
.marca__logo { width: 58px; height: auto; transition: width .3s; }
.marca__nombre {
  font: clamp(2.1rem, 4.4vw, 3.4rem)/.9 var(--f-titulo);
  letter-spacing: .03em;
  white-space: nowrap;
  transition: font-size .3s;
}
.cabecera.compacta { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
.cabecera.compacta .cabecera__in { padding-top: 6px; padding-bottom: 4px; }
.cabecera.compacta .marca__logo { width: 40px; }
.cabecera.compacta .marca__nombre { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* Buscador: tinta negra pintada */
.buscador {
  position: relative;
  flex: 1 1 auto;
  max-width: 460px;
  margin-left: auto;
  display: flex;
  align-items: center;
}
.buscador::before {
  content: "";
  position: absolute;
  inset: -4px -10px;
  background: var(--negro);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
  pointer-events: none;
}
.buscador input {
  position: relative;
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 .4rem 0 1.4rem;
  background: transparent;
  border: 0;
  color: var(--hueso);
  font: 1.1rem var(--f-texto);
}
.buscador input::placeholder { color: var(--gris); font-style: italic; }
.buscador input:focus { outline: none; }
.buscador:focus-within::before { background: #000; }
.buscador input::-webkit-search-cancel-button { filter: invert(1); }
.buscador__boton {
  position: relative;
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border: 0; background: transparent;
  color: var(--hueso);
  margin-right: .3rem;
}
.buscador__boton:hover { color: var(--rojo-vivo); }

.buscador__resultados {
  position: absolute;
  top: calc(100% + 10px);
  left: -10px; right: -10px;
  z-index: 10;
  background: var(--carbon);
  color: var(--hueso);
  border: 1px solid var(--humo);
  box-shadow: var(--sombra);
  max-height: min(70vh, 520px);
  overflow-y: auto;
}
.sugerencia {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  text-decoration: none;
  border-bottom: 1px solid var(--carbon-2);
}
.sugerencia img { width: 72px; height: 45px; object-fit: cover; filter: grayscale(1); }
.sugerencia:hover img, .sugerencia.activa img { filter: none; }
.sugerencia:hover, .sugerencia.activa { background: var(--carbon-2); outline: 2px solid var(--rojo); outline-offset: -2px; }
.sugerencia strong { display: block; font: 1.15rem/1.05 var(--f-titulo); letter-spacing: .02em; }
.sugerencia small { color: var(--gris); font-size: .9rem; }
.sugerencia mark, .resaltado { background: var(--rojo); color: var(--hueso); padding: 0 .1em; }
.sugerencias__todas, .sugerencias__nada {
  display: block;
  padding: 12px;
  text-align: center;
  font: 1rem var(--f-titulo);
  letter-spacing: .06em;
  color: var(--gris);
  text-decoration: none;
}
.sugerencias__todas:hover { color: var(--hueso); background: var(--carbon-2); }

/* Redes */
.redes { display: flex; align-items: center; gap: 4px; }
.red {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 50%;
  text-decoration: none;
  transition: color .2s, transform .2s;
}
.red .ico { width: 21px; height: 21px; }
a.red:hover { color: var(--hueso); transform: translateY(-2px); }
.red--pronto { opacity: .55; cursor: help; }
.cabecera__lupa {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  border: 0;
  background: var(--negro);
  color: var(--hueso);
  border-radius: 50%;
  place-items: center;
}
.cabecera__lupa .ico { width: 22px; height: 22px; }

@media (max-width: 900px) {
  .redes--cabecera { display: none; }
}
@media (max-width: 680px) {
  :root { --cabecera-alto: 70px; }
  .marca__logo { width: 42px; }
  .marca__nombre { font-size: 2rem; }
  .cabecera__lupa { display: grid; }
  .cabecera__in { flex-wrap: wrap; row-gap: 6px; }
  .buscador { display: none; order: 3; flex-basis: 100%; max-width: none; margin: 4px 10px 8px; }
  .cabecera.buscando .buscador { display: flex; }
  .cabecera.compacta .marca__logo { width: 34px; }
  .cabecera.compacta .marca__nombre { font-size: 1.6rem; }
}

/* =====================================================================
   CARRUSEL (destacados)
   ===================================================================== */
.carrusel {
  position: relative;
  height: clamp(440px, 74vh, 660px);
  margin-top: -2px;
  background: #000;
  overflow: hidden;
  isolation: isolate;
}
.carrusel__pista { position: absolute; inset: 0; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.slide.activo { opacity: 1; visibility: visible; transition: opacity .9s ease; z-index: 1; }
.slide__foto { position: absolute; inset: 0; display: block; }
.slide__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.18) brightness(.82);
  transform: scale(1.08);
  transition: filter 1s ease, transform 7s ease-out;
}
.slide.activo .slide__foto img { transform: scale(1); }
.slide:hover .slide__foto img, .slide:focus-within .slide__foto img { filter: grayscale(0) contrast(1.05) brightness(.9); }
.slide__foto::after { /* viñeta como foto antigua */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 70% at 62% 45%, transparent 30%, rgba(0, 0, 0, .55) 70%, rgba(0, 0, 0, .95) 100%),
    linear-gradient(to top, rgba(0, 0, 0, .6), transparent 30%);
}
.slide__panel {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: min(760px, 58%);
  padding: calc(var(--cabecera-alto) * .4 + 2rem) 23% 4.2rem max(2rem, calc((100vw - var(--ancho)) / 2 + 16px));
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .7rem;
  color: var(--negro);
  background: var(--rojo);
  -webkit-mask: var(--tx-panel) 0 0 / 100% 100% no-repeat;
          mask: var(--tx-panel) 0 0 / 100% 100% no-repeat;
  transform: translateX(-24px);
  opacity: 0;
  transition: transform .8s cubic-bezier(.2, .7, .2, 1) .15s, opacity .6s ease .15s;
}
.slide.activo .slide__panel { transform: none; opacity: 1; }
.slide__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--tx-vetas) 0 0 / 700px auto;
  opacity: .5;
  pointer-events: none;
}
.slide__panel > * { position: relative; margin: 0; flex-shrink: 0; }
.slide__etiqueta {
  font: clamp(1.5rem, 2.4vw, 2.1rem)/1 var(--f-titulo);
  color: var(--hueso);
  letter-spacing: .04em;
}
.slide__titulo { font-size: clamp(1.9rem, 3.1vw, 3.1rem); line-height: .95; text-wrap: balance; }
.slide__titulo a { text-decoration: none; }
.slide__titulo a:hover { color: var(--hueso); }
.slide__resumen {
  font-size: 1.12rem;
  line-height: 1.35;
  max-width: 34ch;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.slide__meta { font: 1rem var(--f-titulo); letter-spacing: .08em; opacity: .85; }
.slide__leer {
  position: absolute;
  z-index: 2;
  right: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 16px));
  bottom: 1.6rem;
  font: 1.35rem/1 var(--f-titulo);
  letter-spacing: .06em;
  color: var(--hueso);
  text-decoration: none;
  display: flex; align-items: center; gap: .45em;
}

.temas-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .9rem; font: .95rem/1 var(--f-titulo); letter-spacing: .07em; }
.temas-mini li { display: flex; align-items: center; gap: .35em; }
.temas-mini svg { width: 1.25em; height: 1.25em; fill: currentColor; }

.carrusel__controles {
  position: absolute;
  z-index: 3;
  right: max(1.2rem, calc((100vw - var(--ancho)) / 2 + 16px));
  bottom: 4.4rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.carrusel__flecha, .carrusel__pausa {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid rgba(242, 237, 228, .6);
  border-radius: 50%;
  background: rgba(0, 0, 0, .35);
  color: var(--hueso);
  transition: background .2s, border-color .2s;
}
.carrusel__flecha:hover, .carrusel__pausa:hover { background: var(--rojo); border-color: var(--rojo); }
.carrusel__flecha .ico { width: 20px; height: 20px; }
.carrusel__puntos { display: flex; gap: 2px; padding: 0 4px; }
.carrusel__punto {
  width: 30px; height: 44px;
  border: 0; background: transparent;
  position: relative;
}
.carrusel__punto::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 6px;
  margin-top: -3px;
  background: rgba(242, 237, 228, .45);
  transform: skewX(-12deg);
  transition: background .3s;
}
.carrusel__punto.activo::before { background: var(--rojo); }
.carrusel__punto.activo::after { /* barra de tiempo */
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 50%;
  height: 6px; margin-top: -3px;
  background: var(--hueso);
  transform-origin: left;
  transform: scaleX(0) skewX(-12deg);
  animation: avance var(--dur, 5s) linear forwards;
}
.carrusel.pausado .carrusel__punto.activo::after { animation-play-state: paused; }
.carrusel.quieto .carrusel__punto.activo::after { display: none; }
@keyframes avance { to { transform: scaleX(1) skewX(-12deg); } }
.carrusel__pausa-ico { width: 12px; height: 14px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; }
.carrusel__pausa[aria-pressed="true"] .carrusel__pausa-ico { width: 0; height: 0; border: 0; border-left: 13px solid currentColor; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }

@media (max-width: 760px) {
  .carrusel { height: clamp(500px, 84vh, 620px); }
  .slide__foto { bottom: 38%; }
  .slide__panel {
    top: auto;
    width: 100%;
    min-height: 52%;
    padding: 3.6rem 1.2rem 5.4rem;
    justify-content: flex-start;
    -webkit-mask: var(--tx-brochazo) 30% 0 / 160% 100% no-repeat;
            mask: var(--tx-brochazo) 30% 0 / 160% 100% no-repeat;
    transform: translateY(18px);
  }
  .slide__titulo { font-size: 2rem; }
  .slide__resumen { font-size: 1.05rem; -webkit-line-clamp: 2; }
  .slide__leer { display: none; }
  .carrusel__controles { left: 0; right: 0; bottom: 1rem; justify-content: center; }
}

/* =====================================================================
   ALFORJA: filtros por tema (como el bolso del juego)
   ===================================================================== */
.alforja, .busqueda, .relacionados, .pagina, .cartel-error {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 3.4rem 16px 4rem;
}
.filtros {
  position: relative;
  margin-bottom: 2.4rem;
  padding: .9rem 1rem 1.1rem;
  background: var(--carbon);
  border-top: 1px solid rgba(242, 237, 228, .35);
  border-bottom: 1px solid rgba(242, 237, 228, .35);
}
.filtros::before { /* textura de cuero/lona */
  content: "";
  position: absolute; inset: 0;
  background: var(--tx-grano) 0 0 / 180px;
  opacity: .25;
  mix-blend-mode: soft-light;
  pointer-events: none;
}
.filtros__cabeza {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  padding-bottom: .7rem;
  margin-bottom: .9rem;
  border-bottom: 1px solid rgba(242, 237, 228, .25);
}
.filtros__nombre {
  margin: 0;
  min-width: 9ch;
  text-align: center;
  font: 1.7rem/1 var(--f-titulo);
  letter-spacing: .06em;
}
.filtros__paso {
  border: 0;
  background: none;
  padding: 6px;
  font-size: 1.1rem;
  opacity: .85;
}
.filtros__paso:hover { opacity: 1; }
.filtros__paso .tecla { min-width: 2.2em; border-radius: 6px; }
.filtros__iconos {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.filtro {
  position: relative;
  width: 58px; height: 58px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 2px solid rgba(242, 237, 228, .55);
  background: #0a0908;
  color: var(--hueso);
  opacity: .62;
  transition: opacity .2s, transform .2s, border-color .2s;
}
.filtro svg { width: 32px; height: 32px; fill: currentColor; }
.filtro:hover { opacity: 1; transform: translateY(-2px); }
.filtro.activo { opacity: 1; border-color: var(--hueso); }
.filtro.activo::after { /* el marco rojo de selección */
  content: "";
  position: absolute;
  inset: -7px;
  border: 3px solid var(--rojo);
  border-radius: 4px;
}
.filtros__conteo { position: relative; margin: .7rem 0 0; text-align: center; color: var(--gris); font-size: .95rem; font-style: italic; }
@media (max-width: 680px) {
  .filtros { margin-left: -16px; margin-right: -16px; padding-left: 0; padding-right: 0; }
  .filtros__iconos { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 10px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .filtros__iconos::-webkit-scrollbar { display: none; }
  .filtros__iconos li { scroll-snap-align: center; }
  .filtro { width: 52px; height: 52px; }
  .filtro svg { width: 28px; height: 28px; }
}

/* =====================================================================
   TARJETAS (scroll infinito)
   ===================================================================== */
.feed {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 24px;
}
@media (max-width: 960px) { .feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .feed { grid-template-columns: 1fr; gap: 22px; } }

/* La ranura reserva el espacio de la tarjeta cerrada; al abrirse,
   la tarjeta crece por encima de las demás sin mover la cuadrícula. */
.ranura { position: relative; z-index: 1; animation: aparecer .5s ease both; }
.ranura:hover, .ranura:focus-within { z-index: 20; }
.ranura::before { content: ""; display: block; aspect-ratio: 16 / 10; }
.ranura::after { content: ""; display: block; height: var(--info-alto); }
@keyframes aparecer { from { opacity: 0; transform: translateY(16px); } }

.tarjeta {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .35);
  transform-origin: 50% 30%;
  transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s, z-index 0s .28s;
}
.tarjeta::before { /* papel con vetas */
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: var(--tx-grano) 0 0 / 200px;
  mix-blend-mode: multiply;
  opacity: .16;
  pointer-events: none;
}
.tarjeta::after { /* marco rojo de selección */
  content: "";
  position: absolute;
  inset: -7px;
  border: 3px solid var(--rojo);
  border-radius: 5px;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.tarjeta__foto { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: #000; border-radius: var(--radio) var(--radio) 0 0; }
.tarjeta__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.12) brightness(.92);
  transition: filter .5s ease, transform .7s ease;
}
.tarjeta__info {
  position: relative;
  min-height: var(--info-alto);
  max-height: var(--info-alto);
  overflow: hidden;
  padding: .8rem 1.05rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  transition: max-height .35s cubic-bezier(.2, .7, .2, 1);
}
.tarjeta__temas { list-style: none; margin: 0; padding: 0; display: flex; gap: .55rem; min-height: 22px; align-items: center; color: var(--rojo-osc); }
.tarjeta__temas li { display: flex; align-items: center; gap: .3rem; font: .82rem/1 var(--f-titulo); letter-spacing: .08em; }
.tarjeta__temas svg { width: 21px; height: 21px; fill: currentColor; }
.tarjeta__temas span { max-width: 0; overflow: hidden; white-space: nowrap; transition: max-width .3s; }
.tarjeta__titulo {
  font-size: 1.55rem;
  line-height: 1.02;
  min-height: 2.04em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__titulo a { text-decoration: none; }
.tarjeta__titulo a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* toda la tarjeta es clic */
.tarjeta__resumen {
  margin: 0;
  font-size: 1.04rem;
  line-height: 1.3;
  color: #3a332c;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tarjeta__pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; }
.tarjeta__fecha { font: .98rem/1 var(--f-titulo); letter-spacing: .08em; color: var(--gris-osc); }
.tarjeta__leer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  margin-top: .2rem;
  min-height: 44px;
  border: 2px solid var(--tinta);
  border-radius: var(--radio);
  font: 1.15rem/1 var(--f-titulo);
  letter-spacing: .1em;
  text-decoration: none;
  background: rgba(197, 23, 14, .07);
}
.tarjeta__leer .tecla { background: var(--tinta); color: var(--papel); }

/* Abierta: pasa el mouse o navega con el teclado */
@media (hover: hover) {
  .ranura:hover .tarjeta, .tarjeta:focus-within {
    z-index: 20;
    transform: scale(1.06);
    box-shadow: 0 26px 60px rgba(0, 0, 0, .75);
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), box-shadow .28s, z-index 0s;
  }
  .ranura:hover .tarjeta::after, .tarjeta:focus-within::after { opacity: 1; transform: none; }
  .ranura:hover .tarjeta__foto img, .tarjeta:focus-within .tarjeta__foto img { filter: none; transform: scale(1.04); }
  .ranura:hover .tarjeta__info, .tarjeta:focus-within .tarjeta__info { max-height: 30rem; }
  .ranura:hover .tarjeta__resumen, .tarjeta:focus-within .tarjeta__resumen { -webkit-line-clamp: 7; }
  .ranura:hover .tarjeta__temas span, .tarjeta:focus-within .tarjeta__temas span { max-width: 9em; }
  .tarjeta__leer { display: none; }
  .ranura:hover .tarjeta__leer, .tarjeta:focus-within .tarjeta__leer { display: flex; }
}
/* Pantallas táctiles: tarjeta abierta desde el inicio, sin "flotar" */
@media (hover: none) {
  .ranura::before, .ranura::after { display: none; }
  .tarjeta { position: relative; }
  .tarjeta__info { max-height: none; min-height: 0; }
  .tarjeta__resumen { -webkit-line-clamp: 3; }
  .tarjeta__temas span { max-width: 9em; }
  .tarjeta__leer { display: none; }
  .tarjeta.en-foco .tarjeta__foto img { filter: none; }
  .tecla { display: none; }
  .solo-tactil { display: block; }
}
@media (hover: hover) { .solo-tactil { display: none; } }

/* Corazón */
.like {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-width: 44px; height: 44px;
  justify-content: center;
  margin-right: -8px;
  border: 0;
  background: none;
  color: var(--tinta);
}
.like svg { width: 24px; height: 24px; fill: currentColor; }
.like__lleno { display: none; color: var(--rojo); }
.like[aria-pressed="true"] .like__vacio { display: none; }
.like[aria-pressed="true"] .like__lleno { display: block; }
.like[aria-pressed="true"] { color: var(--rojo); }
.like:hover { color: var(--rojo); }
.like.latido svg { animation: latido .45s ease; }
@keyframes latido { 30% { transform: scale(1.35); } 60% { transform: scale(.9); } }
.like__texto { display: none; }
.like--grande {
  margin: 0;
  padding: 0 1.1rem 0 .9rem;
  height: 46px;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--hueso);
  font: 1.05rem/1 var(--f-titulo);
  letter-spacing: .08em;
}
.like--grande .like__texto { display: inline; }
.like--grande[aria-pressed="true"] { background: var(--rojo); border-color: var(--rojo); color: var(--hueso); }
.like--grande[aria-pressed="true"] .like__lleno { color: var(--hueso); }

.feed__estado { margin: 2.2rem 0 0; text-align: center; color: var(--gris); font: 1.15rem var(--f-titulo); letter-spacing: .1em; }
.feed__centinela { height: 2px; }
.cargando::before {
  content: "";
  display: inline-block;
  width: 1em; height: 1em;
  margin-right: .6em;
  vertical-align: -.15em;
  border: 3px solid var(--rojo);
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .8s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
.lista-simple a { color: var(--hueso); }

/* =====================================================================
   POST
   ===================================================================== */
.progreso { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 150; pointer-events: none; }
.progreso span { display: block; height: 100%; width: 100%; background: var(--hueso); transform-origin: left; transform: scaleX(0); }

.articulo__barra { max-width: var(--ancho); margin: 0 auto; padding: 2.2rem 16px .8rem; }
.volver {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  font: 1.35rem/1 var(--f-titulo);
  letter-spacing: .06em;
  text-decoration: none;
  color: var(--hueso);
}
.volver:hover { color: var(--rojo-vivo); }

.articulo__cabeza { max-width: var(--ancho); margin: 0 auto; padding: 0 16px; }
.articulo__portada { position: relative; margin: 0; aspect-ratio: 16 / 8; max-height: 64vh; width: 100%; overflow: hidden; background: #000; }
.articulo__portada img { width: 100%; height: 100%; object-fit: cover; }
.articulo__portada::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at 50% 45%, transparent 40%, rgba(0, 0, 0, .7) 100%);
  pointer-events: none;
}
.foto-revela { animation: revelar 2.4s .2s ease forwards; filter: grayscale(1) contrast(1.15); }
@keyframes revelar { to { filter: grayscale(0) contrast(1.02); } }
.articulo__credito { position: absolute; z-index: 1; right: 10px; bottom: 8px; font-size: .85rem; font-style: italic; color: rgba(242, 237, 228, .8); }

.articulo__titular {
  position: relative;
  z-index: 2;
  margin: -3.4rem auto 0;
  max-width: 980px;
  padding: 2rem clamp(1.4rem, 5vw, 4rem) 1.9rem;
  background: var(--rojo);
  color: var(--negro);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
}
.articulo__titulo { font-size: clamp(2.2rem, 5.4vw, 4.3rem); line-height: .95; text-align: center; text-wrap: balance; }
.articulo__datos { max-width: 760px; margin: 1.2rem auto 0; display: flex; flex-direction: column; align-items: center; gap: .9rem; text-align: center; }
.articulo__meta { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .5rem .8rem; font: 1.1rem var(--f-titulo); letter-spacing: .08em; color: var(--gris); }
.articulo__meta span { display: inline-flex; align-items: center; gap: .35em; }
.temas-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.temas-chips a {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 36px;
  padding: .2em .9em .2em .6em;
  border: 1px solid rgba(242, 237, 228, .45);
  border-radius: 999px;
  font: 1rem/1 var(--f-titulo);
  letter-spacing: .08em;
  text-decoration: none;
}
.temas-chips a:hover { background: var(--hueso); color: var(--negro); }
.temas-chips svg { width: 22px; height: 22px; fill: currentColor; }

.acciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .7rem 1rem; }
.compartir { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.compartir__btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 2px solid rgba(242, 237, 228, .5);
  border-radius: 50%;
  background: none;
  color: var(--hueso);
  transition: background .2s, color .2s, border-color .2s;
}
.compartir__btn svg { width: 20px; height: 20px; fill: currentColor; }
.compartir__btn:hover { background: var(--hueso); color: var(--negro); border-color: var(--hueso); }
.compartir__btn.copiado { background: var(--rojo); border-color: var(--rojo); }

/* Hoja de papel donde va el texto */
.papel {
  position: relative;
  max-width: 800px;
  margin: 2.6rem auto 0;
  padding: clamp(1.6rem, 5vw, 3.6rem) clamp(1.2rem, 6vw, 4.2rem) clamp(2rem, 5vw, 3.2rem);
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra);
}
.papel::before { /* fibras */
  content: "";
  position: absolute; inset: 0;
  background: var(--tx-grano) 0 0 / 220px;
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}
.papel::after { /* borde inferior rasgado */
  content: "";
  position: absolute;
  left: 0; right: 0; top: calc(100% - 1px);
  height: 22px;
  background: var(--papel);
  -webkit-mask: var(--tx-borde) 0 0 / 520px 22px repeat-x;
          mask: var(--tx-borde) 0 0 / 520px 22px repeat-x;
}
.papel > * { position: relative; }

.prosa { font-size: 1.24rem; line-height: 1.68; }
.prosa > * { margin: 0 0 1.05em; }
.prosa > p:first-child::first-letter {
  float: left;
  margin: .08em .12em 0 0;
  font: 4.6em/.78 var(--f-titulo);
  color: var(--rojo);
}
.prosa h2 { margin: 1.9em 0 .6em; font-size: 2.1rem; color: var(--negro); }
.prosa h2::after {
  content: "";
  display: block;
  width: 5.5rem; height: 12px;
  margin-top: .3rem;
  background: var(--rojo);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
}
.prosa h3 { margin: 1.6em 0 .5em; font-size: 1.6rem; }
.prosa a { color: var(--rojo-osc); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prosa a:hover { color: var(--rojo); }
.prosa strong { font-weight: 700; }
.prosa blockquote {
  margin: 1.8em 0;
  padding: .3em 0 .3em 1.3em;
  border-left: 6px solid var(--rojo);
  font-size: 1.38rem;
  font-style: italic;
  line-height: 1.45;
  color: #2b2520;
}
.prosa blockquote p { margin: 0 0 .5em; }
.prosa blockquote p:last-child { margin: 0; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin-bottom: .35em; }
.prosa ul li::marker { color: var(--rojo); }
.prosa hr {
  height: 16px; border: 0; margin: 2.4em auto;
  width: 40%;
  background: var(--tinta);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
}
.prosa img { height: auto; }
.prosa table { width: 100%; border-collapse: collapse; font-size: 1.02rem; display: block; overflow-x: auto; }
.prosa th, .prosa td { padding: .5em .7em; border-bottom: 1px solid rgba(27, 24, 21, .25); text-align: left; vertical-align: top; }
.prosa th { font: 1rem var(--f-titulo); letter-spacing: .08em; border-bottom: 2px solid var(--tinta); }
.prosa code { font-size: .88em; background: rgba(27, 24, 21, .08); padding: .1em .3em; border-radius: 3px; }
.figura { margin: 2em 0; }
.figura img { width: 100%; border-radius: var(--radio); filter: grayscale(.15) contrast(1.04); box-shadow: 0 8px 22px rgba(0, 0, 0, .25); }
.figura figcaption { margin-top: .6em; font-size: 1rem; font-style: italic; color: #554b41; padding-left: .8em; border-left: 3px solid var(--rojo); line-height: 1.4; }
@media (min-width: 900px) { .figura--completa { margin-left: -2.6rem; margin-right: -2.6rem; } }

.fuentes { margin-top: 2.8rem; padding-top: 1.4rem; border-top: 2px dashed rgba(27, 24, 21, .35); }
.fuentes h2 { font-size: 1.7rem; margin-bottom: .8rem; display: flex; align-items: center; gap: .5rem; }
.fuentes h2::before { content: ""; width: 14px; height: 14px; background: var(--rojo); transform: rotate(45deg); }
.fuentes ol { margin: 0; padding-left: 1.4em; font-size: 1.04rem; line-height: 1.5; }
.fuentes li { margin-bottom: .45em; overflow-wrap: anywhere; }
.fuentes li::marker { font-family: var(--f-titulo); color: var(--rojo); }
.fuentes a { color: var(--rojo-osc); }
.fuentes__medio { font-style: italic; }
.fuentes__vacio { margin: 0; font-style: italic; color: #554b41; }

.acciones--final { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid rgba(27, 24, 21, .2); }
.acciones--final p { width: 100%; margin: 0; text-align: center; font: 1.3rem var(--f-titulo); letter-spacing: .05em; }
.acciones--final .like--grande { color: var(--tinta); }
.acciones--final .like--grande[aria-pressed="true"] { color: var(--hueso); }
.acciones--final .compartir__btn { color: var(--tinta); border-color: rgba(27, 24, 21, .45); }
.acciones--final .compartir__btn:hover { background: var(--tinta); color: var(--papel); }

.relacionados { padding-top: 4.4rem; }

/* =====================================================================
   PÁGINAS (legales, contacto) y BÚSQUEDA
   ===================================================================== */
.pagina__cabeza { text-align: center; }
.pagina__sub { margin: -.4rem 0 0; color: var(--gris); font-style: italic; font-size: 1.2rem; }
.pagina .papel { margin-top: 2rem; }
.prosa--legal { font-size: 1.15rem; }
.prosa--legal > p:first-child::first-letter { float: none; font: inherit; color: inherit; margin: 0; }
.prosa--legal h2 { font-size: 1.7rem; }
.correo-grande { font: clamp(1.4rem, 4vw, 2rem)/1.2 var(--f-titulo); letter-spacing: .03em; overflow-wrap: anywhere; }

.busqueda { text-align: center; }
.busqueda__form { display: flex; gap: 10px; max-width: 640px; margin: 0 auto 1rem; }
.busqueda__form input {
  flex: 1; min-width: 0;
  height: 52px;
  padding: 0 1rem;
  border: 2px solid var(--humo);
  background: var(--carbon);
  color: var(--hueso);
  font: 1.2rem var(--f-texto);
  border-radius: var(--radio);
}
.busqueda__form input:focus { border-color: var(--rojo); outline: none; }
.busqueda__resumen { color: var(--gris); font-style: italic; margin: 0 0 2.4rem; }
.busqueda .feed { text-align: left; }

/* Cartel de "se busca" (404 y sin conexión) */
.cartel-error { display: grid; place-items: center; min-height: 70vh; }
.cartel {
  position: relative;
  width: min(440px, 100%);
  padding: 2.4rem 2rem 2.2rem;
  background: var(--papel);
  color: var(--tinta);
  text-align: center;
  box-shadow: var(--sombra);
  transform: rotate(-1.5deg);
}
.cartel::before { content: ""; position: absolute; inset: 10px; border: 3px solid var(--tinta); pointer-events: none; }
.cartel__arriba { margin: 0; font: 3.4rem/1 var(--f-titulo); letter-spacing: .04em; }
.cartel__gatos { width: 150px; margin: .6rem auto; }
.cartel__titulo { font-size: 2.6rem; color: var(--rojo); }
.cartel__texto { font-size: 1.15rem; margin: .7rem 0; }
.cartel__recompensa { font: 1.3rem var(--f-titulo); letter-spacing: .06em; margin: .4rem 0 1.2rem; }
.cartel__botones { position: relative; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* =====================================================================
   PIE DE PÁGINA
   ===================================================================== */
.pie { position: relative; margin-top: 4rem; background: var(--carbon); color: var(--hueso); }
.pie::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: calc(100% - 1px);
  height: 26px;
  background: var(--carbon);
  transform: scaleY(-1);
  -webkit-mask: var(--tx-borde) 0 0 / 640px 26px repeat-x;
          mask: var(--tx-borde) 0 0 / 640px 26px repeat-x;
}
.pie__in {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 3rem 16px 1.6rem;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.2fr 1.2fr;
  gap: 2rem;
}
.pie__marca { display: flex; gap: 14px; align-items: flex-start; }
.pie__marca img { width: 66px; height: auto; }
.pie__nombre { margin: 0; font: 2.4rem/1 var(--f-titulo); color: var(--rojo); }
.pie__lema { margin: .4rem 0 0; color: var(--gris); font-style: italic; }
.pie__titulo {
  margin: 0 0 .8rem;
  font-size: 1.3rem;
  letter-spacing: .08em;
  color: var(--negro);
  display: inline-block;
  padding: .25em .9em .2em .6em;
  background: var(--rojo);
  -webkit-mask: var(--tx-brochazo) center / 100% 100% no-repeat;
          mask: var(--tx-brochazo) center / 100% 100% no-repeat;
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.pie a, .pie__instalar {
  display: inline-flex; align-items: center; gap: .45em;
  min-height: 40px;
  text-decoration: none;
  color: var(--hueso);
  overflow-wrap: anywhere;
}
.pie a:hover, .pie__instalar:hover { color: var(--rojo-vivo); }
.pie__instalar { border: 0; background: none; padding: 0; font: inherit; }
.redes--pie { margin: -.2rem 0 .4rem -8px; flex-wrap: wrap; }
.redes--pie .red { color: var(--hueso); }
.pie__ios { font-size: .95rem; color: var(--gris); margin: .5rem 0 0; }
.pie__copy {
  margin: 0;
  padding: 1.2rem 16px 2rem;
  text-align: center;
  font-size: .95rem;
  color: var(--gris);
  border-top: 1px solid var(--carbon-2);
}
@media (max-width: 900px) { .pie__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pie__in { grid-template-columns: 1fr; gap: 1.6rem; } }

/* =====================================================================
   AVISO DE COOKIES
   ===================================================================== */
.aviso-cookies {
  position: fixed;
  z-index: 180;
  left: 16px; right: 16px; bottom: 16px;
  max-width: 520px;
  padding: 1.2rem 1.3rem 1.1rem;
  background: var(--carbon-2);
  color: var(--hueso);
  border-top: 4px solid var(--rojo);
  box-shadow: var(--sombra);
  animation: subir .5s ease both;
}
.aviso-cookies p { margin: 0 0 .9rem; font-size: 1.05rem; line-height: 1.45; }
.aviso-cookies a { color: var(--hueso); text-decoration-color: var(--rojo); text-decoration-thickness: 2px; }
.aviso-cookies__botones { display: flex; gap: 10px; flex-wrap: wrap; }
@keyframes subir { from { transform: translateY(30px); opacity: 0; } }

/* Aviso flotante breve (enlace copiado, etc.) */
.tostada {
  position: fixed;
  z-index: 190;
  left: 50%; bottom: 24px;
  transform: translateX(-50%);
  padding: .7rem 1.4rem;
  background: var(--hueso);
  color: var(--negro);
  font: 1.1rem var(--f-titulo);
  letter-spacing: .06em;
  box-shadow: var(--sombra);
  animation: subir .3s ease both;
}

/* Menos movimiento para quien lo pidió en su sistema */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .slide__foto img { transform: none !important; }
  .foto-revela { filter: none; animation: none; }
}

/* Impresión: solo el texto */
@media print {
  body::after, .cabecera, .pie, .acciones, .articulo__barra, .relacionados, .aviso-cookies, .progreso { display: none !important; }
  body { background: #fff; color: #000; }
  .papel { box-shadow: none; background: #fff; }
}