/* ==========================================================================
   Vitrina publica de archivos de ECU - ZSPORT
   --------------------------------------------------------------------------
   Hoja propia, sin app.css. El sistema de gestion y la vitrina tienen dos
   trabajos distintos: alla se opera todo el dia, aca se decide una compra en
   dos minutos. Compartir hoja obligaba a pelear reglas pensadas para
   formularios (todo input al 100%, body sin scroll) y dejaba la tienda con
   cara de panel interno.

   La identidad sale del taller: negro grafito de caja de ECU, naranja de
   testigo encendido, y todo dato tecnico en monoespaciada. El numero de parte
   es el heroe de la pagina porque es lo que decide la compra.
   ========================================================================== */

@import url("/css/fuentes.css");

:root{
  --carbon:#0A0C0F;      /* fondo, negro con tirada fria */
  --grafito:#12161C;
  --panel:#171C24;
  --panel-alto:#1E242E;
  --borde:#252C38;
  --borde-suave:#1B212A;

  --redline:#FF5A1F;     /* testigo encendido: el unico color que grita */
  --redline-h:#FF7442;
  --redline-tenue:rgba(255,90,31,.13);
  --signal:#4ADE80;      /* ganancias */
  --dato:#7DD3FC;        /* codigos y numeros de parte */

  --hueso:#ECEEF2;
  --ceniza:#8B94A3;
  --ceniza-2:#5C6673;

  --display:'Archivo','Arial Black',system-ui,sans-serif;
  --texto:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --radio:12px;
  --radio-chico:8px;
  --ancho:1140px;
}

*,*::before,*::after{ box-sizing:border-box }

body{
  margin:0;
  background:var(--carbon);
  color:var(--hueso);
  font:400 15px/1.6 var(--texto);
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }
::selection{ background:var(--redline); color:#0A0C0F }

.env{ max-width:var(--ancho); margin:0 auto; padding:0 22px }

/* ----------------------------------------------------------------- barra -- */
.barra{
  position:sticky; top:0; z-index:30;
  background:rgba(10,12,15,.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--borde-suave);
}
.barra .env{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; height:56px;
}
.logo{
  font-family:var(--display); font-weight:800; font-size:16px;
  letter-spacing:.14em; text-decoration:none; display:flex;
  align-items:center; gap:9px;
}
.logo i{
  width:9px; height:9px; border-radius:50%; background:var(--redline);
  box-shadow:0 0 12px var(--redline); font-style:normal;
}
.barra nav{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ceniza);
  display:flex; gap:20px;
}
.barra nav a{ text-decoration:none }
.barra nav a:hover{ color:var(--redline) }

/* ------------------------------------------------------------------ hero -- */
.hero{ padding:40px 0 28px; position:relative; overflow:hidden }
.kicker{
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--redline); margin:0 0 14px;
}
.hero h1{
  font-family:var(--display); font-weight:800;
  font-size:clamp(38px,7.2vw,74px); line-height:.94;
  letter-spacing:-.025em; text-transform:uppercase;
  /* 19ch y no 15: con 15 el titulo cortaba en tres renglones y el tercero
     era "ECU" solo. Con 19 entra en dos, sin achicar un punto la
     tipografia -- 70 px menos sin tocar la voz de la pagina. */
  margin:0 0 16px; max-width:19ch;
}
.hero h1 em{ font-style:normal; color:var(--redline) }
.bajada{
  color:var(--ceniza); max-width:52ch; margin:0 0 30px;
  font-size:16px; line-height:1.62;
}

/* El buscador es el centro de la pagina, no un accesorio: el visitante llega
   con un numero en la mano y quiere saber si esta. */
.buscador{ position:relative; max-width:620px }
.buscador input{
  width:100%; background:var(--grafito);
  border:1px solid var(--borde); border-radius:var(--radio);
  color:var(--hueso); font-family:var(--mono); font-size:16px;
  padding:19px 20px 19px 50px;
  transition:border-color .16s, box-shadow .16s;
}
.buscador input::placeholder{ color:var(--ceniza-2) }
.buscador input:focus{
  outline:none; border-color:var(--redline);
  box-shadow:0 0 0 4px var(--redline-tenue);
}
.buscador .lupa{
  position:absolute; left:19px; top:50%; transform:translateY(-50%);
  color:var(--ceniza-2); font-family:var(--mono); font-size:16px;
  pointer-events:none;
}

.filtros{ display:flex; flex-wrap:wrap; gap:10px; margin-top:14px }
.filtros select{
  background:var(--grafito); border:1px solid var(--borde);
  border-radius:var(--radio-chico); color:var(--ceniza);
  font-family:var(--mono); font-size:12.5px; padding:9px 12px;
}
.filtros select:focus{ outline:none; border-color:var(--redline); color:var(--hueso) }

/* --------------------------------------------------------- muro de codigos -- */
/* El gesto propio de este rubro: leer el numero grabado en la centralita y
   buscarlo en una lista. Son los numeros reales del catalogo -- se pueden
   tocar, y el que coincide con la busqueda se enciende. */
.muro{
  margin:34px 0 0; padding:20px 0 4px;
  border-top:1px solid var(--borde-suave);
  position:relative;
}
.muro-tit{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ceniza-2); margin:0 0 13px;
}
.codigos{ display:flex; flex-wrap:wrap; gap:7px }
.codigo{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em;
  background:transparent; border:1px solid var(--borde-suave);
  color:var(--ceniza-2); padding:6px 10px; border-radius:var(--radio-chico);
  cursor:pointer; transition:color .14s, border-color .14s, background .14s;
}
.codigo:hover{ color:var(--dato); border-color:var(--borde) }
.codigo.enciende{
  color:var(--carbon); background:var(--redline);
  border-color:var(--redline); font-weight:600;
}

/* --------------------------------------------------------------- familias -- */
.seccion{ padding:40px 0 0; border-top:1px solid var(--borde-suave); margin-top:38px }
.seccion-cab{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.seccion h2{
  font-family:var(--display); font-weight:700; font-size:20px;
  letter-spacing:-.01em; margin:0;
}
.conteo{
  font-family:var(--mono); font-size:12px; color:var(--ceniza-2);
  font-variant-numeric:tabular-nums;
}

/* position:relative porque la nav es el marco de los desplegables de marca
   (ver .fam-menu): asi el overflow:hidden de la regleta no los recorta. */
.familias{ position:relative; display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px }
.fam{
  display:flex; align-items:center; gap:8px;
  background:var(--grafito); border:1px solid var(--borde);
  color:var(--ceniza); padding:9px 14px; border-radius:100px;
  font-family:var(--texto); font-size:13px; cursor:pointer;
  transition:border-color .14s, color .14s, background .14s;
}
.fam:hover{ border-color:var(--redline); color:var(--hueso) }
.fam[aria-pressed="true"]{
  background:var(--redline); border-color:var(--redline);
  color:var(--carbon); font-weight:600;
}
.fam b{
  font-family:var(--mono); font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ceniza-2);
}
.fam[aria-pressed="true"] b{ color:rgba(10,12,15,.65) }
.fam:disabled{ opacity:.32; cursor:default }
.fam:disabled:hover{ border-color:var(--borde); color:var(--ceniza) }

/* La cabecera de una ficha de archivo original: el numero de calibracion
   como titulo, y el formato a la derecha.

   El cliente llega con ese numero anotado en un papel. Antes iba ultimo y en
   chico, debajo de una frase identica en las veinte tarjetas de la pantalla.
   Va en monoespaciada porque se compara caracter por caracter contra la
   etiqueta pegada en la unidad. */
.ficha-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.ficha-cab .parte{
  font-family:var(--mono); font-weight:600; font-size:17px; line-height:1.2;
  letter-spacing:-.01em; color:var(--hueso); margin:0; word-break:break-all;
}
.ficha-cab .parte a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color .14s, color .14s;
}
.ficha-cab .parte a:hover{ color:var(--redline-h); border-bottom-color:var(--redline) }
.ficha-cab .parte a:focus-visible{ outline:2px solid var(--redline); outline-offset:2px }
.ficha-cab .formato{
  flex:none; font-family:var(--mono); font-size:10px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ceniza-2);
  border:1px solid var(--borde); border-radius:4px; padding:1px 6px;
}
.ficha-donde{
  font-family:var(--display); font-weight:600; font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--dato);
  margin:6px 0 0;
}

