/* ═══════════════════════════════════════════════════════════
   C1G — estilos compartidos por todas las páginas
   Para cambiar un color en todo el sitio, cambialo acá abajo.
   ═══════════════════════════════════════════════════════════ */

:root{
  /* superficies */
  --ink:        #121417;   /* grafito */
  --ink-2:      #1A1D22;
  --bone:       #E9E4DB;   /* hueso cálido */
  --bone-2:     #DFD9CE;
  --paper:      #F1EDE6;

  /* texto */
  --on-ink:     #ECE8E1;
  --on-ink-dim: #9CA0A7;
  --on-bone:    #16181C;
  --on-bone-dim:#5F5A53;

  /* marca: violeta de C1G, plano */
  --accent:        #7A36E6;   /* fondo de botones (texto blanco) */
  --accent-hover:  #6526CC;
  --accent-on-ink: #B695FF;   /* texto acentuado sobre grafito */
  --accent-on-bone:#6A2BD9;   /* texto acentuado sobre hueso */

  /* líneas */
  --rule-ink:  rgba(236,232,225,.12);
  --rule-bone: rgba(22,24,28,.16);

  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wrap: 1160px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
}

/* ── base ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6;
  background:var(--ink);color:var(--on-ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
img{display:block;max-width:100%;height:auto;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
[hidden]{display:none !important;}   /* que "hidden" gane siempre, aunque el elemento tenga display propio */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}

/* ── tipografía ───────────────────────────────────────────── */
h1,h2,h3{font-weight:700;letter-spacing:-.022em;line-height:1.05;}
h1{font-size:clamp(2.35rem,6.2vw,4.75rem);font-stretch:108%;font-weight:750;}
h2{font-size:clamp(1.8rem,3.6vw,2.9rem);font-stretch:104%;max-width:20ch;}
h3{font-size:1.3rem;letter-spacing:-.012em;}
.label{
  font-family:var(--mono);font-size:.78rem;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;
}
.lead{font-size:clamp(1.08rem,1.6vw,1.25rem);max-width:34rem;}

/* ── superficies ──────────────────────────────────────────── */
.s-ink {background:var(--ink); color:var(--on-ink);}
.s-bone{background:var(--bone);color:var(--on-bone);}
.s-ink  .acc{color:var(--accent-on-ink);}
.s-bone .acc{color:var(--accent-on-bone);}
.s-ink  .dim{color:var(--on-ink-dim);}
.s-bone .dim{color:var(--on-bone-dim);}
section{padding:clamp(4.5rem,9vw,7.5rem) 0;}
section.tight-top{padding-top:0;}

.sec-num{display:flex;gap:1rem;align-items:baseline;margin-bottom:1.5rem;}
.s-ink  .sec-num{color:var(--on-ink-dim);}
.s-bone .sec-num{color:var(--on-bone-dim);}
.sec-num::after{content:"";flex:1;height:1px;align-self:center;}
.s-ink  .sec-num::after{background:var(--rule-ink);}
.s-bone .sec-num::after{background:var(--rule-bone);}
.sec-intro{margin-top:1.1rem;max-width:36rem;}

