/* =========================================================
   ENMA — Soluciones Académicas
   Paleta: azules de ENMATECH + blanco, con acento rojo
   en botones y textos destacados.
   ========================================================= */

:root {
  /* ===== COLORES =====
     Todo el sitio usa estas variables en vez de colores "sueltos".
     Si cambias un valor aquí, se actualiza en TODO el sitio automáticamente
     (botones, textos, fondos, etc.), por eso conviene editar solo aquí. */

  /* Azules (los mismos de ENMATECH) */
  --azul-900: #0A2458;   /* el más oscuro: footer, franja de garantía, pantalla de carga */
  --azul-700: #0A5BC4;   /* principal: enlaces activos, íconos, números */
  --azul-500: #1D6FE0;   /* medio: etiquetas pequeñas, detalles */
  --azul-300: #9CC3F5;   /* claro: fondos de fotos mientras cargan */
  --azul-50:  #E6EEFA;   /* casi blanco con tinte azul: fondos de sección */
  --cian:     #13B5EA;   /* acento brillante de los degradados */

  /* Degradado de la portada y de las franjas de título (como ENMATECH) */
  --degradado-azul: linear-gradient(135deg, #0A2458 0%, #0B3A8C 55%, #0A5BC4 100%);

  --blanco: #FFFFFF;

  /* Rojo: botones de acción ("Pide tu cotización", "Enviar"...) y textos destacados */
  --rojo: #E53935;
  --rojo-oscuro: #C62828;  /* se usa en :hover, cuando pasas el mouse encima */
  --rojo-claro: #FF6B6B;   /* textos rojos sobre fondo azul oscuro (se leen mejor) */
  --azul-brillante: #4FC3F7; /* textos destacados sobre fondo azul (como en ENMATECH) */

  --texto: #0B1F45;         /* texto principal (azul casi negro) */
  --texto-suave: #4D6285;   /* texto secundario */
  --exito: #3FAE6B;         /* verde, reservado para mensajes de "todo salió bien" */

  /* ===== TIPOGRAFÍA ===== */
  --fuente-display: 'Fraunces', Georgia, serif;   /* títulos (h1, h2, h3) */
  --fuente-cuerpo: 'Inter', -apple-system, sans-serif; /* párrafos, botones, formulario */

  /* ===== LAYOUT ===== */
  --radio: 16px;         /* qué tan redondeadas son las esquinas de tarjetas grandes */
  --radio-chico: 10px;   /* esquinas redondeadas de elementos chicos (inputs, insignias) */
  --sombra: 0 12px 32px rgba(10, 36, 88, 0.12); /* sombra reutilizable para tarjetas */
  --ancho-maximo: 1180px; /* qué tan ancho puede crecer el contenido en pantallas grandes */
  --alto-header: 84px;    /* alto del menú superior */
  --espera: 0.9s;         /* las animaciones de entrada esperan a que se vaya la pantalla de carga */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-cuerpo);
  color: var(--texto);
  background: var(--blanco);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Evita que los bloques que entran desde los lados creen scroll horizontal */
main { overflow-x: hidden; overflow-x: clip; }

a { color: inherit; text-decoration: none; }

.contenedor {
  max-width: var(--ancho-maximo);
  margin: 0 auto;
  padding: 0 24px;
}

h1, h2, h3 {
  font-family: var(--fuente-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--azul-900);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); }
h3 { font-size: 1.25rem; }

.texto-suave { color: var(--texto-suave); }

.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--azul-500);
  margin-bottom: 10px;
}

/* ---------- Botones ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.98rem;
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.boton:hover { transform: translateY(-2px); }

.boton-primario {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 8px 20px rgba(229, 57, 53, 0.35);
}
.boton-primario:hover { background: var(--rojo-oscuro); }

.boton-secundario {
  background: var(--blanco);
  color: var(--azul-700);
  border: 1.5px solid var(--azul-300);
}
.boton-secundario:hover { border-color: var(--azul-700); }

.boton-whatsapp {
  background: #25D366;
  color: var(--blanco);
}

/* ---------- Header ----------
   Arriba de todo es transparente (se ve el azul de la portada);
   al bajar se vuelve blanco con sombra (clase .solido, la pone main.js). */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.header.solido {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -18px rgba(10, 36, 88, 0.45);
}

.header .contenedor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: var(--alto-header);
  transition: height 0.35s ease;
}
.header.solido .contenedor { height: 70px; }

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-display);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--blanco);
  transition: color 0.35s ease;
}
.header.solido .logo { color: var(--azul-900); }
.logo svg { width: 36px; height: 36px; }
/* El búho va dentro de un círculo blanco para que se vea sobre el azul */
.logo-imagen {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: var(--blanco);
  border-radius: 50%;
  padding: 3px;
}
.logo-texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo-texto small {
  font-family: var(--fuente-cuerpo);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.75);
  transition: color 0.35s ease;
}
.header.solido .logo-texto small { color: var(--texto-suave); }

.nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.nav a {
  position: relative;
  font-weight: 500;
  font-size: 0.96rem;
  color: rgba(255,255,255,0.88);
  padding: 6px 0;
  transition: color 0.2s ease;
}
/* Rayita roja que crece debajo del enlace al pasar el mouse / en la página actual */
.nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--rojo);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.nav a:hover::after, .nav a.activo::after { transform: scaleX(1); }
.nav a:hover, .nav a.activo { color: var(--blanco); }
.nav a.activo { font-weight: 600; }

.header.solido .nav a { color: var(--texto); }
.header.solido .nav a:hover,
.header.solido .nav a.activo { color: var(--azul-700); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}
.nav-toggle svg { width: 28px; height: 28px; color: var(--blanco); transition: color 0.35s ease; }
.header.solido .nav-toggle svg { color: var(--azul-900); }

