/* ============================================================================
   PATA AMARILLA — header.css
   ============================================================================
   Estilos del header flotante (inspirado en futurock.fm) + layout global
   de contenido (ancho máximo compartido por todo el sitio).

   ESTRUCTURA:
     1. Variables (:root)      — altura, colores, transiciones
     2. Sticky footer          — .site en flexbox (columna) para que el
                                  footer siempre quede al fondo de la
                                  pantalla en páginas con poco contenido
     3. .pa-header-yellow-bg   — franja amarilla fija detrás del header,
                                  SOLO en páginas sin hero (Tienda, entradas,
                                  páginas). Desaparece junto con .scrolled.
     4. Header base            — fixed, negro semitransparente, logo centrado
     5. .scrolled              — al bajar: negro sólido + blur + pegado arriba
     6. .content-area          — ancho máximo GLOBAL (1360px, centrado) para
                                  TODAS las páginas estándar del sitio (ver
                                  nota más abajo, junto a la regla)
     7. Logo / Nav / Botones   — menú desktop, hover SOLO cambia color de
                                  texto (nunca fondo — GeneratePress trae
                                  'button:hover{background:gris}' por defecto,
                                  se resetea explícitamente donde aplica)
     8. Móvil (≤900px)         — header negro sólido siempre + hamburguesa
     9. Menú acordeón          — panel negro que baja desde el header

   COMPORTAMIENTO:
     Home (.has-hero):    header transparente flotante sobre el slider,
                           sin franja amarilla, contenido full-bleed.
     Resto del sitio:     header flota dentro de una franja amarilla fija;
                           al hacer scroll, la franja desaparece y el header
                           se pega arriba en negro sólido (igual que el home).
     Móvil:               header negro sólido fijo desde el inicio, sin
                           franja amarilla ni efecto flotante.

   Depende de header.php (markup) y header.js (interacción: scroll + menú).
   Se encola en functions.php con handle 'pa-header'.
   ============================================================================ */

:root {
  --pa-header-h:        90px;
  --pa-brand-green:     #f2d119;
  --pa-menu-color:      #ffffff;
  --pa-menu-size:       var(--pa-font-meta);
  --pa-menu-spacing:    2px;
  --pa-transition:      .3s ease;
  /* Capa negra semitransparente igual a Futurock (rgba 0,0,0,0.32) */
  --pa-header-bg:       rgba(0, 0, 0, 0.32);
  --pa-header-bg-scroll:rgba(0, 0, 0, 0.85);
  /* Espacio flotante superior */
  --pa-header-gap:      22px;
}

body { margin: 0; }

/* ── Footer siempre al fondo de la pantalla ("sticky footer") ─────────
   Cuando el contenido de una página es más corto que el alto de la
   pantalla (ej. una categoría de Tienda con solo 1 producto), el footer
   se ancla al borde inferior visible en vez de quedar flotando justo
   después del contenido con espacio en blanco debajo. Si el contenido es
   más alto que la pantalla, se comporta normal (aparece al final, con
   scroll). Aplica automáticamente a TODAS las páginas del sitio, porque
   .site y .site-content son el wrapper global de GeneratePress (ver
   header.php/footer.php: <div id="page" class="site"> envuelve todo). */
html, body { height: 100%; }
.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.pa-footer {
  flex-shrink: 0;
}

/* ── Bloque amarillo de fondo (solo páginas de contenido, NO home) ─────
   En Tienda, entradas, páginas, etc. (cualquier página sin hero/slider),
   la cinta negra flota centrada dentro de una franja amarilla fija, en
   vez de flotar transparente sobre una imagen como en el home. */
.pa-header-yellow-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--pa-header-gap) * 2 + var(--pa-header-h));
  background: var(--pa-amarillo, #F2D119);
  z-index: 1040;
}
.has-hero .pa-header-yellow-bg { display: none; }
@media (max-width: 900px) {
  .pa-header-yellow-bg { display: none; }
}
/* Al hacer scroll, el bloque amarillo desaparece — queda solo la cinta
   negra sólida pegada arriba, igual que en el home. La clase 'scrolled'
   se aplica tanto al header como a este bloque desde header.js. */
