/* ================================================================
   Descargable template — boomit theme
   Solo aplica a body.page-template-descargable.

   Estrategia: SOLO agregamos lo que el template necesita (fondo
   violeta full-bleed, layout de la imagen, carrusel y popup).
   La tipografía y el menú heredan los estilos del tema — igual
   que /boomit-one-ai/ y /cac-latam/.
   ================================================================ */

/* ----------------------------------------------------------------
   1) Fondo violeta — desde top hasta el footer
   ---------------------------------------------------------------- */
body.page-template-descargable {
  background: #141150;
}

body.page-template-descargable .site-wrapper {
  background: #141150;
  position: relative;
  overflow: hidden;
}

/* Gradiente sutil arriba para que el menú lea siempre.
   El header está position:absolute (theme default) sobre este wrapper. */
body.page-template-descargable .site-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    rgba(8, 6, 36, 0.65) 0%,
    rgba(8, 6, 36, 0.30) 60%,
    rgba(8, 6, 36, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

/* Aurora decorativa */
body.page-template-descargable .site-wrapper::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(208, 64, 255, 0.18), rgba(20, 17, 80, 0));
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
}

/* ----------------------------------------------------------------
   2) Header — NO cambiamos posición (theme default = absolute).
      Solo:
      - logo blanco (porque el SVG del tema es coloreado y queda mal en violeta)
      - color rest del menú en blanco (sobre violeta, dark text es ilegible)
      - hover lo deja el tema: color #3d4ee4 + background #e9e8fc → chip lavanda
   ---------------------------------------------------------------- */

/* Logo blanco SOLO cuando .header-inn no está en estado hovered.
   Cuando hover abre un dropdown, el theme cambia automáticamente al
   darkLogo (coloreado) que se ve bien sobre el card blanco. NO usamos
   !important en los display: para que el theme pueda alternar logos. */
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .hd-logo img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

/* Color rest del menú TOP-LEVEL en blanco (sobre fondo violeta).
   :not(.hoveredMenu) → cuando se abre el dropdown, el theme paint
   `.header-inn` blanco y ya tiene reglas para poner los items en navy
   (rgb(36,40,77)) que se leen bien. Dejamos ganar al tema en ese caso. */
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .mainmenu nav#menu > ul > li > a {
  color: #ffffff;
}

/* Sticky DESACTIVADO en este template — el theme agrega `.stickyn` al
   header al hacer scroll y lo cambia a `position: fixed`. Lo revertimos
   a `position: absolute` para que el header se quede pegado arriba de
   la página y scrollee con el contenido (sin barra fija). */
body.page-template-descargable header.header-v8-alt.stickyn {
  position: absolute !important;
  top: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}

/* Asegurar que .header-inn en estado .stickyn vuelva a transparente
   (como en rest). Solo si no está hovered — durante el hover el theme
   sigue mostrando su white card. */
body.page-template-descargable header.header-v8-alt.stickyn .header-inn:not(.hoveredMenu) {
  background: transparent !important;
  box-shadow: none !important;
}

/* WPML language switcher legible sobre violeta — solo en estado no-hovered.
   En hovered el inn es blanco y necesita texto oscuro (lo deja el tema). */
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls a,
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls-current-language > a,
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .wpml-ls .wpml-ls-flag + span {
  color: #ffffff;
}

/* Hamburguesa visible — mismo patrón */
body.page-template-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .menuToggle img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

/* ----------------------------------------------------------------
   3) Hero — SIN overrides de tipografía. Hereda del tema:
      .subTitle: GalanoGrotesque-SemiBold 23px / verde-lima
      h1.h2:     GalanoGrotesque-Bold 46px / blanco
      h2.subtitle: Roboto 20px/34px / blanco
      .pink-btn: Poppins 18px violeta-azul, radius 60px, padding 17/34
   ---------------------------------------------------------------- */

/* Header es absolute (theme), entonces el hero arranca en y=0.
   Le metemos padding-top para que el texto quede debajo del header. */