/* ---------- Pantalla de carga ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: var(--azul-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  transition: transform 0.8s cubic-bezier(.77,0,.18,1);
}
.preloader.listo { transform: translateY(-100%); }
.preloader-logo {
  width: 92px; height: 92px;
  background: var(--blanco);
  border-radius: 50%;
  padding: 8px;
  animation: latido 1.2s ease-in-out infinite;
}
.preloader-barra {
  width: 140px; height: 4px;
  border-radius: 4px;
  background: rgba(255,255,255,0.2);
  overflow: hidden;
}
.preloader-barra span {
  display: block;
  width: 40%; height: 100%;
  border-radius: 4px;
  background: var(--rojo);
  animation: barra 1s ease-in-out infinite;
}
@keyframes latido { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes barra  { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--degradado-azul);
  padding: calc(var(--alto-header) + 56px) 0 170px; /* arriba deja espacio al menú; abajo, a las olas */
  overflow: hidden;
}

/* Círculos de luz decorativos en el fondo de la portada */
.hero-circulo, .banner-circulo {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.hero-circulo-1 {
  width: 620px; height: 620px;
  right: -160px; top: -200px;
  background: radial-gradient(circle, rgba(79,195,247,0.28), transparent 65%);
}
.hero-circulo-2 {
  width: 520px; height: 520px;
  left: -220px; bottom: -180px;
  background: radial-gradient(circle, rgba(19,181,234,0.22), transparent 65%);
}

.hero h1 .resaltado { color: var(--azul-brillante); }

/* Entrada de la portada: cada elemento sube y aparece, uno tras otro */
.hero-texto > * { animation: subir 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--espera); }
.hero-texto > :nth-child(2) { animation-delay: calc(var(--espera) + 0.12s); }
.hero-texto > :nth-child(3) { animation-delay: calc(var(--espera) + 0.24s); }
.hero-texto > :nth-child(4) { animation-delay: calc(var(--espera) + 0.36s); }
.hero-collage { animation: subir 1s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--espera) + 0.4s); }

/* Cuando ya se vio la pantalla de carga: no aparece y las animaciones arrancan de una */
.sin-carga { --espera: 0.05s; }
.sin-carga .preloader { display: none; }
@keyframes subir {
  from { opacity: 0; transform: translateY(50px); }
  to   { opacity: 1; transform: none; }
}

/* Olas animadas al final de la portada y de las franjas de título */
.olas {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 110px;
}
.olas-grupo use { animation: ola 25s cubic-bezier(.55,.5,.45,.5) infinite; }
.olas-grupo use:nth-child(1) { animation-delay: -2s; animation-duration: 7s;  fill: rgba(255,255,255,0.7); }
.olas-grupo use:nth-child(2) { animation-delay: -3s; animation-duration: 10s; fill: rgba(255,255,255,0.5); }
.olas-grupo use:nth-child(3) { animation-delay: -4s; animation-duration: 13s; fill: rgba(255,255,255,0.3); }
.olas-grupo use:nth-child(4) { animation-delay: -5s; animation-duration: 20s; fill: var(--blanco); }
@keyframes ola {
  0%   { transform: translate3d(-90px, 0, 0); }
  100% { transform: translate3d(85px, 0, 0); }
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.eyebrow-claro {
  color: var(--azul-brillante);
}

.hero h1 {
  color: var(--blanco);
}

.hero-texto p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  margin: 20px 0 28px;
  max-width: 48ch;
}
.hero-texto p strong { color: var(--blanco); }

.hero-acciones {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.boton-rosa {
  background: var(--rojo);
  color: var(--blanco);
  box-shadow: 0 10px 24px rgba(229, 57, 53, 0.4);
}
.boton-rosa:hover { background: var(--rojo-oscuro); }

.boton-fantasma {
  background: transparent;
  color: var(--blanco);
  border: 1.5px solid rgba(255,255,255,0.4);
}
.boton-fantasma:hover { border-color: var(--blanco); }

/* ---------- Collage de fotos del hero ---------- */

/* Este es el "contenedor" invisible donde flotan las 3 fotos.
   min-height = qué tan alto es el espacio total del collage.
   Si agrandas las fotos de abajo, sube este número también,
   o las fotos se van a salir del espacio y verse cortadas. */
.hero-collage {
  position: relative;
  min-height: 480px;
}

/* Estilo que comparten las 3 fotos (grande + 2 chicas) */
.collage-foto {
  position: absolute;         /* permite que floten superpuestas, no en fila */
  border-radius: var(--radio); /* esquinas redondeadas */
  overflow: hidden;             /* recorta la foto para que no se salga del recuadro */
  box-shadow: 0 16px 32px rgba(0,0,0,0.25); /* sombra para que "flote" visualmente */
  background: var(--azul-300);   /* color de fondo mientras carga o si falta la imagen */
  transition: translate 0.4s ease-out; /* suaviza el movimiento que sigue al mouse */
}
.collage-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease; /* NUEVO: hace que el cambio de tamaño se vea suave, no de golpe */
}

/* NUEVO: al pasar el mouse sobre la foto (no la imagen, el recuadro completo),
   la imagen adentro crece un 8%. Como el recuadro tiene overflow:hidden,
   el sobrante se recorta solo, así no se sale del marco redondeado */
.collage-foto:hover img {
  transform: scale(1.08);
}

/* Si la imagen no existe todavía, mostramos un placeholder con el nombre esperado */
.collage-foto.sin-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed rgba(10,36,88,0.4);
}
.collage-foto.sin-imagen img { display: none; }
.collage-foto.sin-imagen::after {
  content: '📷 Agrega tu foto aquí';
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--azul-900);
  text-align: center;
  padding: 12px;
}

/* FOTO GRANDE (izquierda) — la protagonista del collage.
   width: en % del ancho del contenedor .hero-collage
   height: en píxeles fijos
   left/top: 0 significa "pegada arriba a la izquierda" del contenedor

   OJO: grande (width) + chicas (width) NO debe sumar 100%, porque
   necesitas dejar un % libre como "espacio en blanco" entre ellas.
   Aquí: 58% (grande) + 38% (chicas) = 96% → queda 4% de espacio/gap */
