/* ==========================================================================
   Bloques específicos: héroe, selector-instrumento, ficha de pieza
   ========================================================================== */

/* --- Héroe: el selector ES el héroe ------------------------------------- */
.hero{position:relative;padding:clamp(48px,6vw,84px) 0 clamp(56px,7vw,88px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(224,27,34,.34) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(142,15,22,.30) 0%, transparent 60%),
    var(--negro);
}
/* Diagonal roja: el gesto gráfico de la marca */
.hero::before{
  content:'';position:absolute;right:-6%;top:0;bottom:0;width:46%;
  background:linear-gradient(112deg,transparent 0 46%,rgba(224,27,34,.16) 46% 54%,transparent 54%);
  pointer-events:none;
}
.hero::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;
  background:linear-gradient(90deg,var(--rojo-osc) 0 8%,var(--rojo) 8% 26%,transparent 26%);
}
.hero__head{max-width:660px;margin-bottom:34px}
.hero__head h1{margin:14px 0 14px}
.hero__head p{color:var(--texto-2);font-size:1.05rem;max-width:52ch;font-weight:500}
.hero__hl{color:var(--rojo-claro)}

/* --- Slogan de marca: fijo en inglés, se lee como firma, no como texto ---- */
.hero__head .slogan{
  position:relative;
  display:flex;flex-direction:column;
  margin:18px 0 20px;
  padding-left:clamp(15px,1.7vw,24px);
  font-size:clamp(1.95rem,4.7vw,3.35rem);
  line-height:.95;
  letter-spacing:-.018em;
  text-wrap:balance;
}
/* Plecas diagonales: el mismo gesto que cruza el héroe */
.hero__head .slogan::before{
  content:'';position:absolute;left:0;top:.07em;bottom:.09em;width:5px;
  background:linear-gradient(180deg,var(--rojo) 0 58%,var(--rojo-osc) 58% 100%);
  transform:skewX(-11deg);
}
.slogan__l{display:block}
.slogan__l + .slogan__l{margin-top:.04em}
.slogan__hl{color:var(--rojo-claro)}

/* En tema claro el héroe es blanco: el acento baja de tono para no vibrar */
html[data-tema="claro"] .slogan__hl{color:var(--rojo)}

@media (max-width:520px){
  .hero__head .slogan{padding-left:12px}
  .hero__head .slogan::before{width:4px}
}

/* --- Selector-instrumento ------------------------------------------------ */
.finder{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;color:var(--texto);
}
.finder__tabs{display:flex;border-bottom:1px solid var(--linea);background:#141418}
.finder__tab{
  flex:1;padding:15px 16px;font-family:var(--font-display);font-weight:600;font-style:italic;
  font-size:.94rem;text-transform:uppercase;letter-spacing:.02em;
  color:var(--texto-3);border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
.finder__tab[aria-selected="true"]{color:var(--texto);border-bottom-color:var(--rojo);background:var(--carta)}
.finder__body{padding:22px}

/* La tira: 4 pasos que se van encendiendo */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media (max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.steps{grid-template-columns:1fr}}

.step{position:relative;display:flex;flex-direction:column;gap:6px}
.step__label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);display:flex;align-items:center;gap:7px;
}
.step__dot{
  width:17px;height:17px;border-radius:50%;border:1.5px solid var(--linea-2);
  display:grid;place-items:center;font-size:.58rem;font-weight:700;color:var(--texto-3);
  background:var(--carta-2);transition:all .2s;flex:none;
}
.step.is-ready .step__dot{border-color:var(--texto-2);color:var(--texto)}
.step.is-done .step__dot{background:var(--rojo);border-color:var(--rojo);color:#fff;
  box-shadow:0 0 0 4px var(--rojo-tenue)}
.step.is-done .step__label{color:var(--texto)}

/* Lectura de resultado: el instrumento "resuelve" */
.readout{
  margin-top:20px;border-top:1px dashed var(--linea-2);padding-top:18px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.readout__vehicle{
  font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:1.16rem;display:flex;align-items:center;gap:10px;
}
.readout__vehicle .muted{color:var(--texto-3);font-weight:500;font-style:normal;text-transform:none}
.readout__count{
  font-family:var(--font-mono);font-size:.82rem;color:var(--texto-2);
  background:var(--carta-2);border:1px solid var(--linea);border-radius:3px;padding:5px 10px;
}
.readout__count b{color:var(--rojo-claro)}
.readout .btn{margin-left:auto}

/* Cifras del catálogo (datos reales, no adornos) */
.stats{display:flex;flex-wrap:wrap;gap:28px 44px;margin-top:34px}
.stat__n{font-family:var(--font-display);font-weight:800;font-style:italic;font-size:1.8rem;
  color:var(--texto);line-height:1}
.stat__l{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--texto-3);margin-top:6px}

