/* ============================================================
   Marina García · Portal B2B — sistema visual del prototipo
   Los valores salen del documento de diseño
   docs/superpowers/specs/2026-08-11-rediseno-portal-b2b-design.md
   ============================================================ */

@font-face { font-family:'Manrope'; font-weight:300; src:url('fonts/Manrope-Light.ttf') format('truetype'); font-display:swap }
@font-face { font-family:'Manrope'; font-weight:500; src:url('fonts/Manrope-Medium.ttf') format('truetype'); font-display:swap }
@font-face { font-family:'Montserrat'; font-weight:300; src:url('fonts/Montserrat-Light.ttf') format('truetype'); font-display:swap }
@font-face { font-family:'Montserrat'; font-weight:500; src:url('fonts/Montserrat-Medium.ttf') format('truetype'); font-display:swap }

:root{
  --gold:#807048; --gold-deep:#5E5230;
  --ink:#2F2B24; --ink-soft:#6B6455; --ink-muted:#7A7161;
  --line-strong:#948A74; --line:#D8D2C4; --line-soft:#ECE7DC;
  --paper:#FCFAF6; --white:#fff;
  /* Fondo de TODA caja que contenga una fotografía de producto.
     La fotografía de Marina García viene recortada sobre blanco puro: cualquier
     otro relleno deja una costura visible donde acaba la foto. */
  --photo:#FFFFFF;
  --ok:#5E7550; --ok-bg:#F4F8F1; --ok-line:#B9C9AE;
  --warn:#8A6D33; --warn-bg:#FDF7EC; --warn-line:#E0C9A0;
  --s:4px;
  --shadow:0 1px 2px rgba(47,43,36,.05), 0 8px 24px -12px rgba(47,43,36,.18);
  /* Alto de la barra inferior. Cero en escritorio, donde no existe; todo lo que
     se apoya en el borde de abajo (avisos, botones fijos) lo consulta. */
  --tabbar-h:0px;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; font-family:'Manrope',system-ui,sans-serif; font-weight:300;
  color:var(--ink); background:var(--white); font-size:15px; line-height:1.55;
  padding-bottom:var(--tabbar-h);
}
/* El catálogo es un visor a pantalla completa con su propia barra: ahí no hay
   barra inferior y tampoco su hueco. */
body:has(.cat-shell){ padding-bottom:0 }
img{ max-width:100%; display:block }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
a{ color:inherit; text-decoration:none }
h1,h2,h3,h4{ margin:0; font-weight:300; letter-spacing:.01em }

/* foco visible en todo lo interactivo */
:where(a,button,input,select,[tabindex]):focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; border-radius:2px;
}
/* Al abrirse, una ventana recibe el foco por programa para que el lector de
   pantalla entre en ella. Eso NO es navegación con teclado: el cerco del navegador
   sobraba. Con el teclado (`:focus-visible`) sí se marca. */
.sheet:focus:not(:focus-visible), .ped-modal:focus:not(:focus-visible){ outline:none }

.icon{ width:18px; height:18px; flex:none; stroke:currentColor; fill:none;
       stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round }
.icon-20{ width:20px; height:20px } .icon-24{ width:24px; height:24px }
.icon-16{ width:16px; height:16px }

.eyebrow{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-muted) }
.wrap{ max-width:1440px; margin:0 auto; padding:0 32px }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }

/* ---------------- cabecera ---------------- */
.hd{ position:sticky; top:0; z-index:40; background:var(--white); border-bottom:1px solid var(--line-soft) }
.hd-1{ display:flex; align-items:center; gap:24px; padding:16px 32px 12px; max-width:1440px; margin:0 auto }
.brand{ display:flex; align-items:center; gap:10px; flex:none }
.brand img{ height:48px; width:auto }
.searchbox{ flex:1; max-width:420px; display:flex; align-items:center; gap:8px;
  border:1px solid var(--line-strong); border-radius:2px; padding:7px 12px; background:var(--paper); color:var(--ink-muted) }
.searchbox input{ border:0; background:none; outline:none; font:inherit; color:var(--ink); width:100%; }
.searchbox input::placeholder{ color:var(--ink-muted) }
.hd-r{ margin-left:auto; display:flex; align-items:center; gap:22px; font-size:13px; color:var(--ink-soft) }
.hd-r button{ display:flex; align-items:center; gap:6px; color:var(--ink-soft); min-height:24px }
.cart-btn{ position:relative }
.cart-btn .badge{ position:absolute; top:-6px; right:-10px; background:var(--gold); color:#fff;
  font-size:10px; font-weight:500; border-radius:999px; min-width:16px; height:16px;
  display:grid; place-items:center; padding:0 4px }
.who{ display:flex; align-items:center; gap:8px; padding-left:22px; border-left:1px solid var(--line-soft) }
.who .t{ line-height:1.25 }
.who .t b{ display:block; font-size:12px; font-weight:500; letter-spacing:.04em }
.who .t span{ font-size:11px; color:var(--ink-muted) }
.who .salir{ color:var(--ink-muted); display:grid; place-items:center; padding:4px;
  margin-left:4px; border-radius:2px }
.who .salir:hover{ color:var(--gold) }

.hd-2{ max-width:1440px; margin:0 auto; padding:0 32px; display:flex; gap:30px }
.hd-2 a{ display:flex; align-items:center; gap:8px; padding:10px 0 12px; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); border-bottom:2px solid transparent; margin-bottom:-1px }
.hd-2 a:hover{ color:var(--ink) }
.hd-2 a.on{ color:var(--ink); border-bottom-color:var(--gold); font-weight:500 }
.hd-2 a.on .icon{ color:var(--gold) }

/* Barra inferior tipo aplicación. Solo existe por debajo de 780 px (ver el bloque
   de adaptación); aquí queda definida su forma. */
.tabbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:50;
  grid-template-columns:repeat(6,1fr);
  background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-top:1px solid var(--line-soft); padding-bottom:env(safe-area-inset-bottom) }
.tabbar a{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:8px 2px 7px; min-height:56px; color:var(--ink-muted);
  font-size:10px; letter-spacing:.04em; text-align:center }
.tabbar a .icon{ stroke-width:1.15 }
.tabbar a.on{ color:var(--gold); font-weight:500 }
/* La sección abierta se marca también con una barra arriba, para que se lea sin
   depender solo del color. */
.tabbar a.on::before{ content:""; position:absolute; top:0; width:26px; height:2px;
  background:var(--gold); border-radius:0 0 2px 2px; transform:translateY(-1px) }
.tabbar a{ position:relative }

/* ---------------- portada ---------------- */
.hero{ margin-top:24px; border:1px solid var(--line-soft); border-radius:3px; overflow:hidden;
  display:grid; grid-template-columns:minmax(320px,420px) 1fr; align-items:stretch; background:var(--white) }
