/* ==================================================
   NEURONA SIMULATORS — V34
   CSS FINAL CONSOLIDADO

   IMPORTANTE:
   - No duplicar estos bloques más abajo.
   - Ajustes puntuales y documentados.
   - Desktop se mantiene salvo reglas expresas.
   ================================================== */


/* ==================================================
   FORMULARIO — TABS SIN ANIMACIÓN
   Solo:
   - PEDIR DEMO
   - SOLICITAR REUNIÓN
   ================================================== */

#tab-demo,
#tab-meeting {
  animation: none !important;
  filter: none !important;
  text-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

#tab-demo::before,
#tab-demo::after,
#tab-meeting::before,
#tab-meeting::after {
  animation: none !important;
  content: none !important;
  transform: none !important;
  transition: none !important;
}

#tab-demo[aria-selected="true"],
#tab-meeting[aria-selected="true"] {
  background: var(--blue) !important;
  color: #fff !important;
}


/* ==================================================
   SIMULATORS — DESKTOP
   Segunda línea GRÚA HORQUILLA.
   ================================================== */

body.simulators-page
.catalogue-v11
[data-title-fit][data-title-palette="catalogue"] {
  --title-fit-second: 40px !important;
}

/* TABLET 821–900 PX — conserva exactamente la composición V33. */
@media (min-width: 821px) and (max-width: 900px) {
  body.simulators-page
  .simulator-showcase-v11--catalogue
  .simulator-showcase-v11__copy {
    top: 3.4% !important;
  }

  body.simulators-page
  .simulator-showcase-v11--catalogue
  .simulator-showcase-v11__cta {
    top: 36.2% !important;
  }

  :is(#simulators-tablet-light-title-v34, html[data-theme="light"])
  body.neurona-v24.simulators-page
  .simulator-showcase-v11--catalogue
  [data-title-fit][data-title-palette="catalogue"]
  > .simulator-showcase-v11__primary {
    color: var(--v11-blue) !important;
  }
}


/* ==================================================
   ABOUT MOBILE — HERO 4 LÍNEAS
   Blanco / azul / blanco / azul.
   ================================================== */

:is(#about-desktop-copy-v33, html):is(#about-mobile-copy-v33, html)
body.about-page
.about-hero-v33
> .about-hero-v33__mobile {
  display: none !important;
}

.about-hero-v33__desktop > span,
.about-hero-v33__mobile > span {
  display: block;
}

@media (max-width: 820px) {

  body.about-page .about-hero-v33 {
    width: 100% !important;
    max-width: 100% !important;

    font-size: clamp(2.5rem, 10vw, 3.1rem) !important;
    line-height: .9 !important;
    letter-spacing: -.025em;
  }

  body.about-page
  .about-hero-v33
  > .about-hero-v33__desktop {
    display: none !important;
  }

  body.about-page
  .about-hero-v33
  > .about-hero-v33__mobile {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    color: inherit !important;
    font: inherit !important;

    white-space: normal !important;
  }

  body.about-page
  .about-hero-v33__mobile
  > span {
    display: block;

    width: 100%;

    margin: 0 0 .08em;

    line-height: .9;
    white-space: nowrap;
  }

  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(1) {
    color: var(--text);
    font-size: .82em;
  }

  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(2) {
    color: var(--blue-bright);
    font-size: 1em;
  }

  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(3) {
    color: var(--text);
    font-size: .78em;
  }

  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(4) {
    color: var(--blue-bright);
    font-size: .55em;
  }

  html[data-theme="light"]
  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(1),

  html[data-theme="light"]
  body.about-page
  .about-hero-v33__mobile
  > span:nth-child(3) {
    color: #101827;
  }
}


/* ==================================================
   ABOUT MOBILE — MISIÓN / VISIÓN
   ESTE BLOQUE YA ESTÁ APROBADO.
   ================================================== */

@media (max-width: 820px) {

  body.about-page .values-signal {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;

    box-sizing: border-box !important;
  }

  body.about-page .values-signal__list,
  body.about-page .values-signal__item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }

  body.about-page .values-signal__item {
    grid-template-columns: 2.25rem minmax(0, 1fr) !important;
  }

  body.about-page .values-signal__item p {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;

    box-sizing: border-box !important;
  }
}


/* ==================================================
   FORKLIFT — CTA FINAL
   Desktop: ink / blanco
   Mobile: blanco / ink
   ================================================== */

body.forklift-page .forklift-final h2 {
  display: flex;
  flex-direction: column;

  width: min(100%, 15ch);

  margin: 0;

  font: 400 clamp(2.1rem, 4vw, 4.2rem) / .9 var(--display-font) !important;
  letter-spacing: -.025em;
  text-transform: uppercase;
}

body.forklift-page
.forklift-final h2
> .forklift-final__line {
  display: block;
  white-space: nowrap !important;
}

body.forklift-page
.forklift-final__line--first {
  color: #06111f;
}

body.forklift-page
.forklift-final__line--second {
  color: #fff;
}

body.forklift-page
.forklift-final
> .button {
  border: 0 !important;
  background: #fff !important;
  color: var(--blue) !important;
}

body.forklift-page
.forklift-final
> .button:hover {
  background: rgba(255, 255, 255, .9) !important;
}

@media (max-width: 820px) {

  body.forklift-page .forklift-final {
    gap: 1.5rem;
  }

  body.forklift-page .forklift-final h2 {
    width: 100%;
    max-width: 100%;

    margin-bottom: .25rem;

    font-size: clamp(1.5rem, 7vw, 2.05rem) !important;
    line-height: .94 !important;
  }

  body.forklift-page
  .forklift-final__line--first {
    color: #06111f;
  }

  body.forklift-page
  .forklift-final__line--second {
    color: #fff;
  }
}


/* ==================================================
   HOME MOBILE — PRODUCTO GRÚA HORQUILLA

   ÚNICA definición mobile.

   EDITAR AQUÍ:
   --product-mobile-gutter
      margen lateral común con foto y CTA.

   --home-title-first
      SIMULADOR DE.

   --home-title-second
      GRÚA HORQUILLA.

   La meta, el título y el párrafo siguen el flujo normal.
   ================================================== */

@media (max-width: 820px) {

  body.home-page
  .simulator-showcase-v11--home {

    --product-mobile-gutter: clamp(1.6rem, 8.2vw, 2rem);

    /*
      Estos valores se escriben directamente
      en las variables que usa data-title-fit.
      Así evitamos pelear con font-size global.
    */
    --home-title-first: clamp(1.65rem, 8.2vw, 2rem);
    --home-title-second: clamp(1.3rem, 6.6vw, 1.68rem);
  }


  /* COPY GENERAL */
  body.home-page
  .simulator-showcase-v11--home
  .simulator-showcase-v11__copy {

    display: flex;
    flex-direction: column;
    left: 0 !important;
    top: 3.4% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-inline: var(--product-mobile-gutter) !important;

    box-sizing: border-box !important;
  }


  /* META */
  body.home-page
  .simulator-showcase-v11--home
  .simulator-showcase-v11__meta {

    display: block !important;

    align-self: flex-end;
    width: auto !important;

    margin: 0 !important;

    text-align: right !important;

    box-sizing: border-box !important;
  }


  /* TÍTULO */
  body.home-page
  .simulator-showcase-v11--home
  .product-title-v23[data-title-fit] {

    /*
      CLAVE:
      sobrescribimos las variables reales que consume
      el motor title-fit.
    */
    --title-fit-first: var(--home-title-first) !important;
    --title-fit-second: var(--home-title-second) !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 2rem 0 0 !important;
    padding: 0 !important;
    gap: .05rem !important;
    box-sizing: border-box !important;
  }


  body.home-page
  .simulator-showcase-v11--home
  .product-title-v23[data-title-fit]
  > .simulator-showcase-v11__primary,

  body.home-page
  .simulator-showcase-v11--home
  .product-title-v23[data-title-fit]
  > .simulator-showcase-v11__contrast {
  display: block !important;

  width: max-content !important;
  max-width: 100% !important;

  line-height: 1.02 !important;
}


  body.home-page
  .simulator-showcase-v11--home
  .product-title-v23[data-title-fit]
  > .simulator-showcase-v11__contrast {

    letter-spacing: -.02em !important;
    word-spacing: .08em;
  }


  /* COPY */
  body.home-page
  .simulator-showcase-v11--home
  :is(
    .simulator-showcase-v13__desktop-copy,
    .product-copy-v23
  ) {

    width: 100% !important;
    max-width: 100% !important;

    margin: 1.15rem 0 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;

    box-sizing: border-box !important;
  }


  /* CTA aprobado: conserva las reglas y posición existentes. */
}


/* ==================================================
   SIMULATORS MOBILE — PRODUCTO GRÚA HORQUILLA

   ÚNICA definición mobile.

   EDITAR AQUÍ:
   --product-mobile-gutter
      mismo margen horizontal utilizado en Home.

   --sim-title-first
      tamaño SIMULADOR.

   --sim-title-second
      tamaño GRÚA HORQUILLA.
   ================================================== */

@media (max-width: 820px) {

  body.simulators-page
  .simulator-showcase-v11--catalogue {

    --product-mobile-gutter: clamp(1.6rem, 8.2vw, 2rem);

    /*
      Jerarquía solicitada:
      SIMULADOR claramente mayor.
      GRÚA HORQUILLA menor.
    */
    --sim-title-first: clamp(1.9rem, 9.7vw, 2.375rem);
    --sim-title-second: clamp(1.3rem, 6.6vw, 1.68rem);
  }


  /* CONTENEDOR */
  body.simulators-page
  .simulator-showcase-v11--catalogue
  .simulator-showcase-v11__copy {

    display: flex;
    flex-direction: column;
    left: 0 !important;
    top: 3.2% !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-inline: var(--product-mobile-gutter) !important;

    box-sizing: border-box !important;
  }


  /* META — SIMULADOR 001 — NEURONA */
  body.simulators-page
  .simulator-showcase-v11--catalogue
  .simulator-showcase-v11__meta {

    display: block !important;

    align-self: flex-end;
    width: auto !important;

    margin: 0 !important;

    text-align: right !important;

    box-sizing: border-box !important;
  }


  /* TÍTULO */
  body.simulators-page
  .simulator-showcase-v11--catalogue
  [data-title-fit][data-title-palette="catalogue"] {

    /*
      CLAVE:
      estas son las variables que realmente
      consume el motor global de títulos.
    */
    --title-fit-first: var(--sim-title-first) !important;
    --title-fit-second: var(--sim-title-second) !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 2.35rem 0 0 !important;
    padding: 0 !important;
    gap: .05rem !important;

    box-sizing: border-box !important;
  }


  /* SIMULADOR */
  html
  body.neurona-v24.simulators-page
  .simulator-showcase-v11--catalogue
  [data-title-fit][data-title-palette="catalogue"]
  > .simulator-showcase-v11__contrast {

    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    line-height: 1.02 !important;
  }


  /* GRÚA HORQUILLA */
  html
  body.neurona-v24.simulators-page
  .simulator-showcase-v11--catalogue
  [data-title-fit][data-title-palette="catalogue"]
  > .simulator-showcase-v11__primary {

    display: block !important;

    width: max-content !important;
    max-width: 100% !important;

    line-height: 1.02 !important;
    letter-spacing: -.02em !important;
    word-spacing: .08em;
  }


  /* ==================================================
    SIMULATORS MOBILE — PÁRRAFO REAL
    Este selector apunta directamente al texto visible
    mediante su clave de traducción.
    ================================================== */

  body.simulators-page
  .simulator-showcase-v11--catalogue
  [data-i18n="simulatorsPage.showcaseBody"] {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 1.2rem 0 0 !important;
    padding: 0 !important;
    position: static !important;
    top: auto !important;
    box-sizing: border-box !important;
  }


  /* CTA — YA APROBADO */
  body.simulators-page
  .simulator-showcase-v11--catalogue
  .simulator-showcase-v11__cta {

    top: 36.2% !important;
  }
  :is(#simulators-mobile-light-title-v34, html[data-theme="light"])
  body.neurona-v24.simulators-page
  .simulator-showcase-v11--catalogue
  [data-title-fit][data-title-palette="catalogue"]
  > .simulator-showcase-v11__primary {
    color: var(--v11-blue) !important;
  }
}