/* ALLMAXX GARAGE 3D - estilos propios.
   Regla del proyecto: todos los colores salen de estas variables. Nada de color
   hardcodeado en el markup ni clases de color de Tailwind. */

:root {
  /* superficies */
  --negro: #08080a;
  --negro-2: #0d0d10;
  --superficie: #141418;
  --superficie-2: #1b1b21;
  --superficie-3: #23232b;

  /* bordes */
  --borde: #2a2a33;
  --borde-fuerte: #3b3b47;

  /* texto */
  --texto: #eceef2;
  --texto-suave: #9b9daa;
  --texto-tenue: #6b6d7a;

  /* acento: el naranja exacto del logo. Sobre este tono el texto va en negro
     (contraste 6.7:1); el blanco queda en 3.1:1 y no alcanza para texto chico. */
  --acento: #FF5A0F;
  --acento-2: #ff7d40;
  --acento-oscuro: #b83d05;
  --acento-tenue: rgba(255, 90, 15, 0.12);
  --acento-borde: rgba(255, 90, 15, 0.45);

  /* claro de marca, el del logo */
  --claro: #F5F5F5;
  --sobre-acento: #000000;

  /* fotos de fondo: los renders son wireframe naranja sobre negro, el mismo
     naranja del acento. Donde haya texto cerca se apagan con estos velos. */
  --velo-superficie: rgba(20, 20, 24, 0.88);
  --velo-superficie-0: rgba(20, 20, 24, 0);

  /* WhatsApp: el verde de la marca, para que el boton se reconozca de un vistazo.
     Texto negro encima (contraste 11:1). */
  --whatsapp: #25D366;
  --whatsapp-2: #4ae083;
  --sobre-whatsapp: #000000;

  /* estados */
  --ok: #2ecc71;
  --ok-tenue: rgba(46, 204, 113, 0.12);
  --error: #ff4d4d;
  --error-tenue: rgba(255, 77, 77, 0.12);
  --aviso: #f5a623;
  --aviso-tenue: rgba(245, 166, 35, 0.12);

  /* medidores de la pagina de materiales.
     El precio NO usa el acento a proposito: si se pinta igual que dureza, UV o
     flexibilidad, se lee "mas es mejor" y el mas caro parece el mejor. */
  --barra-track: #23232b;
  --barra-separador: #0d0d10;
  --pip-activo: #b9bbc6;
  --pip-inactivo: #2f2f38;

  /* varios */
  --sombra: 0 18px 45px rgba(0, 0, 0, 0.55);
  --sombra-suave: 0 6px 18px rgba(0, 0, 0, 0.35);
  --radio: 4px;
  --radio-lg: 8px;

  --fuente-titulo: 'Oswald', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --fuente-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fuente-mono: 'JetBrains Mono', 'Consolas', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--negro);
  color: var(--texto);
  font-family: var(--fuente-texto);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titular {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin: 0;
}

a { color: var(--acento-2); text-decoration: none; }
a:hover { color: var(--acento); }

hr { border: 0; border-top: 1px solid var(--borde); margin: 0; }

.oculto { display: none !important; }

/* --------------------------------------------------------------- textura */

.trama-diagonal {
  background-image: repeating-linear-gradient(
    45deg,
    var(--acento) 0px,
    var(--acento) 12px,
    transparent 12px,
    transparent 24px
  );
  opacity: 0.18;
}

.grilla-fondo {
  background-color: var(--negro);
  background-image:
    linear-gradient(var(--borde) 1px, transparent 1px),
    linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  opacity: 0.35;
}

.resplandor {
  background: radial-gradient(circle at 50% 0%, var(--acento-tenue) 0%, transparent 65%);
}

/* ------------------------------------------------------------------ marca */

.marca {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-weight: 700;
}

.marca-acento { color: var(--acento); }

/* la marca tambien se usa como link al sitio publico: no debe pintarse como
   un link comun, solo el hover levanta el acento */
a.marca { color: var(--texto); text-decoration: none; }
a.marca:hover { color: var(--texto); }
a.marca:hover .marca-acento { color: var(--acento-2); }

.etiqueta-mini {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 11px;
  color: var(--texto-tenue);
}

/* ------------------------------------------------------------ superficies */

.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.tarjeta-2 {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.barra-superior {
  background: var(--negro-2);
  border-bottom: 1px solid var(--borde);
}

.pie {
  background: var(--negro-2);
  border-top: 1px solid var(--borde);
  color: var(--texto-tenue);
}

/* pie legal: se arma desde datos_empresa y no se muestra si no hay datos */
.pie-empresa {
  border-top: 1px solid var(--borde);
  padding: 18px 24px 26px;
  max-width: 72rem;
  margin: 0 auto;
  font-size: 11px;
  line-height: 1.8;
  color: var(--texto-tenue);
  text-align: center;
}

.pie-empresa a { color: var(--texto-suave); }
.pie-empresa a:hover { color: var(--acento-2); }

.pie-empresa-datos > div { margin: 0; }
.pie-empresa-fiscal { margin-top: 10px; }

.pie-empresa-fiscal a {
  display: inline-block;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 4px 12px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 10px;
  color: var(--texto-suave);
}

.pie-empresa-fiscal a:hover { border-color: var(--acento-borde); color: var(--acento-2); }

/* ---------------------------------------------------------------- botones */

.btn {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: var(--radio);
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--texto);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1.1;
}

