/* =====================================================================
   MOURA Y MATEO — Estilos propios
   Stack: HTML + Tailwind (CDN) + JS vanilla. Sin build.
   Tokens de marca en :root. Tailwind config (colores/fuentes) en index.html.
   Concepto visual: "Corriente" — hero oscuro con haces de energía (aurora)
   en azul eléctrico + amarillo, secciones alternadas claro/oscuro.
   ===================================================================== */

:root {
  /* Marca */
  --carbon:   #070B16;   /* base ultra oscura del hero (drama del aurora) */
  --carbon-2: #0B1220;
  --panel:    #0F1B33;
  --blue:     #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --energy:   #FACC15;
  --wa:       #25D366;
  --wa-900:   #06351B;
  --surface:  #F8FAFC;
  --ink:      #0F172A;

  /* Aurora */
  --beam-blue:   rgba(59, 130, 246, 0.9);
  --beam-yellow: rgba(250, 204, 21, 0.9);
  --glow-blue:   rgba(37, 99, 235, 0.55);

  --radius: 18px;
  --maxw: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { overflow-x: clip; }

/* Accesibilidad: link de salto */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--energy); color: var(--ink); font-weight: 700;
  padding: .65rem 1rem; border-radius: 0 0 12px 0;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--energy);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Barra de progreso de scroll */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--energy));
  z-index: 60; transition: width .1s linear;
}

/* =====================================================================
   AURORA HERO — haces de energía que suben (vanilla, adaptado)
   ===================================================================== */
.scene {
  position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(37,99,235,.22), transparent 60%),
    radial-gradient(80% 60% at 50% -10%, rgba(250,204,21,.06), transparent 60%),
    var(--carbon);
  z-index: 0;
}

/* Piso reticulado en perspectiva */
.scene .floor {
  position: absolute; left: 50%; bottom: -10%;
  width: 220%; height: 60%;
  transform: translateX(-50%) perspective(540px) rotateX(68deg);
  transform-origin: bottom center;
  background-image:
    linear-gradient(rgba(59,130,246,.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.18) 1px, transparent 1px);
  background-size: 80px 40px;
  mask-image: radial-gradient(120% 80% at 50% 100%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 80% at 50% 100%, #000 30%, transparent 75%);
  animation: moveGrid 6s linear infinite;
}

/* Glow del piso (centro de energía) */
.scene .floor::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 60%; height: 50%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, var(--glow-blue), transparent 70%);
  filter: blur(40px);
  animation: floorGlow 5s ease-in-out infinite;
}

/* Columna/halo central */
.scene .main-column {
  position: absolute; left: 50%; bottom: 0;
  transform: translateX(-50%);
  width: min(620px, 80%); height: 78%;
  background: radial-gradient(closest-side, rgba(37,99,235,.30), transparent 72%);
  filter: blur(22px);
  animation: mainGlow 4s ease-in-out infinite alternate;
}

.light-stream-container { position: absolute; inset: 0; }

.light-beam {
  position: absolute; bottom: 0;
  height: 42vh; border-radius: 99px;
  background: linear-gradient(to top, var(--beam-blue), transparent);
  box-shadow: 0 0 12px rgba(59,130,246,.55);
  opacity: 0;
  animation-name: rise, fade;
  animation-timing-function: ease-out, ease-in-out;
  animation-iteration-count: infinite, infinite;
  will-change: transform, opacity;
}
.light-beam.is-energy {
  background: linear-gradient(to top, var(--beam-yellow), transparent);
  box-shadow: 0 0 12px rgba(250,204,21,.5);
}

@keyframes rise {
  0%   { transform: translateY(20%); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(-110%); opacity: 0; }
}
@keyframes fade { 0%,100% { opacity: 0; } 5%,80% { opacity: .8; } }
@keyframes floorGlow {
  0%,100% { transform: translateX(-50%) scale(.9); opacity: .65; }
  50%     { transform: translateX(-50%) scale(1.1); opacity: 1; }
}
@keyframes mainGlow {
  from { opacity: .5; filter: blur(26px); }
  to   { opacity: .8; filter: blur(16px); }
}
@keyframes moveGrid { from { background-position: 0 0; } to { background-position: -80px -40px; } }