.hero .txt{ padding:44px 44px 38px; display:flex; flex-direction:column; justify-content:center }
.hero h2{ font-family:'Montserrat',sans-serif; font-size:32px; font-weight:300;
  letter-spacing:.03em; margin:10px 0 12px; color:var(--ink) }
.hero p{ margin:0 0 24px; color:var(--ink-soft); font-size:15px; max-width:34ch }
.hero .eyebrow{ display:flex; align-items:center; gap:7px; color:var(--gold) }
.hero .btn{ align-self:flex-start }
/* La foto llena su mitad a sangre. `position:absolute` sobre el contenedor evita que
   la altura de la imagen empuje el banner: manda el min-height, no la foto. */
.hero .art{ position:relative; background:var(--photo);
  border-left:1px solid var(--line-soft); min-height:340px; overflow:hidden }
.hero .art img{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:38% 60% }
/* El punto sigue midiendo 7 px, pero lo que se pulsa mide 24: el criterio 2.5.8 de
   WCAG 2.2 habla del objetivo, no del dibujo. */
.dots{ display:flex; gap:2px; margin-top:22px }
.dots button{ min-width:24px; height:24px; padding:0 5px; display:grid; place-items:center;
  border-radius:2px }
.dots button::before{ content:""; width:7px; height:7px; border-radius:999px;
  background:var(--line); transition:width .18s ease }
.dots button.on::before{ width:22px; background:var(--gold) }

.col-c.sinrec .im{ opacity:.5 }
.col-c .hint{ display:block; font-style:normal; font-size:10px; color:var(--ink-muted); margin-top:2px }

.btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--gold); color:var(--gold);
  padding:9px 20px; border-radius:2px; font-size:12px; letter-spacing:.12em; text-transform:uppercase }