.pa-header-yellow-bg.scrolled { display: none; }

/* ── Header: FIJO + NEGRO SEMITRANSPARENTE SIEMPRE ───────── */
.pa-header {
  position: fixed;
  top: var(--pa-header-gap);
  left: 0;
  right: 0;
  height: var(--pa-header-h);
  background: var(--pa-header-bg);
  z-index: 1041;
  display: flex;
  align-items: center;
  transition: background var(--pa-transition), box-shadow var(--pa-transition), backdrop-filter var(--pa-transition), top var(--pa-transition);
}

/* Al hacer scroll: se pega arriba, se oscurece más + blur */
.pa-header.scrolled {
  top: 0;
  background: var(--pa-header-bg-scroll);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0,0,0,.35);
}

/* Quitar cualquier borde/línea de GeneratePress en el header */
.site-header,
.main-navigation,
#site-navigation,
.inside-header { border: none !important; box-shadow: none !important; }

/* GeneratePress usa 'display:flex' en .site-content para su layout de
   contenido + sidebar. Como este tema no usa sidebar y las secciones del
   home van directas como hijas de .site-content, forzamos 'block' para
   que se apilen verticalmente en vez de alinearse en fila. También
   quitamos su padding-bottom nativo (40px) para que las secciones lleguen
   justo hasta el footer, sin franja en blanco de por medio. */
.site-content {
  display: block !important;
  padding-bottom: 0 !important;
  flex: 1 0 auto; /* crece para empujar el footer al fondo (sticky footer) */
}

/* ── Ancho máximo GLOBAL para páginas de contenido ─────────────────────
   '.content-area' es el contenedor que GeneratePress genera automáticamente
   en TODAS las páginas estándar (productos, entradas, páginas, archivos) —
   así que aplicar el ancho aquí lo replica en todo el sitio sin tener que
   tocar plantilla por plantilla. El home (front-page.php) NO usa este
   contenedor (tiene su propio flujo full-bleed para el hero), así que no
   hace falta excluirlo aparte. Mismo ancho que .pa-shop-container (1360px)
   para que la Tienda y el resto del sitio se vean consistentes. */
.content-area {
  max-width: 1360px;
  margin: 0 auto;
}

/* Empujar el contenido debajo del header flotante (que es 'fixed' y por
   tanto no ocupa espacio en el flujo normal del documento). Sin esto, el
   header queda flotando ENCIMA del contenido tapándolo.
   EXCEPCIÓN: si la página tiene un hero/slider (.has-hero en <body>), el
   hero debe ocupar el 100% de la pantalla desde arriba, con el header
   transparente flotando POR ENCIMA de él (como en Futurock) — en ese caso
   no se aplica padding-top. */
