/* ----------------------------------------------------------------------
   pelotapasto — La Pasada
   Archivo: assets/css/pp/pp-la-pasada.css

   Regla:
   - La Pasada se construye 100% con Theme (PHP + CSS). Sin bloques.
   - Namespace estricto: .pp-pasada-*

   Este archivo fue refactorizado para eliminar duplicados y reglas
   contradictorias (“add-only” acumulado).
---------------------------------------------------------------------- */

/* ==========================================================================
   BASE
   ========================================================================== */

.pp-pasada{
  /* Variables locales (solo La Pasada) */
  --pp-black: #1c1c1c;      /* negro pelotapasto */
  --pp-gray-text: #444444; /* gris sobrio */

  background: #ffffff;
  width: 100%;
}

.pp-pasada *{ box-sizing: border-box; }

.pp-pasada h1,
.pp-pasada h2,
.pp-pasada p{ margin: 0; }

/* Títulos globales (solo esta página) */
.pp-pasada h1,
.pp-pasada h2,
.pp-pasada h3{
  font-family: 'Bebas Neue', var(--pp-font-display), sans-serif;
  color: var(--pp-black);
  font-weight: 400;
  letter-spacing: .01em;
}

.pp-pasada a{
  color: inherit;
  text-decoration: none;
}

/* ==========================================================================
   HERO (#1)
   Objetivo editorial (desktop):
   - Fondo blanco
   - Títulos Bebas Neue en negro pelotapasto
   - Fecha en naranjo pelotapasto
   - Grid 60% imagen / 40% texto
   - Imagen = misma altura que el panel de texto (estructural)
   ========================================================================== */

.pp-pasada-hero{
  width: 100%;
  border-bottom: var(--pp-hairline);
}

.pp-pasada-hero-grid{
  width: 100%;
  max-width: var(--pp-wide);
  margin-inline: auto;

  /* Mobile-first: stack */
  display: grid;
  grid-template-columns: 1fr;
}

.pp-pasada-hero-media{
  /* La foto manda el alto: NO recorte, NO altura forzada */
  overflow: visible;
}

.pp-pasada-hero-media-link{
  display: block;
}

.pp-pasada-hero-img{
  display: block;
  width: 100%;
  height: auto;
}


.pp-pasada-hero-media-empty{
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--pp-ink) 6%, transparent);
}

.pp-pasada-hero-text{
  background: #ffffff;
  color: var(--pp-black);

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

  text-align: center;
}

.pp-pasada-hero-text-inner{
  padding: 28px 22px 24px;
  text-align: center;
  max-width: 56ch;
}

.pp-pasada-hero-date{
  font-family: var(--pp-font-ui);
  font-size: 14px;
  margin-bottom: 6px;

  text-align: center;

  color: var(--pp-orange);
}

.pp-pasada-hero-date-link{
  color: inherit;
  text-decoration: none;
  pointer-events: none;
  cursor: default;
}

.pp-pasada-hero-title{
  font-family: 'Bebas Neue', sans-serif;
  font-weight: 400;
  font-size: clamp(36px, 6vw, 64px);
  line-height: .95;
  margin: 0 0 24px 0;
  color: var(--pp-black);
  text-align: center;
}

.pp-pasada-hero-title-link{
  color: var(--pp-black);
  text-decoration: none;
  display: inline-block;
}

.pp-pasada-hero-title-link:hover{
  color: var(--pp-black);
  text-decoration: none;
}

.pp-pasada-hero-excerpt{
  font-family: var(--pp-font-reading);
  font-size: 19px;
  line-height: 1.7;
  font-style: italic;
  color: var(--pp-gray-text);
  max-width: 48ch;
  margin-inline: auto;
}