.btn:hover{ background:var(--paper) }
.btn.solid{ background:var(--gold); color:#fff; border-color:var(--gold) }
.btn.solid:hover{ background:var(--gold-deep); border-color:var(--gold-deep) }
.btn.sm{ padding:6px 14px; font-size:11px }
.btn[disabled]{ opacity:.45; pointer-events:none }

.sec{ margin-top:44px }
.sec-h{ display:flex; align-items:center; gap:10px; margin-bottom:16px }
.sec-h h3{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:500 }
.sec-h h3 .icon{ color:var(--gold) }
.sec-h .more{ margin-left:auto; font-size:12px; color:var(--gold); display:flex; align-items:center; gap:5px; min-height:24px }

.cols{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px }
/* La tarjeta es un <button> con dos <span> dentro. Sin declararlos en bloque siguen
   siendo elementos en línea, y a un elemento en línea NO se le aplica `aspect-ratio`:
   la caja de la foto salía casi cuadrada, recortaba por los lados una portada que es
   apaisada (1600×1066) y empujaba el pie fuera del `overflow:hidden`. Con esto la
   portada entra entera, sin recorte, y el nombre vuelve a verse. */
.col-c{ display:flex; flex-direction:column;
  border:1px solid var(--line-soft); border-radius:3px; overflow:hidden; background:var(--white);
  transition:box-shadow .18s, transform .18s; text-align:center }
.col-c:hover{ box-shadow:var(--shadow); transform:translateY(-2px) }
.col-c .im{ display:block; aspect-ratio:3/2; overflow:hidden; background:var(--photo) }
.col-c .im img{ width:100%; height:100%; object-fit:cover }
/* Sin `margin-top:auto`: el pie va pegado a la foto, así la línea de separación
   queda a la misma altura en toda la fila aunque unas fichas lleven aviso y otras no. */
.col-c .cap{ display:block; padding:10px 8px; font-size:12px;
  letter-spacing:.06em; color:var(--ink); border-top:1px solid var(--line-soft) }

.two{ display:grid; grid-template-columns:1.35fr 1fr; gap:24px; margin-top:44px; margin-bottom:56px }
.panel{ border:1px solid var(--line-soft); border-radius:3px; background:var(--white) }
.panel-h{ display:flex; align-items:center; gap:9px; padding:13px 18px; border-bottom:1px solid var(--line-soft) }
.panel-h .icon{ color:var(--gold) }
.panel-h h4{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:500 }
.panel-h .more{ margin-left:auto; font-size:12px; color:var(--gold); display:inline-flex; align-items:center; min-height:24px }
.panel-b{ padding:6px 0 }

.rowi{ display:flex; align-items:center; gap:14px; padding:11px 18px; font-size:13px;
  border-bottom:1px solid #F7F3EA; width:100%; text-align:left }
.rowi:last-child{ border-bottom:0 }
.rowi:hover{ background:var(--paper) }
.rowi .code{ font-weight:500; letter-spacing:.03em; min-width:96px }
.rowi .date{ color:var(--ink-muted); font-size:12px; min-width:76px }
.rowi .n{ color:var(--ink-muted); font-size:12px }
.rowi .amt{ margin-left:auto; font-variant-numeric:tabular-nums }

.tag{ font-size:11px; padding:2px 9px; border-radius:999px; border:1px solid var(--line);
  color:var(--ink-soft); white-space:nowrap }
.tag.ok{ border-color:var(--ok-line); color:var(--ok); background:var(--ok-bg) }
.tag.warn{ border-color:var(--warn-line); color:var(--warn); background:var(--warn-bg) }

.draft{ padding:18px }
.draft .amount{ font-family:'Montserrat',sans-serif; font-size:26px; font-weight:300 }
.draft .sub{ font-size:12px; color:var(--ink-muted); margin-bottom:14px }
.draft .minis{ display:flex; gap:7px; margin-bottom:16px }
.draft .minis img{ width:52px; height:52px; object-fit:contain; background:var(--photo); border:1px solid var(--line-soft); border-radius:2px }
.draft .acts{ display:flex; gap:8px }
.empty{ padding:26px 18px; text-align:center; color:var(--ink-muted); font-size:13px }
.empty .icon{ color:var(--line-strong); margin:0 auto 8px }

/* ---------------- catálogo ---------------- */
.cbar{ position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:16px;
  padding:9px 20px; background:rgba(252,250,246,.96); backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line-soft); font-size:12px; color:var(--ink-soft) }
.cbar .home{ display:flex; align-items:center; gap:7px; color:var(--gold); min-height:24px }
.crumb{ display:flex; align-items:center; gap:7px; color:var(--ink-muted) }
.crumb b{ color:var(--ink); font-weight:500 }
.cbar .r{ margin-left:auto; display:flex; align-items:center; gap:16px }

/* El catálogo ocupa exactamente la ventana: barra + escenario + tira.
   El escenario absorbe lo que sobra, así ninguna página se desborda
   por muchas piezas que lleve. */
.cat-shell{ display:flex; flex-direction:column; height:100vh; height:100dvh; overflow:hidden }
.cat-shell .cbar{ flex:none; position:static }
.cat-shell .strip{ flex:none; position:static }

.stage{ position:relative; flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr;
  background:var(--paper) }
.stage.full{ grid-template-columns:1fr }
.stage .mood{ overflow:hidden; background:var(--photo); display:grid; place-items:center; min-height:0 }
.stage .mood img{ width:100%; height:100%; object-fit:contain }
/* título y piezas se centran como un solo bloque, no cada uno por su lado */
.stage .side{ padding:20px 30px; display:flex; flex-direction:column; gap:16px;
  justify-content:center; min-height:0; overflow:hidden }
.stage .side > .titulo{ flex:none }
.stage .side h2{ font-family:'Montserrat',sans-serif; font-size:22px; font-weight:300; letter-spacing:.04em }
.stage .side .desc{ font-size:13px; color:var(--ink-soft); max-width:46ch; margin:4px 0 0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
/* páginas densas: la tarjeta aprieta para que quepan sin recortar nada */
.pgrid.n4 .pcard, .pgrid.n6 .pcard{ padding:8px; gap:4px }
.pgrid.n4 .pcard .btn.sm, .pgrid.n6 .pcard .btn.sm{ padding:4px 10px; font-size:10px }
.pgrid.n4 .pcard .pr b, .pgrid.n6 .pcard .pr b{ font-size:13px }
.pgrid.n6 .pcard .owned, .pgrid.n4 .pcard .owned{ font-size:9px; padding:1px 6px }

/* La rejilla ocupa el alto disponible pero las tarjetas NO se estiran: la foto
   mantiene su proporción cuadrada y el conjunto se centra. Estirar la caja sin
   estirar la imagen dejaba la pieza flotando en un vacío enorme.
   `--phmax` es el techo de la foto según cuántas filas haya, para que las
   páginas densas sigan cabiendo sin recortar. */
.pgrid{ display:grid; gap:12px; flex:none; min-height:0;
  align-content:center; justify-content:center; width:100% }
.pgrid.n1{ grid-template-columns:minmax(0,320px); --phmax:calc(100vh - 340px) }
.pgrid.n2{ grid-template-columns:repeat(2,minmax(0,280px)); --phmax:calc(100vh - 340px) }
.pgrid.n3{ grid-template-columns:repeat(3,minmax(0,1fr)); --phmax:calc(100vh - 340px) }
.pgrid.n4{ grid-template-columns:repeat(2,minmax(0,260px)); --phmax:calc((100vh - 430px) / 2) }
.pgrid.n6{ grid-template-columns:repeat(3,minmax(0,1fr)); --phmax:calc((100vh - 430px) / 2) }

.pcard{ position:relative; border:1px solid var(--line-soft); border-radius:3px; background:var(--white);
  padding:10px; display:flex; flex-direction:column; gap:6px; text-align:left;
  transition:box-shadow .18s; min-height:0 }
.pcard:hover{ box-shadow:var(--shadow) }
.pcard .ph{ flex:none; aspect-ratio:1; max-height:var(--phmax, none);
  background:var(--photo); border-radius:2px; overflow:hidden; padding:0; width:100% }
.pcard .ph img{ width:100%; height:100%; object-fit:contain }
.pcard .ref{ font-size:12px; font-weight:500; letter-spacing:.04em }
/* Referencia, muestras, precio y botón caen SIEMPRE a la misma altura en toda la
   fila, tenga la pieza variantes o no. Si no, la foto manda y descuadra la fila. */
.pcard .sw{ min-height:16px }
.pcard .sw.vacia{ display:block }
.pcard .pr{ display:flex; align-items:baseline; gap:8px; margin-top:auto }
.pcard .pr b{ font-size:14px; font-weight:500; font-variant-numeric:tabular-nums }
.pcard .pr span{ font-size:11px; color:var(--ink-muted) }
.owned{ position:absolute; top:7px; right:7px; display:flex; align-items:center; gap:4px;
  background:var(--ok-bg); border:1px solid var(--ok-line); color:var(--ok);
  font-size:10px; border-radius:999px; padding:2px 7px }

.navarrow{ position:absolute; top:50%; transform:translateY(-50%); z-index:5;
  width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.94);
  border:1px solid var(--line); display:grid; place-items:center; color:var(--gold);
  box-shadow:var(--shadow) }
.navarrow:hover{ background:#fff; border-color:var(--gold) }
.navarrow.l{ left:16px } .navarrow.r{ right:16px }
.navarrow[disabled]{ opacity:.3 }

.strip{ position:sticky; bottom:0; display:flex; align-items:center; gap:8px; padding:9px 20px;
  background:rgba(252,250,246,.97); backdrop-filter:blur(6px); border-top:1px solid var(--line-soft) }
.strip .rail{ display:flex; gap:6px; overflow-x:auto; scrollbar-width:thin; padding:2px }
.strip .rail button{ width:44px; height:33px; border:1px solid var(--line); border-radius:2px;
  overflow:hidden; flex:none; background:var(--photo); padding:0 }
.strip .rail button img{ width:100%; height:100%; object-fit:cover }
.strip .rail button.on{ border:2px solid var(--gold) }
.strip .pg{ margin-left:auto; font-size:12px; color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap }
.strip .fold{ font-size:11px; color:var(--ink-muted); border:1px solid var(--line);
  border-radius:999px; padding:3px 10px; white-space:nowrap }

/* ---------------- ficha ---------------- */
.sheet-bd{ position:fixed; inset:0; background:rgba(47,43,36,.42); z-index:60;
  display:grid; place-items:center; padding:28px }
.sheet{ background:#fff; border-radius:4px; max-width:960px; width:100%; max-height:90vh; max-height:90dvh;
  overflow:auto; box-shadow:0 24px 60px -20px rgba(47,43,36,.4) }
.sheet-h{ display:flex; align-items:center; padding:14px 20px; border-bottom:1px solid var(--line-soft) }
.sheet-h b{ font-weight:500; letter-spacing:.05em }
.sheet-h button{ margin-left:auto; color:var(--ink-muted) }
.sheet-b{ display:grid; grid-template-columns:1fr 1fr; gap:28px; padding:24px }
.gal .main{ aspect-ratio:1; background:var(--photo); border:1px solid var(--line-soft); border-radius:3px; overflow:hidden }
.gal .main img{ width:100%; height:100%; object-fit:contain }
.gal .thumbs{ display:flex; gap:8px; margin-top:10px }
.gal .thumbs button{ width:58px; height:58px; border:1px solid var(--line-soft); border-radius:2px; overflow:hidden; padding:0 }
.gal .thumbs button.on{ border-color:var(--gold) }
.gal .thumbs img{ width:100%; height:100%; object-fit:contain; background:var(--photo) }

.finfo h2{ font-family:'Montserrat',sans-serif; font-size:24px; font-weight:300; letter-spacing:.05em }
.finfo .sub{ color:var(--ink-muted); font-size:13px; margin-bottom:16px }
.prices{ display:flex; gap:32px; padding:14px 0; border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft); margin-bottom:18px }
.prices .lb{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); display:block }
.prices .yours b{ font-family:'Montserrat',sans-serif; font-size:26px; font-weight:300; font-variant-numeric:tabular-nums }
.prices .pvp b{ font-size:17px; font-weight:300; color:var(--ink-soft); font-variant-numeric:tabular-nums }
.attr{ margin-bottom:14px }
.attr .lb{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:6px }
.sw{ display:flex; gap:8px; flex-wrap:wrap }
.sw button{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(0,0,0,.18); padding:0 }
.sw button.on{ outline:2px solid var(--gold); outline-offset:2px }
.sw button:hover{ border-color:var(--gold) }
.pcard .sw button{ width:16px; height:16px }
.attr .lb .val{ color:var(--ink); font-weight:500; letter-spacing:0; text-transform:none; font-size:11px }
.hint-var{ font-size:11px; color:var(--ink-muted); margin:7px 0 0 }
.valor-solo{ font-size:13px; color:var(--ink-soft) }
select.sel{ border:1px solid var(--line-strong); border-radius:2px; padding:7px 10px;
  background:var(--paper); font:inherit; font-size:13px; min-width:220px }
