/* ==========================================================================
   CREATIVE SKY — HOJA DE ESTILOS PRINCIPAL
   ==========================================================================
   Organización de este archivo (busca estos títulos con Ctrl+F):
   1. VARIABLES GLOBALES     -> cambia colores, tipografías, espaciados aquí
   2. RESET Y BASE
   3. TIPOGRAFÍA
   4. UTILIDADES / BOTONES
   5. CURSOR PERSONALIZADO
   6. HEADER
   7. HERO
   8. FORMA DE TRABAJAR
   9. EXPERIENCIAS
   10. ASISTENTE INTERACTIVO
   11. TESTIMONIOS
   12. EQUIPO
   13. COBERTURA (MAPA)
   14. MÉTODOS DE PAGO
   15. CONTACTO
   16. FOOTER
   17. WHATSAPP FLOTANTE
   18. ANIMACIONES / SCROLL REVEAL
   19. RESPONSIVE
   ========================================================================== */


/* ==========================================================================
   1. VARIABLES GLOBALES
   Cambia estos valores y se actualiza TODO el sitio automáticamente.
   ========================================================================== */
:root {
  /* --- Colores --- */
  --c-navy:          #0a1a35;   /* azul profundo, color principal de marca */
  --c-navy-deep:      #060f22;  /* azul aún más oscuro, para overlays/fondos */
  --c-white:          #ffffff;
  --c-gray-50:        #f7f8fa;  /* fondo de secciones claras */
  --c-gray-200:       #e4e8ee;  /* líneas divisoras sutiles */
  --c-gray-500:       #7c8aa0;  /* texto secundario */
  --c-ink:            #12182b;  /* texto principal (no negro puro, más editorial) */
  --c-celeste:        #4fc3f7;  /* acento celeste, para detalles y hover */
  --c-celeste-soft:   #d7f0ff;  /* celeste muy suave, para fondos delicados */

  /* --- Tipografía ---
     Titulares: Fraunces (serif editorial, con carácter, transmite exclusividad)
     Cuerpo:    Inter (sans-serif limpia, altamente legible)
     Si quieres cambiar la fuente, solo reemplaza el nombre acá Y en el
     <link> de Google Fonts dentro de index.html. */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* --- Espaciados (escala consistente en todo el sitio) --- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs:  16px;
  --space-sm:  24px;
  --space-md:  40px;
  --space-lg:  72px;
  --space-xl:  120px;
  --space-2xl: 180px;

  /* --- Bordes y sombras (usar con moderación, el brief pide look limpio) --- */
  --radius-sm: 6px;
  --radius-md: 14px;
  --radius-full: 999px;
  --shadow-soft: 0 20px 60px rgba(10, 26, 53, 0.08);
  --shadow-medium: 0 24px 70px rgba(10, 26, 53, 0.16);

  /* --- Velocidades de animación --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed-fast: 0.35s;
  --speed-base: 0.7s;
  --speed-slow: 1.2s;

  /* --- Ancho máximo del contenido --- */
  --maxw: 1320px;
  --maxw-text: 720px;
}


/* ==========================================================================
   2. RESET Y BASE
   ========================================================================== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-body);
  color: var(--c-ink);
  background: var(--c-white);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section { position: relative; }


/* ==========================================================================
   3. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4, .font-display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.12;
  color: var(--c-navy);
  letter-spacing: -0.01em;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-celeste);
  margin-bottom: var(--space-sm);
}

.section-title {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  max-width: var(--maxw-text);
}

.section-lead {
  font-size: 1.1rem;
  color: var(--c-gray-500);
  max-width: 560px;
  line-height: 1.7;
  margin-top: var(--space-sm);
}


/* ==========================================================================
   4. UTILIDADES / BOTONES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 17px 34px;
  border-radius: var(--radius-full);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform var(--speed-fast) var(--ease), box-shadow var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn-primary {
  background: var(--c-celeste);
  color: var(--c-navy);
}
.btn-primary:hover { box-shadow: 0 14px 34px rgba(79, 195, 247, 0.35); }

.btn-ghost {
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--c-white);
}
.btn-ghost:hover { border-color: var(--c-celeste); color: var(--c-celeste); }

.btn-dark {
  background: var(--c-navy);
  color: var(--c-white);
}
.btn-dark:hover { background: var(--c-navy-deep); }

.text-link {
  position: relative;
  font-weight: 600;
  padding-bottom: 2px;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0.3);
  transform-origin: left;
  transition: transform var(--speed-fast) var(--ease);
  opacity: 0.4;
}
.text-link:hover::after { transform: scaleX(1); opacity: 1; }


/* ==========================================================================
   4b. GALERÍAS CON SCROLL LIBRE
   Usado en "Experiencias" y "Equipo". Es una fila que se desliza con el
   dedo (móvil), el mouse/trackpad, o arrastrando con clic (ver script.js,
   función initDragScroll). No es un carrusel con flechas ni puntos.
   ========================================================================== */
