/* @cle-edit */
/* redeploy: hero eyebrow override (v2) */
/*
 * Glue WP del DS v2 — reglas escritas a mano (NO generadas por tools/v2-port).
 * Replica con CSS las visibilidades que en la app Next resolvía el renderizado
 * condicional de React (isMobileScreen / isDesktopScreen), porque en PHP
 * renderizamos siempre todo el markup.
 */

/* Header.jsx: la nav móvil solo se montaba con isMobileScreen (< 768px) */
@media (min-width: 768px) {
  .v2-header__mainNavWrapper {
    display: none !important;
  }
}

/* React usaba size={isMobile ? 'default' : 'medium'} en los CTA de
   BenefitsList y HeroImageHome; en PHP renderizamos 'medium' fijo */
@media only screen and (max-width: 767px) {
  .v2-benefitslist__cta.v2-button__button--medium,
  .v2-heroimagehome__buttons .v2-button__button--medium {
    padding: 1.5rem 2.4rem;
    font-size: 1.6rem;
    border-radius: 5rem;
  }
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__icon,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__icon {
    width: 2rem;
    height: 2rem;
  }
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__label,
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__labelDuplicate,
  .v2-benefitslist__cta.v2-button__button--medium .v2-button__labelWrapper,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__label,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__labelDuplicate,
  .v2-heroimagehome__buttons .v2-button__button--medium .v2-button__labelWrapper {
    height: 1.8rem;
  }
}

/* TitleScrollReveal.module.scss no está compilado (sin sección propia):
   tipografía del título del CoursesCarousel (variante isSmall + font-quote) */
.v2-coursescarousel__title p {
  font: normal 500 3.2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media only screen and (min-width: 768px) {
  .v2-coursescarousel__title p {
    font-size: 6.8rem;
  }
}

/* FAQ del LMS: respuestas con listas largas — el cap original de 30rem
   las recortaría (la transición de apertura usa max-height) */
#lms-faq .v2-faq__itemContentOpen {
  max-height: 120rem;
}

/* BenefitsList en móvil: el grid apilado pasa a slider horizontal con
   scroll-snap (mismo formato que los carruseles) + hint de swipe. En desktop
   sigue siendo el grid de 3 columnas. Comportamiento por defecto del bloque. */
@media only screen and (max-width: 767px) {
  .v2-benefitslist__grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 1.6rem;
  }
  .v2-benefitslist__grid::-webkit-scrollbar {
    display: none;
  }
  .v2-benefitslist__grid > .v2-benefitslist__card {
    flex: 0 0 auto;
    width: 82%;
    scroll-snap-align: center;
  }
}

/* FAQ v2: el CSS compilado solo da tipografía a los <p> de la respuesta;
   las listas <ul>/<li> heredaban el tamaño del body (más grande). Las
   igualamos a los <p> para que se vean "como el resto". */
.v2-faq__itemAnswer ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.v2-faq__itemAnswer li {
  font: normal 400 1.6rem/1.5 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666;
}
@media only screen and (min-width: 768px) {
  .v2-faq__itemAnswer li {
    font-size: 1.8rem;
    line-height: 145%;
  }
}

/* TitleScrollReveal: segmentos e imagen inline del título del
   FeaturedFeaturesCarousel (la imagen se oculta en móvil, como isSmall) */
.v2-featfeatcarousel__textSegment {
  display: inline;
}
.v2-featfeatcarousel__inlineImage {
  display: inline-block;
  width: 5.6rem;
  height: 5.6rem;
  margin: 0 0.8rem;
  vertical-align: baseline;
  transform: translateY(0.45rem);
  object-fit: contain;
}
@media only screen and (max-width: 767px) {
  .v2-featfeatcarousel__inlineImage {
    display: none;
  }
}

/* Control de gastos: la descripción de cada paso (steps-row) queda muy alta y
   estrecha con el max-width por defecto (22rem). La ensanchamos para que se lea
   mejor. Scoped a esta sección para no alterar el resto de páginas. */
@media only screen and (min-width: 768px) {
  #cg-pasos .v2-stepsrow__stepDesc {
    max-width: 34rem;
  }
}


/* Header móvil sticky: fixed sin fondo de serie (igual que el original Next) →
   al hacer scroll se solapaba con el contenido. El JS del header añade
   .v2-header--scrolled a partir de 8px de scroll; solo aplica en móvil
   (en desktop el header es absolute y se va con la página). */
@media only screen and (max-width: 767px) {
  .v2-header__header {
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
  }
  .v2-header__header.v2-header--scrolled {
    background-color: #f5f5f7;
    box-shadow: 0 8px 24px rgba(37, 41, 46, 0.08);
  }
}

