/* =====================================================================
   CuboDigital — hoja de estilos de la web del taller
   Sin build step, sin CDN, sin fuentes externas: la app usa la misma
   paleta y tipografía para que web y soft se vean una sola cosa.
   Móvil primero: el corte grande es 760 px, el mismo que la app.
   ===================================================================== */

:root{
  --primary:#0f766e;
  --primary2:#14b8a6;
  --sidebar:#0b1e2d;
  --bg:#f3f6fb;
  --card:#fff;
  --text:#16233b;
  --muted:#64748b;
  --line:#e5ebf4;
  --danger:#dc2626;
  --ok:#16a34a;
  --wa:#25d366;
  --wa-dark:#1eb455;
  --shadow:0 10px 30px rgba(11,30,45,.08);
  --radius:14px;

  /* El alto del encabezado pegajoso. La usa scroll-padding-top para que las
     anclas no queden debajo de la barra.

     Este valor es el de RESPALDO, para cuando no hay JavaScript. Se eligio alto
     a proposito: el encabezado se midio en 62 px con el menu en una linea y
     83 px con el menu en dos, y en el celu el menu envuelve todavia mas. Con
     84 px, que era el valor anterior, solo alcanzaba con el menu en una linea:
     en cualquier ventana mas angosta el salto quedaba corto y el titulo de la
     seccion quedaba debajo de la barra.

     Con 100 px hay margen para dos y tres lineas de menu. Pasa aire de mas en
     vez de tapar el titulo, que es el error que molesta. */
  --alto-topbar:100px;
}
/* El encabezado es position:sticky y se queda arriba. Cuando se entra a una
   pagina con un ancla -#armado, #contacto, #seguimiento- el navegador para la
   seccion en el borde de la ventana, que es justo donde esta el encabezado, y
   el titulo queda tapado. Este scroll-padding-top baja ese borde. Va en el
   html y no en cada seccion: asi corrige todas las anclas de una vez y no hay
   que acordarse de cada id. */
/* Los 18 px de aire: la seccion queda pegada al borde de la barra si el
   salto es exacto, y pegado se lee como "el titulo esta metido debajo del
   encabezado". Con una linea de texto de por medio el salto dice "aca
   empieza otra seccion". */
html{scroll-padding-top:calc(var(--alto-topbar) + 18px)}


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

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.2;margin:0 0 10px}
h1{font-size:28px;letter-spacing:-.01em}
h2{font-size:22px}
h3{font-size:16px}
p{margin:0 0 12px}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}

.muted{color:var(--muted)}

/* El ancho de la página.

   Estuvo en 1080 px, que en una pantalla de 1920 dejaba 420 px de margen
   por lado: casi la mitad de la pantalla vacía, y el catálogo —lo único que
   el cliente viene a ver— con las tarjetas angostas al pedo.

   1400 px es el límite. Más que eso, las líneas de texto se vuelven incómodas
   de leer y el catálogo pasa a 6 columnas de tarjetas que ya no se distinguen
   entre sí. Para pantallas enormes está el growth de columnas de más abajo:
   no es achicar el margen, es agregar columnas. */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 16px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Teclado: saltar al contenido */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--primary);color:#fff;padding:10px 16px;border-radius:0 0 10px 0;
}
.skip:focus{left:0}

/* Foco visible en todo lo interactivo */
:focus-visible{outline:3px solid var(--primary2);outline-offset:2px;border-radius:6px}

