/* ==========================
   Variables de diseño
   ========================== */
:root { /* Define variables CSS globales para colores, espacios y radios */
  --color-primary: #E30613; /* Rojo principal corporativo */
  --color-primary-dark: #B1040E; /* Rojo oscuro para hover y fondos */
  --color-dark: #0F1115; /* Gris muy oscuro para textos y fondos */
  --color-muted: #6B7280; /* Gris medio para textos secundarios */
  --color-light: #F8FAFC; /* Gris muy claro para fondos alternos */
  --color-white: #FFFFFF; /* Blanco puro */
  --radius: 12px; /* Radio de borde estándar */
  --shadow-1: 0 6px 24px rgba(15, 17, 21, 0.12); /* Sombra suave para tarjetas */
  --shadow-2: 0 12px 36px rgba(15, 17, 21, 0.16); /* Sombra más marcada */
  --container: 1120px; /* Ancho máximo del contenedor */
}
/* ==========================
   Reset y normas base
   ========================== */
* { box-sizing: border-box; } /* Incluye padding y borde en el cálculo del tamaño */
html, body { height: 100%; } /* Asegura altura completa para el documento */
body { /* Estilos base del cuerpo */
  margin: 0; /* Elimina márgenes por defecto del navegador */
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; /* Tipografía legible */
  color: var(--color-dark); /* Color de texto principal */
  line-height: 1.6; /* Altura de línea cómoda para lectura */
  background: var(--color-white); /* Fondo blanco por defecto */
}
img { max-width: 100%; display: block; } /* Imágenes responsivas y sin espacio fantasma */

/* Enlace de salto para accesibilidad */
.skip-link { /* Estilo del enlace para saltar al contenido */
  position: absolute; /* Posiciona de forma absoluta para ocultarlo fuera de pantalla */
  left: -9999px; /* Lo oculta inicialmente */
  top: 0; /* Lo alinea arriba por si aparece */
  background: var(--color-primary); /* Color de fondo rojo para visibilidad */
  color: var(--color-white); /* Texto en blanco para contraste */
  padding: 8px 12px; /* Espaciado interno */
  border-radius: 6px; /* Bordes redondeados */
}
.skip-link:focus { left: 16px; top: 16px; } /* Al enfocarse, se muestra en pantalla */

/* ==========================
   Utilidades de layout
   ========================== */
.container { /* Contenedor centrado y con ancho máximo */
  width: min(100%, var(--container)); /* Ocupa 100% hasta el máximo */
  margin-inline: auto; /* Centra horizontalmente */
  padding: 0 20px; /* Padding lateral para respirar en móviles */
}
.grid-3 { /* Grid de tres columnas reutilizable */
  display: grid; /* Activa el layout grid */
  gap: 24px; /* Espacio entre ítems */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas iguales */
}
@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } } /* En móviles, una sola columna */

/* ==========================
   Header y navegación
   ========================== */
.header { /* Barra superior fija con fondo translucido */
  position: sticky; /* Se mantiene visible al hacer scroll */
  top: 0; /* Se pega al tope de la ventana */
  z-index: 50; /* Se superpone sobre el contenido */
  backdrop-filter: saturate(140%) blur(6px); /* Efecto vidrio para dar profesionalismo */
  background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
  border-bottom: 1px solid rgba(15, 17, 21, 0.06); /* Línea sutil inferior */
}
.header__inner { /* Layout interno del header */
  display: flex; /* Flex para alinear elementos */
  align-items: center; /* Centra verticalmente */
  justify-content: space-between; /* Separa extremos */
  height: 72px; /* Altura consistente del header */
}
.logo { /* Enlace del logo */
  display: inline-flex; /* Flex para alinear marca y texto */
  align-items: center; /* Centra verticalmente */
  gap: 10px; /* Espacio entre marca y texto */
  color: inherit; /* Hereda color del texto */
  text-decoration: none; /* Quita subrayado */
}
.logo__mark { /* Marca abreviada */
  display: inline-grid; /* Grid para centrar contenido */
  place-items: center; /* Centra horizontal y verticalmente */
  width: 36px; height: 36px; /* Tamaño del círculo */
  background: var(--color-primary); /* Fondo rojo corporativo */
  color: var(--color-white); /* Texto en blanco */
  border-radius: 50%; /* Círculo perfecto */
  font-weight: 800; /* Peso fuerte para la marca */
  letter-spacing: 0.5px; /* Espaciado para legibilidad */
}
.logo__text { font-weight: 700; } /* Texto del logo más fuerte */

