/* ==========================================================================
   ZAMA MOBILITY — Layout: contenedor, header, navegación, hero, pie
   ========================================================================== */

/* ---------- Contenedor y rejillas ------------------------------------------ */
.contenedor {
  width: min(100% - 2.5rem, var(--ancho-contenido));
  margin-inline: auto;
}
@media (min-width: 768px) { .contenedor { width: min(100% - 4rem, var(--ancho-contenido)); } }

.contenedor-ancho { width: min(100% - 2.5rem, 1440px); margin-inline: auto; }

.seccion { padding-block: var(--seccion-y); }
.seccion--alt { background: var(--fondo-alt); }
.seccion--oscura {
  background:
    radial-gradient(120% 90% at 88% 6%, rgba(255,107,53,.16), transparent 55%),
    linear-gradient(160deg, var(--azul-800) 0%, var(--azul-900) 100%);
  color: var(--lino-100);
}
.seccion--oscura h1, .seccion--oscura h2, .seccion--oscura h3,
.seccion--oscura h4, .seccion--oscura h5 { color: var(--lino-000); }
.seccion--oscura p, .seccion--oscura li { color: #C6D6E8; }
.seccion--oscura .titulo-seccion__kicker { color: var(--naranja-400); }

.rejilla { display: grid; gap: var(--e-5); }
/* Dos columnas exactas: evita el patrón desbalanceado 3+1 con cuatro tarjetas */
.rejilla--2 { grid-template-columns: 1fr; }
@media (min-width: 820px) { .rejilla--2 { grid-template-columns: repeat(2, 1fr); } }
.rejilla--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.rejilla--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }

.dos-columnas {
  display: grid;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .dos-columnas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .dos-columnas--texto-ancho { grid-template-columns: 1.15fr 1fr; } }
.dos-columnas__media--primero { order: -1; }
@media (min-width: 900px) { .dos-columnas__media--primero { order: 0; } }

/* ---------- Encabezado de sección ------------------------------------------ */
.titulo-seccion { max-width: 60ch; margin-bottom: var(--e-7); }
.titulo-seccion--centrado { margin-inline: auto; text-align: center; }
.titulo-seccion__kicker {
  display: inline-block;
  font-size: var(--txt-sm);
  font-weight: var(--peso-bold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--acento-texto);
  margin-bottom: var(--e-3);
}
.titulo-seccion__kicker::before {
  content: ""; display: inline-block;
  width: 1.8rem; height: 2px; margin-right: .7rem;
  vertical-align: middle; background: var(--acento);
}
.titulo-seccion p { margin-top: var(--e-4); color: var(--texto-suave); font-size: var(--txt-lg); }
.seccion--oscura .titulo-seccion p { color: #B8CBE0; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.encabezado {
  position: sticky; top: 0;
  z-index: var(--z-nav);
  background: var(--header-fondo);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--header-borde);
  transition: box-shadow var(--t-media), background-color var(--t-media);
}
.encabezado[data-scroll="si"] { box-shadow: var(--sombra-2); }

.encabezado__barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e-4);
  min-height: 4.5rem;
}
@media (min-width: 1024px) { .encabezado__barra { min-height: 5.25rem; } }

.marca { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
/* Lockup horizontal (750×200): legible desde 34 px de alto */
.marca img { height: 2.2rem; width: auto; }
@media (min-width: 480px)  { .marca img { height: 2.5rem; } }
@media (min-width: 1024px) { .marca img { height: 2.9rem; } }
.marca__oscuro { display: none; }
[data-tema="oscuro"] .marca__claro { display: none; }
[data-tema="oscuro"] .marca__oscuro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .marca__claro { display: none; }
  :root:not([data-tema="claro"]) .marca__oscuro { display: block; }
}

/* ---------- Navegación principal ------------------------------------------- */
.nav { display: none; }
@media (min-width: 1024px) {
  .nav { display: flex; align-items: center; gap: var(--e-1); }
}
.nav__enlace {
  position: relative;
  display: block;
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  font-size: var(--txt-sm);
  font-weight: var(--peso-semibold);
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--t-rapida), background-color var(--t-rapida);
}
.nav__enlace::after {
  content: ""; position: absolute;
  left: var(--e-3); right: var(--e-3); bottom: .35rem;
  height: 2px; background: var(--acento);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-media);
}
.nav__enlace:hover { color: var(--acento-texto); background: var(--acento-suave); }
.nav__enlace:hover::after,
.nav__enlace[aria-current="page"]::after { transform: scaleX(1); }
.nav__enlace[aria-current="page"] { color: var(--acento-texto); }

