/* =============================================
   PLANTILLA "COTIZADOR" — style.css
   Clonado tal cual desde cercos-electricos/instalacion (SSCC) — este CSS
   es 100% estructural/visual, sin ninguna referencia de marca, así que
   se copió sin cambios salvo los TOKENS de acá abajo. Lo único que hay
   que tocar para adaptar la paleta de un cliente nuevo son los valores
   de :root — el resto del archivo (~1100 líneas de layout/componentes,
   incluye el wizard/plan-card) funciona igual sin importar la paleta.
   Ver NOTAS-ADAPTACION.md.
   ============================================= */

/* --- FUENTES ---
   Montserrat/Exo2 son Google Fonts genéricas (no de marca) — se pueden
   dejar tal cual o reemplazar por la tipografía del cliente si ya tiene
   identidad definida. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo2';
  src: url('fonts/Exo2-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo2';
  src: url('fonts/Exo2-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo2';
  src: url('fonts/Exo2-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- TOKENS — paleta real de BP Baterías (2026-09-27), sacada de los
   colores globales de Elementor de bpbaterias.com.ar y del logo:
   --azul-marca #013099 es el fondo de sus bandas, botones y logo;
   --amarillo #FADD14 el amarillo del logo; --azul #071946 su azul oscuro
   (fondo de las secciones oscuras). La versión anterior usaba el azul
   marino de SSCC y el amarillo #FFB800, que no son los de la marca. */
:root {
  --azul:       #071946;
  --azul-medio: #0d2766;
  --azul-card:  #0d2766;
  --azul-marca: #013099;
  --azul-marca-hover: #0240c4;
  --lavanda:    #E8EDFB;
  --rojo:       #CE0000;
  --rojo-hover: #a80000;
  --amarillo:   #FADD14;
  --amarillo-hover: #e8cb00;
  --blanco:     #FFFFFF;
  --gris-claro: rgba(255,255,255,0.85);
  --gris-sub:   rgba(255,255,255,0.75);
  --borde:      rgba(255,255,255,0.10);

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Exo2', sans-serif;

  --radius:     12px;
  --radius-lg:  20px;
  --shadow-card:0 8px 32px rgba(0,0,0,0.45);
}
/* Sistema de tiers: las secciones son SIEMPRE oscuras (--azul) o claras
   (--blanco), nunca --azul-medio — ese token es solo para SUPERFICIES
   elevadas (cards) sobre fondo oscuro, nunca fondo de sección completa.
   El contraste entre vecinos vive en la card, no en el fondo de sección. */

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background-color: var(--azul);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; color: inherit; }
button { font: inherit; }

/* --- UTILIDADES --- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}
.btn-wsp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #128C7E;
  color: #ffffff;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1rem;
  padding: 14px 28px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.btn-wsp:hover { background: #0f7268; transform: translateY(-2px); }
.btn-wsp svg { flex-shrink: 0; }

/* Sombra tinte del propio color del botón (mismo patrón que .wsp-float) —
   marca visualmente los botones como los puntos de acción de la página */
.btn-wsp { box-shadow: 0 6px 20px rgba(18,140,126,0.35); }

.btn-wsp-rojo { background: var(--rojo); color: var(--blanco); box-shadow: 0 6px 20px rgba(204,26,26,0.35); }
.btn-wsp-rojo:hover { background: var(--rojo-hover); }

.btn-wsp-outline {
  background: transparent;
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,0.5);
  box-shadow: none;
}
.btn-wsp-outline:hover {
  background: rgba(255,255,255,0.10);
  border-color: var(--blanco);
  transform: translateY(-2px);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amarillo);
  margin-bottom: 14px;
}

/* =============================================
   BARRA FLOTANTE SUPERIOR
   Altura fija bien por debajo del 10% de alto de pantalla en cualquier
   viewport real (56px de una pantalla de 700px+ de alto es <8%).
   position:absolute (no fixed, no sticky) — a propósito: queda pegada
   al top del DOCUMENTO (no del viewport), así se superpone al hero sin
   empujarlo hacia abajo (el hero conserva su min-height de 100vh/100svh
   real) pero además, a diferencia de fixed, no se re-ancla al scrollear
   — se va de la vista junto con el resto del hero apenas el usuario
   scrollea, en vez de quedar pegada arriba durante toda la página. Sin
   position:relative/absolute/fixed en ningún ancestro (body, html), el
   contenedor de referencia es el documento completo — por eso alcanza
   con top:0 sin más trucos. left:0 + right:0 siguen haciendo falta
   igual que con fixed (si no, un absolute sin width explícito se
   encoge al ancho de su contenido).
   ============================================= */
.topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 500;
  height: 56px;
  background: var(--azul);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.topbar__logo img { display: block; height: 28px; width: auto; }
/* Logo sin link a propósito — es tráfico pago, no queremos que un clic
   en el logo saque al visitante de la landing hacia el sitio principal.
   Puramente decorativo. */

/* =============================================
   HERO
   ============================================= */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 82% 30%, rgba(245,166,35,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #061a45 0%, var(--azul) 55%, #030d26 100%);
}
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}
.hero__overlay {
  position: absolute;
  inset: 0;
  /* Sin degradé — la imagen maneja su propio contraste. Si hace falta
     un tinte, pedirlo acá antes de tocar el CSS de la imagen. */
  background: none;
}
.hero__inner {
  position: relative;
  z-index: 1;
  padding: 64px 20px 64px;
}
.hero__content { max-width: 620px; }
.hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 6vw, 3.5rem);
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
  color: var(--blanco);
}
.hero__title span { color: var(--amarillo); display: block; }
.hero__subtitle {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: rgba(255,255,255,0.82);
  line-height: 1.7;
  margin-bottom: 30px;
  max-width: 480px;
}
.hero__cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-bottom: 16px;
}
.hero__cta-note {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
}

/* =============================================
   COTIZADOR (embebido, motor propio — ver landings/CLAUDE.md)
   ============================================= */
.calc { padding: 44px 0 64px; }
.calc .container { max-width: 640px; }
.calc__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.8rem, 5.5vw, 3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--blanco);
  margin-bottom: 24px;
}
.calc__title span { color: var(--amarillo); }
.calc__card {
  position: relative;
  background: var(--azul-card);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 28px 24px 30px;
}

/* Wizard — barra de progreso */
.wizard__progress { margin-bottom: 24px; }
.wizard__progress-track { height: 6px; border-radius: 6px; background: rgba(255,255,255,0.12); overflow: hidden; }
.wizard__progress-fill { height: 100%; width: 20%; background: var(--amarillo); transition: width 0.25s ease; }
.wizard__progress-label { font-size: 0.74rem; color: var(--gris-sub); margin-top: 8px; text-align: right; }

/* Wizard — un paso visible a la vez */
.calc__step { display: none; }
.calc__step.activo { display: block; animation: calcStepFade 0.22s ease; }
@keyframes calcStepFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.calc__step-label {
  font-weight: 800; font-size: 1.05rem; margin-bottom: 4px;
}
.calc__step-sub { font-size: 0.8rem; color: var(--gris-sub); margin-bottom: 14px; }

