/*
The Zoo Times — rediseño B/N. Editorial moderno, sin serif: Archivo para el
wordmark (condensado, mayúscula), Geist para UI/titulares, Geist Mono para
labels/meta. Monocromo estricto (#141414/#FFFFFF), sin acento de color.
*/

:root {
  --koi-color-marca: #141414;
  --koi-color-texto: #141414;
  --koi-color-texto-suave: #3A3733;
  --koi-color-fondo: #FFFFFF;
  --koi-color-gris: #4A4640;
  --koi-color-gris-claro: #F2F2F2;
  --koi-color-linea: rgba(20, 20, 20, .14);
  --koi-color-linea-suave: rgba(20, 20, 20, .08);
  --koi-color-placeholder: #EFEFEF;
  --koi-max-ancho: 1360px;

  --koi-fuente-marca: 'Archivo', sans-serif;
  --koi-fuente-ui: 'Geist', system-ui, sans-serif;
  --koi-fuente-mono: 'Geist Mono', monospace;

  --koi-espacio-borde: clamp(16px, 3vw, 40px);
  --koi-header-alto: 100px;
  --koi-header-alto-movil: 58px;

  --koi-ease: cubic-bezier(.2, .7, .2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--koi-fuente-ui);
  color: var(--koi-color-texto);
  background: var(--koi-color-fondo);
  -webkit-font-smoothing: antialiased;
  padding-top: var(--koi-header-alto-movil);
}

@media (min-width: 640px) {
  body {
    padding-top: var(--koi-header-alto);
  }
  .koi-progreso {
    top: var(--koi-header-alto);
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

::selection {
  background: var(--koi-color-marca);
  color: #fff;
}

.koi-envolver {
  max-width: var(--koi-max-ancho);
  margin: 0 auto;
  padding: 0 var(--koi-espacio-borde);
}

/* ---------- Barra de progreso de scroll ---------- */

.koi-progreso {
  position: fixed;
  top: var(--koi-header-alto-movil); left: 0; right: 0;
  height: 2px;
  z-index: 41;
  background: transparent;
  pointer-events: none;
}

.koi-progreso__barra {
  height: 2px;
  width: 0%;
  background: var(--koi-color-marca);
}

/* ---------- Masthead fijo ---------- */

.koi-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 30;
  background: var(--koi-color-fondo);
  border-bottom: 1px solid var(--koi-color-linea-suave);
}

.koi-header__fila {
  max-width: var(--koi-max-ancho);
  margin: 0 auto;
  padding: 0 var(--koi-espacio-borde);
  height: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 20px;
}

.koi-header__izq {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 4px;
}

.koi-header__der {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 8px;
}

.koi-header__marca {
  font-family: var(--koi-fuente-marca);
  font-weight: 800;
  font-stretch: 62%;
  text-transform: uppercase;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -.005em;
  white-space: nowrap;
}

.koi-header__marca--fantasma { visibility: hidden; }

.koi-header__burger {
  width: 40px; height: 40px;
  margin-left: -8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border: none; background: transparent; cursor: pointer;
}

.koi-header__burger span {
  display: block; background: var(--koi-color-marca);
}
.koi-header__burger span:nth-child(1),
.koi-header__burger span:nth-child(2) { width: 20px; height: 1.6px; }
.koi-header__burger span:nth-child(3) { width: 14px; height: 1.6px; align-self: center; transform: translateX(-3px); }

.koi-header__social,
.koi-drawer__social {
  display: flex; align-items: center; gap: 4px;
}

.koi-icono-social {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: var(--koi-color-marca);
}
.koi-icono-social:hover { background: var(--koi-color-gris-claro); }
.koi-icono-social--grande { width: 44px; height: 44px; border: 1px solid rgba(20,20,20,.2); }
.koi-icono-social[hidden] { display: none; }

.koi-header__buscar {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%; background: transparent; cursor: pointer; color: var(--koi-color-marca);
}
.koi-header__buscar:hover { background: var(--koi-color-gris-claro); }

.koi-header__nav {
  max-width: var(--koi-max-ancho);
  margin: 0 auto;
  padding: 0 var(--koi-espacio-borde);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: safe center;
  gap: clamp(12px, 1.8vw, 28px);
  overflow-x: auto;
  scrollbar-width: none;
}
.koi-header__nav::-webkit-scrollbar { display: none; }

.koi-nav {
  display: flex; align-items: center; gap: clamp(12px, 1.8vw, 28px);
  list-style: none; margin: 0; padding: 0;
}
.koi-nav li { flex: none; }
.koi-nav a {
  font-size: 13px; font-weight: 500; white-space: nowrap;
}

/* ---------- Buscador ---------- */

.koi-buscar {
  position: fixed; top: 100px; left: 0; right: 0; z-index: 29;
  background: var(--koi-color-fondo); border-bottom: 1px solid var(--koi-color-linea);
  padding: 16px var(--koi-espacio-borde); max-height: calc(100vh - 100px); overflow-y: auto;
}
.koi-buscar > * { max-width: var(--koi-max-ancho); margin-left: auto; margin-right: auto; }

/* Mismo diseño que la pestaña "Buscar" de Zoot dentro de la app de Wollo
   (wollo-cliente/panel/global/snacks.php + zoot-estilo.css) — tokens de
   color/fuente ya idénticos (--koi-color-* == --zc-*), portado 1:1. */
.koi-buscar__caja { position: relative; }
.koi-buscar__caja input {
  width: 100%; height: 48px; padding: 0 44px; border-radius: 999px; border: 1px solid var(--koi-color-marca);
  background: #fff; font-family: var(--koi-fuente-ui); font-size: 16px; color: var(--koi-color-texto); outline: none;
}
.koi-buscar__lupa { position: absolute; left: 16px; top: 15px; pointer-events: none; }
#koi-buscar-limpiar {
  position: absolute; right: 8px; top: 8px; width: 32px; height: 32px; border-radius: 50%; border: none;
  background: var(--koi-color-gris-claro); cursor: pointer; color: var(--koi-color-texto); font-size: 14px;
}

