/* ═══════════════════════════════════════════════════════════════════════════
   PALETA «ÁMBAR» (aprobada por Camilo el 21-oct-2026)
   La misma del panel del bot («Liquid Glass nocturno»), que a su vez sale de la
   página de showrooms: casi negro, texto crema y la luz cálida de ventana
   (ámbar) como único acento. El violeta sale de la página; la marca la sostiene
   el logo blanco. El verde de WhatsApp se queda, pero sólo donde hay un chat o
   un botón de WhatsApp.

   Se carga DESPUÉS de todas las hojas de la landing y sólo hace dos cosas:
   1) redefinir las variables de color que ya usan esas hojas (--lime, --accent,
      --grad, --text…), así casi todo cambia solo;
   2) pisar los pocos colores que estaban escritos a mano (violeta, lima, el
      morado del fondo, el chat claro de WhatsApp).
   Quitar este archivo (y su <link> en index.html) devuelve la web a la paleta
   violeta anterior.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* — base, idéntica al panel — */
  --bg:#07080B; --bg-2:#0C0E13; --surface:#12151C; --surface-2:#0C0E13; --active:#1A1E27;
  --text:#EDE8DF; --head:#F5F0E7; --muted:#A8A196; --line:rgba(237,232,223,.10);
  --luz:#F3C98B; --luz-2:#E9AE62; --sobre-luz:#160F05; --cafe:#7A4B1C;
  --wa:#00A884; --wa-burbuja:#005C4B;

  /* — vidrio cálido (el .vidrio del panel) — */
  --glass-bg:rgba(255,244,228,.045);
  --glass-brd:rgba(237,232,223,.13);
  --glass-hi:rgba(255,248,236,.30);
  --shadow:0 34px 80px -32px rgba(0,0,0,.9);

  /* — acentos: las hojas viejas llaman «lime» a la acción principal y «accent»
       al color de marca; aquí los dos son la luz ámbar — */
  --lime:var(--luz); --lime-ink:var(--sobre-luz);
  --accent:#E9AE62; --accent-2:#F3C98B; --accent-ink:var(--sobre-luz);
  --grad:linear-gradient(135deg,#F7D6A2 0%,#F3C98B 40%,#E9AE62 100%);
  --chip-bg:rgba(243,201,139,.09); --chip-tx:#F3C98B;
  --halo:rgba(233,174,98,.20);       /* sombras y halos teñidos */
}

/* ── Fondo: noche con luces cafés (el .ini-fondo del panel) ──────────────────
   Sin filter:blur — los degradados radiales ya son suaves, y el blur fijo era
   lo que en efectos.css desenfocaba el texto. Se mueve con transform, que no
   obliga a repintar la página. */
/* Sólo el body lleva fondo: así el navegador lo pasa al lienzo y las luces
   (z-index negativo) quedan por ENCIMA de él. Si html tuviera fondo propio, el
   del body taparía las luces. */