.drag-scroll {
  display: flex;
  gap: var(--space-xs);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--c-celeste) transparent;
}
.drag-scroll.dragging { cursor: grabbing; scroll-behavior: auto; }
.drag-scroll::-webkit-scrollbar { height: 5px; }
.drag-scroll::-webkit-scrollbar-thumb { background: var(--c-gray-200); border-radius: var(--radius-full); }
.drag-scroll > * { scroll-snap-align: start; flex-shrink: 0; }


/* ==========================================================================
   5. CURSOR PERSONALIZADO
   Un punto que sigue al mouse con un leve retraso (sensación premium).
   Se desactiva solo en dispositivos táctiles (ver script.js).
   ========================================================================== */
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--c-celeste);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
  mix-blend-mode: difference;
}
.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 34px; height: 34px;
  border: 1px solid var(--c-celeste);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.25s var(--ease), height 0.25s var(--ease), opacity 0.3s ease, border-color 0.25s ease;
}
.cursor-ring.hovering {
  width: 54px; height: 54px;
  border-color: var(--c-white);
}
body.no-custom-cursor .cursor-dot,
body.no-custom-cursor .cursor-ring { display: none; }


/* ==========================================================================
   6. HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: var(--space-sm) 0;
  transition: padding var(--speed-fast) var(--ease), background var(--speed-fast) var(--ease), backdrop-filter var(--speed-fast) var(--ease);
}
.site-header.scrolled {
  padding: var(--space-2xs) 0;
  background: rgba(10, 26, 53, 0.88);
  backdrop-filter: blur(14px);
}

.header-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand { display: flex; align-items: center; gap: 10px; }
.brand-icon { width: 34px; height: 28px; }
.brand-name {
  display: inline-flex;
  gap: 6px;
  color: var(--c-white);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 500;
}
.brand-name .accent { color: var(--c-celeste); }

.main-nav ul { display: flex; align-items: center; gap: var(--space-md); }
.main-nav a {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.88rem;
  font-weight: 500;
  transition: color var(--speed-fast) ease;
}
.main-nav a:hover { color: var(--c-celeste); }

.header-cta {
  background: var(--c-celeste);
  color: var(--c-navy);
  padding: 11px 24px;
  border-radius: var(--radius-full);
  font-size: 0.85rem;
  font-weight: 700;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--c-white); }

.nav-close { display: none; }
.nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 15, 34, 0.55);
  z-index: 1400;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed-fast) ease;
}
.nav-backdrop.open { opacity: 1; pointer-events: auto; }


/* ==========================================================================
   7. HERO
   ========================================================================== */
.hero {
  height: 100vh;
  height: 100svh; /* en celulares, 100vh incluye el espacio detrás de la barra
                     del navegador y corta el contenido; 100svh (small viewport
                     height) lo resuelve. Los navegadores que no lo soportan
                     simplemente ignoran esta línea y usan la de arriba. */
  min-height: 560px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--c-white);
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-media video,
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,15,34,0.5) 0%, rgba(6,15,34,0.62) 55%, rgba(6,15,34,0.92) 100%);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 780px;
  padding: 0 var(--space-md);
}

.hero-logo { width: 62px; margin: 0 auto var(--space-md); opacity: 0.95; }

.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  color: var(--c-white);
  margin-bottom: var(--space-sm);
}
.hero-title em {
  font-style: italic;
  color: var(--c-celeste);
}

.hero-subtitle {
  font-size: 1.15rem;
  color: rgba(255,255,255,0.82);
  max-width: 540px;
  margin: 0 auto var(--space-lg);
  line-height: 1.7;
}

.hero-actions { display: flex; gap: var(--space-xs); justify-content: center; flex-wrap: wrap; }

