/* ============================================================
   Vantro — Tema oscuro técnico
   ============================================================ */
:root {
  --fondo: #060809;           /* negro base */
  --panel: #0e1317;           /* superficie de tarjetas */
  --panel-2: #12181e;
  --borde: #1e262e;
  --texto: #f2f5f7;
  --gris: #8b98a5;
  --gris-claro: #2a343e;
  --primario: #ffffff;        /* cian eléctrico */
  --primario-osc: #c7cdd3;
  --acento: #ffffff;
  --acento-osc: #c7cdd3;
  --blanco: #ffffff;
  --oscuro: #f2f5f7;          /* alias heredado: ahora es el color de texto */
  --peligro: #f87171;
  --radio: 8px;
  --sombra: 0 2px 14px rgba(0, 0, 0, .45);
  --sombra-hover: 0 10px 30px rgba(0, 0, 0, .6);
  --resplandor: 0 0 24px rgba(255, 255, 255, .18);
  --whatsapp: #25d366;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* El atributo hidden siempre gana: varios bloques definen display en
   su clase (flex/grid) y sin esto seguirían viéndose al ocultarlos */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  font-family: "Barlow", "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fondo);
  color: var(--texto);
  line-height: 1.55;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }

.contenedor { max-width: 1240px; margin: 0 auto; padding: 0 20px; }

/* ---------- Barra superior ---------- */
.topbar {
  background: #000000;
  color: var(--gris);
  font-size: .78rem;
  padding: 7px 0;
  border-bottom: 1px solid var(--borde);
  letter-spacing: .04em;
}
.topbar .contenedor {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.topbar a { color: var(--gris); }
.topbar a:hover { color: var(--primario); }

/* ---------- Header ---------- */
.header {
  background: rgba(6, 8, 9, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; z-index: 100;
}
.header-main {
  display: flex; align-items: center; gap: 24px;
  padding: 14px 20px; max-width: 1240px; margin: 0 auto;
}
.logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.logo img { width: 148px; height: 58px; object-fit: cover; object-position: center 47%; }
.logo-texto { display: flex; flex-direction: column; line-height: 1.1; }
.logo-nombre {
  font-size: 1.35rem; font-weight: 800; color: var(--texto);
  text-transform: uppercase; letter-spacing: .08em;
}
.logo-nombre span { color: var(--primario); }
.logo-eslogan { font-size: .62rem; color: var(--gris); letter-spacing: .18em; text-transform: uppercase; }

/* Buscador */
.buscador { flex: 1; position: relative; max-width: 520px; }
.buscador input {
  width: 100%; padding: 11px 46px 11px 16px;
  border: 1px solid var(--gris-claro); border-radius: var(--radio);
  font-size: .92rem; outline: none; transition: border-color .2s, box-shadow .2s;
  background: var(--panel); color: var(--texto);
}
.buscador input::placeholder { color: var(--gris); }
.buscador input:focus { border-color: var(--primario); box-shadow: var(--resplandor); }
.buscador .btn-buscar {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: var(--primario); color: #041014;
  border: none; border-radius: 6px; width: 36px; height: 34px;
  display: grid; place-items: center;
}
.buscador .btn-buscar:hover { background: var(--blanco); }
.resultados-busqueda {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--panel-2); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-hover); overflow: hidden; display: none; z-index: 200;
  max-height: 380px; overflow-y: auto;
}
.resultados-busqueda.visible { display: block; }
.resultado-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--borde);
}
.resultado-item:hover { background: var(--panel); }
.resultado-item img { width: 44px; height: 44px; object-fit: contain; border-radius: 6px; background: var(--fondo); }
.resultado-item .nombre { font-size: .86rem; font-weight: 600; }
.resultado-item .precio { font-size: .82rem; color: var(--primario); font-weight: 700; }
.resultado-vacio { padding: 14px; font-size: .86rem; color: var(--gris); text-align: center; }

