/* ============================================================
   KAPITAL GESTIÓN · landing
   Layout: una carpeta de gestión. Papel de fondo, bandas noche
   para lo que habla con otra voz (datos, automotoras, pie).
   La firma es "La red hoy": autos reales con filtros.
   Una sola apariencia, clara, elegida a propósito (manual: la web
   va en claro), así que cada color se fija explícito.
   ============================================================ */
:root{
  --papel:#F4F3F0;
  --superficie:#FFFFFF;
  --carbon:#2E2D2B;
  --grafito:#5C5852;
  --linea:#DDD9D1;
  --linea-2:#C9C3B8;
  --bronce:#8C7553;          /* líneas, íconos, títulos grandes */
  --bronce-texto:#6E5A3C;    /* texto en bronce sobre claro · 5,9:1 */
  --noche:#1B1A18;
  --noche-2:#252320;
  --hueso:#EEE9DE;
  --bronce-claro:#BFA272;    /* texto en bronce sobre noche · 7,1:1 */
  --gris-noche:#A39E95;
  --acento-fondo:#ECE6DB;
  --error:#9A2E22;

  --f-display:"Figtree", ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  --f-dato:"Barlow Semi Condensed", "Arial Narrow", ui-sans-serif, sans-serif;

  --wrap:1180px;
  --medida:62ch;
  --nav-h:68px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
body{
  margin:0; background:var(--papel); color:var(--carbon);
  font-family:var(--f-display); font-size:17px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--bronce-texto); text-underline-offset:3px; }
h1,h2,h3,h4{ margin:0; font-weight:600; line-height:1.12; text-wrap:balance; color:var(--carbon); }
p{ margin:0; }
button{ font:inherit; }
:focus-visible{ outline:2px solid var(--bronce); outline-offset:3px; }

.wrap{
  max-width:var(--wrap); margin:0 auto;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width:720px){ .wrap{ padding-left:max(32px, env(safe-area-inset-left, 0px)); padding-right:max(32px, env(safe-area-inset-right, 0px)); } }

.skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--carbon); color:var(--papel); padding:.75rem 1rem; }
.skip:focus{ left:12px; top:12px; }

.eyebrow{
  font-family:var(--f-dato); font-weight:600; font-size:.875rem;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bronce-texto);
}
.dato{ font-family:var(--f-dato); font-weight:600; letter-spacing:.05em; font-variant-numeric:tabular-nums; }

.sec{ padding-block:clamp(4rem, 9vw, 7rem); }
.sec-head{ display:grid; gap:.9rem; max-width:44rem; margin-bottom:clamp(2rem, 4vw, 3rem); }
.sec-head h2{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing:-.012em; }
.sec-head p{ color:var(--grafito); max-width:var(--medida); }

/* la curva: sale del camino dentro del escudo */
.curva{ display:block; width:4.5rem; height:auto; color:var(--bronce); }

/* ---------- botones ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:50px; padding:.8rem 1.35rem;
  background:var(--carbon); color:var(--papel);
  border:1px solid var(--carbon); border-radius:3px;
  font-family:var(--f-display); font-weight:600; font-size:1rem; line-height:1.2;
  text-decoration:none; cursor:pointer;
  transition:background .25s, border-color .25s, color .25s, transform .25s var(--ease);
}
.btn:hover{ background:#000; border-color:#000; }
.btn:active{ transform:translateY(1px); }
.btn--sec{ background:transparent; color:var(--carbon); border-color:var(--linea-2); }
.btn--sec:hover{ background:var(--superficie); border-color:var(--carbon); }
.btn--claro{ background:var(--bronce-claro); color:var(--noche); border-color:var(--bronce-claro); }
.btn--claro:hover{ background:#CDB287; border-color:#CDB287; }
.btn svg{ flex:none; }
.btn--full{ width:100%; }
.btn[disabled]{ opacity:.6; cursor:progress; }
.btn[data-listo="true"]{ box-shadow:0 0 0 3px rgba(140,117,83,.28); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:sticky; top:env(safe-area-inset-top, 0px); z-index:50;
  background:rgba(244,243,240,.94);
  -webkit-backdrop-filter:saturate(1.2) blur(10px); backdrop-filter:saturate(1.2) blur(10px);
  border-bottom:1px solid var(--linea);
}
body::before{ content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top, 0px); z-index:51; background:var(--papel); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:var(--nav-h); }
@media (min-width:400px){ .nav__in{ gap:1.5rem; } }
.marca{ display:inline-flex; align-items:center; gap:.65rem; text-decoration:none; color:var(--carbon); }
.marca img{ width:32px; height:auto; }
/* la alianza: el auto de Autos García sale de atrás del escudo, hacia la izquierda.
   El escudo tapa la cola (padding = ancho del auto - 34px) y un halo de papel lo separa del trazo */
