/* ============================================================
   SUPER SERVICE 4X4 — «LA ORDEN DE TRABAJO»
   Sistema v2 tras tribunal adversarial. Ver DISENO.md.
   Papel técnico frío · tinta-navy · señal amarilla · ángulo 65°.
   Cero dependencias. Solo transform/opacity en animación.
   ============================================================ */

/* ---------- 1 · TOKENS ---------- */
:root{
  --papel:#E9E8E3;
  --papel-2:#DFDED8;
  --placa:#F6F6F3;
  --tinta:#12181F;
  --tinta-2:#3A4350;
  --panel:#05182E;
  --navy:#002856;
  --senal:#E8AD0A;
  --ok:#2E5E3A;
  --no:#8C2F23;
  --linea:rgba(18,24,31,.16);
  --linea-f:rgba(18,24,31,.34);
  --linea-clara:rgba(246,246,243,.14);
  --linea-clara-f:rgba(246,246,243,.32);

  --sans:"Archivo",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Ángulo del sistema: 65°, medido del contorno del rino. tan(65°)≈2.14 */
  --corte-x:14px;
  --corte-y:30px;

  --ancho:1360px;
  --e-out:cubic-bezier(0.22,1,0.36,1);
  --e-swift:cubic-bezier(0.32,0.72,0,1);
  --masthead:68px;

  /* compat intro.css (secuencia de entrada validada) */
  --negro:#05070a;
  --blanco:#fff;
  --fuente:var(--sans);
}

/* ---------- 2 · BASE ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
[id]{scroll-margin-top:calc(var(--masthead) + 16px)}
body{
  font-family:var(--sans);
  font-variation-settings:"wdth" 100;
  background:var(--papel);
  color:var(--tinta);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--tinta);color:var(--papel)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.en-panel :focus-visible,.pie :focus-visible{outline-color:var(--senal)}
.oculto{display:none!important}

.salto{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy);color:var(--papel);padding:10px 18px;
  font:600 13px/1 var(--sans);letter-spacing:.06em;
}
.salto:focus{left:0}

.contenedor{max-width:var(--ancho);margin:0 auto;padding-inline:clamp(18px,4vw,44px)}

/* ---------- 3 · TIPOGRAFÍA ---------- */
h1,h2,h3{font-weight:800;text-wrap:balance}
.display{
  font-size:clamp(2.6rem,6.4vw,6rem);
  font-variation-settings:"wdth" 125;
  font-weight:800;line-height:.92;letter-spacing:-.01em;
  text-transform:uppercase;
}
.t-h2{
  font-size:clamp(1.9rem,3.6vw,3.2rem);
  font-variation-settings:"wdth" 110;
  line-height:.98;letter-spacing:-.01em;text-transform:uppercase;
}
.t-h3{font-size:clamp(1.15rem,1.6vw,1.4rem);font-weight:700;line-height:1.15}
p{max-width:62ch;text-wrap:pretty}
.parrafo{color:var(--tinta-2);font-size:1rem}
.label{
  font:600 11px/1.2 var(--sans);
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-2);
}
.dato{font-family:var(--mono);font-variant-numeric:tabular-nums}
.folio{
  font:500 11px/1 var(--mono);letter-spacing:.12em;
  color:var(--tinta-2);font-variant-numeric:tabular-nums;
}
.condensado{font-variation-settings:"wdth" 80}

/* ---------- 4 · GEOMETRÍA ---------- */
.corte{clip-path:polygon(0 0,calc(100% - var(--corte-x)) 0,100% var(--corte-y),100% 100%,0 100%)}
.corte-suave{--corte-x:9px;--corte-y:19px}
.regla{border:none;border-top:1px solid var(--linea-f);position:relative;overflow:visible}
.regla::after{ /* remate a 65° de cada regla de sección */
  content:"";position:absolute;right:0;top:-1px;width:14px;height:30px;
  border-right:1px solid var(--linea-f);
  transform-origin:top right;transform:skewX(-25deg);
}