/* ── botones y enlaces ────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--sans);font-weight:650;font-size:1rem;letter-spacing:-.005em;
  padding:.95rem 1.4rem;border-radius:6px;text-decoration:none;border:none;cursor:pointer;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn-main{background:var(--accent);color:#fff;}
.btn-main:hover{background:var(--accent-hover);}
.btn-main:disabled{opacity:.6;cursor:default;}
.btn-line{background:transparent;border:1px solid currentColor;}
.s-ink  .btn-line{color:var(--on-ink);}
.s-ink  .btn-line:hover{color:var(--accent-on-ink);}
.s-bone .btn-line{color:var(--on-bone);}
.s-bone .btn-line:hover{color:var(--accent-on-bone);}
.btn .arr{font-family:var(--mono);font-weight:400;}
.btn svg{width:1.1em;height:1.1em;flex-shrink:0;}

.tlink{
  font-family:var(--mono);font-size:.85rem;text-decoration:none;padding-bottom:2px;
}
.s-ink  .tlink{color:var(--on-ink);border-bottom:1px solid var(--accent-on-ink);}
.s-ink  .tlink:hover{color:var(--accent-on-ink);}
.s-bone .tlink{color:var(--on-bone);border-bottom:1px solid var(--accent-on-bone);}
.s-bone .tlink:hover{color:var(--accent-on-bone);}

:focus-visible{outline:2px solid var(--accent-on-ink);outline-offset:3px;}
.s-bone :focus-visible{outline-color:var(--accent-on-bone);}

/* ── barra superior ───────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:1.1rem 0;border-bottom:1px solid var(--rule-ink);position:relative;
}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;flex-shrink:0;}
.brand img{width:2.4rem;height:2.4rem;}
.brand .label{color:var(--on-ink-dim);}

.nav{display:flex;align-items:center;gap:2rem;}
.nav ul{list-style:none;display:flex;gap:1.75rem;}
.nav ul a{font-size:.95rem;text-decoration:none;color:var(--on-ink-dim);}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--on-ink);}
.nav ul a.hl{color:var(--on-ink);}
.nav ul a.hl::after{content:" ●";color:var(--accent-on-ink);font-size:.6em;vertical-align:.25em;}
.nav .btn{padding:.6rem 1rem;font-size:.9rem;}

.menu-btn{
  display:none;background:none;border:1px solid var(--rule-ink);border-radius:6px;
  color:var(--on-ink);font-family:var(--mono);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;padding:.55rem .8rem;cursor:pointer;
}

/* ── hero ─────────────────────────────────────────────────── */
.hero{padding:clamp(3rem,7vw,5.5rem) 0 clamp(4rem,8vw,6.5rem);}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.hero .kicker{color:var(--accent-on-ink);display:block;margin-bottom:1.6rem;}
.hero h1 span{display:block;}
.hero .lead{margin:1.75rem 0 2.25rem;color:var(--on-ink-dim);}
.hero .lead strong{color:var(--on-ink);font-weight:600;}
.hero .note{margin-top:1rem;font-size:.9rem;color:var(--on-ink-dim);max-width:30rem;}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;}

/* ── panel genérico (sobre grafito) ───────────────────────── */
.panel{border:1px solid var(--rule-ink);border-radius:8px;background:var(--ink-2);}
.panel-head{
  display:flex;justify-content:space-between;gap:1rem;
  padding:.85rem 1.1rem;border-bottom:1px solid var(--rule-ink);color:var(--on-ink-dim);
}
.panel-foot{
  display:flex;align-items:center;gap:.6rem;
  padding:.85rem 1.1rem;border-top:1px solid var(--rule-ink);color:var(--accent-on-ink);
}
.panel-foot.live::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--accent-on-ink);}
.panel-caption{margin-top:.7rem;color:var(--on-ink-dim);}