.scroll-cue {
  position: absolute;
  bottom: var(--space-md); left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.scroll-cue .line {
  width: 1px; height: 34px;
  background: rgba(255,255,255,0.4);
  overflow: hidden;
  position: relative;
}
.scroll-cue .line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--c-celeste);
  animation: scrollLine 2.2s infinite ease-in-out;
}
@keyframes scrollLine {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}


/* ==========================================================================
   8. FORMA DE TRABAJAR
   Editorial, sin cajas con borde — grid de 2 columnas con números e
   íconos grandes, más compacto y visualmente organizado que una simple
   lista vertical.
   ========================================================================== */
.trabajo {
  padding: var(--space-xl) 0;
  background: var(--c-gray-50);
}

.trabajo-head { max-width: var(--maxw-text); margin-bottom: var(--space-lg); }

.trabajo-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-xl);
}

.trabajo-item { position: relative; padding-top: var(--space-sm); }
.trabajo-item::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--c-celeste);
}

.trabajo-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--c-celeste);
  font-weight: 500;
  margin-bottom: var(--space-2xs);
}

.trabajo-item h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  margin-bottom: var(--space-2xs);
  max-width: 380px;
}

.trabajo-item p {
  color: var(--c-gray-500);
  max-width: 420px;
  font-size: 0.98rem;
  line-height: 1.7;
}


/* ==========================================================================
   8c. QUIÉNES SOMOS
   Foto grande + texto + estadísticas. A diferencia de "Equipo" (personas
   individuales), esto presenta al estudio como marca.

   Para cambiar la foto: assets/images/quienes-somos.webp
   Formato: WebP, orientación vertical, 1000x1250, máximo 350 KB.

   Los 3 datos (.stat-item) son placeholders — reemplaza con cifras
   reales cuando las tengas. Se sugieren métricas verificables en vez
   de números vagos: proyectos entregados, personas en el equipo,
   regiones de cobertura.
   ========================================================================== */
.quienes {
  padding: var(--space-xl) 0;
  background: var(--c-navy);
  color: var(--c-white);
}
.quienes-inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-xl);
  align-items: center;
}
.quienes-media { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/5; }
.quienes-media img { width: 100%; height: 100%; object-fit: cover; }

.quienes-copy .eyebrow { margin-bottom: var(--space-2xs); }
.quienes-copy h2 { color: var(--c-white); font-size: clamp(1.8rem, 3.4vw, 2.5rem); margin-bottom: var(--space-sm); }
.quienes-copy p { color: rgba(255,255,255,0.72); line-height: 1.75; max-width: 520px; margin-bottom: var(--space-xs); font-size: 1rem; }

.quienes-stats { display: flex; gap: var(--space-lg); margin-top: var(--space-md); flex-wrap: wrap; }
.stat-item .stat-num { font-family: var(--font-display); font-size: 2rem; color: var(--c-celeste); line-height: 1; }
.stat-item .stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 6px; }


/* ==========================================================================
   9. EXPERIENCIAS
   Filas alternadas imagen/texto. Cada fila trae una GALERÍA con varias
   fotos (scroll libre, no un carrusel con flechas) en vez de una sola
   imagen fija.
   ========================================================================== */
.experiencias { padding: var(--space-2xl) 0; background: var(--c-gray-50); }

.experiencias-head { max-width: var(--maxw-text); margin-bottom: var(--space-xl); }

.experiencia-row {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) 0;
}
.experiencia-row:not(:last-child) { border-bottom: 1px solid var(--c-gray-200); }
.experiencia-row.reverse { grid-template-columns: 0.85fr 1.15fr; }
.experiencia-row.reverse .experiencia-gallery { order: 2; }
.experiencia-row.reverse .experiencia-copy { order: 1; }

.experiencia-gallery {
  /* hereda .drag-scroll: fila deslizable con el mouse/dedo */
  padding-bottom: var(--space-2xs);
}

.experiencia-photo {
  position: relative;
  width: 78%;
  max-width: 380px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-md);
  cursor: pointer;
}
.experiencia-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--speed-slow) var(--ease);
}
.experiencia-photo:hover img { transform: scale(1.05); }