.nav { /* Contenedor de la navegación */
  display: flex; /* Flex para alinear lista y botón */
  align-items: center; /* Centra verticalmente */
  gap: 16px; /* Espacio entre items */
}
.nav__toggle { /* Botón hamburguesa */
  display: none; /* Oculto en escritorio */
  background: transparent; /* Sin fondo */
  border: 0; /* Sin borde */
  cursor: pointer; /* Indica que es clickeable */
}
.nav__bar { /* Barras del ícono hamburguesa */
  display: block; /* Convertido en bloque */
  width: 24px; height: 2px; /* Dimensiones de la barra */
  background: var(--color-dark); /* Color de la barra */
  margin: 5px 0; /* Separación entre barras */
  transition: transform .2s ease; /* Transición suave */
}
.nav__list { /* Lista de enlaces del menú */
  display: flex; /* Flex en escritorio */
  gap: 20px; /* Separación entre enlaces */
  margin: 0; padding: 0; /* Resetea márgenes/padding */
  list-style: none; /* Elimina viñetas */
}
.nav__link { /* Enlaces del menú */
  text-decoration: none; /* Sin subrayado */
  color: var(--color-dark); /* Color de texto */
  font-weight: 500; /* Peso medio */
}

@media (max-width: 900px) { /* Reglas para móviles */
  .nav__toggle { display: inline-block; } /* Muestra el botón hamburguesa */
  .nav__list { /* Convierte el menú en panel deslizante */
    position: fixed; /* Flota sobre el contenido */
    inset: 72px 0 auto auto; /* Se ubica debajo del header */
    background: var(--color-white); /* Fondo blanco */
    box-shadow: var(--shadow-1); /* Sombra para elevar el panel */
    padding: 20px; /* Espaciado interno */
    flex-direction: column; /* Columnas en móvil */
    transform: translateY(-8px); /* Ajuste inicial para transición */
    opacity: 0; /* Oculto inicialmente */
    pointer-events: none; /* No interactuable inicialmente */
    transition: all .2s ease; /* Transición para abrir/cerrar */
  }
  .nav__list.is-open { /* Estado abierto del panel */
    transform: translateY(0); /* Restablece posición */
    opacity: 1; /* Visible */
    pointer-events: auto; /* Interactuable */
  }
}

/* ==========================
   Botones y elementos reutilizables
   ========================== */
.button { /* Estilo base de botones */
  display: inline-flex; /* Flex para centrar contenido */
  align-items: center; /* Alineación vertical */
  justify-content: center; /* Alineación horizontal */
  gap: 8px; /* Espacio para íconos si se usan */
  padding: 12px 16px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados suaves */
  border: 1px solid transparent; /* Borde invisible para estabilidad */
  background: var(--color-primary); /* Color de fondo rojo */
  color: var(--color-white); /* Texto en blanco */
  font-weight: 600; /* Peso de fuente notable */
  text-decoration: none; /* Sin subrayado en enlaces-botón */
  cursor: pointer; /* Indica interactividad */
  transition: transform .08s ease, background .2s ease; /* Transiciones sutiles */
}
.button:hover { background: var(--color-primary-dark); } /* Oscurece en hover */
.button:active { transform: translateY(1px); } /* Feedback de click */
.button--ghost { /* Variante ghost: borde rojo y fondo transparente */
  background: transparent; /* Sin fondo */
  color: var(--color-primary); /* Texto rojo */
  border-color: var(--color-primary); /* Borde rojo */
}
.button--dark { background: var(--color-dark); color: var(--color-white); } /* Variante oscura */
.button--primary { background: var(--color-primary); } /* Garantiza fondo rojo */
.button--lg { padding: 14px 20px; font-size: 1.05rem; } /* Botón grande */
.button--small { padding: 8px 12px; font-size: .9rem; } /* Botón pequeño */

/* ==========================
   Sección Hero
   ========================== */
