/* BaseForum — Colección (coleccion.css) · Mobile-first */

/* ── Visibilidad de headers ── */
.col-header-desktop { display: none !important; }
@media (min-width: 769px) {
  .col-header-desktop { display: flex !important; }
  .col-header-mobile  { display: none !important; }
}

/* ── Topbar móvil ── */
.col-topbar {
  display: flex;
  align-items: center;
  padding: 12px var(--app-padding-mob);
  border-bottom: 1px solid var(--bf-line);
  gap: 12px;
  background: var(--bf-bg);
}
.col-topbar__back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink);
  flex-shrink: 0;
}
.col-topbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.col-topbar__stripe {
  display: inline-block;
  width: 4px;
  height: 32px;
  background: var(--bf-rojo);
  border-radius: 1px;
  flex-shrink: 0;
}
.col-topbar__titulo {
  font-family: var(--bf-font-display);
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.col-topbar__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--bf-ink);
  margin-left: auto;
}

/* ── Showcase cinematográfico ── */
.col-cinematic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 480px;
  padding: 48px 0 0;
  border-bottom: 1px solid var(--bf-line);
  overflow: hidden;
}

/* Badges meta: stack vertical top-left */
.col-cin__meta-badges {
  position: absolute;
  top: 20px;
  left: calc(var(--cin-inset, 0px) + var(--app-padding-mob));
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 5;
}
.col-cin__badge-cat {
  font-family: var(--bf-font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--bf-marino);
  color: #fff;
  padding: 4px 8px;
}
.col-cin__badge-ref {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  background: var(--bf-gualda);
  color: var(--bf-marino);
  padding: 4px 8px;
  align-self: flex-start;
}

/* Stage: título gigante + imagen encima */
.col-cin__stage {
  position: relative;
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
}

/* Título gigante de fondo — protagonista.
   El font-size objetivo es grande; JS lo ajusta hacia abajo si la palabra
   más larga no cabe en el ancho disponible (fit-to-width sin partir palabras). */
.col-cin__bg-title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--bf-font-display);
  font-size: clamp(56px, 20vw, 160px);
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--bf-ink);
  opacity: 0.1;
  z-index: 1;
  pointer-events: none;
  padding: 0 8px;
  margin: 0;
  word-break: normal;
  overflow-wrap: normal;
  white-space: pre-line; /* respeta saltos \n forzados por JS para títulos específicos */
}

/* Imagen encima del título */
.col-cin__img-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 580px;
  height: 300px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.col-cin__img-wrap img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 16px 32px rgba(10,34,64,0.15));
}
.col-cin__placeholder {
  font-family: var(--bf-font-mono);
  font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bf-ink-3);
}

/* Zona inferior */
.col-cin__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  z-index: 3;
  padding-top: 16px;
}

/* Dots centrados */
.col-cin__dots-track {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 16px;
}

/* Grid 2 columnas */
.col-cin__bottom-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.col-cin__bottom-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--app-padding-mob) 20px;
}
.col-cin__dot-line {
  display: block;
  width: 40px; height: 1.5px;
  background: var(--bf-line);
}
.col-cin__dot {
  width: 10px; height: 10px;
  min-width: 10px; min-height: 10px;
  padding: 0;
  box-sizing: content-box;
  border-radius: 50%;
  background: var(--bf-ink-3);
  border: none; cursor: pointer;
  opacity: 0.25;
  flex-shrink: 0;
  transition: opacity 0.25s, transform 0.25s, background 0.25s;
  margin: 0 6px;
}
.col-cin__dot.is-active {
  opacity: 1;
  background: var(--bf-rojo);
  transform: scale(1.35);
}

/* Nombre visible del vehículo */
.col-cin__nombre {
  font-family: var(--bf-font-display);
  font-size: 22px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.05;
  color: var(--bf-ink);
  margin: 0;
}

/* Subtítulo */
.col-cin__sub {
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}

/* CTA */
.col-cin__cta { font-size: 10px; align-self: flex-start; margin-top: 4px; }

/* Descripción derecha */
.col-cin__desc {
  padding: 0 var(--app-padding-mob) 24px;
  font-size: 12px;
  line-height: 1.65;
  color: var(--bf-ink-2);
  margin: 0;
}

/* Flechas — ocultas en móvil */
.col-cin__nav { display: none; }