.site-content {
  padding-top: calc(var(--pa-header-gap) * 2 + var(--pa-header-h)) !important;
}
.has-hero .site-content {
  padding-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
@media (max-width: 900px) {
  .site-content { padding-top: var(--pa-header-h) !important; }
  /* En móvil el header es sólido (no transparente), así que incluso con
     hero activo el contenido debe empujarse hacia abajo — sin esto, la
     regla '.has-hero .site-content{padding-top:0}' (más específica) gana
     y el slider queda tapado detrás del header. */
  .has-hero .site-content { padding-top: var(--pa-header-h) !important; }
}

.pa-header-inner {
  max-width: 1680px;
  width: 100%;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

/* ── Logo centrado ────────────────────────────────────────────────── */
.pa-logo-wrap {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pa-logo-wrap img { height: 72px; width: auto; display: block; }
.pa-logo-text {
  font-family: var(--pa-font-titulo);
  font-size: var(--pa-font-subsection);
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ── Navegación desktop ──────────────────────────────────────────────── */
.pa-nav { display: flex; align-items: center; }
.pa-nav-left  { grid-column: 1; justify-content: flex-end; }
.pa-nav-right { grid-column: 3; justify-content: flex-start; gap: 12px; }
.pa-hamburger { display: none; }

.pa-menu { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; }
.pa-menu li a {
  display: block;
  color: var(--pa-menu-color);
  font-family: var(--pa-font-cuerpo);
  font-size: var(--pa-menu-size);
  font-weight: 400;
  letter-spacing: var(--pa-menu-spacing);
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 4px;
  transition: background var(--pa-transition), color var(--pa-transition);
}
/* Hover: solo el texto cambia a amarillo, el fondo nunca cambia */
.pa-menu li a:hover {
  color: var(--pa-brand-green);
}

/* ── Item activo — "donde estoy parado" ───────────────────────────
   Pill de fondo ambar translucido + texto ambar permanente. Mismo
   lenguaje visual que las etiquetas del sitio (Programa, Destacados,
   breadcrumb de articulos), asi que se siente parte del sistema.
   La clase 'current-menu-item' la agrega WordPress automaticamente
   cuando la URL coincide exacto, y el filtro nav_menu_css_class de
   functions.php la agrega tambien para secciones con subpaginas
   (ej. un articulo individual resalta "Redacción"). */
.pa-menu li.current-menu-item > a {
  color: var(--pa-brand-green);
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(245, 197, 24, .4);
  box-shadow: 0 2px 10px rgba(0,0,0,.15);
}
.pa-menu li.current-menu-item > a:hover {
  background: rgba(0, 0, 0, .48);
  border-color: rgba(245, 197, 24, .6);
}
/* Header scrolleado: fondo ya es negro solido, subimos un poco la
   opacidad de la pill para que siga notandose (si no, se pierde). */
.pa-header.scrolled .pa-menu li.current-menu-item > a {
  background: rgba(0, 0, 0, .55);
}
.pa-header.scrolled .pa-menu li.current-menu-item > a:hover {
  background: rgba(0, 0, 0, .7);
}

/* ── "Hazte Pata" — boton CTA separado del menu (Opcion 1 de simetria).
   Vive fuera de .pa-menu, agrupado con redes+lupa en .pa-nav-actions,
   separado del menu de navegacion por .pa-nav-divider. Asi el menu
   principal queda simetrico (3 items a cada lado del logo) y este
   grupo de acciones queda como una unidad aparte, a la derecha.

   Mismo diseno de contorno que ya usa el resto del sitio: negro +
   borde/texto ambar por defecto (se lee bien sobre cualquier fondo),
   invertido a relleno ambar + borde negro cuando es la pagina activa.
   ────────────────────────────────────────────────────────────────── */
.pa-nav-divider {
  width: 1px;
  height: 22px;
  background: rgba(255,255,255,.2);
}
.pa-nav-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.pa-header-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  padding: 10px 18px;
  background: var(--pa-negro);
  color: var(--pa-brand-green) !important;
  font-family: var(--pa-font-cuerpo);
  font-size: var(--pa-menu-size);
  font-weight: 800;
  letter-spacing: var(--pa-menu-spacing);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 1.5px solid var(--pa-brand-green);
  box-shadow: 0 4px 16px rgba(0,0,0,.3), inset 0 0 12px rgba(245,197,24,.08);
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.pa-header-cta:hover,
.pa-header-cta:focus {
  background: #1a1a1a;
  color: var(--pa-brand-green) !important;
  border-color: var(--pa-brand-green);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(245,197,24,.3), inset 0 0 16px rgba(245,197,24,.14);
}
.pa-header-cta.is-current {
  background: var(--pa-brand-green);
  color: var(--pa-negro) !important;
  border: 1.5px solid var(--pa-negro);
  box-shadow: 0 4px 16px rgba(0,0,0,.35);
}
.pa-header-cta.is-current:hover,
.pa-header-cta.is-current:focus {
  background: #ffd83d;
  color: var(--pa-negro) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,.4);
}
.pa-header.scrolled .pa-header-cta.is-current {
  background: var(--pa-brand-green);
  color: var(--pa-negro) !important;
  border-color: var(--pa-negro);
}
.pa-header.scrolled .pa-header-cta.is-current:hover {
  background: #ffd83d;
  color: var(--pa-negro) !important;
}

/* Movil (acordeon): sigue con Hazte Pata dentro del menu vertical, no
   hay problema de simetria ahi (es una lista, no una fila horizontal). */
.pa-mobile-menu-list li a[href*="hazte-pata"] {
  background: var(--pa-brand-green);
  color: var(--pa-negro) !important;
  font-weight: 800;
}
.pa-mobile-menu-list li a[href*="hazte-pata"]:hover {
  background: var(--pa-blanco, #fff);
  color: var(--pa-negro) !important;
}
.pa-mobile-menu-list li.current-menu-item a[href*="hazte-pata"] {
  background: rgba(245,197,24,.12) !important;
  color: var(--pa-brand-green) !important;
  border-left: 3px solid var(--pa-brand-green);
  padding-left: 21px;
}

/* Botón de búsqueda */
.pa-search-btn {
  background: none; border: none; color: #fff; cursor: pointer;
  padding: 10px; display: flex; align-items: center; border-radius: 4px;
  transition: color var(--pa-transition);
  margin-left: 6px;
}
.pa-search-btn:hover { color: var(--pa-brand-green); background: none !important; }

/* ═══════════════════════════════════════════════════════════════
   LAPTOPS MEDIANAS — 901–1300px
   El header sigue visible (no es el breakpoint móvil de abajo), pero
   con menos ancho disponible que un monitor grande. Volvemos a un
   espaciado mas ajustado solo aca para que todo entre en una linea.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 901px) and (max-width: 1300px) {
  .pa-menu li a { padding: 10px 10px; }
  .pa-nav-right { gap: 6px; }
  .pa-nav-right .pa-social-row { gap: 4px; margin-right: 4px; }
  .pa-nav-right .pa-social-row a { width: 25px; height: 25px; padding: 6px; }
}

/* ═══════════════════════════════════════════════════════════════
   MÓVIL — ≤ 900px
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  :root { --pa-header-h: 64px; }
  .pa-header-inner {
    grid-template-columns: 44px 1fr 44px;
    padding: 0 14px;
    gap: 0;
  }
  .pa-nav { display: none; }
  .pa-logo-wrap { grid-column: 2; }
  .pa-logo-wrap img { height: 56px; }

  .pa-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    background: none; border: none; cursor: pointer; padding: 8px;
    grid-column: 1; grid-row: 1;
  }
  .pa-hamburger:hover { background: none !important; }
  .pa-hamburger span {
    display: block; width: 24px; height: 2px; background: #fff;
    border-radius: 2px; transition: all var(--pa-transition); transform-origin: center;
  }
  .pa-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .pa-hamburger.open span:nth-child(2) { opacity: 0; }
  .pa-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .pa-search-btn { display: flex; grid-column: 3; grid-row: 1; justify-content: flex-end; margin: 0; }

  /* En móvil el header es SIEMPRE negro sólido, sin transparencia, pegado arriba */
  .pa-header {
    top: 0;
    background: var(--pa-header-bg-scroll);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
  .pa-header.scrolled {
    box-shadow: 0 2px 20px rgba(0,0,0,.35);
  }
}

/* ═══════════════════════════════════════════════════════════════
   MENÚ MÓVIL — ACORDEÓN que baja desde el header
   Panel negro que se despliega hacia abajo al tocar la hamburguesa
   ═══════════════════════════════════════════════════════════════ */
.pa-mobile-menu {
  position: fixed;
  top: var(--pa-header-h);
  left: 0;
  right: 0;
  background: #0a0a0a;
  z-index: 1040;
  overflow: hidden;
  max-height: 0;
  transition: max-height .4s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 12px 30px rgba(0,0,0,.4);
}
.pa-mobile-menu.open {
  max-height: 600px;
  overflow-y: auto;
}
/* Cuando el header está pegado arriba (scrolled), el menú arranca desde 0 */
.pa-header.scrolled ~ .pa-mobile-menu {
  top: var(--pa-header-h);
}

.pa-mobile-menu-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-mobile-menu-list li { border-bottom: 1px solid rgba(255,255,255,.07); }
.pa-mobile-menu-list li:last-child { border-bottom: none; }
.pa-mobile-menu-list li a {
  display: block;
  padding: 17px 24px;
  color: #fff;
  font-family: var(--pa-font-cuerpo);
  font-size: var(--pa-font-body-sm);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  text-decoration: none;
  transition: background var(--pa-transition), color var(--pa-transition), padding-left var(--pa-transition);
}
.pa-mobile-menu-list li a:hover,
.pa-mobile-menu-list li a:active {
  color: var(--pa-brand-green);
  padding-left: 30px;
}
.pa-mobile-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 1039;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--pa-transition), visibility var(--pa-transition);
}
.pa-mobile-overlay.open { opacity: 1; visibility: visible; }

/* ── Logo circular central (desktop) ─────────────────────────── */
.pa-logo-center {
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.pa-logo-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease, filter .3s ease;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.35));
}
.pa-logo-center:hover .pa-logo-circle {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 16px rgba(245,197,24,.5));
}

/* Logo móvil: oculto en desktop */
.pa-logo-mobile { display: none; }

/* Logo centrado dentro del acordeón móvil */
.pa-mobile-menu-logo {
  display: none;
}

@media (max-width: 900px) {
  /* Ocultar logo central de desktop, mostrar logo móvil */
  .pa-logo-center { display: none; }
  .pa-logo-mobile {
    display: flex;
    grid-column: 2;
    align-items: center;
    justify-content: center;
    text-decoration: none;
  }
  .pa-logo-mobile .pa-logo-circle {
    width: 56px;
    height: 56px;
  }
}

/* ============================================================
   REDES SOCIALES — header (nav derecho), menú móvil y footer
   Usa pa_get_social_row() de inc/pa-social-settings.php, que ya
   trae los iconos SVG e imprime solo las redes con URL cargada.
   ============================================================ */

/* ── Header desktop: dentro de .pa-nav-right, antes de la lupa ──
   Chips circulares translucidos, mismo lenguaje que .pa-share-btn
   (barra de compartir en articulos) pero adaptado a fondo oscuro. */
.pa-nav-right .pa-social-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}
.pa-nav-right .pa-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  padding: 7px;
  box-sizing: border-box;
  opacity: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pa-nav-right .pa-social-row a:hover {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
  transform: translateY(-2px);
}
.pa-nav-right .pa-social-row svg { width: 100%; height: 100%; }