.btn:hover { background: var(--superficie-3); border-color: var(--acento-borde); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-acento {
  background: var(--acento);
  border-color: var(--acento);
  color: var(--sobre-acento);
  font-weight: 600;
}
.btn-acento:hover { background: var(--acento-2); border-color: var(--acento-2); }

.btn-peligro {
  background: transparent;
  border-color: var(--error);
  color: var(--error);
}
.btn-peligro:hover { background: var(--error-tenue); border-color: var(--error); }

.btn-mini {
  font-size: 11px;
  padding: 5px 10px;
  letter-spacing: 0.06em;
}

.btn-plano {
  background: transparent;
  border-color: transparent;
  color: var(--texto-suave);
}
.btn-plano:hover { color: var(--texto); background: var(--superficie-2); border-color: var(--borde); }

/* ------------------------------------------------------------------ tabs */

.tabs { border-bottom: 1px solid var(--borde); }

.tab {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  padding: 14px 20px;
  color: var(--texto-suave);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
}

.tab:hover { color: var(--texto); }

.tab.activa {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* ---------------------------------------------------------------- formularios */

.campo { display: block; margin-bottom: 4px; }

.rotulo {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--texto-suave);
  margin-bottom: 6px;
  font-family: var(--fuente-titulo);
}

.entrada, .area, .seleccion {
  width: 100%;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  padding: 9px 11px;
  font-size: 14px;
  font-family: var(--fuente-texto);
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.entrada:focus, .area:focus, .seleccion:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-tenue);
}

.entrada::placeholder, .area::placeholder { color: var(--texto-tenue); }

.entrada-mini { padding: 5px 8px; font-size: 13px; }

.area { min-height: 84px; resize: vertical; }

.mono { font-family: var(--fuente-mono); }

.ayuda {
  font-size: 12px;
  color: var(--texto-tenue);
  margin-top: 6px;
  line-height: 1.5;
}

.ayuda code {
  font-family: var(--fuente-mono);
  background: var(--superficie-3);
  border: 1px solid var(--borde);
  border-radius: 3px;
  padding: 1px 5px;
  color: var(--texto-suave);
}

.check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--texto);
}

.check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--acento);
  cursor: pointer;
}

/* ---------------------------------------------------------------- tablas */

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla thead th {
  text-align: left;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--texto-suave);
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  background: var(--negro-2);
  white-space: nowrap;
}

.tabla tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--borde);
  color: var(--texto);
  vertical-align: middle;
}

.tabla tbody tr:hover td { background: var(--superficie-2); }

.tabla-vacia {
  padding: 28px 12px;
  text-align: center;
  color: var(--texto-tenue);
  font-size: 14px;
}

.envoltorio-tabla { overflow-x: auto; }

/* ---------------------------------------------------------------- pildoras */

.pildora {
  display: inline-block;
  font-family: var(--fuente-texto);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  color: var(--texto-suave);
  background: var(--superficie-2);
  white-space: nowrap;
}

.pildora-ok { color: var(--ok); border-color: var(--ok); background: var(--ok-tenue); }
.pildora-baja { color: var(--texto-tenue); border-color: var(--borde-fuerte); }
.pildora-acento { color: var(--acento); border-color: var(--acento-borde); background: var(--acento-tenue); }

/* ---------------------------------------------------------------- mensajes */

.aviso {
  border-radius: var(--radio);
  padding: 11px 14px;
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid var(--borde);
  background: var(--superficie-2);
  color: var(--texto-suave);
}

.aviso-error { border-color: var(--error); background: var(--error-tenue); color: var(--error); }
.aviso-ok { border-color: var(--ok); background: var(--ok-tenue); color: var(--ok); }
.aviso-atencion { border-color: var(--aviso); background: var(--aviso-tenue); color: var(--aviso); }

/* ---------------------------------------------------------------- toast */

#toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
}

.toast {
  background: var(--superficie-2);
  border: 1px solid var(--borde-fuerte);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--texto);
  box-shadow: var(--sombra);
  line-height: 1.5;
  word-break: break-word;
}

.toast-ok { border-left-color: var(--ok); }
.toast-error { border-left-color: var(--error); }

/* ---------------------------------------------------------------- modal */

.velo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal {
  background: var(--superficie);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra);
  max-width: 460px;
  width: 100%;
  padding: 22px;
}

/* ---------------------------------------------------------------- landing */

.hero-titulo {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: -0.01em;
  font-weight: 700;
  font-size: clamp(44px, 11vw, 132px);
}

.hero-borde-acento { border-left: 3px solid var(--acento); }

.texto-suave { color: var(--texto-suave); }
.texto-tenue { color: var(--texto-tenue); }
.texto-acento { color: var(--acento); }

.numero-paso {
  font-family: var(--fuente-titulo);
  font-size: 13px;
  letter-spacing: 0.2em;
  color: var(--acento);
}

.linea-acento {
  height: 3px;
  width: 64px;
  background: var(--acento);
}

/* --------------------------------------- admin en pantallas chicas (apilado)
   El panel esta pensado para desktop, pero no tiene que romperse en un notebook
   chico ni en el telefono. */