/* Wizard — navegación */
.wizard__nav { display: flex; gap: 12px; margin-top: 26px; }
.wizard__nav.oculto { display: none; }
.wizard__btn-back {
  flex: 0 0 auto; background: transparent; border: 2px solid rgba(255,255,255,0.25); color: var(--blanco);
  border-radius: 50px; padding: 14px 22px; font-weight: 700; font-family: var(--font-body); font-size: 0.95rem;
  cursor: pointer; transition: border-color 0.15s;
}
.wizard__btn-back:hover { border-color: rgba(255,255,255,0.5); }
.wizard__btn-back[hidden] { display: none; }
/* .btn-wsp fuerza display:inline-flex, que pisa el display:none nativo
   del atributo [hidden] — hace falta repetirlo acá con la misma
   especificidad para que ocultar estos botones en distintos pasos
   realmente funcione. */
#wizard-continue[hidden],
#btn-calcular[hidden] { display: none; }

/* Lightbox de carga — pantalla completa, no cerrable (ver landings/CLAUDE.md) */
.carga-lightbox {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(4,21,59,0.94); align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.carga-lightbox.visible { display: flex; }
body.scroll-lock { overflow: hidden; }
.carga-lightbox__inner { max-width: 320px; }
.carga-lightbox__ring { display: block; margin: 0 auto 22px; transform: rotate(-90deg); }
.carga-lightbox__ring-bg { fill: none; stroke: rgba(255,255,255,0.12); stroke-width: 6; }
.carga-lightbox__ring-fg {
  fill: none; stroke: var(--amarillo); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 238.76; stroke-dashoffset: 238.76;
}
.carga-lightbox__ring-fg.animar { animation: cargaRing 5s linear forwards; }
@keyframes cargaRing { to { stroke-dashoffset: 0; } }
.carga-lightbox__msg { font-size: 1.05rem; font-weight: 700; color: var(--blanco); line-height: 1.5; }
.carga-lightbox__msg span { color: var(--amarillo); }

/* Tipo de instalación — paso 1 */
.tipo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tipo-card {
  position: relative; border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05);
  border-radius: var(--radius); padding: 18px 12px; text-align: center; cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.tipo-card:hover { border-color: rgba(245,166,35,0.5); }
.tipo-card.activo { border-color: var(--amarillo); background: rgba(245,166,35,0.12); }
.tipo-card__icon { color: var(--amarillo); display: flex; justify-content: center; margin-bottom: 8px; }
.tipo-card__label { font-weight: 800; font-size: 0.9rem; }
.tipo-card__desc { font-size: 0.72rem; color: var(--gris-sub); margin-top: 4px; line-height: 1.35; }
.tipo-grid.shake { animation: calcShake 0.4s; }
@keyframes calcShake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); }
}


/* Buscador de vehículo (BP, 2026-09-27) — reemplaza al wizard de pasos: un
   campo con sugerencias + las preguntas que cambian la batería. Mismos
   bordes/activo en amarillo que .tipo-card, para no inventar otro lenguaje. */
.calc [hidden] { display: none !important; }
.buscador__campo { position: relative; }
.buscador__lupa { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--gris-sub); pointer-events: none; }
.buscador__input {
  width: 100%; font-family: var(--font-body); font-size: 1rem; font-weight: 600; color: var(--blanco);
  background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.22); border-radius: var(--radius);
  padding: 15px 16px 15px 44px; outline: none; transition: border-color 0.15s, background 0.15s;
}
.buscador__input::placeholder { color: rgba(255,255,255,0.5); }
.buscador__input:focus { border-color: var(--amarillo); background: rgba(255,255,255,0.09); }
.buscador__lista {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none;
  background: var(--azul); border: 1.5px solid rgba(255,255,255,0.18); border-radius: var(--radius);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45); max-height: 320px; overflow-y: auto;
}
.buscador__opcion { padding: 12px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 0.95rem; }
.buscador__opcion:hover, .buscador__opcion.activa { background: rgba(255,184,0,0.14); }
.buscador__marca { color: var(--gris-sub); font-weight: 600; }
.buscador__vacio { padding: 12px; font-size: 0.88rem; color: var(--gris-claro); line-height: 1.5; }
.buscador__populares-label { font-size: 0.72rem; color: var(--gris-sub); text-transform: uppercase; letter-spacing: 0.04em; margin: 18px 0 8px; }
.buscador__populares { display: flex; flex-wrap: wrap; gap: 8px; }
.buscador__chip {
  font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; color: var(--blanco); cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.16); border-radius: 50px; padding: 8px 14px;
  transition: border-color 0.15s, background 0.15s;
}
.buscador__chip:hover { border-color: var(--amarillo); background: rgba(255,184,0,0.12); }
.buscador__link {
  background: none; border: none; padding: 0; margin-top: 18px; cursor: pointer; font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 600; color: var(--gris-claro); text-decoration: underline; text-underline-offset: 3px;
}
.buscador__vacio .buscador__link { margin-top: 0; color: var(--amarillo); }
.buscador.shake, .preguntas.shake { animation: calcShake 0.4s; }

.vehiculo-elegido {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 14px 16px; background: rgba(255,255,255,0.05); border: 1.5px solid var(--amarillo); border-radius: var(--radius);
}
.vehiculo-elegido__texto { font-weight: 800; font-size: 1.02rem; }

.pregunta { margin-top: 22px; animation: calcStepFade 0.22s ease; }
.pregunta__opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.pregunta__opcion {
  font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; color: var(--blanco); cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.16); border-radius: var(--radius);
  padding: 14px 10px; transition: border-color 0.15s, background 0.15s;
}
.pregunta__opcion:hover { border-color: rgba(255,184,0,0.5); }
.pregunta__opcion.activo { border-color: var(--amarillo); background: rgba(255,184,0,0.12); }

.btn-cotizar { width: 100%; margin-top: 24px; justify-content: center; }

.resultado__bateria { margin-top: 6px; font-size: 0.95rem; color: var(--gris-claro); }
.resultado__nota { text-align: center; font-size: 0.8rem; color: var(--gris-sub); margin: 4px 0 18px; }
.resultado__asesor { text-align: center; margin-bottom: 8px; }
.resultado__asesor-texto { font-size: 0.95rem; color: var(--blanco); line-height: 1.55; max-width: 380px; margin: 0 auto 20px; }
.resultado .btn-wsp-chico { display: block; margin: 14px auto 0; }

/* Resumen editable — paso 5 */
.resumen-list { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 22px; }
.resumen-item {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 12px 14px; background: rgba(255,255,255,0.04); border-radius: var(--radius);
}
.resumen-item__texto { font-size: 0.88rem; }
.resumen-item__label { color: var(--gris-sub); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; display: block; margin-bottom: 2px; }
.resumen-item__edit {
  background: transparent; border: 1.5px solid rgba(255,255,255,0.25); color: var(--blanco);
  font-size: 0.74rem; font-weight: 700; font-family: var(--font-body); padding: 6px 12px; border-radius: 50px;
  cursor: pointer; flex-shrink: 0; transition: border-color 0.15s, color 0.15s;
}
.resumen-item__edit:hover { border-color: var(--amarillo); color: var(--amarillo); }
/* Cotizador no disponible — cubre toda la card cuando fallan precios/dólar */
.calc__no-disponible {
  display: none; position: absolute; inset: 0; z-index: 40;
  background: rgba(4,21,59,0.92); border-radius: var(--radius-lg);
  flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 32px 24px;
}
.calc__no-disponible.visible { display: flex; }
.calc__no-disponible__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: clamp(1.7rem, 6vw, 2.2rem); color: var(--amarillo); margin-bottom: 10px;
}
.calc__no-disponible__sub { font-size: 0.9rem; color: var(--blanco); max-width: 320px; margin-bottom: 22px; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .calc__step.activo { animation: none; }
  .tipo-grid.shake { animation: none; }
  .carga-lightbox__ring-fg.animar { animation: none; stroke-dashoffset: 0; }
  .carrusel__track { transition: none; }
}

