/* ============================================================
   DARIANJU — Transporte & Logística Internacional
   Hoja de estilos v4.1

   ÍNDICE
   01. Variables y tokens
   02. Reset y base
   03. Accesibilidad
   04. Utilidades (contenedor, grids, botones)
   05. Encabezado: barra superior + navegación + hamburguesa
   06. Hero: carrusel
   07. Secciones: encabezados y fondos alternos
   07b. Franja de eslogan
   08. Tarjetas (misión/visión, valores, equipos)
   09. Servicios
   10. Contacto y formulario
   11. Pie de página
   12. Botón flotante de WhatsApp
   13. Animaciones de entrada
   14. Responsive
   ============================================================ */

/* ---------- 00. TIPOGRAFÍA AUTOHOSPEDADA ----------
   Antes se pedían a Google Fonts: dos peticiones a dominios de terceros
   (fonts.googleapis.com para el CSS, bloqueante, y fonts.gstatic.com para
   los archivos), cada una con su DNS y su handshake TLS antes de que se
   pintara una sola letra.
   Son fuentes VARIABLES: un archivo por familia cubre los 8 pesos que usa
   el sitio, así que autohospedarlas pesa lo mismo (47 KB cada una) y
   ahorra los viajes. Desde que los navegadores particionan la caché por
   sitio (2020) tampoco se perdía nada de caché compartida.
   Además, así el sitio no filtra la IP del visitante a un tercero. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;          /* rango del eje variable */
  font-display: swap;
  src: url('../assets/fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url('../assets/fonts/raleway-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 01. VARIABLES ---------- */
:root {
  /* Azules corporativos */
  --azul-900: #0E2438;   /* secciones oscuras / pie */
  --acento:   #2579A7;   /* color de acento — botones, iconos, enlaces */
  --acento-claro: #3792C4;   /* acentos sobre fondo sólido oscuro */
  --acento-oscuro: #1B5E85;
  /* Sobre FOTO el acento claro no alcanza: medido 2.13–3.70:1 contra los
     cuatro slides, cuando AA exige 4.5. Este azul sí pasa. */
  --acento-foto: #B5D8F0;

  /* Grises */
  --gris-50:  #F7F9FB;
  --gris-100: #EEF2F6;
  --gris-200: #DFE6EC;
  --gris-300: #C6D0D9;
  --blanco:   #FFFFFF;

  /* Texto */
  --texto:       #333333;
  --texto-suave: #5C6B78;
  --texto-claro: rgba(255,255,255,0.78);

  /* #25D366 es el verde de marca de WhatsApp, pero con texto o icono
     blanco encima da 2.0:1 y AA exige 4.5 (3.0 para iconos). Este verde
     mantiene la lectura de "WhatsApp" y pasa: medido más abajo. */
  --whatsapp: #0F8074;
  --whatsapp-hover: #0B665C;
  --error:    #C0392B;

  /* Tipografía */
  --f-titulo: 'Raleway', 'Segoe UI', sans-serif;
  --f-texto:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Medidas */
  --top-h: 38px;
  --nav-h: 74px;
  --header-h: calc(var(--top-h) + var(--nav-h));
  --radio: 4px;
  --ancho: 1200px;
  --sombra:    0 2px 12px rgba(14,36,56,0.07);
  --sombra-md: 0 10px 30px rgba(14,36,56,0.12);
}

/* ---------- 02. RESET Y BASE ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.7;
  color: var(--texto);
  background: var(--blanco);
  -webkit-font-smoothing: antialiased;
}
body.sin-scroll { overflow: hidden; }
img, picture, svg { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--f-titulo); line-height: 1.2; font-weight: 700; }
a { color: var(--acento); }

/* Todos los iconos SVG del sitio usan trazo, no relleno */
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wa-flotante svg, .logo-marca svg { stroke: none; fill: currentColor; }

/* El ancla no queda oculta detrás del encabezado fijo */
section[id] { scroll-margin-top: var(--header-h); }

/* ---------- 03. ACCESIBILIDAD ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--acento); color: #fff;
  padding: 12px 22px; font-size: 14px; text-decoration: none;
}
.skip-link:focus { left: 0; }

a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--acento-claro);
  outline-offset: 3px;
}

.no-js .revelar { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .revelar { opacity: 1 !important; transform: none !important; }
}

/* ---------- 04. UTILIDADES ---------- */
.contenedor { width: 100%; max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--f-texto);
  font-size: 14px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 13px 28px;
  border: 2px solid transparent; border-radius: var(--radio);
  text-decoration: none; cursor: pointer;
  transition: background .22s, color .22s, border-color .22s, transform .18s, box-shadow .22s;
}
.btn-acento { background: var(--acento); color: #fff; }
.btn-acento:hover { background: var(--acento-oscuro); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn-grande { padding: 16px 34px; font-size: 15px; }
.btn-bloque { width: 100%; }

/* WhatsApp al mismo nivel que el formulario: el cierre ocurre ahí */
.btn-wa { background: var(--whatsapp); color: #fff; }
.btn-wa:hover { background: var(--whatsapp-hover); transform: translateY(-2px); box-shadow: var(--sombra-md); }
.btn-wa svg { width: 19px; height: 19px; stroke: none; fill: currentColor; flex-shrink: 0; }

/* Secundario sobre foto: contorno claro, sin competir con el de WhatsApp */
.btn-linea-claro { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.55); }
.btn-linea-claro:hover { background: rgba(255,255,255,.18); border-color: #fff; }

.slide-acciones { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.eyebrow {
  font-size: 13px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 10px;
}
.subrayado {
  display: block; width: 62px; height: 3px;
  background: var(--acento); margin: 18px auto 0;
}

/* ---------- 05. ENCABEZADO ---------- */
#cabecera { position: fixed; inset: 0 0 auto 0; z-index: 200; }

/* Barra superior de contacto */
.barra-top { background: var(--azul-900); height: var(--top-h); font-size: 13px; }
.barra-top-inner { display: flex; align-items: center; justify-content: flex-end; gap: 28px; height: var(--top-h); }
.barra-top-item {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--texto-claro); text-decoration: none;
  transition: color .2s;
  padding: 5px 0;            /* 22 -> 32px: WCAG 2.5.8 AA exige 24x24 */
}
.barra-top-item:hover { color: #fff; }
.barra-top-item svg { width: 15px; height: 15px; stroke: var(--acento-claro); flex-shrink: 0; }

/* Navegación */
.nav {
  height: var(--nav-h);
  background: rgba(14,36,56,0.30);
  backdrop-filter: blur(6px);
  transition: background .3s, box-shadow .3s;
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); }

/* Estado sólido: al hacer scroll o cuando no hay hero detrás */
#cabecera.solido .nav,
.nav.solido {
  background: var(--blanco);
  box-shadow: 0 2px 16px rgba(14,36,56,0.10);
  backdrop-filter: none;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }

/* El logo es línea negra sobre blanco, así que va sobre una placa blanca:
   invisible cuando la cabecera es blanca, y distintivo sobre el hero oscuro. */
.logo-marca {
  display: block;
  flex-shrink: 0;
  background: #fff;
  border-radius: 3px;
  padding: 5px 8px;
  line-height: 0;
  transition: box-shadow .3s;
}
.logo-marca img { height: 34px; width: auto; display: block; }
#cabecera:not(.solido):not(.menu-abierto) .logo-marca { box-shadow: 0 2px 12px rgba(0,0,0,.25); }
/* La línea pequeña va arriba y la marca abajo: se lee
   "Transporte y Logística Darianju, S.A." de corrido */
.logo-texto { display: flex; flex-direction: column; line-height: 1.15; }
.logo-texto small {
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase;
  color: var(--texto-claro); transition: color .3s; margin-bottom: 1px;
}
.logo-texto strong {
  font-family: var(--f-titulo); font-size: 20px; font-weight: 800;
  letter-spacing: .05em; color: #fff; transition: color .3s; white-space: nowrap;
}
#cabecera.solido .logo-texto strong { color: var(--azul-900); }
#cabecera.solido .logo-texto small { color: var(--texto-suave); }

.menu { display: flex; align-items: center; gap: 30px; list-style: none; }
.menu > li > a {
  font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.92); text-decoration: none;
  padding: 8px 0; position: relative;
  transition: color .2s;
}
.menu > li > a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s;
}
.menu > li > a:hover::after, .menu > li > a.activo::after { transform: scaleX(1); }
.menu > li > a.activo { color: #fff; }
#cabecera.solido .menu > li > a { color: var(--texto); }
#cabecera.solido .menu > li > a:hover, #cabecera.solido .menu > li > a.activo { color: var(--acento); }

.btn-nav { flex-shrink: 0; }
.menu-contacto-movil { display: none; }

/* Hamburguesa */
.hamburguesa {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; background: none; border: none; cursor: pointer; padding: 0;
}
.hamburguesa span {
  display: block; width: 26px; height: 2px; margin: 0 auto;
  background: #fff; transition: transform .3s, opacity .2s, background .3s;
}
#cabecera.solido .hamburguesa span { background: var(--azul-900); }
#cabecera.menu-abierto .hamburguesa span { background: var(--azul-900); }
#cabecera.menu-abierto .hamburguesa span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#cabecera.menu-abierto .hamburguesa span:nth-child(2) { opacity: 0; }
#cabecera.menu-abierto .hamburguesa span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 06. HERO / CARRUSEL ---------- */
.hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; background: var(--azul-900); }
.hero-slider { position: absolute; inset: 0; }

/* El slide NO se desvanece como bloque: si lo hiciera, durante el cruce
   quedarían dos titulares y dos botones superpuestos e ilegibles.
   (visibility se mantiene "visible" durante toda la transición cuando
   alguno de los extremos lo es, así que ambos slides se pintan.)
   En su lugar: la foto y el velo cruzan por opacidad, y el texto se
   cambia de golpe — solo el slide activo lo muestra. */
.slide { position: absolute; inset: 0; pointer-events: none; }
.slide.activa { pointer-events: auto; }

.slide picture, .slide .slide-velo {
  opacity: 0;
  transition: opacity .9s ease;
}
.slide.activa picture, .slide.activa .slide-velo { opacity: 1; }

.slide picture, .slide img { position: absolute; inset: 0; width: 100%; height: 100%; }
.slide img { object-fit: cover; }
.slide.activa img { animation: kenburns 9s ease-out forwards; }
@keyframes kenburns { from { transform: scale(1.06); } to { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .slide.activa img { animation: none; } }

.slide-velo {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(14,36,56,.88) 0%, rgba(14,36,56,.66) 45%, rgba(14,36,56,.30) 100%);
}

/* El texto no cruza: se intercambia de golpe, así nunca hay dos
   titulares superpuestos. Deliberadamente SIN opacidad ni transición:
   si el texto del hero dependiera de que una animación termine, un
   fallo la dejaría invisible, y es el elemento más importante del sitio. */
.slide-contenido { visibility: hidden; }
.slide.activa .slide-contenido { visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .slide picture, .slide .slide-velo { transition: none; }
}

.slide-contenido {
  position: relative; z-index: 2;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding-top: var(--header-h);
  max-width: var(--ancho);
}
.slide-eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-foto); margin-bottom: 14px;
}
.slide-titulo {
  font-size: clamp(32px, 5.2vw, 60px);
  font-weight: 800; color: #fff;
  max-width: 16ch; margin-bottom: 18px;
}
.slide-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  color: rgba(255,255,255,0.86);
  font-weight: 300; max-width: 46ch; margin-bottom: 32px;
}