/* ---------- 5 · MASTHEAD (riel de cajetín) ---------- */
.masthead{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--papel) 94%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linea-f);
}
.masthead-fila{
  max-width:var(--ancho);margin:0 auto;
  display:flex;align-items:stretch;
  height:var(--masthead);
  padding-inline:clamp(18px,4vw,44px);
  transition:height .42s var(--e-swift);
}
.masthead.condensa .masthead-fila{height:56px}
.masthead .celda{
  display:flex;align-items:center;
  border-right:1px solid var(--linea);padding-inline:clamp(12px,1.6vw,22px);
}
.masthead .celda:first-child{padding-left:0}
.masthead .celda:last-child{border-right:none;padding-right:0}
.masthead-logo img{height:30px;width:auto;transition:height .42s var(--e-swift)}
.masthead.condensa .masthead-logo img{height:24px}
.masthead-folio{font:500 11px/1 var(--mono);letter-spacing:.14em;color:var(--tinta-2);white-space:nowrap}
.masthead-nav{flex:1;justify-content:flex-end;gap:clamp(14px,2vw,30px);border-right:1px solid var(--linea)}
.masthead-nav a{
  font:600 12.5px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-2);padding:6px 2px;position:relative;
  transition:color .24s var(--e-swift);
}
.masthead-nav a:hover{color:var(--tinta)}
.masthead-nav a[aria-current]{color:var(--tinta)}
.masthead-nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--senal);
}
.masthead-cotizacion{
  font:600 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:8px;color:var(--tinta);
}
.masthead-cotizacion b{
  font-weight:600;background:var(--tinta);color:var(--papel);
  padding:3px 7px;min-width:22px;text-align:center;
}
.masthead-cotizacion:hover b{background:var(--navy)}
/* especificidad > .masthead .celda (que pone display:flex) */
.masthead .celda.btn-menu{display:none;font:600 12.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}

/* ---------- Mega-panel de productos (despliegue del expediente) ---------- */
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--papel);border-bottom:1px solid var(--linea-f);
  border-top:1px solid var(--linea);
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .24s var(--e-swift),transform .24s var(--e-swift),visibility .24s;
}
.mega.abierta{opacity:1;visibility:visible;transform:none}
.mega-interior{
  max-width:var(--ancho);margin:0 auto;
  padding:30px clamp(18px,4vw,44px) 42px;
  display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(30px,4vw,72px);
}
.mega-todo{
  grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
  padding:12px 4px 16px;margin-bottom:14px;border-bottom:1px solid var(--linea-f);
  font:600 13.5px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--navy);
}
.mega-todo:hover{color:var(--tinta)}
.mega a.mega-cat{
  display:flex;align-items:center;gap:14px;
  padding:15px 4px;border-bottom:1px solid var(--linea);
  font:600 16.5px/1.2 var(--sans);font-variation-settings:"wdth" 96;color:var(--tinta);
  transition:padding-left .22s var(--e-swift),color .18s;
}
.mega a.mega-cat:hover{padding-left:11px;color:var(--navy)}
.mega a.mega-cat:hover .frag{color:var(--senal)}
.mega .frag{width:18px;height:18px;color:var(--navy);flex-shrink:0}
.mega .n{margin-left:auto;font:500 11.5px/1 var(--mono);color:var(--tinta-2)}
/* En el masthead sobre-hero (portada) el panel sigue siendo papel/tinta: es opaco */
@media(max-width:920px){.mega{display:none}}

/* Velo: desenfoca el resto de la página mientras un panel del riel está abierto.
   Elemento fijo: único sitio donde el blur está permitido. */
.velo-riel{
  position:fixed;inset:0;z-index:55;
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  background:rgba(5,24,46,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .28s var(--e-swift),visibility .28s;
}
.velo-riel.activo{opacity:1;visibility:visible;pointer-events:auto}

/* ---------- Buscador del riel ---------- */
.celda-buscar{transition:color .2s}
.celda-buscar svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.8;fill:none}
.celda-buscar:hover{color:var(--navy)}
.sobre-hero .celda-buscar:hover{color:var(--papel)}
.buscar-form{
  max-width:var(--ancho);margin:0 auto;
  padding:30px clamp(18px,4vw,44px) 38px;
  display:flex;align-items:center;gap:16px;
}
.buscar-form svg{width:20px;height:20px;stroke:var(--tinta-2);stroke-width:1.8;fill:none;flex-shrink:0}
.buscar-form input{
  flex:1;background:transparent;border:none;border-bottom:1px solid var(--linea-f);
  font:600 clamp(1.2rem,2.2vw,1.7rem)/1.3 var(--sans);color:var(--tinta);
  padding:8px 2px;border-radius:0;
}
.buscar-form input:focus{outline:none;border-bottom-color:var(--navy)}
.buscar-form input::placeholder{color:var(--tinta-2);opacity:.55;font-weight:500}
.buscar-form .pista{font:500 10.5px/1.4 var(--mono);letter-spacing:.1em;color:var(--tinta-2);white-space:nowrap}
@media(max-width:920px){.buscar-form .pista{display:none}}

