/*
  ╔══════════════════════════════════════════════════════════════╗
  ║  OryonWave — styles.css                                      ║
  ║                                                              ║
  ║  ÍNDICE (busca el número con Ctrl+F):                        ║
  ║  1. Variables & Modo noche                                   ║
  ║  2. Reset                                                    ║
  ║  3. Base                                                     ║
  ║  4. Utilidades                                               ║
  ║  5. Toggle modo                                              ║
  ║  6. Header                                                   ║
  ║  7. Hero                                                     ║
  ║  8. Servicios                                                ║
  ║  9. Nosotros                                                 ║
  ║  10. Por qué elegirnos                                       ║
  ║  11. CTA final                                               ║
  ║  12. Footer                                                  ║
  ║  13. Animaciones de scroll (reveal)                          ║
  ║  14. Responsive (media queries)                              ║
  ╚══════════════════════════════════════════════════════════════╝
*/


/* ─────────────────────────────────────────────────────────────
   1. VARIABLES & MODO NOCHE
   ─────────────────────────────────────────────────────────────
   :root es el elemento raíz del documento. Las variables aquí
   son accesibles desde cualquier selector del archivo.

   MODO DÍA → valores por defecto (sin clase especial en body).
   MODO NOCHE → body.modo-noche sobreescribe solo los colores.
   ───────────────────────────────────────────────────────────── */
:root {
  /* Colores de marca — nunca cambian con el modo */
  --naranja:     #FF6A00;
  --azul-morado: #3D348B;

  /* Paleta modo DÍA */
  --fondo:         #F8F8F8;
  --fondo-tarjeta: #FFFFFF;
  --fondo-header:  #FFFFFF;
  --texto:         #181818;
  --texto-suave:   #666666;
  --borde:         rgba(0, 0, 0, 0.09);
  --sombra:        rgba(0, 0, 0, 0.06);
  --sombra-btn:    rgba(255, 106, 0, 0.25);

  /* Fuente y estructura */
  --fuente:    'Poppins', sans-serif;
  --seccion-py: 88px;    /* padding arriba/abajo de cada sección */
  --radio:      12px;    /* redondeo de esquinas */
  --max-ancho:  1200px;  /* ancho máximo del contenido */
  --transicion: 0.35s ease;
}

body.modo-noche {
  /* Solo sobreescribimos colores — fuente, radios y espacios no cambian */
  --fondo:         #181818;
  --fondo-tarjeta: #242424;
  --fondo-header:  #111111;
  --texto:         #FFFFFF;
  --texto-suave:   #AAAAAA;
  --borde:         rgba(255, 255, 255, 0.09);
  --sombra:        rgba(0, 0, 0, 0.35);
  --sombra-btn:    rgba(255, 106, 0, 0.40);
}


/* ─────────────────────────────────────────────────────────────
   2. RESET
   Limpia los estilos por defecto del navegador para partir de cero.
   ───────────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box; /* el padding se incluye en el ancho declarado */
  margin: 0;
  padding: 0;
}

img  { display: block; max-width: 100%; }
a    { text-decoration: none; color: inherit; }
button { cursor: pointer; border: none; background: none; font-family: var(--fuente); }
ul, ol { list-style: none; }


/* ─────────────────────────────────────────────────────────────
   3. BASE
   ───────────────────────────────────────────────────────────── */
html {
  scroll-behavior: smooth; /* desplazamiento suave al hacer clic en enlaces ancla */
}

body {
  font-family: var(--fuente);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  background-color: var(--fondo);
  color: var(--texto);
  transition:
    background-color var(--transicion),
    color var(--transicion);
}


/* ─────────────────────────────────────────────────────────────
   4. UTILIDADES
   Clases pequeñas y reutilizables en varias secciones.
   ───────────────────────────────────────────────────────────── */

/* Centra el contenido y limita su ancho */
.contenedor {
  max-width: var(--max-ancho);
  margin: 0 auto;
  padding: 0 24px;
}

/* Botón naranja principal */
.btn-primario {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background-color: var(--naranja);
  color: #FFF;
  padding: 15px 32px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 4px 24px var(--sombra-btn);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-primario:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px var(--sombra-btn);
}