section.dl-hero.hero-banner-n-24 {
  position: relative;
  z-index: 2;
  padding: 170px 0 60px;
  background: transparent;
}

.dl-hero .text {
  max-width: 600px;
}

/* No tocamos color/font del subTitle/h2/subtitle — los hereda del theme. */

/* ----------------------------------------------------------------
   4) Imagen del recurso — siempre <img>, centrada en la columna
   ---------------------------------------------------------------- */
.dl-hero .image.dl-hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  background: transparent !important;
}

.dl-hero .image.dl-hero-image img.full-image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 540px;
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.5));
  transform: rotate(-2deg);
  transition: transform 400ms ease;
}

.dl-hero .image.dl-hero-image img.full-image:hover {
  transform: rotate(0deg) scale(1.02);
}

/* ----------------------------------------------------------------
   5) Carrusel inferior — fila estática centrada, logos a color
   ---------------------------------------------------------------- */
.dl-logos {
  position: relative;
  z-index: 2;
  padding: 10px 0 80px;
}

.dl-logo-row {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
  gap: 24px 32px;
  max-width: 1080px;
}

.dl-logo-item {
  flex: 0 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  max-width: 180px;
  height: 56px;
  opacity: 0.92;
  transition: opacity 200ms ease, transform 200ms ease;
}

.dl-logo-item:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.dl-logo-item img {
  display: block;
  width: 100%;
  max-width: 150px;
  max-height: 56px;
  height: auto;
  object-fit: contain;
}

/* ----------------------------------------------------------------
   5b) Thank-you page (template thank-you-descargable.php)
       Misma estética violeta que descargable.php, card centrado.
       También aplica `body.page-template-descargable` arriba (mismo
       page-template wrapper para fondo + header + carrusel logos),
       pero el thank-you usa SU PROPIO body class. Las reglas que
       siguen targetean directamente `.dl-thankyou` así funcionan en
       cualquier page que use ese template.
   ---------------------------------------------------------------- */
body.page-template-thank-you-descargable {
  background: #141150;
}

body.page-template-thank-you-descargable .site-wrapper {
  background: #141150;
  position: relative;
  overflow: hidden;
}

body.page-template-thank-you-descargable .site-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220px;
  background: linear-gradient(
    to bottom,
    rgba(8, 6, 36, 0.65) 0%,
    rgba(8, 6, 36, 0.30) 60%,
    rgba(8, 6, 36, 0) 100%
  );
  z-index: 1;
  pointer-events: none;
}

body.page-template-thank-you-descargable .site-wrapper::after {
  content: "";
  position: absolute;
  top: -160px;
  right: -200px;
  width: 720px;
  height: 720px;
  background: radial-gradient(closest-side, rgba(208, 64, 255, 0.18), rgba(20, 17, 80, 0));
  z-index: 0;
  pointer-events: none;
  filter: blur(10px);
}

/* Reusamos las reglas de header / logo / menú / sticky del descargable
   en este template también. */
body.page-template-thank-you-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .hd-logo img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}
body.page-template-thank-you-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .mainmenu nav#menu > ul > li > a {
  color: #ffffff;
}
body.page-template-thank-you-descargable header.header-v8-alt.stickyn {
  position: absolute !important;
  top: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
          backdrop-filter: none !important;
}
body.page-template-thank-you-descargable header.header-v8-alt.stickyn .header-inn:not(.hoveredMenu) {
  background: transparent !important;
  box-shadow: none !important;
}
body.page-template-thank-you-descargable header.header-v8-alt .header-inn:not(.hoveredMenu) .menuToggle img {
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
}

/* Sección thank-you — replica el layout de /thank-you/ original
   (sin card; texto blanco directo sobre fondo violeta, mismas tipografías).
   Compacto: contenido define la altura, padding-bottom chico para que el
   footer arranque cerca del logo "boomit by Domus Global". */
.dl-thankyou {
  position: relative;
  z-index: 2;
  padding: 170px 0 40px;
  color: #ffffff;
  background: transparent;
  overflow: hidden;
}

/* Wave decorativo en la esquina inferior-izquierda (del theme — mismo
   asset que usa /thank-you/ original). Sutil, no compite con el texto. */
