/* ============================================================================
   PATA AMARILLA — sections.css
   ============================================================================
   Estilos de las secciones que van después del slider en el home:
     1. .pa-donate          — CTA de donación ("¡Hazte Pata!")
     2. .pa-stream-banner    — separador de sección "PATA AMARILLA STREAM"
     3. .pa-featured         — post/columna destacada del mes

   Referencia visual: diseño propio en Wix (capturas del cliente), usando
   futurock.fm solo como referencia de estructura/comportamiento general,
   NO de estilo visual final.

   El contenido del CTA de donación es editable desde el Customizer de
   WordPress (Apariencia → Personalizar → CTA Donaciones) — ver
   inc/customizer-donate.php. El post destacado se jala automáticamente
   (por ahora el más reciente; selección manual pendiente) — ver
   inc/featured-post.php.

   SISTEMA DE ALTURAS: .pa-donate y .pa-featured-inner usan una altura FIJA
   compartida (--pa-section-h, definida en style.css) en vez de min-height,
   así ambas bandas miden exactamente igual sin importar el contenido. La
   imagen usa height:100% + object-fit:cover (se recorta centrada a esa
   altura); el texto usa flex + justify-content:center (se centra dentro
   de esa altura, sin dejar huecos). En móvil (apilado en una columna) la
   altura vuelve a 'auto' porque ahí no aplica el mismo criterio. Al crear
   una sección nueva similar, reutiliza esta misma variable.

   ANCHO: .pa-donate y .pa-featured son full-bleed (esquina a esquina, sin
   ancho máximo) — a diferencia de la Tienda, que sí usa .content-area con
   un ancho fijo. Por eso la ALTURA (--pa-section-h en style.css) escala
   con el ancho de pantalla en vez de ser un número fijo: así el recorte
   de la imagen se ve proporcionalmente parecido sin importar el monitor
   del visitante, en vez de volverse una franja panorámica achatada en
   monitores muy anchos.

   Se encola en functions.php con handle 'pa-sections'.
   ============================================================================ */

:root {
  --pa-donate-btn-bg: var(--pa-negro);
  --pa-highlight-bg:  var(--pa-amarillo);
}

/* ============================================================================
   1. CTA DE DONACIÓN — "¡Hazte Pata!"
   ============================================================================ */
.pa-donate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: var(--pa-section-h);
  background: var(--pa-blanco);
  position: relative;
  overflow: hidden;
}
/* Línea de acento amarilla izquierda */
.pa-donate::before {
  content: '';
  position: absolute;
  left: 0; top: 10%; bottom: 10%;
  width: 4px;
  background: var(--pa-amarillo);
  border-radius: 2px;
  z-index: 2;
}
.pa-donate-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 56px 64px 56px clamp(48px, 8vw, 120px);
  position: relative;
  z-index: 2;
  background: var(--pa-blanco);
}
/* Eyebrow */
.pa-donate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-amarillo);
  background: var(--pa-negro);
  padding: 4px 14px;
  border-radius: 4px;
  width: fit-content;
}
.pa-donate-heading {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-section-title);
  font-weight: 900;
  color: var(--pa-negro);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.pa-donate-subheading {
  font-size: var(--pa-font-body);
  color: #6b7280;
  margin: 0;
  font-style: normal;
  font-weight: 500;
  line-height: var(--pa-lh-normal);
}
.pa-donate-paragraph {
  font-size: var(--pa-font-body);
  line-height: var(--pa-lh-loose);
  color: #374151;
  margin: 0;
  max-width: 440px;
}
.pa-donate-highlight {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
  font-weight: 800;
  padding: 2px 8px;
  display: inline;
  border-radius: 3px;
}
.pa-donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 4px;
  padding: 13px 32px;
  background: var(--pa-negro);
  color: var(--pa-blanco);
  font-weight: 800;
  font-size: var(--pa-font-button);
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.pa-donate-btn:hover {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
  opacity: 1;
  transform: translateY(-2px);
}

/* Imagen con overlay cinematográfico */
.pa-donate-img {
  height: 100%;
  overflow: hidden;
  background: var(--pa-negro);
  position: relative;
}
/* Overlay degradado desde la izquierda */
.pa-donate-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--pa-blanco) 0%, rgba(255,255,255,.6) 20%, rgba(255,255,255,.1) 50%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
/* Overlay tínta sepia sobre la imagen */
.pa-donate-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(90, 65, 20, .18);
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}
.pa-donate-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  display: block;
  filter: sepia(40%) contrast(1.1) brightness(.9);
  transition: transform .8s ease;
}
.pa-donate:hover .pa-donate-img img {
  transform: scale(1.04);
}