.hero { /* Fondo degradado con rojo y sombra sutil */
  position: relative; /* Permite posicionar elementos internos */
  padding: 96px 0 24px; /* Espaciado superior considera el header sticky */
  background: linear-gradient(180deg, #fff 0%, #fff 45%, #FFF4F5 100%); /* Degradado suave */
}
.hero__grid { /* Grid de dos columnas */
  display: grid; /* Activa grid */
  grid-template-columns: 1.1fr 0.9fr; /* Proporción de columnas */
  gap: 32px; /* Separación */
  align-items: center; /* Centra verticalmente */
}
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } /* Una columna en móvil */
.hero__copy h1 { /* Estilo del título principal */
  margin: 0 0 12px; /* Margen inferior */
  font-size: clamp(1.8rem, 3.2vw + 1rem, 3rem); /* Título responsivo */
  line-height: 1.15; /* Compacto pero legible */
}
.hero__copy p { margin: 0 0 18px; color: var(--color-muted); } /* Subtítulo con color secundario */
.hero__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Grupo de botones en hero */
.hero__stats { /* Lista de estadísticas */
  display: flex; /* Flex para una línea */
  gap: 16px; /* Separación entre ítems */
  padding: 0; margin: 14px 0 0; /* Márgenes y padding reset */
  list-style: none; /* Sin viñetas */
  color: var(--color-muted); /* Color suave */
}
.hero__media { position: relative; } /* Para posicionar tarjeta flotante */
.card { /* Estilo base de tarjetas */
  background: var(--color-white); /* Fondo blanco */
  border: 1px solid rgba(15, 17, 21, 0.06); /* Borde sutil */
  border-radius: var(--radius); /* Bordes redondeados */
  box-shadow: var(--shadow-1); /* Sombra suave */
  padding: 14px 16px; /* Espaciado interno */
}
.card--floating { /* Tarjeta flotante sobre la imagen */
  position: absolute; /* Posicionamiento absoluto */
  right: 12px; bottom: 12px; /* Ubicación en esquina inferior derecha */
}
.card__title { font-weight: 700; } /* Título dentro de tarjeta */
.card__meta { color: var(--color-muted); font-size: .9rem; } /* Meta info */

.brands { /* Banda inferior del hero */
  margin-top: 16px; /* Separación con hero */
  border-top: 1px solid rgba(15, 17, 21, 0.06); /* Línea superior */
  background: var(--color-light); /* Fondo gris claro */
}
.brands__row { /* Layout de chips */
  display: flex; /* Flex */
  gap: 10px; /* Separación entre chips */
  padding: 12px 0; /* Espaciado vertical */
  flex-wrap: wrap; /* Permite múltiples líneas */
}
.pill { /* Estilo de cada chip */
  display: inline-block; /* Ítem en línea */
  background: #FFECEF; /* Fondo rosado muy sutil que combina con rojo */
  color: var(--color-primary-dark); /* Texto rojo oscuro */
  border: 1px solid #FFD2D7; /* Borde acorde a la paleta */
  padding: 6px 10px; /* Espaciado interno */
  border-radius: 999px; /* Forma de píldora */
  font-weight: 600; /* Peso notorio */
}

/* ==========================
   Secciones genéricas
   ========================== */
.section { padding: 64px 0; } /* Espaciado vertical estándar */
.section--alt { background: var(--color-light); } /* Fondo alterno para separar visualmente */
.section__head { text-align: center; margin-bottom: 28px; } /* Cabecera centrada */
.section__head p { color: var(--color-muted); } /* Subtítulo en gris */

.features { /* Contenedor de features */
  display: grid; /* Grid */
  gap: 24px; /* Separación */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
}
@media (max-width: 900px) { .features { grid-template-columns: 1fr; } } /* Una columna en móvil */
.feature { /* Tarjeta de feature */
  background: var(--color-white); /* Fondo blanco */
  border: 1px solid rgba(15, 17, 21, 0.06); /* Borde sutil */
  border-radius: var(--radius); /* Bordes redondeados */
  padding: 18px; /* Espaciado interno */
  box-shadow: var(--shadow-1); /* Sombra ligera */
}
.feature__icon { font-size: 28px; margin-bottom: 6px; } /* Icono de la feature */

/* ==========================
   Pasos "Cómo funciona"
   ========================== */
.steps { /* Contenedor de los pasos */
  display: grid; /* Disposición en grid */
  gap: 16px; /* Separación */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
}
@media (max-width: 900px) { .steps { grid-template-columns: 1fr; } } /* En móvil, una columna */
.step { /* Cada paso */
  position: relative; /* Permite pseudo-elementos o decoraciones */
  background: var(--color-white); /* Fondo blanco */
  border: 1px solid rgba(15, 17, 21, 0.06); /* Borde sutil */
  border-radius: var(--radius); /* Bordes redondeados */
  padding: 18px; /* Espaciado */
}
.step__num { /* Número circular del paso */
  display: inline-grid; /* Para centrar el número */
  place-items: center; /* Centro perfecto */
  width: 32px; height: 32px; /* Tamaño del círculo */
  background: var(--color-primary); /* Fondo rojo */
  color: var(--color-white); /* Número en blanco */
  border-radius: 50%; /* Círculo */
  font-weight: 700; /* Número en negrita */
  margin-bottom: 6px; /* Separación del título */
}