/* Desktop: cierre estructural + proporción 60/40 + alturas iguales */
/* Desktop — Hero split (60/40), sin recorte (la foto manda el alto) */
@media (min-width: 1024px){

  .pp-pasada-hero-grid{
    /* Ancho “portada” con margen lateral */
    max-width: min(1800px, calc(100vw - 96px));
    padding-inline: 48px;

    grid-template-columns: 60fr 40fr;
    align-items: center;
  }

  .pp-pasada-hero-media{
    overflow: visible;
  }

  .pp-pasada-hero-media-link{
    height: auto;
  }

  .pp-pasada-hero-img{
    height: auto;
  }
}


/* ==========================================================================
   FILA POSTS (#2–#5) + FILA POSTS (#7–#10)
   ========================================================================== */

.pp-pasada-row{
  width: 100%;
  border-bottom: 0; /* eliminamos línea wide debajo de la primera fila */
}
.pp-pasada-row-wrap{
  max-width: var(--pp-wide);
  margin-inline: auto;
  padding: 28px 20px;
}

.pp-pasada-row-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}

.pp-pasada-mini{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pp-pasada-mini-media{
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.pp-pasada-mini-img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pp-pasada-mini-media-empty{
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--pp-ink) 4%, transparent);
}

.pp-pasada-mini-meta{
  margin-top: 10px;
  font-family: var(--pp-font-ui);
  font-size: 13px;
}

.pp-pasada-mini-date{
  color: var(--pp-orange);
}

.pp-pasada-mini-title{
  margin-top: 6px;
  font-family: 'Bebas Neue', var(--pp-font-display), sans-serif;
  font-size: 22px;
  line-height: .95;
  color: var(--pp-black);
}

.pp-pasada-mini-title-link{
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.pp-pasada-mini-title-link:hover{
  color: var(--pp-orange);
}

.pp-pasada-mini-excerpt{
  margin-top: 10px;
  font-family: var(--pp-font-reading);
  font-size: 14px;
  line-height: 1.6;
  color: var(--pp-gray-text);
}

/* Desktop grid (4 columnas) */
@media (min-width: 1024px){
  .pp-pasada-row-wrap{ padding: 28px 24px; }
  .pp-pasada-row-grid{ grid-template-columns: repeat(4, 1fr); gap: 28px; }
}

/* ==========================================================================
   POST EXPANDIDO (#6) — MINI HERO (definitivo)
   Objetivo editorial:
   - Organización tipo Hero: imagen + columna de texto
   - Imagen sin recorte: la foto manda el alto (sin aspect-ratio forzado)
   - Texto centrado en su columna, y textos alineados al centro
   - Fecha naranja pelotapasto, no “clickeable” visualmente
   - Título Bebas Neue puro, negro pelotapasto, tamaño intermedio (entre fila y Hero)
   - Bajada cursiva, legible
   ========================================================================== */

.pp-pasada-feature{
  width: 100%;
  border: 0; /* líneas pasan al contenedor para evitar full bleed */
}

.pp-pasada-feature-wrap{
  max-width: var(--pp-wide);
  margin-inline: auto;
  /* ↓ Menos aire arriba/abajo (mini hero más compacto) */
  padding: 32px 20px;
  /* ↓ Líneas del ancho del contenedor (no full bleed) */
  border-top: var(--pp-hairline);
  border-bottom: var(--pp-hairline);
}

.pp-pasada-feature-article{
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: start;
}

/* Imagen: sin recorte (la foto manda el alto) */
.pp-pasada-feature-media{
  display: block;
  overflow: visible;          /* sin recorte */
  aspect-ratio: auto;         /* anula ratio forzado */
}

.pp-pasada-feature-img{
  display: block;
  width: 100%;
  height: auto;               /* CLAVE */
  max-width: 100%;
  object-fit: unset;
}

.pp-pasada-feature-media-empty{
  width: 100%;
  min-height: 240px;
  background: color-mix(in srgb, var(--pp-ink) 4%, transparent);
}

/* Columna de texto: bloque centrado + textos al centro */
.pp-pasada-feature-text{
  display: flex;
  flex-direction: column;
  justify-content: center;    /* centra el bloque dentro de la columna */
  align-items: center;        /* centra los elementos */
  text-align: center;         /* centra la composición */
  width: 100%;
  max-width: 64ch;            /* ancho editorial (como el Hero) */
  margin-inline: auto;
  padding-inline: 24px;
}

.pp-pasada-feature-meta{
  font-family: var(--pp-font-ui);
  font-size: 13px;
}

.pp-pasada-feature-date{
  color: var(--pp-orange);
  cursor: default;            /* no “parece link” */
}

/* MINI HERO #6 — FORCE TITLE SIZE (gana sobre 76px runtime) */
.pp-pasada-feature h2.pp-pasada-feature-title{
  margin-top: 10px;
  font-family: 'Bebas Neue', sans-serif !important;
  font-weight: 400 !important;
  color: var(--pp-black) !important;

  /* ↓ -25% aprox vs 76px (reduce techo y escala) */
  font-size: clamp(26px, 2.7vw, 40px) !important;
  line-height: .95 !important;
  letter-spacing: 0.5px !important;

  /* por si venía “estética” vieja */
  background: none !important;
}
  /* Tamaño intermedio: fila (22px) < #6 < Hero (hasta 64px) */
  font-size: clamp(30px, 4vw, 56px);
  line-height: .95;
}

