/* =============================================================
   PÁGINA DE INICIO
   Solo se carga en "/".
   ============================================================= */

@layer componentes {

  /* =============================================================
     HÉROE

     El original abría con un carrusel de siete imágenes JPEG de
     promociones que rotaba cada 4 s. Tres problemas: no dice qué
     hace la empresa, la imagen cambia antes de que dé tiempo a
     leerla, y el primer elemento de la página es un banner —que es
     exactamente lo que el ojo entrenado ignora.

     Aquí el héroe es una afirmación, y debajo el catálogo real
     desfilando: la respuesta a "¿cubren mi norma?" en dos segundos.
     Las promociones no desaparecen: bajan a su propia sección,
     donde compiten por atención con menos ruido.
     ============================================================= */

  .heroe {
    position: relative;
    padding-block: clamp(var(--e-6), 5vh, var(--e-8)) var(--e-6);
    overflow: hidden;
  }

  /* Retícula de fondo: papel de plano técnico. Muy tenue —
     se percibe como textura, no se lee como cuadrícula. */
  .heroe::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(color-mix(in oklab, var(--pizarra) 8%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in oklab, var(--pizarra) 8%, transparent) 1px, transparent 1px);
    background-size: 3rem 3rem;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000, transparent 75%);
    pointer-events: none;
  }

  .heroe__interior {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--e-6);
  }

  /* ---------- Encabezado en dos columnas ----------
     El titular a la izquierda, el apoyo y las cifras a la derecha.
     Comprimir esto en horizontal es lo que deja sitio para que el
     carrusel entre completo en la primera pantalla. */
  .heroe__encabezado {
    display: grid;
    gap: var(--e-5);
    align-items: end;
  }
  @media (width >= 64rem) {
    .heroe__encabezado {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
      gap: var(--e-8);
    }
  }

  .heroe__declaracion { display: flex; flex-direction: column; gap: var(--e-4); }

  .heroe__titulo {
    font-size: var(--t-2xl);
    font-stretch: 118%;
    letter-spacing: -0.04em;
  }
  @media (width >= 64rem) {
    .heroe__titulo { font-size: clamp(2.1rem, 3.1vw, 3.2rem); }
  }

  /* Entrada por líneas: cada línea sube desde detrás de una máscara.
     Un solo momento orquestado al cargar, no efectos sueltos. */
  .heroe__linea { display: block; overflow: hidden; }
  .heroe__linea > span {
    display: block;
    transform: translateY(105%);
    animation: subir-linea 900ms var(--curva-salida) forwards;
  }
  .heroe__linea:nth-child(1) > span { animation-delay: 60ms; }
  .heroe__linea:nth-child(2) > span { animation-delay: 160ms; }
  .heroe__linea:nth-child(3) > span { animation-delay: 260ms; }

  @keyframes subir-linea { to { transform: translateY(0); } }

  .heroe__apoyo {
    display: flex;
    flex-direction: column;
    gap: var(--e-4);
    opacity: 0;
    animation: aparecer 800ms var(--curva-salida) 380ms forwards;
  }

  .heroe__entrada {
    max-width: 46ch;
    font-size: var(--t-base);
    color: var(--texto-suave);
    line-height: 1.6;
  }

  .heroe__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

  @keyframes aparecer { to { opacity: 1; } }

  /* ---------- Cifras ---------- */
  .heroe__cifras {
    display: flex;
    flex-wrap: wrap;
    gap: var(--e-5);
    margin: 0;
    padding-top: var(--e-3);
    border-top: 1px solid var(--borde);
  }
  .cifra { display: flex; flex-direction: column-reverse; gap: 2px; }
  .cifra__valor {
    font-family: var(--fuente-display);
    font-size: var(--t-lg);
    font-weight: var(--peso-negro);
    font-stretch: 115%;
    line-height: 1;
    letter-spacing: -0.03em;
    margin: 0;
  }
  .cifra__etiqueta {
    font-family: var(--fuente-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--texto-suave);
  }

  /* ---------- Carrusel dentro del héroe ---------- */
  .heroe__carrusel {
    opacity: 0;
    animation: aparecer 900ms var(--curva-salida) 200ms forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .heroe__linea > span,
    .heroe__apoyo,
    .heroe__carrusel { animation: none; transform: none; opacity: 1; }
  }

  /* =============================================================
     CONÓCENOS — vídeo + texto
     ============================================================= */

  .conocenos__rejilla {
    display: grid;
    gap: var(--e-6);
    align-items: start;
  }
  @media (width >= 62rem) {
    .conocenos__rejilla {
      grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
      gap: var(--e-8);
    }
  }

  .conocenos__video {
    position: relative;
    border-radius: var(--radio-lg);
    overflow: hidden;
    border: 1px solid var(--borde);
    background: var(--fondo-hundido);
    box-shadow: var(--sombra-md);
  }
  .conocenos__video video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

  .conocenos__texto { display: flex; flex-direction: column; gap: var(--e-4); }
  .conocenos__texto p { color: var(--texto-suave); max-width: var(--ancho-texto); }

  /* Cita destacada, marcada con la traza a la izquierda. */
  .conocenos__cita {
    margin-top: var(--e-2);
    padding-left: var(--e-5);
    border-left: 2px solid transparent;
    border-image: var(--grad-señal) 1;
    font-family: var(--fuente-display);
    font-size: var(--t-lg);
    font-weight: var(--peso-fuerte);
    font-stretch: 106%;
    line-height: 1.35;
    letter-spacing: -0.02em;
    color: var(--texto);
  }

  /* =============================================================
     SERVICIOS
     ============================================================= */

  .servicio {
    position: relative;
    display: grid;
    gap: var(--e-5);
    padding: var(--e-6);
    border: 1px solid var(--borde);
    border-radius: var(--radio-xl);
    background: var(--fondo-elevado);
    overflow: hidden;
    transition: border-color var(--ritmo-medio) var(--curva-suave),
                box-shadow var(--ritmo-medio) var(--curva-salida);
  }
  .servicio:hover { border-color: var(--borde-fuerte); box-shadow: var(--sombra-lg); }

  .servicio__medio {
    aspect-ratio: 16 / 9;
    border-radius: var(--radio-md);
    overflow: hidden;
    background: var(--fondo-hundido);
  }
  .servicio__medio img { width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--ritmo-lento) var(--curva-salida); }
  .servicio:hover .servicio__medio img { transform: scale(1.04); }

  .servicio__cuerpo { display: flex; flex-direction: column; gap: var(--e-3); }
  .servicio__texto { color: var(--texto-suave); font-size: var(--t-base); }

  .servicio__lista {
    display: flex;
    flex-direction: column;
    gap: var(--e-2);
    margin-block: var(--e-2);
  }
  .servicio__punto {
    display: flex;
    gap: var(--e-3);
    align-items: baseline;
    font-size: var(--t-sm);
    color: var(--texto-suave);
  }
  /* La viñeta es un fragmento de traza, no un punto genérico. */
  .servicio__punto::before {
    content: '';
    flex-shrink: 0;
    width: 0.85rem;
    height: 2px;
    background: var(--signal);
    transform: translateY(-0.25em);
  }

  /* =============================================================
     PRÓXIMAS FECHAS
     ============================================================= */

  .fechas__rejilla {
    display: grid;
    gap: var(--e-4);
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  }

  /* =============================================================
     LLAMADA FINAL
     ============================================================= */

  .cta-final {
    position: relative;
    display: grid;
    gap: var(--e-5);
    justify-items: start;
    padding: clamp(var(--e-6), 6vw, var(--e-8));
    border-radius: var(--radio-xl);
    background: var(--tinta);
    color: var(--hueso);
    overflow: hidden;
  }
  .cta-final::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--grad-señal);
  }
  /* Resplandor apagado en la esquina: da profundidad sin llenar el
     bloque de degradado. */
  .cta-final::after {
    content: '';
    position: absolute;
    right: -12%;
    bottom: -60%;
    width: 30rem;
    height: 30rem;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--signal) 22%, transparent), transparent 68%);
    pointer-events: none;
  }
  .cta-final > * { position: relative; z-index: 1; }
  .cta-final__titulo { font-size: var(--t-2xl); max-width: 20ch; }
  .cta-final__texto { color: #9fb3b0; max-width: 46ch; }
}