/* Flechas */
.slider-flecha {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 50%; color: #fff; cursor: pointer;
  transition: background .22s, border-color .22s;
}
.slider-flecha:hover { background: var(--acento); border-color: var(--acento); }
.slider-flecha svg { width: 24px; height: 24px; stroke-width: 2; }
.slider-prev { left: 26px; }
.slider-next { right: 26px; }

/* Puntos */
.slider-puntos {
  position: absolute; bottom: 60px; left: 50%; transform: translateX(-50%);
  z-index: 5; display: flex; gap: 0;
}
/* El área táctil mide 44×44 aunque el punto visible siga siendo de 12.
   En móvil las flechas se ocultan, así que estos puntos son el control
   principal del carrusel: a 12px eran un cuarto del mínimo recomendado. */
.punto {
  width: 44px; height: 44px; padding: 0;
  background: none; border: none; cursor: pointer;
  display: grid; place-items: center;
}
.punto::before {
  content: '';
  width: 12px; height: 12px;
  border-radius: 50%;
  background: transparent; border: 2px solid rgba(255,255,255,0.75);
  transition: background .22s, border-color .22s, transform .22s;
}
.punto:hover::before { transform: scale(1.15); }
.punto[aria-current="true"]::before { background: var(--acento); border-color: var(--acento); }