/* conversación (demo encuesta) */
.chat{padding:1.25rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.6rem;}
.msg{max-width:84%;padding:.6rem .85rem;border-radius:8px;font-size:.95rem;line-height:1.45;}
.msg.in {align-self:flex-start;background:#23272E;border-top-left-radius:2px;}
.msg.out{align-self:flex-end;background:#2F2447;border-top-right-radius:2px;}

/* caso en producción (home) */
.case-rows{list-style:none;}
.case-rows li{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:1rem 1.1rem;border-bottom:1px solid var(--rule-ink);
}
.case-rows li:last-child{border-bottom:none;}
.case-rows .what{font-size:.97rem;}
.case-rows .val{font-family:var(--mono);font-size:.95rem;color:var(--on-ink);white-space:nowrap;}
.panel-foot a{color:inherit;text-decoration:none;font-family:var(--mono);font-size:.85rem;}
.panel-foot a:hover{text-decoration:underline;}

/* ── listas con reglas ────────────────────────────────────── */
.ruled{list-style:none;border-top:1px solid var(--rule-bone);}
.s-ink .ruled{border-top-color:var(--rule-ink);}
.ruled > li{border-bottom:1px solid var(--rule-bone);}
.s-ink .ruled > li{border-bottom-color:var(--rule-ink);}

/* problemas (concesionarias) */
.problems{margin-top:2.75rem;}
.problems li{
  display:grid;grid-template-columns:4rem 1fr;gap:1rem;align-items:baseline;
  padding:1.35rem 0;font-size:clamp(1.1rem,2vw,1.4rem);letter-spacing:-.01em;
}
.problems .label{color:var(--on-bone-dim);}

/* servicios (home) */
.services{margin-top:3rem;}
.services li{
  display:grid;grid-template-columns:4rem minmax(0,1fr) minmax(0,1.3fr);gap:1.5rem;
  align-items:baseline;padding:1.6rem 0;
}
.services .label{color:var(--accent-on-bone);}
.services h3{font-size:clamp(1.2rem,2vw,1.5rem);}
.services p{color:var(--on-bone-dim);}

/* por qué (home) */
.reasons{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:2rem 2.5rem;margin-top:3rem;list-style:none;}
.reasons li{border-top:1px solid var(--rule-bone);padding-top:1.1rem;}
.reasons h3{font-size:1.15rem;margin-bottom:.4rem;}
.reasons p{color:var(--on-bone-dim);font-size:1rem;}

/* ── producto (concesionarias) ────────────────────────────── */
.products{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);margin-top:3rem;}
.product{border-top:2px solid var(--on-bone);padding-top:1.5rem;}
.s-ink .product{border-top-color:var(--on-ink);}
.product h3{margin-bottom:.8rem;}
.product > p{max-width:30rem;}
.s-bone .product > p{color:var(--on-bone-dim);}
.s-ink  .product > p{color:var(--on-ink-dim);}
.product .sub{margin:1.9rem 0 .8rem;color:var(--on-bone-dim);}

.qlist li{display:grid;grid-template-columns:2.5rem 1fr;gap:.5rem;padding:.8rem 0;}
.qlist .label{color:var(--accent-on-bone);padding-top:.15rem;}

.review{border:1px solid var(--rule-bone);border-radius:8px;background:var(--paper);}
.review + .review{margin-top:1rem;}
.review-top{padding:1rem 1.1rem;}
.stars{font-size:1rem;letter-spacing:.12em;color:#B7791A;}
.stars .off{color:#CFC7BA;}
.review-top p{margin-top:.45rem;font-size:.97rem;}
.review-reply{
  padding:1rem 1.1rem;border-top:1px solid var(--rule-bone);
  background:var(--bone-2);border-radius:0 0 8px 8px;font-size:.97rem;
}
.review-reply .label{display:block;margin-bottom:.4rem;color:var(--accent-on-bone);}

/* bloque destacado de industria (home) */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:end;}
.feature-list{margin-top:.5rem;}
.feature-list li{display:grid;grid-template-columns:2.5rem 1fr;gap:.75rem;padding:1.1rem 0;}
.feature-list .label{color:var(--accent-on-ink);padding-top:.25rem;}
.feature-list strong{display:block;font-weight:650;margin-bottom:.15rem;}
.feature-list span.dim{font-size:.97rem;}

/* ── números ──────────────────────────────────────────────── */
.case{margin-top:1.1rem;color:var(--on-ink-dim);}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:3rem;border-top:1px solid var(--rule-ink);}
.stat{padding:1.75rem 1.5rem 0 0;}
.stat + .stat{padding-left:1.5rem;border-left:1px solid var(--rule-ink);}
.stat-num{
  font-family:var(--mono);font-weight:500;letter-spacing:-.04em;line-height:1;
  font-size:clamp(2.2rem,4.6vw,3.6rem);color:var(--on-ink);font-variant-numeric:tabular-nums;
}
.stat-what{margin-top:.9rem;font-weight:600;}
.stat-sub{margin-top:.2rem;font-size:.92rem;color:var(--on-ink-dim);}

/* ── pasos ────────────────────────────────────────────────── */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.5rem,3vw,2.5rem);margin-top:3rem;list-style:none;}
.steps.four{grid-template-columns:repeat(4,1fr);}
.step{border-top:1px solid var(--rule-bone);padding-top:1.25rem;}
.step .label{color:var(--accent-on-bone);}
.step h3{margin:.9rem 0 .5rem;}
.step p{color:var(--on-bone-dim);}

.integr{
  margin-top:4rem;padding-top:1.5rem;border-top:1px solid var(--rule-bone);
  display:flex;flex-wrap:wrap;gap:.75rem 2.5rem;align-items:baseline;
}
.integr .label{color:var(--on-bone-dim);}
.integr ul{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem 2rem;font-weight:600;font-size:1.1rem;}
.integr p{color:var(--on-bone-dim);font-size:.95rem;}

