/* Extraído de salud-01-plp.html (lo que añade sobre base.css). NO EDITAR: se regenera. */

/* ═══════════ PLP · salud-01 ═══════════
   Sin referencia que medir. Todo sale del sistema ya construido:
     · retícula      12 columnas, contenido 1392, gap 12.8 → columna base 104.267
     · la de Camilo  4 columnas iguales = 3 columnas base = 338.40 cada una
     · radios        2.4 controles · 9.6 contenedores (los de la referencia, ya adoptados)
     · regla         1px rgba(26,34,48,.12), el mismo hairline de .s01-search-tabs
     · verde         SOLO como puntuación de estado (guardrail): el punto de "Disponible"
   ═══════════════════════════════════════ */

.s01-plp-head{ padding:56px var(--edge) 0; }
.s01-plp-h1{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:56px; line-height:1.02; letter-spacing:-.02em; color:var(--ink); margin:18px 0 0; }
.s01-plp-sub{ font-family:var(--font-ui); font-size:17px; line-height:26px; letter-spacing:-.01em; color:#5A6472; max-width:56ch; margin:16px 0 0; }

.s01-plp-wrap{ padding:70px var(--edge) 96px; }
/* La grilla de 4 de Camilo, expresada en el sistema de 12 para que la tarjeta caiga en su sitio. */
.s01-plp-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; align-items:start; }
/* Con los 5 grupos abiertos el panel mide 1098.6px: más que la pantalla. Un sticky más alto que
   el viewport deja de pegarse (se va con el scroll), así que se le pone tope y scroll propio. */
.s01-flt{ grid-column:1 / 4; position:sticky; top:calc(var(--header-h) + 16px);
  max-height:calc(100vh - var(--header-h) - 32px); overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:none; }
.s01-flt::-webkit-scrollbar{ display:none; }
.s01-plp-res{ grid-column:4 / 13; min-width:0; }   /* min-width:0 — sin esto la grilla no encoge */

/* ── panel de filtros ── */
.s01-flt-top{ display:flex; align-items:baseline; justify-content:space-between; padding-bottom:16px; border-bottom:1px solid rgba(26,34,48,.12); }
.s01-flt-tit{ font-family:var(--font-ui); font-size:17px; font-weight:600; letter-spacing:-.02em; color:var(--ink); }
.s01-flt-clear{ background:none; border:0; cursor:pointer; font-family:var(--font-ui); font-size:13px; font-weight:600; letter-spacing:-.01em; color:var(--azul-fuerte); padding:0; }
.s01-flt-clear:hover{ text-decoration:underline; }

.s01-flt-g{ border-bottom:1px solid rgba(26,34,48,.12); }
.s01-flt-h{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; background:none; border:0; cursor:pointer; padding:18px 0; text-align:left;
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--ink); }
/* Abierto apunta ARRIBA ("plegar"), cerrado apunta abajo ("desplegar"). Al revés, como estaba,
   todos los grupos abiertos mostraban galón hacia abajo y se leían como cerrados. */
.s01-flt-chev{ flex:none; width:8px; height:8px; margin-top:-3px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(225deg); transition:transform .22s cubic-bezier(.16,1,.3,1); }
.s01-flt-h[aria-expanded="false"] .s01-flt-chev{ margin-top:3px; transform:rotate(45deg); }
/* Altura animada por grid-template-rows: no exige medir el contenido ni congelar un max-height. */
.s01-flt-body{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .28s cubic-bezier(.16,1,.3,1); }
.s01-flt-body.is-cerrado{ grid-template-rows:0fr; }
/* min-height:0 es OBLIGATORIO: como elemento de rejilla no baja de su altura de contenido,
   así que la fila colapsaba a 0fr pero el contenido seguía midiendo lo suyo y asomaba
   por debajo del grupo siguiente. Quinta aparición de min-*:auto en el proyecto. */
.s01-flt-inner{ min-height:0; overflow:hidden; display:flex; flex-direction:column; gap:2px; }
/* El aire de abajo va como MARGEN del último hijo, no como padding del contenedor: el padding no
   colapsa con la fila y dejaba 14px abiertos en cada grupo cerrado. */
