/* =====================================================================
   CATÁLOGO DE MATERIALES — Bejarano por Cartagena
   Sistema de diseño tomado del formulario "Sé Embajador".
   ===================================================================== */

/* ==== Variables ==== */
:root {
  --yellow: #fbb614;
  --yellow-soft: #ffd25a;
  --ink: #111111;
  --cream: #fffaf0;
  --red: #e63027;
  --green: #1ea64a;
  --muted: #5b4a1a;
  --field: #fffdf6;
  --grey: #e8e8e8;        /* gris del pie, tomado del sitio principal */
  --grey-text: #4f4f4f;   /* texto secundario sobre ese gris */
  --red-deep: #c1211a;    /* el rojo de marca, un punto más oscuro, para que
                             el enlace del pie se lea bien sobre el gris */
  --max: 1180px;
}

* { box-sizing: border-box; }

/* El atributo hidden gana siempre. Sin esta regla, cualquier clase que fije
   display (.btn es inline-flex) lo anula y el elemento se ve igual: así se
   mostraban "Ver más materiales" sin nada que mostrar y los botones de la
   hoja de envío antes de tiempo. */
[hidden] { display: none !important; }

html { background: var(--yellow); }

body {
  margin: 0;
  font-family: 'Archivo', system-ui, sans-serif;
  color: var(--ink);
  background: transparent;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

/* Fondo texturizado en capa fija (background-attachment:fixed falla en iOS/Android) */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: -1;
  background: var(--yellow) url('../images/fondo-amarillo.jpg?v=2') center center / cover no-repeat;
  pointer-events: none;
}
@media (max-width: 900px) {
  body::before {
    background: var(--yellow) url('../images/fondo-amarillo-movil.jpg?v=2') center top / 100% auto repeat-y;
  }
}

/* ==== Tipografía base ==== */
.display {
  font-family: 'Archivo Black', system-ui, sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  margin: 0;
}
.muted { color: var(--muted); }

/* ==== BARRA SUPERIOR ====
   Sin banda de color: la barra deja ver el fondo amarillo texturizado, que es
   el color de la marca. El logotipo fue dibujado sobre ese amarillo, así que
   es donde mejor se lee.

   Si algún día lo quieren como banda sólida al estilo Lula, basta con
   descomentar la línea de abajo y pasar los colores del contador a claro:
   .topbar { background: var(--red); } */
.topbar {
  position: relative;
  z-index: 10;
  background: transparent;
}
.topbar-in {
  max-width: var(--max);
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
/* El logotipo se mide por ancho, igual que en el sitio principal: en celular
   ocupa cerca de la mitad de la pantalla y crece hasta 270px en computador. */
.brand { display: block; line-height: 0; min-width: 0; }
.brand img {
  width: clamp(150px, 48vw, 270px);
  height: auto;
  display: block;
}
/* El contador vive en la barra superior, frente al logotipo. */
.topbar .hero-count { flex-shrink: 0; }

/* ==== ENCABEZADO ==== */
.hero {
  position: relative;
  z-index: 10;
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px 20px 26px;
  text-align: center;
}
.hero-eyebrow { color: var(--ink); font-weight: 800; margin-bottom: 14px; }

/* El contador va al costado del logotipo y centrado con él. Las columnas se
   ajustan al contenido (no 1fr) para que el número quede junto a la imagen
   y no flotando al otro extremo de la pantalla. */
/* Todo apilado y centrado. Con el logotipo y el contador uno al lado del
   otro, el rótulo de arriba quedaba sobre el hueco entre ambos y se veía
   descolocado. */
/* El titular es el logotipo del movimiento, no texto: se dimensiona por ancho
   y nunca se estira. El alto lo pone la proporción de la imagen. */
/* El h1 mide exactamente lo que el logotipo: con ancho automático se comía
   toda la fila y empujaba el contador al renglón de abajo. */
.hero-title { margin: 0; line-height: 0; width: 100%; }
.hero-lockup {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
}

.hero-count {
  display: flex;
  align-items: center;
  gap: 14px;
  border-left: 2px solid rgba(17, 17, 17, .32);
  padding-left: 22px;
  flex-shrink: 0;
}
.hero-count strong {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(2.3rem, 4.8vw, 3.5rem);
  line-height: 1;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.hero-count span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.5;
  text-align: left;
}

/* ==== LAYOUT ==== */
.wrap {
  position: relative;
  z-index: 10;
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 20px 60px;
}

.section-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--ink);
  padding: 18px;
}

/* ==== CONTROLES ==== */
.controls { margin-bottom: 26px; }

.filters {
  display: flex;
  align-items: center;
  gap: 16px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--field);
  border: 2px solid var(--ink);
  padding: 9px 15px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .15s ease;
}
.tab:hover { background: var(--yellow); }
.tab .n {
  background: rgba(17,17,17,.12);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}