/* El numero, arriba de todo: es la prueba de que el archivo es grande.

   Va en monoespaciada con cifras de ancho fijo, como el resto de los datos
   duros de la vitrina, para que se lea como una medicion y no como un
   argumento de venta. */
.prueba{
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
  /* Ancho para que el numero y su frase entren en un renglon en una
     pantalla de escritorio: partidos, el numero queda flotando solo y se
     lee como un dato suelto en vez de como la medida de algo. En un
     telefono envuelve, que ahi si corresponde. */
  margin:0 0 20px; color:var(--ceniza); max-width:74ch;
}
.prueba-n{
  font-family:var(--mono); font-weight:600; font-size:22px; color:var(--hueso);
  font-variant-numeric:tabular-nums;
}

/* Los filtros bajaron a las categorias: van pegados debajo de la regleta y
   con el mismo aire, para que se lean como una sola cosa. */
.familias + .filtros{ margin-top:8px }
#riel:not(:empty){ margin-top:10px }


/* ---------------------------------------- la pagina de una calibracion ---- */
/* La ve el que llego de un buscador escribiendo el numero de su unidad. Para
   muchos es la primera pantalla del sitio que pisan, asi que habla el mismo
   idioma que la vitrina: el numero en monoespaciada, los datos como lecturas
   de instrumento y el naranja una sola vez. */
.migas{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  font-family:var(--mono); font-size:11px; color:var(--ceniza-2);
  margin:0 0 22px;
}
.migas a{ color:var(--ceniza); text-decoration:none }
.migas a:hover{ color:var(--redline) }

.parte-titulo{
  font-family:var(--mono); font-weight:600; font-size:clamp(28px,4.6vw,44px);
  line-height:1.06; letter-spacing:-.015em; color:var(--hueso);
  margin:0 0 8px; word-break:break-all;
}
.parte-sub{
  font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--dato);
  margin:0 0 26px;
}

.ficha-seo{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:20px 22px; margin:0 0 14px;
}
.ficha-seo h2{
  font-family:var(--display); font-weight:700; font-size:17px;
  margin:0 0 16px; color:var(--hueso); letter-spacing:-.01em;
}
/* Los datos en dos columnas: la etiqueta chica y apagada, el dato con peso.
   Es como se lee una ficha tecnica, no como se lee un parrafo. */
.ficha-seo dl{
  display:grid; grid-template-columns:auto 1fr; gap:7px 20px;
  margin:0 0 16px; align-items:baseline;
}
.ficha-seo dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ceniza-2);
}
.ficha-seo dd{ margin:0; color:var(--hueso); font-size:13.5px }
.ficha-seo .resumen{ color:var(--ceniza); margin:0 0 16px; max-width:62ch }
.ficha-seo .precio{
  display:flex; align-items:baseline; gap:10px; margin:0 0 16px;
  font-family:var(--mono); font-variant-numeric:tabular-nums;
}
.ficha-seo .precio b{ font-size:20px; font-weight:600; color:var(--hueso) }
.ficha-seo .precio span{ font-size:12px; color:var(--ceniza-2) }

.seo-vecinas{ margin:34px 0 26px }
.seo-vecinas h2{
  font-family:var(--display); font-weight:600; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ceniza);
  margin:0 0 12px;
}
/* Los numeros vecinos. Son enlaces de verdad: es por donde el buscador sigue
   caminando entre las 21.400 paginas, y al que llego buscando un numero
   parecido le sirven igual. */
.codigos-seo{
  list-style:none; display:flex; flex-wrap:wrap; gap:7px; margin:0; padding:0;
}
.codigos-seo a{
  display:block; padding:6px 11px; border:1px solid var(--borde);
  border-radius:100px; background:var(--grafito);
  font-family:var(--mono); font-size:11.5px; color:var(--ceniza);
  text-decoration:none; transition:border-color .14s, color .14s;
}
.codigos-seo a:hover{ border-color:var(--redline); color:var(--hueso) }

.seo-pie{
  border-top:1px solid var(--borde); padding-top:20px; margin:30px 0 0;
  color:var(--ceniza-2); font-size:13px;
}
.seo-pie a{ color:var(--hueso); border-bottom:1px solid var(--redline); text-decoration:none }
.seo-pie a:hover{ color:var(--redline-h) }

/* Tarjeta de un servicio del taller.

   Se distingue de un archivo a proposito: un archivo se descarga, un servicio
   es trabajo sobre una unidad. El borde de la izquierda lo dice sin escribirlo. */
.ficha-servicio{ border-left:2px solid var(--dato) }
.etiqueta-servicio{
  align-self:flex-start; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.13em; text-transform:uppercase; color:var(--dato);
  border:1px solid var(--borde); border-radius:4px; padding:2px 7px;
  margin-bottom:2px;
}
.ficha-servicio .btn-comprar{ text-decoration:none; display:inline-block }

/* La regleta de categorias.

   Once pildoras envolvian a dos filas porque cada una gasta relleno de los
   cuatro lados. Esto gasta un filete de 1 px entre vecinas y entra en un
   renglon: 80 px pasan a 46, y el renglon que sobra es el riel de promocion.

   Esta pensada como la leyenda de una caja de fusibles: el nombre arriba es
   cartel --tipografia de titulos, en mayusculas-- y la cifra abajo es lectura
   de instrumento, en monoespaciada con cifras de ancho fijo para que las
   columnas queden alineadas. */
.regleta{
  display:flex; align-items:stretch; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio-chico); overflow:hidden;
}
/* Cada casilla toma el ancho que le pide su nombre.

   Antes era `flex:1 1 0`, que reparte el ancho por partes iguales sin mirar
   el largo: con ocho familias entraba justo, con doce le tocan 91 px a cada
   una y "Clase de potencia y sincronizacion" se cortaba, mientras "Airbag"
   recibia los mismos 91 px que necesitaba 40. Dos renglones que se leen son
   mejor que uno que no. */
.casilla{
  position:relative; flex:0 1 auto; min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:8px 12px 9px; background:none; border:0;
  border-left:1px solid var(--borde-suave);
  color:var(--ceniza); text-align:left; cursor:pointer;
  font-family:var(--texto);
  transition:background .14s, color .14s;
}
.regleta > *:first-child .casilla,
.regleta > .casilla:first-child{ border-left:0 }
.casilla:hover{ background:var(--panel-alto); color:var(--hueso) }
.casilla:focus-visible{ outline:2px solid var(--redline); outline-offset:-2px }

.casilla-nombre{
  font-family:var(--display); font-weight:600; font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.casilla-cifra{
  font-family:var(--mono); font-weight:500; font-size:13px;
  font-variant-numeric:tabular-nums; color:var(--ceniza-2);
  transition:color .14s;
}
.casilla:hover .casilla-cifra{ color:var(--hueso) }

/* El testigo: lo unico que se enciende en toda la barra. Un tablero no tiene
   diez luces prendidas a la vez. */
.casilla::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:var(--redline); transform:scaleX(0); transform-origin:left;
  transition:transform .13s ease-out;
}
.casilla[aria-pressed="true"]::before{ transform:scaleX(1) }
.casilla[aria-pressed="true"]{ background:var(--redline-tenue); color:var(--hueso) }
.casilla[aria-pressed="true"] .casilla-cifra{ color:var(--hueso) }
@media (prefers-reduced-motion:reduce){ .casilla::before{ transition:none } }

/* Las familias sin archivos van juntas en una casilla que no se estira. */
.casilla-pedido{ flex:0 0 auto }
.casilla-pedido .casilla-cifra{
  font-family:var(--texto); font-size:11.5px; color:var(--ceniza-2);
}

/* Los cinco pasos del oficio, en la portada.

   Se lee de corrido, de izquierda a derecha. El grafico que se tomo de
   referencia zigzaguea arriba y abajo, y eso obliga a la vista a rebotar
   cinco veces para leer cinco renglones.

   En un telefono las columnas caen solas y los pasos bajan derecho; ahi la
   linea que ata un paso con el siguiente sobra y se apaga.

   Ojo con el nombre: `.riel` a secas es el renglon de promocion de mas
   arriba, que es otra cosa. */