/* ============================================================================
   2. BANNER DE SECCIÓN — "PATA AMARILLA STREAM"
   ============================================================================ */
.pa-stream-banner,
.pa-stream-banner-home {
  background: var(--pa-negro);
  padding: 64px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.pa-stream-banner-home-inner {
  display: flex;
  align-items: center;
  justify-content: center;
}
.pa-stream-banner-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--pa-amarillo);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pa-stream-banner-icon svg { width: 24px; height: 24px; color: var(--pa-negro); }
.pa-stream-banner-text {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-hero-title);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1;
  white-space: nowrap;
}
.pa-stream-banner-text .pa-stream-part-1 { color: var(--pa-amarillo); }
.pa-stream-banner-text .pa-stream-part-2 { color: var(--pa-blanco); }

/* ============================================================================
   3. POST DESTACADO — "Destacado del mes"
   ============================================================================ */
.pa-featured {
  background: #0f0f0f;
  background-image: radial-gradient(circle, rgba(245,197,24,.06) 1px, transparent 1px);
  background-size: 22px 22px;
  position: relative;
  overflow: hidden;
}
/* Anillo decorativo */
.pa-featured::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 480px; height: 480px;
  border-radius: 50%;
  border: 1px solid rgba(245,197,24,.08);
  pointer-events: none;
  z-index: 0;
}
.pa-featured-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: var(--pa-section-h);
  position: relative;
  z-index: 1;
}
.pa-featured-content {
  padding: 56px 56px 56px clamp(48px, 8vw, 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
}
/* Eyebrow */
.pa-featured-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--pa-amarillo);
  background: rgba(245,197,24,.12);
  border: 1px solid rgba(245,197,24,.25);
  padding: 5px 14px;
  border-radius: 20px;
  width: fit-content;
}
/* Título */
.pa-featured-title {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-display);
  font-weight: 900;
  color: var(--pa-blanco);
  margin: 0;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.pa-featured-title a { color: inherit; text-decoration: none; }
.pa-featured-title a:hover { color: var(--pa-amarillo); }
/* Autor */
.pa-featured-author {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pa-font-body-sm);
  font-weight: 700;
  color: rgba(255,255,255,.5);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.pa-featured-author::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 2px;
  background: var(--pa-amarillo);
  border-radius: 1px;
  flex-shrink: 0;
}
/* Extracto */
.pa-featured-excerpt {
  font-size: var(--pa-font-body);
  line-height: var(--pa-lh-loose);
  color: rgba(255,255,255,.6);
  margin: 4px 0 8px;
  max-width: 460px;
}
/* Leer más */
.pa-featured-readmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--pa-font-button);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--pa-negro);
  background: var(--pa-amarillo);
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 8px;
  width: fit-content;
  transition: background .2s ease, transform .2s ease;
}
.pa-featured-readmore:hover {
  background: #e0b000;
  transform: translateY(-2px);
  opacity: 1;
}
/* Imagen */
.pa-featured-img {
  position: relative;
  overflow: hidden;
}
.pa-featured-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s ease;
}
.pa-featured:hover .pa-featured-img img {
  transform: scale(1.03);
}
/* Overlay degradado sobre la imagen */
.pa-featured-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0f0f0f 0%, transparent 40%);
  pointer-events: none;
}
/* Eliminar la barra inferior ya que viene del footer */
.pa-featured-bar { display: none; }

/* ============================================================================
   MÓVIL — ≤ 900px
   ============================================================================ */
@media (max-width: 900px) {
  .pa-donate,
  .pa-featured-inner {
    grid-template-columns: 1fr;
    height: auto; /* en desktop es altura fija; en móvil (apilado) se deja crecer libre */
  }
  .pa-donate-text,
  .pa-featured-content {
    padding: 32px 24px;
  }
  .pa-donate-img,
  .pa-featured-img {
    height: 220px; /* en móvil, apiladas debajo del texto (no usan --pa-section-h) */
  }
  .pa-donate-paragraph,
  .pa-featured-excerpt { max-width: 100%; }

  .pa-stream-banner,
  .pa-stream-banner-home { padding: 40px 16px; gap: 10px; }

  .pa-stream-hero { padding-bottom: 4px; }
}

/* ====================================================
   STREAM HERO — fondo de micrófonos
   Usado en homepage + /podcast/
   ==================================================== */
.pa-stream-hero {
  background-color: #0f0f0f;
  background-image:
    linear-gradient(
      to bottom,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.35) 40%,
      rgba(0,0,0,.55) 100%
    ),
    url('https://www.patamarilla.com/wp-content/uploads/2026/07/fondo_microfonos.webp');
  background-size: 100% auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  padding-bottom: 4px;
}
.pa-stream-hero::before { display: none; }
.pa-stream-hero .pa-page-hero-sub { margin-bottom: 20px; }

