/* ============================================================
   Fuentes
   ============================================================ */
@font-face {
  font-family: 'Bebas Neue';
  src: url('../../fonts/BebasNeue-Regular.woff2') format('woff2'),
       url('../../fonts/BebasNeue-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* OVERTURE: usa el archivo PPWatch en themes/custom/do_presidente_theme/fonts/ */
@font-face {
  font-family: 'OVERTURE';
  src: url('../../fonts/PPWatch-Bold.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   PMF Landing — General
   Fondo: colocar imagen en dist/img/bg-landing.jpg
   ============================================================ */
.pmf-landing {
  background-color: #002412;
  background-image:
    url('../img/festival/esquinas-1.png'),
    url('../img/festival/esquinas-2.png'),
    url('../img/festival/esquinas-3.png'),
    url('../img/festival/esquinas-4.png'),
    url('../img/festival/malla.png');
  background-repeat:   no-repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-position: top left,  top right, bottom left, bottom right, top left;
  background-size:     120px,     120px,     120px,       120px,       auto;
  min-height: 100vh;
}

@media (min-width: 769px) {
  .pmf-landing {
    background-image:
      url('../img/festival/esquinas-1.png'),
      url('../img/festival/esquinas-2.png'),
      url('../img/festival/esquinas-3.png'),
      url('../img/festival/esquinas-4.png'),
      url('../img/festival/malla-1.png');
    background-position: top left, top right, bottom left, bottom right, top center;
    background-size:     auto,    auto,      auto,        auto,        100% auto;
  }
}

/* CTA dorado compartido — botones de fondo amarillo, letra verde oscuro y
   esquinas asimétricas (8px 0 8px 0). Usado en varias secciones de la landing.
   El submit del formulario de registro lo renderiza un módulo (no se le puede
   añadir la clase en el markup), por eso su selector se incluye aquí. */
.pmf-cta,
.pmf-registro__form-wrap .pmf-register-form__submit,
.pmf-registro__form-wrap input[type="submit"] {
  background: #DAB64F !important;
  color: #033A09 !important;
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  border-radius: 16px 0 16px 0 !important;
  transition: background 0.2s;
}

.pmf-cta:hover,
.pmf-registro__form-wrap .pmf-register-form__submit:hover,
.pmf-registro__form-wrap input[type="submit"]:hover {
  background: #c9a438;
}

/* ============================================================
   Hero Principal — Desktop (CSS Grid)
   Layout:
     [ video (rows 1+2) ]  [ header (row 1) ]
     [ video (rows 1+2) ]  [ body   (row 2) ]
   ============================================================ */
.pmf-hero {
  padding: 60px 10%;
}

.pmf-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: 52% 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "left header"
    "left body";
  column-gap: 24px;
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Video (columna izquierda, ocupa ambas filas) ---------- */
.pmf-hero__left {
  grid-area: left;
  position: relative;
  align-self: start;
}

.pmf-hero__video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #111;
  border: 4px solid rgba(218, 182, 79, 0.25);
  cursor: pointer;
}

.pmf-hero__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.3s;
}

.pmf-hero__play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  background: url('../img/festival/Play.png') no-repeat center / contain;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: transform 0.2s, opacity 0.2s;
  padding: 0;
}

.pmf-hero__video-card:hover .pmf-hero__play-btn {
  transform: translate(-50%, -50%) scale(1.08);
  opacity: 0.9;
}

.pmf-hero__video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: none;
}

.pmf-hero__video-card.is-playing .pmf-hero__poster,
.pmf-hero__video-card.is-playing .pmf-hero__play-btn {
  display: none;
}

.pmf-hero__video-card.is-playing .pmf-hero__video-iframe {
  display: block;
}

@media (min-width: 769px) {
  .pmf-hero__left {
    align-self: stretch;
  }

  .pmf-hero__video-card {
    aspect-ratio: auto;
    height: 100%;
  }
}

.pmf-hero__badge {
  position: absolute;
  bottom: -24px;
  left: -16px;
  width: 100px;
  height: 100px;
  z-index: 2;
}

.pmf-hero__badge img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* ---------- Texto superior (eyebrow, titulo, subtitulo, fecha) ---------- */
.pmf-hero__header {
  grid-area: header;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: start;
  max-width: 360px;
  width: 100%;
  justify-self: start;
  margin: 0;
}

.pmf-hero__eyebrow {
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  text-align: center;
}

.pmf-hero__titulo {
  margin: 2px 0;
  text-align: center;
}

.pmf-hero__titulo img {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: inline-block;
}

.pmf-hero__subtitulo {
  font-family: 'Bebas Neue', sans-serif;
  color: #ffffff;
  font-size: 28px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 4px;
  margin: 0;
  text-align: center;
}

.pmf-hero__fecha {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #DAB64F;
  font-size: 16px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 28px 0 18px;
  text-align: center;
}

/* ---------- Texto inferior (descripcion, logos, participa) ---------- */
.pmf-hero__body {
  grid-area: body;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: end;
  max-width: 360px;
  width: 100%;
  justify-self: start;
  margin: 0;
}

.pmf-hero__descripcion {
  margin: 20px 0 14px;
}

.pmf-hero__descripcion p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px !important;
  line-height: 1.35;
}

.pmf-hero__descripcion span {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #DAB64F;
  font-size: 14px !important;
  font-weight: 700;
  text-transform: uppercase;
}