.collage-foto-grande {
  width: 58%;
  height: 440px;
  left: 0;
  top: 0;
}

/* FOTO CHICA 1 (arriba a la derecha).
   right: 0 = pegada a la derecha. top: 0 = pegada arriba */
.collage-foto-chica-1 {
  width: 38%;
  height: 220px;
  right: 0;
  top: 0;
}

/* FOTO CHICA 2 (abajo a la derecha).
   bottom: 0 = pegada abajo del contenedor.
   Como el contenedor mide 480px y cada chica mide 220px,
   queda: 220 (chica 1) + espacio libre + 220 (chica 2) = hay
   un hueco de 40px entre ambas automáticamente, sin que se toquen */
.collage-foto-chica-2 {
  width: 38%;
  height: 220px;
  right: 0;
  bottom: 0;
}

.insignia-flotante {
  position: absolute;
  background: var(--blanco);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 5;
  white-space: nowrap;
  animation: flotar 6s ease-in-out infinite; /* sube y baja suavemente */
  transition: translate 0.4s ease-out;
}
.insignia-2 { animation-delay: -3s; }
@keyframes flotar {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.insignia-flotante strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: 1.1rem;
  color: var(--azul-900);
  line-height: 1.1;
}
.insignia-flotante span {
  font-size: 0.78rem;
  color: var(--texto-suave);
}
.insignia-icono { font-size: 1.5rem; }

/* Insignia "4.0+ Nota garantizada" (la del libro 📚)
   Solo se usan 2 de las 4 propiedades de posición a la vez:
   - VERTICAL: eliges "top" (distancia desde arriba) O "bottom" (desde abajo), nunca ambas
   - HORIZONTAL: eliges "left" (distancia desde la izquierda) O "right" (desde la derecha), nunca ambas */
.insignia-1 {
  bottom: 10px;  /* la mantiene pegada abajo, a 10px del borde inferior del collage */
  left: 40%;     /* la corre hacia la derecha: entre más alto el %, más se aleja de la izquierda */
}

.insignia-2 {
  top: 40%;
  left: -8%;
}

/* ---------- Garantía (imágenes deslizando + texto) ---------- */
/* Fondo blanco como las demás secciones */
.garantia {
  background: var(--blanco);
  padding: 72px 0 110px;
  overflow: hidden;
}
.banner + .garantia { padding-top: 40px; }

.garantia-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: center;
}

.garantia { position: relative; }

.garantia-imagenes {
  order: 2;               /* la manda a la derecha */
  position: relative;
  min-width: 0;
}
/* Alto de la tira de capturas */
.garantia-imagenes .slider-ventana { height: 340px; }

.garantia-foto {
  flex: 0 0 240px;   /* ancho de cada captura */
  height: 100%;
  border-radius: var(--radio-chico);
  overflow: hidden;
  box-shadow: 0 20px 40px -22px rgba(10,36,88,0.45);
  background: var(--azul-50);
}
.garantia-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* la foto llena el recuadro sin deformarse */
  display: block;
  transition: transform 0.6s ease;
}
.garantia-foto:hover img { transform: scale(1.06); }

.garantia-foto.sin-imagen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  border: 2px dashed var(--azul-300);
  box-shadow: none;
}
.garantia-foto.sin-imagen img { display: none; }
.garantia-foto.sin-imagen::after {
  content: '📷 Agrega tu captura aquí';
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--texto-suave);
  text-align: center;
  padding: 12px;
}

.garantia-texto h2 { margin-bottom: 4px; }
.garantia-texto p {
  color: var(--texto-suave);
  margin-top: 16px;
  font-size: 1.05rem;
}
.garantia-texto {
  order: 1;  /* NUEVO: la pone primero = queda a la izquierda */
}

/* ---------- Sobre nosotros ---------- */
.sobre-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 48px;
  margin-top: 48px;
  align-items: start;
}

.sobre-parrafo {
  color: var(--texto-suave);
  font-size: 1.05rem;
  margin-bottom: 32px;
}

/* Cada estadística: ícono a la izquierda, número + texto a la derecha */
.sobre-stat {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}
.sobre-stat-icono {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  background: var(--blanco);
  border-radius: var(--radio-chico);
  box-shadow: var(--sombra);
}
.sobre-stat-numero {
  display: block;
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--azul-700);
  line-height: 1.2;
}
.sobre-stat-label {
  display: block;
  font-size: 0.88rem;
  color: var(--texto-suave);
}

.sobre-subtitulo {
  font-size: 1.1rem;
  margin-bottom: 20px;
}

/* Grid de disciplinas: 2 columnas de tarjetas chicas */
.disciplinas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.disciplina-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.08);
  border-radius: var(--radio-chico);
  padding: 14px 16px;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--texto);
}
.disciplina-chip small {
  display: block;
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.78rem;
}
.disciplina-icono {
  font-size: 1.3rem;
  flex-shrink: 0;
}

@media (max-width: 780px) {
  .sobre-layout { grid-template-columns: 1fr; }
  .disciplinas-grid { grid-template-columns: 1fr; }
}

/* ---------- Secciones genéricas ---------- */
.seccion {
  padding: 88px 0 140px;
  /*        ^arriba  ^abajo (nuevo valor, más espacio) */
}
.seccion-clara { background: var(--blanco); } /* todas las secciones van en blanco; solo Garantía es azul */

.seccion-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px;
}
.seccion-header p { color: var(--texto-suave); margin-top: 12px; }

/* ---------- Carruseles (servicios y capturas de garantía) ----------
   Avanzan solos de a una tarjeta, se detienen al pasar el mouse,
   tienen flechas y en celular se pueden deslizar con el dedo.
   La velocidad se cambia en el atributo data-intervalo del HTML. */