@media (min-width: 769px) {
  .col-cin__nav {
    display: flex;
    position: absolute;
    top: 42%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 8px 0;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--bf-ink);
    z-index: 4;
    opacity: 0.35;
    transition: opacity 0.2s;
  }
  .col-cin__nav:hover { opacity: 0.9; }
  .col-cin__nav--prev { left: calc(var(--cin-inset) + var(--app-padding-x)); }
  .col-cin__nav--next { right: calc(var(--cin-inset) + var(--app-padding-x)); }
}

/* ── Cabecera colección completa ── */
.col-collection-header {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 32px var(--app-padding-mob) 28px;
  border-top: 1px solid var(--bf-line);
  border-bottom: 1px solid var(--bf-line);
}
.col-collection-header__titulo {
  font-family: var(--bf-font-display);
  font-size: clamp(40px, 11vw, 72px);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--bf-ink);
  margin: 8px 0 0;
}
.col-collection-header__titulo em {
  font-style: italic;
  font-weight: 300;
}
.col-collection-header__desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--bf-ink-2);
  margin: 12px 0 0;
}

/* Tabs de filtro */
.col-collection-header__filter-label {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  margin: 0 0 8px;
}
.col-collection-header__tabs {
  display: flex;
  border: 1px solid var(--bf-line);
}
.col-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s;
}
.col-tab.is-active { background: var(--bf-ink); }
.col-tab + .col-tab { border-left: 1px solid var(--bf-line); }
.col-tab__num {
  font-family: var(--bf-font-mono);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}