/* Paredes — lista dinámica agregar/quitar */
.paredes { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.pared-row { display: flex; align-items: center; gap: 10px; }
.pared-row__label { font-size: 0.86rem; color: var(--gris-claro); width: 76px; flex-shrink: 0; }
.pared-row__input-wrap { position: relative; flex: 1; }
.pared-row input[type="number"] {
  width: 100%; padding: 11px 44px 11px 14px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06); color: var(--blanco); font-size: 0.95rem; outline: none; transition: border-color 0.15s;
  -moz-appearance: textfield;
}
.pared-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; }
.pared-row input[type="number"]:focus { border-color: var(--amarillo); }
.pared-row__suffix { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 0.82rem; color: var(--gris-sub); pointer-events: none; }
.pared-row__del {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid rgba(204,26,26,0.35);
  background: rgba(204,26,26,0.10); color: var(--rojo); cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s;
}
.pared-row__del:hover { background: rgba(204,26,26,0.2); border-color: var(--rojo); }

.btn-agregar-pared {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px;
  background: transparent; border: 1.5px dashed rgba(255,255,255,0.3); color: var(--blanco);
  border-radius: var(--radius); padding: 12px; font-weight: 700; font-family: var(--font-body); font-size: 0.9rem;
  cursor: pointer; transition: border-color 0.15s, color 0.15s;
}
.btn-agregar-pared:hover { border-color: var(--amarillo); color: var(--amarillo); }
.btn-agregar-pared:disabled { opacity: 0.35; cursor: default; }

/* Hilos — cards seleccionables (altura en grande, hilos como dato secundario) */
.hilos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hilos-card {
  position: relative;
  border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); border-radius: var(--radius);
  padding: 14px 10px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.hilos-card:hover { border-color: rgba(245,166,35,0.5); }
.hilos-card.activo { border-color: var(--amarillo); background: rgba(245,166,35,0.12); }
.hilos-card__num { font-family: var(--font-display); font-weight: 900; font-size: 1.25rem; color: var(--amarillo); }
.hilos-card__sub { font-size: 0.78rem; color: var(--gris-sub); margin-top: 3px; }
.hilos-card__badge {
  display: none; position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--amarillo); color: var(--azul); font-size: 0.6rem; font-weight: 800;
  padding: 2px 8px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
.hilos-card--recomendado .hilos-card__badge { display: block; }
.hilos-asesor-card {
  grid-column: 1 / -1;
  border: 1.5px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.05); border-radius: var(--radius);
  padding: 12px; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.hilos-asesor-card:hover { border-color: rgba(245,166,35,0.5); background: rgba(245,166,35,0.08); }
.hilos-asesor-card__label { font-weight: 800; font-size: 0.9rem; }
.hilos-asesor-card__cta { font-size: 0.78rem; color: var(--amarillo); margin-top: 2px; }

@media (min-width: 640px) {
  .hilos-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Resultado */
.resultado { display: none; margin-top: 26px; padding-top: 26px; border-top: 1px dashed rgba(255,255,255,0.18); }
.resultado.visible { display: block; }

.resultado__header { text-align: center; margin-bottom: 20px; }
.resultado__badge {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(245,166,35,0.16); border: 1px solid rgba(245,166,35,0.45);
  color: var(--amarillo); margin-bottom: 12px;
}
.resultado__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--amarillo);
  font-size: clamp(1.25rem, 4.5vw, 1.5rem); line-height: 1.2;
}

/* Toggle "Con instalación" / "Sin instalación" — ya no es un control único
   arriba de las 3 cards, es uno por card (ver toggleInstalacionPlan en
   main.js), centrado sobre la línea divisoria de cada una. Izquierda =
   SIN (ámbar al activarse), derecha = CON (verde al activarse) — pedido
   explícito del dueño, 2026-07-21. */
.plan-card__divisor-row { position: relative; margin: 18px 0 22px; }
.plan-card__divisor-row .plan-card__divisor { margin: 0; }
.plan-card__instalacion-toggle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 2px;
  background: #0b2050; border: 1px solid rgba(255,255,255,0.22);
  border-radius: 50px; padding: 3px;
}
.plan-card__instalacion-btn {
  border: none; background: none; cursor: pointer; padding: 5px 10px; border-radius: 50px;
  font-family: var(--font-body); font-weight: 800; font-size: 0.63rem; letter-spacing: 0.01em;
  color: var(--blanco); opacity: 0.65; white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
}
.plan-card__instalacion-btn:hover { opacity: 0.9; }
.plan-card[data-instalacion="sin"] .plan-card__instalacion-btn[data-instalacion="sin"] {
  background: var(--amarillo); color: var(--azul); opacity: 1;
}
.plan-card[data-instalacion="con"] .plan-card__instalacion-btn[data-instalacion="con"] {
  background: #4DD4A0; color: var(--azul); opacity: 1;
}

/* Planes de protección — reemplaza al viejo desglose/total único: se
   muestran las 3 alternativas de una, cada una con su propio precio, para
   que el cliente elija según su presupuesto (ver PLANES_PROTECCION en
   main.js). */
.resultado__planes { display: flex; flex-direction: column; gap: 30px; margin-bottom: 40px; }
.plan-card {
  position: relative;
  padding: 16px; border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.045); border: 1.5px solid rgba(255,255,255,0.4);
}
/* La 3ra opción (Intelbras 3km c/WiFi) se resalta como la más elegida —
   mismo border-radius/padding que el resto, solo cambia el color y grosor
   del borde para que salte a la vista sin gritar. */
.plan-card--destacado { border-color: var(--amarillo); border-width: 2px; }
/* Etiqueta a caballo sobre el borde superior de la card destacada —
   mismo patrón que .hilos-card__badge (fondo amarillo, texto azul). */
.plan-card__badge {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--amarillo); color: var(--azul); font-size: 0.7rem; font-weight: 800;
  padding: 3px 12px; border-radius: 50px; text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap;
}
/* Fila de arriba: ícono + título/subtítulo — el ícono queda centrado
   respecto a este bloque solo (no contra toda la card), lo que en la
   práctica lo deja pegado arriba, dejando el precio de abajo respirar. */
.plan-card__top { display: flex; align-items: center; gap: 14px; }
.plan-card__icono {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 10px; border: 1px solid rgba(245,166,35,0.35);
  color: var(--amarillo); display: flex; align-items: center; justify-content: center;
}
.plan-card__encabezado { flex: 1; min-width: 0; }
.plan-card__titulo { font-weight: 900; font-size: 1.05rem; color: var(--blanco); }
.plan-card__sub { font-size: 0.86rem; color: var(--blanco); opacity: 0.85; margin-top: 2px; }
/* Separador — visible pero discreto, la mitad de énfasis que el borde
   de la card (que es rgba(255,255,255,0.4)). Bottom más grande que el
   top (20px vs 16px) a propósito — mismo patrón que .resultado__chips
   más abajo respecto al botón de WhatsApp: más aire del lado de arriba,
   pegado del lado de abajo (acá, contra el número — ver
   .plan-card__rango-label). */