.pmf-hero__logos {
  display: flex;
  gap: 20px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.pmf-hero__logos img {
  height: 26px;
  width: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.pmf-hero__logo-participa {
  position: absolute;
  right: -8px;
  bottom: -100px;
  margin: 0;
}

.pmf-hero__logo-participa img {
  width: 150px;
  height: 150px;
  object-fit: contain;
}

/* ============================================================
   Header navbar — SOLO landing Festival Presidente
   Scope: este CSS solo se carga en esta landing (attach_library en el
   node template) y, además, todas las reglas van prefijadas por la clase
   de body del content type para no afectar otras páginas.
   ============================================================ */

/* 0) Scroll suave al saltar a las anclas de las secciones (#field_ancla).
      Esta hoja solo se carga en esta landing, así que no afecta otras páginas. */
html { scroll-behavior: smooth; }

/* 1) Navbar transparente y superpuesto al hero (deja ver el fondo del festival) */
body.page-node-type-landing-presidente-music #menu__paco {
  position: absolute;          /* sale del flujo: el hero sube y su fondo queda detrás */
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* El tema pinta el verde con !important, así que la transparencia también lo necesita. */
body.page-node-type-landing-presidente-music #menu__paco,
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--header,
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper {
  background-color: transparent !important;
}

/* 2) Dar aire bajo el navbar: el logo (150px, anclado arriba) no debe montarse
      sobre el contenido del hero. */
body.page-node-type-landing-presidente-music .pmf-hero {
  padding-top: 240px;          /* logo ~198px + aire para separar del contenido; afinar */
}

/* 2b) Centrar verticalmente todo el navbar (logo, menú y botón en la misma línea)
      y acercar el logo al borde izquierdo (#4). El logo (alto) marca la altura de la
      fila; align-items:center alinea el menú/botón con su centro. justify-content
      space-between empuja el logo a la izquierda y el botón a la derecha. */
body.page-node-type-landing-presidente-music #menu__paco {
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;             /* deja un pequeño margen al borde; afinar */
  margin-top: 4rem;
}

/* 2b-bis) Agrupar el menú a la izquierda (pegado al logo, look Figma) y el botón a la
      derecha. El wrapper ocupa el ancho restante; los enlaces toman el espacio y se
      alinean a la izquierda; el botón mantiene su tamaño natural a la derecha. */
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper {
  flex: 1;
  max-width: none;   /* anula el max-width:940/1200px del módulo: el wrapper llena el ancho restante
                        para que los items queden pegados al logo (cierra el hueco logo↔items) */
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items {
  flex: 1;   /* la caja abarca de logo a PARTICIPA; los enlaces se centran dentro (abajo) */
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu {
  justify-content: center !important;   /* reparte el vacío igual a ambos lados: gap logo↔enlaces == gap enlaces↔PARTICIPA */
}

/* 2b-ter) Compactar el navbar: el módulo da a cada enlace padding:30px 32px en desktop
      (≥992px), lo que separa demasiado los items e infla .menu__items hasta empujar
      PARTICIPA fuera del viewport. Reducimos solo el padding horizontal (mantiene el
      vertical del módulo). Acotado a desktop para no tocar el overlay móvil (≤991px). */
@media (min-width: 992px) {
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item > a {
    padding-left: 16px;
    padding-right: 16px;
  }
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login {
  flex: 0 0 auto;
  width: auto !important;               /* anula el width:100% del tema */
}

/* 2c) Enlaces del navbar con la fuente de la landing ('Bebas Neue', uppercase). */
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item > a,
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;       /* algo menor que 13px: los items ocupan menos y caben sin desbordar */
  white-space: nowrap;   /* cada opción en una sola línea (no parte "ROAD TO FESTIVAL" / "MAPA DEL EVENTO") */
}


body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item > a.is-active {
  color: #fff !important;
}
body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item > a.is-active::after {
  content: none !important;    /* quita el subrayado dorado de "activo" */
}

/* 3) Swap del logo por CSS (sin tocar el <img> ni el enlace del módulo) */
body.page-node-type-landing-presidente-music #menu__paco .menu__header--logo img {
  display: none;
}

body.page-node-type-landing-presidente-music #menu__paco .menu__header--logo a {
  display: inline-block;
  width: 180px;                /* aspecto 225:248 -> alto 198 ≈ ancho 180 (más grande) */
  height: 198px;
  background: url('../img/festival/logo-festival.png') no-repeat center / contain;
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a {
  display: inline-block !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 14px 40px !important;
  line-height: 1 !important;
  background: #DAB64F !important;        /* dorado: vence al blanco del módulo y al icono del tema */
  background-image: none !important;     /* quita el Profile.svg del tema */
  color: #033A09 !important;             /* verde de la letra */
  border-radius: 8px 0 8px 0 !important; /* coherente con el resto de botones dorados */
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  font-size: 0 !important;               /* oculta el texto original "Ingresar" */
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a:hover {
  background: #c9a438 !important;        /* dorado hover (igual que los demás botones) */
}

body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a::after {
  content: 'PARTICIPA' !important;       /* hereda fuente/uppercase/letter-spacing/color del <a>; !important vence a la caret de Bootstrap del dropdown-toggle (usuario logueado) */
  display: inline-block !important;      /* vence al `::after { display:none }` del módulo */
  border: none !important;               /* anula la caret triangular de Bootstrap (.dropdown-toggle::after) */
  font-size: 11px !important;
  line-height: 1 !important;
}


body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav .dropdown-menu {
  display: none !important;
}


@media (min-width: 992px) and (max-width: 1342px) {

  /* padding lateral del navbar: 16px (992) → 40px (1342) */
  body.page-node-type-landing-presidente-music #menu__paco {
    padding: 0 clamp(16px, calc(6.857vw - 52.04px), 40px) !important;
  }

  /* enlaces: padding 3→12px, letter-spacing 0.2→1.4px, font-size 11→12px (sin partir).
     Mínimos bajados (padding 6→3, letter-spacing 0.5→0.2) para cerrar el residual ≤20px
     que aún quedaba en 992–1028px, sin tocar font-size (legibilidad). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item > a {
    padding-left: clamp(3px, calc(2.571vw - 22.5px), 12px) !important;
    padding-right: clamp(3px, calc(2.571vw - 22.5px), 12px) !important;
    letter-spacing: clamp(0.2px, calc(0.3429vw - 3.2px), 1.4px) !important;
    font-size: clamp(11px, calc(0.2857vw + 8.17px), 12px) !important;
    white-space: nowrap !important;
  }
  /* defensa: anular cualquier margen lateral entre items del módulo */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items .menu .menu__items--item {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* logo: 132×145 (992) → 170×187 (1342), mantiene aspecto ~225:248 */
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--logo a {
    width: clamp(132px, calc(10.86vw + 24.3px), 170px) !important;
    height: clamp(145px, calc(12vw + 25.96px), 187px) !important;
  }

  /* botón PARTICIPA: padding horizontal 16→32px, vertical fijo 14px */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a {
    padding: 14px clamp(16px, calc(4.571vw - 29.35px), 32px) !important;
  }
}


@media (max-width: 991px) {

  /* a) Barra superior: una sola fila flex [logo · PARTICIPA · hamburger]. */
  body.page-node-type-landing-presidente-music #menu__paco {
    display: flex;
    align-items: center;
    justify-content: space-between;  /* logo izq · PARTICIPA centro · hamburger der */
    padding: 0 20px;
    margin-top: 2.75rem;       /* baja la barra (logo incluido) sobre el hero */
  }

  /* Hero menos separado del navbar: la regla base .pmf-hero{padding-top:240px}
     (especificidad 0,2,1) vence a los overrides responsive; se baja aquí con
     igual especificidad. Libra el navbar absoluto (logo 132px + margin-top). */
  body.page-node-type-landing-presidente-music .pmf-hero {
    padding-top: 185px;
  }

  /* Aplanar header y wrapper(cerrado) para que sus hijos sean items flex
     de #menu__paco. El wrapper abierto se exceptúa (pasa a overlay, abajo). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--header {
    display: contents;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper:not(.menu__paco--open) {
    display: contents;
  }

  /* Orden en la fila: logo (izq) · PARTICIPA · hamburger (derecha). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--logo {
    order: 1;
    width: auto;               /* anula el width:90% del módulo */
  }
  /* PARTICIPA: neutralizar las reglas móviles del módulo que descolocan el botón
     (.menu__login: column + height:-webkit-fill-available + width:100%; li: padding 26px 0)
     para que sea una caja simple de alto automático, centrada por align-items del #menu__paco. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__login {
    order: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: auto !important;     /* anula module width:100% */
    height: auto !important;    /* anula module height:-webkit-fill-available */
    padding: 0 !important;      /* anula el padding-top:20px de style.css (global, @media 991) */
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__login .navbar-nav {
    width: auto;                /* anula module width:90% / max-width:300px */
    max-width: none;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__login .navbar-nav .menu-item--expanded {
    padding: 0;                 /* anula el padding:26px 0 móvil del módulo */
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--toggle {
    order: 3;                  /* space-between ya lo manda al borde derecho */
    position: relative;
    z-index: 2;                /* X por encima del overlay (z-index:1) */
  }

  /* Lo que no va en la barra cerrada. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__items {
    display: none;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--search {
    display: none !important;
  }

  /* b) Logo más pequeño (mantiene aspecto ~225:248 del swap desktop). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--logo a {
    width: 120px;
    height: 132px;
  }

  /* c) PARTICIPA más pequeño: reutiliza el botón dorado existente (líneas
        ~401-429), solo ajusta tamaño de padding y de la etiqueta ::after. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a {
    padding: 18px 22px !important;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper .menu__login .navbar-nav li.nav-item > a::after {
    font-size: 12px !important;
  }

  /* d) Hamburger verde neón #00ED59 y más grande (vence al #8b8a8a del
        módulo y al stroke inline #D6C283 del svg). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--toggle .open {
    width: 30px;
    height: auto;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--toggle .open path {
    stroke: #00ED59 !important;
  }

  /* e) X de cierre en ámbar #DAB64F (los rects usan fill, no stroke). La X
        aparece sola al togglear .paco--change-icon en el toggle. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--toggle .close {
    width: 26px;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__header--toggle .close rect {
    fill: #DAB64F !important;
  }

  /* f) Menú desplegado: overlay a pantalla completa, verde marca + blur. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open {
    display: block;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    z-index: 1;
    padding: 120px 32px;
    overflow-y: auto;
    background: rgba(0, 36, 18, 0.92);          /* #002412 translúcido */
    -webkit-backdrop-filter: blur(14px);        /* prefijo Safari */
            backdrop-filter: blur(14px);
  }

  /* Dentro del overlay: solo los links (sin PARTICIPA ni buscador). */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__login,
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__paco--search {
    display: none !important;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items {
    display: block;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start !important;
    gap: 28px;
  }

  /* Quitar separadores/bullets del módulo dentro del overlay. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item {
    width: 100%;
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item::before,
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item::marker {
    content: none !important;
    display: none !important;
  }

  /* Links del menú: Bebas Neue grande, blancos; verde #00ED59 al tocar. */
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item > a {
    font-family: 'Bebas Neue', sans-serif;
    font-weight: 400;
    font-size: 34px;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff !important;          /* vence al .is-active dorado del tema */
  }
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item > a:hover,
  body.page-node-type-landing-presidente-music #menu__paco .menu__paco--wrapper.menu__paco--open .menu__items .menu__items--item > a:active {
    color: #00ED59 !important;
  }

  /* g) Estado abierto: ocultar logo y PARTICIPA de la barra (solo X + links). */
  body.menu__body--open.page-node-type-landing-presidente-music #menu__paco .menu__header--logo {
    visibility: hidden;
  }
  body.menu__body--open.page-node-type-landing-presidente-music #menu__paco .menu__login {
    display: none;
  }
}