.koi-buscar__seccion { padding: 26px 0 0; }
.koi-buscar__seccion:first-child { padding-top: 20px; }
.koi-buscar__seccion-titulo { border-top: 2px solid var(--koi-color-marca); padding-top: 12px; margin-bottom: 4px; font-weight: 600; font-size: 20px; letter-spacing: -.03em; }
.koi-buscar__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.koi-buscar__pill { height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--koi-color-linea); background: #fff; cursor: pointer; font-family: var(--koi-fuente-ui); font-size: 14px; color: var(--koi-color-texto); }

.koi-buscar__vacio { margin: 24px 0 0; font-size: 15px; line-height: 1.5; color: var(--koi-color-texto-suave); }

.koi-buscar__resultado { display: flex; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--koi-color-linea-suave); }
.koi-buscar__resultado-media { flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--koi-color-placeholder); }
.koi-buscar__resultado-media img { width: 100%; height: 100%; object-fit: cover; }
.koi-buscar__resultado-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.koi-buscar__resultado-titulo { font-weight: 500; font-size: 15px; line-height: 1.22; letter-spacing: -.02em; }

.koi-buscar__numerada { display: flex; gap: 14px; align-items: baseline; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--koi-color-linea-suave); }
.koi-buscar__numerada-num { flex: none; font-family: var(--koi-fuente-marca); font-weight: 800; font-stretch: 62%; font-size: 30px; line-height: .9; width: 26px; }
.koi-buscar__numerada-texto { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.koi-buscar__numerada-titulo { font-weight: 500; font-size: 15px; line-height: 1.22; letter-spacing: -.02em; }

/* ---------- Drawer móvil ---------- */

.koi-drawer {
  position: fixed; inset: 0; z-index: 45;
  background: var(--koi-color-fondo);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform .45s var(--koi-ease), visibility .45s;
}
.koi-drawer.koi-drawer--abierto { transform: translateX(0); visibility: visible; }

.koi-drawer__cabecera {
  flex: none; height: 56px; padding: 0 16px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  border-bottom: 1px solid var(--koi-color-linea-suave);
}
.koi-drawer__marca { font-family: var(--koi-fuente-marca); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: 34px; line-height: 1; }
.koi-drawer__cerrar, .koi-drawer__buscar {
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; background: transparent; cursor: pointer; color: var(--koi-color-marca);
}
.koi-drawer__cerrar { justify-self: start; margin-left: -8px; }
.koi-drawer__buscar { justify-self: end; margin-right: -8px; }

.koi-drawer__cuerpo { flex: 1; overflow-y: auto; padding: 12px 20px 28px; display: flex; flex-direction: column; }

.koi-drawer__eyebrow {
  font-family: var(--koi-fuente-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--koi-color-gris); padding: 16px 0 8px;
}

.koi-drawer__nav { list-style: none; margin: 0; padding: 0; }
.koi-drawer__nav li { border-bottom: 1px solid rgba(20,20,20,.1); }
.koi-drawer__nav a {
  display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 14px 0;
  font-family: var(--koi-fuente-ui); font-weight: 600; font-size: 30px; letter-spacing: -.035em; line-height: 1.1;
}
.koi-drawer__nav a::after { content: "→"; font-size: 18px; font-weight: 400; }

.koi-drawer__pie { display: flex; flex-direction: column; gap: 20px; margin-top: auto; padding-top: 32px; }
.koi-drawer__pie-fila { display: flex; justify-content: space-between; align-items: center; }
.koi-drawer__nota { font-size: 12px; color: var(--koi-color-gris); }

/* ---------- Botones / pills ---------- */

.koi-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 20px; border-radius: 999px; font-family: var(--koi-fuente-ui); font-size: 14px; font-weight: 500; border: none; cursor: pointer;
}
.koi-boton--negro { background: var(--koi-color-marca); color: #fff; }
.koi-boton--full { width: 100%; height: 52px; }

.koi-pill {
  padding: 3px 10px; border-radius: 999px; border: 1px solid var(--koi-color-marca);
  font-family: var(--koi-fuente-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
}
.koi-pill--solida { background: var(--koi-color-marca); color: #fff; border-color: var(--koi-color-marca); }

.koi-meta { font-family: var(--koi-fuente-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--koi-color-gris); }
.koi-meta--firma { display: flex; align-items: center; gap: 10px; font-family: var(--koi-fuente-ui); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--koi-color-texto); }

.koi-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--koi-color-marca); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--koi-fuente-marca); font-weight: 800; font-stretch: 62%; font-size: 12px;
}