.plan-card__divisor { border: none; border-top: 1px solid rgba(255,255,255,0.18); margin: 16px 0 20px; }
/* "CON/SIN INSTALACIÓN desde:" — pegado al número de abajo (margin-bottom
   chico, line-height ajustado para no dejar leading de sobra), con todo
   el aire de separación puesto arriba, contra el divisor (ver
   .plan-card__divisor). Antes quedaba a mitad de camino entre la línea y
   el número — pedido del dueño al verlo en vivo. 10% más grande que el
   0.72rem original (0.72 × 1.1 = 0.792rem). */
.plan-card__rango-label { font-size: 0.79rem; color: var(--gris-sub); line-height: 1.2; margin-bottom: 3px; }
/* El precio es el dato que más tiene que resaltar de la card — un solo
   número "desde". `display:flex` + `align-items:center` + `line-height:1`
   centra el signo "$" contra la altura real del número — con line-height
   por default quedaba pegado a la línea de base, con aire de sobra arriba.
   El color ya no es fijo: sigue el estado del toggle de instalación de esta
   misma card (verde en "con", ámbar en "sin" — ver
   .plan-card__instalacion-toggle más arriba y toggleInstalacionPlan en
   main.js) — nota: esto se aparta de la regla general de
   landings/CLAUDE.md → «Jerarquía visual», que reserva el amarillo para el
   precio; el dueño decidió otra cosa acá puntualmente para el cotizador. */
.plan-card__rango {
  font-family: var(--font-display); font-weight: 900; font-size: 2.24rem; margin-top: 0; line-height: 1;
  display: flex; align-items: center; gap: 3px; flex-wrap: wrap; transition: color 0.18s ease;
}
.plan-card[data-instalacion="con"] .plan-card__rango { color: #4DD4A0; }
.plan-card[data-instalacion="sin"] .plan-card__rango { color: var(--amarillo); }
/* Relativo al tamaño del número (em) — crece con él pero se mantiene
   siempre más chico, nunca compite en tamaño con el monto real. */
.plan-card__signo { font-size: 0.6em; font-weight: 700; line-height: 1; }
.plan-card__monto { line-height: 1; }

/* Precio a la izquierda + "Más info" alineado a la derecha, misma fila —
   antes "Más info" quedaba debajo del precio a todo lo ancho; ahora que
   ya no hay texto "CON/SIN INSTALACIÓN" pegado al precio, sobra lugar acá
   al costado (pedido del dueño, 2026-07-21). */
.plan-card__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* "Más info" — acordeón por card (mismo patrón de max-height que
   .faq-item__a en la sección FAQ, ver initFaq en main.js), pero en
   versión oscura para calzar con el fondo de la card, y con una
   diferencia clave a propósito: acá NO se cierran las otras cards al
   abrir una (ver renderPlanes) — el pedido era poder comparar
   beneficios entre planes, así que dejar varias abiertas a la vez es
   el comportamiento correcto, no un descuido. */
.plan-card__toggle {
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; color: var(--blanco); opacity: 0.85;
}
.plan-card__toggle:hover { opacity: 1; }
.plan-card__toggle svg { color: var(--amarillo); flex-shrink: 0; transition: transform 0.2s ease; }
.plan-card.abierto .plan-card__toggle svg { transform: rotate(180deg); }
.plan-card__detalle { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.plan-card__lista { list-style: none; display: flex; flex-direction: column; gap: 9px; padding-top: 14px; }
.plan-card__lista li {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 0.86rem; font-weight: 600; color: var(--blanco); opacity: 0.85; line-height: 1.45;
}
.plan-card__lista li svg { flex-shrink: 0; margin-top: 3px; color: #4DD4A0; }

/* Chips de "hasta 12 cuotas" / "descuentos en efectivo" — mismo criterio
   liviano que los viejos status-chip (texto verde + tilde), no un botón.
   Separados de las cards de planes de arriba (margin-top del contenedor
   padre) y pegados un poco más al botón de WhatsApp de abajo. */
.resultado__chips { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; }
.resultado__chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; color: #4DD4A0;
}
/* .btn-wsp es inline-flex sin justify-content (default flex-start) — no
   se nota en botones de ancho automático, pero acá el botón tiene
   width:100% (todo el ancho de la card) y el ícono+texto quedaban
   pegados a la izquierda en vez de centrados. */
#btn-confirmar-wsp { justify-content: center; }
.btn-wsp-chico {
  display: block; margin: 12px auto 0; background: transparent; border: none; color: var(--gris-sub);
  font-size: 0.82rem; font-weight: 700; font-family: var(--font-body); padding: 8px 14px; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; transition: color 0.15s;
}
.btn-wsp-chico:hover { color: var(--blanco); }

/* =============================================
   BENEFICIOS — sección clara, abre el quiebre de tono
   justo después del hero oscuro
   ============================================= */
.beneficios {
  background: var(--blanco);
  padding: 56px 0;
}
.beneficios__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.1rem, 3vw, 1.5rem);
  text-transform: uppercase;
  margin-bottom: 36px;
  letter-spacing: 0.02em;
  color: var(--azul);
}
.beneficios__title span { color: var(--rojo); }
.beneficios__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.beneficio-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 24px 16px;
  background: var(--blanco);
  border: 1.5px solid var(--rojo);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(4,21,59,0.06);
}
.beneficio-item__icon {
  width: 46px;
  height: 46px;
  background: rgba(204,26,26,0.08);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.beneficio-item__icon svg { color: var(--rojo); }
.beneficio-item__label { font-weight: 700; font-size: 0.92rem; line-height: 1.3; color: var(--azul); }
.beneficio-item__sub { font-size: clamp(0.85rem, 0.8rem + 0.3vw, 0.95rem); font-weight: 600; color: rgba(4,21,59,0.78); line-height: 1.45; }

.beneficios__stat {
  margin-top: 32px;
  text-align: center;
  padding: 28px 20px;
  border: 1.5px dashed rgba(204,26,26,0.35);
  border-radius: var(--radius-lg);
  background: rgba(204,26,26,0.04);
}
.beneficios__stat-label { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(4,21,59,0.75); margin-bottom: 6px; }
.beneficios__stat-num {
  font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 7vw, 3.2rem);
  color: var(--rojo); line-height: 1;
}
.beneficios__stat-sub { font-size: clamp(0.88rem, 0.85rem + 0.2vw, 0.98rem); font-weight: 600; color: rgba(4,21,59,0.75); margin-top: 6px; }

/* =============================================
   PROCESO — 3 pasos simplificados, cards tipo wizard
   ============================================= */
/* Sección oscura — sigue al FAQ (clara) para no dejar dos secciones
   claras seguidas sin corte (FAQ + Proceso). */
.proceso { background: var(--azul); padding: 72px 0; }
.proceso__header { text-align: center; margin-bottom: 48px; }
.proceso__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.4rem, 4vw, 2.1rem);
  text-transform: uppercase;
  line-height: 1.15;
}
.proceso__title span { color: var(--amarillo); }
.proceso__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.proceso-card {
  border: 1.5px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.05);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  transition: border-color 0.15s, background 0.15s;
}
.proceso-card:hover { border-color: rgba(245,166,35,0.5); }
.proceso-card__num {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2.2rem;
  color: var(--amarillo);
  line-height: 1;
  margin-bottom: 10px;
}
.proceso-card__title { font-weight: 800; font-size: 1rem; text-transform: uppercase; margin-bottom: 8px; letter-spacing: 0.01em; }
.proceso-card__desc { font-size: 0.86rem; color: var(--gris-sub); line-height: 1.55; }