/* ============================================================
   Footer — SOLO landing Festival Presidente
   Rediseño: logo arriba + divisor + fila [enlaces (2 sub-cols) | redes].
   Override del grid del módulo ab_paco_menu_footer, acotado por la clase
   de body (este CSS solo carga en la landing).
   ============================================================ */

/* A) Logo solo arriba a la izquierda: ocultar descripción y botón SUSCRIBIRME. */
body.page-node-type-landing-presidente-music #footer__paco .paco__main--subscription .paco__main--description,
body.page-node-type-landing-presidente-music #footer__paco .paco__main--subscription .paco__main--button,
body.page-node-type-landing-presidente-music #footer__paco .paco__main--subscription .webform-dialog {
  display: none !important;
}

/* B) Logo a la izquierda + línea divisoria horizontal bajo el logo. */
body.page-node-type-landing-presidente-music #footer__paco .paco__main--subscription {
  padding: 0 0 24px !important;
  margin: 0 0 28px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.6);
}

/* C) Grid (desktop >=992px): logo full-width / [enlaces | redes]. */
@media (min-width: 992px) {
  body.page-node-type-landing-presidente-music #footer__paco .paco__main .paco__main--wrapper {
    grid-template-columns: 2fr 0.8fr;   /* izquierda enlaces / derecha redes */
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "logo   logo"
      "items  social"
      "terms  social";
    align-items: start;
    grid-row-gap: 24px;
  }
  body.page-node-type-landing-presidente-music #footer__paco .paco__main .paco__main--subscription { grid-area: logo; }
  body.page-node-type-landing-presidente-music #footer__paco .paco__main .paco__main--items     { grid-area: items; }
  body.page-node-type-landing-presidente-music #footer__paco .paco__main .paco__main--terms     { grid-area: terms; }
  body.page-node-type-landing-presidente-music #footer__paco .paco__main .paco__main--social    { grid-area: social; }
}

