:root{
  --negro:#0A0A0A;
  --negro-2:#131313;
  --negro-3:#1C1C1C;
  --linea-o:#2A2A2A;
  --hueso:#F4F2EE;
  --blanco:#FFFFFF;
  --tinta:#121212;
  --gris:#6B675F;
  --gris-o:#A39E93;
  --linea:#E2DED6;
  --oro:#B8924E;
  --oro-claro:#D4B06A;
  --oro-osc:#A8843F;
  --wa:#1FA855;
  --radio:12px;
  --titulo:"Barlow Condensed",system-ui,sans-serif;
  --texto:"Barlow",system-ui,sans-serif;
  --ancho:1240px;
  --gutter:clamp(16px,4vw,40px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--hueso);color:var(--tinta);font-family:var(--texto);font-size:17px;line-height:1.5;overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.envase{max-width:var(--ancho);margin:0 auto;padding:0 var(--gutter)}
h1,h2,h3{font-family:var(--titulo);font-weight:700;line-height:.98;letter-spacing:-.005em}
h1{font-size:clamp(46px,7.4vw,96px);font-style:italic;text-transform:uppercase}
h2{font-size:clamp(34px,4.6vw,58px);font-style:italic;text-transform:uppercase}
h3{font-size:clamp(22px,2.2vw,28px);text-transform:uppercase;letter-spacing:.01em}
.oro{color:var(--oro)}
.rotulo{font-family:var(--titulo);font-weight:600;font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--oro);display:flex;align-items:center;gap:10px}
.rotulo::before{content:"";width:9px;height:9px;background:var(--oro);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.bajada{font-size:clamp(17px,1.5vw,20px);max-width:48ch;color:var(--gris)}
.oscuro .bajada{color:var(--gris-o)}

/* botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:999px;font-family:var(--titulo);font-weight:700;font-size:18px;letter-spacing:.04em;text-transform:uppercase;transition:background .2s,color .2s,transform .2s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-oro{background:var(--oro);color:var(--negro)}
.btn-oro:hover{background:var(--oro-claro)}
.btn-borde{border:1.5px solid currentColor}
.btn-borde:hover{background:var(--oro);border-color:var(--oro);color:var(--negro)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#178a45}
.btn svg{width:20px;height:20px}

/* cabecera */
.cab{position:sticky;top:0;z-index:60;background:rgba(10,10,10,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border-bottom:1px solid var(--linea-o);transition:transform .35s}
.cab.escondida{transform:translateY(-100%)}
.cab .envase{display:flex;align-items:center;justify-content:space-between;height:74px;gap:20px}
.cab .marca img{height:52px;width:auto}
.nav{display:flex;align-items:center;gap:30px;font-family:var(--titulo);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase}
.nav a{color:#D9D5CC;position:relative;padding:6px 0}
.nav a:hover,.nav a[aria-current]{color:#fff}
.nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--oro)}
.nav .btn{height:44px;padding:0 20px;font-size:16px;color:var(--negro)}
.nav .btn::after{display:none}
.menu-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:24px;height:2px;background:#fff;position:relative;transition:.25s}
.menu-btn span::before,.menu-btn span::after{content:"";position:absolute;left:0}
.menu-btn span::before{top:-8px}.menu-btn span::after{top:8px}
.abierto .menu-btn span{background:transparent}
.abierto .menu-btn span::before{transform:translateY(8px) rotate(45deg)}
.abierto .menu-btn span::after{transform:translateY(-8px) rotate(-45deg)}
.barra-prog{position:absolute;left:0;bottom:-1px;height:2px;background:var(--oro);width:0}
@media (max-width:900px){
  .cab .envase{height:64px}
  .cab .marca img{height:42px}
  .menu-btn{display:flex}
  .nav{position:fixed;inset:64px 0 auto 0;background:var(--negro);flex-direction:column;align-items:stretch;gap:0;padding:6px var(--gutter) 22px;border-bottom:1px solid var(--linea-o);opacity:0;transform:translateY(-8px);pointer-events:none;transition:.25s}
  .abierto .nav{opacity:1;transform:none;pointer-events:auto}
  .nav a{padding:16px 0;border-bottom:1px solid var(--linea-o);font-size:20px}
  .nav a[aria-current]::after{display:none}
  .nav a[aria-current]{color:var(--oro)}
  .nav .btn{margin-top:18px;height:52px;border:0;font-size:18px}
}

/* secciones */
.sec{padding:clamp(64px,9vw,120px) 0}
.oscuro{background:var(--negro);color:#fff}
.blanco{background:var(--blanco)}
.cabeza{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:clamp(28px,4vw,48px);flex-wrap:wrap}
.cabeza h2{margin-top:14px}
.link-mas{font-family:var(--titulo);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase;border-bottom:2px solid var(--oro);padding-bottom:3px;white-space:nowrap}

/* panal (textura del techo del salón) */
.panal{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.panal path{fill:none;stroke:#3a2d17;stroke-width:1.4;transition:stroke .5s,filter .5s}
.panal path.on{stroke:var(--oro-claro);stroke-opacity:.75;filter:drop-shadow(0 0 4px rgba(212,176,106,.55))}

/* hero */
.hero{position:relative;background:var(--negro);color:#fff;overflow:hidden}
.hero .envase{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.hero-txt .rotulo{margin-bottom:18px}
.hero h1 .oro{display:block}
.hero-sub{font-size:clamp(18px,1.6vw,21px);color:#D9D5CC;max-width:44ch;margin:22px 0 28px}
.hero-acc{display:flex;gap:12px;flex-wrap:wrap}
.hero-foto{border-radius:var(--radio);overflow:hidden;aspect-ratio:3/4;max-height:620px;position:relative;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.hero-foto img{width:100%;height:100%;object-fit:cover}
.hero-foto figcaption{position:absolute;left:14px;bottom:12px;font-size:13px;color:#fff;background:rgba(0,0,0,.55);padding:5px 10px;border-radius:999px}
@media (max-width:900px){
  .hero .envase{grid-template-columns:1fr;padding-top:0}
  .hero-foto{order:-1;aspect-ratio:4/3;margin:0 calc(var(--gutter) * -1);border-radius:0;max-height:none}
  .hero-foto img{object-position:50% 62%}
}

/* buscador */
.buscador{position:relative;z-index:2;background:var(--blanco);color:var(--tinta);border-radius:var(--radio);padding:18px;display:grid;grid-template-columns:repeat(3,1fr) auto;gap:12px;align-items:end;box-shadow:0 24px 50px -24px rgba(0,0,0,.45);margin-top:-44px}
.buscador label{display:block;font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.buscador select{width:100%;height:50px;border:1px solid var(--linea);border-radius:10px;padding:0 14px;background:var(--hueso);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--tinta) 50%),linear-gradient(135deg,var(--tinta) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat}
.buscador .btn{height:50px;background:var(--negro);color:#fff}
.buscador .btn:hover{background:var(--oro);color:var(--negro)}
@media (max-width:900px){.buscador{grid-template-columns:1fr 1fr;margin-top:24px}.buscador .btn{grid-column:1/-1}}

/* marcas y tipos */
.marcas{display:flex;gap:12px;flex-wrap:wrap}
.marca-chip{display:flex;align-items:center;gap:12px;height:64px;padding:0 22px 0 16px;background:var(--blanco);border:1px solid var(--linea);border-radius:999px;font-family:var(--titulo);font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,transform .2s}
.marca-chip:hover{border-color:var(--oro);transform:translateY(-2px)}
.marca-chip img{width:34px;height:34px;object-fit:contain}
.tipos{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.tipo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;height:120px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);font-family:var(--titulo);font-weight:600;font-size:18px;letter-spacing:.06em;text-transform:uppercase;transition:border-color .2s,transform .2s}
.tipo:hover{border-color:var(--oro);transform:translateY(-2px)}
.tipo svg{width:64px;height:32px;color:var(--oro-osc)}
.tipo small{font-family:var(--texto);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;color:var(--gris)}
@media (max-width:700px){.marcas{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 6px;scrollbar-width:none}.marca-chip{flex:none}.tipos{grid-template-columns:repeat(2,1fr)}}

/* tarjetas de auto */
.autos{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.auto{display:flex;flex-direction:column;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;transition:transform .25s,box-shadow .25s}
.auto:hover{transform:translateY(-3px);box-shadow:0 20px 40px -24px rgba(0,0,0,.35)}
.auto .foto{position:relative;aspect-ratio:1/1;background:var(--negro-2);overflow:hidden}
.auto .foto img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.auto:hover .foto img{transform:scale(1.04)}
.chip{position:absolute;top:12px;left:12px;background:rgba(10,10,10,.8);color:#fff;font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:999px}
.chip.senado{left:auto;right:12px;background:var(--oro);color:var(--negro)}
.auto .datos{padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.auto h3{font-size:24px}
.auto .ver{color:var(--gris);font-size:15px}
.auto .fila{display:flex;gap:14px;color:var(--gris);font-size:14px;margin-top:4px}
.auto .fila span{display:flex;align-items:center;gap:6px}
.auto .precio{font-family:var(--titulo);font-weight:700;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--oro-osc);margin-top:auto;padding-top:10px}
.auto .pie-card{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--linea);margin-top:10px;padding-top:12px;font-family:var(--titulo);font-weight:600;letter-spacing:.08em;text-transform:uppercase;font-size:15px}
.vacio-stock{grid-column:1/-1;background:var(--blanco);border:1px dashed var(--linea);border-radius:var(--radio);padding:40px;text-align:center;color:var(--gris)}
@media (max-width:1000px){.autos{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.autos{grid-template-columns:repeat(2,1fr);gap:12px}.auto h3{font-size:20px}.auto .datos{padding:12px}.auto .precio{font-size:16px}.auto .fila{font-size:13px;gap:10px;flex-wrap:wrap}}

/* bandas A→B */
.banda{position:relative;overflow:hidden;background:var(--negro);color:#fff;border-radius:var(--radio);display:grid;grid-template-columns:1.1fr .9fr}
.banda .txt{position:relative;padding:clamp(28px,4vw,56px)}
.banda .img{position:relative;min-height:320px}
.banda .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.banda h2{margin:14px 0 18px}
.antes{list-style:none;display:grid;gap:10px;margin:0 0 22px}
.antes li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:#D9D5CC}
.antes li::before{content:"✕";color:#7d776c;font-weight:700}
.despues{border-left:3px solid var(--oro);padding:4px 0 4px 16px;margin-bottom:26px;font-size:19px;color:#fff;max-width:46ch}
@media (max-width:900px){.banda{grid-template-columns:1fr}.banda .img{min-height:260px;order:-1}}

/* pasos */
.pasos{display:grid;grid-template-columns:repeat(5,1fr);gap:0;counter-reset:p;border-top:2px solid var(--oro)}
.paso-c{padding:22px 20px 0 0}
.paso-c+.paso-c{padding-left:20px;border-left:1px solid var(--linea)}
.oscuro .paso-c+.paso-c{border-color:var(--linea-o)}
.paso-c .n{font-family:var(--titulo);font-style:italic;font-weight:700;font-size:44px;line-height:1;color:var(--oro)}
.paso-c h3{margin:10px 0 8px;font-size:22px}
.paso-c p{font-size:15px;color:var(--gris)}
.oscuro .paso-c p{color:var(--gris-o)}
@media (max-width:1000px){.pasos{grid-template-columns:1fr 1fr}.paso-c,.paso-c+.paso-c{padding:20px 16px 20px 0;border-left:0;border-bottom:1px solid var(--linea)}.oscuro .paso-c{border-color:var(--linea-o)}}
@media (max-width:560px){.pasos{grid-template-columns:1fr}}

/* entregas */
.entregas{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.entrega{position:relative;border-radius:var(--radio);overflow:hidden;aspect-ratio:4/5;background:var(--negro-2)}
.entrega img{width:100%;height:100%;object-fit:cover}
.entrega figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 14px 14px;background:linear-gradient(to top,rgba(0,0,0,.82),transparent);color:#fff}
.entrega b{display:block;font-family:var(--titulo);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.entrega span{font-size:14px;color:#D9D5CC}

.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.video{position:relative;display:block;border-radius:var(--radio);overflow:hidden;aspect-ratio:9/16;background:var(--negro-2)}
.video img{width:100%;height:100%;object-fit:cover}
.video .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;background:rgba(10,10,10,.5);border:2px solid #fff;display:grid;place-items:center;transition:transform .25s,background .25s}
.video .play::after{content:"";width:0;height:0;margin-left:3px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.video:hover .play{transform:translate(-50%,-50%) scale(1.08);background:rgba(10,10,10,.75)}
.video figcaption{position:absolute;left:0;right:0;bottom:0;padding:32px 14px 14px;background:linear-gradient(to top,rgba(0,0,0,.82),transparent);color:#fff;font-family:var(--titulo);font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.02em}
@media (max-width:1000px){.entregas{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 8px;scrollbar-width:none}.entrega{scroll-snap-align:start}}
@media (min-width:600px) and (max-width:1000px){.entregas{grid-auto-columns:36%}}

/* reseñas (cita, sin tarjeta) */
.resena{max-width:760px}
.resena p{font-size:clamp(20px,2vw,25px);line-height:1.35;font-weight:500}
.oscuro .resena p{color:#fff}
.resena .quien{display:flex;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:var(--gris)}
.oscuro .resena .quien{color:var(--gris-o)}
.resena .ini{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;font-size:17px;flex:none}
.resena .quien b{color:var(--tinta);font-weight:600;display:block}
.oscuro .resena .quien b{color:#fff}
.estrellas{color:#F4B400;letter-spacing:2px;font-size:14px}
.g-logo{width:18px;height:18px}
.nota-google{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.nota-google .num{font-family:var(--titulo);font-weight:700;font-style:italic;font-size:64px;line-height:1}
.nota-google small{display:block;color:var(--gris);font-size:15px}
.resenas-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px) clamp(28px,5vw,80px)}
@media (max-width:800px){.resenas-grid{grid-template-columns:1fr}}

/* por qué DF1 */
.razones{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea-o);border:1px solid var(--linea-o);border-radius:var(--radio);overflow:hidden}
.razon{background:var(--negro-2);padding:28px}
.razon svg{width:34px;height:34px;color:var(--oro);margin-bottom:18px}
.razon h3{font-size:22px;margin-bottom:8px}
.razon p{color:var(--gris-o);font-size:16px}
@media (max-width:900px){.razones{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.razones{grid-template-columns:1fr}}

/* partido */
.partido{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.partido .foto{border-radius:var(--radio);overflow:hidden}
.partido .foto img{width:100%;height:100%;object-fit:cover}
@media (max-width:900px){.partido{grid-template-columns:1fr}}

/* ubicación */
.ubic{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px}
.ubic .caja{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:28px;display:flex;flex-direction:column;gap:18px}
.dato-u{display:grid;grid-template-columns:26px 1fr;gap:12px}
.dato-u svg{width:22px;height:22px;color:var(--oro-osc);margin-top:2px}
.dato-u b{display:block;font-weight:600}
.dato-u span{color:var(--gris);font-size:15px}
.ubic iframe{width:100%;height:100%;min-height:380px;border:0;border-radius:var(--radio)}
@media (max-width:900px){.ubic{grid-template-columns:1fr}.ubic iframe{min-height:300px}}

/* stock página */
.stock-lay{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start}
.filtros{position:sticky;top:96px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:20px;display:grid;gap:14px}
.filtros h3{font-size:20px}
.filtros label{display:block;font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.filtros select{width:100%;height:46px;border:1px solid var(--linea);border-radius:10px;padding:0 12px;background:var(--hueso)}
.filtros .limpiar{font-size:14px;color:var(--gris);text-decoration:underline;justify-self:start}
.filtros-btn{display:none}
.conteo{color:var(--gris);font-size:15px;margin-bottom:14px}
@media (max-width:900px){
  .stock-lay{grid-template-columns:1fr}
  .filtros{position:static;display:none}
  .filtros.visible{display:grid}
  .filtros-btn{display:inline-flex;height:46px;padding:0 18px;border:1px solid var(--tinta);border-radius:999px;font-family:var(--titulo);font-weight:600;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:8px;margin-bottom:14px}
}

/* ficha */
.ficha{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.ficha>*{min-width:0}
.galeria .principal{border-radius:var(--radio);overflow:hidden;aspect-ratio:1/1;background:var(--negro-2);max-height:760px}
.galeria .principal img{width:100%;height:100%;object-fit:cover}
.miniaturas{display:flex;gap:10px;margin-top:10px;overflow-x:auto;scrollbar-width:none}
.miniaturas button{flex:none;width:84px;height:84px;border-radius:10px;overflow:hidden;border:2px solid transparent;opacity:.7}
.miniaturas button[aria-current="true"]{border-color:var(--oro);opacity:1}
.miniaturas img{width:100%;height:100%;object-fit:cover}
.ficha-info h1{font-size:clamp(40px,5vw,68px)}
.ficha-info .ver{color:var(--gris);font-size:18px;margin-top:8px}
.specs{list-style:none;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--linea);margin:24px 0}
.specs li{padding:14px 0;border-bottom:1px solid var(--linea);display:flex;flex-direction:column}
.specs li:nth-child(odd){padding-right:14px}
.specs small{font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris)}
.specs b{font-size:18px;font-weight:600}
.ficha-acc{display:grid;gap:10px}
.ficha-acc .btn{width:100%}
.ficha-nota{background:var(--blanco);border:1px solid var(--linea);border-left:3px solid var(--oro);border-radius:10px;padding:16px;font-size:15px;color:var(--gris);margin-top:18px}
.ficha-nota b{color:var(--tinta)}
@media (max-width:900px){.ficha{grid-template-columns:1fr}.galeria .principal{aspect-ratio:1/1;margin:0 calc(var(--gutter) * -1);border-radius:0}}

/* armador (consignación) */
.armador{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,56px);align-items:start}
.preg{padding:24px 0;border-top:1px solid var(--linea)}
.preg:first-child{border-top:2px solid var(--oro)}
.preg h3{font-size:22px;margin-bottom:14px;display:flex;gap:12px;align-items:baseline}
.preg h3 .n{color:var(--oro);font-style:italic}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.campos label{display:block;font-family:var(--titulo);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);margin-bottom:6px}
.campos input,.campos select{width:100%;height:48px;border:1px solid var(--linea);border-radius:10px;padding:0 14px;background:var(--blanco)}
.ops{display:flex;flex-wrap:wrap;gap:8px}
.op{height:44px;padding:0 18px;border:1px solid var(--linea);border-radius:999px;background:var(--blanco);font-size:15px;transition:.15s}
.op:hover{border-color:var(--tinta)}
.op[aria-pressed="true"]{background:var(--negro);color:#fff;border-color:var(--negro)}
.sub-preg{margin-top:16px}
.sub-preg p{font-weight:600;margin-bottom:8px}
.plan{position:sticky;top:96px;background:var(--negro);color:#fff;border-radius:var(--radio);padding:26px;overflow:hidden}
.plan h3{font-size:24px;margin-bottom:6px}
.plan .auto-txt{color:var(--oro-claro);font-family:var(--titulo);font-weight:600;font-size:19px;letter-spacing:.04em;text-transform:uppercase;min-height:24px}
.plan ul{list-style:none;display:grid;gap:11px;margin:18px 0 20px}
.plan li{display:grid;grid-template-columns:22px 1fr;gap:10px;font-size:15px;color:#E4E0D7;animation:entra .35s ease both}
.plan li::before{content:"";width:10px;height:10px;margin-top:6px;background:var(--oro);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.plan li.extra{color:#fff}
.plan li.extra::before{background:var(--oro-claro)}
@keyframes entra{from{opacity:0;transform:translateY(6px)}}
.plan .msj{background:#DCF8C6;color:#102010;border-radius:12px 12px 4px 12px;padding:12px 14px;font-size:14px;line-height:1.45;margin-bottom:14px}
.plan .btn{width:100%}
.plan .aviso{font-size:13px;color:var(--gris-o);margin-top:10px;text-align:center}
@media (max-width:900px){.armador{grid-template-columns:1fr}.plan{position:static}.campos{grid-template-columns:1fr 1fr}}

/* encabezado de página interna */
.pag-cab{position:relative;background:var(--negro);color:#fff;overflow:hidden;padding:clamp(48px,7vw,96px) 0 clamp(40px,5vw,64px)}
.pag-cab .envase{position:relative}
.pag-cab h1{margin:14px 0 16px;max-width:16ch}
.pag-cab .bajada{color:#D9D5CC}

/* pie */
.pie{background:var(--negro);color:#BDB8AE;padding:0 0 32px;font-size:15px}
.cuadros{height:14px;background:repeating-conic-gradient(#fff 0 25%,#0A0A0A 0 50%) 0 0/14px 14px;opacity:.9}
.pie-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-top:56px}
.pie img{height:56px;width:auto;margin-bottom:16px}
.pie h4{font-family:var(--titulo);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:14px}
.pie ul{list-style:none;display:grid;gap:9px}
.pie a:hover{color:#fff}
.pie-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:48px;padding-top:20px;border-top:1px solid var(--linea-o);font-size:13px;color:#7d776c}
@media (max-width:900px){.pie-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.pie-grid{grid-template-columns:1fr}}

/* velo entre páginas */
.velo-paso{position:fixed;inset:0;background:var(--negro);z-index:100;pointer-events:none;opacity:0;transition:opacity .28s}
.velo-paso.on{opacity:1}

/* entrada (la clase que oculta la pone el JS) */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* el panal sólo del lado derecho, para que no compita con el texto */
.hero .panal,.pag-cab .panal{-webkit-mask-image:linear-gradient(to left,#000 15%,transparent 70%);mask-image:linear-gradient(to left,#000 15%,transparent 70%)}
@media (max-width:900px){.hero .panal{-webkit-mask-image:linear-gradient(to top,#000 0%,transparent 60%);mask-image:linear-gradient(to top,#000 0%,transparent 60%)}}
.hero-txt,.hero-foto{position:relative;z-index:1}

/* marcas: insignias a color en tarjeta clara */
.marcas{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.marca-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;height:180px;background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);font-family:var(--titulo);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase;color:var(--gris);transition:border-color .2s,transform .2s,box-shadow .2s}
.marca-card:hover{border-color:var(--oro);transform:translateY(-3px);box-shadow:0 18px 36px -22px rgba(0,0,0,.35)}
.marca-card img{max-width:62%;max-height:92px;width:auto;height:auto;object-fit:contain}
/* tipos: los autos de DF1 recortados */
.tipos{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:0}
.tipo{height:auto;padding:28px 20px 22px;gap:16px;background:linear-gradient(180deg,#fff 0%,#EFECE6 100%)}
.tipo img{width:100%;height:170px;object-fit:contain;filter:drop-shadow(0 14px 12px rgba(0,0,0,.18));transition:transform .4s}
.tipo:hover img{transform:scale(1.04) translateX(4px)}
.tipo span{font-size:22px;color:var(--tinta)}
/* razones con foto */
.razones{background:none;border:0;gap:14px}
.razon{padding:0;background:var(--negro-2);border:1px solid var(--linea-o);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.razon img{width:100%;aspect-ratio:4/3;object-fit:cover}
.razon figcaption{padding:20px 22px 24px}
/* datos de contacto sin íconos */
.dato-u{grid-template-columns:1fr;border-left:3px solid var(--oro);padding-left:14px}
@media (max-width:900px){.marcas{grid-template-columns:repeat(2,1fr)}.marca-card{height:140px}.marca-card img{max-height:70px}}
@media (max-width:700px){.marcas{display:grid;overflow:visible;margin:0;padding:0}.tipos{grid-template-columns:1fr}.tipo{flex-direction:row;justify-content:space-between;padding:16px 20px}.tipo img{width:62%;height:120px}.tipo span{order:-1}}

/* marcas 8 */
.marcas{grid-template-columns:repeat(4,1fr)}
.marca-card img{max-width:58%;max-height:84px}
/* tipos: auto protagonista */
.tipos{grid-template-columns:repeat(4,1fr)}
.tipo{padding:34px 18px 24px;min-height:250px;justify-content:flex-end}
.tipo img{height:150px}
@media (max-width:1000px){.tipos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.marcas{grid-template-columns:repeat(2,1fr)}.tipos{grid-template-columns:1fr}.tipo{min-height:0;flex-direction:column;justify-content:center;padding:22px 18px}.tipo img{width:100%;height:150px}.tipo span{order:0}}
/* banners a sangre */
.banner{position:relative;display:block;border-radius:var(--radio);overflow:hidden;min-height:520px;background:var(--negro);color:#fff}
.banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.banner:hover>img{transform:scale(1.03)}
.banner::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 42%,rgba(10,10,10,0) 72%)}
.banner-der::after{background:linear-gradient(270deg,rgba(10,10,10,.92) 0%,rgba(10,10,10,.65) 42%,rgba(10,10,10,0) 72%)}
.banner-txt{position:relative;z-index:1;max-width:520px;padding:clamp(32px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:16px;min-height:520px}
.banner-der .banner-txt{margin-left:auto}
.banner-txt h2{margin:0}
.banner-txt p:not(.rotulo){font-size:19px;color:#E4E0D7}
.banner-txt .btn{align-self:flex-start;margin-top:6px}
@media (max-width:760px){.banner{min-height:0}.banner>img{position:relative;height:300px}.banner::after{top:300px;background:none}.banner-txt{min-height:0;padding:24px 20px 28px;margin:0!important}}
/* reseñas con cara */
.caras{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.cara{background:var(--hueso);border-radius:var(--radio);overflow:hidden;display:flex;flex-direction:column}
.cara img{width:100%;aspect-ratio:1/1;object-fit:cover}
.cara figcaption{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.cara p{font-size:18px;line-height:1.35;font-weight:500;flex:1}
.cara b{font-family:var(--titulo);font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.cara small{color:var(--gris);font-size:13px;margin-top:-6px}
.cara-h{flex-direction:row;background:var(--blanco);border:1px solid var(--linea)}
.cara-h img{width:42%;aspect-ratio:auto}
@media (max-width:1000px){.caras{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.caras{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 8px;scrollbar-width:none}.cara{scroll-snap-align:start}.cara-h{flex-direction:column}.cara-h img{width:100%;aspect-ratio:1/1}}

/* banner: foto grande a un lado, a sangre dentro de la tarjeta */
.banner{min-height:540px}
.banner>img{left:auto;right:0;width:64%}
.banner-der>img{right:auto;left:0}
.banner::after{background:linear-gradient(90deg,var(--negro) 36%,rgba(10,10,10,.75) 42%,rgba(10,10,10,0) 58%)}
.banner-der::after{background:linear-gradient(270deg,var(--negro) 36%,rgba(10,10,10,.75) 42%,rgba(10,10,10,0) 58%)}
.banner-txt{max-width:44%;min-height:540px}
@media (max-width:760px){.banner>img{width:100%;height:340px}.banner::after,.banner-der::after{display:none}.banner-txt{max-width:none}}
@media (max-width:760px){.banner{min-height:0}.banner-txt{min-height:0}.banner>img{position:relative;height:320px}}
@media (max-width:700px){.tipos{grid-template-columns:1fr 1fr;gap:10px}.tipo{padding:18px 10px 14px;gap:8px}.tipo img{height:90px}.tipo span{font-size:18px}}

.credito{font-size:12px;color:var(--gris);margin-top:12px}
.vacio-stock{display:flex;flex-direction:column;align-items:center;gap:12px;padding:48px 24px;background:var(--negro);color:#fff;border:0}
.vacio-stock h3{font-size:clamp(26px,3vw,36px);font-style:italic}
.vacio-stock p{color:var(--gris-o);max-width:40ch}

/* tipos: cada auto parado en el salón de DF1 (techo de panal y piso a cuadros reales) */
.tipos .tipo{padding:0;gap:0;min-height:0;justify-content:flex-start;overflow:hidden;background:#141414;border:0;position:relative}
.tipos .tipo img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;filter:none;transition:transform .6s}
.tipos .tipo:hover img{transform:scale(1.05)}
.tipos .tipo span{order:0;position:absolute;left:0;right:0;bottom:0;padding:34px 0 14px;color:#fff;text-align:center;background:linear-gradient(to top,rgba(0,0,0,.8),transparent);font-size:22px}
@media (max-width:700px){.tipos{grid-template-columns:1fr 1fr;gap:10px}.tipos .tipo{flex-direction:column;padding:0}.tipos .tipo img{width:100%;height:auto}.tipos .tipo span{font-size:16px;padding:24px 0 10px}}
.tipos .tipo span{top:auto;bottom:auto;top:0;padding:14px 0 30px;background:linear-gradient(to bottom,rgba(0,0,0,.55),transparent)}

/* ===== compacto: cada sección entra en una pantalla (22-sep) ===== */
.sec{padding:clamp(52px,6.5vw,92px) 0}
.sec-marcas{padding-bottom:clamp(28px,3vw,40px)}
.sec-tipos{padding-top:clamp(28px,3vw,40px)}
.cabeza{margin-bottom:clamp(22px,3vw,36px)}

/* marcas: cinta que corre sola, se frena al pasar el mouse */
.cinta{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.cinta .marcas.pista{display:flex;flex-wrap:nowrap;gap:14px;width:max-content;padding:6px 0 14px;margin:0;overflow:visible;grid-template-columns:none}
.cinta .marca-card{flex:none;width:200px;height:132px;gap:10px}
.cinta .marca-card img{max-width:60%;max-height:66px}
.js .cinta.corre .pista{animation:cinta 38s linear infinite}
.cinta:hover .pista{animation-play-state:paused}
@keyframes cinta{to{transform:translateX(-50%)}}
@media (max-width:700px){.cinta .marca-card{width:150px;height:104px}.cinta .marca-card img{max-height:50px}}

/* autos: foto menos alta; en el celular se deslizan de costado */
.autos .auto .foto{aspect-ratio:4/3.4}
@media (max-width:700px){
  .autos{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:74%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 10px;scrollbar-width:none}
  .autos::-webkit-scrollbar,.razones::-webkit-scrollbar{display:none}
  .autos .auto{scroll-snap-align:start}
}

/* banners más bajos */
.banner,.banner-txt{min-height:min(460px,72vh)}
@media (max-width:760px){.banner,.banner-txt{min-height:0}.banner>img{height:230px}.banner::after{top:230px}.banner-txt{gap:12px}.banner-txt h2{font-size:34px}}

/* entregas entre los banners */
.sec-entregas{padding:clamp(40px,5vw,64px) 0}
.entrega{aspect-ratio:4/4.6}

/* razones: foto más baja; en el celular, carrusel */
.razon img{aspect-ratio:16/10}
.razon figcaption{padding:16px 18px 20px}
@media (max-width:700px){.razones{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 10px;scrollbar-width:none}.razon{scroll-snap-align:start}}

/* reseñas: en tablet y celular, carrusel */
@media (max-width:1000px){.caras{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:40%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:0 var(--gutter) 10px;scrollbar-width:none}.cara{scroll-snap-align:start}}
@media (max-width:560px){.caras{grid-auto-columns:78%}}

/* cierre: la foto no ocupa más de una pantalla */
.partido .foto{aspect-ratio:1/1!important;max-height:78vh}

/* ===== animaciones ===== */
.js .escalon > *{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.js .escalon.in > *{opacity:1;transform:none}
.js .tipos.escalon > .tipo{transform:translateX(-46px)}
.js .tipos.escalon.in > .tipo{transform:none}
.js .rv img{transition:transform 1.3s cubic-bezier(.2,.7,.2,1)}
.js .foto.rv:not(.in) img,.js .banner.rv:not(.in)>img{transform:scale(1.08)}
@media (prefers-reduced-motion:reduce){.js .escalon > *{opacity:1;transform:none;transition:none}.js .cinta.corre .pista{animation:none}}
@media (min-width:701px){.razones{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 28px)/3.25);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--oro) transparent}.razon{scroll-snap-align:start}}

/* ===== movimiento (22-sep) ===== */
/* hero: acercamiento lento continuo, título renglón por renglón, brillo en el dorado */
.hero-foto img{animation:respira 18s ease-in-out infinite alternate}
@keyframes respira{from{transform:scale(1)}to{transform:scale(1.09)}}
.hero h1 .ln{display:inline-block}
.js .hero h1 .ln{opacity:0;transform:translateY(34px) skewX(-6deg);animation:sube .9s cubic-bezier(.2,.7,.2,1) forwards}
.js .hero h1 .ln + .ln{animation-delay:.18s}
.js .hero-sub,.js .hero-acc,.js .hero .rotulo{opacity:0;animation:sube .8s cubic-bezier(.2,.7,.2,1) .4s forwards}
.js .hero-acc{animation-delay:.55s}
@keyframes sube{from{opacity:0;transform:translateY(34px) skewX(-6deg)}to{opacity:1;transform:none}}
.brilla{background:linear-gradient(100deg,var(--oro) 0%,var(--oro) 40%,#F3DFA8 50%,var(--oro) 60%,var(--oro) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:sube .9s cubic-bezier(.2,.7,.2,1) .18s forwards,brillo 5s ease-in-out 1.4s infinite}
@keyframes brillo{0%{background-position:100% 0}45%,100%{background-position:0 0}}

/* títulos: línea dorada que se dibuja al entrar */
.cabeza h2{position:relative;padding-bottom:10px}
.cabeza h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:64px;background:var(--oro);border-radius:2px;transform-origin:left;transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
.js .cabeza.rv:not(.in) h2::after{transform:scaleX(0)}

/* botón dorado con reflejo */
.btn-oro{position:relative;overflow:hidden}
.btn-oro::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:reflejo 4.5s ease-in-out infinite}
@keyframes reflejo{0%,70%{left:-60%}100%{left:130%}}

/* tarjetas vivas */
.tipos .tipo,.razon,.cara,.entrega,.marca-card,.video{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.tipos .tipo:hover,.razon:hover,.cara:hover,.video:hover{transform:translateY(-6px);box-shadow:0 26px 44px -26px rgba(0,0,0,.55)}
.razon img,.cara img,.entrega img,.video img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.razon:hover img,.cara:hover img,.entrega:hover img,.video:hover img{transform:scale(1.06)}
.tipos .tipo:hover img{transform:scale(1.06) translateX(8px)}

/* entregas en cinta continua */
.cinta-entregas .entregas.pista{display:flex;gap:14px;width:max-content;padding:4px 0 10px;margin:0;grid-template-columns:none;overflow:visible}
.cinta-entregas .entrega{flex:none;width:250px}
.js .cinta-entregas.corre .pista{animation-duration:46s;animation-direction:reverse}
@media (max-width:700px){.cinta-entregas .entrega{width:200px}}

/* videos (reels de Instagram) en cinta continua */
.sec-videos{padding:clamp(40px,5vw,64px) 0}
.cinta-videos .videos.pista{display:flex;gap:14px;width:max-content;padding:4px 0 10px;margin:0;grid-template-columns:none;overflow:visible}
.cinta-videos .video{flex:none;width:190px}
.js .cinta-videos.corre .pista{animation-duration:36s}
@media (max-width:700px){.cinta-videos .video{width:150px}}

/* parallax (lo mueve mueve.js; sin JS queda quieto) */
.banner>img{will-change:transform}
@media (prefers-reduced-motion:reduce){.hero-foto img,.brilla,.btn-oro::after{animation:none}.js .hero h1 .ln,.js .hero-sub,.js .hero-acc,.js .hero .rotulo{opacity:1;transform:none;animation:none}.brilla{color:var(--oro);background:none}}

/* ===== celular: hero con la fachada a pantalla completa (22-sep) ===== */
@media (max-width:900px){
  .hero{min-height:calc(100svh - 64px);display:flex;align-items:flex-end}
  .hero .envase{width:100%;padding-top:0;padding-bottom:84px}
  .hero-foto{position:absolute!important;inset:0;margin:0!important;border-radius:0;aspect-ratio:auto;max-height:none;box-shadow:none;transform:none!important;z-index:0}
  .hero-foto img{object-position:50% 38%}
  .hero-foto::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(10,10,10,.15) 0%,rgba(10,10,10,.35) 38%,rgba(10,10,10,.92) 68%,#0A0A0A 100%)}
  .hero-foto figcaption{top:14px;bottom:auto;left:14px;z-index:1}
  .hero-txt{position:relative;z-index:1}
  .hero .panal{display:none}
  .hero h1{font-size:clamp(44px,13vw,60px)}
  .hero-sub{margin:14px 0 22px;font-size:17px}
  .buscador{margin-top:-60px}
}
@media (max-width:900px){.hero .envase{position:static}.hero{min-height:min(calc(100svh - 64px),760px)}.hero-foto figcaption{display:none}}

/* ===== consignación: menos texto (22-sep) ===== */
.consig-hero{position:relative;background:var(--negro);color:#fff;overflow:hidden;min-height:min(500px,64svh);display:flex;align-items:flex-end}
.consig-hero>img{position:absolute;inset:0 0 0 38%;width:62%;height:100%;object-fit:cover;object-position:30% 50%}
.consig-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0A0A0A 0%,#0A0A0A 34%,rgba(10,10,10,.55) 55%,rgba(10,10,10,0) 80%);z-index:1}
.consig-hero .envase{position:relative;z-index:2;width:100%;padding-top:48px;padding-bottom:48px}
.consig-hero h1{font-size:clamp(38px,4.6vw,62px);margin:12px 0 22px;max-width:13ch}
.datos-c{display:flex;gap:clamp(20px,3vw,40px);margin-bottom:26px;flex-wrap:wrap}
.datos-c div{display:flex;flex-direction:column;max-width:150px}
.datos-c b{font-family:var(--titulo);font-style:italic;font-weight:700;font-size:clamp(38px,3.5vw,50px);line-height:.9;color:var(--oro)}
.datos-c span{font-size:15px;color:#D9D5CC;margin-top:6px;line-height:1.3}
@media (max-width:760px){
  .consig-hero{min-height:calc(100svh - 64px)}
  .consig-hero>img{inset:0;width:100%;object-position:22% 30%}
  .consig-hero::before{background:linear-gradient(to bottom,rgba(10,10,10,.1) 0%,rgba(10,10,10,.35) 35%,rgba(10,10,10,.93) 60%,#0A0A0A 100%)}
  .consig-hero .envase{padding-bottom:40px}
  .datos-c{gap:18px}.datos-c b{font-size:44px}.datos-c span{font-size:13px}.datos-c div{max-width:100px}
}
.plan #plan-lista li:not(.extra){display:none}
.pasos .paso-c p{font-size:15px}
@media (max-width:760px){.pasos{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(var(--gutter)*-1);padding:18px var(--gutter) 8px;scrollbar-width:none;border-top:0}.pasos::-webkit-scrollbar{display:none}.pasos .paso-c{scroll-snap-align:start;padding:18px;border:1px solid var(--linea-o)!important;border-radius:var(--radio);margin-right:10px}.pasos .paso-c+.paso-c{padding-left:18px}}
/* testimonio: miniatura de video + cita, no un segundo hero (22-sep) */
.testimonio{border-radius:var(--radio);overflow:hidden;background:var(--negro);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);align-items:stretch}
.testimonio .mira{position:relative;display:block;align-self:stretch;min-height:250px;overflow:hidden}
.testimonio .mira img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:26% 42%}
.testimonio .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;border-radius:50%;background:rgba(10,10,10,.5);border:2px solid #fff;display:grid;place-items:center;transition:transform .25s,background .25s}
.testimonio .play::after{content:"";width:0;height:0;margin-left:4px;border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent}
.testimonio .mira:hover .play{transform:translate(-50%,-50%) scale(1.08);background:rgba(10,10,10,.75)}
.testimonio figcaption{padding:clamp(24px,2.6vw,36px);display:flex;flex-direction:column;justify-content:center;gap:14px;color:#fff}
.testimonio figcaption p{font-family:var(--titulo);font-style:italic;font-weight:600;font-size:clamp(19px,1.7vw,24px);line-height:1.18;text-transform:uppercase}
.testimonio .quien{display:flex;align-items:center;gap:12px}
.testimonio .quien img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--oro)}
.testimonio .quien b{display:block;font-family:var(--titulo);font-size:17px;text-transform:uppercase}
.testimonio .quien small{color:#B8B2A6;font-size:13px}
.testimonio .btn{align-self:flex-start;color:#fff;border-color:#fff}
@media (max-width:760px){
  .testimonio{grid-template-columns:1fr}
  .testimonio .mira{min-height:0;height:190px}
  .testimonio .mira img{object-position:20% 80%}
  .testimonio figcaption{padding:22px 20px 24px}
}
@media (max-width:760px){
  .consig-hero>img{inset:0 0 auto 0;height:60%;object-position:18% 85%}
  .consig-hero::before{background:linear-gradient(to bottom,rgba(10,10,10,0) 0%,rgba(10,10,10,0) 32%,rgba(10,10,10,.85) 52%,#0A0A0A 62%)}
}
@media (max-width:760px){
  .consig-hero{display:block;min-height:0}
  .consig-hero>img{position:relative;display:block;inset:auto;width:100%;height:330px;object-position:16% 90%}
  .consig-hero::before{bottom:auto;height:330px;background:linear-gradient(to bottom,transparent 62%,#0A0A0A 100%)}
  .consig-hero .envase{padding-top:6px}
}
@media (max-width:900px){.sec-fachada .partido .foto{aspect-ratio:4/3!important}.ubic iframe{min-height:260px}}

/* ===== reseñas: muchas caras, dos cintas que rotan (22-sep) ===== */
.cinta-res .pista{display:flex;gap:14px;width:max-content;padding:6px 0 12px}
.cinta-res + .cinta-res{margin-top:6px}
.res{flex:none;width:320px;background:var(--hueso);border:1px solid var(--linea);border-radius:16px;padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:space-between;gap:14px;transition:transform .3s,box-shadow .3s}
.res:hover{transform:translateY(-4px);box-shadow:0 18px 32px -22px rgba(0,0,0,.35)}
.res p{font-size:16px;line-height:1.4;margin-top:6px}
.res-quien{display:flex;align-items:center;gap:10px}
.res-quien img{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid var(--oro)}
.res-quien b{display:block;font-family:var(--titulo);font-size:17px;text-transform:uppercase;letter-spacing:.02em;line-height:1.1}
.res-quien small{color:var(--gris);font-size:12px}
.js .cinta-res.corre .pista{animation:cinta 70s linear infinite}
.js .cinta-res.inv.corre .pista{animation-direction:reverse;animation-duration:80s}
@media (max-width:700px){.res{width:260px;padding:14px}.res p{font-size:15px}}

/* ===== celular: buscador, hero de consignación y cuestionario por pasos (22-sep) ===== */
@media (max-width:900px){
  .buscador{grid-template-columns:repeat(3,1fr);gap:8px;padding:14px}
  .buscador label{font-size:11px;letter-spacing:.1em;margin-bottom:4px}
  .buscador select{height:44px;padding:0 24px 0 10px;font-size:15px;background-position:calc(100% - 14px) 19px,calc(100% - 9px) 19px}
  .buscador .btn{grid-column:1/-1;height:48px}
}
.consig-hero picture{display:contents}
@media (min-width:761px){.consig-hero picture img{position:absolute;inset:0 0 0 38%;width:62%;height:100%;object-fit:cover;object-position:30% 50%}}
@media (max-width:760px){
  .consig-hero{display:flex;align-items:flex-end;min-height:min(74svh,560px)}
  .consig-hero>picture>img,.consig-hero img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover;object-position:22% 42%!important}
  .consig-hero::before{height:auto!important;inset:0!important;background:linear-gradient(to bottom,rgba(10,10,10,0) 0%,rgba(10,10,10,.1) 32%,rgba(10,10,10,.88) 55%,#0A0A0A 74%)!important}
  .consig-hero .envase{padding-top:0!important;padding-bottom:30px}
  .consig-hero h1{font-size:33px;margin:8px 0 16px}
  .datos-c{flex-wrap:nowrap;gap:12px;margin-bottom:18px}.datos-c b{font-size:31px}.datos-c span{font-size:11.5px}
}
/* cuestionario de a una pregunta */
.por-pasos .armador .preg{display:none}
.por-pasos .armador .preg.activa{display:block;animation:entra-paso .45s cubic-bezier(.2,.7,.2,1)}
@keyframes entra-paso{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
.paso-de{font-family:var(--titulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:14px;color:var(--oro-osc);margin-bottom:12px}
.preg .sig{margin-top:22px}
.preg .atras{margin:14px 0 0 16px;background:none;border:0;color:var(--gris);font-size:15px;cursor:pointer}
.por-pasos .armador form.terminado .paso-de{color:var(--wa)}
@media (max-width:900px){
  .por-pasos .plan{display:none}
  .por-pasos .plan.lista{display:block;margin-top:18px;animation:entra-paso .45s cubic-bezier(.2,.7,.2,1)}
}

/* ===== el hero se ajusta al ALTO de la pantalla, no solo al ancho (22-sep) =====
   Todo estaba dimensionado en vw: en el monitor de 24" entraba justo, y en el
   notebook de 14" el hero empujaba el buscador de marca/tipo/estado abajo del
   pliegue. Ahora cada medida alta del hero tiene además un techo en svh, así que
   en pantallas anchas queda igual que antes y en las bajas se encoge sola. */
@media (min-width:901px){
  .hero .envase{padding-top:clamp(24px,8svh,80px);padding-bottom:clamp(24px,8svh,80px)}
  .hero-foto{aspect-ratio:auto;height:min(620px,62svh);max-height:none}
  .hero h1{font-size:min(clamp(46px,7.4vw,96px),12svh)}
  .hero-txt .rotulo{margin-bottom:clamp(10px,1.8svh,18px)}
  .hero-sub{margin:clamp(12px,2.2svh,22px) 0 clamp(16px,2.8svh,28px)}

  /* consignación: el hero quedaba chato contra la sección de abajo */
  .consig-hero{min-height:min(640px,80svh)}
  .consig-hero .envase{padding-top:clamp(28px,5svh,56px);padding-bottom:clamp(36px,6svh,64px)}
  .consig-hero h1{font-size:min(clamp(38px,4.6vw,62px),9svh)}
}

/* ===== últimos ingresos: la sección que se queda quieta (22-sep) =====
   Por defecto todo se ve: la lista es la de siempre y las fotos quedan apiladas. El JS agrega
   .ingresos-activa recién cuando sabe que su bucle anda, y ahí empieza a atenuar. Si algo falla,
   el guardián la saca y queda la lista común (trampa 2 del método). */
@media (min-width:901px){
  .sec-ultimos{padding-bottom:0}
  .ingresos-peg{position:sticky;top:0;min-height:100svh;display:flex;align-items:center}
  .ingresos-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,60px);align-items:center;width:100%}
  .ingresos-lista{display:flex;flex-direction:column;gap:0;list-style:none;margin:0;padding:0;grid-template-columns:none}
  .ingresos-lista>li{border-top:1px solid var(--linea)}
  .ingresos-lista>li:last-child{border-bottom:1px solid var(--linea)}
  .ingresos-lista .auto{flex-direction:row;align-items:center;gap:16px;border:0;border-radius:0;background:none;padding:clamp(12px,2.2svh,22px) 0;transition:opacity .3s,transform .3s}
  .ingresos-lista .auto .foto{display:none}
  .ingresos-lista .datos{padding:0}
  .ingresos-lista .fila,.ingresos-lista .pie-card{display:none}
  .ingresos-foto{position:relative;aspect-ratio:4/3;border-radius:var(--radio);overflow:hidden;background:var(--negro-2)}
  .ingresos-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

  /* estado atenuado: solo cuando el JS confirmó que maneja */
  .ingresos-activa .ingresos-foto img{opacity:0;transition:opacity .45s}
  .ingresos-activa .ingresos-foto img.on{opacity:1}
  .ingresos-activa .ingresos-lista>li .auto{opacity:.4}
  .ingresos-activa .ingresos-lista>li.on .auto{opacity:1;transform:translateX(10px)}
  .ingresos-activa .ingresos-lista .fila{display:flex;max-height:0;overflow:hidden;opacity:0;transition:max-height .35s,opacity .35s}
  .ingresos-activa .ingresos-lista>li.on .fila{max-height:40px;opacity:1}
}
@media (max-width:900px){
  .ingresos-pista{height:auto!important}
  .ingresos-lista{list-style:none;margin:0;padding:0}
  .ingresos-foto{display:none}
}

/* ===== ritmo: cada sección se lee como un bloque, con borde visible (22-sep) ===== */
.sec + .sec{border-top:1px solid var(--linea)}
.sec.oscuro + .sec,.sec + .sec.oscuro{border-top-color:var(--linea-o)}
@media (min-width:901px){
  .sec{padding:clamp(56px,9svh,104px) 0}
  .sec-marcas{padding-bottom:clamp(30px,4svh,44px)}
  .sec-tipos{padding-top:clamp(30px,4svh,44px)}
}

/* ajuste: el encabezado viaja adentro del bloque pegado, y el precio solo en la fila activa */
@media (min-width:901px){
  .ingresos-peg{align-items:center}
  .ingresos-peg>.envase{width:100%}
  .sec-ultimos .cabeza{margin-bottom:clamp(18px,3svh,34px)}
  .ingresos-activa .ingresos-lista .precio{max-height:0;overflow:hidden;opacity:0;margin:0;transition:max-height .35s,opacity .35s}
  .ingresos-activa .ingresos-lista>li.on .precio{max-height:34px;opacity:1;margin-top:6px}
  .ingresos-lista .ver{color:var(--gris)}
}

/* la foto de la familia es vertical (sale de un reel): en el banner ancho hay que centrarla */
.banner > img[src*="banner-entrega-familia"]{object-position:50% 42%}

/* 24-sep: video de la tarjeta en "La gente busca facilidad" y buscador por WhatsApp en el stock */
.partido .foto.video-vivo,.video-vivo{position:relative;aspect-ratio:9/16!important;max-height:78vh;max-width:420px;width:100%;margin-inline:auto;border-radius:var(--radio);overflow:hidden;background:var(--negro)}
.video-vivo video{width:100%;height:100%;object-fit:cover;display:block}
.video-vivo .sonido{position:absolute;left:14px;bottom:14px;padding:10px 16px;border-radius:999px;border:0;background:rgba(10,10,10,.72);color:#fff;font-family:var(--titulo);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px)}
.video-vivo .sonido[aria-pressed="true"]{background:var(--oro);color:var(--negro)}
.oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.busca-wa{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.busca-wa input{flex:1 1 240px;min-width:0;height:52px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:16px}
.busca-wa input::placeholder{color:#A39E93}
.busca-wa input:focus{outline:2px solid var(--oro);outline-offset:2px}
.busca-wa .btn{flex:none;margin:0}
@media (max-width:760px){.busca-wa .btn{width:100%}}

/* 24-sep: página de formas de pago */
.pagos{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.pago{background:var(--blanco);border:1px solid var(--linea);border-radius:var(--radio);padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px}
.pago h2{font-size:clamp(28px,3vw,34px)}
.pago p:not(.pago-tag){color:var(--gris);font-size:16px}
.pago-tag{font-family:var(--titulo);font-weight:700;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--oro-osc)}
.pago-dest{background:var(--negro);border-color:var(--negro);color:#fff;grid-row:span 2}
.pago-dest p:not(.pago-tag){color:#E4E0D7}
.pago-dest .pago-tag{color:var(--oro-claro)}
.pago-tarjetas{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.pago-tarjetas li{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.22);font-size:14px;font-weight:600}
.pago-letra{margin-top:22px;font-size:14px;color:var(--gris);max-width:70ch}
.tabla-pagos{border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;background:var(--blanco)}
.tabla-pagos table{width:100%;border-collapse:collapse;font-size:16px}
.tabla-pagos th{text-align:left;font-family:var(--titulo);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);padding:14px 18px;border-bottom:1px solid var(--linea)}
.tabla-pagos td{padding:14px 18px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla-pagos tr:last-child td{border-bottom:0}
.tabla-pagos td a b{display:block;font-family:var(--titulo);font-size:20px;text-transform:uppercase;color:var(--tinta)}
.tabla-pagos td a small{color:var(--gris);font-size:14px}
.tabla-pagos .ant{font-family:var(--titulo);font-weight:700;font-size:20px;color:var(--oro-osc)}
.tabla-wa{display:inline-block;padding:8px 14px;border-radius:999px;background:var(--wa);color:#fff;font-family:var(--titulo);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
@media (max-width:700px){
  .pago-dest{grid-row:auto}
  .tabla-pagos thead{display:none}
  .tabla-pagos tr{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;padding:16px;border-bottom:1px solid var(--linea)}
  .tabla-pagos td{padding:0;border:0}
  .tabla-pagos td:first-child,.tabla-pagos td:last-child{grid-column:1/-1}
  .tabla-pagos td[data-t]::before{content:attr(data-t);display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--gris)}
  .tabla-pagos td[data-t="Año"]{display:none}
  .tabla-wa{width:100%;text-align:center;padding:12px}
}

/* 24-sep, ronda 3 de Juan */
.lista-pago{list-style:none;display:grid;gap:10px;margin:4px 0 8px}
.lista-pago li{display:flex;flex-direction:column;padding-left:22px;position:relative;line-height:1.3}
.lista-pago li::before{content:"";position:absolute;left:0;top:6px;width:10px;height:10px;background:var(--oro);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.lista-pago b{font-family:var(--titulo);font-size:20px;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.lista-pago span{font-size:16px;color:#C9C4B9}
.partido-video{grid-template-areas:"video arriba" "video abajo";grid-template-rows:auto auto;align-items:start;row-gap:18px}
.partido-video .pv-arriba{grid-area:arriba;align-self:end}
.partido-video .pv-abajo{grid-area:abajo}
.partido-video .video-vivo{grid-area:video;align-self:center}
.partido-video h2{margin:12px 0 0}
.partido-video .pv-abajo h2{margin:0 0 16px}
.partido .foto.video-vivo,.video-vivo{aspect-ratio:9/16!important;width:min(100%,calc(78svh * 9 / 16));max-width:none;max-height:none;height:auto}
.video-vivo video{object-fit:contain;background:#000}
@media (max-width:900px){.partido-video{grid-template-areas:"arriba" "video" "abajo"}.partido-video .video-vivo{width:min(100%,calc(72svh * 9 / 16))}}
.pago-logos{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:10px}
.pago-logos li{height:44px;padding:6px 10px;border-radius:10px;background:#fff;border:1px solid var(--linea);display:flex;align-items:center}
.pago-logos img{height:100%;width:auto;display:block;border-radius:4px}
.pago-dest .pago-logos li{border-color:transparent}
.f-anticipo{font-size:16px;color:var(--gris);margin:0 0 18px}
.f-anticipo b{color:var(--tinta)}
.ficha-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
.ficha-pasar{display:flex;align-items:center;gap:10px}
.ficha-pasar a{width:40px;height:40px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;font-size:24px;line-height:1;background:var(--blanco)}
.ficha-pasar a:hover{border-color:var(--oro)}
.ficha-pasar small{color:var(--gris);font-size:14px;min-width:52px;text-align:center}
.galeria .principal{position:relative}
.carril{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.carril::-webkit-scrollbar{display:none}
.carril img{flex:0 0 100%;width:100%;height:100%;object-fit:cover;scroll-snap-align:start}
.foto-n{position:absolute;right:12px;bottom:12px;background:rgba(10,10,10,.65);color:#fff;font-size:13px;padding:4px 10px;border-radius:999px}
.foto-n:empty{display:none}
@media (max-width:760px){
  .hero{min-height:0!important;display:block}
  .hero .envase{display:flex;flex-direction:column;padding:0 var(--gutter) 28px!important}
  .hero-foto{position:relative!important;inset:auto;order:-1;margin:0 calc(var(--gutter) * -1) 20px!important;aspect-ratio:4/3!important;height:auto!important}
  .hero-foto img{object-position:50% 40%;animation:none}
  .hero-foto::after{background:linear-gradient(to bottom,transparent 60%,#0A0A0A 100%)}
  .hero-txt .rotulo{font-size:12px;letter-spacing:.12em}
  .buscador{margin-top:18px!important}
}

/* 24-sep, ronda 4: la ficha entra entera en la pantalla de cualquier compu */
@media (min-width:901px){
  .ficha{grid-template-columns:minmax(0,min(600px,calc(100svh - 260px))) minmax(0,1fr);gap:clamp(28px,4vw,56px)}
  .ficha-info h1{font-size:clamp(34px,3.4vw,56px)}
  .ficha .specs{margin-top:14px}
  .carril{cursor:pointer}
}
.g-flecha{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(10,10,10,.6);color:#fff;font-size:28px;line-height:1;display:grid;place-items:center;cursor:pointer;opacity:.85;transition:opacity .2s,background .2s;backdrop-filter:blur(4px)}
.g-flecha:hover{opacity:1;background:var(--oro);color:var(--negro)}
.g-ant{left:12px}.g-sig{right:12px}
@media (max-width:760px){.g-flecha{display:none}}
@media (min-width:901px){.ficha .specs li{padding:10px 0}.ficha .specs b{font-size:17px}.ficha-nota{margin-top:12px;padding:12px 14px}}

.ficha-garantia{border-left-color:var(--wa)}
.pie-base a:hover{color:var(--oro)}