.proceso__regalo {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  padding: 20px 22px;
  border: 1.5px dashed rgba(245,166,35,0.4);
  border-radius: var(--radius-lg);
  background: rgba(245,166,35,0.08);
}
.proceso__regalo-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--rojo);
  color: var(--blanco);
  padding: 8px 16px;
  border-radius: 50px;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(204,26,26,0.35);
}
.proceso__regalo-text { font-size: 0.9rem; color: var(--blanco); }
/* flex-basis:100% lo manda a su propia línea debajo del badge+texto,
   sin importar si el flex-wrap de .proceso__regalo ya cortó ahí o no —
   es un segundo CTA de WhatsApp, no compite con el botón principal de
   la sección (fuera de este bloque), por eso va en verde genérico. */
.proceso__regalo-btn { flex: 0 0 100%; justify-content: center; margin-top: 4px; }

/* =============================================
   DIFERENCIALES
   ============================================= */
/* Pico de énfasis intencional — mismo gradiente que el hero:
   es donde se argumenta por qué confiar en la empresa. */
.diferenciales { background: linear-gradient(160deg, #061a45 0%, var(--azul) 100%); padding: 64px 0; }
.diferenciales__header { text-align: center; margin-bottom: 40px; }
.diferenciales__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  text-transform: uppercase;
  line-height: 1.15;
}
.diferenciales__title span { color: var(--amarillo); }
.diferenciales__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}
.dif-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 28px 20px;
  background: var(--azul-card);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}
.dif-item__icon {
  width: 52px; height: 52px;
  background: rgba(245,166,35,0.15);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.dif-item__icon svg { color: var(--amarillo); }
.dif-item__title { font-weight: 800; font-size: 1rem; }
.dif-item__desc { font-size: 0.82rem; color: var(--gris-sub); line-height: 1.5; }

/* =============================================
   TESTIMONIOS — carrusel con cards oscuras flotando
   sobre la sección clara (autoplay, ver initCarrusel en main.js)
   ============================================= */
.testimonios { background: var(--blanco); padding: 64px 0; }
.testimonios .eyebrow { color: var(--rojo); }
.testimonios__header { text-align: center; margin-bottom: 40px; }
.testimonios__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  text-transform: uppercase;
  color: var(--azul);
}
.testimonios__title span { color: var(--rojo); }

.carrusel { max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: var(--radius); }
/* Riel con transform: translateX real en px (no fade) para que se vea el
   card desplazándose, no aparecer/desaparecer. El overflow:hidden va
   en .carrusel (wrapper), no en .carrusel__track (el que se mueve) —
   mezclar overflow:hidden + transform en el mismo elemento daba un
   card en blanco en capturas headless.
   Base = desktop, 3 cards a la vista (30% + gap) con un asomo del 4to
   card — mismo lenguaje visual que el "peek" de mobile, solo que acá
   entran 3 en vez de 1. Mobile pisa esto en @media(max-width:768px)
   y vuelve al card único al 95%. El paso siempre avanza de una card
   por vez sin importar cuántas estén visibles — se calcula en px por
   JS (medirPasoPx en main.js) porque con gap de por medio el % no es
   exacto.
   La altura del track se fija por JS (initCarrusel, main.js) al alto
   del card más largo, así solo cambia el contenido al pasar de slide.
   touch-action:pan-y deja el swipe horizontal para el JS (arrastrar
   para navegar) sin bloquear el scroll vertical de la página. */
.carrusel__track {
  display: flex;
  gap: 20px;
  transition: transform 0.4s ease, height 0.3s ease;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.carrusel__track.arrastrando { cursor: grabbing; transition: height 0.3s ease; }
.carrusel__track > .testimonio-card { flex: 0 0 30%; height: 100%; }
.testimonio-card {
  background: var(--azul-card);
  border-radius: var(--radius);
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(4,21,59,0.18);
}
.testimonio-card__header { display: flex; align-items: center; gap: 12px; }
.testimonio-card__foto {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: rgba(245,166,35,0.16); color: var(--amarillo);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 900; font-size: 1.05rem;
  overflow: hidden;
}
.testimonio-card__foto img { width: 100%; height: 100%; object-fit: cover; }
/* Reseñas importadas de Google/Facebook: en vez de la inicial, el ícono
   de la red de origen — evita subir la foto de perfil de cada cliente. */
.testimonio-card__foto--google,
.testimonio-card__foto--facebook { background: none; }
.testimonio-card__foto--google svg,
.testimonio-card__foto--facebook svg { width: 100%; height: 100%; }
.testimonio-card__stars { display: flex; gap: 3px; color: var(--amarillo); }
.testimonio-card__recomienda { font-size: 0.82rem; font-weight: 700; color: var(--amarillo); }
.testimonio-card__texto { font-size: 0.88rem; line-height: 1.6; color: var(--gris-claro); }
.testimonio-card__autor { font-size: 0.82rem; font-weight: 700; color: var(--blanco); }
.testimonio-card__meta { font-size: 0.74rem; color: var(--gris-sub); }

.carrusel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.carrusel__dot {
  width: 8px; height: 8px; border-radius: 50%; border: none; padding: 0;
  background: rgba(4,21,59,0.2); cursor: pointer; transition: background 0.2s, width 0.2s;
}
.carrusel__dot.activo { background: var(--rojo); width: 22px; border-radius: 5px; }

/* =============================================
   FAQ — ACORDEÓN
   ============================================= */
/* Sección clara plana — contenido de consulta, no de venta. */
.faq { background: var(--blanco); padding: 64px 0; }
.faq .eyebrow { color: var(--rojo); }
.faq__header { text-align: center; margin-bottom: 36px; }
.faq__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  text-transform: uppercase;
  color: var(--azul);
}
.faq__title span { color: var(--rojo); }
.faq__list { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.faq-item {
  border: 1px solid rgba(4,21,59,0.12);
  border-radius: var(--radius);
  background: var(--blanco);
  box-shadow: 0 2px 10px rgba(4,21,59,0.06);
  overflow: hidden;
}
.faq-item__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: none;
  border: none;
  color: var(--azul);
  font-weight: 700;
  font-size: 0.94rem;
  text-align: left;
  cursor: pointer;
}
.faq-item__q svg {
  flex-shrink: 0;
  color: var(--rojo);
  transition: transform 0.2s ease;
}
.faq-item.abierto .faq-item__q svg { transform: rotate(180deg); }
.faq-item__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}
.faq-item__a p {
  padding: 0 20px 18px;
  font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem);
  font-weight: 600;
  color: rgba(4,21,59,0.8);
  line-height: 1.6;
}

/* =============================================
   CTA FINAL — sección clara, cierra el scroll antes
   del footer oscuro (misma lógica que Beneficios al abrir)
   ============================================= */