/* Submenú desplegable */
.nav__grupo { position: relative; }
.nav__disparador {
  display: inline-flex; align-items: center; gap: .35rem;
  background: none; border: 0; cursor: pointer;
}
.nav__disparador svg { transition: transform var(--t-rapida); width: .7rem; height: .7rem; }
.nav__disparador[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav__submenu {
  position: absolute; top: calc(100% + .5rem); left: 0;
  min-width: 16rem;
  display: grid; gap: 2px;
  padding: var(--e-2);
  background: var(--superficie);
  border: 1px solid var(--borde-suave);
  border-radius: var(--r-md);
  box-shadow: var(--sombra-3);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-rapida), transform var(--t-rapida), visibility var(--t-rapida);
}
.nav__grupo:hover .nav__submenu,
.nav__disparador[aria-expanded="true"] + .nav__submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav__submenu a {
  display: block; padding: var(--e-3);
  border-radius: var(--r-sm);
  font-size: var(--txt-sm); font-weight: var(--peso-medium);
  color: var(--texto); text-decoration: none;
}
.nav__submenu a small { display: block; color: var(--texto-tenue); font-size: var(--txt-xs); font-weight: 400; }
.nav__submenu a:hover { background: var(--acento-suave); color: var(--acento-texto); }

.encabezado__acciones { display: flex; align-items: center; gap: var(--e-2); }
.encabezado__cta { display: none; }
@media (min-width: 1024px) { .encabezado__cta { display: inline-flex; } }