/* Selector de país (bola del mundo): el globo actúa como trigger del mega menú
   ("paises") manteniendo el tamaño del icon-button original; las columnas de
   países reutilizan la tipografía del mega menú con bandera delante. */
.v2-header__langTrigger {
  padding: 0;
  gap: 0.4rem;
}
.v2-header__langTrigger .v2-header__language svg {
  transition: transform 0.2s ease;
}
.v2-header__langTrigger.v2-header__megaTriggerActive .v2-header__language svg {
  transform: rotate(180deg);
}
.v2-megamenu__countryColumns {
  justify-content: flex-start;
  gap: 12rem;
}
.v2-megamenu__countryLink {
  display: flex;
  align-items: center;
  gap: 1rem;
  white-space: nowrap;
  flex-wrap: nowrap;
}
.v2-megamenu__countryFlag {
  /* los assets del ACF son iconos cuadrados 24×24 con esquinas redondeadas
     propias y transparencia → sin recorte ni radius extra */
  width: 2rem;
  height: 2rem;
  object-fit: contain;
  flex-shrink: 0;
}

/* CtaBreaker: el DS solo le da margen superior en desktop (28rem, ≥768px);
   en móvil quedaba pegado al bloque anterior. Se alinea con el ritmo de
   sección de las landings (12rem móvil). Sin !important: misma especificidad
   que la regla del DS y solo actúa donde el DS no define margen. */
@media (max-width: 767px) {
  .v2-ctabreaker__ctaBreaker {
    margin-top: 12rem;
  }
}

/* ============================================================
   Ajustes DS 30-jul-2026 (doc de diseño «Detalles diseño»)
   Tipografía y ritmo vertical del rediseño v2, solo desktop.
   Sin !important: v2-wp.css carga después de v2-components.css
   y gana por orden con la misma especificidad.
   ============================================================ */
@media only screen and (min-width: 768px) {
  /* 1 · Hero (titular izq + visual dcha): titular Inter Tight Medium 8rem
     (antes 11.4rem); el span PP NeueBit escala proporcional (17.6→12.4). */
  .v2-hero__title { font-size: 8rem; }
  .v2-hero__title span { font-size: 12.4rem; }

  /* 2 · Menú → hero: margen fijo (antes 30vh, dependía de la altura de
     ventana). Valor calibrado para dejar ~14rem del botón del header al
     elemento visual del hero. */
  .v2-hero__hero { margin-top: 21.1rem; }

  /* 3 · Ritmo vertical entre bloques: 20rem uniforme (los márgenes entre
     hermanos colapsan → hueco resultante 20rem). */
  .v2-quote__quote { margin: 20rem 0; }
  .v2-featmodcarousel__featuredModulesCarousel,
  .v2-featfeatcarousel__featuredFeaturesCarousel { margin: 20rem 0; }
  .v2-twocolsiconlist__twoColumnsIconList,
  .v2-twocolsimagetext__twoColumnsImageText { margin-top: 20rem; margin-bottom: 20rem; }
  .v2-contactform__contactForm { margin: 20rem 0; }
  .v2-faq__faq { margin: 20rem 0; }
  .v2-coursescarousel__coursesCarousel { margin: 20rem auto; }

  /* 5 · Textos con tinte al scroll (gris → oscuro): Inter Tight Medium 7rem,
     como el quote del DS (los títulos de carrusel iban a 5.2rem/600 y el
     heading del contact-form a 9.2rem/600). */
  .v2-featmodcarousel__title,
  .v2-featfeatcarousel__title,
  .v2-coursescarousel__title,
  .v2-contactform__benefitsHeading { font-size: 7rem; font-weight: 500; line-height: 1.2; }

  /* 7 · Titulares de las filas 2 col (title_html de columna): Inter Tight
     Semibold 5.2rem (antes 3.6rem). Los __headline centrados (9.2rem) y los
     bloques display con span NeueBit NO se tocan: otro patrón. */
  .v2-twocolsiconlist__title,
  .v2-twocolsimagetext__title { font-size: 5.2rem; font-weight: 600; line-height: 1.08; }

  /* 7b · Título del FAQ al mismo cuerpo que el resto de titulares (antes 5.5). */
  .v2-faq__title { font-size: 5.2rem; }
}

/* Hero: aire entre la descripción y el CTA (el DS no traía margen; 25-30px
   según diseño → 2.8rem). Sustituye al override scoped que llevaba RRHH. */
.v2-hero__cta { margin-top: 2.8rem; }