/* ── cierre ───────────────────────────────────────────────── */
.closing{padding:clamp(5rem,10vw,8rem) 0;}
.closing-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:3rem;align-items:end;}
.closing h2{max-width:16ch;}
.closing p{margin-top:1.25rem;color:var(--on-ink-dim);max-width:30rem;}
.closing-actions{display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;}

/* ── formulario de contacto ───────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.contact-alt{margin-top:2rem;display:flex;flex-direction:column;gap:.9rem;align-items:flex-start;}
.contact-alt .label{color:var(--on-ink-dim);}
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;}
.field{display:flex;flex-direction:column;gap:.45rem;}
.field.full{grid-column:1/-1;}
.field label{font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--on-ink-dim);}
.field label .opt{text-transform:none;letter-spacing:0;}
.field input,.field textarea{
  width:100%;font:inherit;font-size:1rem;color:var(--on-ink);
  background:var(--ink-2);border:1px solid var(--rule-ink);border-radius:6px;
  padding:.8rem .9rem;transition:border-color .15s ease;
}
.field input::placeholder,.field textarea::placeholder{color:#6C7078;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--accent-on-ink);}
.field textarea{resize:vertical;min-height:8rem;}
.form .btn{grid-column:1/-1;justify-self:start;}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.form-ok{display:none;border:1px solid var(--rule-ink);border-radius:8px;padding:1.75rem;background:var(--ink-2);}
.form-ok.show{display:block;}
.form-ok h3{margin-bottom:.4rem;}

/* ── páginas legales ──────────────────────────────────────── */
.legal-head{padding:clamp(3rem,6vw,4.5rem) 0 clamp(2.5rem,5vw,3.5rem);}
.legal-head .updated{margin-top:1.1rem;color:var(--on-ink-dim);}
.legal{display:grid;grid-template-columns:15rem minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.toc{position:sticky;top:1.5rem;}
.toc .label{color:var(--on-bone-dim);display:block;margin-bottom:.75rem;}
.toc ol{list-style:none;border-top:1px solid var(--rule-bone);}
.toc li{border-bottom:1px solid var(--rule-bone);}
.toc a{display:block;padding:.55rem 0;font-size:.93rem;text-decoration:none;color:var(--on-bone-dim);}
.toc a:hover{color:var(--accent-on-bone);}
.prose{max-width:44rem;}
.prose section{padding:0 0 2.75rem;margin-bottom:2.75rem;border-bottom:1px solid var(--rule-bone);}
.prose section:last-child{border-bottom:none;margin-bottom:0;}
.prose h2{font-size:clamp(1.4rem,2.4vw,1.75rem);max-width:none;margin-bottom:1rem;}
.prose h3{font-size:1.1rem;margin:1.75rem 0 .6rem;}
.prose p,.prose li{color:#3A3834;}
.prose p + p{margin-top:.9rem;}
.prose ul{margin:.75rem 0 .9rem 1.2rem;}
.prose li + li{margin-top:.4rem;}
.prose a{color:var(--accent-on-bone);}
.prose strong{color:var(--on-bone);}
.table-wrap{overflow-x:auto;margin:1rem 0;}
.prose table{width:100%;border-collapse:collapse;font-size:.95rem;}
.prose th{font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--on-bone-dim);text-align:left;}
.prose th,.prose td{padding:.7rem .75rem .7rem 0;border-bottom:1px solid var(--rule-bone);vertical-align:top;}
.callout{margin-top:1.5rem;border-left:2px solid var(--accent-on-bone);padding:.25rem 0 .25rem 1.1rem;}

/* ── footer ───────────────────────────────────────────────── */
.site-footer{border-top:1px solid var(--rule-ink);padding:2.5rem 0 2.5rem;color:var(--on-ink-dim);}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:start;}
.foot-brand{display:flex;gap:1rem;align-items:flex-start;}
.foot-brand img{width:2.4rem;height:2.4rem;flex-shrink:0;}
.foot-brand p{font-size:.93rem;max-width:22rem;}
.foot-nav{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;justify-content:flex-end;font-size:.93rem;}
.foot-nav a{text-decoration:none;}
.foot-nav a:hover{color:var(--on-ink);}
.foot-bottom{margin-top:2rem;padding-top:1.25rem;border-top:1px solid var(--rule-ink);font-size:.85rem;}