.slider { position: relative; }
.slider-ventana {
  overflow: hidden;
  padding: 10px 0 30px; /* espacio para que la sombra de las tarjetas no se corte */
}
.slider-pista {
  display: flex;
  gap: 22px;
  height: 100%;
  will-change: transform;
}
.slider-controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 6px;
}
/* Flechas redondas con borde, se rellenan al pasar el mouse */
.slider-flecha {
  width: 50px; height: 50px;
  border-radius: 50%;
  border: 2px solid var(--rojo);
  background: transparent;
  color: var(--rojo);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}
.slider-flecha svg { width: 22px; height: 22px; }
.slider-flecha:hover { background: var(--rojo); color: var(--blanco); transform: scale(1.06); }
.slider-flecha-clara { border-color: rgba(255,255,255,0.6); color: var(--blanco); }
.slider-flecha-clara:hover { background: var(--blanco); border-color: var(--blanco); color: var(--azul-900); }

.slider-servicios .tarjeta-servicio { flex: 0 0 280px; }

/* Página Servicios: todas las tarjetas a la vez */
.servicios-cuadricula {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* ---------- (fin sección servicios) ---------- */

.tarjeta-servicio {
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.08);
  border-radius: var(--radio);
  padding: 28px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.tarjeta-servicio:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px -22px rgba(10, 36, 88, 0.35);
  border-color: transparent;
}
.tarjeta-servicio .icono { transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.tarjeta-servicio:hover .icono {
  background: var(--azul-700);
  color: var(--blanco);
  transform: rotate(-8deg) scale(1.08);
}
.tarjeta-servicio .icono {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: var(--azul-50);
  border-radius: 12px;
  margin-bottom: 16px;
  color: var(--azul-500);
}
.tarjeta-servicio .icono svg { width: 24px; height: 24px; }
.tarjeta-servicio h3 { margin-bottom: 8px; }
.tarjeta-servicio p { color: var(--texto-suave); font-size: 0.95rem; }

/* ---------- Cómo funciona (pasos) ---------- */
.pasos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding: 28px 22px;
  background: var(--blanco);
  border-radius: var(--radio);
  border: 1px solid rgba(10,36,88,0.08);
}
.paso::before {
  counter-increment: paso;
  content: counter(paso);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  margin-bottom: 14px;
}
.paso h3 { font-size: 1.05rem; margin-bottom: 6px; }
.paso p { font-size: 0.92rem; color: var(--texto-suave); }

/* ---------- Formulario de contacto ---------- */
.contacto-layout {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 48px;
  align-items: flex-start;
}

.contacto-info h2 { margin-bottom: 14px; }
.contacto-info p { color: var(--texto-suave); margin-bottom: 28px; }

.contacto-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
}
.contacto-item .icono {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--azul-50);
  color: var(--azul-500);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contacto-item .icono svg { width: 20px; height: 20px; }
.contacto-item strong { display: block; font-size: 0.95rem; }
.contacto-item span { font-size: 0.88rem; color: var(--texto-suave); }

.form-card {
  background: var(--blanco);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 36px;
}

.campo { margin-bottom: 20px; }
/* Fecha y hora una al lado de la otra */
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.campo input[type="date"], .campo input[type="time"] { cursor: pointer; min-height: 46px; }
@media (max-width: 420px) { .campo-fila { grid-template-columns: 1fr; gap: 0; } }
.campo label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--azul-900);
}
.campo .obligatorio { color: var(--rojo-oscuro); }
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: var(--radio-chico);
  border: 1.5px solid rgba(10,36,88,0.15);
  font-family: var(--fuente-cuerpo);
  font-size: 0.95rem;
  background: var(--azul-50);
  color: var(--texto);
}
.campo input:focus,
.campo select:focus,
.campo textarea:focus {
  outline: none;
  border-color: var(--azul-500);
  background: var(--blanco);
}
.campo textarea { resize: vertical; min-height: 100px; }
.campo small { display: block; margin-top: 6px; font-size: 0.8rem; color: var(--texto-suave); }

.form-mensaje {
  padding: 14px 16px;
  border-radius: var(--radio-chico);
  margin-bottom: 20px;
  font-size: 0.92rem;
  font-weight: 500;
}
.form-mensaje.exito { background: #E7F7EE; color: #1F7A46; }
.form-mensaje.error { background: #FBE9E9; color: #B23A3A; }

/* ---------- Footer ---------- */
.footer {
  background: var(--azul-900);
  color: rgba(255,255,255,0.7);
  padding: 48px 0 24px;
}
.footer .contenedor {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}
.footer-logo {
  font-family: var(--fuente-display);
  color: var(--blanco);
  font-size: 1.3rem;
  margin-bottom: 8px;
}
.footer-copy {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.82rem;
  text-align: center;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 200;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
  animation: pulso 2.4s infinite;
}
.whatsapp-flotante svg { width: 30px; height: 30px; color: white; }

@keyframes pulso {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  70% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* ---------- Franja de título de las páginas internas ---------- */
.banner {
  position: relative;
  background: var(--degradado-azul);
  padding: calc(var(--alto-header) + 18px) 0 70px;
  overflow: hidden;
  text-align: center;
  color: var(--blanco);
}
.banner-circulo-1 {
  width: 520px; height: 520px;
  right: -140px; top: -220px;
  background: radial-gradient(circle, rgba(79,195,247,0.28), transparent 65%);
}
.banner-circulo-2 {
  width: 440px; height: 440px;
  left: -180px; bottom: -200px;
  background: radial-gradient(circle, rgba(19,181,234,0.22), transparent 65%);
}
.banner-contenido { position: relative; }
.banner .eyebrow { animation: subir 0.9s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--espera); }
.banner h1 {
  color: var(--blanco);
  max-width: 32ch;
  margin: 0 auto;
  animation: subir 0.9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--espera) + 0.1s);
}
.banner h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); }
.banner .olas { height: 50px; }
.banner p {
  color: rgba(255,255,255,0.85);
  font-size: 1.02rem;
  max-width: 62ch;
  margin: 10px auto 0;
  animation: subir 0.9s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: calc(var(--espera) + 0.2s);
}
.migas {
  display: inline-flex;
  gap: 8px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.7);
  margin-bottom: 14px;
  animation: subir 0.9s 0.8s cubic-bezier(.2,.7,.2,1) both;
}
.migas a { color: var(--rojo); font-weight: 600; }
.migas a:hover { text-decoration: underline; }

