/* ============================================================
   Dealer Solutions · sistema visual compartido
   Se usa en todas las páginas del sitio. Lo específico de cada
   página va en su propio <style>, después de este archivo.
   ============================================================ */

:root{
  color-scheme:light;
  --bg:#F4F7FA; --surface:#FFFFFF; --surface-2:#EDF3F8;
  --text:#0A2540; --muted:#59708A; --line:#D5E0EA;
  --accent:#06B6D4; --accent-ink:#05505E; --bull:#4C86CC;
  --deep:#0A2540; --on-deep:#E9F2F9; --on-deep-muted:#9DB4CA;
  --shadow:0 1px 2px rgba(10,37,64,.06), 0 12px 32px -18px rgba(10,37,64,.35);
  /* Botón principal: navy sobre fondo claro. Los bloques navy lo redefinen
     abajo, porque un botón navy sobre navy no se vería. */
  --btn-bg:#0A2540; --btn-fg:#FFFFFF; --btn-bg-hover:#123252;
}

/* --- base --- */
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Archivo,"Arial Narrow",Arial,sans-serif; font-variation-settings:"wdth" 116; text-wrap:balance; margin:0}
h1{font-size:clamp(2.2rem,4.9vw,3.9rem); line-height:1.03; letter-spacing:-.025em; font-weight:700}
h2{font-size:clamp(1.65rem,3.1vw,2.5rem); line-height:1.08; letter-spacing:-.02em; font-weight:700}
h3{font-size:1.12rem; line-height:1.25; letter-spacing:-.008em; font-weight:700; font-variation-settings:"wdth" 108}
p{margin:0}
a{color:inherit}
.eyebrow{font-family:"IBM Plex Mono",monospace; font-size:.685rem; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-ink); font-weight:500}
.wrap{width:min(1140px,100% - 44px); margin-inline:auto}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:3px}

/* --- botones --- */
.btn{display:inline-flex; align-items:center; gap:.5em; border:0; cursor:pointer; font-family:"IBM Plex Sans",Arial,sans-serif; font-size:.95rem; font-weight:600; padding:12px 20px; border-radius:2px; text-decoration:none; transition:transform .15s ease, background .15s ease}
.btn-primary{background:var(--btn-bg); color:var(--btn-fg)}
.btn-primary:hover{transform:translateY(-1px); background:var(--btn-bg-hover)}

/* Sobre los bloques de fondo navy el botón vuelve al cyan */
.contact,.art-cta,.cierre,.calc-cierre,.cierre-pro,footer{
  --btn-bg:var(--accent); --btn-fg:#04202B; --btn-bg-hover:#3DCBE3;
}
.btn-ghost{background:transparent; color:var(--text); box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost:hover{box-shadow:inset 0 0 0 1px var(--accent)}

/* --- barra de navegación --- */
.nav{position:sticky; top:0; z-index:20; background:rgba(244,247,250,.9); backdrop-filter:blur(9px); border-bottom:1px solid var(--line)}
.nav-in{display:flex; align-items:center; gap:28px; padding:13px 0}
.logo{height:32px; width:auto; display:block}
.nav-links{display:flex; gap:26px; margin-left:auto; font-size:.93rem}
.nav-links a{text-decoration:none; color:var(--muted); white-space:nowrap}
.nav-links a:hover{color:var(--text)}
.nav-links a[aria-current="page"]{color:var(--text); border-bottom:2px solid var(--accent); padding-bottom:2px}
.nav .btn{padding:10px 16px}
/* la copia del CTA solo existe para el menú desplegable */
.nav-links .btn{display:none}
@media (max-width:940px){.nav-links{display:none}}

/* --- estructura de secciones --- */
section{padding:62px 0}
.sec-head{border-top:2px solid var(--accent); padding-top:16px; margin-bottom:34px}
.sec-head h2{max-width:20ch}
.sec-sub{color:var(--muted); margin-top:14px; max-width:62ch}
.rail{display:grid; grid-template-columns:190px 1fr; gap:44px; align-items:start}
.rail .kicker{position:sticky; top:78px}
@media (max-width:820px){
  .rail{grid-template-columns:1fr; gap:14px}
  /* al colapsar a una columna, dejar el bloque fijo encimaría los textos */
  .rail .kicker{position:static}
}

/* --- banda navy (origen y sectores) --- */
.band{background:var(--deep); color:var(--on-deep)}
.band .wrap{padding:52px 0}
.band-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:48px; align-items:center}
.band h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.band p{color:var(--on-deep-muted); margin-top:16px; max-width:46ch}
.band .eyebrow{color:var(--accent)}
.creds{display:grid; gap:0; border-top:1px solid rgba(255,255,255,.14)}
.cred{display:grid; grid-template-columns:auto 1fr; gap:14px; padding:13px 0; border-bottom:1px solid rgba(255,255,255,.14); font-size:.94rem}
.cred .n{color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:.78rem; padding-top:.25em}
.cred b{font-weight:600; color:var(--on-deep)}
.cred span{color:var(--on-deep-muted)}
@media (max-width:860px){.band-grid{grid-template-columns:1fr; gap:26px}}