.tab[aria-selected="true"] {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 3px 3px 0 var(--red);
}
.tab[aria-selected="true"] .n { background: rgba(251,182,20,.22); color: var(--yellow); }

.search-wrap { position: relative; flex: 0 0 280px; }
.search-icon {
  position: absolute; left: 15px; top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round;
  pointer-events: none;
}

.field {
  background: var(--field);
  border: 2px solid var(--ink);
  color: var(--ink);
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 15px;
  border-radius: 12px;
  padding: 12px 16px;
  width: 100%;
  transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.field::placeholder { color: #9a8a5a; }
.field:focus {
  outline: none;
  background: #fff;
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}
.search { padding-left: 44px; }

select.field {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 42px;
  cursor: pointer;
}

/* ==== BARRA DE RESULTADOS ==== */
.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 18px;
  padding: 0 4px;
}
.results-left { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; min-width: 0; }
.results-title { font-size: clamp(1.1rem, 2.6vw, 1.5rem); }
.results-count { color: var(--muted); font-variant-numeric: tabular-nums; }

.sort-wrap { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.sort-wrap .eyebrow { color: var(--muted); white-space: nowrap; }
.sort-wrap select.field { width: auto; min-width: 180px; padding-top: 10px; padding-bottom: 10px; }

/* ==== GRILLA ==== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
  gap: 22px;
}

.card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 18px;
  box-shadow: 6px 6px 0 var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }

.thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  max-width: 100%;
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
  cursor: pointer;
  overflow: hidden;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.is-doc {
  display: flex; align-items: center; justify-content: center;
  background: var(--yellow);
}
.thumb.is-doc .doc-ico { font-size: 54px; }
.play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.play i {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
}
.play i::after {
  content: '';
  border-left: 15px solid #fff;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 4px;
}
.badge-format, .badge-new {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
}
.badge-format { left: 10px; bottom: 10px; background: var(--ink); color: var(--yellow); }
.badge-new { right: 10px; top: 10px; background: var(--red); color: #fff; }

.card-body { padding: 15px 15px 0; flex: 1; min-width: 0; }

.chip {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--yellow);
  border: 2px solid var(--ink);
  color: var(--ink);
  padding: 3px 9px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.card-title {
  font-size: 0.95rem;
  line-height: 1.25;
  margin: 0 0 10px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.card-title:hover { color: var(--red); }

.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  background: var(--field);
  border: 1.5px solid rgba(17,17,17,.35);
  border-radius: 999px;
  padding: 3px 9px;
  color: var(--muted);
}

.card-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
  padding: 0 15px 12px;
  margin: 0;
  font-variant-numeric: tabular-nums;
}

/* Las dos acciones pesan lo mismo y ocupan lo mismo: media tarjeta cada una.
   La de descarga lleva palabra; la de WhatsApp va solo con su icono, un poco
   más grande para que llene su mitad con la misma presencia. */
.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 3px solid var(--ink);
  /* El crema de la tarjeta asomaba como un arco claro por la esquina
     redondeada, entre el botón negro y el borde. Con el fondo oscuro aquí,
     lo que se vea en ese arco ya es del mismo color que el borde. */
  background: var(--ink);
}
.card-actions .btn { border-radius: 0; border: 0; box-shadow: none; padding: 12px 8px; font-size: 12px; gap: 7px; }
.card-actions .btn:first-child { border-right: 3px solid var(--ink); }
.card-actions .btn:hover { transform: none; box-shadow: none; }
.card-actions .btn-icon .ico { width: 24px; height: 24px; }

/* ==== BOTONES ==== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 13px 20px;
  border-radius: 12px;
  border: 2px solid var(--ink);
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--ink); color: var(--yellow); }
.btn-primary:hover { background: var(--red); color: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-secondary { background: var(--yellow); color: var(--ink); }
.btn-secondary:hover { background: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-whatsapp { background: var(--green); color: #fff; }
.btn-whatsapp:hover { background: #17853b; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn-ghost { background: var(--field); color: var(--ink); }
.btn-ghost:hover { background: #fff; transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
.btn:disabled { opacity: .55; cursor: wait; transform: none !important; box-shadow: none !important; }
.ico { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }

/* Icono de mensajería: burbuja llena en blanco con el auricular recortado
   del color del botón. El recorte sigue al fondo cuando el botón cambia. */
.ico-wa { stroke: none; }
.ico-wa .wa-bubble { fill: currentColor; }
.ico-wa .wa-phone  { fill: var(--green); transition: fill .15s ease; }
.btn-whatsapp:hover .ico-wa .wa-phone { fill: #17853b; }

/* Botón solo de icono, sin texto */
.btn-icon { padding: 0; gap: 0; }
.btn-icon .ico { width: 21px; height: 21px; transition: opacity .15s ease; }
.btn.is-busy .ico { opacity: .4; animation: latido .9s ease-in-out infinite; }
@keyframes latido { 50% { opacity: .85; } }

.btn-mini {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  background: var(--ink);
  color: var(--yellow);
  border: 0;
  border-radius: 6px;
  padding: 5px 11px;
  cursor: pointer;
}
.btn-mini:hover { background: var(--red); color: #fff; }

.more-wrap { text-align: center; margin-top: 34px; }
.more-wrap .btn { min-width: 260px; padding: 15px 26px; }

/* ==== VACÍO ==== */
.empty { text-align: center; padding: 44px 22px; }
.empty-emoji { font-size: 44px; margin-bottom: 10px; }
.empty h3 { font-size: 1.3rem; margin-bottom: 8px; }
.empty p { color: var(--muted); font-weight: 600; margin: 0; }

/* ==== MODAL ==== */
.backdrop {
  position: fixed; inset: 0;
  background: rgba(17,17,17,0.78);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center; justify-content: center;
  z-index: 60;
  padding: 18px;
  overflow-y: auto;
  animation: fade .25s ease;
}
.backdrop[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 22px;
  box-shadow: 10px 10px 0 var(--ink);
  max-width: 620px;
  width: 100%;
  position: relative;
  overflow: hidden;
  animation: pop .35s cubic-bezier(.2,.7,.2,1);
  margin: auto;
}
@keyframes pop { from { transform: scale(.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.modal-close {
  position: absolute;
  right: 12px; top: 12px;
  z-index: 3;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--yellow);
  border: 2px solid var(--yellow);
  font-size: 15px;
  cursor: pointer;
  line-height: 1;
}
.modal-close:hover { background: var(--red); color: #fff; }

.modal-media {
  position: relative;
  background: var(--ink);
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  min-height: 190px;
  max-height: 58vh;
}
.modal-media video,
.modal-media img { width: 100%; max-height: 58vh; object-fit: contain; display: block; }
.modal-media .doc-ico { font-size: 70px; padding: 40px; }

/* Abrir el archivo original en otra pestaña */
.media-open {
  position: absolute;
  right: 58px; top: 12px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(17,17,17,.78);
  border: 2px solid var(--yellow);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease;
}
.media-open svg {
  width: 17px; height: 17px;
  fill: none; stroke: var(--yellow); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.media-open:hover { background: var(--red); }
.media-open:hover svg { stroke: #fff; }

.modal-body { padding: 20px 22px 24px; }
.modal-body h3 { font-size: 1.15rem; line-height: 1.25; margin: 4px 0 8px; }
.modal-meta { color: var(--muted); margin: 0 0 12px; }

.caption-box {
  background: var(--field);
  border: 2px dashed var(--ink);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.caption-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 7px; }
.caption-head .eyebrow { color: var(--muted); }
.caption-box p { margin: 0; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; }

.modal-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.modal-actions .btn { flex: 1 1 160px; }

.hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}

/* ==== HOJA DE ENVÍO ====
   Va por encima de la ficha ampliada, porque desde ahí también se envía. */
.sheet { z-index: 70; }
.share-card { max-width: 440px; }
.share-body { padding: 26px 24px 24px; text-align: center; }
.share-eyebrow { color: var(--muted); display: block; margin-bottom: 10px; }
.share-body h3 { font-size: 1.05rem; line-height: 1.3; margin: 0 0 14px; }

.share-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 14px;
  min-height: 2.4em;
}

.share-progress {
  appearance: none;
  width: 100%;
  height: 14px;
  margin-bottom: 16px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  overflow: hidden;
  background: var(--field);
}
.share-progress::-webkit-progress-bar { background: var(--field); }
.share-progress::-webkit-progress-value { background: var(--green); transition: width .2s ease; }
.share-progress::-moz-progress-bar { background: var(--green); }
/* Sin content-length no hay porcentaje: se muestra una banda en movimiento. */
.share-progress:not([value]) { background:
  repeating-linear-gradient(135deg, var(--green) 0 12px, var(--field) 12px 24px);
  animation: avanza 1s linear infinite; }
@keyframes avanza { to { background-position: 34px 0; } }

.share-card .modal-actions .btn { flex: 1 1 100%; }
.share-card .hint { margin-top: 14px; }

@media (max-width: 640px) {
  .share-body { padding: 20px 16px 20px; }
}

/* ==== TOAST ==== */
/* En reposo se esconde por completo bajo el borde de la pantalla: el
   desplazamiento se calcula sobre su propia altura MÁS el hueco inferior,
   y además va invisible, para que no asome ni un píxel. */
.toast {
  position: fixed;
  left: 50%; bottom: 26px;
  transform: translate(-50%, calc(100% + 40px));
  opacity: 0;
  pointer-events: none;
  background: var(--ink);
  color: var(--yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border: 2px solid var(--yellow);
  border-radius: 999px;
  padding: 12px 22px;
  z-index: 90;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), opacity .22s ease;
  max-width: 90vw;
  text-align: center;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ==== PIE ==== */
.foot { position: relative; z-index: 10; }
.foot-inner {
  background: var(--grey);
  color: var(--ink);
  text-align: center;
  padding: 34px 20px 40px;
}
.foot-logo { height: 46px; width: auto; display: block; margin: 0 auto 18px; }
.foot-inner .eyebrow { color: var(--ink); font-weight: 800; margin: 0 0 9px; }
.foot-note { font-size: 13px; font-weight: 800; color: var(--grey-text); margin: 0 0 10px; }
.foot-link { color: var(--red-deep); font-weight: 800; text-decoration: none; font-size: 13px; }
.foot-link:hover { color: var(--ink); text-decoration: underline; }

/* ==== BARRA DE DESPLAZAMIENTO ====
   Antes era un bloque negro macizo que parecía un error de carga. Ahora el
   tirador va en el rojo de la marca, redondeado y separado del canal por un
   margen del mismo amarillo, así se lee como parte del diseño.
   Para volver a un tirador oscuro: cambia var(--red) por var(--ink) en las
   dos líneas marcadas. */
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: var(--yellow-soft); }
::-webkit-scrollbar-thumb {
  background: var(--red);                       /* color del tirador */
  border: 3px solid var(--yellow-soft);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink); }
::-webkit-scrollbar-corner { background: var(--yellow-soft); }

/* Firefox */
html { scrollbar-width: thin; scrollbar-color: var(--red) var(--yellow-soft); }  /* color del tirador */

/* ==== RESPONSIVE ==== */

/* El buscador baja a su propia línea antes de quedar estrecho. */
@media (max-width: 920px) {
  .filters { flex-wrap: wrap; }
  .search-wrap { flex: 1 1 100%; order: 2; }
  .tabs { order: 1; flex: 1 1 100%; }
}

/* Con muchas categorías, una fila que se desliza es más ordenado
   que cuatro filas de pastillas. */
@media (max-width: 860px) {
  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; }
}

@media (max-width: 820px) {
  .hero { padding: 26px 16px 26px; }
}

@media (max-width: 640px) {
  .topbar-in { padding: 11px 16px; gap: 12px; }
  /* En celular el contador se compacta para caber junto al logotipo. */
  .topbar .hero-count { padding-left: 12px; gap: 9px; }
  .topbar .hero-count strong { font-size: 1.75rem; }
  .topbar .hero-count span { font-size: 8.5px; letter-spacing: .06em; }

  .hero { padding: 24px 14px 22px; gap: 18px; }
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-lockup { width: 100%; }
  .hero-count { padding-left: 14px; border-left-width: 3px; }

  .wrap { padding: 6px 14px 44px; }
  .section-card { padding: 14px; border-width: 2.5px; border-radius: 16px; box-shadow: 4px 4px 0 var(--ink); }

  .tab { font-size: 10.5px; padding: 8px 12px; }

  .results-bar { gap: 12px; }
  .results-left { gap: 10px; }
  .sort-wrap { flex: 1 1 100%; }
  .sort-wrap select.field { flex: 1; min-width: 0; }

  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
  .card { border-width: 2.5px; border-radius: 14px; box-shadow: 4px 4px 0 var(--ink); }
  .card:hover { transform: none; box-shadow: 4px 4px 0 var(--ink); }
  .card-body { padding: 11px 11px 0; }
  .card-title { font-size: 0.82rem; }
  .card-meta { padding: 0 11px 9px; font-size: 9px; }
  .card-actions .btn { padding: 11px 4px; font-size: 10.5px; gap: 5px; }
  .card-actions .btn .ico { width: 14px; height: 14px; }
  .card-actions .btn-icon { padding: 0; }
  .card-actions .btn-icon .ico { width: 21px; height: 21px; }
  .tag { font-size: 9px; }
  .play i { width: 42px; height: 42px; }

  .more-wrap { margin-top: 24px; }
  .more-wrap .btn { min-width: 0; width: 100%; font-size: 12px; }

  .modal-card { border-radius: 18px; box-shadow: 6px 6px 0 var(--ink); }
  .modal-body { padding: 16px 15px 20px; }
  .modal-actions .btn { flex: 1 1 100%; }

  .foot-logo { height: 34px; }
}

/* En pantallas táctiles no dejar el hover pegado */
@media (hover: none) {
  .card:hover { transform: none; box-shadow: 6px 6px 0 var(--ink); }
  .btn:hover { transform: none; box-shadow: none; }
  .tab:hover { background: var(--field); }
  .tab[aria-selected="true"]:hover { background: var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}