
/* ===========================================================
   ENCABEZADOS UNIFICADOS — FERIAS DE VIVIENDA

   Misma estructura para 2026, 2025 I y 2024.
   Cargar DESPUÉS de ferias-ediciones.css.
   =========================================================== */


/* ===========================================================
   01. BANDA ROJA Y DISTRIBUCIÓN GENERAL
   =========================================================== */

.fv-edicion.fv-edicion--unificada > .fv-edicion__band {
  display: block;
  width: 100%;
  padding: 0;
  background: #c8102e;
}

.fv-edicion.fv-edicion--unificada
> .fv-edicion__band
> .fv-edicion__head {

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  grid-template-rows: auto;

  gap: 0;

  width: 100%;
  max-width: none;
  min-height: 450px;

  margin: 0;
  padding: 0;

  background: #c8102e;
  direction: ltr;
}


/* ===========================================================
   02. COLUMNA IZQUIERDA — INFORMACIÓN
   =========================================================== */

.fv-edicion.fv-edicion--unificada
> .fv-edicion__band
> .fv-edicion__head
> .fv-edicion__head-text {

  position: relative;

  display: flex;
  flex-direction: column;

  grid-column: 1;
  grid-row: 1;

  align-items: flex-start;
  justify-content: center;

  justify-self: stretch;
  align-self: stretch;

  order: 0;

  inset: auto;
  transform: none;

  visibility: visible;
  opacity: 1;
  float: none;

  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 450px;

  margin: 0;

  padding: clamp(
    28px,
    4.3vw,
    64px
  );

  background: #c8102e;

  color: #fff;
  text-align: left;
}


/* ETIQUETA DE EDICIÓN */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-eyebrow {

  display: block;

  color: #ffca32;

  margin: 0 0 13px;

  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;

  text-transform: uppercase;
}


/* TÍTULO */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text h2 {

  display: block;

  margin: 0 0 15px;
  padding: 0;

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(
    34px,
    4.1vw,
    61px
  );

  line-height: 1.04;

  font-weight: 900;

  letter-spacing: -.045em;

  text-align: left;
  text-transform: uppercase;
}


/* FECHA Y LUGAR */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-edicion__lead {

  display: block;

  margin: 0 0 22px;

  color: rgba(255,255,255,.92);

  font-size: 14px;
  line-height: 1.65;
}


/* ENLACE DE REGRESO */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-edicion__return {

  display: inline-block;

  align-self: flex-start;

  margin-top: 18px;

  color: #fff;

  font-size: 12px;

  text-decoration: underline;
}


/* ===========================================================
   03. CIFRAS — DOS COLUMNAS Y DOS FILAS
   =========================================================== */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-stats {

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 10px;

  align-self: stretch;

  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  box-shadow: none;
}


/* TARJETA DE CADA CIFRA */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-stats > div {

  display: block;

  min-width: 0;

  padding: 12px 13px;

  background: rgba(255,255,255,.10);

  border: 1px solid rgba(255,255,255,.25);
}


/* NÚMERO */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-stats strong {

  display: block;

  color: #fff;

  font-family: 'Montserrat', sans-serif;

  font-size: clamp(
    26px,
    2.9vw,
    41px
  );

  line-height: 1.1;

  font-weight: 900;

  font-variant-numeric: tabular-nums;
}


/* DESCRIPCIÓN DE CIFRA */

.fv-edicion.fv-edicion--unificada
.fv-edicion__head-text .fv-stats span {

  display: block;

  margin-top: 5px;

  color: rgba(255,255,255,.92);

  font-size: 11px;
  line-height: 1.4;

  font-weight: 600;
}


/* ===========================================================
   04. COLUMNA DERECHA — FOTOGRAFÍA
   =========================================================== */

.fv-edicion.fv-edicion--unificada
> .fv-edicion__band
> .fv-edicion__head
> .fv-cover {

  position: relative;

  display: block;

  grid-column: 2;
  grid-row: 1;

  order: 0;

  float: none;

  justify-self: stretch;
  align-self: stretch;

  width: 100%;
  max-width: none;

  height: 100%;
  min-height: 450px;

  margin: 0;
  padding: 0;

  border-radius: 0;

  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;

  overflow: hidden;
}


/* OCULTAR TEXTO DE IMAGEN PENDIENTE */

.fv-edicion.fv-edicion--unificada
.fv-cover .fv-foto-pendiente[hidden] {

  display: none;
}


/* ===========================================================
   05. VIDEO RESUMEN + BALANCE
   =========================================================== */

.fv-edicion.fv-edicion--unificada
> .fv-container.fv-balance {

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(0, .95fr);

  align-items: start;

  gap: clamp(
    20px,
    3vw,
    45px
  );

  margin-top: 50px;
  margin-bottom: 55px;
}


/* VIDEO IZQUIERDA */

.fv-edicion.fv-edicion--unificada
.fv-balance > .fv-video {

  display: block;

  width: 100%;
  min-width: 0;

  aspect-ratio: 16 / 9;

  background: #252021;

  overflow: hidden;
}


/* IFRAME YOUTUBE */

.fv-edicion.fv-edicion--unificada
.fv-balance > .fv-video iframe {

  display: block;

  width: 100%;
  height: 100%;

  border: 0;
}


/* BALANCE DERECHA */