@media (max-width: 1000px) {
  #panel-vehiculos > .grid,
  #panel-materiales > .grid,
  #panel-costos > .grid,
  #panel-empresa > .grid,
  #vista-proyecto-taller > .grid,
  #sub-piezas > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 700px) {
  #sub-datos .grid[style] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ================================================================= navegacion */

/* Orden fijo en todas las paginas: lo comercial primero, despues el contenido
   y la sesion separada a la derecha. Debajo de 960px se colapsa en un menu. */

.barra-interior {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.logo-barra { display: block; flex: none; line-height: 0; }

/* alto fijo y ancho automatico: el vector nunca se deforma */
.logo-horizontal { display: block; height: 40px; width: auto; }

.nav-sitio {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.nav-grupo { display: flex; align-items: center; gap: 22px; }

.nav-separador {
  display: block;
  width: 1px;
  height: 16px;
  background: var(--borde-fuerte);
}

.nav-boton {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  cursor: pointer;
}

.nav-boton:hover { border-color: var(--acento-borde); }

/* tres rayas con un solo span: la del medio es el span, las otras sus pseudo */
.nav-boton-rayas,
.nav-boton-rayas::before,
.nav-boton-rayas::after {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--texto);
  transition: transform 0.15s ease, background 0.15s ease;
}

.nav-boton-rayas { position: relative; }

.nav-boton-rayas::before,
.nav-boton-rayas::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-boton-rayas::before { top: -6px; }
.nav-boton-rayas::after { top: 6px; }

.nav-boton[aria-expanded="true"] .nav-boton-rayas { background: transparent; }
.nav-boton[aria-expanded="true"] .nav-boton-rayas::before { transform: translateY(6px) rotate(45deg); }
.nav-boton[aria-expanded="true"] .nav-boton-rayas::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 959px) {
  .barra-interior { flex-wrap: wrap; gap: 0; }
  .logo-horizontal { height: 34px; }
  .nav-boton { display: inline-flex; }

  .nav-sitio {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-top: 10px;
    padding: 4px 0 6px;
    border-top: 1px solid var(--borde);
  }

  .nav-sitio.abierta { display: flex; }

  .nav-grupo { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-separador { width: auto; height: 1px; margin: 4px 0; background: var(--borde); }
  .nav-sesion { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--borde); }

  .nav-sitio .nav-link {
    padding: 12px 0 12px 12px;
    font-size: 13px;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }

  .nav-sitio .nav-link.activa { border-left-color: var(--acento); }
}

/* logo del pie */
.logo-pie { display: block; height: 30px; width: auto; }

.enlace-instagram {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  color: var(--texto-suave);
}

.enlace-instagram:hover { color: var(--acento-2); }
.enlace-instagram svg { width: 16px; height: 16px; flex: none; }

.nav-link {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--texto-suave);
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.nav-link:hover { color: var(--texto); }

.nav-link.activa {
  color: var(--acento);
  border-bottom-color: var(--acento);
}

/* ============================================================ medidores 1-5 */

.medidor { margin-bottom: 14px; }

.medidor-encabezado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.medidor-nombre {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--texto-suave);
}

/* el numero siempre visible: la barra sola no se puede leer con precision */
.medidor-valor {
  font-family: var(--fuente-mono);
  font-size: 12px;
  color: var(--texto);
  white-space: nowrap;
}

.barra {
  position: relative;
  height: 10px;
  border-radius: 5px;
  background: var(--barra-track);
  overflow: hidden;
}

.barra-relleno {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0;
  background: var(--acento);
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* cuatro separadores que parten la barra en 5 tramos iguales */
.barra-tramos {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: repeating-linear-gradient(
    90deg,
    transparent 0,
    transparent calc(20% - 2px),
    var(--barra-separador) calc(20% - 2px),
    var(--barra-separador) 20%
  );
  pointer-events: none;
}

/* -------------------------------------------------------------- pips precio */

.pips { display: flex; gap: 5px; align-items: center; }

.pip {
  width: 22px;
  height: 22px;
  border-radius: var(--radio);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fuente-mono);
  font-size: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  color: var(--pip-inactivo);
  transition: color 220ms ease, border-color 220ms ease;
}

.pip.activo {
  color: var(--pip-activo);
  border-color: var(--borde-fuerte);
}

.leyenda-precio {
  font-size: 11px;
  color: var(--texto-tenue);
  margin-top: 6px;
}

/* ------------------------------------------------------------------ tooltip */

.con-tip { position: relative; cursor: help; border-bottom: 1px dotted var(--borde-fuerte); }

.con-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: 250px;
  background: var(--superficie-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 9px 11px;
  font-family: var(--fuente-texto);
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto);
  box-shadow: var(--sombra-suave);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  z-index: 20;
}

.con-tip:hover::after,
.con-tip:focus::after,
.con-tip:focus-visible::after { opacity: 1; visibility: visible; transform: translateY(0); }

/* ======================================================== selector guiado */

.paso-pregunta {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 300ms ease, transform 300ms ease;
}

.paso-pregunta.saliendo { opacity: 0; transform: translateY(-8px); }
.paso-pregunta.entrando { opacity: 0; transform: translateY(8px); }

.opcion {
  text-align: left;
  width: 100%;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  color: var(--texto);
  cursor: pointer;
  font-family: var(--fuente-texto);
  font-size: 14px;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.opcion:hover {
  background: var(--superficie-3);
  border-color: var(--acento-borde);
  transform: translateX(3px);
}

.opcion-titulo { font-weight: 600; display: block; }
.opcion-detalle { color: var(--texto-tenue); font-size: 12.5px; display: block; margin-top: 3px; }

.punto-paso {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--borde-fuerte);
  transition: background 0.2s ease;
}

.punto-paso.activo { background: var(--acento); }
.punto-paso.hecho { background: var(--acento-oscuro); }