.qtyrow{ display:flex; align-items:center; gap:12px; margin:18px 0 }
.qty{ display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:2px }
.qty button{ padding:7px 12px; color:var(--gold); display:grid; place-items:center }
.qty b{ padding:7px 14px; border-left:1px solid var(--line-soft); border-right:1px solid var(--line-soft);
  font-weight:500; min-width:44px; text-align:center; font-variant-numeric:tabular-nums }
.desc-b{ font-size:13px; color:var(--ink-soft); line-height:1.6 }
.bought{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:12px;
  color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:2px; padding:9px 12px }

/* ---------------- buscador ---------------- */
/* El borde superior cierra la caja de filtros por arriba: sin él, la columna crema
   arrancaba a media página con la línea lateral colgando de la nada. */
/* La columna crema y su línea las pinta la rejilla, no la barra: la barra es corta y
   pegajosa, y si el color fuese suyo se cortaría a media página. */
.search-l{ --railw:238px;
  display:grid; grid-template-columns:var(--railw) 1fr; gap:0; min-height:70vh;
  background:linear-gradient(to right,
    var(--paper) 0 calc(var(--railw) - 1px),
    var(--line-soft) calc(var(--railw) - 1px) var(--railw),
    transparent var(--railw)) }
/* La barra se queda pegada bajo la cabecera y con scroll propio: al filtrar desde
   abajo del todo, la lista de resultados ya no se mueve de sitio. */
.rail-f{ position:sticky; top:var(--hd-h,128px); align-self:start;
  max-height:calc(100dvh - var(--hd-h,128px)); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin }
.rail-in{ padding:20px 16px 28px }
/* El título vive en la columna de resultados, con el mismo aire que la barra. */
.res .page-h{ margin:2px 0 16px }
.fg{ margin-bottom:2px }
.fg-h{ display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  font-weight:500; padding:8px 6px; border-radius:2px }
.fg-h span{ flex:1 }
.fg-h:hover{ background:var(--white) }
.fg-h .chev{ color:var(--line-strong); transition:transform .18s ease }
.fg.on > .fg-h .chev{ transform:rotate(90deg) }
.fg-h .act{ font-style:normal; font-size:10px; letter-spacing:0; background:var(--gold);
  color:#fff; border-radius:999px; min-width:16px; height:16px; display:grid;
  place-items:center; padding:0 5px }
.fg-b{ padding:2px 6px 12px }
@media (prefers-reduced-motion:reduce){ .fg-h .chev{ transition:none } }
.fg > b{ display:flex; align-items:center; gap:7px; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); margin-bottom:9px; font-weight:500 }
.fg label{ display:flex; align-items:center; gap:8px; padding:3px 0; font-size:13px;
  color:var(--ink-soft); cursor:pointer }
.fg label:hover{ color:var(--ink) }
.fg label input{ accent-color:var(--gold); width:14px; height:14px; margin:0 }
.fg label .n{ margin-left:auto; font-style:normal; font-size:11px; color:var(--ink-muted);
  font-variant-numeric:tabular-nums }
.fg label.vacio{ color:var(--line-strong); cursor:not-allowed }
.fg label.vacio:hover{ color:var(--line-strong) }
.fg .kids{ padding-left:20px }
.fg label .pastilla{ width:13px; height:13px; border-radius:50%; flex:none;
  border:1px solid rgba(0,0,0,.18); display:block }
.rail-f .sep{ height:1px; background:var(--line); margin:10px 6px }

/* precio */
.precio-in{ display:flex; align-items:center; gap:6px; margin-bottom:8px }
.precio-in input{ width:100%; min-width:0; border:1px solid var(--line-strong); border-radius:2px;
  padding:5px 7px; font:inherit; font-size:12px; background:var(--white); color:var(--ink);
  font-variant-numeric:tabular-nums }
.precio-in input::-webkit-outer-spin-button,
.precio-in input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.precio-in span{ color:var(--ink-muted); font-size:12px }
.precio-in .eur{ color:var(--ink-muted) }
.atajos{ display:flex; flex-wrap:wrap; gap:4px }
.atajos button{ font-size:11px; border:1px solid var(--line); border-radius:999px;
  padding:4px 10px; min-height:24px; color:var(--ink-soft); background:var(--white) }
