/* ==========================================================================
   slider.css — slider "propuestas de valor" del HOME (3 estados).
   Frames Figma: 7:282 / 7:298 / 7:310, todos 1440×530, fondo ROJO.
   Depende de tokens.css + layout.css. JS: assets/js/slider.js.

   CORRECCIÓN DE FIDELIDAD: la banda es ROJA (verificado en screenshots de los 3
   frames), no navy como se maquetó a ciegas. Texto blanco. Dots blancos.

   Layout desktop: 2 columnas — imagen izq full-bleed (~552px) + texto der
   (arranca en x631, ancho ~700). Título ExtraBold fs-33; cuerpo fs-25 mezclando
   Bold (spans __strong), Regular y Regular Italic (span __em). 3 dots.

   ESPACIADOS MEDIDOS: col-gap 79 (631-552), título→cuerpo 41, salto de párrafo
   24, top del texto 80, fila de dots 62px. Dimensiones y tipografías del Figma.
   ========================================================================== */

.lfi-slider {
  position: relative;   /* contexto de posicionamiento para los dots (desktop) */
  background: var(--lfi-red);
  color: var(--lfi-white);
  overflow: hidden;
}

/* Contenedor de estados: cada slide ocupa la fila; solo el activo se muestra.
   Sin JS, únicamente el estado 1 (con .is-active) es visible -> degrada bien. */
.lfi-slider__viewport {
  min-height: var(--lfi-slider-min-h);
  position: relative;
}

.lfi-slider__slide {
  display: none;
}
.lfi-slider__slide.is-active {
  display: block;
}

/* Media (columna imagen) -------------------------------------------------- */
.lfi-slider__media {
  width: 100%;
}
.lfi-slider__img {
  width: 100%;
  aspect-ratio: 552 / 530;   /* proporción de la columna imagen del Figma */
  object-fit: cover;
  display: block;
}

/* Contenido (columna texto) ---------------------------------------------- */
.lfi-slider__content {
  display: flex;
  flex-direction: column;
  gap: var(--lfi-slider-text-gap);   /* 41px título→cuerpo (Figma) */
  /* Móvil: la imagen va apilada arriba, así que el aire vertical del texto es
     menor que el top de 80px del Figma desktop (que se aplica centrado en ≥1024). */
  padding: var(--lfi-gap-grid) var(--lfi-gutter);   /* 40 / gutter responsivo */
}

.lfi-slider__title {
  font-family: var(--lfi-font);
  font-weight: var(--lfi-weight-extrabold);
  font-size: var(--lfi-fs-33);
  line-height: var(--lfi-lh-snug);         /* 1.16: reproduce el leading compacto del
                                              Figma (su caja de texto de 300px encaja
                                              todo el estado 2; el `normal` del navegador
                                              es más alto y desbordaba sobre los dots) */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
}

.lfi-slider__body {
  font-family: var(--lfi-font);
  font-size: var(--lfi-fs-25);
  line-height: var(--lfi-lh-snug);         /* 1.16 (ver título): el estado 2 es el más
                                              largo y así cabe por encima de los dots */
  letter-spacing: var(--lfi-ls-tight);
  color: var(--lfi-white);
}
/* Párrafos del cuerpo: sin margen por defecto; salto medido entre ellos. */
.lfi-slider__body p { margin: 0; }
.lfi-slider__body p + p { margin-top: var(--lfi-slider-para-gap); }  /* 24px (Figma) */
/* Fragmentos en negrita del cuerpo (spans). */
.lfi-slider__strong { font-weight: var(--lfi-weight-bold); }
/* Fragmento en cursiva Regular. */
.lfi-slider__em {
  font-weight: var(--lfi-weight-regular);
  font-style: italic;
}

/* Puntos de navegación ---------------------------------------------------- */
.lfi-slider__dots {
  display: flex;
  justify-content: center;
  gap: 0;                              /* móvil: los tap-areas de 44 van pegados */
  padding-bottom: var(--lfi-gap-heading);
  margin-top: var(--lfi-slider-dots-mt);
}
/* DECISIÓN MÓVIL: el punto visible mide 12px (Figma), pero el botón ofrece 44px
   de área táctil (WCAG 2.5.5). El círculo se dibuja con ::before para no inflar
   el área de toque. En ≥1024 (ratón) el botón se ciñe y recupera el gap del Figma. */