/* ============================================================ lista materiales */

.tarjeta-material {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, opacity 0.3s ease;
  width: 100%;
  text-align: left;
}

.tarjeta-material:hover { background: var(--superficie-2); border-left-color: var(--borde-fuerte); }

/* la zona clickeable de la tarjeta es un boton real, pero no tiene que
   parecerlo: hereda tipografia y color del contenedor */
.boton-tarjeta {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: left;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.tarjeta-material.seleccionada {
  background: var(--superficie-2);
  border-color: var(--borde-fuerte);
  border-left-color: var(--acento);
}

/* resultado del selector guiado */
.tarjeta-material.destacada {
  border-color: var(--acento-borde);
  border-left-color: var(--acento);
  background: var(--acento-tenue);
}

.tarjeta-material.atenuada { opacity: 0.34; }
.tarjeta-material.atenuada:hover { opacity: 0.75; }

/* entrada escalonada al hacer scroll */
.entra {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.entra.visible { opacity: 1; transform: translateY(0); }

/* --------------------------------------------------------------- detalle */

.panel-detalle {
  transition: opacity 220ms ease;
  opacity: 1;
}

.panel-detalle.cambiando { opacity: 0; }

/* el acordeon de mobile no debe saltar: se anima el alto maximo */
.acordeon {
  overflow: hidden;
  max-height: 0;
  transition: max-height 380ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.acordeon.abierto { max-height: 1400px; }

/* -------------------------------------------------------------- comparador */

.tabla-comparador { width: 100%; border-collapse: collapse; font-size: 14px; }

.tabla-comparador th,
.tabla-comparador td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--borde);
  text-align: left;
  vertical-align: middle;
}

.tabla-comparador thead th {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--texto);
  background: var(--negro-2);
  border-bottom: 1px solid var(--borde-fuerte);
}

.tabla-comparador tbody th {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11px;
  color: var(--texto-suave);
  white-space: nowrap;
  width: 180px;
}

.check-comparar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--fuente-titulo);
  color: var(--texto-tenue);
  cursor: pointer;
}

.check-comparar input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--acento);
  cursor: pointer;
}

/* ========================================================== disciplinas */

.tarjeta-disciplina {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.tarjeta-disciplina:hover { border-color: var(--acento-borde); transform: translateY(-2px); }

/* la foto y el placeholder comparten medidas: el dia que se reemplacen, el
   layout no se mueve ni un pixel */
.imagen-disciplina {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--negro-2);
}

.imagen-disciplina.grande { border-radius: var(--radio-lg); border: 1px solid var(--borde); }

/* clase por defecto del dibujo generado, por si se lo pide sin opciones */
.placeholder-disciplina {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--negro-2);
  border-radius: var(--radio);
}

.chip-disciplina {
  display: inline-block;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--texto-suave);
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-disciplina:hover {
  background: var(--acento-tenue);
  border-color: var(--acento);
  color: var(--acento);
}

.linea-ideal-para {
  font-size: 13px;
  line-height: 1.7;
  color: var(--texto-suave);
  border-left: 2px solid var(--acento);
  padding-left: 12px;
  margin-bottom: 20px;
}

.linea-ideal-para .etiqueta-mini { display: block; margin-bottom: 2px; }

.lista-requisitos {
  list-style: none;
  padding: 0;
  margin: 0 0 8px 0;
}

.lista-requisitos li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-suave);
}

.lista-requisitos li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 2px;
  background: var(--acento);
}

/* ------------------------------------------- los tres grupos de material

   La diferencia entre grupos NO depende solo del color: cada uno lleva su
   marca (estrella, punto, cruz) y su titulo, para que se entienda en blanco
   y negro o con daltonismo. */

.bloque-grupo { margin-bottom: 40px; }

.encabezado-grupo {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--borde);
}

.marca-grupo {
  display: inline-block;
  font-size: 13px;
  margin-right: 7px;
  color: var(--texto-tenue);
}

.marca-grupo.grande { font-size: 20px; margin-right: 0; }

.ficha-material {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}

.nombre-material {
  font-size: 16px;
  font-weight: 600;
  color: var(--texto);
}

.nombre-material:hover { color: var(--acento-2); }

.enlace-ficha {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

/* IDEAL: borde y acento naranja */
.grupo-ideal .marca-grupo { color: var(--acento); }
.grupo-ideal.bloque-grupo .encabezado-grupo { border-bottom-color: var(--acento); }
.ficha-material.grupo-ideal {
  border-color: var(--acento-borde);
  border-left: 3px solid var(--acento);
  background: var(--acento-tenue);
}

/* TAMBIEN SIRVE: neutro */
.ficha-material.grupo-sirve { border-left: 3px solid var(--borde-fuerte); }

/* EVITAR: atenuado y tachado en el nombre, ademas de la cruz */
.grupo-evitar .marca-grupo { color: var(--error); }
.ficha-material.grupo-evitar {
  border-left: 3px solid var(--error);
  opacity: 0.62;
}

.ficha-material.grupo-evitar:hover { opacity: 1; }
.ficha-material.grupo-evitar .nombre-material { text-decoration: line-through; }

@media (max-width: 900px) {
  #detalle > .grid,
  #vista-detalle .grid[style] { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ============================================================ catalogo */

.globo-carrito {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--fuente-mono);
  font-size: 10px;
  text-align: center;
  margin-left: 3px;
}

.tarjeta-kit {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
  transition: border-color 0.18s ease, transform 0.18s ease;
}

.tarjeta-kit:hover { border-color: var(--acento-borde); transform: translateY(-2px); }
.tarjeta-kit .portada-kit { border-radius: 0; }

/* --------------------------------------------------------- galeria */

.galeria {
  position: relative;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  overflow: hidden;
}

.galeria-principal {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--negro-2);
}