/* ---------- Secciones / cabeceras de sección ---------- */

.koi-seccion__cabecera {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  border-top: 2px solid var(--koi-color-marca); padding-top: 16px; margin-bottom: 24px;
}
.koi-seccion__titulo {
  margin: 0; font-family: var(--koi-fuente-ui); font-weight: 600; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.03em;
}
.koi-seccion__ver-todo { font-family: var(--koi-fuente-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }

/* ---------- Grillas de tarjetas ---------- */

/* Columnas FIJAS por breakpoint (no auto-fill): con auto-fill la cantidad de
   columnas dependía del ancho y no de las notas — 3 notas en 4 columnas, 4 en
   5 — y quedaban columnas vacías a la derecha (examen de diseño 2026-10-11).
   El divisor vertical es un ::before en el gap, oculto en la 1ra columna de
   cada fila, en vez del viejo truco margin-left:-21px + overflow:hidden (que
   dejaba la línea de la 1ra columna asomando fuera del margen). */
.koi-grid { --koi-grid-cols: 1; --koi-grid-gap: 40px; display: grid; grid-template-columns: repeat(var(--koi-grid-cols), minmax(0, 1fr)); gap: 32px var(--koi-grid-gap); }
.koi-grid > * { position: relative; min-width: 0; }
.koi-grid > *::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--koi-grid-gap) / -2); border-left: 1px solid var(--koi-color-linea); }
@media (min-width: 640px) {
  .koi-grid--2, .koi-grid--3, .koi-grid--4 { --koi-grid-cols: 2; }
  .koi-grid--2 > :nth-child(2n+1)::before,
  .koi-grid--4 > :nth-child(2n+1)::before { display: none; }
  .koi-grid--3 { --koi-grid-cols: 3; }
  .koi-grid--3 > :nth-child(3n+1)::before { display: none; }
}
@media (min-width: 960px) {
  .koi-grid--4 { --koi-grid-cols: 4; }
  .koi-grid--4 > *::before { display: block; }
  .koi-grid--4 > :nth-child(4n+1)::before { display: none; }
}

.koi-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.koi-tarjeta__media { display: block; overflow: hidden; background: var(--koi-color-placeholder); position: relative; aspect-ratio: 4/3; }
.koi-tarjeta__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--koi-ease); }
.koi-tarjeta:hover .koi-tarjeta__media img { transform: scale(1.05); }
/* Sistema de proporciones único: 16:10 nota grande, 4:3 tarjeta, 1:1
   miniatura. --5-4 queda como alias de 4:3 por compatibilidad. */
