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

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

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

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

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

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

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

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

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


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

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

/* 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;
  }
  /* 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"],
  .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. */