.atajos button:hover{ border-color:var(--gold); color:var(--gold) }
.atajos button.on{ background:var(--gold); border-color:var(--gold); color:#fff }
.res{ padding:22px 28px 48px; min-width:0 }
.chips{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:18px; min-height:28px }
.chip{ display:inline-flex; align-items:center; gap:6px; font-size:12px; border:1px solid var(--line-strong);
  border-radius:999px; padding:3px 11px; color:var(--ink-soft); background:var(--white) }
.chip button{ color:var(--gold); display:grid; place-items:center }
.chips .count{ margin-left:auto; font-size:13px; color:var(--ink-muted); font-variant-numeric:tabular-nums }
.rgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.pager{ display:flex; align-items:center; justify-content:center; gap:6px; margin-top:32px; flex-wrap:wrap }
.pager button{ min-width:34px; height:34px; border:1px solid var(--line); border-radius:2px;
  font-size:13px; color:var(--ink-soft); display:grid; place-items:center; padding:0 8px }
.pager button.on{ background:var(--gold); border-color:var(--gold); color:#fff }
.pager button[disabled]{ opacity:.35 }
.pager .gap{ color:var(--ink-muted); padding:0 2px }
.pager select{ border:1px solid var(--line); border-radius:2px; padding:6px 8px; font:inherit;
  font-size:12px; color:var(--ink-soft); margin-left:10px; background:#fff }

/* ---------------- outlet ---------------- */
.cats-o{ display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 20px }
.cats-o button{ display:inline-flex; align-items:center; gap:8px; font-size:12px;
  border:1px solid var(--line); border-radius:999px; padding:6px 14px;
  color:var(--ink-soft); background:var(--white) }
.cats-o button i{ font-style:normal; font-size:11px; color:var(--ink-muted);
  font-variant-numeric:tabular-nums }
.cats-o button:hover{ border-color:var(--gold); color:var(--gold) }
.cats-o button.on{ background:var(--gold); border-color:var(--gold); color:#fff }
/* Blanco entero, no translúcido: sobre el dorado, un blanco al 75 % se queda en
   3,5:1 y no llega al 4,5:1 que pide AA. */
.cats-o button.on i{ color:#fff }

.ocard{ padding-top:10px }
.ocard .dto{ position:absolute; top:8px; left:8px; z-index:1; font-size:10px; font-weight:500;
  letter-spacing:.06em; background:var(--gold); color:#fff; border-radius:999px; padding:2px 8px }
.ocard .nm{ font-size:11px; color:var(--ink-muted); line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:30px }
.ocard .pr b{ font-size:16px; color:var(--gold-deep) }
.ocard .pr .antes{ text-decoration:line-through; color:var(--ink-muted) }
.ocard .ph{ display:block; width:100% }
.dto-l{ font-style:normal; font-size:10px; font-weight:500; letter-spacing:.04em;
  color:var(--gold); border:1px solid var(--line); border-radius:999px; padding:1px 7px;
  margin-left:6px }

/* ---------------- carrito y tablas ---------------- */
.cart-l{ display:grid; grid-template-columns:1.7fr 1fr; gap:0; border:1px solid var(--line-soft);
  border-radius:3px; margin:28px 0 56px; overflow:hidden }
.cart-lines{ border-right:1px solid var(--line-soft) }
.cline{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid #F7F3EA }
.cline:last-child{ border-bottom:0 }
.cline img{ width:56px; height:56px; object-fit:contain; background:var(--photo);
  border:1px solid var(--line-soft); border-radius:2px }
.cline .nm b{ display:block; font-size:13px; font-weight:500; letter-spacing:.04em }
.cline .nm span{ font-size:12px; color:var(--ink-muted) }
.cline .qty{ margin-left:auto }
.cline .tt{ width:96px; text-align:right; font-variant-numeric:tabular-nums; font-size:14px }
.cline .rm{ color:var(--line-strong); padding:4px }
.cline .rm:hover{ color:var(--warn) }
.sumup{ padding:20px }
.forwho{ display:flex; align-items:flex-start; gap:9px; font-size:12px; background:var(--warn-bg);
  border:1px solid var(--warn-line); color:var(--warn); border-radius:2px; padding:10px 12px; margin-bottom:16px }
.sumrow{ display:flex; justify-content:space-between; font-size:13px; color:var(--ink-soft); padding:5px 0 }
.sumrow.tot{ border-top:1px solid var(--line-soft); margin-top:8px; padding-top:12px;
  font-size:19px; color:var(--ink); font-family:'Montserrat',sans-serif; font-weight:300 }
.sumrow span:last-child{ font-variant-numeric:tabular-nums }
.obs{ width:100%; border:1px solid var(--line-strong); border-radius:2px; background:var(--paper);
  padding:9px; font:inherit; font-size:13px; margin:14px 0; min-height:66px; resize:vertical }

/* Selectores de hijo directo a propósito: dentro de un pedido desplegado hay otra
   tabla (.ped-lineas) y con selectores de descendencia heredaba el fondo crema
   y el relleno de la tabla de fuera. */
.tbl{ width:100%; border-collapse:collapse; margin:24px 0 56px; font-size:13px }
.tbl > thead > tr > th{ text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; padding:10px 16px; border-bottom:1px solid var(--line) }
.tbl > tbody > tr > td{ padding:12px 16px; border-bottom:1px solid #F7F3EA }
.tbl > tbody > tr:hover > td{ background:var(--paper) }
.tbl > tbody > tr > td.num, .tbl > thead > tr > th.num{ text-align:right; font-variant-numeric:tabular-nums }
/* min-height 24: enlaces de descarga, «ver todas» y la miga del catálogo son
   objetivos pulsables y el texto solo levantaba 19 px. */
.tbl .dl{ color:var(--gold); display:inline-flex; align-items:center; gap:6px; font-size:12px;
  min-height:24px }

/* --- pedidos desplegables --- */
.tbl-ped .ped-r{ cursor:pointer }
.tbl-ped .ped-r .cv{ width:38px; padding-right:0 }
.tbl-ped .ped-r .cv button{ display:grid; place-items:center; width:26px; height:26px;
  color:var(--ink-muted); border-radius:2px }
.tbl-ped .ped-r .cv .icon{ transition:transform .18s ease }
.tbl-ped .ped-r.on .cv button{ color:var(--gold) }
.tbl-ped .ped-r.on .cv .icon{ transform:rotate(90deg) }
.tbl-ped .ped-r.on > td{ background:var(--paper); border-bottom-color:transparent }
.tbl-ped .ped-d > td{ padding:0; background:var(--paper) }
.tbl-ped .ped-d:hover > td{ background:var(--paper) }

.ped-det{ padding:4px 16px 20px 50px; border-bottom:1px solid var(--line);
  animation:pedAbrir .18s ease }
@keyframes pedAbrir{ from{ opacity:0; transform:translateY(-4px) } to{ opacity:1; transform:none } }
@media (prefers-reduced-motion:reduce){
  .ped-det{ animation:none }
  .tbl-ped .ped-r .cv .icon{ transition:none }
}

.ped-meta{ display:flex; flex-wrap:wrap; gap:8px 26px; font-size:12px; color:var(--ink-soft);
  padding-bottom:14px }
.ped-meta span{ display:inline-flex; align-items:center; gap:7px }
.ped-meta .icon{ color:var(--gold) }
.ped-meta b{ font-weight:500; color:var(--ink) }

/* La tabla de líneas va sobre blanco puro: es la zona de lectura fina del pedido
   (referencias, unidades e importes) y el crema de alrededor le quitaba contraste. */
.ped-lineas{ width:100%; border-collapse:collapse; font-size:13px; background:var(--white);
  border:1px solid var(--line-soft) }
.ped-lineas th{ text-align:left; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); font-weight:500; padding:9px 14px; border-bottom:1px solid var(--line-soft);
  background:var(--white) }
.ped-lineas td{ padding:11px 14px; border-bottom:1px solid #F7F3EA; vertical-align:middle;
  background:var(--white) }
.ped-lineas tr:last-child td{ border-bottom:0 }
/* aire en los dos extremos de la fila, que si no la foto y el total tocan el borde */
.ped-lineas th:first-child, .ped-lineas td:first-child{ padding-left:20px }
.ped-lineas th:last-child, .ped-lineas td:last-child{ padding-right:20px }
.ped-lineas .num{ text-align:right; font-variant-numeric:tabular-nums }
.ped-lineas .th{ width:92px; padding-right:0 }
.ped-lineas .th img{ width:56px; height:56px; object-fit:contain; display:block; background:var(--photo) }
.ped-lineas .ds{ display:block; color:var(--ink-muted); font-size:12px; margin-top:2px }
.ped-lineas tbody tr.clic{ cursor:pointer }
.ped-lineas tbody tr.clic:hover td{ background:var(--paper) }
.ped-lineas .ref-lnk{ font-weight:500; color:var(--ink); text-align:left;
  text-decoration:underline; text-decoration-color:var(--line);
  text-underline-offset:3px; transition:text-decoration-color .15s }
.ped-lineas tbody tr.clic:hover .ref-lnk{ text-decoration-color:var(--gold) }
.ped-lineas .vr{ color:var(--gold) }
.ped-lineas tfoot td{ border-top:1px solid var(--line); border-bottom:0;
  color:var(--ink-soft); font-size:12px }
.ped-lineas tfoot .num b{ font-size:14px; color:var(--ink) }

.ped-acc{ display:flex; gap:10px; padding-top:14px }

/* --- selector: desplegable o ventana --- */
.vista-sel{ margin-left:auto; display:flex; align-items:center; gap:10px; margin-bottom:4px }
.vista-sel .lb{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted) }
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:2px; overflow:hidden }
.seg button{ display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--ink-soft);
  padding:6px 13px; background:var(--white) }
.seg button + button{ border-left:1px solid var(--line) }
.seg button:hover{ color:var(--gold) }
.seg button.on{ background:var(--gold); color:#fff }
.seg button.on:hover{ color:#fff }

/* --- pedido en ventana --- */
/* z-index por debajo de la ficha de producto (60): desde una línea del pedido se
   abre la ficha, y esa tiene que quedar por encima. */
.ped-modal-bd{ position:fixed; inset:0; background:rgba(47,43,36,.42); z-index:55;
  display:grid; place-items:center; padding:28px; animation:pedFade .16s ease }
/* `dvh`, no `vh`: en iOS `vh` mide la ventana CON la barra del navegador oculta,
   así que un 88vh es más alto que lo que de verdad se ve y la ventana se salía por
   arriba y por abajo — no se podía cerrar ni llegar a los botones. */
.ped-modal{ background:var(--white); border-radius:4px; width:100%; max-width:900px;
  max-height:88vh; max-height:88dvh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 24px 60px -20px rgba(47,43,36,.4) }
.ped-modal-h{ flex:none; display:flex; align-items:center; gap:14px; padding:14px 20px;
  border-bottom:1px solid var(--line-soft) }
.ped-modal-h b{ display:inline-flex; align-items:center; gap:9px; font-weight:500; letter-spacing:.05em }
.ped-modal-h b .icon{ color:var(--gold) }
.ped-modal-h .fch{ font-size:12px; color:var(--ink-muted) }
.ped-modal-h .cerrar{ margin-left:auto; color:var(--ink-muted); display:grid; place-items:center }
.ped-modal-h .cerrar:hover{ color:var(--ink) }
/* Solo scroll vertical: el ancho del contenido se ajusta, nunca se desborda. */
.ped-modal-b{ overflow-y:auto; overflow-x:hidden; background:var(--paper);
  overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
/* Pie fijo con las acciones: siempre visible, se recorra lo que se recorra. */
.ped-modal-f{ flex:none; border-top:1px solid var(--line-soft); background:var(--white);
  padding:12px 20px; padding-bottom:calc(12px + env(safe-area-inset-bottom)) }
.ped-modal-f .ped-acc{ padding-top:0 }
.ped-det.en-modal{ padding:18px 20px 20px; border-bottom:0; animation:none }
.ped-det.en-modal .ped-meta{ padding-bottom:13px }
@keyframes pedFade{ from{ opacity:0 } to{ opacity:1 } }
@media (prefers-reduced-motion:reduce){ .ped-modal-bd{ animation:none } }

.page-h{ display:flex; align-items:flex-end; gap:14px; margin:32px 0 4px; flex-wrap:wrap }
.page-h h1{ font-family:'Montserrat',sans-serif; font-size:26px; font-weight:300; letter-spacing:.04em;
  display:flex; align-items:center; gap:11px }
.page-h h1 .icon{ color:var(--gold) }
.page-h .sub{ color:var(--ink-muted); font-size:13px; margin-bottom:4px }

/* ---------------- acceso ---------------- */
.login-body{ background:var(--paper) }
.login{ display:grid; grid-template-columns:1.15fr 1fr; min-height:100vh }
/* La fotografía entra a sangre y el encuadre se fija por la izquierda, que es donde
   está la pieza; al estrechar la ventana no se pierde. */
.login-foto{ background:url('img/etna-home.jpg') 38% 55%/cover no-repeat var(--photo) }
.login-panel{ display:flex; flex-direction:column; justify-content:center; align-items:center;
  min-height:100dvh;
  padding:40px 32px; background:var(--paper) }
.login-caja{ width:100%; max-width:360px; display:flex; flex-direction:column }
.login-logo{ height:54px; width:auto; align-self:flex-start; margin-bottom:34px }
.login-caja h1{ font-family:'Montserrat',sans-serif; font-size:32px; font-weight:300;
  letter-spacing:.05em; margin:6px 0 10px }
.login-int{ font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0 0 26px }

.campo{ display:block; margin-bottom:16px }
.campo > span:first-child{ display:block; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:7px }
.campo-in{ display:flex; align-items:center; gap:10px; background:var(--white);
  border:1px solid var(--line-strong); border-radius:2px; padding:0 12px;
  color:var(--ink-muted); transition:border-color .15s }
.campo-in:focus-within{ border-color:var(--gold) }
.campo-in input{ flex:1; min-width:0; border:0; background:none; outline:none;
  font:inherit; font-size:14px; color:var(--ink); padding:11px 0 }
.campo-in input::placeholder{ color:var(--line-strong) }

.login-rec{ display:flex; align-items:center; gap:9px; font-size:13px; color:var(--ink-soft);
  margin:4px 0 22px; cursor:pointer }
.login-rec input{ accent-color:var(--gold); width:15px; height:15px; margin:0 }
.login-btn{ width:100%; justify-content:center; padding:12px; letter-spacing:.1em }
.login-pie{ font-size:12px; color:var(--ink-muted); line-height:1.6; margin:22px 0 0;
  padding-top:18px; border-top:1px solid var(--line-soft) }
.login-pie b{ color:var(--gold); font-weight:500 }
.login-demo{ font-size:11px; color:var(--ink-muted); margin:36px 0 0; text-align:center }
.login-demo b{ color:var(--gold); font-weight:500 }

.login-error{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--warn);
  background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:2px;
  padding:10px 12px; margin-bottom:20px }
/* `display:flex` gana al atributo `hidden` del navegador: hay que anularlo a mano
   o el aviso de error se ve siempre. */
.login-error[hidden]{ display:none }
.login-error .icon{ flex:none }

@media (max-width:860px){
  .login{ grid-template-columns:1fr }
  .login-foto{ display:none }
  .login-panel{ min-height:100dvh }
}

/* toast */
.toast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%) translateY(80px);
  background:var(--ink); color:#fff; font-size:13px; padding:11px 18px; border-radius:3px;
  display:flex; align-items:center; gap:9px; z-index:80; opacity:0; transition:.24s; pointer-events:none }
.toast.on{ transform:translateX(-50%) translateY(0); opacity:1 }

.demo-note{ background:var(--paper); border-top:1px solid var(--line-soft); padding:14px 32px;
  font-size:12px; color:var(--ink-muted); text-align:center }
.demo-note b{ color:var(--gold); font-weight:500 }

/* Con una ventana abierta la página de detrás no se mueve. */
body.sin-scroll{ overflow:hidden }

/* Botón de filtros: solo existe en pantallas estrechas. */
.filtros-movil{ display:none; align-items:center; gap:9px; font-size:12px;
  letter-spacing:.1em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--gold); border-radius:2px; padding:11px 16px;
  width:100%; justify-content:center; margin-bottom:16px }
.filtros-movil .icon{ color:var(--gold) }
.filtros-movil i{ font-style:normal; font-size:11px; letter-spacing:0; background:var(--gold);
  color:#fff; border-radius:999px; min-width:18px; height:18px; display:grid;
  place-items:center; padding:0 5px }
/* Cabecera de la hoja de filtros: invisible mientras la barra es una columna. */
.rail-h{ display:none; align-items:center; gap:12px; flex:none;
  padding:12px 16px; border-bottom:1px solid var(--line-soft); background:var(--white) }
.rail-h b{ display:inline-flex; align-items:center; gap:9px; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; margin-right:auto }
.rail-h b .icon{ color:var(--gold) }
.rail-h .limpiar{ font-size:12px; color:var(--gold); min-height:44px; padding:0 6px }
.rail-h .cerrar{ color:var(--ink-muted); display:grid; place-items:center;
  width:44px; height:44px; margin-right:-8px }
.ver-resultados{ display:none; position:sticky; bottom:0; width:100%; justify-content:center;
  background:var(--gold); color:#fff; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; padding:14px; box-shadow:0 -8px 16px -10px rgba(47,43,36,.35) }

@media (max-width:820px){
  .ped-modal-bd{ padding:12px }
  .ped-modal{ max-height:94dvh }
  .ped-det.en-modal{ padding:14px 12px 16px }
  .ped-det.en-modal .ped-lineas th:first-child,
  .ped-det.en-modal .ped-lineas td:first-child{ padding-left:12px }
  .ped-det.en-modal .ped-lineas th:last-child,
  .ped-det.en-modal .ped-lineas td:last-child{ padding-right:12px }
  .ped-det.en-modal .ped-lineas th, .ped-det.en-modal .ped-lineas td{ padding:9px }
  .ped-det.en-modal .ped-lineas .th{ width:64px }
  .ped-det.en-modal .ped-lineas .th img{ width:44px; height:44px }
  .ped-modal-h .fch{ display:none }
}

/* ============================================================
   Adaptación a pantalla estrecha

   Tres saltos, cada uno con un motivo:
     1100  portátil pequeño y tableta apaisada → una columna menos en las rejillas
      780  tableta vertical y móvil grande     → se acaban las dos columnas: la
            cabecera se parte en dos filas, el menú se recorre en horizontal y la
            barra de filtros pasa a abrirse a demanda
      560  móvil                                → rejillas de dos, tablas sin las
            columnas secundarias y menos aire en los bordes
   ============================================================ */

@media (max-width:1100px){
  .cols{ grid-template-columns:repeat(3,1fr) }
  .rgrid{ grid-template-columns:repeat(3,1fr) }
  .two{ grid-template-columns:1fr }
  .sheet-b{ grid-template-columns:1fr }
  .cart-l{ grid-template-columns:1fr }
  .search-l{ --railw:212px }
  .fg-h{ letter-spacing:.1em }
}

@media (max-width:780px){
  /* La navegación baja al pulgar y desaparece de la cabecera. */
  :root{ --tabbar-h:calc(56px + env(safe-area-inset-bottom)) }
  .tabbar{ display:grid }
  .hd-2{ display:none }
  .toast{ bottom:calc(20px + var(--tabbar-h)) }
  .ver-resultados{ bottom:var(--tabbar-h) }

  /* 16 px es el umbral por debajo del cual iOS amplía la página al enfocar un
     campo, y luego la deja descolocada. Vale para todos: buscador, precios,
     observaciones y el desplegable de resultados por página. */
  input, select, textarea,
  .searchbox input, .campo-in input, .precio-in input, .pager select, .obs{ font-size:16px }

  /* Controles de la cabecera: eran de 22 px de alto, por debajo del mínimo. */
  .hd-r button, .who .salir{ min-height:44px }

  .wrap{ padding:0 20px }
  .page-h{ margin:24px 0 4px }
  .page-h h1{ font-size:23px }
  .demo-note{ padding:14px 20px }

  /* Cabecera en dos filas: identidad arriba, búsqueda a lo ancho debajo. */
  .hd-1{ flex-wrap:wrap; gap:10px 16px; padding:12px 20px 10px }
  .brand img{ height:40px }
  .searchbox{ order:3; flex:1 1 100%; max-width:none }
  .hd-r{ gap:16px }
  .who{ padding-left:14px }

  /* Portada: la fotografía manda, encima del texto. */
  .hero{ grid-template-columns:1fr; margin-top:16px }
  .hero .art{ order:-1; min-height:0; aspect-ratio:16/10;
    border-left:0; border-bottom:1px solid var(--line-soft) }
  .hero .txt{ padding:26px 22px 28px }
  .hero h2{ font-size:26px }
  .hero p{ margin-bottom:20px }
  .sec{ margin-top:32px }
  .two{ margin-top:32px }

  .rgrid{ grid-template-columns:repeat(2,1fr); gap:12px }

  /* Buscador: la barra de filtros deja de ser columna y se abre a demanda. */
  .search-l{ grid-template-columns:1fr; background:none; min-height:0 }
  /* `overflow:visible` es imprescindible: con el scroll propio de escritorio, la
     barra sería su propia caja de desplazamiento y el botón de abajo nunca se
     fijaría a la pantalla. */
  .rail-f{ display:none; position:static; max-height:none; overflow:visible;
    border-bottom:1px solid var(--line-soft) }
  /* Hoja de filtros a pantalla completa (`inset:0`, sin depender de ninguna altura
     medida). Antes era un panel que empujaba los resultados hacia abajo y cuyo
     botón fijo tapaba los dos últimos grupos, que no se podían pulsar enteros. */
  .search-l.filtros-on .rail-f{ display:flex; flex-direction:column;
    position:fixed; inset:0; z-index:60; background:var(--paper); border:0 }
  .search-l.filtros-on .rail-h{ display:flex }
  /* Con la hoja abierta, la barra inferior se retira: es una tarea modal y la hoja
     ya trae su propia salida (la X y el botón de ver resultados). */
  body:has(.search-l.filtros-on) .tabbar{ display:none }
  .search-l.filtros-on .rail-in{ flex:1; overflow-y:auto; overscroll-behavior:contain;
    padding-top:6px }
  .ver-resultados{ display:flex; position:static; flex:none }
  .rail-in{ padding:14px 20px 20px }
  .filtros-movil{ display:inline-flex; margin-bottom:12px }
  .res{ padding:18px 20px 44px }
  .res .page-h{ margin:18px 0 12px }
  .res .chips{ min-height:0; margin-bottom:14px }
  /* Objetivos táctiles: la fila entera del filtro se pulsa con el dedo. */
  .fg label{ padding:7px 0 }
  .fg label input{ width:17px; height:17px }
  .pcard .sw button{ width:24px; height:24px }

  /* Catálogo: ambiente arriba, piezas abajo, cada uno con su sitio. */
  .cat-shell{ height:100dvh }
  .stage{ grid-template-columns:1fr; grid-template-rows:30dvh minmax(0,1fr) }
  .stage.full{ grid-template-rows:minmax(0,1fr) }
  .stage .mood{ border-bottom:1px solid var(--line-soft) }
  .stage .side{ padding:16px 20px 20px; overflow-y:auto; justify-content:flex-start; gap:14px }
  .stage .side h2{ font-size:19px }
  /* El techo de la foto se mide contra el alto visible y descontando lo que ocupa
     el resto de la tarjeta (referencia, precio y botón): en una página de una sola
     pieza tiene que caber entera sin recortar el botón. En las páginas densas se
     asume que la lista se recorre: caben dos filas y el resto baja con el dedo. */
  .pgrid{ align-content:start }
  .pgrid.n1, .pgrid.n2, .pgrid.n3, .pgrid.n4, .pgrid.n6{
    grid-template-columns:repeat(2,minmax(0,1fr)); --phmax:19dvh }
  .pgrid.n1{ grid-template-columns:minmax(0,290px); --phmax:26dvh }
  /* Las flechas se centran en la fotografía, no en toda la pantalla. */
  .navarrow{ top:15dvh; width:40px; height:40px }
  .cbar{ padding:9px 14px; gap:10px }
  .strip{ padding:8px 14px }

  /* Ficha y ventana de pedido: casi a pantalla completa. */
  .sheet-bd{ padding:12px }
  .sheet{ max-height:94dvh }
  .sheet-b{ padding:18px; gap:20px }
  .prices{ gap:22px }
}

@media (max-width:560px){
  .wrap{ padding:0 14px }
  .page-h h1{ font-size:21px }
  .page-h .sub{ font-size:12px }
  .demo-note{ padding:14px }

  /* Queda el icono de usuario y el de salir; el nombre y la tarifa se ven en
     Inicio, y aquí robaban la fila entera. */
  .hd-1{ padding:10px 14px 8px }
  .who .t{ display:none }
  .who{ padding-left:12px }

  .cols{ grid-template-columns:repeat(2,1fr); gap:10px }
  .rgrid{ gap:10px }
  .res{ padding:16px 14px 40px }
  .rail-in{ padding:14px }

  /* Tablas: fuera las columnas secundarias. Lo que se quita sigue estando en el
     detalle del pedido y en la ficha de la factura.
     Los códigos y las fechas no se parten: «PE-622528» en dos líneas no se lee. */
  .tbl{ font-size:12px }
  .tbl .opt{ display:none }
  .tbl > thead > tr > th{ padding:9px 6px; font-size:9px; letter-spacing:.1em }
  .tbl > tbody > tr > td{ padding:11px 6px; white-space:nowrap }
  .tbl-ped .ped-d > td{ white-space:normal }
  .tbl-ped .ped-r .cv{ width:28px }
  .vista-sel{ margin-left:0; width:100%; margin-top:10px }
  .vista-sel .seg{ flex:1 }
  .vista-sel .seg button{ flex:1; justify-content:center }

  /* Detalle del pedido: sin la sangría de escritorio, que aquí no cabe. */
  .ped-det{ padding:4px 10px 16px }
  /* Dentro de la ventana el ancho útil es aún menor (la caja tiene su propio
     margen): sin apretar esto, la columna de totales se salía y quedaba cortada,
     porque el cuerpo no se recorre en horizontal a propósito. */
  .ped-det.en-modal{ padding:12px 8px 14px }
  .ped-det.en-modal .ped-lineas{ font-size:11px }
  .ped-det.en-modal .ped-lineas th,
  .ped-det.en-modal .ped-lineas td{ padding:8px 5px }
  .ped-det.en-modal .ped-lineas th:first-child,
  .ped-det.en-modal .ped-lineas td:first-child{ padding-left:8px }
  .ped-det.en-modal .ped-lineas th:last-child,
  .ped-det.en-modal .ped-lineas td:last-child{ padding-right:8px }
  .ped-det.en-modal .ped-lineas .th{ width:44px }
  .ped-det.en-modal .ped-lineas .th img{ width:36px; height:36px }
  .ped-modal-f{ padding:10px 12px; padding-bottom:calc(10px + env(safe-area-inset-bottom)) }
  .ped-lineas th, .ped-lineas td{ padding:9px 7px }
  .ped-lineas th:first-child, .ped-lineas td:first-child{ padding-left:10px }
  .ped-lineas th:last-child, .ped-lineas td:last-child{ padding-right:10px }
  .ped-lineas .th{ width:56px }
  .ped-lineas .th img{ width:46px; height:46px }
  .ped-lineas .ds{ font-size:11px }
  .ped-acc{ flex-wrap:wrap }

  /* Carrito: la línea se parte en dos alturas en vez de comprimirse. */
  .cline{ flex-wrap:wrap; gap:10px 12px; padding:12px 14px }
  .cline .nm{ flex:1 1 140px; min-width:0 }
  .cline .qty{ margin-left:0 }
  .cline .tt{ width:auto; margin-left:auto }
  .sumup{ padding:16px 14px }

  .rowi{ flex-wrap:wrap; gap:4px 12px; padding:11px 14px }
  .rowi .code{ min-width:0 }
  .rowi .date{ min-width:0 }

  .cats-o{ gap:6px; margin:16px 0 16px }
  .cats-o button{ padding:6px 11px }
  .pager{ gap:4px }
}

/* Pantallas muy estrechas (iPhone SE y similares, 320 px). Dentro de la ventana del
   pedido la tabla pedía 290 px en 280 disponibles y el total quedaba cortado. La
   miniatura es lo prescindible: la referencia y la descripción identifican la pieza.
   La celda se queda (el encabezado la cuenta con colspan), pero sin ancho. */
@media (max-width:380px){
  .ped-det.en-modal .ped-lineas .th{ width:0; padding:0 }
  .ped-det.en-modal .ped-lineas .th img{ display:none }
}

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