.koi-tarjeta--4-3 .koi-tarjeta__media,
.koi-tarjeta--5-4 .koi-tarjeta__media { aspect-ratio: 4/3; }
.koi-tarjeta--1-1 .koi-tarjeta__media { aspect-ratio: 1/1; }
.koi-tarjeta__titulo { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 500; letter-spacing: -.02em; font-size: 18px; line-height: 1.2; text-wrap: pretty; }

/* Móvil: las grillas pasan a lista compacta (miniatura 4:3 a la izquierda +
   texto) en vez de apilar fotos a todo el ancho — antes 3-4 fotos de ~270px
   de alto seguidas, mucho scroll vacío. */
@media (max-width: 639px) {
  .koi-grid { gap: 0; }
  .koi-grid > *::before { display: none; }
  .koi-grid > .koi-tarjeta {
    display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; align-content: start;
    padding: 16px 0; border-bottom: 1px solid var(--koi-color-linea-suave);
  }
  .koi-grid > .koi-tarjeta:first-child { padding-top: 0; }
  .koi-grid > .koi-tarjeta > .koi-tarjeta__media { grid-row: 1 / span 3; grid-column: 1; align-self: start; }
  .koi-grid > .koi-tarjeta > :not(.koi-tarjeta__media) { grid-column: 2; }
  .koi-grid > .koi-tarjeta .koi-tarjeta__titulo { font-size: 16px; line-height: 1.22; }
}

/* "Temas" (aside de Destacadas, Home + Categoría): 2 miniaturas cuadradas
   lado a lado. Vive acá y no en front-page.css porque archive.php usa el
   mismo bloque — en categoría faltaba la regla y salían apiladas y gigantes. */
.koi-temas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.koi-temas .koi-tarjeta__titulo { font-size: 14px; line-height: 1.25; }

/* ---------- Footer ---------- */

.koi-footer { max-width: var(--koi-max-ancho); margin: 0 auto; padding: clamp(64px, 8vw, 120px) var(--koi-espacio-borde) 40px; }
.koi-footer__wordmark {
  /* El piso de 64px forzaba texto más ancho que el espacio disponible en
     celular (nunca hay 64px "de sobra" en pantallas angostas), así que
     "The Zoo Times" se veía obligado a partirse en 2 líneas — y al recortar
     verticalmente, la "T" de "Times" asomando justo debajo de "ZOO" se leía
     como "ZOOT" (hallazgo 2026-09-25/26). Piso bajo (nunca se activa en un
     dispositivo real) + nowrap: una sola línea siempre, escalando por vw
     según el ancho real disponible. Techo bajado de 220 a 200px: a esos
     220px el texto pasaba el ancho máximo del contenedor (1360px) en
     monitores muy anchos y también se cortaba.  */
  font-family: var(--koi-fuente-ui); font-weight: 500; font-size: clamp(40px, 14vw, 200px); line-height: .85; letter-spacing: -.03em;
  white-space: nowrap;
  padding-bottom: 28px; border-bottom: 1px solid var(--koi-color-marca);
}
.koi-footer__fila { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; padding-top: 20px; font-size: 13px; }
.koi-footer__nav { display: flex; flex-direction: column; gap: 10px; }
.koi-footer__links { display: flex; flex-wrap: wrap; gap: 10px 18px; list-style: none; margin: 0; padding: 0; }
.koi-footer__links li { display: contents; }
.koi-footer__copy { color: var(--koi-color-gris); }

@media (max-width: 639px) {
  .koi-buscar { top: 58px; max-height: calc(100vh - 58px); }
}

/* ---------- Destacadas (Home + Categoria) ---------- */

.koi-destacadas { display: flex; flex-wrap: wrap; gap: clamp(32px, 3vw, 48px); }
.koi-destacadas__principal { flex: 3 1 620px; min-width: 0; }
.koi-destacadas__aside { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 40px; }

.koi-destacada-feature { display: flex; flex-wrap: wrap; gap: 28px; padding-bottom: 32px; border-bottom: 1px solid var(--koi-color-linea); }
.koi-destacada-feature__texto { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; }
.koi-destacada-feature__texto h3 { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 500; letter-spacing: -.03em; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.08; }
.koi-destacada-feature__texto p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--koi-color-texto-suave); }
.koi-destacada-feature__media { flex: 1.7 1 360px; align-self: flex-start; position: relative; overflow: hidden; aspect-ratio: 16/10; background: var(--koi-color-placeholder); }
.koi-destacada-feature__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--koi-ease); }
.koi-destacada-feature:hover .koi-destacada-feature__media img { transform: scale(1.03); }