.galeria-controles {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(to top, rgba(8, 8, 10, 0.85), transparent);
}

.galeria-tiras {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.tira {
  flex: none;
  width: 68px;
  height: 50px;
  padding: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--negro-2);
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.15s ease, border-color 0.15s ease;
}

.tira:hover { opacity: 1; }
.tira.activa { opacity: 1; border-color: var(--acento); }
.tira img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ------------------------------------------------ selector de material */

.opcion-material {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--superficie-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.opcion-material:hover { border-color: var(--borde-fuerte); }

.opcion-material.elegida {
  border-color: var(--acento);
  background: var(--acento-tenue);
}

.opcion-material input[type="radio"] {
  accent-color: var(--acento);
  width: 16px;
  height: 16px;
  flex: none;
  cursor: pointer;
}

.opcion-material-cuerpo { flex: 1; min-width: 0; }
.opcion-material-nombre { display: block; font-size: 14px; font-weight: 600; color: var(--texto); }

.opcion-material-resumen {
  display: block;
  font-size: 12px;
  color: var(--texto-tenue);
  margin-top: 2px;
}

.opcion-material-precio { font-size: 14px; color: var(--texto); white-space: nowrap; }

/* ------------------------------------------------------ carrito y pago */

.fila-carrito {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 14px 16px;
}

.fila-carrito:hover { border-left-color: var(--acento); }

.fila-copiable {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--negro-2);
  padding: 10px 13px;
  margin-bottom: 8px;
}

/* ====================================================== proyectos de cliente */

.pildora-aviso { color: var(--aviso); border-color: var(--aviso); background: var(--aviso-tenue); }

.tarjeta-proyecto {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde);
  border-radius: var(--radio);
  padding: 16px 18px;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.tarjeta-proyecto:hover {
  background: var(--superficie-2);
  border-left-color: var(--acento);
}

/* --------------------------------------------------- precio orientativo */

.bloque-precio {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio);
  padding: 16px 18px;
}

.precio-grande {
  font-family: var(--fuente-titulo);
  font-size: 30px;
  letter-spacing: 0.01em;
  color: var(--texto);
}

.leyenda-orientativo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--aviso);
  margin-top: 8px;
}

/* ------------------------------------------------------------ terminos */

.termino {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--negro-2);
  padding: 14px 16px;
  margin-bottom: 10px;
}

.termino-titulo { align-items: flex-start; }

.termino-texto {
  margin-top: 10px;
  padding-left: 24px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--texto-suave);
  white-space: pre-wrap;
}

/* ================================================================ switches */

.interruptor {
  display: flex;
  align-items: center;
  gap: 11px;
  cursor: pointer;
  font-size: 14px;
  color: var(--texto);
}

.interruptor input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.interruptor-pista {
  position: relative;
  width: 38px;
  height: 22px;
  flex: none;
  border-radius: 11px;
  background: var(--superficie-3);
  border: 1px solid var(--borde-fuerte);
  transition: background 0.15s ease, border-color 0.15s ease;
}

.interruptor-perilla {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--texto-tenue);
  transition: transform 0.15s ease, background 0.15s ease;
}

.interruptor input:checked + .interruptor-pista {
  background: var(--acento-tenue);
  border-color: var(--acento);
}

.interruptor input:checked + .interruptor-pista .interruptor-perilla {
  transform: translateX(16px);
  background: var(--acento);
}

.interruptor input:focus-visible + .interruptor-pista {
  box-shadow: 0 0 0 2px var(--acento-tenue);
}

/* bloque agrupado dentro de un formulario largo */
.bloque-parametros {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--negro-2);
  padding: 16px;
}

.ayuda-ok { color: var(--ok); }
.ayuda-alerta { color: var(--aviso); }

/* ============================================ bandeja de proyectos (admin) */

.chip-filtro {
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--texto-suave);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.chip-filtro:hover { color: var(--texto); border-color: var(--acento-borde); }

.chip-filtro.activo {
  background: var(--acento-tenue);
  border-color: var(--acento);
  color: var(--acento);
}

.chip-conteo {
  font-family: var(--fuente-mono);
  font-size: 10px;
  opacity: 0.75;
  margin-left: 3px;
}

.fila-proyecto { cursor: pointer; }
.fila-proyecto:hover td { background: var(--superficie-2); }

/* los borradores del cliente todavia no son tuyos: se ven, pero apagados */
.zona-borradores { opacity: 0.55; }
.zona-borradores:hover { opacity: 0.85; }

.fila-dato { margin-bottom: 2px; }

.detalle-resumen {
  cursor: pointer;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--fuente-titulo);
  color: var(--texto-suave);
}

.detalle-resumen:hover { color: var(--acento-2); }

/* log interno de estados: solo lectura, no se edita desde el panel */
.caja-historial {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.8;
  color: var(--texto-suave);
  white-space: pre-wrap;
  max-height: 240px;
  overflow-y: auto;
}

/* marca los botones que ademas de cambiar el estado mandan un mail */
.marca-mail {
  display: inline-block;
  font-family: var(--fuente-titulo);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 2px;
  background: var(--acento-tenue);
  border: 1px solid var(--acento-borde);
  color: var(--acento);
  margin-left: 5px;
}