/* Placa del vehículo en el masthead (desktop) */
.placa-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--navy);color:var(--papel);
  font:500 11.5px/1 var(--mono);letter-spacing:.06em;
  padding:8px 8px 8px 13px;white-space:nowrap;
}
.placa-chip button{
  width:20px;height:20px;display:grid;place-items:center;
  background:rgba(246,246,243,.16);font-size:13px;line-height:1;
  transition:background .24s var(--e-swift);
}
.placa-chip button:hover{background:rgba(246,246,243,.32)}

/* Sub-riel de placa (móvil) */
.sub-riel{
  display:none;background:var(--navy);color:var(--papel);
  font:500 11px/1 var(--mono);letter-spacing:.08em;
  padding:9px clamp(18px,4vw,44px);
  align-items:center;justify-content:space-between;gap:10px;
}
.sub-riel button{color:var(--papel);opacity:.75;font-size:13px}

/* Menú overlay (móvil) */
.velo-menu{
  position:fixed;inset:0;z-index:90;background:var(--panel);color:var(--papel);
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(22px,7vw,60px);
  opacity:0;visibility:hidden;
  transition:opacity .42s var(--e-swift),visibility .42s;
}
.velo-menu.abierto{opacity:1;visibility:visible}
.velo-menu .folio-gigante{
  position:absolute;right:4vw;bottom:2vh;
  font:800 clamp(6rem,24vw,11rem)/1 var(--sans);
  font-variation-settings:"wdth" 72;
  color:transparent;-webkit-text-stroke:1px var(--linea-clara);
  pointer-events:none;user-select:none;
}
.velo-menu nav{display:flex;flex-direction:column;gap:4px}
.velo-menu a{
  font:800 clamp(2rem,8vw,3.2rem)/1.18 var(--sans);
  font-variation-settings:"wdth" 108;text-transform:uppercase;
  display:flex;align-items:baseline;gap:16px;
  padding:8px 0;border-bottom:1px solid var(--linea-clara);
  overflow:hidden;
}
.velo-menu a .folio{color:var(--senal)}
.velo-menu a span.txt{display:block;transform:translateY(110%);transition:transform .6s var(--e-out)}
.velo-menu.abierto a span.txt{transform:none}
.velo-menu.abierto a:nth-child(2) span.txt{transition-delay:.06s}
.velo-menu.abierto a:nth-child(3) span.txt{transition-delay:.12s}
.velo-menu.abierto a:nth-child(4) span.txt{transition-delay:.18s}
.velo-menu.abierto a:nth-child(5) span.txt{transition-delay:.24s}
.velo-menu.abierto a:nth-child(6) span.txt{transition-delay:.3s}
.velo-menu .velo-pie{position:absolute;bottom:26px;left:clamp(22px,7vw,60px);font:400 11px/1.8 var(--mono);color:rgba(246,246,243,.5)}

/* ---------- 6 · COMANDOS ---------- */
.comando{
  display:inline-flex;align-items:stretch;
  background:var(--tinta);color:var(--papel);
  font:600 13px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  border-radius:2px;overflow:hidden;
  transition:transform .24s var(--e-swift),background .24s var(--e-swift);
}
.comando .txt{padding:15px 20px;display:flex;align-items:center}
.comando .flecha{
  width:46px;display:grid;place-items:center;
  border-left:1px solid var(--linea-clara);
  position:relative;overflow:hidden;
}
.comando .flecha svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;
  transition:transform .3s var(--e-swift)}
.comando .flecha::before{
  content:"";position:absolute;inset:0;background:var(--senal);
  transform:translateY(101%);transition:transform .3s var(--e-swift);
}
.comando:hover .flecha::before{transform:none}
.comando:hover .flecha svg{transform:translate(2px,-4.3px);stroke:var(--tinta);position:relative;z-index:1}
.comando:hover{transform:translateY(-1px)}
.comando:active{transform:translateY(1px) scale(.985)}
.comando.registro{background:transparent;color:var(--tinta);box-shadow:inset 0 0 0 1px var(--linea-f)}
.comando.registro .flecha{border-left-color:var(--linea)}
.comando.registro:hover .flecha svg{stroke:var(--tinta)}
.comando.navy{background:var(--navy)}
.comando.whatsapp{background:var(--navy)}
.comando.whatsapp .txt{gap:10px}
.comando.claro{background:var(--papel);color:var(--tinta)}
.comando.claro .flecha{border-left-color:var(--linea)}
.comando.bloque{display:flex;width:100%;justify-content:space-between}
.enlace{
  font-weight:600;text-decoration:underline;
  text-underline-offset:4px;text-decoration-thickness:1px;
  transition:text-decoration-color .24s;
}
.enlace:hover{text-decoration-color:var(--senal);text-decoration-thickness:2px}

/* ---------- 7 · REGISTRO DEL VEHÍCULO ---------- */
.registro-vehiculo{background:var(--papel-2);border-block:1px solid var(--linea-f)}
.registro-vehiculo .interior{padding-block:clamp(30px,4vw,48px)}
.registro-form{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,.6fr) auto;
  gap:clamp(16px,2.6vw,36px);align-items:end;
}
.campo-registro,.selector,.selector-boton{min-width:0}
.campo-registro label{display:block;margin-bottom:9px}
.campo-registro select,.campo-registro input{
  width:100%;background:transparent;border:none;
  border-bottom:1px solid var(--linea-f);border-radius:0;
  font:500 clamp(1.05rem,1.4vw,1.3rem)/1.2 var(--sans);
  color:var(--tinta);padding:8px 2px;appearance:none;
}
.campo-registro select{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 8l5 5 5-5' fill='none' stroke='%233A4350' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:16px;
  padding-right:26px;cursor:pointer;
}
.campo-registro select:focus,.campo-registro input:focus{border-bottom-color:var(--navy);outline:none}
.campo-registro select:disabled{opacity:.38;cursor:not-allowed}

/* ---------- 7b · SELECTOR DE EXPEDIENTE (sustituye al <select> nativo) ----------
   El desplegable del sistema operativo rompe el lenguaje: este panel es papel,
   hairlines y mono, con la esquina cortada al ángulo del sistema. El <select>
   nativo queda oculto debajo manteniendo la semántica del formulario. */
.selector{position:relative}
.selector>select{
  position:absolute!important;inset:0;opacity:0!important;pointer-events:none;
  border:none!important;
}
.selector-boton{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:transparent;border-bottom:1px solid var(--linea-f);
  font:500 clamp(1.05rem,1.4vw,1.3rem)/1.2 var(--sans);color:var(--tinta);
  padding:8px 2px;text-align:left;cursor:pointer;
  transition:border-color .2s;
}
.selector-boton .valor{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selector-boton .valor.sin-valor{color:var(--tinta-2);opacity:.75}
.selector-boton svg{
  width:14px;height:14px;flex-shrink:0;stroke:var(--tinta-2);stroke-width:1.5;fill:none;
  transition:transform .3s var(--e-swift);
}
.selector.abierto .selector-boton{border-bottom-color:var(--navy)}
.selector.abierto .selector-boton svg{transform:rotate(180deg)}
.selector-boton:disabled{opacity:.38;cursor:not-allowed}
.selector-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;
  background:var(--placa);border:1px solid var(--linea-f);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 23px,100% 100%,0 100%);
  max-height:296px;overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-6px);visibility:hidden;pointer-events:none;
  transition:opacity .24s var(--e-swift),transform .24s var(--e-swift),visibility .24s;
}
.selector.abierto .selector-panel{opacity:1;transform:none;visibility:visible;pointer-events:auto}
.selector-opcion{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;text-align:left;min-height:44px;padding:10px 14px;
  font:500 14.5px/1.3 var(--sans);border-bottom:1px solid var(--linea);
  cursor:pointer;transition:background .15s,padding-left .18s var(--e-swift);
}
.selector-opcion:last-child{border-bottom:none}
.selector-opcion:hover,.selector-opcion.activa{background:var(--papel-2);padding-left:19px}
.selector-opcion[aria-selected="true"]{
  background:var(--navy);color:var(--papel);
}
.selector-opcion[aria-selected="true"] .selector-n{color:var(--senal)}
.selector-n{font:500 10.5px/1 var(--mono);color:var(--tinta-2);letter-spacing:.06em}
.selector-panel::-webkit-scrollbar{width:8px}
.selector-panel::-webkit-scrollbar-thumb{background:var(--linea-f)}
/* variante compacta: riel del inventario (orden) */
.selector.compacto .selector-boton{
  border-bottom:none;font:600 11.5px/1 var(--sans);letter-spacing:.1em;
  color:var(--tinta-2);text-transform:uppercase;padding:6px 0;width:auto;gap:8px;
}
.selector.compacto{display:inline-block;min-width:190px}
.selector.compacto .selector-panel{left:auto;right:0;min-width:230px}