.s01-flt-inner > :last-child{ margin-bottom:14px; }
/* El atributo data-lenis-prevent va en el marcado: el sitio usa Lenis para el scroll suave y
   Lenis se queda con la rueda, así que un contenedor con overflow propio no scrollea sin esa
   marca. Pasó en el menú lateral, en el cajón de catálogo y aquí: se ve que hay más contenido
   debajo y la rueda no hace nada. */
/* Grupos largos (Categoría con 14 raíces y 87 hijas; Marca con 201): altura fija y su propio
   scroll. Sin esto la columna de filtros medía varias pantallas y el filtro de precio quedaba
   tan abajo que no se encontraba. El scroll se contiene para que al llegar al final no
   arrastre la página detrás. */
.s01-flt-scroll{ max-height:270px; overflow-y:auto; overscroll-behavior:contain;
  padding-right:6px; margin-right:-6px;
  /* Sombra de borde: avisa de que hay más abajo sin ocupar sitio. */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 22px), transparent);
          mask-image:linear-gradient(#000 calc(100% - 22px), transparent); }
.s01-pcard-visual.is-sin-foto{ display:flex; align-items:center; justify-content:center;
  border:1px dashed var(--gris-claro); border-radius:7px; background:#F1F4FB; }
.s01-pcard-nofoto{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.2px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gris-medio); text-align:center;
  padding:0 8px; }
.s01-flt-scroll::-webkit-scrollbar{ width:4px; }
.s01-flt-scroll::-webkit-scrollbar-thumb{ background:var(--gris-claro); border-radius:2px; }
.s01-flt-scroll::-webkit-scrollbar-track{ background:transparent; }

.s01-flt-o{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:7px 0; font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#41485A; }
.s01-flt-o:hover{ color:var(--ink); }
.s01-flt-o input{ position:absolute; opacity:0; width:0; height:0; }
.s01-flt-box{ flex:none; width:17px; height:17px; border:1.5px solid var(--gris-claro); border-radius:2.4px; background:#fff; position:relative; transition:border-color .14s ease, background .14s ease; }
.s01-flt-box::after{ content:""; position:absolute; left:5px; top:1.5px; width:4px; height:8.5px; border-right:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(45deg) scale(.6); opacity:0; transition:opacity .12s ease, transform .12s ease; }
.s01-flt-o:hover .s01-flt-box{ border-color:var(--azul-medio); }
.s01-flt-o input:checked ~ .s01-flt-box{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); }
.s01-flt-o input:checked ~ .s01-flt-box::after{ opacity:1; transform:rotate(45deg) scale(1); }
.s01-flt-o input:focus-visible ~ .s01-flt-box{ outline:2px solid var(--azul-medio); outline-offset:2px; }
/* La cifra va PEGADA al texto (8px), no empujada al borde derecho: alineada a la derecha creaba
   una columna de números que se leía como una regla, no como el recuento de cada opción. */
.s01-flt-et{ min-width:0; }
/* Opción que ya no daría resultados: se atenúa en vez de esconderse, para que no "salten"
   las listas al filtrar. Si está marcada nunca se atenúa: hay que poder desmarcarla. */
.s01-flt-o.is-cero{ opacity:.42; }
.s01-flt-n{ flex:none; margin-left:-2px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; color:var(--gris-medio); font-variant-numeric:tabular-nums; }

/* ── árbol de categorías ──
   El único grupo jerárquico. La raíz manda una fila propia (casilla + galón de "ver
   subcategorías"); las hijas viven en una lista que solo se despliega si el usuario baja ahí.
   Misma animación por grid-template-rows que los grupos, y el mismo min-height:0 obligatorio.
   Sexta aparición de min-*:auto en el proyecto: sin él la lista colapsada a 0fr seguía midiendo
   lo suyo y las subcategorías asomaban bajo la raíz siguiente. */
.s01-flt-raiz{ display:flex; align-items:center; gap:4px; }
.s01-flt-raiz .s01-flt-o{ flex:1 1 auto; min-width:0; }
.s01-flt-sub-b{ flex:none; display:flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0;
  border:0; border-radius:2.4px; background:none; cursor:pointer; }
.s01-flt-sub-b:hover{ background:#EEF1F9; }
.s01-flt-sub-b:focus-visible{ outline:2px solid var(--azul-medio); outline-offset:1px; }
.s01-flt-chev2{ width:6px; height:6px; margin-top:-2px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(45deg); transition:transform .2s cubic-bezier(.16,1,.3,1); }
.s01-flt-sub-b[aria-expanded="true"] .s01-flt-chev2{ margin-top:2px; transform:rotate(225deg); }
.s01-flt-sub{ display:grid; grid-template-rows:1fr; transition:grid-template-rows .24s cubic-bezier(.16,1,.3,1); }
.s01-flt-sub.is-cerrado{ grid-template-rows:0fr; }
/* La sangría y el filete son la única señal de jerarquía cuando la lista está abierta: sin ellos
   "Cardiología" se lee al mismo nivel que "Cirugía", que es justo lo que hay que evitar. */
.s01-flt-sub-in{ min-height:0; overflow:hidden; margin-left:8px; padding-left:14px; border-left:1px solid var(--gris-claro); }
.s01-flt-sub-in .s01-flt-o{ padding:5px 0; font-size:14px; }
.s01-flt-rama.is-activa > .s01-flt-raiz .s01-flt-et{ color:var(--ink); font-weight:500; }
/* Raíz en indeterminado: hay una hija marcada, pero la raíz NO lo está. Un guion, no una palomita:
   la palomita significaría "toda esta categoría" y no es lo que está filtrado. */
.s01-flt-o input:indeterminate ~ .s01-flt-box{ background:var(--azul-fuerte); border-color:var(--azul-fuerte); }
.s01-flt-o input:indeterminate ~ .s01-flt-box::after{ opacity:1; left:3.5px; top:6.5px; width:7px; height:0; border-right:0; border-bottom:2px solid #fff; transform:none; }

/* Nota de grupo: donde un filtro tiene una limitación del DATO hay que decirlo en el propio
   panel. "Sin declarar (75)" sin explicación parece un fallo nuestro; con la nota se entiende
   que es un hueco del catálogo del cliente. */
.s01-flt-nota{ margin:0 0 8px; font-family:var(--font-ui); font-size:12px; line-height:17px; letter-spacing:-.01em; color:var(--gris-medio); }

/* Un selector de clase con display gana al [hidden] del navegador (que es una regla de agente de
   usuario). Sin esto la X del buscador se veía con el campo vacío y el carril de chips ocupaba
   sitio sin chips. Guarda para todo el bloque, que es donde se usa hidden. */
.s01-plp-wrap [hidden]{ display:none !important; }

/* ── barra: buscador · recuento · orden · vista ── */
.s01-plp-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid rgba(26,34,48,.12); }
.s01-plp-bar-l,.s01-plp-bar-r{ display:flex; align-items:center; gap:14px; min-width:0; }
.s01-plp-bar-l{ flex:1 1 auto; }
.s01-plp-count{ flex:none; font-family:var(--font-ui); font-size:15px; letter-spacing:-.01em; color:#5A6472; }
.s01-plp-count b{ font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; }

/* buscador */
.s01-buscar{ flex:1 1 auto; max-width:330px; min-width:0; display:flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:0 10px; height:38px;
  transition:border-color .15s ease, box-shadow .15s ease; }
.s01-buscar:focus-within{ border-color:var(--azul-fuerte); box-shadow:0 0 0 3px rgba(53,57,142,.10); }
.s01-buscar > svg{ flex:none; color:var(--gris-medio); }
.s01-buscar-in{ flex:1; min-width:0; border:0; background:none; outline:none; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:var(--ink); }
.s01-buscar-in::placeholder{ color:var(--gris-medio); }
.s01-buscar-in::-webkit-search-cancel-button{ display:none; }   /* la X nativa rompe el lenguaje */
.s01-buscar-x{ flex:none; display:flex; align-items:center; justify-content:center; width:20px; height:20px; padding:0;
  border:0; border-radius:50%; background:var(--gris-claro); color:var(--ink); cursor:pointer; }
.s01-buscar-x:hover{ background:#CBD4D6; }

/* orden — desplegable propio: el <select> nativo pinta el control del sistema operativo */
.s01-orden{ position:relative; flex:none; }
.s01-orden-btn{ display:flex; align-items:center; gap:8px; height:38px; padding:0 12px; cursor:pointer;
  background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px;
  font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:var(--ink);
  transition:border-color .15s ease; }
.s01-orden-btn:hover{ border-color:var(--azul-medio); }
.s01-orden-btn:focus-visible{ outline:2px solid var(--azul-medio); outline-offset:1px; }
.s01-orden-lab{ color:var(--gris-medio); }
.s01-orden-val{ font-weight:600; }
.s01-orden-chev{ flex:none; width:7px; height:7px; margin:-3px 0 0 2px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(45deg); transition:transform .2s cubic-bezier(.16,1,.3,1); }
.s01-orden-btn[aria-expanded="true"] .s01-orden-chev{ margin-top:3px; transform:rotate(225deg); }
.s01-orden-list{ position:absolute; z-index:40; top:calc(100% + 6px); right:0; min-width:238px; margin:0; padding:6px; list-style:none;
  background:#fff; border:1px solid var(--gris-claro); border-radius:9.6px; box-shadow:0 18px 44px rgba(15,22,32,.14); }
.s01-orden-o{ padding:9px 10px; border-radius:2.4px; cursor:pointer; font-family:var(--font-ui); font-size:14px; letter-spacing:-.01em; color:#41485A; white-space:nowrap; }
.s01-orden-o:hover{ background:#EEF1F9; color:var(--ink); }
.s01-orden-o.is-on{ background:#EEF1F9; color:var(--azul-navy); font-weight:600; }

/* conmutador de vista */
.s01-vista{ flex:none; display:flex; gap:2px; padding:2px; background:var(--gris-claro); border-radius:2.4px; }
.s01-vista-b{ display:flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; cursor:pointer;
  border:0; border-radius:1.6px; background:transparent; color:#6B7280; transition:background .15s ease, color .15s ease; }
.s01-vista-b:hover{ color:var(--ink); }
.s01-vista-b.is-on{ background:#fff; color:var(--azul-fuerte); box-shadow:0 1px 3px rgba(15,22,32,.14); }
.s01-vista-b:focus-visible{ outline:2px solid var(--azul-medio); outline-offset:1px; }

/* ── chips de filtro activo ── */
.s01-plp-chips{ display:flex; flex-wrap:wrap; gap:8px; padding-top:16px; }
.s01-plp-chip{ display:inline-flex; align-items:center; gap:8px; background:#EEF1F9; color:var(--azul-navy); border:0; border-radius:2.4px; padding:7px 10px 7px 12px; cursor:pointer; font-family:var(--font-ui); font-size:13px; font-weight:500; letter-spacing:-.01em; }
.s01-plp-chip:hover{ background:#E2E7F5; }
.s01-plp-chip i{ font-style:normal; font-size:15px; line-height:1; opacity:.55; }

/* ── grilla de tarjetas: 3 por fila, gap 12.8 igual que la retícula ── */
.s01-plp-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:12.8px 12.8px; padding-top:24px; }
.s01-plp-cards .s01-slide{ width:auto; margin-right:0; }
/* La tarjeta nace para fondo OSCURO (en el home vive sobre la foto de la sección de productos):
   pinta --paper y su chip de existencias es texto claro. Sobre el paper de esta página la tarjeta
   desaparecía y el chip quedaba en un punto verde suelto. No se inventa tratamiento: se reusa el
   que ya resolvió este mismo caso en los relacionados de la PDP. */
.s01-plp-cards .s01-pcard{ background:#F1F4FB; }
.s01-plp-cards .s01-pcard-note{ color:#5A6472; background:rgba(26,34,48,.06); }
.s01-plp-cards .s01-pcard-note.is-out{ color:var(--gris-medio); }
.s01-plp-cards .s01-pcard-note.is-out i{ background:var(--gris-medio); }

/* ── clave del producto ──
   Se distingue el SKU del cliente de la referencia interna: 53 de 154 productos no tienen SKU y
   les pusimos REF-<id>. Enseñar un REF-6238 con la etiqueta "SKU" sería inventar una clave, y
   con las claves se hacen pedidos.
   La referencia NO lleva rótulo: el prefijo REF- ya la nombra y "Ref. REF-6238" tartamudea. La
   distinguen el prefijo y el gris más apagado. */
.s01-pcard-clave{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:10px; line-height:14px; letter-spacing:.02em; color:#5A6472;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.s01-pcard-clave span{ color:var(--gris-medio); }
.s01-pcard-clave.is-ref{ color:var(--gris-medio); }

/* Producto sin precio: el hueco NO se deja en blanco ni se oculta la tarjeta. En B2B cotizar es
   un flujo de primera clase, así que el sitio del precio lo dice con todas las letras. */
.s01-pcard-cotiza{ font-weight:500; }

/* Botón de "avisarme": ni relleno (no es la acción principal, no hay nada que comprar) ni el
   gris de "Ver ficha" (dos botones planos seguidos no se distinguen). Contorno azul. */
.s01-pcard-btn.is-linea{ background:transparent; color:var(--azul-fuerte); box-shadow:inset 0 0 0 1px var(--azul-fuerte); }
.s01-pcard-btn.is-linea:hover{ background:rgba(53,57,142,.07); }
/* SÉPTIMA aparición de min-*:auto, y esta vez rompía a la vista: .s01-pcard-btns-inner es una
   rejilla '1fr 1fr', y 1fr es minmax(AUTO,1fr). Con los botones de siempre ("Agregar", "Ver
   ficha") no se notaba, pero el rótulo largo del producto sin existencias no cabía en su celda,
   no encogía —white-space:nowrap— y se montaba encima de "Ver ficha".
   El rótulo ya se acortó; esto es el suelo para que ningún texto futuro pueda volver a salirse. */
.s01-plp-cards .s01-pcard-btns-inner{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
.s01-plp-cards .s01-pcard-btn{ min-width:0; overflow:hidden; text-overflow:ellipsis; padding-left:8px; padding-right:8px; }

/* ── vista de LISTA ──
   La misma tarjeta, recompuesta en fila: foto · título+marca · precio · acciones.
   display:contents en .s01-pcard-bottom sube sus hijos a la rejilla de la fila, así no hay que
   duplicar markup: una sola tarjeta sirve para las dos vistas. */
.s01-plp-cards.is-lista{ grid-template-columns:1fr; gap:8px; }
.s01-plp-cards.is-lista .s01-slide{ position:relative; gap:0; }
/* Tres columnas y dos filas: foto · (chip sobre título) · (precio sobre botones).
   display:contents en .s01-pcard-bottom sube sus hijos a la rejilla de la fila, así una sola
   tarjeta sirve para las dos vistas sin duplicar markup. */
.s01-plp-cards.is-lista .s01-pcard{ height:auto; min-height:156px;
  display:grid; grid-template-columns:140px minmax(0,1fr) 296px; grid-template-rows:auto auto;
  align-items:center; gap:12px 28px; padding:22px; }
.s01-plp-cards.is-lista .s01-pcard-bottom{ display:contents; }
.s01-plp-cards.is-lista .s01-pcard-visual{ grid-column:1; grid-row:1 / span 2; align-self:center;
  width:140px; height:126px; max-height:none; margin:0; }
/* Chip flotante en la esquina superior izquierda de la fila. Encima del título partía el barrido
   visual: el ojo baja por la columna de títulos y se topaba con una etiqueta en medio. */
.s01-plp-cards.is-lista .s01-pcard-note{ position:absolute; top:14px; left:14px; z-index:2; }
.s01-plp-cards.is-lista .s01-pcard-top{ grid-column:2; grid-row:1 / span 2; padding:0; gap:6px; }
/* Precio ARRIBA de los botones. La línea que los separa es la misma que ya traía .s01-pcard-btns-inner. */
.s01-plp-cards.is-lista .s01-pcard-precio{ grid-column:3; grid-row:1; align-self:end;
  margin:0; padding:0; border-top:0; }
.s01-plp-cards.is-lista .s01-pcard-btns{ grid-column:3; grid-row:2; align-self:start; padding:0; }
@media (max-width:1024px){
  .s01-plp-cards.is-lista .s01-pcard{ grid-template-columns:112px minmax(0,1fr); gap:14px 18px; }
  .s01-plp-cards.is-lista .s01-pcard-visual{ grid-row:1; width:112px; height:96px; }
  .s01-plp-cards.is-lista .s01-pcard-top{ grid-row:1; }
  .s01-plp-cards.is-lista .s01-pcard-precio{ grid-column:1 / -1; grid-row:2; }
  .s01-plp-cards.is-lista .s01-pcard-btns{ grid-column:1 / -1; grid-row:3; }
}

/* ── vacío y fin de resultados ── */
.s01-plp-vacio{ text-align:center; padding:72px 24px; }
.s01-plp-vacio-t{ font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-size:26px; letter-spacing:-.02em; color:var(--ink); }
.s01-plp-vacio p{ font-family:var(--font-ui); font-size:15px; line-height:24px; color:#5A6472; margin:10px 0 20px; }
.s01-plp-vacio-b{ font-family:var(--font-ui); font-size:15px; font-weight:500; color:#fff; background:var(--azul-fuerte); border:0; border-radius:2.4px; padding:12px 24px; cursor:pointer; }
.s01-plp-fin{ display:flex; align-items:center; justify-content:center; gap:10px; padding:44px 0 0; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-plp-spin{ width:12px; height:12px; border:1.5px solid var(--gris-claro); border-top-color:var(--azul-fuerte); border-radius:50%; animation:s01spin .7s linear infinite; }
.s01-plp-fin.is-fin .s01-plp-spin{ display:none; }
@keyframes s01spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){
  .s01-plp-spin{ animation:none; border-top-color:var(--gris-claro); }
  .s01-flt-body,.s01-flt-chev,.s01-flt-box,.s01-flt-box::after{ transition:none; }
}

/* ── bloque de ayuda ── */
.s01-plp-ayuda{ padding:0 var(--edge) 12.8px; }
.s01-plp-ayuda-card{ display:flex; align-items:center; justify-content:space-between; gap:56px;
  background:#F1F4FB; border-radius:9.6px; padding:44px 48px; }
.s01-plp-ayuda-txt{ min-width:0; display:flex; flex-direction:column; gap:12px; }
.s01-plp-ayuda-eyebrow{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--azul-medio); }
.s01-plp-ayuda-txt h2{ margin:0; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:34px; line-height:1.06; letter-spacing:-.02em; color:var(--ink); }
.s01-plp-ayuda-txt p{ margin:0; max-width:58ch; font-family:var(--font-ui); font-size:16px; line-height:24px; letter-spacing:-.01em; color:#5A6472; }
.s01-plp-ayuda-acc{ flex:none; display:flex; flex-direction:column; gap:8px; width:286px; }
.s01-plp-ayuda-acc .s01-pcard-btn{ flex:none; }

/* ── preguntas frecuentes ──
   El acordeón es .s01-pdp-acc a propósito: misma clase que la PDP, así se reusa su CSS y su guion. */
.s01-plp-faq{ padding:56px var(--edge) 96px; }
.s01-plp-faq-grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:12.8px; align-items:start; }
.s01-plp-faq-head{ grid-column:1 / 5; display:flex; flex-direction:column; gap:14px; position:sticky; top:calc(var(--header-h) + 16px); }
.s01-plp-faq-eyebrow{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:9.6px; line-height:11.52px; letter-spacing:.64px; text-transform:uppercase; color:var(--gris-medio); }
.s01-plp-faq-head h2{ margin:0; font-family:"Neue Montreal","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:400; font-size:44px; line-height:1.04; letter-spacing:-.02em; color:var(--ink); }
.s01-plp-faq-grid .s01-pdp-acc{ grid-column:5 / 13; min-width:0; }

/* acordeón portado de la PDP, sin cambios */

.s01-pdp-acc{ width:100%; }
.s01-pdp-acc details{ border-top:1px dotted var(--gris-claro); }
.s01-pdp-acc details:last-child{ border-bottom:1px dotted var(--gris-claro); }
.s01-pdp-acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0;
  font-family:var(--font-ui); font-size:16px; font-weight:500; letter-spacing:-.01em; color:var(--ink); }
.s01-pdp-acc summary::-webkit-details-marker{ display:none; }
.s01-pdp-acc summary::after{ content:""; flex:none; width:8px; height:8px; border-right:1.5px solid var(--gris-medio); border-bottom:1.5px solid var(--gris-medio); transform:rotate(45deg) translateY(-2px); transition:transform .22s cubic-bezier(.16,1,.3,1); }
.s01-pdp-acc details[open] summary::after{ transform:rotate(225deg) translateY(-2px); }
.s01-pdp-acc details div{ padding:0 0 18px; font-family:var(--font-ui); font-size:16px; line-height:22.4px; letter-spacing:-.01em; color:#54595F; max-width:60ch; }
.s01-pdp-acc details div b{ color:var(--ink); font-weight:600; }


@media (max-width:1024px){
  .s01-plp-ayuda-card{ flex-direction:column; align-items:flex-start; gap:28px; padding:32px 26px; }
  .s01-plp-ayuda-acc{ width:100%; }
  .s01-plp-ayuda-txt h2{ font-size:26px; }
  .s01-plp-faq{ padding-top:36px; padding-bottom:64px; }
  .s01-plp-faq-grid{ grid-template-columns:1fr; gap:24px; }
  .s01-plp-faq-head{ grid-column:auto; position:static; }
  .s01-plp-faq-head h2{ font-size:30px; }
  .s01-plp-faq-grid .s01-pdp-acc{ grid-column:auto; }
}

/* ── botón de filtros en móvil (el panel pasa a cajón) ── */
.s01-flt-abrir{ display:none; }
.s01-flt-cerrar{ display:none; }

@media (max-width:1024px){
  .s01-plp-h1{ font-size:42px; }
  .s01-plp-cards{ grid-template-columns:repeat(2,1fr); }
  .s01-plp-grid{ grid-template-columns:1fr; }
  /* En móvil el panel no cabe como columna: pasa a cajón lateral, igual patrón que el carrito. */
  /* max-height:none — el tope de la columna sticky de escritorio dejaba el cajón cortado a
     700px de los 844 de pantalla (100vh − header 112 − 32). Aquí el cajón va de borde a borde. */
  .s01-flt{ position:fixed; inset:0 auto 0 0; z-index:60; width:min(340px,88vw); background:var(--paper); max-height:none;
    padding:24px 22px 40px; overflow-y:auto; transform:translateX(-100%); transition:transform .42s cubic-bezier(.16,1,.3,1);
    box-shadow:30px 0 80px rgba(15,22,32,.18); }
  .s01-flt.is-abierto{ transform:translateX(0); }
  .s01-flt-cerrar{ display:block; position:absolute; top:20px; right:18px; width:34px; height:34px; border:0; border-radius:50%; background:var(--gris-claro); color:var(--ink); font-size:17px; line-height:1; cursor:pointer; }
  .s01-flt-velo{ position:fixed; inset:0; z-index:59; background:rgba(15,22,32,.42); opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s; }
  .s01-flt-velo.is-abierto{ opacity:1; visibility:visible; }
  .s01-flt-abrir{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-ui); font-size:14px; font-weight:500; letter-spacing:-.01em;
    color:var(--ink); background:#fff; border:1px solid var(--gris-claro); border-radius:2.4px; padding:9px 14px; cursor:pointer; }
  .s01-flt-abrir b{ font-weight:600; color:var(--azul-fuerte); font-variant-numeric:tabular-nums; }
}
@media (max-width:767px){
  .s01-plp-head{ padding-top:36px; }
  .s01-plp-h1{ font-size:32px; }
  .s01-plp-sub{ font-size:15px; line-height:23px; }
  .s01-plp-cards{ grid-template-columns:1fr; }
  .s01-plp-bar{ flex-wrap:wrap; gap:12px; }
  .s01-plp-orden span{ display:none; }
}


/* Páginas interiores: mismas tres diferencias que la PDP. */
.s01-siteheader.is-inner{ margin-bottom:0; }
.s01-stage{ background:var(--paper); min-height:100vh; }
.s01-siteheader.is-inner:not(.paint) .s01-links > a,
.s01-siteheader.is-inner:not(.paint) .s01-navitem > a,
.s01-siteheader.is-inner:not(.paint) .s01-login,
.s01-siteheader.is-inner:not(.paint) .s01-icon{ color:var(--ink); }
.s01-siteheader.is-inner:not(.paint) .s01-logo-img{ filter:brightness(0); }
.s01-siteheader.is-inner:not(.paint) .s01-cta{ background:var(--azul-fuerte); color:#fff; }
.s01-siteheader.is-inner:not(.paint) .s01-cta:hover{ background:var(--azul-navy); }