/* En las páginas internas la primera sección queda más pegada a la franja */
.banner + .seccion { padding-top: 40px; }

/* ---------- Franja final "¿Tienes una entrega pendiente?" ---------- */
.cta { padding: 0 0 90px; }
/* Si va después de una sección con fondo de color, se separa un poco más */
.garantia + .cta { padding-top: 0; }
.hero + .cta { padding-top: 40px; }
/* Dos secciones blancas seguidas: no se suma el espacio de ambas */
.seccion + .seccion { padding-top: 0; }
.cta-caja {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--azul-900), var(--azul-700));
  border-radius: 28px;
  padding: 48px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.cta-caja::before {
  content: "";
  position: absolute;
  width: 380px; height: 380px;
  right: -120px; top: -160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(79,195,247,0.35), transparent 65%);
  pointer-events: none;
}
.cta-caja > * { position: relative; }
.cta-caja h2 { color: var(--blanco); }
.cta-caja p { color: rgba(255,255,255,0.8); margin-top: 8px; }
.cta-acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- Espacios para fotos (con aviso si todavía no hay foto) ---------- */
.foto-slot {
  position: relative;
  width: 100%;
  aspect-ratio: var(--proporcion, 4/3);
  border-radius: 22px;
  overflow: hidden;
  background: var(--azul-50);
  box-shadow: 0 26px 50px -28px rgba(10, 36, 88, 0.55);
}
.foto-slot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.foto-slot:hover img { transform: scale(1.05); }
.foto-slot-aviso { display: none; }
.foto-slot.sin-imagen {
  border: 2px dashed var(--azul-300);
  box-shadow: none;
  display: grid;
  place-items: center;
}
.foto-slot.sin-imagen img { display: none; }
.foto-slot.sin-imagen .foto-slot-aviso {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  color: var(--azul-900);
  text-align: center;
  padding: 12px;
}
.foto-slot-aviso small { font-weight: 400; color: var(--texto-suave); font-size: 0.8rem; }

/* Contacto: foto encima de los datos */
.contacto-info .foto-slot { margin-bottom: 28px; }

/* ---------- Quiénes somos ---------- */
.sobre-layout { margin-top: 0; align-items: center; }
.sobre-stat-icono {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-700), var(--cian));
  color: var(--blanco);
  box-shadow: 0 14px 26px -14px rgba(10, 91, 196, 0.8);
}
.sobre-stat-icono svg { width: 26px; height: 26px; }

/* Equipo por áreas */
.equipo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.equipo-card {
  position: relative;
  overflow: hidden;
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.08);
  border-radius: var(--radio);
  padding: 28px 22px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Barra de color que se llena al pasar el mouse */
.equipo-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%; height: 4px;
  background: linear-gradient(90deg, var(--azul-700), var(--cian));
  transform: scaleX(0.25);
  transform-origin: left;
  transition: transform 0.4s ease;
}
.equipo-card:hover { transform: translateY(-8px); box-shadow: 0 24px 44px -22px rgba(10,36,88,0.4); }
.equipo-card:hover::before { transform: scaleX(1); }
.equipo-num {
  position: absolute;
  top: 16px; right: 20px;
  font-family: var(--fuente-display);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  color: var(--azul-50);
  transition: color 0.3s ease;
}
.equipo-card:hover .equipo-num { color: var(--azul-300); }
.equipo-icono {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--azul-700), var(--cian));
  color: var(--blanco);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  box-shadow: 0 14px 26px -14px rgba(10, 91, 196, 0.8);
  transition: transform 0.3s ease;
}
.equipo-icono svg { width: 26px; height: 26px; }
.equipo-card:hover .equipo-icono { transform: rotate(-8deg) scale(1.08); }
.equipo-card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.equipo-card p { color: var(--texto-suave); font-size: 0.92rem; }

/* Valores */
.valores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid rgba(10,36,88,0.12);
}
.valor {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 28px 24px 28px 0;
  border-bottom: 1px solid rgba(10,36,88,0.12);
}
.valor-icono {
  width: 48px; height: 48px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--azul-50);
  color: var(--azul-700);
  display: grid;
  place-items: center;
  transition: background 0.3s ease, color 0.3s ease;
}
.valor-icono svg { width: 22px; height: 22px; }
.valor:hover .valor-icono { background: var(--rojo); color: var(--blanco); }
.valor h3 { font-size: 1.12rem; margin-bottom: 4px; }
.valor p { color: var(--texto-suave); font-size: 0.95rem; }

/* Historia: línea de tiempo + foto */
.historia-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}
.historia-texto h2 { margin-bottom: 30px; }
.linea-tiempo {
  position: relative;
  border-left: 3px solid var(--azul-700);
  margin-left: 8px;
  padding-left: 30px;
}
.tl-item { position: relative; padding-bottom: 28px; }
.tl-item:last-child { padding-bottom: 0; }
/* Punto rojo sobre la línea */
.tl-item::before {
  content: "";
  position: absolute;
  left: -40px; top: 4px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--rojo);
  border: 4px solid var(--blanco);
  box-shadow: 0 0 0 2px var(--rojo);
}
.tl-anio {
  display: block;
  font-family: var(--fuente-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--azul-700);
}
.tl-item h3 { font-size: 1.1rem; margin: 2px 0 4px; }
.tl-item p { color: var(--texto-suave); max-width: 52ch; }