/* Cobertura visible sin hacer scroll: responde "¿llegan a donde necesito?",
   que es la primera pregunta de un encargado de logística. */
.hero-cobertura {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: rgba(9,24,38,.82);
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,.12);
  padding: 11px 5%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px 18px; flex-wrap: wrap;
}
.hero-cobertura-eti {
  font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acento-foto);
}
.hero-cobertura ul {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px 16px; list-style: none; margin: 0; padding: 0;
}
.hero-cobertura li {
  font-size: 13.5px; color: #fff; position: relative;
}
.hero-cobertura li + li::before {
  content: '·'; position: absolute; left: -10px; color: rgba(255,255,255,.45);
}

/* ---------- 07. SECCIONES ---------- */
.seccion { padding: 100px 0; }
.seccion-clara  { background: var(--blanco); }
.seccion-gris   { background: var(--gris-50); }
.seccion-oscura { background: var(--azul-900); color: #fff; }

.seccion-encabezado { text-align: center; max-width: 780px; margin: 0 auto 56px; }
.seccion-encabezado-sm { margin-top: 76px; margin-bottom: 40px; }
.seccion-titulo { font-size: clamp(30px, 4vw, 46px); font-weight: 700; color: var(--azul-900); }
.seccion-titulo-sm { font-size: clamp(24px, 3vw, 34px); }
.seccion-oscura .seccion-titulo { color: #fff; }
.seccion-oscura .eyebrow { color: var(--acento-claro); }
.seccion-intro { margin-top: 22px; color: var(--texto-suave); font-size: 17px; font-weight: 300; }
/* Un párrafo largo centrado se lee peor: el ojo pierde dónde empieza cada
   renglón. El bloque sigue centrado, el texto va alineado a la izquierda. */
.seccion-intro.intro-larga { text-align: left; max-width: 64ch; margin-left: auto; margin-right: auto; }
.seccion-oscura .seccion-intro { color: var(--texto-claro); }

/* ---------- 07a. SEÑALES DE CONFIANZA ----------
   Un encargado de logística decide por confianza, no por precio. Estos
   son los únicos tres datos verificados que tiene la empresa hoy; la
   dirección y el horario entran aquí cuando el cliente los confirme. */
.franja-datos { background: var(--gris-50); border-bottom: 1px solid var(--gris-200); padding: 30px 0; }
.franja-datos-inner {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.dato-fuerte { display: flex; align-items: baseline; gap: 14px; justify-content: center; }
.dato-num {
  font-family: var(--f-titulo);
  font-size: clamp(34px, 4.2vw, 46px); font-weight: 800; line-height: 1;
  color: var(--acento); flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.dato-eti {
  display: flex; flex-direction: column;
  font-size: 14.5px; font-weight: 600; color: var(--azul-900); line-height: 1.3;
  max-width: 20ch;
}
.dato-eti small { font-size: 12.5px; font-weight: 400; color: var(--texto-suave); margin-top: 2px; }

/* ---------- 07b. FRANJA DE ESLOGAN ---------- */
.franja-eslogan { background: var(--acento); color: #fff; padding: 58px 0; }
.franja-inner { text-align: center; max-width: 860px; }
.franja-marca {
  display: inline-flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; margin-bottom: 20px;
  border: 2px solid rgba(255,255,255,.45);
  border-radius: 50%;
  color: #fff;
}
.franja-marca svg { width: 32px; height: 24px; }
.franja-texto {
  font-family: var(--f-titulo);
  font-size: clamp(21px, 3.1vw, 34px);
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255,255,255,.88);
}
.franja-texto em { font-style: normal; font-weight: 700; color: #fff; }

/* ---------- 08. TARJETAS ---------- */
.tarjeta {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 36px 30px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}
.tarjeta:hover { transform: translateY(-5px); box-shadow: var(--sombra-md); border-color: var(--gris-300); }
.tarjeta h3 { font-size: 22px; color: var(--azul-900); margin-bottom: 12px; }
.tarjeta h4 { font-size: 19px; color: var(--azul-900); margin-bottom: 10px; }
.tarjeta p { color: var(--texto-suave); font-size: 15px; font-weight: 300; }

.tarjeta-icono {
  display: flex; align-items: center; justify-content: center;
  width: 58px; height: 58px; margin-bottom: 22px;
  background: rgba(37,121,167,0.10);
  border-radius: var(--radio);
  color: var(--acento);
}
.tarjeta-icono svg { width: 28px; height: 28px; }
.tarjeta-icono-lg { width: 68px; height: 68px; }
.tarjeta-icono-lg svg { width: 38px; height: 34px; }

.mv-grid { margin-bottom: 4px; }
.tarjeta-mv { background: var(--gris-50); border-color: var(--gris-100); }
.tarjeta-valor { text-align: left; }
.tarjeta-valor .tarjeta-icono { margin-bottom: 18px; }

.tarjeta-equipo h3 { margin-bottom: 4px; }
.tarjeta p.tarjeta-etiqueta {
  font-size: 12px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--acento); margin-bottom: 14px;
}

/* ---------- 09. SERVICIOS ---------- */
.servicios-grid { gap: 32px; }
.tarjeta-servicio {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radio);
  padding: 44px 38px;
  transition: transform .25s, background .25s, border-color .25s;
}
.tarjeta-servicio:hover { transform: translateY(-5px); background: rgba(255,255,255,0.09); border-color: var(--acento); }
.tarjeta-servicio .tarjeta-icono { background: rgba(55,146,196,0.18); color: var(--acento-claro); }
.tarjeta-servicio h3 { font-size: 25px; color: #fff; margin-bottom: 14px; }
.tarjeta-servicio p { color: var(--texto-claro); font-size: 15.5px; font-weight: 300; margin-bottom: 24px; }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--acento-claro); text-decoration: none;
  padding: 11px 0;            /* 22 + 22 = 44px de alto tactil */
  margin-top: -11px;          /* sin alterar el ritmo vertical de la tarjeta */
}
.enlace-flecha svg { width: 19px; height: 19px; transition: transform .22s; }
.enlace-flecha:hover svg { transform: translateX(5px); }

/* ---------- 10. CONTACTO Y FORMULARIO ---------- */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 48px; align-items: start; }

.contacto-datos { display: flex; flex-direction: column; gap: 16px; }
.dato {
  display: flex; align-items: center; gap: 18px;
  padding: 20px 22px;
  background: var(--gris-50);
  border: 1px solid var(--gris-200);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  text-decoration: none; color: inherit;
  transition: transform .22s, box-shadow .22s;
}
a.dato:hover { transform: translateX(4px); box-shadow: var(--sombra); }
.dato-icono {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; flex-shrink: 0;
  background: rgba(37,121,167,0.10); border-radius: 50%; color: var(--acento);
}
.dato-icono svg { width: 22px; height: 22px; }
.dato-texto { display: flex; flex-direction: column; min-width: 0; }
.dato-texto small { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
.dato-texto strong { font-size: 16px; font-weight: 600; color: var(--azul-900); word-break: break-word; }

.formulario {
  background: var(--blanco);
  border: 1px solid var(--gris-200);
  border-radius: var(--radio);
  padding: 38px 34px;
  box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 18px;
}
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 7px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--azul-900); letter-spacing: .02em; }
.campo label span { color: var(--acento); }
.campo input, .campo textarea {
  font-family: var(--f-texto);
  font-size: 16px;                    /* 16px evita el auto-zoom de iOS Safari */
  color: var(--texto);
  padding: 13px 15px;
  background: var(--blanco);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
}
.campo input::placeholder, .campo textarea::placeholder { color: #A6B2BC; }
.campo input:focus, .campo textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px rgba(37,121,167,0.14);
}
.campo textarea { min-height: 128px; resize: vertical; }
.campo input[aria-invalid="true"], .campo textarea[aria-invalid="true"] { border-color: var(--error); }
.error { font-size: 12.5px; color: var(--error); }
.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.formulario-nota { font-size: 13px; color: var(--texto-suave); text-align: center; }
.formulario-nota a { display: inline-block; padding: 11px 2px; }  /* 22 + 22 = 44px táctil */
.btn[disabled] { opacity: .65; cursor: wait; }