.experiencia-tag {
  position: absolute;
  bottom: var(--space-sm); left: var(--space-sm);
  background: rgba(10,26,53,0.75);
  backdrop-filter: blur(6px);
  color: var(--c-white);
  padding: 8px 16px;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.experiencia-copy .eyebrow { margin-bottom: var(--space-2xs); }
.experiencia-copy h3 { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: var(--space-xs); }
.experiencia-copy p { color: var(--c-gray-500); line-height: 1.75; margin-bottom: var(--space-sm); max-width: 460px; }

.experiencia-drone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--c-navy);
  font-weight: 600;
}
.experiencia-drone svg { width: 14px; height: 14px; }


/* ==========================================================================
   10. ASISTENTE INTERACTIVO
   ========================================================================== */
.asistente {
  padding: var(--space-2xl) 0;
  background: var(--c-navy);
  color: var(--c-white);
}

.asistente-head { max-width: var(--maxw-text); margin-bottom: var(--space-xl); }
.asistente-head .section-title { color: var(--c-white); }
.asistente-head .section-lead { color: rgba(255,255,255,0.65); }

.quiz-box { max-width: 720px; }

.quiz-progress {
  display: flex; gap: 8px;
  margin-bottom: var(--space-lg);
}
.quiz-progress span {
  flex: 1; height: 2px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  overflow: hidden;
}
.quiz-progress span::after {
  content: '';
  display: block;
  height: 100%; width: 0%;
  background: var(--c-celeste);
  transition: width var(--speed-base) var(--ease);
}
.quiz-progress span.done::after { width: 100%; }

.quiz-step { display: none; }
.quiz-step.active { display: block; animation: fadeUp var(--speed-base) var(--ease); }

.quiz-step h3 { color: var(--c-white); font-size: clamp(1.4rem, 3vw, 1.9rem); margin-bottom: var(--space-md); }

.quiz-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); }

.quiz-option {
  text-align: left;
  padding: var(--space-sm);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-md);
  color: var(--c-white);
  font-size: 0.95rem;
  transition: border-color var(--speed-fast) ease, background var(--speed-fast) ease, transform var(--speed-fast) ease;
}
.quiz-option:hover { border-color: var(--c-celeste); transform: translateY(-2px); }
.quiz-option.selected { border-color: var(--c-celeste); background: rgba(79,195,247,0.1); }

.quiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-lg); }
.quiz-back { color: rgba(255,255,255,0.5); font-size: 0.85rem; }
.quiz-back:hover { color: var(--c-white); }

.quiz-result { text-align: left; }
.quiz-result-message {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.8;
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-md);
  white-space: pre-line;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}


/* ==========================================================================
   11. TESTIMONIOS
   Burbujas estilo WhatsApp recreadas en CSS (no son capturas reales).
   ========================================================================== */
.testimonios { padding: var(--space-2xl) 0; background: var(--c-gray-50); }
.testimonios-head { max-width: var(--maxw-text); margin-bottom: var(--space-xl); }

.testi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}

.whatsapp-mock {
  background: #e9edf3;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  box-shadow: var(--shadow-soft);
}
.whatsapp-mock-header {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: var(--space-xs);
  margin-bottom: var(--space-xs);
  border-bottom: 1px solid rgba(10,26,53,0.08);
}
.whatsapp-mock-header .dot { width: 8px; height: 8px; border-radius: 50%; background: #25D366; }
.whatsapp-mock-header span { font-size: 0.75rem; color: var(--c-gray-500); font-weight: 600; }

.whatsapp-bubble {
  background: #ffffff;
  border-radius: 12px 12px 12px 3px;
  padding: 12px 14px;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--c-ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
  position: relative;
}
.whatsapp-bubble strong { color: var(--c-navy); }
.whatsapp-bubble .time {
  display: block;
  text-align: right;
  font-size: 0.68rem;
  color: var(--c-gray-500);
  margin-top: 6px;
}

.testi-author {
  display: flex; align-items: center; gap: 10px;
  margin-top: var(--space-sm);
}
.testi-author .ph {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-navy);
  color: var(--c-celeste);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700;
}
.testi-author .name { font-size: 0.82rem; font-weight: 600; color: var(--c-navy); }
.testi-author .role { font-size: 0.72rem; color: var(--c-gray-500); }


/* ==========================================================================
   12. EQUIPO ("Las personas detrás de cada producción")
   Tarjetas individuales (foto + nombre + cargo) en una fila con scroll
   libre — escala bien si el equipo crece de 5 a 10 o más personas, sin
   tener que rediseñar nada.

   Para agregar una persona nueva: copia un bloque .persona-card
   completo dentro de .equipo-gallery.
   Foto: assets/images/equipo/[nombre].webp — vertical, 800x1000, WebP, máx 300KB.
   ========================================================================== */