/* ============================================================
   Responsive — Tablet
   ============================================================ */
@media (max-width: 1024px) {
  .pmf-hero {
    padding: 40px 6%;
  }
}

/* ============================================================
   Responsive — Mobile
   Orden: header → video → body
   El badge del video (sticker) se oculta en mobile.
   ============================================================ */
@media (max-width: 768px) {
  .pmf-hero {
    padding: 28px 20px 40px;
  }

  .pmf-hero__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* HTML order: header (1°), left/video (2°), body (3°) — fluye natural */
  }

  .pmf-hero__badge {
    display: none;
  }

  .pmf-hero__header {
    gap: 6px;
    margin: 0 auto;
  }

  .pmf-hero__eyebrow {
    font-size: 24px;
    letter-spacing: 3px;
  }

  .pmf-hero__titulo img {
    max-width: 100%;
    width: 100%;
  }

  .pmf-hero__subtitulo {
    font-size: 24px;
    letter-spacing: 3px;
  }

  .pmf-hero__fecha {
    font-size: 18px;
    letter-spacing: 1px;
    margin: 6px 0 0;
  }

  .pmf-hero__body {
    gap: 12px;
    align-self: auto;
    margin: 0 auto;
  }

  .pmf-hero__descripcion {
    font-size: 13px;
    line-height: 1.35;
    max-width: 100%;
  }

  .pmf-hero__logos {
    gap: 14px;
    justify-content: center;
  }

  .pmf-hero__logos img {
    height: 35px;
  }

  .pmf-hero__logo-participa {
    position: static;
    align-self: center;
    margin-top: 4px;
  }

  .pmf-hero__logo-participa img {
    width: 200px;
    height: 200px;
  }
}

/* ============================================================
   Sección Lineup
   ============================================================ */
.pmf-lineup {
  padding: 60px 10%;
  overflow-x: hidden;
}

.pmf-lineup__container {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.pmf-lineup__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
}

.pmf-lineup__header-left {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  flex: 1;
}

.pmf-lineup__logo {
  flex-shrink: 0;
}

.pmf-lineup__logo img {
  width: 210px;
  height: auto;
}

.pmf-lineup__desc {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.2;
  max-width: 340px;
  padding-top: 4px;
}

.pmf-lineup__desc span {
  color: #DAB64F;
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
}

/* ---------- Tabs de fechas ---------- */
.pmf-lineup__tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-top: 4px;
}

.pmf-lineup__day-label {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #57E84A;
  font-size: 16px;
  letter-spacing: 2px;
  margin-right: 12px;
  min-width: 80px;
}

.pmf-lineup__tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  padding: 6px 18px 8px;
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: rgba(255, 255, 255, 0.45);
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.pmf-lineup__tab.is-active {
  color: #ffffff;
  border-bottom-color: #DAB64F;
}

.pmf-lineup__tab:hover:not(.is-active) {
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Estado apilado (lo activa el JS por altura del párrafo) ----------
   fila 1: logo + párrafo; fila 2: día + fechas a todo el ancho. Solo
   desktop/intermedio; mobile (≤768px) conserva su layout más abajo. */
@media (min-width: 769px) {
  .pmf-lineup__header.is-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 28px;
  }
  .pmf-lineup__header.is-stacked .pmf-lineup__desc {
    max-width: none;          /* el párrafo usa todo el ancho de la fila → vuelve a ser bajo */
  }
  .pmf-lineup__header.is-stacked .pmf-lineup__tabs {
    width: 100%;
    flex-wrap: wrap;          /* las fechas envuelven si no caben en una línea */
  }
}

/* ---------- Stage + Track ---------- */
.pmf-lineup__stage {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.pmf-lineup__track {
  display: flex;
  gap: 36px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-bottom: 4px;
  margin-right: calc(50% - 50vw);
}

.pmf-lineup__track::-webkit-scrollbar {
  display: none;
}

/* ---------- Artist card ---------- */
.pmf-lineup__card {
  flex-shrink: 0;
  width: 280px;
  position: relative;
  padding: 12px;
  border-radius: 16px;
  background: rgba(0, 31, 15, 0.45);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.pmf-lineup__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(135deg,
    #1e5b27 0%,
    rgba(47, 143, 62, 0.10) 35%,
    rgba(47, 143, 62, 0.10) 65%,
    #1e5b27 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.pmf-lineup__card.is-hidden {
  display: none;
}

.pmf-lineup__card-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #1a1a1a;
}

.pmf-lineup__card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pmf-lineup__card-name {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.pmf-lineup__card-country {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #DAB64F;
  font-size: 12px;
  margin: 0;
  text-transform: capitalize;
}

/* ---------- Flechas de navegación ---------- */
.pmf-lineup__arrows {
  display: flex;
  gap: 25px;
}

.pmf-lineup__arrow {
  width: 50px;
  height: 50px;
  padding: 0;
  border: none;
  background: url('../img/Arrow_circle_cards.png') no-repeat center / contain;
  cursor: pointer;
}

/* Oculta el SVG antiguo que pueda quedar en el markup compilado en caché:
   las flechas ahora se pintan solo con la imagen de fondo (PNG). */
.pmf-lineup__arrow svg {
  display: none;
}

/* Prev (izquierda): la imagen habilitada apunta a la derecha → rotar 180°. */
.pmf-lineup__arrow--prev {
  transform: rotate(180deg);
}

/* Deshabilitada: PNG gris (apunta a la izquierda por defecto). */
.pmf-lineup__arrow:disabled {
  background-image: url('../img/Arrow_circle_card_disabled.png');
  cursor: default;
}

/* Prev deshabilitada: el PNG gris ya apunta a la izquierda → sin rotación. */
.pmf-lineup__arrow--prev:disabled {
  transform: none;
}

/* Next deshabilitada: el PNG gris apunta a la izquierda → rotar 180° a la derecha. */
.pmf-lineup__arrow--next:disabled {
  transform: rotate(180deg);
}

/* ---------- Responsive Lineup ---------- */
@media (max-width: 1024px) {
  .pmf-lineup {
    padding: 48px 6%;
  }
}

@media (max-width: 768px) {
  .pmf-lineup {
    padding: 36px 20px;
  }

  .pmf-lineup__header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 28px;
  }

  .pmf-lineup__header-left {
    flex-direction: column;
    gap: 16px;
  }

  .pmf-lineup__logo {
    align-self: center;
  }

  .pmf-lineup__logo img {
    width: 220px;
  }

  .pmf-lineup__desc {
    font-size: 13px;
    max-width: 100%;
  }

  .pmf-lineup__tabs {
    width: 100%;
    flex-wrap: wrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
    padding-left: 20px;
  }

  .pmf-lineup__tabs::-webkit-scrollbar {
    display: none;
  }

  .pmf-lineup__day-label {
    width: 100%;
    font-size: 13px;
    margin-right: 0;
    margin-bottom: 6px;
    min-width: 0;
  }

  .pmf-lineup__tab {
    font-size: 13px;
    padding: 6px 14px 8px;
  }

  .pmf-lineup__tab:first-of-type {
    padding-left: 0;
  }

  .pmf-lineup__card {
    width: 300px;
  }

  .pmf-lineup__card-name {
    font-size: 16px;
  }
}

@media (max-width: 300px) {
  .pmf-lineup__tabs {
    width: 100%;
    flex-wrap: wrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }

  .pmf-lineup__day-label {
    width: 100%;
    font-size: 10px;
    margin-right: 0;
    margin-bottom: 6px;
    min-width: 0;
  }

  .pmf-lineup__tab {
    font-size: 10px;
    padding: 6px 6px 8px;
  }
}

/* ============================================================
   Sección Mapa del evento
   ============================================================ */

/* ---------- Landing (fondo estático) ---------- */
.pmf-mapa__landing {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pmf-mapa__landing::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--pmf-mapa-fondo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 0;
}

.pmf-mapa__landing-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.pmf-mapa__titulo-img {
  max-width: 640px;
  width: 80%;
  height: auto;
  display: block;
}

.pmf-mapa__titulo-img--mobile {
  display: none;
}

.pmf-mapa__subtitulo {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #DAB64F;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0;
}

/* Apariencia en .pmf-cta (sección General); aquí solo tamaño/posición. */
.pmf-mapa__open-btn {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  z-index: 1;
  padding: 18px 44px;
}

/* ---------- Modal ---------- */
.pmf-mapa__modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s, visibility 0.3s;
}