/* ---------------- Botones ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:inherit;font-size:14px;font-weight:700;
  padding:11px 18px;border-radius:10px;border:1px solid transparent;
  cursor:pointer;text-align:center;transition:filter .15s,background .15s;
}
.btn:hover{text-decoration:none;filter:brightness(1.06)}
.btn-sm{padding:8px 14px;font-size:13px}
.btn-lg{padding:14px 24px;font-size:16px}
.btn-block{width:100%}
.btn-block-max{display:flex;width:100%;max-width:320px;margin-top:20px}

.btn-wa{background:var(--wa);color:#08331a}
.btn-wa:hover{background:var(--wa-dark)}

.btn-ghost{background:var(--card);color:var(--primary);border-color:var(--line)}
.btn-ghost:hover{background:#eaf5f3}

/* ---------------- Encabezado ---------------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(135deg,var(--sidebar) 0%,#0c3240 55%,var(--primary) 175%);
  color:#c7d5e2;
  box-shadow:0 8px 26px rgba(11,30,45,.25);
}
.topbar-top{display:flex;flex-direction:column;gap:10px;padding-top:12px;padding-bottom:12px}

.brand{display:inline-flex;align-items:center;gap:10px;color:#fff}
.brand:hover{text-decoration:none}
.brand-mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;
  background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;font-weight:900;font-size:17px;
}
.brand-name{font-weight:800;color:#fff;letter-spacing:.02em;font-size:17px}

/* Navegación: fila con scroll en móvil, columna en pantallas grandes */
.menu{
  display:flex;gap:8px;align-items:center;overflow-x:auto;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  padding-bottom:2px;
  /* Sin esto el menu no cede espacio: los hijos con white-space:nowrap lo
     empujan mas alla del .wrap y la pagina gana scroll horizontal. Con
     min-width:0 el menu se puede encoger hasta su contenido y, si no entra,
     scrollea como debe. */
  min-width:0;
}
.menu::-webkit-scrollbar{display:none}
.menu a{
  color:#e2edf7;font-weight:600;font-size:14px;
  padding:7px 12px;border-radius:9px;white-space:nowrap;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);
}
.menu a:hover{background:rgba(255,255,255,.16);text-decoration:none}
.menu .btn-wa{background:var(--wa);color:#08331a;border-color:transparent;margin-left:auto}

/* ---------------- Portada ---------------- */
.hero{
  background:
    radial-gradient(1100px 420px at 88% -8%,rgba(20,184,166,.16),transparent 60%),
    linear-gradient(180deg,#eef4fa 0%,var(--bg) 100%);
  border-bottom:1px solid var(--line);
  padding:30px 0 34px;
}
/* La portada no se estira a todo el ancho: se le da un ancho cómodo de
   lectura y se la centra. Si el texto ocupara toda la página de 1400 px,
   quedaría una línea larguísima que no se lee. */
.hero-grid{display:flex;flex-direction:column;gap:22px;max-width:760px;margin:0 auto}

.eyebrow{
  display:inline-block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--primary);margin:0 0 10px;
}
.hero .lead{font-size:16.5px;color:#2b3d57;max-width:62ch}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 12px}
.hero-note{margin:0;font-size:13px;color:var(--muted)}

/* ---------------- WhatsApp flotante ----------------
   El boton redondo que sigue al cliente por toda la pagina. Es la unica
   llamada a la accion permanente: si el scrolleo lo tapa o si aparece algo
   encima, el cliente se queda sin salida, que es el peor resultado posible
   en una pagina cuya mitad de las ventas entran por WhatsApp.

   Por eso va FIJO abajo a la derecha, con z-index por encima del carrito y
   del checkout (que van en 100 y 120), y con un margen que lo aparta del
   borde para que el dedo lo alcance sin pegarse a la pantalla. */
.wa-flotante{
  position:fixed;
  right:20px;
  bottom:20px;
  z-index:140;              /* por encima del checkout (120) */
  width:60px;height:60px;
  border-radius:50%;
  background:var(--wa);
  color:#08331a;
  display:flex;align-items:center;justify-content:center;
  /* Sin reborde. El verde de WhatsApp se distingue solo del fondo oscuro de
     la pagina: el anillo turquesa que se le habia puesto lo dejaba mas como
     un circulo de color que como un boton de chat. */
  border:0;
  /* La sombra si se queda, pero suave: es la que despega el boton del
     fondo sin un borde alrededor. */
  box-shadow:0 8px 22px rgba(11,30,45,.45);
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
/* El ícono va en verde oscuro DENTRO del verde del botón, y no en el
   turquesa de la marca. El anillo ya lleva el turquesa: si el ícono también
   fuera turquesa, el botón sería verde con un ícono del mismo color que el
   borde y quedaría lavado. Oscuro sobre el verde es lo que hace el ícono
   oficial de WhatsApp, y además es el que mejor se lee. */
.wa-flotante svg{width:32px;height:32px;display:block;fill:#08331a}
.wa-flotante:hover{transform:scale(1.06);box-shadow:0 14px 32px rgba(11,30,45,.38)}
.wa-flotante:active{transform:scale(.96)}
.wa-flotante:focus-visible{outline:3px solid var(--primary2);outline-offset:3px}

/* En el celu tiene que ser facil de tocar: 60px es el minimo comodo con
   el dedo. Y sube un poco para no quedar pegado al indicador de gestos. */
@media (max-width:760px){
  .wa-flotante{right:16px;bottom:16px;width:58px;height:58px}
  .wa-flotante svg{width:30px;height:30px}
}


/* Cuando el panel del carrito o el checkout estan abiertos, el boton flotante
   se aparta: si no, queda flotando encima del panel y tapa los renglones y
   el boton de finalizar. El JS le pone la clase al <body>, y aca se la
   toma el boton: tiene que ser el boton el que cambia, no el body entero. */
body.wa-flotante-escondido .wa-flotante{
  opacity:0;
  transform:scale(.7);
  pointer-events:none;
}

/* ---------------- Tarjetas ---------------- */
.card{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);
}
.card-title{font-size:15px;letter-spacing:.03em}
.ico{font-size:26px;line-height:1;display:block;margin-bottom:8px}
.card p{margin:0;color:#3c4f68;font-size:14.5px}

/* ---------------- Bandas ---------------- */
.band{padding:38px 0}
.band-alt{background:var(--card);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

.sec-head{max-width:60ch;margin-bottom:20px}
.sec-head p{color:var(--muted);margin:0}

.grid-3{display:grid;gap:14px}
.grid-2{display:grid;gap:14px}
.split{display:flex;flex-direction:column;gap:22px}
.quote-box{display:flex;flex-direction:column;gap:6px}

/* ---------------- Listas ---------------- */
.steps{counter-reset:step;margin:16px 0 20px;display:grid;gap:10px}
.steps li{
  counter-increment:step;position:relative;
  padding:10px 12px 10px 44px;background:var(--bg);
  border:1px solid var(--line);border-radius:10px;font-size:14.5px;
}
.steps li::before{
  content:counter(step);position:absolute;left:12px;top:10px;
  width:22px;height:22px;border-radius:50%;
  background:var(--primary);color:#fff;
  font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

.checks li{
  position:relative;padding:7px 0 7px 26px;
  font-size:14.5px;color:#3c4f68;
}
.checks li::before{
  content:"";position:absolute;left:0;top:12px;
  width:14px;height:8px;border-left:2.5px solid var(--primary);
  border-bottom:2.5px solid var(--primary);
  transform:rotate(-45deg);
}

.rows{display:flex;flex-direction:column;gap:2px;margin:0 0 10px}
.rows span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* Los enlaces sueltos también son área táctil: se les da alto suficiente. */
.rows a{font-weight:600;word-break:break-word;display:inline-block;padding:5px 0;min-height:24px}
.block{font-size:15.5px;line-height:1.6;margin-bottom:14px}

/* ---------------- Tabla de horarios ---------------- */
/* Los botones de ubicacion, abajo de los datos de contacto. */
/* El boton de WhatsApp del aviso "no encontramos nada".

   Va en el aviso y no en otro lado del sitio porque este es el momento de
   mas intencion de compra: el cliente ya escribio lo que quiere y no lo
   encontro. Mandarlo a scrollear hasta arriba a apretar el boton de
   WhatsApp es la forma facil de perder esa venta.

   El color es el de WhatsApp a proposito: es la accion que mas se usa en
   todo el sitio y tiene que verse como tal. */
.placeholder-wa{
  /* Bloque, no `inline-flex`: el aviso es un `<p>`, y un enlace en línea
     queda pegado al final de la frase ("...¿Lo tenemos?Preguntar por
     WhatsApp"), sin separación y a media altura de la línea. Como bloque
     cae en su propia línea y se lee como la acción que es. */
  display:block;
  width:-moz-fit-content;width:fit-content;
  margin-top:14px;
  padding:12px 20px;
  text-align:center;
  font-size:15px;font-weight:700;
  background:var(--wa);color:#08331a;
  text-decoration:none;
  border-radius:10px;
}
.placeholder-wa:hover{background:var(--wa-dark)}
/* El foco tiene que verse: se llega al aviso con el teclado cuando la
   búsqueda no da resultados, y sin esto no se sabe dónde estás. */
.placeholder-wa:focus-visible{outline:3px solid var(--wa-dark);outline-offset:2px}

.contacto-acciones{
  display:flex;gap:10px;flex-wrap:wrap;
  margin-top:16px;padding-top:16px;
  border-top:1px solid var(--line);
}

/* El mapa, a todo lo ancho de la seccion.

   El alto es fijo a proposito: un mapa con `height:100%` dentro de una caja
   sin alto no se ve, y con `auto` el iframe queda en 150 px, que es una
   franja que no sirve para ubicar nada. */
.mapa{
  margin-top:24px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;      /* el mapa tiene las esquinas cuadradas */
  background:#eef2f8;  /* lo que se ve mientras carga, en vez de blanco */
  box-shadow:var(--shadow);
}
.mapa iframe{
  display:block;
  width:100%;
  height:340px;
  border:0;
}
/* En el celu, más bajo: un mapa de 340 px se come la pantalla entera y
   tapa lo que está abajo. */
@media (max-width:760px){
  .mapa iframe{height:240px}
}

.hours{width:100%;border-collapse:collapse;margin:0 0 14px;font-size:14.5px}
.hours th,.hours td{padding:9px 0;border-bottom:1px solid var(--line);text-align:left}
.hours thead th{
  font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.hours tbody th{font-weight:600}
.hours td:last-child{text-align:right;font-variant-numeric:tabular-nums}
.hours tbody tr:last-child th,.hours tbody tr:last-child td{border-bottom:0}

/* ---------------- Catálogo ---------------- */
.placeholder{
  background:var(--card);border:1px dashed var(--line);border-radius:var(--radius);
  padding:22px;color:var(--muted);font-size:14.5px;margin:0;max-width:60ch;
}

/* El aviso de arriba se oculta solo cuando hay productos para mostrar. */
#catalogo-vacio[hidden]{display:none}

.cat-grid{
  display:grid;gap:14px;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.cat-grid:empty{display:none}

.cat-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
}

/* La foto es opcional: el JSON puede venir sin URLs de fotos. */
.cat-foto{
  display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  background:#eef2f8;border-bottom:1px solid var(--line);
}
.cat-card.no-foto .cat-foto{display:none}

/* Panel de categorías del catálogo.

   OJO: esta caja contiene SOLO el panel, no la grilla. La grilla va fuera y
   siempre se ve. Cuando la caja lleva `hidden` es porque no hay categorías
   para filtrar, y en ese caso lo que desaparece es el panel.

   El ancho del panel (212 px) es el que le deja lugar a la grilla en
   escritorio. Como la grilla ya no es hija de esta caja, el espacio se le
   reserva con un margen en el hermano siguiente. */
.cat-layout{
  margin:0 0 20px;
}
.cat-layout[hidden]{display:none}

/* El panel flotante a la izquierda y todo lo que viene despues lo rodea.
   Es mas robusto que un margen: no depende de cuantos elementos haya
   entre el panel y la grilla, ni de si alguno esta oculto. */
.cat-layout:not([hidden]){
  float:left;width:212px;margin:0 24px 0 0;
}
.cat-layout::after{content:"";display:block;clear:both}   /* despeja el float */



.cat-panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  position:sticky;top:96px;   /* acompaña el scrolleo, como la tarjeta que había */
}

/* En el celular el botón se ve; en escritorio se esconde y el panel queda
   siempre abierto, que es lo que se quiere en una pantalla ancha. */
.cat-panel-toggle{display:none}

/* ---------------- El buscador ----------------
   Va arriba de la grilla y fuera de .cat-layout, por el mismo motivo que la
   grilla: si viviera adentro y la caja se ocultara por falta de categorías,
   el buscador se iría con ella.

   El input es de 16px por el mismo motivo que los formularios: en iOS,
   menos de eso hace zoom automático al tocarlo. */
.cat-busca{margin:0 0 20px}
.cat-busca[hidden]{display:none}
.cat-busca-caja{position:relative;display:flex;align-items:center}

.cat-busca-ico{
  position:absolute;left:14px;
  width:18px;height:18px;
  color:var(--muted);pointer-events:none;
}

#catalogo-q{
  width:100%;
  font-family:inherit;font-size:16px;color:var(--text);
  padding:13px 44px 13px 42px;
  border:1px solid var(--line);border-radius:12px;
  background:var(--card);
}
#catalogo-q::placeholder{color:#9aa8bb}
#catalogo-q:focus{background:var(--card);border-color:var(--primary2)}
/* El type="search" pinta una X propia en algunos navegadores: se saca,
   porque ya hay una propia que sí funciona en todos. */
#catalogo-q::-webkit-search-cancel-button,
#catalogo-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

.cat-busca-x{
  position:absolute;right:10px;
  width:28px;height:28px;
  border:0;border-radius:50%;
  background:#eef2f8;color:var(--muted);
  font-size:20px;line-height:1;
  cursor:pointer;
}
.cat-busca-x:hover{background:var(--line);color:var(--text)}
.cat-busca-x[hidden]{display:none}
.cat-busca-x:focus-visible{outline:2px solid var(--primary2);outline-offset:2px}

/* --------------------------------------------------------------------
   Tema oscuro SIEMPRE. Antes este bloque era
   @media (prefers-color-scheme:dark), y el sitio se veía claro en los
   equipos que venían con el sistema en claro. Se decidio que sea oscuro
   en todos lados, asi que las reglas de abajo ya no tienen condición: son
   la base. Lo que estaba en :root arriba es el tema claro, y queda
   pisado por estas. Para volver al tema automatico, volver a envolver
   estas reglas con @media (prefers-color-scheme:dark).
   -------------------------------------------------------------------- */
#catalogo-q{background:#142437;border-color:#22374e}
.cat-busca-x{background:#22374e;color:#c2d2e2}
.cat-busca-x:hover{background:#2f4a67;color:#e6eef7}

.cat-filtros{display:flex;flex-direction:column;gap:2px}

.cat-filtro{
  font-family:inherit;font-size:14px;font-weight:600;
  color:var(--text);text-align:left;
  background:none;
  border:0;border-radius:9px;
  padding:9px 11px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  transition:background .15s,color .15s;
}
.cat-filtro:hover{background:#f1f6fb}
.cat-filtro-on{background:var(--primary);color:#fff}
.cat-filtro-on:hover{background:var(--primary2)}
.cat-filtro:focus-visible{outline:2px solid var(--primary2);outline-offset:2px}

/* La cantidad de cada categoría. Se ve porque el cliente elige con eso: si
   ve "Cables (2)" sabe que va a perder el tiempo antes de entrar. */
.cat-filtro-n{
  font-size:12px;font-weight:700;
  color:var(--muted);
  background:#eef2f8;
  border-radius:999px;padding:1px 7px;
  flex:0 0 auto;
}
.cat-filtro-on .cat-filtro-n{background:rgba(255,255,255,.22);color:#fff}

/* La categoría que está activa, arriba de la grilla. Sin esto el cliente
   scrollea hasta el final y no entiende por qué ve tan pocos productos. */
.cat-activa{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:0 0 16px;padding:10px 14px;
  background:#eaf5f3;border:1px solid #cdeae6;border-radius:10px;
  font-size:14px;font-weight:600;color:#0f5f59;
}
.cat-activa[hidden]{display:none}
.cat-activa b{font-weight:800}
.cat-activa-volver{
  font:inherit;font-weight:700;
  background:none;border:1px solid #a9d9d3;border-radius:8px;
  color:#0f5f59;padding:4px 11px;cursor:pointer;
}
.cat-activa-volver:hover{background:#d8f0ed}
.cat-activa-n{color:#4c7a76;font-weight:600}

@media (max-width:900px){
  /* Una sola columna: la grilla manda, y las categorías se pliegan arriba.
     Con 212px al costado, en un celular la grilla quedaría con 3 tarjetas
     chiquitas y es peor que no tener panel. */
  /* Sin float en el celular: el panel arriba ocupa todo el ancho y la
     grilla arranca abajo, como antes. */
  .cat-layout:not([hidden]){float:none;width:auto;margin:0 0 16px}
  .cat-panel{position:static;padding:0}

  .cat-panel-toggle{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    width:100%;font-family:inherit;font-size:15px;font-weight:700;
    color:var(--text);background:var(--card);
    border:1px solid var(--line);border-radius:10px;
    padding:13px 15px;cursor:pointer;
  }
  .cat-panel-toggle-flecha{transition:transform .18s;color:var(--muted)}
  .cat-panel-toggle[aria-expanded="true"] .cat-panel-toggle-flecha{transform:rotate(180deg)}

  .cat-filtros{
    display:none;
    margin-top:8px;
    padding:6px;
    background:var(--card);
    border:1px solid var(--line);border-radius:10px;
  }
  .cat-filtros.cat-filtros-abierto{display:flex}

  /* Las categorías con muchas opciones se desplazan, para que el desplegable
     no crezca sin límite en un celular con 20 categorías. */
  .cat-filtros-abierto{max-height:min(340px,50vh);overflow-y:auto}
}

.cat-body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:6px;flex:1}
.cat-cat{
  align-self:flex-start;font-size:11px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--primary);
  background:#eaf5f3;border-radius:999px;padding:3px 9px;
}
.cat-card.no-cat .cat-cat{display:none}

/* Disponibilidad: el número de stock que manda la app. */
.cat-stock{
  align-self:flex-start;font-size:11.5px;font-weight:700;
  color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:999px;padding:3px 9px;
}
.cat-stock-low{color:#b45309;background:#fffbeb;border-color:#fde68a}
.cat-stock-out{color:#991b1b;background:#fef2f2;border-color:#fecaca}

/* Disponibilidad de los productos del proveedor (fase 119).

   Va aparte de `.cat-stock` a propósito. El número es de stock propio y se
   cuenta en el depósito; estas son TRES PALABRAS y el proveedor no tiene depósito
   propio que contar. La forma es la misma para que la grilla no parezca armada
   con dos piezas: misma pastilla, mismo redondeo, mismo tamaño. */
.cat-disp{
  align-self:flex-start;font-size:11.5px;font-weight:700;
  color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;
  border-radius:999px;padding:3px 9px;
}
/* A pedido es ámbar y no rojo: el producto existe y llega, sólo hay que esperar.
   Ponerlo en rojo lo haría parecer agotado, y no lo está. */
.cat-disp-pedido{color:#b45309;background:#fffbeb;border-color:#fde68a}
.cat-disp-plazo{color:#92400e;border-color:#fcd34d;font-weight:600}

.cat-nombre{font-size:14px;font-weight:700;line-height:1.35;margin:0}
.cat-detalle{font-size:13px;color:var(--muted);margin:0}

/* Pie de la tarjeta: precio a la izquierda, botón a la derecha. El botón
   siempre abajo, así los nombres de distinta altura no lo mueven. */
.cat-body .btn{margin-top:auto;align-self:flex-start}
.cat-pie{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:4px;
}
/* El botón no se puede encoger: con 6 o 7 columnas la tarjeta queda angosta y
   "Agregar" se cortaba al medio. Queda entero antes que el precio: el precio
   se lee igual de un vistazo aunque baje de tamaño.

   OJO: el precio NO lleva `overflow-wrap:anywhere`. Con eso, "18.000" se
   partía en tres líneas ("18." / "00" / "0") y quedaba ilegible. El precio
   se parte solo, en el espacio que le sobra, y con `white-space:nowrap` no
   se parte nunca. Si una vez no entra, baja el tamaño del texto, que es lo
   de abajo. */
.cat-pie .btn{margin-top:0;flex:0 0 auto;white-space:nowrap}
.cat-precio{
  font-size:17px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

/* Con muchas columnas el precio y el nombre bajan un punto, para que el
   precio entre entero y el botón "Agregar" no se corte. Los dos juntos no
   entran en una tarjeta de 7 columnas a 17px: medido. */
@media (min-width:1500px){
  .cat-precio{font-size:14.5px}
  .cat-nombre{font-size:13.5px}
  .cat-pie{gap:6px}
  .cat-pie .btn{font-size:13px;padding:8px 12px}
}

/* ---------------- El modal del producto ----------------
   La foto grande a la izquierda y los datos a la derecha. Es lo que
   resuelve el problema de la grilla: la miniatura no alcanza para ver que
   es un cargador, y la descripcion no entra en una tarjeta de 6 columnas. */
.prod-fondo{
  position:fixed;inset:0;z-index:130;
  background:rgba(6,18,30,.72);
}
.prod-fondo[hidden]{display:none}

.prod-modal{
  position:fixed;z-index:131;
  top:50%;left:50%;transform:translate(-50%,-50%);
  width:min(940px,calc(100vw - 32px));
  max-height:min(88vh,760px);
  overflow:auto;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
}
.prod-modal[hidden]{display:none}

/* El x va por encima de la foto, que es clara. */
.prod-x{
  position:absolute;top:12px;right:12px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--line);
  background:rgba(255,255,255,.92);color:#0b1e2d;
  font-size:24px;line-height:1;
  cursor:pointer;
  box-shadow:0 3px 10px rgba(0,0,0,.2);
}
.prod-x:hover{background:#fff}
.prod-x:focus-visible{outline:3px solid var(--primary2);outline-offset:2px}

.prod-foto{
  background:#f4f7fb;
  border-right:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  min-height:280px;
  overflow:hidden;
}
.prod-foto-img{
  display:block;width:100%;height:100%;
  max-height:min(88vh,760px);
  object-fit:contain;      /* contain y no cover: el producto entero */
}
.prod-foto.sin-foto{
  min-height:200px;
  background:repeating-linear-gradient(45deg,#eef2f8,#eef2f8 12px,#e4eaf2 12px,#e4eaf2 24px);
}

.prod-info{padding:28px 28px 24px;display:flex;flex-direction:column;gap:11px}
.prod-titulo{
  font-size:22px;line-height:1.3;font-weight:800;
  margin:0;padding-right:38px;
  color:var(--text);
}
.prod-disp{margin:0;font-size:14.5px;font-weight:600;color:var(--primary)}
.prod-detalle{
  margin:0;font-size:15px;line-height:1.6;color:#3c4f68;
  white-space:pre-line;
}
.prod-pie{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
  margin-top:auto;padding-top:14px;
  border-top:1px solid var(--line);
}
.prod-precio{
  font-size:26px;font-weight:800;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.prod-precio.consultando{font-size:19px;color:var(--muted)}
.prod-wa{
  display:inline-block;
  font-size:14px;font-weight:600;color:var(--primary);
  text-decoration:underline;text-underline-offset:3px;
}

/* El fondo no scrollea mientras el modal esta abierto: en el celular, si
   scrollea el fondo por detras, el cliente pierde de vista donde esta. */
body.prod-abierto{overflow:hidden}

/* La tarjeta se hace tocable en toda su superficie. El boton es
   transparente y va por debajo del contenido: asi el "Agregar" sigue
   siendo un boton de verdad, con su propio clic. */
.cat-abrir{
  position:absolute;inset:0;z-index:1;
  width:100%;height:100%;
  background:none;border:0;padding:0;margin:0;
  cursor:pointer;
}
.cat-card{position:relative}
.cat-card > *:not(.cat-abrir){position:relative;z-index:2;pointer-events:none}
.cat-card .cat-pie{pointer-events:auto}
.cat-card .cat-pie button{pointer-events:auto}
.cat-card .btn-wa{pointer-events:auto}
.cat-abrir:focus-visible{outline:3px solid var(--primary2);outline-offset:-3px}

@media (max-width:760px){
  /* En el celular el modal va de arriba abajo: la foto arriba, los datos
     abajo. Uno al lado del otro en 390 px deja cada columna en 180 px,
     que es menos que la miniatura que ya teniamos. */
  .prod-modal{
    grid-template-columns:minmax(0,1fr);
    width:100%;max-height:100vh;height:100vh;
    top:0;left:0;transform:none;
    border-radius:0;border:0;
  }
  .prod-foto{
    border-right:0;border-bottom:1px solid var(--line);
    min-height:0;max-height:44vh;
  }
  .prod-foto-img{max-height:44vh}
  .prod-info{padding:18px 16px calc(18px + env(safe-area-inset-bottom))}
  .prod-titulo{font-size:19px;padding-right:34px}
  .prod-precio{font-size:22px}
  .prod-pie{gap:10px}
  .prod-pie .btn{width:100%}
}

/* --------------------------------------------------------------------
   Tema oscuro SIEMPRE. Antes este bloque era
   @media (prefers-color-scheme:dark), y el sitio se veía claro en los
   equipos que venían con el sistema en claro. Se decidio que sea oscuro
   en todos lados, asi que las reglas de abajo ya no tienen condición: son
   la base. Lo que estaba en :root arriba es el tema claro, y queda
   pisado por estas. Para volver al tema automatico, volver a envolver
   estas reglas con @media (prefers-color-scheme:dark).
   -------------------------------------------------------------------- */
.prod-foto{background:#0f1e30;border-color:#22374e}
.prod-foto.sin-foto{background:repeating-linear-gradient(45deg,#0f1e30,#0f1e30 12px,#152a41 12px,#152a41 24px)}
.prod-x{background:rgba(20,36,55,.94);color:#e6eef7;border-color:#22374e}
.prod-detalle{color:#c2d2e2}
.prod-disp{color:#5eead4}
.prod-wa{color:#5eead4}

/* Aviso de productos agotados: no los muestra, pero avisa que están. */
.cat-agotados{
  margin:16px 0 0;padding:11px 14px;border-radius:10px;
  background:#fffbeb;border:1px dashed #fcd34d;color:#92400e;
  font-size:14px;
}
.cat-agotados[hidden]{display:none}
.cat-agotados::before{content:"📦 "}

/* Aviso de desarrollo (mock). En producción no existe. */
.cat-mock-aviso{
  margin:14px 0 0;padding:9px 12px;border-radius:10px;
  background:#fef3c7;color:#78350f;border:1px dashed #f59e0b;
  font-size:12.5px;font-weight:700;
}
.cat-mock-aviso::before{content:"⚠ "}

/* ---------------- Consulta / presupuesto ----------------
   Es el formulario que manda al buzón del taller (fase 106). Comparte el
   aire visual del resto del sitio, para que se lea como una consulta más
   y no como una pantalla aparte. */
.consulta{display:flex;flex-direction:column;gap:22px}
.consulta .lead{max-width:52ch}
.consulta-alt{margin:16px 0 0;font-size:14px;color:var(--muted)}
.consulta-alt a{color:var(--primary);font-weight:600}

.consulta-form{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.consulta-par{display:flex;gap:12px;flex-wrap:wrap}
.consulta-par .consulta-campo{flex:1 1 200px;min-width:0}
.consulta-campo{display:block;margin:0 0 14px}
.consulta-campo span{
  display:block;margin-bottom:5px;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.consulta-campo span i{font-style:normal;font-weight:600;text-transform:none;letter-spacing:0}
/* 16px, no menos. En iOS, un input con font-size menor hace que el Safari
  haga zoom solo al tocarlo, y el cliente se queda mirando la pagina
ampliada, con el formulario a medio pantalla y sin saber como volver.
Es el problema mas comun de un formulario en el celular. */
.consulta-campo input,
.consulta-campo select,
.consulta-campo textarea{
  width:100%;
  font-family:inherit;font-size:16px;color:var(--text);
  padding:11px 13px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
}
.consulta-campo textarea{resize:vertical;min-height:92px;line-height:1.45}
.consulta-campo input::placeholder,
.consulta-campo textarea::placeholder{color:#9aa8bb}
.consulta-campo input:focus,
.consulta-campo select:focus,
.consulta-campo textarea:focus{background:var(--card);border-color:var(--primary2)}
.consulta-campo input:user-invalid{border-color:#dc2626}

/* La trampa para bots: está en el HTML pero no se ve ni se llega con el
   teclado. Ocultarla con display:none no alcanzaba: algunos robots leen
   igual los campos ocultos. Con esto sigue sin estar a la vista. */
.consulta-trampa{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

.consulta-error{margin:4px 0 0;font-size:13.5px;font-weight:600;color:#b91c1c}
.consulta-error[hidden]{display:none}
.consulta-ok{
  margin:4px 0 0;padding:11px 13px;font-size:14px;
  background:#e8f6f0;border:1px solid #86c9ad;border-radius:10px;color:#14532d;
}
.consulta-ok[hidden]{display:none}
.consulta-mandar{max-width:none;margin-top:16px;justify-content:center}
.consulta-mandar[disabled]{opacity:.6;cursor:progress}
.consulta-mini{margin:10px 0 0;font-size:12.5px;color:var(--muted)}

/* =====================================================================
   Mi cuenta: entrar y registrarse.

   Los dos paneles se muestran y se esconden con hidden, no con clases: el
   atributo hidden es el que entiende el lector de pantalla, y con display:none
   en el CSS el texto sigue estando en el arbol del documento. Un lector de
   pantalla announcing "crear una cuenta" mientras el cliente esta en la de
   entrar es justo la confusion que esto evita.

   Se reusan .consulta-campo, .consulta-error y .consulta-ok a proposito: los
   formularios ya existen y tienen el mismo ancho, el mismo borde y el mismo
   color de error. Escribirlos otra vez seria dos estilos que se desincronizan.
   ===================================================================== */
.cuenta-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;
  align-items:start;
}
.cuenta-panel[hidden]{display:none}
.cuenta-panel .consulta-form{margin-top:18px}
.cuenta-panel h3{margin:0 0 6px}

/* Los dos botones van juntos: el que manda y el que cambia de pantalla. El
   segundo sin relleno para que no compitan con el primero. */
.cuenta-acciones{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:18px}

/* El aviso del largo de la clave va al lado del campo, no en el error de
   arriba. Es el error que el cliente cometio escribiendo, y tiene que estar
   donde esta escribiendo. */
.cuenta-aviso{margin:0 0 14px;font-size:13.5px;color:#8a5a00}
.cuenta-aviso[hidden]{display:none}

/* El aviso de que el navegador no guarda cookies: es el unico caso en que no
   hay nada que el cliente pueda hacer. Va al final de la seccion y no es un
   error rojo: no se hizo nada mal. */
.cuenta-aviso-cufe{
  margin:22px 0 0;padding:12px 14px;font-size:14px;border-radius:10px;
  background:#fff8e6;border:1px solid #e8c884;color:#6b4e00;
}
.cuenta-aviso-cufe[hidden]{display:none}
/* =====================================================================
   El cotizador de reparación: las fichas de respuesta.

   `fieldset` y `legend` de verdad, y las "fichas" son `<input>` escondidos
   de verdad adentro de un `<label>`. Eso no es decoración: el teclado las
   recorre con las flechas y el lector de pantalla las anuncia, sin una
   línea de código nuestro. Un botón con `role="checkbox"` habría que
  eterminarla a mano.

   La idea visual es la de un chip: se marca apretando, y el marcado tiene
   que ser evidente de un vistazo. Por eso el color de fondo y el borde
   cambian juntos, y no solo el color: hay que poder distinguished sin
   distinguir los colores.
   ===================================================================== */
.consulta-grupo{
  margin:0 0 18px;padding:0;border:0;
}
.consulta-grupo legend{
  padding:0;margin:0 0 9px;
  font-size:14px;font-weight:700;color:var(--text);
}
.consulta-grupo legend i{
  font-style:normal;font-weight:600;color:var(--muted);
}

.fichas{
  display:flex;flex-wrap:wrap;gap:8px;
}

/* El input queda accesible pero invisible: no se usa `display:none`, que lo
   saca del recorrido del teclado. */
.ficha{position:relative;display:inline-flex}
.ficha input{
  position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;
}
.ficha span{
  display:inline-flex;align-items:center;
  padding:9px 14px;
  border:1px solid var(--line);
  border-radius:999px;                 /* pastilla, como una etiqueta */
  background:var(--card);
  color:var(--muted);
  font-size:13.5px;font-weight:600;line-height:1.25;
  text-align:center;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}
/* En el celu la pastilla tiene que ser cómoda de tocar: 44 px de alto es el
   mínimo que recomienda la Apple's Human Interface Guidelines, y con
   padding vertical de 9px más el texto ya se llega justo. */
.ficha input:hover + span{border-color:var(--primary2);color:var(--text)}
.ficha input:focus-visible + span{outline:3px solid var(--primary2);outline-offset:2px}
.ficha input:checked + span{
  background:var(--primary);border-color:var(--primary);color:#fff;
}
/* El tilde adentro de la pastilla marca. Es redundante con el color, y por
   eso está: el que no distingue el azul del blanco igual lo ve. */
.ficha span::before{
  content:"";display:inline-block;width:0;overflow:hidden;
}
.ficha input:checked + span::before{
  width:1.05em;
  content:"✓";
  font-weight:800;
  margin-right:.4em;
}

/* La ayuda de error de un grupo de fichas. Sale abajo del grupo, no pegada
   al primer cuadrito. */
.consulta-ayuda{margin:9px 0 0;font-size:13px;font-weight:600;color:#b91c1c}
.consulta-ayuda[hidden]{display:none}

/* La aclaración de la copia de archivos. No es un error: es la advertencia
   de que hay reparaciones donde los archivos no se pueden garantizar, y
   tiene que estar a la vista antes de que el cliente conteste, no después. */
.consulta-nota{
  margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--muted);
  padding-left:11px;border-left:3px solid var(--primary2);
}

/* El resumen: lo que se va a mandar, escrito y a la vista. El cliente lo
   lee antes de apretar, así no le deletreamos el problema de otra manera
   ni le pedimos que confíe a ciegas. */
.consulta-resumen{
  margin:4px 0 18px;padding:14px 16px;
  border:1px dashed var(--line);
  border-radius:var(--radius);
  background:var(--bg);
}
.consulta-resumen[hidden]{display:none}
.consulta-resumen b{
  display:block;margin-bottom:6px;
  font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
}
.consulta-resumen-texto{
  margin:0;font-size:14px;line-height:1.55;color:var(--text);
  white-space:pre-wrap;               /* los saltos de línea del resumen son reales */
  word-break:break-word;
}

/* El botón de WhatsApp va pegado al de mandar la consulta, con un huequito
   entre los dos para que se lea "dos salidas distintas" y no "el mismo botón
   dos veces". */
.consulta-wa{
  max-width:none;margin-top:9px;justify-content:center;
}
.consulta-wa[hidden]{display:none}

/* ---------------- Páginas de texto (privacidad, etc.) ---------------- */
.legal{max-width:68ch}
.legal h2{
  font-size:15px;letter-spacing:.02em;text-transform:none;
  margin:26px 0 8px;padding-top:18px;border-top:1px solid var(--line);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal p{color:#3c4f68;font-size:15px}
.legal a{font-weight:600}
.legal ul.checks{margin:10px 0 14px}

/* --------------------------------------------------------------------
   Tema oscuro SIEMPRE. Antes este bloque era
   @media (prefers-color-scheme:dark), y el sitio se veía claro en los
   equipos que venían con el sistema en claro. Se decidio que sea oscuro
   en todos lados, asi que las reglas de abajo ya no tienen condición: son
   la base. Lo que estaba en :root arriba es el tema claro, y queda
   pisado por estas. Para volver al tema automatico, volver a envolver
   estas reglas con @media (prefers-color-scheme:dark).
   -------------------------------------------------------------------- */
.legal p{color:#c2d2e2}

/* ---------------- Checkout ---------------- */
.chk-form{padding:16px;overflow:auto;flex:1}
.chk-campo{display:block;margin:0 0 14px}
.chk-campo span{
  display:block;margin-bottom:5px;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.chk-campo input{
  /* 16px por lo mismo que los campos de arriba: en iOS, menos de eso hace
  zoom automatico al tocar el campo. */
  width:100%;font-family:inherit;font-size:16px;color:var(--text);
  padding:11px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);
}
.chk-campo input:focus{background:var(--card);border-color:var(--primary2)}

.chk-h{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:20px 0 8px;
}
.chk-opts{display:grid;gap:8px}
.chk-opt{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 13px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);cursor:pointer;
}
.chk-opt-on{border-color:var(--primary);background:#eaf5f3}
.chk-opt-off{opacity:.55;cursor:not-allowed}
.chk-opt input{margin-top:3px;flex:none}
.chk-opt b{display:block;font-size:14.5px;font-weight:700}
.chk-opt small{display:block;color:var(--muted);font-size:12.5px;margin-top:1px}

.chk-nota{color:var(--muted);font-size:12.5px;margin:16px 0}

/* Aviso de datos personales, al lado del botón de confirmar. */
.chk-datos{
  font-size:12.5px;color:var(--muted);margin:14px 0 0;
  padding:10px 12px;border-radius:9px;background:var(--bg);
  border:1px solid var(--line);
}
.chk-datos a{font-weight:700}

.chk-alt{
  display:block;width:100%;margin-top:12px;min-height:44px;
  background:none;border:1px solid var(--line);border-radius:10px;
  color:var(--primary);font-family:inherit;font-size:14px;font-weight:700;
  cursor:pointer;text-decoration:underline;
}
.chk-alt:hover{background:#eaf5f3}
/* En oscuro, el teal de marca no alcanza contraste sobre la tarjeta. */
/* --------------------------------------------------------------------
   Tema oscuro SIEMPRE. Antes este bloque era
   @media (prefers-color-scheme:dark), y el sitio se veía claro en los
   equipos que venían con el sistema en claro. Se decidio que sea oscuro
   en todos lados, asi que las reglas de abajo ya no tienen condición: son
   la base. Lo que estaba en :root arriba es el tema claro, y queda
   pisado por estas. Para volver al tema automatico, volver a envolver
   estas reglas con @media (prefers-color-scheme:dark).
   -------------------------------------------------------------------- */
.chk-alt{color:#2dd4bf}

/* Avisos del checkout: bien, mal, o ni esto ni lo otro todavía. */
.chk-estado{margin:16px;padding:16px;border-radius:12px;font-size:14px}
.chk-estado b{display:block;font-size:16px;font-weight:800;margin-bottom:4px}
.chk-estado span{display:block}
.chk-estado[hidden]{display:none}
.chk-estado-bien{background:#f0fdf4;border:1px solid #bbf7d0;color:#14532d}
.chk-estado-mal{background:#fef2f2;border:1px solid #fecaca;color:#7f1d1d}
.chk-estado-aviso{background:#fffbeb;border:1px solid #fde68a;color:#78350f}

/* Botón de pago, que aparece solo cuando el soft manda `pagar_url`. */
.chk-pagar{margin-top:14px}

/* ---------------- Carrito ---------------- */
.carrito-btn{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  font-family:inherit;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:10px;cursor:pointer;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#fff;
}
.carrito-btn:hover{background:rgba(255,255,255,.2)}
.carrito-ico{font-size:15px;line-height:1}
.carrito-badge{
  position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;
  padding:0 5px;border-radius:999px;background:var(--primary2);color:#04231f;
  font-size:11.5px;font-weight:900;line-height:19px;text-align:center;
}
.carrito-badge[hidden]{display:none}

/* ---------------- Mi cuenta, en la barra ----------------

   Va despues del carrito en el HTML, y no antes del boton de WhatsApp, por una
   razon que parece chica: .menu .btn-wa tiene margin-left:auto (arriba), o sea
   que el WhatsApp se empuja al borde derecho y todo lo que este antes queda en
   el medio. Puesto aca, el boton queda pegado al borde, que es donde lo va a
   buscar la gente.

   El mismo tono que el carrito: mismo fondo, mismo borde, mismo redondeo. Si
   estos botones se ven distintos al de al lado, parece que son de otro sitio.

   "Crear cuenta" va con el borde marcado y sin fondo relleno, para que se lean
   los dos como un par (entrar / crear) y no como dos botones sin relacion. */
.cuenta-btn{
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;
  font-size:13px;font-weight:700;padding:8px 11px;border-radius:10px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
  color:#fff;cursor:pointer;font-family:inherit;
}
.cuenta-btn:hover{background:rgba(255,255,255,.2);text-decoration:none}
.cuenta-ico{font-size:15px;line-height:1}

.cuenta-registro{
  background:transparent;border-color:rgba(255,255,255,.34);
}
.cuenta-registro:hover{background:rgba(255,255,255,.14)}

/* El correo, con sesion. Se muestra donde estaba "Iniciar sesion", y no como
   un boton: es informacion, no algo que se apriete. max-width porque un correo
   largo no puede empujar el menu y hacer que la barra se corte. */
.cuenta-ya{
  display:inline-flex;align-items:center;gap:0;max-width:190px;
  font-size:13px;font-weight:600;color:#d7e6f2;
  overflow:hidden;white-space:nowrap;
  min-width:0;   /* sin esto, el flex no deja que el hijo con el correo se encoja */
}
.cuenta-ya::before{content:"👤";font-size:15px;margin-right:6px;flex:0 0 auto}
/* El texto del correo es lo unico que puede crecer sin limite, asi que es el
   que se recorta con puntos suspensivos. Si se le pone overflow a todo el
   elemento, los puntos quedan pegados al borde del menu en vez de al del
   correo. */
.cuenta-ya-texto{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}
/* El hidden tiene que ganarle al display:inline-flex de arriba, o el icono
   de persona se dibuja siempre, aunque no haya sesion. */
.cuenta-ya[hidden]{display:none}

.cuenta-salir{
  padding:8px 11px;font-size:12.5px;
  background:transparent;border-color:rgba(255,255,255,.28);
}
.cuenta-salir:hover{background:rgba(255,255,255,.14)}
.cuenta-salir[hidden]{display:none}

/* ---------------------------------------------------------------------
   El menu no entra en una linea por debajo de unos 1300 px. Medido: el
   contenido con los dos botones de cuenta mide 1080 px y en una ventana de
   1134 hay 916. Faltan 164.

   Que se decide: hasta 1300 px los botones quedan SOLO con el icono, y el
   menu entero entra. Un boton de 40 px con un dibujo de persona y otro con una
   etiqueta se reconocen, y el title de cada uno lleva el texto para el mouse.

   Por que 1300 y no 900: con el texto visible el menu no entra desde 1300 pa
   abajo, y dejarlo scrolleable es lo que se complaintio: los ultimos botones
   quedan fuera de vista sin ningun aviso de que se pueda arrastrar. Es peor
   que un boton sin etiqueta.

   Lo que se achica antes de llegar a los iconos es el relleno: son botones de
   accion, no de navegacion, y no necesitan el aire de los links. Con eso se
   recuperan ~60 px entre los diez elementos. */
@media (max-width:1299px){
  .menu{gap:6px}
  .menu a{padding:7px 9px}
  .cuenta-btn{padding:7px 9px;font-size:12.5px;gap:5px}
  .cuenta-ico{font-size:14px}
  .cuenta-ya{max-width:120px;font-size:12.5px}
  .cuenta-salir{padding:7px 9px;font-size:12px}
}

@media (max-width:1299px){
  .cuenta-txt{display:none}
  .cuenta-btn{padding:8px 11px;min-width:40px;justify-content:center}
}

.carrito-fondo{
  position:fixed;inset:0;z-index:90;background:rgba(11,30,45,.5);
}
.carrito-fondo[hidden]{display:none}

.carrito-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:100;
  width:min(420px,100%);background:var(--card);
  border-left:1px solid var(--line);
  box-shadow:-24px 0 55px rgba(11,30,45,.25);
  display:flex;flex-direction:column;
}
.carrito-panel[hidden]{display:none}

/* El checkout reutiliza la caja del carrito (ancho, fondo, flex) pero necesita
   capas propias: el fondo del checkout tiene que quedar DEBAJO de su panel.
   Por eso van DESPUÉS de .carrito-panel — si el z-index se definiera antes,
   .carrito-panel{z-index:100} ganaría por orden y el panel quedaría debajo
   del fondo, que hacía que cualquier clic cerrara el formulario. Bug real. */
.chk-fondo{position:fixed;inset:0;z-index:115;background:rgba(11,30,45,.5)}
.chk-fondo[hidden]{display:none}
.chk-panel{z-index:120}

.carrito-cab{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:15px 16px;border-bottom:1px solid var(--line);
}
.carrito-h{font-size:17px;margin:0}
.carrito-x{
  width:36px;height:36px;border-radius:9px;cursor:pointer;
  background:var(--bg);border:1px solid var(--line);
  color:var(--text);font-size:20px;line-height:1;
}
.carrito-x:hover{background:#eaf5f3}

.carrito-lista{flex:1;overflow:auto;padding:6px 16px}

.carrito-item{
  display:grid;grid-template-columns:1fr auto;gap:8px 10px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.carrito-item-info{min-width:0}
.carrito-item-info b{display:block;font-size:14px;font-weight:600;line-height:1.35}
.carrito-item-info small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

.carrito-ctrl{display:flex;align-items:center;gap:2px;align-self:center}
.carrito-mas,.carrito-cant{
  min-width:32px;height:32px;padding:0 6px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--bg);
  color:var(--text);font-size:14px;font-weight:700;font-family:inherit;
}
.carrito-mas{cursor:pointer;border-radius:8px}
.carrito-mas:hover{background:#eaf5f3;color:var(--primary)}
.carrito-cant{border-radius:8px;background:transparent;border-color:transparent;font-variant-numeric:tabular-nums}
.carrito-quitar{
  grid-column:1/-1;justify-self:start;
  background:none;border:0;padding:4px 0;min-height:24px;
  /* --danger (#dc2626) no llega al 4.5 sobre tarjetas blancas: se usa un
     rojo más oscuro del mismo tono para que el texto se lea. */
  color:#b91c1c;font-size:12.5px;font-weight:700;
  font-family:inherit;cursor:pointer;text-decoration:underline;
}

.carrito-pie{border-top:1px solid var(--line);padding:14px 16px 18px;background:var(--bg)}
.carrito-vacio{color:var(--muted);font-size:14px;margin:0 0 12px}
.carrito-vacio[hidden],.carrito-vaciar[hidden]{display:none}
.carrito-total-fila{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 4px;font-size:15px;
}
.carrito-total-fila b{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.carrito-nota{color:var(--muted);font-size:12px;margin:0 0 12px}
.carrito-vaciar{
  display:block;margin:10px auto 0;background:none;border:0;
  color:var(--muted);font-size:12.5px;font-family:inherit;cursor:pointer;
  text-decoration:underline;min-height:24px;padding:2px 6px;
}
.carrito-enviar[disabled]{opacity:.5;cursor:not-allowed}

.carrito-tostada{
  position:fixed;left:50%;bottom:24px;transform:translate(-50%,14px);z-index:110;
  background:var(--sidebar);color:#fff;padding:11px 18px;border-radius:999px;
  font-size:13.5px;font-weight:600;box-shadow:0 12px 30px rgba(11,30,45,.35);
  opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;
  max-width:calc(100% - 32px);
}
.carrito-tostada[hidden]{display:none}
.carrito-tostada.show{opacity:1;transform:translate(-50%,0)}

/* Con el panel abierto, la página de atrás no se scrollea. */
body.carrito-abierto{overflow:hidden}

/* Reserva el lugar de la foto mientras carga, para que la grilla no salte. */
.cat-skeleton{grid-column:1/-1;height:140px;border-radius:var(--radius);
  background:linear-gradient(100deg,#eef2f8 30%,#f7fafd 50%,#eef2f8 70%);
  background-size:220% 100%;animation:cat-shimmer 1.2s linear infinite}
@keyframes cat-shimmer{from{background-position:180% 0}to{background-position:-40% 0}}

/* ---------------- Pie ---------------- */
.footer{background:var(--sidebar);color:var(--sidebar-text,#c7d5e2);padding:30px 0 18px;margin-top:8px}
.footer-grid{display:flex;flex-direction:column;gap:20px}
.footer .muted{color:#9fb4c7;font-size:14px;margin:6px 0}
.footer .muted a{color:#c7d5e2;display:inline-block;padding:5px 0;min-height:24px}
.footer-name{color:#fff;font-weight:800;margin:8px 0 2px}
.footer-h{
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;margin:0 0 6px;
}
/* La fila de abajo del pie: el copyright y los links de servicio. */
.footer-legal{
  border-top:1px solid rgba(255,255,255,.12);margin-top:22px;padding-top:14px;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
}
/* La linea de copyright ocupa la fila entera; los links se reparten abajo.
   Se reconoce por la clase y no por ":first-child": en las paginas nuevas
   la fila arranca directamente con un link, y por posicion el copyright
   se confundia con el. */
.footer-legal .footer-copy{flex:1 0 100%}

/* Separador entre los links, para que "Estado de tu reparacion" y "Como
   tratamos tus datos" no se lean como una sola frase. */
.footer-legal > p + p::before{content:"\00b7";margin-right:16px;opacity:.5}

.footer-legal p{margin:0;font-size:12.5px;color:#8ea4b8}

/* Los links del pie son Links. Sin esto salen del mismo gris que el
   texto al lado y no se ve que se puede tocar. */
.footer .footer-legal a{color:#c7d5e2;text-decoration:none;
  display:inline-block;min-height:24px}
.footer .footer-legal a:hover,.footer .footer-legal a:focus-visible{
  color:#fff;text-decoration:underline}

/* El nombre de la marca. En el index se llama .footer-name y en las
   otras .footer-brand; mismo aspecto para las dos. */
.footer-brand,.footer-name{color:#fff;font-weight:800;margin:8px 0 2px}

/* ---------------- Seguimiento de la reparacion ---------------- */

/* El cliente que ya dejo el equipo en el taller no viene a leer que
   reparamos: viene a escribir la clave del comprobante y ver en que
   estado esta. Por eso esta caja aparte, con el campo grande. */
.seguimiento{display:flex;flex-direction:column;gap:22px}
.seguimiento .lead{max-width:52ch}

.clave-form{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow);
}
.clave-label{
  display:block;margin-bottom:4px;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);
}
.clave-ayuda{margin:0 0 12px;font-size:13.5px;color:var(--muted)}
.clave-ayuda b{color:var(--text);letter-spacing:.06em;font-family:ui-monospace,Consolas,monospace}
.clave-row{display:flex;gap:10px;flex-wrap:wrap}
.clave-row input{
  flex:1 1 190px;min-width:0;
  font-family:ui-monospace,Consolas,monospace;
  font-size:17px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text);padding:12px 14px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg);
}
.clave-row input::placeholder{color:#9aa8bb;letter-spacing:.06em}
.clave-row input:focus{background:var(--card);border-color:var(--primary2)}
.clave-row .btn{flex:0 0 auto;padding:12px 20px;font-size:15px}

.clave-error{margin:10px 0 0;font-size:13.5px;font-weight:600;color:#b91c1c}
.clave-error[hidden]{display:none}

/* =====================================================================
   Pantallas medianas y grandes
   ===================================================================== */
@media (min-width:600px){
  .wrap{padding:0 22px}
  h1{font-size:34px}
  h2{font-size:25px}
  .band{padding:48px 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .cat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rows{flex-direction:row;align-items:baseline;gap:12px}
  .rows span{width:96px;flex:none}
  .footer-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
}

@media (min-width:761px){
  .topbar-top{flex-direction:row;align-items:center;justify-content:space-between}
  /* El menu es un flex-item del .topbar-top. Con el ancho automatico, su
     contenido nowrap lo fija al ancho que quiere (1183 px aca) y space-between
     no lo encoge: el menu se pasa del wrap y la pagina gana scroll horizontal.

     flex-basis:0 + min-width:0 es lo que lo obliga a encogerse. Con
     flex-basis:auto el ancho automatico lo fija al contenido (1183 px aca) y
     grow:1 lo EXPANDE todavia mas: nunca cede, y el menu se pasa del wrap.

     Con basis:0 el menu empieza en cero y crece solo lo que le sobra, o se
     queda con lo que hay y scrollea adentro. Es el comportamiento que
     queremos en una barra con scroll en el celu. */
  /* flex-basis:0 SOLO en fila. Entre 761 y 1099 el .topbar-top pasa a columna, y
     en columna basis:0 le da ALTO cero: el menu queda con 2px de alto y los
     botones asoman cortados por la mitad. Ahi va align-self en vez de basis
     (abajo, en la media query de 761-1099). */
  .menu{flex:1 1 0;min-width:0;overflow-x:auto}
  .hero{padding:46px 0 52px}
  /* El hero es de una sola columna ahora que se fue el recuadro de datos:
  antes era texto a la izquierda y la tarjeta pegada a la derecha. Sin la
  tarjeta, forzar una fila dejaria un hueco vacío al costado del texto. */
  .hero-grid{flex-direction:column;gap:22px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .split{flex-direction:row;align-items:flex-start;gap:36px}
  .split > div{flex:1 1 58%}
  .split > ul{flex:1 1 42%}
  .quote-box{flex-direction:row;align-items:center;gap:32px}
  .quote-box > div{flex:1 1 auto}
  .quote-box .btn-block-max{margin-top:0;flex:0 0 300px}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .seguimiento{flex-direction:row;align-items:flex-start;gap:36px}
  .seguimiento > div{flex:1 1 54%}
  .clave-form{flex:1 1 42%}
}

/* La fila de la barra con la marca al lado solo arranca cuando el menu
   entra de verdad. Entre 761 y 1099 sigue la columna con scroll del movil:
   antes, con overflow:visible y sin lugar, el boton del carrito se cortaba
   sin scroll y sin aviso. Ver la nota del 02/10/2026. */
@media (min-width:761px) and (max-width:1099px){
  .topbar-top{flex-direction:column}
  /* En columna, basis:0 le daria ALTO cero al menu y los botones quedarian
     cortados por la mitad. Con auto toma su alto natural, que es el que
     corresponde. En el eje horizontal (width:100% + max-width) se acota al
     wrap, y como tiene overflow-x:auto scrollea adentro si no entra. */
  .menu{align-self:stretch;flex:0 0 auto;width:100%;max-width:100%;overflow-x:auto}
}

/* ---------------------------------------------------------------------
   Pantallas anchas.

   Con .wrap en 1400 px, el espacio que sobra no se deja como margen: se
   llena con más columnas. Así el catálogo muestra más productos de una vez
   sin que las tarjetas se vuelvan chiquitas ni los textos incomodos de
   leer.

   Cada corte suma UNA columna, porque el salto de 4 a 6 de golpe deja
   huecos Rare demasiado grandes. */
@media (min-width:1180px){
  .cat-grid{grid-template-columns:repeat(5,minmax(0,1fr))}

  /* Con la página más ancha, los textos quedan con 60ch de máximo y la
     mitad de la pantalla vacía a la derecha: se ve como que falta algo.
     Se los deja más largos, pero con un tope: más de 75ch la línea es
     incómoda de leer de un tirón, aunque la pantalla dé para más. */
  .hero .lead{max-width:75ch}
  .sec-head{max-width:75ch}
  .consulta .lead{max-width:70ch}
}

@media (min-width:1500px){
  .cat-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  /* El panel de categorías también puede respirar un poco más */
  .cat-layout:not([hidden]){width:236px;margin-right:28px}
}

@media (min-width:1800px){
  .cat-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(3,1fr);gap:22px}
}

/* ---------------- Modo oscuro ----------------
   Similar al tema oscuro de la app (Configuración → Apariencia).
   Respeta la preferencia del sistema. */
/* --------------------------------------------------------------------
   Tema oscuro SIEMPRE. Antes este bloque era
   @media (prefers-color-scheme:dark), y el sitio se veía claro en los
   equipos que venían con el sistema en claro. Se decidio que sea oscuro
   en todos lados, asi que las reglas de abajo ya no tienen condición: son
   la base. Lo que estaba en :root arriba es el tema claro, y queda
   pisado por estas. Para volver al tema automatico, volver a envolver
   estas reglas con @media (prefers-color-scheme:dark).
   -------------------------------------------------------------------- */
:root{
  --bg:#0d1826;
  --card:#142437;
  --text:#e6eef7;
  --muted:#9fb4c7;
  --line:#22374e;
  --shadow:0 10px 30px rgba(0,0,0,.4);
  .clave-ayuda{color:var(--muted)}
  .clave-ayuda b{color:var(--text)}
  .clave-error{color:#fca5a5}
}
.hero{background:radial-gradient(1100px 420px at 88% -8%,rgba(20,184,166,.14),transparent 60%),linear-gradient(180deg,#122334 0%,var(--bg) 100%)}
.cat-foto{background:#0f1e30}
.cat-skeleton{background:linear-gradient(100deg,#0f1e30 30%,#1a2e45 50%,#0f1e30 70%);background-size:220% 100%}

/* En oscuro, el teal de marca (#0f766e) no se lee sobre fondo oscuro:
   se aclarara para mantener el contraste (mismo color de familia, mas claro). */
.eyebrow,.cat-cat{color:#5eead4}
.cat-cat{background:#0f3b3a}
.cat-stock{color:#86efac;background:#0d2b1c;border-color:#166534}
.cat-stock-low{color:#fcd34d;background:#2c2208;border-color:#78551a}
.cat-stock-out{color:#fca5a5;background:#2c0f0f;border-color:#7f1d1d}
.cat-agotados{background:#2c2208;border-color:#78551a;color:#fcd34d}
.cat-filtro{background:none;border-color:transparent;color:#e6eef7}
.cat-filtro:hover{background:#1b2f45}
.cat-filtro-on{background:#20b2aa;border-color:#20b2aa;color:#04211f}
.cat-filtro-on:hover{background:#2fc9c0}
.cat-filtro-n{background:#22374e;color:#c2d2e2}
.cat-filtro-on .cat-filtro-n{background:rgba(0,0,0,.18);color:#04211f}
.cat-panel-toggle{background:#142437;border-color:#22374e;color:#e6eef7}
.cat-activa{background:#0d2b2a;border-color:#1d5b57;color:#7fe3da}
.cat-activa-volver{color:#7fe3da;border-color:#2f7a74}
.cat-activa-volver:hover{background:#143d3a}
.cat-activa-n{color:#a5ded9}
.cat-filtros-abierto{background:#142437;border-color:#22374e}
.chk-campo input{background:#0f1e30;border-color:#22374e}
.chk-opt{background:#0f1e30}
.chk-opt-on{background:#123c3a;border-color:var(--primary2)}
.chk-alt{border-color:#22374e}
.chk-alt:hover{background:#123c3a}
.chk-estado-bien{background:#0d2b1c;border-color:#166534;color:#86efac}
.chk-estado-mal{background:#2c0f0f;border-color:#7f1d1d;color:#fca5a5}
.chk-estado-aviso{background:#2c2208;border-color:#78551a;color:#fcd34d}
.chk-estado .chk-alt{color:#2dd4bf}
.cat-mock-aviso{background:#3b2a08;color:#fde68a;border-color:#a16207}
/* El rojo de «Quitar» también se aclara en oscuro para mantener contraste. */
.carrito-quitar{color:#fca5a5}
.carrito-ctrl .carrito-mas{background:#0f1e30}
.carrito-x{background:#0f1e30;color:var(--text)}

/* Los enlaces de la marca (#0f766e) no alcanzan contraste sobre las
   tarjetas oscuras: se usan para los enlaces dentro del contenido. */
a:not(.btn){color:#2dd4bf}
.menu a:not(.btn-wa){color:#e2edf7}
.hero .lead,.card p,.checks li{color:#c2d2e2}
.btn-ghost{background:var(--card);color:var(--primary2)}
.btn-ghost:hover{background:#1b3247}
.steps li{background:#0f1e30}
.footer{background:#08131f}

/* ---------------- Impresión ---------------- */
@media print{
  .topbar,.hero-actions,.btn,.footer-note{display:none}
  body{background:#fff}
}
/* =====================================================================
   La página de reparaciones: lo que es propio de esa página.

   Lo del cotizador (`.consulta`, `.fichas`) ya estaba y no se toca.

   OJO: `checks-wide`, `serv-grid`, `serv-card`, `pasos`, `paso`, `serv-aviso`
   y `menu a[aria-current]` solo existen en reparaciones.html. Si después se
   copia alguna de estas clases al index, hay que copiarlas también al index,
   o la página queda sin estilo.
   ===================================================================== */

/* Las tres promesas de arriba. Va en fila y ocupa todo el ancho, distinto del
   `checks` del index que acompaña al texto de al lado. */
.checks-wide{
  display:flex;flex-wrap:wrap;gap:10px 26px;
  margin:26px 0 0;padding:0;list-style:none;
}
.checks-wide li{
  display:flex;align-items:flex-start;gap:8px;
  font-size:15px;color:var(--text);
}

/* Las seis tarjetas de "qué reparamos".

   Reutiliza `.card` para que hereden fondo, borde y radio: si el grid nuevo
   se define con otras medidas, las tarjetas quedan con dos sombras distintas
   entre sí. */
.serv-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
}
.serv-card p{
  margin:0;font-size:14.5px;line-height:1.55;color:var(--muted);
}
.serv-card .card-title{margin-bottom:6px}

/* La lista de pasos. El número va en un círculo: es lo que la gente busca al
   escanear una página de servicios, y con viñetas iguales no se lee como una
   secuencia. */
.pasos{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:16px;
  margin:0;padding:0;list-style:none;
  counter-reset:paso;
}
.paso{
  position:relative;
  padding:18px 18px 18px 56px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.paso::before{
  counter-increment:paso;
  content:counter(paso);
  position:absolute;left:16px;top:16px;
  width:28px;height:28px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--primary);color:#fff;
  font-size:15px;font-weight:800;
}
.paso b{display:block;margin-bottom:5px;font-size:15.5px;color:var(--text)}
.paso p{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}

/* El aviso de "no reparamos celulares". Va sobre un fondo de advertencia, no
   escondido al pie: es la pregunta que hace la mitad de la gente que entra a
   una reparación de notebooks, y contestarla de entrada ahorra el mensaje. */
.serv-aviso{
  margin:22px 0 0;padding:13px 16px;
  border:1px solid var(--line);
  border-left:3px solid var(--primary2);
  border-radius:var(--radius);
  background:var(--bg);
  font-size:14.5px;color:var(--text);
}

/* La página del menú. `aria-current="page"` lo pone el HTML de cada página, así
   que el resaltado no depende de que alguien se acuerde de cambiar una clase.

   Antes el menú eran anclas (#servicios, #catalogo) y no había forma de
   saber en qué parte de la página estabas: con una sola página no hacía
   falta. Ahora que hay varias, el que está parado tiene que verse. */
.menu a[aria-current="page"]{color:var(--primary2);font-weight:700}

@media (max-width:640px){
  .checks-wide{gap:8px 16px}
  .checks-wide li{font-size:14px}
  .paso{padding:16px 16px 16px 52px}
}
/* La banda que invita a cotizar la reparación. Va en el index desde que el
   cotizador se mudó a su propia pagina: no queda nada que explicar ahi, solo
   una razon para hacer clic.

   El texto y los botones van en fila en escritorio y se apilan en el celu. El
   boton de WhatsApp queda abajo del otro a proposito: el que ya esta
   decidido a ir a la pagina quiere el cotizador, no el chat. */
.cta-banda{
  display:flex;align-items:center;justify-content:space-between;
  gap:26px;flex-wrap:wrap;
}
.cta-banda h2{margin:0 0 7px}
.cta-banda p{
  margin:0;max-width:56ch;
  font-size:15.5px;line-height:1.55;color:var(--muted);
}
.cta-banda p b{color:var(--text)}
.cta-banda-acciones{
  display:flex;gap:10px;flex-wrap:wrap;flex:0 0 auto;
}
.cta-banda-acciones .btn{white-space:nowrap}

@media (max-width:760px){
  .cta-banda{gap:16px}
  .cta-banda-acciones{width:100%}
  .cta-banda-acciones .btn{flex:1 1 auto;justify-content:center}
}

/* =====================================================================
   El menu del celular.

   En pantallas de menos de 760 px los diez elementos del menu miden 941 px y
   hay 358. No entran: sobran 583, que son 2,6 veces el ancho disponible.

   Con esto no se esconde NADA. Los diez elementos siguen ahi, y lo unico que
   cambia es que se llega apretando un boton. Es el mismo patron del panel del
   carrito -fondo oscurecido, panel lateral, Escape para cerrar- porque ya
   existe y se ve familiar.

   OJO: todo lo de abajo esta DENTRO de max-width:760px. En la compu el menu
   sigue entero en la barra y estas reglas no aplican. El boton del menu
   tampoco se crea en la compu: lo arma menu-cel.js, que corta antes de llegar
   a esa parte si la ventana es ancha. */
@media (max-width:760px){
  /* El encabezado en el celu son DOS lineas: arriba la marca y el boton del
     menu, abajo la fila de links con scroll. Sin esto el boton caia en una
     tercera fila y la barra llegaba a 158 px, que en un celular de 700 son
     casi cuatro dedos de alto y tapando el contenido.

     El flex pasa a fila con wrap: la marca crece (flex:1) y el boton queda al
     lado, y el nav pide 100% de ancho para bajarse a su propia linea. */
  .topbar-top{
    flex-direction:row;flex-wrap:wrap;align-items:center;
    gap:8px;padding-top:10px;padding-bottom:10px;
  }
  .brand{flex:1 1 auto;min-width:0}
  /* El nav baja entero a la segunda linea. Es lo que tiene que pasar: los diez
     elementos miden 941 px y hay 358. Scrollea adentro, pero ya no es la unica
     forma de llegar a nada. */
  .menu{flex:1 0 100%;order:3}
  #menu-cel{order:2;flex:0 0 auto;display:flex}

  /* El boton de las tres rayas. Va al lado de la marca. */
  .menu-cel-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;padding:0;margin-right:2px;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);
    border-radius:10px;cursor:pointer;flex:0 0 auto;
  }

  /* Las tres rayas. Tres <span>, no un caracter, para poder animarlas a X. */
  .menu-cel-rayas,.menu-cel-rayas::before,.menu-cel-rayas::after{
    display:block;width:18px;height:2px;border-radius:2px;
    background:#fff;transition:transform .18s ease,opacity .18s ease;
  }
  .menu-cel-rayas{position:relative}
  .menu-cel-rayas::before,.menu-cel-rayas::after{content:'';position:absolute;left:0}
  .menu-cel-rayas::before{top:-6px}
  .menu-cel-rayas::after{top:6px}

  /* Abierto: las de arriba y las de abajo giran y forman la X. La del medio
     se desvanece. Es el mismo gesto del menu de cualquier celular. */
  .menu-cel-btn-abierto .menu-cel-rayas{background:transparent}
  .menu-cel-btn-abierto .menu-cel-rayas::before{transform:translateY(6px) rotate(45deg)}
  .menu-cel-btn-abierto .menu-cel-rayas::after{transform:translateY(-6px) rotate(-45deg)}

  /* La raya del medio se esconde poniendole background:transparent, NO con
     opacity:0. La opacidad se hereda a los pseudo-elementos, y como los dos
     forman la X, opacity:0 los borra tambien: abierto se veia un boton
     vacio. Con background transparente desaparece solo la del medio. */

  /* El panel. Sale desde abajo, no desde el costado: en un celular la pantalla
     es angosta de arriba a abajo, y un panel lateral de 360 px sobre un fondo
     oscurecido deja poco para leer. Abajo se aprovecha el ancho entero. */
  .menu-cel-panel{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:100;
    max-height:82vh;overflow-y:auto;
    background:var(--card);color:var(--text);
    border-top:1px solid var(--line);border-left:0;
    border-radius:18px 18px 0 0;
    box-shadow:0 -20px 50px rgba(11,30,45,.3);
    padding-bottom:env(safe-area-inset-bottom,0);
  }
  .menu-cel-panel[hidden]{display:none}

  .menu-cel-cab{
    display:flex;align-items:center;justify-content:flex-end;
    padding:8px 10px 0;position:sticky;top:0;background:var(--card);z-index:1;
  }

  /* Los links, uno por fila y con alto de dedo: 48 px es el minimo comodo para
     el pulgar, y con el texto a 16 px no hace zoom al apretar. */
  /* Estas reglas van con el prefijo `.menu-cel-panel ` a proposito: en
     estilos.css:1496 hay `a:not(.btn){color:#2dd4bf}`, que es (0,1,1) y le
     gana a un `.menu-cel-link` pelado (0,1,0). Sin el prefijo, todos los
     links del panel salian celeste en vez de --text. Prefijando quedan
     (0,2,0) y ganan. */
  .menu-cel-panel .menu-cel-link{
    display:flex;align-items:center;min-height:48px;
    padding:12px 18px;border-bottom:1px solid var(--line);
    color:var(--text);font-size:16px;font-weight:600;text-decoration:none;
  }
  .menu-cel-panel .menu-cel-link:hover,
  .menu-cel-panel .menu-cel-link:active{background:rgba(20,184,166,.08)}
  .menu-cel-panel .menu-cel-link[aria-current="page"]{color:var(--primary);font-weight:800}

  /* El WhatsApp mantiene el verde del plan, que es como se reconoce en todo
     el sitio. */
  .menu-cel-panel .menu-cel-link.menu-cel-wa{
    background:var(--wa);color:#08331a;font-weight:800;margin:10px 18px;
    border:0;border-radius:11px;justify-content:center;
  }
  .menu-cel-panel .menu-cel-link.menu-cel-wa:hover{background:var(--wa);opacity:.92}

  /* Las acciones (carrito, cuenta, salir) van aparte, con fondo propio, para
     que se sepa que no son navegación. */
  .menu-cel-panel .menu-cel-acciones{
    padding:12px 18px calc(18px + env(safe-area-inset-bottom,0));
    background:rgba(11,30,45,.04);border-top:1px solid var(--line);
    margin-top:12px;
  }
  .menu-cel-panel .menu-cel-accion{
    display:flex;align-items:center;gap:10px;width:100%;
    min-height:48px;padding:12px 14px;margin-bottom:8px;
    background:var(--card);border:1px solid var(--line);border-radius:11px;
    color:var(--text);font-size:15px;font-weight:700;
    font-family:inherit;cursor:pointer;text-align:left;text-decoration:none;
  }
  .menu-cel-panel .menu-cel-accion:last-child{margin-bottom:0}
  .menu-cel-panel .menu-cel-accion:active{background:rgba(20,184,166,.1)}

  .menu-cel-panel .menu-cel-correo{
    margin:0 0 12px;padding:10px 14px;border-radius:11px;
    background:rgba(20,184,166,.1);color:var(--primary);
    font-size:14px;font-weight:700;word-break:break-all;
  }

  /* Con el menu abierto el cuerpo no scrollea: si scrollea, el fondo oscuro se
     corre y el panel queda pegado a una pagina que se mueva. */
  body.menu-cel-abierto{overflow:hidden}
}

/* La lista de componentes de la pagina de armados.

   Reutiliza `checks checks-wide`, que ya existe: si esta lista se inventa sus
   propias clases, las dos copias divergen la primera vez que se toca una. La
   unica diferencia es que aca cada componente tiene un nombre en negrita y
   una coletilla, y la lista va en dos columnas en pantallas grandes para que
   no quede una sola linea larguisima de texto en el medio de la pagina.

   Es la unica clase propia de armados.html. */
.checks-componentes li{
  flex:1 1 320px;
  align-items:baseline;
}
.checks-componentes b{
  color:var(--text);
  margin-right:4px;
}

@media (min-width:900px){
  .checks-componentes{
    display:grid;grid-template-columns:1fr 1fr;
    gap:10px 32px;
  }
  .checks-componentes li{
    flex:initial;
    /* el guion de la lista base molesta con dos columnas */
    padding-left:0;
  }
  /* Y con el padding tiene que irse el tilde tambien.

     El tilde es un ::before en position:absolute con left:0, y los 26px de
     padding-left de la lista base eran el hueco que lo corria de la primera
     letra. Si se saca el padding y el ::before se queda, el tilde se cae
     encima del texto: se ve en los ocho renglones de "Que elegis vos".

    Va adentro del media query a proposito: en una columna el tilde se
     sigue mostrando, porque la lista base lo necesita. */
  .checks-componentes li::before{
    display:none;
  }
}

/* Las tarjetas de "Qué hacemos", que ahora son enlaces.

   Antes eran `<article>` sueltos: había que explicar el servicio y no había
   ningún(link). Con cada servicio en su propia página, la tarjeta que explica
   un servicio es el lugar más obvio para llegar a ella, y estaba desaprovechado.

   Se ve que es un enlace por el "Ver más" y por el borde que aparece al
   pasar por encima. No solo por el color: el que no distingue el azul del
   blanco igual tiene que notar que algo pasa. */
.card-enlace{
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s;
}
.card-enlace:hover{
  border-color:var(--primary2);
  transform:translateY(-2px);
  box-shadow:0 14px 34px rgba(11,30,45,.12);
}
.card-enlace:focus-visible{outline:3px solid var(--primary2);outline-offset:2px}
.card-enlace p{
  flex:1 1 auto;   /* así el "Ver más" queda siempre abajo, parejo entre tarjetas */
}

/* El "Ver más" no ocupa lugar hasta que hace falta: en la tarjeta sola no
   aporta, y con las seis alineadas al fondo queda claro a dónde lleva cada
   una. */
.card-ver{
  margin-top:12px;
  font-size:13.5px;font-weight:700;
  color:var(--primary2);
}
.card-enlace:hover .card-ver{text-decoration:underline}

@media (prefers-reduced-motion:reduce){
  .card-enlace:hover{transform:none}
}