/* Botón de texto (sin fondo) */
.btn-secundario {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--texto);
  font-weight: 600;
  font-size: 15px;
  transition: color 0.2s ease;
}
.btn-secundario:hover { color: var(--naranja); }

/* Encabezado de sección centrado */
.seccion-encabezado {
  text-align: center;
  margin-bottom: 52px;
}
.seccion-encabezado h2 {
  font-size: clamp(26px, 3.5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.8px;
  margin-bottom: 12px;
}
.seccion-encabezado p {
  font-size: 16px;
  color: var(--texto-suave);
  max-width: 540px;
  margin: 0 auto;
}

/* Badge pequeño (ej: "✦ Agencia de productos digitales") */
.etiqueta-badge {
  display: inline-block;
  background: rgba(255, 106, 0, 0.10);
  color: var(--naranja);
  border: 1px solid rgba(255, 106, 0, 0.22);
  border-radius: 50px;
  padding: 6px 18px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 22px;
}

/* Etiqueta pequeña de sección (ej: "✦ Nuestra historia") */
.etiqueta-seccion {
  display: inline-block;
  color: var(--naranja);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
}

/* Color naranja en texto (ej: palabra "intuitivos" en el H1) */
.acento { color: var(--naranja); }

/* Placeholder para ilustraciones SVG — eliminar cuando añadas tus archivos */
.ilu-placeholder {
  background: var(--fondo-tarjeta);
  border: 2px dashed var(--borde);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  color: var(--texto-suave);
  font-size: 13px;
  transition: background-color var(--transicion), border-color var(--transicion);
}
.ilu-placeholder code {
  font-size: 11px;
  background: var(--borde);
  padding: 2px 8px;
  border-radius: 4px;
}
.ilu-placeholder--sm { height: 110px; font-size: 12px; margin-bottom: 18px; border-radius: 8px; }
.ilu-placeholder--md { height: 380px; }
.ilu-icono { font-size: 36px; opacity: 0.35; }


/* ─────────────────────────────────────────────────────────────
   4b. ESTILOS DE IMÁGENES REALES
   ─────────────────────────────────────────────────────────────
   Cada contexto necesita que la imagen se comporte diferente.
   object-fit controla cómo la imagen ocupa su contenedor,
   igual que "Rellenar" / "Ajustar" / "Contener" en Figma.
   ───────────────────────────────────────────────────────────── */

/* Hero — ocupa todo el ancho de su columna */
.hero-img {
  width: 100%;
  height: auto;          /* mantiene proporción original (3000×2000) */
  border-radius: var(--radio);
  /* drop-shadow da más profundidad que box-shadow en imágenes con transparencia */
  filter: drop-shadow(0 16px 48px rgba(0,0,0,0.15));
}

/* Servicios — cuadradas 512×512, se muestran como miniaturas en la tarjeta */
.srv-img {
  width: 100%;
  height: 120px;
  object-fit: contain;   /* respeta proporciones, deja espacio si es necesario */
  margin-bottom: 18px;
  padding: 8px;          /* respiro para que la ilustración no toque el borde */
}

/* Quiénes somos — cuadrada 2000×2000, llena su columna */
.nosotros-img {
  width: 100%;
  height: auto;
  border-radius: var(--radio);
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.12));
}

/* Por qué elegirnos — íconos 512×512 dentro de un contenedor pequeño */
.razon-icono {
  /*
    Sobreescribimos el tamaño fijo anterior (46×46) para que
    los íconos tengan más respiro. El fondo naranja-suave queda
    como marco decorativo alrededor de cada imagen.
  */
  width: 60px;
  height: 60px;
  min-width: 60px; /* flex-shrink: 0 ya estaba, pero reforzamos */
  border-radius: 14px;
  background: rgba(255, 106, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;      /* recorta si la imagen se desborda del contenedor */
}

.razon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}


/* ─────────────────────────────────────────────────────────────
   5. HEADER-DERECHA & TOGGLE MODO DÍA / NOCHE
   ─────────────────────────────────────────────────────────────
   .header-derecha agrupa (con flexbox) la nav, el toggle y el
   hamburger. Así en móvil nunca se solapan: el toggle vive a la
   IZQUIERDA del hamburger, ambos alineados verticalmente.

   El toggle ya NO usa position: fixed — vive en el flujo normal
   del header, como cualquier otro elemento de la barra.
   ───────────────────────────────────────────────────────────── */