.pmf-mapa__modal.is-open {
  visibility: visible;
  opacity: 1;
}

.pmf-mapa__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  cursor: pointer;
}

.pmf-mapa__modal-inner {
  position: relative;
  z-index: 1;
  width: 92%;
  max-width: 1100px;
}

.pmf-mapa__close {
  position: fixed;
  top: 24px;
  right: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  line-height: 0;
  z-index: 1;
}

.pmf-mapa__close svg {
  width: 40px;
  height: 40px;
  stroke: #DAB64F;
  transition: stroke 0.2s;
}

.pmf-mapa__close:hover svg {
  stroke: #fff;
}

.pmf-mapa__modal-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  background: transparent;
}

/* ---------- Mapa + pins ---------- */
.pmf-mapa__map-wrap {
  flex: 0 0 62%;
  position: relative;
  /* Sin overflow:hidden para que los pins absolutos sean visibles */
}

.pmf-mapa__map-img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

/* Pins */
.pmf-mapa__pin {
  position: absolute;
  transform: translate(-50%, -100%);
  cursor: pointer;
  z-index: 4;
}

/* El pin activo (y su popup) por sobre los demás pines */
.pmf-mapa__pin.is-active {
  z-index: 20;
}

.pmf-mapa__pin-icon {
  display: block;
  width: 24px;
  height: 32px;
  background: url('../img/Pin_mapa_presidente.png') no-repeat center / contain;
  transition: transform 0.2s;
}

.pmf-mapa__pin.is-active .pmf-mapa__pin-icon,
.pmf-mapa__pin:hover .pmf-mapa__pin-icon {
  transform: scale(1.25);
}

/* Popup tooltip */
.pmf-mapa__popup {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 230px;
  background: rgba(28, 32, 30, 0.62);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 16px 0 16px 0;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
  display: none;
  z-index: 10;
}

/* Borde degradado dorado (mismo patrón que .pmf-promo__card, más delgado) */
.pmf-mapa__popup::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px 0 16px 0;
  padding: 1px;
  background: linear-gradient(135deg,
    #DAB64F 0%,
    rgba(218, 182, 79, 0.08) 35%,
    rgba(218, 182, 79, 0.08) 65%,
    #DAB64F 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

.pmf-mapa__popup.is-visible {
  display: block;
}

/* Cuando no cabe arriba del pin, se voltea hacia abajo (ver positionPopup en JS) */
.pmf-mapa__popup.is-flipped {
  bottom: auto;
  top: calc(100% + 10px);
}

/* Cuando no cabe centrado, se ancla al lado con espacio (ver positionPopup en JS) */
.pmf-mapa__popup.is-shift-right {
  left: 50%;
  right: auto;
  transform: none;
}

.pmf-mapa__popup.is-shift-left {
  left: auto;
  right: 50%;
  transform: none;
}

.pmf-mapa__popup-img {
  display: block;
  width: calc(100% - 24px);
  height: 110px;
  margin: 12px 12px 0;
  object-fit: cover;
  border-radius: 12px;
}

.pmf-mapa__popup-body {
  padding: 10px 12px 12px;
}

.pmf-mapa__popup-title {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #fff;
  font-size: 10px;
  letter-spacing: 1px;
  margin: 0 0 4px;
  text-transform: uppercase;
}

.pmf-mapa__popup-excerpt {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.65);
  font-size: 12px;
  line-height: 1.4;
  margin: 0 0 10px;
}

/* Apariencia/hover en .pmf-cta (sección General); aquí solo tamaño/posición. */
.pmf-mapa__popup-cta {
  display: block;
  text-align: center;
  padding: 8px 12px;
  font-size: 10px;
  text-decoration: none;
}

/* ---------- Panel de info (derecha) ---------- */
.pmf-mapa__info-panel {
  flex: 1;
  margin-top: auto;
  margin-bottom: auto;
}

.pmf-mapa__info {
  display: none;
}

.pmf-mapa__info.is-active {
  display: block;
}

.pmf-mapa__info-title {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #57E84A;
  font-size: 26px;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1.1;
  margin: 0 0 20px;
}