.pasos-riel{
  list-style:none; margin:0 0 30px; padding:0;
  display:grid; gap:26px 20px;
  grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
}
.pasos-riel li{ position:relative; padding-top:36px }
.pasos-riel .paso-n{
  position:absolute; top:0; left:0; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  font-family:var(--mono); font-size:10.5px; font-weight:600;
  color:var(--redline); background:var(--redline-tenue);
  border:1px solid var(--redline);
}
/* La linea que ata este paso con el que sigue. */
.pasos-riel li::before{
  content:''; position:absolute; top:13px; left:34px; right:-20px;
  height:1px; background:var(--borde);
}
.pasos-riel li:last-child::before{ display:none }
.pasos-riel .paso-dib{
  display:block; width:42px; height:42px; margin:0 0 12px -2px;
  fill:none; stroke:var(--ceniza); stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round;
  transition:stroke .18s ease;
}
.pasos-riel li:hover .paso-dib{ stroke:var(--redline) }
.pasos-riel b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:15.5px; margin-bottom:7px;
}
.pasos-riel p{
  margin:0 0 10px; color:var(--ceniza); font-size:13.5px; line-height:1.62;
}
.pasos-riel .paso-tiempo{
  display:block; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza-2);
  border-top:1px solid var(--borde-suave); padding-top:8px;
}
@media (max-width:760px){
  .pasos-riel li::before{ display:none }
  .pasos-riel{ gap:22px }
}

/* Las fotos de conexionado, en un desplegable cerrado. El que ya sabe donde
   soldar no lo abre; el que no, lo tiene a un toque. */
.conexionado{
  border:1px solid var(--borde); border-radius:var(--radio-chico);
  background:var(--panel); margin:6px 0 14px;
}
.conexionado summary{
  cursor:pointer; padding:11px 14px; font-family:var(--display);
  font-weight:600; font-size:14px; list-style:none;
  display:flex; align-items:center; gap:10px;
}
.conexionado summary::-webkit-details-marker{ display:none }
.conexionado summary::before{
  content:''; width:7px; height:7px; border-right:2px solid var(--redline);
  border-bottom:2px solid var(--redline); transform:rotate(-45deg);
  transition:transform .15s; flex:none;
}
.conexionado[open] summary::before{ transform:rotate(45deg) }
.conexionado-cuerpo{ padding:0 14px 14px; color:var(--ceniza); font-size:13.5px }
.conexionado-grilla{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
}
.conexionado figure{ margin:0 }
.conexionado img{
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  border-radius:7px; border:1px solid var(--borde); cursor:zoom-in;
}
.conexionado figcaption{ margin-top:6px; font-size:12.5px; line-height:1.4 }
.conexionado figcaption b{ color:var(--hueso); display:block }
.conexionado .puntos{ display:flex; flex-wrap:wrap; gap:4px; margin:4px 0 }
.conexionado .punto{
  font-family:var(--mono); font-size:10.5px; color:var(--dato);
  border:1px solid var(--borde); border-radius:4px; padding:1px 6px;
}
.conexionado figcaption p{ margin:4px 0 0; color:var(--ceniza-2) }

/* Un control de carga por cada archivo que pide la compra. El que ya llego
   se marca; el titulo dice cual es (P-Flash, D-Flash...), porque cruzarlos es
   el error mas comun. */
.adj-rol{ border-top:1px solid var(--borde-suave); padding-top:12px; margin-top:12px }
.adj-rol h3{ font-family:var(--display); font-size:14px; margin:0 0 6px }
.adj-rol.listo h3::after{ content:'  ✓'; color:var(--signal) }
.adj-rol .adj-lista{ margin:0 0 8px }

/* El riel de promocion: lo que compra el espacio que se libero. Lleva el
   mismo filete que la regleta y un canto naranja, para que se lea como parte
   del instrumento y no como un cartel pegado encima. */
.riel{
  display:flex; align-items:center; gap:14px; margin-top:8px;
  padding:7px 14px; background:var(--grafito);
  border:1px solid var(--borde); border-left:2px solid var(--redline);
  border-radius:var(--radio-chico);
}
.riel-marca{
  font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--redline); white-space:nowrap;
}
.riel-texto{ color:var(--ceniza); font-size:13px; flex:1; min-width:0 }
.riel a{
  color:var(--hueso); text-decoration:none; font-size:12.5px; white-space:nowrap;
  border-bottom:1px solid var(--redline); padding-bottom:1px;
}
.riel a:hover{ color:var(--redline-h) }

@media (max-width:760px){
  /* En un telefono la regleta se desliza de costado en vez de apilarse: son
     diez casillas y apiladas serian una pared. */
  .regleta{ overflow-x:auto; flex-wrap:nowrap;
            -webkit-overflow-scrolling:touch }
  .casilla{ flex:0 0 auto; min-width:112px }
  .riel{ flex-wrap:wrap; gap:8px }
}

/* El desplegable de marcas de cada familia.

   El catalogo tiene 21.000 fichas de cuatro marcas, y la unica forma de
   llegar a las de una marca era un selector chico debajo del buscador que
   nadie mira. La familia es lo que la persona ya esta mirando cuando piensa
   "de esto, ¿que hay de Ford?".

   Se abre con :hover y tambien con :focus-within, para que el que llega con
   el teclado no quede afuera.

   La caja NO es position:relative a proposito. La regleta lleva
   overflow:hidden para que los fondos de las casillas respeten sus esquinas
   redondeadas, y ese recorte se aplica a todo lo que se posiciona respecto
   de algo que esta adentro de ella: con la caja como marco, del menu se veia
   solo el titulo asomando. El marco es la nav (.familias, position:relative),
   que esta afuera del recorte, y catalogo-ecu.js ubica el menu debajo de su
   casilla al abrirlo. */
.fam-caja{ display:inline-block }
.fam-menu{
  position:absolute; z-index:30; top:0; left:0;
  min-width:190px; padding:5px;
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio-chico);
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  display:none;
}
/* Un puente invisible sobre los 6 px de aire entre la casilla y el menu: sin
   el, bajar despacio el mouse cerraba el menu antes de llegar. */
.fam-menu::before{
  content:''; position:absolute; left:0; right:0; top:-8px; height:8px;
}
.fam-caja:hover .fam-menu,
.fam-caja:focus-within .fam-menu{ display:block }
.fam-menu-tit{
  font-family:var(--display); font-weight:600; font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ceniza-2);
  padding:6px 11px 4px;
}
.fam-menu button{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  width:100%; padding:8px 11px; border:0; border-radius:6px;
  background:none; color:var(--ceniza); cursor:pointer;
  font-family:var(--texto); font-size:13px; text-align:left;
}
.fam-menu button:hover,
.fam-menu button:focus-visible{ background:var(--panel-alto); color:var(--hueso) }
.fam-menu b{
  font-family:var(--mono); font-size:11px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--ceniza-2);
}

/* Sin hover --un telefono-- el chip filtra por familia con un toque y las
   marcas se eligen con el selector de siempre. */
@media (hover:none){ .fam-menu{ display:none !important } }

/* ----------------------------------------------------------------- fichas -- */
.grilla{
  display:grid; gap:16px;
  /* 240 y no 324: con 324 entraban tres columnas en una ventana de 1121
     y sobraba lugar al costado. En pantalla chica manda la regla de
     abajo, que fuerza una sola columna. */
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
.ficha{
  position:relative; background:var(--panel);
  border:1px solid var(--borde); border-radius:var(--radio);
  padding:20px; display:flex; flex-direction:column; gap:13px;
  transition:border-color .16s, transform .16s;
}
.ficha::before{
  content:""; position:absolute; left:20px; right:20px; top:0; height:2px;
  background:var(--borde); border-radius:0 0 2px 2px;
  transition:background .16s;
}
.ficha:hover{ border-color:var(--redline); transform:translateY(-2px) }
.ficha:hover::before{ background:var(--redline) }
.ficha h3{
  font-family:var(--display); font-weight:700; font-size:16.5px;
  line-height:1.3; letter-spacing:-.005em; margin:0;
}

.tecnico{
  font-family:var(--mono); font-size:11.5px; line-height:1.75;
  color:var(--ceniza-2); display:flex; flex-wrap:wrap; gap:2px 12px;
}
.tecnico b{ color:var(--dato); font-weight:400 }
.tipo{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ceniza-2);
  border:1px solid var(--borde); border-radius:4px; padding:2px 6px;
}
.resumen{ margin:0; font-size:13.5px; color:var(--ceniza); line-height:1.6 }

/* La ganancia es el motivo de compra de un stage: va grande y en verde, sin
   grafico. Sin potencia de origen cargada, un dibujo de banco seria un numero
   inventado con cara de medicion. */