/* ---------- 8 · PLANCHA DE INVENTARIO ---------- */
/* Bordes compartidos: gap 1px con el fondo haciendo de regla. El hueco de las
   filas incompletas queda en gris — decisión del director: le gusta así
   (lee como zona muerta del expediente). */
.plancha{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:1px;background:var(--linea-f);
  border:1px solid var(--linea-f);
}
.entrada{
  background:var(--papel);padding:16px 16px 14px;
  display:flex;flex-direction:column;gap:11px;
  transition:background .24s var(--e-swift);
  position:relative;
}
.entrada:hover{background:var(--placa)}
.entrada .cabecera{display:flex;justify-content:space-between;align-items:baseline}
.entrada .indice{transition:color .24s}
.entrada:hover .indice{color:var(--navy);font-weight:600}
.lamina{
  background:var(--placa);
  clip-path:polygon(0 0,calc(100% - var(--corte-x)) 0,100% var(--corte-y),100% 100%,0 100%);
  aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;
  border:1px solid var(--linea);
  transition:transform .24s var(--e-swift);
}
.entrada:hover .lamina{transform:translateY(-2px)}
.lamina img{max-height:88%;max-width:86%;object-fit:contain;mix-blend-mode:multiply}
.lamina.fotografica img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;mix-blend-mode:normal}
.entrada h3{
  font:600 15px/1.3 var(--sans);font-variation-settings:"wdth" 84;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:2.6em;flex:1;
}
.entrada .pie-celda{display:flex;align-items:center;justify-content:space-between;gap:10px}
.precio{font:600 1.05rem/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.precio .divisa{font-size:.7em;font-weight:500;color:var(--tinta-2);margin-right:4px}
/* dato, no pildora: el tribunal movil cazo que competia con el boton real */
.chip-cotizar{
  font:500 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--tinta-2);
}

/* El sello de añadir */
.sello{
  display:inline-flex;align-items:center;gap:7px;
  min-height:34px;padding:0 12px;
  font:600 11px/1 var(--sans);letter-spacing:.1em;
  box-shadow:inset 0 0 0 1px var(--linea-f);border-radius:2px;
  position:relative;transition:transform .18s var(--e-swift),background .24s var(--e-swift),color .24s,box-shadow .24s;
}
.sello::after{ /* área táctil ≥48px sin engordar el dibujo */
  content:"";position:absolute;inset:-8px;
}
.sello:hover{background:var(--senal);box-shadow:inset 0 0 0 1px var(--senal);color:var(--tinta)}
.sello:active{transform:scale(.92)}
.sello.sellado{background:var(--navy);color:var(--papel);box-shadow:inset 0 0 0 1px var(--navy)}
.sello.sellado:hover{background:var(--navy)}

/* Regla de subtotal cada bloque de 8 en categorías largas */
.regla-subtotal{
  grid-column:1/-1;background:var(--papel-2);
  padding:8px 16px;font:500 10.5px/1 var(--mono);letter-spacing:.14em;
  color:var(--tinta-2);border-block:1px solid var(--linea-f);
}