.pmf-mapa__info-desc p {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  line-height: 1.3;
  max-width: 350px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Responsive Mapa ---------- */
@media (max-width: 1024px) {
  .pmf-mapa__modal-inner {
    width: 96%;
  }
}

@media (max-width: 768px) {
  .pmf-mapa__landing {
    min-height: 460px;
    align-items: flex-start;     /* contenido hacia el tope (cross-axis = vertical) */
    padding: 40px 20px 104px;    /* reserva ~104px abajo para el botón absoluto */
  }

  .pmf-mapa__landing::before {
    background-size: cover;      /* llena toda la sección, como el Figma (antes: contain) */
    background-position: center 70%;  /* sube la imagen del mapa (con cover, +% vertical = sube) */
    opacity: 0.8;               /* mapa prominente pero un poco más tenue (antes 0.45 → 0.9) */
  }

  .pmf-mapa__landing-inner {
    gap: 6px;
  }

  .pmf-mapa__titulo-img {
    width: 70%;
  }

  .pmf-mapa__titulo-img--has-mobile {
    display: none;
  }

  .pmf-mapa__titulo-img--mobile {
    display: block;
  }

  .pmf-mapa__subtitulo {
    font-size: 18px;
    letter-spacing: 2px;
  }

  .pmf-mapa__open-btn {
    bottom: 0px;
    padding: 16px 44px;
    font-size: 12px;
  }

  .pmf-mapa__modal-body {
    flex-direction: column;
    gap: 20px;
  }

  .pmf-mapa__map-wrap {
    flex: none;
    width: 100%;
  }

  .pmf-mapa__info-panel {
    padding-top: 0;
  }

  .pmf-mapa__info-title {
    font-size: 26px;
  }

  .pmf-mapa__close {
    top: -46px;
  }
}

/* ============================================================
   Sección Promociones / Merch
   ============================================================ */
.pmf-promo {
  padding: 60px 10%;
}

.pmf-promo__container {
  max-width: 1140px;
  margin: 0 auto;
}

/* ---------- Header ---------- */
.pmf-promo__header {
  display: flex;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 32px;
}

.pmf-promo__header-left {
  flex-shrink: 0;
}

.pmf-promo__logo-wrap {
  position: relative;
  display: inline-block;
}

.pmf-promo__logo {
  height: 80px;
  width: auto;
  display: block;
}

.pmf-promo__logo--mobile {
  display: none;
}

.pmf-promo__header-right {
  display: flex;
  flex-direction: column;
  gap: 0px;
  padding-top: 10px;
}

.pmf-promo__eyebrow {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #DAB64F;
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.pmf-promo__desc {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px !important;
  line-height: 1;
  margin: 0;
}

/* Neutraliza el margen por defecto del <p> que genera el campo raw, para que la
   caja del texto mida solo el texto visible y el centrado vertical respecto al
   título sea óptico (no quede desplazado hacia abajo). */
.pmf-promo__desc p {
  margin: 0;
}

/* Solo desktop: centra verticalmente el bloque de texto (eyebrow + descripción)
   respecto a la altura de la imagen de título. Acotado a min-width 769px para no
   afectar el layout móvil (que apila en columna a <=768px). */
@media (min-width: 769px) {
  .pmf-promo__header {
    align-items: center;
  }
  .pmf-promo__header-right {
    padding-top: 0;
  }
}

/* ---------- Carousel ---------- */
.pmf-promo__track {
  position: relative;
}

/* Slides: sólo el activo es visible */
.pmf-promo__slide {
  display: none;
}

.pmf-promo__slide.is-active {
  display: block;
}

/* ---------- Card ---------- */
.pmf-promo__card {
  position: relative;
  border-radius: 16px 0 16px 0;
  overflow: hidden;
  background: rgba(0, 31, 15, 0.65);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

.pmf-promo__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px 0 16px 0;
  padding: 1.5px;
  background: linear-gradient(135deg,
    #DAB64F 0%,
    rgba(218, 182, 79, 0.08) 35%,
    rgba(218, 182, 79, 0.08) 65%,
    #DAB64F 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  z-index: 2;
}

/* Imagen del banner */
.pmf-promo__card-img-wrap {
  width: 100%;
  overflow: hidden;
  max-height: 340px;
}

.pmf-promo__card-img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  display: block;
}

.pmf-promo__card-img--mobile {
  display: none;
}

/* Footer de la card */
.pmf-promo__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  gap: 16px;
}

.pmf-promo__card-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pmf-promo__card-date {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #DAB64F;
  font-size: 14px;
  margin: 0;
}

.pmf-promo__card-title {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

/* CTA — botón dorado relleno. Apariencia en .pmf-cta; aquí solo tamaño/posición. */
.pmf-promo__card-cta {
  flex-shrink: 0;
  display: inline-block;
  padding: 18px 28px;
  text-decoration: none;
}

/* ---------- Navegación ---------- */
.pmf-promo__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

.pmf-promo__dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pmf-promo__dot {
  width: 16px;
  height: 16px;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s;
  background: rgba(218, 182, 79, 0.4);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='32' cy='50' r='30'/%3E%3Ccircle cx='68' cy='50' r='30'/%3E%3Ccircle cx='50' cy='32' r='30'/%3E%3Ccircle cx='50' cy='68' r='30'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='32' cy='50' r='30'/%3E%3Ccircle cx='68' cy='50' r='30'/%3E%3Ccircle cx='50' cy='32' r='30'/%3E%3Ccircle cx='50' cy='68' r='30'/%3E%3C/svg%3E") center / contain no-repeat;
}

.pmf-promo__dot.is-active {
  background: #57E84A;
}

.pmf-promo__arrow {
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: url('../img/Arrow_circle_cards.png') no-repeat center / contain;
  cursor: pointer;
}

/* Oculta el SVG antiguo que pueda quedar en el markup compilado en caché:
   las flechas ahora se pintan solo con la imagen de fondo (PNG). */
.pmf-promo__arrow svg {
  display: none;
}

/* Prev (izquierda): la imagen habilitada apunta a la derecha → rotar 180°. */
.pmf-promo__arrow--prev {
  transform: rotate(180deg);
}

/* Deshabilitada: PNG gris (apunta a la izquierda por defecto). */
.pmf-promo__arrow:disabled {
  background-image: url('../img/Arrow_circle_card_disabled.png');
  cursor: default;
}

/* Prev deshabilitada: el PNG gris ya apunta a la izquierda → sin rotación. */
.pmf-promo__arrow--prev:disabled {
  transform: none;
}

/* Next deshabilitada: el PNG gris apunta a la izquierda → rotar 180° a la derecha. */
.pmf-promo__arrow--next:disabled {
  transform: rotate(180deg);
}

/* ---------- Responsive Promociones ---------- */
@media (max-width: 1024px) {
  .pmf-promo {
    padding: 48px 6%;
  }
}

@media (max-width: 768px) {
  .pmf-promo {
    padding: 36px 20px;
  }

  .pmf-promo__eyebrow {
    font-size: 13px;
  }

  .pmf-promo__header {
    flex-direction: column;
    gap: 20px;
    margin-bottom: 24px;
  }

  .pmf-promo__header-left {
    align-self: center;
  }

  .pmf-promo__logo {
    width: 260px;
    max-width: 100%;
    height: auto;
  }

  .pmf-promo__logo--has-mobile {
    display: none;
  }

  .pmf-promo__logo--mobile {
    display: block;
  }

  .pmf-promo__counter {
    width: 28px;
    height: 28px;
    font-size: 14px;
    line-height: 28px;
    top: -10px;
    right: -14px;
  }

  /* Imagen inset con esquinas redondeadas (sin borde) */
  .pmf-promo__card-img-wrap {
    width: auto;
    margin: 14px;
    border-radius: 12px;
  }

  /* En mobile: mostrar imagen mobile, ocultar desktop */
  .pmf-promo__card-img--desktop {
    display: none;
  }

  .pmf-promo__card-img--mobile {
    display: block;
  }

  .pmf-promo__card-img {
    height: auto;
    max-height: 220px;
  }

  .pmf-promo__card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
  }

  .pmf-promo__card-cta {
    width: 100%;
    text-align: center;
    padding: 16px 28px;
    font-size: 12px;
  }

  .pmf-promo__card-title {
    font-size: 18px;
  }
}

/* ============================================================
   Sección Boletería
   ============================================================ */
.pmf-boleteria {
  padding: 80px 10%;
  text-align: center;
}

.pmf-boleteria__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Título + ícono superpuesto */
.pmf-boleteria__titulo-wrap {
  position: relative;
  display: inline-block;
}

.pmf-boleteria__titulo {
  max-width: 380px;
  width: 100%;
  height: auto;
  display: block;
}

.pmf-boleteria__icono {
  position: absolute;
  top: -75px;
  right: -90px;
  width: 134px;
  height: 128px;
  object-fit: contain;
}

/* "Boletas disponibles en:" */
.pmf-boleteria__subtexto {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  margin: 0;
  letter-spacing: 0.3px;
}

/* Logo de la plataforma (Tuboleta) */
.pmf-boleteria__plataforma img {
  max-width: 314px;
  width: 100%;
  height: auto;
}

/* Descripción */
.pmf-boleteria__desc {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.75);
  font-size: 18px !important;
  line-height: 1.3;
  max-width: 300px;
  margin: 0;
  margin-bottom: 35px;
}