/* Contenedor flex del lado derecho del header */
.header-derecha {
  display: flex;
  align-items: center;
  gap: 10px;            /* separación cómoda entre nav, toggle y hamburger */
}

/* Círculo toggle — estilos visuales */
.toggle-modo {
  /* Forma: círculo compacto */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  padding: 0;
  flex-shrink: 0;       /* no se achica si el espacio es justo */

  /* Modo día (valor por defecto):
     fondo levemente tintado sobre el header blanco */
  background: rgba(0, 0, 0, 0.07);
  border: 1px solid rgba(0, 0, 0, 0.12);

  /* Emoji centrado */
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  transition: background 0.2s ease, border-color 0.2s ease;
}
.toggle-modo:hover {
  background: rgba(0, 0, 0, 0.13);
  border-color: rgba(0, 0, 0, 0.22);
}

/* Modo noche: fondo claro translúcido sobre header oscuro */
body.modo-noche .toggle-modo {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
}
body.modo-noche .toggle-modo:hover {
  background: rgba(255, 255, 255, 0.20);
  border-color: rgba(255, 255, 255, 0.32);
}


/* ─────────────────────────────────────────────────────────────
   6. HEADER
   position: sticky → se pega al tope al hacer scroll.
   ───────────────────────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--fondo-header);
  border-bottom: 1px solid var(--borde); /* línea sutil que separa el header del contenido */
  padding: 14px 0;
  transition:
    background-color var(--transicion),
    border-color var(--transicion),
    box-shadow var(--transicion);
  box-shadow: 0 2px 20px var(--sombra);
}

/* Sombra más pronunciada cuando el usuario baja (clase añadida por JS) */
.header.scrolled { box-shadow: 0 4px 32px var(--sombra); }

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo-link { display: flex; align-items: center; flex-shrink: 0; }
.logo      { height: 36px; width: auto; transition: opacity var(--transicion); }

/* Alternancia día/noche del logo */
.logo--dia   { display: block; }
.logo--noche { display: none;  }
body.modo-noche .logo--dia   { display: none;  }
body.modo-noche .logo--noche { display: block; }

/* Navegación */
.nav-principal {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto-suave);
  position: relative;
  padding-bottom: 2px;
  transition: color 0.2s ease;
}

/* Línea naranja animada debajo del enlace al hacer hover */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background-color: var(--naranja);
  transition: width 0.25s ease;
}
.nav-link:hover            { color: var(--texto); }
.nav-link:hover::after     { width: 100%; }

