/* ---------- Masthead + wordmark flotante (scroll-morph) ---------- */

.koi-masthead-flotante {
  position: fixed; top: 0; left: 0; z-index: 31;
  margin: 0; padding: 0; border: none; background: none; cursor: pointer; color: var(--koi-color-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;
  transform-origin: top left;
  will-change: transform, opacity;
  /* opacity:0 no saca el elemento del hit-testing — sin esto bloqueaba clics
     en buscar/suscribir aunque fuera invisible (hallazgo 2026-09-25). */
  pointer-events: none;
}
.koi-masthead-flotante.koi-masthead-flotante--activo {
  pointer-events: auto;
}

.koi-masthead {
  max-width: var(--koi-max-ancho); margin: 0 auto; padding: clamp(24px, 4vw, 48px) var(--koi-espacio-borde) 0;
}
.koi-masthead__wordmark {
  /* width:fit-content + margin:auto (en vez de bloque a todo el ancho +
     text-align:center) para que su getBoundingClientRect() calce exacto con
     el ancho real del texto — el scroll-morph (actualizarMorph en base.js)
     usa ese rect para calcular dónde aterriza el logo flotante, y con la
     caja de ancho completo quedaba mal alineado/escalado (hallazgo
     2026-09-25, se veía como un "fantasma" duplicado del wordmark). */
  width: fit-content;
  margin: 0 auto;
  font-family: var(--koi-fuente-marca); font-weight: 800; font-stretch: 62%; text-transform: uppercase;
  font-size: min(16vw, 210px); line-height: .86; letter-spacing: -.005em; white-space: nowrap;
}
.koi-masthead__fila { display: flex; align-items: center; gap: 20px; padding: clamp(16px, 2vw, 24px) 0; font-size: 13px; }
.koi-masthead__linea { flex: 1; height: 1px; background: rgba(20,20,20,.2); }
.koi-masthead__nota { flex: none; color: var(--koi-color-gris); }

@media (max-width: 639px) {
  .koi-masthead__wordmark { font-size: min(20vw, 120px); }
}

/* ---------- Header fusionado en una línea (solo Home) ----------
   Arriba del todo el header es una sola línea (redes + categorías +
   buscador) porque el logo todavía vive en el hero gigante. Al
   primer scroll (clase .koi-scrolleado en <html>, ver base.js) el menú
   "baja" a su propia fila para dejarle espacio al logo flotante que empieza
   a aparecer (scroll-morph ya existente). En mobile el patrón es otro (drawer
   con burger), así que este nav fusionado no debe existir ahí. */
@media (max-width: 639px) {
  .koi-header__nav-fusionado { display: none; }
}
@media (min-width: 640px) {
  /* Columna central de auto (ancho del logo) a 1fr constreñida: con el nav
     fusionado adentro (mucho más ancho que el logo) hay que poder encogerla
     para que el overflow-x scrollee en vez de invadir redes/buscador. */
  body.home .koi-header__fila {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  #koi-header-marca-fantasma {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
  }

  .koi-header__nav-fusionado {
    grid-column: 2;
    grid-row: 1;
    justify-self: stretch;
    min-width: 0;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: safe center;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .koi-header__nav-fusionado::-webkit-scrollbar { display: none; }

  /* Sin transición: el padding-top del body cambia de golpe (una sola
     reflow) en vez de animarse — si se anima, compite con el cálculo en vivo
     del scroll-morph del wordmark (actualizarMorph en base.js), que asume
     que el movimiento del masthead se debe solo al scroll y no a un reflow
     paralelo, y el logo flotante termina viéndose duplicado/fantasma en vez
     de un solo elemento continuo (hallazgo 2026-09-25). El "bajar" del menú
     ya se ve animado igual, por su propia transición de max-height/opacity. */
  body.home {
    padding-top: 56px;
  }
  html.koi-scrolleado body.home {
    padding-top: var(--koi-header-alto);
  }

  /* La barra de progreso sigue el mismo alto dinámico del header. */
  body.home .koi-progreso {
    top: 56px;
  }
  html.koi-scrolleado body.home .koi-progreso {
    top: var(--koi-header-alto);
  }

  body.home .koi-header__nav {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height .25s ease, opacity .2s ease;
  }
  html.koi-scrolleado body.home .koi-header__nav {
    max-height: 44px;
    opacity: 1;
  }

  html.koi-scrolleado .koi-header__nav-fusionado {
    display: none;
  }
}

.koi-hero-imagen {
  display: block; position: relative; width: 100%; height: clamp(240px, 34vw, 460px); overflow: hidden; background: var(--koi-color-placeholder);
}
.koi-hero-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; transition: transform 1.2s var(--koi-ease); }
.koi-hero-imagen:hover img { transform: scale(1.02); }

/* ---------- Portada (nota principal + rail) ---------- */

.koi-portada { display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); padding: clamp(32px, 4vw, 56px) 0 clamp(40px, 5vw, 72px); }
.koi-portada__principal { flex: 2 1 520px; display: flex; flex-direction: column; gap: 24px; }
.koi-portada__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.koi-portada__titulo { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 500; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
.koi-portada__dek { margin: 0; max-width: 56ch; font-size: 18px; line-height: 1.5; color: var(--koi-color-texto-suave); }

.koi-portada__rail { flex: 1 1 300px; display: flex; flex-direction: column; border-top: 1px solid rgba(20,20,20,.12); }
.koi-portada__rail-item { display: flex; gap: 14px; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(20,20,20,.12); }
.koi-portada__rail-media { flex: none; width: 84px; height: 64px; overflow: hidden; background: var(--koi-color-placeholder); }
.koi-portada__rail-media img { width: 100%; height: 100%; object-fit: cover; }
.koi-portada__rail-titulo { display: block; font-family: var(--koi-fuente-ui); font-weight: 500; letter-spacing: -.02em; font-size: 18px; line-height: 1.15; margin-top: 6px; }

/* ---------- Sliders horizontales ---------- */

.koi-slider { margin-top: clamp(56px, 6vw, 96px); }
.koi-slider__flechas { display: flex; gap: 8px; }
.koi-slider__flechas button {
  width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--koi-color-marca); background: #fff; color: var(--koi-color-marca);
  cursor: pointer; font-size: 16px; display: flex; align-items: center; justify-content: center;
}
.koi-slider__flechas button:hover { background: var(--koi-color-marca); color: #fff; }
.koi-slider__pista { display: flex; align-items: flex-start; gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.koi-slider__pista::-webkit-scrollbar { display: none; }
.koi-slider__item { flex: none; width: max(220px, calc((100% - 96px) / 5)); scroll-snap-align: start; }

/* ---------- Opinión (bloque invertido) ---------- */

.koi-opinion { margin-top: clamp(56px, 6vw, 96px); }
.koi-seccion__cabecera--clara .koi-seccion__titulo { color: var(--koi-color-texto); }
.koi-opinion__bloque { display: flex; flex-wrap: wrap; background: var(--koi-color-marca); color: #fff; }
.koi-opinion__texto { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 64px); }
.koi-opinion__texto h3 { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 500; letter-spacing: -.035em; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.02; }
.koi-opinion__texto p { margin: 0; max-width: 48ch; font-size: 15px; line-height: 1.55; color: #CFCBC4; }
/* La foto se posiciona absoluta: antes su alto natural (fotos verticales
   640x960) estiraba todo el bloque a ~960px. Ahora el bloque mide lo que
   pide el texto (mínimo 360px) y la foto lo rellena con cover. */
.koi-opinion__texto .koi-pill { align-self: flex-start; }
.koi-opinion__media { flex: 1 1 380px; position: relative; min-height: clamp(280px, 30vw, 420px); overflow: hidden; background: #2A2A2A; }
.koi-opinion__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--koi-ease); }
.koi-opinion__bloque:hover .koi-opinion__media img { transform: scale(1.03); }

/* ---------- Tecnología (sección oscura) ---------- */

.koi-tecnologia {
  background: var(--koi-color-marca); color: #F2F0EB; padding: clamp(32px, 5vw, 80px);
  display: flex; flex-wrap: wrap; gap: clamp(32px, 5vw, 80px); margin-top: clamp(56px, 6vw, 96px);
}
.koi-tecnologia__media { flex: 1.3 1 460px; display: block; position: relative; overflow: hidden; aspect-ratio: 4/3; background: #2A2A2A; }
.koi-tecnologia__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--koi-ease); }
.koi-tecnologia__media:hover img { transform: scale(1.03); }
.koi-tecnologia__texto { flex: 1 1 320px; display: flex; flex-direction: column; gap: 20px; }
.koi-tecnologia__cabecera { display: flex; justify-content: space-between; align-items: center; font-family: var(--koi-fuente-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
.koi-tecnologia__cabecera a { color: #F2F0EB; }
.koi-tecnologia__texto h2 { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 500; font-size: clamp(36px, 4vw, 60px); line-height: .98; letter-spacing: -.015em; }
.koi-tecnologia__lista { display: flex; flex-direction: column; margin-top: auto; }
.koi-tecnologia__lista a { display: flex; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid rgba(242,240,235,.3); color: #F2F0EB; font-size: 15px; line-height: 1.3; }
.koi-tecnologia__lista-media { flex: none; width: 64px; height: 48px; overflow: hidden; background: #2A2A2A; display: block; }
.koi-tecnologia__lista-media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Podcast (decorativo) ---------- */

.koi-podcast { margin-top: clamp(56px, 6vw, 96px); }
.koi-podcast__reproductor { background: var(--koi-color-marca); color: #fff; display: flex; flex-direction: column; }
.koi-podcast__intro { display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 56px); padding: clamp(24px, 4vw, 56px); }
.koi-podcast__caratula {
  flex: 0 1 520px; min-width: 280px; aspect-ratio: 1/1; background: #fff; color: var(--koi-color-marca);
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
.koi-podcast__caratula-wordmark { font-family: var(--koi-fuente-marca); font-weight: 800; font-stretch: 62%; text-transform: uppercase; font-size: clamp(56px, 6.4vw, 92px); line-height: .84; letter-spacing: -.005em; }
.koi-podcast__descripcion { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 20px; justify-content: flex-end; }
.koi-podcast__descripcion h2 { margin: 0; font-family: var(--koi-fuente-ui); font-weight: 600; font-size: clamp(40px, 5.6vw, 84px); line-height: .95; letter-spacing: -.045em; }
.koi-podcast__descripcion p { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.55; color: #CFCBC4; }
.koi-podcast__controles { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.koi-podcast__play {
  width: 60px; height: 60px; border-radius: 50%; border: none; background: #fff; color: var(--koi-color-marca); cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: transform .2s var(--koi-ease);
}
.koi-podcast__play:hover { transform: scale(1.06); }

.koi-podcast__lista { padding: 0 clamp(12px, 3vw, 40px) clamp(16px, 2vw, 24px); }
.koi-podcast__lista-cabecera {
  display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 16px; padding: 0 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.14); font-family: var(--koi-fuente-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #CFCBC4;
}
.koi-podcast__episodio {
  display: grid; grid-template-columns: 32px minmax(0,1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 10px 12px;
  border: none; border-radius: 6px; background: transparent; color: #fff; cursor: pointer; text-align: left; font-family: var(--koi-fuente-ui);
}
.koi-podcast__episodio:hover { background: rgba(255,255,255,.08); }
.koi-podcast__episodio.koi-podcast__episodio--activo { background: rgba(255,255,255,.1); }
.koi-podcast__episodio-plays { white-space: nowrap; text-align: right; }
.koi-podcast__episodio-titulo { font-size: 15px; font-weight: 500; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 639px) {
  .koi-portada, .koi-tecnologia, .koi-podcast__intro { flex-direction: column; }

  /* .koi-tecnologia__media (aspect-ratio 4/3) y .koi-podcast__caratula
     (aspect-ratio 1/1) traen un flex-basis pensado para fila (ancho en
     desktop) — al pasar a flex-direction:column ese basis pasa a controlar
     el ALTO, y el aspect-ratio deriva un ancho desde ese alto (460px*4/3 =
     613px), desbordando el contenedor angosto de mobile y generando scroll
     horizontal en toda la página (hallazgo 2026-09-28). Se resetea el basis
     y se fija el ancho al 100% para que el aspect-ratio calcule el alto a
     partir del ancho, no al revés. */
  .koi-tecnologia__media { flex-basis: auto; width: 100%; }
  .koi-podcast__caratula { flex-basis: auto; width: 100%; }
  /* Mismo problema en la portada: flex-basis 520px se volvía ALTO y dejaba
     ~160px vacíos debajo de "Leer la nota". */
  .koi-portada > * { flex-basis: auto; }
  .koi-opinion__media { flex-basis: auto; width: 100%; min-height: 0; aspect-ratio: 4/3; }
  .koi-podcast__lista-cabecera > :last-child, .koi-podcast__episodio-plays { display: none; }
  .koi-podcast__lista-cabecera, .koi-podcast__episodio { grid-template-columns: 28px minmax(0,1fr); }

}