/* ---------- Botón hamburguesa ---------------------------------------------- */
.hamburguesa {
  display: inline-grid; place-items: center;
  width: 2.9rem; height: 2.9rem;
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: var(--r-md);
  cursor: pointer;
}
@media (min-width: 1024px) { .hamburguesa { display: none; } }
.hamburguesa span {
  display: block; width: 1.15rem; height: 2px; border-radius: 2px;
  background: var(--texto);
  transition: transform var(--t-media), opacity var(--t-rapida);
}
.hamburguesa span + span { margin-top: 4px; }
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Menú móvil ------------------------------------------------------ */
.menu-movil {
  position: fixed; inset: 4.5rem 0 0 0;
  z-index: var(--z-nav);
  display: grid; align-content: start; gap: var(--e-1);
  padding: var(--e-5) 1.25rem var(--e-9);
  background: var(--fondo);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--t-media), visibility var(--t-media);
}
.menu-movil[data-abierto="si"] { transform: translateX(0); visibility: visible; }
@media (min-width: 1024px) { .menu-movil { display: none; } }
.menu-movil a {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--e-4) var(--e-3);
  border-bottom: 1px solid var(--borde-suave);
  font-size: var(--txt-lg); font-weight: var(--peso-semibold);
  color: var(--texto); text-decoration: none;
}
.menu-movil a[aria-current="page"] { color: var(--acento-texto); }
.menu-movil a span { color: var(--texto-tenue); font-size: var(--txt-sm); font-weight: 400; }
.menu-movil .btn { margin-top: var(--e-5); justify-content: center; }
body[data-menu="abierto"] { overflow: hidden; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(3.5rem, 3rem + 7vw, 8rem);
  background:
    radial-gradient(110% 80% at 85% 10%, rgba(255,107,53,.22), transparent 58%),
    radial-gradient(90% 70% at 5% 95%, rgba(19,64,116,.55), transparent 60%),
    linear-gradient(155deg, var(--azul-800) 0%, var(--azul-900) 100%);
  color: var(--lino-100);
  overflow: hidden;
}
.hero::after { /* trama sutil, no distrae la lectura */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(238,244,248,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(238,244,248,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(80% 80% at 50% 40%, #000, transparent 78%);
}
.hero h1 { color: #FFFFFF; }
.hero h1 em {
  font-style: normal;
  color: var(--naranja-400);
  display: block;
}
.hero__texto { max-width: 34ch; }
.hero__descripcion {
  margin-top: var(--e-5);
  font-size: var(--txt-lg);
  color: #C6D6E8;
  max-width: 52ch;
}
.hero__acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-7); }
.hero__marca-agua {
  position: absolute; right: -8%; bottom: -14%;
  width: min(52vw, 620px); opacity: .07; z-index: -1;
  pointer-events: none;
}
.hero__datos {
  display: grid; grid-template-columns: repeat(2, 1fr); /* 2×2 equilibrado */
  gap: var(--e-5); margin-top: var(--e-8);
  padding-top: var(--e-6);
  border-top: 1px solid rgba(238,244,248,.16);
}
.hero__dato strong {
  display: block;
  font-size: var(--txt-2xl); font-weight: var(--peso-black);
  color: var(--naranja-400); line-height: 1.1;
}
.hero__dato span { font-size: var(--txt-sm); color: #A9BFD6; }

/* Hero compacto para páginas internas */
.hero--interno { padding-block: clamp(2.75rem, 2rem + 5vw, 5.5rem); }
.hero--interno .hero__texto { max-width: 46ch; }

/* ---------- Migas de pan ---------------------------------------------------- */
.migas { font-size: var(--txt-sm); color: #A9BFD6; margin-bottom: var(--e-4); }
.migas ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.migas li + li::before { content: "›"; margin-right: .45rem; opacity: .6; }
.migas a { color: #C6D6E8; text-decoration: none; }
.migas a:hover { color: var(--naranja-400); }
.migas [aria-current="page"] { color: #FFFFFF; font-weight: var(--peso-semibold); }

/* ==========================================================================
   PIE DE PÁGINA
   ========================================================================== */
.pie {
  background: var(--azul-900);
  color: #B8CBE0;
  padding-block: var(--e-9) var(--e-5);
  font-size: var(--txt-sm);
}
.pie a { color: #B8CBE0; text-decoration: none; }
.pie a:hover { color: var(--naranja-400); }
.pie h3 {
  color: #FFFFFF; font-size: var(--txt-sm);
  text-transform: uppercase; letter-spacing: .14em;
  margin-bottom: var(--e-4);
}
.pie__rejilla {
  display: grid; gap: var(--e-7);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.pie__marca { grid-column: 1 / -1; }
@media (min-width: 900px) { .pie__marca { grid-column: auto; max-width: 26rem; } }
.pie__marca img { height: 3.2rem; width: auto; margin-bottom: var(--e-5); }
.pie ul { list-style: none; padding: 0; display: grid; gap: var(--e-3); }
.pie__legal {
  margin-top: var(--e-8); padding-top: var(--e-5);
  border-top: 1px solid rgba(238,244,248,.12);
  display: flex; flex-wrap: wrap; gap: var(--e-4);
  align-items: center; justify-content: space-between;
  font-size: var(--txt-xs); color: #8CA3BD;
}
.pie__legal nav { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.pie__aviso {
  margin-top: var(--e-5);
  font-size: var(--txt-xs); color: #7F97B2; line-height: 1.65;
  max-width: 92ch;
}

/* ---------- Redes sociales -------------------------------------------------- */
.redes { display: flex; gap: var(--e-3); }
.redes a {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem;
  border: 1px solid rgba(238,244,248,.2);
  border-radius: var(--r-md);
  transition: background-color var(--t-rapida), border-color var(--t-rapida), transform var(--t-rapida);
}
.redes a:hover {
  background: var(--naranja-500);
  border-color: var(--naranja-500);
  transform: translateY(-2px);
}
.redes a:hover svg { fill: var(--azul-900); }
.redes svg { width: 1.15rem; height: 1.15rem; fill: #C6D6E8; transition: fill var(--t-rapida); }

/* ==========================================================================
   ACCIONES FLOTANTES (WhatsApp + volver arriba)
   ========================================================================== */
.acciones-flotantes {
  position: fixed;
  right: clamp(1rem, 3vw, 1.75rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  z-index: var(--z-flotante);
  display: grid; gap: var(--e-3); justify-items: end;
}
.fab {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border: 0; border-radius: var(--r-full);
  cursor: pointer;
  box-shadow: var(--sombra-3);
  transition: transform var(--t-rapida), box-shadow var(--t-rapida), opacity var(--t-media);
}
.fab:hover { transform: translateY(-3px) scale(1.04); }
.fab svg { width: 1.7rem; height: 1.7rem; }
.fab--whatsapp { background: #25D366; }
.fab--whatsapp svg { fill: #0A2E17; }
.fab--arriba {
  width: 2.9rem; height: 2.9rem;
  background: var(--superficie);
  border: 1px solid var(--borde);
  color: var(--texto);
  opacity: 0; pointer-events: none;
}
.fab--arriba svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.fab--arriba[data-visible="si"] { opacity: 1; pointer-events: auto; }