@media (max-width: 900px) {
  .equipo-grid { grid-template-columns: repeat(2, 1fr); }
  .valores-grid { grid-template-columns: 1fr 1fr; }
  .historia-layout { grid-template-columns: 1fr; gap: 36px; }
  .historia-foto { max-width: 420px; }
}
@media (max-width: 560px) {
  .equipo-grid, .valores-grid { grid-template-columns: 1fr; }
}

/* ---------- Servicios: tarjetas que se llenan de azul al pasar el mouse ---------- */
.servicios-cuadricula { grid-template-columns: repeat(4, 1fr); }

.servicio-card {
  --mx: 50%; --my: 50%;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.1);
  border-radius: 24px;
  padding: 30px 24px 28px;
  cursor: default;
  transition: transform 0.2s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  will-change: transform;
}
/* Fondo azul que aparece al pasar el mouse */
.servicio-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--degradado-azul);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}
/* Luz que sigue al mouse */
.servicio-brillo {
  position: absolute;
  inset: 0;
  background: radial-gradient(220px circle at var(--mx) var(--my), rgba(79,195,247,0.35), transparent 65%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
.servicio-card > *:not(.servicio-brillo) { position: relative; z-index: 2; }

.servicio-icono {
  width: 60px; height: 60px;
  border-radius: 50%;
  border: 2px solid var(--azul-50);
  background: var(--azul-50);
  color: var(--azul-700);
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}
.servicio-icono svg { width: 28px; height: 28px; }

.servicio-card h3 {
  font-size: 1.12rem;
  margin-bottom: 10px;
  transition: color 0.4s ease;
}

/* Descripción y lista "qué incluye" ocupan el mismo lugar y se intercambian
   (así la tarjeta no cambia de tamaño ni mueve a las demás) */
.servicio-cuerpo { display: grid; }
.servicio-cuerpo > * {
  grid-area: 1 / 1;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.servicio-cuerpo p { color: var(--texto-suave); font-size: 0.93rem; }
.servicio-incluye {
  list-style: none;
  opacity: 0;
  transform: translateY(12px);
}
.servicio-incluye li {
  position: relative;
  padding: 3px 0 3px 24px;
  font-size: 0.92rem;
  color: var(--blanco);
}
.servicio-incluye li::before {
  content: "";
  position: absolute;
  left: 4px; top: 9px;
  width: 10px; height: 6px;
  border-left: 2.5px solid var(--azul-brillante);
  border-bottom: 2.5px solid var(--azul-brillante);
  transform: rotate(-45deg);
}

/* Estado activo: al pasar el mouse (computador) o al tocar la tarjeta (celular) */
.servicio-card.abierta,
.servicio-card:focus-visible { box-shadow: 0 30px 55px -26px rgba(10,36,88,0.6); border-color: transparent; }
.servicio-card.abierta::after,
.servicio-card:focus-visible::after { opacity: 1; }
.servicio-card.abierta .servicio-icono,
.servicio-card:focus-visible .servicio-icono { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: var(--blanco); transform: rotate(-8deg) scale(1.08); }
.servicio-card.abierta h3,
.servicio-card:focus-visible h3 { color: var(--blanco); }
.servicio-card.abierta .servicio-cuerpo p,
.servicio-card:focus-visible .servicio-cuerpo p { opacity: 0; transform: translateY(-12px); }
.servicio-card.abierta .servicio-incluye,
.servicio-card:focus-visible .servicio-incluye { opacity: 1; transform: none; }
@media (hover: hover) {
  .servicio-card:hover { box-shadow: 0 30px 55px -26px rgba(10,36,88,0.6); border-color: transparent; }
  .servicio-card:hover::after { opacity: 1; }
  .servicio-card:hover .servicio-brillo { opacity: 1; }
  .servicio-card:hover .servicio-icono { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.35); color: var(--blanco); transform: rotate(-8deg) scale(1.08); }
  .servicio-card:hover h3 { color: var(--blanco); }
  .servicio-card:hover .servicio-cuerpo p { opacity: 0; transform: translateY(-12px); }
  .servicio-card:hover .servicio-incluye { opacity: 1; transform: none; }
}

@media (max-width: 1100px) { .servicios-cuadricula { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Cómo funciona (línea de progreso + pasos animados) ---------- */
.flujo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}
/* Línea gris de fondo que une los círculos; el <span> es el relleno azul */
.flujo-linea {
  position: absolute;
  top: 46px;
  left: 10%; right: 10%;
  height: 4px;
  border-radius: 4px;
  background: var(--azul-50);
}
.flujo-linea span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--azul-700), var(--cian));
  transition: width 1.8s cubic-bezier(.65,0,.35,1) 0.2s;
}
.flujo.activo .flujo-linea span { width: 100%; }

.flujo-paso { position: relative; text-align: center; }

.flujo-circulo {
  position: relative;
  width: 92px; height: 92px;
  margin: 0 auto 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--azul-700), var(--cian));
  color: var(--blanco);
  display: grid;
  place-items: center;
  box-shadow: 0 18px 34px -16px rgba(10, 91, 196, 0.8);
  transition: transform 0.35s ease;
}
.flujo-circulo svg { width: 36px; height: 36px; transition: transform 0.35s ease; }
/* Anillo punteado que gira alrededor del círculo */
.flujo-anillo {
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px dashed var(--azul-300);
  animation: girar 14s linear infinite;
}
/* Numerito rojo en la esquina */
.flujo-num {
  position: absolute;
  top: -2px; right: -2px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rojo);
  color: var(--blanco);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: 0.95rem;
  display: grid;
  place-items: center;
  border: 3px solid var(--blanco);
}
.flujo-paso:hover .flujo-circulo { transform: scale(1.08); }
.flujo-paso:hover .flujo-circulo svg { transform: rotate(-10deg); }
.flujo-paso:hover .flujo-anillo { animation-duration: 3s; border-color: var(--azul-700); }