.dl-thankyou::before {
  content: "";
  position: absolute;
  bottom: -20px;
  left: -40px;
  width: 360px;
  height: 280px;
  background-image: url("https://boomit.us/wp-content/themes/boomit/assets/v2/top_left_image.png");
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
  filter: hue-rotate(8deg);
}

/* Aurora suave detrás del contenido */
.dl-thankyou::after {
  content: "";
  position: absolute;
  top: 30%;
  right: -180px;
  width: 600px;
  height: 600px;
  background: radial-gradient(closest-side, rgba(208, 64, 255, 0.18), rgba(20, 17, 80, 0));
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}

.dl-thankyou .container {
  position: relative;
  z-index: 1;
}

/* Icono check — small, lima/celeste como el original */
.dl-thankyou .dl-ty-icon {
  margin: 0 0 28px;
}

.dl-thankyou .dl-ty-icon img {
  width: 40px;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* Title h1 — GalanoGrotesque-Regular 48px white, mismo que el original */
.dl-thankyou .dl-ty-title {
  font-family: GalanoGrotesque-Regular, GalanoGrotesque-SemiBold, "Segoe UI", sans-serif;
  font-size: clamp(34px, 3.8vw, 48px);
  line-height: 1.15;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0;
}

/* h2 secundario — Roboto 48px, mismo size que el title (eyebrow style del theme) */
.dl-thankyou .dl-ty-h2 {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  margin: 0 0 28px;
  letter-spacing: 0;
}

/* Body p — 16px Roboto white */
.dl-thankyou .dl-ty-subtitle {
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #ffffff;
  margin: 0 auto 38px;
  max-width: 620px;
}

/* CTA "Descargar ebook" — usa .pink-btn del tema, le damos un poco más de aire */
.dl-thankyou .dl-ty-cta-wrap {
  margin: 8px 0 50px;
}

.dl-thankyou .dl-ty-cta.pink-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 17px 40px;
  font-size: 17px;
  text-decoration: none;
}

.dl-thankyou .dl-ty-cta-icon {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}

.dl-thankyou .dl-ty-cta-icon svg {
  width: 20px;
  height: 20px;
}

/* Logo "boomit by Domus Global" — mismo que el original al pie.
   Margen-top moderado, margen-bottom 0 para que arranque el footer cerca. */
.dl-thankyou .dl-ty-bottom-logo {
  margin: 24px 0 0;
}

.dl-thankyou .dl-ty-bottom-logo img {
  display: block;
  margin: 0 auto;
  max-width: 260px;
  width: 100%;
  height: auto;
}

/* Back link */
.dl-thankyou .dl-ty-back {
  display: inline-block;
  margin-top: 18px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 14px;
  text-decoration: none;
}

.dl-thankyou .dl-ty-back:hover {
  color: #ffffff;
  text-decoration: underline;
}

.dl-thankyou .dl-ty-fallback {
  color: rgba(255, 255, 255, 0.85);
  font-size: 16px;
  margin: 0 auto;
  max-width: 480px;
}

@media (max-width: 575px) {
  .dl-thankyou {
    padding: 140px 0 70px;
  }
  .dl-thankyou .dl-ty-icon img {
    width: 36px;
  }
  .dl-thankyou .dl-ty-h2 {
    margin-bottom: 22px;
  }
  .dl-thankyou .dl-ty-subtitle {
    font-size: 15px;
    margin-bottom: 28px;
  }
  .dl-thankyou .dl-ty-cta.pink-btn {
    width: 100%;
    justify-content: center;
  }
  .dl-thankyou .dl-ty-bottom-logo img {
    max-width: 220px;
  }
}

/* ----------------------------------------------------------------
   6) Popup (.dl-popup)
   ---------------------------------------------------------------- */
.dl-popup {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  margin: 0 !important;
  background: rgba(8, 6, 36, 0.78) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease-out, visibility 0s linear 200ms;
  box-sizing: border-box !important;
}

.dl-popup.act {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 200ms ease-out, visibility 0s;
}