.ganancia{ display:flex; gap:22px; padding:3px 0 1px }
.ganancia div{ display:flex; flex-direction:column; gap:1px }
.ganancia i{
  font-style:normal; font-family:var(--mono); font-weight:600;
  font-size:19px; color:var(--signal); font-variant-numeric:tabular-nums;
}
.ganancia span{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ceniza-2);
}

.aviso{
  background:var(--redline-tenue); border-left:3px solid var(--redline);
  border-radius:0 var(--radio-chico) var(--radio-chico) 0;
  padding:10px 12px; font-size:12.5px; color:var(--ceniza); line-height:1.55;
}

.pie{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:auto; padding-top:15px;
  border-top:1px solid var(--borde-suave);
}
.precio{
  font-family:var(--mono); font-weight:600; font-size:19px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}

.btn-comprar{
  background:var(--redline); color:var(--carbon); border:0;
  padding:11px 20px; border-radius:var(--radio-chico);
  font-family:var(--texto); font-weight:600; font-size:13.5px;
  cursor:pointer; transition:background .14s;
}
.btn-comprar:hover{ background:var(--redline-h) }
.btn-comprar:disabled{ opacity:.5; cursor:default }
.btn-plano{
  background:transparent; border:1px solid var(--borde); color:var(--ceniza);
  padding:10px 17px; border-radius:var(--radio-chico);
  font-family:var(--texto); font-size:13.5px; cursor:pointer;
}
.btn-plano:hover{ border-color:var(--redline); color:var(--hueso) }

.vacio{
  grid-column:1/-1; text-align:center; padding:70px 20px;
  color:var(--ceniza-2); border:1px dashed var(--borde);
  border-radius:var(--radio);
}
.cargando{
  grid-column:1/-1; padding:60px; text-align:center;
  color:var(--ceniza-2); font-family:var(--mono); font-size:13px;
}

/* ----------------------------------------------------------------- pasos -- */
.pasos{
  list-style:none; margin:0 0 26px; padding:0;
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.pasos li{
  border-top:2px solid var(--redline); padding-top:16px;
}
.pasos .n{
  display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.18em; color:var(--redline); margin-bottom:9px;
}
.pasos b{
  display:block; font-family:var(--display); font-weight:700;
  font-size:15.5px; margin-bottom:7px;
}
.pasos p{ margin:0; color:var(--ceniza); font-size:13.5px; line-height:1.65 }
.cierre{
  color:var(--ceniza-2); font-size:13.5px; padding-bottom:70px;
  border-top:1px solid var(--borde-suave); padding-top:22px; margin:0;
}

/* --------------------------------------------------------------- modal -- */
.modal-fondo{
  position:fixed; inset:0; background:rgba(5,6,8,.78);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:60; overflow:auto;
}
.modal{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:26px; width:100%;
  max-width:452px; max-height:92vh; overflow:auto;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}
.modal h2{
  font-family:var(--display); font-weight:700; font-size:19px;
  line-height:1.3; margin:0 0 7px;
}
.modal-sub{
  font-family:var(--mono); font-size:12.5px; color:var(--ceniza-2);
  margin:0 0 20px;
}
.modal-sub b{ color:var(--hueso); font-size:17px; font-weight:600 }
.modal-cuerpo{ display:flex; flex-direction:column; gap:15px }

.campo{ display:flex; flex-direction:column; gap:6px }
.campo span{ font-size:13px; color:var(--ceniza) }
.campo input{
  width:100%; background:var(--grafito); border:1px solid var(--borde);
  border-radius:var(--radio-chico); color:var(--hueso);
  font-family:var(--mono); font-size:14px; padding:11px 13px;
}
.campo input:focus{
  outline:none; border-color:var(--redline);
  box-shadow:0 0 0 3px var(--redline-tenue);
}
.campo small{ color:var(--ceniza-2); font-size:11.5px }

.medios{ display:flex; flex-direction:column; gap:9px }
.medios-tit{ font-size:13px; color:var(--ceniza) }
.medio{
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--borde); border-radius:var(--radio-chico);
  padding:13px; cursor:pointer; transition:border-color .14s;
}
.medio:hover{ border-color:var(--redline) }
.medio:has(input:checked){ border-color:var(--redline); background:var(--redline-tenue) }
.medio input{ width:auto; margin:3px 0 0; flex:0 0 auto; accent-color:var(--redline) }
.medio b{ font-size:13.5px; display:block; font-weight:600 }
.medio small{
  color:var(--ceniza-2); font-size:11.5px; display:block;
  margin-top:3px; line-height:1.5;
}

.sel-version{
  width:100%; background:var(--grafito); border:1px solid var(--borde);
  border-radius:var(--radio-chico); color:var(--hueso);
  font-family:var(--mono); font-size:14px; padding:11px 13px;
}
.sel-version:focus{
  outline:none; border-color:var(--redline);
  box-shadow:0 0 0 3px var(--redline-tenue);
}
.medios small{ color:var(--ceniza-2); font-size:11.5px; line-height:1.5 }

.terminos{
  display:flex; gap:10px; align-items:flex-start;
  font-size:11.5px; color:var(--ceniza-2); line-height:1.55;
}
.terminos input{ width:auto; margin:2px 0 0; flex:0 0 auto; accent-color:var(--redline) }

.modal-error{
  color:var(--redline); font-size:13px; margin:14px 0 0; min-height:1em;
}
.modal-pie{ display:flex; gap:10px; justify-content:flex-end; margin-top:18px }

/* --------------------------------------------------------------- compra -- */
/* Pagina de una compra. Angosta: hay un solo camino y cada paso va debajo
   del anterior. */
.env-angosto{ max-width:620px; margin:0 auto; padding:0 22px 80px }
.tarjeta{
  background:var(--panel); border:1px solid var(--borde);
  border-radius:var(--radio); padding:26px;
}
.tarjeta h1{
  font-family:var(--display); font-weight:700; font-size:22px;
  line-height:1.3; margin:0 0 11px;
}
.linea{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px; padding:16px 0; margin-top:4px;
  border-top:1px solid var(--borde-suave);
}
.linea .precio{ font-size:26px }
.marbete{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; padding:5px 11px; border-radius:100px;
  border:1px solid var(--borde); color:var(--ceniza-2); white-space:nowrap;
}
.m-espera{ color:var(--redline); border-color:var(--redline); background:var(--redline-tenue) }
.m-listo{ color:var(--signal); border-color:var(--signal) }

.paso{ margin-top:22px; padding-top:20px; border-top:1px solid var(--borde-suave) }
.paso h2{
  font-family:var(--display); font-weight:700; font-size:15px;
  margin:0 0 10px; letter-spacing:.005em;
}
.paso p{ margin:0 0 14px; color:var(--ceniza); font-size:14px; line-height:1.65 }

.banco{
  display:flex; flex-direction:column;
  border:1px solid var(--borde); border-radius:var(--radio);
  overflow:hidden; margin-bottom:16px;
}
.dato{
  display:flex; align-items:center; gap:12px; padding:12px 14px;
  background:var(--grafito);
}
.dato + .dato{ border-top:1px solid var(--borde-suave) }
.dato .etq{
  font-family:var(--mono); font-size:10px; color:var(--ceniza-2);
  text-transform:uppercase; letter-spacing:.13em; flex:0 0 82px;
}
.dato .val{
  font-family:var(--mono); font-size:14px; color:var(--hueso);
  flex:1; word-break:break-all;
}
.dato button{
  background:transparent; border:1px solid var(--borde); color:var(--ceniza-2);
  border-radius:6px; padding:5px 11px; font-family:var(--mono);
  font-size:11px; cursor:pointer; flex:0 0 auto;
}
.dato button:hover{ border-color:var(--redline); color:var(--redline) }

.nota{
  background:rgba(255,90,31,.10); border-left:3px solid var(--redline);
  border-radius:0 var(--radio-chico) var(--radio-chico) 0;
  padding:11px 13px; font-size:13px; color:var(--ceniza);
  line-height:1.55; margin-bottom:14px;
}
.acciones{ display:flex; flex-wrap:wrap; gap:11px; align-items:center }
.btn{
  background:var(--redline); color:var(--carbon); border:0;
  padding:13px 22px; border-radius:var(--radio-chico);
  font-family:var(--texto); font-weight:600; font-size:14.5px;
  cursor:pointer; text-decoration:none; display:inline-block;
}
.btn:hover{ background:var(--redline-h) }
.btn[disabled]{ opacity:.5; cursor:default }
.btn-verde{ background:var(--signal) }
.btn-verde:hover{ background:#6ee79b }

.archivo{ display:block; margin-bottom:14px }
.archivo input{
  width:100%; font-family:var(--mono); font-size:12.5px; color:var(--ceniza);
}
.chico{ font-size:12.5px; color:var(--ceniza-2); margin:12px 0 0; line-height:1.6 }
.error{ color:var(--redline); font-size:13px; margin:11px 0 0; min-height:1em }

.cab-compra{ padding:26px 0 20px }
.volver{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ceniza-2); text-decoration:none;
}
.volver:hover{ color:var(--redline) }