.flujo-tarjeta {
  position: relative;
  height: 100%;
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.08);
  border-radius: var(--radio);
  padding: 22px 16px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Flechita de la tarjeta apuntando al círculo */
.flujo-tarjeta::before {
  content: "";
  position: absolute;
  top: -8px; left: 50%;
  width: 14px; height: 14px;
  background: var(--blanco);
  border-left: 1px solid rgba(10,36,88,0.08);
  border-top: 1px solid rgba(10,36,88,0.08);
  transform: translateX(-50%) rotate(45deg);
}
.flujo-paso:hover .flujo-tarjeta {
  transform: translateY(-6px);
  box-shadow: 0 24px 44px -22px rgba(10,36,88,0.4);
  border-color: transparent;
}
.flujo-etiqueta {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--azul-700);
  background: var(--azul-50);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.flujo-tarjeta h3 { font-size: 1.12rem; margin-bottom: 6px; }
.flujo-tarjeta p { color: var(--texto-suave); font-size: 0.95rem; }

/* Entrada: cada paso aparece cuando la línea llega hasta él */
.js .flujo-circulo { opacity: 0; transform: scale(0.4); }
.js .flujo-tarjeta { opacity: 0; transform: translateY(30px); }
.flujo.activo .flujo-circulo {
  opacity: 1; transform: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.34,1.56,.64,1);
}
.flujo.activo .flujo-tarjeta {
  opacity: 1; transform: none;
  transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.flujo.activo .flujo-paso:nth-child(2) .flujo-circulo { transition-delay: 0.1s; }
.flujo.activo .flujo-paso:nth-child(3) .flujo-circulo { transition-delay: 0.5s; }
.flujo.activo .flujo-paso:nth-child(4) .flujo-circulo { transition-delay: 0.95s; }
.flujo.activo .flujo-paso:nth-child(5) .flujo-circulo { transition-delay: 1.4s; }
.flujo.activo .flujo-paso:nth-child(6) .flujo-circulo { transition-delay: 1.8s; }
.flujo.activo .flujo-paso:nth-child(2) .flujo-tarjeta { transition-delay: 0.3s; }
.flujo.activo .flujo-paso:nth-child(3) .flujo-tarjeta { transition-delay: 0.7s; }
.flujo.activo .flujo-paso:nth-child(4) .flujo-tarjeta { transition-delay: 1.15s; }
.flujo.activo .flujo-paso:nth-child(5) .flujo-tarjeta { transition-delay: 1.6s; }
.flujo.activo .flujo-paso:nth-child(6) .flujo-tarjeta { transition-delay: 2s; }
/* Al pasar el mouse, sin esperas */
.flujo.activo .flujo-paso:hover .flujo-circulo { transform: scale(1.08); transition-delay: 0s; }
.flujo.activo .flujo-paso:hover .flujo-tarjeta { transform: translateY(-6px); transition-delay: 0s; }

@media (max-width: 900px) {
  /* En celular: la línea va vertical a la izquierda y los pasos uno debajo de otro */
  .flujo { grid-template-columns: 1fr; gap: 28px; }
  .flujo-linea { top: 46px; bottom: 46px; left: 44px; right: auto; width: 4px; height: auto; }
  .flujo-linea span { width: 100%; height: 0; transition: height 1.8s cubic-bezier(.65,0,.35,1) 0.2s; }
  .flujo.activo .flujo-linea span { width: 100%; height: 100%; }
  .flujo-paso { display: grid; grid-template-columns: 92px 1fr; gap: 22px; align-items: center; text-align: left; }
  .flujo-circulo { margin: 0; }
  .flujo-tarjeta::before { top: 50%; left: -8px; transform: translateY(-50%) rotate(-45deg); }
}
@media (max-width: 420px) {
  .flujo-paso { grid-template-columns: 70px 1fr; gap: 16px; }
  .flujo-circulo { width: 70px; height: 70px; }
  .flujo-circulo svg { width: 28px; height: 28px; }
  .flujo-linea { left: 33px; top: 35px; bottom: 35px; }
}

/* ---------- Tarjetas del inicio que llevan a cada apartado ---------- */
.accesos { padding-bottom: 90px; }
.accesos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.acceso {
  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid rgba(10,36,88,0.08);
  border-top: 6px solid var(--azul-700);
  border-radius: var(--radio);
  padding: 28px 24px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.acceso:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 44px -22px rgba(10, 36, 88, 0.35);
}
.acceso-icono {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--azul-50);
  color: var(--azul-700);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.acceso-icono svg { width: 24px; height: 24px; }
.acceso:hover .acceso-icono { background: var(--azul-700); color: var(--blanco); transform: rotate(-8deg) scale(1.08); }
.acceso h3 { margin-bottom: 8px; }
.acceso p { color: var(--texto-suave); font-size: 0.95rem; margin-bottom: 18px; }
.acceso-ver {
  margin-top: auto;
  font-weight: 700;
  color: var(--azul-700);
}
.acceso-ver span { display: inline-block; transition: transform 0.25s ease; }
.acceso:hover .acceso-ver span { transform: translateX(5px); }

@media (max-width: 900px) { .accesos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .accesos-grid { grid-template-columns: 1fr; } }

/* ---------- Pasos: se levantan al pasar el mouse ---------- */
.paso { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.paso:hover { transform: translateY(-8px); box-shadow: 0 24px 44px -22px rgba(10,36,88,0.35); }

/* ---------- Aparecer al hacer scroll ----------
   main.js les pone estas clases a los bloques; cuando llegan a la
   pantalla reciben ".visible" y entran con movimiento. */
.anim { opacity: 0; transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1); }
.anim-arriba    { transform: translateY(50px); }
.anim-izquierda { transform: translateX(-60px); }
.anim-derecha   { transform: translateX(60px); }
.anim-zoom      { transform: scale(0.92); }
.anim.visible   { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
/* ---------- Menú del celular (panel lateral) ---------- */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 400;
  visibility: hidden;
  transition: visibility 0s linear 0.4s;
}
.menu-movil.abierto { visibility: visible; transition-delay: 0s; }
.menu-movil-fondo {
  position: absolute;
  inset: 0;
  background: rgba(10, 36, 88, 0.6);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.menu-movil.abierto .menu-movil-fondo { opacity: 1; }
.menu-movil-panel {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: min(78vw, 360px);
  background: var(--blanco);
  display: flex;
  flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(.77,0,.18,1);
  box-shadow: 20px 0 50px -20px rgba(0,0,0,0.4);
}
.menu-movil.abierto .menu-movil-panel { transform: none; }
.menu-movil-cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px;
  border-bottom: 1px solid rgba(10,36,88,0.1);
  font-family: var(--fuente-display);
  font-weight: 600;
  font-size: 1.1rem;
  color: var(--azul-700);
  line-height: 1.2;
}
.menu-movil-logo { width: 54px; height: 54px; object-fit: contain; flex-shrink: 0; }
.menu-movil-enlaces {
  flex: 1;
  overflow-y: auto;
  padding: 40px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-movil-enlaces a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 4px;
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--texto);
  opacity: 0;
  transform: translateX(-20px);
  transition: color 0.2s ease, opacity 0.4s ease, transform 0.4s ease;
}
.menu-movil-enlaces a svg { width: 22px; height: 22px; opacity: 0.7; }
.menu-movil-enlaces a.activo { color: var(--azul-700); font-weight: 700; }
.menu-movil-enlaces a:active { color: var(--azul-700); }
/* Los enlaces entran uno detrás de otro */
.menu-movil.abierto .menu-movil-enlaces a { opacity: 1; transform: none; }
.menu-movil.abierto .menu-movil-enlaces a:nth-child(1) { transition-delay: 0.12s; }
.menu-movil.abierto .menu-movil-enlaces a:nth-child(2) { transition-delay: 0.17s; }
.menu-movil.abierto .menu-movil-enlaces a:nth-child(3) { transition-delay: 0.22s; }
.menu-movil.abierto .menu-movil-enlaces a:nth-child(4) { transition-delay: 0.27s; }
.menu-movil.abierto .menu-movil-enlaces a:nth-child(5) { transition-delay: 0.32s; }
.menu-movil-pie {
  padding: 20px 24px 28px;
  border-top: 1px solid rgba(10,36,88,0.1);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.menu-movil-pie .boton { width: 100%; justify-content: center; text-align: center; }
.menu-movil-whatsapp {
  text-align: center;
  font-weight: 600;
  color: #1DA851;
}
/* Botón blanco redondo con la X, arriba a la derecha sobre el fondo oscuro */
.menu-movil-cerrar {
  position: absolute;
  top: 18px; right: 14px;
  width: 52px; height: 52px;
  border-radius: 50%;
  border: none;
  background: var(--blanco);
  color: var(--azul-900);
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.6) rotate(-90deg);
  transition: opacity 0.3s ease 0.15s, transform 0.4s ease 0.15s;
}
.menu-movil-cerrar svg { width: 24px; height: 24px; }
.menu-movil.abierto .menu-movil-cerrar { opacity: 1; transform: none; }
body.menu-abierto { overflow: hidden; }