/* ---------- 11. PIE DE PÁGINA ---------- */
.pie { background: var(--azul-900); color: var(--texto-claro); padding: 68px 0 0; }
.pie-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 44px; padding-bottom: 48px; }
.pie-col { display: flex; flex-direction: column; gap: 0; }
.pie-col > :not(a) + :not(a), .pie-col > a + :not(a) { margin-top: 11px; }
.logo-pie { margin-bottom: 8px; }
.logo-pie .logo-texto strong { color: #fff; }
.logo-pie .logo-marca { padding: 7px 10px; border-radius: 4px; }
.logo-pie .logo-marca img { height: 46px; }
.pie-desc { font-size: 14.5px; font-weight: 300; max-width: 380px; line-height: 1.75; }
.pie-eslogan {
  font-family: var(--f-titulo);
  font-size: 15px; font-weight: 600; font-style: italic;
  color: var(--acento-claro);
  max-width: 380px; line-height: 1.6; margin-top: 6px;
}
.pie-titulo {
  font-family: var(--f-texto);
  font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--acento-claro); margin-bottom: 6px;
}
.pie-col a {
  font-size: 14.5px; color: var(--texto-claro); text-decoration: none;
  transition: color .2s; width: fit-content; min-width: 44px;
  padding: 10px 0;            /* 25 + 20 = 45px, contra 25px antes */
}
.pie-col a:hover { color: var(--acento-claro); }
.pie-base {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
  padding-top: 24px; padding-bottom: 26px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 13px; color: rgba(255,255,255,0.58);
}