.fv-edicion.fv-edicion--unificada
.fv-balance > .fv-relato {

  display: flex;
  flex-direction: column;

  min-width: 0;

  gap: 15px;

  margin: 0;
  padding: 0;
}


/* ===========================================================
   06. DATOS CLAVE DEL BALANCE
   =========================================================== */

.fv-edicion.fv-edicion--unificada
.fv-balance .fv-datos {

  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: 9px;

  width: 100%;

  margin: 0;
  padding: 0;
}

.fv-edicion.fv-edicion--unificada
.fv-balance .fv-datos > div {

  min-width: 0;

  padding: 12px;
}


/* ===========================================================
   07. RESPONSIVE TABLET
   =========================================================== */

@media (max-width: 900px) {

  /* CABECERA EN UNA SOLA COLUMNA */

  .fv-edicion.fv-edicion--unificada
  > .fv-edicion__band
  > .fv-edicion__head {

    grid-template-columns:
      minmax(0, 1fr);

    grid-template-rows: auto auto;

    min-height: 0;
  }


  /* INFORMACIÓN ARRIBA */

  .fv-edicion.fv-edicion--unificada
  > .fv-edicion__band
  > .fv-edicion__head
  > .fv-edicion__head-text {

    grid-column: 1;
    grid-row: 1;

    min-height: 0;

    padding: 38px 22px;
  }


  /* FOTO DEBAJO */

  .fv-edicion.fv-edicion--unificada
  > .fv-edicion__band
  > .fv-edicion__head
  > .fv-cover {

    grid-column: 1;
    grid-row: 2;

    min-height: 290px;
    height: 290px;
  }


  /* VIDEO Y BALANCE APILADOS */

  .fv-edicion.fv-edicion--unificada
  > .fv-container.fv-balance {

    grid-template-columns: 1fr;

    gap: 26px;
  }

}


/* ===========================================================
   08. RESPONSIVE MÓVIL
   =========================================================== */

@media (max-width: 480px) {

  .fv-edicion.fv-edicion--unificada
  .fv-edicion__head-text h2 {

    font-size: clamp(
      32px,
      9vw,
      44px
    );
  }


  .fv-edicion.fv-edicion--unificada
  .fv-edicion__head-text .fv-stats strong {

    font-size: clamp(
      24px,
      8vw,
      34px
    );
  }


  .fv-edicion.fv-edicion--unificada
  .fv-balance .fv-datos {

    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .fv-edicion.fv-edicion--unificada
  .fv-balance .fv-datos > div {

    padding: 9px 7px;
  }

}


/* =====================================================
   FERIA 2024 — BALANCE SIN VIDEO
   CORRECCIÓN DE DISTRIBUCIÓN
===================================================== */

/* Eliminar las dos columnas del contenedor exterior */

#feria-1.fv-edicion--unificada
> .fv-container.fv-balance {
  display: block !important;
  grid-template-columns: none !important;

  width: min(calc(100% - 48px), 1260px);
  max-width: 1260px;

  margin: 60px auto !important;
  padding: 0;
}


/* Balance a todo el ancho */

#feria-1.fv-edicion--unificada
.fv-balance > .fv-relato {
  display: grid !important;

  grid-template-columns:
    minmax(0, 0.85fr)
    minmax(0, 1.15fr) !important;

  grid-template-areas:
    "titulo texto"
    "datos datos";

  gap: 28px 48px;

  width: 100% !important;
  max-width: none !important;
  min-width: 0;

  margin: 0 !important;
  padding: 38px 42px;

  background: #242021;
  border-radius: 18px;
}


/* Título a la izquierda */

#feria-1 .fv-relato__heading {
  grid-area: titulo;
  min-width: 0;
  width: 100%;
}


/* Párrafos a la derecha */

#feria-1 .fv-relato__copy {
  grid-area: texto;
  min-width: 0;
  width: 100%;
}


/* Indicadores ocupan todo el ancho inferior */

#feria-1.fv-edicion--unificada
.fv-balance .fv-datos {
  grid-area: datos;

  display: grid !important;
  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  gap: 20px;

  width: 100%;
  margin: 0;
  padding: 24px 0 0;

  border-top: 1px solid rgba(255,255,255,.2);
}


/* RESPONSIVE */

@media (max-width: 767.98px) {

  #feria-1.fv-edicion--unificada
  > .fv-container.fv-balance {
    width: calc(100% - 32px);
    margin: 35px auto !important;
  }

  #feria-1.fv-edicion--unificada
  .fv-balance > .fv-relato {
    grid-template-columns: 1fr !important;

    grid-template-areas:
      "titulo"
      "texto"
      "datos";

    gap: 22px;

    padding: 26px 22px;
  }

  #feria-1.fv-edicion--unificada
  .fv-balance .fv-datos {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

}


/* ===========================================================
   09. MÓVIL — DATOS CLAVE EN UNA COLUMNA
   (en 3 columnas de ~108 px "cierres y separaciones"
   desbordaba y generaba scroll horizontal)
   =========================================================== */

@media (max-width: 767.98px) {

  .fv-edicion.fv-edicion--unificada
  .fv-balance .fv-datos {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .fv-edicion.fv-edicion--unificada
  .fv-balance .fv-datos > div {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    min-width: 0;
  }

  .fv-edicion.fv-edicion--unificada
  .fv-balance .fv-datos span {
    overflow-wrap: anywhere;
  }
}