/* ── responsive ───────────────────────────────────────────── */
@media (max-width:980px){
  .menu-btn{display:inline-block;}
  .nav{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:20;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--ink);border-bottom:1px solid var(--rule-ink);padding:.5rem 0 1.25rem;
  }
  .nav.open{display:flex;}
  .nav ul{flex-direction:column;gap:0;}
  .nav ul a{display:block;padding:.85rem 0;border-bottom:1px solid var(--rule-ink);color:var(--on-ink);}
  .nav .btn{margin-top:1rem;justify-content:center;padding:.85rem 1rem;}
}
@media (max-width:900px){
  .hero-grid,.products,.closing-grid,.feature,.contact-grid,.legal{grid-template-columns:1fr;}
  .steps,.steps.four{grid-template-columns:1fr 1fr;}
  .stats{grid-template-columns:1fr 1fr;}
  .stat:nth-child(3){padding-left:0;border-left:none;}
  .stat:nth-child(n+3){margin-top:1.75rem;border-top:1px solid var(--rule-ink);}
  .services li{grid-template-columns:3rem 1fr;}
  .services li p{grid-column:2;}
  .toc{position:static;}
  .foot-grid{grid-template-columns:1fr;}
  .foot-nav{justify-content:flex-start;}
}
@media (max-width:560px){
  .brand .label{display:none;}
  .steps,.steps.four{grid-template-columns:1fr;}
  .problems li{grid-template-columns:2.75rem 1fr;}
  .hero .btn,.closing-actions .btn{width:100%;justify-content:center;}
  .closing-actions{align-items:stretch;}
  .stat{padding-right:.75rem;}
  .stat + .stat{padding-left:.9rem;}
  .stat:nth-child(3){padding-left:0;}
  .msg{max-width:92%;}
  .form{grid-template-columns:1fr;}
  .form .btn{justify-self:stretch;justify-content:center;}
  .case-rows li{flex-direction:column;gap:.2rem;}
}

/* ── cifras sobre fondo hueso / variante de 3 ─────────────── */
.stats.three{grid-template-columns:repeat(3,1fr);}
.s-bone .stats{border-top-color:var(--rule-bone);}
.s-bone .stat + .stat{border-left-color:var(--rule-bone);}
.s-bone .stat-num{color:var(--on-bone);}
.s-bone .stat-sub{color:var(--on-bone-dim);}
@media (max-width:900px){
  .s-bone .stat:nth-child(n+3){border-top-color:var(--rule-bone);}
}

/* ── bloque por proyecto (concesionarias) ─────────────────── */
.project{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(2.5rem,5vw,4.5rem);align-items:start;}
.project h2{max-width:14ch;}
.project .sec-intro{max-width:30rem;}
.project-list{margin-top:2rem;}
.project-list li{display:grid;grid-template-columns:2.5rem 1fr;gap:.5rem;padding:.9rem 0;}
.s-bone .project-list .label{color:var(--accent-on-bone);padding-top:.2rem;}
.s-ink  .project-list .label{color:var(--accent-on-ink);padding-top:.2rem;}
.sub-label{margin:0 0 .8rem;}
.project-list + .sub-label,.sec-intro + .sub-label{margin-top:2rem;}
.sec-intro + .sub-label + .project-list{margin-top:0;}
@media (max-width:900px){
  .project{grid-template-columns:1fr;}
}

/* ── franja del caso (marcas · sucursales · meses) ────────── */
.case-strip{
  display:flex;flex-wrap:wrap;margin-top:1.75rem;padding:1rem 0;
  border-top:1px solid;border-bottom:1px solid;
  font-family:var(--mono);font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;
}
.case-strip span{display:inline-flex;align-items:baseline;gap:.6rem;padding:0 1.75rem;}
.case-strip span:first-child{padding-left:0;}
.case-strip span + span{border-left:1px solid;}
.case-strip b{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:500;letter-spacing:-.03em;text-transform:none;}
.s-ink  .case-strip,.s-ink  .case-strip span + span{border-color:var(--rule-ink);color:var(--on-ink);}
.s-ink  .case-strip b{color:var(--accent-on-ink);}
.s-bone .case-strip,.s-bone .case-strip span + span{border-color:var(--rule-bone);color:var(--on-bone);}
.s-bone .case-strip b{color:var(--accent-on-bone);}
@media (max-width:560px){
  .case-strip{flex-direction:column;gap:.5rem;}
  .case-strip span{padding:0;}
  .case-strip span + span{border-left:none;}
}