/* --- en corto: hechos extraíbles al inicio de cada página --- */
.encorto{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); padding:20px 24px; margin:30px 0 0}
.encorto .lbl{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:12px}
.encorto dl{margin:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px 28px}
.encorto dt{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:4px}
.encorto dd{margin:0; font-size:.95rem; color:var(--text); line-height:1.45}
.encorto dd a{color:inherit; border-bottom:1px solid var(--accent); text-decoration:none}

/* --- preguntas frecuentes --- */
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:18px 0; display:flex; gap:16px; align-items:baseline; font-weight:600; font-size:1.02rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; margin-left:auto; color:var(--accent); font-family:"IBM Plex Mono",monospace; font-size:1.25rem; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 0 20px; color:var(--muted); max-width:68ch; font-size:.98rem}

/* --- contacto y formulario --- */
.contact{background:var(--deep); color:var(--on-deep)}
.contact .wrap{padding:62px 0}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start}
.contact h2{max-width:15ch}
.contact .eyebrow{color:var(--accent)}
.contact p.lede{color:var(--on-deep-muted); margin-top:16px; max-width:42ch}
.contact-list{margin-top:24px; display:grid; gap:9px; font-size:.94rem; color:var(--on-deep-muted)}
form{display:grid; gap:13px}
.field{display:grid; gap:6px}
.field label{font-family:"IBM Plex Mono",monospace; font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent)}
.field input,.field select,.field textarea{font-family:"IBM Plex Sans",Arial,sans-serif; font-size:.97rem; color:var(--on-deep); background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.18); border-radius:2px; padding:11px 13px; width:100%}
.field textarea{resize:vertical; min-height:80px}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.34)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent); outline:none}
.field select option{color:#0A2540; background:#FFF}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
form .btn{justify-content:center; margin-top:4px}
.form-note{font-size:.76rem; color:var(--on-deep-muted)}
.form-note.ok{color:var(--accent)}
.form-note.err{color:#FFB4A2}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
#submitBtn[disabled]{opacity:.6; cursor:progress}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr; gap:34px}}
@media (max-width:520px){.row2{grid-template-columns:1fr}}

/* --- pie de página --- */
footer{background:var(--deep); color:var(--on-deep-muted); border-top:1px solid rgba(255,255,255,.12)}
.foot{display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; gap:30px; padding:34px 0 28px; font-size:.85rem}
.foot img{height:26px; width:auto; margin-bottom:12px}
.foot h4{font-family:"IBM Plex Mono",monospace; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin:0 0 10px; font-weight:500}
.foot ul{margin:0; padding:0; list-style:none; display:grid; gap:7px}
.foot a{color:var(--on-deep-muted); text-decoration:none}
.foot a:hover{color:var(--on-deep)}
.foot-bar{border-top:1px solid rgba(255,255,255,.12); padding:14px 0; font-size:.78rem; display:flex; flex-wrap:wrap; gap:12px 24px}
@media (max-width:980px){.foot{grid-template-columns:1fr 1fr; gap:26px}}

/* --- conversación de ejemplo del agente --- */
.chat{background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--accent); box-shadow:var(--shadow); padding:18px 18px 16px}
.chat-head{display:flex; align-items:center; gap:10px; padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:14px}
.chat-head .dot{width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none}
.chat-head b{font-size:.9rem; font-weight:600}
.chat-head span{font-family:"IBM Plex Mono",monospace; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-left:auto}
.msgs{display:grid; gap:10px}
.msg{max-width:88%; padding:10px 13px; font-size:.92rem; line-height:1.45; border-radius:2px}
.msg.them{background:var(--surface-2); color:var(--text); justify-self:start; border-left:2px solid var(--line)}
.msg.us{background:rgba(6,182,212,.12); color:var(--text); justify-self:end; border-right:2px solid var(--accent)}
.msg .who{display:block; font-family:"IBM Plex Mono",monospace; font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:5px}
.chat-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:grid; gap:6px}
.chat-foot p{font-size:.8rem; color:var(--muted); display:grid; grid-template-columns:auto 1fr; gap:9px}
.chat-foot svg{margin-top:4px}
.chat-note{margin-top:12px; font-size:.72rem; color:var(--muted)}