/* --------------------------------------------------------------- foco -- */
:focus-visible{ outline:2px solid var(--redline); outline-offset:2px }

/* ------------------------------------------------------------- angosto -- */
@media (max-width:640px){
  .hero{ padding:40px 0 26px }
  .buscador input{ font-size:14px; padding:16px 16px 16px 44px }
  .grilla{ grid-template-columns:1fr }
  .barra nav{ display:none }
}

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

/* ------------------------------------------------------------- whatsapp -- */
.cierre-fila{
  display:flex; align-items:center; justify-content:space-between;
  gap:22px; flex-wrap:wrap;
  border-top:1px solid var(--borde-suave); padding:26px 0 76px; margin:0;
}
.cierre-fila p{
  color:var(--ceniza); font-size:14.5px; margin:0; max-width:46ch;
  line-height:1.6;
}

.wsp{
  position:relative; isolation:isolate; overflow:hidden;
  display:inline-flex; align-items:center; gap:13px;
  padding:16px 28px; border-radius:100px;
  text-decoration:none; white-space:nowrap;
  font-family:var(--texto); font-weight:700; font-size:16px;
  color:#04250f;
  /* Claro arriba y oscuro abajo: es como cae la luz sobre una superficie
     curva, y es lo que separa el metal del color plano. */
  background:linear-gradient(180deg,
    #86F9B0 0%, #45E687 22%, #25D366 50%, #14AC53 76%, #0A7B37 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.8),
    inset 0 0 0 1px rgba(255,255,255,.18),
    inset 0 -3px 6px rgba(0,0,0,.34),
    0 2px 0 #06552a,
    0 12px 26px -7px rgba(37,211,102,.7),
    0 0 40px -10px rgba(37,211,102,.6);
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  transition:transform .16s, box-shadow .16s, filter .16s;
}
.wsp > *{ position:relative; z-index:3 }

/* Reflejo del tercio superior. */
.wsp::before{
  content:""; position:absolute; inset:1px 1px auto 1px; height:48%;
  border-radius:100px 100px 60% 60% / 100px 100px 26px 26px;
  background:linear-gradient(180deg,
    rgba(255,255,255,.66) 0%,
    rgba(255,255,255,.30) 58%,
    rgba(255,255,255,.02) 100%);
  pointer-events:none; z-index:1;
}

/* Destello que barre de a ratos. */
.wsp::after{
  content:""; position:absolute; top:-60%; bottom:-60%;
  width:42px; left:-70px;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.9), transparent);
  transform:rotate(18deg); pointer-events:none; z-index:2;
  animation:wsp-brillo 4.5s ease-in-out infinite;
}
@keyframes wsp-brillo{
  0%, 74%   { left:-70px }
  90%, 100% { left:118% }
}

.wsp:hover{
  transform:translateY(-2px);
  filter:saturate(1.1) brightness(1.06);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -3px 6px rgba(0,0,0,.3),
    0 3px 0 #06552a,
    0 16px 32px -8px rgba(37,211,102,.8),
    0 0 54px -10px rgba(37,211,102,.75);
}
.wsp:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 6px rgba(0,0,0,.4),
    inset 0 0 0 1px rgba(255,255,255,.14),
    0 4px 14px -6px rgba(37,211,102,.5);
}

/* Disco embutido detras del glifo. Sin esto el logo blanco cae sobre la
   parte mas clara del degrade y se pierde. */
.wsp-disco{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%; flex:0 0 auto;
  background:radial-gradient(circle at 50% 32%, #0d7f3c, #04421e 78%);
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.6),
    inset 0 -1px 0 rgba(255,255,255,.22),
    0 1px 0 rgba(255,255,255,.45);
}
.wsp svg{
  width:23px; height:23px; flex:0 0 auto;
  filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55));
}
.wsp b{ font-weight:700; letter-spacing:.1px }
.wsp span{
  font-family:var(--mono); font-size:13.5px; font-weight:600;
  color:#053a1b; opacity:.9;
}

@media (max-width:640px){
  .wsp{ width:100%; justify-content:center; font-size:15px }
}
@media (prefers-reduced-motion:reduce){
  .wsp::after{ animation:none; display:none }
  .wsp:hover{ transform:none }
}


/* ------------------------------------------------------------ pago USDT --- */
/* La advertencia de red tiene que ganarle a todo lo demas de la pantalla:
   es el unico error de esta pagina que cuesta plata y no se puede deshacer. */
.alerta-red{
  margin:0 0 14px;padding:12px 14px;border-radius:8px;
  background:#3a0d0d;border:1px solid #b3261e;border-left-width:5px;
  color:#ffd9d6;font-weight:600;line-height:1.45;
}
.reloj{
  margin:12px 0 0;padding:9px 12px;border-radius:8px;text-align:center;
  background:rgba(255,255,255,.06);font-variant-numeric:tabular-nums;
  letter-spacing:.4px;
}
.reloj.vencido{background:#3a0d0d;color:#ffd9d6}


/* Boton de salida cuando la busqueda no encuentra nada. Sin esto el visitante
   que no da con su archivo se va; con esto escribe y el taller lo busca. */
.vacio .btn-wsp{
  display:inline-block;margin-top:12px;padding:10px 18px;border-radius:8px;
  background:#25d366;color:#062b14;font-weight:700;text-decoration:none;
}
.vacio .btn-wsp:hover{filter:brightness(1.08)}
.vacio p{margin:0 0 8px}

/* Familia sin archivos cargados. No se apaga: el rubro existe aunque no haya
   nada subido, y el boton lleva a escribir en vez de a nada. */
.familias .fam-pedido{opacity:.72;border-style:dashed}
.familias .fam-pedido b{
  background:transparent;border:1px solid currentColor;font-size:10px;
  letter-spacing:.3px;text-transform:uppercase;opacity:.8;
}
.familias .fam-pedido:hover{opacity:1}

/* Los dos precios. El peso manda por tamano porque la mayoria del trafico es
   local; el dolar va debajo, para el que compra desde afuera. */
.precio{display:flex;flex-direction:column;align-items:flex-end;line-height:1.15}
.precio .precio-usd{
  font-size:.72em;font-weight:600;opacity:.62;letter-spacing:.3px;
  margin-top:2px;
}

/* ------------------------------------------------ configurador de repro --- */
/* Los pasos van numerados porque son una secuencia real: sin el numero de
   calibracion, elegir opciones no significa nada. */
.hero-chico{padding-bottom:18px}
.paso-cfg{display:flex;gap:16px;margin:0 0 28px;align-items:flex-start}
.paso-num{
  flex:0 0 34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.08);font-weight:700;font-size:15px;
}
.paso-cuerpo{flex:1 1 auto;min-width:0}
.paso-cuerpo h2{margin:2px 0 4px;font-size:19px}

.campo-grande{
  width:100%;margin-top:10px;padding:14px 16px;border-radius:10px;
  font:600 18px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:1px;text-transform:uppercase;
}
.fila-2{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.fila-2 input{flex:1 1 180px;padding:10px 12px;border-radius:8px}

.cfg-grupos{margin-top:12px;display:grid;gap:14px}
.cfg-grupo{border-radius:10px;padding:12px 14px;background:rgba(255,255,255,.04)}
.cfg-grupo-tit{
  display:flex;align-items:baseline;gap:10px;margin-bottom:8px;
  font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;
}
.cfg-pista{font-size:11px;font-weight:500;opacity:.6;letter-spacing:.4px;text-transform:none}
.cfg-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px}
.cfg-op{
  display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  cursor:pointer;transition:background .12s;
}
.cfg-op:hover{background:rgba(255,255,255,.06)}
.cfg-op .ic{
  width:21px;height:21px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
  color:var(--ceniza);transition:color .12s;
}
.cfg-op:hover .ic{color:var(--hueso)}
.cfg-op input:checked ~ .ic{color:var(--redline)}
.cfg-nombre{flex:1 1 auto;min-width:0}
.cfg-precio{font-size:12px;opacity:.62;white-space:nowrap;font-variant-numeric:tabular-nums}