/* Botón "Contáctanos" */
.nav-link--cta {
  background-color: var(--naranja);
  color: #FFF;
  padding: 10px 22px;
  border-radius: 50px;
  font-weight: 700;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.nav-link--cta::after { display: none; }
.nav-link--cta:hover  { color: #FFF; opacity: 0.9; transform: translateY(-1px); }

/* Hamburguesa — solo en móvil */
.menu-hamburguesa {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 4px;
  width: 36px;
}
.menu-hamburguesa span {
  display: block;
  width: 100%; height: 2px;
  background-color: var(--texto);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.menu-hamburguesa.activo span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-hamburguesa.activo span:nth-child(2) { opacity: 0; }
.menu-hamburguesa.activo span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }


/* ─────────────────────────────────────────────────────────────
   7. HERO
   Grid de 2 columnas: texto (izquierda) + ilustración (derecha).
   min-height: 90vh → ocupa casi toda la pantalla al abrir el sitio.
   ───────────────────────────────────────────────────────────── */
.hero {
  padding: 90px 0 80px;
  min-height: 90vh;
  display: flex;
  align-items: center;
  background-color: var(--fondo);
  transition: background-color var(--transicion);
}

.hero-inner {
  display: grid;
  grid-template-columns: 1.2fr 1fr; /* texto un poco más ancho que la ilustración */
  gap: 60px;
  align-items: center;
}

.hero h1 {
  font-size: clamp(34px, 5vw, 62px); /* clamp: mínimo 34px, máximo 62px, ideal 5% del ancho */
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -1px;
  margin: 16px 0 20px;
}

.hero-descripcion {
  font-size: 17px;
  color: var(--texto-suave);
  max-width: 480px;
  line-height: 1.75;
  margin-bottom: 36px;
}

.hero-botones {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

.hero-ilustracion .ilu-placeholder {
  height: 420px;
}


/* ─────────────────────────────────────────────────────────────
   8. SERVICIOS
   Grid 3 columnas → 6 tarjetas. Imagen arriba, tag + título + texto abajo.
   ───────────────────────────────────────────────────────────── */
.servicios {
  padding: var(--seccion-py) 0;
  background-color: var(--fondo-tarjeta);
  transition: background-color var(--transicion);
}

.grid-servicios {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.tarjeta-servicio {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease,
    background-color var(--transicion);
}

/* Línea naranja que crece desde la izquierda al hacer hover */
.tarjeta-servicio::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--naranja);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.tarjeta-servicio:hover::before { transform: scaleX(1); }
.tarjeta-servicio:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px var(--sombra);
  border-color: rgba(255, 106, 0, 0.22);
}

.tarjeta-tag {
  display: inline-block;
  background: rgba(61, 52, 139, 0.12);
  color: var(--azul-morado);
  border-radius: 50px;
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tag--estrategia {
  background: rgba(255, 106, 0, 0.10);
  color: var(--naranja);
}
body.modo-noche .tarjeta-tag {
  background: rgba(61, 52, 139, 0.28);
  color: #9B8FE0;
}

.tarjeta-servicio h3 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}
.tarjeta-servicio p {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────
   9. NOSOTROS
   Grid 2 columnas: ilustración (izquierda) + texto (derecha).
   ───────────────────────────────────────────────────────────── */
.nosotros {
  padding: var(--seccion-py) 0;
  background-color: var(--fondo);
  transition: background-color var(--transicion);
}

.nosotros-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.nosotros-texto h2 {
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.5px;
  margin: 12px 0 18px;
}

.nosotros-texto p {
  color: var(--texto-suave);
  font-size: 15px;
  line-height: 1.8;
  margin-bottom: 14px;
}

/* Fila de estadísticas */
.stats-fila {
  display: flex;
  gap: 12px;           /* reducido de 28px para que quepan 4 ítems */
  flex-wrap: wrap;     /* en pantallas pequeñas pasan a dos líneas */
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px solid var(--borde);
  transition: border-color var(--transicion);
}

.stat-item {
  flex: 1 1 0;         /* los 4 ítems ocupan el mismo ancho disponible */
  min-width: 100px;    /* mínimo antes de pasar a 2 columnas */
}

.stat-item strong {
  display: block;
  font-size: 22px;     /* reducido de 36px: era para números, ahora son palabras */
  font-weight: 900;
  color: var(--naranja);
  line-height: 1.1;
  margin-bottom: 4px;
}
.stat-item span {
  font-size: 12px;
  color: var(--texto-suave);
  font-weight: 500;
  line-height: 1.4;
}


/* ─────────────────────────────────────────────────────────────
   10. POR QUÉ ELEGIRNOS
   Banner azul-morado + grid de 6 razones.
   ───────────────────────────────────────────────────────────── */
.por-que {
  padding: var(--seccion-py) 0;
  background-color: var(--fondo-tarjeta);
  transition: background-color var(--transicion);
}

.por-que-banner {
  background-color: var(--azul-morado);
  border-radius: var(--radio);
  padding: 40px 48px;
  margin-bottom: 44px;
  text-align: center;
}
.banner-subtitulo {
  color: rgba(255,255,255,0.65);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.por-que-banner h2 {
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: #FFF;
  letter-spacing: -0.4px;
}

.grid-razones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.razon-item {
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 24px 20px;
  display: flex;
  flex-direction: row;      /* ícono a la izquierda, texto a la derecha */
  gap: 14px;
  align-items: flex-start;
  transition: transform 0.2s ease, background-color var(--transicion);
}
.razon-item:hover { transform: translateY(-3px); }

/* Contenedor del ícono: cuadrado con fondo naranja suave */
.razon-icono {
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 14px;
  background: rgba(255, 106, 0, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.razon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.razon-texto h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.razon-texto p {
  font-size: 13px;
  color: var(--texto-suave);
  line-height: 1.55;
}


/* ─────────────────────────────────────────────────────────────
   11. CTA FINAL
   Gradiente naranja→azul. Nunca cambia con el modo.
   ───────────────────────────────────────────────────────────── */
.cta-final {
  padding: var(--seccion-py) 0;
  background-color: var(--fondo);
  transition: background-color var(--transicion);
}

.cta-final-inner {
  background: linear-gradient(135deg, #FF6A00 0%, #FF8C00 45%, #3D348B 100%);
  border-radius: 20px;
  padding: 80px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Esferas decorativas de fondo (CSS puro, sin imágenes) */
.cta-final-inner::before,
.cta-final-inner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none; /* no bloquean clics */
}
.cta-final-inner::before {
  width: 380px; height: 380px;
  top: -40%; right: -5%;
  background: rgba(255,255,255,0.06);
}
.cta-final-inner::after {
  width: 280px; height: 280px;
  bottom: -30%; left: -4%;
  background: rgba(255,255,255,0.04);
}

.cta-final-inner h2 {
  font-size: clamp(26px, 4vw, 50px);
  font-weight: 900;
  color: #FFF;
  letter-spacing: -1px;
  margin-bottom: 14px;
  position: relative; /* para que quede encima de los ::before/::after */
  z-index: 1;
}

.cta-final-inner > p {
  color: rgba(255,255,255,0.85);
  font-size: 17px;
  margin-bottom: 36px;
  position: relative;
  z-index: 1;
}

.btn-cta-final {
  display: inline-block;
  background: #FFF;
  color: var(--naranja);
  padding: 17px 42px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
}
.btn-cta-final:hover { transform: translateY(-3px); }


/* ─────────────────────────────────────────────────────────────
   12. FOOTER
   Siempre oscuro (#111111) en ambos modos.
   ───────────────────────────────────────────────────────────── */
.footer {
  background-color: #111111;
  color: rgba(255,255,255,0.65);
  padding: 60px 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* columna de marca más ancha */
  gap: 48px;
  margin-bottom: 48px;
}

.footer-logo {
  height: 30px;
  width: auto;
  margin-bottom: 16px;
}

.footer-descripcion {
  font-size: 14px;
  line-height: 1.75;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.55);
}

/* <address> semántico para datos de contacto */
.footer-contacto {
  font-style: normal; /* <address> es itálica por defecto — la cancelamos */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.footer-contacto a,
.footer-contacto span {
  font-size: 14px;
  color: rgba(255,255,255,0.60);
  transition: color 0.2s ease;
}
.footer-contacto a:hover { color: var(--naranja); }

/* Iconos de redes sociales */
.footer-redes {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}
.red-social {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.70);
  transition: background 0.2s ease, color 0.2s ease;
}
.red-social svg { width: 16px; height: 16px; }
.red-social:hover {
  background: var(--naranja);
  color: #FFF;
}

.footer-col h4 {
  font-size: 15px;
  font-weight: 700;
  color: #FFF;
  margin-bottom: 18px;
}

.footer-col ul li { margin-bottom: 10px; }
.footer-col ul li a {
  font-size: 14px;
  color: rgba(255,255,255,0.55);
  transition: color 0.2s ease;
}
.footer-col ul li a:hover { color: var(--naranja); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.09);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.30);
  flex-wrap: wrap;
  gap: 8px;
}


/* ─────────────────────────────────────────────────────────────
   13. ANIMACIONES DE SCROLL (reveal)
   ─────────────────────────────────────────────────────────────
   Los elementos con clase .reveal empiezan ocultos (opacidad 0,
   desplazados hacia abajo).
   Cuando el usuario llega a ellos al hacer scroll, script.js
   agrega la clase .visible que los anima a su posición final.

   reveal--derecha → entra desde la derecha (ilustración hero)
   reveal--izquierda → entra desde la izquierda (ilustración nosotros)
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal--derecha {
  transform: translateX(28px); /* entra desde la derecha */
}

.reveal--izquierda {
  transform: translateX(-28px); /* entra desde la izquierda */
}

.reveal.visible {
  opacity: 1;
  transform: translate(0, 0); /* vuelve a su posición natural */
}

/*
  Retardo escalonado para los items del grid.
  El primer hijo aparece sin retardo, el segundo con 0.1s, etc.
  Hace que las tarjetas "caigan" una tras otra en lugar de todas juntas.
*/
.grid-servicios .tarjeta-servicio:nth-child(1) { transition-delay: 0s; }
.grid-servicios .tarjeta-servicio:nth-child(2) { transition-delay: 0.08s; }
.grid-servicios .tarjeta-servicio:nth-child(3) { transition-delay: 0.16s; }
.grid-servicios .tarjeta-servicio:nth-child(4) { transition-delay: 0.24s; }
.grid-servicios .tarjeta-servicio:nth-child(5) { transition-delay: 0.32s; }
.grid-servicios .tarjeta-servicio:nth-child(6) { transition-delay: 0.40s; }

.grid-razones .razon-item:nth-child(1) { transition-delay: 0s; }
.grid-razones .razon-item:nth-child(2) { transition-delay: 0.08s; }
.grid-razones .razon-item:nth-child(3) { transition-delay: 0.16s; }
.grid-razones .razon-item:nth-child(4) { transition-delay: 0.24s; }
.grid-razones .razon-item:nth-child(5) { transition-delay: 0.32s; }
.grid-razones .razon-item:nth-child(6) { transition-delay: 0.40s; }


/* ─────────────────────────────────────────────────────────────
   14. RESPONSIVE — MEDIA QUERIES
   ─────────────────────────────────────────────────────────────
   Las media queries aplican estilos solo cuando se cumple la
   condición dada (generalmente el ancho de la ventana).

   Estrategia: "desktop-first" — diseñamos para desktop y luego
   ajustamos para pantallas más pequeñas con max-width.

   Breakpoints usados:
     1024px → tablet horizontal
      768px → tablet vertical / móvil grande
      480px → móvil estándar
   ───────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ─────────────────────────────────────── */
@media (max-width: 1024px) {

  .grid-servicios {
    grid-template-columns: repeat(2, 1fr); /* 3 cols → 2 cols en tablet */
  }

  .grid-razones {
    grid-template-columns: repeat(2, 1fr); /* 3 cols → 2 cols */
  }

  .hero-inner {
    gap: 40px;
  }
}

/* ── Móvil grande / Tablet vertical (≤ 768px) ──────────────── */
@media (max-width: 768px) {

  :root {
    --seccion-py: 60px; /* menos espacio vertical en móvil */
  }

  /* Menú hamburguesa */
  .menu-hamburguesa { display: flex; }

  .nav-principal {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background-color: var(--fondo-header);
    /*
      border-top y border-bottom SOLO cuando el menú está abierto.
      Si los ponemos aquí (estado cerrado), el border-top se sigue
      pintando aunque max-height sea 0 — CSS no clipea bordes con
      overflow:hidden, y quedaba una línea flotando dentro del header.
    */
    border-top: none;
    border-bottom: none;
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;         /* oculto: sin altura */
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
  }
  .nav-principal.abierto {
    max-height: 320px;     /* se expande al abrir */
    padding: 10px 0;
    border-top: 1px solid var(--borde);    /* aparece al abrirse */
    border-bottom: 1px solid var(--borde);
  }
  .nav-link {
    padding: 12px 24px;
    width: 100%;
  }
  .nav-link--cta {
    margin: 8px 24px;
    width: calc(100% - 48px);
    text-align: center;
    border-radius: 50px;
  }
  .header .contenedor { position: relative; }

  /* Hero: una sola columna */
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .hero-descripcion  { margin: 0 auto 32px; }
  .hero-botones      { justify-content: center; }
  /* Ocultar ilustración del hero en móvil para no sobrecargar */
  .hero-ilustracion  { display: none; }

  /* Nosotros: una sola columna, ilustración arriba */
  .nosotros-inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .nosotros-ilustracion { order: -1; } /* sube al tope */

  /* CTA final: menos padding */
  .cta-final-inner {
    padding: 52px 28px;
  }

  /* Footer: una sola columna */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }
}

/* ── Móvil pequeño (≤ 480px) ───────────────────────────────── */
@media (max-width: 480px) {

  .grid-servicios {
    grid-template-columns: 1fr; /* 2 cols → 1 col */
  }

  .grid-razones {
    grid-template-columns: 1fr;
  }

  .hero-botones {
    flex-direction: column;
    align-items: center;
  }

  .por-que-banner {
    padding: 32px 24px;
  }

  .toggle-modo {
    top: 12px;
    right: 12px;
    padding: 8px 14px;
    font-size: 12px;
  }
}