.pmf-boleteria__desc p {
  font-size: 16px !important;
}

/* CTA outlined */
.pmf-boleteria__cta {
  display: inline-block;
  position: relative;
  margin-top: 10px;
  padding: 18px 84px;
  border-radius: 16px 0 16px 0;
  background: rgba(0, 31, 15, 0.65);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  color: #DAB64F;
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  font-size: 11px;
  letter-spacing: 3px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s;
}

.pmf-boleteria__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 8px 2px 8px 2px;
  padding: 1.5px;
  background: linear-gradient(135deg,
    rgba(218, 182, 79, 0.65) 0%,
    rgba(218, 182, 79, 0.10) 35%,
    rgba(218, 182, 79, 0.10) 65%,
    rgba(218, 182, 79, 0.65) 100%);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}

.pmf-boleteria__cta:hover {
  background: #1a1a1a;
  color: #DAB64F;
}

/* ---------- Responsive Boletería ---------- */
@media (max-width: 768px) {
  .pmf-boleteria {
    padding: 56px 20px;
  }

  .pmf-boleteria__titulo {
    max-width: 350px;
  }

  .pmf-boleteria__icono {
    width: 64px;
    height: 64px;
    top: -14px;
    right: -24px;
    display: none;
  }

  .pmf-boleteria__plataforma img {
    max-width: 300px;
  }

  .pmf-boleteria__cta {
    padding: 18px 80px;
    font-size: 12px;
  }
}


/* ============================================================
   SECCIÓN REGISTRO
   ============================================================ */

.pmf-registro {
  padding: 72px 40px 80px;
}

.pmf-registro__inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: #002411;
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
  border-radius: 28px;
  padding: 48px 56px;
}

.pmf-registro__titulo-img {
  max-width: 280px;
  width: 100%;
  height: auto;
  margin-bottom: 8px;
}

.pmf-registro__eyebrow {
  font-family: 'OVERTURE', 'Bebas Neue', sans-serif;
  color: #DAB64F;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: left;
  align-self: stretch;
  padding: 0 64px;
  box-sizing: border-box;
  margin: 0 0 -4px;
}

.pmf-registro__desc {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  font-size: 12px;
  line-height: 1;
  text-align: left;
  align-self: stretch;
  padding: 0 64px;
  box-sizing: border-box;
  margin: 0;
}

.pmf-registro__desc p {
  margin: 2px 0;
}

.pmf-registro__desc strong span,
.pmf-registro__desc .pmf-asterisk {
  color: #DAB64F;
  font-size: 0.85em;
}

/* ---- Formulario ---- */

.pmf-registro__form-wrap {
  width: 100%;
  margin-top: 16px;
  padding: 0 64px;
  box-sizing: border-box;
}

.pmf-registro__form-wrap form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Labels */
.pmf-registro__form-wrap .form-item label {
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
}

.pmf-registro__form-wrap .form-required {
  color: #DAB64F;
}

/* El tema tiene base theme: false y no hereda el marcador de campo
   obligatorio, así que generamos el asterisco aquí. */
.pmf-registro__form-wrap .form-required::after {
  content: "*";
  color: #DAB64F;
  font-size: 0.8em;
  margin-left: 3px;
  vertical-align: top;
}