.resumen-cfg{margin-top:12px}
.resumen-lista{list-style:none;margin:0;padding:0}
.resumen-lista li{
  display:flex;justify-content:space-between;gap:14px;padding:7px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}
.resumen-total{
  display:flex;justify-content:space-between;gap:14px;padding:12px 0 0;
  font-size:19px;font-weight:700;
}

/* Los dos resultados se ven distinto a proposito: uno se entrega ya y el
   otro hay que prepararlo, y el comprador tiene que notar la diferencia. */
.res-listo,.res-preparar{margin-top:16px;padding:16px;border-radius:10px}
.res-listo{background:rgba(37,211,102,.10);border:1px solid rgba(37,211,102,.45)}
.res-preparar{background:rgba(255,180,60,.09);border:1px solid rgba(255,180,60,.42)}
.res-tit{font-weight:700;font-size:16px;margin-bottom:5px}
.res-form{display:flex;gap:9px;margin-top:12px;flex-wrap:wrap}
.res-form input{flex:1 1 190px;padding:11px 13px;border-radius:8px}
.btn-cfg{
  padding:11px 22px;border-radius:8px;border:0;cursor:pointer;
  background:#25d366;color:#062b14;font-weight:700;white-space:nowrap;
}
.btn-cfg:disabled{opacity:.6;cursor:default}
.aviso-cfg{margin-top:10px}

/* --------------------------------------- tarjeta de reprogramación probada --- */
/* Se distingue de las de archivos de fábrica a propósito: son productos
   distintos y a precios muy distintos. Sin esa diferencia visual, el
   comprador no entiende por qué una sale 16 dólares y la otra 300. */
.ficha-repro{
  border:1px solid rgba(255,180,60,.38);
  background:linear-gradient(180deg,rgba(255,180,60,.07),rgba(255,180,60,.02));
}
.ficha-repro:hover{border-color:rgba(255,180,60,.7)}
.etiqueta-repro{
  display:inline-block;margin-bottom:7px;padding:3px 9px;border-radius:20px;
  background:rgba(255,180,60,.16);color:#ffc65c;
  font-size:10px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
}
.repro-ops{display:flex;flex-wrap:wrap;gap:5px;margin:9px 0}
.repro-op{
  padding:3px 9px;border-radius:6px;font-size:11.5px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09);
}
.precio-usd-grande{font-size:1.05em;font-weight:700}

/* La reprogramación base se destaca del resto de las opciones: es lo que
   define el producto, los demás son agregados. */
.repro-op.repro-base{
  background:rgba(255,180,60,.18);border-color:rgba(255,180,60,.42);
  font-weight:700;
}

/* ------------------------------------------ tarjeta de reprogramación lista --- */
/* Es un div, no un enlace: lleva dos acciones. Antes envolvía todo en un <a>
   y el navegador subrayaba cada texto de adentro. */
.ficha-repro{
  display:flex;flex-direction:column;gap:0;
  border:1px solid rgba(255,180,60,.34);
  background:linear-gradient(180deg,rgba(255,180,60,.06),rgba(255,180,60,.015));
  text-decoration:none;
}
.ficha-repro *{text-decoration:none}
.ficha-repro:hover{border-color:rgba(255,180,60,.6)}

.etiqueta-repro{
  align-self:flex-start;margin-bottom:9px;padding:3px 9px;border-radius:20px;
  background:rgba(255,180,60,.16);color:#ffc65c;
  font-size:9.5px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
}
.repro-titulo{margin:0 0 2px;font-size:19px;line-height:1.2}
.repro-auto{font-size:13px;opacity:.66;margin-bottom:11px}

.repro-ops{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 13px}
.repro-op{
  padding:3px 9px;border-radius:6px;font-size:11.5px;line-height:1.5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);
}
.repro-op.repro-base{
  background:rgba(255,180,60,.17);border-color:rgba(255,180,60,.42);
  color:#ffd18a;font-weight:700;
}

/* Los datos técnicos: dos columnas, etiqueta chica y valor en monoespaciada.
   Antes iban pegados sin separador y se leía "AudiBosch EDC17C46Calib." */
.repro-datos{
  display:grid;grid-template-columns:auto 1fr;gap:2px 10px;
  margin:0 0 14px;padding:9px 11px;border-radius:8px;
  background:rgba(0,0,0,.22);font-size:11.5px;
}
.repro-datos dt{opacity:.55}
.repro-datos dd{
  margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2px;
}

.repro-pie{margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.07)}
.repro-precio{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.repro-precio span:first-child{font-size:20px;font-weight:700}
.repro-precio-nota{font-size:11px;opacity:.5}

.repro-acciones{display:flex;gap:8px}
.btn-repro{
  flex:1 1 auto;padding:9px 12px;border-radius:8px;text-align:center;
  font-size:13px;font-weight:700;cursor:pointer;
  background:#ffb43c;color:#241703;border:1px solid #ffb43c;
  transition:filter .12s;
}
.btn-repro:hover{filter:brightness(1.09)}
.btn-repro-2{
  background:transparent;color:#ffc65c;border-color:rgba(255,180,60,.42);
  font-weight:600;
}
.btn-repro-2:hover{background:rgba(255,180,60,.1);filter:none}

@media (max-width:420px){
  .repro-acciones{flex-direction:column}
}

/* Zona de arrastre automática. Discreta: se agrega sola en pantallas que ya
   estaban diseñadas, así que no puede imponerse sobre lo que ya hay. */
.zona-soltar-auto{
  margin:6px 0;padding:16px 14px;border-radius:9px;text-align:center;
  border:2px dashed rgba(128,128,128,.32);cursor:pointer;
  transition:border-color .15s,background .15s;
}
.zona-soltar-auto:hover{border-color:rgba(128,128,128,.55)}
.zona-soltar-auto.encima{
  border-color:#25d366;background:rgba(37,211,102,.10);
}
.zona-soltar-auto .zona-icono{font-size:22px;margin-bottom:3px;opacity:.65}
.zona-elegido{margin-top:6px;font-size:12px;opacity:.8;word-break:break-all}

/* El título es la configuración completa. La base va destacada y los extras
   en peso normal: se lee "Stage 2 + Hardcut + Launch Control" de un vistazo,
   sabiendo cuál es la reprogramación y cuáles los agregados. */
.repro-titulo{
  margin:0 0 3px;font-size:17px;line-height:1.32;font-weight:600;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:0 5px;
}
.repro-combo-base{font-weight:800;color:#ffc65c}
.repro-combo{font-weight:500;opacity:.92}
.repro-mas{opacity:.38;font-weight:400}
.repro-auto{font-size:12.5px;opacity:.6;margin-bottom:12px}

/* Rótulo de las funciones. Chico y en mayúsculas: tiene que decir qué son los
   chips sin competir con ellos, que es lo que se mira. */
.repro-ops-tit{
  font-size:9.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase;
  opacity:.45;margin:0 0 6px;
}
/* El título vuelve a ser sólo la base, así que recupera su tamaño. */
.repro-titulo{
  display:block;margin:0 0 2px;font-size:19px;line-height:1.2;font-weight:700;
}
.repro-auto{font-size:13px;opacity:.62;margin-bottom:13px}

/* Botón para seguir viendo. Ocupa el ancho de la grilla porque cierra la
   lista: un botón chico en una esquina no se encuentra. */
.ver-mas{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;
  gap:7px;padding:20px 0 6px;
}
.btn-ver-mas{
  padding:12px 30px;border-radius:9px;cursor:pointer;
  background:transparent;border:1px solid rgba(255,255,255,.22);
  color:inherit;font-size:14px;font-weight:600;
  transition:background .14s,border-color .14s;
}
.btn-ver-mas:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.4)}
.btn-ver-mas:disabled{opacity:.55;cursor:default}
.ver-mas .chico{opacity:.5;font-size:12px}

/* Todas las funciones activadas se ven igual. Antes la base iba en ámbar y
   los agregados en gris, como si fueran menores: son todas cosas que el
   archivo tiene prendidas y el comprador paga por cada una.
   La base conserva el peso de la tipografía, que alcanza para distinguirla
   sin degradar al resto. */