/* ── Menú móvil (acordeón): fila de iconos al final ── */
.pa-mobile-menu-social {
  display: flex;
  justify-content: center;
  padding: 24px 0 8px;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.1);
}
.pa-mobile-menu-social .pa-social-row {
  display: flex;
  align-items: center;
  gap: 22px;
}
.pa-mobile-menu-social .pa-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: var(--pa-blanco, #fff);
  padding: 11px;
  box-sizing: border-box;
  opacity: 1;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pa-mobile-menu-social .pa-social-row a:hover { background: var(--pa-amarillo); color: var(--pa-negro); }
.pa-mobile-menu-social .pa-social-row svg { width: 100%; height: 100%; }

/* ── Footer: al lado del copyright, alineado a la derecha ──
   .pa-footer-bottom ya es flex + justify-content:space-between
   (definido en style.css), asi que este segundo hijo cae solo
   a la derecha sin tocar nada mas. */
.pa-footer-bottom .pa-social-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pa-footer-bottom .pa-social-row a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.75);
  padding: 8px;
  box-sizing: border-box;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.pa-footer-bottom .pa-social-row a:hover {
  background: var(--pa-amarillo);
  color: var(--pa-negro);
  transform: translateY(-2px);
}
.pa-footer-bottom .pa-social-row svg { width: 100%; height: 100%; }