@media (max-width: 1100px) {
  .nav { display: none; }
  .nav-cta { margin-left: auto; }
  .nav-toggle { display: block; }
}
@media (min-width: 1101px) {
  .menu-movil { display: none; }
}

@media (max-width: 900px) {
  .hero { padding-top: calc(var(--alto-header) + 30px); padding-bottom: 140px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-collage { order: -1; min-height: 340px; max-width: 420px; width: 100%; margin: 0 auto 20px; }
  /* En celular, las fotos son fijas en píxeles (no en %), así que hay que
     achicarlas aparte para que quepan en pantallas angostas */
  .collage-foto-grande { height: 300px; }
  .collage-foto-chica-1, .collage-foto-chica-2 { height: 150px; }
  .garantia-grid { grid-template-columns: 1fr; gap: 36px; }
  .garantia-imagenes .slider-ventana { height: 300px; }
  .servicios-cuadricula { grid-template-columns: repeat(2, 1fr); }
  .pasos { grid-template-columns: repeat(2, 1fr); }
  .contacto-layout { grid-template-columns: 1fr; }
  .cta-caja { padding: 32px; }
}

@media (max-width: 560px) {
  :root { --alto-header: 72px; }
  .contenedor { padding: 0 16px; }
  .nav-cta { padding: 9px 14px; font-size: 0.85rem; }
  .logo-texto small { display: none; }
  .pasos { grid-template-columns: 1fr; }
  .servicios-cuadricula { grid-template-columns: 1fr; }
  .seccion { padding: 56px 0; }
  .banner { padding-bottom: 60px; }
  .garantia-foto { flex-basis: 210px; }
  .insignia-1 { left: 4%; bottom: -14px; }
  .insignia-2 { left: 2%; top: 8%; }
  .cta-caja { padding: 26px; }
}

/* Si la persona pidió menos animaciones en su sistema, se quitan las decorativas.
   Los carruseles siguen avanzando para que las fotos se vayan mostrando. */
@media (prefers-reduced-motion: reduce) {
  .olas-grupo use, .insignia-flotante, .hero-texto > *, .hero-collage,
  .banner h1, .banner p, .migas, .preloader-logo, .preloader-barra span,
  .whatsapp-flotante { animation: none !important; }
  .anim { opacity: 1; transform: none; transition: none; }
}

/* Foco visible para accesibilidad de teclado */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--azul-500);
  outline-offset: 2px;
}