/* Acciones header */
.header-acciones { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.accion-carrito {
  position: relative; display: flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: .82rem; color: var(--texto);
  text-transform: uppercase; letter-spacing: .08em;
}
.accion-carrito:hover { color: var(--primario); }
.accion-carrito svg { width: 25px; height: 25px; }
.contador-carrito {
  position: absolute; top: -8px; left: 15px;
  background: var(--primario); color: #041014;
  font-size: .68rem; font-weight: 800;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; display: grid; place-items: center;
}

/* ---------- Navegación ---------- */
.nav { background: var(--fondo); border-bottom: 1px solid var(--borde); }
.nav .contenedor { display: flex; align-items: center; }
.nav-lista { display: flex; }
.nav-lista > li { position: relative; }
.nav-lista > li > a {
  display: block; padding: 13px 18px; color: var(--gris);
  font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
}
.nav-lista > li > a:hover, .nav-lista > li > a.activo {
  color: var(--texto); border-bottom-color: var(--primario);
}
.submenu {
  position: absolute; top: 100%; left: 0; min-width: 230px;
  background: var(--panel-2); border: 1px solid var(--borde);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: var(--sombra-hover); display: none; z-index: 150;
}
.nav-lista > li:hover .submenu { display: block; }
.submenu a {
  display: block; padding: 11px 18px; font-size: .82rem;
  color: var(--gris); border-bottom: 1px solid var(--borde);
  text-transform: uppercase; letter-spacing: .08em;
}
.submenu a:hover { background: var(--panel); color: var(--primario); }
.btn-menu-movil {
  display: none; background: none; border: none; color: var(--texto);
  padding: 12px 16px; font-size: 1.1rem;
  text-transform: uppercase; letter-spacing: .1em;
}

/* ---------- Etiqueta de portada ---------- */
.hero-etiqueta {
  display: inline-block; background: transparent; color: var(--primario);
  border: 1px solid var(--primario);
  font-size: .7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .22em; padding: 6px 16px; border-radius: 3px; margin-bottom: 20px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 30px; border-radius: 4px; border: none;
  font-weight: 700; font-size: .82rem; transition: all .2s;
  text-transform: uppercase; letter-spacing: .12em;
}
.btn-primario { background: var(--blanco); color: #000; }
.btn-primario:hover { background: var(--primario); color: #041014; }
.btn-acento { background: var(--primario); color: #041014; }
.btn-acento:hover { background: var(--blanco); color: #000; }
.btn-borde {
  background: transparent; color: var(--blanco);
  border: 1px solid rgba(255,255,255,.5);
}
.btn-borde:hover { background: var(--blanco); color: #000; border-color: var(--blanco); }
.btn-whatsapp { background: var(--whatsapp); color: #04140a; }
.btn-whatsapp:hover { filter: brightness(1.12); }
.btn-bloque { width: 100%; }

/* ---------- Secciones ---------- */
.seccion { padding: 64px 0; }
.seccion-alt { background: #090c0f; border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); }
.seccion-titulo { text-align: center; margin-bottom: 40px; }
.seccion-titulo h2 {
  font-size: 1.8rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.seccion-titulo p { color: var(--gris); margin-top: 6px; }
.seccion-titulo .linea {
  width: 56px; height: 2px; background: var(--primario);
  border-radius: 2px; margin: 16px auto 0;
  box-shadow: 0 0 12px rgba(255, 255, 255, .6);
}

/* ---------- Carrusel de modelos ---------- */
.grid-modelos { display: block; }

/* ---------- Tarjetas de producto ---------- */
.grid-productos {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
}
.tarjeta-producto {
  background: var(--panel); border-radius: var(--radio);
  border: 1px solid var(--borde); overflow: hidden; position: relative;
  display: flex; flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tarjeta-producto:hover {
  transform: translateY(-4px); border-color: var(--primario);
  box-shadow: var(--resplandor);
}
.tarjeta-producto .imagen {
  position: relative; background: #0a0e12; aspect-ratio: 1;
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--borde);
}
.tarjeta-producto .imagen .imagen-pendiente {
  display: grid; place-items: center; width: 100%; height: 100%;
  color: #4c5b64; font-size: .7rem; text-transform: uppercase; letter-spacing: .1em;
}
.tarjeta-producto .imagen img {
  width: 100%; height: 100%; object-fit: contain; transition: transform .3s;
}
.tarjeta-producto:hover .imagen img { transform: scale(1.05); }
.badge-modelo {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  background: rgba(0,0,0,.65); color: var(--texto);
  border: 1px solid var(--gris-claro);
  font-size: .66rem; font-weight: 700; padding: 4px 10px; border-radius: 3px;
  letter-spacing: .1em;
}
.badge-vendido {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  background: var(--primario); color: #041014;
  font-size: .64rem; font-weight: 800; padding: 4px 10px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .08em;
}
.badge-usado {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  padding: 5px 9px; border: 1px solid #f2c66d; border-radius: 999px;
  background: rgba(15, 11, 4, .84); color: #f2c66d;
  font-size: .6rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
}
.sidebar-usados { margin: 13px 0 17px; }
.sidebar-usados {
  padding: 12px; border: 1px solid #4d4025; border-radius: 10px;
  background: linear-gradient(120deg, rgba(242, 198, 109, .1), #0d1114);
}
.filtro-usados-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.filtro-usados-switch input { position: absolute; opacity: 0; pointer-events: none; }
.filtro-usados-control {
  position: relative; width: 38px; height: 21px; flex: 0 0 38px;
  border: 1px solid #596167; border-radius: 999px; background: #151b1f; transition: .2s;
}
.filtro-usados-control::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 13px; height: 13px;
  border-radius: 50%; background: #818b91; transition: transform .2s, background .2s;
}
.filtro-usados-switch input:checked + .filtro-usados-control { border-color: #f2c66d; background: rgba(242, 198, 109, .18); }
.filtro-usados-switch input:checked + .filtro-usados-control::after { transform: translateX(17px); background: #f2c66d; }
.filtro-usados-texto { min-width: 0; }
.sidebar-usados strong, .sidebar-usados small { display: block; }
.sidebar-usados strong { color: #f2c66d; font-size: .76rem; text-transform: uppercase; letter-spacing: .07em; }
.sidebar-usados small { margin-top: 2px; color: #87939a; font-size: .62rem; }
.enlace-categoria-usados {
  display: flex; justify-content: space-between; margin-top: 10px; padding-top: 9px;
  border-top: 1px solid rgba(242, 198, 109, .15); color: #9da7ac; font-size: .65rem;
}
.enlace-categoria-usados:hover, .enlace-categoria-usados.activo { color: #f2c66d; }
.equipos-usados-destacados {
  margin: 46px 0 30px; padding: 28px; border: 1px solid #4d4025;
  border-radius: 18px; background: linear-gradient(125deg, rgba(242, 198, 109, .08), #090d10 52%);
}
.equipos-usados-destacados[hidden] { display: none; }
.equipos-usados-cabecera { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.equipos-usados-cabecera > div > span { color: #f2c66d; font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.equipos-usados-cabecera h2 { margin: 5px 0 3px; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.equipos-usados-cabecera p { color: #929da3; font-size: .82rem; }
.equipos-usados-cabecera > a { flex-shrink: 0; color: #f2c66d; font-size: .72rem; font-weight: 700; }
.equipos-usados-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.equipos-usados-grid .tarjeta-producto { background: #070a0c; border-color: #332c1e; }
@media (max-width: 650px) {
  .equipos-usados-destacados { margin-top: 32px; padding: 20px; }
  .equipos-usados-cabecera { align-items: flex-start; flex-direction: column; }
  .equipos-usados-grid { grid-template-columns: 1fr; }
}
.estado-producto-usado {
  display: flex; align-items: center; gap: 12px; margin: 16px 0; padding: 12px 14px;
  border: 1px solid #4d4025; border-radius: 9px; background: rgba(242, 198, 109, .08);
}
.estado-producto-usado strong { color: #f2c66d; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.estado-producto-usado span { color: #aab3b8; font-size: .76rem; }
.tarjeta-producto .info {
  padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1;
}
.tarjeta-producto .categoria {
  font-size: .68rem; color: var(--primario);
  text-transform: uppercase; letter-spacing: .16em;
}
.tarjeta-producto h3 { font-size: .95rem; font-weight: 600; line-height: 1.35; flex: 1; }
.tarjeta-producto h3 a:hover { color: var(--primario); }
.tarjeta-producto .precio { font-size: 1.12rem; font-weight: 800; color: var(--texto); letter-spacing: .02em; }
.tarjeta-producto .btn-agregar {
  background: transparent; color: var(--texto);
  border: 1px solid var(--gris-claro);
  padding: 10px; border-radius: 4px; font-weight: 700; font-size: .76rem;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: all .2s; text-transform: uppercase; letter-spacing: .1em;
}
.tarjeta-producto .btn-agregar:hover {
  background: var(--blanco); color: #000; border-color: var(--blanco);
}
.tarjeta-producto .btn-agregar.agregado {
  background: var(--primario); color: #041014; border-color: var(--primario);
}

/* ---------- Banner CTA ---------- */
/* Banner simple reutilizable (mantenimiento, avisos): texto a la
   izquierda y botón a la derecha */
.banner-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 26px; flex-wrap: wrap; padding: 32px 36px;
  background: linear-gradient(120deg, #0a1218, #0e1a22);
  border: 1px solid var(--borde); border-left: 3px solid var(--primario);
  border-radius: var(--radio); color: var(--texto);
}
.banner-cta h2 { font-size: 1.5rem; line-height: 1.2; }
.banner-cta p { margin-top: 7px; color: var(--gris); font-size: .92rem; line-height: 1.6; }
.banner-cta .btn { flex-shrink: 0; }

/* Banner destacado con imagen y profundidad (portada) */
.banner-cta-asesoria {
  --parallax-fondo: 0px;
  --parallax-fondo-x: 0px;
  --parallax-fondo-escala: 1.1;
  --parallax-fondo-rotacion: 0deg;
  --parallax-asistente: 0px;
  --parallax-asistente-x: 0px;
  display: block; padding: 0;
  position: relative; min-height: 620px; overflow: hidden;
  background: #071015; border: 1px solid rgba(89, 193, 91, .22);
  border-left-width: 1px;
  border-radius: 22px; color: var(--texto); isolation: isolate;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .34);
}
.banner-cta-fondo {
  position: absolute; inset: -45% -25%; z-index: 0;
  width: 150%; max-width: none; height: 190%; max-height: none;
  object-fit: cover; object-position: center;
  transform: translate3d(var(--parallax-fondo-x), var(--parallax-fondo), 0)
    scale(var(--parallax-fondo-escala)) rotate(var(--parallax-fondo-rotacion));
  transform-origin: center;
  will-change: transform;
}
.banner-cta-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(3, 9, 12, .99) 0%, rgba(3, 9, 12, .94) 37%, rgba(3, 9, 12, .56) 62%, rgba(3, 9, 12, .1) 100%),
    linear-gradient(0deg, rgba(2, 7, 9, .68), transparent 54%);
}
.banner-cta-asistente {
  position: absolute; z-index: 2; right: 1.5%; bottom: 0;
  width: auto; height: 550px; max-height: calc(100% - 12px);
  object-fit: contain; object-position: bottom center;
  filter: drop-shadow(-22px 20px 24px rgba(0, 0, 0, .42));
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  transform: translate3d(var(--parallax-asistente-x), var(--parallax-asistente), 0);
  transform-origin: bottom center; will-change: transform;
}
.banner-cta-contenido {
  position: relative; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; min-height: 620px; max-width: 700px;
  padding: 54px 58px;
}
.banner-cta-etiqueta {
  margin-bottom: 18px; color: var(--primario);
  font-size: .7rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase;
}
.banner-cta-asesoria h2 {
  max-width: 620px; margin-bottom: 16px;
  font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 850;
  line-height: 1.02; letter-spacing: -.035em;
}
.banner-cta-asesoria p {
  max-width: 570px; margin-top: 0; color: #c4cdd2; font-size: 1rem; line-height: 1.7;
}
.banner-cta-pasos {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 28px;
}
.banner-cta-pasos span {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 12px; border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px; background: rgba(4, 12, 16, .52);
  color: #dce3e6; font-size: .72rem; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.banner-cta-pasos b { color: var(--primario); font-size: .64rem; letter-spacing: .08em; }
.banner-cta-asesoria .btn { min-width: 230px; justify-content: center; }

@media (max-width: 720px) {
  .banner-cta { padding: 24px 22px; gap: 18px; }
  .banner-cta h2 { font-size: 1.25rem; }
  .banner-cta .btn { width: 100%; justify-content: center; }
  .banner-cta-asesoria { min-height: 760px; border-radius: 18px; padding: 0; }
  .banner-cta-fondo { inset: -45% -28%; width: 156%; height: 190%; object-position: 68% center; }
  .banner-cta-asistente {
    top: 12px; right: -3%; bottom: auto; height: 370px; max-height: none;
    filter: drop-shadow(-12px 14px 18px rgba(0, 0, 0, .42));
  }
  .banner-cta-overlay {
    background:
      linear-gradient(0deg, rgba(3, 9, 12, .99) 0%, rgba(3, 9, 12, .98) 51%, rgba(3, 9, 12, .28) 82%, rgba(3, 9, 12, .08) 100%),
      linear-gradient(90deg, rgba(3, 9, 12, .56), transparent 84%);
  }
  .banner-cta-contenido {
    justify-content: flex-end; min-height: 760px; padding: 30px 24px;
  }
  .banner-cta-etiqueta { margin-bottom: 12px; }
  .banner-cta-asesoria h2 { margin-bottom: 12px; font-size: clamp(1.8rem, 9vw, 2.5rem); }
  .banner-cta-asesoria p { font-size: .9rem; line-height: 1.55; }
  .banner-cta-pasos { margin: 20px 0 22px; gap: 7px; }
  .banner-cta-pasos span { padding: 7px 10px; font-size: .65rem; }
  .banner-cta-asesoria .btn { width: 100%; min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .banner-cta-fondo,
  .banner-cta-asistente { transform: none; will-change: auto; }
}

/* ---------- Ventajas ---------- */
.grid-ventajas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ventaja {
  background: var(--panel); border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 24px; display: flex; gap: 14px; align-items: flex-start;
}
.ventaja .icono { color: var(--primario); flex-shrink: 0; }
.ventaja .icono svg { width: 32px; height: 32px; }
.ventaja h3 { font-size: .88rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.ventaja p { font-size: .82rem; color: var(--gris); margin-top: 4px; }

/* ---------- Footer ---------- */
.footer { background: #000; color: var(--gris); margin-top: 64px; border-top: 1px solid var(--borde); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr .85fr 1.15fr .95fr .8fr 1.1fr; gap: 26px;
  padding: 52px 0;
}
.footer h4 {
  color: var(--texto); font-size: .82rem; margin-bottom: 16px;
  text-transform: uppercase; letter-spacing: .18em;
}
.footer a:hover { color: var(--primario); }
.footer li { margin-bottom: 9px; font-size: .86rem; }
/* El logo reemplaza a la marca escrita. Se recorta igual que en la cabecera
   porque el archivo trae bastante aire alrededor. */
.footer .marca-pie { display: inline-block; margin-bottom: 12px; }
.footer .marca-pie img {
  width: 150px; height: 59px;
  object-fit: cover; object-position: center 47%;
}
.footer p { font-size: .86rem; }
.redes { display: flex; gap: 10px; margin-top: 16px; }
.redes a {
  width: 38px; height: 38px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--borde);
  display: grid; place-items: center;
  transition: border-color .2s, color .2s;
}
.redes a:hover { border-color: var(--primario); color: var(--primario); }
.redes svg { width: 18px; height: 18px; }
.footer-inferior {
  border-top: 1px solid var(--borde); padding: 18px 0;
  text-align: center; font-size: .76rem; letter-spacing: .08em;
}

/* ---------- Invitación a cotizar (chat de asesor) ---------- */
.invitacion-cotizar {
  position: fixed; right: 20px; bottom: 20px; z-index: 300;
  width: min(330px, calc(100vw - 32px));
  padding: 18px 18px 16px;
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: 16px; box-shadow: 0 22px 54px rgba(0, 0, 0, .58);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2, .7, .3, 1);
}
.invitacion-cotizar.visible { opacity: 1; transform: none; }
.invitacion-cerrar {
  position: absolute; top: 10px; right: 10px;
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: transparent; color: var(--gris);
  font-size: .8rem; line-height: 1; cursor: pointer; transition: .2s;
}
.invitacion-cerrar:hover { background: var(--panel-2); color: var(--texto); }
.invitacion-cabecera {
  display: flex; flex-direction: column; gap: 2px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}
.invitacion-cabecera img {
  width: 112px; height: 44px;
  object-fit: cover; object-position: center 47%;
}
.invitacion-estado {
  display: flex; align-items: center; gap: 7px;
  color: var(--gris); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
}
.invitacion-estado i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--whatsapp); box-shadow: 0 0 0 0 rgba(37, 211, 102, .6);
  animation: pulso-en-linea 2s ease-out infinite;
}
@keyframes pulso-en-linea {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); }
  70%  { box-shadow: 0 0 0 7px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
.invitacion-mensaje {
  color: var(--texto); font-size: .88rem; line-height: 1.5; margin-bottom: 14px;
}
.invitacion-accion {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 11px 14px; border-radius: 9px;
  background: var(--whatsapp); color: #04140a;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .04em; transition: filter .2s, transform .2s;
}
.invitacion-accion:hover { filter: brightness(1.08); transform: translateY(-1px); }
.invitacion-accion svg { width: 19px; height: 19px; }

@media (max-width: 560px) {
  /* En el celular: una sola fila compacta (texto + botón) que no tapa la
     página, con un cierre grande para el dedo */
  .invitacion-cotizar {
    right: 12px; left: 12px; bottom: 12px; width: auto;
    display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px;
    padding: 12px 44px 12px 14px;
  }
  .invitacion-cabecera { display: none; }
  .invitacion-mensaje { margin: 0; font-size: .8rem; line-height: 1.35; }
  .invitacion-accion { padding: 10px 12px; font-size: .74rem; white-space: nowrap; }
  .invitacion-accion span { display: none; }
  .invitacion-cerrar { top: 50%; right: 8px; transform: translateY(-50%); width: 34px; height: 34px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) {
  .invitacion-cotizar { transition: opacity .2s ease; transform: none; }
  .invitacion-estado i { animation: none; }
}

/* ---------- Página tienda ---------- */
.migas { font-size: .78rem; color: var(--gris); padding: 18px 0 0; letter-spacing: .06em; text-transform: uppercase; }
.migas a:hover { color: var(--primario); }
.layout-tienda {
  display: grid; grid-template-columns: 260px 1fr; gap: 24px; padding: 24px 0 56px;
  align-items: start;
}
.sidebar {
  background: var(--panel); border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 22px; position: sticky; top: 130px;
}
.sidebar h3 {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .16em;
  margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--borde);
  color: var(--texto);
}
.arbol-categorias li { margin-bottom: 2px; }
.catalogo-general { margin-bottom: 22px; }
.arbol-categorias .grupo-modelo > button {
  width: 100%; background: none; border: none; text-align: left;
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 8px; font-weight: 700; font-size: .84rem; border-radius: 4px;
  color: var(--texto); letter-spacing: .06em;
}
.arbol-categorias .grupo-modelo > button:hover { background: var(--panel-2); color: var(--primario); }
.arbol-categorias .grupo-modelo > button .flecha { transition: transform .2s; font-size: .6rem; color: var(--gris); }
.arbol-categorias .grupo-modelo.abierto > button .flecha { transform: rotate(90deg); }
.arbol-categorias .subcategorias { display: none; padding-left: 12px; }
.arbol-categorias .grupo-modelo.abierto .subcategorias { display: block; }
.arbol-categorias .subcategorias a {
  display: flex; justify-content: space-between; padding: 7px 8px;
  font-size: .84rem; color: var(--gris); border-radius: 4px;
}
.arbol-categorias .subcategorias a:hover { background: var(--panel-2); color: var(--primario); }
.arbol-categorias .subcategorias a.activo { background: var(--primario); color: #041014; font-weight: 700; }
.arbol-categorias .conteo { font-size: .72rem; color: var(--gris); }
.arbol-categorias .subcategorias a.activo .conteo { color: rgba(4,16,20,.7); }
.btn-limpiar {
  margin-top: 14px; width: 100%; background: transparent;
  border: 1px solid var(--gris-claro);
  padding: 9px; border-radius: 4px; font-size: .74rem; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .1em;
}
.btn-limpiar:hover { border-color: var(--primario); color: var(--primario); }

/* Buscador del catálogo (tienda.html) */
.buscador-tienda {
  display: flex; align-items: center; gap: 11px; margin-bottom: 14px;
  padding: 11px 16px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--panel); cursor: text;
}
.buscador-tienda:focus-within { border-color: var(--primario); box-shadow: 0 0 0 3px rgba(255, 255, 255, .07); }
.buscador-tienda svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round;
}
.buscador-tienda input {
  min-width: 0; flex: 1; background: none; border: 0; outline: 0;
  color: var(--texto); font: inherit; font-size: .9rem;
}
.buscador-tienda input::placeholder { color: var(--gris); }
/* La X nativa de type="search" duplicaría el botón de limpiar */
.buscador-tienda input::-webkit-search-cancel-button { display: none; }
.limpiar-busqueda {
  width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: var(--panel-2);
  color: var(--gris); font-size: .95rem; line-height: 1;
}
.limpiar-busqueda:hover { background: var(--gris-claro); color: var(--texto); }

.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 20px;
  background: var(--panel); border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 12px 18px;
}
.toolbar .resultado-texto { font-size: .84rem; color: var(--gris); letter-spacing: .04em; }
.toolbar .controles { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.toolbar select {
  padding: 8px 12px; border: 1px solid var(--gris-claro); border-radius: 4px;
  font-size: .84rem; background: var(--panel-2); color: var(--texto); outline: none;
}
.toolbar label { font-size: .8rem; color: var(--gris); }

.paginacion { display: flex; justify-content: center; gap: 8px; margin-top: 32px; }
.paginacion button {
  min-width: 40px; height: 40px; border-radius: 4px; border: 1px solid var(--gris-claro);
  background: transparent; color: var(--texto); font-weight: 700; font-size: .88rem;
}
.paginacion button:hover:not(:disabled) { border-color: var(--primario); color: var(--primario); }
.paginacion button.activo { background: var(--primario); color: #041014; border-color: var(--primario); }
.paginacion button:disabled { opacity: .35; cursor: default; }

.sin-resultados {
  text-align: center; padding: 60px 20px; color: var(--gris);
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
}

/* ---------- Página producto ---------- */
.layout-producto {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  padding: 30px 0 56px; align-items: start;
}
.galeria .principal {
  background: #0a0e12; border-radius: var(--radio); border: 1px solid var(--borde);
  aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  cursor: zoom-in;
}
.galeria .principal img {
  width: 100%; height: 100%; object-fit: contain; transition: transform .25s;
}
.galeria .miniaturas { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.galeria .miniaturas button {
  width: 74px; height: 74px; border-radius: 6px; border: 1px solid var(--gris-claro);
  background: #0a0e12; padding: 6px; overflow: hidden;
}
.galeria .miniaturas button.activo { border-color: var(--primario); box-shadow: var(--resplandor); }
.galeria .miniaturas img { width: 100%; height: 100%; object-fit: contain; }

.detalle .categoria { color: var(--primario); font-size: .74rem; text-transform: uppercase; letter-spacing: .2em; }
.detalle h1 {
  font-size: 1.7rem; font-weight: 800; margin: 10px 0 16px; line-height: 1.25;
  text-transform: uppercase; letter-spacing: .02em;
}
.detalle .precio { font-size: 2rem; font-weight: 800; color: var(--texto); margin-bottom: 18px; }
.detalle .descripcion { color: var(--gris); margin-bottom: 22px; }
.detalle .compatibilidad {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--borde); border-left: 2px solid var(--primario);
  padding: 8px 14px; border-radius: 4px; font-size: .84rem; margin-bottom: 24px;
  letter-spacing: .04em;
}
.detalle .compatibilidad strong { color: var(--primario); }
.fila-compra { display: flex; gap: 14px; align-items: stretch; flex-wrap: wrap; margin-bottom: 14px; }
.selector-cantidad {
  display: flex; align-items: center; border: 1px solid var(--gris-claro);
  border-radius: 4px; overflow: hidden; background: var(--panel);
}
.selector-cantidad button {
  width: 42px; height: 46px; border: none; background: transparent;
  font-size: 1.1rem; font-weight: 700; color: var(--gris);
}
.selector-cantidad button:hover { color: var(--primario); }
.selector-cantidad input {
  width: 52px; text-align: center; border: none; font-size: 1rem;
  font-weight: 700; outline: none; background: transparent; color: var(--texto);
}
.detalle .nota-envio { font-size: .8rem; color: var(--gris); display: flex; align-items: center; gap: 8px; letter-spacing: .04em; }

/* ---------- Página carrito ---------- */
.pagina-carrito { padding: 30px 0 56px; }
.tabla-carrito {
  width: 100%; background: var(--panel); border-radius: var(--radio);
  border: 1px solid var(--borde); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
.tabla-carrito th {
  text-align: left; padding: 14px 16px; font-size: .7rem;
  text-transform: uppercase; letter-spacing: .16em; color: var(--gris);
  border-bottom: 1px solid var(--borde); background: var(--panel-2);
}
.tabla-carrito td { padding: 16px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-carrito tr:last-child td { border-bottom: none; }
.tabla-carrito .prod { display: flex; align-items: center; gap: 14px; }
.tabla-carrito .prod img {
  width: 64px; height: 64px; object-fit: contain;
  background: #0a0e12; border: 1px solid var(--borde); border-radius: 6px;
}
.tabla-carrito .prod .nombre { font-weight: 700; font-size: .92rem; }
.tabla-carrito .prod .nombre a:hover { color: var(--primario); }
.tabla-carrito .prod .modelo { font-size: .76rem; color: var(--gris); letter-spacing: .06em; }
.tabla-carrito .precio-cell, .tabla-carrito .subtotal-cell { font-weight: 700; white-space: nowrap; }
.tabla-carrito .subtotal-cell { color: var(--primario); }
.btn-eliminar {
  background: none; border: 1px solid transparent; color: var(--gris); font-size: 1.1rem;
  width: 34px; height: 34px; border-radius: 4px;
}
.btn-eliminar:hover { border-color: var(--peligro); color: var(--peligro); }

.resumen-carrito {
  background: var(--panel); border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 26px; margin-top: 24px; max-width: 420px; margin-left: auto;
}
.resumen-carrito h3 { margin-bottom: 16px; font-size: .95rem; text-transform: uppercase; letter-spacing: .12em; }
.resumen-fila {
  display: flex; justify-content: space-between; padding: 8px 0; font-size: .92rem;
  color: var(--gris);
}
.resumen-fila.total {
  border-top: 1px solid var(--borde); margin-top: 8px; padding-top: 14px;
  font-size: 1.15rem; font-weight: 800; color: var(--texto);
}
.resumen-fila.total .valor { color: var(--primario); }
.resumen-carrito .btn { margin-top: 16px; }
.resumen-carrito .nota { font-size: .76rem; color: var(--gris); margin-top: 12px; text-align: center; }

.carrito-vacio {
  text-align: center; padding: 70px 20px; background: var(--panel);
  border: 1px solid var(--borde); border-radius: var(--radio);
}
.carrito-vacio svg { width: 70px; height: 70px; color: var(--gris-claro); margin: 0 auto 18px; }
.carrito-vacio h2 { margin-bottom: 8px; text-transform: uppercase; letter-spacing: .04em; }
.carrito-vacio p { color: var(--gris); margin-bottom: 22px; }

/* ---------- Página contacto ---------- */
.grid-contacto { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 30px 0 56px; }
.tarjeta-contacto {
  background: var(--panel); border-radius: var(--radio); border: 1px solid var(--borde);
  padding: 30px;
}
.tarjeta-contacto h2 { margin-bottom: 18px; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .1em; }
.dato-contacto { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.dato-contacto .icono {
  width: 44px; height: 44px; border-radius: 6px; flex-shrink: 0;
  background: transparent; border: 1px solid var(--primario); color: var(--primario);
  display: grid; place-items: center;
}
.dato-contacto .icono svg { width: 22px; height: 22px; }
.dato-contacto h3 { font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; }
.dato-contacto p { font-size: .88rem; color: var(--gris); }

.contacto-page { background: #070a0c; }
.contacto-principal { padding-top: 58px; padding-bottom: 86px; }
.contacto-intro, .ubicacion-contacto-cabecera {
  display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 26px;
}
.contacto-intro > div, .ubicacion-contacto-cabecera > div { max-width: 620px; }
.contacto-intro span, .ubicacion-contacto-cabecera span, .asesoria-contacto-contenido > span,
.tarjeta-contacto-etiqueta {
  display: block; color: #6ee7b7; font-size: .65rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.contacto-intro h2, .ubicacion-contacto-cabecera h2 {
  margin-top: 7px; font-size: clamp(1.8rem, 3.5vw, 3rem); line-height: 1.05;
}
.contacto-intro > p, .ubicacion-contacto-cabecera > p { max-width: 460px; color: #96a2a9; font-size: .9rem; }
.contacto-page .grid-contacto { gap: 18px; padding: 0; }
.contacto-page .tarjeta-contacto {
  padding: 32px; border-color: #1c262c; border-radius: 16px; background: #0a0e11;
}
.contacto-page .tarjeta-contacto h2 { margin: 7px 0 24px; font-size: 1.2rem; }
.contacto-page .dato-contacto { padding: 5px 0; }
.contacto-page .dato-contacto .icono { border-color: #31463d; border-radius: 10px; background: #0d1413; color: #6ee7b7; }
.titulo-horario-contacto { margin-top: 28px !important; }
.horario-contacto { color: var(--gris); font-size: .9rem; }

.asesoria-contacto {
  display: grid; grid-template-columns: 1.08fr .92fr; margin-top: 22px; overflow: hidden;
  border: 1px solid #1c262c; border-radius: 20px; background: #050708;
}
.asesoria-contacto-imagen { position: relative; min-height: 510px; overflow: hidden; }
.asesoria-contacto-imagen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 55%, #050708 100%), linear-gradient(0deg, rgba(5, 7, 8, .32), transparent 42%);
}
.asesoria-contacto-imagen img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.asesoria-contacto-contenido { align-self: center; padding: 50px 48px; }
.asesoria-contacto-contenido h2 { margin: 9px 0 17px; font-size: clamp(2rem, 4vw, 3.45rem); line-height: 1.02; }
.asesoria-contacto-contenido > p { color: #aab4ba; font-size: .92rem; }
.asesoria-contacto-contenido ul { display: grid; gap: 10px; margin: 24px 0 28px; }
.asesoria-contacto-contenido li { position: relative; padding-left: 22px; color: #c3ccd1; font-size: .82rem; }
.asesoria-contacto-contenido li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: #6ee7b7; box-shadow: 0 0 12px rgba(110, 231, 183, .45);
}

.ubicacion-contacto { margin-top: 64px; }
.mapa-contacto {
  position: relative; min-height: 460px; overflow: hidden; border: 1px solid #1c262c;
  border-radius: 20px; background: #0a0e11;
}
.mapa-contacto iframe {
  width: 100%; height: 460px; border: 0; display: block;
  filter: grayscale(1) invert(.9) contrast(.82); transition: filter .35s;
}
.mapa-contacto:hover iframe { filter: grayscale(.25) invert(0) contrast(1); }
.mapa-contacto-datos {
  position: absolute; left: 24px; bottom: 24px; width: min(330px, calc(100% - 48px));
  padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 14px;
  background: rgba(5, 8, 10, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}
.mapa-contacto-datos span { color: #6ee7b7; font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.mapa-contacto-datos strong { display: block; margin: 5px 0 2px; font-size: 1.35rem; }
.mapa-contacto-datos p { color: #98a4ab; font-size: .8rem; }
.mapa-contacto-datos a { display: inline-block; margin-top: 13px; color: #fff; font-size: .72rem; font-weight: 700; }
.mapa-contacto-datos a:hover { color: #6ee7b7; }

@media (max-width: 860px) {
  .contacto-intro, .ubicacion-contacto-cabecera { align-items: flex-start; flex-direction: column; }
  .asesoria-contacto { grid-template-columns: 1fr; }
  .asesoria-contacto-imagen { min-height: 420px; }
  .asesoria-contacto-imagen::after { background: linear-gradient(0deg, #050708 0%, transparent 38%); }
}
@media (max-width: 560px) {
  .contacto-principal { padding-top: 42px; }
  .contacto-page .tarjeta-contacto { padding: 24px 20px; }
  .asesoria-contacto-imagen { min-height: 330px; }
  .asesoria-contacto-contenido { padding: 30px 22px 34px; }
  .mapa-contacto, .mapa-contacto iframe { min-height: 360px; height: 360px; }
  .mapa-contacto-datos { left: 16px; bottom: 16px; width: calc(100% - 32px); }
}

/* ---------- Encabezado de página ---------- */
.encabezado-pagina {
  background:
    radial-gradient(ellipse 60% 120% at 50% 130%, rgba(255, 255, 255, .16), transparent),
    #05070a;
  color: var(--texto); padding: 52px 0; text-align: center;
}
.encabezado-pagina h1 {
  font-size: 2rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}
.encabezado-pagina p { color: var(--gris); margin-top: 6px; letter-spacing: .04em; }

/* ---------- Aviso demo ---------- */
.aviso-demo {
  background: #1c1917; color: #fbbf24; font-size: .78rem;
  text-align: center; padding: 8px 16px; letter-spacing: .04em;
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .footer-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
  .grid-modelos { grid-template-columns: repeat(3, 1fr); }
  .grid-productos { grid-template-columns: repeat(3, 1fr); }
  .grid-ventajas { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .layout-tienda { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .layout-producto { grid-template-columns: 1fr; }
  .grid-contacto { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .header-main { flex-wrap: wrap; gap: 12px; }
  .buscador { order: 3; max-width: none; flex-basis: 100%; }
  .grid-productos { grid-template-columns: repeat(2, 1fr); }
  .grid-modelos { grid-template-columns: repeat(2, 1fr); }
  .grid-ventajas { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }

  .btn-menu-movil { display: block; }
  .nav-lista {
    display: none; flex-direction: column; width: 100%;
  }
  .nav-lista.abierta { display: flex; }
  .nav .contenedor { flex-wrap: wrap; padding: 0; }
  .submenu { position: static; display: none; box-shadow: none; border-radius: 0; border: none; }
  .nav-lista > li.abierto .submenu { display: block; }
  .nav-lista > li:hover .submenu { display: none; }
  .nav-lista > li.abierto:hover .submenu { display: block; }

  .tabla-carrito thead { display: none; }
  .tabla-carrito, .tabla-carrito tbody, .tabla-carrito tr, .tabla-carrito td { display: block; width: 100%; }
  .tabla-carrito tr { border-bottom: 6px solid var(--fondo); }
  .tabla-carrito td { border: none; padding: 8px 16px; }
  .resumen-carrito { max-width: none; }
}

@media (max-width: 480px) {
  /* Dos columnas también en celular: una sola tarjeta por fila obliga a
     desplazarse demasiado para recorrer el catálogo */
  .grid-productos { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ============================================================
   Animaciones y efectos futuristas
   ============================================================ */

/* Canvas de partículas en cabeceras */
.encabezado-pagina { position: relative; }
.canvas-particulas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
.encabezado-pagina h1, .encabezado-pagina p { position: relative; z-index: 2; }

/* Aparición al hacer scroll */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Pulso de la línea decorativa de sección */
.seccion-titulo .linea { animation: pulsoLinea 2.6s ease-in-out infinite; }
@keyframes pulsoLinea {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 255, 255, .4); opacity: .8; }
  50%      { box-shadow: 0 0 22px rgba(255, 255, 255, .95); opacity: 1; }
}

/* Barrido de luz en botones */
.btn { position: relative; overflow: hidden; }
.btn::before {
  content: ""; position: absolute; top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent);
  transform: skewX(-20deg); transition: none; pointer-events: none;
}
.btn:hover::before { animation: barridoLuz .7s ease; }
@keyframes barridoLuz {
  from { left: -80%; }
  to   { left: 130%; }
}

/* Línea de escaneo sobre la imagen del producto al pasar el mouse */
.tarjeta-producto .imagen::after {
  content: ""; position: absolute; left: 0; right: 0; top: -20%;
  height: 18%; opacity: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, .18), transparent);
}
.tarjeta-producto:hover .imagen::after { animation: escaneo 1.1s ease; }
@keyframes escaneo {
  0%   { top: -20%; opacity: 1; }
  100% { top: 110%; opacity: 0; }
}

/* Pop del contador del carrito */
.contador-carrito.pop { animation: popContador .45s cubic-bezier(.2, 2.2, .4, 1); }
@keyframes popContador {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.55); background: #ffffff; }
  100% { transform: scale(1); }
}


/* Accesibilidad: sin animaciones si el usuario las desactivó */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; animation: none; transition: none; }
  .seccion-titulo .linea { animation: none; }
  .btn::before, .tarjeta-producto .imagen::after { display: none; }
  .hero-scroll span { animation: none; }
  .punto-despiece::after { animation: none; transform: none; opacity: .55; }
}

/* ============================================================
   Blog
   ============================================================ */
.grid-blog {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  padding: 28px 0 56px;
}
.tarjeta-articulo {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.tarjeta-articulo:hover {
  transform: translateY(-4px); border-color: var(--primario); box-shadow: var(--resplandor);
}
.tarjeta-articulo .portada {
  position: relative; display: block; aspect-ratio: 1200 / 630;
  background: #0a0e12; overflow: hidden; border-bottom: 1px solid var(--borde);
}
.tarjeta-articulo .portada img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .3s;
}
.tarjeta-articulo:hover .portada img { transform: scale(1.04); }
.categoria-blog {
  display: inline-block; background: rgba(0,0,0,.65); color: var(--primario);
  border: 1px solid var(--primario);
  font-size: .64rem; font-weight: 700; padding: 4px 12px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .14em;
}
.tarjeta-articulo .portada .categoria-blog { position: absolute; top: 12px; left: 12px; }
.tarjeta-articulo .cuerpo {
  padding: 18px; display: flex; flex-direction: column; gap: 10px; flex: 1;
}
.tarjeta-articulo .fecha { font-size: .74rem; color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.tarjeta-articulo h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.tarjeta-articulo h3 a:hover { color: var(--primario); }
.tarjeta-articulo p { font-size: .86rem; color: var(--gris); flex: 1; }
.leer-mas {
  font-size: .78rem; font-weight: 700; color: var(--primario);
  text-transform: uppercase; letter-spacing: .12em;
}
.leer-mas:hover { color: var(--blanco); }

/* Página de artículo */
.articulo { max-width: 820px; margin: 0 auto; padding: 30px 0 56px; }
.articulo-cabecera { text-align: center; margin-bottom: 28px; }
.articulo-cabecera h1 {
  font-size: 2.1rem; font-weight: 800; line-height: 1.2; margin: 18px 0 12px;
  text-transform: uppercase; letter-spacing: .02em;
}
.articulo-cabecera .fecha { font-size: .8rem; color: var(--gris); letter-spacing: .08em; text-transform: uppercase; }
.articulo-portada {
  width: 100%; border-radius: var(--radio); border: 1px solid var(--borde);
  margin-bottom: 32px;
}
.articulo-contenido { font-size: 1.02rem; line-height: 1.8; color: #cbd6de; }
.articulo-contenido h2 {
  color: var(--texto); font-size: 1.35rem; font-weight: 800;
  margin: 36px 0 14px; padding-left: 14px; border-left: 3px solid var(--primario);
}
.articulo-contenido h3 { color: var(--texto); font-size: 1.1rem; margin: 26px 0 10px; }
.articulo-contenido p { margin-bottom: 18px; }
.articulo-contenido strong { color: var(--texto); }
.articulo-contenido ul, .articulo-contenido ol { margin: 0 0 18px 24px; }
.articulo-contenido ul { list-style: none; }
.articulo-contenido ul li::before { content: "▸ "; color: var(--primario); font-weight: 700; }
.articulo-contenido ol { list-style: decimal; }
.articulo-contenido li { margin-bottom: 10px; }
.articulo-cta {
  margin-top: 44px; padding: 30px;
  background: linear-gradient(120deg, #0a1218, #0e1a22);
  border: 1px solid var(--borde); border-left: 3px solid var(--primario);
  border-radius: var(--radio);
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
}
.articulo-cta h3 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.articulo-cta p { color: var(--gris); font-size: .9rem; margin-top: 4px; }

@media (max-width: 1024px) { .grid-blog { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid-blog { grid-template-columns: 1fr; }
  .articulo-cabecera h1 { font-size: 1.5rem; }
}

/* ============================================================
   Cabecera de video (estilo fullscreen) + header flotante
   ============================================================ */
.hero-video {
  position: relative; height: 100vh; min-height: 620px;
  overflow: hidden;
  /* El póster (misma escena del video) es el fondo: se ve al instante y se
     queda si el video falla o el visitante ahorra datos */
  background: #000 url("../img/hero/poster.webp") center / cover no-repeat;
}
.hero-video.hero-video-sin-video { background-color: #000; }
.hero-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  /* Aparece en fundido sobre el póster cuando ya tiene fotogramas listos */
  opacity: 0; transition: opacity .8s ease;
}
.hero-video.hero-video-listo video { opacity: 1; }
.hero-video-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to bottom,
      rgba(6, 8, 9, .72) 0%,
      rgba(6, 8, 9, .15) 32%,
      rgba(6, 8, 9, .25) 58%,
      rgba(6, 8, 9, .9) 88%,
      #060809 100%);
}
.hero-video-contenido {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-bottom: 86px;
}
.hero-video-abajo {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 40px; flex-wrap: wrap;
}
.hero-titular .hero-etiqueta { margin-bottom: 16px; }
/* H1 de la portada: una línea corta con la palabra clave, encima del eslogan */
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 14px; color: #c3cdd5;
  font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.hero-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--primario); flex: none; }
/* Eslogan grande (el texto animado, editable en el panel) */
.hero-titular .hero-slogan {
  font-size: clamp(2.6rem, 6.5vw, 5.2rem);
  line-height: 1.02; font-weight: 800; color: var(--blanco);
  text-transform: uppercase; letter-spacing: .01em;
}
.hero-lateral { max-width: 400px; padding-bottom: 8px; }
.hero-lateral p { color: #c3cdd5; font-size: .98rem; margin-bottom: 22px; }
.hero-acciones { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 44px; border-top: 1px solid rgba(255,255,255,.16);
  padding-top: 22px; gap: 18px;
}
.hero-stats .stat { display: flex; flex-direction: column; gap: 2px; }
.hero-stats strong {
  font-size: 1.7rem; font-weight: 800; color: var(--blanco); letter-spacing: .02em;
}
.hero-stats span {
  font-size: .72rem; color: #9fb0bc;
  text-transform: uppercase; letter-spacing: .14em;
}
.hero-scroll {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 3; width: 26px; height: 42px;
  border: 2px solid rgba(255,255,255,.5); border-radius: 14px;
  display: flex; justify-content: center; padding-top: 7px;
}
.hero-scroll span {
  width: 3px; height: 9px; border-radius: 2px; background: var(--primario);
  animation: ruedaScroll 1.6s ease-in-out infinite;
}
@keyframes ruedaScroll {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}

/* Header flotante de vidrio sobre el video */
.header--sobre-video {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.header--sobre-video .topbar { display: none; }
.header--sobre-video .header-main {
  margin: 18px auto 0; max-width: 1200px;
  background: rgba(10, 14, 18, .55); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 12px 22px;
}
.header--sobre-video .nav {
  background: transparent; border-bottom: none;
  max-width: 1200px; margin: 0 auto;
}
.header--sobre-video .nav .contenedor { justify-content: center; }
.header--sobre-video .nav-lista > li > a { border-bottom: none; }
.header--sobre-video .nav-lista > li > a:hover,
.header--sobre-video .nav-lista > li > a.activo { color: var(--primario); }
.header--sobre-video .submenu {
  background: rgba(10, 14, 18, .85); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-radius: var(--radio);
}

@media (max-width: 860px) {
  /* En móvil el header flotante es alto (logo + buscador + menú apilados):
     el contenido pasa a flujo normal con espacio superior para no montarse */
  .hero-video { height: auto; min-height: 100svh; display: flex; }
  .hero-video { background-image: url("../img/hero/poster-movil.webp"); }
  .hero-video-contenido {
    position: relative; inset: auto; padding-top: 150px; padding-bottom: 56px;
  }
  .hero-titular .hero-slogan { font-size: clamp(2.1rem, 9vw, 2.9rem); }
  .hero-eyebrow { font-size: .68rem; letter-spacing: .14em; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); margin-top: 28px; }
  .hero-lateral { padding-bottom: 0; }
  .hero-scroll { display: none; }
}

/* ============================================================
   Header unificado: píldora de vidrio en TODAS las páginas.
   Menú en la barra principal, buscador debajo.
   ============================================================ */
.header {
  position: sticky; top: 0; z-index: 100;
  background: transparent; border-bottom: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 14px 16px 12px;
  pointer-events: none; /* el wrapper es transparente; los hijos reactivan */
}
.header-main, .header-buscar { pointer-events: auto; }
.header-main {
  max-width: 1200px; margin: 0 auto; position: relative;
  display: flex; align-items: center; gap: 18px;
  background: rgba(10, 14, 18, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 16px;
  padding: 10px 20px;
}

/* Menú dentro de la barra principal */
.header .nav-lista { display: flex; align-items: center; margin-left: auto; }
.header .nav-lista > li { position: relative; }
.header .nav-lista > li > a {
  display: block; padding: 10px 13px; color: var(--gris);
  font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .12em;
  border-bottom: none; border-radius: 8px;
  transition: color .2s, background .2s;
}
.header .nav-lista > li > a:hover,
.header .nav-lista > li > a.activo { color: var(--primario); background: rgba(255,255,255,.08); }
.header .submenu {
  top: calc(100% + 8px); left: 0; min-width: 210px;
  background: rgba(10, 14, 18, .92); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 12px;
  overflow: hidden;
}
.header .submenu a { border-bottom: 1px solid rgba(255,255,255,.06); }

/* Buscador debajo de la barra */
.header-buscar { max-width: 660px; margin: 10px auto 0; }
.header-buscar .buscador { max-width: none; }
.header-buscar .buscador input {
  background: rgba(10, 14, 18, .62); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
}
.header-buscar .buscador input:focus { border-color: var(--primario); }
.header-buscar .btn-buscar { border-radius: 999px; }

/* En la portada (video) el header flota en absoluto para dejar el video a pantalla completa */
.header--sobre-video { position: absolute; left: 0; right: 0; }
.header--sobre-video .header-main { margin: 0 auto; }

/* Hamburguesa y panel móvil */
.btn-menu-movil { padding: 6px 10px; font-size: 1.25rem; border-radius: 8px; }
.btn-menu-movil:hover { color: var(--primario); }

@media (max-width: 1020px) {
  .btn-menu-movil { display: block; }
  .header .nav-lista {
    display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    flex-direction: column; align-items: stretch; width: auto; margin: 0;
    background: rgba(10, 14, 18, .95); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,.12); border-radius: 14px;
    padding: 8px; z-index: 250;
  }
  /* El panel no puede crecer más que la pantalla: con el header pegajoso
     las últimas entradas quedaban fuera y no había forma de llegar */
  .header .nav-lista.abierta {
    display: flex; max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .header .nav-lista > li > a { padding: 12px 14px; }
  .header .submenu {
    position: static; border: none; border-radius: 0;
    background: rgba(255,255,255,.04); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .header-main { flex-wrap: nowrap; gap: 10px; }
  .logo-eslogan { display: none; }
  .accion-carrito > span:last-child { display: none; }
}

@media (max-width: 720px) {
  .header { padding: 10px 10px 8px; }
  .header-main { padding: 8px 14px; }
  /* La cabecera móvil unificada es más baja: menos espacio reservado en la portada */
  .hero-video .hero-video-contenido { padding-top: 120px; }
}

/* ============================================================
   Buscador expandible en la barra (lupa junto al menú)
   ============================================================ */
.buscador-nav {
  display: flex; align-items: center; position: relative;
  margin-left: 6px;
}
.btn-toggle-buscar {
  background: none; border: none; color: var(--texto);
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 1rem;
  transition: color .2s, background .2s;
}
.btn-toggle-buscar:hover { color: var(--primario); background: rgba(255,255,255,.08); }
.btn-toggle-buscar svg { width: 19px; height: 19px; }

.buscador-nav input {
  width: 0; opacity: 0; padding: 10px 0; margin: 0;
  border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: var(--texto);
  font-size: .9rem; outline: none;
  transition: width .45s cubic-bezier(.25, .8, .3, 1), opacity .3s ease,
              padding .45s cubic-bezier(.25, .8, .3, 1), background .3s, border-color .3s;
}
.buscador-nav input::placeholder { color: var(--gris); }
.header-main.buscando .buscador-nav input {
  width: min(430px, 40vw); opacity: 1; padding: 10px 16px;
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16);
}
.header-main.buscando .buscador-nav input:focus { border-color: var(--primario); box-shadow: var(--resplandor); }

/* El menú se oculta con animación cuando el buscador se abre */
.header .nav-lista {
  max-width: 900px; white-space: nowrap;
  /* Recorta solo en horizontal (para la animación de colapso del buscador);
     en vertical queda visible para que el submenú desplegable no se corte */
  overflow: hidden;
  overflow-x: clip; overflow-y: visible;
  transition: max-width .5s cubic-bezier(.25, .8, .3, 1), opacity .28s ease, transform .4s ease;
}
.header-main.buscando .nav-lista {
  max-width: 0; opacity: 0; transform: translateX(24px); pointer-events: none;
}

/* Resultados en vivo bajo el campo expandido */
.buscador-nav .resultados-busqueda {
  top: calc(100% + 12px); left: auto; right: 0;
  width: min(430px, 86vw);
}

/* Móvil: al abrir el buscador se oculta el texto del logo para dar espacio */
@media (max-width: 1020px) {
  .header-main.buscando .buscador-nav input { width: min(430px, 48vw); }
}
@media (max-width: 720px) {
  /* Mientras se busca, el logo y el carrito ceden todo el ancho al campo:
     con 52vw el logo se salía de la píldora en pantallas angostas */
  .header-main.buscando .logo-texto,
  .header-main.buscando .logo,
  .header-main.buscando .accion-carrito { display: none; }
  .header-main.buscando .buscador-nav { flex: 1 1 auto; min-width: 0; margin-left: 0; }
  .header-main.buscando .buscador-nav input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* ============================================================
   Videos pequeños por sección (cabeceras de página)
   ============================================================ */
.encabezado-pagina { overflow: hidden; min-height: 300px; display: grid; align-content: center; }
.encabezado-pagina .video-seccion {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.encabezado-overlay {
  position: absolute; inset: 0; z-index: 1;
  /* El tramo final llega opaco al color del fondo (--fondo) para que el
     video se desvanezca dentro del contenedor sin corte visible */
  background: linear-gradient(to bottom,
    rgba(6, 8, 9, .8) 0%,
    rgba(6, 8, 9, .45) 38%,
    rgba(6, 8, 9, .62) 62%,
    rgba(6, 8, 9, .92) 85%,
    #060809 100%);
}
.encabezado-pagina .canvas-particulas { z-index: 2; }
.encabezado-pagina h1, .encabezado-pagina p { position: relative; z-index: 3; }

/* ============================================================
   Submenú "Repuestos": sin hueco de hover y con animación.
   Se abre por hover o por clic (clase .abierto).
   ============================================================ */
.header .nav-lista > li > .submenu {
  display: block; top: 100%;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s ease, visibility .22s;
}
.header .nav-lista > li:hover > .submenu,
.header .nav-lista > li.abierto > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
  pointer-events: auto;
}

/* El menú recorta en horizontal (lo necesita la animación del buscador), así
   que el desplegable del último grupo se cortaba por la derecha: es más ancho
   que su botón y se salía del borde de la lista. Se alinea a ese borde. */
.header .nav-lista > li:last-child > .submenu { left: auto; right: 0; }

@media (max-width: 1020px) {
  /* En el panel móvil el submenú es estático y solo abre por clic */
  .header .nav-lista > li > .submenu {
    display: none; opacity: 1; visibility: visible; transform: none;
    pointer-events: auto; transition: none;
  }
  .header .nav-lista > li.abierto > .submenu { display: block; }
  .header .nav-lista > li:hover > .submenu {
    opacity: 1; visibility: visible; transform: none;
  }
}

/* ============================================================
   Despiece interactivo
   ============================================================ */
.tabs-modelos { display: flex; gap: 10px; flex-wrap: wrap; padding: 22px 0 0; }
.tab-modelo {
  background: transparent; border: 1px solid var(--gris-claro); color: var(--gris);
  padding: 10px 20px; border-radius: 999px; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .1em; transition: all .2s;
}
.tab-modelo:hover { border-color: var(--primario); color: var(--texto); }
.tab-modelo.activo { background: var(--blanco); color: #000; border-color: var(--blanco); }

.layout-despiece {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px;
  padding: 22px 0 56px; align-items: start;
}
.diagrama {
  position: relative; border: 1px solid var(--borde); border-radius: var(--radio);
  overflow: hidden; background: #0a0e12;
}
.diagrama img { width: 100%; display: block; }

/* Puntos numerados pulsantes */
.punto-despiece {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blanco); color: #000;
  border: none; font-weight: 800; font-size: .8rem;
  display: grid; place-items: center; z-index: 5;
  transition: transform .2s, box-shadow .2s;
}
.punto-despiece::after {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .55);
  animation: pulsoPunto 2s ease-out infinite;
}
@keyframes pulsoPunto {
  0%   { transform: scale(.7); opacity: 1; }
  70%  { transform: scale(1.5); opacity: 0; }
  100% { transform: scale(.7); opacity: 0; }
}
.punto-despiece:hover, .punto-despiece.resaltado {
  transform: translate(-50%, -50%) scale(1.25);
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
}
.punto-despiece.activo {
  background: #000; color: var(--blanco);
  box-shadow: 0 0 0 3px var(--blanco);
}
.punto-despiece.activo::after { animation: none; opacity: 0; }

@media (max-width: 900px) {
  .layout-despiece { grid-template-columns: 1fr; }
}

/* ============================================================
   Panel de administración (admin.html)
   ============================================================ */
body.admin { background: var(--fondo); }

/* ---------- Barra superior ---------- */
.admin-barra {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px 24px; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
  background: rgba(10, 14, 17, .92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.admin-marca { display: flex; align-items: center; gap: 14px; min-width: 0; }
.admin-marca img { width: 122px; height: 48px; object-fit: cover; object-position: center 47%; }
.admin-marca-texto {
  padding-left: 14px; border-left: 1px solid var(--borde);
  color: var(--gris); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}
.admin-estado { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.btn-admin { padding: 10px 18px; font-size: .72rem; }

/* Píldora de estado: el texto lo pone el CSS según la clase que
   añade admin.js (ok / mal), sin depender de más marcado */
.estado-punto {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--borde); background: var(--panel-2);
  color: var(--gris); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; white-space: nowrap;
}
.estado-punto::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--gris-claro); flex-shrink: 0;
}
.estado-punto::after { content: "Verificando servidor"; }
.estado-punto.ok { border-color: rgba(110, 231, 183, .35); color: #6ee7b7; }
.estado-punto.ok::before { background: #6ee7b7; box-shadow: 0 0 10px rgba(110, 231, 183, .8); }
.estado-punto.ok::after { content: "Servidor conectado"; }
.estado-punto.mal { border-color: rgba(248, 113, 113, .4); color: var(--peligro); }
.estado-punto.mal::before { background: var(--peligro); box-shadow: 0 0 10px rgba(248, 113, 113, .8); }
.estado-punto.mal::after { content: "Sin servidor"; }

/* ---------- Aviso de servidor caído ---------- */
.admin-alerta {
  display: flex; flex-direction: column; gap: 3px;
  margin: 18px 24px 0; padding: 15px 18px;
  border: 1px solid rgba(248, 113, 113, .35); border-left: 3px solid var(--peligro);
  border-radius: 10px; background: rgba(248, 113, 113, .07);
  color: #d9c3c3; font-size: .84rem; line-height: 1.55;
}
.admin-alerta strong { color: #fca5a5; font-size: .88rem; }
.admin-alerta code {
  padding: 2px 7px; border-radius: 4px; background: rgba(0, 0, 0, .45);
  font-family: Consolas, monospace; font-size: .82rem; color: var(--texto);
}

/* Aviso en verde: restauración correcta, con opción de deshacer */
.admin-alerta-ok {
  border-color: rgba(110, 231, 183, .35); border-left-color: #6ee7b7;
  background: rgba(110, 231, 183, .07); color: #c3d9cf;
}
.admin-alerta-ok strong { color: #6ee7b7; }
.admin-alerta .btn { margin-top: 6px; }

/* ---------- Copias de seguridad ---------- */
.respaldos-tarjetas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 18px; margin-bottom: 20px;
}
.respaldo-tarjeta { display: flex; flex-direction: column; gap: 12px; }
.respaldo-tarjeta .campo-ayuda { margin: 0; }
.respaldo-tarjeta label { display: flex; flex-direction: column; gap: 6px; }
.respaldo-acciones { display: flex; gap: 10px; flex-wrap: wrap; }
.respaldo-previa {
  display: flex; flex-direction: column; gap: 6px;
  padding: 14px; border: 1px solid var(--gris-claro); border-radius: 10px;
  background: var(--fondo);
}
.respaldo-previa strong { font-size: .86rem; }
.respaldo-previa small { color: var(--gris); font-size: .76rem; line-height: 1.5; }

.respaldos-lista li { cursor: default; }
.respaldo-item { display: flex; gap: 14px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.respaldo-item.danado { border-left-color: var(--peligro); }
.respaldo-datos { display: flex; flex-direction: column; gap: 3px; min-width: 220px; }
.respaldo-datos small { color: var(--gris); font-size: .74rem; }
.respaldo-nota { font-style: italic; }
.respaldo-etiqueta {
  display: inline-block; margin-right: 7px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--gris-claro); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--gris);
}
.respaldo-etiqueta.motivo-manual { border-color: rgba(110, 231, 183, .5); color: #6ee7b7; }
.respaldo-etiqueta.motivo-previo { border-color: rgba(245, 198, 109, .5); color: #f5c66d; }
.respaldo-etiqueta.motivo-importado { border-color: rgba(147, 197, 253, .5); color: #93c5fd; }
.respaldo-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.respaldo-botones .btn { padding: 8px 13px; font-size: .66rem; }
.respaldo-vacio { display: block; padding: 26px 16px; text-align: center; }
.respaldo-vacio small { display: block; margin-top: 6px; color: var(--gris); }
.respaldos-pie { margin-top: 16px; }

@media (max-width: 760px) {
  .respaldos-tarjetas { grid-template-columns: 1fr; }
  .respaldo-item { align-items: flex-start; flex-direction: column; }
}

/* ---------- Pestañas ---------- */
.admin-tabs {
  display: flex; gap: 8px; padding: 18px 24px 0; flex-wrap: wrap;
  border-bottom: 1px solid var(--borde);
}
.admin-tab {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 12px 22px; margin-bottom: -1px;
  background: transparent; border: 1px solid transparent; border-bottom: none;
  border-radius: 12px 12px 0 0; color: var(--gris);
  font: inherit; font-weight: 700; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .1em; transition: color .2s, background .2s;
}
.admin-tab:hover { color: var(--texto); background: var(--panel-2); }
.admin-tab.activo {
  background: var(--panel); color: var(--texto);
  border-color: var(--borde); border-bottom-color: var(--panel);
}
.admin-tab-icono { font-size: .95rem; }

.admin-main { padding-top: 30px; padding-bottom: 70px; }
.admin-seccion { display: none; }
.admin-seccion.visible { display: block; animation: aparecer-seccion .3s ease-out; }
@keyframes aparecer-seccion {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* ---------- Cabecera de cada sección ---------- */
.admin-cabecera {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 32px; flex-wrap: wrap; margin-bottom: 22px;
  padding-bottom: 18px; border-bottom: 1px solid var(--borde);
}
.admin-sobrelinea {
  display: block; color: #6ee7b7; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
}
.admin-cabecera h2 { margin-top: 7px; font-size: 1.75rem; letter-spacing: .01em; }
.admin-cabecera > p { max-width: 480px; color: var(--gris); font-size: .84rem; line-height: 1.6; }
.admin-cabecera strong { color: var(--texto); }

.admin-columnas { display: grid; grid-template-columns: 370px 1fr; gap: 20px; align-items: start; }
.admin-columnas.despiece-admin { grid-template-columns: 1.15fr 1fr; margin-top: 18px; }
.columna-piezas { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.panel-diagrama-admin {
  padding: 18px; border: 1px solid var(--borde); border-radius: 14px; background: var(--panel);
}

/* ---------- Lista lateral ---------- */
.admin-lista {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  overflow: hidden;
}
.admin-lista-toolbar {
  display: flex; gap: 10px; padding: 14px; border-bottom: 1px solid var(--borde);
  align-items: center; justify-content: space-between; background: var(--panel-2);
}
.admin-lista-toolbar input {
  flex: 1; min-width: 0; background: var(--fondo); border: 1px solid var(--gris-claro);
  color: var(--texto); border-radius: 8px; padding: 10px 13px; outline: none;
  font-family: inherit; font-size: .84rem; transition: border-color .2s;
}
.admin-lista-toolbar input:focus { border-color: var(--primario); }
.admin-lista-toolbar input::placeholder { color: #67737c; }
.admin-lista-toolbar strong {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--texto);
}
.admin-lista-toolbar .btn { padding: 10px 15px; font-size: .68rem; white-space: nowrap; }
.admin-lista ul { max-height: 62vh; overflow-y: auto; }
.admin-lista li {
  display: flex; gap: 12px; align-items: center; padding: 11px 14px;
  border-bottom: 1px solid var(--borde); cursor: pointer;
  border-left: 2px solid transparent; transition: background .18s, border-color .18s;
}
.admin-lista li:last-child { border-bottom: none; }
.admin-lista li:hover { background: var(--panel-2); }
.admin-lista li.activo { background: var(--panel-2); border-left-color: #6ee7b7; }
.admin-lista li img {
  width: 46px; height: 46px; object-fit: contain; border-radius: 8px;
  background: #0a0e12; border: 1px solid var(--borde); flex-shrink: 0;
}
.admin-lista li > div { min-width: 0; }
.admin-lista li strong {
  display: block; font-size: .86rem; font-weight: 600; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis;
}
.admin-lista li small { color: var(--gris); font-size: .72rem; }
.admin-lista li.activo strong { color: var(--texto); }
.admin-lista .numero {
  width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--gris-claro);
  display: grid; place-items: center; font-weight: 800; font-size: .74rem;
  flex-shrink: 0; color: var(--texto);
}
.admin-lista li.activo .numero { border-color: #6ee7b7; color: #6ee7b7; }

/* ---------- Editor ---------- */
.admin-editor {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 14px;
  padding: 24px; min-width: 0;
}
.editor-vacio {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 56px 20px; color: var(--gris); font-size: .88rem; text-align: center;
}
.editor-vacio-icono {
  display: grid; place-items: center; width: 54px; height: 54px;
  border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel-2); font-size: 1.4rem; opacity: .8;
}
.editor-campos { display: flex; flex-direction: column; gap: 16px; }
.asistente-factura { display: flex; flex-direction: column; gap: 16px; }

/* Bloques temáticos dentro del editor */
.campo-grupo {
  display: flex; flex-direction: column; gap: 13px;
  padding: 18px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--panel-2);
}
.campo-grupo-titulo {
  color: #6ee7b7; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.campo-grupo-titulo small {
  color: var(--gris); font-weight: 600; letter-spacing: .06em; text-transform: none;
}

.admin-editor label {
  display: flex; flex-direction: column; gap: 7px;
  color: var(--gris); font-size: .76rem; font-weight: 600; letter-spacing: .04em;
}
.admin-editor input[type=text], .admin-editor input[type=number],
.admin-editor input[type=date], .admin-editor textarea {
  background: var(--fondo); border: 1px solid var(--gris-claro); color: var(--texto);
  border-radius: 8px; padding: 11px 13px; font-size: .9rem; outline: none;
  font-family: inherit; transition: border-color .2s, box-shadow .2s;
}
.admin-editor input:focus, .admin-editor textarea:focus {
  border-color: #6ee7b7; box-shadow: 0 0 0 3px rgba(110, 231, 183, .12);
}
.admin-editor input::placeholder, .admin-editor textarea::placeholder { color: #67737c; }
.admin-editor textarea { resize: vertical; line-height: 1.55; }
.admin-editor textarea.mono { font-family: Consolas, monospace; font-size: .82rem; line-height: 1.6; }
.campo-ayuda {
  color: #78848c; font-size: .72rem; font-weight: 500;
  letter-spacing: 0; line-height: 1.5;
}

.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.fila-checks { display: flex; flex-wrap: wrap; gap: 12px; }
.fila-checks.columna { flex-direction: column; gap: 10px; }
.admin-editor .check, .ajustes-tarjeta .check {
  flex-direction: row; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); color: var(--texto); font-size: .84rem; font-weight: 600;
  cursor: pointer; transition: border-color .2s, background .2s;
}
.admin-editor .check:hover, .ajustes-tarjeta .check:hover { border-color: var(--gris-claro); }
.admin-editor .check input, .ajustes-tarjeta .check input {
  margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0;
  accent-color: #6ee7b7; cursor: pointer;
}
.admin-editor .check small, .ajustes-tarjeta .check small {
  display: block; margin-top: 3px; color: var(--gris);
  font-size: .73rem; font-weight: 500; line-height: 1.5;
}

.editor-acciones {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px;
  padding-top: 18px; border-top: 1px solid var(--borde);
}
.btn-peligro { background: transparent; color: var(--peligro); border: 1px solid rgba(248, 113, 113, .5); }
.btn-peligro:hover { background: var(--peligro); color: #150606; border-color: var(--peligro); }
.btn-subir { cursor: pointer; align-self: flex-start; color: var(--texto); font-size: .7rem; padding: 10px 16px; }

/* ---------- Galería de imágenes ---------- */
.galeria-admin { display: flex; gap: 10px; flex-wrap: wrap; }
.galeria-admin figure {
  position: relative; width: 96px; height: 96px; border: 1px solid var(--borde);
  border-radius: 10px; overflow: hidden; background: #0a0e12;
}
.galeria-admin img { width: 100%; height: 100%; object-fit: contain; }
.mini-acciones {
  position: absolute; inset: auto 0 0 0; display: flex;
  background: rgba(0, 0, 0, .82);
}
.mini-acciones button {
  flex: 1; background: none; border: none; color: var(--texto);
  padding: 5px 0; font-size: .72rem; cursor: pointer;
}
.mini-acciones button:hover { background: rgba(255, 255, 255, .16); }
.mini-acciones .quitar { color: var(--peligro); }
.sin-imagenes { color: var(--gris); font-size: .8rem; padding: 14px; line-height: 1.5; }

/* ---------- Despiece ---------- */
.ayuda-diagrama {
  margin-top: 14px; padding: 11px 14px; border-radius: 9px;
  border: 1px solid var(--borde); background: var(--panel-2);
  color: var(--gris); font-size: .78rem; line-height: 1.55;
}
.ayuda-diagrama.resaltada {
  border-color: rgba(251, 191, 36, .45); background: rgba(251, 191, 36, .08); color: #fbbf24;
}
#admin-diagrama { cursor: crosshair; }
#admin-tabs-modelos { margin-bottom: 4px; }

/* ---------- Ajustes ---------- */
.editor-ajustes {
  max-width: 780px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 18px;
}
.ajustes-tarjeta { display: flex; flex-direction: column; gap: 14px; }
.grupo-ajustes {
  padding: 0 10px; margin-left: -2px;
  color: #6ee7b7; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.ajustes-pie {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; border: 1px solid var(--borde); border-radius: 14px;
  background: var(--panel);
}
.ajustes-pie .campo-ayuda { margin: 0; }

/* ---------- Facturas: tabla de líneas y resumen ---------- */
.agregar-item { display: flex; gap: 10px; }
.agregar-item input { flex: 1; min-width: 0; }
.tabla-items-envoltorio { overflow-x: auto; }
/* Destello de la línea que se acaba de añadir desde el catálogo */
.tabla-items tr.linea-nueva td { animation: destelloLinea 1.3s ease-out; }
@keyframes destelloLinea {
  from { background: rgba(110, 231, 183, .2); }
  to { background: transparent; }
}
.tabla-items { width: 100%; border-collapse: collapse; font-size: .84rem; }
.tabla-items th {
  padding: 8px 6px; border-bottom: 1px solid var(--borde);
  color: var(--gris); font-size: .66rem; font-weight: 700;
  text-align: left; text-transform: uppercase; letter-spacing: .1em;
}
.tabla-items td { padding: 6px 4px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.tabla-items input {
  width: 100%; min-width: 62px; padding: 8px 9px !important;
  font-size: .82rem !important;
}
.tabla-items td:first-child { min-width: 190px; }
.tabla-items .celda-total { white-space: nowrap; font-weight: 700; color: var(--texto); }
.quitar-item {
  width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borde); background: transparent; color: var(--peligro);
}
.quitar-item:hover { background: var(--peligro); color: #150606; }
.resumen-factura {
  padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); font-size: .86rem;
}
.resumen-factura div { display: flex; justify-content: space-between; padding: 3px 0; color: var(--gris); }
.resumen-factura .total {
  margin-top: 6px; padding-top: 9px; border-top: 1px solid var(--borde);
  color: var(--texto); font-size: 1.1rem; font-weight: 800;
}

/* ---------- Elegir un cliente ya registrado ---------- */
.campo-con-boton { display: flex; gap: 9px; align-items: stretch; }
.campo-con-boton input { flex: 1; min-width: 0; }
.campo-con-boton .btn { white-space: nowrap; flex-shrink: 0; }
.selector-registros {
  padding: 14px; border: 1px solid var(--borde); border-radius: 11px; background: var(--fondo);
}
.selector-registros > input {
  width: 100%; margin-bottom: 10px;
  background: var(--panel-2) !important; border: 1px solid var(--gris-claro);
  color: var(--texto); border-radius: 8px; padding: 10px 12px;
  font-family: inherit; font-size: .84rem; outline: none;
}
.selector-registros > input:focus { border-color: #6ee7b7; }
.selector-registros ul { max-height: 240px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.selector-registros li { list-style: none; }
.selector-registros li button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 13px; border-radius: 8px;
  border: 1px solid var(--borde); background: var(--panel);
  color: var(--texto); font: inherit;
}
.selector-registros li button:hover { border-color: #6ee7b7; background: var(--panel-2); }
.selector-registros li strong { display: block; font-size: .86rem; font-weight: 600; }
.selector-registros li small { display: block; margin-top: 2px; color: var(--gris); font-size: .74rem; }

/* Catálogo de productos dentro de la factura */
.selector-productos ul { max-height: 340px; }
.selector-registros li.selector-grupo {
  padding: 12px 4px 4px; color: var(--gris);
  font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.selector-registros li.selector-grupo:first-child { padding-top: 0; }
.selector-registros li button.selector-producto {
  display: grid; grid-template-columns: 40px 1fr auto;
  align-items: center; gap: 12px; padding: 8px 12px;
}
.selector-producto img {
  width: 40px; height: 40px; border-radius: 7px;
  object-fit: cover; background: var(--panel-2);
}
.selector-producto span { min-width: 0; }
.selector-producto strong {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selector-producto b { color: #6ee7b7; font-size: .82rem; white-space: nowrap; }

@media (max-width: 640px) {
  .campo-con-boton { flex-direction: column; }
  .campo-con-boton .btn { width: 100%; }
}

/* ---------- Cliente reconocido dentro de la factura ---------- */
.aviso-cliente {
  padding: 15px 17px; border: 1px solid rgba(110, 231, 183, .4);
  border-radius: 11px; background: rgba(110, 231, 183, .07);
}
.aviso-cliente-titulo { color: var(--gris); font-size: .78rem; }
.aviso-cliente-titulo strong { color: #6ee7b7; }
.aviso-cliente-pregunta {
  margin-top: 7px; color: var(--texto); font-size: .92rem; font-weight: 700;
}
.aviso-cliente-direccion {
  margin: 5px 0 12px; padding: 9px 12px; border-radius: 8px;
  background: var(--fondo); color: var(--texto); font-size: .85rem;
}
.aviso-cliente-acciones { display: flex; gap: 9px; flex-wrap: wrap; }
.aviso-cliente-lista { display: flex; flex-direction: column; gap: 7px; margin-top: 12px; }
.aviso-cliente-lista button {
  padding: 10px 13px; border-radius: 8px; cursor: pointer; text-align: left;
  border: 1px solid var(--borde); background: var(--fondo);
  color: var(--texto); font: inherit; font-size: .82rem;
}
.aviso-cliente-lista button:hover { border-color: #6ee7b7; }

/* ---------- Categorías de una pieza del despiece ---------- */
.chips-categorias { display: flex; flex-wrap: wrap; gap: 7px; }
.chip-categoria {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 8px 6px 11px; border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, .4); background: rgba(110, 231, 183, .1);
  color: var(--texto); font-size: .78rem; font-weight: 600;
}
.chip-categoria button {
  width: 18px; height: 18px; border-radius: 50%; cursor: pointer;
  border: 0; background: rgba(255, 255, 255, .1); color: var(--gris);
  font-size: .62rem; line-height: 1;
}
.chip-categoria button:hover { background: var(--peligro); color: #150606; }
.chip-vacio { color: var(--gris); font-size: .76rem; font-style: italic; }

/* ---------- Directorio de clientes ---------- */
.lista-direcciones { display: flex; flex-direction: column; gap: 7px; }
.lista-direcciones li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 13px; border: 1px solid var(--borde); border-radius: 9px;
  background: var(--fondo); color: var(--texto); font-size: .82rem;
}
.lista-direcciones strong { color: #6ee7b7; white-space: nowrap; }
.lista-direcciones button {
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--borde); background: transparent; color: var(--peligro);
}
.lista-direcciones button:hover { background: var(--peligro); color: #150606; }

/* ---------- Registro de ventas ---------- */
.filtros-ventas {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.filtros-ventas label {
  display: flex; flex-direction: column; gap: 7px;
  color: var(--gris); font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.filtros-ventas select {
  padding: 11px 13px; border-radius: 8px; border: 1px solid var(--gris-claro);
  background: var(--panel-2); color: var(--texto); font: inherit; font-size: .86rem;
}
.tarjetas-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px; margin-bottom: 20px;
}
.kpi {
  padding: 18px; border: 1px solid var(--borde); border-radius: 13px; background: var(--panel);
}
.kpi span {
  display: block; color: var(--gris); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.kpi strong { display: block; margin-top: 7px; font-size: 1.45rem; font-weight: 800; }
.panel-grafico {
  padding: 22px; margin-bottom: 18px;
  border: 1px solid var(--borde); border-radius: 14px; background: var(--panel);
}
.panel-grafico h3 {
  margin-bottom: 16px; color: var(--texto); font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em;
}
.rejilla-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rejilla-graficos .panel-grafico { margin-bottom: 0; }
.grafico { width: 100%; height: auto; overflow: visible; }
.grafico-vacio { color: var(--gris); font-size: .84rem; padding: 26px 0; text-align: center; }
.grafico-anillo { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.grafico-anillo svg { width: 148px; height: 148px; flex-shrink: 0; }
.leyenda-grafico { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 8px; }
.leyenda-grafico li {
  display: flex; align-items: center; gap: 9px;
  color: var(--gris); font-size: .8rem;
}
.leyenda-grafico i { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.leyenda-grafico span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leyenda-grafico strong { color: var(--texto); }
.tabla-ventas td { font-size: .84rem; color: var(--gris); }
.tabla-ventas td:first-child { color: var(--texto); font-weight: 700; }

@media (max-width: 900px) {
  .rejilla-graficos { grid-template-columns: 1fr; }
}

/* ---------- Aviso flotante ---------- */
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--blanco); color: #000; font-weight: 700; font-size: .84rem;
  padding: 13px 24px; border-radius: 999px; box-shadow: var(--sombra-hover);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1); z-index: 500; pointer-events: none;
}
.toast.visible { transform: translateX(-50%) translateY(0); }
.toast.error { background: var(--peligro); color: #fff; }

@media (max-width: 1000px) {
  .admin-columnas, .admin-columnas.despiece-admin { grid-template-columns: 1fr; }
  .admin-lista ul { max-height: 44vh; }
}
@media (max-width: 640px) {
  .admin-barra { padding: 12px 16px; gap: 12px; }
  .admin-marca img { width: 100px; height: 40px; }
  .admin-marca-texto { display: none; }
  /* Estado a lo ancho y los dos botones repartidos debajo */
  .admin-estado { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .estado-punto { grid-column: 1 / -1; justify-content: center; }
  .admin-estado .btn { width: 100%; text-align: center; justify-content: center; }
  .admin-alerta { margin: 14px 16px 0; }
  .admin-tabs { gap: 4px; padding: 14px 12px 0; }
  .admin-tab { flex: 1; justify-content: center; padding: 11px 10px; font-size: .68rem; letter-spacing: .06em; }
  .admin-tab-icono { display: none; }
  .admin-cabecera { gap: 14px; margin-bottom: 18px; }
  .admin-cabecera h2 { font-size: 1.4rem; }
  .admin-editor { padding: 18px 16px; }
  .campo-grupo { padding: 15px 13px; }
  .fila-2 { grid-template-columns: 1fr; }
  .editor-acciones .btn { flex: 1; }
}

/* ============================================================
   Fotos de modelos en el inicio, videos del blog y accesos
   al despiece desde Repuestos y la tienda
   ============================================================ */
.carrusel-modelos { position: relative; }
.carrusel-modelos-viewport { position: relative; height: 570px; overflow: hidden; }
.slide-modelo {
  --dron-ancho: 80%; --dron-alto: 340px; --dron-top: 20px;
  position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(340px, .82fr); grid-template-rows: 570px;
  overflow: hidden; border-radius: 20px; background: transparent;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.slide-modelo[data-modelo="T25"] { --dron-ancho: 70%; --dron-alto: 310px; }
.slide-modelo[data-modelo="T25P"] { --dron-ancho: 75%; --dron-alto: 325px; }
.slide-modelo[data-modelo="T55"] { --dron-ancho: 74%; --dron-alto: 320px; }
.slide-modelo.activo,
.slide-modelo.saliendo-izquierda { opacity: 1; visibility: visible; }
.slide-modelo.activo { z-index: 2; pointer-events: auto; }
.slide-modelo.saliendo-izquierda { z-index: 3; }
.slide-modelo-visual {
  position: relative; isolation: isolate; min-height: 570px; display: grid; place-items: center; padding: 30px;
  background:
    linear-gradient(90deg, rgba(3, 7, 8, .1), rgba(3, 7, 8, .28)),
    linear-gradient(0deg, rgba(1, 4, 5, .36), transparent 48%),
    url("../img/inicio/concesionario-drones-fondo.webp") center / cover no-repeat;
  overflow: hidden;
}
.slide-modelo-visual::after {
  content: ""; position: absolute; z-index: 1; left: 17%; right: 17%; bottom: 10%; height: 12%;
  border-radius: 50%; background: rgba(0, 0, 0, .34); filter: blur(20px); transform: scaleX(.92);
}
.slide-modelo-visual img {
  position: relative; top: var(--dron-top); z-index: 2; width: var(--dron-ancho); max-width: none; height: var(--dron-alto); object-fit: contain;
  filter: drop-shadow(0 24px 22px rgba(0, 0, 0, .48));
  transform: translateX(0);
}
@keyframes dronEntraDerecha {
  from { transform: translateX(125%); }
  to { transform: translateX(0); }
}
@keyframes dronSaleIzquierda {
  from { transform: translateX(0); }
  to { transform: translateX(-125%); }
}
.slide-modelo.entrando-derecha .slide-modelo-visual img { animation: dronEntraDerecha .3s linear both; }
.slide-modelo.saliendo-izquierda .slide-modelo-visual img { animation: dronSaleIzquierda .3s linear both; }
.slide-modelo-info { min-width: 0; height: 570px; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 54px 44px; background: #070a0c; overflow: hidden; }
.slide-modelo-etiqueta { color: #6ee7b7; font-size: .65rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.slide-modelo-info h3 { flex: 0 0 .95em; height: .95em; min-height: .95em; margin: 10px 0 14px; overflow: hidden; white-space: nowrap; font-size: clamp(2.8rem, 5vw, 5rem); line-height: .95; }
.slide-modelo-info h3.titulo-tecleando::after {
  content: ""; display: inline-block; width: 3px; height: .78em; margin-left: 8px;
  background: #6ee7b7; box-shadow: 0 0 12px rgba(110, 231, 183, .48);
  animation: cursorTituloModelo .5s steps(1) infinite; vertical-align: -.03em;
}
@keyframes cursorTituloModelo {
  50% { opacity: 0; }
}
.slide-modelo-info > p { min-height: 4.4em; color: #aeb8be; font-size: .92rem; }
/* Las tres métricas se reparten el ancho y bajan de línea si no caben:
   en pantallas de portátil se salían del carrusel */
.slide-modelo-metricas { min-height: 72px; display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 18px; }
.slide-modelo-metricas div { flex: 1 1 96px; min-width: 0; padding: 13px; border: 1px solid #202a2f; border-radius: 10px; background: #0b0f12; }
.slide-modelo-metricas strong, .slide-modelo-metricas span { display: block; }
.slide-modelo-metricas strong { font-size: 1.35rem; }
.slide-modelo-metricas span { color: #77858e; font-size: .6rem; text-transform: uppercase; letter-spacing: .12em; }
.slide-modelo-categorias { min-height: 50px; align-content: flex-start; display: flex; flex-wrap: wrap; gap: 6px; }
.slide-modelo-categorias span { padding: 6px 9px; border-radius: 999px; background: #10161a; color: #aeb8be; font-size: .63rem; }
.slide-modelo-fuente { display: inline-block; margin-top: 14px; color: #718078; font-size: .65rem; font-weight: 600; }
.slide-modelo-fuente:hover { color: #6ee7b7; }
.slide-modelo-acciones { min-height: 46px; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.slide-modelo-info > :not(h3) { --orden-ficha: 0; }
.slide-modelo-info > p { --orden-ficha: 1; }
.slide-modelo-metricas { --orden-ficha: 2; }
.slide-modelo-categorias { --orden-ficha: 3; }
.slide-modelo-fuente { --orden-ficha: 4; }
.slide-modelo-acciones { --orden-ficha: 5; }
@keyframes fichaModeloBorra {
  from { clip-path: inset(0 0 0 0); }
  to { clip-path: inset(0 100% 0 0); }
}
@keyframes fichaModeloEscribe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}
.slide-modelo.saliendo-izquierda .slide-modelo-info > :not(h3) {
  animation: fichaModeloBorra .2s linear both;
}
.slide-modelo.entrando-derecha .slide-modelo-info > :not(h3) {
  animation: fichaModeloEscribe .19s linear both;
  animation-delay: calc(var(--orden-ficha) * 18ms);
}
.carrusel-modelos-controles { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.carrusel-modelos-flecha {
  width: 42px; height: 42px; border: 1px solid #263036; border-radius: 50%;
  background: #070a0c; color: #fff; font-size: 1rem; transition: .2s;
}
.carrusel-modelos-flecha:hover { border-color: #6ee7b7; color: #6ee7b7; transform: scale(1.06); }
/* El punto se dibuja en ::before y el botón mide 44 px de alto: en el
   celular se puede tocar sin puntería */
.carrusel-modelos-puntos { display: flex; align-items: center; gap: 0; }
.carrusel-modelos-puntos button { position: relative; width: 24px; height: 44px; padding: 0; border: 0; background: transparent; transition: width .25s; }
.carrusel-modelos-puntos button::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 7px; height: 7px; border-radius: 999px; background: #364047; transition: width .25s, background .25s;
}
.carrusel-modelos-puntos button.activo { width: 44px; }
.carrusel-modelos-puntos button.activo::before { width: 26px; background: #6ee7b7; }
.carrusel-modelos-contador { min-width: 58px; color: #68757d; font-size: .7rem; letter-spacing: .1em; }
.carrusel-modelos-contador strong { color: #fff; }
@media (max-width: 860px) {
  .carrusel-modelos-viewport { height: 880px; }
  .slide-modelo { --dron-ancho: 82%; --dron-alto: 245px; --dron-top: 14px; grid-template-columns: 1fr; grid-template-rows: 370px 510px; }
  .slide-modelo[data-modelo="T25"] { --dron-ancho: 72%; --dron-alto: 220px; }
  .slide-modelo[data-modelo="T25P"] { --dron-ancho: 78%; --dron-alto: 235px; }
  .slide-modelo[data-modelo="T55"] { --dron-ancho: 76%; --dron-alto: 230px; }
  .slide-modelo-visual { min-height: 370px; }
  .slide-modelo-info { height: 510px; padding: 34px 28px; }
}
@media (max-width: 560px) {
  .carrusel-modelos-viewport { height: 850px; }
  .slide-modelo { --dron-ancho: 80%; --dron-alto: 190px; --dron-top: 9px; grid-template-rows: 290px 560px; }
  .slide-modelo[data-modelo="T25"] { --dron-ancho: 68%; --dron-alto: 175px; }
  .slide-modelo[data-modelo="T25P"] { --dron-ancho: 74%; --dron-alto: 185px; }
  .slide-modelo[data-modelo="T55"] { --dron-ancho: 72%; --dron-alto: 180px; }
  .slide-modelo-visual { min-height: 290px; padding: 18px; }
  .slide-modelo-info { height: 560px; padding: 28px 20px; justify-content: flex-start; }
  .slide-modelo-info h3 { font-size: 2.7rem; }
  .slide-modelo-info > p { min-height: 5.6em; }
  .slide-modelo-metricas { margin: 18px 0 14px; }
}

.tarjeta-articulo .portada video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .3s;
}
.tarjeta-articulo:hover .portada video { transform: scale(1.04); }
video.articulo-portada {
  width: 100%; border-radius: var(--radio); border: 1px solid var(--borde);
  margin-bottom: 32px; display: block;
}

@media (prefers-reduced-motion: reduce) {
  .slide-modelo-visual img,
  .slide-modelo-info,
  .slide-modelo-info > *,
  .slide-modelo-info h3.titulo-tecleando::after { animation: none !important; }
}



/* ============================================================
   Páginas de servicios (mantenimiento, asesoría, aplicación…)
   ============================================================ */
.servicio-page { background: #070a0c; }
.servicio-presentacion-contenedor { padding-top: 56px; }
.servicio-presentacion {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(360px, .88fr);
  min-height: 570px; overflow: hidden; border: 1px solid #1b252b;
  border-radius: 20px; background: #06090b; box-shadow: 0 30px 80px rgba(0, 0, 0, .46);
}
.servicio-presentacion-imagen {
  --mantenimiento-fondo-y: 0px;
  --mantenimiento-fondo-x: 0px;
  --mantenimiento-fondo-escala: 1.03;
  --mantenimiento-fondo-posicion-x: 60%;
  --mantenimiento-fondo-posicion-y: 50%;
  --mantenimiento-frente-y: 0px;
  --mantenimiento-frente-x: 0px;
  position: relative; z-index: 0; min-width: 0; overflow: hidden; background: #000;
  isolation: isolate;
}
.servicio-presentacion-imagen::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 58%, #06090b 100%), linear-gradient(0deg, rgba(0, 0, 0, .48), transparent 35%);
}
.servicio-presentacion-imagen .servicio-presentacion-fondo {
  position: absolute; inset: -10%; z-index: 0;
  width: 120%; max-width: none; height: 120%; max-height: none;
  min-height: 0; object-fit: cover;
  object-position: var(--mantenimiento-fondo-posicion-x) var(--mantenimiento-fondo-posicion-y);
  transform: translate3d(var(--mantenimiento-fondo-x), var(--mantenimiento-fondo-y), 0)
    scale(var(--mantenimiento-fondo-escala));
  transform-origin: center; will-change: transform;
}
.servicio-presentacion-imagen .servicio-presentacion-primer-plano {
  position: absolute; z-index: 2; top: 0; bottom: 0; left: -8%;
  width: 108%; max-width: none; height: 100%; max-height: none;
  min-height: 0; object-fit: contain; object-position: center bottom;
  transform: translate3d(var(--mantenimiento-frente-x), var(--mantenimiento-frente-y), 0);
  will-change: transform;
}
.servicio-presentacion-imagen > img:not([class]) {
  width: 100%; height: 100%; min-height: 570px;
  object-fit: cover; object-position: 48% center;
}
.servicio-presentacion-imagen > span {
  position: absolute; left: 24px; bottom: 22px; z-index: 3; padding: 8px 12px;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px;
  background: rgba(3, 6, 7, .76); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #dbe3e6;
  font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.servicio-presentacion-contenido {
  position: relative; z-index: 3; align-self: stretch; min-width: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 52px 46px; background: #06090b;
}

@media (min-width: 1025px) {
  #seccion-mantenimiento-inicio .servicio-presentacion { min-height: 580px; }
  #seccion-mantenimiento-inicio .servicio-presentacion-contenido { padding: 36px 40px; }
  #seccion-mantenimiento-inicio .servicio-presentacion-contenido h2 {
    margin: 8px 0 14px; font-size: clamp(2rem, 3.15vw, 3.05rem);
  }
  #seccion-mantenimiento-inicio .servicio-garantias { margin: 19px 0 22px; gap: 6px; }
  #seccion-mantenimiento-inicio .servicio-garantias div { padding: 9px 12px; }
}
.servicio-etiqueta {
  display: block; color: #6ee7b7; font-size: .65rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.servicio-presentacion-contenido h2 {
  margin: 10px 0 18px; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: 1.02;
}
.servicio-presentacion-contenido > p { color: #a7b2b8; font-size: .92rem; }
.servicio-garantias { display: grid; gap: 8px; margin: 26px 0 30px; }
.servicio-garantias div {
  display: flex; align-items: center; gap: 13px; padding: 11px 13px;
  border: 1px solid #182329; border-radius: 10px; background: #0a0f12;
}
.servicio-garantias strong { color: #6ee7b7; font-size: .7rem; letter-spacing: .08em; }
.servicio-garantias span { color: #c5cdd1; font-size: .75rem; font-weight: 600; }

.grid-servicios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.servicio {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px; transition: transform .2s, border-color .2s, box-shadow .2s;
}
.servicio:hover { transform: translateY(-4px); border-color: var(--primario); box-shadow: var(--resplandor); }
.servicio .icono {
  width: 52px; height: 52px; border-radius: 10px;
  border: 1px solid var(--primario); color: var(--primario);
  display: grid; place-items: center; margin-bottom: 16px;
}
.servicio .icono svg { width: 26px; height: 26px; }
.servicio h3 {
  font-size: .95rem; font-weight: 800; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .06em;
}
.servicio p { font-size: .86rem; color: var(--gris); }
/* En servicios.html cada tarjeta es un enlace a la página del servicio */
a.servicio { display: block; color: inherit; }
a.servicio h3 { color: var(--texto); }
a.servicio:hover h3 { color: var(--primario); }
/* ============================================================
   Inicio y cierre de sesión del panel
   ============================================================ */
/* Mientras no haya sesión, del panel no se ve nada */
body.sin-sesion .admin-header,
body.sin-sesion .encabezado-admin,
body.sin-sesion .admin-main,
body.sin-sesion .admin-alerta { display: none; }
body:not(.sin-sesion) .acceso { display: none; }

.acceso {
  position: fixed; inset: 0; z-index: 400;
  display: grid; place-items: center; padding: 24px;
  background: #05070a; overflow-y: auto;
}
.acceso-fondo {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .55;
}
.acceso-overlay {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 75% 95% at 50% 42%, rgba(5, 7, 10, .3), rgba(5, 7, 10, .86)),
    linear-gradient(180deg, rgba(5, 7, 10, .55), rgba(5, 7, 10, .88));
}

.acceso-caja {
  position: relative; z-index: 2; width: min(400px, 100%);
  display: flex; flex-direction: column; gap: 15px;
  padding: 38px 34px 30px;
  border: 1px solid var(--borde); border-radius: 18px;
  background: rgba(10, 14, 18, .9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .6);
  animation: entrarAcceso .4s cubic-bezier(.2, .7, .3, 1);
}
@keyframes entrarAcceso {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.acceso-logo { width: 128px; height: auto; margin-bottom: 2px; }
.acceso-etiqueta {
  color: #6ee7b7; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em;
}
.acceso-caja h1 {
  margin-top: -6px; color: var(--texto); font-size: 1.5rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .04em;
}
.acceso-intro { margin-top: -8px; color: var(--gris); font-size: .85rem; line-height: 1.6; }

.acceso-caja label:not(.check) {
  display: flex; flex-direction: column; gap: 7px;
  color: var(--gris); font-size: .76rem; font-weight: 600; letter-spacing: .04em;
}
/* Misma casilla que en el resto del panel */
.acceso-caja .check {
  display: flex; flex-direction: row; align-items: flex-start; gap: 11px;
  padding: 12px 14px; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--fondo); color: var(--texto); font-size: .82rem; font-weight: 600;
  cursor: pointer; transition: border-color .2s;
}
.acceso-caja .check:hover { border-color: var(--gris-claro); }
.acceso-caja .check input {
  margin-top: 2px; width: 16px; height: 16px; flex-shrink: 0; accent-color: #6ee7b7;
}
.acceso-caja .check small {
  display: block; margin-top: 2px; color: var(--gris); font-weight: 500; font-size: .74rem;
}
.acceso-caja input[type="text"],
.acceso-caja input[type="password"] {
  width: 100%; background: var(--fondo); border: 1px solid var(--gris-claro);
  color: var(--texto); border-radius: 9px; padding: 12px 14px;
  font-family: inherit; font-size: .9rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.acceso-caja input:focus { border-color: #6ee7b7; box-shadow: 0 0 0 3px rgba(110, 231, 183, .12); }

/* El campo de contraseña lleva dentro el botón de ver */
.campo-clave { position: relative; display: block; }
.campo-clave input { padding-right: 74px; }
.campo-clave button {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  padding: 7px 11px; border: 1px solid var(--borde); border-radius: 7px;
  background: var(--panel-2); color: var(--gris); cursor: pointer;
  font: inherit; font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  transition: color .2s, border-color .2s;
}
.campo-clave button:hover { color: #6ee7b7; border-color: rgba(110, 231, 183, .45); }

.acceso-error {
  padding: 11px 14px; border-radius: 9px;
  border: 1px solid rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .09);
  color: #f5b5b5; font-size: .82rem;
}
.acceso-pie {
  margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--borde);
  color: var(--gris); font-size: .72rem; line-height: 1.6; text-align: center;
}

/* ---------- Quién está dentro, en la cabecera ---------- */
.sesion-usuario {
  display: flex; align-items: center; gap: 9px;
  padding-left: 12px; margin-left: 2px; border-left: 1px solid var(--borde);
}
.sesion-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 50%; background: rgba(110, 231, 183, .16); color: #6ee7b7;
  font-size: .8rem; font-weight: 800;
}
.sesion-datos { display: flex; flex-direction: column; line-height: 1.25; }
.sesion-datos strong {
  color: var(--texto); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}
.sesion-datos button {
  padding: 0; border: none; background: none; cursor: pointer;
  color: var(--gris); font: inherit; font-size: .66rem; text-align: left;
  transition: color .2s;
}
.sesion-datos button:hover { color: var(--peligro); }

@media (max-width: 640px) {
  .acceso-caja { padding: 30px 22px 24px; gap: 13px; }
  .acceso-caja h1 { font-size: 1.3rem; }
  .sesion-usuario { padding-left: 9px; gap: 7px; }
  .sesion-datos strong { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Existencias: solo se ven en el panel ----------
   La tienda no muestra nada: aunque el conteo esté en cero el producto
   sigue disponible, para que el cliente escriba. */
.chip-stock {
  align-self: center; flex-shrink: 0; margin-left: auto;
  padding: 4px 9px; border-radius: 999px; border: 1px solid transparent;
  font-size: .62rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
}
.chip-stock.disponible { border-color: rgba(110, 231, 183, .3); color: #6ee7b7; }
.chip-stock.bajo { border-color: rgba(242, 198, 109, .45); color: #f2c66d; }
.chip-stock.agotado { border-color: rgba(248, 113, 113, .5); color: #f87171; }
.check-compacto { flex-shrink: 0; padding: 8px 11px; font-size: .7rem; }
/* La barra da flex:1 y aspecto de campo a sus inputs: la casilla no lo quiere */
.admin-lista-toolbar { flex-wrap: wrap; }
.admin-lista-toolbar input[type="checkbox"] {
  flex: none; width: auto; min-width: 0; padding: 0; background: none; border-radius: 4px;
}
.admin-lista-toolbar #filtro-productos { flex: 1 1 160px; }

/* KPI sin datos todavía: se ve, pero no compite con los que sí los tienen */
.kpi-vacio strong { color: var(--gris); font-size: .9rem; }
.kpi span em { font-style: normal; opacity: .7; }

/* ---------- Unidad de venta: unidad, par o juego ---------- */
/* Esquina libre: modelo arriba-izquierda, "más vendido" arriba-derecha
   y "usado" abajo-derecha ya están ocupadas */
.badge-venta {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  padding: 4px 9px; border-radius: 999px;
  background: rgba(4, 8, 10, .82); border: 1px solid rgba(255, 255, 255, .16);
  color: #dbe3e6; font-size: .6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.unidad-venta {
  display: block; margin-top: -4px; margin-bottom: 2px;
  color: var(--gris); font-size: .72rem; letter-spacing: .02em;
}
.tarjeta-carrito .nombre-venta,
.nombre-venta { margin-top: 3px; color: var(--gris); font-size: .74rem; }
/* En la ficha del producto va al lado del precio */
.presentacion-producto {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  margin: 12px 0 4px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--panel);
}
.presentacion-producto strong {
  padding: 4px 11px; border-radius: 999px;
  background: rgba(110, 231, 183, .14); color: #6ee7b7;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
}
.presentacion-producto span { color: var(--gris); font-size: .82rem; }

/* ============================================================
   Atención 24 h y cobertura nacional
   ============================================================ */
/* Bandera de Colombia: mitad amarilla, cuarto azul, cuarto rojo */
.bandera-co {
  width: 21px; height: 14px; flex-shrink: 0;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18);
}
/* Sello de cobertura bajo la marca, en el pie */
.pie-cobertura {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  padding: 10px 13px; border: 1px solid var(--borde); border-radius: 10px;
  background: rgba(110, 231, 183, .06);
  font-size: .78rem; line-height: 1.5;
}
.pie-cobertura strong { color: #6ee7b7; }

.insignia-colombia {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 9px; border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, .35); background: rgba(110, 231, 183, .08);
  color: #6ee7b7; font-size: .67rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em;
}

.franja-urgencia {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px;
  align-items: center; padding: 44px 46px;
  border: 1px solid var(--borde); border-left: 3px solid #6ee7b7;
  border-radius: var(--radio);
  background: linear-gradient(120deg, #0a1218, #0e1a22);
}
.franja-urgencia h2 {
  margin-top: 18px; font-size: 1.9rem; line-height: 1.15; color: var(--texto);
}
.franja-urgencia h2 em {
  font-style: normal; color: #6ee7b7;
}
.franja-urgencia > div > p {
  margin-top: 14px; color: var(--gris); font-size: .93rem; line-height: 1.7;
}
.franja-urgencia-acciones { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 24px; }

.franja-urgencia-puntos { display: flex; flex-direction: column; gap: 12px; }
.punto-urgencia {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 15px; align-items: start;
  padding: 17px 19px; border: 1px solid var(--borde); border-radius: 12px;
  background: rgba(4, 8, 10, .55);
  transition: border-color .2s, transform .2s;
}
.punto-urgencia:hover { border-color: rgba(110, 231, 183, .45); transform: translateX(3px); }
.punto-urgencia .icono {
  display: grid; place-items: center; width: 44px; height: 44px;
  border-radius: 11px; background: rgba(110, 231, 183, .12); color: #6ee7b7;
}
.punto-urgencia .icono svg { width: 21px; height: 21px; }
.punto-urgencia strong {
  display: block; color: var(--texto); font-size: .92rem; font-weight: 700;
}
.punto-urgencia span {
  display: block; margin-top: 4px; color: var(--gris); font-size: .84rem; line-height: 1.6;
}

/* Sello de cobertura: el mapa se resume en un pin con la bandera */
.pin-colombia { width: 26px; height: 26px; flex-shrink: 0; }

@media (max-width: 900px) {
  .franja-urgencia { grid-template-columns: 1fr; gap: 28px; padding: 32px 26px; }
  .franja-urgencia h2 { font-size: 1.55rem; }
}
@media (max-width: 640px) {
  .franja-urgencia { padding: 26px 20px; }
  .franja-urgencia h2 { font-size: 1.35rem; }
  .franja-urgencia-acciones .btn { width: 100%; }
}

/* Aclaración legal o de alcance bajo una sección de servicio */
.nota-servicio {
  margin-top: 22px; padding: 14px 18px; font-size: .8rem; line-height: 1.7;
  color: var(--gris); border-left: 2px solid var(--borde); background: var(--panel);
  border-radius: 0 var(--radio) var(--radio) 0;
}
.servicio-mas {
  display: inline-block; margin-top: 14px; font-size: .75rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .12em; color: var(--primario);
}

.grid-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.paso {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 26px 22px; position: relative;
}
.numero-paso {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanco); color: #000;
  font-weight: 800; font-size: 1.05rem; margin-bottom: 14px;
}
.paso h3 {
  font-size: .9rem; font-weight: 800; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: .06em;
}
.paso p { font-size: .84rem; color: var(--gris); }

@media (max-width: 1024px) {
  .servicio-presentacion { grid-template-columns: 1fr; }
  .servicio-presentacion-imagen { min-height: 480px; }
  .servicio-presentacion-imagen > img:not([class]) { min-height: 480px; }
  .servicio-presentacion-imagen .servicio-presentacion-fondo { object-position: 50% center; }
  .servicio-presentacion-imagen .servicio-presentacion-primer-plano { object-position: 48% center; }
  .servicio-presentacion-imagen::after { background: linear-gradient(0deg, #06090b 0%, transparent 38%); }
  .grid-servicios { grid-template-columns: repeat(2, 1fr); }
  .grid-pasos { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .servicio-presentacion-contenedor { padding-top: 38px; }
  .servicio-presentacion { min-height: 0; border-radius: 15px; }
  .servicio-presentacion-imagen { min-height: 360px; height: 360px; }
  .servicio-presentacion-imagen > img:not([class]) { min-height: 360px; height: 360px; }
  .servicio-presentacion-imagen .servicio-presentacion-fondo {
    inset: -12%; width: 124%; height: 124%;
  }
  .servicio-presentacion-imagen .servicio-presentacion-primer-plano {
    top: 0; bottom: 0; left: -15%; width: 115%; height: 100%;
    object-fit: cover; object-position: 68% bottom;
  }
  .servicio-presentacion-imagen > span { left: 15px; bottom: 15px; max-width: calc(100% - 30px); }
  .servicio-presentacion-contenido { padding: 30px 22px 34px; }
  .grid-servicios, .grid-pasos { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .servicio-presentacion-fondo,
  .servicio-presentacion-primer-plano { transform: none; will-change: auto; }
}

/* ============================================================
   Servicios: portada editorial, tarjetas y recorrido de atención
   ============================================================ */
.servicios-index-page .servicios-editorial { padding-top: 58px; padding-bottom: 30px; }
.servicios-editorial-card {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr);
  min-height: 590px; overflow: hidden; border: 1px solid #1b252b;
  border-radius: 22px; background: #06090b;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .48);
}
.servicios-editorial-imagen { position: relative; min-width: 0; overflow: hidden; background: #050708; }
.servicios-editorial-imagen::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, transparent 56%, #06090b 100%),
    linear-gradient(0deg, rgba(3, 6, 7, .7), transparent 42%);
}
.servicios-editorial-imagen img {
  width: 100%; height: 100%; min-height: 590px; object-fit: cover; object-position: 50% center;
  transition: transform .8s cubic-bezier(.2, .75, .25, 1);
}
.servicios-editorial-card:hover .servicios-editorial-imagen img { transform: scale(1.025); }
.servicios-editorial-sello {
  position: absolute; z-index: 2; left: 25px; bottom: 23px;
  display: inline-flex; align-items: center; padding: 9px 13px;
  border: 1px solid rgba(255, 255, 255, .15); border-radius: 999px;
  background: rgba(3, 6, 7, .76); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  color: #e3e9ec; font-size: .62rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
}
.servicios-editorial-contenido {
  position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 54px 46px; background: #06090b;
}
.servicios-editorial-contenido::before {
  content: ""; position: absolute; top: 14%; right: -90px; width: 230px; height: 230px;
  border-radius: 50%; background: rgba(110, 231, 183, .07); filter: blur(34px); pointer-events: none;
}
.servicios-editorial-contenido h2 {
  margin: 12px 0 20px; font-size: clamp(2.05rem, 3.5vw, 3.5rem);
  line-height: 1.02; letter-spacing: -.035em;
}
.servicios-editorial-contenido h2 em { color: #6ee7b7; font-style: normal; }
.servicios-editorial-contenido > p { max-width: 510px; color: #aab5bb; font-size: .93rem; line-height: 1.75; }
.servicios-editorial-datos {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 30px 0;
}
.servicios-editorial-datos div {
  min-width: 0; padding: 13px 12px; border: 1px solid #192329;
  border-radius: 11px; background: #0a0f12;
}
.servicios-editorial-datos strong {
  display: block; color: #6ee7b7; font-size: .88rem; font-weight: 800; letter-spacing: .03em;
}
.servicios-editorial-datos span {
  display: block; margin-top: 4px; color: #8f9ba2; font-size: .67rem; line-height: 1.35;
}
.servicios-editorial-enlace {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; padding: 15px 17px; border-top: 1px solid #1b252b; border-bottom: 1px solid #1b252b;
  color: #e8edef; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  transition: color .2s, padding .2s, border-color .2s;
}
.servicios-editorial-enlace span { color: #6ee7b7; font-size: 1rem; }
.servicios-editorial-enlace:hover { padding-left: 21px; color: #6ee7b7; border-color: rgba(110, 231, 183, .4); }

.servicios-index-page .grid-servicios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch;
}
.servicios-index-page a.servicio {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: 350px; overflow: hidden; padding: 23px;
  border: 1px solid #192329; border-radius: 16px;
  background: linear-gradient(145deg, #0b1013 0%, #070a0c 72%);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.servicios-index-page a.servicio::before {
  content: ""; position: absolute; z-index: -1; top: -90px; right: -85px;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(110, 231, 183, .065); filter: blur(8px);
  transition: transform .35s ease, background .35s ease;
}
.servicios-index-page a.servicio:hover {
  transform: translateY(-5px); border-color: rgba(110, 231, 183, .55);
  box-shadow: 0 22px 44px rgba(0, 0, 0, .38);
}
.servicios-index-page a.servicio:hover::before { transform: scale(1.22); background: rgba(110, 231, 183, .11); }
.servicio-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 25px; }
.servicios-index-page .servicio .icono {
  width: 47px; height: 47px; margin: 0; border-color: rgba(110, 231, 183, .38);
  border-radius: 12px; background: rgba(110, 231, 183, .08); color: #6ee7b7;
  transition: transform .25s ease, background .25s ease;
}
.servicios-index-page a.servicio:hover .icono { transform: rotate(-4deg); background: rgba(110, 231, 183, .14); }
.servicios-index-page .servicio .icono svg { width: 23px; height: 23px; }
.servicio-numero {
  color: #4f5d64; font-size: .67rem; font-weight: 800; letter-spacing: .16em;
}
.servicio-contexto {
  display: block; margin-bottom: 8px; color: #6ee7b7;
  font-size: .61rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
.servicios-index-page .servicio h3 {
  margin: 0 0 11px; color: #eef2f3; font-size: 1.02rem; line-height: 1.2;
  letter-spacing: .055em; transition: color .2s;
}
.servicios-index-page .servicio p {
  margin: 0 0 22px; color: #929ea5; font-size: .82rem; line-height: 1.65;
}
.servicio-datos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.servicio-datos span {
  padding: 7px 9px; border: 1px solid #1b272d; border-radius: 999px;
  background: rgba(255, 255, 255, .018); color: #aeb8bd;
  font-size: .62rem; font-weight: 600; white-space: nowrap;
}
.servicios-index-page .servicio-mas {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  margin-top: 20px; padding-top: 15px; border-top: 1px solid #182126;
  color: #d8dfe2; font-size: .64rem; letter-spacing: .13em;
}
.servicios-index-page .servicio-mas b { color: #6ee7b7; font-size: .95rem; font-weight: 500; }
.servicios-index-page a.servicio:hover h3,
.servicios-index-page a.servicio:hover .servicio-mas { color: #6ee7b7; }

.servicio-detalle-page .servicio-detalle-intro { padding-top: 58px; padding-bottom: 30px; }
.servicio-detalle-page .grid-servicios {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch;
}
.servicio-detalle-page .servicio-informativo {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  min-height: 330px; overflow: hidden; padding: 23px;
  border: 1px solid #192329; border-radius: 16px;
  background: linear-gradient(145deg, #0b1013 0%, #070a0c 72%);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.servicio-detalle-page .servicio-informativo::before {
  content: ""; position: absolute; z-index: -1; top: -90px; right: -85px;
  width: 190px; height: 190px; border-radius: 50%;
  background: rgba(110, 231, 183, .065); filter: blur(8px);
  transition: transform .35s ease, background .35s ease;
}
.servicio-detalle-page .servicio-informativo:hover {
  transform: translateY(-4px); border-color: rgba(110, 231, 183, .5);
  box-shadow: 0 20px 40px rgba(0, 0, 0, .34);
}
.servicio-detalle-page .servicio-informativo:hover::before { transform: scale(1.2); background: rgba(110, 231, 183, .11); }
.servicio-detalle-page .servicio-informativo .icono {
  width: 47px; height: 47px; margin: 0; border-color: rgba(110, 231, 183, .38);
  border-radius: 12px; background: rgba(110, 231, 183, .08); color: #6ee7b7;
  transition: transform .25s ease, background .25s ease;
}
.servicio-detalle-page .servicio-informativo:hover .icono { transform: rotate(-4deg); background: rgba(110, 231, 183, .14); }
.servicio-detalle-page .servicio-informativo .icono svg { width: 23px; height: 23px; }
.servicio-detalle-page .servicio-informativo h3 {
  margin: 0 0 11px; color: #eef2f3; font-size: 1.02rem; line-height: 1.2;
  letter-spacing: .055em;
}
.servicio-detalle-page .servicio-informativo p {
  margin: 0 0 22px; color: #929ea5; font-size: .82rem; line-height: 1.65;
}

.servicios-ruta-encabezado {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .7fr);
  gap: 48px; align-items: end; margin-bottom: 30px;
}
.servicios-ruta-encabezado h2 { margin-top: 9px; font-size: clamp(2rem, 3.6vw, 3.3rem); letter-spacing: -.035em; }
.servicios-ruta-encabezado > p { color: #98a4aa; font-size: .9rem; line-height: 1.7; }
.servicios-ruta {
  display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(360px, .82fr);
  min-height: 570px; overflow: hidden; border: 1px solid #1b252b;
  border-radius: 20px; background: #06090b; box-shadow: 0 28px 70px rgba(0, 0, 0, .35);
}
.servicios-ruta-imagen { position: relative; min-width: 0; overflow: hidden; background: #050708; }
.servicios-ruta-imagen::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent 66%, #06090b 100%),
    linear-gradient(0deg, rgba(3, 6, 7, .82), transparent 34%);
}
.servicios-ruta-imagen img {
  width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: 52% center;
  transition: transform .8s cubic-bezier(.2, .75, .25, 1);
}
.servicios-ruta:hover .servicios-ruta-imagen img { transform: scale(1.025); }
.servicios-ruta-imagen figcaption {
  position: absolute; z-index: 2; left: 25px; right: 25px; bottom: 23px;
  display: flex; align-items: center; gap: 10px; color: #d9e0e3;
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.servicios-ruta-imagen figcaption span {
  width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #6ee7b7;
  box-shadow: 0 0 0 5px rgba(110, 231, 183, .12), 0 0 18px rgba(110, 231, 183, .75);
}
.servicios-ruta-pasos { display: flex; flex-direction: column; justify-content: center; padding: 28px 34px; }
.servicios-ruta-paso {
  display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 15px;
  padding: 20px 0; border-bottom: 1px solid #182126;
}
.servicios-ruta-paso:last-child { border-bottom: 0; }
.servicios-ruta-paso > span {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid rgba(110, 231, 183, .34); border-radius: 50%;
  color: #6ee7b7; font-size: .62rem; font-weight: 800; letter-spacing: .06em;
}
.servicios-ruta-paso h3 {
  margin: 2px 0 6px; color: #edf1f2; font-size: .82rem; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
}
.servicios-ruta-paso p { color: #8f9ba2; font-size: .78rem; line-height: 1.55; }

@media (max-width: 1024px) {
  .servicios-editorial-card { grid-template-columns: 1fr; min-height: 0; }
  .servicios-editorial-imagen { aspect-ratio: 16 / 9; }
  .servicios-editorial-imagen img { min-height: 0; }
  .servicios-editorial-imagen::after {
    background: linear-gradient(0deg, #06090b 0%, transparent 42%), linear-gradient(90deg, rgba(3, 6, 7, .18), transparent 40%);
  }
  .servicios-index-page .grid-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .servicios-ruta-encabezado { grid-template-columns: 1fr; gap: 14px; }
  .servicios-ruta { grid-template-columns: 1fr; min-height: 0; }
  .servicios-ruta-imagen { aspect-ratio: 16 / 9; }
  .servicios-ruta-imagen img { min-height: 0; }
  .servicios-ruta-imagen::after { background: linear-gradient(0deg, #06090b 0%, transparent 42%); }
  .servicios-ruta-pasos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
  .servicios-ruta-paso:nth-last-child(2) { border-bottom: 0; }
  .servicio-detalle-page .grid-servicios { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .servicios-index-page .servicios-editorial { padding-top: 38px; padding-bottom: 16px; }
  .servicios-editorial-card { border-radius: 16px; }
  .servicios-editorial-imagen { aspect-ratio: 4 / 3; }
  .servicios-editorial-imagen img { object-position: 44% center; }
  .servicios-editorial-sello { left: 15px; bottom: 15px; max-width: calc(100% - 30px); padding: 8px 10px; font-size: .54rem; }
  .servicios-editorial-contenido { padding: 31px 22px 34px; }
  .servicios-editorial-contenido h2 { font-size: clamp(1.75rem, 9vw, 2.3rem); }
  .servicios-editorial-datos { grid-template-columns: 1fr; gap: 6px; margin: 24px 0; }
  .servicios-editorial-datos div { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 8px; padding: 11px 12px; }
  .servicios-editorial-datos span { margin: 0; }
  .servicios-index-page .grid-servicios { grid-template-columns: 1fr; }
  .servicios-index-page a.servicio { min-height: 326px; padding: 21px; }
  .servicios-ruta-encabezado { margin-bottom: 22px; }
  .servicios-ruta { border-radius: 16px; }
  .servicios-ruta-imagen { aspect-ratio: 4 / 3; }
  .servicios-ruta-imagen img { object-position: 56% center; }
  .servicios-ruta-imagen figcaption { left: 16px; right: 16px; bottom: 16px; font-size: .56rem; line-height: 1.5; }
  .servicios-ruta-pasos { display: block; padding: 16px 21px; }
  .servicios-ruta-paso, .servicios-ruta-paso:nth-last-child(2) { border-bottom: 1px solid #182126; }
  .servicios-ruta-paso:last-child { border-bottom: 0; }
  .servicio-detalle-page .servicio-detalle-intro { padding-top: 38px; padding-bottom: 16px; }
  .servicio-detalle-page .grid-servicios { grid-template-columns: 1fr; }
  .servicio-detalle-page .servicio-informativo { min-height: 306px; padding: 21px; }
}

@media (prefers-reduced-motion: reduce) {
  .servicios-editorial-imagen img,
  .servicios-ruta-imagen img,
  .servicios-index-page a.servicio,
  .servicios-index-page .servicio .icono { transition: none; transform: none !important; }
}

/* ============================================================
   Mantenimiento: galería de intervenciones reales en video
   ============================================================ */
.mantenimiento-videos-seccion {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 78% 12%, rgba(110, 231, 183, .07), transparent 28%), #070a0c;
}
.mantenimiento-videos-seccion::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .018) 1px, transparent 1px);
  background-size: 58px 58px; mask-image: linear-gradient(90deg, transparent, #000 28%, #000 72%, transparent);
}
.mantenimiento-videos-seccion .contenedor { position: relative; z-index: 1; }
.mantenimiento-videos-encabezado {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .66fr);
  gap: 54px; align-items: end; margin-bottom: 31px;
}
.mantenimiento-videos-encabezado h2 {
  margin-top: 9px; max-width: 650px; font-size: clamp(2rem, 3.6vw, 3.35rem);
  line-height: 1.03; letter-spacing: -.035em;
}
.mantenimiento-videos-intro > p { color: #98a4aa; font-size: .9rem; line-height: 1.7; }
.mantenimiento-videos-contador {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  padding: 7px 11px; border: 1px solid rgba(110, 231, 183, .25); border-radius: 999px;
  background: rgba(110, 231, 183, .06); color: #6ee7b7;
  font-size: .62rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
}
.mantenimiento-videos-contador::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7;
  box-shadow: 0 0 12px rgba(110, 231, 183, .8);
}
.mantenimiento-videos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mantenimiento-video-card {
  display: grid; grid-template-columns: minmax(190px, .72fr) minmax(0, 1fr);
  min-height: 390px; overflow: hidden; border: 1px solid #1b252b;
  border-radius: 18px; background: linear-gradient(145deg, #0b1013, #06090b 76%);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.mantenimiento-video-card:hover {
  transform: translateY(-4px); border-color: rgba(110, 231, 183, .46);
  box-shadow: 0 28px 56px rgba(0, 0, 0, .42);
}
.mantenimiento-video-media { position: relative; min-width: 0; overflow: hidden; background: #000; }
.mantenimiento-video-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset -34px 0 55px rgba(3, 6, 7, .54);
}
.mantenimiento-video-media video {
  display: block; width: 100%; height: 100%; min-height: 390px;
  object-fit: cover; background: #000;
}
.mantenimiento-video-indice {
  position: absolute; z-index: 2; top: 14px; left: 14px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 50%;
  background: rgba(3, 6, 7, .72); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  color: #e7ecee; font-size: .58rem; font-weight: 800; letter-spacing: .08em;
}
.mantenimiento-video-contenido {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: 30px 28px;
}
.mantenimiento-video-contenido::before {
  content: ""; position: absolute; top: -75px; right: -70px; width: 170px; height: 170px;
  border-radius: 50%; background: rgba(110, 231, 183, .07); filter: blur(18px); pointer-events: none;
}
.mantenimiento-video-tipo {
  display: flex; align-items: center; gap: 9px; color: #6ee7b7;
  font-size: .6rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.mantenimiento-video-tipo i {
  width: 7px; height: 7px; border-radius: 50%; background: #6ee7b7;
  box-shadow: 0 0 0 5px rgba(110, 231, 183, .09), 0 0 14px rgba(110, 231, 183, .7);
}
.mantenimiento-video-contenido h3 {
  margin: 15px 0 11px; color: #eef2f3; font-size: 1.1rem;
  line-height: 1.2; letter-spacing: .035em; text-transform: uppercase;
}
.mantenimiento-video-contenido > p { color: #929ea5; font-size: .8rem; line-height: 1.65; }
.mantenimiento-video-meta { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 24px; }
.mantenimiento-video-meta span {
  padding: 7px 9px; border: 1px solid #1c282e; border-radius: 999px;
  color: #aeb8bd; font-size: .6rem; font-weight: 700;
}

@media (max-width: 1024px) {
  .mantenimiento-videos-encabezado { grid-template-columns: 1fr; gap: 14px; }
  .mantenimiento-videos-grid { grid-template-columns: 1fr; }
  .mantenimiento-video-card { grid-template-columns: minmax(220px, .54fr) minmax(0, 1fr); }
}

@media (max-width: 640px) {
  .mantenimiento-videos-encabezado { margin-bottom: 23px; }
  .mantenimiento-video-card {
    grid-template-columns: 132px minmax(0, 1fr); min-height: 250px; border-radius: 15px;
  }
  .mantenimiento-video-media video { min-height: 250px; }
  .mantenimiento-video-media::after { box-shadow: inset -18px 0 28px rgba(3, 6, 7, .4); }
  .mantenimiento-video-indice { top: 10px; left: 10px; width: 31px; height: 31px; }
  .mantenimiento-video-contenido { padding: 20px 17px; }
  .mantenimiento-video-contenido h3 { margin: 12px 0 8px; font-size: .85rem; }
  .mantenimiento-video-contenido > p { font-size: .71rem; line-height: 1.55; }
  .mantenimiento-video-meta { margin-top: 16px; gap: 5px; }
  .mantenimiento-video-meta span { padding: 6px 7px; font-size: .54rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mantenimiento-video-card { transition: none; transform: none !important; }
}

/* ============================================================
   Barra de anuncios (Ajustes) y pestaña Ajustes del panel
   ============================================================ */
/* Fija abajo: acompaña al visitante en toda la página */
.barra-anuncio {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--blanco); color: #000;
  text-align: center; font-weight: 700; font-size: .82rem;
  letter-spacing: .06em; padding: 12px 16px; line-height: 1.4;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .45);
}
/* Deja sitio al final para que la barra no tape el pie. El alto real lo
   mide js/layout.js (--alto-anuncio): en el celular puede ocupar dos líneas */
body.con-anuncio { padding-bottom: var(--alto-anuncio, 48px); }
/* Y la invitación de WhatsApp sube para no quedar debajo */
body.con-anuncio .invitacion-cotizar { bottom: calc(var(--alto-anuncio, 48px) + 14px); }
@media (max-width: 560px) {
  .barra-anuncio { font-size: .74rem; padding: 10px 14px; letter-spacing: .03em; }
  body.con-anuncio .invitacion-cotizar { bottom: calc(var(--alto-anuncio, 56px) + 12px); }
}

/* ============================================================
   Video hasta el borde superior también en las páginas internas:
   cuando el header flota, la cabecera de sección crece y deja
   espacio para el menú de vidrio encima del video
   ============================================================ */
.header--sobre-video + .encabezado-pagina {
  min-height: 400px;
  padding-top: 150px;
  padding-bottom: 64px;
}
@media (max-width: 720px) {
  .header--sobre-video + .encabezado-pagina {
    min-height: 330px;
    padding-top: 118px;
    padding-bottom: 48px;
  }
}

/* ============================================================
   Cabeceras de sección a pantalla superior: el video llega
   hasta arriba y el header de vidrio flota encima (como el index)
   ============================================================ */
.header--sobre-video + .encabezado-pagina {
  min-height: 400px;
  padding-top: 170px; padding-bottom: 70px;
}

/* ============================================================
   Despiece profesional
   ============================================================ */
.despiece-page,
.despiece-modulo {
  --verde-tecnico: #6ee7b7;
  --verde-fondo: rgba(110, 231, 183, .1);
  --ambar-tecnico: #f5c66d;
  --ambar-fondo: rgba(245, 198, 109, .1);
  background: #070a0c;
}

.despiece-page .encabezado-despiece {
  min-height: 440px;
  text-align: left;
}
.despiece-page .encabezado-despiece .encabezado-overlay {
  background: linear-gradient(90deg, rgba(5, 8, 10, .96) 0%, rgba(5, 8, 10, .76) 48%, rgba(5, 8, 10, .28) 100%),
    linear-gradient(0deg, #070a0c 0%, transparent 35%);
}
.encabezado-despiece-contenido {
  position: relative; z-index: 3; width: min(1200px, calc(100% - 40px));
  margin: 0 auto; padding-top: 35px;
}
.encabezado-despiece-contenido .eyebrow-despiece,
.sobrelinea-despiece {
  display: block; color: var(--verde-tecnico); font-size: .67rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.encabezado-despiece-contenido h1 {
  max-width: 760px; margin-top: 12px; font-size: clamp(2.25rem, 5vw, 4.5rem);
  line-height: .98; letter-spacing: -.035em; text-transform: none;
}
.encabezado-despiece-contenido > p {
  max-width: 610px; margin-top: 20px; color: #bbc4cc; font-size: 1.05rem; line-height: 1.6;
}
.beneficios-despiece { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 28px; }
.beneficios-despiece span {
  display: inline-flex; align-items: center; gap: 8px; color: #dbe1e6;
  font-size: .76rem; font-weight: 600; letter-spacing: .04em;
}
.beneficios-despiece span::before {
  content: "✓"; display: grid; place-items: center; width: 18px; height: 18px;
  border-radius: 50%; background: var(--verde-fondo); color: var(--verde-tecnico); font-size: .65rem;
}

.despiece-principal { padding-bottom: 80px; }
.selector-despiece { padding: 46px 0 42px; border-bottom: 1px solid var(--borde); }
.selector-despiece-cabecera,
.selector-despiece-cabecera > div,
.estacion-cabecera,
.barra-despiece,
.panel-diagrama-cabecera,
.panel-diagrama-pie,
.catalogo-piezas-cabecera {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.selector-despiece-cabecera > div { justify-content: flex-start; }
.selector-despiece-cabecera > p { max-width: 390px; color: var(--gris); font-size: .86rem; }
.paso-despiece {
  display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px;
  border: 1px solid #304039; border-radius: 50%; color: var(--verde-tecnico);
  font-size: .72rem; font-weight: 700;
}
.selector-despiece h2,
.estacion-cabecera h2 { font-size: clamp(1.35rem, 2vw, 1.8rem); line-height: 1.2; margin-top: 4px; }

/* Selector de modelo: carrusel horizontal con flechas */
.carrusel-tabs { display: flex; align-items: center; gap: 12px; padding: 24px 0 0; }
.flecha-tabs {
  flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid var(--gris-claro); border-radius: 50%;
  background: transparent; color: var(--texto); font-size: 1rem; cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.flecha-tabs:hover:not(:disabled) { border-color: var(--verde-tecnico); color: var(--verde-tecnico); }
.flecha-tabs:disabled { opacity: .25; cursor: default; }
.despiece-modulo .tabs-modelos {
  display: flex; flex-wrap: nowrap; gap: 14px; padding: 4px 2px;
  flex: 1; min-width: 0;
  overflow-x: auto;
  /* Sin scroll-behavior ni anclaje aquí: combinados impiden que las
     flechas desplacen por JavaScript. El suavizado lo pide despiece.js
     en cada scrollBy, y el anclaje solo se activa en táctil. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.despiece-modulo .tabs-modelos::-webkit-scrollbar { display: none; }
.despiece-modulo .tab-modelo {
  position: relative; flex: 0 0 238px; scroll-snap-align: start;
  min-width: 0; min-height: 128px; padding: 15px;
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: #0c1114; border: 1px solid #1d272d; border-radius: 12px;
  text-transform: none; letter-spacing: 0; overflow: hidden;
}
.despiece-modulo .tab-modelo::before {
  content: ""; position: absolute; inset: auto 0 0; height: 2px;
  background: var(--verde-tecnico); transform: scaleX(0); transition: transform .25s;
}
.despiece-modulo .tab-modelo:hover { transform: translateY(-2px); border-color: #39484f; background: #10171a; }
.despiece-modulo .tab-modelo.activo {
  color: var(--texto); background: linear-gradient(135deg, #121c19, #0d1316); border-color: #3b6a58;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .22);
}
.despiece-modulo .tab-modelo.activo::before { transform: scaleX(1); }
.tab-modelo-imagen {
  display: grid; place-items: center; width: 84px; height: 84px; flex: 0 0 84px;
  border-radius: 10px; background: #000;
}
.tab-modelo-imagen img { width: 80px; height: 72px; padding: 4px; object-fit: contain; }
.tab-modelo-info { display: flex; min-width: 0; flex-direction: column; line-height: 1; }
.tab-modelo-info small { color: var(--gris); font-size: .55rem; letter-spacing: .14em; }
.tab-modelo-info strong { margin: 7px 0 9px; color: var(--texto); font-size: 1.4rem; }
.tab-modelo-info em { color: #78858f; font-size: .66rem; font-style: normal; text-transform: none; }
.tab-modelo-check {
  position: absolute; top: 9px; right: 9px; display: grid; place-items: center;
  width: 18px; height: 18px; border-radius: 50%; background: var(--verde-tecnico);
  color: #07110d; font-size: .62rem; opacity: 0; transform: scale(.7); transition: .2s;
}
.tab-modelo.activo .tab-modelo-check { opacity: 1; transform: scale(1); }

.estacion-despiece { padding-top: 42px; }
.estacion-cabecera { align-items: flex-end; }
.estacion-cabecera h2 span { color: var(--gris); font-weight: 500; }
.metricas-despiece { display: flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; }
.metricas-despiece div { min-width: 175px; padding: 10px 15px; border-right: 1px solid var(--borde); }
.metricas-despiece div:last-child { border-right: 0; }
.metricas-despiece strong { display: block; color: var(--texto); font-size: 1.1rem; line-height: 1; }
.metricas-despiece span { display: block; margin-top: 5px; color: var(--gris); font-size: .6rem; text-transform: uppercase; letter-spacing: .08em; }

.barra-despiece { margin: 22px 0 16px; }
.buscador-piezas {
  width: min(100%, 470px); height: 46px; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; background: #0d1215; border: 1px solid var(--borde); border-radius: 9px;
  transition: border-color .2s, box-shadow .2s;
}
.buscador-piezas:focus-within { border-color: #466b5d; box-shadow: 0 0 0 3px var(--verde-fondo); }
.buscador-piezas svg { width: 18px; fill: none; stroke: var(--gris); stroke-width: 1.8; }
.buscador-piezas input { min-width: 0; flex: 1; background: none; border: 0; outline: 0; color: var(--texto); font: inherit; font-size: .82rem; }
.buscador-piezas input::placeholder { color: #6f7a83; }
.buscador-piezas kbd { padding: 2px 7px; border: 1px solid #2b353b; border-radius: 5px; color: #79858e; font-size: .68rem; }
.leyenda-disponibilidad { display: flex; align-items: center; gap: 18px; color: var(--gris); font-size: .7rem; }
.leyenda-disponibilidad span { display: inline-flex; align-items: center; gap: 7px; }
.leyenda-disponibilidad i { width: 7px; height: 7px; border-radius: 50%; }
.leyenda-disponibilidad i.disponible { background: var(--verde-tecnico); box-shadow: 0 0 0 4px var(--verde-fondo); }
.leyenda-disponibilidad i.por-encargo { background: var(--ambar-tecnico); box-shadow: 0 0 0 4px var(--ambar-fondo); }

.despiece-modulo .layout-despiece {
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, .8fr); gap: 16px; padding: 0; align-items: start;
}
.panel-diagrama,
.detalle-pieza,
.catalogo-piezas { border: 1px solid var(--borde); border-radius: 12px; background: #0c1114; overflow: hidden; }
.panel-diagrama-cabecera { min-height: 68px; padding: 12px 16px; border-bottom: 1px solid var(--borde); }
.panel-diagrama-cabecera p { margin-top: 2px; color: var(--gris); font-size: .68rem; }
.estado-en-linea { display: inline-flex; align-items: center; gap: 7px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.estado-en-linea i { width: 7px; height: 7px; border-radius: 50%; background: var(--verde-tecnico); box-shadow: 0 0 8px var(--verde-tecnico); }
.controles-diagrama { display: flex; align-items: center; border: 1px solid #273138; border-radius: 7px; overflow: hidden; }
.controles-diagrama button,
.controles-diagrama span { width: 34px; height: 32px; display: grid; place-items: center; background: #11171b; border: 0; border-right: 1px solid #273138; color: #c9d0d5; }
.controles-diagrama span { width: 52px; color: var(--gris); font-size: .65rem; }
.controles-diagrama button:last-child { border-right: 0; }
.controles-diagrama button:hover:not(:disabled) { background: #1a2227; color: #fff; }
.controles-diagrama button:disabled { opacity: .3; cursor: default; }
.diagrama-viewport {
  position: relative; min-height: 500px; max-height: 680px; overflow: auto;
  background: #000;
  scrollbar-color: #344048 #0a0e11; scrollbar-width: thin;
}
.despiece-modulo .diagrama {
  --zoom-despiece: 1; width: calc(100% * var(--zoom-despiece)); min-width: 100%; height: 500px;
  display: grid; place-items: center; border: 0; border-radius: 0; overflow: visible;
  margin: 0 auto; background: #000; transition: width .25s ease;
}
.despiece-modulo .diagrama::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 11, 13, .35), transparent 15%, transparent 85%, rgba(7, 11, 13, .35));
}
.despiece-modulo .diagrama img { width: 100%; height: 100%; padding: 28px; object-fit: contain; background: transparent; }
.despiece-modulo .punto-despiece {
  width: 32px; height: 32px; background: #f4f7f8; border: 3px solid #0a0e10;
  color: #07100d; box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 5px 16px rgba(0,0,0,.45);
  font-size: .72rem; z-index: 5;
}
.despiece-modulo .punto-despiece::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 16px;
  background: linear-gradient(var(--verde-tecnico), transparent); opacity: .7;
}
.despiece-modulo .punto-despiece::after { inset: -8px; border-color: rgba(110, 231, 183, .5); }
.despiece-modulo .punto-despiece.sin-stock::after { border-color: rgba(245, 198, 109, .55); }
.despiece-modulo .punto-despiece:hover,
.despiece-modulo .punto-despiece.resaltado { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 6px var(--verde-fondo); }
.despiece-modulo .punto-despiece.activo { background: var(--verde-tecnico); color: #06100c; box-shadow: 0 0 0 5px var(--verde-fondo), 0 0 26px rgba(110, 231, 183, .35); }
.despiece-modulo .punto-despiece.filtrado { opacity: .1; pointer-events: none; }
.vista-previa-pieza {
  position: absolute; left: calc(100% + 14px); top: 50%; width: 285px;
  padding: 12px 14px; border: 1px solid #354249; border-radius: 9px;
  background: rgba(12, 17, 20, .97); box-shadow: 0 14px 35px rgba(0, 0, 0, .5);
  color: var(--texto); text-align: left; pointer-events: none;
  opacity: 0; visibility: hidden; transform: translate(5px, -50%);
  transition: opacity .18s, transform .18s, visibility .18s; z-index: 20;
}
.vista-previa-pieza::before {
  content: ""; position: absolute; right: 100%; top: 50%; width: 14px; height: 1px;
  background: #536169;
}
.vista-previa-pieza strong {
  display: block; margin-bottom: 6px; color: var(--verde-tecnico); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .08em;
}
.vista-producto {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 9px;
  min-height: 50px; margin-top: 6px; padding: 5px; border: 1px solid #202b30;
  border-radius: 7px; background: #080d0f;
}
.vista-producto img {
  width: 48px; height: 40px; object-fit: contain; border-radius: 5px; background: #12191c;
}
.vista-producto small { display: block; color: #c6ced3; font-size: .66rem; line-height: 1.3; }
.vista-producto.sin-imagen { grid-template-columns: 1fr; min-height: 34px; padding: 8px; }
.punto-despiece:hover .vista-previa-pieza,
.punto-despiece:focus-visible .vista-previa-pieza { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.punto-despiece.tooltip-izquierda .vista-previa-pieza { left: auto; right: calc(100% + 14px); }
.punto-despiece.tooltip-izquierda .vista-previa-pieza::before { left: 100%; right: auto; }
.sin-resultados-diagrama {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 8;
  width: min(360px, 80%); padding: 16px; text-align: center; color: var(--gris); font-size: .8rem;
  background: rgba(12, 17, 20, .92); border: 1px solid var(--borde); border-radius: 9px;
}
.panel-diagrama-pie { min-height: 40px; padding: 0 16px; border-top: 1px solid var(--borde); color: #68747d; font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }

.panel-lateral-despiece { display: grid; gap: 12px; position: sticky; top: 100px; }
.detalle-pieza { min-height: 258px; padding: 20px; }
.detalle-pieza-vacio { min-height: 216px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.detalle-pieza-icono { display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 14px; border: 1px solid #2c383e; border-radius: 12px; background: #10171a; }
.detalle-pieza-icono svg { width: 23px; fill: none; stroke: #718089; stroke-width: 1.4; }
.detalle-pieza-vacio h3 { margin: 6px 0; font-size: 1.05rem; }
.detalle-pieza-vacio > p:last-child { max-width: 280px; color: var(--gris); font-size: .76rem; }
.detalle-pieza-cabecera { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.detalle-numero { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--verde-tecnico); color: #07110d; font-weight: 800; font-size: .72rem; }
.estado-pieza,
.lista-pieza-estado { padding: 4px 8px; border-radius: 999px; font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.estado-pieza.disponible,
.lista-pieza-estado.disponible { background: var(--verde-fondo); color: var(--verde-tecnico); }
.estado-pieza.por-encargo,
.lista-pieza-estado.por-encargo { background: var(--ambar-fondo); color: var(--ambar-tecnico); }
.cerrar-detalle { margin-left: auto; width: 30px; height: 30px; border: 0; border-radius: 7px; background: #131a1e; color: var(--gris); font-size: 1.1rem; }
.cerrar-detalle:hover { background: #1d262b; color: #fff; }
.detalle-pieza > h3 { margin: 6px 0 8px; font-size: 1.35rem; }
.detalle-descripcion { color: #98a4ad; font-size: .78rem; }
.mini-productos-pieza { display: grid; gap: 6px; margin-top: 16px; }
.mini-producto-pieza { display: flex; align-items: center; gap: 10px; padding: 7px; border: 1px solid #1d272c; border-radius: 8px; background: #090d10; }
.mini-producto-pieza:hover { border-color: #3a4a50; }
.mini-producto-pieza img { width: 42px; height: 42px; flex: 0 0 42px; object-fit: contain; border-radius: 6px; background: #11171a; }
.mini-producto-pieza span { min-width: 0; }
.mini-producto-pieza strong { display: block; overflow: hidden; color: #dce2e6; font-size: .68rem; white-space: nowrap; text-overflow: ellipsis; }
.mini-producto-pieza small { color: var(--verde-tecnico); font-size: .66rem; font-weight: 600; }
.btn-detalle-pieza { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; padding: 12px 14px; border-radius: 8px; background: #f3f6f7; color: #070a0c; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.btn-detalle-pieza:hover { background: var(--verde-tecnico); }
.btn-detalle-pieza svg { width: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.btn-detalle-consulta { background: var(--verde-tecnico); }

.catalogo-piezas { padding: 16px; }
.catalogo-piezas-cabecera { padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.catalogo-piezas-cabecera h3 { margin-top: 2px; font-size: 1rem; }
.catalogo-piezas-cabecera > span { color: var(--gris); font-size: .66rem; }
.catalogo-piezas ol { max-height: 360px; margin-top: 8px; overflow-y: auto; list-style: none; scrollbar-color: #344048 transparent; scrollbar-width: thin; }
.catalogo-piezas li {
  display: grid; grid-template-columns: 32px minmax(0, 1fr) 16px; align-items: center; gap: 9px;
  min-height: 54px; padding: 7px 6px; border-bottom: 1px solid #171f23; cursor: pointer; outline: none;
}
.catalogo-piezas li:last-child { border-bottom: 0; }
.catalogo-piezas li:hover,
.catalogo-piezas li:focus,
.catalogo-piezas li.activo { background: #12191d; }
.catalogo-piezas .numero { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #2c373d; border-radius: 7px; color: #abb5bc; font-size: .63rem; font-weight: 700; }
.catalogo-piezas li.activo .numero { background: var(--verde-tecnico); border-color: var(--verde-tecnico); color: #07110d; }
.lista-pieza-info { min-width: 0; }
.lista-pieza-info strong { display: block; overflow: hidden; font-size: .76rem; white-space: nowrap; text-overflow: ellipsis; }
.lista-pieza-info small { display: block; overflow: hidden; color: #6f7c85; font-size: .61rem; white-space: nowrap; text-overflow: ellipsis; }
.lista-pieza-flecha { color: #617078; opacity: 0; transform: translateX(-4px); transition: .2s; }
.catalogo-piezas li:hover .lista-pieza-flecha,
.catalogo-piezas li.activo .lista-pieza-flecha { opacity: 1; transform: none; }
.catalogo-piezas .lista-piezas-vacia { display: flex; min-height: 100px; flex-direction: column; align-items: center; justify-content: center; color: var(--gris); cursor: default; }
.catalogo-piezas .lista-piezas-vacia small { font-size: .7rem; }

.ayuda-despiece { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; padding: 14px; border: 1px solid #28473a; border-radius: 10px; background: linear-gradient(135deg, rgba(37, 211, 102, .09), rgba(12, 17, 20, .8)); }
.ayuda-despiece:hover { border-color: #3b765a; background: rgba(37, 211, 102, .12); }
.ayuda-despiece-icono { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: rgba(37, 211, 102, .14); color: #61e18f; font-size: 1rem; font-weight: 800; }
.ayuda-despiece strong { display: block; font-size: .72rem; }
.ayuda-despiece small { display: block; margin-top: 2px; color: #84918a; font-size: .62rem; }
.ayuda-despiece > span:last-child { color: #61e18f; }

@media (max-width: 1100px) {
  .despiece-modulo .tab-modelo { flex-basis: 218px; }
  .despiece-modulo .layout-despiece { grid-template-columns: minmax(0, 1.3fr) minmax(320px, .8fr); }
  .tab-modelo-imagen { width: 62px; height: 62px; flex-basis: 62px; }
  .diagrama-viewport { min-height: 420px; }
  .despiece-modulo .diagrama { height: 420px; }
}

@media (max-width: 820px) {
  .despiece-page .encabezado-despiece { min-height: 400px; }
  .despiece-page .encabezado-despiece .encabezado-overlay { background: linear-gradient(0deg, #070a0c, rgba(5, 8, 10, .6) 60%, rgba(5, 8, 10, .5)); }
  .selector-despiece-cabecera,
  .estacion-cabecera { align-items: flex-start; flex-direction: column; }
  .despiece-modulo .tabs-modelos { padding: 4px 2px; scroll-snap-type: x proximity; }
  .despiece-modulo .tab-modelo { flex-basis: 210px; min-height: 118px; }
  .flecha-tabs { flex-basis: 38px; width: 38px; height: 38px; }
  .metricas-despiece { width: 100%; }
  .metricas-despiece div { flex: 1; min-width: 0; }
  .despiece-modulo .layout-despiece { grid-template-columns: 1fr; }
  .panel-lateral-despiece { position: static; }
  .detalle-pieza { min-height: 0; }
}

@media (max-width: 560px) {
  /* Con el dedo se desliza directamente: las flechas solo quitarían sitio */
  .flecha-tabs { display: none; }
  .carrusel-tabs { gap: 0; }
  .despiece-modulo .tab-modelo { flex-basis: 200px; }
  .encabezado-despiece-contenido { width: calc(100% - 32px); }
  .encabezado-despiece-contenido h1 { font-size: 2.35rem; }
  .beneficios-despiece { gap: 10px 16px; }
  .beneficios-despiece span { font-size: .65rem; }
  .selector-despiece { padding-top: 34px; }
  .selector-despiece-cabecera > p { display: none; }
  .barra-despiece { align-items: stretch; flex-direction: column; }
  .leyenda-disponibilidad { padding-left: 4px; }
  .metricas-despiece div { padding: 9px; }
  .metricas-despiece span { font-size: .5rem; }
  .panel-diagrama-cabecera { align-items: flex-start; }
  .panel-diagrama-cabecera p { display: none; }
  .diagrama-viewport { min-height: 300px; }
  .despiece-modulo .diagrama { height: 300px; }
  .despiece-modulo .diagrama img { padding: 18px; }
  .panel-diagrama-pie span:first-child { display: none; }
  .catalogo-piezas li { grid-template-columns: 32px minmax(0, 1fr) 16px; }
  .lista-pieza-flecha { display: none; }
  .lista-pieza-estado { font-size: .52rem; }
}
@media (max-width: 720px) {
  .header--sobre-video + .encabezado-pagina {
    min-height: 340px;
    padding-top: 130px; padding-bottom: 56px;
  }
}

/* ============================================================
   Ajustes globales y preloader de inicio
   ============================================================ */
body {
  overflow-x: hidden;
}
.preloader-web {
  position: fixed; inset: 0; z-index: 100001; display: grid; place-items: center;
  pointer-events: none; background: #030506;
  transition: opacity .28s ease, visibility .28s ease;
}
.preloader-web-contenido {
  display: grid; justify-items: center; gap: 12px; padding: 16px 22px;
  border-radius: 14px; background: rgba(3, 5, 6, .88);
}
.preloader-web img {
  width: 158px; height: 66px; object-fit: contain;
  animation: logoPreloader 1.1s ease-in-out infinite;
}
.preloader-web-barra {
  width: 62px; height: 2px; overflow: hidden; border-radius: 999px;
  background: rgba(255, 255, 255, .1);
}
.preloader-web-barra::after {
  content: ""; display: block; width: 50%; height: 100%; background: #6ee7b7;
  animation: barraPreloader .9s ease-in-out infinite;
}
.preloader-web.oculto { opacity: 0; visibility: hidden; }
@keyframes logoPreloader {
  0%, 100% { opacity: .72; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes barraPreloader {
  from { transform: translateX(-110%); }
  to { transform: translateX(210%); }
}
@media (prefers-reduced-motion: reduce) {
  .preloader-web { display: none; }
}

/* ---------- Cabecera del explorador y versión compacta ---------- */
.acciones-estacion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.btn-toggle-despiece { width: auto; margin-top: 0; padding: 9px 16px; }
.despiece-modulo button.btn-detalle-pieza { width: 100%; border: 0; font: inherit; font-size: .7rem; }

/* Despiece dentro del catálogo por modelo (tienda.html) */
.despiece-tienda { padding: 30px 0 8px; }
.despiece-compacto .estacion-despiece { padding-top: 0; }
.despiece-compacto .layout-despiece { grid-template-columns: minmax(0, 1.4fr) minmax(320px, .75fr); }
.despiece-compacto .diagrama { height: 420px; }
.despiece-compacto .catalogo-piezas ol { max-height: 260px; }
.despiece-compacto .detalle-pieza { min-height: 230px; }

@media (max-width: 820px) {
  .despiece-compacto .layout-despiece { grid-template-columns: 1fr; }
  .despiece-compacto .estacion-cabecera { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 560px) {
  .despiece-compacto .diagrama { height: 300px; }
  /* Contador y botón comparten fila para no empujar el diagrama */
  .acciones-estacion { width: 100%; flex-wrap: nowrap; justify-content: space-between; }
  .despiece-compacto .metricas-despiece { width: auto; flex: 1; }
  .despiece-compacto .metricas-despiece div { min-width: 0; }
  .despiece-compacto .btn-toggle-despiece { flex: 0 0 auto; padding: 9px 12px; }
}

/* Categoría directa en la barra lateral (ej. Equipos usados) */
.categoria-suelta > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 8px; border-radius: 4px;
  font-weight: 700; font-size: .84rem; letter-spacing: .06em;
  color: var(--texto);
}
.categoria-suelta > a:hover { background: var(--panel-2); color: var(--primario); }
.categoria-suelta > a.activo { background: var(--blanco); color: #000; }
.categoria-suelta > a.activo .conteo { color: rgba(0,0,0,.6); }
.categoria-suelta > a .conteo { font-size: .72rem; color: var(--gris); }


/* ============================================================
   Preguntas frecuentes (SEO): acordeones en inicio y mantenimiento
   ============================================================ */
.lista-faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq-item {
  background: var(--panel); border: 1px solid var(--borde);
  border-radius: var(--radio); overflow: hidden;
  transition: border-color .25s;
}
.faq-item:hover, .faq-item[open] { border-color: var(--primario); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 16px 46px 16px 18px;
  font-weight: 700; font-size: .95rem; color: var(--texto);
  position: relative; user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%;
  transform: translateY(-50%); color: var(--gris);
  font-size: 1.2rem; font-weight: 400; transition: transform .25s;
}
.faq-item[open] summary::after { content: "\2212"; color: var(--primario); }
.faq-item > p {
  padding: 0 18px 18px; color: var(--gris);
  font-size: .9rem; line-height: 1.65;
}
.faq-item > p a { color: var(--texto); text-decoration: underline; }
.faq-item > p a:hover { color: var(--primario); }
.faq-item > p strong { color: var(--texto); font-weight: 700; }
/* Respuestas que enumeran causas o pasos */
.faq-item > p:not(:last-of-type) { padding-bottom: 12px; }
.faq-item > ol, .faq-item > ul {
  margin: 0; padding: 0 18px 14px 38px;
  color: var(--gris); font-size: .9rem; line-height: 1.65;
}
.faq-item > ol li::marker { color: var(--primario); font-weight: 700; }
.faq-item > ol li + li, .faq-item > ul li + li { margin-top: 10px; }
.faq-item > ol strong, .faq-item > ul strong { color: var(--texto); }


/* ============================================================
   Transición entre páginas: fundido de entrada y de salida
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  body { animation: pagina-entrando .32s ease-out; }
  body.pagina-saliendo { opacity: 0; transition: opacity .2s ease; }
}
@keyframes pagina-entrando {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* ============================================================
   Título de portada con efecto de escritura
   ============================================================ */
/* Texto solo para lectores de pantalla y buscadores */
.solo-lectores {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Reserva la altura de las dos líneas: el texto no salta al escribirse */
.hero-titular .hero-slogan { min-height: 2.04em; }
.hero-escritura { display: block; }
.hero-cursor {
  display: inline-block; width: .055em; height: .78em;
  margin-left: .07em; vertical-align: -.02em;
  background: var(--primario);
  animation: parpadeo-cursor 1.05s steps(1, end) infinite;
}
@keyframes parpadeo-cursor {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cursor { display: none; }
}


/* ============================================================
   Portada: el título va arriba y el texto con los botones
   debajo. Al quedar apilados, el ancho del título animado ya
   no puede desplazar ni bajar el bloque de botones.
   ============================================================ */
.hero-video-abajo {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 22px;
}
.hero-titular { width: 100%; min-width: 0; }
.hero-lateral { max-width: 620px; padding-bottom: 0; }


/* ============================================================
   Reel horizontal de productos (portada: más vendidos)
   ============================================================ */
.reel-productos {
  position: relative; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.reel-pista {
  display: flex; gap: 22px; width: max-content;
  /* Medio espacio: corrige el desplazamiento del bucle (ver keyframes) */
  --reel-medio-espacio: 11px;
  animation: correr-reel 40s linear infinite;
}
/* Se detiene al pasar el mouse o al enfocar con el teclado, para
   poder leer la tarjeta y hacer clic con calma */
.reel-productos:hover .reel-pista,
.reel-productos:focus-within .reel-pista { animation-play-state: paused; }
.reel-pista .tarjeta-producto { flex: 0 0 250px; }
/* Las tarjetas del reel aparecen desplazándose en horizontal: no deben
   quedarse ocultas esperando la animación de entrada por scroll */
.reel-pista .tarjeta-producto.reveal {
  opacity: 1; transform: none; transition: none;
}
/* La pista contiene dos copias de la lista: se desplaza exactamente una
   copia (la mitad del ancho, más medio espacio) y el bucle no salta */
@keyframes correr-reel {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - var(--reel-medio-espacio))); }
}
@media (prefers-reduced-motion: reduce) {
  .reel-pista { animation: none; }
  .reel-productos { overflow-x: auto; }
}
@media (max-width: 560px) {
  .reel-pista { gap: 16px; --reel-medio-espacio: 8px; }
  .reel-pista .tarjeta-producto { flex: 0 0 210px; }
}

/* La ubicación reutilizada en la portada no necesita el margen
   superior que lleva dentro de la página de contacto */
.ubicacion-inicio { margin-top: 0; }


/* ============================================================
   Marca de agua sobre las fotos del catálogo
   Se activa con la clase .con-marca-agua en <body>, que pone
   layout.js según el ajuste "marcaAgua" de data/ajustes.json.
   Es una superposición: no modifica los archivos de imagen.
   ============================================================ */
/* Todo contenedor con marca necesita posición propia (si no, la capa se
   anclaría a la página entera) y recorte, porque el patrón se dibuja
   más grande que la foto para poder inclinarlo */
.con-marca-agua .tarjeta-producto .imagen,
.con-marca-agua .galeria .principal,
.con-marca-agua .tarjeta-articulo .portada,
.con-marca-agua .slide-modelo-visual {
  position: relative; overflow: hidden;
}
.con-marca-agua .tarjeta-producto .imagen::before,
.con-marca-agua .galeria .principal::before,
.con-marca-agua .tarjeta-articulo .portada::before,
.con-marca-agua .slide-modelo-visual::before {
  content: "";
  /* Se agranda y se inclina para que el logo repetido cubra la foto
     en diagonal, como una marca de agua incrustada */
  position: absolute; inset: -60%; z-index: 1;
  pointer-events: none;
  transform: rotate(-24deg);
  background: url("../logo.png") repeat;
  background-size: 120px auto;
  opacity: .13;
  /* La sombra la mantiene legible también sobre fotos claras */
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5));
}
/* Imágenes grandes: el mismo patrón con piezas algo mayores */
.con-marca-agua .galeria .principal::before { background-size: 150px auto; opacity: .12; }
.con-marca-agua .slide-modelo-visual::before { background-size: 165px auto; opacity: .1; }
.con-marca-agua .slide-modelo-visual.sin-marca-agua::before {
  content: none;
  display: none;
}

/* ============================================================
   Tienda en móvil: filtros plegables y tarjetas compactas
   ============================================================ */
.btn-filtros-movil { display: none; }

@media (max-width: 860px) {
  .layout-tienda { gap: 14px; padding: 18px 0 48px; }

  .buscador-tienda { padding: 10px 13px; }
  .buscador-tienda input { font-size: .86rem; }
  .btn-filtros-movil {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    width: 100%; padding: 14px 16px; cursor: pointer;
    background: var(--panel); color: var(--texto);
    border: 1px solid var(--borde); border-radius: var(--radio);
    font: inherit; font-size: .78rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .1em; text-align: left;
  }
  .btn-filtros-movil .filtro-actual {
    display: block; margin-top: 3px; color: var(--gris);
    font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: none;
  }
  .btn-filtros-movil .btn-filtros-flecha { color: var(--gris); transition: transform .25s; }
  .btn-filtros-movil[aria-expanded="true"] { border-color: var(--primario); }
  .btn-filtros-movil[aria-expanded="true"] .btn-filtros-flecha { transform: rotate(180deg); }

  /* Los filtros arrancan plegados para que los productos se vean de
     entrada; el árbol completo ocupaba toda la primera pantalla */
  .sidebar { display: none; }
  .sidebar.abierta { display: block; }

  .toolbar { padding: 12px 14px; margin-bottom: 14px; }
}

@media (max-width: 560px) {
  /* Cabecera más baja: el catálogo empieza antes */
  .encabezado-pagina { min-height: 220px; padding: 38px 0; }
  .encabezado-pagina h1 { font-size: 1.5rem; letter-spacing: .05em; }
  .encabezado-pagina p { font-size: .85rem; }

  .toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .toolbar .controles { justify-content: space-between; gap: 8px; }
  .toolbar .controles label { display: flex; align-items: center; gap: 6px; }
  .toolbar select { flex: 1; min-width: 0; padding: 9px 10px; font-size: .78rem; }

  /* Tarjetas compactas para que quepan dos por fila sin apretarse */
  .tarjeta-producto .info { padding: 11px 10px 12px; gap: 7px; }
  /* Nada por debajo de ~11 px: a .52rem (8 px) el texto no se leía en el celular */
  .tarjeta-producto .categoria { font-size: .68rem; letter-spacing: .1em; }
  .tarjeta-producto h3 { font-size: .84rem; line-height: 1.3; }
  .tarjeta-producto .precio { font-size: .95rem; }
  .tarjeta-producto .btn-agregar { padding: 10px 6px; font-size: .72rem; gap: 5px; }
  .badge-modelo { top: 7px; left: 7px; padding: 3px 7px; font-size: .68rem; }
  .badge-vendido { top: 7px; right: 7px; padding: 3px 7px; font-size: .66rem; }
  .badge-usado { right: 7px; bottom: 7px; padding: 4px 7px; font-size: .66rem; }
  .badge-venta { left: 7px; bottom: 7px; padding: 3px 7px; font-size: .66rem; }

  .paginacion { gap: 6px; margin-top: 24px; flex-wrap: wrap; }
  .paginacion button { min-width: 36px; height: 36px; font-size: .82rem; }
}


/* ============================================================
   Panel de administración: mismo encabezado que el sitio, con el
   menú del panel dentro. Va al final para poder ganar a las
   reglas antiguas de pestañas sin tocarlas.
   ============================================================ */
.admin-header .header-main { max-width: 1240px; }
.admin-header .nav-lista { display: flex; align-items: center; margin-left: auto; }
.admin-header .nav-lista > li { position: relative; }

/* Grupos del menú (Catálogo, Ventas, Configuración): mismo aspecto
   que los enlaces del sitio, pero son botones porque cambian de vista */
.grupo-admin {
  display: block; padding: 10px 13px; cursor: pointer;
  background: none; border: 0; border-radius: 8px;
  color: var(--gris); font: inherit; font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .12em;
  transition: color .2s, background .2s;
}
.grupo-admin:hover,
.admin-header .nav-lista > li:hover > .grupo-admin,
.grupo-admin.activo { color: var(--primario); background: rgba(255, 255, 255, .08); }

/* Entradas del desplegable: anulan el aspecto de pestaña antiguo */
.admin-header .submenu button.admin-tab {
  display: block; width: 100%; margin: 0; text-align: left; cursor: pointer;
  padding: 11px 16px; background: none; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06); border-radius: 0;
  color: var(--gris); font: inherit; font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  transition: color .2s, background .2s;
}
.admin-header .submenu button.admin-tab:hover { background: var(--panel); color: var(--primario); }
.admin-header .submenu button.admin-tab.activo {
  background: rgba(110, 231, 183, .12); color: #6ee7b7; border-color: rgba(255, 255, 255, .06);
}
.admin-header .submenu li:last-child button.admin-tab { border-bottom: none; }

.admin-header .header-acciones { gap: 12px; }
.admin-header .header-acciones .estado-punto { font-size: .62rem; padding: 7px 12px; }
.admin-header .btn-admin { padding: 9px 16px; font-size: .68rem; }

/* El aviso de servidor caído vive ahora dentro del contenedor */
body.admin .admin-alerta { margin: 18px 0 0; }
body.admin .admin-main { padding-top: 24px; }

@media (max-width: 900px) {
  .admin-header .header-acciones .estado-punto { display: none; }
  .encabezado-admin { min-height: 290px; padding-top: 120px; }
}
@media (max-width: 640px) {
  .encabezado-admin { min-height: 250px; padding-top: 140px; padding-bottom: 22px; }
  .encabezado-admin-texto p { font-size: .85rem; }
}
/* El menú del panel se pliega en el mismo punto que el del sitio (1020px,
   donde aparece el botón ☰). Antes cambiaba a 720px: entre esos dos anchos
   el desplegable ya era una columna, pero los grupos seguían centrados y
   estrechos mientras sus submenús salían anchos y alineados a la izquierda.
   El resto (columna, submenú estático, abrir por clic) lo aporta el bloque
   de .header para 1020px, que también alcanza al panel. */
@media (max-width: 1020px) {
  /* align-items:center viene de la regla de escritorio y encoge cada grupo
     a su texto: en columna deben ocupar el ancho del desplegable */
  .admin-header .nav-lista { margin-left: 0; align-items: stretch; }
  .admin-header .header-acciones { margin-left: auto; }
  .grupo-admin { width: 100%; text-align: left; }
  .admin-header .submenu button.admin-tab { flex: none; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .admin-header .logo img { width: 104px; height: 42px; }
  .admin-header .btn-admin { padding: 8px 12px; font-size: .64rem; }
}


/* ---------- Panel: video de fondo e iconos ---------- */
/* El menú flota sobre la banda de video, igual que en el sitio */
.admin-header {
  position: absolute; top: 0; left: 0; right: 0;
  background: transparent; border-bottom: none; -webkit-backdrop-filter: none; backdrop-filter: none;
}
.admin-header .header-main { position: relative; z-index: 2; }

/* La capa del sitio está pensada para cabeceras altas y aquí tapaba
   casi todo el clip: en el panel se aclara y se degrada en horizontal,
   de modo que el texto de la izquierda queda legible y a la derecha se
   ve el video con claridad */
.encabezado-admin .encabezado-overlay {
  background:
    linear-gradient(90deg, rgba(6, 8, 9, .94) 0%, rgba(6, 8, 9, .74) 38%, rgba(6, 8, 9, .3) 72%, rgba(6, 8, 9, .16) 100%),
    linear-gradient(0deg, rgba(6, 8, 9, .96) 0%, rgba(6, 8, 9, .2) 42%, rgba(6, 8, 9, .5) 100%);
}

/* Banda de video: mismo tamaño que las cabeceras de las páginas */
.encabezado-admin {
  min-height: 340px; padding-top: 132px; padding-bottom: 30px;
  text-align: left;
}
.encabezado-admin-texto {
  position: relative; z-index: 3;
  max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 20px;
}
.encabezado-admin-texto .admin-sobrelinea { margin-bottom: 8px; }
.encabezado-admin-texto h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem); font-weight: 800; line-height: 1.05;
  text-transform: uppercase; letter-spacing: .02em;
}
.encabezado-admin-texto p {
  max-width: 620px; margin-top: 10px; color: #c3cdd5; font-size: .92rem; line-height: 1.6;
}

/* Iconos del panel: mismo trazo que los del sitio */
.icono-panel { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.admin-tab-icono { display: inline-flex; align-items: center; }
.admin-tab-icono .icono-panel { width: 17px; height: 17px; }
.admin-header .submenu button.admin-tab.con-icono {
  display: flex; align-items: center; gap: 10px;
}
.admin-header .submenu button.admin-tab .icono-panel { width: 16px; height: 16px; opacity: .85; }
.admin-header .submenu button.admin-tab.activo .icono-panel { opacity: 1; }

.btn-menu-movil .icono-panel { width: 22px; height: 22px; }

/* Botones con icono a la izquierda del texto */
.editor-acciones .btn,
.btn-subir { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.campo-con-boton .btn { display: inline-flex; align-items: center; gap: 8px; }

/* Estados vacíos: el icono va dentro del cuadro */
.editor-vacio-icono .icono-panel { width: 24px; height: 24px; opacity: .75; }

/* Icono en la lista de facturas */
.admin-lista .numero .icono-panel { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .admin-video-fondo { display: none; }
}


/* ============================================================
   Facturas por pasos: se enseña una parte cada vez para que el
   formulario no abrume, con el recorrido siempre a la vista
   ============================================================ */
.pasos-factura {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-bottom: 20px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borde);
}
.pasos-factura li {
  display: flex; align-items: center; gap: 10px;
  flex: 1; min-width: 150px; padding: 12px 14px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 11px;
  background: var(--panel-2); color: var(--gris);
  font-size: .78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  transition: border-color .2s, color .2s, background .2s;
}
.pasos-factura li span {
  display: grid; place-items: center; width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--gris-claro); border-radius: 50%;
  font-size: .76rem; font-weight: 800;
}
.pasos-factura li:hover { border-color: var(--gris-claro); color: var(--texto); }
.pasos-factura li.activo {
  border-color: #6ee7b7; background: rgba(110, 231, 183, .1); color: var(--texto);
}
.pasos-factura li.activo span { border-color: #6ee7b7; color: #6ee7b7; }
.pasos-factura li.completado { color: #8fb9a8; }
.pasos-factura li.completado span {
  border-color: #6ee7b7; background: #6ee7b7; color: #06120d;
}
/* La marca de completado sustituye al número */
.pasos-factura li.completado span { font-size: 0; }
.pasos-factura li.completado span::after { content: "✓"; font-size: .8rem; }

.paso-factura { display: flex; flex-direction: column; gap: 16px; padding-top: 18px; }

/* ---------- Tramos guiados dentro de cada paso ----------
   Solo hay uno abierto: los anteriores quedan resumidos en una línea
   y los siguientes atenuados, para que el formulario no abrume. */
.bloque-guiado {
  border: 1px solid var(--borde); border-radius: 13px;
  background: var(--panel-2); overflow: hidden;
  transition: border-color .2s, opacity .2s, background .2s;
}
.bloque-cabecera {
  display: grid; grid-template-columns: 30px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center; gap: 13px; width: 100%;
  padding: 15px 17px; border: none; background: none;
  color: var(--texto); font: inherit; text-align: left; cursor: pointer;
}
.bloque-cabecera:focus-visible { outline: 2px solid #6ee7b7; outline-offset: -3px; }
.bloque-numero {
  display: grid; place-items: center; width: 30px; height: 30px;
  border: 1px solid var(--gris-claro); border-radius: 50%;
  color: var(--gris); font-size: .76rem; font-weight: 800;
  transition: border-color .2s, background .2s, color .2s;
}
.bloque-titulo {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  font-size: .88rem; font-weight: 700; letter-spacing: .02em;
}
.bloque-titulo small {
  color: var(--gris); font-size: .71rem; font-weight: 500; letter-spacing: .02em;
}
.bloque-resumen {
  min-width: 0; color: #8fb9a8; font-size: .76rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bloque-editar {
  padding: 5px 11px; border: 1px solid var(--borde); border-radius: 999px;
  color: var(--gris); font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  opacity: 0; transition: opacity .2s;
}

.bloque-guiado.activo {
  border-color: rgba(110, 231, 183, .5); background: var(--panel);
}
.bloque-guiado.activo .bloque-numero { border-color: #6ee7b7; color: #6ee7b7; }
.bloque-guiado.completado .bloque-numero {
  border-color: #6ee7b7; background: #6ee7b7; color: #06120d; font-size: 0;
}
.bloque-guiado.completado .bloque-numero::after { content: "\2713"; font-size: .82rem; }
.bloque-guiado.completado:hover { border-color: var(--gris-claro); }
.bloque-guiado.completado:hover .bloque-editar,
.bloque-guiado.completado .bloque-cabecera:focus-visible .bloque-editar { opacity: 1; }
.bloque-guiado.pendiente { opacity: .42; }
.bloque-guiado.pendiente .bloque-cabecera { cursor: default; }

.bloque-cuerpo {
  display: flex; flex-direction: column; gap: 13px;
  padding: 2px 17px 17px;
  animation: aparecerBloque .24s cubic-bezier(.2, .7, .3, 1);
}
/* hidden pierde contra display:flex si no se dice lo contrario */
.bloque-cuerpo[hidden] { display: none; }
@keyframes aparecerBloque {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.bloque-pie { display: flex; justify-content: flex-end; padding-top: 3px; }

/* ---------- Tipo de documento: dos tarjetas en vez de un desplegable ---------- */
.opciones-tarjeta {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;
  margin: 0; padding: 0; border: none;
}
.admin-editor label.opcion-tarjeta {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; gap: 11px; padding: 14px 36px 14px 15px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--fondo);
  transition: border-color .18s, background .18s;
}
.opcion-tarjeta:hover { border-color: var(--gris-claro); }
.opcion-tarjeta input { position: absolute; opacity: 0; width: 0; height: 0; }
.opcion-tarjeta-icono {
  display: grid; place-items: center; width: 38px; height: 38px;
  border: 1px solid var(--gris-claro); border-radius: 9px; color: var(--gris);
  transition: border-color .18s, color .18s;
}
.opcion-tarjeta-icono svg { width: 19px; height: 19px; }
.opcion-tarjeta-texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.opcion-tarjeta-texto strong { color: var(--texto); font-size: .84rem; font-weight: 700; }
.opcion-tarjeta-texto small {
  color: var(--gris); font-size: .71rem; font-weight: 500; line-height: 1.5;
}
/* Punto de selección, como el de un radio pero a escala de la tarjeta */
.opcion-tarjeta::after {
  content: ""; position: absolute; top: 15px; right: 14px;
  width: 15px; height: 15px; border-radius: 50%;
  border: 1px solid var(--gris-claro); transition: border-color .18s, background .18s;
}
.opcion-tarjeta:has(input:checked) {
  border-color: rgba(110, 231, 183, .55); background: rgba(110, 231, 183, .07);
}
.opcion-tarjeta:has(input:checked) .opcion-tarjeta-icono { border-color: #6ee7b7; color: #6ee7b7; }
.opcion-tarjeta:has(input:checked)::after {
  border-color: #6ee7b7; background: #6ee7b7; box-shadow: inset 0 0 0 3px var(--fondo);
}
.opcion-tarjeta:has(input:focus-visible) { outline: 2px solid #6ee7b7; outline-offset: 2px; }

/* ---------- Tamano de papel: tarjetas con la forma real de la hoja ---------- */
.grupo-tamano { display: flex; flex-direction: column; gap: 10px; }
.grupo-tamano-titulo {
  display: flex; flex-direction: column; gap: 2px;
  color: var(--texto); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
.grupo-tamano-titulo small {
  color: var(--gris); font-size: .71rem; font-weight: 500; letter-spacing: .02em;
}
.opciones-tamano {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 9px;
}
.admin-editor label.tarjeta-tamano {
  position: relative; display: flex; flex-direction: column;
  align-items: center; text-align: center; gap: 9px; padding: 14px 12px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 10px; background: var(--fondo);
  transition: border-color .18s, background .18s;
}
.tarjeta-tamano:hover { border-color: var(--gris-claro); }
.tarjeta-tamano input { position: absolute; opacity: 0; width: 0; height: 0; }
.tarjeta-tamano-figura {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 8px; background: var(--panel-2); color: var(--gris);
  transition: color .18s, background .18s;
}
/* La proporcion de cada rectangulo es la del papel que representa */
.forma { display: block; border: 1.5px solid currentColor; border-radius: 2px; }
.forma-100x150 { width: 18px; height: 27px; }
.forma-150x100 { width: 27px; height: 18px; }
.forma-100x100 { width: 23px; height: 23px; }
.forma-carta { width: 21px; height: 27px; }
/* Los rollos son continuos: el borde inferior queda abierto */
.forma-80mm { width: 20px; height: 28px; border-bottom-style: dashed; }
.forma-58mm { width: 14px; height: 28px; border-bottom-style: dashed; }

.tarjeta-tamano-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-tamano-texto strong {
  color: var(--texto); font-size: .78rem; font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-tamano-texto small { color: var(--gris); font-size: .69rem; font-weight: 500; }
.tarjeta-tamano:has(input:checked) {
  border-color: rgba(110, 231, 183, .55); background: rgba(110, 231, 183, .07);
}
.tarjeta-tamano:has(input:checked) .tarjeta-tamano-figura {
  background: rgba(110, 231, 183, .14); color: #6ee7b7;
}
.tarjeta-tamano:has(input:focus-visible) { outline: 2px solid #6ee7b7; outline-offset: 2px; }

/* Se vende por: la figura dibuja cuántas piezas entrega */
.opciones-venta { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.figura-piezas { width: 24px; height: 24px; fill: currentColor; }
.campo-piezas-juego { margin-top: 4px; }
.campo-piezas-juego[hidden] { display: none; }

/* ---------- Cierre del documento: imprimir, guardar o descartar ---------- */
.acciones-finales {
  display: flex; flex-direction: column; gap: 14px; width: 100%;
  padding: 17px; border: 1px solid var(--borde); border-radius: 13px;
  background: var(--panel-2);
}
.acciones-resumen {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: 13px; border-bottom: 1px solid var(--borde);
}
.acciones-resumen strong {
  color: var(--texto); font-size: .84rem; font-weight: 800; letter-spacing: .06em;
}
.acciones-resumen span { flex: 1; min-width: 0; color: var(--gris); font-size: .76rem; }
.acciones-resumen b { color: #6ee7b7; font-size: .95rem; font-weight: 800; }

.acciones-imprimir {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px;
}
.tarjeta-accion {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center; gap: 12px; padding: 13px 15px; cursor: pointer;
  border: 1px solid var(--borde); border-radius: 11px; background: var(--fondo);
  color: var(--texto); font: inherit; text-align: left;
  transition: border-color .18s, background .18s, transform .18s;
}
.tarjeta-accion:hover {
  border-color: #6ee7b7; background: var(--panel); transform: translateY(-2px);
}
.tarjeta-accion:focus-visible { outline: 2px solid #6ee7b7; outline-offset: 2px; }
.tarjeta-accion-icono {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 10px; background: rgba(110, 231, 183, .12); color: #6ee7b7;
}
.tarjeta-accion-icono svg { width: 20px; height: 20px; }
.tarjeta-accion-texto { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tarjeta-accion-texto strong { font-size: .82rem; font-weight: 700; }
.tarjeta-accion-texto small {
  color: var(--gris); font-size: .7rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tarjeta-accion-flecha { color: var(--gris); font-size: .95rem; transition: color .18s, transform .18s; }
.tarjeta-accion:hover .tarjeta-accion-flecha { color: #6ee7b7; transform: translateX(3px); }

.acciones-cierre { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.acciones-cierre .btn { flex: 1; min-width: 180px; }
/* Eliminar no compite con Guardar: solo se enciende al acercarse */
.btn-descartar {
  padding: 10px 16px; border: 1px solid transparent; border-radius: var(--radio);
  background: none; color: var(--gris); cursor: pointer;
  font: inherit; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  transition: color .18s, border-color .18s;
}
.btn-descartar:hover { color: var(--peligro); border-color: rgba(248, 113, 113, .45); }



/* Pie con la navegación y, en el último paso, las acciones */
.pie-pasos {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--borde);
}
.pie-pasos-info {
  flex: 1; min-width: 160px; color: var(--gris);
  font-size: .74rem; letter-spacing: .04em;
}
#paso-siguiente { min-width: 150px; }

@media (max-width: 640px) {
  .pasos-factura li {
    flex-basis: 100%; padding: 10px 12px; font-size: .72rem; letter-spacing: .05em;
  }
  .opciones-tarjeta { grid-template-columns: 1fr; }
  .opciones-tamano { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-editor label.tarjeta-tamano { gap: 8px; padding: 11px 9px; }
  .tarjeta-tamano-figura { width: 34px; height: 34px; }
  .acciones-finales { padding: 14px; }
  .bloque-cabecera { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 11px; padding: 13px 14px; }
  .bloque-resumen { display: none; }
  .bloque-cuerpo { padding: 2px 14px 15px; }
  .bloque-pie .btn { width: 100%; }
  .pie-pasos { flex-direction: column; align-items: stretch; }
  .pie-pasos .btn { width: 100%; }
  .acciones-cierre { flex-direction: column-reverse; align-items: stretch; }
  .acciones-cierre .btn, .btn-descartar { width: 100%; }
  .pie-pasos-info { order: -1; text-align: center; }
}

/* ============================================================
   install.html — guía de instalación y revisión del sitio
   ============================================================ */
.instalador { background: #070a0c; }
.instalador-cabecera {
  padding: 54px 0 40px; border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, #0c1114, #070a0c);
}
.instalador-cabecera img { width: 150px; height: auto; margin-bottom: 22px; }
.instalador-etiqueta {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  border: 1px solid rgba(110, 231, 183, .4); color: #6ee7b7;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
}
.instalador-cabecera h1 { margin: 16px 0 12px; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; }
.instalador-cabecera p { max-width: 640px; color: var(--gris); font-size: .92rem; }
.instalador-main { padding-bottom: 80px; }
.instalador-seccion { padding: 44px 0; border-bottom: 1px solid var(--borde); }
.instalador-titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; margin-bottom: 22px;
}
.instalador-paso {
  color: #6ee7b7; font-size: .64rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
}
.instalador-titulo h2 { margin: 6px 0 4px; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.instalador-titulo p { color: var(--gris); font-size: .84rem; }

/* Resumen de la revisión */
.resumen-revision {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px;
}
.resumen-revision div {
  padding: 16px; border: 1px solid var(--borde); border-radius: 12px; background: #0c1114;
}
.resumen-revision strong { display: block; font-size: 1.7rem; line-height: 1; }
.resumen-revision span {
  display: block; margin-top: 6px; color: var(--gris);
  font-size: .62rem; text-transform: uppercase; letter-spacing: .1em;
}
.resumen-revision div:nth-child(1) strong { color: #6ee7b7; }
.resumen-revision div:nth-child(2) strong { color: #f5c66d; }
.resumen-revision div:nth-child(3) strong { color: var(--peligro); }

.lista-revision { display: grid; gap: 8px; }
.revision {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 16px; border: 1px solid var(--borde); border-left-width: 3px;
  border-radius: 10px; background: #0c1114;
}
.revision-icono {
  display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px;
  border-radius: 50%; font-weight: 800; font-size: .8rem;
}
.revision.ok { border-left-color: #6ee7b7; }
.revision.ok .revision-icono { background: rgba(110, 231, 183, .14); color: #6ee7b7; }
.revision.aviso { border-left-color: #f5c66d; }
.revision.aviso .revision-icono { background: rgba(245, 198, 109, .14); color: #f5c66d; }
.revision.error { border-left-color: var(--peligro); }
.revision.error .revision-icono { background: rgba(248, 113, 113, .14); color: var(--peligro); }
.revision.cargando { border-left-color: var(--gris-claro); }
.revision.cargando .revision-icono { background: var(--panel-2); color: var(--gris); }
.revision strong { display: block; font-size: .88rem; }
.revision-detalle { display: block; margin-top: 3px; color: #c6ced3; font-size: .78rem; }
.revision-ayuda { display: block; margin-top: 4px; color: #6f7c85; font-size: .72rem; }

/* Pasos */
.pasos-instalacion { display: grid; gap: 12px; list-style: none; }
.pasos-instalacion > li {
  border: 1px solid var(--borde); border-radius: 12px; background: #0c1114; overflow: hidden;
}
.pasos-instalacion > li.hecho { border-color: rgba(110, 231, 183, .35); }
.pasos-instalacion label {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px; cursor: pointer;
}
.pasos-instalacion input { width: 18px; height: 18px; accent-color: #6ee7b7; flex: 0 0 18px; }
.paso-numero {
  display: grid; place-items: center; width: 28px; height: 28px; flex: 0 0 28px;
  border: 1px solid var(--gris-claro); border-radius: 8px;
  font-size: .74rem; font-weight: 800; color: var(--gris);
}
.pasos-instalacion > li.hecho .paso-numero { border-color: #6ee7b7; color: #6ee7b7; }
.paso-titulo { font-size: .96rem; font-weight: 700; }
.pasos-instalacion > li.hecho .paso-titulo { color: var(--gris); text-decoration: line-through; }
.paso-cuerpo {
  padding: 0 18px 18px 62px; display: grid; gap: 12px;
  color: var(--gris); font-size: .84rem; line-height: 1.65;
}
.paso-cuerpo code {
  padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45);
  font-family: Consolas, monospace; font-size: .82em; color: #dbe2e7;
}
.paso-cuerpo a { color: #6ee7b7; font-weight: 600; }
.paso-aviso {
  padding: 11px 14px; border-left: 2px solid #f5c66d; border-radius: 0 8px 8px 0;
  background: rgba(245, 198, 109, .07); color: #d6cbb4;
}
.comando {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border: 1px solid var(--gris-claro); border-radius: 9px;
  background: #05080a; flex-wrap: wrap;
}
.comando code { background: none; color: #6ee7b7; font-size: .84rem; word-break: break-all; }
.lista-tareas { display: grid; gap: 10px; padding-left: 18px; list-style: decimal; }
.lista-tareas li { padding-left: 4px; }
.lista-tareas strong { color: var(--texto); }

.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dos-columnas > div {
  padding: 14px 16px; border: 1px solid var(--borde); border-radius: 10px; background: #090d10;
}
.dos-columnas strong { display: block; margin-bottom: 9px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.columna-si strong { color: #6ee7b7; }
.columna-no strong { color: var(--peligro); }
.dos-columnas ul { display: grid; gap: 6px; list-style: none; }
.dos-columnas li { position: relative; padding-left: 15px; font-size: .8rem; }
.dos-columnas li::before { content: "\00b7"; position: absolute; left: 3px; font-weight: 800; }
.columna-si li::before { color: #6ee7b7; }
.columna-no li::before { color: var(--peligro); }

/* SEO */
.tarjetas-seo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.tarjetas-seo article {
  padding: 20px; border: 1px solid var(--borde); border-radius: 12px; background: #0c1114;
}
.tarjetas-seo h3 { margin-bottom: 12px; font-size: 1rem; }
.tarjetas-seo article:first-child h3 { color: #6ee7b7; }
.tarjetas-seo ul { display: grid; gap: 8px; list-style: none; }
.tarjetas-seo li {
  position: relative; padding-left: 18px; color: var(--gris); font-size: .82rem; line-height: 1.55;
}
.tarjetas-seo li::before { content: "\2192"; position: absolute; left: 0; color: #4c5b64; }
.subtitulo-seo { margin: 32px 0 6px; font-size: 1.05rem; }
.nota-seo { margin-bottom: 14px; color: var(--gris); font-size: .84rem; }
.tabla-envoltorio { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
.tabla-seo { width: 100%; border-collapse: collapse; min-width: 620px; background: #0c1114; }
.tabla-seo th, .tabla-seo td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--borde); font-size: .8rem;
}
.tabla-seo th {
  background: var(--panel-2); color: var(--texto);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
}
.tabla-seo td:first-child { color: #6ee7b7; font-family: Consolas, monospace; font-size: .76rem; white-space: nowrap; }
.tabla-seo td:last-child { color: var(--gris); }
.tabla-seo tr:last-child td { border-bottom: none; }

.instalador-pie {
  margin-top: 34px; padding: 16px 18px;
  border: 1px solid var(--borde); border-left: 3px solid #6ee7b7; border-radius: 0 10px 10px 0;
  background: #0c1114; color: var(--gris); font-size: .84rem; line-height: 1.6;
}
.instalador-pie code { padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .45); color: #dbe2e7; font-family: Consolas, monospace; }

@media (max-width: 760px) {
  .resumen-revision { grid-template-columns: 1fr; }
  .dos-columnas, .tarjetas-seo { grid-template-columns: 1fr; }
  .paso-cuerpo { padding-left: 18px; }
}

/* ---------- install.php: barra de pasos y formularios ---------- */
.pasos-barra {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 26px 0 24px;
  padding: 0; list-style: none; counter-reset: none;
}
.pasos-barra li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px; border: 1px solid var(--borde); border-radius: 999px;
  color: #6f7c85; font-size: .76rem; font-weight: 600;
}
.pasos-barra li span {
  display: grid; place-items: center; width: 22px; height: 22px; flex: 0 0 22px;
  border: 1px solid currentColor; border-radius: 50%; font-size: .68rem; font-weight: 800;
}
.pasos-barra li.hecho { border-color: rgba(110, 231, 183, .4); color: #6ee7b7; }
.pasos-barra li.hecho span { background: rgba(110, 231, 183, .15); }
.pasos-barra li.actual {
  border-color: #6ee7b7; background: rgba(110, 231, 183, .1); color: var(--texto);
}
.pasos-barra li.actual span { background: #6ee7b7; border-color: #6ee7b7; color: #06100c; }

.instalador-error {
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 20px; padding: 15px 18px;
  border: 1px solid rgba(248, 113, 113, .35); border-left: 3px solid var(--peligro);
  border-radius: 10px; background: rgba(248, 113, 113, .07);
  color: #d9c3c3; font-size: .84rem; line-height: 1.6;
}
.instalador-error strong { color: #fca5a5; font-size: .9rem; }

.formulario-instalador { margin-top: 4px; }
.formulario-instalador .fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.formulario-instalador label { display: flex; flex-direction: column; gap: 6px; font-size: .82rem; }
.formulario-instalador input {
  padding: 11px 13px; border: 1px solid var(--gris-claro); border-radius: 8px;
  background: var(--fondo); color: var(--texto); font: inherit; font-size: .88rem; outline: none;
}
.formulario-instalador input:focus { border-color: #6ee7b7; }
.formulario-instalador code { color: #6ee7b7; }

.instalador-acciones {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px;
}
.instalador-acciones .campo-ayuda { margin: 0; }
.instalador-acciones .btn { text-decoration: none; }

@media (max-width: 700px) {
  .formulario-instalador .fila-2 { grid-template-columns: 1fr; }
  .pasos-barra li { padding: 8px 12px; font-size: .7rem; }
}

.aviso-instalador {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin: 26px 0 0; padding: 20px 22px;
  border: 1px solid rgba(110, 231, 183, .35); border-left: 3px solid #6ee7b7;
  border-radius: 0 12px 12px 0; background: rgba(110, 231, 183, .07);
}
.aviso-instalador strong { display: block; color: #6ee7b7; font-size: .95rem; }
.aviso-instalador p { max-width: 640px; margin-top: 6px; color: var(--gris); font-size: .84rem; line-height: 1.6; }
.aviso-instalador .btn { white-space: nowrap; text-decoration: none; }

.lista-archivos { margin-top: 16px; }
.lista-archivos .revision { padding: 10px 14px; }
.lista-archivos .revision-icono { width: 22px; height: 22px; flex-basis: 22px; font-size: .72rem; }


/* ============================================================
   Páginas de repuestos por modelo (repuestos-agras-t40.html…)
   y página pilar "dónde comprar repuestos" (repuestos-drones-agricolas.html)
   ============================================================ */
/* Con el mismo peso que ".header--sobre-video + .encabezado-pagina", que si
   no ganaría por especificidad y dejaría estas medidas sin efecto */
.encabezado-modelo, .header--sobre-video + .encabezado-modelo { min-height: 0; display: block; padding: 150px 0 52px; text-align: left; }
.encabezado-modelo-contenido { position: relative; z-index: 3; }
.migas-modelo { padding: 0 0 20px; }
.migas-modelo a { color: var(--gris); }
.migas-modelo a:hover { color: var(--primario); }
.migas-modelo span { color: var(--texto); }
.encabezado-modelo-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; align-items: center; }
.encabezado-modelo .eyebrow-modelo {
  display: block; color: #6ee7b7; font-size: .67rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
}
.encabezado-modelo h1 {
  margin: 12px 0 14px; font-size: clamp(2.1rem, 4.6vw, 3.7rem);
  line-height: 1.02; font-weight: 800; letter-spacing: .005em; text-transform: uppercase;
}
.encabezado-modelo .subtitulo-modelo { max-width: 560px; margin: 0 0 24px; color: #c3cdd5; font-size: 1.03rem; line-height: 1.6; letter-spacing: 0; }
.encabezado-modelo-foto {
  width: 100%; max-width: 520px; height: auto; justify-self: center;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, .65));
}

.modelo-intro-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
.modelo-texto h2 { font-size: 1.7rem; line-height: 1.15; margin-bottom: 16px; }
.modelo-texto h3 { font-size: 1.15rem; margin: 24px 0 10px; }
.modelo-texto p { color: #c3cdd5; font-size: 1.02rem; }
.modelo-texto p + p, .modelo-texto p + ul, .modelo-texto p + ol, .modelo-texto ul + p, .modelo-texto ol + p { margin-top: 14px; }
.modelo-texto ul, .modelo-texto ol { padding-left: 22px; }
.modelo-texto ul { list-style: disc; }
.modelo-texto ol { list-style: decimal; }
.modelo-texto li { color: #c3cdd5; margin-top: 8px; }
.modelo-texto li::marker { color: var(--primario); }
.modelo-texto strong { color: var(--texto); }
.modelo-texto a { color: var(--primario); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .35); }
.modelo-texto a:hover { text-decoration-color: var(--primario); }

.modelo-ficha { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 26px; position: sticky; top: 96px; }
.modelo-ficha h2 { font-size: .95rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 4px; }
.modelo-ficha > p { color: var(--gris); font-size: .92rem; }
.modelo-ficha .slide-modelo-metricas { margin: 18px 0 14px; }
.modelo-caracteristicas { display: grid; gap: 8px; margin-top: 4px; }
.modelo-caracteristicas li { color: var(--gris); font-size: .92rem; padding-left: 18px; position: relative; }
.modelo-caracteristicas li::before {
  content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--primario);
}
.modelo-ficha .hero-acciones { margin-top: 20px; }

.chips-modelo { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.chips-modelo a {
  border: 1px solid var(--borde); border-radius: 999px; padding: 8px 14px;
  font-size: .82rem; color: var(--gris); background: var(--panel);
  transition: color .2s, border-color .2s;
}
.chips-modelo a:hover { color: var(--primario); border-color: var(--primario); }
.chips-modelo a b { color: var(--texto); font-weight: 600; margin-left: 4px; }
.modelo-ver-todo { text-align: center; margin-top: 32px; }
.modelo-sin-productos { text-align: center; color: var(--gris); padding: 30px 0; }
.despiece-modelo-seccion { padding-top: 0; }

.tarjeta-cta-modelo {
  background: linear-gradient(160deg, #0f1519, #090c0f); border: 1px solid var(--borde);
  border-radius: 14px; padding: 28px; display: grid; gap: 14px; align-content: start;
}
.tarjeta-cta-modelo span { color: #6ee7b7; font-size: .67rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.tarjeta-cta-modelo h3 { font-size: 1.35rem; line-height: 1.2; }
.tarjeta-cta-modelo p { color: var(--gris); font-size: .95rem; }
.tarjeta-cta-modelo .pasos-cta { display: grid; gap: 10px; }
.tarjeta-cta-modelo .pasos-cta li { display: flex; gap: 12px; align-items: baseline; color: #c3cdd5; font-size: .92rem; }
.tarjeta-cta-modelo .pasos-cta b { color: var(--primario); font-size: .75rem; letter-spacing: .1em; flex: none; }

.grid-enlaces-modelos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.grid-enlaces-modelos a {
  background: var(--panel); border: 1px solid var(--borde); border-radius: 12px;
  padding: 16px 12px 18px; text-align: center; display: grid; gap: 6px; align-content: start;
  transition: border-color .2s, transform .2s;
}
.grid-enlaces-modelos a:hover { border-color: var(--primario); transform: translateY(-3px); }
.grid-enlaces-modelos a.actual { border-color: rgba(110, 231, 183, .5); }
.grid-enlaces-modelos img { width: 100%; max-width: 150px; height: auto; margin: 0 auto 6px; }
.grid-enlaces-modelos strong { font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; }
.grid-enlaces-modelos span { font-size: .76rem; color: var(--gris); }

/* Página pilar: bloques de texto anchos y una tarjeta de pasos al lado */
.pilar-intro { max-width: 820px; }
.pilar-intro p { color: #c3cdd5; font-size: 1.08rem; }
.pilar-intro p + p { margin-top: 14px; }
.pilar-seccion { padding: 48px 0; border-top: 1px solid var(--borde); }
.pilar-seccion .modelo-texto { max-width: 820px; }
.pilar-indice { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.pilar-indice a {
  border: 1px solid var(--borde); border-radius: 999px; padding: 7px 14px;
  font-size: .8rem; color: var(--gris); background: var(--panel);
}
.pilar-indice a:hover { color: var(--primario); border-color: var(--primario); }

@media (max-width: 1100px) {
  .grid-enlaces-modelos { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 860px) {
  .encabezado-modelo, .header--sobre-video + .encabezado-modelo { padding: 130px 0 40px; }
  .encabezado-modelo-grid, .modelo-intro-grid { grid-template-columns: 1fr; gap: 26px; }
  .encabezado-modelo-foto { max-width: 320px; order: -1; }
  .modelo-ficha { position: static; }
}
@media (max-width: 720px) {
  .encabezado-modelo, .header--sobre-video + .encabezado-modelo { padding-top: 112px; }
}
@media (max-width: 560px) {
  .grid-enlaces-modelos { grid-template-columns: repeat(2, 1fr); }
  .encabezado-modelo h1 { font-size: clamp(1.8rem, 8.5vw, 2.4rem); }
}

/* Migas de la ficha de producto (enlazan a la página del modelo) */
.migas-producto { padding: 22px 0 0; }
.migas-producto a { color: var(--gris); }
.migas-producto a:hover { color: var(--primario); }
.migas-producto span { color: var(--texto); }
.compatibilidad a { color: var(--primario); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }