/* @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.
   StatsFigures se sumó el 21-oct-2026: le pasaba lo mismo y se había quedado
   fuera de la lista. Su «Prueba gratis» medía 210x66 con letra de 18px entre
   botones de 146x50 a 16px, y cantaba (firma electrónica, grandes empresas). */
@media only screen and (max-width: 767px) {
  .v2-benefitslist__cta.v2-button__button--medium,
  .v2-statsfigures__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-statsfigures__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-statsfigures__cta.v2-button__button--medium .v2-button__label,
  .v2-statsfigures__cta.v2-button__button--medium .v2-button__labelDuplicate,
  .v2-statsfigures__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;
}

/* Gestión de tareas: misma historia. En móvil la primera respuesta (la que
   nace abierta) mide 336px contra el cap de 300px, así que se veía cortada
   bajo el separador (rev. móvil, 20-oct-2026). El resto de la sección se queda
   entre 96px y 288px, así que 60rem da aire de sobra sin acelerar la apertura
   tanto como el 120rem del LMS. */
#ta-faq .v2-faq__itemContentOpen {
  max-height: 60rem;
}

/* CtaBreaker: el collage de fotos es decorativo (aria-hidden) pero iba en
   z-index 3 contra el 2 del bloque de texto, así que mientras la sección entra
   en pantalla —con las fotos todavía apiladas en el centro, antes de que el
   scroll las esparza— se pintaban por encima del titular y del botón. Medido en
   #in-cta-breaker: 7 de 18 puntos del titular tapados (rev. móvil, 20-oct-2026).
   El texto pasa por delante. Las fotos se siguen viendo alrededor y la
   animación de esparcido no cambia. */
.v2-ctabreaker__ctaBlock {
  z-index: 4;
}

/* Listas dentro del texto del formulario. El bloque las dejaba sin viñeta, sin
   sangría y sin separación entre ítems, así que un <ul> se leía como un párrafo
   más pegado al anterior: pasaba en Sesame IT con «Conoce Sesame IT en 30
   minutos / Resuelve tus dudas con un especialista / Sin compromiso»
   (rev. móvil, 20-oct-2026). */
.v2-contactform__body ul {
  margin: 1.6rem 0 0;
  padding-left: 2rem;
  list-style: disc;
}
.v2-contactform__body ul li + li {
  margin-top: 0.8rem;
}

/* Tipografía de móvil que se quedó por debajo de lo legible (rev. móvil,
   20-oct-2026). Tres casos que salían repetidos en media revisión: */
@media only screen and (max-width: 767px) {
  /* Las descripciones de las listas con icono iban a 1.2rem con interlineado 1.1
     —13,2px de línea para una letra de 12— al lado de títulos de 1.6rem. Salía
     un bloque gris apelotonado. 1.4rem/1.4 las despeja sin llegar al 1.6rem/1.5
     de escritorio, que reventaría el alto de las tarjetas. Afecta a gestor
     documental, base de datos, firma, comunicación interna, evaluación,
     vacaciones, tareas, nóminas, incidencias, reserva de salas, industria,
     asesorías y directores. */
  .v2-twocolsiconlist__itemDescription {
    font-size: 1.4rem;
    line-height: 1.4;
  }

  /* Las etiquetas de las tarjetas de carrusel iban a 1rem: 10px, por debajo del
     mínimo legible en un móvil. En LMS, comunicación interna, control horario,
     turnos, trabaja con nosotros y kiosco. */
  .v2-cardsslidercard__tag {
    font-size: 1.2rem;
  }

  /* El titular del formulario («¡Ponte en marcha! Prueba Sesame») iba a 2.6rem
     con interlineado 1, o sea las dos líneas tocándose, y el reparto dejaba
     «Sesame» sola en la última. El interlineado lo separa y el balance reparte
     las líneas en vez de empujar la última palabra sola. Sale en una veintena
     de páginas. */
  .v2-contactform__heading {
    line-height: 1.2;
    text-wrap: balance;
  }
}

/* Titulares: reparto equilibrado de las lineas en movil. A 390px una frase que en
   escritorio cae en dos lineas limpias se parte en tres y deja la ultima palabra
   sola («visual», «frenos», «llamamos.»). Con balance el navegador reparte las
   lineas en vez de empujar lo que sobra a la ultima. Sale en una quincena de
   paginas (rev. movil, 21-oct-2026).

   Dos cosas que NO cubre, y es esperable:
   - Los titulares con el revelado palabra a palabra (prensa, empleados): cada
     palabra va en su propio <span> y el navegador ya no ve una frase que repartir.
   - Los que llevan <br> forzado: balance reparte DENTRO de cada trozo, no quita
     el salto. Esos se arreglan uno a uno quitando el <br> en movil.

   .v2-contactform__heading ya lo lleva en su propio bloque, mas arriba. */
@media only screen and (max-width: 767px) {
  .v2-accordion__title,
  .v2-benefitslist__title,
  .v2-cardsslidercard__title,
  .v2-contactform__benefitsHeading,
  .v2-coursescarousel__title,
  .v2-ctabreaker__title,
  .v2-faq__title,
  .v2-featfeatcarousel__title,
  .v2-featmodcarousel__title,
  .v2-featuresheroimage__title,
  .v2-hero__title,
  .v2-heroimagehome__title,
  .v2-resourcesdownload__title,
  .v2-steppercards__title,
  .v2-stepperslider__title,
  .v2-stepsrow__title,
  .v2-tagcloud__title,
  .v2-textimage__title,
  .v2-textimagefull__title,
  .v2-twoblocks4060__title,
  .v2-twoblocks6040__title,
  .v2-twoblocks7030__title,
  .v2-twocolsiconlist__headline,
  .v2-twocolsiconlist__title,
  .v2-twocolsimagetext__headline,
  .v2-twocolsimagetext__title,
  .v2-twocolumn5050__title {
    text-wrap: balance;
  }
}

/* Textos de las tarjetas del carrusel de modulos: en movil iban a 1.2rem con
   interlineado 1, o sea 12px de letra y 12 de linea, en un bloque de titulo +
   descripcion que va todo seguido en la misma linea. Quedaba un renglon gris
   apelotonado e ilegible (rev. movil, 21-oct-2026). Mismo criterio que ya se
   aplico a las listas con icono: 1.4rem con aire. Desktop ya va a 1.6rem/1.5.
   Mismo caso en el carrusel de cursos, que es el que pinta las tarjetas de
   blog y de noticias (retail, prensa). */
@media only screen and (max-width: 767px) {
  .v2-featmodcarousel__cardTitle,
  .v2-featmodcarousel__cardDescription,
  .v2-coursescarousel__cardTitle,
  .v2-coursescarousel__cardTitleLink,
  .v2-coursescarousel__cardDescription,
  .v2-coursescarousel__cardLink {
    font-size: 1.4rem;
    line-height: 1.35;
  }
}

/* El reset de v2-base.css mete <strong> en el bloque que aplica `font: inherit`,
   asi que pierde la negrita. Los titulares que lo usan ya se la devuelven (o lo
   usan solo para el color azul), pero el cuerpo del formulario no: en el ATS los
   tres titulos de linea —«Publicaciones en principales portales.», «Filtros
   inteligentes con IA.», «Control del talento.»— salian con el mismo peso que su
   descripcion y no se distinguian (rev. movil, 21-oct-2026). Se acota aqui a
   proposito: en los titulares <strong> tinta de azul, y ponerles negrita encima
   cambiaria el diseno. */
.v2-contactform__body strong {
  font-weight: 600;
}

/* StepsRow: fuera el min-height de 100vh en movil. La regla base lo pone para
   que el bloque ocupe la pantalla entera y el contenido vaya centrado, y eso en
   escritorio esta bien. El bloque de movil ya cambia a align-items: flex-start y
   quita el padding, pero se dejo el min-height: con el contenido pegado arriba,
   lo que sobra de los 844px se queda en blanco. Medido en #clima-pasos: el
   contenido acaba en 745 y la seccion llega a 844, o sea 99px de cola vacia que
   se suman al hueco entre secciones (rev. movil, 21-oct-2026). Lo usan 31
   paginas. */
@media only screen and (max-width: 767px) {
  .v2-stepsrow__stepsRow {
    min-height: 0;
  }
}

/* Textos del bento a 9 y 10px en movil (rev. movil, 21-oct-2026). Se suben solo
   los que son CONTENIDO de la pagina —las pastillas y los subtitulos de cada
   bloque, del tipo «Asistente IA» o «Un copiloto en quien confiar.»— hasta los
   12px que ya se fijaron como minimo para las etiquetas de tarjeta.
   NO se tocan los que imitan interfaz dentro de los mockups: las marcas de hora
   del chat (cardsslidercard__metaLeft/metaRight), la duracion del video y el
   contador «1 / 4» de las stepper cards, ni el cardText de 9px, que es el chip
   «Revision completada casi al instante» de dentro de una tarjeta falsa. Ahi lo
   pequeno es el dibujo, y subirlo desmontaria la proporcion del mockup. */
@media only screen and (max-width: 767px) {
  .v2-twoblocks6040__pill,
  .v2-twoblocks6040__subtitle,
  .v2-twoblocks6040__secondSubtitle,
  .v2-twoblocks4060__subtitle {
    font-size: 1.2rem;
  }
}

/* Formularios de HubSpot: su hoja de estilos le da width:95% a .hs-input, y la
   fila del teléfono lleva esa clase en el propio contenedor (no solo en el
   input). Resultado: 342px contra los 360px del resto de campos, o sea el borde
   derecho 18px por dentro (rev. móvil, 20-oct-2026). El !important es para
   ganarle a la hoja de HubSpot, que no controlamos. */
.v2-hsform .hs-fieldtype-intl-phone {
  width: 100% !important;
}

/* FeaturedFeaturesCarousel: en móvil el título de la tarjeta iba a 1.6rem y su
   propia descripción a 1.8rem, o sea el título más pequeño que el texto que
   describe. En desktop ya son 2.4 contra 1.8; se recupera la jerarquía sin
   tocar el cuerpo, que a 1.8rem se lee bien. */
@media only screen and (max-width: 767px) {
  .v2-featfeatcarousel__cardTitle {
    font-size: 2rem;
  }
}

/* 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;
}

/* Desplegable de país propio. El globo ya no abre el mega menú (escritorio) ni
   el overlay entero (móvil): se puede cambiar de mercado sin desplegar la
   navegación, así que el selector necesita su propia caja. Cuelga de
   .v2-header__content, que ya es position:relative. */
.v2-header__langPanel {
  position: absolute;
  top: calc(100% + 1.2rem);
  right: 0;
  z-index: 14;
  background: #fff;
  border-radius: 1.6rem;
  box-shadow: 0 1.6rem 4.8rem rgba(31, 45, 82, 0.16);
  padding: 2rem;
  max-height: calc(100vh - 16rem);
  overflow-y: auto;
}
/* El grid de países viene dimensionado para el panelón del mega menú
   (4 columnas de 22rem, 102rem en total): aquí manda el contenido. Las dos
   cosas hay que soltarlas —el grid y el ancho fijo de cada columna—, porque
   con .v2-megamenu__linkColumn a 22rem la caja seguia midiendo el doble de
   lo que ocupan los paises. */
.v2-header__langPanel .v2-megamenu__linkColumns {
  width: auto;
  margin: 0;
  grid-template-columns: repeat(2, max-content);
  gap: 1.6rem 2rem;
}
.v2-header__langPanel .v2-megamenu__linkColumn {
  width: auto;
}
.v2-header__langTrigger.v2-header__langTriggerActive .v2-header__language svg {
  transform: rotate(180deg);
}
.v2-header__langTriggerMobile .v2-header__mobileOpenUtilityChevron svg {
  transition: transform 0.2s ease;
}
.v2-header__langTriggerMobile.v2-header__langTriggerActive .v2-header__mobileOpenUtilityChevron svg {
  transform: rotate(180deg);
}

@media (max-width: 767px) {
  .v2-header__langPanel {
    top: calc(100% + 1.6rem);
    max-width: calc(100vw - 4rem);
    max-height: calc(100vh - 12rem);
  }
}

/* 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 3.6rem. Los __headline centrados (9.2rem) y los bloques display
     con span NeueBit NO se tocan: otro patrón.
     REVERTIDO 9-sep-2026 (5.2rem → 3.6rem): el 30-jul se subieron de 3.6 a 5.2,
     y el doc de correcciones lo reclama en ~15 páginas —«revisar tamaños de los
     módulos text right y left, hacer coincidir con la referencia», y en ATS
     literal «los H1 de estos módulos son de un tamaño más grande al de la
     referencia». La web de referencia los tiene en 3.6rem/1.22, que es el valor
     que se restaura. Cuatro templates ya se lo bajaban scoped a 3.6rem
     (gotcha #20); esos overrides quedan redundantes, no molestan. */
  .v2-twocolsiconlist__title,
  .v2-twocolsimagetext__title { font-size: 3.6rem; font-weight: 600; line-height: 1.222; }

  /* 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; }

/* ============================================================
   Ajustes diseño 03-ago-2026 (doc «ajustes v2 software RRHH»)
   ============================================================ */
@media only screen and (min-width: 768px) {
  /* 1 · Hero: el eyebrow iba pegado al título (margin 0 del reset global)
     mientras el título deja 1.9rem con la descripción. Igualamos el ritmo:
     mismo aire eyebrow→título que título→texto. GLOBAL: afecta a todos los
     heroes v2 que llevan eyebrow (~30 templates). */
  .v2-hero__eyebrow { margin-bottom: 1.9rem; }
}

@media only screen and (min-width: 768px) {
  /* 8/11 · Claim grande unificado (revisión 3-ago, control-horario): mismo
     tamaño y peso que el claim de RRHH aprobado el 2-ago (quote a 9.2rem,
     line-height 1.05, peso 500). Afecta al __headline del two-columns-icon-list
     (iba a 600/1) y al benefitsHeading del contact-form (iba a 7rem del
     ajuste 30-jul). Los tramos de color (strong) no cambian. */
  .v2-twocolsiconlist__headline,
  .v2-twocolsimagetext__headline { font-weight: 500; line-height: 1.05; }
  .v2-contactform__benefitsHeading { font-size: 9.2rem; font-weight: 500; line-height: 1.05; }
}
/* El tramo azul del __headline heredaba la negrita del navegador (700): mismo
   peso que el resto del claim, como el benefitsHeading del form ya hacía. */
.v2-twocolsiconlist__headline strong,
.v2-twocolsimagetext__headline strong { font-weight: inherit; }
/* En móvil el headline heredaba grid-column-start: 2 y quedaba empujado a la
   derecha (parecía descentrado). A ancho completo y centrado de verdad. */
@media only screen and (max-width: calc(768px - 1px)) {
  .v2-twocolsiconlist__headline,
  .v2-twocolsimagetext__headline { grid-column: 1 / -1; text-align: center; }
}

/* Cta-link pegado a las cards cuando va justo después de un carrusel de
   features (rev. 4-ago): el DS dejaba 20rem de colapso entre ambos. Entre las
   dos secciones el componente emite su <script> (y su <style> cuando la página
   usa lotties), que también cuenta como hermano para `+` → hay que contemplar
   todo lo que puede colarse en medio.

   Rev. 18-sep: la cuenta progresiva de las cifras añadió un SEGUNDO <script> al
   componente (d39cd6d8, 17-sep) y con dos ya no casaba ninguna de las dos
   variantes que había: volvía el hueco del DS y el cta-link quedaba más cerca
   de la sección siguiente que de sus propias cards. Se generaliza a 0-4 tags
   intermedios para que no vuelva a romperse al añadir otro <script>. */
.v2-featfeatcarousel__featuredFeaturesCarousel:has(+ .v2-ctalink__ctaLink),
.v2-featfeatcarousel__featuredFeaturesCarousel:has(+ :is(script, style) + .v2-ctalink__ctaLink),
.v2-featfeatcarousel__featuredFeaturesCarousel:has(+ :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink),
.v2-featfeatcarousel__featuredFeaturesCarousel:has(+ :is(script, style) + :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink),
.v2-featfeatcarousel__featuredFeaturesCarousel:has(+ :is(script, style) + :is(script, style) + :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink) { margin-bottom: 3rem; }
.v2-featfeatcarousel__featuredFeaturesCarousel + .v2-ctalink__ctaLink,
.v2-featfeatcarousel__featuredFeaturesCarousel + :is(script, style) + .v2-ctalink__ctaLink,
.v2-featfeatcarousel__featuredFeaturesCarousel + :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink,
.v2-featfeatcarousel__featuredFeaturesCarousel + :is(script, style) + :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink,
.v2-featfeatcarousel__featuredFeaturesCarousel + :is(script, style) + :is(script, style) + :is(script, style) + :is(script, style) + .v2-ctalink__ctaLink { margin-top: 0; }

/* features-hero-image en viewports bajos (20-24"): con height:100vh fijo el
   contenido no cabía y los CTAs se salían por abajo. min-height conserva el
   look full-viewport y deja crecer la sección cuando el contenido lo necesita.
   El -14rem compensa el margin-top de 10rem del hero (gotcha #2) + 4rem de
   respiro: la sección acaba DENTRO del primer viewport (rev. 4-ago).

   Rev. sep-2026 (Joan, sobre-nosotros): el suelo iba en 72rem y en ventanas
   bajas la foto quedaba achatada. La sección lleva 5rem de padding arriba y
   abajo, así que la FOTO mide (min-height - 10rem) y su proporción sale de
   dividir eso por el ancho del contenedor (158rem):
     72rem → foto 62rem → 0.392   |   90rem → foto 80rem → 0.506
   El Figma la dibuja a 1580x891 → 0.564 (equivaldría a 99rem). Se sube a 90rem
   como término medio: mejora mucho la proporción sin que la sección se pase
   del primer viewport en portátiles.

   El selector cubre TAMBIÉN los heroes en 1ª posición que no usan id "hero"
   (ta-hero, ats-hero…): el mínimo es para el módulo cuando abre la página, no
   para las instancias que van más abajo (pa-webinar, rt-caso, me-lideres…).

   Rev. Joan 18-sep-2026: ese segundo selector iba por `main > .featuresHeroImage
   :first-of-type` y NO llegaba a ninguna página — el componente envuelve la
   <section> en un div `.v2-featuresheroimage__wrap`, así que la sección nunca es
   hija directa de <main>. Resultado: todo este bloque (incluido el aire con el
   menú de más abajo) solo se aplicaba a las páginas con id "hero", y Selección de
   personal (ats-hero) y Gestión de tareas (ta-hero) se quedaban con el titular a
   91px del menú y la sección acabando en 968px, fuera del pliegue de 900.
   Ahora se pasa por el wrap y se usa su modificador --cabecera, que el propio
   componente pone en su PRIMERA aparición de la página: es exactamente "el hero
   cuando abre la página", que es lo que este bloque quiere decir. */
@media only screen and (min-width: 768px) {
  #hero.v2-featuresheroimage__featuresHeroImage,
  main > .v2-featuresheroimage__wrap--cabecera > .v2-featuresheroimage__featuresHeroImage {
    height: auto;
    /* Antes: max(90rem, calc(100vh - 14rem)). El max() era un SUELO, no un tope,
       asi que en portatiles la seccion se pasaba del primer viewport: a 1440x800
       medía 745px + 83 de hueco del header = 828 > 800, y el borde de la foto y
       el "Scroll / Explora Sesame" quedaban por debajo del pliegue.
       Ahora la altura sigue al viewport: llena la pantalla cuando hay sitio y se
       encoge cuando no, sin pasarse nunca. Los 10rem son exactamente el hueco que
       deja el margin-top de la seccion para el header absoluto, asi que la seccion
       termina justo en el pliegue y el unico aire que queda bajo la foto son los
       5rem de padding propios del modulo, simetricos con los de arriba; ahi es
       donde cae el indicador de scroll. El contenido pone su propio suelo
       (~72rem en informes-rrhh), asi que por debajo de ~682px de alto de ventana
       ya no cabe, y eso no se puede arreglar sin tocar el cuerpo de texto. */
    min-height: calc(100vh - 8.2rem);
    /* Margenes proporcionados (rev. diseno 15-sep): la banda sobre la foto medía
       54px (10rem de margen + 5rem de padding, menos los 70 del menu) y la de
       abajo 25 -- mas del doble arriba. Subiendo la seccion a 8.2rem y llevando
       el padding inferior a 4.8rem, las dos quedan en ~39px a 1440x900, con la
       foto exactamente igual de alta. El margen superior se cambio tambien en
       las 37 plantillas que lo fijan por su cuenta. */
    padding-bottom: 4.8rem;
    /* Aire con el menú (rev. Joan sep-2026, informes-rrhh): el header creció ~4,4rem
       al subirle la fila de utilidades del rediseño, y el margin-top de 8.2rem que
       fijan las 37 plantillas dejaba el titular a 4px del menú. Se compensa aquí y no
       en el margen porque:
         - las plantillas fijan el margen por id (#hero, #ta-hero…) y ganarían a esta
           hoja pase lo que pase;
         - en MÓVIL el header no lleva esa fila, y mover el margen allí sacaría del
           primer viewport el «Scroll / Explora Sesame» (queja ya resuelta más abajo).
       5rem del DS + 4,4rem del header = la banda superior vuelve a los ~40px de la
       revisión del 15-sep, simétrica con el padding de abajo. La foto pierde esos
       4,4rem de alto; la sección sigue acabando en el pliegue. */
    padding-top: 9.4rem;
    /* El contenedor interno es `height:100%`, y un % NO resuelve contra un padre
       de altura auto: al pasar la sección de `height:100vh` a `height:auto` +
       min-height (4-ago) el contenedor dejó de estirarse y se quedó a la altura
       de su contenido. Como la FOTO es un absolute a `height:100%` DEL
       CONTENEDOR, en las páginas con hero de poco texto salía achatada y debajo
       quedaba un hueco vacío hasta completar el min-height (sobre-nosotros:
       foto de 543px dentro de una sección de 900px). Con flex el contenedor
       vuelve a ocupar toda la sección y la foto con él. */
    display: flex;
    flex-direction: column;
  }
  #hero.v2-featuresheroimage__featuresHeroImage > .v2-featuresheroimage__container,
  main > .v2-featuresheroimage__wrap--cabecera > .v2-featuresheroimage__featuresHeroImage > .v2-featuresheroimage__container {
    flex: 1 1 auto;
    /* el contenedor del DS trae `margin:auto`; los autos verticales absorberían
       el espacio libre y competirían con el flex-grow (el horizontal se queda,
       que es el que centra). */
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* La card de vídeo del hero foto SIEMPRE completa en el primer viewport: iba
   anclada al fondo de la sección, y cuando esta crece más que 100vh quedaba
   cortada por el pliegue. El max() la sube justo al borde visible cuando hace
   falta y la deja en su sitio original en pantallas grandes (rev. 4-ago). */
@media only screen and (min-width: 768px) {
  #hero .v2-featuresheroimage__ctaVideo,
  main > .v2-featuresheroimage__wrap--cabecera > .v2-featuresheroimage__featuresHeroImage .v2-featuresheroimage__ctaVideo {
    bottom: max(4.8rem, calc(100% - 100vh + 14.8rem));
  }
}

/* HeroImageHome (home nueva): el compile SCSS fusionó los overrides finales del
   módulo (título 8rem, span NeueBit 13rem, desc 1.8rem/63rem) en la regla base,
   dejándolos ANTES de las medias antiguas (11.4/17.6rem), que ganaban en desktop.
   Se restaura el orden de la referencia (rev. 4-ago, home). */
@media only screen and (min-width: 768px) {
  .v2-heroimagehome__title { font-size: 8rem; font-weight: 600; line-height: 97%; }
  .v2-heroimagehome__title span { font-size: 13rem; line-height: .76; }
  .v2-heroimagehome__description { font-size: 1.8rem; width: 63rem; line-height: 120%; }
}
@media only screen and (max-width: 767px) {
  /* 21-sep (rev. Celia): el titular baja de 4.2 a 3.6rem y el tramo de pixeles
     de 6.5 a 5.6 para que el bloque de texto deje sitio a los widgets. */
  .v2-heroimagehome__title { font-size: 3.6rem; font-weight: 500; }
  .v2-heroimagehome__title span { font-size: 5.6rem; line-height: .75; }
  .v2-heroimagehome__description { font-size: 1.5rem; }
}

/* Cards del featured-modules-carousel (rev. 7-ago + 10-ago, gestor-documental):
   título Inter Tight SEMIBOLD (600) y texto MEDIUM (500). La media de desktop del
   compile re-declaraba el shorthand font: con 400 y reseteaba el peso; además en
   móvil la descripción se quedaba en 400. Se aplica GLOBAL (todos los breakpoints)
   para que sea Semibold/Medium también en móvil. */
.v2-featmodcarousel__cardTitle { font-weight: 600; }
.v2-featmodcarousel__cardDescription { font-weight: 500; }

/* --- Rev. 10-ago (canal-de-denuncias; aplican GLOBAL a estos componentes) --- */

/* T5: slider de noticias del blog cuando es courses-carousel → texto Medium (500).
   El título ya es 600. Misma regla que featured-modules-carousel (Semibold/Medium). */
.v2-coursescarousel__cardDescription { font-weight: 500; }

/* T2 RETIRADO (peticion de diseno, 14-sep): los banners van con el titular en
   Medium (500) y el cuerpo en Regular (400), en todos. La regla T2 los subia un
   escalon cada uno (600 y 500) para alinearlos con el slider de noticias; al
   quitarla vuelven a mandar los valores propios de v2-components.css, que ya son
   los pedidos. Si se reabre el criterio del slider de noticias, hay que decidirlo
   con diseno antes de volver a ponerla. */

/* T3: menos aire entre los bloques de texto (título/descripción) de esa card. */
.v2-resourcesdownload__columnCopy { gap: 2rem; }

/* T4: menos margen entre el texto (intro) y los pasos del steps-row (era 16rem).
   Solo desktop; el móvil ya usa 4rem. */
@media only screen and (min-width: 768px) {
  .v2-stepsrow__container { gap: 6rem; }
}
@media (min-width: 2200px) {
  .v2-stepsrow__container { gap: 8rem; }
}

/* Header features-hero-image (rev. Joan 10-ago, people-analytics): menos aire entre
   los 3 textos (eyebrow/título/desc) y titular más compacto (interlineado). Global
   → todos los headers con este diseño. El gap se iguala al hero hermano hero.php
   (título→desc = margin-bottom 1.9rem) en vez de un valor a ojo; el line-height 1
   ya coincidía con trabaja-con-nosotros y los hero.php (1.0–1.02). */
@media only screen and (min-width: 768px) {
  .v2-featuresheroimage__content { gap: 1.9rem; }
}
.v2-featuresheroimage__title { line-height: 1; }

/* CtaBreaker (rev. Joan 10-ago): el TEXTO debe quedar centrado DENTRO del logo
   hexagonal, igual en TODAS las páginas. El padding asimétrico del container (18/8rem)
   bajaba el contenido ~5rem y el SVG del hexágono estaba centrado 8rem por encima →
   texto por debajo del logo. Se centra el contenido (padding simétrico, MISMA altura
   total = 26rem) y se alinean el SVG y las imágenes al mismo eje (50%). */
@media only screen and (min-width: 768px) {
  /* padding: el texto se centra en el hexágono, cuyo centro VISUAL queda un poco por
     debajo del centro geométrico del SVG → bajamos el contenido ~3rem (16/10, misma
     altura total 26rem) respecto al simétrico 13/13. Ajustar si hace falta más/menos. */
  .v2-ctabreaker__container { padding: 16rem 0 10rem; }
  .v2-ctabreaker__backgroundSvgWrapper { top: calc(50% - 37rem); }
  .v2-ctabreaker__medias { top: 50%; }
}
@media only screen and (min-width: 1440px) {
  .v2-ctabreaker__medias { top: 50%; }
}
@media only screen and (max-width: 767px) {
  /* Móvil: las imágenes de arriba quedaban muy pegadas al texto → subimos el cluster
     (rev. Joan 10-ago; base DS calc(50% - 8vw)). */
  .v2-ctabreaker__medias { top: calc(50% - 15vw); }
}

/* Hero (hero.php) en MÓVIL: la imagen usa un contenedor MUY alto (aspect 695/1206,
   pensado para mockups verticales); con imágenes apaisadas (dashboards) deja un hueco
   enorme arriba/abajo → "espaciados horribles". Que el contenedor se ajuste a la imagen
   (a su aspecto natural: los mockups verticales siguen igual). Global — ninguna página
   personaliza el hero en móvil (rev. Joan 10-ago). */
@media only screen and (max-width: 767px) {
  .v2-hero__imageWrapper { aspect-ratio: auto; }
  .v2-hero__imageWrapper .v2-hero__image { height: auto; }
  .v2-hero__imageWrapper .v2-hero__image img { height: auto !important; }
}

/* Hero (hero.php) en MÓVIL: ritmo uniforme dentro del bloque y botón centrado (rev.
   Joan 10-ago). El DS dejaba gaps desiguales y el botón a la izquierda.
   Round 1 de Diseño (17-sep-2026): el hueco único de 2.4rem baja a 1.6rem entre los
   textos, dejando 2.4rem antes del botón y antes de la imagen. 1.6rem es lo que ya
   usaban las 40 landings de features-hero-image, así que con esto las 58 landings v2
   comparten ritmo. Validado en LMS antes de generalizar: el hero encoge 79px y el
   mockup entra entero en un viewport de 812px («que la imagen pueda subir», Round 1).

   Ocho templates llevan márgenes pensados para ESCRITORIO en reglas de ID (#hero,
   #lms-hero) que están FUERA de toda media query, así que en móvil se sumaban a este
   gap:

       lms, software-control-horario ......... 44 / 54 / 85 px
       gestor-documental, gestion-turnos ..... 24 / 58 / 64 px
       reserva-de-salas, retribucion-flexible  24 / 56 / 64 px
       comunicacion-interna, ia-rrhh ......... 24 / 44 / 64 px
       software-recursos-humanos (limpia) .... 24 / 24 / 64 px

   De ahí el «los espacios del hero son distintos en cada landing» del Round 1. Se
   neutralizan aquí, en un punto, en vez de reescribir las ocho templates y arriesgar
   el escritorio de cada una: este bloque solo vive por debajo de 768px.

   El `section:not(#vp-hero)` hace dos cosas a la vez. Excluye el hero del POST de
   blog, que es el único con un diseño móvil propio y deliberado (imagen arriba por
   `order: -1`, textos a la izquierda) y que no debe alinearse con las landings. Y de
   paso sube la especificidad a (1,2,1), por encima del (1,1,0) de las reglas de ID de
   las templates, lo que evita tener que recurrir a !important y deja la puerta abierta
   a que cualquier landing declare otro ritmo en su propia @media (max-width: 767px). */
@media only screen and (max-width: 767px) {
  :root { --v2-hero-ritmo: 1.6rem; --v2-hero-ritmo-cta: 2.4rem; }
  .v2-hero__content { gap: var(--v2-hero-ritmo); }
  /* La ceja se quedaba alineada a la izquierda mientras titular, descripcion y
     boton van centrados en movil: el DS centra los tres pero no ella. */
  section:not(#vp-hero) .v2-hero__content > .v2-hero__eyebrow { margin: 0; text-align: center; }
  section:not(#vp-hero) .v2-hero__content > .v2-hero__title { margin-top: 0; margin-bottom: 0; }
  section:not(#vp-hero) .v2-hero__content > .v2-hero__description { margin-top: 0; margin-bottom: 0; }
  /* El wrapper del vídeo en móvil lleva su contenido oculto (.v2-hero__ctaVideo:
     display:none) pero el wrapper seguía en el flujo flex → el gap se aplicaba a ambos
     lados y DOBLABA el hueco descripción→botón. Se oculta el wrapper también. */
  .v2-hero__content > [data-v2-hero-cta] { display: none; }
  /* El botón respira algo más que el bloque de texto: sube del gap base hasta
     --v2-hero-ritmo-cta con la diferencia. */
  section:not(#vp-hero) .v2-hero__content > .v2-hero__cta {
    margin: calc(var(--v2-hero-ritmo-cta) - var(--v2-hero-ritmo)) auto 0;
    align-self: center;
  }
  section:not(#vp-hero) .v2-hero__imageWrapper { margin-top: var(--v2-hero-ritmo-cta); }
}

/* Widget de vídeo del hero (desktop): el DS pone margin-top 10vh, demasiado aire;
   se baja a 7vh (rev. Joan 10-ago, evaluacion-desempeño; canal ya iba a 7vh). Global. */
@media only screen and (min-width: 768px) {
  .v2-hero__ctaVideo { margin-top: 7vh; }
}

/* Emojis del copy (🔥 del trust note, etc.): WordPress los sustituye en cliente por
   <img class="emoji"> (wp-emoji-release.js) y el tamaño 1em lo daba el CSS inline de core
   ('wp-emoji-styles'), que header-v2.php tira abajo junto con el resto de estilos del
   theme antiguo → la imagen se pintaba a su tamaño natural (una llama gigante).
   Se replican aquí las reglas de core. Global: aplica a cualquier emoji de cualquier
   página v2. (bug visto en /v2-teletrabajo/, 2-sep-2026) */
img.emoji,
img.wp-smiley {
  display: inline !important;
  width: 1em !important;
  height: 1em !important;
  margin: 0 0.07em !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  vertical-align: -0.1em;
}

/* ============================================================
   Correcciones diseño 08-sep-2026 (doc de correcciones web nueva — LMS)
   ============================================================ */

/* Bullets de two-columns-icon-list en Inter Tight MEDIUM. El DS declara
   font-weight 500 en el bloque móvil, pero el shorthand `font:` del bloque
   desktop (min-width 768px) lo resetea a 400 → en desktop se veían Regular.
   Global: afecta a todas las filas de bullets v2. */
@media only screen and (min-width: 768px) {
  .v2-twocolsiconlist__itemTitle { font-weight: 500; }
}

/* Step carousel (featured-features-carousel): el número de paso y el título de la card
   en Inter Tight MEDIUM. Mismo bug que los bullets — el bloque móvil declara 500 y el
   shorthand `font:` del bloque desktop lo resetea a 400. El Figma marca Medium en los
   dos textos. Global. */
@media only screen and (min-width: 768px) {
  .v2-featfeatcarousel__step,
  .v2-featfeatcarousel__cardTitle { font-weight: 500; }
}

/* Titular «El software de Recursos Humanos con más de N clientes satisfechos» en
   Inter Tight SEMIBOLD. El doc de diseño lo reclama en una página tras otra, pero el
   módulo NO se toca: el DS deja `.v2-quote__text` en 500 (Medium) y ése es el peso
   correcto para el resto de quotes (así está en la web de referencia) — subirlo global
   pondría en Semibold todas las citas de todas las LP.
   Tres páginas ya lo llevaban scoped en su template (#gd/#ir/#srh-clientes); las demás
   heredaban 500 y por eso el doc las señala. Se centraliza aquí para que una página
   nueva con esta sección lo herede sin acordarse de copiar el override.
   OJO — #ats-clientes NO entra: ese id lleva otro copy («Más de N empresas eligen
   Sesame para contratar talento…») y el doc no pide Semibold para él. */
#bbdd-clientes .v2-quote__text,
#bh-clientes .v2-quote__text,
#ci-clientes .v2-quote__text,
#clima-clientes .v2-quote__text,
#gd-clientes .v2-quote__text,
#ir-clientes .v2-quote__text,
#srh-clientes .v2-quote__text,
#ta-clientes .v2-quote__text,
#tu-clientes .v2-quote__text {
  font-weight: 600;
}

/* ========================================================================
 * Correcciones diseño 11-sep-2026 — pesos y medidas del port
 *
 * Reglas detectadas por Diseño (Celia) al repasar las páginas contra el
 * Figma: el port del Next se dejó pesos de fuente en escritorio, y un par
 * de medidas de twoblocks4060 no respetaban la proporción del diseño.
 *
 * Se escribieron primero sobre v2-components.css, que es GENERADO: la
 * siguiente pasada de tools/v2-port/build-css.mjs se las habría llevado por
 * delante sin avisar. Viven aquí porque v2-wp.css se carga después
 * (header-v2.php:58-60) y sobrevive a las recompilaciones.
 * ====================================================================== */

@media only screen and (min-width: 768px) {
  /* Solo el peso: con el atajo `font:` el tamano volvia a 2.4rem y pisaba el
     `font-size: 0.8rem` de escritorio de la regla base, asi que el "NEW" del
     pie salia como un titular en vez de dentro de la pastilla amarilla. */
  .v2-footer__badge {
    font-weight: 700;
  }
  .v2-accordion__itemDescription {
    font: normal 500 2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-accordion__mobileDescription {
    font: normal 500 2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twocolumn5050__description {
    font: normal 500 2.4rem/1.33 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks6040__pill {
    font: normal 600 2.2rem/1 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks6040__title {
    font: normal 600 3.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks6040__cardText {
    font: normal 600 2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks6040__secondTitle {
    font: normal 600 3.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks4060__title {
    font: normal 600 3.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks4060__secondTitle span {
    font: normal 700 15.4rem/0.76 "PP NeueBit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks7030__title {
    font: normal 600 3.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twoblocks7030__value {
    font: normal 600 11.4rem/0.97 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-tagcloud__title {
    font: normal 500 3.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-coursescarousel__cardDetails {
    font: normal 500 1.6rem/1.5 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-coursescarousel__cardLink {
    font: normal 600 1.6rem/1.5 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twocolsimagetext__description {
    font: normal 500 2.4rem/1.33 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-twocolsiconlist__description {
    font: normal 500 2.4rem/1.33 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-faq__itemQuestion {
    font: normal 500 2.4rem/1.33 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-featuresheroimage__eyebrow {
    font: normal 500 2rem/1.2 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
  .v2-featuresheroimage__ctaLink {
    font: normal 600 2.2rem/1 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  }
}

.v2-twoblocks4060__secondTitle {
  width: 100%;
}

/* ========================================================================
 * Correcciones diseño 11-sep-2026 (2) — interlineados del port
 *
 * Mismo defecto que los pesos, pero con line-height: la regla base declara
 * un line-height explícito DESPUÉS del atajo `font:`, y la regla de
 * escritorio vuelve a declarar el atajo sin repetirlo. Resultado: el
 * interlineado del diseño en móvil y el del atajo (1.3 / 1.5 / 0.97, que es
 * relleno del generador) en escritorio.
 *
 * Se ve claro en que los valores de escritorio se repiten idénticos en todos
 * los componentes, mientras que los de la regla base varían uno a uno: 1,
 * 1.17, 1.2, 0.92… Esos son los del diseño.
 *
 * OJO: el valor de destino sale de lo que el propio CSS declara como
 * intencionado, NO de leer el Figma. El nodo de la home completa
 * (D7oaFdruGyRa8rdviESBbw 2701-2065) no se puede consultar: la respuesta
 * supera el límite de transporte del MCP y se corta. Si alguien contrasta
 * algún valor con el Figma y no cuadra, se corrige aquí y ya está.
 *
 * Solo line-height: no se tocan tamaño ni peso, que ya los fija el bloque
 * de arriba.
 * ====================================================================== */

@media only screen and (min-width: 768px) {
  .v2-twoblocks4060__title                  { line-height: 1; }
  .v2-twoblocks6040__title                  { line-height: 1; }
  .v2-twoblocks6040__secondTitle            { line-height: 1; }
  .v2-twoblocks7030__title                  { line-height: 1; }
  .v2-twoblocks7030__value                  { line-height: 1; }
  .v2-twoblocks4060__secondBlockListVersion { line-height: 1; }
  .v2-featmodcarousel__cardTitle            { line-height: 1; }
  .v2-featmodcarousel__cardDescription      { line-height: 1; }
  .v2-footer__logoText                      { line-height: 1; }
  .v2-steppercards__cardTitle               { line-height: 1.17; }
  .v2-steppercards__cardDescription         { line-height: 1.5; }
  .v2-accordion__mobileDescription          { line-height: 1.5; }
  .v2-tagcloud__title                       { line-height: 1.2; }
  .v2-featuresheroimage__ctaLink            { line-height: 1.25; }
  .v2-formcheckbox__text                    { line-height: 1.3; }
  .v2-benefitslist__cardDescription         { line-height: 1.4; }
  .v2-benefitslist__description             { line-height: 1.45; }
  .v2-scrollreveal__word                    { line-height: 0.92; }
}

/* ------------------------------------------------------------------------
 * Feedback Home 11-sep-2026 — «El V3.0 es demasiado grande y hace que haya
 * demasiada distancia entre líneas (ver Figma)»
 *
 * El span del titular de twocolumn5050 estaba a 17.6rem (176px) sobre un
 * titular de 9.2rem: ratio 1.91. En el Figma el badge mide la mitad de alto
 * que el texto del titular (27px de glifo frente a 53px), la misma
 * proporción que el «v 3.0» del módulo de workflows (35 frente a 70).
 *
 * A 5.4rem los dos «v 3.0» de la home quedan exactamente del mismo tamaño
 * (44.69px cada uno a 1440), y el titular pasa de 5 líneas a 4.
 * ---------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {
  .v2-twocolumn5050__title span { font-size: 5.4rem; }
}

/* ========================================================================
 * Ritmo vertical en móvil — 96px entre bloques (Home_feedback.docx)
 *
 * «Hay demasiado espacio entre bloques… en desktop está bien que respire
 * pero en mobile necesitamos economizar esos espacios. En el diseño que
 * hice de mobile para la home, usaba 96px de distancia.»
 *
 * Medido en sq1 a 375px antes de tocar nada, los huecos de la home eran
 * 120, 50, 60, 120, 60, 60, 100, 120, 100 y 120px: no había ritmo.
 *
 * Se normalizan a 9.6rem (=96px, la raíz son 10px en móvil) los márgenes
 * verticales de las raíces de sección v2. NO se tocan:
 *   · Los bloques encadenados con <spacer> (twoblocks 6040/4060/7030), que
 *     van pegados a propósito.
 *   · El quote pegado al menú de tabs (5rem) y el menú pegado a su
 *     contenido (6rem): son ritmo interno de un bloque, no separación
 *     entre bloques.
 *
 * OJO: esto cambia el móvil de TODAS las páginas v2, no solo la home, y
 * llegará a los 11 mercados cuando el equipo web lo propague. Decisión
 * tomada por Diseño el 11-sep-2026 sabiendo el alcance.
 *
 * Escritorio no se toca.
 *
 * ---------------------------------------------------------------------
 * AVISO AL EQUIPO WEB — Round 1 de Diseño (17-sep-2026)
 *
 * El Round 1 vuelve sobre este ritmo en nueve sitios («entre la tabla y
 * las FAQs hay demasiado espacio» en Precio, «demasiado espacio vacío
 * entre las cards y el párrafo» en Firma electrónica, «demasiado espacio
 * entre las cards y el texto» en Teletrabajo, etc.).
 *
 * EL VALOR NO SE HA TOCADO: sigue en 9.6rem, como se acordó el 11-sep.
 * Bajarlo habría deshecho una instrucción del propio revisor de seis días
 * antes, y además no era el problema.
 *
 * LO QUE SÍ SE HIZO: al medir se vio que la normalización del 11-sep NO
 * había llegado a nueve páginas. Llevaban su propio ritmo de 12rem escrito
 * antes de aquel acuerdo, en reglas por id que ganan por especificidad a
 * la regla global de aquí abajo:
 *
 *     casos-de-exito · contacta-ventas · canal-de-denuncias · contacto
 *     encuestas-laborales · sesame-vs-factorial · sobre-nosotros
 *     teletrabajo · trabaja-con-nosotros
 *
 * Medido en sq1 a 375px: Firma electrónica y Gestión de tareas daban 96 en
 * todos sus huecos; Teletrabajo y Sobre nosotros, 120 en todos. Y cinco de
 * esas nueve son justo páginas de las que el Round 1 dice «demasiado
 * espacio». Se han alineado a 9.6rem (commit de 17-sep), en una media
 * query de móvil dentro de cada template — no editando sus valores, que
 * varios no tienen contraparte en escritorio y habrían cambiado desktop.
 * Verificado después: Teletrabajo y Encuestas pasan de 120 a 96 en móvil y
 * escritorio queda idéntico.
 *
 * CERRADO también lo de Precio (Celia, 17-sep): sus dos huecos señalados
 * —tabla→FAQs y banner→texto— ya estaban a 96, el ritmo acordado, y no
 * hay valor atípico que corregir. Los mismos 96px se perciben grandes en
 * un sitio y bien en otro según lo que tienen alrededor (una tabla densa
 * seguida de un titular grande, por ejemplo). Se deja como está.
 *
 * Resumen para quien llegue nuevo: el ritmo de 9.6rem NO se toca, y ya no
 * queda nada pendiente sobre él del Round 1.
 * ---------------------------------------------------------------------
 * ====================================================================== */

@media only screen and (max-width: 767px) {
  .v2-heroimagehome__hero,
  .v2-textimage__textImage,
  .v2-quote__quote,
  .v2-accordion__accordion,
  .v2-stepperslider__stepperSlider,
  .v2-steppercards__stepperCards,
  .v2-cardscarousel__cardsCarousel,
  .v2-featmodcarousel__featuredModulesCarousel,
  .v2-featfeatcarousel__featuredFeaturesCarousel,
  .v2-coursescarousel__coursesCarousel,
  .v2-twocolumn5050__twoColumn5050,
  .v2-twocolsiconlist__twoColumnsIconList,
  .v2-benefitslist__benefitsList,
  .v2-stepsrow__stepsRow,
  .v2-resourcesdownload__section,
  .v2-faq__faq,
  .v2-ctabreaker__ctaBreaker,
  .v2-contactform__contactForm,
  .v2-videoshowcase__section,
  .v2-pixelinterlude__section,
  .v2-stepsshowcase__section,
  /* contenedores internos que en algunos bloques hacen de separacion */
  .v2-twocolumn5050__container,
  .v2-tagcloud__container,
  .v2-scrollreveal__section {
    margin-top: 9.6rem;
    margin-bottom: 9.6rem;
  }
}

/* ------------------------------------------------------------------------
 * Accordion en móvil: imagen → título → descripción → dots
 *
 * «Después de la imagen debe ir el título y la descripción, nunca los dots
 * de navegación, si no perdemos conexión entre la imagen y lo que estamos
 * explicando» (Home_feedback.docx).
 *
 * El markup ya va en ese orden; era el CSS, que ponía order:-1 en la fila
 * de dots y la subía por encima del título. Medido en sq1 a 375px: los dots
 * salían a 3439px y el título a 3523.
 * ---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .v2-accordion__dotsRow { order: 0; }
}

/* ------------------------------------------------------------------------
 * Footer en móvil: la línea de color se salía de la pantalla
 *
 * «Cuando haces scroll, a veces se mueve el canvas y el footer por ejemplo
 * se queda así. Debemos siempre mantener el mismo margen»
 * (Home_feedback.docx).
 *
 * La causa medida en sq1 a 375px: .v2-footer__footerLine llevaba
 * left:-1.5rem y width:calc(100% + 6rem), o sea 435px de ancho (de -15 a
 * 420) sobre una pantalla de 375. Su contenedor no tiene padding, así que
 * ese sangrado no sangraba nada: solo desbordaba 45px por la derecha.
 *
 * Y un desbordamiento horizontal permite que la página se desplace de lado
 * al hacer scroll, que es justo el «se mueve el canvas».
 *
 * En escritorio ya estaba bien (width:100%, left:0); se le da el mismo
 * tratamiento en móvil. Medido después: la línea va de 0 a 375 y el
 * scrollWidth del footer baja de 420 a 375.
 *
 * Queda un desbordamiento menor de 23px dentro de <main> que viene de otro
 * sitio (no del carrusel del accordion, ya comprobado). Pendiente.
 *
 * 18-sep-2026: la franja ya no se pinta — se quitó del componente del pie
 * (la página ya lleva una arriba). La regla se queda por si vuelve.
 * ---------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
  .v2-footer__footerLine {
    left: 0;
    width: 100%;
  }
}

/* ------------------------------------------------------------------------
 * Accordion: una columna más para el bloque de texto
 *
 * «5 formas de fichar. La más completa del mercado.» caía en tres líneas y
 * el diseño lo pide en dos. No es cuestión del titular sino de su columna:
 * el bloque de texto ocupa 4 de las 12 de la rejilla (414px a 1440) y ahí
 * no entra en dos líneas ni ocupándola entera.
 *
 * Con una columna más (526px a 1440) entra en dos, sin tocar el tamaño de
 * letra. Comprobado a 1024, 1280, 1440 y 1920: dos líneas en todos.
 *
 * Se mantiene el inicio en la columna 5, así que el borde izquierdo del
 * texto no se mueve: solo se le deja correr más hacia la derecha.
 * ---------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {
  .v2-accordion__content {
    grid-column: span 5 / span 5;
    grid-column-start: 5;
  }
}

/* ------------------------------------------------------------------------
 * Selectores: el elemento activo en semibold, el resto en regular
 *
 * Regla de diseño (14-sep-2026): en las listas de selección la opción
 * elegida va en semibold y las demás en regular. Ya lo cumplían el menú de
 * tabs de la home, las pestañas de precio y los pasos de cards-carousel;
 * estos tres tenían todos los elementos al mismo peso y solo se
 * distinguían por color.
 *
 * Se mantiene la diferencia de color que ya tenían: esto suma, no sustituye.
 * ---------------------------------------------------------------------- */

/* stepper-cards: «Ahorro / Más velocidad / Seguridad legal / Visibilidad» */
.v2-steppercards__step { font-weight: 400; }
.v2-steppercards__step.v2-steppercards__stepActive { font-weight: 600; }

/* two-blocks-6040: las píldoras del bloque de IA quedan TODAS en semibold.
   No son un selector: es una nube de etiquetas de capacidades donde una va
   destacada como ejemplo, y no responden al clic. La destacada se distingue
   por fondo y color, no por peso. (Diseño, 14-sep-2026.) */

/* two-blocks-4060: la lista de workflows */
.v2-twoblocks4060__secondBlockListItem { font-weight: 400; }
.v2-twoblocks4060__secondBlockListItem--active { font-weight: 600; }

/* ------------------------------------------------------------------------
 * stepper-cards: alargar la tarjeta para que se respete el padding inferior
 *
 * Las tarjetas miden 64rem de alto fijo en escritorio y el texto de la
 * tercera («Seguridad legal», que es la descripción más larga) llegaba a
 * 56px del borde inferior cuando el padding declarado son 74px: se comía
 * 19px de aire.
 *
 * Medido en sq1 a 1440 probando alturas: a 66rem quedan 72px (siguen
 * faltando 2) y a 67rem se alcanzan los 74 en las cuatro. Se deja en 68rem
 * para tener un rem de margen y que un retoque de copy no lo vuelva a
 * romper.
 *
 * Solo escritorio: en móvil la tarjeta no tiene altura fija.
 * ---------------------------------------------------------------------- */

@media only screen and (min-width: 768px) {
  .v2-steppercards__card { height: 68rem; }
}

/* ------------------------------------------------------------------------
 * stepper-cards: ensanchar la burbuja oscura
 *
 * Tiene ancho fijo (24.7rem) y el texto acababa a 8px del borde derecho,
 * mientras que por la izquierda el avatar deja 17px. Con el borde
 * redondeado de 3rem, esos 8px se leen como texto pegado al canto.
 *
 * A 26rem el hueco derecho pasa a 19px, en linea con los 17 de la
 * izquierda. Medido en sq1 a 1440.
 * ---------------------------------------------------------------------- */

.v2-steppercards__bubbleDark .v2-steppercards__bubbleInner { width: 26rem; }

/* ------------------------------------------------------------------------
 * Mosaico del hero: marquesina infinita hacia la derecha
 *
 * El JS del componente envuelve cada fila con su clon en una pista flex.
 * La pista se desplaza de -50% a 0: al terminar, el fotograma coincide con
 * el inicial, así que el bucle no tiene salto.
 *
 * El gap de la pista iguala al de la rejilla (1rem) para que la junta entre
 * las dos copias se vea igual que cualquier otra separación.
 * ---------------------------------------------------------------------- */

.v2-mosaic__mosaic {
  overflow-x: clip;   /* no recorta en vertical: las cards tienen sombra */
}

.v2-mosaic__pista {
  display: flex;
  gap: 1rem;
  width: max-content;
  will-change: transform;
  animation: v2MosaicDerecha 60s linear infinite;
}

@keyframes v2MosaicDerecha {
  /* El periodo del bucle es (ancho de una copia + gap), no el 50% de la
     pista: el 50% se queda medio gap corto y el bucle derivaría 4px por
     vuelta, que se ve como un salto. De ahí el -0.5rem. */
  from { transform: translateX(calc(-50% - 0.5rem)); }
  to   { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-mosaic__pista { animation: none; }
}

/* ------------------------------------------------------------------------
 * Mosaico del hero, variante tira: marquesina de una sola imagen
 *
 * La imagen exportada del Figma (nodo 4190-612) ya trae el contenido dos
 * veces. Se pinta dos veces y se desplaza el ancho de una: al terminar, el
 * fotograma coincide con el inicial y no hay costura. Sin gap entre copias,
 * así que el -50% es exacto.
 *
 * La versión de rejilla se cortaba por la derecha: la pista iba centrada y
 * al final del ciclo su borde derecho quedaba dentro de la ventana (medido
 * en sq1 a 1440: acababa en 688px con la ventana en 1425). Aquí la tira se
 * ancla a la izquierda, así que eso no puede pasar.
 * ---------------------------------------------------------------------- */

.v2-mosaic__mosaic--tira {
  /* Pegada al cuerpo del hero para que la tira suba y se vea lo maximo posible.
     El modulo trae 11.6rem del DS (96px a 1440), que dejaba 129px entre los
     botones y la tira. Con 1rem el hueco queda en 41px. */
  margin-top: 1rem;
  justify-content: start;
  overflow-x: clip;
  /* A sangre: se sale del contenedor para ocupar el ancho completo de la
     ventana, así la tira llega hasta los dos bordes. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.v2-mosaic__tira {
  display: flex;
  /* Mismo hueco que hay entre tarjetas dentro de la propia tira: medido en
     la imagen son 49px de sus 6736, que a tamaño de pantalla son ~24px. Sin
     esto las copias quedan pegadas, porque la imagen no lleva margen en sus
     bordes. */
  gap: 2.9rem;
  width: max-content;
  will-change: transform;
  animation: v2MosaicTira 60s linear infinite;
}

.v2-mosaic__tira img {
  display: block;
  /* 32rem (265px a 1440). Venia de 42rem, que igualaba el alto de la rejilla
     anterior (347px) y quedaba demasiado grande respecto al bloque de texto.
     Se probo atarlo al alto de ventana para que la tira entrase entera, pero
     en ventanas bajas la dejaba en 129px: demasiado pequena. Se descarta. */
  height: 32rem;
  width: auto;
  max-width: none;
}

@keyframes v2MosaicTira {
  /* Tres copias con gap: el periodo es (ancho de copia + gap), que sobre el
     ancho total de la pista es (100% + gap) / 3 —porque la pista mide
     3·copia + 2·gap—. Se recorre de -2 periodos a -1: un ciclo exacto, y en
     los dos extremos la tira sobresale por ambos lados de la ventana. */
  from { transform: translateX(calc(-2 * (100% + 2.9rem) / 3)); }
  to   { transform: translateX(calc(-1 * (100% + 2.9rem) / 3)); }
}

@media (prefers-reduced-motion: reduce) {
  .v2-mosaic__tira { animation: none; }
}

/* Stepper-slider: el texto va sobre la imagen y se quedaba a 4rem del borde
   inferior de la card, teniendo 16rem de margen a la izquierda. El margen de
   abajo nunca debe quedar por debajo del lateral, asi que se sube el bloque
   hasta igualarlos: 4rem los pone el padding-bottom de __panels y estos 12rem
   completan los 16rem. Afecta a las tres slides a la vez porque comparten
   contenedor. Solo en desktop: en movil el texto va debajo de la imagen, no
   encima, y ahi no hay margen que comparar. */
@media only screen and (min-width: 768px) {
  .v2-stepperslider__content { margin-bottom: 12rem; }
}

/* cards-slider-card: los bullets iban demasiado sueltos. En el Figma (nodo
   1021:1122) el pitch entre lineas es de 35px con una fuente de ~16,5px
   (altura de mayuscula medida: 12px) => ratio 2,12. En staging estaba en
   2,43 (pitch 32,2px con fuente de 13,24px), un 15% mas suelto.
   Con gap 1.8rem el pitch baja a 28,1px y el ratio queda en 2,12 exacto.
   Solo desktop: en movil el ratio ya es 1,70, mas apretado que el Figma. */
@media only screen and (min-width: 768px) {
  .v2-cardsslidercard__features { gap: 1.8rem; }
}

/* Bala del indicador de scroll: baja dentro de su pildora y se desvanece, en
   bucle. El recorrido es de 0.3rem a cada lado porque dentro de la pildora
   (2rem de alto, 1px de borde) solo hay 6,3px libres con la flecha de 1rem.
   En rem y no en px para que acompane a la escala fluida del sitio. */
@keyframes v2FhiScrollBala {
  0%   { transform: translateY(-0.3rem); opacity: 0; }
  20%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translateY(0.3rem); opacity: 0; }
}
.v2-featuresheroimage__scrollDownIcon {
  animation: v2FhiScrollBala 1.8s cubic-bezier(.45, 0, .2, 1) infinite;
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  .v2-featuresheroimage__scrollDownIcon { animation: none; }
}

/* El enlace secundario del hero iba a 2.2rem en desktop y el boton de al lado a
   1.6rem. Es el defecto de porte de siempre: la regla base deja 1.6rem y el
   `font:` del media query de 768px lo vuelve a fijar en 2.2rem. Se igualan al
   tamano del boton, que es la referencia. En movil ya coincidian (16px ambos). */
@media only screen and (min-width: 768px) {
  .v2-featuresheroimage__ctaLink { font-size: 1.6rem; }
}

/* Banners tipo "Relax" (text-image): el alto venia de un aspect-ratio fijo
   (1580/1053), asi que en portatiles la card salia mas alta que la ventana y no
   se le veian las cuatro esquinas a la vez, y en pantallas altas dejaba hueco.
   Pasa a seguir al viewport, igual que la cabecera: 8rem menos que el alto de
   ventana, que es la holgura que permite ver las esquinas. La foto va con
   object-fit cover, asi que recorta en vez de deformarse.
   Solo desktop: en movil el componente tiene su propia regla de ancho. */
@media only screen and (min-width: 768px) {
  .v2-textimage__container { aspect-ratio: auto; height: calc(100vh - 8rem); }
}

/* Hero de la home: el H1 se quedaba sin margen. A partir de 1024 el contenido
   pasa a 8 columnas de 12 (861px a 1440), y la primera linea del titular
   ("La plataforma mas avanzada") mide 816px con Inter Tight: entra por 45px.
   Con la tipografia de respaldo (Helvetica/Arial) esa misma linea mide 875px y
   ya no entra, asi que el titular se parte en 5 lineas. Eso es lo que ve quien
   abre la pagina antes de que cargue Inter Tight: SplitText congela el reparto
   al partir, y si lo hace con las metricas del respaldo, las lineas se quedan
   mal aunque la fuente llegue despues. No depende de la resolucion: el ratio
   entre cuerpo y contenedor es el mismo de 768px en adelante.
   Se devuelve el contenido a 10 columnas (1084px a 1440), que es lo que ya usa
   entre 768 y 1023. Margen de la primera linea: 268px con Inter Tight y 209px
   con el respaldo, asi que el reparto de 3 lineas aguanta con las dos. Sigue
   muy por debajo de los 1363px a los que "inteligencia" subiria a la segunda
   linea. El H1 no cambia de tamano ni de reparto: solo gana holgura.
   La descripcion se fija a su ancho actual (63rem) para que no se reflote. */
@media only screen and (min-width: 1024px) {
  #hero .v2-heroimagehome__content { grid-column: span 10 / span 10; grid-column-start: 2; }
  #hero .v2-heroimagehome__content [data-v2-hih-desc] { max-width: 63rem; }
}

/* Entrada de modulos: el titular (item 1) entra primero y el cuerpo (item 2)
   320ms despues, con fundido de 0 a 100 y 3.2rem de desplazamiento. Lo dispara
   el script del footer cuando cada texto entra en pantalla.
   El estado va en el PROPIO elemento, no en la seccion: hay modulos con varias
   filas por seccion y, con el estado arriba, las de abajo se animaban fuera de
   pantalla.
   Cada regla lleva UN solo selector a proposito: al encadenarlos, el
   calificador de estado solo aplica al primero y el cuerpo se queda visible.
   El estado oculto SOLO existe cuando el script ha puesto data-v2-entra, asi
   que sin JS el texto se ve siempre. Es la leccion del hero de la home, que
   arranca invisible y depende de su animacion para aparecer. */
[data-v2-entra-item][data-v2-entra="armado"] { opacity: 0; transform: translateY(3.2rem); }
/* Elementos con hijos absolutos: solo se les funde la opacidad. Con transform se
   convierten en bloque contenedor de esos hijos y los descolocan mientras dura
   la animacion (el widget del OTP en firma, las palabras de la placa inside).
   Lo marca el script del footer al armar. */
[data-v2-entra-item][data-v2-entra-plano][data-v2-entra="armado"] { transform: none; }
/* La transicion va SOLO en el estado de llegada. Si se declara en el elemento
   sin estado, al armar la seccion (nada -> armado) el texto hace un fundido de
   SALIDA de 0.7s antes de entrar: se ve el bloque, se desvanece y vuelve. */
[data-v2-entra-item][data-v2-entra="dentro"] {
  opacity: 1;
  transform: none;
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
/* --entra-retardo permite escalonar elementos hermanos (tarjetas de un
   carrusel, por ejemplo) sin tocar el resto del mecanismo. */
[data-v2-entra-item][data-v2-entra="dentro"] { transition-delay: var(--entra-retardo, 0s); }
[data-v2-entra-item="2"][data-v2-entra="dentro"] { transition-delay: calc(var(--entra-retardo, 0s) + .32s); }
@media (prefers-reduced-motion: reduce) {
  [data-v2-entra-item][data-v2-entra="dentro"] { transition: none; }
}

/* Hero de la home: el cuerpo aparecia antes que el resto.
   El titular y el eyebrow arrancan ocultos por CSS y los revela la animacion,
   pero la descripcion no tenia regla: se veia desde el primer pintado, y al
   arrancar la animacion GSAP la partia en lineas y las ocultaba, asi que el
   texto aparecia, desaparecia y volvia a entrar. Se oculta igual que los otros
   dos para que entre con ellos.
   OJO con el selector: .v2-heroimagehome__description es el DIV contenedor,
   pero la animacion revela el <p> de dentro ([data-v2-hih-desc]). Ocultando el
   contenedor, nadie lo vuelve a mostrar y la descripcion no aparece nunca. */
.v2-heroimagehome__description [data-v2-hih-desc] { opacity: 0; }

/* Barra de degradado de la cabecera, mas fina (peticion de diseno 15-sep).
   Venia de 1.7rem en desktop y 1.2rem en movil: 14px a 1440, 17px a 1920 y
   12px en movil. Pasa a algo menos de la mitad: 6,6px a 1440, 8px a 1920 y
   6px en movil.
   Va en el componente de cabecera, asi que afecta a TODAS las paginas v2 y
   llegara a los 11 dominios cuando el equipo web lo propague. */
.v2-header__headerLine { height: 0.6rem; }
@media only screen and (min-width: 768px) {
  .v2-header__headerLine { height: 0.8rem; }
}

/* Cabecera mas arriba (peticion de diseno 15-sep). El padding superior del DS
   son 6.5rem (54px a 1440), que dejaban 52px entre la barra de degradado y el
   logo. Con 3.5rem el hueco queda en 27px y el alto del header baja de 94 a 70.
   Solo desktop: en movil el padding del DS es otro (3.6rem arriba, 2.4 abajo).
   OJO: el header es absolute, asi que esto no mueve el contenido de la pagina,
   pero SI cambia el aire aparente bajo el menu en los heroes que se midieron
   contra el borde inferior del header (en la home, de 63 a 87px). */
@media only screen and (min-width: 768px) {
  .v2-header__header { padding: 3.5rem 0 0; }
}

/* LMS · el mockup del movil tiene que apoyar en el borde inferior del bloque.
   El contenedor de la animacion (.lottieRoot) centra su contenido y lleva 2rem de
   padding, asi que quedaban 33px de aire por debajo del movil y parecia flotando.
   La imagen a la que sustituye iba a inset:0, sin ese aire. Se quita solo el
   padding de abajo y se ancla al fondo: el hueco superior se mantiene.
   Acotado a #lms-mobile: el resto de paginas que usan resources-download siguen
   con la animacion centrada. */
#lms-mobile .v2-resourcesdownload__lottieRoot {
  padding-bottom: 0;
  align-items: flex-end;
}

/* Margen lateral en pantallas grandes (peticion de diseno 16-sep-2026).
   El contenedor del DS se congela en 1580px fijos a partir de 1640, asi que todo
   el ancho extra de la ventana se convierte en margen: medido en sq1, a 1920 (24")
   quedan 163px por lado (8,5% de la ventana) y a 2560 (27") se van a 483px (19%),
   casi el triple, y la pagina se ve como una columna estrecha en medio.
   A partir de 1921 el contenedor pasa a un porcentaje que mantiene esa misma
   proporcion del 24": 82,94% deja los mismos 8,5% de margen a cada lado y empalma
   exactamente con los 1580px en 1920, sin salto. A 2560 el contenedor pasa de 1580
   a 2111 y el margen baja de 483 a 217.
   El tope de 2200px es para los ultrapanoramicos: por encima de ~2650 de ventana el
   cuerpo de texto (el rem se congela en 10px a partir de 1580) se quedaria con lineas
   demasiado largas. */
@media only screen and (min-width: 1921px) {
  .v2-container__container { width: 82.94%; max-width: 2200px; }
}

/* Hero de la home (peticion de diseno 16 y 17-sep-2026), dos arreglos:

   1) El rabo de la "g" de "inteligencia" salia cortado en plano.
      El titular en degradado se pinta con background-clip:text, asi que del
      glifo solo se ve la parte que cae DENTRO de la caja de fondo del
      elemento. La caja la fija el line-height, que aqui es .75 en movil y .76
      en escritorio: se queda muy por encima del descendente de la "g", que
      cae fuera y no se pinta. No es que se recorte, es que ahi no hay fondo.
      Se alarga la caja por abajo con padding y se descuenta el mismo valor en
      margen negativo, asi que el maquetado no se mueve ni un pixel. Va en el
      <span> y tambien en cada letra, porque cuando entra la animacion es
      SplitText quien pinta el degradado letra a letra (.hero-span-char) y el
      span se queda sin fondo.
      SIN media query a proposito: el line-height apretado es el mismo en los
      dos breakpoints, y con la regla solo en movil el corte seguia viendose en
      escritorio (reportado el 17-sep con captura de 1920). En em, asi que
      acompana al cuerpo en toda la escala fluida.

   2) Poco aire entre "Ver Demo" y la tira de tarjetas, solo en movil.
      La tira lleva margin-top:1rem, medida para desktop (41px, donde el rem
      es fluido). En movil el rem esta clavado a 10px, asi que ese mismo 1rem
      son 10px justos y los botones quedan pegados a las tarjetas. Se sube a
      4rem, solo por debajo de 768. */
.v2-heroimagehome__title span,
.v2-heroimagehome__title span .hero-span-char {
  padding-bottom: .26em;
  margin-bottom: -.26em;
}
@media only screen and (max-width: 767px) {
  .v2-heroimagehome__container .v2-mosaic__mosaic--tira { margin-top: 4rem; }
}

/* cards-carousel: el titular, mas cerca de la card (peticion de diseno 17-sep).
   El DS le da 24rem de margen inferior al bloque de texto en desktop, que sumados
   a los 4rem de gap del grid dejaban 174px entre el titular y la card, medido igual
   en las cuatro paginas que se comprobaron (LMS, turnos, Sesame Intelligence y
   studio). Con eso el modulo se iba a 990px de alto visual y no entraba en una
   ventana de 900. Con 8rem se recortan 132px: quedan 41px de aire y el modulo baja
   a 858, que si entra. Movil no se toca (ahi el DS ya deja 4rem). */
@media only screen and (min-width: 768px) {
  .v2-cardscarousel__textContent { margin-bottom: 8rem; }
}

/* Home en movil (peticion de diseno 16-sep-2026), dos arreglos.

   1) Las fotos de las cards de funcionalidades salian recortadas.
      La caja de la imagen mide 32rem x 41rem FIJOS en movil, y la imagen va a
      object-fit:cover. Las exportaciones del Figma no tienen todas la misma
      proporcion (730x822, 980x832 y 1270x826), asi que a las apaisadas se les
      comia media imagen por los lados: en «Software de seleccion de personal»
      se perdian el rotulo «Tu equipo» y «Product team», que es justo lo que la
      card ensena. Medido en sq1 a 390px: las cuatro cajas salian a 320x410
      dijese lo que dijese la imagen.
      En escritorio la caja YA toma la proporcion de la imagen
      (--card-media-ratio, que el componente imprime en el style); en movil se
      quedo con el alto fijo. Se le da el mismo trato: ancho el de la card y
      alto el que pida la proporcion (320x360, 320x365, 320x208 y 320x272).
      De paso cuadran los lotties: van colocados en % de la caja, asi que solo
      caen sobre el widget cuando la imagen ocupa la caja exacta. Con el
      recorte estaban descuadrados en movil en todas las pestanas.

   2) Aire muerto entre «5 formas de fichar» y el bloque siguiente.
      El texto del slider reserva 28rem fijos para que no salte al cambiar de
      tarjeta, pero las cinco descripciones ocupan 194px: sobraban 86px, que se
      sumaban a los 96 del ritmo de seccion y dejaban 182px de hueco. Se pasa a
      alto automatico con un suelo de 20rem (sigue sin saltar: las cinco miden
      lo mismo) y se quita el margen inferior de los bullets, que al ser lo
      ultimo de la seccion solo sumaba. El hueco queda en 102px, que es el
      ritmo de 9.6rem acordado el 11-sep. El ritmo NO se toca. */
@media only screen and (max-width: 767px) {
  .v2-featmodcarousel__media { height: auto; aspect-ratio: var(--card-media-ratio, 4/5); }
  .v2-accordion__mobileContent { height: auto; min-height: 20rem; }
  .v2-accordion__dotsRow { margin-bottom: 0; }
}

/* Texto introductorio → cards de los sliders, en MÓVIL (Round 1 · T2, 17-sep-2026).
   «El espacio entre el texto y las cards de los sliders debe ser el mismo en todas»:
   aparece en ~25 de las 30 páginas del Round 1.

   El hueco NO lo pone el texto ni las cards, sino el wrapper de cabecera de cada
   componente (__header / __textContent) con su margin-bottom. Medido en sq1 a 375px,
   cada componente eligió el suyo:

       featmodcarousel .... 3rem
       cardscarousel ...... 4rem  ┐
       coursescarousel .... 4rem  ├─ la moda: tres de seis ya estaban aquí
       benefitslist ....... 4rem  ┘
       statsfigures ....... 5.6rem
       featfeatcarousel ... 7rem

   Ojo con la unidad: el font-size raíz del DS es FLUIDO (10px a 375, 8.28px a 1440,
   10px otra vez a 1920), así que medir en px a un ancho concreto engaña. El rem es la
   unidad del diseño y es la que se compara arriba.

   A diferencia del hero, aquí NO hay fugas por template: cada componente es constante
   página a página. Lo que variaba era de un componente a otro, que es lo que el
   revisor percibe al bajar por una misma página cruzándose con tres sliders distintos.

   En DESKTOP el grupo estaba en 3 / 5.6 / 7 / 7.2 / 8 / 8.2rem y se unifica en 7rem,
   que es el valor que featfeatcarousel ya tenía y el centro del grupo.

   stepperslider queda fuera a propósito: no tiene cabecera, su layout es un
   column-reverse donde el texto y el slider van invertidos. */
:root { --v2-slider-ritmo: 7rem; }
@media only screen and (max-width: 767px) {
  :root { --v2-slider-ritmo: 4rem; }
}

/* `div.` en featfeat para igualar al `div.v2-featfeatcarousel__header` del CSS
   generado: a igual especificidad gana v2-wp.css, que carga después (header-v2.php).

   statsfigures no aparece en esta lista: su margen lo fija el propio componente con
   #<id> .v2-statsfigures__header (1,1,0), que ningún global puede ganar. Allí se
   cambió el valor por var(--v2-slider-ritmo, 56px), así que hereda el token en los
   dos breakpoints sin necesidad de estar aquí. */
div.v2-featfeatcarousel__header,
.v2-featmodcarousel__header,
.v2-coursescarousel__header,
.v2-benefitslist__header { margin-bottom: var(--v2-slider-ritmo); }

/* EXCEPCIÓN — cardscarousel en desktop se queda en los 8rem que le puso la petición
   de diseño del 17-sep (bloque «el titular, mas cerca de la card», más arriba en este
   fichero): ahí se midió que con 24rem el módulo se iba a 990px de alto y no entraba
   en una ventana de 900, y que 8rem lo dejan en 858. Bajarlo a 7 no rompería esa
   restricción, pero deshacer una decisión medida del mismo día no es cosa de este
   cambio.

   OJO con el porqué de la media query: los 8rem viven en una @media (min-width:768px)
   que está ANTES en este fichero, y las media queries NO suman especificidad. Si
   cardscarousel fuese en la lista de arriba —sin envolver, al final del fichero—
   ganaría por orden de aparición y se llevaría por delante esos 8rem. Acotándolo a
   móvil, en desktop no hay competencia y manda la regla de arriba. */
@media only screen and (max-width: 767px) {
  .v2-cardscarousel__textContent { margin-bottom: var(--v2-slider-ritmo); }
}

/* Foto de los bloques foto+texto con margen lateral en MÓVIL (Round 1 · T5).
   «Todos estos bloques de foto y texto, necesitamos que la foto tenga margen por los
   lados» — repetido en ~15 de las 30 páginas.

   El DS saca la foto a sangre a propósito por debajo de 768: el contenedor ya deja
   1.5rem a cada lado, pero la imagen los anula con
   `width: calc(100% + 3.2rem); margin-left: -1.6rem` (v2-components.css), y a partir
   de 768 lo revierte. Medido en Canal de denuncias a 375px: el wrapper queda en
   15/15 px y la imagen en -1/-1, o sea pegada al borde.

   Se quita el sangrado y se añade el mismo radio que ya usa en móvil el componente
   hermano, two-columns-icon-list (1.4rem, frente a los 3.6rem de escritorio). Sin el
   radio la foto quedaría con márgenes pero con las esquinas en pico, distinta de
   todas las demás: a sangre el pico no se ve, con margen sí.

   two-columns-icon-list no necesita nada, ya iba a 15/15. Y text-image se queda como
   está a propósito: su imageWrapper es `position: absolute` al 100%, una capa de
   FONDO detrás del texto, no la foto de un bloque. */
@media only screen and (max-width: 767px) {
  .v2-twocolsimagetext__image {
    width: 100%;
    margin-left: 0;
    border-radius: 1.4rem;
  }
}

/* La foto de estos dos bloques es un <img> en línea, así que debajo quedaba el hueco
   de la línea base: 6,41px a 1440 de ancho. Es dinero de nadie salvo por una cosa —
   'image_lottie' y 'overlay' se colocan en % del imageWrapper, y el wrapper medía esos
   6,41px MÁS que la foto. Como los porcentajes se calculan midiendo el widget dentro
   del .webp, la animación caía siempre baja, y tanto más baja cuanto más abajo estuviera
   el widget: hueco × y%. Con el widget al 90% son 5,8px, suficiente para ver la tarjeta
   del lottie y la horneada de la foto a la vez (lo que Diseño llamó «solapes», 24-sep).
   Poniendo la foto en block el wrapper vuelve a medir lo que la foto y los porcentajes
   caen donde se midieron. Afecta a las ~28 plantillas v2 que usan estos dos bloques:
   todas ganan el encaje y pierden 6px de aire muerto bajo la foto. */
.v2-twocolsiconlist__image img,
.v2-twocolsimagetext__image img {
  display: block;
}

/* El hero tenía exactamente lo mismo, y no se vio en su día porque la foto del hero
   suele ir sola: 5,98px de hueco de línea base a 1280 (wrapper 392,66 frente a foto
   386,68). En cuanto el hero lleva 'image_lottie' el wrapper es la caja de la
   animación, el SVG centra su dibujo dentro y el arte cae 3px por debajo de la foto
   a la que releva — justo en el límite de aceptación. Con la foto en block el
   wrapper vuelve a medir lo que la foto y el desvío es 0. Medido en Comunicación
   Interna y Clima Laboral; mismo arreglo y misma razón que el bloque de arriba. */
.v2-hero__image img {
  display: block;
}

/* Swipe lateral de los carruseles que arrastran con pointer (Round 1 · T3).
   «El swipe lateral se atasca: al arrastrar en horizontal se mueve el canvas en
   vertical» — en ~20 de las 30 páginas, y además «si no se soluciona, deberíamos
   poder ver la siguiente al clicar encima de la foto».

   Causa: courses / featfeat / featmod mueven el track con pointerdown + pointermove +
   setPointerCapture, pero en toda la capa v2 no había NI UN touch-action declarado.
   Sin él el navegador se queda el gesto por defecto: en cuanto detecta componente
   vertical empieza a hacer scroll de página y dispara pointercancel, que en estos
   componentes llama a finalizeDrag. El arrastre se corta a medias — eso es el
   «se atasca», y es también por lo que a veces hay que insistir varias veces.

   `pan-y` reparte el gesto: el eje vertical sigue siendo del navegador (deslizar
   hacia abajo sobre el carrusel sigue haciendo scroll de la página, que es lo que la
   gente espera), y el horizontal queda para el JS, que ya no recibe pointercancel.

   Solo estos tres: statsfigures y stepsrow usan scroll nativo, donde el navegador ya
   resuelve bien la direccion y tocar touch-action solo podria empeorarlo. */
.v2-coursescarousel__track,
.v2-featfeatcarousel__track,
.v2-featmodcarousel__track {
  touch-action: pan-y;
}

/* Rollover del botón negro (Round 1 · T7). «Los botones negros deberían tener el
   mismo estilo de rollover que el de la sección personaliza las preguntas» y
   «revisar que todos los rollovers tengan el mismo rollover».

   La animación de etiqueta deslizante ya era común a todos los botones con texto (los
   únicos sin ella son los de solo icono, que no tienen etiqueta que deslizar). Lo que
   no encajaba era el color: --primary OSCURECE al pasar por encima (#415bff → #2f48e5)
   mientras --default SALTABA a azul (#25292e → #415bff), que es un cambio de color, no
   un estado del mismo botón. Ahora el negro también oscurece.

   Aviso para quien lo revise: sobre un casi-negro el oscurecimiento se nota bastante
   menos que sobre el azul. Se ha ido a un salto algo mayor que el de --primary (que
   baja ~14% de luminosidad) justo por eso. Si se queda corto o largo, es este único
   valor. El DS solo tenía #25292e y #000000, no había un negro intermedio que
   reutilizar.

   ⚠️ Los :not() NO son opcionales. `v2_button()` (components/v2/v2-helpers.php) pone
   por defecto 'default' TANTO en $variant como en $size, así que emite la MISMA clase
   `v2-button__button--default` para las dos cosas: un botón azul es
   `--primary --default`, donde ese --default es el TAMAÑO. Sin los :not(), esta regla
   —que vive en v2-wp.css y por tanto carga después de la de --primary— le ganaría por
   orden y pintaría de casi-negro el hover de TODOS los botones azules del sitio.
   Los :not() la dejan solo en los que de verdad son negros. */
:root { --v2-btn-oscuro-hover: #15181c; }
@media (hover: hover) and (pointer: fine) {
  .v2-button__button--default:hover:hover:not(:disabled):not(.v2-button__button--primary):not(.v2-button__button--secondary) {
    background-color: var(--v2-btn-oscuro-hover);
    color: #f8fafc;
  }
}

/* cards-carousel en MÓVIL: la card entera y los dots en la misma vista, y el contador
   a la altura del título (Round 1 · T8).

   «Las cards no pueden ser tan altas porque el usuario no ve los dots de debajo ni que
   hay más cards detrás. Necesitamos una card que se vea entera junto con los dots en
   la misma vista. Y los números de la paginación deberían ir a la altura del título,
   en el medio de la card no tiene sentido.» — LMS, y el mismo componente en
   Comunicación interna, Control horario, Gestión de turnos y Trabaja con nosotros.

   Medido en LMS a 375×812, y OJO con este dato porque no es intuitivo: la caja de los
   dots arranca 32px POR ENCIMA del final de la card (la pila de tarjetas se le monta
   encima). O sea que el padding-top no es el hueco: el hueco visible es
   `padding − 32`. Con los 10rem originales el hueco real eran 68px, no 100.

   Card 657 + 68 = 733px, que de hecho YA cabía en 812. El problema no es que no quepa
   en una ventana ideal, es que nunca llegas con la card pegada al borde superior: con
   la cabecera fija y el scroll a medias, los dots se iban por debajo. Bajando el
   padding a 5.6rem el hueco visible queda en 24px (el mismo ritmo que usamos en el
   resto) y el conjunto pasa de 733 a 689px — 44px de margen para llegar en cualquier
   posición de scroll. La card no hace falta encogerla.

   El contador «1 / 5» se pinta ahora en la cabecera (lo rellena updateUI en el propio
   componente) y se esconde el de dentro de la card. Solo en móvil: en escritorio la
   card tiene sitio de sobra y el contador sigue donde estaba. */
.v2-cardscarousel__indexHeader { display: none; }
@media only screen and (max-width: 767px) {
  .v2-cardscarousel__indexHeader {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    /* Misma tipografía que el contador que sustituye, para que sea el mismo elemento
       movido de sitio y no uno nuevo. */
    font: normal 400 1.3rem/1.1 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
    letter-spacing: 0;
    opacity: .6;
  }
  /* Sitio para el contador: el titular ocupa dos líneas y sin esto se le echa encima. */
  .v2-cardscarousel__titleBig { padding-right: 5rem; }
  .v2-cardsslidercard__index { display: none; }
  /* 5.6rem − 3.2rem de solape = 2.4rem de hueco visible. Con 2.4rem aquí los dots se
     dibujaban ENCIMA del borde inferior de la tarjeta. */
  .v2-cardscarousel__dots { padding-top: 5.6rem; }
}

/* Banners text-image con margen lateral y cantos redondeados en MÓVIL (Round 1).
   «El banner descubre todos los planes se ve cortada la imagen del fondo, debería
   tener margen lateral y cantos redondeados» (Precio), «el último banner de solicita
   una demo tiene que tener márgenes laterales, ocupa todo el ancho ahora» (Firma
   electrónica) y el banner de Canal de denuncias.

   Esto NO cambia el criterio del componente: en ESCRITORIO ya iba redondeado
   (.v2-textimage__image, border-radius 3.6rem a partir de 768). Lo que faltaba era el
   equivalente en móvil, donde se quedaba a sangre y con las esquinas en pico.

   Se aplica a los 15 bloques de las 13 páginas que lo usan, no solo a los tres que
   aparecen en el Round 1: dejar 12 a sangre y 3 sangrados seria justo la
   inconsistencia que el propio documento señala en otros sitios.

   Medidas iguales a las de las fotos de los bloques foto+texto (1.5rem / 1.4rem), para
   que en una misma página todo lo que va en caja tenga el mismo margen y el mismo
   radio. El parallax de fondo escala la imagen y se sale de la caja, pero
   .v2-textimage__image ya lleva overflow:hidden, asi que el radio lo recorta igual. */
@media only screen and (max-width: 767px) {
  .v2-textimage__textImage {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
  .v2-textimage__image { border-radius: 1.4rem; }
}

/* El label «scroll» del hero, dentro del hero en MÓVIL (Round 1).
   «En el hero, es importante que el label que indica que hagamos scroll se vea y no
   quede oculto» (Informes RRHH, Base de datos) y «debe verse lo del scroll sin tener
   que hacer scroll» (People analytics, Vacaciones).

   El DS lo cuelga FUERA: .v2-featuresheroimage__scrollDown va en absolute con
   bottom: -1.6rem, y como la sección es height:100vh, ese trozo cae siempre por
   debajo del borde de la ventana. Medido en sq1 a 375x812: hero de 812px y el label
   de 826 a 860 — entero fuera, sin un pixel a la vista.

   Se le da la vuelta al signo para que quede dentro, a la misma distancia del borde.

   OJO, esto NO lo arregla del todo en móviles pequeños: la sección lleva ademas
   min-height: 80rem (800px), así que en una pantalla de menos de 800px de alto útil
   el hero sigue siendo más alto que lo que se ve y el label vuelve a quedar fuera.
   Resolverlo del todo pide cambiar la altura del hero (100svh en vez de 100vh, o
   bajar ese min-height), que toca las 40 landings de esta familia y es decisión de
   diseño, no un ajuste.

   ACTUALIZACIÓN (Round 1, petición directa): no basta con meterlo dentro. Dentro caía
   sobre los CTAs — en Firma electrónica se comía el «Ver métodos». Lo que se pide es
   que quede A CABALLO entre la foto y el blanco de debajo.

   Medido en sq1 a 375px: el contenedor del label acaba en 665, exactamente donde acaba
   la foto, y la sección sigue hasta 715 (esos 50px de blanco son los de abajo). Con
   `bottom: 0` y medio alto de desplazamiento, el centro del pill cae justo en 665:
   mitad sobre la foto, mitad sobre el blanco. El último CTA queda en 598, o sea a
   50px — ya no se pisan.

   La sección es overflow:visible, así que la mitad que sobresale no se recorta. */
@media only screen and (max-width: 767px) {
  /* CIERRE (Round 1, móvil general): el pill se retira. Es azul, con la misma forma
     redondeada y el mismo peso visual que el botón de CTA que tiene justo encima, y
     en una pantalla estrecha se lee como un segundo botón. Antes se intentó meterlo
     dentro del hero y luego partirlo sobre el borde de la foto; las dos veces el
     problema de fondo seguía siendo ese, no dónde estaba.
     Se oculta en vez de dejar de imprimirlo: el <button> lleva el handler de scroll
     suave y sigue existiendo para quien navegue con teclado o lector de pantalla.
     Escritorio no se toca: ahí hay sitio de sobra y no compite con nada. */
  .v2-featuresheroimage__scrollDown { display: none; }
}

/* Altura del hero en MÓVIL: que quepa en la ventana (Round 1).
   «Debe verse lo del scroll sin tener que hacer scroll» (People analytics, Vacaciones),
   «es importante que el label que indica que hagamos scroll se vea y no quede oculto»
   (Informes, Base de datos) y «tenemos que economizar mejor el hero, la imagen tiene
   que verse» (Software RRHH). Son el mismo problema descrito cuatro veces.

   El DS le da `margin-top: 8.2rem` MÁS `height: 100vh`: 82px más que la ventana,
   siempre. Medido idéntico en Informes, Base de datos y Onboarding — el hero acaba en
   894 con la ventana en 812. Su parte de abajo, label incluido, nunca ha estado en el
   primer vistazo. No es que sobre un poco: es que por construcción no cabía.

   Se descuenta el margen del alto. Y hay que tocar también el `min-height: 80rem`
   (800px): con él puesto, el calc no serviría de nada porque 800 > 730 y ganaría el
   suelo. En vez de quitarlo —que dejaría al hero encogerse por debajo del contenido—
   se convierte en el mismo alto visible y se pasa la altura a `auto`: el hero mide lo
   que la ventana, y si su contenido no cupiera, crece. Asi nunca recorta contenido.

   Solo móvil: en escritorio el hero no tiene este problema y nadie se ha quejado. */
@media only screen and (max-width: 767px) {
  /* Solo la CABECERA. El componente se usa tambien para bloques de contenido a media
     pagina (el webinar de People Analytics, la guia de Industria, el caso de Retail,
     los lideres de Medianas empresas): sin acotar, esta regla los estiraba a una
     pantalla completa cada uno. Medido: en Industria, Medianas y Retail el segundo
     bloque media 730px igual que el hero. El modificador lo pone el propio componente
     en su primera aparicion (features-hero-image.php). */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__featuresHeroImage {
    height: auto;
    min-height: 0;
  }
  /* 17-sep — LA CAJA MIDE LO MISMO EN TODAS. «Queremos que las cabeceras sean siempre
     del mismo tamano en pixeles entre si, que al cambiar de landing no haya cambio en
     la distribucion, si contenido e imagen».

     Antes la caja la definia el texto, asi que la foto (un absolute con inset:0 del
     contenedor) media lo que midiera el titular de cada pagina. Medidas a 375px de las
     38 cabeceras: de 197px (Contacta ventas) a 570px (Directores). Casi el triple.

     Se probo con una caja de 57rem fijos: era el minimo que hacia caber el texto mas
     largo de las 38, pero no cabia en pantalla. La cabecera entera son foto + botones,
     y a 375x812 acababa en 788 de 812 — en cualquier movil mas bajo se salia. Por eso
     ahora la caja sale del alto de pantalla y no de un numero fijo.

     Descartado el 4:5 que pedia Diseno (431px de foto): lo desbordan 18 de las 38
     paginas, o sea que para usarlo habria que recortar titular o descripcion en media
     web.

     `justify-content: center` centra el bloque de texto+CTAs en la caja, que es lo que
     hace que la distribucion se vea igual al saltar de landing aunque el texto cambie.

     Fuera de esto se queda Trabaja con nosotros: tiene hero propio (`--tn-hero-h`) con
     reglas por id que ganan en especificidad. Es un diseno a medida, no una landing de
     producto. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__container {
    min-height: 0;
    display: flex;
    flex-direction: column;
  }
  /* La foto llega hasta donde empiezan los CTAs: 13.8rem es el alto fijo del bloque de
     botones (11.4rem) mas su separacion (2.4rem).

     Hacen falta las tres declaraciones. El DS le da a la foto `height: 100%` sin anclarla
     arriba, asi que poner solo `bottom` no la acortaba: le calculaba el techo en
     -109px y la subia entera por debajo del menu, dejando un hueco blanco abajo. Con
     `height: auto` y los dos anclajes, la foto acaba donde empiezan los botones.

     El `:has(> ...__ctas)` es porque hay cabeceras sin botones (Sobre nosotros, Contacta
     ventas): ahi no hay banda que reservar y la foto se queda con el `height: 100%` del
     DS, ocupando la caja entera. Sin esta condicion se comian 109px de foto para nada y
     el texto se salia al blanco. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__container:has(> .v2-featuresheroimage__ctas) .v2-featuresheroimage__imageWrapper {
    top: 0;
    bottom: 13.8rem;
    height: auto;
  }
  /* Las 29.7rem que se restan son todo lo que acompana a la foto dentro de la primera
     pantalla: el menu (8.2), el padding de la seccion (2.7 + 5) y el bloque de botones
     con su separacion (13.8). Lo que queda es la foto, asi que la cabecera entera entra
     en la pantalla de cualquier movil y mide lo mismo en las 38 landings.

     Es `min-height` y no `height`: si el texto no cabe —a 375x667 el titular de
     Directores pide 539px y solo hay 399— la caja crece y la cabecera asoma un poco por
     debajo del pliegue, en vez de que el texto se salga por encima de los botones. Antes
     solapar que cortar, igual que en el hero de arriba. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__content {
    min-height: calc(100svh - 29.7rem);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  /* Los CTAs salen de la foto y se colocan debajo: «ahora mismo los CTAs estan encima
     de las cabeceras con imagen; como no es funcional desde el punto de vista de UX,
     necesito que los saques fuera y los pongas debajo». Sobre la foto el boton blanco
     se perdia contra las zonas claras y el azul competia con el fondo. Al quedar fuera
     de la caja de la foto (que ahora acaba en 57rem) caen sobre el blanco de la pagina,
     que es donde se leen. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctas {
    margin-top: 2.4rem;
    /* 11.4rem = dos botones de 4.9 con su hueco de 1.6. Es una banda fija: da igual que
       la pagina traiga uno o dos CTAs, la foto mide lo mismo en las 38. Antes eran
       8.5rem puestas a ojo y no cuadraban ni por arriba ni por abajo — en People
       Analytics el bloque pedia 92px y le robaba 7px a la foto. */
    min-height: 11.4rem;
    /* El DS mete 2.4rem de sangria izquierda, que venia de cuando el bloque iba sobre la
       foto. Fuera de ella dejaba los botones empezando en x=39 mientras el resto de la
       pagina empieza en 15. */
    padding-left: 0;
  }
  /* Los dos botones a todo el ancho, como en la referencia de Diseno. Apilados y no en
     linea porque nuestras etiquetas no caben: «Prueba gratis 14 dias» pide 197px y
     «Ver funcionalidades» otros 191, y solo hay 345. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctas > * {
    width: 100%;
  }
  /* El segundo CTA pasa a ser un boton de verdad. Era un enlace de texto subrayado
     pensado para leerse sobre la foto; fuera de ella tiene que pesar lo mismo que el
     azul. Medidas copiadas del boton primario: 4.9rem de alto, radio de 5rem y el mismo
     borde de 0.5px que usa el DS. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctaLink {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 4.9rem;
    padding: 1.5rem 2.4rem;
    border: 0.5px solid rgba(37, 41, 46, 0.14);
    border-radius: 5rem;
    line-height: 1.6rem;
  }
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctaLink::after {
    display: none;   /* el subrayado del enlace: ya no es un enlace, es un boton */
  }
  /* El CTA de video (People Analytics: «Ver demo») es otro componente —un <button> con
     icono de play que abre el overlay— y se quedaba como texto blanco de 18px sin caja:
     fuera de la foto era invisible sobre el blanco, igual que le pasaba al otro. Se le
     dan las mismas medidas de pildora. Solo cambia la apariencia: el boton, su
     `data-v2-overlay-open` y el play azul del SVG se quedan como estaban. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctaIcon {
    min-height: 4.9rem;
    /* 1.2rem y no 1.5 como los otros dos botones: este lleva dentro el icono de 2.4rem,
       y con 1.5 se iba a 55px de alto. La cuenta va a border-box y el borde son 0.5px
       arriba y abajo: 2.4 de icono + 1.2 x 2 de padding + 0.1 de borde = 4.9, el alto
       exacto del boton primario. Con 1.25 daba 50 y le robaba 1px a la foto. */
    padding: 1.2rem 2.4rem;
    border: 0.5px solid rgba(37, 41, 46, 0.14);
    border-radius: 5rem;
    background-color: #ffffff;
    color: rgb(37, 41, 46);
    font-size: 1.6rem;
    line-height: 1.6rem;
  }
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctaIcon .v2-buttoniconcta__label {
    color: inherit;
    font-size: inherit;
  }
  /* El segundo CTA («Ver metodos», «Ver funcionalidades») era blanco con borde blanco
     porque iba sobre la foto: al sacarlo al blanco de la pagina desaparecia. Se le
     ponen los colores que el DS le da al boton secundario sobre fondo claro (los mismos
     que llevan las flechas de los carruseles: texto #25292e, fondo blanco y un borde
     al 14%), que es tambien como sale en la referencia de Diseno. */
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__ctaLink {
    color: rgb(37, 41, 46);
    background-color: #ffffff;
    border-color: rgba(37, 41, 46, 0.14);
  }
}

/* Sección de steps: el contenido arriba, no centrado (Round 1).
   «Revisar espacio de la sección steps que tiene por arriba y por debajo, hay
   demasiado margen» (Reserva de salas, Teletrabajo, Encuestas) y «demasiado espacio
   por arriba y por debajo del bloque 4 steps» (Gestión de nóminas, Firma electrónica).

   Medido en Teletrabajo a 1440x900: la sección mide 900px (min-height:100vh) y su
   contenido 438. Los 462px que sobran los repartía `align-items: center` a partes
   iguales, 231 arriba y 231 abajo — o sea que más de la mitad del bloque era blanco,
   y la mitad de ese blanco caía ENCIMA del titular.

   No se toca ni el 100vh ni el pin de ScrollTrigger: ese alto es lo que hace que el
   bloque se quede fijo mientras recorres los pasos, y quitarlo afectaría a las 23
   páginas que lo usan. Lo que cambia es dónde cae el blanco: todo abajo, donde se lee
   como separación con la sección siguiente en vez de como un hueco sobre el titular.

   En móvil ya era flex-start; esto solo iguala el escritorio. */
@media only screen and (min-width: 768px) {
  .v2-stepsrow__stepsRow { align-items: flex-start; }
}

/* ============================================================
   Header v2 — menú nuevo (Figma 4645-2547 cerrado / 4645-2858 abierto), sep-2026

   Tres cosas que el DS portado no traía:
   1. Una fila de utilidades (login + país) sobre la fila principal (el Figma la
      separaba con una línea de puntos; se quitó al revisarla en sq1).
   2. Dos CTA a la derecha: «Ver demo» azul + «Prueba gratis» oscuro.
   3. Un pie dentro del panel del mega menú (icono + frase + enlace).

   Va aquí y no en v2-components.css porque ese es generado: se recompila con
   tools/v2-port y se llevaría por delante cualquier arreglo hecho a mano.
   ============================================================ */

/* La fila de utilidades es solo de escritorio: en móvil el login y el globo ya
   viven en la barra del burger (v2-header__mobileOpenUtilities). */
.v2-header__desktopUtilityRow { display: none; }

@media only screen and (min-width: 768px) {
  .v2-header__desktopUtilityRow {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1.6rem;
    /* Sin la línea de puntos del Figma: Joan la quitó al verla montada. */
    margin-left: 21.7%;
    padding-bottom: 0.8rem;
    position: relative;
    z-index: 25;
  }

  /* Texto más pequeño que el del nav y sin el padding del trigger del mega,
     que aquí desalinearía la fila. */
  .v2-header__desktopUtilityRow .v2-header__headerNavButton,
  .v2-header__desktopUtilityRow .v2-header__megaTrigger {
    padding: 0;
    font-size: 1.4rem;
  }
  .v2-header__desktopUtilityRow .v2-header__headerNavButton { gap: 0.6rem; }
  .v2-header__desktopUtilityRow .v2-header__headerNavButtonIcon { width: 1.6rem; height: 1.6rem; }
  .v2-header__desktopUtilityRow .v2-header__headerNavButtonIcon.v2-header__language { width: 0.9rem; height: 0.6rem; }

  .v2-header__desktopTopRow { padding-top: 1.4rem; }

  /* Los dos botones van juntos (12px en el Figma); el hueco con el nav lo da el
     margin-left, antes calculado en % para dejar sitio a login + globo. */
  .v2-header__headerNavButtons {
    gap: 1.2rem;
    margin-left: 4rem;
  }

  /* El panel del mega menú sube para tapar también la fila de utilidades: el
     nav tiene que quedar DENTRO del panel blanco, como en el frame 4645-2858.
     Son los valores del DS (-7.5rem / 6.5rem) + el alto de la fila nueva. */
  .v2-megamenu__panel {
    top: -11.4rem;
    padding-top: 10.4rem;
  }
}

/* Iconos de «Plataforma» y «Sobre nosotros»: son de trazo (Tabler) y el DS pinta
   los paths de las cards con fill, que los dejaría como manchas negras. */
[data-v2-mega-content="plataforma"] .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__resourceCardIcon svg path {
  fill: none;
  stroke: #25292e;
  transition: stroke 0.2s ease;
}
/* Los de «Sobre nosotros» vienen exportados en rejilla de 16 (los de «Plataforma»
   son de 24), así que en la caja de 2rem su trazo saldría medio punto más gordo.
   0.667 = 16/24, que es justo lo que los iguala. */
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__resourceCardIcon svg path {
  stroke-width: 0.667;
}
@media (hover: hover) and (pointer: fine) {
  [data-v2-mega-content="plataforma"] .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path,
  [data-v2-mega-content="sobre-nosotros"] .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path {
    fill: none;
    stroke: #415bff;
  }
}

/* Contenido del mega menú alineado con el nav, justo debajo de «Plataforma».
   El DS portado del Next empuja las rejillas al lado derecho (margin-left:auto
   —o 27.5%— más margin-right de 9 a 15.8rem) porque allí el nav iba centrado;
   aquí el nav va pegado al logo, así que quedaban descolgadas a la derecha. */
@media only screen and (min-width: 768px) {
  .v2-megamenu__linkColumns,
  .v2-megamenu__linkColumnsFeatured .v2-megamenu__linkColumns,
  .v2-megamenu__cardGrid {
    margin-left: 0;
    margin-right: auto;
  }
}
@media only screen and (min-width: 1024px) {
  /* El borde izquierdo del contenido cae en el mismo sitio que el nav, sin
     depender del padding del panel: el nav arranca en 9% del ancho (su
     margin-left) + 15.9rem del logo + 2.8rem de separación, y el panel empieza
     1.25rem antes que la fila ⇒ 9% + 19.7rem desde el borde del panel.
     Comprobado a 1024/1100/1280/1366/1440/1600/1700/1920: delta 0 con el nav.
     Al ser % + rem, la fórmula sigue al tipo de letra fluido del DS. */
  .v2-megamenu__panelInner {
    padding-left: calc(9% + 19.7rem);
  }
  /* Con el contenido desplazado queda menos ancho, así que las anchuras fijas
     del DS pasan a ser máximos: si no, desbordaban el panel por la derecha. */
  .v2-megamenu__linkColumns {
    width: 100%;
    max-width: 102rem;
  }
  .v2-megamenu__linkColumnsFeatured .v2-megamenu__linkColumns {
    width: 100%;
    max-width: 73.4rem;
  }
  .v2-megamenu__cardGrid {
    width: 100%;
    max-width: 75rem;
  }
}

/* Pie del panel del mega menú */
.v2-megamenu__panelFooter {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-top: 2.4rem;
  padding-top: 2.4rem;
  border-top: 1px dashed rgba(37, 41, 46, 0.35);
}
@media only screen and (min-width: 1024px) {
  /* Alineado con la rejilla de cards, que ahora arranca a la izquierda. */
  .v2-megamenu__panelFooter {
    margin-left: 0;
    max-width: 75rem;
  }
}
.v2-megamenu__panelFooterIcon {
  display: flex;
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
}
.v2-megamenu__panelFooterIcon svg { width: 100%; height: 100%; }
.v2-megamenu__panelFooterBody { display: flex; flex-direction: column; gap: 0.4rem; }
.v2-megamenu__panelFooterTitle {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.2;
  color: #25292e;
}
.v2-megamenu__panelFooterText {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 2.3rem;
  color: #25292e;
}
.v2-megamenu__panelFooterLink {
  color: #25292e;
  text-decoration: underline;
  transition: color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__panelFooterLink:hover { color: #415bff; }
}

/* Nav pegado al logo, como en el Figma: con login y globo fuera de esta fila,
   el `margin-left:auto` del DS empujaba el nav casi hasta los botones. */
@media only screen and (min-width: 768px) {
  .v2-header__headerNav { margin-left: 9%; }
  .v2-header__headerNavButtons { margin-left: auto; }
  /* Las etiquetas de dos palabras («Sobre nosotros») partían en dos líneas y
     descuadraban la altura de la fila: con el nav apretado, el flex prefiere
     romper el texto antes que desbordar. */
  .v2-header__headerNavLinkText { white-space: nowrap; }
}

/* Versión del vídeo destacado del mega menú («v3.0»): tipografía de píxeles con
   el degradado de marca. */
.v2-megamenu__featuredVersion {
  font: normal 700 2.6rem/0.97 "PP NeueBit", "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #415bff 0%, #ecdf30 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Destacado del mega menú en variante imagen (alternativa al vídeo): imagen
   arriba y título debajo, toda la tarjeta enlazada. Es el «destacado» del menú
   clásico —Soluciones → Software de Recursos Humanos— traído al panel v2.
   Ocupa el mismo hueco de 29rem que la miniatura de vídeo. */
.v2-megamenu__featuredImageCard {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  text-decoration: none;
  color: #25292e;
}
.v2-megamenu__featuredImageWrap {
  display: block;
  overflow: hidden;
  border-radius: 1.2rem;
  text-align: center;
}
/* Tope de alto: los heroes de las paginas v2 no comparten proporcion (el de
   retribucion flexible es mas alto que el de software de recursos humanos) y
   sin tope el destacado de Recursos crecia mas que el de Soluciones y era el
   que marcaba la altura del panel. Con max-height los dos miden igual y la
   imagen se centra en su hueco en vez de recortarse. */
.v2-megamenu__featuredImage {
  display: inline-block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 20rem;
  border-radius: 1.2rem;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.v2-megamenu__featuredImageTitle {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1.2;
  text-align: center;
  transition: color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__featuredImageCard:hover .v2-megamenu__featuredImage { transform: scale(1.03); }
  .v2-megamenu__featuredImageCard:hover .v2-megamenu__featuredImageTitle { color: #415bff; }
}
.v2-megamenu__featuredImageCard:focus-visible {
  outline: 2px solid #415bff;
  outline-offset: 4px;
  border-radius: 1.2rem;
}

/* El mismo destacado en el acordeón móvil: ahí el hueco de la derecha no
   existe, así que va como una fila propia al pie del panel. */
.v2-menuoverlay__accordionFeaturedLink {
  display: block;
  margin-top: 1.6rem;
  padding-top: 1.6rem;
  border-top: 1px dashed rgba(37, 41, 46, 0.35);
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #25292e;
  text-decoration: none;
}

/* Miniatura de vídeo del hero: flotante abajo a la derecha en MÓVIL.
   «Que el minirreproductor se vea en la parte inferior derecha y se quite de donde
   está ahora, como una miniatura que conforme vas haciendo scroll permanece»
   (18-sep).

   De dónde viene: el DS la pinta en absolute dentro del hero (`bottom: 3.2rem;
   left: 50%`), donde en móvil quedaba centrada abajo tapando el botón de CTA y el pill
   de scroll (visto en Firma electrónica). El 18-sep se sacó de la sección —vive en un
   envoltorio junto a ella (features-hero-image.php)— y se devolvió al flujo, debajo de
   la cabecera. Ahora deja de ocupar sitio del todo: pasa a `position: fixed` y
   acompaña el scroll durante toda la página.

   El `fixed` funciona porque el envoltorio no lleva transform (position:fixed se rompe
   dentro de un ancestro transformado; es el mismo motivo por el que el overlay del
   vídeo se mueve a <body> desde JS).

   z-index 11: por debajo del header de móvil (12), para que el menú desplegado la tape,
   y muy por debajo del overlay del vídeo (100), que la cubre al abrirlo.

   A este tamaño el titular y la duración no entran: se oculta el cuerpo de la card y
   queda solo el loop con el botón de play encima, que es la miniatura que se pide.

   Escritorio no se toca: sigue en absolute, en la esquina inferior derecha del hero.

   Afecta a las páginas con hero de esta familia y vídeo: firma-electronica-avanzada,
   kiosco, people-analytics, sobre-nosotros, software-control-de-gastos y
   software-seleccion-personal. */
.v2-featuresheroimage__wrap { position: relative; }
@media only screen and (max-width: 767px) {
  .v2-featuresheroimage__ctaVideo {
    position: fixed;
    left: auto;
    top: auto;
    right: 1.6rem;
    /* el safe-area evita que la barra de gestos del iPhone se coma la miniatura */
    bottom: calc(1.6rem + env(safe-area-inset-bottom, 0px));
    transform: none;
    margin: 0;
    /* el DS le pone `width:100%` y un tope de 30.8rem pensados para la card completa;
       aquí manda el tamaño del loop. */
    width: auto;
    max-width: none;
    z-index: 11;
  }
  /* Aquí —y solo aquí— el widget flota sobre la página, así que aquí se enciende
     su botón de cerrar. Sin él no había forma de apartarlo: tapaba el CTA del
     hero, campos del formulario, preguntas del FAQ y el copyright del pie
     (rev. móvil, 20-oct-2026). */
  .v2-featuresheroimage__ctaVideo > .v2-ctavideo__stickyClose { display: flex; }
  /* El botón de play vive DENTRO del cuerpo de la card (aunque se pinte en absolute
     sobre la imagen): ocultando el cuerpo entero se iba también el play. Se oculta solo
     el texto y el cuerpo pasa a `display: contents`, que quita su caja pero deja al play
     colgando del enlace, que es su referencia de posición. */
  .v2-featuresheroimage__ctaVideo .v2-ctavideo__ctaVideoText { display: none; }
  .v2-featuresheroimage__ctaVideo .v2-ctavideo__ctaVideoBody { display: contents; }
  .v2-featuresheroimage__ctaVideo .v2-ctavideo__ctaVideoLink {
    padding: 0.4rem;
    gap: 0;
    border-radius: 1.4rem;
    /* flota sobre el contenido de la página: necesita más sombra que dentro del hero */
    box-shadow: 0 0.4rem 1.6rem rgba(0, 0, 0, 0.18);
  }
  .v2-featuresheroimage__ctaVideo .v2-ctavideo__ctaVideoImage {
    width: 11.2rem;
    height: 7.4rem;
    border-radius: 1.1rem;
  }
  .v2-featuresheroimage__ctaVideo .v2-ctavideo__ctaVideoPlay {
    right: 0.6rem;
    bottom: 0.6rem;
  }
}

/* Cabecera con imagen debajo (hero.php): una pantalla exacta en MÓVIL.
   «Las cabeceras con imagen debajo tienen que ser todas iguales» y «quiero que la
   cabecera con el menú ocupe una pantalla de móvil».

   El ritmo interno ya era idéntico en las 18 landings (16/24/64, unificado antes). Lo
   que las hacía distintas era la IMAGEN: con object-fit contain y alto automático,
   cada una conserva su proporción natural. Medido a 375px:

       LMS ................. imagen 138px · cabecera 509   (foto 2400x959, ratio 2.50)
       Software RRHH ....... imagen 252px · cabecera 773   (1776x1298, 1.37)
       Gestor documental ... imagen 344px · cabecera 847   (1541x1538, 1.00)
       Canal de denuncias .. imagen 374px · cabecera 924   (1538x1668, 0.92)

   O sea que la de Canal medía casi el doble que la de LMS.

   Ahora la sección mide exactamente lo que queda de ventana bajo el menú (12rem de
   margen superior + el alto = 100vh) y la imagen ocupa el hueco que sobra tras el
   texto. Así todas miden lo mismo por construcción, no por afinar valores.

   Se mantiene `contain`: la imagen se escala para caber entera, sin recortarse. Son
   mockups de producto y recortarlos cortaría la interfaz. El precio es que una foto
   muy apaisada (LMS) se verá más pequeña dentro de su hueco — a cambio, ninguna se
   corta y ninguna deja el marco vacío que Joan quitó el 10-ago, porque el hueco lo
   define el espacio disponible y no una proporción fija.

   El `section:not(#vp-hero)` sube la especificidad por encima de las reglas por id de
   las templates (LMS lleva margen y contenedor propios) y de paso deja fuera el hero
   del post de blog, que tiene diseño propio.
   17-sep: era `height` y ahora es `min-height`. Con altura fija, el contenedor grid
   partia la caja en dos filas (texto + `1fr`) y la imagen se metia en el hueco que
   sobraba. Funciona mientras la imagen obedezca el `height:100%` de aqui abajo, pero
   13 templates la fuerzan a su alto natural con su propia regla por id
   (`#hero .v2-hero__image img { height: auto !important }`), que gana en
   especificidad. En Gestor documental eso daba una imagen de 344px metida en una fila
   de 213: se subia 14px sobre el texto y lo tapaba. Medido a 375px.

   El solape lo arregla el `align-self: stretch` de aqui abajo: con el `center` del DS el
   envoltorio se quedaba con el alto natural de la imagen aunque su fila del grid fuera
   mas pequena, y sobresalia por arriba.

   18-sep: la imagen va a su TAMANO NATURAL y la cabecera crece lo que haga falta.

   Se probo lo contrario —alto fijo de una pantalla, con la imagen escalada a lo que
   sobrara tras el texto— y en moviles cortos no quedaba nada que repartir. Medido a
   375x667, que es un iPhone SE o un 8: Reserva de salas 9px de imagen, Gestor documental
   44, Software RRHH 50, Retribucion flexible 50, Evaluacion 61. Diez de las trece por
   debajo de 140px, o sea el mockup de producto invisible. A 360x640 alguna llegaba a 0.

   El precio es que las cabeceras dejan de medir una pantalla y dejan de ser iguales
   entre si. Es una decision de Diseno con las dos opciones sobre la mesa: antes una
   imagen que se vea que una caja que cuadre.

   El `svh` en vez de `vh` se queda: en movil el `100vh` cambia cuando el navegador
   oculta o muestra la barra de direcciones, y el `svh` no se mueve. */
@media only screen and (max-width: 767px) {
  section:not(#vp-hero).v2-hero__hero {
    margin-top: 12rem;
    height: auto;
    min-height: calc(100svh - 12rem);
    display: flex;
    flex-direction: column;
  }
  /* min-height:0 en toda la cadena: sin él, un hijo flex/grid no baja de su tamaño de
     contenido y la imagen desborda la pantalla en vez de encogerse. */
  section:not(#vp-hero) .v2-hero__container {
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto 1fr;   /* cuando el contenedor es grid (el caso general) */
  }
  section:not(#vp-hero) .v2-hero__imageWrapper {
    flex: 1 1 auto;                 /* cuando el contenedor es flex (LMS) */
    height: auto;
    /* `align-self: stretch` anula el `center` del DS. Con `center` el envoltorio no se
       ajustaba a su fila del grid: se quedaba con el alto natural de la imagen (344px
       en Gestor documental dentro de una fila de 213) y sobresalia por arriba y por
       abajo. Ese era el solape. Con `stretch` la imagen ocupa el hueco que queda y
       `object-fit: contain` la escala entera: se ve mas pequena, pero no se corta. */
    align-self: stretch;
    min-height: 0;
  }
  section:not(#vp-hero) .v2-hero__imageWrapper .v2-hero__image {
    height: auto;
    min-height: 0;
  }
  section:not(#vp-hero) .v2-hero__imageWrapper .v2-hero__image img {
    height: auto !important;
    object-fit: contain;
    object-position: center bottom;
  }
}

/* Cabecera con foto de fondo (features-hero-image) en MÓVIL: dos ajustes pedidos.

   1) «Necesito que la imagen llegue al límite del menú (con margen)».
      La foto es un absolute con inset:0 del contenedor, y el contenedor arranca donde
      acaba el `padding: 50px 0` de la sección. Medido a 375px: el menú acaba en 94 y la
      foto empezaba en 132 — 38px de hueco, cuando a los lados deja 15. Bajando el
      padding superior a 2.7rem la foto sube a 109 y el hueco queda en los mismos 15 de
      los lados. El alto de la sección no cambia: es border-box, el padding va dentro.
      Se sube TODO el bloque 23px, texto incluido, que además deja más aire abajo.

   2) Se probó poner el segundo CTA («Ver métodos») al lado del azul y se DESCARTÓ.
      Medido en las 24 landings que llevan segundo CTA: con «Ver métodos» (92px) y
      «Ver demo» cabe —19 páginas—, pero con «Ver funcionalidades» (143px, 3 páginas)
      hacen falta 364px y solo hay 345, y con «Conviértete en partner» faltan 46.
      Estrechar el botón azul no da para las dos últimas, y esto se propaga a 11
      mercados donde las traducciones alargan más que el castellano. Habría quedado en
      fila en unas páginas y apilado en otras, que es justo lo que el Round 1 pide
      evitar. Se queda apilado en todas, que es como estaba.

   Escritorio no se toca. */
@media only screen and (max-width: 767px) {
  .v2-featuresheroimage__wrap--cabecera .v2-featuresheroimage__featuresHeroImage {
    padding-top: 2.7rem;
    /* 18-sep: fuera el padding inferior de 5rem. «Reduce el espacio entre el ultimo
       boton de CTA de la cabecera y el modulo que viene despues, ahora estan super
       alejados». Medido a 375: del ultimo boton al modulo siguiente habia 146px, que
       eran estos 50 mas los 96 de margen superior que ya trae el modulo siguiente —el
       ritmo general de la web. Los 50 sobraban: la separacion la pone el modulo de
       abajo, no la cabecera. Quedan 96, el mismo salto que hay entre dos modulos
       cualesquiera de la pagina.

       El calculo de la foto (100svh - 29.7rem) NO se toca a proposito: la foto sigue
       midiendo lo mismo y lo unico que desaparece es el aire de debajo, asi que el
       modulo siguiente asoma un poco por el pliegue, que ayuda a saber que hay mas. */
    padding-bottom: 0;
  }
}

/* ============================================================
   Header pegajoso en escritorio (18-sep-2026)

   En móvil el header ya era fixed; en escritorio era absolute y se iba con la
   página. Ahora se queda arriba, pero SIN la primera fila (login + idiomas):
   esa fila solo tiene sentido al principio de la página y, plegándola, la barra
   pegada ocupa 78px en vez de 105.

   La clase .v2-header--scrolled ya la ponía el JS del header a partir de 8px de
   scroll (se usaba para el fondo en móvil); aquí solo se le cuelga el estado de
   escritorio.

   El panel del mega menú sube su tope al alto nuevo: los -11.4rem / 10.4rem del
   bloque de arriba contaban con la fila de utilidades, y sin ella dejaban un
   hueco por encima del nav.
   ============================================================ */
@media only screen and (min-width: 768px) {
  .v2-header__header {
    position: fixed;
    transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease;
  }
  .v2-header__header.v2-header--scrolled {
    /* 1.6rem dejaban el logo casi tocando la barra de degradado (7px de aire):
       2.4rem arriba lo devuelven a 20px, el mismo respiro que tiene el header
       sin scrollear bajo la linea. Alto de la barra: 78px. */
    padding: 2.4rem 0 2rem;
    background-color: #f5f5f7;
    box-shadow: 0 0.8rem 2.4rem rgba(37, 41, 46, 0.08);
  }

  /* La fila de utilidades se PLIEGA, no desaparece de golpe.
     Con display:none el alto de la barra cambiaba de tiron (34px en un solo
     fotograma) mientras el padding del header todavia se animaba 250ms mas: dos
     movimientos descoordinados y, al volver arriba, la fila reaparecia con el
     padding a medias y la barra se pasaba a 112px antes de asentarse en 105.
     Animando max-height + padding + opacidad a la vez que el padding del header,
     los 105px <-> 78px son una sola rampa continua de 250ms.

     max-height va en rem (no en px) porque el rem de v2 escala con el ancho, y
     el alto natural de la fila —que lo marcan el icono de 1.6rem y el texto de
     1.4rem— escala con el. Son 3.6rem para ~3.3rem de contenido: margen de
     sobra para que ningun idioma se recorte, y la holgura solo cuesta ~20ms de
     arranque. La transicion de visibility va con retardo al plegar (para que el
     login no siga siendo tabulable con la barra cerrada) y sin el al abrir. */
  .v2-header__desktopUtilityRow {
    overflow: hidden;
    max-height: 3.6rem;
    transition: max-height 0.25s ease, padding-bottom 0.25s ease,
                opacity 0.16s ease, visibility 0s;
  }
  .v2-header__header.v2-header--scrolled .v2-header__desktopUtilityRow {
    max-height: 0;
    padding-bottom: 0;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.25s ease, padding-bottom 0.25s ease,
                opacity 0.16s ease, visibility 0s linear 0.25s;
  }
  .v2-header__desktopTopRow {
    transition: padding-top 0.25s ease;
  }
  .v2-header__header.v2-header--scrolled .v2-header__desktopTopRow {
    padding-top: 0;
  }

  /* Quien pide menos movimiento se queda con el cambio seco de siempre. */
  @media (prefers-reduced-motion: reduce) {
    .v2-header__header,
    .v2-header__desktopUtilityRow,
    .v2-header__desktopTopRow {
      transition: none;
    }
  }
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    top: -8rem;
    padding-top: 7rem;
  }

  /* El logo del pie traia z-index 12 del Next, el MISMO que el header. Empatados
     gana el que va despues en el HTML, asi que al llegar al final de la pagina
     el logo del pie se pintaba ENCIMA de la barra pegada y se veian los dos
     logos superpuestos. Se ve solo en ventanas de ~720px de alto: es donde el
     logo del pie cae justo debajo de la barra al tocar fondo.
     Con 1 sigue por delante de la ilustracion del pie (que no lleva z-index,
     que es para lo unico que estaba ese 12) y por detras del header. */
  .v2-footer__logo {
    z-index: 1;
  }
}

/* ========================================================================
 * Etiquetas unificadas — 18-sep-2026
 *
 * En toda la v2 solo hay dos etiquetas: NEW (amarillo) y TREND (azul). El
 * texto y el color del mega menú los resuelve v2_mega_badge() en
 * components/v2/header.php; aquí queda lo que vive en el CSS generado.
 *
 * El pie traía el amarillo pálido del Next (#f4f082) y el menú el saturado
 * (#fac832): dos NEW de distinto color en la misma página. Se queda el del
 * menú, que es el que ven casi todas las etiquetas del sitio.
 * ---------------------------------------------------------------------- */

.v2-footer__badge {
  background: #fac832;
}

/* El NEW del menu salia en blanco sobre amarillo (1.8:1, ilegible): la regla
   base pinta el texto en blanco para el TREND azul y el modificador amarillo
   solo cambiaba el fondo. Viene asi del port del Next. Se iguala al badge del
   pie, que ya lo hacia bien: oscuro sobre amarillo, blanco sobre azul. */
.v2-megamenu__badge.v2-megamenu__badgeNuevo {
  color: #25292e;
}

/* ============================================================
   FILAS IMAGEN + TEXTO: TEXTO CENTRADO A LA ALTURA DE LA FOTO
   (rev. Celia 18-sep) — general, no página a página
   ============================================================
   Los módulos de fila (imagen izquierda / imagen derecha) llegaban del port
   con los dos items de la rejilla alineados arriba: la columna de texto
   empezaba a la altura del borde superior de la foto y, como casi nunca miden
   lo mismo, el que sobraba dejaba todo el aire en la parte de abajo — muy
   visible cuando la foto es más alta que el texto (gestor documental).

   Se centra verticalmente la fila entera, que es lo que pide el diseño y lo
   que ya se venía parcheando página a página (gestión de nóminas, clima
   laboral, control de gastos, encuestas). Esas reglas locales siguen ahí y
   dicen lo mismo; no hace falta tocarlas.

   Solo de 768px para arriba: en móvil la fila es una columna apilada y ahí
   `align-items` gobierna el eje horizontal, no el vertical.

   El padding-top de 3rem de la columna de texto era el apaño para separarla
   del borde superior de la foto. Centrada ya no separa nada: descentra el
   texto medio padding hacia abajo. Se quita en escritorio. */
@media only screen and (min-width: 768px) {
  .v2-twocolsimagetext__row,
  .v2-twocolsiconlist__row {
    align-items: center;
  }
  .v2-twocolsimagetext__content {
    padding-top: 0;
  }
}

/* ============================================================
   CTA: LA ETIQUETA, CENTRADA EN LA PÍLDORA EN REPOSO
   (rev. Celia 18-sep)
   ============================================================
   El botón monta la etiqueta dos veces (original + duplicado) dentro de una
   ventana con overflow oculto: al pasar el ratón la tira sube un 50% y entra
   el duplicado. Para que ese salto sea exacto, cada etiqueta tiene una altura
   FIJA (1.8rem, 2rem en medium, 2.7rem en large).

   El problema estaba dentro de esa caja: el port dejó las etiquetas en
   `display: inline`, así que la línea de texto se apoyaba ARRIBA y el hueco
   sobrante se quedaba entero abajo. En reposo el texto se veía alto — 2px en
   los botones normales y hasta 5px en los pequeños, donde la caja (1.8rem) es
   mucho más alta que el texto (1.2rem).

   Se centra la línea dentro de su caja. Las alturas no se tocan, así que la
   animación del rollover entra exactamente igual que antes. */
.v2-button__label,
.v2-button__labelDuplicate {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Primer modulo despues de la cabecera con foto, en MOVIL: mismo hueco optico siempre.

   «Me preocupa el espaciado entre el CTA de la cabecera y el modulo siguiente (a veces
   es texto, otras es foto...)».

   El hueco de CAJA ya era casi el mismo, pero la TINTA no: un modulo de texto trae su
   propio aire antes de la primera linea y una foto empieza en el borde. Medido a 375px
   desde el final del bloque de cabecera hasta el primer pixel que se ve:

       carrusel de modulos ...  95     two-columns-icon-list .....  96
       two-columns-image-text .  90     cifras ....................  92
       contact-form ...........  119    cita ......................  128
       carrusel de features ....  127    steps-row .................  128
       tira de logos ...........  150

   De 90 a 150: 60px de diferencia segun lo que toque, que es lo que se nota al cambiar
   de landing. Aqui se le da a cada tipo el margen que hace que su tinta caiga a 9.6rem,
   que es el ritmo general. No se toca el ritmo entre modulos del resto de la pagina:
   esto solo aplica al PRIMERO, el que va pegado a la cabecera.

   El selector `:not(section ~ section)` significa «la primera seccion que hay despues
   del envoltorio de la cabecera». Hace falta asi porque el modulo no siempre esta en la
   misma posicion: entre la cabecera y el va un numero variable de <script> y <style>
   que imprimen los propios componentes (lo he visto en 3.a, 4.a y 5.a posicion).

   El `:not(#vp-hero)` no filtra nada: sube la especificidad por encima de las reglas por
   id que muchas templates le ponen al primer modulo (`#on-quote { margin-top: 9.6rem }`
   en Onboarding, por ejemplo). Es el mismo recurso que ya usa el bloque del hero de mas
   arriba. Sin el, de los nueve tipos solo entraba uno: el resto llevaba su propio numero
   afinado pagina a pagina, que es justo lo que hacia que el salto se viera distinto en
   cada landing. */
@media only screen and (max-width: 767px) {
  main > .v2-featuresheroimage__wrap--cabecera ~ section:not(section ~ section):not(#vp-hero) {
    margin-top: 9.6rem;
  }
  /* Los que empiezan por texto: se descuenta el aire de la primera linea. */
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-quote__quote:not(section ~ section):not(#vp-hero) {
    margin-top: 6.4rem;
  }
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-featfeatcarousel__featuredFeaturesCarousel:not(section ~ section):not(#vp-hero) {
    margin-top: 6.5rem;
  }
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-stepsrow__stepsRow:not(section ~ section):not(#vp-hero) {
    margin-top: 5.8rem;
  }
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-contactform__contactForm:not(section ~ section):not(#vp-hero) {
    margin-top: 6.7rem;
  }
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-statsfigures__section:not(section ~ section):not(#vp-hero) {
    margin-top: 6.4rem;
  }
  /* La tira de logos, ademas del margen, trae 6rem de padding propio. */
  main > .v2-featuresheroimage__wrap--cabecera ~ .v2-logostrip__logoStrip:not(section ~ section):not(#vp-hero) {
    margin-top: 3.6rem;
  }
}

/* ============================================================
   PIE: BANDA DE SELLOS (apps, certificaciones y financiación)
   (rev. Celia 18-sep)
   ============================================================
   Las certificaciones son obligatorias y tienen que salir en el pie de TODAS
   las landings, igual que en la web clásica. El componente las pinta debajo de
   la fila de copyright + redes, separadas por una línea fina, y antes de la
   franja de colores que cierra la página.

   Tres grupos en una fila: tiendas de apps, sellos de certificación y el sello
   de la Generalitat / IVF / Unión Europea, que es el más ancho y se va a la
   derecha. `flex-wrap` para que en pantallas intermedias caiga en dos líneas en
   vez de comprimir los logos. En móvil, apilados y centrados. */
.v2-footer__sellos {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  padding-top: 3.2rem;
  border-top: 1px solid rgba(37, 41, 46, 0.12);
}
@media only screen and (min-width: 768px) {
  .v2-footer__sellos {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 4rem;
  }
}

.v2-footer__apps,
.v2-footer__certificaciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media only screen and (min-width: 768px) {
  .v2-footer__certificaciones {
    gap: 3rem;
  }
}

.v2-footer__apps img {
  display: block;
  width: auto;
  height: 4.4rem;
}

/* Cada sello viene con su propia proporción (el de Capterra es apaisado, el de
   SGS casi cuadrado): se igualan por ALTO, que es lo que hace que la fila se lea
   ordenada, y cada uno lleva la suya para que pesen visualmente lo mismo. */
.v2-footer__certificaciones img {
  display: block;
  width: auto;
}
.v2-footer__sello--sgs { height: 5.2rem; }
.v2-footer__sello--capterra47 { height: 3.4rem; }
.v2-footer__sello--capterra24 { height: 5.2rem; }
.v2-footer__sello--softdoit { height: 5.6rem; }
.v2-footer__sello--auto { height: 5rem; }

/* Rev. 22-sep: el sello pasa de la tira de tres logos (940px de ancho) a solo el
   de la UE (248px). Como la imagen se escala por ANCHO, con los 47rem de antes
   el logo de la UE saldria tres veces mas grande de lo que se veia dentro de la
   tira. Los topes nuevos lo dejan al mismo tamano que tenia: dentro de la tira
   ocupaba 240 de 940, o sea 120px de los 470 de escritorio y 87 de los 340 de
   movil; con la imagen recortada salen 12.4rem y 9rem. */
.v2-footer__selloPublico {
  display: block;
  width: 100%;
  max-width: 9rem;
  height: auto;
}
@media only screen and (min-width: 768px) {
  .v2-footer__selloPublico {
    max-width: 12.4rem;
  }
}

/* El icono de TikTok es un cuadrado con la nota recortada con una máscara (los
   demás iconos del pie traen el hueco en el propio trazado). El hover del pie
   repinta TODOS los <path> del icono, y el de la máscara tiene que seguir en
   negro o el hueco se rellena: se le gana en especificidad. */
.v2-footer__socialIcon mask path,
.v2-footer__socialLink:hover .v2-footer__socialIcon mask path {
  fill: #000;
}

/* En móvil los cuatro sellos a tamaño de escritorio suman 382px y se parten en
   dos filas (la pantalla da 345). Un 20% más pequeños entran en una, que es
   como se leen: una hilera de certificaciones, no una parrilla. */
@media only screen and (max-width: 767px) {
  .v2-footer__certificaciones { gap: 1.6rem; }
  .v2-footer__sello--sgs { height: 4.2rem; }
  .v2-footer__sello--capterra47 { height: 2.8rem; }
  .v2-footer__sello--capterra24 { height: 4.2rem; }
  .v2-footer__sello--softdoit { height: 4.4rem; }
}

/* ── Estructura del pie de la web antigua (rev. Celia 18-sep) ──────────────
   Las tiendas de apps van en la MISMA línea que las redes y a la izquierda,
   como en la landing clásica. El copyright, que ocupaba ese sitio, baja a su
   propia línea debajo de los sellos.

   `margin-left: auto` en las redes para que sigan pegadas a la derecha aunque
   la fila se quede sin las tiendas (los mercados que no las pasen). */
@media only screen and (min-width: 768px) {
  .v2-footer__footerBottom .v2-footer__socialLinksWrapper {
    margin-left: auto;
  }
}
/* El copyright es ahora lo último de la página: sin la franja de colores
   debajo, necesita su propio aire abajo o queda pegado al borde. */
.v2-footer__colCopy {
  text-align: center;
  margin-bottom: 3.2rem;
}
@media only screen and (min-width: 768px) {
  .v2-footer__colCopy {
    text-align: left;
    margin-top: -1.2rem;
    margin-bottom: 4rem;
  }
}

/* ============================================================
   MEGA MENÚ: ICONO EN LOS TÍTULOS DE COLUMNA
   (rev. Celia 18-sep)
   ============================================================
   «Funcionalidades» y «Soluciones» son columnas de enlaces pelados, mientras
   que «Plataforma» y «Recursos» son cards con icono. Se le pone icono al título
   de cada columna —el equivalente al título de una card— para que los cuatro
   paneles se lean igual.

   Mismo tamaño y color que el icono de las cards (2rem, #25292e). El título es
   un flex para que icono y texto queden centrados entre sí aunque el título
   caiga en dos líneas. */
.v2-megamenu__columnTitle--conIcono {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.v2-megamenu__columnTitleIcon {
  display: block;
  flex: none;
  width: 2rem;
  height: 2rem;
}
/* En el overlay móvil el título baja a 1.4rem: el icono baja con él. */
.v2-megamenu__linkColumnsMobileOverlay .v2-megamenu__columnTitleIcon {
  width: 1.6rem;
  height: 1.6rem;
}

/* El icono sobresale por la izquierda de la columna, como en las cards de
   «Plataforma»: el texto del título y los enlaces de debajo comparten margen y
   el icono se queda fuera. Sin esto, los enlaces se alineaban con el icono y el
   título quedaba metido hacia dentro. La sangría es el ancho del icono más su
   separación (2rem + 0.8rem; 1.6 + 0.8 en el overlay móvil). */
.v2-megamenu__columnTitle--conIcono + .v2-megamenu__linkList {
  padding-left: 2.8rem;
}
.v2-megamenu__linkColumnsMobileOverlay .v2-megamenu__columnTitle--conIcono + .v2-megamenu__linkList {
  padding-left: 2.4rem;
}


/* ============================================================
   MEGA MENÚ: EL ENLACE DE DOS LÍNEAS NO PARECE DOS ENLACES
   (rev. Celia 24-sep)
   ============================================================
   El DS resuelve el ritmo de la lista con line-height: 3.5rem en el enlace. Con
   una línea funciona —cada fila mide 3.5rem—, pero «Firma electrónica avanzada»
   y «Gestor de vacaciones y ausencias» caen en dos y sus dos líneas quedan
   separadas 3.5rem: la misma distancia que hay entre dos enlaces distintos, así
   que la segunda línea se lee como un ítem más.

   El interlineado pasa al del texto (1.25) y el aire de la fila lo pone el
   padding: 1.25 × 1.65rem + 2 × 0.72rem = 3.5rem. Las filas de una línea y la
   separación entre ítems se quedan igual; el enlace de dos líneas baja de 5.8 a
   4.6rem. Mismo cálculo en el overlay móvil, donde el texto es de 1.2rem en
   filas de 2.2rem. */
.v2-megamenu__columnLink {
  line-height: 1.25;
  padding-top: 0.72rem;
  padding-bottom: 0.72rem;
}
.v2-megamenu__columnLinkLabel {
  line-height: 1.25;
}
.v2-megamenu__linkColumnsMobileOverlay .v2-megamenu__columnLink {
  line-height: 1.25;
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.v2-megamenu__linkColumnsMobileOverlay .v2-megamenu__columnLinkLabel {
  line-height: 1.25;
}


/* ============================================================
   LOGO: CENTRADO ÓPTICO CON LOS ÍTEMS DEL MENÚ   (rev. Celia 24-sep)
   ============================================================
   El logo llevaba margin-top: -0.4rem y quedaba alto: medido a 1440, su centro
   óptico caía 3.2px por encima del centro de las mayúsculas de «Plataforma».

   La fila es un flex centrado, así que un margen solo desplaza la mitad de lo
   que dice. El ajuste va por `top` —el logo ya es position: relative—, que
   mueve lo que pide y no toca el layout. Con esto el centro del logo coincide
   con el de los ítems, también con el header encogido al hacer scroll. */
@media only screen and (min-width: 768px) {
  .v2-header__logo {
    margin-top: 0;
    top: 0.19rem;
  }
}


/* ============================================================
   FILAS IMAGEN + TEXTO: EL TEXTO SE CENTRA CON LA FOTO,
   NO CON EL WIDGET QUE SOBRESALE   (rev. Celia 18-sep)
   ============================================================
   En estas filas la imagen es una composición: la foto (o el mockup grande) y
   encima un widget de producto que asoma por debajo. Como el widget forma parte
   del .webp, el centrado vertical de la fila contaba con él y el texto quedaba
   más bajo que la foto — en retribución flexible, 26px a 1440.

   Se le da al contenedor de la imagen un margen inferior NEGATIVO igual a lo
   que asoma el widget: su caja de maquetación pasa a medir solo la foto (el
   widget sigue pintándose, simplemente ya no ocupa) y el centrado de la rejilla
   vuelve a cuadrar foto y texto. El sobrante cae dentro de los 16rem de margen
   que la fila deja por debajo, así que no pisa nada.

   El valor va en % porque los márgenes en % se resuelven contra el ANCHO de la
   columna, y el alto de la imagen escala con ese mismo ancho: el mismo número
   vale a 1280 y a 1920. Es exactamente «píxeles que asoman / ancho del .webp»,
   medido sobre el canal alfa de cada imagen (la foto es la banda opaca ancha;
   el widget, la estrecha de debajo).

   Solo en escritorio: en móvil la fila se apila y el texto va debajo de la
   imagen, así que un margen negativo se lo comería.

   Si cambia una de estas imágenes hay que volver a medirla — o quitar su línea,
   que sin ella todo vuelve al comportamiento anterior. */
@media only screen and (min-width: 768px) {

  /* adelanto-nomina */
  #an-configura [class*="__imageWrapper"]:has(img[src$="adelanto-nomina/configura.webp"]) { margin-bottom: -18.54%; } /* el widget asoma 290px de 1328 */
  #an-encantara-emp [class*="__imageWrapper"]:has(img[src$="adelanto-nomina/te-encantara.webp"]) { margin-bottom: -15.85%; } /* el widget asoma 238px de 1848 */

  /* base-de-datos-recursos-humanos */
  #bbdd-campos [class*="__imageWrapper"]:has(img[src$="base-de-datos-recursos-humanos/row-campos.webp"]) { margin-bottom: -8.18%; } /* el widget asoma 121px de 1115 */

  /* canal-de-denuncias */
  #cd-anonimato [class*="__imageWrapper"]:has(img[src$="canal-de-denuncias/anonimato.webp"]) { margin-bottom: -8.67%; } /* el widget asoma 132px de 1742 */

  /* gestor-documental */
  #gd-rows [class*="__imageWrapper"]:has(img[src$="gestor-documental/row-ayudamos.webp"]) { margin-bottom: -7.39%; } /* el widget asoma 108px de 1703 */
  #gd-rows [class*="__imageWrapper"]:has(img[src$="gestor-documental/row-firma.webp"]) { margin-bottom: -20.79%; } /* el widget asoma 309px de 1407 */

  /* grandes-empresas */
  #ge-gestion [class*="__imageWrapper"]:has(img[src$="grandes-empresas/col-personalizacion.webp"]) { margin-bottom: -14.64%; } /* el widget asoma 211px de 1233 */

  /* incidencias-en-nominas */
  #in-anomalias [class*="__imageWrapper"]:has(img[src$="incidencias-en-nominas/image-left.webp"]) { margin-bottom: -5.41%; } /* el widget asoma 77px de 1356 */

  /* inteligencia-artificial-recursos-humanos */
  #ia-areas [class*="__imageWrapper"]:has(img[src$="inteligencia-artificial-recursos-humanos/row-comunicacion.webp"]) { margin-bottom: -7.47%; } /* el widget asoma 108px de 1674 */
  #ia-areas [class*="__imageWrapper"]:has(img[src$="inteligencia-artificial-recursos-humanos/row-reclutamiento.webp"]) { margin-bottom: -11.49%; } /* el widget asoma 182px de 1726 */
  #ia-areas [class*="__imageWrapper"]:has(img[src$="inteligencia-artificial-recursos-humanos/row-analytics.webp"]) { margin-bottom: -12.58%; } /* el widget asoma 188px de 1754 */

  /* medianas-empresas */
  #me-atencion [class*="__imageWrapper"]:has(img[src$="medianas-empresas/img4.webp"]) { margin-bottom: -5.79%; } /* el widget asoma 85px de 1079 */
  #me-escalar [class*="__imageWrapper"]:has(img[src$="medianas-empresas/img3.webp"]) { margin-bottom: -22.68%; } /* el widget asoma 288px de 1306 */

  /* people-analytics */
  #pa-anomalias [class*="__imageWrapper"]:has(img[src$="people-analytics/sistema-encuentra.webp"]) { margin-bottom: -7.47%; } /* el widget asoma 108px de 1682 */

  /* pequenas-empresas */
  #pe-datos [class*="__imageWrapper"]:has(img[src$="pequenas-empresas/img3.webp"]) { margin-bottom: -12.52%; } /* el widget asoma 172px de 1190 */

  /* programa-bolsa-horas-extras */
  #bh-rows [class*="__imageWrapper"]:has(img[src$="programa-bolsa-horas-extras/row-01.webp"]) { margin-bottom: -7.47%; } /* el widget asoma 112px de 1655 */
  #bh-rows [class*="__imageWrapper"]:has(img[src$="programa-bolsa-horas-extras/row-02.webp"]) { margin-bottom: -17.00%; } /* el widget asoma 255px de 1862 */
  #bh-rows [class*="__imageWrapper"]:has(img[src$="programa-bolsa-horas-extras/row-03.webp"]) { margin-bottom: -10.85%; } /* el widget asoma 160px de 1462 */

  /* retribucion-flexible */
  #rf-social [class*="__imageWrapper"]:has(img[src$="retribucion-flexible/list-right2.webp"]) { margin-bottom: -8.08%; } /* el widget asoma 140px de 1850 */

  /* software-control-de-gastos */
  #cg-funcionalidades [class*="__imageWrapper"]:has(img[src$="control-gastos/organiza.webp"]) { margin-bottom: -9.37%; } /* el widget asoma 119px de 1113 */
  #cg-funcionalidades [class*="__imageWrapper"]:has(img[src$="control-gastos/simplifica.webp"]) { margin-bottom: -7.87%; } /* el widget asoma 100px de 1292 */

  /* software-de-gestion-turnos */
  #tu-ia [class*="__imageWrapper"]:has(img[src$="software-de-gestion-turnos/ia-restaurante.webp"]) { margin-bottom: -5.82%; } /* el widget asoma 80px de 1634 */

  /* software-gestion-tareas */
  #ta-rentabilidad [class*="__imageWrapper"]:has(img[src$="tareas/rentabilidad.webp"]) { margin-bottom: -6.92%; } /* el widget asoma 96px de 1374 */

  /* software-rrhh-directores */
  #dir-mejora [class*="__imageWrapper"]:has(img[src$="people-analytics/entiende-equipo.webp"]) { margin-bottom: -10.00%; } /* el widget asoma 154px de 1866 */
  #dir-rows [class*="__imageWrapper"]:has(img[src$="software-rrhh-empleados/row-registros.webp"]) { margin-bottom: -23.51%; } /* el widget asoma 346px de 1384 */
  #dir-rows [class*="__imageWrapper"]:has(img[src$="software-seleccion-personal/agil.webp"]) { margin-bottom: -10.17%; } /* el widget asoma 159px de 1769 */
  /* retribucion-flexible */
  #rf-match [class*="__imageWrapper"]:has(img[src$="retribucion-flexible/image-right.webp"]) { margin-bottom: -10.23%; } /* el widget asoma 160px de 1770 */
  #rf-jugada [class*="__imageWrapper"]:has(img[src$="retribucion-flexible/list-right.webp"]),
  #rf-jugada-emp [class*="__imageWrapper"]:has(img[src$="retribucion-flexible/list-right.webp"]) { margin-bottom: -10.17%; } /* el widget asoma 159px de 1769 */
}

/* ============================================================
   EL CLAIM DE CLIENTES Y SU TIRA DE LOGOS, COMO UN SOLO BLOQUE
   (rev. Celia 18-sep)
   ============================================================
   Desde hoy la tira de logos va siempre debajo del claim de «N clientes
   satisfechos». Con los márgenes de serie quedaban a 233px el uno del otro y se
   leían como dos módulos sueltos; el claim cede su margen inferior (la tira ya
   trae 100px de padding propio) y los dos se leen juntos.

   Entre las dos secciones el componente puede emitir su <script> o su <style>,
   que cuentan como hermanos para `+`: se contemplan hasta dos. */
.v2-quote__quote:has(+ .v2-logostrip__logoStrip),
.v2-quote__quote:has(+ :is(script, style) + .v2-logostrip__logoStrip),
.v2-quote__quote:has(+ :is(script, style) + :is(script, style) + .v2-logostrip__logoStrip) {
  margin-bottom: 4rem;
}

/* El claim de clientes, con el mismo formato en todas partes (rev. Celia 18-sep).
   Hasta ahora cada landing repetía estas cuatro líneas en su <style> y las dos
   nuevas (onboarding y gestión de objetivos) salían con el formato de serie de
   la quote: alineada a la izquierda y más pequeña. Se define aquí una vez, y se
   reconoce el módulo por lo que lo define — una quote con la tira de logos
   pegada debajo. Las páginas que ya traían su regla propia mandan sobre esta
   (mismos valores, salvo algún max-width a medida). */
.v2-quote__quote:has(+ .v2-logostrip__logoStrip) .v2-quote__text,
.v2-quote__quote:has(+ :is(script, style) + .v2-logostrip__logoStrip) .v2-quote__text,
.v2-quote__quote:has(+ :is(script, style) + :is(script, style) + .v2-logostrip__logoStrip) .v2-quote__text {
  text-align: center;
  margin-inline: auto;
}
@media only screen and (min-width: 768px) {
  .v2-quote__quote:has(+ .v2-logostrip__logoStrip) .v2-quote__text,
  .v2-quote__quote:has(+ :is(script, style) + .v2-logostrip__logoStrip) .v2-quote__text,
  .v2-quote__quote:has(+ :is(script, style) + :is(script, style) + .v2-logostrip__logoStrip) .v2-quote__text {
    font-size: 9.2rem;
    font-weight: 600;
    line-height: 1.05;
    max-width: 125rem;
  }
}

/* ============================================================
   MÓVIL: TODAS LAS FOTOS DEL CARRUSEL DE MÓDULOS, DEL MISMO TAMAÑO
   (rev. Celia 18-sep)
   ============================================================
   La caja de cada card tomaba la proporción de SU imagen, así que en una misma
   pantalla convivían cajas de 320x208 y de 320x424 y el carrusel se leía
   desigual. Se fija la proporción de la referencia aprobada —la card de
   «Gestión del tiempo» de la home, 730x822— redondeada a 8/9: 320x360 a 375px.

   Y la imagen pasa a `contain`: de las 161 cards del sitio, 64 son capturas
   apaisadas (635x413) que, recortadas a 8/9, se quedarían en la franja central
   y perderían más de la mitad del ancho. Con `contain` la caja es la misma para
   todas y ninguna captura se corta; las verticales (0,88, que son las que
   mandan) llenan la caja igual que antes.

   El !important es porque el componente escribe `object-fit: cover` en el style
   del propio <img>, y un atributo style solo se gana así.

   En escritorio no se toca: ahí cada card mantiene la proporción de su imagen,
   que es lo que da el ritmo de alturas del diseño. */
@media only screen and (max-width: 767px) {
  .v2-featmodcarousel__media {
    height: auto;
    aspect-ratio: 8 / 9;
  }
  .v2-featmodcarousel__image {
    object-fit: contain !important;
  }
}


/* Las FOTOS llenan la caja; los mockups de producto y los lotties, no
   (rev. Celia 18-sep) —continuación del bloque de arriba.

   Con la caja ya unificada a 8/9, una foto contenida deja bandas de fondo y
   se ve más pequeña que sus vecinas: las fotos van a `cover` y se recortan
   como cualquier foto. Los mockups de producto se quedan en `contain`, que es
   donde el recorte sí se come la interfaz (una captura de 635x413 recortada a
   8/9 pierde más de la mitad del ancho), y los lotties tampoco se tocan.

   La lista sale de clasificar las 152 imágenes del carrusel en todo el sitio:
   es foto la que no tiene transparencia ni grandes zonas planas de color (los
   mockups son interfaz sobre fondo liso). Si se añade una card con foto nueva,
   hay que sumarla aquí.

   El !important, igual que arriba: el componente escribe el object-fit en el
   style del <img>. */
@media only screen and (max-width: 767px) {
  /* Round 2 · T3 — «estas imágenes se ven mal, se tienen que ver full height»
     (6 landings). Las fotos de abajo faltaban en esta lista, así que caían en el
     `contain` de arriba: son 1270x826 (ratio 1,54) dentro de la caja 8/9, o sea
     76px de banda arriba y abajo — el 42% de la caja en blanco. Medido en
     informes (#ir-ventajas).
     Salen de revisar las 57 imágenes de featmod de las 20 landings: 19 son
     apaisadas y estaban fuera de la lista, y de esas 17 son foto. Las otras dos
     (comunicacion-interna/module-actividad y de-gestion-turnos/module-actividades)
     son interfaz sobre fondo liso y se quedan en `contain` a propósito. */
  .v2-featmodcarousel__image[src$="canal-de-denuncias/blog-1.webp"],
  .v2-featmodcarousel__image[src$="canal-de-denuncias/blog-2.webp"],
  .v2-featmodcarousel__image[src$="canal-de-denuncias/blog-3.webp"],
  .v2-featmodcarousel__image[src$="canal-de-denuncias/card-4.webp"],
  .v2-featmodcarousel__image[src$="canal-de-denuncias/card-transparencia.webp"],
  .v2-featmodcarousel__image[src$="control-gastos/card-control.webp"],
  .v2-featmodcarousel__image[src$="control-gastos/slide3.webp"],
  .v2-featmodcarousel__image[src$="featured-modules-carousel/modules-carousel-03.webp"],
  .v2-featmodcarousel__image[src$="featured-modules-carousel/modules-carousel-04.webp"],
  .v2-featmodcarousel__image[src$="gestor-documental/card-cifrado.webp"],
  .v2-featmodcarousel__image[src$="gestor-documental/card-op-masivas.webp"],
  .v2-featmodcarousel__image[src$="gestor-vacaciones/mod-03.webp"],
  .v2-featmodcarousel__image[src$="gestor-vacaciones/mod-04.webp"],
  .v2-featmodcarousel__image[src$="inteligencia-artificial-recursos-humanos/module-analisis.webp"],
  .v2-featmodcarousel__image[src$="inteligencia-artificial-recursos-humanos/module-personalizacion.webp"],
  .v2-featmodcarousel__image[src$="kiosco/card-metodos.webp"],
  .v2-featmodcarousel__image[src$="kiosco/card-offline.webp"],
  .v2-featmodcarousel__image[src$="kiosco/card-suprema.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-construccion.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-fabricas.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-hosteleria.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-oficinas.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-retail.webp"],
  .v2-featmodcarousel__image[src$="kiosco/sector-sanitario.webp"],
  .v2-featmodcarousel__image[src$="modulos/intelligence-03.webp"],
  .v2-featmodcarousel__image[src$="modulos/nominas-03.webp"],
  .v2-featmodcarousel__image[src$="modulos/novedades-03.webp"],
  .v2-featmodcarousel__image[src$="modulos/novedades-04.webp"],
  .v2-featmodcarousel__image[src$="modulos/talento-03.webp"],
  .v2-featmodcarousel__image[src$="modulos/tiempo-03.webp"],
  .v2-featmodcarousel__image[src$="partners-distribuidor/carousel-03-experto.webp"],
  .v2-featmodcarousel__image[src$="partners-distribuidor/carousel-04-formate.webp"],
  .v2-featmodcarousel__image[src$="partners-integracion/tab4.webp"],
  .v2-featmodcarousel__image[src$="partners-referral/carousel-04-formate.webp"],
  .v2-featmodcarousel__image[src$="partners/card-distribuidor.webp"],
  .v2-featmodcarousel__image[src$="people-analytics/stat-costes.webp"],
  .v2-featmodcarousel__image[src$="people-analytics/stat-retencion.webp"],
  .v2-featmodcarousel__image[src$="software-comunicacion-interna/module-conversaciones.webp"],
  .v2-featmodcarousel__image[src$="software-comunicacion-interna/module-inteligente.webp"],
  .v2-featmodcarousel__image[src$="software-control-horario/mod-03-inspeccion.webp"],
  .v2-featmodcarousel__image[src$="software-control-horario/mod-04.webp"],
  .v2-featmodcarousel__image[src$="software-de-gestion-turnos/module-vistas.webp"],
  .v2-featmodcarousel__image[src$="software-informes-rrhh/benef-01.webp"],
  .v2-featmodcarousel__image[src$="software-informes-rrhh/benef-02.webp"],
  .v2-featmodcarousel__image[src$="software-informes-rrhh/benef-03.webp"],
  .v2-featmodcarousel__image[src$="software-informes-rrhh/pot-03.webp"],
  .v2-featmodcarousel__image[src$="software-informes-rrhh/pot-04.webp"],
  .v2-featmodcarousel__image[src$="software-recursos-humanos/incrementa.webp"],
  .v2-featmodcarousel__image[src$="software-recursos-humanos/optimiza.webp"],
  .v2-featmodcarousel__image[src$="software-rrhh-asesorias/card1.webp"],
  .v2-featmodcarousel__image[src$="software-rrhh-asesorias/card2.webp"],
  .v2-featmodcarousel__image[src$="software-rrhh-asesorias/card3.webp"],
  .v2-featmodcarousel__image[src$="software-rrhh-asesorias/card4.webp"],
  .v2-featmodcarousel__image[src$="software-rrhh-asesorias/card5.webp"],
  .v2-featmodcarousel__image[src$="software-seleccion-personal/ciclo-comunicacion.webp"],
  .v2-featmodcarousel__image[src$="software-seleccion-personal/ciclo-conversion.webp"],
  .v2-featmodcarousel__image[src$="software-seleccion-personal/sector-salud.webp"],
  .v2-featmodcarousel__image[src$="software-seleccion-personal/sector-tech.webp"],
  .v2-featmodcarousel__image[src$="software-seleccion-personal/sector-temporada.webp"],
  .v2-featmodcarousel__image[src$="teletrabajo/recurso-1.webp"],
  .v2-featmodcarousel__image[src$="teletrabajo/recurso-2.webp"],
  .v2-featmodcarousel__image[src$="teletrabajo/recurso-3.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/team-marketing.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/team-rrhh.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/team-ventas.webp"],
  /* Las tres team-*.webp se renombraron a equipo-*.webp y se sumaron otras tres
     al dar una foto propia a cada departamento, así que estas seis se habían
     quedado fuera de la lista y volvían al `contain`: 1270x826 dentro de la caja
     8/9 son 76px de banda arriba y abajo (rev. móvil, 20-oct-2026). */
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-finanzas.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-marketing.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-operaciones.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-producto.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-rrhh.webp"],
  .v2-featmodcarousel__image[src$="trabaja-con-nosotros/equipo-ventas.webp"],
  .v2-featmodcarousel__image[src$="transporte-logistica/card1.webp"],
  .v2-featmodcarousel__image[src$="transporte-logistica/card3.webp"] {
    object-fit: cover !important;
  }
}

/* ============================================================
   XL: LOS CARRUSELES, EN EL EJE DEL TEXTO
   (rev. Celia 21-sep)
   ============================================================
   El 16-sep el contenedor dejó de ser 1580px fijos por encima de 1921 y pasó al
   82,94% (regla de arriba). Los carruseles a sangre calculan su margen de
   entrada con la fórmula vieja —(100vw − 1580px) / 2— así que a partir de ahí
   las cards entraban más adentro que el texto: 157px medidos a 2283, 272 a 2560.
   Se les da el mismo margen que al contenedor. Por debajo de 1921 no cambia
   nada: allí la fórmula de siempre y el contenedor coinciden. */
/* Nota: los 6px que quedan a 2283 y 2560 son la barra de scroll, que cuenta en
   100vw pero no en el ancho disponible del contenedor. Se intentó descontarla
   con el truco de `calc(100vw - 100%)` en el body y NO vale aquí: una variable
   se sustituye como texto, así que ese 100% se resuelve contra el ancho del
   propio carrusel (100vw) y da 0 — y de paso invalidaba el max() entero y las
   cards se iban a 8rem. En macOS, con barra flotante, la desviación es 0. */
@media only screen and (min-width: 1921px) {
  .v2-featmodcarousel__trackContainer,
  .v2-featfeatcarousel__trackContainer,
  .v2-coursescarousel__trackContainer {
    --track-edge-offset: max(8rem, calc((100vw - min(82.94vw, 2200px)) / 2));
  }
}

/* Stepper-cards en XL (rev. Celia 21-sep): el texto de la card se queda
   proporcionado como en el resto de anchuras.

   La descripción tiene un tope de 35rem, y el rem se congela en 10px a partir
   de 1580, así que por encima de 1921 —donde el contenedor pasa al 82,94% y la
   card crece de 388 a 488px— ese tope se queda clavado en 350: el texto pasa de
   ocupar el 90% de la card al 72%, se estrecha y gana una línea. En «Seguridad
   legal», que es la de copy más largo, esa línea de más lo descolocaba respecto
   a las otras tres (120px de alto contra 90). Con el tope en 90% la proporción
   es la misma a 1440, a 1920 y a 2560. */
@media only screen and (min-width: 1921px) {
  .v2-steppercards__cardDescription { max-width: 90%; }
}

/* El lottie del bloque 50/50, también en móvil (rev. Celia 21-sep).
   El DS lo esconde por debajo de 768 —`display: none`— aunque el componente
   acepta medidas propias para móvil y la home se las pasa: por eso los mensajes
   sobre la mano salían en escritorio y no en el móvil.

   Se muestra solo cuando la página declara esas medidas; el resto de bloques
   50/50, que no las pasan, siguen como estaban.

   Y el contenedor de la imagen deja de ser `display: contents` en ese caso: sin
   caja propia, el lottie se posicionaba contra la SECCIÓN entera (375x1086) en
   vez de contra la foto (345x576), así que los mismos porcentajes que en
   escritorio caían en otro sitio. Como bloque posicionado, el % significa lo
   mismo en las dos versiones. */
@media only screen and (max-width: 767px) {
  .v2-twocolumn5050__imageWrapper:has(> [data-lottie-mobile-width]:not([data-lottie-mobile-width=""])) {
    display: block;
    position: relative;
    /* La columna es flex en movil: sin ancho explicito el contenedor se encoge
       al contenido y la foto, que va al 100% de el, se quedaba en 0. */
    width: 100%;
  }
  .v2-twocolumn5050__lottieOverlay[data-lottie-mobile-width]:not([data-lottie-mobile-width=""]) {
    display: block;
  }
}

/* Tira del mosaico del hero, más pequeña en móvil (rev. Celia 21-sep).
   La variante de imagen; la de animación lleva su propio ajuste en el partial
   (components/v2/partials/mosaic.php), que es donde vive su CSS. */
@media only screen and (max-width: 767px) {
  .v2-mosaic__tira img { height: 20rem; }
}

/* Los dos CTA del hero de la home, uno al lado del otro también en móvil
   (rev. Celia 21-sep). El DS los apila por debajo de 768 y estiraba el oscuro
   a todo el ancho; en una pantalla de 375 caben en fila. */
@media only screen and (max-width: 767px) {
  .v2-heroimagehome__buttons {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.6rem;
  }
  .v2-heroimagehome__buttons button { width: auto; }
}

/* ============================================================
   SCROLL-REVEAL EN MÓVIL: FOTOS PEQUEÑAS FLOTANDO, NO DE FONDO
   (rev. Celia 21-sep, referencia de Figma)
   ============================================================
   El DS resolvía el móvil escondiendo la columna izquierda y estirando la
   derecha a fondo de pantalla con un velo negro al 55%: las palabras iban en
   blanco sobre la foto. La referencia nueva es otra cosa — palabras sobre el
   fondo claro y dos fotos pequeñas asomando, una arriba a la derecha y otra a
   media altura a la izquierda — así que se deshace el fondo y las dos columnas
   pasan a ser tarjetas.

   Van en posición absoluta sobre la sección (que ya es el contenedor pineado)
   y en % del ancho, así que acompañan a cualquier tamaño de pantalla. Fuera de
   la columna de palabras, que es estrecha y va centrada: no se pisan. */
@media only screen and (max-width: 767px) {
  .v2-scrollreveal__imageColBottom {
    position: absolute;
    inset: auto;
    right: 0;
    top: 14%;
    width: 28%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 3.4;
    /* Sin redondear (rev. Celia 21-sep): el DS le ponia 1rem cuando la foto era
       el fondo de la seccion; como tarjeta suelta va a canto vivo. */
    border-radius: 0;
    overflow: clip;
    z-index: 0;
  }
  /* El velo negro era para leer las palabras encima de la foto; ya no hay foto
     detrás de ellas. */
  .v2-scrollreveal__imageColBottom::after { display: none; }

  .v2-scrollreveal__imageColTop {
    display: block;
    position: absolute;
    inset: auto;
    left: 0;
    top: 52%;
    width: 25%;
    height: auto;
    max-width: none;
    aspect-ratio: 4 / 4.6;
    border-radius: 0;
    overflow: clip;
    z-index: 0;
  }

  /* Sobre fondo claro, el texto vuelve al color del resto del sitio. */
  .v2-scrollreveal__word { color: #25292e; }
  .v2-scrollreveal__cta { color: #25292e; }
}

/* StepperCards: el hueco entre el bloque de título y el primer paso pasa a ser
   el mismo que el del accordion de «5 formas de fichar» (10rem). Allí lo pone
   de una vez .v2-accordion__accordionOuter; aquí se reparte entre el margen del
   título (11.5rem en el DS) y los 4rem que ya lleva el container, así que el
   título se queda con lo que falta para sumar 10rem: 15.5rem → 10rem.
   Solo escritorio: en móvil los dos bloques van como slider y el hueco no se
   mide igual. */
@media (min-width: 768px) {
  .v2-steppercards__contentTitle {
    margin-bottom: 6rem;
  }
}

/* La cita de clientes de la home va en semibold (el componente de cita pinta
   500 para todas; aquí manda el diseño de este bloque). Acotada al id: las
   demás citas v2 —la larga de la home incluida— se quedan como están. */
#home-clientes .v2-quote__text {
  font-weight: 600;
}

/* Formulario de contacto: la primera fila arranca a la altura ÓPTICA del titular
   (petición de diseño 23-sep). La columna de texto lleva 2,8rem de padding-top del
   DS y el form no, así que el primer campo salía 28px por encima del H1; y aun
   igualando cajas seguía viéndose alto, porque la mayúscula del titular empieza
   8,9px por debajo del borde de su caja (56px de cuerpo con 59,36 de interlineado).
   Los 3,7rem son esos 2,8 + 0,9: el borde del primer campo cae justo en la altura
   de la primera mayúscula. Va en rem para que acompañe al titular cuando el cuerpo
   escala con el ancho.

   El :has() acota la regla a los formularios que van AL LADO de un titular. En
   /registro/ la columna izquierda es una foto (no hay heading) y el form vive
   dentro de una tarjeta con su propio relleno: ahí no entra. En móvil tampoco,
   que el form va debajo y no al lado. */
@media (min-width: 768px) {
  .v2-contactform__grid:has(> .v2-contactform__content > .v2-contactform__heading) > .v2-contactform__form {
    padding-top: 3.7rem;
  }
}

/* ===== Round 2 · T1 — carruseles: con 3 cards o menos, que se vean enteras =====
   «Cuando solo hay 3 cards, deben aparecer y verse sin necesitar de ir hacia la
   derecha. Los botones de navegación no deberían salir, solo cuando hayan 4.»

   Las flechas NO estaban mal programadas: salían porque había overflow de verdad.
   El track mide 174rem fijos (3 cards × 50 + 2 gaps × 4 + 2 márgenes × 8) y el
   diseño da por hecho que 174rem == 100vw. Eso solo es cierto mientras el rem es
   fluido (--size: 1740, v2-base.css). En los dos tramos donde el rem se queda
   clavado, el track se sale del viewport:
       768–1002px (rem 5.76px) → track 1002px, hasta +234px de sobra
      1580–1740px (rem 10px)   → track 1740px, hasta +160px de sobra
   Por eso a 1440px se veía bien y a 1680px no: no es el número de cards, es el rem.

   Con 3 o menos dejamos que las cards encojan hasta caber, con tope en su ancho
   de diseño (50rem) para no estirarlas cuando sobra sitio. Las flechas se ocultan
   solas: el JS mide maxTranslate, al no haber overflow entra en «nav idle» y las
   pone en display:none. Aquí solo se esconde su contenedor, que si no se queda
   ocupando su margin-top de 4rem en blanco.

   Solo desktop: en móvil 3 cards siguen yendo a swipe, que es lo correcto ahí. */
@media only screen and (min-width: 768px) {
  .v2-featfeatcarousel__fits .v2-featfeatcarousel__track {
    width: 100%;
  }

  .v2-featfeatcarousel__fits .v2-featfeatcarousel__card {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: 50rem;
  }

  .v2-featfeatcarousel__fits div.v2-featfeatcarousel__controls {
    display: none;
  }
}

/* ===== Round 2 · T1 — la barra de dots: misma distancia y botón pegado =====
   «Revisar que todos los dots tengan siempre la misma distancia respecto a las
   cards, creo que este está muy pegado» + «el botón está desconectado».

   El margen de la fila ya era 24px en todos los componentes (statsfigures era
   el único en 28 y se ha igualado en el propio componente). Lo que cambiaba la
   distancia VISUAL era otra cosa: el hint de la mano mide 65px de alto y los
   dots van centrados en la fila, así que un bloque con hint deja los dots a
   52px de las cards y uno sin hint a 23px. Medido en people-analytics: featfeat
   y courses a 52, featmod a 23. Por eso al bajar por una misma página la
   distancia «baila».

   El arreglo de fondo es que el hint va siempre (v2_swipe_lottie, que es lo que
   pedía la nota de Diseño en la misma frase). Este min-height es la red: si un
   bloque se queda sin hint —una template que lo anule, el lottie que no cargue—
   la fila conserva su alto y los dots no suben. */
@media only screen and (max-width: 767px) {
  .v2-bulletnav__dotsRow {
    min-height: 6.5rem;
  }

  /* benefitslist se quedaba 15px por debajo del resto (dots a 67px de las cards
     en vez de a 52). No era su margen —24px, como todos— sino que su
     __gridContainer es un display:grid con gap 15px, y ese row-gap se suma al
     margen de la fila. Sus dos unicos hijos son el grid de cards y la fila de
     dots, asi que anular el row-gap solo afecta a ese hueco y deja que lo marque
     el margen, igual que en los demas componentes. */
  .v2-benefitslist__gridContainer {
    row-gap: 0;
  }

  /* El CTA colgaba a 4.8rem de los dots y se leía como un elemento suelto
     («el botón está flotando», «está desconectado»). Se pega al bloque con el
     mismo ritmo que hay entre las cards y los dots. Solo móvil: en desktop la
     fila de dots no existe y el 4.8rem original es el que separa el CTA del
     grid de 3 columnas. */
  .v2-benefitslist__footer {
    margin-top: 2.4rem;
  }
}

/* ===== Round 2 · T3 — la foto tiene que llenar la esquina de la tarjeta =====
   «Las esquinas salen mal, la foto debe rellenar la esquina» (evaluación del
   desempeño) y «la foto debe rellenarse en las esquinas» (turnos).

   Es un descuadre entre dos radios que tienen que ir juntos. En el bloque de
   recursos la foto vive dentro de la tarjeta, y cada una redondea por su lado:

       .v2-resourcesdownload__card         3.6rem en desktop, 1.4rem en móvil
       .v2-resourcesdownload__columnMedia  3.6rem en desktop, 3.6rem en móvil

   En desktop coinciden y se ve bien. En móvil la tarjeta bajó a 1.4rem y la foto
   se quedó en los 3.6rem de escritorio: la foto se curva mucho antes que la
   tarjeta y en la esquina asoma el fondo oscuro de la card. Medido en turnos
   (#tu-app): 36px de radio de foto contra 14px de tarjeta.

   Se igualan. Si alguna vez cambia el radio de la tarjeta en móvil, este tiene
   que moverse con él. */
@media only screen and (max-width: 767px) {
  .v2-resourcesdownload__columnMedia {
    border-radius: 1.4rem 1.4rem 0 0;
  }
}

/* ===== Round 2 · T6 — los lotties de las cards, un 15% más pequeños =====
   «Hay que reducir el tamaño de estos lotties, deben tener margen con el
   título» (people analytics), «reducir los lotties para que haya margen y
   respiren mejor» (gestión de tareas), «estos lotties son demasiado grandes»
   (canal de denuncias).

   El contenedor ocupa la caja de la card de borde a borde (inset: 0 en el
   componente), así que un dibujo que llegue al borde de su artboard toca el
   título que va justo debajo. Se reduce al 85%, que es el criterio que dio
   Diseño (27-sep) y el mismo valor que #clima-mide ya tenía puesto a mano.

   POR QUÉ VA AQUÍ Y NO EN CADA TEMPLATE: las secciones que ya se ajustaron en
   su día llevan su propia regla con el id delante —#cd-gestion-cards,
   #pa-estrategico, #clima-mide, #ong-modulos, #ge-porque, #me-nivel,
   #ceo-otras, #dir-otras, #rt-plataforma, #ind-retos, #emendu-rrhh-it— y esas
   ganan por especificidad (1,1,0 contra 0,1,0). Así que conservan su valor sin
   tener que tocarlas, y esto solo alcanza a las que nunca se ajustaron.

   OJO, SOLO EL CARRUSEL. No se toca .v2-twocolsimagetext__lottie ni
   .v2-twocolsiconlist__lottie: esos se colocan con width/x/y en porcentaje
   medidos contra la foto (ver image_lottie), así que escalarlos los sacaría
   de su sitio — justo lo que se acaba de cuadrar en evaluación y bolsa. */
.v2-featfeatcarousel__lottie {
  transform: scale(0.85);
  transform-origin: center center;
}

/* ===== Round 2 · T6 (2) — y centrados en su espacio blanco =====
   Segundo criterio de Diseño (27-sep) sobre la misma tarea: además de
   reducirlos, «que se centren en su espacio blanco».

   AQUÍ NO HAY NADA QUE HACER, Y ES A PROPÓSITO. Reducir no centra: el .json se
   encaja en la caja 4:3 de la card con 'meet', así que lo que queda centrado es
   el ARTBOARD, no el dibujo que lleva dentro. Un dibujo alto dentro de su
   artboard sigue alto después de escalarlo, solo que más pequeño.

   Eso se corrigió primero desde aquí, con un translate por fichero, y luego se
   llevó al sitio que le toca: los 28 .json que estaban descuadrados se
   recolocaron por dentro (28-sep) y las reglas de CSS se retiraron. Si vuelven
   a hacer falta, el problema es del asset y hay que arreglarlo allí — si se
   corrigen los dos sitios a la vez, el dibujo se mueve el doble.

   Cómo se midió, por si hay que repetirlo: cada .json renderizado en un canvas
   de 200x150 (la relación de la caja), muestreando 9 fotogramas de toda la
   animación y quedándose con la envolvente de lo que se pinta — alfa para los
   transparentes y diferencia contra el blanco para los que traen fondo opaco.
   El desvío es del centro de esa envolvente al centro de la caja. De los 66
   lotties de carrusel, 38 ya estaban centrados (menos de un 2%) y 28 no. */

/* Swipe lateral que «te lleva a otra página» en táctil (oct-2026). Al deslizar en
   horizontal sobre un carrusel —o en cualquier punto— y llegar al tope, el gesto
   se escapa al navegador, que lo interpreta como atrás/adelante del historial.

   `overscroll-behavior-x: none` en la raíz apaga esa navegación por gesto (y el
   rebote lateral) sin tocar el scroll vertical. En los contenedores con scroll
   horizontal propio va `contain`: al llegar al final del carrusel el gesto muere
   ahí en vez de encadenarse a la página.

   Límite conocido: en iPhone/iPad el «atrás» deslizando desde el BORDE de la
   pantalla es un gesto del sistema y ninguna web puede bloquearlo. Esto corta el
   caso que se reporta: el swipe que empieza dentro del carrusel. */
html,
body {
  overscroll-behavior-x: none;
}
[class*="v2-"][class*="carousel"],
[class*="v2-"][class*="__track"],
[class*="v2-"][class*="slider"],
.hm-tabs,
.v2-statsfigures__viewport,
.v2-benefitslist__grid {
  overscroll-behavior-x: contain;
}

/* ===== Arreglos de sq1 (plan de migración, fase 4) ===== */
/* Hero: titular e imagen visibles desde el primer pintado (auditoria SEO de la
   migracion, C-08). El DS dejaba el titular a opacity 0 y GSAP lo hacia aparecer
   linea a linea, igual que la imagen: Chrome no los cuenta como LCP mientras estan
   transparentes, y el LCP movil se iba a 9,3-9,7 s (la clasica, ~4 s). Ahora se ven
   en cuanto se pintan y entran con una subida corta por CSS, que no espera a que
   carguen las librerias. Comparativa en video validada con Joan el 8-oct-2026. */
/* El DS deja a opacity 0 el titular (v2-base.css) y el envoltorio de la imagen
   (v2-components.css): los dos se ven sin esperar a GSAP. */
.v2-hero__title,
.v2-hero__imageWrapper { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .v2-hero__title { animation: v2HeroEntra 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
  .v2-hero__imageWrapper { animation: v2HeroEntraImagen 0.8s cubic-bezier(0.215, 0.61, 0.355, 1) 0.1s both; }
}
@keyframes v2HeroEntra { from { transform: translateY(1.5rem); } to { transform: none; } }
@keyframes v2HeroEntraImagen { from { transform: translateY(4rem); } to { transform: none; } }

/* Pie v2: «Preferencias de cookies» es un <button> (reabre CookieYes, no navega).
   Hereda la tipografía y el color de .v2-footer__navLink; aquí solo se quita la piel de botón. */
.v2-footer__navLink--boton {
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
}


/* Formularios de HubSpot en las páginas v2 (lista maestra del GO, B1): el mismo formulario
   que la página clásica, con la piel del DS. Generalizado de la ficha de Integraciones
   (template-v2-integracion.php, que mantiene su copia con #hero). Campos blancos de 4,8rem,
   label como placeholder (la pone v2-hs-form.js), checkbox y botón píldora #415bff. */
.v2-hsform { width: 100%; }
.v2-hsform form { display: flex; flex-direction: column; gap: 3rem; }
.v2-hsform fieldset { max-width: none; border: 0; margin: 0; padding: 0; }
.v2-hsform fieldset.form-columns-2 { display: flex; gap: 1.6rem; }
.v2-hsform fieldset.form-columns-2 .hs-form-field { width: 100%; float: none; }
/* En móvil las dos columnas se apilan. A 390px cada campo se quedaba en 172px y
   dentro caben 140: el texto de ejemplo, que aquí hace de etiqueta, salía cortado
   —«Nombre de la emp…», «¿Cuál es tu rol e…»— y el campo dejaba de decir qué pide.
   Medido: «Nombre de la empresa*» necesita 184px a 1.8rem (rev. móvil, 20-oct-2026).
   Los hijos ya van a width:100%, así que en columna ocupan el ancho entero. */
@media only screen and (max-width: 767px) {
  .v2-hsform fieldset.form-columns-2 { flex-direction: column; }
}
.v2-hsform .hs-form-field { margin: 0; }
.v2-hsform .hs-form-field .input { margin-right: 0 !important; }
/* Labels fuera de la vista (el texto va como placeholder, Figma); accesibles */
.v2-hsform .hs-form-field > label {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.v2-hsform input[type="text"],
.v2-hsform input[type="email"],
.v2-hsform input[type="tel"],
.v2-hsform input[type="number"],
.v2-hsform select,
.v2-hsform textarea {
  width: 100% !important;
  height: 4.8rem;
  border: 0.1rem solid transparent;
  border-radius: 0.6rem;
  background-color: #fff;
  padding: 0 1.6rem;
  font: normal 400 1.8rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #25292e;
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
/* El campo de archivo se quedaba fuera de la piel del formulario: salía como
   control nativo del navegador —21px de alto contra los 48 del resto, sin borde
   ni fondo, con su «Elegir archivos / Ningún archivo seleccionado»— y además
   18px más corto, porque arrastra el width:95% que HubSpot da a .hs-input
   (rev. móvil, 20-oct-2026). Misma caja que los demás campos, y el botón
   interno vestido aparte. Se ve en el formulario de ONGs. */
.v2-hsform input[type="file"] {
  width: 100% !important;
  min-height: 4.8rem;
  border: 0.1rem solid transparent;
  border-radius: 0.6rem;
  background-color: #fff;
  padding: 1.2rem 1.6rem;
  font: normal 400 1.6rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #25292e;
  box-sizing: border-box;
}
.v2-hsform input[type="file"]::file-selector-button {
  margin-right: 1.2rem;
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid #e3e3e6;
  border-radius: 99rem;
  background: #f5f5f7;
  font: inherit;
  color: #25292e;
  cursor: pointer;
}

.v2-hsform ::placeholder { color: #666; opacity: 1; }
/* Selects: color placeholder hasta que tienen valor (clase por JS) + chevron 16px */
.v2-hsform select { color: #666; }
.v2-hsform select.v2-hsform--lleno { color: #25292e; }
.v2-hsform select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none'%3E%3Cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.6rem center;
  padding-right: 4rem;
}
.v2-hsform textarea { height: auto; min-height: 10rem; padding: 1.4rem 1.6rem; }
.v2-hsform input:focus,
.v2-hsform select:focus,
.v2-hsform textarea:focus { border-color: #415bff; }
.v2-hsform .hs-error-msgs { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.v2-hsform .hs-error-msgs label {
  position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal;
  font: normal 400 1.2rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #e5484d;
}
/* Legal + checkbox (Figma: cuadrado 16px + texto 16px #666 con enlaces subrayados) */
.v2-hsform .inputs-list { list-style: none; margin: 0; padding: 0; }
.v2-hsform .legal-consent-container,
.v2-hsform .legal-consent-container p,
.v2-hsform .hs-form-booleancheckbox label {
  font: normal 400 1.6rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666; margin: 0;
}
.v2-hsform .hs-form-booleancheckbox label {
  display: flex; gap: 1.2rem; align-items: flex-start; cursor: pointer;
}
.v2-hsform .hs-form-booleancheckbox label p { margin: 0; font: inherit; color: inherit; }
.v2-hsform .legal-consent-container a,
.v2-hsform .hs-form-booleancheckbox a { color: #666; text-decoration: underline; }
.v2-hsform input[type="checkbox"] {
  -webkit-appearance: none; appearance: none;
  width: 1.6rem; height: 1.6rem; flex: 0 0 auto; margin: 0.3rem 0 0;
  border: 0.1rem solid #999; border-radius: 0.3rem; background: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.v2-hsform input[type="checkbox"]::before {
  content: ""; width: 0.8rem; height: 0.8rem; background: #415bff;
  transform: scale(0); transition: transform 0.15s ease-in-out;
}
.v2-hsform input[type="checkbox"]:checked { border-color: #415bff; }
.v2-hsform input[type="checkbox"]:checked::before { transform: scale(1); }
/* Submit (Figma "Link" 2254:1523): pill #415bff, hug content */
.v2-hsform .hs-submit .actions { margin: 0; padding: 0; }
.v2-hsform .hs-button {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; align-self: flex-start;
  border: 0; border-radius: 5rem; padding: 1.3rem 2.4rem;
  background-color: #415bff; color: #fff;
  font: normal 500 1.8rem/normal "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.v2-hsform .hs-button:hover { background-color: #25292e; }
/* Variante 'boton': la clásica llevaba a otra web; el botón ocupa la columna del form. */
.v2-contactform__form--boton { display: flex; align-items: flex-start; }
/* Casilla con el texto en un <legend> aparte (p. ej. «Comercializo otras soluciones» del
   form de partners): casilla a la izquierda y texto al lado, como la casilla legal. */
.v2-hsform .hs-fieldtype-booleancheckbox:has(> legend) { display: flex; gap: 1.2rem; align-items: flex-start; }
.v2-hsform .hs-fieldtype-booleancheckbox > legend {
  order: 2; margin: 0; padding: 0;
  font: normal 400 1.6rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #666;
}
.v2-hsform .hs-fieldtype-booleancheckbox:has(> legend) > .input { order: 1; }
/* Bloques de texto del propio form de HubSpot («Cuéntanos sobre ti») */
.v2-hsform .hs-richtext, .v2-hsform .hs-richtext p, .v2-hsform .hs-richtext h1,
.v2-hsform .hs-richtext h2, .v2-hsform .hs-richtext h3, .v2-hsform .hs-richtext h4 {
  margin: 0; font: normal 500 1.8rem/1.3 "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; color: #25292e;
}
/* Grupos de HubSpot que solo llevan campos ocultos (utm, utm_*, create_deal…): fuera del
   flujo para que no sumen huecos. display:none no impide que se envíen. */
.v2-hsform form > fieldset:not(:has(input:not([type="hidden"]), select, textarea, .hs-richtext)),
.v2-hsform form > .hs_submit + fieldset:empty { display: none; }

/* Home: titular visible desde el primer pintado (auditoría C-08 en la home, 16-oct-2026).
   El DS lo deja a opacity 0 y lo descubría GSAP tras cargar todas las fuentes. */
.v2-heroimagehome__title { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .v2-heroimagehome__title { animation: v2HeroEntra 0.6s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
}


/* ============================================================
   MEGA MENÚ REDISEÑADO — traído de sq1 (21-26 oct 2026)
   ============================================================
   Todo lo de aquí abajo es copia literal de assets/css/v2/v2-wp.css de sq1:
   las reglas del rediseño del mega menú (maestro-detalle, módulos de
   Plataforma y Sobre nosotros, destacados, franjas de cierre, menú móvil por
   niveles). Va al final para ganar a las reglas antiguas del menú que este
   fichero aún tiene. Para traer un ajuste nuevo de sq1, se sustituye el
   bloque entero. El HTML que pintan estas reglas es components/v2b/header.php
   con los datos de inc/v2b-megamenu.php. */

/* Hover del destacado: el título se queda en blanco (sq1, 23-oct). */
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__featuredImageCard:hover .v2-megamenu__featuredImageTitle { color: #ffffff; }
}

/* El NEW vuelve al blanco: su fondo es el degradado animado desde el 22-oct. */
.v2-megamenu__badge.v2-megamenu__badgeNuevo {
  color: #ffffff;
}

@media only screen and (min-width: 1024px) {
  /* Funcionalidades lleva destacado (Sesame IT) y 4 columnas: el layout con
     destacado del DS solo prevé 3, y la cuarta bajaba sola a otra fila. El
     hueco del destacado va a su ancho real (la tarjeta mide más que los 18rem
     del DS y, centrada a la derecha, pisaba la cuarta columna) y las columnas
     encogen en lo que queda. */
  .v2-megamenu__linkColumnsFeatured:has(.v2-megamenu__linkColumns > :nth-child(4)) {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .v2-megamenu__linkColumnsFeatured .v2-megamenu__linkColumns:has(> :nth-child(4)) {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
    max-width: none;
    gap: 2.4rem 1.6rem;
    margin-right: 0;
  }
}

/* ============================================================
   MEGA MENÚ: JERARQUÍA VISIBLE
   (rev. 22-oct-2026)
   ============================================================
   El título de columna medía 1.7rem/500 y los enlaces 1.65rem/400, los dos en
   #25292e: 0.05rem y un paso de peso de diferencia, así que la columna se leía
   como un bloque plano, sin principio. Aquí se separan los tres niveles —icono,
   título, enlaces— con color, peso y tamaño, no solo con espacio.

   El selector deja fuera el overlay móvil y el selector de países, que comparten
   las mismas clases pero son otra cosa. Va escrito entero en cada regla porque
   este CSS no pasa por ningún preprocesador. */

/* 1 — El icono del título pasa a caja de color. Era un trazo gris de 2rem que
   apenas se veía; ahora es lo primero que encuentra el ojo al abrir el panel.
   Los SVG traen stroke="#25292E" incrustado, así que hay que repintarlos. */
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitleIcon {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eef1ff 0%, #e2e7ff 100%);
}
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitleIcon path {
  stroke: #415bff;
}
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitle--conIcono {
  gap: 1.2rem;
}

/* 2 — El título manda: sube a 1.9rem/700 y se queda en el oscuro de marca.

   Hubo aquí un `min-height` de dos líneas, de cuando «Gestión de empleados» no
   cabía en una. Desde que la columna se estira hasta su celda (regla 11) los
   cuatro títulos caben de sobra y esa reserva solo dejaba un hueco muerto entre
   el título y el primer enlace: fuera el 22-oct.

   Se queda el `align-items: flex-start`, que con una línea no cambia nada y
   mantiene el icono a la altura de la primera si algún título se parte en los
   anchos justos. Ojo: si vuelve el copy de la fase 1 —«Administración de
   personal», «Por equipo y responsabilidad»— los títulos caen en dos líneas y
   las listas arrancarán a alturas distintas. Ahí tocará recuperar la reserva. */
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitle {
  font-size: 1.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 1.8rem;
  align-items: flex-start;
}

/* 3 — Los enlaces bajan de contraste para no competir con el título, y ganan
   cuerpo al pasar por encima: pastilla de fondo y un empujón de 3px. La
   pastilla se ciñe al texto porque el enlace es inline-flex.

   Cuadre de la sangría: el icono mide 3.4rem y el hueco 1.2rem, así que el
   texto del título empieza en 4.6rem. La lista va a 3.6rem y el enlace se
   queda 1rem de padding — 3.6 + 1 = 4.6rem, el mismo sitio. */
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitle--conIcono + .v2-megamenu__linkList {
  padding-left: 3.6rem;
}
/* Si a una columna le faltara el icono (el SVG se busca por el slug del título),
   la lista no lleva sangría y ese padding se compensa con margen. */
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnTitle:not(.v2-megamenu__columnTitle--conIcono) + .v2-megamenu__linkList {
  margin-left: -1rem;
}
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnLink {
  color: #5a6472;
  font-size: 1.7rem;
  padding: 0 1rem;
  border-radius: 0.8rem;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__columnLink:hover:hover {
    color: #415bff;
    background-color: #eef1ff;
    transform: translateX(3px);
  }
}

/* 4 — La pestaña abierta se marca en el navbar: hasta ahora el único indicio de
   qué panel estabas viendo era la flechita girada. */
.v2-header__megaTriggerActive .v2-header__headerNavLinkText,
.v2-header__megaTriggerActive {
  color: #415bff;
}

/* 5 — Los badges iban a 1rem y a ese tamaño «NEW» y «TREND» no se leen de
   pasada. Suben de cuerpo y se despegan del texto. */
.v2-megamenu__badge {
  padding: 0.35rem 0.8rem;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
}

/* 6 — Aquí hubo un suelo de 20rem para que el panel no saltara de alto al
   cambiar de pestaña. Fuera el 22-oct: «Plataforma» son tres cards y con el
   suelo pasaba de ser un panel bajito a uno alto y vacío, que se veía peor que
   el salto que arreglaba. Si algún día «Plataforma» se rellena, se puede
   recuperar. */

/* 7 — Separadores entre columnas. Van como pseudo-elemento dentro del hueco de
   la rejilla, no como borde de la columna: la columna mide 22rem fijos dentro
   de una celda de 1fr y un borde con su padding la haría desbordar. Solo a
   partir de 1024px, que es donde el hueco entre columnas es estable. */
.v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__linkColumn {
  position: relative;
}
@media only screen and (min-width: 1024px) {
  .v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__linkColumn + .v2-megamenu__linkColumn::before {
    content: "";
    position: absolute;
    top: 0.2rem;
    bottom: 0.2rem;
    left: -1.6rem;
    width: 1px;
    background-color: #e8ecf5;
  }
}

/* 8 — Franja de cierre del panel (v2_mega_cierre). El fondo sale a sangre con
   un pseudo-elemento que se desborda a los dos lados y recorta el propio panel
   (tiene overflow:hidden). Con márgenes negativos no valía: a partir de 1024px
   el panelInner lleva padding-left: calc(9% + 19.7rem) para cuadrar con el nav,
   y un margen en % no se resuelve contra la misma caja que ese padding, así que
   la franja se quedaba corta por la izquierda.

   El margen inferior negativo la pega al borde de abajo del panelInner, que es
   justo donde empieza la barra de degradado. */
.v2-megamenu__panelCierre {
  position: relative;
  margin-top: 2.4rem;
  margin-bottom: -2.4rem;
  padding: 1.6rem 0;
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__panelCierre {
    margin-top: 3.2rem;
    margin-bottom: -5rem;
    padding: 1.8rem 0;
  }
}
.v2-megamenu__panelCierre::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -200rem;
  right: -200rem;
  background-color: #f6f8ff;
  border-top: 1px solid #e8ecf5;
}
.v2-megamenu__panelCierreLink {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.2;
  color: #415bff;
  text-decoration: none;
  transition: gap 0.15s ease;
}
.v2-megamenu__panelCierreArrow {
  font-size: 1.8rem;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__panelCierreLink:hover {
    gap: 1.4rem;
  }
}

/* 9 — Más aire entre los elementos de la navegación (rev. Celia 22-oct).
   El DS los deja a 2rem, que a 1440 son 16.5px: seis etiquetas muy juntas en
   mitad de una barra con sitio de sobra. Se doblan a 4rem.

   Cuentas a 1440: la nav mide 643px y los botones de la derecha empiezan en
   1146, así que había 164px libres. Los cinco huecos suman 82.75px más, que
   deja la nav acabando en ~1065 y todavía 81px de margen antes de los botones.
   Por debajo de 1024 esta barra no se pinta (ahí va el menú móvil). */
@media only screen and (min-width: 1024px) {
  .v2-header__headerNavList {
    gap: 4rem;
  }
}

/* 10 — El contenido del panel se estira hacia la izquierda (rev. Celia 22-oct).
   La sangría original —calc(9% + 19.7rem), unos 283px a 1440— estaba para que
   el borde del contenido cayera justo donde arranca «Plataforma» en el nav.
   Celia pide más sitio para el contenido, y esa sangría es de donde sale: se
   parte por la mitad, manteniendo la fórmula en % + rem para que siga siguiendo
   al tipo de letra fluido del DS.

   Lo que se gana (unos 140px a 1440) se paga con la alineación: el panel y la
   barra de navegación ya no comparten borde izquierdo. Era eso o nada.
   Para volver atrás, basta con borrar esta regla. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelInner {
    padding-left: calc(4.5% + 9.8rem);
  }
}

/* 11 — Y las columnas ocupan lo que se ha ganado. Sin esto, recortar la sangría
   no servía de nada: el DS le pone `width: 22rem` fijos a cada columna, así que
   los 142px de más se los repartían los huecos de la rejilla y los enlaces
   seguían partiéndose igual. Quitando el ancho fijo, cada columna se estira
   hasta llenar su celda (los items de una rejilla se estiran por defecto). */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) .v2-megamenu__linkColumn {
    width: auto;
  }
}

/* 12 — La rejilla se adapta al número de columnas (rev. Celia 22-oct).
   El DS la deja clavada: `repeat(4, 1fr)` en el panel suelto y `repeat(3, 1fr)`
   con un `width: 73.4rem` y un `margin-right: 11.4rem` dentro del layout con
   destacado. Resultado: «Soluciones», que tiene tres columnas, dejaba un hueco
   muerto del ancho de una columna entre la última y el destacado.

   Con `grid-auto-flow: column` la rejilla crea exactamente tantas pistas como
   columnas haya, todas iguales, y llenan el ancho disponible. Vale para tres y
   para cuatro, así que sustituye también al apaño del `:has(> :nth-child(4))`.

   El hueco entre columnas sube a 3.2rem porque ahora es hueco de verdad: antes
   la columna medía 22rem fijos dentro de una celda más ancha y el aire extra
   salía de ahí. El separador de la regla 7 se recentra a la mitad de ese hueco
   (-1.6rem). */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__linkColumns:not(.v2-megamenu__linkColumnsMobileOverlay):not(.v2-megamenu__countryColumns) {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: 100%;
    max-width: none;
    margin-right: 0;
    gap: 2.4rem 3.2rem;
  }
}

/* ============================================================
   MEGA MENÚ: PANEL MAESTRO-DETALLE (piloto, solo «Soluciones»)
   (rev. Celia 22-oct)
   ============================================================
   Familias a la izquierda, solo la activa a la derecha. Al no enseñar las tres
   a la vez, cabe una frase bajo cada enlace — lo que pedía el doc y lo que el
   layout de columnas no daba.

   Estructura: raíl | detalle | destacado. El raíl se queda en un ancho cómodo
   para las tres etiquetas, el detalle se come lo que sobra y el destacado
   mantiene sus 29rem, como en los otros paneles. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__masterDetail {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr) auto;
    gap: 2.4rem 4rem;
    align-items: start;
  }
}
.v2-megamenu__masterDetail {
  display: grid;
  gap: 2.4rem;
}

/* El raíl se separa del detalle con una línea, como los separadores de los
   paneles de columnas. */
.v2-megamenu__mdRail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
@media only screen and (min-width: 1024px) {
  .v2-megamenu__mdRail {
    padding-right: 2.4rem;
    border-right: 1px solid #e8ecf5;
  }
}

.v2-megamenu__mdRailItem {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  width: 100%;
  margin: 0;
  padding: 1rem 1.2rem;
  border: 0;
  border-radius: 1rem;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #25292e;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.v2-megamenu__mdRailItemActivo {
  background-color: #eef1ff;
  color: #415bff;
}
.v2-megamenu__mdRailLabel {
  flex: 1 1 auto;
  min-width: 0;
}

/* Misma caja índigo que los títulos de columna de los otros paneles, para que
   los cuatro desplegables se sigan leyendo como de la misma casa. */
.v2-megamenu__mdRailIcon {
  display: block;
  flex: none;
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eef1ff 0%, #e2e7ff 100%);
}
.v2-megamenu__mdRailItemActivo .v2-megamenu__mdRailIcon {
  background: #ffffff;
}
.v2-megamenu__mdRailIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.v2-megamenu__mdRailIcon svg path {
  stroke: #415bff;
}

/* Chevron dibujado con bordes: un carácter tipográfico se desalineaba con la
   caja del icono según la fuente que hubiera cargado.

   Afinado el 22-oct: era un trazo de 2px que pesaba casi como el icono. Baja a
   1.5px y a 0.6rem de lado.

   El `margin-right` cuadra el margen óptico. Al girar 45° un cuadrado, su punta
   sobresale de la caja por los dos lados: (√2−1)/2 del lado, que para 0.6rem son
   0.12rem. Sin ese margen la flecha se veía más pegada al borde de lo que lo
   está el icono por la izquierda, aunque el acolchado fuera el mismo a los dos
   lados.

   Y la familia activa ya no desplaza la flecha: ese `translate` la movía 0.2rem
   hacia la derecha, así que en la familia abierta —que es la que se mira— el
   margen se rompía. Se marca solo con la opacidad. */
.v2-megamenu__mdRailChevron {
  flex: none;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.12rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.35;
  transition: opacity 0.15s ease;
}
.v2-megamenu__mdRailItemActivo .v2-megamenu__mdRailChevron {
  opacity: 1;
}

/* Detalle: una columna, y dos en cuanto la familia pasa de cuatro entradas
   («Sectores» tiene siete y en una sola columna estiraba el panel de más). */
.v2-megamenu__mdPane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.4rem;
  align-content: start;
}
/* El `hidden` del HTML es `display: none` de la hoja del navegador, que pierde
   contra la clase de arriba: sin esto se pintaban las tres familias a la vez. */
.v2-megamenu__mdPane[hidden] {
  display: none;
}

/* Las tres familias no miden lo mismo —siete sectores contra tres cargos— y al
   cambiar de una a otra el panel daba un salto seco: la animación de alto de
   GSAP solo corre al abrir y cerrar, no al cambiar por dentro. El detalle se
   queda con el alto de la familia más larga (35rem ≈ los siete sectores a 1440,
   y escala con el tipo fluido del DS). El precio es algo de aire en «Cargo»,
   pero queda entre el raíl y el destacado, no en medio de la nada. */
@media only screen and (min-width: 1024px) {
  /* Este suelo ha ido y vuelto el mismo día, y conviene saber por qué: estaba
     en 35rem, se bajó a 29 al medir que «Sectores» solo pedía 240px —entonces
     sus siete frases eran casi todas de una línea— y vuelve a 35 ahora que
     todas ocupan dos y la familia mide 290px. Es el precio de las frases
     equilibradas: si algún día se acortan, este número baja con ellas. */
  [data-v2-mega-content="soluciones"] .v2-megamenu__mdDetail {
    min-height: 39.5rem;
  }
  /* «Funcionalidades» tiene cuatro familias de cinco o seis entradas, todas a
     dos columnas: su familia más alta mide bastante menos que los siete
     sectores, así que su suelo es otro. Un valor único para los dos paneles
     dejaba este lleno de aire. */
  [data-v2-mega-content="funcionalidades"] .v2-megamenu__mdDetail {
    min-height: 29.5rem;
  }
}
/* Dos columnas siempre, no solo a partir de cinco entradas. Con una sola, las
   familias cortas —«Cargo», «Tamaño de empresa»— estiraban la descripción a 676px
   de ancho: una línea larguísima, imposible de equilibrar con las de «Sectores»,
   que van a 318. A dos columnas todas las frases miden lo mismo y la misma
   redacción vale para las tres familias. Una familia impar deja una celda libre
   en la última fila, que es un hueco de rejilla y no un renglón descuadrado. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__mdPane {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem 2.4rem;
  }
}

.v2-megamenu__mdItem {
  display: block;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  text-decoration: none;
  transition: background-color 0.15s ease;
}
.v2-megamenu__mdItemHead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.v2-megamenu__mdItemTitle {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.7rem;
  line-height: 1.25;
  color: #25292e;
  transition: color 0.15s ease;
}
.v2-megamenu__mdItemDesc {
  display: block;
  margin-top: 0.3rem;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #5a6472;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__mdItem:hover {
    background-color: #eef1ff;
  }
  .v2-megamenu__mdItem:hover .v2-megamenu__mdItemTitle {
    color: #415bff;
  }
}

/* 13 — Fuera la barra de degradado del pie del panel (rev. Celia 22-oct).
   El panel reservaba para ella un `padding-bottom: 2.2rem` —justo su alto—, así
   que hay que quitar los dos: si no, queda una franja blanca donde estaba.
   Sin ese padding, la franja de cierre acaba pegada al borde del panel y la
   recortan sus esquinas redondeadas, que es lo que se busca.

   El `<div>` sigue en el markup del componente a propósito: así esto se deshace
   borrando esta regla, sin tocar el PHP. */
.v2-megamenu__gradientBar {
  display: none;
}
.v2-megamenu__panel {
  padding-bottom: 0;
}

/* 14 — El contenedor blanco del mega menú se ensancha por los dos lados
   (rev. Celia 22-oct).
   Antes sobresalía 1.25rem por la izquierda y 1.55rem por la derecha del
   contenido del header: el borde blanco pasaba casi rozando el logo. Ahora
   sobresale lo mismo a los dos lados y bastante más, así que queda aire blanco
   antes del logo y la misma cantidad detrás de los botones.

   El saliente se calcula como el 60% del margen que el contenedor del DS deja
   a cada lado, para que no pueda comerse el borde de la ventana:
   - de 768 a 1639 ese margen es exactamente 8rem → 4.8rem de saliente;
   - a partir de 1640 el contenedor es de 1580px fijos y el margen depende del
     ancho real, así que se calcula con vw: la mitad del sobrante por 0.6.
   Queda siempre un 40% de margen libre entre el panel y el borde. */
.v2-megamenu__panel {
  --v2-panel-saliente: 1.25rem;
  left: calc(var(--v2-panel-saliente) * -1);
  width: calc(100% + var(--v2-panel-saliente) * 2);
}
@media only screen and (min-width: 768px) {
  .v2-megamenu__panel {
    --v2-panel-saliente: 4.8rem;
  }
}
@media only screen and (min-width: 1640px) {
  .v2-megamenu__panel {
    --v2-panel-saliente: calc((100vw - 1580px) * 0.3);
  }
}

/* 15 — El destacado, más destacado (rev. Celia 22-oct).
   Era una imagen suelta con un pie centrado debajo y se leía como un adorno.
   Ahora es una tarjeta de verdad: borde, fondo tenue y la foto metida en su
   propio contenedor blanco, con el texto abajo a la izquierda, su etiqueta
   cuando la hay y una llamada que invita a entrar. */
.v2-megamenu__featuredImageCard {
  gap: 0;
  padding: 1.2rem;
  border: 1px solid #e8ecf5;
  border-radius: 1.6rem;
  background-color: #f6f8ff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.v2-megamenu__featuredImageWrap {
  /* Sin acolchado: la foto llena el recuadro de lado a lado (rev. Celia
     22-oct). Los 0.8rem venían de cuando dentro había un pantallazo y el
     blanco hacía de marco; con una fotografía ese marco solo la encoge.
     El fondo blanco se queda debajo por si una imagen tarda en cargar. */
  padding: 0;
  background-color: #ffffff;
  border-radius: 1.2rem;
  overflow: hidden;
}
.v2-megamenu__featuredBody {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.2rem 0.4rem 0.2rem;
}
.v2-megamenu__featuredHead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
/* El pie iba centrado y en peso medio, de cuando no había tarjeta. Alineado a
   la izquierda cuadra con el resto del panel. */
.v2-megamenu__featuredImageTitle {
  text-align: left;
  font-weight: 600;
  font-size: 1.8rem;
}
.v2-megamenu__featuredCue {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.4rem;
  line-height: 1.2;
  color: #415bff;
  transition: gap 0.15s ease;
}
.v2-megamenu__featuredCue::after {
  content: "\2192";
  font-size: 1.6rem;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__featuredImageCard:hover {
    border-color: #c9d2ff;
    box-shadow: 0 0.6rem 2rem rgba(65, 91, 255, 0.1);
  }
  .v2-megamenu__featuredImageCard:hover .v2-megamenu__featuredCue {
    gap: 1.2rem;
  }
}

/* 16 — «Plataforma», «Recursos» y «Sobre nosotros» hablan el idioma del
   maestro-detalle (rev. Celia 22-oct).
   Esos tres paneles son listas planas: no tienen familias, así que no hay raíl
   que ponerles. Lo que sí se puede es que sus tarjetas se lean exactamente como
   los ítems del detalle de los otros dos —misma pastilla al pasar, mismos
   pesos, mismo gris en la descripción— y que su icono sea la misma caja índigo
   que marca las familias en el raíl. Así el menú tiene dos estructuras pero una
   sola voz.

   Solo afecta a `.v2-megamenu__cardGrid`, que es la rejilla de escritorio; el
   acordeón móvil pinta estas mismas cards con otras clases y no se toca. */
.v2-megamenu__cardGrid .v2-megamenu__resourceCard {
  /* El tope de 23rem venía de cuando la tarjeta flotaba suelta; ahora llena su
     celda, como las columnas del detalle. */
  max-width: none;
  gap: 1.2rem;
  padding: 1rem 1.2rem;
  border-radius: 1rem;
  transition: background-color 0.15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover {
    background-color: #eef1ff;
  }
}

/* El icono, a la caja de color del raíl. */
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon {
  width: 3.4rem;
  height: 3.4rem;
  padding: 0.8rem;
  box-sizing: border-box;
  border-radius: 1rem;
  background: linear-gradient(135deg, #eef1ff 0%, #e2e7ff 100%);
}
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: #415bff;
}
/* «Plataforma» y «Sobre nosotros» traen iconos de trazo, no de relleno: ya
   había una regla que los pintaba con stroke en gris, y aquí se les pone el
   mismo índigo que al resto. */
[data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: none;
  stroke: #415bff;
}

/* Títulos y descripciones, a los valores del detalle. */
.v2-megamenu__cardGrid .v2-megamenu__resourceCardTitle {
  font-weight: 600;
  margin-bottom: 0.3rem;
}
.v2-megamenu__cardGrid .v2-megamenu__resourceCardDesc {
  font-size: 1.5rem;
  line-height: 1.35;
  color: #5a6472;
}

/* 17 — Y la rejilla de cards también llena lo que hay (rev. Celia 22-oct).
   Tenía un tope de 75rem de cuando el panel era más estrecho: con el ancho que
   se ganó al recortar la sangría, ese tope dejaba un hueco muerto entre la
   última card y el destacado, y las descripciones se partían en cuatro líneas.
   Mismo criterio que con las columnas de enlaces: fuera el tope, que la rejilla
   ocupe su sitio. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__cardGrid {
    max-width: none;
    gap: 2.4rem 3.2rem;
  }
  /* Quitar el tope destapó un conflicto que llevaba ahí desde el principio: el
     hueco del destacado es `minmax(18rem, 19rem)` y el destacado mide 29rem de
     mínimo, así que se salía de su pista. Con el tope puesto no se notaba
     porque las cards no llegaban hasta él; sin tope, se montaban 50px. La pista
     pasa a `auto`, como ya se hizo en el panel de Funcionalidades. */
  .v2-megamenu__cardGridFeatured {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* 18 — Los destacados miden todos lo mismo (rev. Celia 22-oct).
   El ancho ya era común (29rem), pero el alto no: cada hero tiene su propia
   proporción y la imagen mandaba, así que el destacado de Recursos salía más
   alto que el de Soluciones. Ahora la caja de la foto tiene proporción fija y
   la imagen se adapta dentro sin recortarse —entera y centrada, que son
   pantallazos de producto y cortarlos sería peor.

   Y el título reserva dos líneas: «Sesame IT» ocupa una y «Descubre Sesame
   Benefits» puede ocupar dos, y sin reserva volvían a medir distinto. Es aire,
   sí, pero es la condición para que midan igual. */
.v2-megamenu__featuredImageWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 16/9 en vez de 16/10: en «Recursos» el destacado era el elemento más alto
     del panel y obligaba a las seis cards a nadar en 64px de hueco. Quince
     píxeles menos de foto se notan poco y acortan los dos paneles cortos. */
  aspect-ratio: 16 / 9;
}
.v2-megamenu__featuredImage {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.v2-megamenu__featuredImageTitle {
  min-height: 4.4rem;
}

/* 19 — La pill de NEW, con degradado animado.
   Empezó estando en TREND y el 22-oct Celia la movió a NEW, que es donde tiene
   sentido: lo nuevo se señala, lo que está de moda no hace falta que parpadee.
   TREND se queda con el índigo plano del DS.

   El amarillo de marca se probó dentro del recorrido y se quitó el mismo día:
   el texto es blanco de 1.1rem y al pasarle el amarillo claro por debajo el
   contraste se caía. Se queda la franja azul-violeta, que aguanta el blanco de
   principio a fin y se lee como un brillo que recorre la pastilla. El
   `background-size` al triple es lo que permite moverlo en bucle sin cortes. */
.v2-megamenu__badgeNuevo {
  background-image: linear-gradient(90deg, #3348e0 0%, #425cff 25%, #6f5cff 50%, #425cff 75%, #3348e0 100%);
  background-size: 300% 100%;
  background-position: 0% 0%;
  color: #ffffff;
  animation: v2-badge-nuevo 4s linear infinite;
}
@keyframes v2-badge-nuevo {
  to {
    background-position: -300% 0%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2-megamenu__badgeNuevo {
    animation: none;
  }
}

/* 20 — El «Descubrir» invisible, pero presente.
   Cuando el título ya empieza por un verbo (regla del componente) la llamada
   sobra, pero quitarla del DOM dejaba esa tarjeta una línea más baja que las
   demás, y los destacados tienen que medir todos igual. Así ocupa su hueco sin
   verse ni leerse. */
.v2-megamenu__featuredCueOculto {
  visibility: hidden;
}

/* 21 — El destacado aprieta su cuerpo (rev. Celia 22-oct).
   Mismo motivo: en los paneles de contenido corto era el destacado el que
   marcaba el alto. Se recorta el acolchado, no el contenido. */
.v2-megamenu__featuredImageCard {
  padding: 1rem;
}
.v2-megamenu__featuredBody {
  padding: 0.8rem 0.4rem 0.2rem;
}

/* 22 — Iconos más gruesos (rev. Celia 22-oct).
   Dentro de la caja índigo el trazo de 1 unidad se quedaba fino y el icono se
   leía apagado. Hay dos familias de iconos y cada una engorda por su lado:

   - Los de trazo (los del raíl y los de «Plataforma» y «Compañía») suben de
     grosor directamente. Ojo con la rejilla: los de «Compañía» vienen dibujados
     en 16 y el resto en 24, así que el mismo número daría un trazo medio punto
     más gordo. 0.667 = 16/24 es lo que los iguala, y ya estaba aplicado antes.
   - Los de «Recursos» son de relleno, no de trazo: ahí no hay grosor que subir,
     así que se les añade un trazo del mismo color, que engorda la silueta. */
.v2-megamenu__mdRailIcon svg path {
  stroke-width: 1.7;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  stroke-width: 1.7;
}
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  stroke-width: 1.13;
}
[data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  stroke: #415bff;
  stroke-width: 0.5;
}

/* 23 — Iconos en el oscuro de marca y caja gris clara (rev. Celia 22-oct).
   La caja índigo con el trazo índigo tiraba mucho del ojo y competía con los
   títulos. Ahora la caja es un gris claro neutro y el icono el oscuro del DS
   (#25292e), que es el color del propio título: el icono acompaña en vez de
   gritar.

   Se mantiene el índigo al pasar por encima, que ya estaba, y el fondo blanco
   de la familia activa en el raíl: son las dos señales de estado y ahora se
   notan más, porque parten de un gris en reposo.

   Van las tres familias de iconos, cada una por su propiedad: trazo en el raíl
   y en «Plataforma»/«Compañía», relleno más trazo en «Recursos». */
.v2-megamenu__mdRailIcon,
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon {
  background: #eef1f5;
}
.v2-megamenu__mdRailIcon svg path {
  stroke: #25292e;
}
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: #25292e;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: none;
  stroke: #25292e;
}
[data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: #25292e;
  stroke: #25292e;
}

/* 24 — El destacado llama más (rev. Celia 22-oct).
   Era una tarjeta de fondo casi blanco sobre un panel blanco: tenía la forma
   de un destacado pero no el peso. Pasa a bloque índigo con el texto en blanco,
   que es lo único del panel con color de fondo y por eso se lleva la mirada.

   La foto se queda en su caja blanca, que sobre el índigo funciona como el
   marco de una pantalla. La etiqueta, que es un degradado azul, se volvería
   invisible sobre el índigo: dentro del destacado pasa a fondo blanco con el
   texto oscuro. Y la llamada se convierte en pastilla, para que se lea como
   algo en lo que se puede pulsar. */
.v2-megamenu__featuredImageCard {
  border-color: transparent;
  background: linear-gradient(135deg, #3348e0 0%, #6f5cff 100%);
  box-shadow: 0 0.8rem 2.4rem rgba(51, 72, 224, 0.25);
}
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageTitle {
  color: #ffffff;
}
.v2-megamenu__featuredImageCard .v2-megamenu__badge {
  background: #ffffff;
  background-image: none;
  color: #25292e;
  animation: none;
}
.v2-megamenu__featuredCue {
  align-self: flex-start;
  padding: 0.5rem 1.2rem;
  border-radius: 2.8rem;
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__featuredImageCard:hover {
    border-color: transparent;
    box-shadow: 0 1.2rem 3.2rem rgba(51, 72, 224, 0.35);
  }
  .v2-megamenu__featuredImageCard:hover .v2-megamenu__featuredCue {
    background-color: rgba(255, 255, 255, 0.28);
    gap: 1.2rem;
  }
}

/* 25 — Las etiquetas, alineadas con su texto (rev. Celia 22-oct).
   Dos sitios, mismo síntoma —la pastilla caía por debajo de la línea del
   título— y dos causas distintas, las dos de cajas que no miden lo mismo:

   a) En el destacado, la reserva de dos líneas estaba puesta en el propio
      título. Con un título de una línea, su texto se pinta arriba pero la caja
      sigue midiendo dos, y el `align-items: center` centraba la etiqueta en esa
      caja doble: quedaba a media altura, por debajo del texto. La reserva se
      muda al contenedor, que es quien debe guardar el sitio; así título y
      etiqueta se centran en la misma caja y quedan a la misma altura.
   b) En las cards, el título llevaba un `margin-bottom` que la etiqueta no
      tiene. `align-items: center` centra la caja CON su margen, así que el
      texto subía medio margen respecto a la pastilla. El hueco se muda al
      contenedor. */
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageTitle {
  min-height: 0;
}
.v2-megamenu__featuredHead {
  min-height: 4.4rem;
}
.v2-megamenu__cardGrid .v2-megamenu__resourceCardTitle {
  margin-bottom: 0;
}
.v2-megamenu__cardGrid .v2-megamenu__resourceCardHeader {
  margin-bottom: 0.3rem;
}

/* 26 — Al pasar por encima, el icono se vuelve azul y su caja blanca
   (rev. Celia 22-oct).
   En reposo son oscuro sobre gris (regla 23); al pasar, caja blanca y trazo
   índigo. Es el mismo salto que ya daba la familia activa del raíl, ahora
   también al pasar por encima.

   Las reglas de color del DS para el hover de las cards existían, pero la 23
   las empataba en especificidad y, por ir después, ganaba: el icono se quedaba
   oscuro. Añadiendo el `:hover` al selector suben un escalón y vuelven a mandar.
   Cada familia por su propiedad, como siempre: trazo en el raíl y en
   «Plataforma»/«Compañía», relleno más trazo en «Recursos». */
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__mdRailItem:hover .v2-megamenu__mdRailIcon,
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon {
    background: #ffffff;
  }
  .v2-megamenu__mdRailItem:hover .v2-megamenu__mdRailIcon svg path {
    stroke: #415bff;
  }
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path {
    fill: #415bff;
  }
  [data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path,
  [data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path {
    fill: none;
    stroke: #415bff;
  }
  [data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path {
    fill: #415bff;
    stroke: #415bff;
  }
}

/* 27 — La franja de cierre, estrecha y oscura (prueba, rev. Celia 22-oct).
   Era una banda clara de 56px sobre un panel blanco: ocupaba como un bloque
   más sin pesar como uno. En oscuro hace de pie de verdad —cierra el panel por
   abajo, como una barra— y al ir en negativo necesita menos alto para leerse.

   El fondo lo pinta el pseudo-elemento de la regla 8, así que el color va ahí;
   el borde superior sobraba en cuanto hay contraste de por sí. */
.v2-megamenu__panelCierre {
  padding: 1.1rem 0;
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__panelCierre {
    padding: 1.2rem 0;
  }
}
.v2-megamenu__panelCierre::before {
  background-color: #25292e;
  border-top: 0;
}
.v2-megamenu__panelCierreLink {
  color: #ffffff;
}

/* 28 — El velo de detrás del menú, menos oscuro (rev. Celia 22-oct).
   El DS lo deja en rgba(32, 33, 41, 0.8): a ese nivel la página desaparece y
   el menú parecía una ventana modal. Se bajó al 0.35, luego al 0.5 y al final
   fuera: la sombra del panel ya lo separa de la página.

   Ojo al buscarlo: hay dos velos con nombre parecido. El del header
   (`.v2-header__backdrop`) ya iba al 0.12 y no es el que se ve; el que tapa la
   página al abrir un panel es este, el del mega menú. */
.v2-megamenu__backdrop {
  /* Sin velo (22-oct): se probó al 0.35 y al 0.5 y Celia lo quiere fuera. Va
     transparente, NO `display: none`: esta capa es la que recoge el clic fuera
     del panel para cerrarlo, y quitándola del flujo el menú se quedaría abierto
     hasta mover el ratón. */
  background: transparent;
}

/* 29 — El destacado lleva foto, no pantallazo (rev. Celia 22-oct).
   Con imágenes de producto el `contain` tenía sentido: se veían enteras aunque
   dejaran aire a los lados. Con fotos de personas lo que toca es llenar el
   marco, así que pasan a `cover` y se recortan por donde haga falta. El alto
   lo sigue marcando la proporción 16/9 de la caja, así que los destacados
   siguen midiendo todos lo mismo. */
.v2-megamenu__featuredImage {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

/* 30 — Icono en cada enlace del detalle (prueba, rev. Celia 22-oct).
   Mismo lenguaje que tenía el raíl: caja gris, trazo oscuro, y al pasar por
   encima caja blanca y trazo índigo. Más pequeña que la del raíl —2.8rem en vez
   de 3.4— porque aquí acompaña a un enlace, no encabeza una familia.

   El ítem pasa a dos columnas (icono | texto) con el icono anclado arriba, a la
   altura del título, no centrado respecto al bloque de dos líneas. */
.v2-megamenu__mdItem {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}
.v2-megamenu__mdItemBody {
  min-width: 0;
}
.v2-megamenu__mdItemIcon {
  display: block;
  flex: none;
  /* 2.8rem se quedaban en 23px reales y el dibujo de dentro en 13: a ese
     tamaño el icono era una mancha. 3.4rem, como el del raíl, es lo mínimo
     para que se reconozca de qué es cada uno. */
  width: 3.4rem;
  height: 3.4rem;
  /* Los 35 archivos están normalizados: cada dibujo se midió con `getBBox()`
     en el navegador y se reescribió con un `translate(...) scale(...)` que lo
     deja centrado y ocupando 20 de las 24 unidades. Así todos pintan el mismo
     tamaño aunque vinieran de rejillas de 24, 33 o 45. El acolchado del chip
     ya solo es aire: 0.45rem a cada lado de un dibujo de 24. */
  padding: 0.45rem;
  box-sizing: border-box;
  border-radius: 0.8rem;
  background: #eef1f5;
  transition: background-color 0.15s ease;
}
.v2-megamenu__mdItemIcon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.v2-megamenu__mdItemIcon svg path {
  stroke: #25292e;
  stroke-width: 1.7;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__mdItem:hover .v2-megamenu__mdItemIcon {
    background: #ffffff;
  }
  .v2-megamenu__mdItem:hover .v2-megamenu__mdItemIcon svg path {
    stroke: #415bff;
  }
}

/* 31 — El icono del enlace, centrado con su título (rev. Celia 22-oct).
   El ítem alinea arriba, así que el borde de la caja cuadraba con el borde del
   título: como la caja mide 3.4rem y la línea del título 2.125rem (1.7 × 1.25),
   la caja sobraba por abajo y parecía caída. Subirla la mitad de esa diferencia
   —(2.125 − 3.4) / 2— pone los dos centros a la misma altura.

   Va como margen negativo y no con `align-items: center` porque centrar el
   ítem entero lo alinearía con el bloque de título + frase, no con el título. */
.v2-megamenu__mdItemIcon {
  margin-top: -0.64rem;
}

/* 32 — La pill de TREND, amarilla con letra oscura (rev. Celia 22-oct).
   Hasta ahora era índigo plano, el mismo azul que el hover y que la familia
   activa, así que se confundía con el resto del panel. El amarillo del DS
   (#fac832) es el único color que no usa nada más aquí dentro.

   Texto oscuro, no blanco: sobre ese amarillo el blanco da 1.8:1 y es
   ilegible. Es la misma razón por la que el NEW llevó texto oscuro mientras su
   fondo fue amarillo, y por la que volvió al blanco al pasar a degradado azul.

   La clase existe desde el 22-oct; la pintaba la regla base del badge. */
.v2-megamenu__badge.v2-megamenu__badgeTrend {
  background-color: #fac832;
  background-image: none;
  color: #25292e;
}

/* 33 — La pastilla del enlace, con el mismo aire arriba que a los lados
   (rev. Celia 22-oct).
   El acolchado era 1rem arriba y abajo contra 1.2rem a los lados, y encima el
   icono sube 0.64rem para centrarse con el título (regla 31), así que por
   arriba quedaban 0.36rem reales: la pastilla parecía cortada.

   Arriba se suma esa subida del icono —1.2 + 0.64— para que el borde de la
   caja quede a 1.2rem del borde de la pastilla, igual que por la izquierda.
   Abajo basta 1.2rem, que ahí el último elemento es la frase. */
.v2-megamenu__mdItem {
  padding: 1.84rem 1.2rem 1.2rem;
}

/* 34 — Que los iconos del detalle se parezcan entre sí (rev. Celia 22-oct).
   No era cosa de los dibujos: era que el CSS solo repintaba `path`. Estos SVG
   vienen envueltos en un `<g stroke="#25292E" stroke-width="1.8">` y cada uno
   dibuja con lo que le viene bien —unos con `path`, otros con `rect`, `circle`
   o `line`—. Los que no usaban `path` se quedaban con el trazo y el grosor de
   origen: 1.8 en vez de 1.7, y sin pasar a índigo al hacer hover. De ahí que
   unos cambiaran de color y otros no.

   Con el descendiente universal entran todas las formas y el grupo que las
   envuelve. El `fill` se deja como está: algunos iconos rellenan detalles
   pequeños a propósito y forzarlo los emborronaría. */
.v2-megamenu__mdItemIcon svg * {
  stroke: #25292e;
  stroke-width: 1.7;
  /* Los iconos de «Soluciones» vienen de páginas que los dibujaban en rejilla
     de 45 o de 33, no de 24, así que al normalizarlos se les metió un
     `transform: scale(...)`. Sin esto, ese escalado encogería también el trazo
     y unos saldrían más finos que otros. Con `non-scaling-stroke` el grosor se
     mide en píxeles de pantalla y sale idéntico venga el dibujo de la rejilla
     que venga. */
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__mdItem:hover .v2-megamenu__mdItemIcon svg * {
    stroke: #415bff;
  }
}

/* 35 — El destacado termina donde termina «Prueba gratis» (rev. Celia 22-oct).
   Medido a 1440: el botón acaba en 1359 y el destacado en 1346, trece píxeles
   antes. No es casualidad el número: el panel sobresale `--v2-panel-saliente`
   por fuera del contenedor del DS, y el borde derecho de ese contenedor es
   justo donde acaba el botón. Así que para que coincidan, el acolchado derecho
   del panel tiene que valer exactamente lo que sobresale el panel.

   Atado a la variable y no a un número para que siga cuadrando por encima de
   1640, donde el saliente se calcula con `vw`. */
@media only screen and (min-width: 768px) {
  .v2-megamenu__panelInner {
    padding-right: var(--v2-panel-saliente);
  }
}

/* 36 — El contenido del panel empieza bajo el logo (rev. Celia 22-oct).
   La regla 10 lo había dejado en `calc(4.5% + 9.8rem)`, que era la mitad de la
   sangría original —la que cuadraba con el arranque del nav—. Ahora se le pide
   otra cosa: que empiece donde empieza el logo y acabe donde acaba «Prueba
   gratis», es decir, que ocupe exactamente el contenedor del DS.

   Como el panel sobresale `--v2-panel-saliente` por los dos lados, basta con
   que el acolchado valga eso mismo a izquierda y derecha. Queda simétrico y
   atado a una sola variable: si se cambia el saliente, el contenido sigue
   cuadrando con el logo y con el botón sin tocar nada más. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelInner {
    padding-left: var(--v2-panel-saliente);
  }
}

/* 37 — El panel deja de tapar la cabecera (rev. Celia 22-oct).
   Venía subido —`top: -11.4rem` con 10.4rem de acolchado superior— para que la
   fila de utilidades y el nav quedaran DENTRO del blanco, que es como estaba en
   el Figma 4645-2858. Celia lo quiere al revés: la cabecera es de la página y el
   desplegable cuelga por debajo.

   Con `top: 0` el panel arranca donde acaba la zona del header, y el acolchado
   superior vuelve a ser solo aire: ya no tiene que reservar sitio para el nav.
   La separación sube a 2.6rem (rev. Celia 22-oct): con 0.8rem el panel quedaba
   a 6px de los botones y se leía pegado a ellos, como si colgara del propio
   «Prueba gratis». Ahora hay ~21px, que es aire suficiente para que se vean
   como dos cosas distintas sin que el panel parezca desprendido. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel {
    top: 2.6rem;
    padding-top: 2.4rem;
  }
}

/* 38 — El panel va del gris de la página (rev. Celia 22-oct).
   `#f5f5f7` es el `background-color` del `body` de las v2, medido en sq1, no un
   gris inventado. Con la cabecera fuera del panel y sin velo detrás, el blanco
   lo dejaba como una hoja pegada encima; en el gris de la página el desplegable
   se lee como parte de ella.

   Las cajas de los iconos estaban en #eef1f5, que sobre este gris casi no se
   distinguen: pasan a blanco, que sobre gris hace de pastilla igual que el gris
   hacía sobre blanco. El hover se queda en índigo, que es el que marca estado. */
.v2-megamenu__panel {
  background-color: #f5f5f7;
}
.v2-megamenu__mdItemIcon,
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon {
  background: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__mdItem:hover .v2-megamenu__mdItemIcon,
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon {
    background: #eef1ff;
  }
}

/* 39 — La sombra del panel, rehecha (rev. Celia 22-oct).
   Se quitó del todo cuando el panel pasó al gris de la página, y entonces no
   quedaba nada que lo separase del fondo: ni velo, ni borde, ni sombra. Vuelve.

   No es la del DS: aquella (`0 0.8rem 3.2rem rgba(0,0,0,.08)`) estaba pensada
   para un panel blanco sobre contenido, y gris sobre gris no se vería. Esta va
   algo más marcada y tira del oscuro de marca en vez de negro puro, que sobre
   un fondo frío ensucia menos. Dos capas: una corta que dibuja el canto y otra
   larga y difusa que levanta el panel sin pintar un borde.

   Por arriba no asoma (rev. Celia 22-oct): el panel cuelga de la cabecera y una
   sombra sobre el borde superior lo despegaba de ella. El cuarto valor es el
   que lo resuelve — encoge la sombra lo justo para que su difuminado no suba
   por encima del borde. La cuenta es `encoge ≤ desplazamiento − difuminado/2`:
   con 0.2/0.6 toca −0.1rem y con 1.2/3.6, −0.6rem. Por eso no vale subir el
   difuminado sin tocar también ese número. */
.v2-megamenu__panel {
  box-shadow: 0 0.2rem 0.6rem -0.1rem rgba(37, 41, 46, 0.06),
              0 1.2rem 3.6rem -0.6rem rgba(37, 41, 46, 0.14);
}

/* 40 — Aquí se probó un filo de 1px (#e8ecf5, el gris de los separadores) para
   devolverle un límite al panel ahora que no tiene ni velo ni sombra. Celia lo
   descartó el 22-oct: el panel se queda sin ningún borde y se delimita solo con
   las esquinas redondeadas y la franja oscura del pie.

   Si alguna vez se recupera, que vaya como `box-shadow: inset`, nunca como
   `border`: el panel es `border-box` y el píxel del borde desplaza 1px las
   alineaciones con el logo y con «Prueba gratis». */

/* 42 — EL MENÚ DEL MÓVIL, CON EL MISMO LENGUAJE QUE EL DE ESCRITORIO
   (rev. Celia 23-oct)
   ============================================================
   El overlay móvil se había quedado en la versión de septiembre: familias en
   dos columnas y enlaces a pelo, sin nada de lo que define hoy el panel grande
   —el icono en cada enlace y la franja de cierre—.

   No se copia el maestro-detalle: un raíl de familias dentro de un acordeón
   serían tres toques para llegar a un enlace. Lo que se traslada es el
   lenguaje: cada familia es un encabezado y debajo van sus enlaces con su
   icono, en UNA columna. A 375px dos columnas con el chip de 28px dejaban
   «Gestor de vacaciones y ausencias» en tres líneas.

   El icono de la familia se quita aquí por lo mismo que se quitó del raíl: si
   el icono está en el enlace, repetirlo arriba es ruido. */
.v2-megamenu__linkColumnsMobileOverlay--conIconos {
  grid-template-columns: minmax(0, 1fr);
  gap: 2.8rem;
}
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__columnTitleIcon {
  display: none;
}
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__columnTitle--conIcono + .v2-megamenu__linkList,
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__columnTitle + .v2-megamenu__linkList {
  padding-left: 0;
}
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__columnTitle {
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
}

/* La fila: chip + etiqueta, centrados entre sí. El chip repite el de
   escritorio —fondo blanco, esquina de 0.8rem, trazo #25292e normalizado— pero
   a 2.8rem en vez de 3.4: en el teléfono la fila no tiene descripción debajo,
   así que un chip grande pesaba demasiado al lado de una línea de texto. */
.v2-megamenu__mobileItemLink {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.v2-megamenu__mobileItemIcon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  padding: 0.4rem;
  background-color: #ffffff;
  border-radius: 0.8rem;
}
.v2-megamenu__mobileItemIcon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.v2-megamenu__mobileItemIcon svg * {
  stroke: #25292e;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__columnLinkLabel {
  font-size: 1.4rem;
  line-height: 1.3;
}

/* La franja de cierre dentro del acordeón. En escritorio es una banda que
   sangra a los dos lados del panel; aquí no puede serlo —la capa del menú
   recorta, así que el ±200rem del ::before se queda en el ancho del menú y se
   leía como un rectángulo cortado con el texto pegado al canto—. En el teléfono pasa a ser un botón: la misma tinta y el
   mismo texto, en bloque redondeado y de ancho completo. */
.v2-menuoverlay__nivel .v2-megamenu__panelCierre {
  margin-top: 2rem;
  margin-bottom: 0;
  padding: 0;
}
.v2-menuoverlay__nivel .v2-megamenu__panelCierre::before {
  display: none;
}
.v2-menuoverlay__nivel .v2-megamenu__panelCierreLink {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1.4rem 1.6rem;
  border-radius: 1.2rem;
  background-color: #25292e;
  color: #ffffff;
  font-size: 1.4rem;
}

/* 43 — EL MENÚ DEL TELÉFONO, POR NIVELES   (rev. Celia 23-oct)
   ============================================================
   Referencia: el móvil de factorial.es. En vez de un acordeón que suelta las
   cuatro familias y sus 22 enlaces de una vez, cada pantalla enseña una cosa:
   los paneles, luego las familias, luego los enlaces. Es el mismo reparto del
   maestro-detalle de escritorio, repartido en el tiempo en lugar del espacio.

   Las tres capas están pintadas desde el principio y se enseña una; la que no
   toca va con [hidden]. */
.v2-menuoverlay__nivel[hidden] {
  display: none;
}
.v2-menuoverlay__nivelActivo {
  animation: v2MenuNivelEntra 0.22s ease both;
}
@keyframes v2MenuNivelEntra {
  from { opacity: 0; transform: translateX(1.2rem); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-menuoverlay__nivelActivo { animation: none; }
}

/* La fila que lleva a otra pantalla. Mismo peso que tenía el acordeón —es el
   mismo sitio del menú—, cambia el chevron: en vez de abrir hacia abajo,
   apunta a la derecha, que es lo que va a hacer. */
.v2-menuoverlay__drillTrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  width: 100%;
  padding: 1.5rem 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.v2-menuoverlay__drillChevron {
  flex: none;
  display: inline-flex;
  width: 1.6rem;
  height: 1.6rem;
  transform: rotate(-90deg);
  color: #25292e;
}
.v2-menuoverlay__drillChevron svg {
  width: 100%;
  height: 100%;
}
.v2-menuoverlay__drillTrigger--familia .v2-menuoverlay__accordionLabel {
  font-size: 1.6rem;
}

/* Cabecera de pantalla: la vuelta atrás dice a dónde vuelve —«Menú principal»,
   «Funcionalidades»—, no un «Atrás» a secas, para saber dónde estás sin tener
   que recordar por dónde entraste. Debajo, el título de la pantalla. */
.v2-menuoverlay__volver {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #6b7280;
}
.v2-menuoverlay__volverChevron {
  display: inline-flex;
  width: 1.4rem;
  height: 1.4rem;
  transform: rotate(90deg);
}
.v2-menuoverlay__volverChevron svg {
  width: 100%;
  height: 100%;
}
.v2-menuoverlay__nivelTitulo {
  margin: 0.4rem 0 1.6rem;
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 2.2rem;
  line-height: 1.2;
  color: #25292e;
}

/* Nivel 3: los enlaces con su icono, sin la rejilla de columnas. */
.v2-menuoverlay__drillLinks {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Los paneles sin familias (Plataforma, Recursos, Sobre nosotros) enseñan sus
   cards en el nivel 2: ahí sí caben título y descripción, porque son tres o
   seis, no veintidós.

   Van como filas de menú (rev. Celia 25-oct), no como bloques de texto: icono
   en su caja a la izquierda —el mismo chip del nivel 3—, título, descripción
   en gris debajo y una línea entre fila y fila. Antes eran seis párrafos
   pegados: se leían como un texto largo y no como una lista de sitios a los
   que ir. La línea es la misma que separa las filas de los otros niveles, así
   que las tres pantallas se reconocen como el mismo menú. */
.v2-menuoverlay__drillCards {
  display: flex;
  flex-direction: column;
}
.v2-menuoverlay__drillCard {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid #e8ecf5;
  text-decoration: none;
}
.v2-menuoverlay__drillCard:last-child {
  border-bottom: 0;
}
/* El icono, alineado con la primera línea del título y no con el centro de la
   fila: con descripciones de dos y de tres líneas, centrarlo lo dejaba bailando
   a distinta altura en cada fila. */
.v2-menuoverlay__drillCard .v2-megamenu__mobileItemIcon {
  margin-top: 0.1rem;
}
.v2-menuoverlay__drillCardBody {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.v2-menuoverlay__drillCardHead {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.v2-menuoverlay__drillCardTitulo {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  line-height: 1.3;
  color: #25292e;
}
.v2-menuoverlay__drillCardDesc {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.35;
  color: #6b7280;
}

/* 44 — LOS ICONOS DE LAS CARDS, DEL MISMO JUEGO QUE EL RESTO
   (rev. Celia 25-oct)
   ============================================================
   Hasta ahora el panel tenía dos familias de iconos conviviendo: los enlaces
   del maestro-detalle con trazo fino y normalizado, y las cards de Recursos
   con unos dibujos de mancha que, además, llevaban relleno Y trazo —la regla
   23 los pintaba así justamente porque eran de relleno—. Al lado unos de
   otros, los de Recursos se veían el doble de pesados.

   Las cards pasan a tirar del mismo juego `item/` que el móvil, así que aquí
   solo hay que pintarlos como lo que ya son: trazo, sin relleno, 1.7 sin
   escalar. Esto sustituye a las reglas por panel de la 23 y la 18; se dejan
   donde estaban porque son inofensivas en cuanto el icono es de línea, pero
   mandan estas.

   Hay que repetir el selector con `path` además de con `*`: las reglas viejas
   apuntaban a `svg path`, que tiene un elemento más y gana a `svg *` aunque
   esté antes. */
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg *,
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg *,
[data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg *,
[data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path,
[data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg *,
[data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon svg path {
  fill: none;
  stroke: #25292e;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg *,
  .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path,
  [data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg *,
  [data-v2-mega-content="plataforma"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path,
  [data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg *,
  [data-v2-mega-content="sobre-nosotros"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path,
  [data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg *,
  [data-v2-mega-content="recursos"] .v2-megamenu__cardGrid .v2-megamenu__resourceCard:hover .v2-megamenu__resourceCardIcon svg path {
    fill: none;
    stroke: #415bff;
  }
}

/* 45 — «PLATAFORMA», EN TRES MÓDULOS CON FOTO   (rev. Celia 25-oct)
   ============================================================
   Deja de ser una fila de cards de texto: cada pieza de producto es ahora un
   módulo con imagen arriba, título, frase y su «Descubrir». Studio va en
   índigo —el mismo tratamiento que el destacado de los demás paneles— para
   que pese más sin salirse de la rejilla ni hacerse más grande.

   La foto va en 16/9 con `cover`: las imágenes de producto que hay en el repo
   no tienen todas la misma proporción, y recortando es como los tres módulos
   miden igual. */
.v2-megamenu__plataformaModulos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}
.v2-megamenu__plataformaModulo {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 1.6rem;
  background-color: #ffffff;
  text-decoration: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v2-megamenu__plataformaFoto {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #eef1f5;
}
.v2-megamenu__plataformaFoto img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
.v2-megamenu__plataformaCuerpo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 2rem 2rem 2.2rem;
}
.v2-megamenu__plataformaHead {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.v2-megamenu__plataformaTitulo {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  font-size: 1.9rem;
  line-height: 1.25;
  color: #25292e;
}
.v2-megamenu__plataformaDesc {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.35;
  color: #5a6472;
}
.v2-megamenu__plataformaModulo .v2-megamenu__featuredCue {
  margin-top: 0.8rem;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__plataformaModulo:hover {
    transform: translateY(-0.3rem);
    box-shadow: 0 1.2rem 2.4rem -0.8rem rgba(37, 41, 46, 0.18);
  }
}

/* Studio: el que destaca. */
.v2-megamenu__plataformaModulo--destacado {
  background: linear-gradient(135deg, #5b6cff 0%, #415bff 100%);
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaTitulo,
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaDesc {
  color: #ffffff;
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto {
  background-color: rgba(255, 255, 255, 0.12);
}
/* La pastilla NEW, en negativo sobre el índigo: la azul de siempre sobre
   fondo azul no se leía. */
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__badge {
  background: #ffffff;
  color: #415bff;
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__featuredCue {
  background: #ffffff;
  color: #415bff;
}

/* El «Descubrir» de los dos módulos blancos. La regla general lo deja en
   blanco sobre blanco translúcido —está pensada para el destacado índigo de
   los otros paneles—, así que sobre fondo claro no se veía: aquí va en índigo
   sobre su pastilla clara. */
.v2-megamenu__plataformaModulo:not(.v2-megamenu__plataformaModulo--destacado) .v2-megamenu__featuredCue {
  background-color: #eef1ff;
  color: #415bff;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__plataformaModulo:not(.v2-megamenu__plataformaModulo--destacado):hover .v2-megamenu__featuredCue {
    background-color: #e2e7ff;
    gap: 1.2rem;
  }
  .v2-megamenu__plataformaModulo--destacado:hover .v2-megamenu__featuredCue {
    gap: 1.2rem;
  }
}

/* 46 — Los módulos de «Plataforma», más bajos   (rev. Celia 25-oct)
   ============================================================
   Con la foto en 16/9 el módulo medía 364px y el panel se iba a 452: ocupaba
   media pantalla al pasar el ratón por encima de un menú. La foto pasa a una
   banda apaisada (2,4:1) y el texto baja un punto: sigue siendo un módulo con
   imagen, pero cabe en el gesto de abrir un menú.

   La proporción es lo que manda el alto, no un `height` fijo: así los tres
   siguen midiendo exactamente igual aunque cambien las fotos. */
.v2-megamenu__plataformaFoto {
  aspect-ratio: 2.4 / 1;
}
.v2-megamenu__plataformaCuerpo {
  gap: 0.4rem;
  padding: 1.6rem 1.8rem 1.8rem;
}
.v2-megamenu__plataformaTitulo {
  font-size: 1.7rem;
}
.v2-megamenu__plataformaDesc {
  font-size: 1.4rem;
}
.v2-megamenu__plataformaModulo .v2-megamenu__featuredCue {
  margin-top: 0.6rem;
  padding: 0.4rem 1rem;
  font-size: 1.3rem;
}

/* 47 — El hueco de la imagen, de momento vacío   (rev. Celia 25-oct)
   ============================================================
   Marcador en su sitio hasta que lleguen las imágenes buenas: borde
   discontinuo y «Imagen aquí» centrado. Mantiene la proporción 2,4:1 de la
   regla 46, así que el módulo mide ya lo que va a medir y meter la foto no
   moverá nada de sitio. */
.v2-megamenu__plataformaFoto--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f1f3f7;
  border: 1px dashed #c7cedb;
  border-radius: 1.2rem;
  margin: 1.2rem 1.2rem 0;
  box-sizing: border-box;
}
.v2-megamenu__plataformaFotoNota {
  font-family: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  font-size: 1.3rem;
  line-height: 1.2;
  color: #8b93a3;
}
/* En Studio el marcador va sobre índigo: el gris claro de arriba desaparecía. */
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto--vacia {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.45);
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFotoNota {
  color: rgba(255, 255, 255, 0.85);
}

/* 48 — El destacado, también con el hueco marcado   (rev. Celia 25-oct)
   ============================================================
   Mismo criterio que la regla 47 en «Plataforma»: hasta que lleguen las
   imágenes buenas, el marco queda vacío con su «Imagen aquí». Aquí el fondo
   es índigo, así que el marcador va en blanco translúcido; conserva el 16/9,
   de modo que los tres destacados siguen midiendo 240×213. */
.v2-megamenu__featuredImageWrap--vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px dashed rgba(255, 255, 255, 0.45);
  border-radius: 1rem;
  box-sizing: border-box;
}
.v2-megamenu__featuredImageWrap--vacia .v2-megamenu__plataformaFotoNota {
  color: rgba(255, 255, 255, 0.85);
}

/* 49 — Azul sólido, sin degradado   (rev. Celia 25-oct)
   ============================================================
   El destacado llevaba un degradado de #3348e0 a #6f5cff y el módulo de
   Studio otro más suave: dos azules distintos moviéndose en el mismo panel.
   Los dos pasan al índigo plano #415bff, que es el del DS y el que ya usan el
   hover de los enlaces y el «Descubrir».

   La sombra del destacado se queda: es lo que lo despega del panel gris. */
.v2-megamenu__featuredImageCard {
  background: #415bff;
}
.v2-megamenu__plataformaModulo--destacado {
  background: #415bff;
}

/* 50 — «Plataforma», más visual   (rev. Celia 25-oct)
   ============================================================
   Con el hueco vacío los tres módulos eran tres recuadros grises en fila: más
   parecían un error de carga que un menú. Sin inventarse imágenes, lo que se
   puede hacer es que el hueco hable:

   - dentro va el icono de la pieza, grande, sobre fondo índigo claro;
   - «Imagen aquí» baja a pie de icono, que es donde se lee como lo que es:
     una nota de montaje, no el contenido del módulo;
   - la tarjeta coge sombra en reposo —antes solo al pasar por encima—, para
     que los tres se despeguen del panel gris;
   - y Studio, que es el que manda, gana sombra azul y un pelo más de peso en
     el título.

   Todo con el mismo material del menú: el índigo plano, la pastilla de
   «Descubrir» y los iconos normalizados. */
.v2-megamenu__plataformaFoto--vacia {
  flex-direction: column;
  gap: 1rem;
  background-color: #eef1ff;
  border-color: #cdd5ff;
}
.v2-megamenu__plataformaFotoIcono {
  display: inline-flex;
  /* 5.6rem ≈ 46px: el glifo normalizado ocupa el 81% de su lienzo, así que a
     4rem se quedaba en 33px y dentro de un hueco de 168 de alto no se veía. */
  width: 5.6rem;
  height: 5.6rem;
}
.v2-megamenu__plataformaFotoIcono svg {
  width: 100%;
  height: 100%;
}
.v2-megamenu__plataformaFotoIcono svg * {
  fill: none;
  stroke: #415bff;
  stroke-width: 1.7;
  vector-effect: non-scaling-stroke;
}
.v2-megamenu__plataformaFotoNota {
  color: #8f9bd6;
}
.v2-megamenu__plataformaModulo {
  box-shadow: 0 0.2rem 0.6rem -0.2rem rgba(37, 41, 46, 0.06),
              0 0.8rem 2rem -0.8rem rgba(37, 41, 46, 0.12);
}

/* Studio: el hueco en negativo y la tarjeta con sombra azul. */
.v2-megamenu__plataformaModulo--destacado {
  box-shadow: 0 1rem 2.4rem -0.6rem rgba(51, 72, 224, 0.45);
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto--vacia {
  background-color: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.5);
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFotoIcono svg * {
  stroke: #ffffff;
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFotoNota {
  color: rgba(255, 255, 255, 0.8);
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaTitulo {
  font-size: 1.8rem;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__plataformaModulo:hover {
    box-shadow: 0 1.6rem 3.2rem -1rem rgba(37, 41, 46, 0.22);
  }
  .v2-megamenu__plataformaModulo--destacado:hover {
    box-shadow: 0 1.6rem 3.2rem -0.8rem rgba(51, 72, 224, 0.55);
  }
}

/* 53 — La letra de «Plataforma», más grande   (rev. Celia 25-oct)
   ============================================================
   Los módulos iban a 1.7rem de título y 1.4 de frase: a 1440, 14 y 11,6px.
   Para tres piezas que ocupan todo el ancho del panel y llevan su propia
   imagen, era letra de ficha pequeña. Suben a 2 y 1.6 (16,6 y 13,2px).

   La frase se queda en dos líneas, que es como Celia las quiere: con 1.6 las
   tres siguen cayendo en dos a 1440 y a 1280. Si algún día se alarga el copy,
   hay que volver a mirarlo aquí. */
.v2-megamenu__plataformaTitulo {
  font-size: 2rem;
}
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaTitulo {
  font-size: 2.1rem;
}
.v2-megamenu__plataformaDesc {
  font-size: 1.6rem;
}

/* 54 — En «Recursos», las cards centradas con el banner   (rev. Celia 25-oct)
   ============================================================
   La rejilla de cards mide 159px y el destacado 213, y el contenedor los
   alineaba por arriba (`align-items: start`): las dos filas de cards quedaban
   altas y debajo sobraba un hueco de 54px contra el banner.

   Centrándolas, ese aire se reparte arriba y abajo —27px a cada lado— y las
   dos mitades del panel se leen como un bloque. Solo afecta a Recursos:
   Plataforma y Sobre nosotros ya no usan esta rejilla. */
.v2-megamenu__cardGridFeatured {
  align-items: center;
}

/* 55 — Prueba: Intelligence a imagen completa   (rev. Celia 25-oct)
   ============================================================
   El módulo se monta al revés: la imagen ocupa la tarjeta entera y el texto
   va encima, abajo a la izquierda, sobre un velo oscuro que le da contraste.
   Es una variante del mismo bloque, no un componente nuevo: mide lo mismo que
   los otros dos y se queda en su sitio de la rejilla.

   El velo es imprescindible aunque hoy el hueco esté vacío: en cuanto entre
   una foto real, el texto blanco necesita algo debajo para leerse. Va de
   transparente a #25292e, así que la parte de arriba de la imagen se ve
   limpia. */
.v2-megamenu__plataformaModulo--imagenCompleta {
  position: relative;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: inherit;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(37, 41, 46, 0) 35%, rgba(37, 41, 46, 0.78) 100%);
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaCuerpo {
  position: relative;
  z-index: 1;
  /* El cuerpo empuja la altura de la tarjeta desde abajo: con la imagen en
     absoluto, es lo único que ocupa sitio. El padding-top reproduce el alto
     que tenía el hueco de la foto, para que las tres tarjetas midan igual. */
  margin-top: auto;
  padding-top: 11rem;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaTitulo,
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaDesc {
  color: #ffffff;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFotoNota {
  color: rgba(37, 41, 46, 0.45);
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFotoIcono {
  position: relative;
  z-index: 1;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__featuredCue {
  background-color: #ffffff;
  color: #415bff;
}

/* 56 — Los tres, a imagen completa   (rev. Celia 25-oct)
   ============================================================
   Studio es el único que además va en índigo: sobre su azul, el velo oscuro
   de la regla 55 lo ensuciaba. Lleva el suyo, del mismo azul a uno más
   oscuro, así que sigue leyéndose como el bloque azul del panel y el texto
   blanco mantiene el contraste cuando entre la foto. */
.v2-megamenu__plataformaModulo--imagenCompleta.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(65, 91, 255, 0) 30%, rgba(40, 56, 180, 0.92) 100%);
}
.v2-megamenu__plataformaModulo--imagenCompleta.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFotoNota {
  color: rgba(255, 255, 255, 0.8);
}

/* 57 — Imagen completa: el marcador en su sitio y el alto de siempre
   (rev. Celia 25-oct)
   ============================================================
   Al pasar la imagen a absoluta, la tarjeta dejó de medir 295 y bajó a 195:
   lo único que ocupaba sitio era el texto. Y el «Imagen aquí», centrado en un
   hueco que ahora es toda la tarjeta, caía justo encima del título.

   Se arregla por el mismo sitio: el marcador sube a la mitad de arriba y el
   acolchado del cuerpo recupera el alto que daba la banda de foto. */
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto {
  align-items: flex-start;
  padding-top: 4.2rem;
}
/* El alto lo fija la tarjeta, no el acolchado: con la imagen en absoluto, el
   contenido ya no empuja, y un padding calculado se descuadraba en cuanto una
   frase pasaba de dos líneas. 35.6rem son los 295px que medían antes. */
.v2-megamenu__plataformaModulo--imagenCompleta {
  min-height: 35.6rem;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaCuerpo {
  padding-top: 6rem;
}

/* 58 — Los destacados, también a imagen completa   (rev. Celia 25-oct)
   ============================================================
   Misma idea que en los módulos: la imagen ocupa la tarjeta entera y el
   título, la etiqueta y el «Descubrir» van encima, abajo. El destacado ya era
   azul, así que el velo es azul oscuro y no gris: encima del índigo, un velo
   neutro lo apaga.

   Sigue midiendo 240×213, que es lo que mantiene a los tres destacados
   iguales entre paneles. */
.v2-megamenu__featuredImageCard {
  position: relative;
}
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageWrap {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
  margin: 0;
  border-radius: inherit;
  align-items: flex-start;
  padding-top: 3.2rem;
}
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(65, 91, 255, 0) 30%, rgba(40, 56, 180, 0.92) 100%);
}
.v2-megamenu__featuredImageCard .v2-megamenu__featuredBody {
  position: relative;
  z-index: 1;
  margin-top: auto;
}
/* Igual que en los módulos: sin la foto empujando, la tarjeta se quedaba en
   89px. 25.7rem son los 213 de siempre, que es lo que mantiene iguales los
   destacados de los tres paneles. */
.v2-megamenu__featuredImageCard {
  min-height: 25.7rem;
  box-sizing: border-box;
}

/* 59 — Fuera el letrero del hueco   (rev. Celia 25-oct)
   ============================================================
   Con la imagen a sangre y el texto encima, el «Imagen aquí» competía con el
   título en vez de leerse como una nota de montaje. Se va el letrero y con él
   el borde discontinuo, que solo estaba para acompañarlo. Queda el fondo y,
   en los módulos, el icono de la pieza. */
.v2-megamenu__plataformaFoto--vacia,
.v2-megamenu__featuredImageWrap--vacia {
  border: 0;
}

/* 60 — El velo, más cerrado   (rev. 25-oct, al entrar las fotos de verdad)
   ============================================================
   Con el hueco vacío cualquier velo valía. Con las fotos puestas no: las de
   «Sobre nosotros» son luminosas —cielo, fachada blanca, una camiseta clara
   justo donde cae el texto— y el blanco se perdía encima. El velo arranca
   antes (20% en vez de 35) y cierra más (0.88), que es lo que hace legible el
   título sobre la parte clara de la fachada. */
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(37, 41, 46, 0) 20%, rgba(37, 41, 46, 0.88) 100%);
}

/* 61 — La foto, a sangre de verdad   (rev. Celia 25-oct)
   ============================================================
   El hueco llevaba `padding-top: 4.2rem` de cuando dentro había un icono que
   colocar. Con una foto, ese acolchado le comía 35px por arriba: la imagen
   medía 423×260 dentro de una tarjeta de 295 y asomaba una franja del fondo.

   El acolchado se queda solo para el hueco vacío, y la foto se estira a los
   cuatro bordes. Sigue en `cover`, así que se amplía y recorta por donde haga
   falta en vez de deformarse. */
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto {
  padding: 0;
}
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto--vacia {
  padding-top: 4.2rem;
}
.v2-megamenu__plataformaFoto img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}

/* 62 — Tarjetas más bajas   (rev. Celia 25-oct)
   ============================================================
   35.6rem (295px) venían de la versión con la foto en banda y el texto
   debajo. Con la imagen a sangre y el texto encima no hacen falta: el bloque
   de texto ocupa unos 130px y el resto era foto de más.

   Bajan a 28rem (232px), que deja unos 100px de imagen limpia por encima del
   título: suficiente para que se vea la foto y para que el velo arranque
   donde tiene que arrancar. Afecta a los dos paneles que usan estos módulos,
   Plataforma y Sobre nosotros. */
.v2-megamenu__plataformaModulo--imagenCompleta {
  min-height: 28rem;
}

/* 63 — Las frases, repartidas entre sus dos líneas   (rev. Celia 25-oct)
   ============================================================
   Medido a 1440 antes de tocar nada: las 22 frases de Funcionalidades caen en
   dos líneas, pero la segunda ocupa de media un 20% del ancho —una o dos
   palabras sueltas colgando—. En Recursos, un 17%; en Soluciones, un 36%.

   `text-wrap: balance` reparte el texto entre las líneas que ya ocupa, sin
   añadir ninguna: no cambia el alto, solo deja las dos parecidas. Encima, el
   bloque se estrecha a 94%, que es la compresión que pedía Celia; con ese
   margen ninguna frase se va a una tercera línea (comprobado una a una).

   Si mañana se alarga un copy, hay que volver a medir: el límite son dos
   líneas y aquí ya no sobra sitio. */
.v2-megamenu__mdItemDesc,
.v2-megamenu__cardGrid .v2-megamenu__resourceCardDesc {
  text-wrap: balance;
  max-width: 94%;
}

/* 64 — El destacado, más ancho   (rev. Celia 25-oct)
   ============================================================
   Pasa de 29rem (240px) a 35rem (290). Al comerse esos 50px, las dos columnas
   de enlaces del detalle se estrechan y se juntan, que es lo que se buscaba:
   el panel se leía con un río de aire en medio.

   La condición de las dos líneas sigue en pie: con 35rem las 41 frases de
   Funcionalidades, Soluciones y Recursos siguen cayendo en dos, a 1440 y a
   1280. Se probó también 36rem y aguantaban igual, así que el tope no está
   aquí; 35 se queda porque deja margen para cuando crezca algún copy.

   Efecto medido a 1440: las columnas de enlaces pasan de 397 a 372px de
   ancho, y la segunda arranca 25px antes. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__featuredInGrid {
    width: 35rem;
    min-width: 35rem;
  }
}

/* 65 — Menos aire entre las dos columnas del detalle   (rev. Celia 25-oct)
   ============================================================
   El hueco entre columnas baja de 2.4rem (20px) a 1.2 (10). Ojo al medirlo:
   cada enlace lleva además 1.2rem de acolchado a cada lado —es lo que pinta
   el fondo del hover—, así que entre el texto de una columna y el de la otra
   siguen quedando unos 30px; lo que se quita es hueco muerto, no respiración.

   Solo el detalle de Funcionalidades y Soluciones. La rejilla de Recursos son
   tres columnas y su aire no estorba. */
.v2-megamenu__mdPane {
  column-gap: 1.2rem;
}

/* 66 — El recuadro del hover, adaptado a las columnas juntas
   (rev. Celia 25-oct)
   ============================================================
   Con el hueco entre columnas en 10px, los recuadros del hover de una columna
   y de la otra se quedaban a 10px: al pasar el ratón parecían un solo bloque
   partido.

   El recuadro se estrecha 0.8rem por la derecha. Es `width`, no `padding`:
   el acolchado no encoge la caja —la caja es la celda de la rejilla—, así que
   tocarlo habría movido el texto sin separar nada. Así el texto se queda
   exactamente donde está y los dos recuadros pasan a 18px de distancia. */
.v2-megamenu__mdItem {
  width: calc(100% - 0.8rem);
}

/* 67 — El letrero del hueco, arriba   (rev. 25-oct)
   ============================================================
   Al volver el «Imagen aquí» con la tarjeta a imagen completa, caía justo
   encima del título: el hueco es `flex-direction: column`, así que lo que
   manda en vertical es `justify-content` —estaba en `center`— y no
   `align-items`, que ahí solo coloca en horizontal. Se ancla arriba. */
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto--vacia,
.v2-megamenu__featuredImageWrap--vacia {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 3.2rem;
}

/* 68 — Los destacados, al alto de los módulos   (rev. Celia 25-oct)
   ============================================================
   Pasan de 25.7rem (213px) a 28rem (232), que es lo que miden las tarjetas de
   Plataforma y de Sobre nosotros. Con esto los cinco bloques con imagen del
   menú miden lo mismo de alto, aunque estén en paneles distintos. */
.v2-megamenu__featuredImageCard {
  min-height: 28rem;
}

/* 69 — Las columnas, aún más juntas   (rev. Celia 25-oct)
   ============================================================
   Segunda vuelta: el hueco de la rejilla baja de 1.2rem (10px) a 0.4 (3,3),
   con lo que la segunda columna de enlaces arranca unos 7px antes.

   Y el recuadro del hover se adapta otra vez: si solo se recorta el hueco,
   los dos recuadros se quedarían a 3px y volverían a parecer un bloque
   partido. El recorte del recuadro sube de 0.8rem a 1.6, así que entre ellos
   siguen quedando unos 16px —lo mismo que antes— mientras el texto sí se
   acerca. Es la misma idea de la regla 66: el hueco mueve el texto, el ancho
   del recuadro mueve el fondo del hover. */
.v2-megamenu__mdPane {
  column-gap: 0.4rem;
}
.v2-megamenu__mdItem {
  width: calc(100% - 1.6rem);
}

/* 70 — El NEW, amarillo con letra oscura   (rev. Celia 25-oct)
   ============================================================
   El amarillo es **#ecdf30**, el del degradado de marca (#415bff → #ecdf30),
   que es el que recorre la franja de arriba y media docena de componentes v2.
   No el #fac832 del TREND, que es más anaranjado y solo vive en esa pastilla.
   Se va el degradado azul animado y, con él, la animación: sobre amarillo el
   texto es oscuro y no hay brillo que recorrer.

   Hay que repetirlo en los dos sitios que repintan las pastillas por estar
   sobre azul —el destacado y el módulo de Studio—, o ahí seguiría saliendo
   blanca. */
.v2-megamenu__badge.v2-megamenu__badgeNuevo,
.v2-megamenu__featuredImageCard .v2-megamenu__badge.v2-megamenu__badgeNuevo,
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__badge.v2-megamenu__badgeNuevo {
  background-color: #ecdf30;
  background-image: none;
  color: #25292e;
  animation: none;
}

/* 71 — Las columnas del detalle, de ancho fijo   (rev. Celia 25-oct)
   ============================================================
   Hasta ahora eran elásticas (1fr cada una), así que se repartían todo el
   hueco disponible y acercarlas recortando el `gap` apenas movía el texto:
   lo que se quitaba de en medio se lo quedaban ellas. Pasan a ancho fijo y el
   sobrante se va al lado del destacado.

   El ancho sale de medir, no de ojo. Con las 35 frases de Funcionalidades y
   Soluciones delante:
     40rem → 1 frase se va a tres líneas
     41rem → ninguna (es el límite exacto)
     42rem → ninguna, con un poco de aire
   Se queda en 42rem (347px): estrecha las columnas unos 20px respecto a las
   elásticas y deja margen para cuando crezca algún copy. Si se baja de 41,
   hay que recortar copy. */
.v2-megamenu__mdPane {
  grid-template-columns: repeat(2, minmax(0, 42rem));
  justify-content: start;
}

/* 72 — Los destacados, más anchos todavía   (rev. Celia 25-oct)
   ============================================================
   Sustituye al ancho de la regla 64: de 35rem (290px) a 44rem (364). Al fijar
   el ancho de las columnas quedó un pasillo de casi 100px entre la segunda
   columna y el destacado; esto se lo come.

   Otra vez medido con las 35 frases: a 1440, hasta 44rem ninguna se va a tres
   líneas y a 47 ya se va una de Soluciones. A 1280 aguantan las cuatro medidas
   probadas, porque ahí las columnas encogen con `minmax` y el balanceo las
   reparte igual. 44rem es el tope con margen. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__featuredInGrid {
    width: 44rem;
    min-width: 44rem;
  }
}

/* 73 — La foto del destacado, a sangre   (rev. Celia 25-oct)
   ============================================================
   Al volver la imagen al destacado hay que repetir lo que ya se hizo en los
   módulos de Plataforma: el marco es `position: absolute` sobre toda la
   tarjeta, así que la foto se estira a los cuatro bordes y va en `cover`, que
   amplía y recorta en vez de deformar. El velo azul de la regla 58 sigue
   encima y es lo que mantiene legible el título. */
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageWrap img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
}
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageWrap:not(.v2-megamenu__featuredImageWrap--vacia) {
  padding: 0;
}

/* 74 — El destacado, sin el borde de 1px   (rev. 25-oct)
   ============================================================
   La foto medía 362×230 en una tarjeta de 364×232. El píxel no era del marco
   de la imagen sino de la propia tarjeta: conserva un `border` transparente
   de cuando el destacado era una card con contorno. El marco va en absoluto
   `inset: 0`, que se mide contra la caja de padding —por dentro del borde—,
   así que la foto se quedaba 1px corta por los cuatro lados y asomaba el
   índigo del fondo.

   Se quita el borde. La tarjeta es `border-box`, así que sigue midiendo
   364×232. */
.v2-megamenu__featuredImageCard,
.v2-megamenu__featuredImageCard .v2-megamenu__featuredImageWrap {
  border: 0;
}

/* 75 — Un destacado por familia   (rev. Celia 25-oct)
   ============================================================
   En Funcionalidades el destacado ya no es fijo: hay uno por familia y se
   cambia con el raíl. Están los cuatro montados y se enseña el de la familia
   activa, igual que los paneles de enlaces, así que cambiar de familia no
   pide nada al servidor.

   `[hidden]` necesita su `display: none` explícito: el contenedor es grid y
   el valor de display del propio elemento gana al del atributo. Es la misma
   piedra con la que se tropezó en los paneles del maestro-detalle. */
.v2-megamenu__mdDestacado[hidden] {
  display: none;
}

/* 76 — El «Descubrir», uno solo en todo el menú   (rev. Celia 25-oct)
   ============================================================
   Había dos: el de los destacados —pastilla blanca translúcida con texto
   blanco, 88×22— y el de los módulos de Plataforma y Sobre nosotros —índigo
   claro con texto índigo, 81×20—. Mandan los destacados.

   Ahora encaja igual de bien en los módulos: desde que la imagen va a sangre,
   el «Descubrir» cae sobre el velo oscuro, así que el blanco se lee. Antes,
   con la foto en banda y el texto sobre fondo claro, habría desaparecido. */
.v2-megamenu__plataformaModulo .v2-megamenu__featuredCue,
.v2-megamenu__plataformaModulo:not(.v2-megamenu__plataformaModulo--destacado) .v2-megamenu__featuredCue,
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__featuredCue,
.v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__featuredCue {
  padding: 0.5rem 1.2rem;
  border-radius: 2.8rem;
  background-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
  font-size: 1.4rem;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__plataformaModulo:hover .v2-megamenu__featuredCue,
  .v2-megamenu__plataformaModulo:not(.v2-megamenu__plataformaModulo--destacado):hover .v2-megamenu__featuredCue {
    background-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
    gap: 1.2rem;
  }
}

/* 77 — Los iconos de Recursos, al tamaño del resto   (rev. Celia 25-oct)
   ============================================================
   Mismo archivo, mismo lienzo de 24 y mismo trazo de 1.7, pero se veían más
   pequeños y más gordos. La diferencia no estaba en el icono sino en su caja:
   el chip de Recursos llevaba 0.8rem de acolchado y el de los enlaces 0.45,
   los dos sobre 3.4rem. Resultado: el dibujo se pintaba a 14,8px en Recursos
   y a 20,6 en el detalle, un 30% más pequeño.

   Y de ahí venía también lo del grosor: el trazo es `non-scaling-stroke`, así
   que mide 1.7px pase lo que pase; cuanto más pequeño es el dibujo, más gordo
   se ve en proporción. Igualando el acolchado se arreglan las dos cosas. */
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon {
  padding: 0.45rem;
}

/* 78 — (revertida el 25-oct: Celia se refería a otra cosa)
   El destacado de Recursos vuelve a ser una tarjeta dentro del panel, con su
   margen y sus esquinas redondeadas, como los otros dos. */

/* 79 — Soluciones se ajusta a cada familia   (rev. Celia 25-oct)
   ============================================================
   Fuera el suelo de 42,5rem. Estaba para que el panel no pegara un salto al
   cambiar de familia, pero obligaba a «Sectores» y «Cargo» —que ocupan 174px
   de contenido— a medir lo mismo que «Tamaño de empresa», que ocupa 351: un
   palmo de blanco debajo de las listas cortas.

   El salto lo resuelve ahora el JS del maestro-detalle, que anima el alto del
   panel al cambiar de familia. Funcionalidades conserva su suelo porque allí
   las cuatro familias miden casi lo mismo y no hay nada que ajustar. */
@media only screen and (min-width: 1024px) {
  [data-v2-mega-content="soluciones"] .v2-megamenu__mdDetail {
    min-height: 0;
  }
}

/* 80 — El TREND, al amarillo del NEW   (rev. Celia 25-oct)
   ============================================================
   Las dos pastillas al mismo #ecdf30, el del degradado de marca. El TREND
   arrastraba el #fac832, más anaranjado, de cuando era la única etiqueta
   amarilla del menú; con el NEW ya en el amarillo bueno, convivían dos. */
.v2-megamenu__badge.v2-megamenu__badgeTrend,
.v2-megamenu__featuredImageCard .v2-megamenu__badge.v2-megamenu__badgeTrend,
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__badge.v2-megamenu__badgeTrend {
  background-color: #ecdf30;
  background-image: none;
  color: #25292e;
}

/* 81 — La foto de Benefits llena la tarjeta   (rev. Celia 25-oct)
   ============================================================
   Se probó con `contain` para que se viera entera y el resultado fue peor:
   la foto es 1,54 de proporción y la tarjeta 1,57, así que quedaban dos
   franjas de índigo a los lados y la tarjeta parecía mal montada.

   Vuelve a `cover`: la imagen se amplía hasta cubrir y se recorta lo que
   sobre, que es lo que pidió Celia —«si hay que ampliar la foto dentro de su
   cuadrado para que ocupe todo, se hace»—. Con esa diferencia de proporción
   el recorte es de 4px de alto, nada. */
[data-v2-mega-content="recursos"] .v2-megamenu__featuredImageCard img {
  object-fit: cover;
}

/* 82 — Feedback de Isaac para el móvil   (25-oct)
   ============================================================
   Tres cosas, dos aquí y una que ya estaba resuelta al pasar el menú a
   niveles (al entrar en una pantalla el scroll vuelve arriba, así que el
   título nunca queda escondido detrás de lo que habías scrolleado).

   1. Iconos en TODAS las subsecciones. Las familias eran la única lista sin
      icono; ahora llevan el suyo, con el mismo chip que los enlaces.

   2. Más dedo entre opciones sin descripción. En los enlaces del nivel 3 solo
      hay icono y etiqueta, así que las filas quedaban a 36px y con el dedo
      gordo es fácil pulsar la de al lado. Suben a 48px de alto útil, que es
      el mínimo que recomiendan tanto Apple como Google para un objetivo
      táctil. Donde hay descripción —las cards— la fila ya pasa de 60px y no
      se toca. */
.v2-megamenu__linkColumnsMobileOverlay--conIconos .v2-megamenu__mobileItemLink,
.v2-menuoverlay__drillLinks .v2-megamenu__mobileItemLink {
  padding-top: 1.1rem;
  padding-bottom: 1.1rem;
  min-height: 4.8rem;
  box-sizing: border-box;
}
.v2-menuoverlay__drillTrigger--familia {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.8rem;
}
.v2-menuoverlay__drillTrigger--familia .v2-menuoverlay__accordionLabel {
  flex: 1 1 auto;
}

/* 83 — Miniaturas de producto en «Plataforma»   (rev. Celia 26-oct)
   ============================================================
   Referencia: tarjetas con un trozo de interfaz flotando sobre un fondo
   claro, no una foto a sangre. Se monta con el material que ya hay —las
   pantallas reales de cada página— y el encuadre lo hace el CSS:

   - el hueco deja de ser imagen a sangre y pasa a fondo claro con un lavado
     índigo, que es lo que da el aire de la referencia;
   - dentro, la pantalla real recortada como una tarjeta flotante, con su
     sombra, asomando por abajo: se lee como un trozo de producto, no como un
     pantallazo pegado;
   - el velo sigue abajo, porque el título va encima.

   Cada pieza enseña su parte: la conversación en Intelligence, el entorno de
   trabajo en Studio y la tarjeta de permisos en MCP. */
.v2-megamenu__plataformaFoto--mini {
  background: linear-gradient(180deg, #f6f7fd 0%, #e9ecfb 100%);
  overflow: hidden;
}
.v2-megamenu__plataformaMini {
  position: absolute;
  left: 11%;
  right: 11%;
  top: 2.4rem;
  width: 78%;
  height: auto;
  max-height: none;
  border-radius: 1rem;
  box-shadow: 0 1.2rem 2.8rem -0.8rem rgba(37, 41, 46, 0.28);
  object-fit: cover;
  object-position: top center;
}
/* Cada pantalla pide su recorte: la conversación se ve entera, el entorno de
   Studio solo por su mitad de arriba y la tarjeta de permisos casi completa. */
[href="/v2-sesame-intelligence/"] .v2-megamenu__plataformaMini {
  aspect-ratio: 16 / 11;
  object-position: center top;
}
[href="/v2-studio/"] .v2-megamenu__plataformaMini {
  aspect-ratio: 16 / 9;
  object-position: center top;
}
[href="/v2-mcp/"] .v2-megamenu__plataformaMini {
  aspect-ratio: 16 / 11;
  object-position: center top;
}
/* En Studio, que va en índigo, el fondo de la miniatura se tiñe para que no
   parezca un recorte blanco pegado encima del azul. */
.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto--mini {
  background: linear-gradient(180deg, #eceefc 0%, #dcd9fb 100%);
}

/* 84 — La miniatura, dentro de su banda   (rev. Celia 26-oct)
   ============================================================
   Primer intento: la miniatura casi llenaba la tarjeta y el texto le caía
   encima. En la referencia el trozo de interfaz va ARRIBA, dentro de una
   banda clara, y el texto DEBAJO; por eso Plataforma vuelve a la versión con
   banda (el panel ya no es imagen a sangre).

   La miniatura se ancla abajo de la banda y asoma recortada, como en la
   referencia: da la sensación de pantalla que sigue más allá del marco. */
.v2-megamenu__plataformaFoto--mini {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 1.2rem;
  margin: 1.2rem 1.2rem 0;
}
.v2-megamenu__plataformaMini {
  position: absolute;
  left: 12%;
  right: auto;
  top: 1.6rem;
  bottom: 0;
  width: 76%;
  height: auto;
  border-radius: 0.8rem 0.8rem 0 0;
  box-shadow: 0 1rem 2.4rem -0.8rem rgba(37, 41, 46, 0.3);
  object-fit: cover;
  object-position: center top;
}

/* 85 — La miniatura no se estiraba   (rev. 26-oct)
   ============================================================
   Medía 398px, el ancho entero de la banda, en vez del 76% que pide la regla
   84. La culpa, la especificidad: `.v2-megamenu__plataformaFoto img` —una
   clase y un elemento— gana a `.v2-megamenu__plataformaMini`, que es solo una
   clase, aunque esté después. Se escribe con las dos clases y ya manda. */
.v2-megamenu__plataformaFoto--mini .v2-megamenu__plataformaMini {
  position: absolute;
  left: 12%;
  right: auto;
  top: 1.6rem;
  bottom: 0;
  width: 76%;
  height: auto;
  max-width: none;
  max-height: none;
  border-radius: 0.8rem 0.8rem 0 0;
  box-shadow: 0 1rem 2.4rem -0.8rem rgba(37, 41, 46, 0.3);
  object-fit: cover;
  object-position: center top;
}

/* 86 — La miniatura llena su banda   (rev. Celia 26-oct)
   ============================================================
   Se acabó lo de la pantalla flotando al 76% con su sombra: la imagen ocupa
   la banda entera, de borde a borde. Sigue siendo `cover`, así que se amplía
   y recorta por donde haga falta en vez de deformarse, y se encuadra por
   arriba, que es donde está lo que se reconoce de cada pantalla. */
.v2-megamenu__plataformaFoto--mini .v2-megamenu__plataformaMini {
  position: absolute;
  inset: 0;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border-radius: inherit;
  box-shadow: none;
  object-fit: cover;
  object-position: center top;
}
.v2-megamenu__plataformaFoto--mini {
  overflow: hidden;
}

/* 87 — Las pantallas de Plataforma, encuadradas por arriba   (26-oct)
   ============================================================
   Con la imagen a sangre, el encuadre por defecto es el centro, y en una
   captura de interfaz el centro no dice nada: en Studio salía la fila de
   widgets y se perdían el saludo y el campo de prompt. Van ancladas arriba,
   que es donde cada pantalla se reconoce. Las fotos de Sobre nosotros siguen
   centradas, que ahí lo que importa está en medio. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaFoto img {
  object-position: center top;
}

/* 88 — El velo, más cerrado sobre las pantallas claras   (26-oct)
   ============================================================
   Las capturas de producto son casi blancas, así que el velo que vale para
   una fotografía aquí se queda corto: el título caía sobre el texto de la
   interfaz y se leían los dos a la vez. Para Plataforma el velo arranca
   antes y cierra más a media altura, justo donde empieza el bloque de texto;
   la parte de arriba sigue limpia para que la pantalla se reconozca. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(37, 41, 46, 0) 12%, rgba(37, 41, 46, 0.62) 45%, rgba(37, 41, 46, 0.95) 100%);
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(65, 91, 255, 0) 12%, rgba(48, 66, 200, 0.68) 45%, rgba(36, 50, 165, 0.96) 100%);
}

/* 89 — Los logos de MCP, por encima del texto   (26-oct)
   ============================================================
   La pantalla de MCP tiene la misma proporción que la tarjeta, así que entra
   sin recorte y sus dos logos caen justo en el centro… que es donde empieza
   el bloque de texto: el título les pasaba por encima y el velo se los comía.

   Se agranda un punto y se sube, de modo que los logos quedan en el tercio
   limpio de arriba. El sobrante lo recorta el marco, que ya va con
   `overflow: hidden`. (v2b: por el id del módulo; en sq1 va por su href.) */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo[data-v2b-modulo="mcp"] .v2-megamenu__plataformaFoto img {
  /* 1.16, no 1.3 (rev. Celia 26-oct): con 1.3 los logos se veían demasiado
     grandes. El mínimo es 1.16: la imagen tiene que crecer al menos lo que se
     la sube, o por abajo asomaría el fondo de la tarjeta. */
  transform: scale(1.16) translateY(-6%);
}

/* 90 — El velo de Plataforma, menos negro   (rev. Celia 26-oct)
   ============================================================
   Venía de 0,62 a media altura y 0,95 abajo, que sobre una captura casi
   blanca se leía como una mancha negra. Baja a 0,42 y 0,78, y el color deja
   de ser el gris casi negro del DS para teñirse del azul del menú (#1d2340):
   oscurece lo justo para que el blanco del título aguante, pero se lee como
   sombra y no como un bloque. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(29, 35, 64, 0) 14%, rgba(29, 35, 64, 0.42) 48%, rgba(29, 35, 64, 0.78) 100%);
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after {
  background: linear-gradient(180deg, rgba(29, 35, 64, 0) 14%, rgba(29, 35, 64, 0.42) 48%, rgba(29, 35, 64, 0.78) 100%);
}

/* ======================================================================
   PORTE DEL MENÚ DE ESPAÑA (sq1 → FR, 27-oct)
   ======================================================================
   Lo que viene debajo es el rediseño del panel y del menú del teléfono,
   traído tal cual de España. Se han dejado FUERA a propósito:
   - las reglas 96, 99, 100, 124, 128 y 133, que vacían los huecos de
     imagen y los marcan con «Imagen aquí»: en FR los destacados sí
     tienen foto y se las cargarían;
   - las 125, 126, 127, 130 y 141, que colocan los visuales del Figma de
     las tarjetas de Plataforma y de Sesame IT, que aquí no existen;
   - las 131-134, del vídeo del destacado, que Celia descartó;
   - y las 135, 137-140, que vuelven las tarjetas de destacado claras con
     texto oscuro. En MX la foto sigue llenando la tarjeta y el texto va
     en blanco encima: aplicarlas dejaría el texto oscuro sobre la foto.
   Cuando MX tenga visuales como los de España, esas entran detrás. */

/* 91 — La barra de degradado vuelve, y la franja de cierre va encima
   (rev. Celia 26-oct)
   ============================================================
   La regla 13 la escondió el 22-oct y la 27 dejó la franja de cierre en negro
   (#25292e). Celia las quiere unidas: una sola banda de degradado al pie del
   panel, que haga de separación con la página, con el «Ver todo» encima en vez
   de sobre el negro.

   Se recupera el `<div>` de la barra —que nunca se quitó del markup— y se le
   da el alto de la franja, así que las dos son la misma banda y no hay costura
   entre dos degradados. El degradado se pinta aquí y no en el
   pseudo-elemento de la regla 8 porque ese se extiende de -200rem a +200rem
   para sangrar por los lados: un degradado ahí se vería como un trozo plano
   del centro. La barra, en cambio, mide exactamente el ancho del panel
   (`left: 0; right: 0`), así que el degradado entra entero.

   `z-index: -1` la deja por encima del blanco del panel y por debajo del
   texto; sin eso tapa el enlace, porque va posicionada y después en el DOM.
   El panel es un contexto de apilamiento propio (position + z-index), así que
   el -1 no se escapa hacia atrás.

   Los altos son la franja medida: padding × 2 + la línea del enlace
   (1.6rem × 1.2 = 1.92rem) → 1.1 + 1.1 + 1.92 = 4.12rem, y 1.2 + 1.2 + 1.92 =
   4.32rem de 1440 para arriba. Si cambia el padding de la regla 27 o el cuerpo
   del enlace, hay que volver a medirlo: de quedarse corto asomaría el negro
   por arriba, y de pasarse, el degradado subiría por encima de la franja. */
.v2-megamenu__gradientBar {
  display: block;
  z-index: -1;
  height: 4.12rem;
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__gradientBar {
    height: 4.32rem;
  }
}
/* El fondo negro de la regla 27 sobra: lo tapa la barra, pero dejarlo puesto
   haría que cualquier descuadre de alto se viera como una línea negra. */
.v2-megamenu__panelCierre::before {
  background-color: transparent;
}

/* 92 — Vuelve el velo de la página al abrir el menú   (rev. Celia 26-oct)
   ============================================================
   La regla 28 lo dejó transparente el 22-oct. Celia lo quiere de vuelta: con
   el panel abierto, la página de debajo se oscurece.

   Va al 0,35 —el más suave de los que se probaron aquel día (0,8 del DS, luego
   0,5, luego 0,35)— porque ahora el pie del panel ya pesa por sí solo con el
   degradado: el velo solo tiene que separar, no apagar la página. */
.v2-megamenu__backdrop {
  background: rgba(32, 33, 41, 0.35);
}

/* 93 — La banda de abajo, del grosor de la de arriba   (rev. Celia 26-oct)
   ============================================================
   La regla 91 le dio a la barra el alto de la franja de cierre (4,12 / 4,32rem)
   para que las dos fueran una sola banda. Medida contra la barra de la cabecera
   —`.v2-header__headerLine`, 0,8rem desde el ajuste de diseño del 15-sep— se
   veía cinco veces más gruesa. Celia la quiere igual que aquella.

   A 0,8rem ya no cabe el enlace dentro, así que la franja de cierre y la barra
   vuelven a ser dos cosas: la franja recupera el fondo claro del DS (regla 8)
   con el enlace en azul, y la barra queda debajo como línea de cierre. El
   blanco del enlace de la regla 27 tenía que irse con el fondo oscuro: sobre
   claro no se leía.

   El panel recupera un `padding-bottom` del alto exacto de la barra —la regla
   13 lo había puesto a 0 cuando no había barra—, así que la banda queda DEBAJO
   de la franja y no pisa sus 8px de abajo. Las esquinas redondeadas del panel
   la siguen recortando.

   No se vuelve al negro de la regla 27: Celia lo descartó el 26-oct. */
.v2-megamenu__gradientBar {
  height: 0.8rem;
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__gradientBar {
    height: 0.8rem;
  }
}
.v2-megamenu__panel {
  padding-bottom: 0.8rem;
}
.v2-megamenu__panelCierre::before {
  background-color: #f6f8ff;
  border-top: 1px solid #e8ecf5;
}
.v2-megamenu__panelCierreLink {
  color: #415bff;
}
/* En el acordeón del móvil la franja es un botón con fondo propio (#25292e) y
   texto blanco: ahí el enlace NO vuelve al azul. */
.v2-menuoverlay__nivel .v2-megamenu__panelCierreLink {
  color: #ffffff;
}

/* 94 — La banda del pie, con el degradado entero de marca   (rev. Celia 26-oct)
   ============================================================
   Venía con el degradado de dos paradas del DS (#425cff → #f0ec85): en 6,6px de
   alto se leía como una barra azul con la punta amarilla, no como un degradado.

   Pasa al mismo que la barra de la cabecera —cinco paradas, azul y amarillo
   tres veces, `background-size: 200%` y el bucle de 8s de
   `headerLineGradient`—, así que arriba y abajo son ya la misma pieza en color
   y en movimiento, no solo en grosor. Los keyframes están en v2-base.css, que
   se carga en todas las páginas v2: aquí no hay que repetirlos. */
.v2-megamenu__gradientBar {
  background: linear-gradient(90deg, #415bff 0%, #ecdf30 20%, #ecdf30 30%, #415bff 50%, #ecdf30 70%, #ecdf30 80%, #415bff 100%);
  background-size: 200% 100%;
  animation: headerLineGradient 8s linear infinite;
}

/* 95 — El panel vuelve a subir por encima de la cabecera   (rev. Celia 26-oct)
   ============================================================
   La regla 37 lo bajó el 22-oct: «la cabecera es de la página y el desplegable
   cuelga por debajo», con `top: 2.6rem` y 2,4rem de acolchado. Aquello
   funcionaba sin velo. Con el velo de vuelta (regla 92) la cabecera queda por
   encima de él —`.v2-header__header` va a z-index 12 y el velo a 11—, así que
   el nav se lee sobre la franja de página SIN oscurecer, con el resto de la
   página apagada por debajo: las etiquetas se pierden sobre lo que haya detrás.

   Vuelven los valores de antes de la regla 37, que son los del DS más el alto
   de la fila de utilidades: el panel sube su tope 11,4rem y reserva 10,4rem de
   acolchado, de modo que logo, nav, fila de utilidades y botones quedan DENTRO
   del panel y sobre su gris. El estado con scroll ya subía por su cuenta
   (-8rem / 7rem, bloque de la cabecera pegada), así que con esto los dos
   estados vuelven a comportarse igual.

   No hace falta tocar z-index: el contenido de la cabecera se pinta encima del
   panel —la hover zone va a z-index 14 y el panel a 2 dentro de ella—, que es
   como funcionaba hasta el 22-oct. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel {
    top: -11.4rem;
    padding-top: 10.4rem;
  }
}

/* 97 — El panel, a sangre y pegado al borde de arriba   (rev. Celia 26-oct)
   ============================================================
   Venía del ancho del contenido más un poco (`calc(100% + 2.8rem)` con
   `left: -1.25rem`, regla 14) y colgaba a 1rem del borde superior de la
   ventana. Celia lo quiere al 100%, a sangre, y sin esquinas redondeadas
   arriba.

   Pasa a `position: fixed` con `left: 0; right: 0; top: 0`. Fijo y no absoluto
   por dos razones: `left/right: 0` sobre la ventana da el ancho exacto SIN la
   barra de desplazamiento —con `100vw` sobraban 15px y aparecía scroll
   horizontal— y el tope queda clavado arriba en los dos estados de la cabecera,
   sin tener que recalcular el negativo de cada uno.

   El acolchado superior pasa a ser el alto de la cabecera, que es lo que antes
   resolvían los pares -11.4/10.4rem y -8/7rem: 12,7rem con la fila de
   utilidades desplegada y 9,4rem con la cabecera encogida (105px y 78px a
   1440; el alto va en rem, así que la proporción aguanta a cualquier ancho).
   El selector repite el de la cabecera pegada porque aquel gana en
   especificidad y, si no, se quedaba con su `top` negativo.

   Las esquinas de abajo siguen a 1,2rem: lo que se va es solo el redondeo de
   arriba. Con esto la barra de degradado de la cabecera queda tapada mientras
   el menú está abierto —el panel se pinta por encima (hover zone a z-index 14,
   la barra a 0)—; para dejarla a la vista bastaría con `top: 0.8rem`. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel,
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    border-radius: 0 0 1.2rem 1.2rem;
  }
  .v2-megamenu__panel {
    padding-top: 12.7rem;
  }
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    padding-top: 9.4rem;
  }
}

/* 98 — Toda la franja de cierre, en degradado   (rev. Celia 26-oct)
   ============================================================
   La regla 93 la dejó en claro con el enlace en azul y la banda de degradado
   reducida a los 0,8rem de abajo. Celia la quiere entera en degradado: la
   franja del «Ver todo» ES la banda.

   El degradado va en el pseudo-elemento de la regla 8, que es el que sangra a
   los lados, y eso obliga a cambiarle la caja. Venía de -200rem a +200rem para
   cubrir el ancho del panel de sobra; con un degradado ahí solo se vería un
   trozo plano del centro, y además su fase no coincidiría con la de la barra de
   abajo (regla 94), que mide justo el ancho del panel. Así que el pseudo pasa a
   medir EXACTAMENTE el panel: se sale del acolchado lateral del panelInner —4rem
   de 1024 a 1439 y 6,4rem de 1440 para arriba— y ya está al ras de sus bordes.

   Con la misma caja, el mismo `background-size: 200%` y el mismo bucle de 8s,
   franja y barra van en fase y no hay costura entre las dos: se leen como una
   sola banda. Por eso NO vale cambiar aquí los insets sin tocar la barra, ni al
   revés.

   El enlace vuelve a blanco (la regla 93 lo había devuelto al azul para el fondo
   claro). En el acordeón del móvil no cambia nada: allí el pseudo va
   `display: none` y la franja es un botón oscuro con su propio fondo. */
.v2-megamenu__panelCierre::before {
  left: -4rem;
  right: -4rem;
  border-top: 0;
  background-color: transparent;
  background-image: linear-gradient(90deg, #415bff 0%, #ecdf30 20%, #ecdf30 30%, #415bff 50%, #ecdf30 70%, #ecdf30 80%, #415bff 100%);
  background-size: 200% 100%;
  animation: headerLineGradient 8s linear infinite;
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__panelCierre::before {
    left: -6.4rem;
    right: -6.4rem;
  }
}
.v2-megamenu__panelCierreLink {
  color: #ffffff;
}

/* 101 — Donde hay franja, sobra la barra fina   (rev. Celia 26-oct)
   ============================================================
   En Funcionalidades, Soluciones y Recursos la franja del «Ver todo» ya es la
   banda de degradado entera (regla 98), así que los 0,8rem de barra de debajo
   (reglas 93 y 94) solo añadían un segundo degradado pegado al primero. Fuera
   en esos tres. En Plataforma y Sobre nosotros se queda: ahí no hay franja y es
   lo único que cierra el panel.

   El panel no sabe en CSS cuál de sus cinco bloques está abierto —el JS los
   enciende con un `display` en línea, sin clase—, así que la condición se lee
   del TRIGGER, que sí lleva estado: `.v2-header__megaTriggerActive`. La hover
   zone contiene los triggers y el panel, de modo que un `:has()` sobre ella
   resuelve las dos ramas sin tocar el PHP ni el JS.

   Con la barra fuera hay que quitar también el `padding-bottom` que la regla 93
   le puso al panel para hacerle sitio: si no, queda una rendija de 8px del gris
   del panel por debajo de la franja. Así la franja acaba justo en el borde y la
   recortan las esquinas redondeadas de abajo. */
@media only screen and (min-width: 1024px) {
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar {
    display: none;
  }
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__panel {
    padding-bottom: 0;
  }
}

/* 102 — El contenido del panel llega hasta donde llega el de la página
   (rev. Celia 26-oct)
   ============================================================
   Primer intento fallido: se acotó el PANEL del logo al botón. Lo que había que
   acotar es el CONTENIDO — el panel se queda a sangre, como lo dejó la regla 97.

   El contenido iba de 110 a 1319 a 1440 (el panelInner con 4,8rem de acolchado
   lateral), o sea metido 44px por dentro del contenido de la página. Ahora el
   acolchado es el mismo margen que usa `.v2-container__container`, que es de
   donde sale el carril de la página: 8rem a cada lado de 768 en adelante. Con
   eso las columnas arrancan a la altura del logo y el destacado acaba justo
   donde acaba «Prueba gratis» (66 → 1359 a 1440; el cuadro del logo empieza en
   70, 4px más adentro, que a ojo es lo mismo).

   Hay un tercer tramo que no se ve a simple vista: el contenedor del DS se
   congela en 1580px fijos a partir de 1640, así que entre 1640 y 1920 el margen
   ya no son 8rem sino lo que sobra a cada lado de esos 1580px. Medido a 1920, el
   carril va de 163 a 1743 y con 8rem el contenido salía en 80: 83px desalineado.
   Lo resuelve el `max()`: por debajo de 1640 gana el 8rem y por encima gana la
   mitad de lo que sobra.

   De 1921 para arriba el contenedor cambia otra vez de fórmula —pasa al 82,94% con tope
   de 2200px (margen lateral de pantallas grandes, 16-sep)— y el acolchado tiene
   que cambiar con él, o el panel se desalinea justo en las pantallas donde más
   se nota. De ahí el `max()`: el 8,53% es la mitad del 17,06% que el contenedor
   deja fuera, y la otra rama se encarga del tope de 2200.

   Si alguna vez se toca el ancho del contenedor hay que tocar esto a la vez:
   son la misma medida escrita dos veces, y no hay forma de heredarla porque el
   panel cuelga de la cabecera, no del contenedor. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelInner {
    padding-left: max(8rem, calc((100% - 1580px) / 2));
    padding-right: max(8rem, calc((100% - 1580px) / 2));
  }
}
@media only screen and (min-width: 1921px) {
  .v2-megamenu__panelInner {
    padding-left: max(8.53%, calc((100% - 2200px) / 2));
    padding-right: max(8.53%, calc((100% - 2200px) / 2));
  }
}

/* 103 — La banda de degradado, a sangre otra vez   (rev. Celia 26-oct)
   ============================================================
   La regla 98 le dio al pseudo de la franja unos negativos fijos (-4rem, y
   -6,4rem de 1440 arriba) que eran justo el acolchado lateral que tenía
   entonces el panelInner. La regla 102 cambió ese acolchado por el margen del
   contenedor —8rem, o más en pantallas grandes—, así que los negativos se
   quedaron cortos y la banda moría a 13px de cada borde del panel.

   En vez de perseguir el acolchado con otro número fijo, el pseudo se ancla a
   la VENTANA: `calc(50% - 50vw)` a los dos lados. El 50% es medio ancho de la
   franja y el 50vw medio ancho de la ventana, así que la diferencia es
   exactamente lo que hay que salirse por cada lado, mida lo que mida el
   acolchado. Deja de depender de la regla 102 y aguanta los tres tramos del
   carril sin repetir sus fórmulas.

   Se sale ~7px por lado, que es el ancho de la barra de desplazamiento (100vw
   la cuenta y el panel no); los recorta el `overflow: hidden` del panel. No
   molesta porque aquí ya no hay que empalmar con la barra fina: en estos tres
   paneles está quitada (regla 101), así que no hay dos degradados que
   sincronizar. */
.v2-megamenu__panelCierre::before {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}
@media only screen and (min-width: 1440px) {
  .v2-megamenu__panelCierre::before {
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
  }
}

/* 104 — El panel deja de ir a sangre y engloba la cabecera   (rev. Celia 26-oct)
   ============================================================
   Última vuelta: el panel no va a sangre, sino que envuelve el contenido de la
   cabecera — logo, ítems del nav, «Contacto / Iniciar sesión / idiomas» y los
   dos botones. Deshace el ancho de las reglas 97 y 103.

   Se consigue sin escribir ni una medida: el panel vuelve a `absolute` y se
   pega a los cuatro lados de `.v2-megamenu__root`, que YA mide exactamente el
   carril de la página (66 → 1359 a 1440) y se recentra solo en los tres tramos
   del contenedor. Por eso aquí `left` y `right` van a 0 y no hay `max()` que
   mantener.

   Con el panel en el carril, el acolchado lateral del panelInner que puso la
   regla 102 sobra —metería el contenido otros 66px hacia dentro—, así que se
   pone a 0: el panel ES el carril y su contenido arranca donde arranca el logo
   y acaba donde acaba «Prueba gratis». Y el pseudo de la franja ya no tiene que
   salirse a buscar los bordes (regla 103): con el panel en el carril le basta
   `left: 0; right: 0`, que además le devuelve el degradado entero en vez del
   90% que se veía al anclarlo a la ventana.

   El `top` negativo es el de la regla 102 y sigue sin ser el mismo en los dos
   estados: `root` cuelga del final de la cabecera, 105px desplegada y 62px
   encogida, mientras que el `padding-top` es el alto de la cabecera (12,7rem y
   9,4rem). Sin redondeo arriba, como quedó en la regla 97. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: -12.7rem;
    padding-top: 12.7rem;
  }
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    position: absolute;
    left: 0;
    right: 0;
    width: auto;
    top: -7.45rem;
    padding-top: 9.4rem;
  }
  .v2-megamenu__panelInner {
    padding-left: 0;
    padding-right: 0;
  }
  .v2-megamenu__panelCierre::before {
    left: 0;
    right: 0;
  }
}

/* 105 — Las esquinas de arriba, redondeadas otra vez   (rev. Celia 26-oct)
   ============================================================
   El `0 0 1.2rem 1.2rem` de la regla 97 era para cuando el panel iba a sangre y
   pegado al borde: un redondeo arriba habría dejado dos muescas contra el canto
   de la ventana. Desde la regla 104 el panel vive dentro del carril, así que
   vuelve al radio del DS por los cuatro lados.

   Hay que repetir el selector de la cabecera pegada: la regla 97 le puso el
   radio también a él y gana en especificidad. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel,
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    border-radius: 1.2rem;
  }
}

/* 106 — El velo, más cerrado   (rev. Celia 26-oct)
   ============================================================
   La regla 92 lo devolvió al 0,35, el más suave de los que se probaron el
   22-oct. Con el panel ya acotado al carril se ve más página alrededor y se
   queda corto: sube al 0,5, que es el escalón intermedio de aquel día (el del
   DS era 0,8). */
.v2-megamenu__backdrop {
  background: rgba(32, 33, 41, 0.5);
}

/* 107 — Aire a los lados del contenedor blanco   (rev. Celia 26-oct)
   ============================================================
   El panel se había quedado clavado al carril (regla 104) y el contenido
   pegado a sus bordes, así que el blanco acababa justo donde acaba el logo.
   Ahora sobresale por los dos lados, con una condición: el contenido NO se
   mueve.

   Las dos cosas a la vez se consiguen con el mismo número en sentidos
   opuestos: el panel se sale `--v2-panel-saliente` por cada lado y el
   panelInner mete ese mismo valor de acolchado, así que el marco crece y el
   contenido se queda donde estaba. A 1440: panel de 26 a 1399 y contenido de
   66 a 1359, igual que antes.

   El saliente es el de la regla 14, que ya estaba calculado para esto y seguía
   en el archivo sin usarse desde que la 102 tomó el control del ancho: el 60%
   del margen que el contenedor del DS deja a cada lado —4,8rem hasta 1639 y
   `(100vw - 1580px) * 0.3` por encima—, de modo que siempre queda un 40% de
   margen libre y NO puede llegar a sangre. A 1440 quedan 26px hasta el borde y
   a 1920, 60px.

   La banda del pie tiene que crecer con el marco: su pseudo vive dentro del
   panelInner, así que se sale el mismo saliente para volver a tocar los bordes
   del panel. Es la tercera vez que esta pieza cambia de caja (reglas 98, 103 y
   104); si se vuelve a tocar el acolchado lateral, hay que tocarla a ella. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel,
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    left: calc(var(--v2-panel-saliente) * -1);
    right: calc(var(--v2-panel-saliente) * -1);
    width: auto;
  }
  .v2-megamenu__panelInner {
    padding-left: var(--v2-panel-saliente);
    padding-right: var(--v2-panel-saliente);
  }
  .v2-megamenu__panelCierre::before {
    left: calc(var(--v2-panel-saliente) * -1);
    right: calc(var(--v2-panel-saliente) * -1);
  }
}

/* 108 — El panel no llega al borde de arriba   (rev. Celia 26-oct)
   ============================================================
   Venía pegado a 0 desde la regla 97, cuando iba a sangre. Ahora se para justo
   debajo de la barra de degradado de la cabecera —`.v2-header__headerLine`,
   0,8rem—, que es el único elemento que había por encima y que el panel estaba
   tapando. Así deja de tocar el canto y de paso vuelve a verse la barra de
   marca mientras el menú está abierto.

   El `top` y el `padding-top` bajan los dos 0,8rem respecto a la regla 104, uno
   para mover el tope y el otro para que el contenido NO se mueva con él: 12,7 →
   11,9rem con la fila de utilidades desplegada, y 9,4 → 8,6rem con la cabecera
   encogida (ahí el `top` va de -7,45 a -6,65rem).

   Si se quiere más aire que el de la barra, es subir estos dos números a la vez
   y en la misma cantidad; se vería página entre la barra y el panel. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel {
    top: -11.9rem;
    padding-top: 11.9rem;
  }
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel {
    top: -6.65rem;
    padding-top: 8.6rem;
  }
}

/* 109 — El CTA del pie, como el bloque de evento   (rev. Celia 26-oct)
   ============================================================
   Deshace el degradado de la franja (reglas 98 y 103): el «Ver todo» vuelve a
   ser un CTA sobre fondo claro, con línea de puntos encima y letra oscura, y
   el degradado se queda SOLO en la franja fina de abajo.

   Copia el patrón que ya tenía `.v2-megamenu__panelFooter` —el «Participa en el
   próximo evento», que es el ejemplo que pasó—: misma línea `1px dashed
   rgba(37, 41, 46, 0.35)`. La línea va en el elemento y no en su pseudo a
   propósito: así mide el ancho del contenido, como la del bloque de evento, y
   no el del panel entero.

   El fondo vuelve al `#f6f8ff` del DS (regla 8) y el enlace al oscuro de marca.
   Se apaga la animación heredada de la regla 94, que si no seguiría corriendo
   bajo un color plano.

   Y como la franja ya no hace de banda, la barra fina vuelve a los tres paneles
   donde la regla 101 la había quitado, con el `padding-bottom` que el panel le
   reserva. Los cinco paneles cierran otra vez igual. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre {
    border-top: 1px dashed rgba(37, 41, 46, 0.35);
  }
  .v2-megamenu__panelCierre::before {
    background: #f6f8ff;
    border-top: 0;
    animation: none;
  }
  .v2-megamenu__panelCierreLink {
    color: #25292e;
  }
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar {
    display: block;
  }
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__panel {
    padding-bottom: 0.8rem;
  }
}

/* 110 — La línea de puntos del CTA, más suave   (rev. Celia 26-oct)
   ============================================================
   El 0,35 de la regla 109 es el del bloque de evento, pero ahí la línea separa
   un bloque con icono y dos líneas de texto; sobre el CTA, que es una sola
   línea, pesaba demasiado. Baja a 0,18, la mitad larga.

   Solo el CTA: el bloque de evento (`.v2-megamenu__panelFooter`) se queda en el
   0,35 de siempre. Si se quieren iguales, hay que bajar también el suyo. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre {
    border-top-color: rgba(37, 41, 46, 0.18);
  }
}

/* 111 — El panel, blanco puro   (rev. Celia 26-oct)
   ============================================================
   Deshace la regla 38, que lo había pasado al `#f5f5f7` del `body` para que el
   desplegable se leyera como parte de la página. Ahora va a blanco.

   Y con él tienen que volver las cajas de los iconos: la regla 38 las pintó de
   BLANCO justamente porque el panel era gris —sobre el gris, el blanco hacía de
   pastilla—. Sobre un panel blanco desaparecerían, así que vuelven al `#eef1f5`
   de antes. Las dos cosas van juntas: cambiar el fondo del panel sin tocar los
   iconos deja el menú con las cajas invisibles.

   El hover se queda en el índigo `#eef1ff`, que es el que marca estado y se
   distingue igual sobre los dos fondos. */
.v2-megamenu__panel {
  background-color: #ffffff;
}
.v2-megamenu__mdItemIcon,
.v2-megamenu__cardGrid .v2-megamenu__resourceCardIcon {
  background: #eef1f5;
}

/* 112 — Fuera el azul del CTA y fuera la barra del pie   (rev. Celia 26-oct)
   ============================================================
   El pie se queda en lo mínimo: línea de puntos, enlace oscuro y nada más. El
   `#f6f8ff` del CTA (regla 109) se va —sobre el panel blanco de la regla 111
   ya no hace falta una banda que lo separe— y la barra de degradado también.

   El fondo va a `transparent` y no `display: none` porque ese pseudo es el que
   sangra a los lados; dejándolo en el flujo, recuperar la banda algún día es
   volver a darle color y no rehacerle la caja (que ya ha cambiado cuatro veces:
   reglas 98, 103, 104 y 107).

   Con la barra fuera hay que quitar el `padding-bottom` que el panel le
   reservaba, en los dos sitios donde se puso: el general de la regla 93 y el de
   los tres paneles con franja de la regla 109. Si no, queda una rendija blanca
   de 8px bajo el CTA. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre::before {
    background: transparent;
  }
  /* Hay que repetir aquí los selectores con `:has()` de la regla 109: aquella
     la encendía para los tres paneles con franja y gana por especificidad, así
     que un `.v2-megamenu__gradientBar` a secas no la apaga. */
  .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar {
    display: none;
  }
  .v2-megamenu__panel,
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__panel {
    padding-bottom: 0;
  }
}

/* 113 — El velo, al 80%   (rev. Celia 26-oct)
   ============================================================
   Sube del 0,5 de la regla 106 al 0,8, que es el valor con el que venía el DS
   y del que se bajó el 22-oct por parecer una ventana modal. Ahora, con el
   panel blanco y acotado, es justo lo que se busca: la página de debajo se
   apaga del todo. */
.v2-megamenu__backdrop {
  background: rgba(32, 33, 41, 0.8);
}

/* 114 — Abajo, el mismo aire que a los lados   (rev. Celia 26-oct)
   ============================================================
   A los lados el contenido respira `--v2-panel-saliente` (regla 107); abajo no
   respiraba nada, porque el CTA acababa al ras del borde desde que se quitó la
   barra del pie (regla 112). Ahora el acolchado inferior del panelInner es ese
   mismo saliente, así que el aire es idéntico en los tres lados: 40px a 1440.

   Hay que anular además el margen inferior NEGATIVO de la franja (regla 8,
   -2,4rem y -5rem de 1440 arriba). Estaba para tirar de ella hasta el borde
   cuando el pie era una banda a sangre; con el CTA sin fondo, lo único que hace
   es comerse el acolchado que acabamos de poner.

   En Plataforma y Sobre nosotros, que no llevan CTA, el acolchado de abajo pasa
   de 2,4/5rem a 4,8rem: también respiran lo mismo que por los lados. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelInner {
    padding-bottom: var(--v2-panel-saliente);
  }
  .v2-megamenu__panelCierre {
    margin-bottom: 0;
  }
}

/* 115 — El aire de abajo, a la mitad   (rev. Celia 26-oct)
   ============================================================
   Los 40px de la regla 114 sobraban por debajo: el CTA es una línea suelta y no
   necesita el mismo colchón que los laterales, que separan del borde bloques
   enteros. Se queda en la mitad del saliente — 20px a 1440 — y sigue atado a la
   misma variable, así que escala igual que los lados en pantallas grandes. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelInner {
    padding-bottom: calc(var(--v2-panel-saliente) / 2);
  }
}

/* 116 — Vuelve la barra fina del pie   (rev. Celia 26-oct)
   ============================================================
   Deshace la parte de la regla 112 que la apagaba. Vuelve a los cinco paneles,
   con su degradado animado de marca y sus 0,8rem.

   Dos cosas, como siempre con esta pieza:
   - hay que repetir los selectores con `:has()` en los dos sentidos. La regla
     112 apagaba la barra con ellos, así que un `.v2-megamenu__gradientBar` a
     secas tampoco la enciende;
   - y el panel recupera el `padding-bottom` de su alto. Sin él, la barra se
     pinta sobre los 20px de aire que la regla 115 dejó bajo el CTA y se come
     siete; con él, el aire se queda entero y la barra cierra por debajo.

   El CTA no se toca: sigue sin fondo y con su línea de puntos (reglas 109, 110
   y 112). La banda de degradado y el CTA ya no son la misma pieza. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__gradientBar {
    display: block;
  }
  .v2-megamenu__panel,
  .v2-header__header.v2-header--scrolled .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="funcionalidades"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="soluciones"].v2-header__megaTriggerActive) .v2-megamenu__panel,
  .v2-header__desktopHoverZone:has([data-v2-mega-trigger="recursos"].v2-header__megaTriggerActive) .v2-megamenu__panel {
    padding-bottom: 0.8rem;
  }
}

/* 117 — El mismo acolchado arriba, a los lados y abajo   (rev. Celia 26-oct)
   ============================================================
   Había tres números distintos a 1440: 23px de la tapa a «Contacto», 40 a los
   lados (regla 107) y 20 abajo (regla 115). Se igualan.

   El que manda es el de ARRIBA, porque es el único que no se puede mover: lo
   fija la cabecera —su `padding-top` de 3,5rem— menos lo que el panel se para
   antes del borde (0,8rem, regla 108). Son 2,7rem. Para subirlo a 40 habría que
   empezar el panel 11px POR ENCIMA del borde de la ventana, o bajar el
   contenido de la cabecera, que se movería también con el menú cerrado y en
   todas las páginas. Así que los otros dos bajan a 2,7rem.

   Va en `--v2-panel-saliente` y no solo en el acolchado: esa variable mueve a
   la vez el saliente del panel y el acolchado lateral, que es lo que mantiene
   el contenido alineado con el logo y con «Prueba gratis» (regla 107). Si se
   tocara solo el acolchado, el contenido se iría 17px hacia fuera. El panel
   sigue sin llegar a sangre: de 44 a 1381 a 1440.

   Todo en rem, igual que el `padding` de la cabecera, así que los tres lados
   siguen midiendo lo mismo a cualquier ancho. Con la cabecera encogida la tapa
   mide menos (2,4 - 0,8 = 1,6rem), porque ahí la fila de «Contacto» está
   plegada y el que manda es el logo. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panel {
    --v2-panel-saliente: 2.7rem;
  }
  .v2-megamenu__panelInner {
    padding-bottom: 2.7rem;
  }
}
@media only screen and (min-width: 1640px) {
  .v2-megamenu__panel {
    --v2-panel-saliente: 2.7rem;
  }
}

/* 118 — Corrección de la tapa por encima de 1580   (26-oct)
   ============================================================
   La regla 117 iguala los tres lados a 1440, pero a 1920 la tapa medía 32px
   contra 27 de los lados. El motivo: el `rem` del DS se congela en 10px a
   partir de 1580, y el alto de la cabecera —de la que cuelga el panel— deja de
   ser los 12,7rem de 1440 y pasa a 12,2rem, así que el tope del panel sube 5px
   y el hueco hasta «Contacto» crece lo mismo.

   Se baja el tope 0,9rem y se le devuelve al acolchado superior, para que el
   contenido no se mueva. Es un único número para todo el tramo congelado:
   medido, `.v2-megamenu__root` arranca en 126,2px tanto a 1920 como a 2400, así
   que 11,8rem dejan la tapa en 8px y el hueco hasta «Contacto» en 27, los
   mismos que los lados.

   OJO con medir esto: el primer intento salió con -11,4rem porque la medición
   de partida se tomó con el CSS viejo todavía servido, y daba un alto de
   cabecera de 122px en vez de 126,2. Si hay que volver a tocarlo, medir
   `rootTop` directamente y no deducirlo del hueco. */
@media only screen and (min-width: 1580px) {
  .v2-megamenu__panel {
    top: -11.8rem;
    padding-top: 11.8rem;
  }
}

/* 119 — El aire de abajo, también en los paneles con CTA   (rev. Celia 26-oct)
   ============================================================
   En Funcionalidades, Soluciones y Recursos el hueco bajo el texto medía 35px
   contra los 22 de los lados: a los 22 del panelInner se les sumaba el
   `padding-bottom` propio de la franja (1,2rem, regla 27), que venía de cuando
   era una banda oscura y el texto necesitaba aire por los dos lados.

   Ese acolchado inferior se va. El de arriba se queda: es lo que separa la
   línea de puntos del texto, y ahí sí hace falta. Así el aire que se ve bajo el
   CTA es el mismo del panelInner, y los tres paneles con CTA miden igual que
   los dos que no lo tienen. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre {
    padding-bottom: 0;
  }
}

/* 120 — Los 3px fantasma bajo el CTA   (26-oct)
   ============================================================
   Con el `padding-bottom` de la franja ya a 0 (regla 119) seguían sobrando 3px:
   25 contra 22 a 1440, 30 contra 27 a 1920. No son acolchado, es el hueco que
   deja la línea de texto — la franja es un bloque y el enlace va `inline-flex`,
   así que por debajo queda el espacio del trazo descendente de la fuente.

   Se quita haciendo la franja `flex`: el enlace deja de ser contenido en línea
   y la caja se ciñe a su alto real. `align-items: flex-start` para que no se
   estire a lo alto de la franja.

   Acotado a escritorio: en el acordeón del móvil la franja es un botón a ancho
   completo con sus propias reglas. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre {
    display: flex;
    align-items: flex-start;
  }
}

/* 121 — El CTA, centrado entre la línea y el degradado   (rev. Celia 26-oct)
   ============================================================
   El texto tenía 10px por encima (el `padding-top` de la franja, regla 27) y 22
   por debajo (el acolchado inferior del panelInner, regla 117): pegado a la
   línea de puntos. El acolchado superior pasa a ser el mismo
   `--v2-panel-saliente` que manda en los otros tres lados, así que el enlace
   queda a la misma distancia de la línea y de la barra.

   Al ir con la variable, se mantiene centrado en los tres tramos de ancho sin
   tener que escribir un número por tramo. */
@media only screen and (min-width: 1024px) {
  .v2-megamenu__panelCierre {
    padding-top: var(--v2-panel-saliente);
  }
}

/* 123 — EL MENÚ DEL TELÉFONO VUELVE A SER UN ACORDEÓN   (rev. Celia 26-oct)
   ============================================================
   Deshace la regla 43 (23-oct), que lo había pasado a pantallas por niveles al
   estilo del móvil de Factorial. Ahora cada sección se despliega DEBAJO de su
   fila, en su sitio.

   El HTML no cambia: lo mueve el JS del componente, que mete la capa dentro del
   `<li>` de su fila la primera vez que se abre. Aquí solo queda lo visual:

   - fuera la cabecera de pantalla —el «volver» y el título—, que en un acordeón
     no tienen sentido: no se ha ido a ningún sitio del que volver;
   - el chevron deja de apuntar a la derecha (era `rotate(-90deg)`, «te llevo a
     otra pantalla») y pasa a apuntar abajo, girando 180° al abrir;
   - la entrada ya no viene de la derecha sino de arriba, que es de donde ahora
     cae el contenido;
   - y la capa abierta se sangra 1,2rem, para que se vea que cuelga de su fila y
     no que es otra sección más de la lista.

   Acotado a <1024, que es donde vive el menú del teléfono: el mega menú de
   escritorio no se entera de nada de esto. */
@media only screen and (max-width: 1023px) {
  .v2-menuoverlay__volver,
  .v2-menuoverlay__nivelTitulo {
    display: none;
  }
  .v2-menuoverlay__drillChevron {
    transform: none;
    transition: transform 0.18s ease;
  }
  [data-v2-drill-ir][aria-expanded="true"] .v2-menuoverlay__drillChevron {
    transform: rotate(180deg);
  }
  .v2-menuoverlay__nivelAbierto {
    padding-left: 1.2rem;
    animation: v2MenuAcordeonAbre 0.2s ease both;
  }
  @keyframes v2MenuAcordeonAbre {
    from { opacity: 0; transform: translateY(-0.4rem); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    .v2-menuoverlay__nivelAbierto { animation: none; }
  }
}

/* 129 — Sin sombra en las tarjetas de Plataforma   (rev. Celia 26-oct)
   ============================================================
   Tenían cuatro: la de reposo, la azul del destacado y las dos de hover
   (reglas 48 y 51). Con las tarjetas ya en claro sobre el panel blanco, la
   sombra las despegaba sin que hiciera falta: se distinguen por su propio
   fondo. Fuera las cuatro, incluidas las del hover, que si no reaparecía al
   pasar el ratón. El empujón de -0,3rem al pasar se queda: ese sí marca que
   son pulsables. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo,
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--destacado {
  box-shadow: none;
}
@media (hover: hover) and (pointer: fine) {
  [data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo:hover,
  [data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--destacado:hover {
    box-shadow: none;
  }
}

/* 130 — Los destacados con visual propio, en claro   (FR, 27-oct)
   ============================================================
   Esta NO viene de España: allí las tarjetas se pueden volver claras sin más
   porque su imagen es una composición o está oculta. Aquí hay dos clases de
   destacado: los cuatro de aquí —tres en Funcionalidades y uno en
   Soluciones— ya llevan su visual en SVG, pero el trato claro se acota igual
   con `:has()` a los que lo tienen, por si mañana entra uno con foto. A una
   tarjeta con foto no se le puede aplicar: su texto va en blanco encima y en
   claro quedaría ilegible.

   Dentro, las medidas son las de las tarjetas de Plataforma de España: titular
   2rem, frase 1,6rem a 1,35, «Descubrir» 1,4rem y 1,8rem de sangría, de los
   que 1rem los pone ya la tarjeta. */
.v2-megamenu__featuredImageWrap--arteSvg {
  background: none;
}
.v2-megamenu__featuredImageWrap--arteSvg::before,
.v2-megamenu__featuredImageWrap--arteSvg::after {
  content: none;
  background: none;
}
.v2-megamenu__featuredImageWrap--arteSvg svg {
  display: block;
  width: 100%;
  height: 100%;
}
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) {
  background-color: #eef0ff;
  box-shadow: none;
}
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) .v2-megamenu__featuredBody {
  padding: 0 0.8rem 0.8rem;
  gap: 0.4rem;
}
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) .v2-megamenu__featuredImageTitle {
  color: #25292e;
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.25;
}
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) .v2-megamenu__featuredImageDesc {
  margin-bottom: 1rem;
  color: #464b53;
  font-size: 1.6rem;
  line-height: 1.35;
}
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) .v2-megamenu__featuredCue {
  padding: 0.5rem 1.2rem;
  gap: 0.6rem;
  border-radius: 2.8rem;
  background-color: #25292e;
  color: #ffffff;
  font-size: 1.4rem;
}
@media (hover: hover) and (pointer: fine) {
  .v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg):hover .v2-megamenu__featuredCue {
    background-color: #415bff;
    color: #ffffff;
  }
  .v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg):hover {
    box-shadow: none;
  }
}

/* 131 — Plataforma estrena la identidad nueva   (rev. Celia 27-oct)
   ============================================================
   Porte de las reglas 125, 126, 127, 129 y 130 de España, que aquí no se
   habían traído. Francia solo tiene dos tarjetas —Intelligence y MCP—, pero
   la de Studio se deja puesta por si la dan de alta. Las tarjetas dejan de ser un pantallazo a sangre con el
   texto blanco encima y pasan a lo que dice el Figma: fondo azul claro, el
   visual suelto arriba a la derecha, el texto en oscuro y el «Descubrir» en
   píldora negra. El pantallazo del producto se sustituye por la composición de
   pastillas (ver `v2b_mm_foto_modulo`).

   LA DIFERENCIA CON ESPAÑA: allí cada tarjeta se acota por el final de su
   href, y hubo que corregirlo después porque el filtro del GO reescribe esas
   URLs (su regla 142). Aquí se acota por `data-v2b-modulo`, que es el id del
   módulo y no cambia ni con el slug del mercado ni con el GO. Además, Studio
   ni siquiera es un enlace —sale como <div>, sin href—, así que por href no
   habría forma de alcanzarlo.

   Las medidas son las de España, que salen de los frames de 1024×560 contando
   los 24px de sombra que Figma añade al exportar. Si se reexporta algún
   visual, hay que rehacer los tres `left`.

   Studio pierde su índigo: en el diseño ya no va en azul. La pastilla NEW se
   queda, que en el Figma también está. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo {
  background-color: #eef0ff;
  box-shadow: none;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaFoto {
  background-color: transparent;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaFoto img {
  display: block !important;
  position: absolute;
  height: auto;
  object-fit: contain;
  transform: none;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaFoto::before {
  content: none;
}
/* Los dos velos: el general de Plataforma y el azul del destacado. Hay que
   ganarles a los dos con su misma especificidad, como en la regla 127 de
   España, o Studio se sigue viendo azul. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaFoto::after,
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta .v2-megamenu__plataformaFoto::after,
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--imagenCompleta.v2-megamenu__plataformaModulo--destacado .v2-megamenu__plataformaFoto::after {
  background: none;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaTitulo {
  color: #25292e;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__plataformaDesc {
  color: #464b53;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo .v2-megamenu__featuredCue {
  background-color: #25292e;
  color: #ffffff;
}
@media (hover: hover) and (pointer: fine) {
  [data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo:hover,
  [data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo--destacado:hover {
    box-shadow: none;
  }
  [data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo:hover .v2-megamenu__featuredCue {
    background-color: #415bff;
    color: #ffffff;
  }
}
/* Con el módulo en el MISMO selector que la tarjeta, no sueltos: así estas
   tres igualan la especificidad de las reglas de antes —que colocaban los
   pantallazos y agrandaban los logos de MCP— y, al ir después, ganan. A MCP
   hay que apagarle además su `scale(1.16)`: medido, la pastilla de ChatGPT
   acababa en el 104,3% de la tarjeta y salía cortada. */
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo[data-v2b-modulo="sesame-intelligence"] .v2-megamenu__plataformaFoto img {
  top: 8.2%;
  left: 39.1%;
  width: 59.7%;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo[data-v2b-modulo="studio"] .v2-megamenu__plataformaFoto img {
  top: 6.1%;
  left: 27.7%;
  width: 71.1%;
}
[data-v2-mega-content="plataforma"] .v2-megamenu__plataformaModulo[data-v2b-modulo="mcp"] .v2-megamenu__plataformaFoto img {
  top: 16.1%;
  left: 29.7%;
  width: 69.1%;
  transform: none;
}

/* 132 — A los destacados les quedaba el velo azul   (rev. Celia 27-oct)
   ============================================================
   Lo mismo que se vio en México: la tarjeta era ya del mismo
   azul claro que España (#eef0ff, regla 130), pero encima seguía cayendo el
   velo —un degradado de transparente a azul oscuro al 92%— que vive en
   `.v2-megamenu__featuredImageWrap::after`. De ahí el fondo degradado en vez
   de plano.

   La 130 ya lo apagaba, pero perdía: su selector es el hueco a secas y el velo
   lleva delante la tarjeta, así que gana por especificidad. Se repite con la
   tarjeta delante.

   El velo estaba para que el texto blanco se leyera sobre una foto. Ya no
   queda ningún destacado con foto, así que no hace falta en ninguno. */
.v2-megamenu__featuredImageCard:has(.v2-megamenu__featuredImageWrap--arteSvg) .v2-megamenu__featuredImageWrap::after {
  content: none;
  background: none;
}

/* 133 — Los paneles con dos tarjetas, centradas   (pet. Celia 27-oct)
   =========================================================================
   Porte de la regla 144 de Alemania, donde el caso era «Über uns». Aquí pasa
   en Plataforma: España tiene tres tarjetas —Intelligence, Studio y MCP— y
   Francia solo dos, porque Studio no está dada de alta. La rejilla sigue
   siendo de tres columnas iguales, así que las dos que hay se apoyan a la
   izquierda y el panel enseñaba un hueco de un tercio a la derecha.

   Con dos tarjetas la rejilla pasa a dos columnas de ese mismo ancho —un
   tercio del panel menos su parte del hueco, que es 2.4rem— y se centra. Las
   tarjetas no cambian de tamaño; lo que cambia es que el aire sobrante se
   reparte a los dos lados en vez de caer todo a la derecha.

   El `:has()` es el que cuenta las tarjetas: «el último hijo es el segundo»
   quiere decir que hay exactamente dos. A diferencia de Alemania no se acota a
   un panel: vale para Plataforma y para Sobre nosotros, que comparten rejilla,
   y así cubre también el día que falte una tarjeta en el otro. Con tres, nada
   de esto se aplica y el panel se queda como estaba. */
.v2-megamenu__plataformaModulos:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, calc((100% - 4.8rem) / 3));
  justify-content: center;
}