.koi-tendencia { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--koi-color-linea); }
.koi-tendencia__n { padding-top: 3px; }
.koi-tendencia__titulo { display: block; font-family: var(--koi-fuente-ui); font-weight: 500; letter-spacing: -.02em; font-size: 16px; line-height: 1.25; margin-top: 4px; }

.koi-seccion-simple { margin-top: clamp(56px, 6vw, 96px); }

/* Antes clamp(80,10vw,160) — sumado al padding-top del footer dejaba hasta
   ~280px en blanco antes del wordmark. */
.koi-espaciador { height: clamp(16px, 3vw, 40px); }

@media (max-width: 639px) {
  .koi-destacadas { flex-direction: column; }
  /* Al pasar a columna, el flex-basis (620px/260px, pensado como ANCHO en
     fila) pasa a controlar el ALTO y dejaba huecos vacíos — mismo bug que
     ya se corrigió en .koi-tecnologia__media (2026-09-28). */
  .koi-destacadas > * { flex-basis: auto; }
  .koi-destacada-feature__texto, .koi-destacada-feature__media { flex-basis: auto; width: 100%; }
}

/* ---------- Paginación (búsqueda / archivos) ---------- */

.koi-paginacion { margin-top: 40px; }
.koi-paginacion .nav-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.koi-paginacion .page-numbers {
  min-width: 40px; height: 40px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 1px solid var(--koi-color-linea); font-size: 14px;
}
.koi-paginacion .page-numbers.current { background: var(--koi-color-marca); border-color: var(--koi-color-marca); color: #fff; }
.koi-paginacion .page-numbers.dots { border: none; min-width: 0; padding: 0 4px; }
.koi-paginacion a.page-numbers:hover { border-color: var(--koi-color-marca); }

/* Preguntas frecuentes al final del artículo (y de páginas con page.php).
   Vive aquí y no en single.css porque page.php no carga single.css. */
.koi-faq { padding-top: 24px; margin-top: 16px; border-top: 2px solid var(--koi-color-marca); }
.koi-faq .koi-faq__titulo { margin: 0 0 8px; font-family: var(--koi-fuente-ui); font-weight: 600; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; letter-spacing: -.035em; }
.koi-faq__item { border-bottom: 1px solid var(--koi-color-linea); }
.koi-faq__pregunta {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 0; cursor: pointer; list-style: none;
  font-family: var(--koi-fuente-ui); font-weight: 600; font-size: clamp(17px, 1.3vw, 19px); line-height: 1.35; letter-spacing: -.015em;
}
.koi-faq__pregunta::-webkit-details-marker { display: none; }
.koi-faq__pregunta::after {
  content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; margin-top: -2px;
  border: 1px solid rgba(20,20,20,.3); border-radius: 999px; font-family: var(--koi-fuente-mono); font-weight: 400; font-size: 16px;
  transition: transform .2s ease;
}
.koi-faq__item[open] > .koi-faq__pregunta::after { transform: rotate(45deg); }
.koi-faq__pregunta:hover::after { border-color: var(--koi-color-marca); }
.koi-faq__pregunta:focus-visible { outline: 2px solid var(--koi-color-marca); outline-offset: 4px; }
.koi-faq__respuesta { padding: 0 44px 20px 0; font-size: 16px; line-height: 1.65; color: var(--koi-color-texto-suave); }
.koi-faq__respuesta p { margin: 0; }
.koi-faq__respuesta p + p { margin-top: 10px; }
@media (prefers-reduced-motion: reduce) {
  .koi-faq__pregunta::after { transition: none; }
}

/* Reglas de header responsive AL FINAL del archivo a propósito: deben ganar
   el empate de especificidad contra .koi-boton/.koi-nav/etc. definidas más
   arriba con la misma especificidad — si no, el orden de cascada hace que
   esas clases "ganen" y el nav/redes se vean en móvil pese al display:none
   (hallazgo 2026-09-25). */
@media (max-width: 639px) {
  .koi-header__social { display: none; }
  .koi-header__nav { display: none; }
}
@media (min-width: 640px) {
  .koi-header__burger { display: none; }
}