/* viñeta superior para que el header respire */
.hero-vignette {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,11,22,.85) 0%, transparent 22%, transparent 60%, rgba(7,11,22,.9) 100%);
}

/* =====================================================================
   HEADER
   ===================================================================== */
/* Píldora flotante translúcida (estado por defecto, arriba) */
.header-bar {
  width: calc(100% - 32px); max-width: var(--maxw); margin: 14px auto 0;
  border-radius: 999px;
  background: rgba(11,18,32,.55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 14px 36px rgba(0,0,0,.28);
  transition: width .4s ease, max-width .4s ease, margin .4s ease, border-radius .4s ease, box-shadow .4s ease;
}
.header-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 14px 0 22px; }
.header-inner nav { height: 60px; }

/* Al scrollear: barra completa, misma transparencia.
   Se mantiene el centrado (margin auto) y se anima max-width entre px
   para que crezca/achique simétrico desde el centro (sin "salto" lateral). */
#site-header.is-solid .header-bar {
  width: 100%; max-width: 3000px; margin: 0 auto;
  border-radius: 0; border-left: 0; border-right: 0; border-top: 0;
  box-shadow: 0 8px 30px rgba(0,0,0,.25);
}

/* Wordmark */
.wordmark { display: inline-flex; align-items: center; gap: .6rem; }
.wordmark .mark {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: linear-gradient(135deg, var(--blue-600), var(--blue-700));
  box-shadow: 0 6px 18px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.25);
  color: var(--energy);
}
.wordmark .mark svg { width: 20px; height: 20px; }
.wordmark .name {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: .04em; line-height: 1; color: #fff;
  font-size: 1.02rem;
}
.wordmark .name b { color: var(--energy); font-weight: 700; }
.wordmark .sub {
  display: block; font-size: .58rem; letter-spacing: .26em;
  text-transform: uppercase; color: #93a4c4; margin-top: 3px; font-weight: 600;
}

.nav-link {
  position: relative; color: #e2e8f0; font-family: 'Bebas Neue', sans-serif;
  font-size: 1.32rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1;
  transition: color .2s; padding: .3rem 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0;
  background: var(--energy); transition: width .25s ease;
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after { width: 100%; }

/* Links del menú mobile con la misma presencia */
.mobile-link {
  font-family: 'Bebas Neue', sans-serif; font-size: 1.5rem; letter-spacing: .05em;
  text-transform: uppercase; color: #e2e8f0; line-height: 1.2;
}

/* Botón "¿Tenés dudas?" → FAQ */
.btn-dudas {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: 'Bebas Neue', sans-serif; font-size: 1.18rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--energy); line-height: 1;
  border: 1px solid rgba(250,204,21,.4); background: rgba(250,204,21,.08);
  border-radius: 999px; padding: .55rem 1.1rem;
  transition: background .2s, border-color .2s, transform .2s;
}
.btn-dudas svg { width: 18px; height: 18px; }
.btn-dudas:hover { background: rgba(250,204,21,.16); border-color: rgba(250,204,21,.75); transform: translateY(-2px); }

/* =====================================================================
   BOTONES
   ===================================================================== */
.btn { cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.btn-wa { background: var(--wa); color: var(--wa-900); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(37,211,102,.35); }
.btn-ghost { transition: background .2s, border-color .2s, transform .2s; }
.btn-ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.35); transform: translateY(-2px); }
.btn-blue { background: var(--blue-600); color: #fff; transition: transform .2s, box-shadow .2s; }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37,99,235,.4); }

/* =====================================================================
   TIPOGRAFÍA DE SECCIONES
   ===================================================================== */
.section-eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Space Grotesk', sans-serif; font-weight: 600;
  font-size: .72rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--blue-600);
}
.section-eyebrow::before {
  content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px;
}
.section-eyebrow.center { justify-content: center; }
.section-eyebrow.on-dark { color: var(--energy); }