/* --- Barra de contexto del vehículo en resultados ----------------------- */
.ctxbar{
  background:linear-gradient(96deg,var(--rojo-osc) 0%,#3A0A0E 42%,var(--carta) 100%);
  border:1px solid var(--linea);color:#fff;border-radius:var(--r-lg);padding:16px 20px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
}
.ctxbar__v{font-family:var(--font-display);font-weight:800;font-style:italic;
  text-transform:uppercase;font-size:1.14rem}
.ctxbar__c{font-family:var(--font-mono);font-size:.78rem;color:#D9C2C4}
.ctxbar .btn{margin-left:auto}

/* Filtros por tipo de pieza */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 24px}
.chip{
  height:36px;padding:0 15px;border:1px solid var(--linea);background:var(--carta);
  border-radius:100px;font-size:.84rem;font-weight:600;color:var(--texto-2);transition:.15s;
}
.chip:hover{border-color:var(--texto-3);color:var(--texto)}
.chip[aria-pressed="true"]{background:var(--rojo);border-color:var(--rojo);color:#fff}

/* --- Ficha de pieza ------------------------------------------------------ */
.ficha{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:36px;align-items:start}
@media (max-width:940px){.ficha{grid-template-columns:1fr}}

.ficha__img{
  background:radial-gradient(70% 70% at 50% 40%, #232329 0%, #131316 100%);
  border:1px solid var(--linea);border-radius:var(--r-lg);
  aspect-ratio:4/3;display:grid;place-items:center;color:var(--texto-3);position:relative;overflow:hidden;
}
.ficha__img .grid-bg{position:absolute;inset:0;opacity:.6;
  background-image:linear-gradient(#22222A 1px,transparent 1px),linear-gradient(90deg,#22222A 1px,transparent 1px);
  background-size:28px 28px}
.ficha__imgnote{position:relative;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.08em;text-transform:uppercase}

.ficha__buy{
  background:var(--carta);border:1px solid var(--linea);border-radius:var(--r-lg);
  padding:22px;position:sticky;top:88px;display:flex;flex-direction:column;gap:14px;
}
.ficha__price{display:flex;align-items:baseline;gap:10px}

.specs{width:100%;border-collapse:collapse;font-size:.9rem}
.specs th,.specs td{text-align:left;padding:11px 0;border-bottom:1px solid var(--linea);vertical-align:top}
.specs th{color:var(--texto-3);font-weight:500;width:42%}
.specs td{font-family:var(--font-mono);font-size:.86rem}

/* Tabla de aplicaciones */
.apps{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--carta)}
.apps th{
  text-align:left;padding:11px 14px;background:#141418;border-bottom:1px solid var(--linea);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);
  position:sticky;top:0;
}
.apps td{padding:11px 14px;border-bottom:1px solid var(--linea)}
.apps tbody tr:hover{background:#1F1F25}
.apps__scroll{max-height:460px;overflow:auto;border:1px solid var(--linea);border-radius:var(--r-lg)}

/* Texto largo del fabricante */
.prosa{color:var(--texto-2);line-height:1.75;max-width:70ch;white-space:pre-line}
.prosa strong{color:var(--texto)}

/* Sellos de confianza */
.sellos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);border-radius:var(--r-lg);overflow:hidden}
.sello{background:var(--carta);padding:24px;position:relative}
.sello::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rojo);opacity:0;transition:.2s}
.sello:hover::before{opacity:1}
.sello__t{font-family:var(--font-display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:1.02rem;margin-bottom:6px}
.sello__d{font-size:.86rem;color:var(--texto-3);line-height:1.55}

/* Carrito / lista de piezas */
.linea{display:grid;grid-template-columns:1fr auto auto;gap:16px;align-items:center;
  padding:16px;background:var(--carta);border:1px solid var(--linea);border-radius:var(--r);margin-bottom:10px}
.linea__pn{font-family:var(--font-mono);font-weight:600}
.linea__d{font-size:.84rem;color:var(--texto-3)}
.qty{display:flex;align-items:center;border:1px solid var(--linea);border-radius:var(--r);overflow:hidden;background:var(--carta-2)}
.qty button{width:34px;height:38px;font-size:1.1rem;color:var(--texto-2)}
.qty button:hover{background:var(--linea)}
.qty input{width:44px;height:38px;border:0;text-align:center;font-family:var(--font-mono);background:transparent;color:var(--texto)}
@media (max-width:560px){.linea{grid-template-columns:1fr auto}}

/* Modo demostración */
.demo-bar{background:#17171B;color:var(--texto-2);font-family:var(--font-mono);
  font-size:.74rem;letter-spacing:.06em;text-align:center;padding:7px 16px}
.demo-bar b{color:var(--rojo-claro)}

/* Los hijos del grid no deben empujar el ancho de la página */
.ficha > *{min-width:0}
@media (max-width:940px){.ficha{grid-template-columns:minmax(0,1fr)}}
.prosa,.ficha h1,.card__name{overflow-wrap:anywhere}
.apps__scroll{max-width:100%}

/* Dos columnas que se apilan en pantallas chicas */
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:34px;align-items:start}
.cols2 > *{min-width:0}
.cols-carrito{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:30px;align-items:start}
.cols-carrito > *{min-width:0}
@media (max-width:900px){.cols-carrito{grid-template-columns:minmax(0,1fr)}
  .cols-carrito aside{position:static!important}}

/* La rejilla técnica del héroe se adapta al tema */
html[data-tema="claro"] .hero.grid-bg{
  background-image:
    linear-gradient(rgba(20,20,24,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,20,24,.035) 1px,transparent 1px),
    radial-gradient(120% 90% at 88% 8%, rgba(214,20,27,.13) 0%, transparent 58%),
    radial-gradient(90% 70% at 8% 100%, rgba(214,20,27,.07) 0%, transparent 60%);
  background-size:56px 56px,56px 56px,auto,auto;
  background-color:#FFFFFF;
}

/* Bloque de mayoreo: dos columnas que se apilan en pantallas chicas */
.cta-mayoreo{
  border-radius:var(--r-lg);padding:clamp(26px,5vw,52px);
  display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
}
.cta-mayoreo > *{min-width:0}
@media (max-width:820px){.cta-mayoreo{grid-template-columns:minmax(0,1fr);gap:22px}}