/* ==========================================================================
   LEGAL TEXT - Paginas legales (plantilla only-text)
   Mejora de legibilidad del cuerpo legal: ancho de lectura, jerarquia
   tipografica, tablas legibles/responsive, listas y enlaces.
   Scope: body.only-text para no afectar a otras paginas que reutilizan
   text-introduction / product-intro-section / benefits-section.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   Revelado por scroll desactivado SOLO en paginas legales
   ----------------------------------------------------------------------------
   El cuerpo legal se monta sobre `.section-heading.viewport-section.slide-in-up`
   (y la imagen, si existe, sobre `.viewport-section.fade-in`). Esas clases
   arrancan con opacity:0 / visibility:hidden / transform y solo se revelan
   cuando GSAP ScrollTrigger anade `.in-viewport` al hacer scroll. En las
   paginas legales el hero empuja el contenido fuera del viewport inicial en
   escritorio, asi que nunca entra en viewport y el texto queda invisible.

   Aqui forzamos el estado "revelado" para esas clases, pero SOLO dentro de
   `body.only-text`, sin tocar el JS global ni la animacion del resto del sitio.
   El scope (body.only-text > .benefits-section > clase animada = 3 clases) gana
   por especificidad a las reglas base (.slide-in-up / .slide-in-up.in-viewport),
   por lo que NO se necesita !important. */
body.only-text .benefits-section .viewport-section,
body.only-text .benefits-section .slide-in-up,
body.only-text .benefits-section .fade-in {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* ----------------------------------------------------------------------------
   Base (Mobile First) — <992px
   ---------------------------------------------------------------------------- */

/* El cuerpo legal deja de estar centrado: el texto largo se lee mejor
   alineado a la izquierda y con un ancho de linea limitado. */
body.only-text .benefits-section {
  text-align: left;
}

body.only-text .benefits-section .section-heading {
  text-align: left;
  margin-bottom: 0;
}

/* El contenedor del cuerpo legal ocupa toda la columna del CMS para que las
   tablas de datos dispongan del maximo ancho posible. El ancho de LECTURA de
   la prosa se limita por elemento (parrafos, listas, titulos) mas abajo. */
body.only-text .benefits-section .section-description {
  text-align: left;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--bs-gray-dark);
}

/* Ancho de lectura de la PROSA: ~70 caracteres por linea es el optimo de
   legibilidad. Se aplica por elemento (no al contenedor) para que las tablas
   de datos sigan disponiendo de todo el ancho de la columna. */
body.only-text .benefits-section .section-description h2,
body.only-text .benefits-section .section-description h3,
body.only-text .benefits-section .section-description h4,
body.only-text .benefits-section .section-description p,
body.only-text .benefits-section .section-description ul,
body.only-text .benefits-section .section-description ol {
  max-width: 70ch;
}

/* Jerarquia tipografica de encabezados del contenido legal.
   El reset base iguala h1-h4 a 1.5rem; aqui los diferenciamos. */
body.only-text .benefits-section .section-description h2 {
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--bs-black);
  text-align: left;
  margin: 2.5rem 0 1rem;
}

body.only-text .benefits-section .section-description h2:first-child {
  margin-top: 0;
}

body.only-text .benefits-section .section-description h3 {
  font-size: 1.3125rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--bs-black);
  text-align: left;
  margin: 2rem 0 0.75rem;
}

body.only-text .benefits-section .section-description h4 {
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--bs-black);
  text-align: left;
  margin: 1.5rem 0 0.5rem;
}

/* Parrafos y separacion vertical coherente. */
body.only-text .benefits-section .section-description p {
  text-align: left;
  margin: 0 0 1.1em;
}

body.only-text .benefits-section .section-description p:last-child {
  margin-bottom: 0;
}

/* Listas: viñetas/numeracion alineadas a la izquierda y legibles. */
body.only-text .benefits-section .section-description ul,
body.only-text .benefits-section .section-description ol {
  text-align: left;
  margin: 0 0 1.1em;
  padding-left: 1.5rem;
}