.btn:disabled .marca-mail { opacity: 0.5; }

.fila-sugerencia td {
  background: var(--negro-2);
  padding-top: 8px;
  padding-bottom: 8px;
}

/* ================================================== costos y precios (admin) */

.pildora-error { color: var(--error); border-color: var(--error); background: var(--error-tenue); }

.tabla tbody tr.fila-sin-precio td { background: var(--error-tenue); }
.tabla tbody tr.fila-sin-precio:hover td { background: var(--error-tenue); }

/* aviso cuando el precio publicado se corrio del sugerido */
.aviso-divergencia {
  margin-top: 6px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--aviso);
  background: var(--aviso-tenue);
  border: 1px solid var(--aviso);
  border-radius: 3px;
  padding: 4px 7px;
}

.enlace-actualizar {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--acento);
  text-decoration: underline;
  cursor: pointer;
}

.enlace-actualizar:hover { color: var(--acento-2); }

/* ----------------------------------------------------------- desglose */

.modal-ancho { max-width: 780px; }

.desglose-cuerpo {
  max-height: 68vh;
  overflow-y: auto;
  padding-right: 4px;
}

.bloque-desglose {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 15px;
  margin-bottom: 10px;
}

.tabla-desglose {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-desglose td {
  padding: 5px 0;
  vertical-align: top;
  border-bottom: 1px solid var(--borde);
}

.tabla-desglose td:first-child { white-space: nowrap; padding-right: 12px; }
.tabla-desglose td:nth-child(2) { width: 100%; padding-right: 12px; }
.tabla-desglose tr:last-child td { border-bottom: 0; }

.tabla-desglose tr.fila-subtotal td { border-top: 1px solid var(--borde-fuerte); }
.tabla-desglose tr.fila-total td {
  border-top: 1px solid var(--acento-borde);
  color: var(--texto);
  padding-top: 7px;
}

/* ==================================================== fotos: subida y galeria */

.zona-soltar {
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio-lg);
  background: var(--negro-2);
  padding: 22px 18px;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.zona-soltar.encima {
  border-color: var(--acento);
  background: var(--acento-tenue);
}

/* --------------------------------------------------------- progreso */

.fila-subida {
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio);
  padding: 11px 13px;
}

.fila-subida.subida-ok { border-left-color: var(--ok); }
.fila-subida.subida-error { border-left-color: var(--error); }
.fila-subida.subida-error .detalle-subida { color: var(--error); }
.fila-subida.subida-ok .estado-subida { color: var(--ok); }
.fila-subida.subida-error .estado-subida { color: var(--error); }

.barra-progreso {
  height: 6px;
  border-radius: 3px;
  background: var(--barra-track);
  overflow: hidden;
}

.progreso-relleno {
  height: 100%;
  width: 0;
  background: var(--acento);
  transition: width 180ms linear;
}

.fila-subida.subida-error .progreso-relleno { background: var(--error); }

/* -------------------------------------------------------- miniaturas */

.grilla-miniaturas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 12px;
}

.miniatura {
  margin: 0;
  background: var(--superficie-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
  cursor: grab;
  transition: border-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.miniatura:active { cursor: grabbing; }
.miniatura.es-portada { border-color: var(--acento-borde); }
.miniatura.arrastrando { opacity: 0.45; }
.miniatura.destino { border-color: var(--acento); transform: translateY(-2px); }

.miniatura-imagen {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--negro-2);
}

.miniatura-imagen img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.etiqueta-portada {
  position: absolute;
  top: 8px;
  left: 8px;
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 3px;
}

.miniatura-cuerpo { padding: 10px; }

.ruta-foto {
  font-size: 10px;
  color: var(--texto-tenue);
  margin-top: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------- portada compartida
   La usa AG.htmlPortadaKit: el listado del admin y el catalogo publico. */

.portada-kit {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--negro-2);
  border-radius: var(--radio);
}

.portada-mini {
  width: 46px;
  height: 34px;
  object-fit: cover;
  border-radius: 3px;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  display: block;
  flex: none;
}

.portada-vacia {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--superficie-2);
  border: 1px dashed var(--borde-fuerte);
  color: var(--texto-tenue);
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 9px;
  text-align: center;
}

/* ------------------------------------------------------------ teaser landing */

.teaser {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-lg);
  transition: background 0.18s ease, border-color 0.18s ease;
  display: block;
}

.teaser:hover { background: var(--superficie-2); border-color: var(--borde-fuerte); border-left-color: var(--acento-2); }
.teaser:hover .teaser-flecha { transform: translateX(4px); }
.teaser-flecha { display: inline-block; transition: transform 0.18s ease; color: var(--acento); }

/* ------------------------------------------------- posicionamiento (landing) */

.hero-titulo { color: var(--claro); }
.hero-bajada { color: var(--claro); }

/* "Impreso en 3D" es atributo de marca: va visible, no como pildora gris */
.atributo-3d {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--radio);
  background: var(--acento);
  color: var(--sobre-acento);
}

.etiqueta-acento { color: var(--acento); }

.comparacion {
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde);
  background: var(--superficie);
}

.comparacion-generico { border-left: 3px solid var(--borde-fuerte); }

.comparacion-propio {
  border-color: var(--acento-borde);
  border-left: 3px solid var(--acento);
  background: var(--acento-tenue);
}