.cta-final {
  padding: 80px 0;
  text-align: center;
  background: var(--blanco);
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 50% 100%, rgba(204,26,26,0.06) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final__eyebrow {
  font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rojo); margin-bottom: 12px;
}
.cta-final__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(1.5rem, 5vw, 2.6rem);
  text-transform: uppercase;
  line-height: 1.1;
  margin-bottom: 16px;
  color: var(--azul);
}
.cta-final__title span { color: var(--rojo); }
.cta-final__desc {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.2rem); font-weight: 600; color: rgba(4,21,59,0.78);
  max-width: 520px; margin: 0 auto 36px;
}
.cta-final__group { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

/* =============================================
   FOOTER
   ============================================= */
.footer { background: #02102e; border-top: 1px solid var(--borde); padding: 28px 0; }
.footer__inner { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; width: 100%; }
.footer__logo img { height: 36px; width: auto; opacity: 0.85; }
.footer__copy { font-size: 0.76rem; color: rgba(255,255,255,0.85); text-align: center; }

/* =============================================
   BOTÓN FLOTANTE + PANEL WHATSAPP
   ============================================= */
.wsp-float {
  position: fixed; bottom: 28px; right: 28px; z-index: 999;
  width: 60px; height: 60px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,0.45);
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.wsp-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,0.6); }
.wsp-float svg { color: #fff; }
.wsp-float::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(37,211,102,0.45); animation: wsp-pulse 2s ease-out infinite;
}
@keyframes wsp-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }

/* Botón flotante de llamada — mismo patrón que .wsp-float, espejado a la
   izquierda, en el celeste de marca (#1565C0, el mismo que ya usaba el
   viejo botón de la barra superior y el panel de llamada de desktop). */
.llamar-float {
  position: fixed; bottom: 28px; left: 28px; z-index: 999;
  width: 60px; height: 60px; background: #1565C0; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; border: none;
  box-shadow: 0 4px 20px rgba(21,101,192,0.45);
  transition: transform 0.2s, box-shadow 0.2s; cursor: pointer;
}
.llamar-float:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(21,101,192,0.6); }
.llamar-float svg { color: #fff; }
/* Mismo pulso que .wsp-float (reusa el keyframe wsp-pulse), en el celeste
   propio de este botón — antes solo lo tenía el de WhatsApp. */
.llamar-float::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid rgba(21,101,192,0.45); animation: wsp-pulse 2s ease-out infinite;
}

/* Confirmación de llamada (mobile) — modal centrado propio, sin la
   franja de color arriba ni la estética genérica del mockup original:
   mismo lenguaje visual que el resto del sitio (card oscura, borde
   sutil, título bicolor Montserrat). */