.marca{ position:relative; isolation:isolate; padding-left:62px; flex-shrink:0; }
.marca .marca__auto{ position:absolute; z-index:-1; left:0; top:50%; width:96px; max-width:none; transform:translateY(-38%); pointer-events:none; }
.marca__escudo{ filter:drop-shadow(0 0 1.5px var(--papel)) drop-shadow(0 0 1.5px var(--papel)); }
@media (min-width:400px){ .marca{ padding-left:90px; } .marca .marca__auto{ width:124px; } }
@media (min-width:720px){ .marca{ padding-left:116px; } .marca .marca__auto{ width:150px; } }
@media (min-width:1240px){ .marca{ padding-left:142px; } .marca .marca__auto{ width:176px; } }
/* con el menú a la vista y poco ancho, el auto baja un paso para que el menú quepa en una línea */
@media (min-width:1120px) and (max-width:1239px){ .marca{ padding-left:90px; } .marca .marca__auto{ width:124px; } }
@media (max-width:359px){ .marca{ padding-left:0; } .marca .marca__auto{ display:none; } }
.marca__txt{ display:grid; gap:.12rem; line-height:1.1; }
.marca__k{ font-weight:600; font-size:1.18rem; letter-spacing:-.01em; white-space:nowrap; }
/* el respaldo: Autos García firma debajo, en bronce y en la letra de los datos */
.marca__ag{ font-family:var(--f-dato); font-weight:600; font-size:.72rem; letter-spacing:.09em; text-transform:uppercase; color:var(--bronce-texto); white-space:nowrap; }
.nav__links{ display:none; gap:1.1rem; align-items:center; }
.nav__links a{ color:var(--grafito); text-decoration:none; font-size:.95rem; font-weight:500; white-space:nowrap; }
.nav__links a:hover{ color:var(--carbon); }
.nav__cta{ display:none; }
.nav__cta.btn{ min-height:42px; padding:.55rem 1rem; font-size:.94rem; }
.burger{
  width:44px; height:44px; display:grid; place-content:center; gap:5px;
  background:none; border:1px solid var(--linea-2); border-radius:3px; cursor:pointer;
}
.burger span{ display:block; width:18px; height:1.6px; background:var(--carbon); transition:transform .3s var(--ease), opacity .2s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.6px) rotate(-45deg); }
.drawer{ border-top:1px solid var(--linea); background:var(--papel); }
.drawer[hidden]{ display:none; }
.drawer nav{ display:grid; padding-block:.5rem 1.25rem; }
.drawer a{ color:var(--carbon); text-decoration:none; font-weight:500; padding:.8rem 0; border-bottom:1px solid var(--linea); }
.drawer .btn{ margin-top:1rem; color:var(--papel); border-bottom:0; }
@media (min-width:1120px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .burger, .drawer{ display:none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{ padding-block:clamp(2.5rem, 6vw, 4.5rem) clamp(3rem, 6vw, 5rem); }
.hero__in{ display:grid; gap:clamp(2.5rem, 5vw, 4rem); align-items:center; }
@media (min-width:960px){ .hero__in{ grid-template-columns:minmax(0, 1.02fr) minmax(0, .98fr); } }
.hero__txt{ display:grid; gap:1.4rem; min-width:0; }
.hero h1{ font-size:clamp(2.6rem, 6.4vw, 4.6rem); line-height:1.02; letter-spacing:-.025em; max-width:12ch; }
.hero__sub{ font-size:clamp(1.06rem, 1.6vw, 1.2rem); color:var(--grafito); max-width:34rem; }
.hero__acciones{ display:flex; flex-wrap:wrap; gap:.75rem; }
.firma{ display:flex; align-items:center; gap:.9rem; padding-top:.4rem; }
.firma p{ font-weight:600; font-size:1.05rem; }

/* la ficha de gestión sobre la foto */
.hero__vis{ position:relative; min-width:0; }
.hero__foto{ aspect-ratio:4 / 3; width:100%; max-width:100%; object-fit:cover; border-radius:3px; }
/* en celular la ficha va debajo de la foto, montada un poco sobre ella;
   desde 960px flota sobre la esquina */
.ficha{
  position:relative; margin:-2.5rem auto 0; width:calc(100% - 1.5rem);
  background:var(--superficie); border:1px solid var(--linea);
  box-shadow:0 18px 40px rgba(27,26,24,.16);
  padding:1rem 1.1rem 1.05rem; display:grid; gap:.7rem;
}
@media (min-width:960px){
  .hero__vis{ padding-bottom:3.5rem; }
  .ficha{ position:absolute; right:1.5rem; bottom:0; margin:0; width:min(21rem, 86%); }
}
.ficha__top{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline; }
.ficha__top .eyebrow{ font-size:.78rem; }
.ficha__ej{ font-family:var(--f-dato); font-weight:600; font-size:.72rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grafito); border:1px dashed var(--linea-2); padding:0 .35rem; border-radius:2px; }
.ficha h3{ font-size:1.12rem; }
.ficha dl{ margin:0; display:grid; grid-template-columns:auto minmax(0, 1fr); border-top:1px solid var(--linea); }
.ficha dt, .ficha dd{ margin:0; padding:.42rem 0; border-bottom:1px solid var(--linea); font-size:.9rem; }
.ficha dt{ color:var(--grafito); padding-right:1rem; }
.ficha dd{ text-align:right; font-weight:500; font-variant-numeric:tabular-nums; }
.ficha dd .ok{ color:var(--bronce-texto); font-weight:600; }

/* ============================================================
   FRANJA DE DATOS · banda noche
   ============================================================ */
.franja{ background:var(--noche); color:var(--hueso); }
.franja ul{ list-style:none; margin:0 auto; padding-block:2.2rem; display:grid; gap:1.6rem 2rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:900px){ .franja ul{ grid-template-columns:repeat(4, minmax(0, 1fr)); padding-block:2.6rem; } }
.franja li{ display:grid; gap:.35rem; align-content:start; border-left:1px solid #3A3833; padding-left:1rem; min-width:0; }
.franja .k{ font-family:var(--f-dato); font-weight:600; font-size:clamp(1.7rem, 3.4vw, 2.3rem); line-height:1; color:var(--bronce-claro); letter-spacing:.02em; }
.franja .v{ font-size:.92rem; color:#CFC8BB; line-height:1.45; }

/* ============================================================
   LA RED HOY · la firma de la página
   ============================================================ */
.red__filtros{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.chip{
  display:inline-flex; align-items:center; gap:.45rem; min-height:44px; padding:.45rem .95rem;
  background:transparent; color:var(--carbon); border:1px solid var(--linea-2); border-radius:999px;
  font-family:var(--f-dato); font-weight:600; font-size:.95rem; letter-spacing:.05em; text-transform:uppercase;
  cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.chip small{ font-size:.8rem; color:var(--grafito); font-variant-numeric:tabular-nums; }
.chip:hover{ border-color:var(--carbon); }
.chip[aria-pressed="true"]{ background:var(--carbon); color:var(--papel); border-color:var(--carbon); }
.chip[aria-pressed="true"] small{ color:var(--bronce-claro); }

.red__grid{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:760px){ .red__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } }
@media (min-width:1100px){ .red__grid{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.red__grid li{ min-width:0; }
.red__grid li[hidden]{ display:none; }
.auto{
  display:grid; height:100%; text-decoration:none; color:var(--carbon);
  background:var(--superficie); border:1px solid var(--linea);
  transition:border-color .25s, box-shadow .25s, transform .3s var(--ease);
}
.auto:hover{ border-color:var(--linea-2); box-shadow:0 12px 28px rgba(27,26,24,.10); transform:translateY(-2px); }
.auto img{ aspect-ratio:4 / 3; width:100%; max-width:100%; object-fit:cover; background:var(--acento-fondo); }
.auto__cuerpo{ padding:.75rem .85rem .85rem; display:grid; gap:.15rem; align-content:start; }
.auto__tipo{ font-family:var(--f-dato); font-weight:600; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--bronce-texto); }
.auto h3{ font-size:clamp(.98rem, 1.6vw, 1.08rem); line-height:1.25; }
.auto__accion{ margin-top:.45rem; display:inline-flex; align-items:center; gap:.35rem; font-size:.86rem; font-weight:600; color:var(--grafito); }
.auto:hover .auto__accion{ color:var(--carbon); }
.auto--busca{
  background:var(--carbon); border-color:var(--carbon); color:var(--papel);
  padding:1.2rem; align-content:space-between; gap:1.2rem; min-height:100%;
}
.auto--busca h3{ color:var(--papel); font-size:clamp(1.15rem, 2vw, 1.35rem); }
.auto--busca p{ color:#CFC8BB; font-size:.92rem; line-height:1.45; }
.auto--busca .auto__accion{ color:var(--bronce-claro); margin:0; }
.auto--busca:hover .auto__accion{ color:var(--hueso); }
.red__nota{ margin-top:1.25rem; font-size:.9rem; color:var(--grafito); max-width:var(--medida); }

/* ============================================================
   CÓMO FUNCIONA · proceso real, por eso va numerado
   ============================================================ */
.como{ background:var(--superficie); border-block:1px solid var(--linea); }
.pasos-lista{ list-style:none; margin:0; padding:0; display:grid; gap:0; counter-reset:paso; }
.pasos-lista li{
  counter-increment:paso; display:grid; grid-template-columns:2.6rem minmax(0, 1fr); gap:.4rem 1rem;
  padding-block:1.15rem; border-top:1px solid var(--linea);
}
.pasos-lista li::before{ content:counter(paso); grid-row:span 2; font-family:var(--f-dato); font-weight:600; font-size:1.55rem; line-height:1.1; color:var(--bronce-texto); }
.pasos-lista h3{ font-size:1.08rem; }
.pasos-lista p{ font-size:.95rem; color:var(--grafito); }
@media (min-width:960px){
  .pasos-lista{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1.5rem; }
  .pasos-lista li{ grid-template-columns:minmax(0, 1fr); border-top:2px solid var(--carbon); padding-top:1.1rem; align-content:start; }
  .pasos-lista li::before{ grid-row:auto; font-size:1.9rem; }
}

/* ============================================================
   SERVICIOS · acordeón con formularios (motor de Autos García)
   ============================================================ */
.grid{ display:grid; grid-template-columns:minmax(0, 1fr); gap:1rem; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.card{
  position:relative; display:grid; align-content:start; gap:.5rem;
  background:var(--superficie); border:1px solid var(--linea); border-radius:3px;
  padding:1.4rem 1.4rem 1.25rem; text-align:left; cursor:pointer; color:inherit;
  scroll-margin-top:calc(var(--nav-h) + 16px);
  transition:border-color .25s, box-shadow .25s;
}
.card::before{ content:""; position:absolute; left:0; top:0; height:2px; width:0; background:var(--bronce); transition:width .4s var(--ease); }
.card:hover{ border-color:var(--linea-2); box-shadow:0 10px 26px rgba(27,26,24,.08); }
.card:hover::before, .card[aria-expanded="true"]::before{ width:100%; }
.card[aria-expanded="true"]{ border-color:var(--bronce); }
.card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.card__ico{ width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--linea-2); border-radius:3px; color:var(--bronce-texto); }
.card__chev{ color:var(--grafito); transition:transform .35s var(--ease); }
.card[aria-expanded="true"] .card__chev{ transform:rotate(180deg); }
.card h3{ font-size:1.2rem; margin-top:.6rem; }
.card p{ font-size:.96rem; color:var(--grafito); }
.card__accion{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.5rem; font-weight:600; font-size:.92rem; color:var(--bronce-texto); }
.card__accion svg{ transition:transform .35s var(--ease); }
.card[aria-expanded="true"] .card__accion svg{ transform:rotate(180deg); }
.card[aria-expanded="true"] .card__accion-abrir{ display:none; }
.card:not([aria-expanded="true"]) .card__accion-cerrar{ display:none; }
.placa{ font-family:var(--f-dato); font-weight:600; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bronce-texto); }

.panel{ grid-column:1 / -1; display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.panel[data-open="true"]{ grid-template-rows:1fr; }
.panel__clip{ overflow:hidden; min-width:0; }
.panel__in{
  background:var(--superficie); border:1px solid var(--bronce); border-radius:3px;
  padding:clamp(1.4rem, 4vw, 2.4rem);
  opacity:0; transform:translateY(-6px); transition:opacity .3s var(--ease) .06s, transform .3s var(--ease) .06s;
}
.panel[data-open="true"] .panel__in{ opacity:1; transform:none; }

/* caja de formulario fuera del acordeón (empresas y automotoras) */
.caja-form{ background:var(--superficie); border:1px solid var(--linea); border-radius:3px; padding:clamp(1.4rem, 4vw, 2.2rem); min-width:0; }

.form-head{ max-width:var(--medida); margin-bottom:1.4rem; display:grid; gap:.55rem; }
.form-head h3{ font-size:clamp(1.35rem, 3vw, 1.75rem); }
.form-head p{ color:var(--grafito); font-size:.97rem; }
.form{ max-width:560px; }
.fields{ display:flex; flex-direction:column; gap:1.1rem; }
.paso{ display:flex; flex-direction:column; gap:1.1rem; }
.paso[hidden]{ display:none !important; }
.field{ display:flex; flex-direction:column; gap:.4rem; min-width:0; }
.field[hidden]{ display:none !important; }
.field--sm{ max-width:220px; }
.field--md{ max-width:380px; }
.field--cond{ animation:cond-in .35s var(--ease) both; }
@keyframes cond-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
.label{ font-size:.95rem; font-weight:500; line-height:1.35; color:var(--carbon); }
.label .opt{ font-weight:400; color:var(--grafito); }
.ayuda{ font-size:.84rem; line-height:1.45; color:var(--grafito); margin-top:-.15rem; }
.control{
  width:100%; min-height:48px; padding:.72rem .9rem;
  background:var(--superficie); color:var(--carbon);
  border:1px solid var(--linea-2); border-radius:3px;
  font-family:var(--f-display); font-size:1rem; appearance:none;
  transition:border-color .2s, box-shadow .2s;
}
.control::placeholder{ color:#8F897F; }
.control:hover{ border-color:#A9A296; }
.control:focus{ outline:none; border-color:var(--bronce); box-shadow:0 0 0 3px rgba(140,117,83,.22); }
textarea.control{ min-height:104px; resize:vertical; line-height:1.55; }
select.control{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235C5852' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem; cursor:pointer;
}
.field[data-invalid="true"] .control{ border-color:var(--error); }
.err{ display:none; font-size:.84rem; color:var(--error); }
.field[data-invalid="true"] .err{ display:block; }
.field__ctrl{ position:relative; }
.field__ok{ position:absolute; right:.85rem; top:24px; transform:translateY(-50%) scale(.5); opacity:0; color:var(--bronce-texto); pointer-events:none; transition:opacity .25s, transform .35s var(--ease); }
.field[data-ok="true"] .field__ok{ opacity:1; transform:translateY(-50%) scale(1); }
.control--check{ padding-right:2.6rem; }
.segmented{ display:flex; flex-wrap:wrap; gap:.5rem; }
.seg{ position:relative; flex:1 1 auto; min-width:104px; }
.seg input{ position:absolute; opacity:0; width:0; height:0; }
.seg span{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:48px; padding:.6rem .85rem;
  background:var(--superficie); border:1px solid var(--linea-2); border-radius:3px; color:var(--grafito);
  font-size:.95rem; line-height:1.25; cursor:pointer; transition:border-color .2s, background .2s, color .2s;
}
.seg:hover span{ border-color:#A9A296; color:var(--carbon); }
.seg input:checked + span{ border-color:var(--bronce); background:var(--acento-fondo); color:var(--carbon); box-shadow:inset 0 0 0 1px var(--bronce); }
.seg input:focus-visible + span{ outline:2px solid var(--bronce); outline-offset:3px; }
.pasos-head{ margin-bottom:1.1rem; }
.pasos-txt{ display:block; margin:0 0 .55rem; font-size:1.02rem; font-weight:600; outline:none; }
.pasos-txt:focus-visible{ outline:2px solid var(--bronce); outline-offset:4px; }
.pasos-bar{ display:flex; gap:.35rem; }
.pasos-bar span{ flex:1; height:4px; border-radius:2px; background:var(--linea); transition:background .3s; }
.pasos-bar span[data-estado="hecho"]{ background:var(--bronce); }
.pasos-bar span[data-estado="actual"]{ background:var(--carbon); }
.form-foot{ display:flex; flex-direction:column; gap:.75rem; margin-top:1.5rem; }
.destinatario{ font-size:.9rem; color:var(--grafito); }
.destinatario strong{ color:var(--carbon); }
.atras{ align-self:flex-start; display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem .1rem; background:none; border:0; color:var(--grafito); cursor:pointer; }
.atras:hover{ color:var(--carbon); }
.atras[hidden]{ display:none; }
.cierre{ display:flex; gap:.5rem; align-items:flex-start; font-size:.9rem; }
.cierre svg{ color:var(--bronce-texto); flex:none; margin-top:.15rem; }
.cierre[hidden]{ display:none; }
.nota{ font-size:.85rem; color:var(--grafito); line-height:1.5; }
.nota[hidden]{ display:none; }
.salida{ border-top:1px solid var(--linea); padding-top:.75rem; font-size:.9rem; color:var(--grafito); }
.salida a{ display:inline-flex; align-items:center; gap:.4rem; min-height:44px; font-weight:600; text-decoration:none; }
.salida a:hover{ text-decoration:underline; }

/* ============================================================
   SIMULADOR
   ============================================================ */
.sim{ display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); }
@media (min-width:900px){ .sim{ grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); } }
.sim > *{ background:var(--superficie); padding:clamp(1.4rem, 3.5vw, 2.2rem); min-width:0; }
.sim__controles{ display:grid; gap:1.6rem; border:0; margin:0; }
.sim-campo{ display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:.5rem 1rem; align-items:baseline; border:0; padding:0; margin:0; min-width:0; }
.sim-campo label, .sim-campo legend{ font-weight:500; padding:0; }
.sim-campo output{ font-family:var(--f-dato); font-weight:600; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.sim-campo input[type="range"]{ grid-column:1 / -1; width:100%; accent-color:var(--carbon); min-height:32px; }
.sim-plazos{ grid-column:1 / -1; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.5rem; margin-top:.4rem; }
.sim-plazos .seg{ min-width:0; }
.sim-res{ display:grid; gap:1rem; align-content:start; background:var(--noche); color:var(--hueso); }
.sim-res .eyebrow{ color:var(--bronce-claro); }
.sim-cuota{ font-family:var(--f-dato); font-weight:600; font-size:clamp(2.4rem, 6vw, 3.4rem); line-height:1; font-variant-numeric:tabular-nums; color:var(--hueso); }
.sim-detalle{ margin:0; display:grid; }
.sim-detalle div{ display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid #3A3833; font-size:.94rem; }
.sim-detalle dt{ color:var(--gris-noche); }
.sim-detalle dd{ margin:0; font-variant-numeric:tabular-nums; font-weight:500; }
.sim-detalle .fuerte dd{ color:var(--bronce-claro); font-weight:600; }
.sim__nota{ margin-top:1.1rem; font-size:.88rem; color:var(--grafito); max-width:var(--medida); }

/* ============================================================
   EQUIPO Y COMPARACIÓN
   ============================================================ */
.equipo{ display:grid; gap:2rem; }
@media (min-width:960px){ .equipo{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:4rem; align-items:start; } }
.equipo__txt{ display:grid; gap:1rem; }
.equipo__txt h2{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing:-.012em; }
.equipo__txt p{ color:var(--grafito); }
.equipo__cifra{ display:flex; gap:1rem; align-items:baseline; border-top:1px solid var(--linea); padding-top:1rem; }
.equipo__cifra .dato{ font-size:2.6rem; line-height:1; color:var(--carbon); }
.equipo__cifra p{ font-size:.95rem; }
.tabla{ overflow-x:auto; border:1px solid var(--linea); background:var(--superficie); }
table{ border-collapse:collapse; width:100%; min-width:28rem; font-size:.94rem; line-height:1.45; }
th, td{ text-align:left; vertical-align:top; padding:.75rem .9rem; border-bottom:1px solid var(--linea); }
tr:last-child td{ border-bottom:0; }
th{ font-family:var(--f-dato); font-weight:600; font-size:.8rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grafito); background:var(--acento-fondo); }
td:last-child{ font-weight:600; color:var(--carbon); }
.tabla caption{ text-align:left; padding:.9rem; font-weight:600; caption-side:top; }

/* ============================================================
   SEGURIDAD Y CLIENTES
   ============================================================ */
.seg-grid{ display:grid; gap:2rem; }
@media (min-width:960px){ .seg-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3.5rem; align-items:center; } }
.seg-lista{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid var(--linea); }
.seg-lista li{ display:grid; grid-template-columns:28px minmax(0, 1fr); gap:.9rem; padding-block:1.05rem; border-bottom:1px solid var(--linea); }
.seg-lista svg{ color:var(--bronce-texto); margin-top:.15rem; }
.seg-lista h3{ font-size:1.05rem; margin-bottom:.2rem; }
.seg-lista p{ font-size:.95rem; color:var(--grafito); }
.seg-foto{ margin:0; display:grid; gap:.6rem; }
.seg-foto img{ width:100%; max-width:100%; aspect-ratio:1200 / 746; object-fit:cover; border-radius:3px; }
.seg-foto figcaption{ font-size:.84rem; color:var(--grafito); line-height:1.5; }

.clientes{ margin-top:clamp(3rem, 7vw, 5rem); }
.clientes__head{ display:grid; gap:.5rem; margin-bottom:1.4rem; max-width:44rem; }
.clientes__head h3{ font-size:clamp(1.4rem, 3vw, 1.8rem); }
.clientes__head p{ color:var(--grafito); }
.clientes__grid{ display:grid; gap:1rem; grid-template-columns:minmax(0, 1fr); }
@media (min-width:760px){ .clientes__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; } }
.cliente{ margin:0; background:var(--superficie); border:1px solid var(--linea); display:grid; }
.cliente img{ width:100%; max-width:100%; aspect-ratio:620 / 434; object-fit:cover; }
.cliente figcaption{ padding:.8rem .95rem .95rem; display:grid; gap:.15rem; }
.cliente strong{ font-size:1.05rem; }
.cliente span{ font-family:var(--f-dato); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bronce-texto); }

/* ============================================================
   EMPRESAS Y FLOTAS
   ============================================================ */
.empresas{ background:var(--superficie); border-block:1px solid var(--linea); }
.emp-grid{ display:grid; gap:2.2rem; }
@media (min-width:960px){ .emp-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3.5rem; align-items:start; } }
.emp-txt{ display:grid; gap:1.2rem; min-width:0; }
.emp-txt h2{ font-size:clamp(1.9rem, 4.2vw, 2.7rem); letter-spacing:-.012em; }
.emp-txt > p{ color:var(--grafito); }
.lista{ margin:0; padding-left:1.1rem; display:grid; gap:.45rem; }
.lista li::marker{ color:var(--bronce); }
.emp-fotos{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.75rem; }
.emp-fotos img{ aspect-ratio:4 / 3; width:100%; max-width:100%; object-fit:cover; border-radius:3px; }
.emp-fotos figcaption{ font-family:var(--f-dato); font-weight:600; font-size:.78rem; letter-spacing:.07em; text-transform:uppercase; color:var(--grafito); margin-top:.35rem; }
.emp-fotos figure{ margin:0; }

/* ============================================================
   RED KAPITAL · para automotoras (banda noche, otra voz: usted)
   ============================================================ */
.automotoras{ background:var(--noche); color:var(--hueso); }
.auto-txt h2, .auto-txt h3, .auto-txt strong{ color:var(--hueso); }
.auto-grid{ display:grid; gap:2.2rem; }
@media (min-width:960px){ .auto-grid{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3.5rem; align-items:start; } }
.auto-txt{ display:grid; gap:1.3rem; min-width:0; }
.auto-txt .eyebrow{ color:var(--bronce-claro); }
.auto-txt h2{ font-size:clamp(1.9rem, 4.2vw, 2.8rem); letter-spacing:-.012em; }
.auto-txt > p{ color:#CFC8BB; }
.auto-pasos{ list-style:none; margin:0; padding:0; display:grid; border-top:1px solid #3A3833; }
.auto-pasos li{ padding-block:.95rem; border-bottom:1px solid #3A3833; display:grid; gap:.2rem; }
.auto-pasos strong{ color:var(--hueso); font-weight:600; }
.auto-pasos span{ color:#CFC8BB; font-size:.95rem; }
.criterios{ display:grid; gap:.5rem; }
.criterios h3{ font-family:var(--f-dato); font-weight:600; font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bronce-claro); }
.criterios ul{ margin:0; padding-left:1.1rem; display:grid; gap:.3rem; color:#CFC8BB; font-size:.95rem; }
.criterios li::marker{ color:var(--bronce-claro); }
.automotoras .caja-form{ border-color:var(--superficie); }

/* ============================================================
   PREGUNTAS
   ============================================================ */
.faq__lista{ display:grid; border-top:1px solid var(--linea); max-width:52rem; }
.faq__item{ border-bottom:1px solid var(--linea); }
.faq__item summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1rem; align-items:center;
  padding:1.1rem 0; font-weight:600; font-size:1.06rem; min-height:44px;
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__item summary::after{ content:"+"; font-family:var(--f-dato); font-weight:600; font-size:1.5rem; line-height:1; color:var(--bronce-texto); transition:transform .3s var(--ease); flex:none; }
.faq__item[open] summary::after{ transform:rotate(45deg); }
.faq__cuerpo{ padding:0 0 1.2rem; color:var(--grafito); max-width:var(--medida); }

/* ============================================================
   PIE · banda noche
   ============================================================ */
.pie{ background:var(--noche); color:var(--hueso); padding-block:3.5rem 2rem; }
.pie__in{ display:grid; gap:2.5rem; }
@media (min-width:900px){ .pie__in{ grid-template-columns:minmax(0, 1fr) auto; align-items:end; } }
.pie__marca{ display:grid; gap:1.2rem; }
.pie__marca img{ width:150px; }
.pie__marca p{ font-size:1.25rem; font-weight:600; }
.pie__sello{ display:inline-flex; align-items:center; gap:.9rem; padding-top:1.2rem; border-top:1px solid #3A3833; max-width:26rem; color:var(--hueso); text-decoration:none; }
.pie__sello img{ width:92px; flex:none; }
.pie__sello span{ display:grid; gap:.1rem; font-size:.88rem; line-height:1.4; color:var(--gris-noche); }
.pie__sello strong{ font-weight:600; font-size:.95rem; color:var(--hueso); }
.pie__sello:hover strong{ color:var(--bronce-claro); }
.pie__links{ display:grid; gap:.6rem; }
.pie__links a{ display:inline-flex; align-items:center; gap:.55rem; color:var(--hueso); text-decoration:none; min-height:44px; }
.pie__links a:hover{ color:var(--bronce-claro); }
.pie__legal{ margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid #3A3833; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.75rem 2rem; font-size:.85rem; color:var(--gris-noche); }

/* ============================================================
   TOAST
   ============================================================ */
.toast{
  position:fixed; z-index:90; left:50%; bottom:calc(20px + env(safe-area-inset-bottom, 0px));
  transform:translate(-50%, 140%); opacity:0;
  width:min(440px, calc(100% - 2rem));
  background:var(--noche); color:var(--hueso); border-left:3px solid var(--bronce-claro); border-radius:3px;
  padding:1rem 1.15rem; box-shadow:0 18px 44px rgba(27,26,24,.3);
  transition:transform .45s var(--ease), opacity .35s;
}
.toast[data-show="true"]{ transform:translate(-50%, 0); opacity:1; }
.toast__t{ font-weight:600; margin-bottom:.2rem; }
.toast__d{ font-size:.88rem; color:#CFC8BB; line-height:1.5; }

/* ============================================================
   SITIO DE VARIAS PÁGINAS
   ============================================================ */
/* pestaña activa */
.nav__links a{ position:relative; padding-block:.4rem; }
.nav__links a[aria-current="page"]{ color:var(--carbon); }
.nav__links a[aria-current="page"]::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; background:var(--bronce); }
.drawer a[aria-current="page"]{ color:var(--bronce-texto); }

/* encabezado de cada página */
.pagina-head{ padding-block:clamp(2.8rem, 7vw, 4.8rem) clamp(2rem, 4vw, 3rem); border-bottom:1px solid var(--linea); }
.pagina-head .wrap{ display:grid; gap:1rem; }
.pagina-head h1{ font-size:clamp(2.2rem, 5.4vw, 3.6rem); line-height:1.05; letter-spacing:-.022em; max-width:20ch; }
.pagina-head p.bajada{ font-size:clamp(1.05rem, 1.6vw, 1.18rem); color:var(--grafito); max-width:44rem; }
.pagina-head .acciones{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:.4rem; }
.pagina-head--noche{ background:var(--noche); border-bottom:0; }
.pagina-head--noche h1{ color:var(--hueso); }
.pagina-head--noche p.bajada{ color:#CFC8BB; }
.pagina-head--noche .eyebrow{ color:var(--bronce-claro); }

/* bloque de dos columnas: texto + formulario o imagen */
.dos-col{ display:grid; gap:2.2rem; }
@media (min-width:960px){ .dos-col{ grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:3.5rem; align-items:start; } }
.dos-col > *{ min-width:0; }
.texto-col{ display:grid; gap:1.1rem; align-content:start; }
.texto-col h2{ font-size:clamp(1.7rem, 3.6vw, 2.4rem); letter-spacing:-.012em; }
.texto-col > p{ color:var(--grafito); }

/* portada: a dónde ir */
.caminos{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); grid-template-columns:minmax(0, 1fr); }
@media (min-width:640px){ .caminos{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1000px){ .caminos{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.camino{ display:grid; gap:.5rem; align-content:start; height:100%; padding:1.4rem 1.3rem 1.3rem; background:var(--superficie); color:var(--carbon); text-decoration:none; transition:background .2s; }
.camino:hover{ background:#FBFAF8; }
.camino h3{ font-size:1.2rem; }
.camino p{ font-size:.95rem; color:var(--grafito); }
.camino .ir{ margin-top:.4rem; font-weight:600; font-size:.92rem; color:var(--carbon); display:inline-flex; gap:.35rem; align-items:center; }
.camino:hover .ir{ color:var(--bronce-texto); }

/* portada: vistazo a la red */
.vistazo__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:1rem 2rem; margin-bottom:1.4rem; }
.vistazo__head h2{ font-size:clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing:-.01em; }
.vistazo__head a{ font-weight:600; text-decoration:none; color:var(--carbon); display:inline-flex; gap:.35rem; }
.vistazo__head a:hover{ color:var(--bronce-texto); }
.vistazo__fotos{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:900px){ .vistazo__fotos{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.vistazo__fotos a{ display:grid; gap:.45rem; text-decoration:none; color:var(--carbon); }
.vistazo__fotos img{ aspect-ratio:4 / 3; width:100%; max-width:100%; object-fit:cover; border-radius:3px; }
.vistazo__fotos span{ font-family:var(--f-dato); font-weight:600; font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--grafito); }

/* pasos de 3 (empresas, automotoras) */
@media (min-width:960px){ .pasos-lista--3{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* vender: qué incluye */
.incluye{ list-style:none; margin:0; padding:0; display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); grid-template-columns:minmax(0, 1fr); }
@media (min-width:760px){ .incluye{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.incluye li{ background:var(--superficie); padding:1.2rem 1.25rem; display:grid; grid-template-columns:26px minmax(0, 1fr); gap:.4rem .9rem; align-content:start; }
.incluye svg{ color:var(--bronce-texto); grid-row:span 2; margin-top:.15rem; }
.incluye h3{ font-size:1.05rem; }
.incluye p{ font-size:.94rem; color:var(--grafito); }
.incluye li.ancho{ grid-column:1 / -1; }
@media (min-width:760px){
  .incluye li.ancho{ grid-template-columns:26px minmax(0, 1fr) minmax(0, 1.1fr); grid-template-rows:auto 1fr; }
  .incluye li.ancho figure{ grid-row:1 / span 2; grid-column:3; }
}
.incluye figure{ margin:0; grid-column:1 / -1; }
.incluye figure img{ width:100%; max-width:100%; aspect-ratio:1200 / 746; object-fit:cover; border-radius:3px; }
.incluye figcaption{ font-size:.8rem; color:var(--grafito); margin-top:.4rem; line-height:1.45; }

.requisitos{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:960px){ .requisitos{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.requisitos li{ border-top:2px solid var(--carbon); padding-top:.8rem; display:grid; gap:.3rem; align-content:start; }
.requisitos strong{ font-family:var(--f-dato); font-weight:600; font-size:1.35rem; letter-spacing:.02em; }
.requisitos span{ font-size:.92rem; color:var(--grafito); }
.requisitos.requisitos--2{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.texto-col > .postura{ margin:0; padding:1rem 1.15rem; background:var(--superficie); border-left:3px solid var(--bronce); border-radius:3px; color:var(--carbon); font-weight:500; line-height:1.55; }
.texto-col > h3{ font-size:1.15rem; margin-top:.4rem; }

.papeles{ margin:0; padding-left:1.1rem; columns:2 14rem; column-gap:2.5rem; }
.papeles li{ break-inside:avoid; padding-block:.25rem; }
.papeles li::marker{ color:var(--bronce); }
.papeles .opc{ color:var(--grafito); }

/* crédito: qué es la CAE y el CTC */
.glosa{ margin:0; display:grid; gap:1px; background:var(--linea); border:1px solid var(--linea); grid-template-columns:minmax(0, 1fr); }
@media (min-width:760px){ .glosa{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
.glosa div{ background:var(--superficie); padding:1.2rem 1.25rem; display:grid; gap:.35rem; align-content:start; }
.glosa dt{ font-family:var(--f-dato); font-weight:600; font-size:1.3rem; letter-spacing:.03em; }
.glosa dd{ margin:0; color:var(--grafito); font-size:.95rem; }

/* fondos de sección */
.sec--blanca{ background:var(--superficie); border-block:1px solid var(--linea); }
.sec--noche{ background:var(--noche); color:var(--hueso); }
.sec--noche .eyebrow{ color:var(--bronce-claro); }
.sec--noche .texto-col h2{ color:var(--hueso); }
.sec--noche .texto-col > p{ color:#CFC8BB; }
.sec--noche .caja-form{ border-color:var(--superficie); }
/* dos secciones de papel seguidas comparten el aire; después de una blanca o noche, no */
.sec:not(.sec--blanca):not(.sec--noche) + .sec:not(.sec--blanca):not(.sec--noche){ padding-top:0; }

/* pie con mapa del sitio */
.pie__mapa{ display:grid; gap:1.8rem 2.5rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:640px){ .pie__mapa{ grid-template-columns:repeat(3, minmax(0, auto)); } }
.pie__mapa div{ display:grid; gap:.15rem; align-content:start; }
.pie__mapa h2{ font-family:var(--f-dato); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; color:var(--bronce-claro); margin-bottom:.35rem; }
.pie__mapa a{ color:var(--hueso); text-decoration:none; font-size:.95rem; min-height:36px; display:flex; align-items:center; }
.pie__mapa a:hover{ color:var(--bronce-claro); }
@media (min-width:900px){ .pie__in{ align-items:start; } }

/* ============================================================
   VIDEOS
   ============================================================ */
/* portada: el poster es la imagen principal; el loop aparece encima cuando ya corre */
.hero__media{ position:relative; overflow:hidden; border-radius:3px; background:var(--noche); }
.hero__media .hero__foto{ aspect-ratio:1 / 1; }
.loop-sobre-poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s ease; }
.loop-listo .loop-sobre-poster{ opacity:1; }
.hero__sello{ position:absolute; left:.75rem; top:.75rem; z-index:1; font-family:var(--f-dato); font-weight:600; font-size:.75rem; letter-spacing:.07em; text-transform:uppercase; color:var(--hueso); background:rgba(27,26,24,.72); padding:.2rem .5rem; border-radius:2px; }

/* tarjetas de "La red" que traen videos */
.auto--video{ grid-template-rows:auto 1fr; }
.auto--video:hover{ transform:none; }
.auto__media{ position:relative; display:block; width:100%; padding:0; border:0; margin:0; background:var(--acento-fondo); cursor:pointer; overflow:hidden; font:inherit; color:inherit; }
.auto__media:focus-visible{ outline:2px solid var(--bronce); outline-offset:-2px; }
.auto__prev{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease; }
.auto__media.prev-activo .auto__prev{ opacity:1; }
.auto__badge{
  position:absolute; left:.6rem; bottom:.6rem; z-index:1; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(27,26,24,.82); color:var(--hueso); padding:.25rem .55rem; border-radius:2px;
  font-family:var(--f-dato); font-weight:600; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
}
.auto--video .auto__cuerpo{ text-decoration:none; color:inherit; }
.auto--video .auto__cuerpo:hover .auto__accion{ color:var(--carbon); }

/* visor de videos de un auto */
.visor{ padding:0; border:0; width:min(960px, calc(100vw - 2rem)); max-width:none; max-height:calc(100dvh - 2rem); background:var(--superficie); color:var(--carbon); border-radius:4px; }
.visor::backdrop{ background:rgba(27,26,24,.74); }
.visor__in{ display:grid; grid-template-rows:auto minmax(0, 1fr) auto; gap:1rem; padding:1.2rem; max-height:calc(100dvh - 2rem); }
.visor__head{ display:flex; justify-content:space-between; align-items:start; gap:1rem; }
.visor__head h2{ font-size:1.4rem; }
.visor__fecha{ font-size:.88rem; color:var(--grafito); margin-top:.2rem; }
.visor__cerrar{ flex:none; width:44px; height:44px; display:grid; place-items:center; background:none; border:1px solid var(--linea-2); border-radius:3px; color:var(--carbon); cursor:pointer; }
.visor__cerrar:hover{ border-color:var(--carbon); }
.visor__lista{
  list-style:none; margin:0; padding:0 0 .4rem; min-height:0;
  display:grid; grid-auto-flow:column; grid-auto-columns:min(78%, 300px, calc((100% - 1.8rem) / 3)); gap:.9rem;
  overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain;
}
.visor__lista li{ scroll-snap-align:start; min-width:0; }
.visor__lista figure{ margin:0; display:grid; gap:.45rem; }
.visor__lista video{ display:block; width:100%; height:auto; aspect-ratio:9 / 16; max-height:60dvh; object-fit:contain; background:#000; border-radius:3px; }
.visor__lista figcaption{ display:flex; justify-content:space-between; gap:.5rem; font-size:.9rem; line-height:1.35; }
.visor__lista small{ font-family:var(--f-dato); font-weight:600; color:var(--grafito); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .visor{ width:100vw; height:100dvh; max-height:100dvh; margin:0; border-radius:0; }
  .visor__in{ height:100%; max-height:100dvh; padding:max(1rem, env(safe-area-inset-top, 0px)) 1rem max(1rem, env(safe-area-inset-bottom, 0px)); }
  .visor__lista{ grid-auto-columns:84%; }
  .visor__lista video{ max-height:none; }
}

/* página Videos: un bloque por auto */
.galeria-auto + .galeria-auto{ margin-top:clamp(3rem, 6vw, 4.5rem); }
.galeria-auto__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:end; gap:.6rem 2rem; margin-bottom:1.1rem; }
.galeria-auto__head h2{ font-size:clamp(1.5rem, 3vw, 2rem); }
.galeria-auto__head p{ color:var(--grafito); font-size:.95rem; }
.galeria-auto__head a{ font-weight:600; text-decoration:none; color:var(--carbon); }
.galeria-auto__head a:hover{ color:var(--bronce-texto); }
.galeria{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(2, minmax(0, 1fr)); }
@media (min-width:760px){ .galeria{ grid-template-columns:repeat(3, minmax(0, 1fr)); } }
@media (min-width:1100px){ .galeria{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }
.galeria figure{ margin:0; display:grid; gap:.45rem; }
.galeria video{ display:block; width:100%; height:auto; aspect-ratio:9 / 16; object-fit:cover; background:#000; border-radius:3px; }
.galeria figcaption{ display:flex; justify-content:space-between; gap:.5rem; font-size:.92rem; line-height:1.35; }
.galeria small{ font-family:var(--f-dato); font-weight:600; color:var(--grafito); font-variant-numeric:tabular-nums; white-space:nowrap; }
.galeria__nota{ margin-top:1rem; font-size:.88rem; color:var(--grafito); }

/* ============================================================
   CATÁLOGO · tarjetas, ficha del auto, galería y simulador con
   precalificación. Formato de tarjeta y ficha pedido por Lukas
   (referencia: linariautos.cl), con la paleta de Kapital.
   ============================================================ */
.red__barra{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:.75rem 1.5rem; margin-bottom:1.5rem; }
.red__barra .red__filtros{ margin:0; }
.sec--pegada{ padding-top:clamp(1.75rem, 4vw, 2.5rem); }
@media (max-width:719px){
  /* en el celular los filtros van en una sola fila que se desliza, no en tres */
  .red__barra{ display:grid; grid-template-columns:minmax(0, 1fr); }
  .red__barra .red__filtros{ flex-wrap:nowrap; overflow-x:auto; margin-inline:-16px; padding:0 16px 4px; scrollbar-width:none; }
  .red__barra .red__filtros::-webkit-scrollbar{ display:none; }
  .red__barra .chip{ flex:none; }
  .tauto__datos{ gap:.2rem .7rem; font-size:.8rem; }
}
.red__orden{ display:flex; align-items:center; gap:.6rem; font-size:.92rem; font-weight:500; color:var(--grafito); }
.red__orden .control{ width:auto; min-height:44px; padding:.5rem 2.2rem .5rem .8rem; }
.red__tope{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.75rem 1rem; margin:0 0 1.25rem; padding:.85rem 1rem; background:var(--acento-fondo); border-left:3px solid var(--bronce); border-radius:3px; font-size:.95rem; }
.red__tope[hidden], .red__vacio[hidden], .sec[hidden]{ display:none; }
.red__vacio{ margin-top:1rem; color:var(--grafito); }
@media (min-width:760px){ .red__grid--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (min-width:1100px){ .red__grid--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); } }

.tauto{
  display:grid; grid-template-rows:auto 1fr; height:100%; text-decoration:none; color:var(--carbon);
  background:var(--superficie); border:1px solid var(--linea); border-radius:4px; overflow:hidden;
  transition:border-color .25s, box-shadow .25s, transform .3s var(--ease);
}
.tauto:hover{ border-color:var(--linea-2); box-shadow:0 14px 30px rgba(27,26,24,.10); transform:translateY(-2px); }
.tauto:focus-visible{ outline:2px solid var(--bronce); outline-offset:2px; }
.tauto__foto{ position:relative; display:block; background:var(--acento-fondo); }
.tauto__foto img{ display:block; width:100%; max-width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.tauto__badge{
  position:absolute; left:.6rem; top:.6rem; display:inline-flex; align-items:center; gap:.35rem;
  background:rgba(27,26,24,.82); color:var(--hueso); padding:.25rem .55rem; border-radius:2px;
  font-family:var(--f-dato); font-weight:600; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
}
.tauto__badge--reserva{ background:var(--hueso); color:var(--carbon); }
.tauto__cuerpo{ display:flex; flex-direction:column; gap:.2rem; padding:.85rem .95rem .95rem; min-width:0; }
.tauto__tipo{ font-family:var(--f-dato); font-weight:600; font-size:.76rem; letter-spacing:.07em; text-transform:uppercase; color:var(--bronce-texto); }
.tauto__nombre{ font-size:clamp(1rem, 1.7vw, 1.12rem); line-height:1.25; }
.tauto__version{ font-size:.88rem; color:var(--grafito); line-height:1.35; }
.tauto__datos{ display:flex; flex-wrap:wrap; gap:.3rem .8rem; margin-top:.4rem; font-size:.82rem; color:var(--grafito); }
.tauto__datos span{ display:inline-flex; align-items:center; gap:.3rem; white-space:nowrap; }
.tauto__datos svg{ color:var(--bronce-texto); flex:none; }
.tauto__pie{ margin-top:auto; display:flex; justify-content:space-between; align-items:flex-end; gap:.5rem; padding-top:.7rem; border-top:1px solid var(--linea); }
.tauto__cuerpo > :nth-last-child(2){ margin-bottom:.75rem; }
.tauto__precio{ display:grid; gap:.05rem; min-width:0; }
.tauto__precio small{ font-family:var(--f-dato); font-weight:600; font-size:.7rem; letter-spacing:.09em; text-transform:uppercase; color:var(--grafito); }
.tauto__precio strong{ font-family:var(--f-dato); font-weight:600; font-size:clamp(1.12rem, 2vw, 1.35rem); line-height:1.1; font-variant-numeric:tabular-nums; }
.tauto__precio .tauto__sin{ font-family:var(--f-display); font-size:.88rem; color:var(--grafito); }
.tauto__ver{ display:inline-flex; align-items:center; gap:.3rem; font-weight:600; font-size:.9rem; color:var(--bronce-texto); white-space:nowrap; }
.tauto:hover .tauto__ver{ color:var(--carbon); }

/* ficha del auto */
.migas{ padding-top:.9rem; }
.migas a{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; font-size:.92rem; font-weight:500; color:var(--grafito); text-decoration:none; }
.migas a:hover{ color:var(--carbon); }
.fauto-sec{ padding-bottom:clamp(3rem, 7vw, 5rem); }
.fauto{ display:grid; gap:clamp(1.5rem, 4vw, 2.75rem); }
.fauto > *{ min-width:0; }
@media (min-width:960px){
  .fauto{ grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); align-items:start; }
  .fauto__info{ position:sticky; top:calc(var(--nav-h) + 1rem); }
}
.fotos-auto{ display:grid; gap:.6rem; }
.fotos-auto__escenario{ position:relative; aspect-ratio:4 / 3; background:var(--noche); border-radius:4px; overflow:hidden; }
.fotos-auto__foto{ display:block; width:100%; height:100%; object-fit:contain; }
.fotos-auto__flecha{
  position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; display:grid; place-items:center;
  border:0; border-radius:50%; background:rgba(244,243,240,.92); color:var(--carbon); cursor:pointer;
  box-shadow:0 4px 14px rgba(0,0,0,.2); transition:background .2s;
}
.fotos-auto__flecha:hover{ background:#fff; }
.fotos-auto__flecha:focus-visible{ outline:2px solid var(--bronce-claro); outline-offset:2px; }
.fotos-auto__flecha--ant{ left:.75rem; }
.fotos-auto__flecha--sig{ right:.75rem; }
.fotos-auto__contador{
  position:absolute; right:.75rem; bottom:.75rem; padding:.2rem .6rem; border-radius:999px;
  background:rgba(27,26,24,.8); color:var(--hueso); font-family:var(--f-dato); font-weight:600; font-size:.85rem; font-variant-numeric:tabular-nums;
}
.fotos-auto__minis{
  list-style:none; margin:0; padding:0 0 .3rem; display:grid; grid-auto-flow:column; grid-auto-columns:88px;
  gap:.5rem; overflow-x:auto; scroll-snap-type:x proximity; overscroll-behavior-x:contain;
}
@media (min-width:600px){ .fotos-auto__minis{ grid-auto-columns:104px; } }
.fotos-auto__mini{
  position:relative; display:block; width:100%; padding:0; border:2px solid transparent; border-radius:3px; overflow:hidden;
  background:var(--acento-fondo); cursor:pointer; scroll-snap-align:start; opacity:.7; transition:opacity .2s, border-color .2s;
}
.fotos-auto__mini img{ display:block; width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; }
.fotos-auto__mini:hover, .fotos-auto__mini--video{ opacity:1; }
.fotos-auto__mini[aria-current="true"]{ border-color:var(--bronce); opacity:1; }
.fotos-auto__mini:focus-visible{ outline:2px solid var(--bronce); outline-offset:2px; }
.fotos-auto__mini--video span{
  position:absolute; left:0; right:0; bottom:0; z-index:1; padding:.15rem .35rem; background:rgba(27,26,24,.82); color:var(--hueso);
  font-family:var(--f-dato); font-weight:600; font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
}
.fotos-auto__mini.prev-activo .auto__prev{ opacity:1; }

.fauto__info{ display:grid; gap:.65rem; align-content:start; }
.fauto__info h1{ font-size:clamp(1.9rem, 4.2vw, 2.6rem); line-height:1.08; letter-spacing:-.018em; }
.fauto__version{ font-size:1.05rem; color:var(--grafito); margin-top:-.25rem; }
.fauto__precio{ font-family:var(--f-dato); font-weight:600; font-size:clamp(2.2rem, 5vw, 2.9rem); line-height:1; font-variant-numeric:tabular-nums; margin-top:.35rem; }
.fauto__precio--sin{ font-size:clamp(1.5rem, 3.4vw, 1.9rem); color:var(--grafito); }
.fauto__nota{ font-size:.85rem; line-height:1.45; color:var(--grafito); }
.fauto__reserva{ padding:.6rem .8rem; background:var(--acento-fondo); border-left:3px solid var(--carbon); font-size:.92rem; }
.datos-auto{ margin:.35rem 0 0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:.6rem; }
.datos-auto div{ display:grid; gap:.25rem; padding:.75rem .85rem; background:var(--superficie); border:1px solid var(--linea); border-radius:4px; min-width:0; }
.datos-auto dt{ display:flex; align-items:center; gap:.4rem; font-family:var(--f-dato); font-weight:600; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--grafito); }
.datos-auto dt svg{ color:var(--bronce-texto); flex:none; }
.datos-auto dd{ margin:0; font-weight:600; font-size:1.05rem; }
.datos-auto--fila{ grid-template-columns:repeat(3, minmax(0, 1fr)); margin-top:0; gap:0 .8rem; }
.datos-auto--fila div{ background:transparent; padding:.55rem 0; border:0; border-top:1px solid var(--linea); border-radius:0; }
.datos-auto--fila dd{ font-size:.95rem; font-weight:500; }
.fauto__acciones{ display:grid; gap:.6rem; margin-top:.5rem; }
.fauto__desc{ margin-top:.9rem; padding-top:1rem; border-top:1px solid var(--linea); display:grid; gap:.6rem; }
.fauto__desc h2{ font-size:1.15rem; }
.fauto__desc p{ color:var(--grafito); }

/* simulador con precalificación */
.simulador{ display:grid; gap:1.2rem; }
.precal{ background:var(--superficie); border:1px solid var(--linea); border-radius:4px; padding:clamp(1.4rem, 3.5vw, 2.2rem); display:grid; gap:1.4rem; max-width:46rem; }
.precal[hidden], .simul[hidden]{ display:none; }
.precal__head{ display:grid; gap:.45rem; }
.precal__head h3{ font-size:clamp(1.3rem, 2.6vw, 1.6rem); }
.precal__head p{ color:var(--grafito); font-size:.95rem; max-width:var(--medida); }
.precal__campos{ display:grid; gap:1.2rem; }
.precal .field{ max-width:30rem; }
.simul{ display:grid; gap:1rem; }
.simul__head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:.2rem 1rem; }
.simul__perfil{ font-size:.92rem; color:var(--grafito); }
.enlace{
  display:inline-flex; align-items:center; min-height:44px; padding:0; background:none; border:0;
  font:inherit; font-weight:600; color:var(--bronce-texto); text-decoration:underline; text-underline-offset:3px; cursor:pointer;
}
.enlace:hover{ color:var(--carbon); }
.sim-campo__t{ font-weight:500; }
.sim-fijo{ grid-column:1 / -1; font-size:.84rem; color:var(--grafito); }

.veredicto{
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.9rem; padding:clamp(1.1rem, 3vw, 1.6rem);
  background:var(--superficie); border:1px solid var(--linea); border-left:4px solid var(--linea-2); border-radius:4px;
}
.veredicto:empty{ display:none; }
.veredicto[data-estado="calza"]{ border-left-color:var(--bronce); }
.veredicto[data-estado="ajusta"]{ border-left-color:var(--bronce-claro); }
.veredicto[data-estado="no-calza"], .veredicto[data-estado="no-califica"]{ border-left-color:var(--carbon); }
.veredicto__icono{ color:var(--bronce-texto); padding-top:.1rem; }
.veredicto[data-estado="no-calza"] .veredicto__icono, .veredicto[data-estado="no-califica"] .veredicto__icono{ color:var(--carbon); }
.veredicto__txt{ display:grid; gap:.6rem; min-width:0; }
.veredicto h3{ font-size:clamp(1.15rem, 2.4vw, 1.35rem); }
.veredicto h3:focus{ outline:none; }
.veredicto p, .veredicto li{ color:var(--grafito); }
.veredicto strong{ color:var(--carbon); }
.veredicto ul:not(.veredicto__autos){ margin:0; padding-left:1.1rem; display:grid; gap:.3rem; }
.veredicto__acciones{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; margin-top:.2rem; }
.veredicto__letra{ font-size:.84rem; }
.veredicto__autos{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
.veredicto__autos a{ display:grid; gap:.2rem; text-decoration:none; color:var(--carbon); }
.veredicto__autos img{ width:100%; height:auto; aspect-ratio:4 / 3; object-fit:cover; border-radius:3px; }
.veredicto__autos span{ font-size:.9rem; font-weight:600; line-height:1.3; }
.veredicto__autos strong{ font-family:var(--f-dato); font-weight:600; font-variant-numeric:tabular-nums; }
.veredicto__autos a:hover span{ color:var(--bronce-texto); }

/* ============================================================
   SELLO AUTOS GARCÍA · la marca del fundador dentro de Kapital
   Autos García va en los colores de Kapital: el rojo no vuelve.
   ============================================================ */
.ag__in{ display:grid; gap:2.5rem; }
@media (min-width:960px){ .ag__in{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); gap:4rem; align-items:start; } }
.ag__txt{ display:grid; gap:1.2rem; justify-items:start; min-width:0; }
.ag__auto{ width:min(220px, 62%); margin-block:.1rem; }
.ag__txt h2{ font-size:clamp(1.9rem, 4.2vw, 2.9rem); letter-spacing:-.012em; }
.ag__txt > p{ color:var(--grafito); max-width:var(--medida); }
/* las dos fuerzas: quién hace qué en cada compra */
.ag__fuerzas{ margin:0; width:100%; max-width:36rem; border-top:1px solid var(--linea); }
.ag__fuerzas > div{ display:grid; gap:.2rem 1.2rem; padding:.85rem 0; border-bottom:1px solid var(--linea); }
@media (min-width:560px){ .ag__fuerzas > div{ grid-template-columns:9.5rem minmax(0, 1fr); align-items:baseline; } }
.ag__fuerzas dt{ font-family:var(--f-dato); font-weight:600; font-size:.9rem; letter-spacing:.07em; text-transform:uppercase; color:var(--bronce-texto); }
.ag__fuerzas dd{ margin:0; font-size:.98rem; line-height:1.5; color:var(--grafito); }
.ag__cita{ margin:0; padding:.15rem 0 .15rem 1.2rem; border-left:2px solid var(--bronce); display:grid; gap:.7rem; max-width:36rem; }
.ag__cita blockquote{ margin:0; }
.ag__cita blockquote p{ font-size:clamp(1.1rem, 1.8vw, 1.28rem); line-height:1.45; font-weight:500; color:var(--carbon); }
.ag__cita figcaption{ font-size:.92rem; color:var(--grafito); }
.ag__cita strong{ font-weight:600; color:var(--carbon); }
.ag__prueba{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; }
.ag__caras{ display:flex; gap:6px; }
.ag__caras img{ width:72px; height:50px; object-fit:cover; border-radius:3px; }
.ag__prueba p{ font-size:.95rem; color:var(--grafito); }
.ag__sello{ display:grid; gap:1rem; min-width:0; padding:1.5rem 1.4rem 1.4rem; background:var(--papel); border:1px solid var(--linea); }
.ag__mas{ font-weight:600; font-size:.95rem; color:var(--carbon); text-decoration:none; }
.ag__mas:hover{ color:var(--bronce-texto); }
#sello, #clientes{ scroll-margin-top:calc(var(--nav-h) + 16px); }

/* nosotros: las marcas del fundador */
.credenciales{ list-style:none; margin:0; padding:0; display:grid; gap:1px; align-self:start; background:var(--linea); border:1px solid var(--linea); }
.credenciales li{ display:grid; grid-template-columns:96px minmax(0, 1fr); gap:1.1rem; align-items:center; padding:1.3rem 1.2rem; background:var(--papel); }
.credenciales li > img{ width:96px; }
.credenciales li > img.credenciales__mw{ width:56px; justify-self:center; }
.credenciales h3{ font-size:1.1rem; margin-bottom:.2rem; }
.credenciales p{ font-size:.94rem; color:var(--grafito); }
.credenciales a{ display:inline-block; margin-top:.35rem; font-weight:600; font-size:.92rem; }

/* ficha: el sello junto a los botones */
.sello-mini{ display:grid; grid-template-columns:64px minmax(0, 1fr); gap:.85rem; align-items:center; margin-top:.3rem; padding:.85rem 1rem; background:var(--superficie); border:1px solid var(--linea); color:var(--grafito); text-decoration:none; font-size:.9rem; line-height:1.45; }
.sello-mini img{ width:64px; }
.sello-mini span{ display:grid; gap:.1rem; }
.sello-mini strong{ font-weight:600; font-size:.95rem; color:var(--carbon); }
.sello-mini:hover strong{ color:var(--bronce-texto); }

/* Simulador de crédito: sección más compacta */
#simulador{ padding-block:clamp(2rem, 4.5vw, 3rem) clamp(2.5rem, 5vw, 3.5rem); }
#simulador .sec-head{ gap:.6rem; margin-bottom:clamp(1.2rem, 2.5vw, 1.75rem); }

/* ============================================================
   PERSONAS · las caras del equipo (paginas/_equipo.html; .equipo es de la landing anterior)
   En el celular, foto chica al lado del texto; desde 640px, foto arriba.
   ============================================================ */
.personas__grid{ list-style:none; margin:0; padding:0; display:grid; gap:.85rem; grid-template-columns:minmax(0, 1fr); }
.persona{ display:grid; grid-template-columns:104px minmax(0, 1fr); gap:1rem; align-items:start; align-content:start; padding:.75rem; background:var(--superficie); border:1px solid var(--linea); }
.persona img{ width:100%; aspect-ratio:4 / 5; object-fit:cover; background:#F7F7F7; }
.persona__txt{ display:grid; gap:.25rem; align-content:start; min-width:0; }
.persona h3{ font-size:1.06rem; line-height:1.25; }
.persona .placa{ font-size:.76rem; line-height:1.35; }
.persona__datos{ list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.35rem; font-size:.9rem; line-height:1.42; color:var(--grafito); }
.persona__datos li{ position:relative; padding-left:.9rem; }
.persona__datos li::before{ content:""; position:absolute; left:0; top:.68em; width:.45rem; height:1.5px; background:var(--bronce); }
@media (min-width:640px){
  .personas__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); gap:1.25rem; }
  .persona{ grid-template-columns:minmax(0, 1fr); gap:0; padding:0; }
  .persona__txt{ padding:.95rem 1.05rem 1.15rem; }
  /* nombre y cargo con dos líneas reservadas: los datos parten a la misma altura en todas */
  .persona h3{ min-height:2.5em; }
  .persona .placa{ min-height:2.7em; }
}
@media (min-width:1180px){ .personas__grid{ grid-template-columns:repeat(5, minmax(0, 1fr)); gap:1rem; } }