/* ==========================
   Testimonios
   ========================== */
.testimonials { /* Grid de testimonios */
  display: grid; /* Grid */
  gap: 24px; /* Espaciado */
  grid-template-columns: repeat(3, 1fr); /* Tres columnas */
}
@media (max-width: 900px) { .testimonials { grid-template-columns: 1fr; } } /* Una columna en móvil */
.testimonial { /* Tarjeta de testimonio */
  background: var(--color-white); /* Fondo blanco */
  border: 1px solid rgba(15, 17, 21, 0.06); /* Borde sutil */
  border-radius: var(--radius); /* Bordes redondeados */
  padding: 18px; /* Espaciado interno */
  box-shadow: var(--shadow-1); /* Sombra ligera */
}
.testimonial footer { color: var(--color-muted); margin-top: 6px; } /* Autor del testimonio */

/* ==========================
   CTA final
   ========================== */
.cta { /* Fondo acentuado para llamar la atención */
  background: linear-gradient(180deg, #FFECEF 0%, #ffffff 100%); /* Degradado suave ligado al rojo */
  border-top: 1px solid #FFD2D7; /* Separador superior */
}
.cta__content { /* Contenido centrado y delimitado */
  display: grid; /* Grid para acomodar elementos */
  justify-items: center; /* Centra items horizontalmente */
  text-align: center; /* Texto centrado */
  gap: 10px; /* Separación vertical */
}
.cta__form { /* Formulario de captura de email */
  display: flex; /* Flex para alinear input y botón */
  gap: 8px; /* Separación entre input y botón */
  flex-wrap: wrap; /* Permite salto en pantallas pequeñas */
}
.cta__form input { /* Estilo del campo de email */
  padding: 12px 14px; /* Espaciado interno */
  border-radius: 10px; /* Bordes redondeados */
  border: 1px solid #E6E8EC; /* Borde sutil */
  min-width: 260px; /* Ancho mínimo para comodidad */
}
.cta__note { color: var(--color-muted); } /* Nota de confianza en gris */

/* ==========================
   Footer
   ========================== */
.footer { /* Pie de página con fondo oscuro */
  background: var(--color-dark); /* Fondo gris muy oscuro */
  color: var(--color-white); /* Texto claro para contraste */
}
.footer__grid { /* Layout del footer */
  display: grid; /* Grid */
  gap: 16px; /* Separación */
  grid-template-columns: 1.2fr 1fr 1fr; /* Tres columnas */
  align-items: start; /* Alinea al inicio verticalmente */
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: 1fr; } } /* Una columna en móvil */
.logo--light .logo__mark { background: var(--color-white); color: var(--color-dark); } /* Variante de logo para fondo oscuro */
.footer__about { color: #CBD5E1; } /* Texto más suave para descripción */
.footer__nav a { /* Estilo de enlaces del footer */
  display: inline-block; /* Permite padding y margen */
  color: #E5E7EB; /* Gris claro */
  text-decoration: none; /* Sin subrayado */
  margin: 6px 0; /* Separación entre enlaces */
}
.footer__legal { /* Bloque legal */
  display: flex; /* Flex para alinear items */
  gap: 15px; /* Separación entre elementos */
  color: #9CA3AF; /* Gris medio */
  align-items: center; /* Centrado vertical */
}
.footer__legal a { color: #E5E7EB; text-decoration: none; } /* Enlaces legales */

/* ==========================
   Utilidades varias
   ========================== */
.sr-only { /* Clase para contenido solo visible a lectores de pantalla */
  position: absolute; /* Posicionamiento absoluto */
  width: 1px; height: 1px; /* Tamaño mínimo */
  padding: 0; margin: -1px; /* Quita del flujo visual */
  overflow: hidden; /* Oculta exceso */
  clip: rect(0, 0, 0, 0); /* Recorta */
  white-space: nowrap; /* Evita saltos de línea */
  border: 0; /* Sin borde */
}