/* Ledger (filas): móvil del inventario, cotización, listas de portada */
.ledger{border-top:1px solid var(--linea-f)}
.fila-ledger{
  display:grid;grid-template-columns:auto 96px 1fr auto auto;
  gap:clamp(12px,2vw,22px);align-items:center;
  padding:13px 4px;border-bottom:1px solid var(--linea);
  position:relative;transition:background .24s var(--e-swift);
}
.fila-ledger:hover{background:var(--placa)}
.fila-ledger .lamina{aspect-ratio:4/3;width:96px}
.fila-ledger h3{font:600 14.5px/1.3 var(--sans);font-variation-settings:"wdth" 86;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- 9 · RAIL DE CATEGORÍAS ---------- */
.rail{position:sticky;top:calc(var(--masthead) + 18px);display:flex;flex-direction:column}
.rail a{
  display:flex;align-items:center;gap:11px;
  padding:9px 10px 9px 2px;border-bottom:1px solid var(--linea);
  font:600 13.5px/1.2 var(--sans);font-variation-settings:"wdth" 92;
  color:var(--tinta-2);transition:color .2s,padding-left .24s var(--e-swift);
}
.rail a:hover{color:var(--tinta);padding-left:8px}
.rail a[aria-current]{color:var(--tinta)}
.rail a[aria-current] .frag{color:var(--senal)}
.rail .frag{width:14px;height:14px;flex-shrink:0;color:var(--tinta-2)}
.rail .n{margin-left:auto;font:500 10.5px/1 var(--mono);color:var(--tinta-2)}

/* ---------- 10 · FICHA ---------- */
.ficha-split{display:grid;grid-template-columns:minmax(0,480px) 1fr;gap:clamp(26px,5vw,72px);align-items:start}
.ficha-lamina{position:sticky;top:calc(var(--masthead) + 22px)}
.ficha-lamina .lamina{aspect-ratio:1}
.miniaturas{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.miniaturas button{
  width:58px;height:58px;background:var(--placa);border:1px solid var(--linea);
  display:grid;place-items:center;padding:5px;transition:border-color .2s;
}
.miniaturas button img{max-height:100%;object-fit:contain;mix-blend-mode:multiply}
.miniaturas button:hover,.miniaturas button[aria-current]{border-color:var(--navy)}
.bloque-totales{
  border:1px solid var(--linea-f);
  clip-path:polygon(0 0,calc(100% - var(--corte-x)) 0,100% var(--corte-y),100% 100%,0 100%);
  padding:18px 20px;background:var(--placa);
}
.bloque-totales .fila{display:flex;justify-content:space-between;align-items:baseline;padding:5px 0}
.precio-grande{font:600 2.1rem/1 var(--mono);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.checklist{list-style:none;border-top:1px solid var(--linea)}
.checklist li{
  display:flex;gap:12px;align-items:baseline;
  padding:10px 2px;border-bottom:1px solid var(--linea);
  font-size:14.5px;color:var(--tinta-2);
}
.checklist .marca-si{font-family:var(--mono);font-size:12px;color:var(--ok);font-weight:600}
.nota{
  border:1px solid var(--linea-f);outline:1px solid var(--linea);outline-offset:3px;
  padding:13px 16px;font-size:13.5px;color:var(--tinta-2);max-width:none;
}
.nota b{color:var(--tinta)}
.veredicto{
  display:inline-flex;align-items:center;gap:10px;
  font:500 12px/1 var(--mono);letter-spacing:.06em;
  background:var(--navy);color:var(--papel);padding:10px 14px;
}

/* ---------- 11 · COTIZACIÓN ---------- */
.fila-cotizacion{
  display:grid;grid-template-columns:auto 84px 1fr auto auto;
  gap:clamp(12px,2vw,22px);align-items:center;
  padding:14px 4px;border-bottom:1px solid var(--linea);
}
.fila-cotizacion .lamina{width:84px;aspect-ratio:4/3}
.cantidad{display:flex;border:1px solid var(--linea-f);border-radius:2px}
.cantidad button{
  width:34px;height:34px;display:grid;place-items:center;
  font:500 15px/1 var(--mono);transition:background .2s;position:relative;
}
.cantidad button::after{content:"";position:absolute;inset:-7px}
.cantidad button:hover{background:var(--senal)}
.cantidad output{
  min-width:34px;display:grid;place-items:center;
  font:600 13px/1 var(--mono);border-inline:1px solid var(--linea);
}
.quitar{font-size:17px;color:var(--tinta-2);padding:8px;transition:color .2s;position:relative}
.quitar::after{content:"";position:absolute;inset:-8px}
.quitar:hover{color:var(--no)}

/* ---------- 12 · PANELES FOTOGRÁFICOS ---------- */
.panel-foto{
  position:relative;background:var(--panel);color:var(--papel);
  overflow:hidden;
  clip-path:polygon(0 0,calc(100% - 28px) 0,100% 60px,100% 100%,0 100%);
}
.panel-foto>img,.panel-foto>video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;
}
.panel-foto::after{ /* grano */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)'/%3E%3C/svg%3E");
}
.panel-foto .contenido{position:relative;z-index:2;
  background:linear-gradient(to top,rgba(5,24,46,.88) 0%,rgba(5,24,46,.28) 55%,rgba(5,24,46,.55) 100%)}
.hueco-foto{
  border:1px dashed var(--linea-clara-f);
  display:grid;place-items:center;text-align:center;
  aspect-ratio:4/3;padding:20px;color:rgba(246,246,243,.62);
  font:600 10.5px/1.8 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
.en-papel .hueco-foto{border-color:var(--linea-f);color:var(--tinta-2)}

/* ---------- 13 · PIE ---------- */
.pie{
  position:relative;background:var(--panel);color:rgba(246,246,243,.72);
  overflow:hidden;margin-top:clamp(70px,9vw,130px);
}
.pie::before{ /* rino como marca de agua, del logo real */
  content:"";position:absolute;right:-6%;bottom:-14%;width:min(560px,60vw);aspect-ratio:56/36;
  background:var(--navy);
  -webkit-mask:url(img/logo-navy.png) no-repeat center/contain;
  mask:url(img/logo-navy.png) no-repeat center/contain;
  opacity:.55;pointer-events:none;
}
.pie .interior{position:relative;z-index:2;padding-block:clamp(48px,6vw,84px) 30px}
.pie-rejilla{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(26px,4vw,60px)}
.pie h4{font:600 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;
  color:var(--papel);margin-bottom:14px}
.pie a{display:block;padding:4px 0;font-size:14px;transition:color .2s}
.pie a:hover{color:var(--papel)}
.pie .horario{font:400 12.5px/2 var(--mono);border-collapse:collapse}
.pie .horario td{padding-right:18px}
.pie .legal{
  border-top:1px solid var(--linea-clara);margin-top:40px;padding-top:18px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font:500 11.5px/1.6 var(--sans);letter-spacing:.04em;color:rgba(246,246,243,.62);
}
.pie .legal a{display:inline;padding:0}
.pie .legal span{white-space:nowrap}
@media(max-width:560px){.pie .legal span{white-space:normal}}
.pie img.marca{height:36px;margin-bottom:16px}

/* ---------- 14 · SECCIONES Y FOLIOS DE MARGEN ---------- */
.seccion{padding-block:clamp(64px,9vw,140px) clamp(50px,7vw,112px)}
.seccion-cabecera{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:end;margin-bottom:clamp(26px,4vw,52px)}
.seccion-cabecera .folio{transform:translateY(-4px)}
.con-margen{display:grid;grid-template-columns:56px 1fr;gap:clamp(14px,2vw,30px)}
.con-margen>.folio{writing-mode:vertical-rl;transform:rotate(180deg);align-self:start;letter-spacing:.2em}
@media(max-width:900px){.con-margen{grid-template-columns:1fr}.con-margen>.folio{writing-mode:horizontal-tb;transform:none}}

/* ---------- 15 · REVELADO EN SCROLL ---------- */
/* Guardia sin-JS: si el script no corre, nada queda invisible. La clase
   'js' la pone un one-liner en el <head> de cada página. */
html:not(.js) .rev{opacity:1;transform:none;filter:none}
.rev{opacity:0;transform:translateY(22px);filter:blur(5px)}
.rev.visto{
  opacity:1;transform:none;filter:none;
  transition:opacity .7s var(--e-out),transform .7s var(--e-out),filter .7s var(--e-out);
  transition-delay:calc(var(--rev-i,0)*70ms);
}

/* ---------- 16 · TRANSICIÓN DE VISTA (mejora progresiva) ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-sale .28s var(--e-swift) forwards}
::view-transition-new(root){animation:vt-entra .28s var(--e-out)}
@keyframes vt-sale{to{opacity:0;transform:translateX(-1.5%) }}
@keyframes vt-entra{from{opacity:0;clip-path:polygon(0 0,0 0,-14% 100%,0 100%)}
  to{opacity:1;clip-path:polygon(0 0,114% 0,100% 100%,0 100%)}}

/* ---------- 16b · EL RINO CRUZA (cambio de vista) ----------
   Veredicto del tribunal: la marca cruza en NAVY (su tinta de sello, 12:1
   sobre papel), via máscara CSS — un solo asset, color tokenizado. Sin
   sombras (prohibidas) salvo el canto de 1px en papel que la dibuja sobre
   paneles oscuros. Sin skew: la marca no se distorsiona. A ~60% de altura
   para despejar la zona de lectura. Solo navegación interna, con freno. */
.rino-cruce{
  position:fixed;inset:0;z-index:120;pointer-events:none;
  overflow:hidden;
  padding-top:calc(60vh - 70px);
}
.rino-cruce i{
  display:block;width:min(300px,30vw);aspect-ratio:560/260;
  background:var(--navy);
  -webkit-mask:url(img/rino-blanco.png) center/contain no-repeat;
  mask:url(img/rino-blanco.png) center/contain no-repeat;
  filter:drop-shadow(0 1px 0 rgba(233,232,227,.85));
  animation:rino-cruza .7s var(--e-swift) both;
  will-change:transform;
}
@keyframes rino-cruza{
  from{transform:translateX(105vw) translateZ(0)}
  to{transform:translateX(-130%) translateZ(0)}
}

/* ---------- 17 · MÓVIL ---------- */
@media(max-width:920px){
  .masthead .celda.masthead-nav,.masthead .celda.masthead-folio-celda,.masthead .celda.celda-placa{display:none}
  .masthead .celda.btn-menu{display:flex}
  .masthead-logo{flex:1;border-right:none!important}
  .sub-riel.activa{display:flex}
  .registro-form{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .registro-form .campo-registro:nth-of-type(3){grid-column:1/-1}
  .registro-form .comando{grid-column:1/-1;justify-content:space-between;display:flex}
  .plancha{grid-template-columns:1fr;border-inline:none}
  .entrada{
    display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;
    padding:12px 2px;
  }
  .entrada .cabecera{grid-column:1/-1;order:-1}
  .entrada .lamina{aspect-ratio:4/3}
  .entrada h3{min-height:0}
  .entrada .pie-celda{flex-direction:column;align-items:flex-end;gap:8px}
  .ficha-split{grid-template-columns:1fr}
  .ficha-lamina{position:static}
  .ficha-lamina .lamina{aspect-ratio:16/10;max-height:42vh}
  .bloque-totales .fila{flex-wrap:wrap;row-gap:4px}
  .precio-grande{font-size:1.55rem}
  .display{font-variation-settings:"wdth" 100}
  .t-h2{font-size:clamp(1.5rem,7.2vw,3.2rem)}
  .comando.movil-bloque{display:flex;width:100%;justify-content:space-between}
  .fila-ledger{
    grid-template-columns:96px minmax(0,1fr) auto;
    grid-template-areas:"lam nom nom" "lam pre sel";row-gap:8px;
  }
  .fila-ledger>.folio{display:none}
  .fila-ledger>a{grid-area:lam}
  .fila-ledger>h3{grid-area:nom}
  .fila-ledger>.precio{grid-area:pre;align-self:center}
  .fila-ledger>.sello{grid-area:sel;justify-self:end}
  .fila-cotizacion{grid-template-columns:70px 1fr auto;row-gap:8px}
  .fila-cotizacion .indice-col{display:none}
  .fila-cotizacion .lamina{width:70px}
  .pie-rejilla{grid-template-columns:1fr}
  .seccion-cabecera{grid-template-columns:1fr;align-items:start;gap:8px}
}

/* ---------- 17b · MODO QA (?directo): estados finales, cero espera ---------- */
html.qa{scroll-behavior:auto!important}
html.qa *,html.qa *::before,html.qa *::after{
  transition:none!important;
  animation-duration:0s!important;animation-delay:0s!important;
}
html.qa .rev{opacity:1;transform:none;filter:none}

/* ---------- 18 · MOVIMIENTO REDUCIDO ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
  .rev{opacity:1;transform:none;filter:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}