/* Crédito del desarrollador, enlazado a su sitio (mismo patrón que Innovacel) */
.pie-powered {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px;                 /* objetivo táctil, como el resto del pie */
  font-size: 13px; color: rgba(255,255,255,0.58);
  text-decoration: none;
  transition: color .25s ease;
}
.pie-powered picture { line-height: 0; }
.pie-powered img {
  width: 22px; height: auto; opacity: .85;
  transition: opacity .25s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.pie-powered strong { font-weight: 700; color: rgba(255,255,255,0.72); transition: color .25s ease; }
.pie-powered:hover { color: rgba(255,255,255,0.8); }
.pie-powered:hover strong { color: #fff; }
.pie-powered:hover img { opacity: 1; transform: scale(1.08); }

/* ---------- 12. WHATSAPP FLOTANTE ---------- */
/* Con etiqueta, no solo el icono: un circulo verde sin texto no dice
   que hace, y este es el canal donde la empresa cierra. */
.wa-flotante {
  position: fixed; right: 22px; bottom: 22px; z-index: 150;
  min-height: 52px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 20px 12px 16px;
  background: var(--whatsapp); color: #fff;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 6px 22px rgba(0,0,0,0.26);
  transition: transform .22s, box-shadow .22s, background .22s, opacity .3s, visibility .3s;
}
.wa-flotante svg { width: 26px; height: 26px; flex-shrink: 0; }
.wa-flotante-eti {
  font-size: 14.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap;
}
.wa-flotante:hover { background: var(--whatsapp-hover); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0,0,0,0.32); }
/* Mientras el hero esta a la vista sobra: ahi ya hay un boton de WhatsApp
   a tamaño completo, y en movil chocaba con la barra de cobertura.
   Visible por defecto: si el JS falla, queda como estaba. */
.wa-flotante--oculto { opacity: 0; visibility: hidden; pointer-events: none; }

/* ---------- 13. ANIMACIONES DE ENTRADA ---------- */
.revelar { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.revelar.visible { opacity: 1; transform: none; }
.revelar[data-retraso="1"] { transition-delay: .12s; }
.revelar[data-retraso="2"] { transition-delay: .24s; }
.revelar[data-retraso="3"] { transition-delay: .36s; }

/* ---------- 14. RESPONSIVE ---------- */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .contacto-grid { grid-template-columns: 1fr; gap: 36px; }
  .pie-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 940px) {
  :root { --top-h: 0px; --nav-h: 66px; }

  .barra-top { display: none; }           /* el contacto pasa al menú móvil */
  .btn-nav { display: none; }
  .hamburguesa { display: flex; }

  .menu {
    position: fixed; top: var(--nav-h); left: 0; right: 0;
    height: calc(100dvh - var(--nav-h));
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 14px 24px 40px;
    background: var(--blanco);
    transform: translateX(100%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
  }
  #cabecera.menu-abierto .menu { transform: translateX(0); }
  #cabecera.menu-abierto .nav { background: var(--blanco); box-shadow: 0 2px 16px rgba(14,36,56,.1); }
  #cabecera.menu-abierto .logo-texto strong { color: var(--azul-900); }
  #cabecera.menu-abierto .logo-texto small { color: var(--texto-suave); }

  .menu > li { border-bottom: 1px solid var(--gris-100); }
  .menu > li > a {
    display: block; padding: 17px 0;
    font-family: var(--f-titulo); font-size: 17px; font-weight: 600;
    color: var(--azul-900);
  }
  .menu > li > a::after { display: none; }
  .menu > li > a.activo { color: var(--acento); }

  .menu > li.menu-contacto-movil {
    display: flex; flex-direction: column; gap: 10px;
    border-bottom: none; margin-top: 26px;
  }
  .menu-contacto-movil a { font-size: 15px; color: var(--acento); text-decoration: none; font-weight: 500; }

  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .franja-datos-inner { grid-template-columns: 1fr; gap: 18px; }
  .dato-fuerte { justify-content: flex-start; }
  .dato-num { min-width: 84px; text-align: right; }
  .seccion { padding: 76px 0; }
  .slider-flecha { width: 44px; height: 44px; }
  .slider-prev { left: 12px; }
  .slider-next { right: 12px; }
}

@media (max-width: 640px) {
  .contenedor { padding: 0 20px; }
  .seccion { padding: 64px 0; }
  /* El logo ocupa más ancho que el chevron anterior: se reduce para no apretar la hamburguesa */
  .logo { gap: 9px; }
  .logo-marca { padding: 4px 6px; }
  .logo-marca img { height: 28px; }
  .franja-eslogan { padding: 46px 0; }
  .franja-marca { width: 54px; height: 54px; margin-bottom: 16px; }
  .seccion-encabezado { margin-bottom: 40px; }
  .seccion-encabezado-sm { margin-top: 56px; }
  .grid-4 { grid-template-columns: 1fr; }
  .hero { height: 100svh; min-height: 520px; }
  .slide-titulo { max-width: 100%; }
  .slide-sub { font-size: 16px; }
  .slider-flecha { display: none; }        /* en móvil se navega deslizando o con los puntos */
  .slider-puntos { bottom: 26px; }
  .campo-fila { grid-template-columns: 1fr; }
  .tarjeta, .tarjeta-servicio { padding: 30px 24px; }
  .formulario { padding: 28px 22px; }
  .pie-grid { grid-template-columns: 1fr; gap: 32px; }
  .pie-base { flex-direction: column; text-align: left; }
  .hero-cobertura { padding: 9px 5%; gap: 6px 12px; }
  .hero-cobertura-eti { display: none; }   /* los paises se explican solos */
  .hero-cobertura li { font-size: 12.5px; }
  .hero-cobertura ul { gap: 4px 13px; }
  .slider-puntos { bottom: 74px; }
  .wa-flotante { right: 14px; bottom: 14px; padding: 11px 18px 11px 14px; }
  .wa-flotante svg { width: 24px; height: 24px; }
  .wa-flotante-eti { font-size: 14px; }
  .btn { width: 100%; }
  .btn-nav { width: auto; }
}