.lista-comparacion { list-style: none; margin: 0; padding: 0; }

.lista-comparacion li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-suave);
}

/* la marca de cada lado no depende del color: cruz contra tilde */
.lista-comparacion li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.comparacion-generico .lista-comparacion li::before { content: "\2715"; color: var(--texto-tenue); }
.comparacion-propio .lista-comparacion li::before { content: "\2713"; color: var(--acento); }
.comparacion-propio .lista-comparacion li { color: var(--texto); }

.tarjeta-linea {
  display: flex;
  flex-direction: column;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-top: 3px solid var(--acento);
  border-radius: var(--radio-lg);
  color: var(--texto);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.tarjeta-linea:hover {
  color: var(--texto);
  background: var(--superficie-2);
  border-color: var(--acento-borde);
  border-top-color: var(--acento-2);
  transform: translateY(-2px);
}

.tarjeta-linea:hover .teaser-flecha { transform: translateX(4px); }

.tarjeta-linea-ir {
  margin-top: auto;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--acento-2);
}

/* modelos de referencia: texto plano a proposito, sin logos de fabricantes */
.chip-modelo {
  display: inline-block;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 13px;
  padding: 7px 16px;
  border-radius: 999px;
  border: 1px solid var(--borde-fuerte);
  background: var(--superficie-2);
  color: var(--texto);
}

/* lugar reservado para un dato que todavia no se tiene: tiene que verse */
.dato-pendiente {
  border: 1px dashed var(--aviso);
  background: var(--aviso-tenue);
  color: var(--aviso);
  border-radius: var(--radio);
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------- disponibilidad de material
   No depende solo del color: cada chip lleva su icono y su texto. */

.chip-disponible,
.chip-a-pedido {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
  vertical-align: middle;
}

.chip-disponible {
  color: var(--ok);
  border: 1px solid var(--ok);
  background: var(--ok-tenue);
}

.chip-a-pedido {
  color: var(--texto-suave);
  border: 1px dashed var(--borde-fuerte);
  background: transparent;
}

.aviso-disponibilidad {
  border: 1px solid var(--borde);
  border-left: 3px solid var(--ok);
  border-radius: var(--radio);
  background: var(--superficie);
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-suave);
}

.aviso-disponibilidad strong { color: var(--texto); }

/* --------------------------------------------- repuestos discontinuados */

.bloque-repuestos {
  background: var(--superficie);
  border: 1px solid var(--acento-borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-lg);
}

.camino-repuesto {
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 18px;
}

/* ================================================== fotos del sitio
   Renders verticales 9:16 (900x1600). Cada slot fija su relacion de aspecto
   y recorta con object-fit: cover, nunca se estiran. Como las lineas son del
   mismo naranja que el acento, ningun texto va directo sobre una foto. */

/* hero: en mobile la foto va abajo del texto, con lugar reservado; desde 1024
   pasa a la derecha. La mascara la funde hacia el lado del texto. */
.hero-foto {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 52%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--negro) 35%);
  mask-image: linear-gradient(180deg, transparent 0%, var(--negro) 35%);
}

.hero .hero-contenido { padding-bottom: 72vw; }

/* halo oscuro: si una letra del titulo cae sobre una linea del render, la
   separa del fondo (el "tu version" naranja sobre lineas naranjas) */
.hero .hero-titulo { text-shadow: 0 0 2px var(--negro), 0 0 28px var(--negro); }

@media (min-width: 1024px) {
  .hero-foto {
    top: 0;
    left: auto;
    width: 58%;
    height: 100%;
    aspect-ratio: auto;
    object-position: 50% 55%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 55%);
    mask-image: linear-gradient(90deg, transparent 0%, var(--negro) 55%);
  }
  .hero .hero-contenido { padding-bottom: 128px; }
}

/* texto + foto al costado (pasarruedas en el landing, interior en repuestos).
   En mobile la foto va debajo del texto, apaisada. */
.bloque-con-foto {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.foto-lateral {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background: var(--negro);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.foto-pestana { object-position: 50% 55%; }
.foto-interior-lateral { object-position: 50% 10%; }

@media (min-width: 768px) {
  .bloque-con-foto { grid-template-columns: minmax(0, 1fr) 280px; gap: 40px; }
  .foto-lateral { aspect-ratio: 4 / 5; }
  .foto-pestana { object-position: 50% 60%; }
  .foto-interior-lateral { object-position: 50% 40%; }
}

/* tarjetas de las tres lineas: foto arriba, texto abajo sobre la superficie */
.tarjeta-linea { overflow: hidden; }

.tarjeta-linea-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--negro);
  border-bottom: 1px solid var(--borde);
}

.foto-sedan { object-position: 50% 50%; }
.foto-aleron { object-position: 50% 25%; }
.foto-interior { object-position: 50% 10%; }

.tarjeta-linea-cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* catalogo vacio: el despiece de fondo, apagado, y un velo radial donde va
   el texto */
.vacio-con-foto {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.vacio-con-foto > .vacio-foto {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  opacity: 0.3;
  pointer-events: none;
}

.vacio-con-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, var(--velo-superficie) 0%, var(--velo-superficie) 40%, var(--velo-superficie-0) 85%);
}

.vacio-con-foto > *:not(.vacio-foto) { position: relative; z-index: 2; }

/* ================================================== contacto */