.repro-op{
  padding:4px 10px;border-radius:6px;font-size:12px;line-height:1.5;
  background:rgba(255,180,60,.13);
  border:1px solid rgba(255,180,60,.34);
  color:#ffd18a;
}
.repro-op.repro-base{
  background:rgba(255,180,60,.24);
  border-color:rgba(255,180,60,.55);
  font-weight:800;
}

/* ------------------------------------------------- precios: USD y ARS --- */
/* El dólar arriba y grande: es el precio que se fija y el que no se licúa.
   El peso abajo, como lo que es — el equivalente de hoy. */
.precio{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;gap:1px}
.precio .precio-usd{font-size:1em;font-weight:800;opacity:1;letter-spacing:.2px;margin:0}
.precio .precio-ars{font-size:.74em;font-weight:600;opacity:.55;letter-spacing:.3px}

/* Tarjeta de reprogramación */
.repro-precio{display:block;margin-bottom:10px}
.repro-precio-usd{display:flex;align-items:baseline;gap:8px}
.repro-precio-usd span:first-child{font-size:21px;font-weight:800}
.repro-precio-nota{font-size:11px;opacity:.5;font-weight:400}
.repro-precio-ars{font-size:13px;opacity:.55;font-weight:600;margin-top:1px}

/* Cuadro de compra */
.modal-precio{display:flex;flex-direction:column;line-height:1.25}
.modal-usd{font-size:20px;font-weight:800}
.modal-ars{font-size:13px;opacity:.58;font-weight:600}
.modal-vehiculo{display:block;margin-top:5px;opacity:.62;font-size:13px}

/* ------------------------------------------ brillo en los botones de comprar --- */
/* El mismo destello que barre el botón de WhatsApp: llama la atención sin
   moverse ni cambiar de color, que es lo que hace que un botón se note sin
   volverse molesto.

   Sin tocar colores: sólo un reflejo blanco que pasa cada cuatro segundos y
   medio. El botón sigue siendo el mismo.

   Va sólo en el botón de comprar. Si brillaran los dos --Comprar y
   Configurar-- ninguno destacaría, que es lo contrario de lo que se busca. */
.btn-comprar,
.repro-acciones .btn-repro:not(.btn-repro-2){
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.btn-comprar::after,
.repro-acciones .btn-repro:not(.btn-repro-2)::after{
  content:"";
  position:absolute; top:-60%; bottom:-60%;
  width:38px; left:-60px;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.55), transparent);
  pointer-events:none;
  /* Se avisa que esto se va a mover: el navegador lo prepara aparte en vez
     de descubrirlo cuando ya arranco. */
  will-change:transform;
  animation:brillo-comprar 4.5s ease-in-out infinite;
}
/* Con transform y no con left: animar `left` obliga a recalcular posiciones
   en cada cuadro, y son setenta botones en la grilla. transform lo resuelve
   la placa de video sin tocar el diseño. */
@keyframes brillo-comprar{
  0%, 74%   { transform:translateX(0) rotate(18deg) }
  90%, 100% { transform:translateX(260px) rotate(18deg) }
}

/* Los que están apagados no brillan: un botón deshabilitado que llama la
   atención es una promesa que no se puede cumplir. */
.btn-comprar:disabled::after{ animation:none; opacity:0 }

@media (prefers-reduced-motion:reduce){
  .btn-comprar::after,
  .repro-acciones .btn-repro:not(.btn-repro-2)::after{ animation:none; display:none }
}

/* --------------------------------------------- pistas de circuito del hero --- */
/* Sólo arriba. Detrás del catálogo estorbarían: ahí el ojo tiene que leer
   números de calibración, no mirar el fondo.

   Muy tenues a propósito: se notan cuando mirás y desaparecen cuando leés.
   Si compiten con el título, fracasaron. */
.pistas-hero{
  position:absolute; inset:0 0 0 auto;
  width:min(82%,1000px); height:100%;
  color:var(--redline);
  pointer-events:none;
  z-index:0;
}
/* La opacidad va en las pistas y no en el SVG entero: puesta arriba se
   multiplicaba sobre el pulso y apagaba la señal junto con el cobre. */
.pistas-hero > g{ opacity:.15 }
/* El contenido va por encima; el hero ya recorta lo que se pase. */
.hero > .env{ position:relative; z-index:1 }

/* La señal recorriendo una pista. Un trazo corto que avanza y vuelve a
   empezar, como un pulso viajando por el cobre. */
/* La señal recorriendo el cobre. Brilla de verdad -- es lo unico que se
   mueve en toda la pantalla, y si no se ve no tiene sentido que este. */
.pista-pulso{
  stroke:#ffe6c2;
  stroke-dasharray:78 1200;
  filter:drop-shadow(0 0 7px var(--redline))
         drop-shadow(0 0 18px var(--redline));
  animation:pista-senal 5.5s linear infinite;
}
/* La segunda arranca a mitad del ciclo de la primera: si salieran juntas
   parecerian una sola cosa mas grande, no dos señales. */
.pista-pulso-2{
  stroke-dasharray:62 1200;
  animation-duration:6.8s;
  animation-delay:2.6s;
}
@keyframes pista-senal{
  0%   { stroke-dashoffset:1254; opacity:0 }
  8%   { opacity:.95 }
  88%  { opacity:.95 }
  100% { stroke-dashoffset:0; opacity:0 }
}

/* En pantalla chica el hero es casi todo texto y no sobra lugar al costado:
   las pistas quedarían debajo de las letras en vez de al lado. */
@media (max-width:900px){
  .pistas-hero{ display:none }
}
@media (prefers-reduced-motion:reduce){
  .pista-pulso{ animation:none; opacity:0 }
}

/* ============================================ ECU del hero (reemplaza pistas) */
/* Dos capas con distinto peso: en una placa real las pistas internas se ven
   más apagadas que las de la cara. Sin esa diferencia queda un dibujo plano. */
.pistas-hero > g > .capa-fondo{ opacity:.34 }
.pistas-hero > g > .capa-frente{ opacity:.62 }
.pistas-hero > g > .capa-vias{ opacity:.75 }
.pistas-hero .chip-patas{ opacity:.85 }
.pistas-hero .chip-cuerpo{ opacity:.95 }

/* El integrado con cuerpo, no un contorno flotando: un componente se apoya
   sobre la placa y tapa lo que hay debajo. */
