/* =========================================================================
   FQS — Buscador Inteligente + Farmaquín
   Añadido sobre la maqueta del home. Sigue el guion de la pizarra
   «Web + Buscador Inteligente» (07/09/2026).
   ========================================================================= */

/* --- 1. La barra de la cabecera es el disparador ------------------------ */
.search input{cursor:pointer}
/* Al bajar, el hero se desvanece y el buscador toma el mando */
.hdr.is-stuck .search input{width:270px;background:#fff;color:var(--ink)}
.hdr.is-stuck .search input::placeholder{color:#a89ba1}
.search.is-destacado input{
  width:330px;background:#fff;
  box-shadow:0 0 0 4px rgba(255,255,255,.45),0 10px 26px rgba(150,25,70,.28);
}
@media (max-width:900px){
  .hdr.is-stuck .search input,.search.is-destacado input{width:190px}
}

/* El hero se desvanece según se baja (lo pinta el JS con --fade) */
.hero__in,.hero__sello{opacity:var(--fade,1)}

/* --- 2. Panel del Buscador Inteligente ---------------------------------- */
.bi{
  position:fixed;inset:0;z-index:120;
  display:none;
}
.bi.is-open{display:block}
.bi__velo{
  position:absolute;inset:0;background:rgba(50,20,32,.5);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease);
}
.bi.is-open .bi__velo{opacity:1}
.bi__panel{
  position:relative;background:#fff;
  border-radius:0 0 28px 28px;
  box-shadow:0 26px 60px rgba(120,20,60,.28);
  max-height:88vh;overflow:auto;
  transform:translateY(-24px);opacity:0;
  transition:transform .38s var(--ease),opacity .3s var(--ease);
}
.bi.is-open .bi__panel{transform:none;opacity:1}
.bi__in{max-width:var(--wrap);margin:0 auto;padding:26px 28px 40px}

/* Campo grande */
.bi__campo{display:flex;align-items:center;gap:12px;
  border:2px solid var(--line);border-radius:999px;
  padding:12px 20px;transition:border-color .25s,box-shadow .25s}
.bi__campo:focus-within{border-color:var(--pink);box-shadow:0 0 0 5px var(--pink-soft)}
.bi__campo svg{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--pink);stroke-width:2.1;stroke-linecap:round}
.bi__campo input{flex:1;border:0;outline:0;font:400 19px/1.3 "Bariol",system-ui,sans-serif;color:var(--ink);background:none}
.bi__campo input::placeholder{color:#b9b2b6}
.bi__borrar{border:0;background:none;cursor:pointer;color:#b9b2b6;font-size:20px;line-height:1;padding:4px}
.bi__borrar:hover{color:var(--pink)}
.bi__ir{
  border:0;cursor:pointer;width:38px;height:38px;border-radius:999px;
  background:var(--pink);color:#fff;font-size:17px;line-height:1;
  transition:transform .2s var(--ease),background .2s}
.bi__ir:hover{background:var(--pink-dk);transform:translateX(2px)}

.bi__cerrar{
  position:absolute;top:16px;right:20px;border:0;background:none;cursor:pointer;
  font-size:26px;line-height:1;color:#b9b2b6;padding:6px}
.bi__cerrar:hover{color:var(--pink)}

/* Bloques del panel */
.bi__bloque{margin-top:28px}
.bi__tit{
  font:700 13px/1 "Bariol",system-ui,sans-serif;letter-spacing:.14em;
  text-transform:uppercase;color:var(--pink);margin:0 0 14px}
.bi__chips{display:flex;flex-wrap:wrap;gap:10px}
.bi__chip{
  border:1.5px solid var(--line);background:var(--paper);
  border-radius:999px;padding:8px 16px;cursor:pointer;
  font:400 15px/1 "Bariol",system-ui,sans-serif;color:var(--ink);
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.bi__chip:hover{border-color:var(--pink);background:var(--pink-soft);transform:translateY(-2px)}

/* flex + centrado (no grid): así, si la última fila queda incompleta —como
   pasa con 7 sectores en 4 columnas—, se centra en vez de quedarse pegada
   a la izquierda con un hueco a la derecha. */
.bi__sectores{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.bi__sector{
  flex:0 1 calc(25% - 9px);min-width:200px;
  text-align:left;background:rgba(255,255,255,.78);border:0;font:inherit;color:inherit;
  box-shadow:0 14px 34px rgba(60,59,62,.06);
  border-radius:var(--r-card);padding:14px 16px;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s}
.bi__sector:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(180,40,85,.14)}
.bi__sector b{display:block;font:700 16px/1.2 "Bariol",system-ui,sans-serif;color:var(--ink);margin-bottom:4px}
.bi__sector span{font:400 13px/1.4 "Bariol",system-ui,sans-serif;color:var(--ink-2)}
/* icono de sector (24/09/2026): la serie ilustrada de «¿Por qué FQS?» en blanco sobre
   pastilla rosa; sustituye a los emoji provisionales. Estilo base en styles.css (.sec-ico) */
.bi__sector b{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bi__sector .sec-ico{width:36px;height:36px;border-radius:11px}
.bi__sector .sec-ico img{width:26px;height:26px}

/* Sugerencias en vivo */
.bi__sug{margin-top:18px;display:none}
.bi__sug.is-on{display:block}
.bi__sugit{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  border:0;border-bottom:1px solid var(--line);background:none;cursor:pointer;
  padding:11px 6px;font:400 16px/1.3 "Bariol",system-ui,sans-serif;color:var(--ink)}
.bi__sugit:hover{background:var(--pink-soft)}
.bi__sugit small{color:var(--ink-2);font-size:13px}
.bi__sugit mark{background:none;color:var(--pink);font-weight:700}
.bi__nada{padding:16px 6px;color:var(--ink-2);font:400 16px/1.5 "Bariol",system-ui,sans-serif}

/* --- 3. Vistas: resultados y ficha (son «otra pestaña») ----------------- */
.vista{display:none;min-height:70vh;background:var(--paper-2)}
.vista.is-on{display:block}
body.en-vista main,body.en-vista .foot{display:none}
/* deja hueco para la cabecera, que va fija arriba */
.vista__in{max-width:var(--wrap);margin:0 auto;padding:112px 28px 80px}
@media (max-width:700px){.vista__in{padding-top:96px}}
.volver{
  display:inline-flex;align-items:center;gap:8px;border:0;background:none;cursor:pointer;
  color:var(--pink);font:700 15px/1 "Bariol",system-ui,sans-serif;padding:6px 0;margin-bottom:14px}
.volver:hover{color:var(--pink-dk)}
/* Fila de vuelta: al buscador, a los resultados o a la web */
.vuelta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:6px}
.vuelta .volver{margin-bottom:0}
.volver--web{margin-left:auto;color:var(--ink-2);font-weight:400}
.volver--web:hover{color:var(--pink)}

/* Filtros del listado. Solo aparecen cuando hay resultados de sobra.
   La etiqueta va en su propia línea, encima de sus chips — antes compartían
   fila (label a la izquierda, chips pegados a continuación) y en cuanto los
   chips no cabían en una línea, la segunda tanda envolvía justo debajo de
   la etiqueta en vez de bajo el primer chip: quedaba escalonado y sucio. */
.filtros{
  margin:0 0 26px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-card);padding:18px 20px 6px}
.filtros__g{margin-bottom:18px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.filtros__g:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.filtros__t{
  display:block;font:700 12px/1 "Bariol",system-ui,sans-serif;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:12px}
.filtros__chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filtros__mas{
  border:0;background:none;cursor:pointer;padding:6px 4px;
  font:400 13.5px/1 "Bariol",system-ui,sans-serif;color:var(--pink);
  text-decoration:underline;text-underline-offset:3px}
.filtros__mas:hover{color:var(--pink-dk)}
/* Chips más discretos aquí que en el resto del sitio (con hasta 8-9 a la vez
   por grupo, el mismo borde marcado en todos se veía como una pared de
   píldoras), pero SIGUEN pareciendo botones: relleno gris suave en vez de
   blanco sobre blanco, para que no se confundan con texto plano. El color
   fuerte (rosa) se reserva para el que está activo. */
.filtros .bi__chip{
  padding:5px 12px;font-size:13.5px;border-color:transparent;background:var(--paper-2)}
.filtros .bi__chip:hover{border-color:var(--pink);background:var(--pink-soft)}
.filtros .bi__chip b{color:#a39a9f;font-weight:400;font-size:12px}
.bi__chip.is-sel{background:var(--pink);border-color:var(--pink);color:#fff}
.bi__chip.is-sel b{color:rgba(255,255,255,.75)}
.bi__chip.is-sel:hover{background:var(--pink-dk);border-color:var(--pink-dk)}

/* Botón de «ver más» */
.masbtn{margin-top:26px;text-align:center}
.masbtn .btn{cursor:pointer;border:0}
.masbtn small{opacity:.7;font-size:.85em}
.vista h2{font:700 34px/1.15 "Bariol",system-ui,sans-serif;color:var(--pink);margin:0 0 6px}
.vista__cuenta{color:var(--ink-2);font-size:15px;margin:0 0 22px}
.vista__dentro{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px;
  font:400 15px/1 "Bariol",system-ui,sans-serif;color:var(--ink-2)}
.pill{border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;background:#fff;
  font-size:14px;color:var(--ink)}
.pill b{color:var(--pink)}

/* formato de la ficha: se puede elegir (botón, no solo etiqueta) */
.ficha__nota{margin:0 0 12px;font-size:13px;color:var(--ink-2)}
.pill--fmt{
  cursor:pointer;font:400 14px/1 "Bariol",system-ui,sans-serif;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.pill--fmt:hover{border-color:var(--pink);transform:translateY(-2px)}
.pill--fmt.is-sel{background:var(--pink);border-color:var(--pink);color:#fff}

/* «Estás en: Cosmética › Aceites › …» (sector por el que ha entrado el cliente) */
.ficha__miga{margin:0 0 12px;font-size:14px;color:var(--ink-2)}
.ficha__miga a{color:var(--pink);font-weight:700;text-decoration:none}
.ficha__miga a:hover{text-decoration:underline}
.ficha__miga b{color:var(--ink);font-weight:400}

/* sectores de la ficha: el cliente marca para qué sector(es) lo quiere; viaja
   con cada línea de la cotización (js/buscador.js, obligatorio para cotizar) */
.ficha__secs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:12px 14px;
  border:1.5px dashed var(--line);border-radius:16px}
.ficha__secT{flex-basis:100%;font-size:13px;color:var(--ink-2);margin-bottom:2px}
.pill--sec{
  cursor:pointer;font:400 14px/1 "Bariol",system-ui,sans-serif;
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease);
}
.pill--sec:hover{border-color:var(--pink);transform:translateY(-2px)}
.pill--sec.is-sel{background:var(--pink);border-color:var(--pink);color:#fff}
.ficha__secs.is-aviso{border-color:var(--pink);animation:secs-aviso .5s var(--ease) 2}
@keyframes secs-aviso{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.ficha__secs.is-aviso{animation:none}}
.ficha__nc{margin:14px 0 4px;padding:12px 16px;border:1px solid var(--pink);border-radius:12px;background:rgba(255,58,130,.06);font-size:14px;line-height:1.5}
.ficha__nc--rc{border-color:#e0a100;background:rgba(224,161,0,.08)}
.ficha__nota--grado{flex-basis:100%;margin:10px 0 0;font-size:13px;opacity:.8}
.ficha__aviso{margin:0 0 12px;font-size:14px;color:var(--pink);font-weight:700}

/* barra de cotización: como un carrito — qué se ha elegido, se puede
   quitar y añadir, y queda claro antes de pedirlo */
.cotiza{
  position:fixed;left:0;right:0;bottom:0;z-index:120;
  background:#fff;border-top:1px solid var(--line);
  box-shadow:0 -10px 30px rgba(0,0,0,.1);
  transform:translateY(110%);transition:transform .35s var(--ease);
}
.cotiza.is-on{transform:none}
.cotiza__in{
  max-width:1100px;margin:0 auto;padding:16px 24px;
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
}
.cotiza__tx{flex:1 1 320px;min-width:0}
.cotiza__tx b{
  display:block;font:700 13.5px/1.3 "Bariol",system-ui,sans-serif;
  color:var(--ink);margin-bottom:9px;
}
.cotiza__tx b span{color:var(--pink)}
.cotiza__chips{display:flex;flex-wrap:wrap;gap:8px}
.cotiza__chip{
  position:relative;
  display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  background:var(--pink-soft);color:var(--pink-dk);border-radius:999px;
  padding:5px 14px 5px 5px;font-size:13px;
  transition:background .3s ease,color .3s ease,padding .3s ease;
}
.cotiza__lbl{white-space:nowrap}
.cotiza__lbl i{display:inline-block;font-style:normal;white-space:pre;will-change:transform,opacity}

/* papelera: tapa que se levanta al pasar el ratón */
.cotiza__bin{
  flex:0 0 auto;border:0;background:rgba(var(--pink-rgb),.18);color:var(--pink-dk);
  width:24px;height:24px;border-radius:50%;cursor:pointer;padding:0;
  display:grid;place-items:center;transition:background .2s,color .2s;
}
.cotiza__bin:hover{background:var(--pink);color:#fff}
.cotiza__bin svg{
  width:14px;height:14px;overflow:visible;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.cotiza__bin .bin__lid{transform-origin:4px 6px;transition:transform .25s var(--ease)}
.cotiza__bin:hover .bin__lid{transform:translate(-.5px,-1.5px) rotate(-22deg)}

/* animación «la papelera se come la etiqueta» (js: comerChip) */
.cotiza__chip.is-comiendo .cotiza__bin{cursor:default;background:transparent;color:var(--pink-dk)}
.cotiza__chip.is-bola{background:var(--pink);color:#fff;padding:0;justify-content:center}
.cotiza__chip.is-bola .cotiza__lbl{display:none}
.cotiza__chip.is-bola .cotiza__bin{color:#fff}
.cotiza__ring{
  position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);
  pointer-events:none;overflow:visible;transform:rotate(-90deg);
}
.cotiza__ring circle{fill:none;stroke:var(--pink);stroke-width:4;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100}
.cotiza__acc{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.cotiza__vaciar{border:0;background:none;color:var(--ink-2);font-size:13px;cursor:pointer;text-decoration:underline}
.cotiza__vaciar:hover{color:var(--pink)}
.cotiza .btn{margin:0}

/* deja hueco a Farmaquín para que no se tapen */
body.con-cotiza #fq{bottom:104px}

@media (max-width:680px){
  .cotiza__in{padding:14px 16px}
  .cotiza__acc{width:100%;justify-content:space-between}
  body.con-cotiza #fq{bottom:132px}
}

.res{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.res__it{
  text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;
  padding:16px 18px;cursor:pointer;
  transition:transform .25s var(--ease),box-shadow .25s,border-color .2s;
  animation:resPop .45s var(--ease) backwards}
.res__it:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(180,40,85,.13);border-color:var(--pink)}
/* entrada en cascada al filtrar: cada tarjeta nueva llega un pelín después que la anterior */
.res__it:nth-child(1){animation-delay:0s} .res__it:nth-child(2){animation-delay:.03s}
.res__it:nth-child(3){animation-delay:.06s} .res__it:nth-child(4){animation-delay:.09s}
.res__it:nth-child(5){animation-delay:.12s} .res__it:nth-child(6){animation-delay:.15s}
.res__it:nth-child(7){animation-delay:.18s} .res__it:nth-child(8){animation-delay:.21s}
.res__it:nth-child(n+9){animation-delay:.24s}
@keyframes resPop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.res__it b{display:block;font:700 17px/1.25 "Bariol",system-ui,sans-serif;color:var(--pink);margin-bottom:5px}
.res__it span{display:block;font:400 13.5px/1.45 "Bariol",system-ui,sans-serif;color:var(--ink-2)}
.res__it em{font-style:normal;color:#bdb4b9}

/* --- 4. Ficha de producto ---------------------------------------------- */
.ficha__cab{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px 28px;margin-bottom:18px}
.ficha__cab h2{margin-bottom:10px}
.ficha__meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ficha__d{color:var(--ink);font:400 16px/1.6 "Bariol",system-ui,sans-serif;margin:0}
.ficha__rej{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.caja{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:22px 24px}
.caja h3{font:700 13px/1 "Bariol",system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;
  color:var(--pink);margin:0 0 14px}
.dl{margin:0;font:400 15px/1.6 "Bariol",system-ui,sans-serif}
.dl div{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.dl div:last-child{border-bottom:0}
.dl dt{color:var(--ink-2);flex:0 0 42%}
.dl dd{margin:0;color:var(--ink)}

/* Documentación: los botones que abren el modal */
.doc{margin-top:18px}
.doc__f{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 0;border-bottom:1px solid var(--line)}
.doc__f:last-of-type{border-bottom:0}
.doc__f b{font:400 15.5px/1.3 "Bariol",system-ui,sans-serif;color:var(--ink)}
.doc__f small{display:block;color:var(--ink-2);font-size:13px}
/* «Otra cantidad»: cantidad libre + unidad, para cuando no basta un formato
   habitual o la materia prima aún no tiene ninguno (25/9/2026, Juanjo:
   cualquier cantidad se cotiza, nunca «solo tenemos estos formatos») */
.ficha__otra{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ficha__otra-campos{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.otra__num,.otra__unidad{
  border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);
  font:400 14px/1 "Bariol",system-ui,sans-serif;padding:8px 14px;
}
.otra__num{width:104px}
.otra__num:focus,.otra__unidad:focus{outline:0;border-color:var(--pink)}
.ficha__otra .btn{margin-top:0;padding:9px 22px;font-size:12.5px}
@media (max-width:420px){.otra__num{width:84px}}

.solicitar{
  flex:0 0 auto;border:1.5px solid var(--pink);background:#fff;color:var(--pink);
  border-radius:999px;padding:8px 18px;cursor:pointer;
  font:400 14px/1 "Bariol",system-ui,sans-serif;
  transition:background .2s,color .2s,transform .2s var(--ease)}
.solicitar:hover{background:var(--pink);color:#fff;transform:translateY(-2px)}
.doc__aviso{
  margin-top:16px;background:var(--pink-soft);border-radius:10px;padding:13px 16px;
  font:400 13.5px/1.55 "Bariol",system-ui,sans-serif;color:var(--ink-2)}
.doc__aviso b{color:var(--ink)}

/* --- 5. Modal de solicitud ---------------------------------------------- */
.modal{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;padding:22px}
.modal.is-open{display:flex}
.modal__velo{position:absolute;inset:0;background:rgba(50,20,32,.55);backdrop-filter:blur(3px)}
.modal__caja{
  position:relative;background:#fff;border-radius:20px;max-width:520px;width:100%;
  padding:30px 32px;box-shadow:0 30px 70px rgba(120,20,60,.32);
  max-height:88vh;overflow:auto;
  transform:translateY(14px) scale(.98);opacity:0;
  transition:transform .32s var(--ease),opacity .26s}
.modal.is-open .modal__caja{transform:none;opacity:1}
.modal__caja h3{font:700 24px/1.2 "Bariol",system-ui,sans-serif;color:var(--pink);margin:0 0 6px}
.modal__sub{color:var(--ink-2);font-size:14.5px;margin:0 0 20px}
.campo{display:block;margin-bottom:14px}
.campo span{display:block;font:400 14px/1 "Bariol",system-ui,sans-serif;color:var(--ink-2);margin-bottom:6px}
.campo input,.campo textarea{
  width:100%;border:1.5px solid var(--line);border-radius:10px;padding:11px 14px;
  font:400 15.5px/1.4 "Bariol",system-ui,sans-serif;color:var(--ink);outline:0;
  transition:border-color .2s,box-shadow .2s}
.campo input:focus,.campo textarea:focus{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}
.campo textarea{resize:vertical;min-height:82px}
.modal__pie{display:flex;align-items:center;gap:12px;margin-top:20px}
.modal__msg{color:var(--pink);font-size:14px;margin:12px 0 0;min-height:20px}

/* --- 6. Farmaquín: siempre presente ------------------------------------- */
.fq{position:fixed;right:22px;bottom:22px;z-index:130}
.fq__btn{
  position:relative;
  width:62px;height:62px;border-radius:50%;border:0;cursor:pointer;
  padding:0;
  background:radial-gradient(circle at 50% 38%,#fff 0 55%,var(--pink-pale) 100%);
  box-shadow:0 0 0 2.5px var(--pink),0 12px 28px rgba(var(--pink-rgb),.38);
  transition:transform .28s var(--ease),box-shadow .28s;
  /* entra rebotando al cargar la página; «backwards» deja libre el transform
     del :hover en cuanto termina */
  animation:fqEntra .8s cubic-bezier(.34,1.56,.64,1) .45s backwards}
.fq__btn:hover{transform:translateY(-4px) scale(1.05);box-shadow:0 0 0 2.5px var(--pink),0 18px 36px rgba(var(--pink-rgb),.48)}
/* la cara de Farmaquín (recorte de img/farmaquin.png) */
.fq__btn img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;pointer-events:none}
@keyframes fqEntra{
  0%{transform:translateY(22px) scale(.2) rotate(-28deg);opacity:0}
  55%{transform:translateY(0) scale(1.14) rotate(5deg);opacity:1}
  78%{transform:scale(.95) rotate(-3deg)}
  100%{transform:none;opacity:1}
}
/* halo que late un par de veces cuando sale el bocadillo */
.fq__btn::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 0 rgba(255,58,130,0)}
.fq.is-llamando .fq__btn::after{animation:fqPulso 2.1s ease-out 2}
@keyframes fqPulso{
  0%{box-shadow:0 0 0 0 rgba(255,58,130,.5)}
  70%{box-shadow:0 0 0 20px rgba(255,58,130,0)}
  100%{box-shadow:0 0 0 0 rgba(255,58,130,0)}
}

/* Bocadillo de cómic: saluda una vez por visita y lleva al chat */
.fq__globo{
  position:absolute;right:2px;bottom:80px;width:max-content;max-width:248px;
  background:#fff;color:var(--ink);border:1.5px solid var(--pink-wave);border-radius:18px;
  padding:13px 32px 13px 16px;cursor:pointer;
  font:400 15.5px/1.35 "Bariol",system-ui,sans-serif;
  box-shadow:0 14px 34px rgba(120,20,60,.16);
  transform-origin:86% 100%;
  opacity:0;transform:scale(.3) translateY(10px);pointer-events:none}
.fq__globo.is-on{
  opacity:1;transform:none;pointer-events:auto;
  animation:fqGloboIn .58s cubic-bezier(.34,1.56,.64,1),fqFlota 3.4s .6s ease-in-out 2}
.fq__globo:hover{border-color:var(--pink-hero-b)}
@keyframes fqGloboIn{
  0%{opacity:0;transform:scale(.3) translateY(10px)}
  60%{opacity:1;transform:scale(1.06) translateY(-2px)}
  100%{opacity:1;transform:none}
}
@keyframes fqFlota{0%,100%{transform:none}50%{transform:translateY(-3px)}}
/* pico del bocadillo: apunta hacia abajo, al botón */
.fq__globo::before,.fq__globo::after{
  content:"";position:absolute;width:0;height:0;border-style:solid}
.fq__globo::before{right:16px;bottom:-9px;border-width:9px 9px 0 9px;
  border-color:var(--pink-wave) transparent transparent transparent}
.fq__globo::after{right:18px;bottom:-6px;border-width:7px 7px 0 7px;
  border-color:#fff transparent transparent transparent}
.fq__globo-x{
  position:absolute;top:3px;right:5px;border:0;background:none;cursor:pointer;
  color:#b9b2b6;font-size:17px;line-height:1;padding:4px 6px;border-radius:8px}
.fq__globo-x:hover{color:var(--pink)}

.fq__panel{
  position:absolute;right:0;bottom:76px;width:420px;height:min(688px,calc(100vh - 110px));
  background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 22px 50px rgba(60,20,40,.22);
  transform:translateY(10px) scale(.96);transform-origin:bottom right;opacity:0;pointer-events:none;
  visibility:hidden;transition:transform .3s var(--ease),opacity .24s,visibility 0s .3s}
.fq.is-open .fq__panel{transform:none;opacity:1;pointer-events:auto;visibility:visible;
  transition:transform .3s var(--ease),opacity .24s}
/* el chat real de Jotform (Farmaquín) ocupa el panel entero */
.fq__chat{position:absolute;inset:0;display:block;width:100%;height:100%;border:0}
/* botón transparente justo encima de la X de la cabecera de Jotform */
.fq__cerrar{position:absolute;top:14px;right:8px;width:44px;height:44px;border:0;padding:0;
  background:transparent;cursor:pointer;border-radius:10px;z-index:3}
.fq__cerrar:focus-visible{outline:2px solid #fff;outline-offset:-4px}

/* --- 6 bis. Chat · Voz: es la barra de la propia Jotform, dentro del iframe (24/9/2026).
   La barra nuestra que la tapaba se quitó: partía la conversación en dos. */
/* mientras carga Farmaquín */
.fq__cargando{
  position:absolute;inset:0;z-index:1;display:none;place-items:center;background:#fff;
  text-align:center;font:400 15px/1.4 "Bariol",system-ui,sans-serif;color:var(--ink-2)}
.fq__cargando.is-on{display:grid}
.fq__cargando i{
  display:block;width:26px;height:26px;margin:0 auto 12px;border-radius:50%;
  border:2.5px solid var(--pink-soft);border-top-color:var(--pink);
  animation:fqGira .8s linear infinite}
@keyframes fqGira{to{transform:rotate(360deg)}}

@media (max-width:480px){
  .fq__panel{width:calc(100vw - 24px);right:-10px;height:calc(100vh - 110px)}
  .fq__globo{max-width:min(248px,calc(100vw - 56px))}
}

@media (prefers-reduced-motion:reduce){
  .fq__btn{animation:none}
  .fq.is-llamando .fq__btn::after{animation:none}
  .fq__globo.is-on{animation:none}
  .fq__cargando i{animation-duration:1.6s}
}

@media (prefers-reduced-motion:reduce){
  .bi__panel,.modal__caja,.fq__panel,.res__it,.bi__chip,.bi__sector{transition:none!important}
  .res__it{animation:none!important}
}

/* Productos: acceso directo bajo el hero — 4 formas de entrar al catálogo,
   para no obligar a nadie a bajar a ciegas hasta la que quiere. */
.p-quicknav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px;
  margin-top:26px}
.p-quicknav a{
  border:1.5px solid rgba(255,255,255,.55);border-radius:999px;
  padding:8px 18px;color:#fff;font:400 14.5px/1 "Bariol",system-ui,sans-serif;
  background:rgba(255,255,255,.08);transition:background .2s,border-color .2s,transform .2s var(--ease)}
.p-quicknav a:hover{background:rgba(255,255,255,.18);border-color:#fff;transform:translateY(-2px)}

/* Título del listado + volver a ver todo, sin filtros — visible en el
   momento justo: solo cuando de verdad hay algo que resetear. */
.p-listtit{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.p-reset{
  border:0;background:none;cursor:pointer;color:var(--pink);
  font:700 14px/1 "Bariol",system-ui,sans-serif;padding:6px 0}
.p-reset:hover{color:var(--pink-dk);text-decoration:underline}

/* Productos: la barra del catálogo despliega las mismas sugerencias en vivo
   que el Buscador Inteligente, pero como desplegable bajo el campo */
#pForm{position:relative;z-index:60}
.sec:has(#pForm){z-index:5} /* la sección del buscador por encima de las siguientes: si no, sus sugerencias quedan debajo y no se pulsan */
.p-sug{
  position:absolute;left:0;right:0;top:calc(100% + 8px);margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 40px rgba(60,20,40,.14);
  padding:6px 10px;max-height:min(460px,60vh);overflow-y:auto;text-align:left;
  z-index:60; /* por encima de las secciones de debajo («Soluciones por sector»): sin esto no se podía pulsar (QA 16/10/2026) */
}
.p-sug.is-on{animation:pSugIn .22s cubic-bezier(.32,.72,0,1)}
@keyframes pSugIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.p-sug .bi__sugit:last-child{border-bottom:0}
.p-sug .bi__sugit:focus-visible{outline:0;background:var(--pink-soft)}
@media (prefers-reduced-motion:reduce){ .p-sug.is-on{animation:none} }
/* una sola «×» de borrar: la nuestra, no la nativa del navegador */
.bi__campo input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}

/* Farmaquín sin permiso de cookies todavía (js/cookies.js · 23/9/2026) */
.fq__permiso{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:center;gap:16px;
  padding:34px 30px;background:#fff;font:400 15px/1.55 "Bariol",system-ui,sans-serif;color:var(--ink)}
.fq__permiso[hidden]{display:none}
.fq__permiso p{margin:0}
.fq__permiso b{color:var(--pink)}
.fq__permiso .btn{align-self:flex-start}
.fq__permiso a{color:var(--pink);font-size:13.5px}

/* Tarjetas de sector del catálogo con la sombra común (Bori, 2/10/2026); variables definidas en styles.css */
.bi__sector{box-shadow:var(--sombra-tarjeta,0 8px 22px rgba(60,30,45,.08))}
.bi__sector:hover{box-shadow:var(--sombra-tarjeta-hover,0 14px 32px rgba(60,30,45,.12))}

/* Catálogo: resultados, ficha de producto y sus cajas con la sombra común de tarjeta (Bori, 2/10/2026) */
.res__it,.ficha__cab,.caja,.filtros{box-shadow:var(--sombra-tarjeta,0 8px 22px rgba(60,30,45,.08))}
.res__it:hover{box-shadow:var(--sombra-tarjeta-hover,0 14px 32px rgba(60,30,45,.12))}