body{background:var(--bg)}
body::before{
  content:"";position:fixed;inset:0;z-index:-3;pointer-events:none;filter:none;animation:none;
  background:
    radial-gradient(90% 55% at 80% 2%,rgba(243,201,139,.16) 0%,transparent 60%),
    radial-gradient(80% 50% at 0% 45%,rgba(233,174,98,.09) 0%,transparent 65%),
    linear-gradient(180deg,#121219 0%,var(--bg) 62%);
}
body::after{
  content:"";position:fixed;inset:-20%;z-index:-3;pointer-events:none;
  background:
    radial-gradient(closest-side at 18% 30%,rgba(233,174,98,.16),transparent),
    radial-gradient(closest-side at 86% 55%,rgba(243,201,139,.11),transparent),
    radial-gradient(closest-side at 40% 88%,rgba(122,75,28,.30),transparent),
    radial-gradient(closest-side at 78% 12%,rgba(255,227,179,.10),transparent);
  background-size:70% 70%,60% 60%,65% 65%,26% 26%;
  background-repeat:no-repeat;
  background-position:0 10%,100% 40%,30% 100%,85% 0;
  animation:nocheDeriva 26s ease-in-out infinite alternate;
}
@keyframes nocheDeriva{to{transform:translate3d(4%,-3%,0) scale(1.08)}}
@media (prefers-reduced-motion:reduce){body::after{animation:none}}

/* ── Toque y foco ── */
a,button,summary,[role="button"],input,select,textarea{-webkit-tap-highlight-color:rgba(243,201,139,.16)}

/* ── Vidrio: tarjetas, planes, FAQ, CTA ── */
.card,.auto,.plan,.cta-box{
  background:linear-gradient(160deg,rgba(255,244,228,.10),rgba(255,244,228,.03) 55%,rgba(255,244,228,.05)),rgba(18,21,28,.55);
  box-shadow:inset 0 1px 0 rgba(255,248,236,.34),inset 0 0 0 1px rgba(255,255,255,.03),0 30px 70px -30px rgba(0,0,0,.85);
}
.card:hover,.auto:hover,.plan:hover{
  box-shadow:inset 0 1px 0 rgba(255,248,236,.5),inset 0 0 0 1px rgba(255,255,255,.05),0 48px 96px -34px var(--halo);
}
.card::before,.auto::before,.plan::before{background:linear-gradient(100deg,transparent 15%,rgba(255,240,215,.10) 85%,transparent)}
.nav{background:rgba(12,14,19,.62);box-shadow:inset 0 1px 0 rgba(255,248,236,.28),0 26px 64px -26px rgba(0,0,0,.85)}
.faq-item{background:linear-gradient(160deg,rgba(255,244,228,.07),rgba(255,244,228,.02)),rgba(18,21,28,.5)}
.btn-ghost{background:rgba(255,244,228,.06);border-color:rgba(237,232,223,.18);color:var(--text)}
.btn-ghost:hover{border-color:rgba(243,201,139,.45)}
/* Menú del celular: fondo sólido y sin desenfoque. Con el desenfoque, Chrome
   lo calcula contra la píldora del menú (que ya está desenfocada) y el titular
   de la portada se transparentaba debajo de los enlaces. Pasa igual hoy en la
   versión publicada. */
@media(max-width:900px){.nav-links{background:#0C0E13;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Logo blanco con un halo cálido apenas visible, como el emblema del panel */
.nav .logo,.footer .flogo{filter:drop-shadow(0 0 22px rgba(243,201,139,.16))}

/* ── Botones de acción: ámbar con tinta café oscura (contraste ≈ 12:1) ── */
.btn-primary,.nav-cr{
  background:var(--grad);color:var(--sobre-luz);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 16px 34px -14px rgba(233,174,98,.55);
}
.btn-primary:hover,.nav-cr:hover{
  background:linear-gradient(135deg,#FADFB4 0%,#F5D09A 40%,#EDB872 100%);color:var(--sobre-luz);border-color:transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 22px 44px -14px rgba(233,174,98,.65);
}
.btn-primary .ico{background:rgba(22,15,5,.14)}
.nav-cr-360{background:transparent;color:var(--luz);border-color:rgba(243,201,139,.5);box-shadow:none}
.nav-cr-360:hover{background:rgba(243,201,139,.12);color:var(--luz);border-color:var(--luz);box-shadow:none}
.nav-links a:hover{color:var(--luz)}

/* ── Rótulos (eyebrow) y números ── */
.eyebrow{border-color:color-mix(in srgb,var(--chip-tx) 28%,transparent)}
.hero-stats .s b{color:var(--head)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.plan .badge,.demo .badge,.cr-badge{background:var(--luz);color:var(--sobre-luz)}

/* ── Marcas de ✓: el SVG traía el trazo verde/violeta escrito a mano ── */
.plan li::before,.t360-list li::before,.lista-check li::before{
  background-color:rgba(243,201,139,.13);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F3C98B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

/* ── Plan recomendado: la línea que recorre el borde pasa de lima a ámbar ── */
.plan.feat{border-color:rgba(243,201,139,.4);box-shadow:inset 0 1px 0 rgba(255,248,236,.4),0 30px 70px -30px rgba(233,174,98,.4)}
.plan.feat::after{
  background:conic-gradient(from var(--bAng),
    rgba(243,201,139,.10) 0deg,rgba(243,201,139,.10) 245deg,
    rgba(243,201,139,.5) 298deg,#F3C98B 338deg,#FFF1D8 352deg,#F3C98B 360deg);
  filter:drop-shadow(0 0 7px rgba(243,201,139,.45));
}

/* ── Íconos de las tarjetas ── */
.card:hover .ic{background:linear-gradient(160deg,#F3C98B,#E9AE62);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 6px 18px -8px rgba(233,174,98,.55)}
.svc .ic{background:linear-gradient(160deg,rgba(243,201,139,.20),rgba(243,201,139,.04))}
.alc-top .ic,.card .ic{box-shadow:inset 0 1px 0 rgba(255,248,236,.25),0 8px 20px -10px rgba(0,0,0,.6)}

/* ── Banda «Todo lo que construimos es tuyo»: la ventana encendida ──
   Era un bloque violeta con letra blanca. En ámbar, la letra pasa a café
   oscuro: blanco sobre ámbar no se lee. */
.value-in{background:var(--grad);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 50px 110px -40px rgba(233,174,98,.55)}
.value-in::after{background:radial-gradient(60% 120% at 50% -10%,rgba(255,255,255,.35),transparent 60%)}
.value-in h2{color:var(--sobre-luz)}
.value-in p{color:rgba(22,15,5,.78)}

/* ── Selector de rubro ── */
.rubro-chips button{background:rgba(255,244,228,.05);border-color:rgba(237,232,223,.14)}
.rubro-chips button:hover{border-color:rgba(243,201,139,.5)}
.rubro-chips button[aria-pressed="true"]{background:var(--luz);border-color:var(--luz);color:var(--sobre-luz)}

/* ── Franja de herramientas ── */
.tlogo{background:rgba(255,244,228,.05)}
.tlogo svg{color:var(--text)}
.tlogo:hover svg{color:var(--luz)}

/* ── Teléfono del hero: WhatsApp en modo oscuro, como los chats del panel ── */
.phone{box-shadow:inset 0 1px 0 rgba(255,248,236,.3),0 50px 100px -30px rgba(233,174,98,.35);
  background:linear-gradient(160deg,rgba(255,244,228,.12),rgba(255,244,228,.03))}
.phone .glow{background:radial-gradient(50% 50% at 50% 50%,rgba(233,174,98,.32),transparent 62%)}
.phone-in{background:#0B141A}
.chat-top{background:#12151C;border-bottom:1px solid var(--line)}
.chat-top .who b{color:var(--text)}
.chat-top .who span{color:#7FD6BE}
.chat-top .who span i{background:var(--wa)}
.chat-top .actions{color:var(--muted)}
.chat-body{background-color:#07080B;background-blend-mode:normal;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23EDE8DF' stroke-opacity='.05' stroke-width='1.3' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M70 14l4 9 9 1-7 6 2 9-8-5-8 5 2-9-7-6 9-1z'/%3E%3Cpath d='M96 70c-6-5-9-8-9-11a4 4 0 0 1 9-2 4 4 0 0 1 9 2c0 3-3 6-9 11z'/%3E%3Crect x='14' y='76' width='18' height='12' rx='2'/%3E%3Cpath d='M52 96h14M59 89v14'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px}
.bub{box-shadow:0 1px .5px rgba(0,0,0,.35)}
.bub.in{background:#1F2C33;color:#E9EDEF}
.bub.out{background:var(--wa-burbuja);color:#E9EDEF}
.bub.in .meta,.bub.out .meta{color:rgba(233,237,239,.6)}
.bub .tick{color:#53BDEB}
.bub.typing{background:#1F2C33}
.bub.typing i{background:#8696A0}
.chat-foot{background:#0C0E13;border-top:1px solid var(--line)}
.chat-foot .fake{background:#1F2C33;color:#8696A0;box-shadow:none}
.chat-foot .send{background:var(--wa)}

/* ── Maquetas de chat y cobro de las bandas ── */
.burbuja.de-ellos{background:#1F2C33;color:#E9EDEF}
.burbuja.de-nosotros{background:var(--wa-burbuja);color:#E9EDEF}
.mock-pie .pip{background:var(--wa)}
.mock-chat,.mock-cobro,.video-lado{box-shadow:0 40px 90px -45px var(--halo)}
.video-lado,.t360-frame,.t360-reel-video{background:#050608}

/* ── Botón flotante de WhatsApp: el verde de los chats del panel ── */
.wa-fab{background:var(--wa);box-shadow:0 8px 20px -8px rgba(0,168,132,.55)}
.wa-fab:hover{box-shadow:0 14px 32px -8px rgba(0,168,132,.75)}
.wa-fab .ring{background:var(--wa)}

/* ── Formulario (modal) ── */
.modal-ov{background:rgba(5,6,8,.74)}
.modal{background:linear-gradient(160deg,rgba(255,244,228,.08),rgba(255,244,228,.02)),var(--surface);
  box-shadow:0 40px 100px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,248,236,.3)}
#demoForm input,#demoForm textarea,.tel-row select{background:rgba(255,244,228,.05)}
#demoForm input::placeholder,#demoForm textarea::placeholder{color:#857E73}
#demoForm input:focus-visible,#demoForm textarea:focus-visible,.tel-row select:focus-visible{box-shadow:0 0 0 3px rgba(243,201,139,.32)}
.tel-row select option{background:var(--surface)}
.modal-ok .ok-ic{box-shadow:0 10px 26px -10px rgba(233,174,98,.6)}

/* ── Pie ── */
.footer{border-top-color:var(--line)}
.foot-links a{text-decoration-color:rgba(237,232,223,.25)}