.dl-popup .dl-card {
  position: relative;
  width: 100%;
  max-width: 540px;
  background: #ffffff;
  border-radius: 20px;
  padding: 0;
  margin: auto;
  color: #1a1a1a;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  box-sizing: border-box;
}

.dl-popup .dl-accent {
  width: 56px;
  height: 4px;
  margin: 28px auto 0;
  background: linear-gradient(90deg, #6b4cff 0%, #d040ff 100%);
  border-radius: 2px;
}

.dl-popup .dl-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  line-height: 1;
  text-align: center;
  font-size: 22px;
  color: #1a1a1a;
  background: #f1f0f5;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  user-select: none;
  z-index: 5;
  padding: 0;
  transition: background 150ms, color 150ms;
}

.dl-popup .dl-close:hover {
  background: #1a1a1a;
  color: #fff;
}

.dl-popup .dl-popup-title {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 6px;
  line-height: 1.3;
  color: #1a1a1a;
  text-align: center;
  padding: 14px 32px 0;
}

.dl-popup .dl-popup-subtitle {
  font-size: 13.5px;
  margin: 0;
  color: #6b6b78;
  text-align: center;
  padding: 0 32px;
  line-height: 1.45;
}

.dl-popup .dl-form-host {
  background: transparent;
  border-radius: 0;
  padding: 18px 28px 24px;
  color: #1a1a1a;
}

.dl-popup .dl-form-host iframe {
  width: 100% !important;
  border: 0 !important;
  display: block !important;
  min-height: 0 !important;
}

.dl-popup .dl-form-host form input[type="text"],
.dl-popup .dl-form-host form input[type="email"],
.dl-popup .dl-form-host form input[type="tel"],
.dl-popup .dl-form-host form select,
.dl-popup .dl-form-host form textarea {
  width: 100%;
  border: 1px solid #d8d8df;
  border-radius: 10px;
  padding: 11px 14px;
  font-size: 14px;
  background: #fff;
  color: #1a1a1a;
  margin-bottom: 12px;
  box-sizing: border-box;
  font-family: inherit;
}
.dl-popup .dl-form-host form button[type="submit"],
.dl-popup .dl-form-host form input[type="submit"] {
  width: 100%;
  background: linear-gradient(90deg, #6b4cff 0%, #4d3ddc 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
}

/* ----------------------------------------------------------------
   7) Defensa AOS — si AOS no inicializó, no ocultar el contenido
   ---------------------------------------------------------------- */
body.page-template-descargable [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ----------------------------------------------------------------
   8) Responsive
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  section.dl-hero.hero-banner-n-24 {
    padding: 130px 0 50px;
    text-align: center;
  }
  .dl-hero .text {
    max-width: 100%;
    margin: 0 auto;
  }
  .dl-hero-image-col {
    margin-top: 30px;
  }
  .dl-hero .image.dl-hero-image img.full-image {
    max-height: 380px;
    transform: rotate(0);
  }
  .dl-logos {
    padding: 0 0 60px;
  }
  .dl-logo-row {
    gap: 20px 24px;
    justify-content: center;
  }
  .dl-logo-item {
    height: 44px;
    min-width: 90px;
    max-width: 140px;
  }
  .dl-logo-item img {
    max-height: 44px;
  }
}

@media (max-width: 575px) {
  section.dl-hero.hero-banner-n-24 {
    padding: 120px 0 40px;
  }
  .dl-hero .text .pink-btn.dl-cta {
    width: 100%;
    text-align: center;
    display: block;
  }
  .dl-hero .image.dl-hero-image img.full-image {
    max-height: 280px;
  }
  .dl-popup {
    padding: 12px !important;
  }
  .dl-popup .dl-card {
    border-radius: 16px;
  }
  .dl-popup .dl-popup-title {
    font-size: 20px;
    padding: 12px 24px 0;
  }
  .dl-popup .dl-popup-subtitle {
    padding: 0 24px;
  }
  .dl-popup .dl-form-host {
    padding: 16px 22px 22px;
  }
}