.section-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.9rem, 4vw, 2.85rem); line-height: 1.08; color: var(--ink);
  letter-spacing: -.02em;
}
.section-title.on-dark { color: #fff; }

/* =====================================================================
   REVEAL (IntersectionObserver) — fallback seguro sin JS
   ===================================================================== */
.js [data-reveal] { opacity: 0; transform: translateY(28px); }
.js [data-reveal].in {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}

/* Reveal lateral: entra desde la izquierda o la derecha (FAQ en 2 columnas) */
.js [data-reveal-x] { opacity: 0; }
.js [data-reveal-x="left"]  { transform: translateX(-44px); }
.js [data-reveal-x="right"] { transform: translateX(44px); }
.js [data-reveal-x].in {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}

/* =====================================================================
   STAT BAND (banda de confianza tras el hero)
   ===================================================================== */
.stat-band {
  background: linear-gradient(180deg, var(--carbon-2), var(--panel));
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.stat-cell { text-align: center; padding: 1.4rem .5rem; position: relative; }
.stat-cell:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 22%; height: 56%; width: 1px;
  background: rgba(255,255,255,.1);
}
.stat-num {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1; color: #fff;
}
.stat-num .u { color: var(--energy); }
.stat-num .b { color: var(--blue); }
.stat-label { margin-top: .45rem; font-size: .8rem; color: #94a3b8; letter-spacing: .02em; }

/* =====================================================================
   BENTO / TARJETAS
   ===================================================================== */
.glass-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius);
  transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.glass-card:hover {
  transform: translateY(-6px);
  border-color: rgba(250,204,21,.4);
  background: rgba(255,255,255,.06);
}

/* Servicios */
.service-card {
  position: relative; padding: 2rem 1.7rem 1.9rem;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .3s ease, border-color .3s ease, background .3s;
}
.service-card::before {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .35s;
  background: radial-gradient(140% 120% at 0% 0%, rgba(37,99,235,.18), transparent 55%);
}
.service-card:hover { transform: translateY(-8px); border-color: rgba(59,130,246,.45); }
.service-card:hover::before { opacity: 1; }
/* Estado activo (mobile: al aparecer en pantalla o al tocar) */
.js .service-card.is-active { transform: translateY(-8px); border-color: rgba(59,130,246,.45); }
.service-card.is-active::before { opacity: 1; }
.service-step {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 3rem;
  line-height: 1; color: rgba(255,255,255,.08); position: absolute; top: 1rem; right: 1.2rem;
}
.service-icon {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(250,204,21,.18));
  border: 1px solid rgba(255,255,255,.12); color: var(--energy); margin-bottom: 1.1rem;
}
.service-icon svg { width: 26px; height: 26px; }
.service-title {
  font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.25rem;
  color: #fff; margin-bottom: .55rem;
}
.service-text { color: #aab6cc; font-size: .95rem; line-height: 1.6; position: relative; }

/* Tarjeta de rating flotante (Nosotros) */
.float-card {
  position: absolute; background: #fff; border-radius: 16px; padding: 1rem 1.2rem;
  box-shadow: 0 20px 50px rgba(15,23,42,.18); border: 1px solid #eef2f7;
}

/* =====================================================================
   NOSOTROS — Tarjeta premium 3D + mockup de iPhone (adaptación vanilla
   del componente "cinematic hero": brillo que sigue el mouse, materiales
   skeuomórficos, badges de vidrio, anillo de progreso).
   ===================================================================== */
.premium-card {
  position: relative; border-radius: 36px; overflow: hidden;
  background: linear-gradient(145deg, #162C6D 0%, #0A101D 100%);
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,.55),
    0 20px 40px -20px rgba(0,0,0,.5),
    inset 0 1px 2px rgba(255,255,255,.18),
    inset 0 -2px 4px rgba(0,0,0,.7);
  border: 1px solid rgba(255,255,255,.06);
}
/* Variante full-bleed: ocupa todo el ancho/alto de la sección */
.premium-card.is-full { border-radius: 0; border-left: 0; border-right: 0; }
.card-sheen {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(700px circle at var(--mouse-x,50%) var(--mouse-y,30%), rgba(255,255,255,.07), transparent 45%);
  mix-blend-mode: screen;
}
.card-watermark {
  position: absolute; top: -.1em; left: 50%; transform: translateX(-50%);
  z-index: 0; pointer-events: none; text-align: center;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; letter-spacing: -.05em; line-height: 1;
  font-size: clamp(4rem, 13vw, 10rem); color: rgba(255,255,255,.035); white-space: nowrap;
}
.card-watermark .wm-mateo { color: rgba(248,113,113,.07); }

/* Texto dentro de la tarjeta */
.card-list li { display: flex; align-items: center; gap: .65rem; color: rgba(219,234,254,.85); }
.card-list svg { width: 20px; height: 20px; color: var(--energy); flex: none; }

/* Botón táctil claro (estilo "App Store") */
.btn-light {
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%); color: #0F172A;
  box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.1), 0 12px 24px -4px rgba(0,0,0,.3),
              inset 0 1px 1px rgba(255,255,255,1), inset 0 -3px 6px rgba(0,0,0,.06);
  transition: transform .35s cubic-bezier(.25,1,.5,1), box-shadow .35s;
}
.btn-light:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(0,0,0,.05), 0 6px 12px -2px rgba(0,0,0,.15), 0 20px 32px -6px rgba(0,0,0,.4), inset 0 1px 1px rgba(255,255,255,1); }
.btn-light:active { transform: translateY(1px); background: linear-gradient(180deg, #F1F5F9 0%, #E2E8F0 100%); }

/* ---------- Mockup de iPhone ---------- */
.phone-stage {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 540px; perspective: 1100px;
}
.iphone {
  position: relative; width: 268px; height: 558px; border-radius: 46px; background: #111;
  transform-style: preserve-3d; transition: transform .25s ease-out; will-change: transform;
  box-shadow: inset 0 0 0 2px #52525B, inset 0 0 0 7px #000,
              0 40px 80px -15px rgba(0,0,0,.7), 0 15px 25px -5px rgba(0,0,0,.6);
}
.hardware-btn { position: absolute; z-index: 0; border-radius: 3px;
  background: linear-gradient(90deg, #404040 0%, #171717 100%);
  box-shadow: -2px 0 5px rgba(0,0,0,.8), inset -1px 0 1px rgba(255,255,255,.15), inset 1px 0 2px rgba(0,0,0,.8); }
.iphone-screen {
  position: absolute; inset: 7px; border-radius: 40px; overflow: hidden; color: #0F172A;
  background: #FFFFFF;
}
.screen-glare { display: none; }
.notch {
  position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
  width: 98px; height: 26px; background: #000; border-radius: 999px; z-index: 50;
  display: flex; align-items: center; justify-content: flex-end; padding-right: 12px;
}
.notch .dot { width: 6px; height: 6px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,.8); animation: livePulse 1.8s ease-out infinite; }
@keyframes livePulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }

.screen-ui { position: relative; height: 100%; padding: 46px 20px 22px; display: flex; flex-direction: column; }
.screen-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.screen-eyebrow { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #94a3b8; font-weight: 700; }
.screen-h { font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: #0F172A; }
.screen-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: .8rem; color: #475569; background: #F1F5F9;
  border: 1px solid #E2E8F0; box-shadow: 0 4px 10px rgba(15,23,42,.08); }

.screen-hero-img { display: flex; align-items: center; justify-content: center; margin: .5rem auto .4rem; }
.screen-hero-img img { width: 100%; max-width: 220px; height: auto; object-fit: contain; }
.screen-hero-cap { text-align: center; font-size: 8px; letter-spacing: .12em; text-transform: uppercase;
  color: #94a3b8; font-weight: 700; margin: 0 0 1.4rem; }

.ring-wrap { position: relative; width: 168px; height: 168px; margin: 0 auto 1.6rem;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,.8)); }
.ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-bg { fill: none; stroke: rgba(255,255,255,.05); stroke-width: 12; }
.ring-fg { fill: none; stroke: #3B82F6; stroke-width: 12; stroke-linecap: round;
  stroke-dasharray: 402; stroke-dashoffset: 402; transition: stroke-dashoffset 1.8s cubic-bezier(.22,.61,.36,1); }
.ring-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.ring-num { font-size: 2.3rem; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.ring-num .pct { font-size: 1.2rem; color: #93c5fd; }
.ring-label { font-size: 8px; letter-spacing: .12em; text-transform: uppercase; color: rgba(147,197,253,.55); font-weight: 700; margin-top: .35rem; }

.screen-widgets { display: flex; flex-direction: column; gap: .65rem; }
.widget { display: flex; align-items: center; gap: .7rem; border-radius: 16px; padding: .6rem .7rem;
  background: #FFFFFF; border: 1px solid #EEF2F7; }
.widget .w-ico { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.widget .w-ico svg { width: 18px; height: 18px; }
.widget .w-t { font-size: .82rem; font-weight: 600; color: #0F172A; }
.widget .w-s { font-size: .7rem; color: #64748B; }
.home-indicator { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px; border-radius: 999px; background: rgba(15,23,42,.18); }

/* ---------- Badges de vidrio flotantes ---------- */
.ui-badge {
  position: absolute; z-index: 30; display: flex; align-items: center; gap: .7rem;
  border-radius: 16px; padding: .65rem .8rem;
  background: linear-gradient(135deg, rgba(255,255,255,.09) 0%, rgba(255,255,255,.02) 100%);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 25px 50px -12px rgba(0,0,0,.6), inset 0 1px 1px rgba(255,255,255,.2);
}
.ui-badge .b-ico { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.ui-badge .b-ico svg { width: 18px; height: 18px; }
.ui-badge .b-t { font-size: .85rem; font-weight: 700; color: #fff; line-height: 1.1; }
.ui-badge .b-s { font-size: .72rem; color: rgba(191,219,254,.6); }
.ui-badge-tl { top: 14px; left: 4px; }
.ui-badge-br { bottom: 70px; right: 4px; }
@media (min-width: 1024px) { .ui-badge-tl { left: -28px; } .ui-badge-br { right: -28px; } }

@media (prefers-reduced-motion: reduce) {
  .notch .dot { animation: none; }
  .iphone { transition: none; }
}

/* Tarjetas de contacto */
.contact-card {
  display: flex; align-items: center; gap: 1rem; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 1rem 1.2rem;
  transition: transform .25s, border-color .25s, background .25s;
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(250,204,21,.4); background: rgba(255,255,255,.07); }
.contact-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; flex: none; }
.contact-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: #8aa0c0; }
.contact-value { display: block; color: #fff; font-weight: 600; margin-top: 2px; }

/* =====================================================================
   MARQUEE (diferenciales + marcas)
   ===================================================================== */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
           mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: 3rem; width: max-content; animation: scrollX 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scrollX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.diff-item {
  display: inline-flex; align-items: center; gap: .65rem; white-space: nowrap;
  font-family: 'Space Grotesk', sans-serif; font-weight: 500; color: #cdd8ec; font-size: 1rem;
}
.diff-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
            background: rgba(59,130,246,.15); color: var(--energy); }
.diff-ico svg { width: 18px; height: 18px; }

#brand-marquee { gap: 0; }
.brand-item { flex: 0 0 auto; display: flex; align-items: center; padding: 0 2.6rem; }
.brand-item img { height: 124px; width: auto; max-width: 380px; object-fit: contain;
                  opacity: .9; transition: transform .3s ease, opacity .3s ease; }
.brand-item img:hover { opacity: 1; transform: scale(1.08); }
@media (max-width: 640px) { .brand-item { padding: 0 1.6rem; } .brand-item img { height: 110px; } }

/* Baterías que trabajamos (Moura + Mateo) */
.battery-brands { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem; }
.battery-brand {
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #eef2f7; border-radius: 22px;
  padding: 2.2rem 3.4rem; min-width: 320px; min-height: 200px;
  box-shadow: 0 12px 32px rgba(15,23,42,.06);
  transition: transform .25s ease, box-shadow .25s ease;
}
.battery-brand:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(15,23,42,.1); }
.battery-brand img { height: 112px; width: auto; max-width: 440px; object-fit: contain; }
.battery-brand img.logo-mateo { height: 84px; }   /* acorde visual con Moura */
@media (max-width: 639px) {
  .battery-brand { min-width: 0; width: 100%; padding: 1.6rem 1.5rem; min-height: 150px; }
  .battery-brand img { height: 88px; }
  .battery-brand img.logo-mateo { height: 66px; }
}

/* =====================================================================
   BANDA "A DOMICILIO"
   ===================================================================== */
.domicilio-band { position: relative; overflow: hidden; }
.domicilio-bg {
  position: absolute; inset: -10% 0; background-image: url('../assets/img/domicilio.webp');
  background-size: cover; background-position: center; transform: scale(1.05);
}
.domicilio-overlay { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7,11,22,.78), rgba(11,18,32,.88)); }

/* Banda "A domicilio" v2 — sin foto: grilla + glow + 3 pasos */
.cta-band {
  position: relative; overflow: hidden;
  background: radial-gradient(120% 100% at 50% 0%, #0F1B33 0%, #070B16 70%);
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
/* Banda fija + secciones siguientes que la tapan: SOLO en escritorio.
   En móvil queda estática (sin el "freno" del sticky al scrollear). */
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .cta-band {
    position: sticky; top: 0; z-index: 0;
    min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
  }
  .cta-band ~ section { position: relative; z-index: 1; }
}
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .6;
  background-image:
    linear-gradient(rgba(59,130,246,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(59,130,246,.07) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 35%, #000 30%, transparent 78%);
}
.cta-band::after {
  content: ""; position: absolute; left: 50%; top: -12%; transform: translateX(-50%);
  width: 62%; height: 60%; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(37,99,235,.28), transparent 70%);
  filter: blur(46px);
}

.steps-row { display: flex; align-items: stretch; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.step {
  position: relative; flex: 1 1 0; min-width: 250px; max-width: 350px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 20px;
  padding: 2rem 1.8rem; transition: transform .3s ease, border-color .3s ease, background .3s ease;
}
.step:hover { transform: translateY(-6px); border-color: rgba(250,204,21,.4); background: rgba(255,255,255,.06); }
.step-num { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 2.8rem;
  line-height: 1; letter-spacing: .02em; color: var(--energy); display: block; }
.step-ico { width: 64px; height: 64px; border-radius: 16px; display: grid; place-items: center; margin: .9rem 0 1.1rem;
  background: linear-gradient(135deg, rgba(37,99,235,.25), rgba(250,204,21,.18));
  border: 1px solid rgba(255,255,255,.12); color: var(--energy); }
.step-ico svg { width: 30px; height: 30px; }
.step-t { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.32rem; color: #fff; margin-bottom: .5rem; }
.step-s { color: #aab6cc; font-size: 1.02rem; line-height: 1.55; }
/* Flecha entre pasos (solo desktop) */
.step-arrow { display: none; align-items: center; color: rgba(255,255,255,.25); flex: 0 0 auto; }
.step-arrow svg { width: 26px; height: 26px; }
@media (min-width: 900px) { .step-arrow { display: flex; } }

/* =====================================================================
   OPINIONES (carrusel)
   ===================================================================== */
.reviews-viewport { overflow: hidden; }
.reviews-track { display: flex; gap: 1.25rem; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.review-card {
  flex: 0 0 calc(25% - .94rem); background: #fff; border: 1px solid #eef2f7;
  border-radius: 16px; padding: 1.4rem; box-shadow: 0 10px 30px rgba(15,23,42,.06);
  display: flex; flex-direction: column; gap: .85rem;
}
@media (max-width: 1023px) { .review-card { flex-basis: calc(50% - .63rem); } }
@media (max-width: 639px)  { .review-card { flex-basis: calc(100% - 0px); } }
.review-head { display: flex; align-items: center; gap: .75rem; }
.review-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
                 color: #fff; font-weight: 700; font-size: .9rem; flex: none; }
.review-name { font-weight: 700; color: var(--ink); font-size: .95rem; }
.review-meta { font-size: .78rem; color: #94a3b8; }
.review-stars { color: var(--energy); letter-spacing: 1px; }
.review-text { color: #475569; font-size: .92rem; line-height: 1.6; }

.reviews-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1.8rem; }
.rev-arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: #fff; border: 1px solid #e2e8f0; color: var(--ink); cursor: pointer;
  box-shadow: 0 6px 16px rgba(15,23,42,.08); transition: transform .2s, background .2s, color .2s; }
.rev-arrow:hover { transform: translateY(-2px); background: var(--blue-600); color: #fff; }
.reviews-dots { display: flex; gap: .5rem; }
.reviews-dots button { width: 8px; height: 8px; border-radius: 99px; background: #cbd5e1; border: 0; cursor: pointer; transition: width .25s, background .25s; }
.reviews-dots button.active { width: 26px; background: var(--blue-600); }

.reviews-badge { display: inline-flex; align-items: center; gap: .8rem;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 16px; padding: .85rem 1.2rem;
  box-shadow: 0 8px 24px rgba(15,23,42,.06); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq-item { background: #fff; border: 1px solid #e8edf3; border-radius: 14px; overflow: hidden;
  transition: border-color .2s, box-shadow .2s; }
.faq-item[open] { border-color: rgba(37,99,235,.4); box-shadow: 0 8px 24px rgba(37,99,235,.08); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.3rem; font-weight: 600; color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  font-family: 'Space Grotesk', sans-serif;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; flex: none; width: 11px; height: 11px; border-right: 2px solid var(--blue-600);
  border-bottom: 2px solid var(--blue-600); transform: rotate(45deg); transition: transform .25s; margin-right: 4px;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }
.faq-a { padding: 0 1.3rem 1.2rem; color: #475569; line-height: 1.65; }

/* =====================================================================
   MAPA
   ===================================================================== */
.map-frame { border-radius: var(--radius); overflow: hidden; min-height: 360px; height: 100%;
  border: 1px solid rgba(255,255,255,.1); }
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 360px; filter: grayscale(.2) contrast(1.05); }

/* =====================================================================
   WHATSAPP FLOTANTE
   ===================================================================== */
#wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 70;
  display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%;
  background: var(--wa); color: #fff; box-shadow: 0 12px 30px rgba(37,211,102,.45);
  transition: transform .2s;
}
#wa-float:hover { transform: scale(1.08); }
#wa-float svg { width: 30px; height: 30px; }
.wa-float-pulse { position: absolute; inset: 0; border-radius: 50%; background: var(--wa);
  z-index: -1; animation: waPulse 2.4s ease-out infinite; }
@keyframes waPulse { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.9); opacity: 0; } }

/* Indicador de scroll del hero */
.hero-scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  color: rgba(255,255,255,.6); animation: bob 2s ease-in-out infinite; z-index: 3; }
@keyframes bob { 0%,100% { transform: translate(-50%,0); } 50% { transform: translate(-50%,8px); } }

/* =====================================================================
   REDUCED MOTION
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .light-beam, .scene .floor, .scene .floor::after, .scene .main-column,
  .marquee-track, .wa-float-pulse, .hero-scroll-cue { animation: none !important; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .light-beam { opacity: .25; }
}