body.only-text .benefits-section .section-description li {
  text-align: left;
  margin-bottom: 0.4em;
}

body.only-text .benefits-section .section-description li:last-child {
  margin-bottom: 0;
}

/* Enlaces dentro del texto legal: acento de marca + subrayado para
   distinguirlos claramente del cuerpo. */
body.only-text .benefits-section .section-description a {
  color: var(--bs-black);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  font-weight: 600;
  transition: color 0.25s ease;
}

body.only-text .benefits-section .section-description a:hover {
  color: var(--bs-gray-600);
}

/* --------------------------------------------------------------------------
   Tablas legales — bordes, padding, cabecera diferenciada y zebra striping
   -------------------------------------------------------------------------- */

/* Wrapper de scroll horizontal: en pantallas estrechas la tabla no desborda
   el viewport, se desplaza horizontalmente dentro de su bloque. */
body.only-text .benefits-section .section-description table {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Reconstruir el modelo de tabla dentro del bloque scrollable.
   min-width garantiza que las columnas no se aplasten: si no caben,
   el wrapper hace scroll horizontal en lugar de comprimir el texto. */
body.only-text .benefits-section .section-description table tbody,
body.only-text .benefits-section .section-description table thead {
  display: table;
  width: 100%;
  min-width: 34rem;
}

body.only-text .benefits-section .section-description th,
body.only-text .benefits-section .section-description td {
  padding: 0.625rem 0.875rem;
  border: 1px solid var(--bs-gray-500);
  text-align: left;
  vertical-align: top;
}

/* Cabecera diferenciada: la primera columna <th> de cada fila actua como
   etiqueta (estas tablas usan <th> de fila), fondo beige de marca. */
body.only-text .benefits-section .section-description th {
  background-color: var(--bs-beige);
  color: var(--bs-black);
  font-weight: 600;
  white-space: normal;
}

/* Zebra striping para facilitar el seguimiento de filas. */
body.only-text .benefits-section .section-description tbody tr:nth-child(even) td {
  background-color: var(--bs-gray-100);
}

/* ----------------------------------------------------------------------------
   Desktop (992px - 1920px)
   ---------------------------------------------------------------------------- */

@media (min-width: 992px) {
  body.only-text .benefits-section .section-description {
    font-size: 1.0625rem;
    line-height: 1.75;
  }

  /* En escritorio el cuerpo legal ocupa el 100% del ancho de la columna del
     CMS: se elimina el limite de ancho de lectura por elemento. El limite de
     ~70ch se mantiene solo en mobile (regla base). */
  body.only-text .benefits-section .section-description h2,
  body.only-text .benefits-section .section-description h3,
  body.only-text .benefits-section .section-description h4,
  body.only-text .benefits-section .section-description p,
  body.only-text .benefits-section .section-description ul,
  body.only-text .benefits-section .section-description ol {
    max-width: 100%;
  }

  body.only-text .benefits-section .section-description h2 {
    font-size: 2.125rem;
    margin: 3rem 0 1.25rem;
  }

  body.only-text .benefits-section .section-description h3 {
    font-size: 1.5rem;
    margin: 2.25rem 0 0.875rem;
  }

  body.only-text .benefits-section .section-description h4 {
    font-size: 1.1875rem;
  }

  body.only-text .benefits-section .section-description table {
    font-size: 1rem;
  }

  body.only-text .benefits-section .section-description th,
  body.only-text .benefits-section .section-description td {
    padding: 0.75rem 1rem;
  }
}

/* ----------------------------------------------------------------------------
   Desktop Grande (>1920px)
   ---------------------------------------------------------------------------- */

@media (min-width: 1921px) {
  body.only-text .benefits-section .section-description {
    font-size: 1.125rem;
    line-height: 1.8;
  }

  body.only-text .benefits-section .section-description h2 {
    font-size: 2.375rem;
  }

  body.only-text .benefits-section .section-description h3 {
    font-size: 1.625rem;
  }
}