.equipo { padding: var(--space-2xl) 0; background: var(--c-white); }
.equipo-head { max-width: var(--maxw-text); margin-bottom: var(--space-xl); }

.equipo-gallery {
  /* hereda .drag-scroll */
  padding-bottom: var(--space-xs);
}

.persona-card { width: 240px; }
.persona-media {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  margin-bottom: var(--space-xs);
}
.persona-media img { width: 100%; height: 100%; object-fit: cover; }
.persona-card .persona-name { font-family: var(--font-display); font-size: 1.1rem; color: var(--c-navy); }
.persona-card .persona-role { font-size: 0.82rem; color: var(--c-gray-500); margin-top: 2px; }


/* ==========================================================================
   13. COBERTURA
   Se descartó el mapa ilustrado de Chile — con los recursos de este
   proyecto (sin librería de mapas ni archivo geográfico real) no se
   lograba un resultado que se viera fiel a la forma real del país, y
   la instrucción fue: si no se ve bien, mejor no ponerlo. En su lugar,
   una presentación en lista, grande y elegante, centrada.
   ========================================================================== */
.cobertura {
  padding: var(--space-lg) 0;
  background: var(--c-navy);
  color: var(--c-white);
  text-align: center;
}
.cobertura-head { max-width: var(--maxw-text); margin: 0 auto; }
.cobertura-head .section-title { color: var(--c-white); margin: 0 auto; font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.cobertura-head .section-lead { color: rgba(255,255,255,0.65); margin-left: auto; margin-right: auto; margin-top: var(--space-2xs); }

.cobertura-list {
  margin-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xs) var(--space-md);
}
.cobertura-list li {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  color: rgba(255,255,255,0.9);
}
.cobertura-list li .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--c-celeste); flex-shrink: 0; }


/* ==========================================================================
   15. CONTACTO
   Datos de contacto con ícono + formulario dentro de una tarjeta blanca
   con sombra (a diferencia del resto del sitio, aquí sí usamos una
   "caja" — ayuda a que el formulario se perciba como un lugar concreto
   donde dejar tus datos, en vez de perderse en la página).
   ========================================================================== */
.contacto { padding: var(--space-2xl) 0; background: var(--c-white); }
.contacto-inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: var(--space-xl);
}
.contacto-copy .section-lead { margin-bottom: var(--space-lg); }

.contacto-direct { display: flex; flex-direction: column; gap: 0; margin-top: var(--space-lg); }
.contacto-direct a {
  display: flex; align-items: center; gap: 14px;
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--c-gray-200);
}
.contacto-direct .ico {
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 12px;
  background: var(--c-navy);
  color: var(--c-celeste);
  display: flex; align-items: center; justify-content: center;
}
.contacto-direct .ico svg { width: 19px; height: 19px; }
.contacto-direct .txt { flex: 1; min-width: 0; font-size: 1rem; font-weight: 600; color: var(--c-navy); }
.contacto-direct .txt span { display: block; font-size: 0.72rem; font-weight: 500; color: var(--c-gray-500); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }

.contacto-form-card {
  background: var(--c-white);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  box-shadow: var(--shadow-medium);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.form-group { margin-bottom: var(--space-sm); }
.form-group label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--c-navy); margin-bottom: 8px; }
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 14px 0;
  border: none;
  border-bottom: 1px solid var(--c-gray-200);
  font-size: 0.98rem;
  color: var(--c-ink);
  background: transparent;
  transition: border-color var(--speed-fast) ease;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--c-celeste);
}
.form-group textarea { resize: vertical; min-height: 80px; }
.form-actions { display: flex; gap: var(--space-xs); align-items: center; margin-top: var(--space-md); flex-wrap: wrap; }


/* ==========================================================================
   16. FOOTER
   ========================================================================== */
.site-footer { background: var(--c-navy-deep); color: rgba(255,255,255,0.6); padding: var(--space-xl) 0 var(--space-md); }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-lg); padding-bottom: var(--space-lg); }
.footer-quote { font-family: var(--font-display); font-size: clamp(1.3rem, 2.6vw, 1.8rem); color: var(--c-white); max-width: 480px; line-height: 1.4; }
.footer-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.footer-links a { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.7); font-size: 0.85rem; }
.footer-links a svg { width: 16px; height: 16px; }
.footer-links a:hover { color: var(--c-celeste); }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-xs); padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.08); font-size: 0.76rem; }