.col-tab.is-active .col-tab__num { color: rgba(255,255,255,0.5); }
.col-tab__label {
  font-family: var(--bf-font-display);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--bf-ink);
}
.col-tab.is-active .col-tab__label { color: #fff; }
.col-collection-header__meta {
  font-family: var(--bf-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  margin: 8px 0 0;
}

@media (min-width: 769px) {
  .col-collection-header {
    flex-direction: row;
    align-items: flex-end;
    gap: 48px;
    padding: 44px var(--app-padding-x) 40px;
  }
  .col-collection-header__left { flex: 1; }
  .col-collection-header__right {
    flex: 0 0 42%;
    padding-top: 4px;
  }
  .col-collection-header__tabs { width: 100%; }
  .col-collection-header__desc { font-size: 14px; max-width: 480px; }
}

/* ── Sección genérica ── */
.col-section {
  border-bottom: 1px solid var(--bf-line);
  padding-bottom: 32px;
  --block-color:       var(--bf-rojo);
  --block-header-bg:   var(--bf-rojo);
  --block-rows-bg:     var(--bf-rojo-bg);
  --block-header-ink:  var(--bf-white);
  --block-header-ink2: rgba(255,255,255,0.68);
  --block-header-line: rgba(255,255,255,0.18);
  --block-row-border:  rgba(200,16,46,0.18);
  --block-row-hover:   rgba(200,16,46,0.10);
}
.col-section--marino {
  --block-color:       var(--bf-marino);
  --block-header-bg:   var(--bf-marino);
  --block-rows-bg:     var(--bf-marino-bg);
  --block-header-ink:  var(--bf-white);
  --block-header-ink2: rgba(255,255,255,0.68);
  --block-header-line: rgba(255,255,255,0.14);
  --block-row-border:  rgba(10,34,64,0.16);
  --block-row-hover:   rgba(10,34,64,0.08);
}
.col-section--azul {
  --block-color:       var(--bf-azul);
  --block-header-bg:   var(--bf-azul);
  --block-rows-bg:     var(--bf-azul-bg);
  --block-header-ink:  var(--bf-white);
  --block-header-ink2: rgba(255,255,255,0.68);
  --block-header-line: rgba(255,255,255,0.16);
  --block-row-border:  rgba(0,61,165,0.16);
  --block-row-hover:   rgba(0,61,165,0.09);
}
.col-section--gualda {
  --block-color:       var(--bf-gualda-dark);
  --block-header-bg:   var(--bf-gualda);
  --block-rows-bg:     var(--bf-gualda-bg);
  --block-header-ink:  var(--bf-gualda-ink);
  --block-header-ink2: rgba(26,18,0,0.62);
  --block-header-line: rgba(26,18,0,0.16);
  --block-row-border:  rgba(160,120,0,0.20);
  --block-row-hover:   rgba(160,120,0,0.10);
}

/* ── Cabecera de sección ── */
.col-section__heading {
  padding: 28px var(--app-padding-mob) 20px;
  border-bottom: 1px solid var(--bf-line-soft);
}
.col-section__heading h2 {
  font-size: 28px;
  line-height: 1;
  margin-top: 8px;
}
.col-section__sub {
  font-size: 13px;
  color: var(--bf-ink-2);
  margin-top: 6px;
}
.col-section__empty {
  padding: 24px var(--app-padding-mob);
  font-family: var(--bf-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
}


/* ── Cabecera de bloque ── */
.col-block-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px var(--app-padding-mob) 20px;
  background: var(--block-header-bg);
  border-bottom: 1px solid var(--block-header-line);
}
.col-block-header .eyebrow {
  color: var(--block-header-ink2);
}
.col-block-header__num {
  font-family: var(--bf-font-display);
  font-size: 64px;
  font-weight: 300;
  color: var(--block-header-ink);
  line-height: 0.82;
  flex-shrink: 0;
  opacity: 0.22;
}
.col-block-header__body { flex: 1; }
.col-block-header__titulo {
  font-size: 24px;
  line-height: 1;
  margin-top: 8px;
  color: var(--block-header-ink);
}
.col-block-header__sub {
  font-family: var(--bf-font-display);
  font-size: 13px;
  font-weight: 300;
  color: var(--block-header-ink2);
  text-transform: none;
  letter-spacing: 0;
  margin-top: 6px;
}
.col-block-header__desc {
  font-size: 12px;
  color: var(--block-header-ink2);
  line-height: 1.55;
  margin-top: 8px;
}

/* ── Sub-cabecera de bloque dentro de zona ── */
.col-block-subheader {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 10px var(--app-padding-mob);
  border-bottom: 1px solid rgba(0,0,0,.18);
  background: #8B0B20;  /* rojo oscuro por defecto (rojo más oscuro que --bf-rojo #C8102E) */
  color: #fff;
}
.col-block-subheader--marino { background: #06182F; }   /* marino más oscuro */
.col-block-subheader--azul   { background: #007CBA; }   /* azul corporativo BaseForum */
.col-block-subheader--gualda { background: #F2B700; color: #1a1410; }  /* amarillo corporativo BaseForum */
.col-block-subheader__line {
  margin: 0;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--bf-font-display);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.col-block-subheader__titulo {
  font-size: 15px;
  color: inherit;
}
.col-block-subheader__sep {
  color: inherit;
  opacity: 0.5;
}
.col-block-subheader__sub {
  font-size: 13px;
  font-weight: 300;
  color: inherit;
  opacity: 0.78;
}

/* ── Lista editorial de tótems ── */
.col-list {
  display: flex;
  flex-direction: column;
}

.col-row {
  display: grid;
  grid-template-columns: 40px 72px 1fr 20px;
  align-items: center;
  gap: 16px;
  padding: 16px var(--app-padding-mob);
  border-top: 1px solid var(--block-row-border, var(--bf-line-soft));
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
}
.col-row:hover { background: var(--block-row-hover, var(--bf-bg-sunken)); }

.col-row__num {
  font-family: var(--bf-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  /* Contraste AA garantizado en todos los bloques y fondos (WCAG 1.4.3):
     el código de referencia va en rojo de texto, no en el color de acento del
     bloque (que en gualda/azul no llega a 4,5:1 como texto pequeño). */
  color: var(--bf-rojo-texto);
  line-height: 1;
  white-space: nowrap;
}

.col-row__thumb {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  background: var(--bf-bg-sunken);
  overflow: hidden;
}
.col-row__thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.col-row__thumb-placeholder {
  width: 100%; height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--bf-line-soft),
    var(--bf-line-soft) 1px,
    transparent 1px,
    transparent 8px
  );
}

.col-row__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.col-row__eyebrow {
  font-family: var(--bf-font-mono);
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bf-ink-3);
  margin: 0;
}
.col-row__titulo {
  font-family: var(--bf-font-display);
  font-size: 15px;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0.01em;
  color: var(--bf-ink);
  margin: 0;
}
.col-row__texto {
  font-size: 12px;
  color: var(--bf-ink-2);
  line-height: 1.4;
  margin: 2px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.col-row__arrow {
  color: var(--bf-ink-3);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  transition: transform 0.2s, color 0.2s;
}
.col-row:hover .col-row__arrow {
  color: var(--bf-ink);
  transform: translateX(3px);
}

/* ── Desktop ── */
@media (min-width: 769px) {
  .col-topbar { padding: 18px var(--app-padding-x); }
  .col-topbar__titulo { font-size: 24px; }

  /* Cinematic desktop */
  .col-cinematic { min-height: 580px; padding: 56px 0 0; }
  .col-cin__meta-badges { left: calc(var(--cin-inset) + var(--app-padding-x)); top: 24px; }
  .col-cin__bg-title { font-size: clamp(80px, 13vw, 200px); }
  .col-cin__img-wrap { height: 420px; max-width: 860px; }

  /* Bottom desktop */
  .col-cin__bottom { padding-top: 20px; }
  .col-cin__bottom-grid {
    flex-direction: row;
    align-items: flex-start;
    gap: 48px;
    padding: 0 var(--app-padding-x) 32px;
    max-width: 860px;
    margin: 0 auto;
    width: 100%;
  }
  .col-cin__bottom-left {
    flex: 0 0 280px;
    padding: 0;
    gap: 10px;
  }
  .col-cin__desc {
    flex: 1;
    padding: 0;
    font-size: 13px;
    padding-top: 4px;
  }

  .col-cin__dot-line { width: 56px; }
  .col-cin__nombre { font-size: 24px; }
  .col-cin__sub { font-size: 10px; }
  .col-cin__cta { font-size: 11px; }

  .col-section__heading,
  .col-block-header { padding: 36px var(--app-padding-x) 24px; }

  .col-block-header__num { font-size: 96px; }
  .col-block-header__titulo { font-size: 32px; }

  .col-row {
    grid-template-columns: 52px 88px 1fr 24px;
    gap: 24px;
    padding: 20px calc(var(--app-padding-x) + 88px);
  }
  .col-row__thumb { width: 88px; height: 88px; }
  .col-row__titulo { font-size: 17px; white-space: normal; }
  .col-row__num { font-size: 16px; }
}

/* ── Ancho máximo del contenido ──────────────────────────────────────
   En pantallas anchas el contenido se estiraba casi de borde a borde y las
   líneas de texto quedaban incómodas de leer. Limitamos y centramos SOLO el
   contenido: las secciones conservan su fondo a todo el ancho, para que las
   bandas de color de cada bloque sigan llegando a los bordes.
   (--app-max-width ya existía en tokens.css pero no se usaba en ningún sitio.)
   Por debajo de ese ancho la regla no hace nada, así que móvil queda igual.
   Limitamos los contenedores EXTERIORES (no sus hijos): así todos comparten la
   misma caja centrada y el contenido queda alineado entre secciones, aunque
   cada uno tenga su propio padding interno. */
.col-block-header,
.col-block-subheader,
.col-list {
  max-width: var(--app-max-width);
  margin-inline: auto;
}

/* Esta va aparte: lleva `border-top` y `border-bottom` como separadores. Con
   max-width esas líneas se encogerían a 1280 y quedarían descuadradas junto a
   la del slider, que cruza entera. Con padding el elemento sigue a todo el
   ancho —líneas completas— y solo se recoge el contenido. */
.col-collection-header {
  padding-inline: max(var(--app-padding-mob), (100% - var(--app-max-width)) / 2);
}

/* La sección inicial (slider de vehículos) llevaba la imagen y el bloque de
   texto ya limitados a 860px, pero el título gigante del fondo se estiraba a
   todo el ancho. Le damos la caja de la cabecera y el mapa —no la del texto—
   porque es una pieza gráfica; así el conjunto queda alineado con la navegación
   de arriba. La imagen y el texto van centrados, de modo que no se mueven.
   Usamos padding y no max-width porque la sección lleva `border-bottom`: con
   max-width esa línea divisoria se encogería. El título de fondo va posicionado
   con `inset: 0`, que se resuelve contra la caja de padding, así que el padding
   sí lo recoge. Las flechas del slider entran con él. */
.col-cinematic {
  /* Guardamos el desplazamiento en una variable porque los elementos
     posicionados en absoluto (flechas y badges) NO lo heredan del padding: su
     `left`/`right` se mide desde el borde del contenedor, ignorándolo. Cada uno
     tiene que sumárselo. El `100%` se resuelve contra el mismo contenedor en
     todos los casos, así que da el mismo valor. */
  --cin-inset: max(0px, (100% - var(--app-max-width-bar)) / 2);
  padding-inline: var(--cin-inset);
}