/* AUTO360 · estilo Bahía Motion (azul noche, dorado y naranja).
   Capa que se carga al final y solo cambia colores, letras y el logo: no toca la estructura.
   Para volver al estilo anterior basta con quitar este archivo de la página. */
:root{
  --paper:#060d1a;      /* fondo */
  --ink:#f3efe6;        /* texto */
  --muted:#a9b3c4;
  --accent:#e3b45a;     /* dorado */
  --line:rgba(227,180,90,.2);
  --dark:#0a1628;
  --bm-navy-1:#0a1628; --bm-navy-2:#10213a; --bm-navy-3:#1a2f4d;
  --bm-gold:#e3b45a; --bm-gold-2:#f2cf86; --bm-gold-d:#b8862f; --bm-orange:#f28c28;
  --bm-on-gold:#1a1408;
}
body{
  font-family:Montserrat,Arial,Helvetica,sans-serif;
  background:
    radial-gradient(1100px 520px at 88% -80px,rgba(242,140,40,.20),transparent 62%),
    radial-gradient(900px 600px at -10% 30%,rgba(227,180,90,.07),transparent 60%),
    var(--paper);
  color:var(--ink);
}
h1,h2{font-family:Cinzel,Georgia,serif;font-weight:700;letter-spacing:-.3px}
:focus-visible{outline-color:var(--bm-gold)}
.skip{background:var(--bm-gold);color:var(--bm-on-gold)}

/* ---------- Logo y encabezado ---------- */
.brand--bm{display:flex;align-items:center;gap:12px;letter-spacing:normal}
.brand--bm img{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 16px rgba(227,180,90,.35)}
.brand--bm .bt{display:block;font-family:Cinzel,Georgia,serif;font-size:22px;font-weight:700;letter-spacing:1px;line-height:1;color:var(--ink)}
.brand--bm .bt b{color:var(--bm-gold);font-weight:700}
.brand--bm .bt small{display:block;font-family:Montserrat,Arial,sans-serif;font-size:8.5px;letter-spacing:2.8px;color:var(--bm-gold);margin-top:6px;font-weight:600}
.header{background:rgba(6,13,26,.86);border-bottom-color:var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.header nav a{color:var(--muted)}
.header nav a:hover,.text-link:hover{color:var(--bm-gold-2)}
.login-link{color:var(--ink)}

/* ---------- Botones ---------- */
.button,.button.light{background:linear-gradient(180deg,var(--bm-gold-2),var(--bm-gold));color:var(--bm-on-gold);border-color:var(--bm-gold);box-shadow:0 8px 24px rgba(227,180,90,.22);font-weight:700}
.button:hover,.button.light:hover{background:linear-gradient(180deg,#f7dca0,var(--bm-gold-2))}
.button.outline{background:transparent;color:var(--bm-gold-2);border-color:var(--bm-gold);box-shadow:none}
.button.outline:hover{background:rgba(227,180,90,.1)}
.text-link{color:var(--bm-gold-2)}

/* ---------- Portada ---------- */
.dot,.demo-bar .dot{background:var(--bm-orange);box-shadow:0 0 8px var(--bm-orange)}
.eyebrow{color:var(--bm-gold)}
.hero h1>span,h2>span,.contact em{background:linear-gradient(180deg,var(--bm-gold-2),var(--bm-gold-d));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-note a{color:var(--bm-gold-2)}
.hero-visual{border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 0 6px rgba(227,180,90,.05)}
.round{background:linear-gradient(180deg,var(--bm-gold-2),var(--bm-gold));color:var(--bm-on-gold)}
.live{border-color:rgba(242,207,134,.6);color:var(--bm-gold-2)}
.feature-strip{background:var(--bm-navy-1);border-color:var(--line)}
.feature-strip i{color:var(--bm-gold)}

/* ---------- Secciones claras que pasan a azul ---------- */
.benefit-grid article,.studio-steps li{border-top-color:var(--line)}
.graphic{color:var(--bm-gold)}
.panorama span{border-color:var(--bm-gold-d)}
.detail span{background:rgba(227,180,90,.14);outline-color:var(--bm-gold-d)}
.steps li>span,.coverage-label,.plan-kicker{color:var(--bm-gold)}
.studio-n{background:linear-gradient(180deg,var(--bm-gold-2),var(--bm-gold));color:var(--bm-on-gold)}
.audience{background:var(--bm-navy-1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.audience p:not(.eyebrow){color:var(--muted)}
.questions summary:after{color:var(--bm-gold)}

/* Demo */
.demo-section{background:linear-gradient(180deg,var(--bm-navy-1),#081221);color:var(--ink);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.demo-heading>p,.demo-foot{color:var(--muted)}
.demo-shell{border-color:var(--line);background:#050b16}
.demo-bar{border-bottom-color:var(--line)}
.demo-symbol{color:var(--bm-gold)}

/* Tarjetas y planes */
.coverage-grid article,.single-plan{background:var(--bm-navy-1);border-color:var(--bm-navy-3)}
.coverage-grid article:last-child{background:transparent}
.coverage-grid .coverage-note{border-top-color:var(--bm-navy-3)}
.plan-card,.sp{background:var(--bm-navy-1);border-color:var(--bm-navy-3)}
.plan-card.featured,.sp--featured{border-color:var(--bm-gold);background:linear-gradient(180deg,rgba(227,180,90,.12),var(--bm-navy-1) 60%);box-shadow:0 20px 50px rgba(227,180,90,.1)}
.plan-card li,.sp li{border-bottom-color:var(--bm-navy-3)}
.plan-card li:before,.sp li:before{color:var(--bm-gold)}
.sp-badge{background:linear-gradient(180deg,var(--bm-gold-2),var(--bm-gold));color:var(--bm-on-gold)}
.remote-options a{border-color:var(--bm-navy-3)}
.remote-options a:hover{background:var(--bm-navy-1)}
.remote-options small{color:var(--bm-gold-2)}
.capacity-picker span{border-color:var(--bm-navy-3)}
.capacity-picker input:checked+span{background:var(--bm-gold);color:var(--bm-on-gold);border-color:var(--bm-gold)}

/* Contacto y pie */
.contact{background:radial-gradient(700px 300px at 80% 0,rgba(242,140,40,.18),transparent 70%),var(--bm-navy-1);color:var(--ink);border:1px solid var(--line)}
.contact .eyebrow{color:var(--bm-gold)}
.contact p:not(.eyebrow),.contact-actions small{color:var(--muted)}
footer{border-top:1px solid var(--line)}
footer p{color:var(--bm-gold);font-family:Cinzel,Georgia,serif}
.legal-links a:hover{color:var(--bm-gold-2)}

/* ---------- Páginas legales ---------- */
.legal p,.legal li{color:#d6dbe5}
.legal strong{color:var(--ink)}
.legal a{color:var(--bm-gold-2)}
.legal th{background:var(--bm-navy-2);color:var(--ink)}
.legal th,.legal td{border-bottom-color:var(--bm-navy-3)}
.legal .box{background:var(--bm-navy-1);border-color:var(--line)}
.legal-header{border-bottom-color:var(--line)}
.legal-header nav a:hover{color:var(--bm-gold-2)}

@media(max-width:620px){
  .brand--bm img{width:42px;height:42px}
  .brand--bm .bt{font-size:19px}
}