.confirmar-llamada {
  display: none; position: fixed; inset: 0; z-index: 1100;
  background: rgba(4,21,59,0.75); align-items: center; justify-content: center; padding: 24px;
}
.confirmar-llamada.visible { display: flex; }
.confirmar-llamada__card {
  width: 100%; max-width: 320px; background: var(--azul-card); border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px; text-align: center;
}
.confirmar-llamada__icono {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px;
  border-radius: 50%; background: rgba(245,166,35,0.16); border: 1px solid rgba(245,166,35,0.45);
  color: var(--amarillo); margin-bottom: 14px;
}
.confirmar-llamada__titulo {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--blanco);
  font-size: 1.3rem; line-height: 1.25; margin-bottom: 22px;
}
.confirmar-llamada__titulo span { color: var(--amarillo); display: block; }
.confirmar-llamada__botones { display: flex; gap: 12px; }
.confirmar-llamada__si, .confirmar-llamada__no {
  flex: 1; border: none; border-radius: 50px; padding: 13px; font-family: var(--font-body);
  font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--blanco); cursor: pointer; transition: filter 0.15s;
}
.confirmar-llamada__si:hover, .confirmar-llamada__no:hover { filter: brightness(1.1); }
.confirmar-llamada__si { background: #128C7E; }
.confirmar-llamada__no { background: var(--rojo); }

.wsp-panel {
  position: fixed; bottom: 100px; right: 28px; z-index: 1000; width: 320px;
  background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  overflow: hidden; opacity: 0; transform: translateY(16px) scale(0.97);
  pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease;
}
.wsp-panel--open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; }
.wsp-panel__header { background: #075E54; padding: 14px 16px; display: flex; align-items: center; gap: 12px; }
.wsp-panel__avatar {
  width: 40px; height: 40px; background: #25D366; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff;
}
.wsp-panel__info { flex: 1; }
.wsp-panel__name { font-weight: 700; font-size: 0.92rem; color: #fff; margin: 0; font-family: var(--font-body); }
.wsp-panel__status { font-size: 0.75rem; color: rgba(255,255,255,0.8); margin: 0; font-family: var(--font-body); }
.wsp-panel__close { background: none; border: none; cursor: pointer; color: rgba(255,255,255,0.7); padding: 4px; display: flex; align-items: center; transition: color 0.15s; line-height: 1; }
.wsp-panel__close:hover { color: #fff; }
.wsp-panel__body { padding: 16px 16px 8px; background: #ece5dd; }
.wsp-panel__label { font-size: 0.78rem; font-weight: 600; color: #333; margin: 0 0 6px; font-family: var(--font-body); }
.wsp-panel__req { color: var(--rojo); }
.wsp-panel__opt { color: #888; font-weight: 400; }
.wsp-panel__input {
  width: 100%; padding: 10px 12px; border: 1.5px solid #ccc; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.9rem; color: #222; background: #fff;
  outline: none; transition: border-color 0.15s; margin-bottom: 10px; resize: none;
}
.wsp-panel__input:focus { border-color: #25D366; }
.wsp-panel__textarea { min-height: 68px; }
.wsp-panel__error { display: none; font-size: 0.75rem; color: var(--rojo); margin: -6px 0 10px; font-family: var(--font-body); }
.wsp-panel__footer { padding: 10px 16px 16px; background: #ece5dd; }
.wsp-panel__btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #128C7E; color: #fff; font-family: var(--font-body); font-weight: 800;
  font-size: 0.88rem; text-transform: uppercase; letter-spacing: 0.04em; border: none;
  border-radius: 50px; padding: 13px 20px; cursor: pointer; transition: background 0.2s, transform 0.15s;
}
.wsp-panel__btn:hover { background: #0f7268; transform: translateY(-1px); }

/* Campo de teléfono compartido (panel de WhatsApp + panel de llamada).
   Prefijo fijo Argentina (+54, banderita) — no hay selector de país, todo
   el tráfico hoy es de Tucumán/Argentina. El usuario solo carga área+
   número (ver .tel-field__hint) y JS arma el E.164 completo
   (normalizarTelefonoAR en main.js). */
.tel-field { display: flex; align-items: stretch; gap: 6px; margin-bottom: 4px; }
.tel-field__prefix {
  display: flex; align-items: center; gap: 5px; flex-shrink: 0;
  padding: 10px 10px; border: 1.5px solid #ccc; border-radius: 8px;
  background: #f4f4f4; font-family: var(--font-body); font-size: 0.86rem;
  font-weight: 700; color: #444;
}
.tel-field__input {
  flex: 1; min-width: 0; padding: 10px 12px; border: 1.5px solid #ccc; border-radius: 8px;
  font-family: var(--font-body); font-size: 0.9rem; color: #222; background: #fff;
  outline: none; transition: border-color 0.15s;
}
.tel-field__input:focus { border-color: #25D366; }
.tel-field__hint { font-size: 0.72rem; color: #888; margin: 4px 0 10px; font-family: var(--font-body); }

/* ---- Variante celeste: panel "Te llamamos" (desktop) ---- */
/* Ancla abajo a la izquierda, igual criterio que .wsp-panel con
   .wsp-float — el disparador (#llamar-float) vive ahí, ya no arriba en
   la barra superior (que se sacó, ver «BOTÓN FLOTANTE DE LLAMADA» en
   main.js). Sin override de position/transform: hereda el mismo
   "aparece deslizando desde abajo" que .wsp-panel de WhatsApp. */
.wsp-panel--llamada { right: auto; left: 28px; }
.wsp-panel--llamada .wsp-panel__header { background: #1565C0; }
.wsp-panel--llamada .wsp-panel__avatar { background: #1E88E5; }
.wsp-panel--llamada .wsp-panel__input:focus,
.wsp-panel--llamada .tel-field__input:focus { border-color: #1E88E5; }
.wsp-panel--llamada .wsp-panel__btn { background: #1565C0; }
.wsp-panel--llamada .wsp-panel__btn:hover { background: #0d47a1; }

/* =============================================
   ANIMACIONES DE ENTRADA
   ============================================= */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 860px) {
  .proceso__grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .beneficios__grid { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 100svh; }
  .hero__bg img { object-position: center center; }
  /* En mobile el recorte deja la fachada iluminada justo donde cae el
     texto (izquierda) — acá sí hace falta el tinte que en desktop no. */
  .hero__overlay {
    background: linear-gradient(to right, rgba(4,21,59,0.99) 0%, rgba(4,21,59,0.8) 55%, rgba(4,21,59,0.5) 85%, rgba(4,21,59,0.3) 100%);
  }
  .hero__inner { padding: 48px 20px 48px; }
  .hero__cta-group { flex-direction: column; align-items: stretch; }
  .hero__cta-group .btn-wsp { justify-content: center; }
  .calc { padding: 32px 0 48px; }
  .calc__card { padding: 22px 16px 26px; }
  .proceso { padding: 48px 0; }
  .diferenciales { padding: 48px 0; }
  .testimonios { padding: 48px 0; }
  .faq { padding: 48px 0; }
  .cta-final { padding: 56px 0; }
  .footer__inner { flex-direction: column; align-items: center; }
  /* Punto intermedio entre el tamaño mobile de antes (54px) y el 25%
     más chico que se probó después (40px) -> 47px. */
  .wsp-float, .llamar-float { bottom: 20px; width: 47px; height: 47px; }
  .wsp-float { right: 20px; }
  .llamar-float { left: 20px; }
  .wsp-float svg { width: 26px; height: 26px; }
  .llamar-float svg { width: 22px; height: 22px; }
  /* En mobile, un solo card a la vez (ver comentario en la regla base
     de .carrusel más arriba) — en pantallas chicas 3 a la vez quedarían
     demasiado angostos para leerse. */
  .carrusel { max-width: 480px; }
  .carrusel__track { gap: 10px; }
  .carrusel__track > .testimonio-card { flex: 0 0 95%; }
}
@media (max-width: 480px) {
  .beneficios__grid { grid-template-columns: repeat(2, 1fr); }
  .diferenciales__grid { grid-template-columns: 1fr 1fr; }
  .wsp-panel { width: calc(100vw - 32px); right: 16px; bottom: 86px; }
  /* .wsp-panel--llamada solo se abre en desktop (ver esTactil en
     main.js), pero por si una ventana desktop queda muy angosta. */
  .wsp-panel--llamada { left: 16px; right: auto; }
  .pared-row__label { width: 60px; }
}

/* Reducir movimiento si el usuario lo prefiere */
@media (prefers-reduced-motion: reduce) {
  .fade-up { transition: none; opacity: 1; transform: none; }
  .wsp-float::after { animation: none; }
  .llamar-float::after { animation: none; }
}

/* =============================================
   BP BATERÍAS — MARCA Y SECCIONES PROPIAS (2026-09-27)
   Estructura copiada de bpbaterias.com.ar (hero con 4 beneficios,
   «¿Te quedaste sin batería?», por qué elegirnos con foto, franja
   «cambiá hoy», 3 pasos, «vendemos baterías para», preguntas, cierre y
   pie con dirección y horario), con el esqueleto de las landings.
   Va al final a propósito: pisa lo genérico de la plantilla.
   Orden con el formato de SSCC (2026-09-27): hero(D) elegirnos(L)
   cotizador(D) faq(L) auxilio=franja(D) pasos(L) casos(D) testimonios(L)
   cta(D) footer(D, más oscuro).
   ============================================= */

/* Botones de marca. El CTA principal de BP es amarillo con texto oscuro,
   como en su web (no el rojo de SSCC). El verde queda para WhatsApp. */
.btn-primario { background: var(--amarillo); color: var(--azul); box-shadow: 0 6px 20px rgba(250,221,20,0.30); }
.btn-primario:hover { background: var(--amarillo-hover); }
.btn-azul { background: var(--azul-marca); color: var(--blanco); box-shadow: 0 6px 20px rgba(1,48,153,0.30); }
.btn-azul:hover { background: var(--azul-marca-hover); }
.btn-wsp-outline { border-color: var(--amarillo); color: var(--amarillo); }
.btn-wsp-outline:hover { background: rgba(250,221,20,0.12); border-color: var(--amarillo); }

.topbar { background: transparent; border-bottom: none; }
.topbar__logo img { height: 42px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.45)); }

/* Hero: la foto de BP es oscura de por sí; el velo refuerza el lado del texto.
   Sin bullets debajo del título (sacados 2026-09-28, quedaba muy cargado —
   Carlos: «todas las letras quieren tener protagonismo»): esos 4 beneficios
   ya están en «¿Por qué elegirnos?», la sección de abajo, con sus íconos —
   decirlos dos veces no sumaba, competía con el título por la atención. */
.hero__overlay { background: linear-gradient(90deg, rgba(7,25,70,0.92) 0%, rgba(7,25,70,0.70) 55%, rgba(7,25,70,0.35) 100%); }
.hero__title { text-transform: none; font-size: clamp(2rem, 5.4vw, 3.4rem); }
.hero__title span { display: inline; }
@media (max-width: 768px) {
  .hero__overlay { background: linear-gradient(180deg, rgba(7,25,70,0.55) 0%, rgba(7,25,70,0.88) 45%, rgba(7,25,70,0.95) 100%); }
}

/* Encabezados de sección comunes */
.elegirnos__title, .franja__title, .pasos__title, .casos__title {
  font-family: var(--font-display); font-weight: 900; line-height: 1.12;
  font-size: clamp(1.6rem, 4.4vw, 2.5rem); margin-bottom: 16px;
}


/* Cotizador: sin cambios de estructura, solo el azul de la sección. */
.calc { background: var(--azul); padding: 64px 0 72px; }

/* ¿Por qué elegirnos? (claro, con foto) */
.elegirnos { background: var(--blanco); padding: 72px 0; color: var(--azul); }
.elegirnos .eyebrow { color: var(--azul-marca); font-weight: 800; }
.elegirnos__inner { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; }
.elegirnos__foto img, .casos__foto img { width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgba(7,25,70,0.25); }
.elegirnos__title { color: var(--azul); }
.elegirnos__title span { color: var(--azul-marca); }
.elegirnos__lista { list-style: none; margin: 8px 0 28px; }
.elegirnos__item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px dashed rgba(7,25,70,0.18); }
.elegirnos__item:last-child { border-bottom: none; }
.elegirnos__icono { flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--lavanda); color: var(--azul-marca); }
.elegirnos__item-title { font-weight: 800; font-size: 1.05rem; color: var(--azul); }
.elegirnos__item-desc { font-weight: 600; font-size: clamp(0.9rem, 0.86rem + 0.2vw, 1rem); color: rgba(7,25,70,0.78); margin-top: 2px; }

/* Franja «Cambiá hoy» (azul de marca) */
.franja { background: linear-gradient(120deg, #0a4677 0%, var(--azul-marca) 100%); padding: 56px 0; }
.franja__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.franja__title { color: var(--blanco); margin-bottom: 10px; }
.franja__title span { color: var(--amarillo); }
.franja__desc { font-size: 1.05rem; font-weight: 600; color: rgba(255,255,255,0.88); max-width: 560px; }
.franja__botones { display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
.franja__botones .btn-wsp { justify-content: center; }

/* Así de fácil (claro, lavanda) */
.pasos { background: var(--lavanda); padding: 72px 0; color: var(--azul); }
.pasos__header { text-align: center; margin-bottom: 40px; }
.pasos .eyebrow { color: var(--azul-marca); font-weight: 800; }
.pasos__title { color: var(--azul); }
.pasos__title span { color: var(--azul-marca); }
.pasos__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.paso { background: var(--blanco); border-radius: var(--radius-lg); padding: 28px 24px; text-align: center; box-shadow: 0 6px 24px rgba(1,48,153,0.08); }
.paso__num { font-family: var(--font-display); font-weight: 900; font-size: 2.2rem; color: var(--azul-marca); line-height: 1; margin-bottom: 12px; }
.paso__title { font-weight: 800; font-size: 1.1rem; margin-bottom: 8px; }
.paso__desc { font-weight: 600; font-size: 0.95rem; color: rgba(7,25,70,0.78); }

/* Vendemos baterías para (oscuro, con foto) */
.casos { background: var(--azul); padding: 72px 0; }
.casos__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; }
.casos__title span { color: var(--amarillo); }
.casos__lista { list-style: none; margin: 8px 0 22px; background: var(--azul-card); border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 8px 22px; }
.casos__lista li { display: flex; align-items: center; gap: 14px; padding: 16px 0; font-weight: 800; font-size: 1.08rem; border-bottom: 1px dashed rgba(255,255,255,0.16); }
.casos__lista li:last-child { border-bottom: none; }
.casos__lista svg { color: var(--amarillo); flex-shrink: 0; }
.casos__desc { color: var(--gris-claro); font-size: 1rem; margin-bottom: 24px; max-width: 520px; }

/* Preguntas frecuentes: acentos de BP en vez del rojo de SSCC */
.faq .eyebrow { color: var(--azul-marca); font-weight: 800; }
.faq__title { text-transform: none; color: var(--azul); font-size: clamp(1.5rem, 4vw, 2.2rem); }
.faq__title span { color: var(--azul-marca); }
.faq-item__q { color: var(--azul); }
.faq-item__q svg { color: var(--azul-marca); }
.faq-item.abierto { border-color: var(--azul-marca); }

/* CTA final (azul de marca) */
.cta-final { background: linear-gradient(120deg, #0a4677 0%, var(--azul-marca) 100%); }
.cta-final::before { display: none; }
.cta-final__title { color: var(--blanco); text-transform: none; }
.cta-final__title span { color: var(--amarillo); }
.cta-final__desc { color: rgba(255,255,255,0.88); }

/* Footer con dirección y horario, sin links que saquen de la landing */
.footer { background: #050f2e; padding: 40px 0 28px; border-top: none; }
.footer__emergencia { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid rgba(255,255,255,0.12); }
.footer__emergencia-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.4rem, 4vw, 2rem); }
.footer__emergencia-title span { color: var(--amarillo); }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.footer__grid img { height: 60px; width: auto; margin-bottom: 12px; }
.footer__label { font-weight: 800; color: var(--amarillo); letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.8rem; margin-bottom: 8px; }
.footer__texto { font-size: 0.92rem; color: rgba(255,255,255,0.82); line-height: 1.6; }
.footer__copy { text-align: left; }

@media (max-width: 860px) {
  .elegirnos__inner, .casos__inner { grid-template-columns: 1fr; gap: 32px; }
  .elegirnos__foto img, .casos__foto img { height: 300px; max-height: none; object-position: center 40%; }
  .casos__foto { order: -1; }
  .franja__inner { flex-direction: column; align-items: flex-start; }
  .franja__botones { width: 100%; }
  .pasos__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .franja .btn-wsp, .elegirnos .btn-wsp, .casos .btn-wsp { width: 100%; justify-content: center; }
}

/* Cotizador en pasos (2026-09-27): tarjetas de marca y de modelo. */
.opciones-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 6px 0 18px; }
.opcion {
  font-family: var(--font-body); font-size: 0.92rem; font-weight: 800; color: var(--blanco); cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1.5px solid rgba(255,255,255,0.16); border-radius: var(--radius);
  padding: 14px 8px; transition: border-color 0.15s, background 0.15s; line-height: 1.25;
}
.opcion:hover { border-color: var(--amarillo); background: rgba(250,221,20,0.10); }
.opcion--mas { color: var(--amarillo); border-style: dashed; }
.calc .vehiculo-elegido { margin-bottom: 20px; }
@media (max-width: 420px) { .opciones-grid { grid-template-columns: repeat(2, 1fr); } }

/* Paso 1: logo de marca (pedido de Carlos, 2026-09-28) — el ícono va antes
   del nombre, sobre una placa blanca, para reconocer la marca de un
   vistazo. 2 columnas: con logo + texto, 3 quedaba apretado en celular. */
#marcas-grid.opciones-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 480px) { #marcas-grid.opciones-grid { grid-template-columns: repeat(3, 1fr); } }
.opcion--marca { display: flex; align-items: center; gap: 10px; text-align: left; padding: 10px 12px; }
.opcion--marca-sin-logo { justify-content: center; text-align: center; }
.opcion__logo {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: var(--blanco); display: flex; align-items: center; justify-content: center;
}
.opcion__logo svg { width: 20px; height: 20px; fill: var(--azul); }
.opcion__nombre { font-size: 0.86rem; line-height: 1.2; }

/* Formato SSCC (2026-09-27): contador de auxilios dentro de «Por qué
   elegirnos» (como «Beneficios» de cercos), testimonios con colores de BP. */
.elegirnos__stat { display: flex; align-items: center; gap: 16px; background: var(--lavanda); border-radius: var(--radius); padding: 16px 20px; margin: 0 0 24px; }
.elegirnos__stat-num { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 6vw, 2.8rem); line-height: 1; color: var(--azul-marca); }
.elegirnos__stat-label { font-weight: 800; font-size: 0.9rem; line-height: 1.35; color: var(--azul); }
.franja .eyebrow { color: var(--amarillo); }
.testimonios .eyebrow { color: var(--azul-marca); font-weight: 800; }
.testimonios__title { color: var(--azul); }
.testimonios__title span { color: var(--azul-marca); }
.testimonio-card__foto--inicial { background: var(--amarillo); color: var(--azul); font-size: 0.95rem; }
.carrusel__dot.activo { background: var(--azul-marca); }