/* --- menú móvil --- */
.nav-toggle{
  display:none; margin-left:auto; align-items:center; gap:9px; cursor:pointer;
  background:transparent; border:1px solid var(--line); border-radius:2px;
  padding:9px 13px; font-family:"IBM Plex Mono",monospace; font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text);
}
.nav-toggle .barras{display:grid; gap:3px; width:15px}
.nav-toggle .barras i{display:block; height:2px; background:var(--text); border-radius:1px}
.nav-toggle[aria-expanded="true"]{border-color:var(--accent); color:var(--accent-ink)}

@media (max-width:940px){
  .nav-toggle{display:inline-flex}
  .nav-in{gap:12px}
  .nav-links{
    display:none; position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0; background:var(--bg);
    border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:4px 22px 16px; z-index:40;
  }
  .nav-links.abierto{display:flex}
  .nav-links a{padding:14px 0; border-bottom:1px solid var(--line); font-size:1rem; color:var(--text)}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a[aria-current="page"]{border-bottom:1px solid var(--line); color:var(--accent-ink)}
  .nav .btn{padding:10px 14px; font-size:.86rem}
}
@media (max-width:640px){
  /* el logo horizontal es ancho: a esta altura la barra ya no da para el CTA,
     así que baja al menú desplegable */
  .logo{height:24px}
  .nav-in{padding:11px 0}
  .nav > .wrap > .btn,.nav-in > .btn{display:none}
  .nav-toggle span:not(.barras){display:none}
  .nav-toggle{padding:10px 12px}
  .nav-links .btn{display:inline-flex; justify-content:center; margin-top:14px; width:100%; color:var(--btn-fg)}
}

/* --- módulos plegables en móvil --- */
.mod-tog{display:none}
@media (max-width:760px){
  .mod{cursor:pointer}
  .mod .mod-cabeza{display:flex; align-items:center; gap:12px; width:100%}
  .mod-tog{
    display:inline-flex; align-items:center; justify-content:center;
    margin-left:auto; flex:none; width:26px; height:26px;
    border:1px solid var(--line); border-radius:2px; color:var(--accent);
    font-family:"IBM Plex Mono",monospace; font-size:1.05rem; line-height:1;
  }
  .mod.abierto .mod-tog{border-color:var(--accent)}
  /* Se oculta solo mientras está cerrado: así al abrirse cada elemento
     recupera su display natural (grid, flex o block) sin pelearse con las
     reglas del componente. */
  .mod:not(.abierto) .mod-det{display:none}

  /* respirar mejor en pantallas chicas */
  body{font-size:16px}
  section{padding:42px 0}
  .sec-head{margin-bottom:24px}
  .band .wrap,.contact .wrap{padding:40px 0}
}

/* --- botón flotante de WhatsApp --- */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:60;
  display:inline-flex; align-items:center; gap:0;
  background:#25D366; color:#04202B; text-decoration:none;
  border-radius:999px; padding:14px; box-shadow:0 6px 22px -6px rgba(10,37,64,.5);
  transition:gap .2s ease, padding .2s ease, transform .15s ease;
}
.wa-fab:hover{transform:translateY(-2px)}
.wa-fab svg{flex:none; display:block}
.wa-fab span{
  max-width:0; overflow:hidden; white-space:nowrap; opacity:0;
  font-size:.92rem; font-weight:600; transition:max-width .25s ease, opacity .2s ease;
}
.wa-fab:hover span,.wa-fab:focus-visible span{max-width:190px; opacity:1}
.wa-fab:hover,.wa-fab:focus-visible{gap:10px; padding-right:20px}
@media (max-width:600px){.wa-fab{right:14px; bottom:14px}}
@media (prefers-reduced-motion:reduce){.wa-fab,.wa-fab span{transition:none}}

@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}