.lfi-slider__dot {
  width: var(--lfi-tap-min);
  height: var(--lfi-tap-min);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lfi-slider__dot::before {
  content: "";
  width: var(--lfi-slider-dot-size);   /* 12px visible */
  height: var(--lfi-slider-dot-size);
  border: 1px solid var(--lfi-white);
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
/* Punto activo: relleno BLANCO (sobre la banda roja un dot rojo sería invisible;
   en el Figma el activo se ve claro/blanco). */
.lfi-slider__dot.is-active::before,
.lfi-slider__dot[aria-selected="true"]::before {
  background: var(--lfi-white);
  border-color: var(--lfi-white);
}
/* HOVER dot inactivo: se rellena de blanco (feedback legible sobre rojo). */
.lfi-slider__dot:hover::before,
.lfi-slider__dot:focus-visible::before {
  background: var(--lfi-white);
  border-color: var(--lfi-white);
}

/* ==========================================================================
   DECISIÓN MÓVIL (Figma solo define 1440): base 1 columna (imagen arriba, texto
   debajo). A partir de 1024 se pasa a las 2 columnas del Figma con la imagen
   full-bleed a la izquierda y el texto a la derecha (ancho acotado).
   ========================================================================== */
.lfi-slider__title { font-size: var(--lfi-fs-28); }   /* móvil */
.lfi-slider__body  { font-size: var(--lfi-fs-20); }

@media (min-width: 768px) {
  .lfi-slider__title { font-size: var(--lfi-fs-31); }
  .lfi-slider__body  { font-size: var(--lfi-fs-23); }
}

@media (min-width: 1024px) {
  .lfi-slider__title { font-size: var(--lfi-fs-33); }  /* réplica Figma */
  .lfi-slider__body  { font-size: var(--lfi-fs-25); }

  /* 2 columnas: imagen a sangre a la izquierda (552px = 38% del Figma), texto a
     la derecha (1fr = 888px = 62%; contenido acotado a 700 desde x631). La banda
     mide EXACTAMENTE 530 (alto del Figma): los dots van posicionados en absoluto
     (fuera del flujo), así que no suman alto. align-items:stretch hace que la
     imagen ocupe el 100% del alto -> su borde inferior coincide con el de la
     banda. En el Figma (7:282/298/310) la imagen mide 552×532, a sangre en 530. */
  .lfi-slider__slide.is-active {
    display: grid;
    grid-template-columns: var(--lfi-slider-media-w) 1fr;
    align-items: stretch;
    min-height: var(--lfi-slider-min-h);   /* 530 exacto (el contenido cabe) */
  }
  .lfi-slider__media {
    height: 100%;
  }
  .lfi-slider__img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    aspect-ratio: auto;   /* anula la proporción móvil: aquí manda el alto de banda */
  }
  /* Texto anclado arriba a y=80 (Figma), NO centrado: así el bloque título+cuerpo
     ocupa 80→~489 y deja sitio a los dots en y=496, todo dentro de los 530. */
  .lfi-slider__content {
    /* Ancho del TEXTO = 700 (Figma: x631→1331). Como box-sizing es border-box, el
       max-width incluye el padding-left (col-gap 79, que sitúa el texto en x631),
       por eso se suman: 79+700 = 779. Sin padding derecho: el texto termina en
       1331 y deja el margen derecho del Figma (1440-1331 = 109).
       ANTES: max-width 700 con padding dejaba el texto en ~513 -> el título se iba
       a 3 líneas y el cuerpo empujaba sobre los dots. */
    max-width: calc(var(--lfi-slider-col-gap) + var(--lfi-slider-content-max));
    padding: var(--lfi-slider-content-pt) 0 0 var(--lfi-slider-col-gap);
  }

  /* Dots DENTRO de la columna de texto, en las coordenadas exactas del Figma
     (x=688, y=496 en la banda de 530). Absolutos respecto a .lfi-slider, así que
     no añaden alto a la banda (era la causa de la franja roja sobrante). El left
     se compone: inicio de la columna de texto (media-w + col-gap = 631) + sangría
     57 = 688. El bottom: 530-(496+12) = 22. Tamaño ceñido al Figma (12px, gap 13),
     sin el área táctil de 44 del móvil (aquí es ratón). */
  .lfi-slider__dots {
    position: absolute;
    left: calc(var(--lfi-slider-media-w) + var(--lfi-slider-col-gap) + var(--lfi-slider-dots-inset));
    bottom: var(--lfi-slider-dots-bottom);
    justify-content: flex-start;
    gap: var(--lfi-slider-dots-gap);
    margin: 0;
    padding: 0;
  }
  .lfi-slider__dot {
    width: var(--lfi-slider-dot-size);
    height: var(--lfi-slider-dot-size);
  }
}