.pp-pasada-feature-title-link{
  color: var(--pp-black);
  text-decoration: none;      /* como Hero */
  display: inline-block;
}

.pp-pasada-feature-title-link:hover{
  color: var(--pp-orange);    /* La Pasada */
  text-decoration: none;
}

.pp-pasada-feature-excerpt{
  margin-top: 12px;
  font-family: var(--pp-font-reading);
  font-size: 19px;            /* legible, cercana al Hero */
  line-height: 1.7;
  color: var(--pp-gray-text);
  font-style: italic;
  max-width: 48ch;
  margin-inline: auto;
}

/* Desktop */
@media (min-width: 1024px){
  .pp-pasada-feature-article{
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;      /* texto centrado respecto a la foto */
  }
  .pp-pasada-feature-wrap{ padding: 44px 24px; }
}
/* ==========================================================================
   CTA FINAL
   ========================================================================== */

.pp-pasada-cta{
  width: 100%;
}

.pp-pasada-cta-wrap{
  max-width: var(--pp-wide);
  margin-inline: auto;
  padding: 56px 20px 80px;
  text-align: center;
}

.pp-pasada-cta-text{
  font-family: var(--pp-font-ui);
  font-size: 14px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pp-gray-text);
}
/* =========================================================
   LA PASADA — FILAS (ajuste tipográfico exclusivo)
   ========================================================= */


/* =========================
   FILA SUPERIOR (4 columnas)
   ========================= */

.pp-pasada-row h3{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 28px;
  line-height: 1.05;
  color: var(--pp-black);
  margin-bottom: 10px;
}

.pp-pasada-row p{
  font-size: 17px;
  line-height: 1.6;
  color: #444;
}


/* =========================
   BLOQUE DESTACADO (fila inferior grande)
   ========================= */

.pp-pasada-feature h2{
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(56px, 4.5vw, 76px);
  line-height: .95;
  color: var(--pp-black);
}
/* =========================================================
   LA PASADA — FILA SUPERIOR (ajuste fino definitivo)
   ========================================================= */

.pp-pasada-row h3{
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px;          /* más grande */
  line-height: 1.0;         /* compacto */
  color: var(--pp-black);
  margin-bottom: 12px;
}

.pp-pasada-row p{
  font-size: 17px;
  line-height: 1.4;         /* menor interlineado */
  color: #444;
}
/* =========================================================
   MINI HERO (#6)
   Nota: estilos definitivos viven en “POST EXPANDIDO (#6) — MINI HERO (definitivo)”.
   Se elimina el bloque duplicado final para evitar dobles verdades.
   ========================================================= */