.pistas-hero .chip-cuerpo rect{ fill:#140b07 }

.pistas-hero .chip-texto{
  font-family:var(--mono); font-size:19px; font-weight:700;
  letter-spacing:.22em; fill:currentColor; opacity:.8;
}

/* El chip respira: muy lento y muy poco, lo justo para que la pantalla no
   parezca congelada cuando ninguna señal está pasando. */
.pistas-hero .chip-halo{ animation:chip-latir 6s ease-in-out infinite }
@keyframes chip-latir{
  0%,100%{ opacity:.55 }
  50%    { opacity:1 }
}

/* Las señales entrando al chip. Es lo único que se ve con fuerza: el cobre
   es el escenario, la señal es lo que pasa. */
.pista-pulso{
  stroke:#ffe6c2;
  stroke-dasharray:86 2400;
  filter:drop-shadow(0 0 7px var(--redline))
         drop-shadow(0 0 20px var(--redline));
  animation:pista-senal 5.2s cubic-bezier(.4,0,.5,1) infinite;
}
/* De afuera hacia adentro: el trazado arranca en la pata del chip, así que
   el recorrido va del final al principio. */
/* De afuera hacia adentro. El trazado nace en la pata del chip, asi que
   para que la señal LLEGUE hay que recorrerlo al reves. */
@keyframes pista-senal{
  0%   { stroke-dashoffset:2486; opacity:0 }
  12%  { opacity:.95 }
  88%  { opacity:.95 }
  100% { stroke-dashoffset:0;    opacity:0 }
}
.pista-pulso-2{ animation-duration:6.4s; animation-delay:1.9s; stroke-dasharray:70 2400 }
.pista-pulso-3{ animation-duration:7.1s; animation-delay:3.6s; stroke-dasharray:62 2400 }

/* ================================================= la placa del hero ======= */
/* A todo el ancho, no en una esquina. El texto se lee por otra vía: un velo
   oscuro detrás de la columna de letras, en vez de apagar el dibujo entero.
   Así el cobre puede verse fuerte y las letras igual se leen. */
.placa{
  position:absolute; inset:0;
  width:100%; height:100%;
  /* Cobre. El naranja de la marca ya es casi cobre, pero el metal real tiene
     más amarillo y se lee de inmediato como tal. */
  color:#e08a3c;
  pointer-events:none;
  /* Las tres capas ordenadas: placa, velo, texto. Con todas en 0
     pintaba ultimo el que iba despues en el arbol y el velo quedaba
     debajo de la placa, sin proteger nada. */
  z-index:0;
}
.placa .masa{ opacity:.13 }
.placa .halo{ opacity:.5; animation:placa-latir 7s ease-in-out infinite }
@keyframes placa-latir{ 0%,100%{opacity:.34} 50%{opacity:.62} }

.placa .finas  { opacity:.42 }
.placa .medias { opacity:.62 }
.placa .gruesas{ opacity:.78 }
.placa .vias   { opacity:.7 }
.placa .pads   { opacity:.85 }

.placa .componentes{ opacity:.9 }
/* Los componentes tapan el cobre que pasa debajo, como en una placa real. */
.placa .cuerpo{ fill:#170d08 }
.placa .rotulo{
  font-family:var(--mono); font-size:26px; font-weight:700;
  letter-spacing:.2em; fill:currentColor; stroke:none; opacity:.85;
}

/* El velo detrás del texto: gradiente que se abre hacia la derecha. Sin esto
   habría que apagar la placa, que es justo lo que la hacía invisible. */
.hero::before{
  content:""; position:absolute; inset:0;
  /* Sólido hasta pasar la columna de texto; recién ahí se abre. El texto
     más largo llega al 45% del ancho, así que antes de eso no se negocia. */
  background:
    linear-gradient(180deg, transparent 62%, var(--carbon) 100%),
    linear-gradient(100deg,
      var(--carbon) 0%,
      var(--carbon) 44%,
      rgba(10,10,12,.93) 52%,
      rgba(10,10,12,.62) 66%,
      rgba(10,10,12,.22) 82%,
      transparent 96%);
  z-index:1; pointer-events:none;
}
.hero > .env{ position:relative; z-index:2 }

/* Las señales. Es lo único que se mueve: el cobre es el escenario. */
.pulso{
  stroke:#ffdca8;
  stroke-dasharray:120 3000;
  filter:drop-shadow(0 0 8px #ff8a3c) drop-shadow(0 0 22px #ff5a1f);
  animation:pulso-viaja 5s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes pulso-viaja{
  0%   { stroke-dashoffset:3120; opacity:0 }
  10%  { opacity:1 }
  86%  { opacity:1 }
  100% { stroke-dashoffset:0;    opacity:0 }
}
.pulso-2{ animation-duration:6.2s; animation-delay:1.4s }
.pulso-3{ animation-duration:7s;   animation-delay:2.9s }
.pulso-4{ animation-duration:5.6s; animation-delay:4.1s }

@media (max-width:900px){ .placa{ display:none } .hero::before{ display:none } }
@media (prefers-reduced-motion:reduce){
  .pulso{ animation:none; opacity:0 }
  .placa .halo{ animation:none }
}

/* ------------------------------------------------ la cuenta del cliente --- */
/* Pantalla propia (cuenta.html + js/cuenta-ecu.js). Clases propias a
   proposito: reusar las del configurador dejaba los packs apretados en dos
   columnas, porque aquellas asumen una grilla de opciones con precio. */
.cta-saldo{
  margin:18px 0;padding:16px 18px;border:1px solid var(--linea,#2a2a2a);
  border-radius:12px;background:rgba(255,255,255,.02)
}
.cta-saldo .cta-etq{
  font-size:11px;text-transform:uppercase;letter-spacing:1.1px;opacity:.65
}
.cta-saldo .cta-cifra{font-size:30px;font-weight:800;line-height:1.15;margin-top:4px}

.cta-tit{
  margin:22px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:1.1px;
  opacity:.7;font-weight:700
}
.cta-lista{display:flex;flex-direction:column;gap:1px}
.cta-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:11px 2px;border-bottom:1px solid var(--linea,#232323)
}
.cta-fila:last-child{border-bottom:0}
.cta-fila .cta-izq{min-width:0;flex:1}
.cta-fila .cta-nom{display:block}
.cta-fila .cta-sub{display:block;font-size:12px;opacity:.6;margin-top:2px}
.cta-fila .cta-val{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:700}
.cta-fila .cta-val.suma{color:#3ddc84}
.cta-fila .cta-val.resta{opacity:.75}

.cta-acciones{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 10px}
.cta-detalle{margin:20px 0;padding:12px 0;border-top:1px solid var(--linea,#232323)}
.cta-detalle summary{cursor:pointer;padding:4px 0}
.cta-pie{margin:24px 0 40px}

@media (max-width:520px){
  .cta-fila{flex-direction:column;align-items:flex-start;gap:2px}
  .cta-saldo .cta-cifra{font-size:26px}
}

/* --------------------------------------------- el acceso a la cuenta ----- */
/* Era un enlace mas del menu, igual a "Catalogo" y "Como funciona": no se
   notaba, y sobre todo no decia que ahi se registra uno. Ahora es un boton
   con borde en el color de la marca y separado de los demas. */
.barra nav .nav-cuenta{
  border:1px solid var(--redline);
  color:var(--redline);
  border-radius:999px;
  padding:6px 14px;
  margin-left:6px;
  line-height:1;
  white-space:nowrap;
  transition:background .15s, color .15s;
}
.barra nav .nav-cuenta:hover{
  background:var(--redline);
  color:#0a0c0f;
}
.nav-cuenta-corto{ display:none }

@media (max-width:900px){
  .nav-cuenta-largo{ display:none }
  .nav-cuenta-corto{ display:inline }
  .barra nav{ gap:12px }
}

/* ------------------------------------------------- PRUEBA: panal de fondo --
   El mismo azulejo que el menu del panel, tenido sobre el negro frio de la
   vitrina y con el trazo mas apagado: aca el panal esta detras de texto largo
   y de tarjetas, y si compite se lee peor. `fixed` para que no se arrastre al
   desplazar. Si no convence, se borra este bloque entero. */
body{
  background-color:var(--carbon);
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2238.11%22%20height%3D%2266.00%22%20viewBox%3D%220%200%2038.11%2066.00%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23161B22%22%20stroke-width%3D%221.00%22%3E%3Cpath%20d%3D%22M19.05%20-11.00%20L38.11%200.00%20L38.11%2022.00%20L19.05%2033.00%20L-0.00%2022.00%20L0.00%20-0.00%20Z%22/%3E%3Cpath%20d%3D%22M0.00%2022.00%20L19.05%2033.00%20L19.05%2055.00%20L0.00%2066.00%20L-19.05%2055.00%20L-19.05%2033.00%20Z%22/%3E%3Cpath%20d%3D%22M38.11%2022.00%20L57.16%2033.00%20L57.16%2055.00%20L38.11%2066.00%20L19.05%2055.00%20L19.05%2033.00%20Z%22/%3E%3Cpath%20d%3D%22M0.00%20-44.00%20L19.05%20-33.00%20L19.05%20-11.00%20L0.00%200.00%20L-19.05%20-11.00%20L-19.05%20-33.00%20Z%22/%3E%3Cpath%20d%3D%22M38.11%20-44.00%20L57.16%20-33.00%20L57.16%20-11.00%20L38.11%200.00%20L19.05%20-11.00%20L19.05%20-33.00%20Z%22/%3E%3Cpath%20d%3D%22M19.05%2055.00%20L38.11%2066.00%20L38.11%2088.00%20L19.05%2099.00%20L-0.00%2088.00%20L0.00%2066.00%20Z%22/%3E%3C/g%3E%3C/svg%3E");
  background-size:38.11px 66.00px;
  background-repeat:repeat;
  background-attachment:fixed;
}
/* Lo que lleva texto largo se apoya en su propio fondo, para que el panal no
   le pase por debajo a un parrafo. */
.hero, .seccion, .env > .tarjeta, .cargando{ position:relative }

/* En el telefono el menu se oculta (la regla de 640 px, mas arriba), pero el
   acceso a la cuenta se queda: el telefono es donde mas se registra la gente
   y un boton solo si entra al lado del logo. */
@media (max-width:640px){
  .barra nav{ display:flex; gap:0 }
  .barra nav a:not(.nav-cuenta){ display:none }
  .barra nav .nav-cuenta{ margin-left:0; padding:6px 12px; font-size:11px }
}