/* Móvil: fixed no funciona en iOS, usamos scroll con tamaño que muestra ambos micrófonos */
@media (max-width: 768px) {
  .pa-stream-hero {
    background-attachment: scroll;
    background-size: 100% auto;
    background-position: center center;
    background-image:
      linear-gradient(
        to bottom,
        rgba(0,0,0,.6) 0%,
        rgba(0,0,0,.4) 50%,
        rgba(0,0,0,.6) 100%
      ),
      url('https://www.patamarilla.com/wp-content/uploads/2026/07/fondo_microfonos.webp');
  }
}

/* =====================================================
   DESTACADOS DEL MES — layout editorial de 3 filas
   (Opción 1: imagen a la izquierda, contenido a la
   derecha, filas separadas por hairline, todo apilado
   verticalmente en vez de una grilla de 3 columnas)
   ===================================================== */
.pa-featured3 {
  background: #111;
  border-top: 2px solid #F2D119;
  width: 100%;
  box-sizing: border-box;
}
.pa-featured3-inner {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 48px 24px 64px;
}
.pa-featured3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.pa-f3-eyebrow {
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #F2D119;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pa-f3-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 2px;
  background: #F2D119;
  border-radius: 1px;
}

/* GRID → columna única, filas apiladas */
.pa-featured3-grid {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* CARD — fila: imagen | contenido */
.pa-f3-card {
  display: grid;
  grid-template-columns: 340px 1fr;
  column-gap: 32px;
  align-items: stretch;
  padding: 26px 0;
  border-top: 1px solid rgba(255,255,255,.08);
  background: transparent;
  transition: background .2s ease;
}
.pa-f3-card:first-child { border-top: none; padding-top: 4px; }
.pa-f3-card:last-child { padding-bottom: 4px; }
.pa-f3-card:hover { background: rgba(242,209,25,.03); }

/* IMAGEN — se ve completa, sin recortar (object-fit: contain) */
.pa-f3-card-img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #1a1a00 0%, #0a0a0a 100%);
  text-decoration: none;
  align-self: start;
}
.pa-f3-card-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .5s ease, filter .5s ease;
  filter: saturate(1.05);
}
.pa-f3-card:hover .pa-f3-card-img {
  transform: scale(1.03);
  filter: saturate(1.1);
}
.pa-f3-card-num { display: none; }
.pa-f3-cat {
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: var(--pa-font-micro);
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #F2D119;
  color: #111;
  padding: 3px 9px;
  border-radius: 4px;
}

/* CONTENIDO — título + extracto arriba, meta + leer más abajo */
.pa-f3-card-body {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.pa-f3-title {
  font-size: var(--pa-font-card-title-lg);
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 10px;
}
.pa-f3-title a {
  color: #fff;
  text-decoration: none;
  transition: color .18s ease;
}
.pa-f3-title a:hover { color: #F2D119; }
.pa-f3-excerpt {
  font-size: var(--pa-font-body-sm);
  line-height: 1.6;
  color: rgba(255,255,255,.55);
  margin: 0 0 16px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pa-f3-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}
.pa-f3-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid rgba(242,209,25,.4);
  flex-shrink: 0;
}
.pa-f3-author {
  font-size: var(--pa-font-label);
  font-weight: 700;
  color: rgba(255,255,255,.7);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pa-f3-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255,255,255,.25);
  flex-shrink: 0;
}
.pa-f3-time {
  font-size: var(--pa-font-label);
  color: rgba(255,255,255,.35);
  flex-shrink: 0;
}

/* FOOTER — leer más, alineado con la fila de meta */
.pa-f3-card-footer {
  padding: 12px 0 0;
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.pa-f3-readmore,
.pa-f3-readmore:hover,
.pa-f3-readmore:visited,
.pa-f3-readmore:focus {
  font-size: var(--pa-font-meta);
  font-weight: 800;
  color: #F2D119 !important;
  text-decoration: none !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap .2s ease;
}
.pa-f3-readmore:hover { gap: 10px; opacity: .85; }
.pa-f3-index { display: none; }

/* RESPONSIVE — imagen arriba, contenido debajo */
@media (max-width: 700px) {
  .pa-f3-card {
    grid-template-columns: 1fr;
    row-gap: 16px;
    padding: 22px 0;
  }
  .pa-f3-card-img-wrap { aspect-ratio: 16 / 10; }
  .pa-f3-card-footer { justify-content: space-between; }
}
@media (max-width: 600px) {
  .pa-featured3-inner { padding: 32px 16px 40px; }
}