/* ==========================================================================
   17. WHATSAPP FLOTANTE
   ========================================================================== */
.whatsapp-float {
  position: fixed;
  /* env(safe-area-inset-bottom) evita que el celular lo esconda detrás
     de la barra de gestos/herramientas del navegador en iPhone. */
  bottom: calc(28px + env(safe-area-inset-bottom, 0px));
  right: 28px;
  width: 56px; height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  z-index: 999;
  transition: transform var(--speed-fast) var(--ease);
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float svg { width: 26px; height: 26px; fill: white; }


/* ==========================================================================
   18. ANIMACIONES / SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(32px); transition: opacity var(--speed-slow) var(--ease), transform var(--speed-slow) var(--ease); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1.visible { transition-delay: 0.12s; }
.reveal-delay-2.visible { transition-delay: 0.24s; }


/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */
@media (max-width: 980px) {
  .experiencia-row, .experiencia-row.reverse { grid-template-columns: 1fr; }
  .experiencia-row.reverse .experiencia-gallery,
  .experiencia-row.reverse .experiencia-copy { order: initial; }
  .quienes-inner { grid-template-columns: 1fr; }
  .quienes-media { max-width: 340px; margin: 0 auto; }
  .contacto-inner { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .quiz-options { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-cta { display: none; }
  .nav-toggle { display: flex; }

  /* FIX v3: además del padding-top fijo (que ya empuja el contenido fuera
     del header), se achica el logo y el título en celular para que el
     bloque completo sea más bajo y quede más margen de sobra igual. */
  /* height:auto (en vez de la altura fija 100svh de la base) es un
     seguro extra: si el contenido llegara a necesitar más espacio del
     que cabe en la pantalla, el hero simplemente crece — nunca vuelve
     a recortar un botón por quedar más abajo del borde. */
  .hero { align-items: flex-start; height: auto; min-height: 100svh; overflow: visible; }
  .hero-content { padding-top: 110px; padding-bottom: var(--space-lg); }
  .hero-logo { width: 42px; margin-bottom: var(--space-xs); }
  .hero-title { font-size: clamp(1.7rem, 7.5vw, 2.3rem); margin-bottom: var(--space-2xs); }
  .hero-subtitle { font-size: 0.95rem; margin-bottom: var(--space-sm); }
  /* Los 2 botones se apilan uno sobre otro: nunca se pelean por ancho
     ni se acercan al aviso de "Scroll" de abajo. */
  .hero-actions { flex-direction: column; align-items: stretch; gap: var(--space-2xs); }
  .hero-actions .btn { justify-content: center; padding: 14px 28px; }
  /* El aviso de "Scroll" es solo decorativo — en celular sobra espacio
     y se pisaba con los botones, así que se oculta ahí. */
  .scroll-cue { display: none; }

  /* Menú móvil: oculto por defecto, se despliega con la clase "open"
     que agrega script.js (initMobileNav) al tocar el botón hamburguesa,
     el botón ✕ de dentro, o el fondo oscuro (nav-backdrop). */
  .nav-toggle { position: relative; z-index: 1600; }
  .nav-backdrop { display: block; }
  .nav-close {
    display: block;
    position: absolute;
    top: 20px; right: 20px;
    color: var(--c-white);
    font-size: 1.8rem;
    line-height: 1;
    background: none;
    border: none;
  }

  .main-nav {
    position: fixed;
    top: 0; right: 0;
    width: 78%;
    max-width: 320px;
    height: 100vh;
    height: 100svh;
    background: var(--c-navy-deep);
    padding: calc(var(--space-xl)) var(--space-md) var(--space-md);
    transform: translateX(100%);
    transition: transform var(--speed-base) var(--ease);
    z-index: 1500;
  }
  .main-nav.open { transform: translateX(0); }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: var(--space-sm); }
  .main-nav a { font-size: 1rem; }
  .trabajo-list { grid-template-columns: 1fr; }
  .testi-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .footer-top { flex-direction: column; }
  .contacto-form-card { padding: var(--space-sm); }
  :root { --space-2xl: 96px; --space-xl: 64px; }
}

@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}