/* Inputs y email */
.pmf-registro__form-wrap .form-text,
.pmf-registro__form-wrap .form-email {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.pmf-registro__form-wrap .form-text::placeholder,
.pmf-registro__form-wrap .form-email::placeholder {
  color: rgba(255, 255, 255, 0.45);
}

.pmf-registro__form-wrap .form-text:focus,
.pmf-registro__form-wrap .form-email:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Selects */
.pmf-registro__form-wrap .form-select {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23ffffff' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
  transition: border-color 0.2s;
}

.pmf-registro__form-wrap .form-select option {
  background: #1a3a1a;
  color: #fff;
}

.pmf-registro__form-wrap .form-select:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Date input */
.pmf-registro__form-wrap input[type="date"] {
  width: 100%;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.18);
  border: none;
  border-radius: 6px;
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s;
  color-scheme: dark;
}

.pmf-registro__form-wrap input[type="date"]:focus {
  border-color: rgba(255, 255, 255, 0.6);
}

/* Checkbox T&C — el contenedor real que renderiza Drupal es
   .js-form-type-checkbox (.form-type-checkbox queda como fallback). */
.pmf-registro__form-wrap .js-form-type-checkbox,
.pmf-registro__form-wrap .form-type-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 20px 0;
}

.pmf-registro__form-wrap .js-form-type-checkbox input[type="checkbox"],
.pmf-registro__form-wrap .form-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  margin: 1px 0 0;
  margin-top: auto;
  margin-bottom: auto;
  border: 2px solid #57E84A;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background 0.2s;
}

.pmf-registro__form-wrap .js-form-type-checkbox input[type="checkbox"]:checked,
.pmf-registro__form-wrap .form-checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357E84A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 14px;
}

.pmf-registro__form-wrap .js-form-type-checkbox label,
.pmf-registro__form-wrap .form-type-checkbox label {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
  margin: 0;
}

.pmf-registro__form-wrap .js-form-type-checkbox label a,
.pmf-registro__form-wrap .form-type-checkbox label a {
  color: #fff;
  text-decoration: underline;
}

/* El checkbox de T&C es required pero no debe mostrar asterisco. */
.pmf-registro__form-wrap .js-form-type-checkbox .form-required::after,
.pmf-registro__form-wrap .form-type-checkbox .form-required::after {
  content: none;
}

/* Botón submit */
.pmf-registro__form-wrap .form-actions {
  margin-top: 8px;
}

/* Apariencia/hover en .pmf-cta (sección General); aquí solo tamaño/posición. */
.pmf-registro__form-wrap .pmf-register-form__submit,
.pmf-registro__form-wrap input[type="submit"] {
  width: 100%;
  padding: 16px;
}

/* Mensajes de error */
.pmf-registro__form-wrap .pmf-register-form__error {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
}

.pmf-registro__form-wrap .form-item--error-message {
  color: #ff6b6b;
  font-size: 12px;
  margin-top: 4px;
}

/* Estado de error: borde rojo en el campo (input, email, select, date).
   Cubre tanto la clase de core (.error) como la clase propia del formulario
   (.pmf-register-form__field--error) que se añade en validateForm(). */
.pmf-registro__form-wrap .form-text.error,
.pmf-registro__form-wrap .form-email.error,
.pmf-registro__form-wrap .form-select.error,
.pmf-registro__form-wrap input[type="date"].error,
.pmf-registro__form-wrap .form-text.pmf-register-form__field--error,
.pmf-registro__form-wrap .form-email.pmf-register-form__field--error,
.pmf-registro__form-wrap .form-select.pmf-register-form__field--error,
.pmf-registro__form-wrap input[type="date"].pmf-register-form__field--error {
  border: 1px solid #ff4d4d;
  box-shadow: 0 0 0 1px #ff4d4d;
}

.pmf-registro__form-wrap .form-text.error:focus,
.pmf-registro__form-wrap .form-email.error:focus,
.pmf-registro__form-wrap .form-select.error:focus,
.pmf-registro__form-wrap input[type="date"].error:focus,
.pmf-registro__form-wrap .form-text.pmf-register-form__field--error:focus,
.pmf-registro__form-wrap .form-email.pmf-register-form__field--error:focus,
.pmf-registro__form-wrap .form-select.pmf-register-form__field--error:focus,
.pmf-registro__form-wrap input[type="date"].pmf-register-form__field--error:focus {
  border-color: #ff4d4d;
}

/* Checkbox de T&C en estado de error: borde rojo. */
.pmf-registro__form-wrap .form-checkbox.error,
.pmf-registro__form-wrap .form-checkbox.pmf-register-form__field--error {
  border-color: #ff4d4d;
}

/* ---------- Responsive Registro ---------- */
@media (max-width: 768px) {
  .pmf-registro {
    padding: 56px 0 64px;
  }

  .pmf-registro__inner {
    padding: 28px 20px;
    border-radius: 0;
  }

  .pmf-registro__titulo-img {
    max-width: 100%;
  }

  .pmf-registro__eyebrow,
  .pmf-registro__desc,
  .pmf-registro__form-wrap {
    padding-left: 0;
    padding-right: 0;
  }

  .pmf-registro__eyebrow {
    font-size: 12px;
  }

  .pmf-registro__desc {
    font-size: 14px;
    line-height: 1.4;
  }

  .pmf-registro__form-wrap .form-item label {
    font-size: 14px;
  }

  .pmf-registro__form-wrap .form-text,
  .pmf-registro__form-wrap .form-email,
  .pmf-registro__form-wrap .form-select,
  .pmf-registro__form-wrap input[type="date"] {
    font-size: 16px;
    padding: 12px 14px;
  }
}

/* ---------- Modal de envío exitoso ---------- */
.pmf-registro__modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.pmf-registro__modal.is-open {
  display: flex;
}

.pmf-registro__modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.pmf-registro__modal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: #002412;
  border: 1px solid rgba(218, 182, 79, 0.5);
  border-radius: 16px;
  padding: 40px 32px 36px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
}

.pmf-registro__modal-close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.pmf-registro__modal-close:hover {
  color: #fff;
}

.pmf-registro__modal-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #57E84A;
  color: #14361c;
  font-size: 34px;
  line-height: 64px;
  font-weight: 700;
}

.pmf-registro__modal-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  color: #DAB64F;
  margin: 0 0 12px;
}

.pmf-registro__modal-text {
  color: rgba(255, 255, 255, 0.85);
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  margin: 0 0 28px;
}

/* Apariencia en .pmf-cta (sección General); aquí solo tamaño/posición. */
.pmf-registro__modal-btn {
  width: 100%;
  padding: 14px;
}