.btn-whatsapp {
  background: var(--whatsapp);
  border-color: var(--whatsapp);
  color: var(--sobre-whatsapp);
  font-weight: 600;
}
.btn-whatsapp:hover { background: var(--whatsapp-2); border-color: var(--whatsapp-2); color: var(--sobre-whatsapp); }
.btn-whatsapp svg { width: 22px; height: 22px; flex-shrink: 0; }

.btn-grande {
  font-size: 16px;
  padding: 16px 26px;
  gap: 12px;
}

@media (max-width: 639px) {
  .btn-grande { width: 100%; justify-content: center; }
}

.contacto-bloque {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: var(--radio-lg);
}

.contacto-datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  max-width: 640px;
}

.contacto-dato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--negro-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  transition: border-color 0.15s ease;
}
.contacto-dato:hover { border-color: var(--acento-borde); color: var(--texto); }

.contacto-valor { font-size: 16px; overflow-wrap: anywhere; }

/* boton flotante: abajo a la derecha en todas las paginas publicas. El pie
   y los toasts se corren para que no quede nada tapado al final de la pagina. */
.wa-flotante {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 50;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--whatsapp);
  color: var(--sobre-whatsapp);
  box-shadow: var(--sombra-suave);
  transition: background 0.15s ease, transform 0.15s ease;
}
.wa-flotante:hover { background: var(--whatsapp-2); color: var(--sobre-whatsapp); transform: translateY(-2px); }
.wa-flotante svg { width: 30px; height: 30px; }

body.con-wa-flotante .pie { padding-bottom: 80px; }
body.con-wa-flotante #toast { bottom: 88px; }

/* ================================================== movimiento reducido
   Si el sistema pide menos movimiento, nada se anima y todo se muestra
   directamente en su valor final. */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .entra { opacity: 1; transform: none; }
  .paso-pregunta.saliendo,
  .paso-pregunta.entrando { opacity: 1; transform: none; }
  .panel-detalle.cambiando { opacity: 1; }
  .acordeon.abierto { max-height: none; }
  .opcion:hover { transform: none; }
}

/* --------------------------------------------- materiales en pantallas chicas */

@media (max-width: 900px) {
  .grilla-materiales { grid-template-columns: minmax(0, 1fr) !important; }
  .con-tip::after { left: auto; right: 0; width: 220px; }
}

/* ---------------------------------------------------------------- scrollbar */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--negro-2); }
::-webkit-scrollbar-thumb { background: var(--superficie-3); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--borde-fuerte); }

/* ---------------------------------------------------------------- scroll interno */

.lista-scroll {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--negro-2);
}

.fila-lista {
  padding: 8px 12px;
  border-bottom: 1px solid var(--borde);
}

.fila-lista:last-child { border-bottom: 0; }
.fila-lista:hover { background: var(--superficie-2); }

/* ---------------------------------------------------------------- guias (SEO) */

/* enlaces a las guias en el pie de todas las paginas publicas */
.pie-enlaces {
  border-top: 1px solid var(--borde);
  max-width: 72rem;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 22px;
  font-size: 12px;
}

.pie-enlaces a { color: var(--texto-suave); }
.pie-enlaces a:hover { color: var(--acento-2); }

.foto-despiece { object-position: 50% 40%; }

/* cuerpo de texto largo de las landing de contenido */
.texto-guia p { margin: 0 0 16px; line-height: 1.75; color: var(--texto-suave); }
.texto-guia p:last-child { margin-bottom: 0; }
.texto-guia strong { color: var(--texto); font-weight: 600; }

/* preguntas frecuentes: details nativo, sin JS */
.faq-item {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.faq-item + .faq-item { margin-top: 10px; }
.faq-item[open] { border-color: var(--acento-borde); }

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 16px;
  color: var(--texto);
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; color: var(--acento); flex: none; }
.faq-item[open] summary::after { content: "\2212"; }

.faq-item .faq-respuesta {
  padding: 0 22px 20px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--texto-suave);
}

/* ------------------------------------------------- grafico tecnico neutro
   Para las secciones que todavia no tienen foto propia (motos): grilla,
   arcos y una cota en el naranja del sitio, con los nombres de las piezas.
   No representa ningun vehiculo en particular. */
.grafico-wire {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background-color: var(--negro);
  background-image:
    linear-gradient(var(--borde) 1px, transparent 1px),
    linear-gradient(90deg, var(--borde) 1px, transparent 1px);
  background-size: 28px 28px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

.grafico-wire-arco {
  position: absolute;
  width: 78%;
  aspect-ratio: 1;
  right: -24%;
  bottom: -38%;
  border: 2px solid var(--acento-borde);
  border-radius: 50%;
}

.grafico-wire-arco-2 {
  width: 52%;
  right: -11%;
  bottom: -25%;
  border-color: var(--acento);
  border-style: dashed;
}

.grafico-wire-cota {
  position: absolute;
  left: 8%;
  right: 38%;
  top: 18%;
  border-top: 1px dashed var(--acento-borde);
}

.grafico-wire-etiquetas {
  position: absolute;
  left: 8%;
  top: 26%;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--fuente-titulo);
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 11px;
  line-height: 2.2;
  color: var(--texto-suave);
}

.grafico-wire-etiquetas li::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 2px;
  margin-right: 10px;
  vertical-align: middle;
  background: var(--acento);
}

@media (min-width: 768px) {
  .grafico-wire { aspect-ratio: 4 / 5; }
}

/* dentro de una tarjeta de linea ocupa el lugar de la foto */
.tarjeta-linea .grafico-wire {
  aspect-ratio: 4 / 3;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
}