/* =========================================================================
   FQS — Home «Rediseño home Julio 2026»
   Tipografía y color tomados del propio sitio de FQS:
   fuente Bariol (bariol_*-webfont.ttf) y rosa de marca #FF3A82.
   ========================================================================= */

@font-face{
  font-family:"Bariol";
  /* woff2 primero (24 KB frente a 83 KB del ttf); el ttf queda de respaldo */
  src:url("../fonts/bariol_regular-webfont.woff2") format("woff2"),
      url("../fonts/bariol_regular-webfont.ttf") format("truetype");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Bariol";
  src:url("../fonts/bariol_bold-webfont.woff2") format("woff2"),
      url("../fonts/bariol_bold-webfont.ttf") format("truetype");
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --pink:#FF3A82;
  --pink-rgb:255,58,130;
  --pink-dk:#c81f5f;
  --pink-hero-a:#ff6aa0;
  --pink-hero-b:#ffb4cf;
  --pink-wave:#ffd4e3;
  --pink-soft:#fff0f5;
  --pink-pale:#ffe2ed;
  --ink:#3c3b3e;
  --ink-2:#6f6d73;
  --paper:#fff;
  --paper-rgb:255,255,255;
  --paper-2:#f7f5f6;
  --paper-2-rgb:247,245,246;
  --line:#ecdfe4;
  --section-fade:clamp(120px,14vw,220px);

  /* 1200px fijo en portátiles/monitores normales; a partir de ~1540px de
     ventana empieza a crecer con la pantalla (tope 1600px) en vez de dejar
     un margen enorme sin usar a los lados en monitores grandes */
  --wrap:clamp(1200px,78vw,1600px);
  /* Ritmo vertical único de toda la web (24/09/2026). Antes cada sección traía
     su propio número (58, 64, 74, 92, 104 px, márgenes negativos) y unas se
     pegaban y otras se alejaban. Ahora solo hay tres medidas:
       --sec-y     aire arriba y abajo de cada sección
       --head-gap  titular → su entradilla
       --block-gap titular/entradilla → el contenido (tarjetas, lista, formulario) */
  --sec-y:clamp(64px,6.5vw,88px);
  --head-gap:16px;
  --block-gap:clamp(32px,3.6vw,48px);
  --r-card:16px;
  --ease:cubic-bezier(.2,.7,.2,1);

  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--paper);
  color:var(--ink);
  font-family:"Bariol","Century Gothic",Futura,"Trebuchet MS",system-ui,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

main#contenido{
  position:relative;
  /* el recorte horizontal de los fondos decorativos va en <body>, no aquí:
     cualquier overflow != visible en <main> convierte a este elemento en
     contenedor de scroll y rompe position:sticky en los hijos
     (.fqs-proceso__pin) aunque main nunca llegue a tener scroll propio */
  background-color:#fff;
  /* cuadrícula milimetrada tenue, como un cuaderno de laboratorio o un plano
     (24/9/2026, sustituye a los puntos tipo Figma): celda fina de 24 px y línea
     algo más marcada cada 5 celdas. Mismo gris --ink en transparencia. */
  /* rebajada el 24/9/2026: tiene que leerse solo como fondo, nunca competir
     con el contenido ni parecer una tabla o un formulario (Bori) */
  background-image:
    linear-gradient(rgba(60,59,62,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,59,62,.035) 1px,transparent 1px),
    linear-gradient(rgba(60,59,62,.014) 1px,transparent 1px),
    linear-gradient(90deg,rgba(60,59,62,.014) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  background-position:-1px -1px;
}

/* páginas de LECTURA (artículo, ficha de producto, monografía, legales): blanco
   liso, sin cuadrícula — detrás de párrafos largos cansa la vista (24/9/2026) */
main#contenido:has(.art,.legal,section.mono,.ficha__cab){background-image:none}

h1,h2,h3,h4{margin:0;font-weight:700;text-wrap:balance;line-height:1.15}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}

:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.mid{text-align:center;margin-top:var(--block-gap)}

.skip{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--pink);padding:10px 16px}
.skip:focus{left:12px;top:12px}

/* Servicios (#como-trabajamos): los 5 pasos en estático, legible sin JS ni
   scroll enganchado — fila en escritorio, columna en móvil. */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:var(--block-gap) 0 0;padding:0;gap:24px}
.pasos li{border-top:2px solid #d8d3d6;padding-top:18px;min-width:0}
.pasos__n{display:block;font-size:14px;font-weight:700;margin-bottom:18px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.pasos h3{font-size:20px;margin:0 0 10px;font-weight:400}
.pasos p{font-size:15px;line-height:1.55;color:var(--ink-2);margin:0}
.pasos__fuerte{border-color:var(--pink)}
.pasos__fuerte .pasos__n{color:var(--pink-dk)}
@media(max-width:900px){
 .pasos{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:28px}
}
@media(max-width:600px){
 .pasos{grid-template-columns:1fr;gap:0;margin-top:28px}
 .pasos li{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:14px;border-top:0;border-left:2px solid #d8d3d6;padding:0 0 26px 18px}
 .pasos li:last-child{padding-bottom:0}
 .pasos__n{grid-row:1 / 3;margin:0;line-height:26px}
 .pasos p{grid-column:2}
}

/* ---------- revelado al hacer scroll ------------------------------------ */
.r{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.r.in{opacity:1;transform:none}
.r[data-d="1"]{transition-delay:.09s}
.r[data-d="2"]{transition-delay:.18s}
.r[data-d="3"]{transition-delay:.27s}
html.no-js .r{opacity:1;transform:none}

/* entradas por dirección  (= "Animación de entrada" de Elementor:
   fadeInUp / fadeInLeft / fadeInRight / zoomIn) */
.r[data-anim="left"]{transform:translateX(-34px)}
.r[data-anim="right"]{transform:translateX(34px)}
.r[data-anim="zoom"]{transform:scale(.93)}
.r[data-anim="left"].in,
.r[data-anim="right"].in,
.r[data-anim="zoom"].in{transform:none}

/* cascada: los hijos de [data-stagger] entran en secuencia
   (= "Animación de entrada" + "Retraso" incremental por widget en Elementor) */
[data-stagger]>*{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
html.no-js [data-stagger]>*{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){[data-stagger]>*{opacity:1;transform:none}}

/* =========================================================================
   HUECOS DE IMAGEN — no hay foto original; se marca, no se inventa
   ========================================================================= */
/* Translúcido a propósito: deja ver el color de la sección que hay debajo
   (el rosa del hero, el rosa claro de las tarjetas) en vez de taparlo. */
body.ph [data-ph]{
  background-color:rgba(120,92,105,.13);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.16) 0 10px,transparent 10px 20px);
  box-shadow:inset 0 0 0 1px rgba(var(--pink-rgb),.5);
}

/* la etiqueta la inserta el JS en el contenedor posicionado, para que quede
   por encima de los velos de color y siempre se pueda leer */
.phlab{
  position:absolute;left:50%;top:14px;translate:-50% 0;
  z-index:30;max-width:min(88%,520px);
  background:rgba(255,255,255,.95);color:var(--pink-dk);
  font-size:11.5px;line-height:1.35;letter-spacing:.02em;
  padding:6px 12px;border-radius:999px;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
  pointer-events:none;display:none;
}
body.ph .phlab{display:block}
.hero>.phlab{top:104px}

/* =========================================================================
   CABECERA
   ========================================================================= */
.hdr{
  position:fixed;inset:0 0 auto;z-index:100;
  background:var(--pink);
  transition:box-shadow .35s var(--ease),background .35s var(--ease);
}
.hdr.is-stuck{box-shadow:0 6px 24px rgba(180,40,85,.22)}
.hdr__in{
  max-width:calc(var(--wrap) + 120px);margin-inline:auto;padding:16px 28px;
  display:flex;align-items:center;gap:24px;
  transition:padding .35s var(--ease);
}
.hdr.is-stuck .hdr__in{padding:9px 28px}
.hdr__logo{flex:0 0 auto}
.hdr__logo img{width:118px;transition:width .35s var(--ease)}
.hdr.is-stuck .hdr__logo img{width:98px}
.hdr__tools{margin-left:auto;display:flex;align-items:center;gap:14px}

/* navegación principal (escritorio) */
.nav{margin-left:34px}
.nav ul{display:flex;gap:26px}
.nav a{
  color:#fff;font-size:14px;letter-spacing:.02em;
  padding:6px 0;border-bottom:2px solid transparent;
  transition:border-color .3s;
}
.nav a:hover,.nav a[aria-current="page"]{border-color:#fff}
@media (max-width:1100px){ .nav{display:none} }

.search{position:relative;display:flex;align-items:center}
.search__ico{
  position:absolute;left:13px;width:15px;height:15px;pointer-events:none;
  fill:none;stroke:var(--pink);stroke-width:2.2;stroke-linecap:round;
}
.search input{
  width:200px;border:0;border-radius:999px;background:#fff;
  padding:9px 16px 9px 34px;font-size:13.5px;color:var(--ink);
  transition:width .4s var(--ease),box-shadow .3s var(--ease);
}
.search input::placeholder{color:#b9b2b6}
.search input:focus{width:250px;outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.5)}

.access{
  display:flex;align-items:center;gap:8px;
  background:#fff;border-radius:999px;padding:8px 18px 8px 12px;
  font-size:13.5px;color:var(--pink);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.access svg{width:17px;height:17px;fill:none;stroke:var(--pink);stroke-width:1.9;stroke-linecap:round}
.access:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.16)}

/* selector de idioma (24/09/2026): lleva a la misma página en el otro idioma
   (js/main.js lee los <link rel="alternate" hreflang> de la página) */
.lang{display:flex;align-items:center;font-size:13px;letter-spacing:.04em}
.lang a{color:rgba(255,255,255,.72);padding:4px 7px;transition:color .3s}
.lang a+a{border-left:1px solid rgba(255,255,255,.45)}
.lang a:hover,.lang a[aria-current="true"]{color:#fff}
.lang a[aria-current="true"]{font-weight:700}
.lang--menu{display:none;margin-top:28px;font-size:16px}
@media (max-width:680px){
  .hdr .lang{display:none}
  .lang--menu{display:flex}
}

.burger{
  width:38px;height:32px;background:0;border:0;cursor:pointer;
  display:flex;flex-direction:column;justify-content:center;gap:6px;padding:0 4px;
}
@media (min-width:1101px){ .burger{display:none} }
.burger span{display:block;height:2.5px;background:#fff;border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger.is-open span:nth-child(1){transform:translateY(8.5px) rotate(45deg)}
.burger.is-open span:nth-child(2){opacity:0}
.burger.is-open span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

/* =========================================================================
   MEGA MENÚ «estilo Apple» (escritorio, 15/9/2026)
   - La cabecera se prolonga hacia abajo en un panel blanco; la página se
     oscurece y desenfoca detrás (.mega-veil).
   - Al pasar de una entrada a otra el panel NO se cierra: solo cambia de
     altura y cruza el contenido.
   - Fluidez (15/9, 2ª pasada): nada anima la altura (recalcula la página
     en cada fotograma = tirones). El fondo blanco es una capa aparte que
     crece con transform:scaleY (--mega-s) y la sombra baja con translateY
     (--mega-h); todo va por GPU. El desenfoque del velo se anima de 0 a 6px
     en vez de aparecer de golpe (eso era el «salto»).
   - Los enlaces del panel entran en cascada (--i = orden, lo pone el JS).
   Elementor: widget Menú (Mega menú) + CSS personalizado de la cabecera
   para el velo y el cambio de altura. Ver ANIMACIONES-FQS.md, fila 21.
   ========================================================================= */
.nav a[data-mega].is-hot{border-color:#fff}

.mega{
  position:absolute;left:0;right:0;top:100%;
  height:var(--mega-max,0px);
  pointer-events:none;
}
.mega__bg,.mega__edge{
  position:absolute;left:0;right:0;top:0;
  transition:transform .5s cubic-bezier(.32,.72,0,1),opacity .3s ease;
  will-change:transform;
}
.mega__bg{
  height:100%;background:var(--paper);
  transform-origin:top;transform:scaleY(0);
}
.hdr.is-mega .mega__bg{transform:scaleY(var(--mega-s,0))}
.mega__edge{
  height:36px;opacity:0;
  background:linear-gradient(rgba(60,20,40,.14),rgba(60,20,40,0));
  transform:translateY(0);
}
.hdr.is-mega .mega__edge{opacity:1;transform:translateY(var(--mega-h,0px))}
@media (max-width:1100px){ .mega{display:none} }

.mega__stage{position:relative;max-width:calc(var(--wrap) + 120px);margin-inline:auto}
.mega__pane{
  position:absolute;left:0;right:0;top:0;
  display:flex;gap:64px;
  padding:34px 28px 42px 180px;
  opacity:0;visibility:hidden;
  transition:opacity .12s ease,visibility 0s linear .12s;
}
.mega__pane.is-on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .28s ease .08s,visibility 0s;
}

/* cascada de entrada de cada enlace */
.mega__pane .cas{
  opacity:0;transform:translateY(-4px);
  transition:opacity .12s ease,transform 0s linear .12s;
}
.mega__pane.is-on .cas{
  opacity:1;transform:none;
  transition:opacity .3s ease,transform .45s cubic-bezier(.32,.72,0,1);
  transition-delay:calc(90ms + var(--i,0) * 18ms);
}

.mega__col{min-width:0}
.mega__col--wide{flex:1}
.mega__k{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);margin-bottom:12px;
}
.mega__big{
  display:block;width:max-content;
  font-size:22px;font-weight:700;line-height:1.25;color:var(--ink);
  padding:3px 0;transition:color .2s;
}
.mega__big:hover{color:var(--pink)}
.mega__note{font-size:13px;color:var(--ink-2);margin-top:12px;max-width:30ch}
.mega__list li a{
  display:inline-flex;align-items:baseline;gap:8px;
  font-size:14.5px;color:var(--ink);padding:4px 0;transition:color .2s;
}
.mega__list li a:hover{color:var(--pink)}
.mega__list b{font-size:11.5px;font-weight:400;color:var(--ink-2)}
.mega__list--2{columns:2;column-gap:40px}

.mega__cards{display:grid;grid-template-columns:repeat(2,minmax(0,260px));gap:22px}
.mega__card{display:block;color:var(--ink)}
.mega__img{
  display:block;aspect-ratio:16/9;border-radius:12px;
  background:var(--pink-soft) center/cover no-repeat;
  margin-bottom:10px;
  transition:transform .5s var(--ease);
}
.mega__card:hover .mega__img{transform:scale(1.03)}
.mega__card small{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:2px}
.mega__card b{font-size:14.5px;line-height:1.3;transition:color .2s}
.mega__card:hover b{color:var(--pink)}

.mega__trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.mega__trio a{
  display:block;height:100%;padding:18px 20px;border-radius:14px;
  background:var(--paper-2);color:var(--ink);
  transition:background .25s,transform .35s var(--ease);
}
.mega__trio a:hover{background:var(--pink-soft);transform:translateY(-2px)}
.mega__trio b{display:block;font-size:17px;margin-bottom:4px}
.mega__trio span{font-size:13.5px;color:var(--ink-2)}

/* velo sobre la página */
.mega-veil{
  position:fixed;inset:0;z-index:98;
  background:rgba(40,20,30,0);
  -webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px);
  visibility:hidden;pointer-events:none;
  transition:background .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,visibility 0s linear .35s;
}
.mega-veil.is-on{
  background:rgba(40,20,30,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  visibility:visible;
  transition:background .35s ease,-webkit-backdrop-filter .35s ease,backdrop-filter .35s ease,visibility 0s;
}

/* anclas: que el título no quede debajo de la cabecera fija */
main [id]{scroll-margin-top:96px}

/* =========================================================================
   MENÚ MÓVIL «estilo Apple»: pantalla completa, entradas en cascada y
   subniveles que entran desde la derecha
   ========================================================================= */
.menu{
  position:fixed;z-index:99;inset:0;
  background:var(--pink-dk);color:#fff;
  padding:96px 28px 34px;overflow:hidden;
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.menu.is-open{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.menu__in{position:relative;max-width:1320px;margin-inline:auto;height:100%}
.menu__lvl{
  position:absolute;inset:0;overflow-y:auto;
  transition:transform .45s cubic-bezier(.32,.72,0,1),opacity .3s ease;
}
.menu__lvl--sub{transform:translateX(100%);opacity:0;pointer-events:none}
.menu.is-sub .menu__lvl--root{transform:translateX(-30%);opacity:0;pointer-events:none}
.menu.is-sub .menu__lvl--sub{transform:none;opacity:1;pointer-events:auto}

.menu__lvl--root li{
  opacity:0;transform:translateY(-8px);
  transition:opacity .25s ease,transform .4s cubic-bezier(.32,.72,0,1);
}
.menu.is-open .menu__lvl--root li{opacity:1;transform:none}
.menu.is-open .menu__lvl--root li:nth-child(1){transition-delay:.06s}
.menu.is-open .menu__lvl--root li:nth-child(2){transition-delay:.10s}
.menu.is-open .menu__lvl--root li:nth-child(3){transition-delay:.14s}
.menu.is-open .menu__lvl--root li:nth-child(4){transition-delay:.18s}
.menu.is-open .menu__lvl--root li:nth-child(5){transition-delay:.22s}
.menu.is-open .menu__lvl--root li:nth-child(6){transition-delay:.26s}

.menu__lvl--root a,.menu__lvl--root button{
  display:flex;align-items:center;justify-content:space-between;width:100%;
  background:0;border:0;padding:12px 0;cursor:pointer;text-align:left;
  font-size:28px;font-weight:700;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.14);
}
.menu__lvl--root button::after{
  content:"";width:10px;height:10px;margin-right:6px;
  border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(45deg);opacity:.7;
}
.menu__back{
  display:inline-flex;align-items:center;gap:10px;
  background:0;border:0;color:#fff;opacity:.8;cursor:pointer;
  font-size:14px;padding:4px 0;margin-bottom:18px;
}
.menu__back::before{
  content:"";width:9px;height:9px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(45deg);
}

/* el panel clonado del mega menú, en versión móvil (entra en cascada igual) */
.menu .mega__pane{position:static;display:block;padding:0;opacity:1;visibility:visible;transition:none}
.menu .mega__pane .cas{opacity:0;transform:translateX(14px);transition:opacity .25s ease,transform .4s cubic-bezier(.32,.72,0,1)}
.menu.is-sub .mega__pane .cas{opacity:1;transform:none;transition-delay:calc(120ms + var(--i,0) * 22ms)}
.menu .mega__col{margin-bottom:26px}
.menu .mega__k{color:rgba(255,255,255,.7)}
.menu .mega__big,.menu .mega__list li a,.menu .mega__card,.menu .mega__trio a{color:#fff}
.menu .mega__big{font-size:24px;width:auto}
.menu .mega__note,.menu .mega__list b,.menu .mega__card small,.menu .mega__trio span{color:rgba(255,255,255,.72)}
.menu .mega__list li a{font-size:17px}
.menu .mega__list--2{columns:1}
.menu .mega__cards,.menu .mega__trio{grid-template-columns:1fr;gap:14px}
.menu .mega__trio a{background:rgba(255,255,255,.1)}
.menu .mega__big:hover,.menu .mega__list li a:hover,.menu .mega__card:hover b{color:#fff;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .mega__bg,.mega__edge,.mega__pane,.mega__pane .cas,.mega-veil,.menu,.menu__lvl,.menu__lvl--root li,.menu .mega__pane .cas{transition:none!important}
}

/* =========================================================================
   PÁGINAS INTERIORES — cabecera de página y aviso de "en construcción"
   (bloques del borrador; se sustituyen por el contenido real poco a poco)
   ========================================================================= */
.phero{
  position:relative;
  /* arranca en el MISMO rosa que la barra (--pink) para que barra y cabecera
     sean una sola franja; antes empezaba en --pink-hero-a y se veía la costura
     entre dos rosas distintos (Bori, 24/9/2026) */
  background:linear-gradient(180deg,var(--pink) 0%,var(--pink-hero-a) 45%,var(--pink-hero-b) 100%);
  color:#fff;text-align:center;padding:160px 0 72px;
}
.phero h1{font-size:clamp(30px,4.4vw,50px);font-weight:400;margin-bottom:var(--head-gap)}
.phero p{max-width:60ch;margin:0 auto;font-size:15px;opacity:.95}

.wip{max-width:var(--wrap);margin:var(--sec-y) auto;padding-inline:24px}

/* --- hub de contenido (Conocimiento) ---------------------------------- */
.hub{max-width:var(--wrap);margin:var(--sec-y) auto;padding-inline:24px}
.hub__tabs{
  display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:var(--block-gap);
}
.hub__tab{
  border:1px solid var(--line);background:#fff;color:var(--ink-2);
  border-radius:999px;padding:9px 18px;font-size:13.5px;cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.hub__tab.is-sel{background:var(--pink);color:#fff;border-color:var(--pink)}
.hub__tab.is-sel b{color:#fff}
.hub__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hub__grid .cp{background:var(--pink-soft)}
.hub__grid .cp__img{
  background-color:var(--pink-hero-a);
  background-image:linear-gradient(135deg,var(--pink-hero-a),var(--pink-hero-b));
  background-size:cover;background-position:center;
  display:grid;place-items:center;
}
.hub__grid .cp__img svg.hub__ico{
  width:52px;height:52px;fill:none;stroke:#fff;stroke-width:1.4;
  stroke-linecap:round;stroke-linejoin:round;opacity:.9;
}
.hub__grid .cp__ft .prox{color:var(--ink-2);font-style:italic}
.hub__mas{text-align:center;margin-top:var(--block-gap)}
.hub__empty{grid-column:1/-1;text-align:center;color:var(--ink-2);padding:44px}
.hub__grid > [hidden]{display:none}   /* tarjetas escritas en el HTML; el JS solo las filtra (23/9/2026) */

/* --- Artículo individual de Conocimiento (/articulo.html) -------------- */
.art{max-width:720px;margin:0 auto;padding:56px 24px 90px}
.art__back{display:inline-flex;align-items:center;gap:6px;color:var(--pink);font:700 13.5px/1 "Bariol",system-ui,sans-serif;text-decoration:none;margin-bottom:26px}
.art__back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;transform:rotate(180deg)}
/* Artículo en dos columnas (23/9/2026): la foto 4:5 ENTERA, fija a la izquierda mientras se lee;
   el texto a la derecha. Cabecera rosa más baja para que el artículo empiece antes.
   Sin foto, una sola columna centrada. En móvil, foto arriba y texto debajo. */
.phero--art{padding:140px 0 48px}
.art:has(.art__grid){max-width:1160px}
.art__grid{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:64px;align-items:start}
.art__grid:has(> .art__foto[hidden]){grid-template-columns:minmax(0,720px);justify-content:center}
.art__foto{margin:0;position:sticky;top:112px}
.art__foto[hidden]{display:none}
.art__foto img{display:block;width:100%;height:auto;border-radius:var(--r-card);box-shadow:0 24px 60px rgba(190,80,120,.14)}
.art__texto{min-width:0;max-width:680px}
.art__texto .art__body p:first-child{font-size:19px;line-height:1.6;color:var(--ink)}
@media (max-width:900px){
  .art__grid{grid-template-columns:1fr;gap:34px}
  .art__foto{position:static;max-width:460px;width:100%;margin:0 auto}
}
.art__body{color:var(--ink);font-size:16.5px;line-height:1.75}
.art__body p{margin:0 0 20px}
.art__body strong{color:var(--pink-dk)}
/* Preguntas frecuentes de un artículo (15/10/2026): respuestas literales del propio texto */
.art__faq{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.art__faq h2{font:700 13px/1 "Bariol",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.art__faq h3{font-size:17px;line-height:1.4;color:var(--pink-dk);margin:22px 0 6px}
.art__faq p{margin:0;color:var(--ink);font-size:15.5px;line-height:1.7}
.art__fuentes{margin-top:36px;padding-top:22px;border-top:1px solid var(--line)}
.art__fuentes h2{font:700 13px/1 "Bariol",system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 14px}
.art__fuentes ol{margin:0;padding-left:20px;color:var(--ink-2);font-size:13.5px;line-height:1.7}
.art__fuentes li{margin-bottom:8px}
.art__fuentes a{color:var(--pink)}
.art__cta{margin-top:52px;background:var(--pink-soft);border-radius:var(--r-card);padding:30px 34px;text-align:center}
.art__cta h3{font:400 22px/1.3 "Bariol",system-ui,sans-serif;color:var(--pink-dk);margin:0 0 8px}
.art__cta p{color:var(--ink-2);font-size:14.5px;margin:0 0 18px}
/* Conocimiento: hueco de foto VERTICAL 4:5, el mismo formato que las fotos de LinkedIn, para que
   se vean enteras sin recorte ni relleno (Bori 23/9/2026). 4 columnas para que no crezcan de más. */
.hub__grid{grid-template-columns:repeat(4,1fr);gap:22px}
.hub__grid .cp__img,#conocimiento .cp__img{height:auto;aspect-ratio:4/5}
@media (max-width:1200px){ .hub__grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:980px){ .hub__grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .hub__grid{grid-template-columns:1fr} }
.wip__box{
  border:1.5px dashed var(--line);border-radius:var(--r-card);
  background:var(--pink-soft);padding:42px 32px;text-align:center;color:var(--ink-2);
}
.wip__box h2{
  color:var(--pink);font-size:19px;margin-bottom:12px;
  text-transform:uppercase;letter-spacing:.04em;
}
.wip__box ul{display:inline-block;text-align:left;margin-top:16px;font-size:14px;line-height:2}
.wip__box li::before{content:"·";color:var(--pink);font-weight:700;margin-right:9px}

/* =========================================================================
   HERO
   ========================================================================= */
.hero{
  position:relative;overflow:hidden;
  padding:190px 0 170px;
  /* arranca en el MISMO rosa que la barra (--pink) para que barra y cabecera
     sean una sola franja; antes empezaba en --pink-hero-a y se veía la costura
     entre dos rosas distintos (Bori, 24/9/2026) */
  background:linear-gradient(180deg,var(--pink) 0%,var(--pink-hero-a) 45%,var(--pink-hero-b) 100%);
  isolation:isolate;
}
.hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(35,24,30,.78) 0%,rgba(110,26,68,.56) 42%,rgba(255,58,130,.20) 100%),
    linear-gradient(180deg,rgba(255,58,130,.34) 0%,rgba(255,58,130,.14) 58%,rgba(255,255,255,.08) 100%);
  pointer-events:none;
}
.hero::after{
  content:"";
  position:absolute;left:50%;bottom:-74px;z-index:0;
  width:min(1120px,92vw);height:160px;translate:-50% 0;
  border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.78) 0%,rgba(255,255,255,.42) 38%,rgba(255,255,255,0) 72%);
  pointer-events:none;
}
.hero__bg{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center right;
  filter:saturate(1.08) contrast(1.02);
  animation:kenburns 26s ease-in-out infinite alternate;
}
/* Sin foto (29/9/2026): trama hexagonal técnica, la misma que .phero::before
   usa en las cabeceras sin foto de empresa/servicios/contacto — ver esa regla
   más abajo y el bloque de variables --linea-* para el porqué. Doble opacidad
   (dos capas del mismo hex a distinto tamaño) para que se note más que en una
   cabecera normal, ya que aquí es el único elemento gráfico del hero. */
.hero__hex{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    var(--linea-hex-blanca) right -20px top -20px/86px 149px repeat,
    var(--linea-hex-blanca) right top/60px 104px repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(255deg,#000 0%,#000 55%,transparent 92%);
  mask-image:linear-gradient(255deg,#000 0%,#000 55%,transparent 92%);
}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}

.hero__in{
  position:relative;z-index:1;
  max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
  display:flex;align-items:center;gap:40px;
  will-change:transform;
}
.hero__txt{flex:1 1 auto;max-width:670px}
.hero__h1{
  font-size:clamp(42px,5.6vw,72px);font-weight:400;color:#fff;
  letter-spacing:-.01em;margin-bottom:22px;
  text-shadow:0 18px 48px rgba(50,20,34,.24);
}
.ln{display:block;overflow:hidden;padding-bottom:.08em}
.ln>span{display:block;transform:translateY(105%);animation:rise 1s .1s var(--ease) forwards}
@keyframes rise{to{transform:translateY(0)}}

.hero__p{
  color:#fff;font-size:16px;line-height:1.62;max-width:58ch;margin-bottom:18px;opacity:.98;
  text-shadow:0 12px 28px rgba(20,12,18,.45);
}
.hero__p.r.in{opacity:.97}

.hero__sello{
  flex:0 0 auto;width:190px;
  filter:drop-shadow(0 22px 34px rgba(80,20,48,.22));
  animation:float 7s ease-in-out infinite;
  will-change:transform;
}
/* usa la propiedad `translate` para no chocar con el parallax de scroll,
   que va por `transform` */
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -12px}}

.btn{
  display:inline-block;margin-top:12px;
  background:var(--pink);color:#fff;
  border-radius:999px;padding:11px 30px;
  font-size:13px;letter-spacing:.11em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  /* mismo bug de Safari que .cs/.cp (ver 29/9): border-radius+overflow:hidden
     en un elemento que además lleva transform al :hover — aquí se notaría
     como la píldora perdiendo la forma redonda al pasar el ratón. */
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#fff 100%);
  mask-image:radial-gradient(circle,#fff 100%,#fff 100%);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--pink-dk);
  transform:translateY(101%);transition:transform .4s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(190,50,100,.3)}
.btn:hover::before{transform:translateY(0)}
/* anillo de foco propio: el genérico de más abajo (:focus-visible) pone un
   `outline` de 2px con las esquinas a 4px, que en una píldora (radius 999px)
   se ve como un rectángulo mal encajado — y en algunos Windows con el color
   de énfasis del sistema puesto en otro tono, ese outline nativo puede salir
   en ESE color en vez del rosa de marca. Aquí se anula el outline y se pone
   un halo con box-shadow, que sí seguirá la forma de píldora y siempre en
   rosa, venga del navegador/SO que venga. */
.btn:focus-visible{outline:0;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--pink)}

.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.hero__cta.r{opacity:1;transform:none}
.hero__cta .btn{margin-top:0}
.btn--ghost{background:rgba(255,255,255,.94);color:var(--pink);box-shadow:0 12px 28px rgba(40,20,30,.14)}
.btn--ghost::before{background:#fff}
.btn--ghost:hover{color:var(--pink-dk)}

.hero__wave{position:absolute;left:0;right:0;bottom:-1px;z-index:1;line-height:0;pointer-events:none}
.hero__wave svg{width:100%;height:clamp(70px,9vw,130px);display:block}
.hero__wave .w1{fill:var(--pink-wave);opacity:.72;animation:bob 9s ease-in-out infinite}
.hero__wave .w2{fill:#fff;animation:bob 11s ease-in-out infinite .6s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* =========================================================================
   SECCIONES GENÉRICAS
   ========================================================================= */
.sec{position:relative;padding:var(--sec-y) 0;background:transparent;z-index:1}
#destacadas{position:relative}

#porque{position:relative}
#conocimiento{position:relative}
.sec__h{
  text-align:center;color:var(--pink);
  font-size:clamp(20px,2.3vw,27px);
  text-transform:uppercase;letter-spacing:.035em;
}
.sec__sub{
  text-align:center;color:var(--ink);font-size:15px;
  margin:var(--head-gap) auto 0;max-width:74ch;
}

/* =========================================================================
   CARRUSEL (compartido por sectores, destacadas, técnico y actualidad)
   ========================================================================= */
.carr{position:relative;max-width:calc(var(--wrap) + 110px);margin:calc(var(--block-gap) - 10px) auto -26px;padding:0 62px}
.carr__track{
  display:flex;gap:26px;
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:10px 4px 26px;
  scrollbar-width:none;cursor:grab;
}
.carr__track::-webkit-scrollbar{display:none}
.carr__track.is-drag{cursor:grabbing;scroll-snap-type:none}
.carr__track>li{flex:0 0 calc((100% - 52px)/3);scroll-snap-align:start}

/* Flechas de carrusel (24/9/2026): círculo blanco con borde rosa fino y
   flecha de trazo fino, en la línea técnica de la marca (cuadrícula, rombos,
   molécula). Sustituye al disco 3D con relieve del pop-button de Vengeance UI;
   de aquel se conserva solo el rebote elástico al soltar.
   Un único centrado (translateY(-50%)) y los estados solo le suman escala:
   así el botón nunca «bota» arriba y abajo con el ratón.
   Al pasar el ratón se rellena de rosa y la flecha avanza hacia donde apunta,
   el mismo gesto que la flecha de «Ver materia prima». */
.carr__nav{
  position:absolute;top:50%;left:6px;z-index:5;
  width:44px;height:44px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  color:var(--pink);background:#fff;border:1.5px solid var(--pink);
  box-shadow:0 6px 18px -8px rgba(var(--pink-rgb),.35);
  transform:translateY(-50%) scale(1);
  transition:transform .5s cubic-bezier(.34,1.8,.5,1),background .25s ease,color .25s ease,opacity .3s;
}
.carr__nav svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.carr__nav.prev{left:6px}
.carr__nav.next{right:6px;left:auto}
.carr__nav:hover{background:var(--pink);color:#fff}
.carr__nav.next:hover svg{transform:translateX(3px)}
.carr__nav.prev:hover svg{transform:translateX(-3px)}
.carr__nav:focus-visible{outline:2px solid var(--pink);outline-offset:3px}
.carr__nav:active{
  transform:translateY(-50%) scale(.88);
  transition:transform .08s ease,background .25s ease,color .25s ease;
}
.carr__nav[disabled]{opacity:.22;cursor:default}
/* mientras el scroll suave está en marcha (js/main.js): no se puede volver a
   pulsar hasta que termine, para que un segundo clic no corte la animación */
.carr__nav[data-moviendo]{pointer-events:none}   /* sin atenuar: que se vea el rebote */
@media (prefers-reduced-motion:reduce){ .carr__nav{transition:opacity .3s} }

/* --- tarjeta de sector -------------------------------------------------- */
/* 29/9: el recorte (border-radius+overflow:hidden) y el giro 3D del hover
   (rotateX/rotateY, js/main.js) vivían los dos en .cs. Quitar
   transform-style:preserve-3d no bastó, y separar el recorte en .cs__clip
   (hijo estático, sin transform propio) TAMPOCO bastó — confirmado en
   Safari real: sigue con esquinas cuadradas aunque .cs__clip nunca gire.
   El bug de WebKit es más terco: en cuanto CUALQUIER ancestro de un
   overflow:hidden+border-radius tiene un transform 3D (aunque sea el
   abuelo, no el propio elemento), Safari puede dejar de recortar bien.
   El único workaround que de verdad funciona ahí es forzar el recorte por
   máscara en vez de por overflow — con mask-image, Safari sí respeta el
   border-radius pase lo que pase en los ancestros. */
.cs{
  position:relative;
  min-height:395px;
  transition:transform .3s var(--ease);
}
.cs.is-tilt{box-shadow:0 22px 44px rgba(150,40,80,.28)}
.cs__clip{
  position:absolute;inset:0;border-radius:var(--r-card);overflow:hidden;
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#fff 100%);
  mask-image:radial-gradient(circle,#fff 100%,#fff 100%);
  display:flex;flex-direction:column;justify-content:center;
  isolation:isolate;
  transition:opacity .6s var(--ease);
}
/* halo que sigue al cursor, igual que en .cp (js/main.js delega el
   pointermove en document y mueve --mx/--my en cualquier .cp o .cs) */
.cs__clip::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
  mix-blend-mode:soft-light;
}
.cs:hover .cs__clip::after{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){ .cs__clip::after{display:none} }
.cs__img{
  position:absolute;inset:0;z-index:-2;
  background-size:cover;background-position:center;
  transition:transform .8s var(--ease);
}
.cs__clip::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* más denso desde que hay fotos reales: son de laboratorio muy claras y el texto es blanco */
  background:linear-gradient(180deg,rgba(45,28,38,.50),rgba(45,28,38,.62));
  transition:opacity .5s;
}
.cs:hover .cs__img{transform:scale(1.07)}
.cs:hover .cs__clip::before{opacity:.78}
.cs__list{text-align:center;color:#fff;font-weight:700;font-size:15px;line-height:1.85;padding:26px 18px 112px}
/* acción del usuario: el enlace cubre toda la tarjeta (en Elementor, enlace del contenedor) */
.cs__cta{
  position:absolute;left:0;right:0;bottom:62px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  color:#fff;font-size:13px;font-weight:600;text-align:center;padding:0 14px;
  text-decoration:none;
}
.cs__cta::after{content:"";position:absolute;inset:-400px 0 -70px}
.cs__cta svg{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--ease)}
.cs:hover .cs__cta svg{transform:translateX(5px)}
.cs__cta:focus-visible{outline:2px solid #fff;outline-offset:4px}
.cs__tag{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--pink);color:#fff;text-align:center;
  padding:15px 12px;font-size:14px;letter-spacing:.09em;text-transform:uppercase;
  transition:padding .35s var(--ease),background .35s;
}
.cs:hover .cs__tag{padding:19px 12px;background:var(--pink-dk)}

/* --- baraja de sectores (home, 15/9/2026) --------------------------------
   Las tarjetas se abren en abanico: la de delante es la activa y las demás
   asoman a los lados, girando como una mano de cartas. Infinita: después de
   Industria vuelve Agricultura. La posición va en translate/rotate/scale
   (propiedades sueltas) para no pisar el `transform` de la inclinación 3D.
   Sin JS (.is-ready ausente) queda como fila deslizable normal.
   En Elementor NO es nativo: widget HTML con este CSS + bloque «4 bis» de main.js. */
.deck{position:relative;max-width:calc(var(--wrap) + 110px);margin:40px auto 0;padding:0 24px;overflow-x:clip}
.deck__stage{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px 4px 26px}
.deck__stage>li{flex:0 0 300px;scroll-snap-align:center}
.deck__ctrl,.deck__hint{display:none}

.deck.is-ready .deck__stage{
  position:relative;display:block;overflow:visible;
  height:540px;padding:0;touch-action:pan-y;
}
.deck.is-ready .cs{
  --x:0px;--y:0px;--rot:0deg;--s:1;
  position:absolute;left:50%;top:22px;
  width:var(--deck-w,320px);min-height:440px;margin-left:calc(var(--deck-w,320px) / -2);
  translate:var(--x) var(--y);rotate:var(--rot);scale:var(--s);
  transform-origin:50% 120%;
  box-shadow:0 16px 36px rgba(120,30,65,.20);
  filter:brightness(.8) saturate(.8);
  cursor:pointer;user-select:none;-webkit-user-select:none;
  transition:
    translate .75s cubic-bezier(.2,.85,.25,1) var(--dl,0s),
    rotate .75s cubic-bezier(.2,.85,.25,1) var(--dl,0s),
    scale .75s cubic-bezier(.2,.85,.25,1) var(--dl,0s),
    opacity .5s var(--ease) var(--dl,0s),
    filter .5s var(--ease),box-shadow .5s var(--ease),transform .3s var(--ease);
}
.deck.is-ready .cs.is-top{filter:none;cursor:grab;box-shadow:0 30px 60px rgba(150,40,80,.34)}
.deck.is-ready .cs:not(.is-top):hover{filter:brightness(.95) saturate(.95)}
.deck.is-ready .cs.is-far{opacity:0;pointer-events:none}
.deck.is-drag .cs.is-top{transition:filter .5s,box-shadow .5s;cursor:grabbing}
/* al entrar en pantalla la baraja «se reparte»: sale apilada y se abre */
.deck.is-ready:not(.in) .cs{translate:0 70px;rotate:0deg;scale:.84;opacity:0}

/* mando: botones grandes + píldora con el nombre del sector activo */
.deck.is-ready .deck__ctrl{display:flex;align-items:center;justify-content:center;gap:22px;margin-top:4px}
.deck__btn{
  flex:none;width:60px;height:60px;border:0;border-radius:50%;cursor:pointer;
  background:var(--pink);color:#fff;display:grid;place-items:center;
  box-shadow:0 10px 24px rgba(var(--pink-rgb),.35);
  transition:transform .35s var(--ease),background .3s,box-shadow .35s var(--ease);
}
.deck__btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .35s var(--ease)}
.deck__btn:hover{background:var(--pink-dk);transform:scale(1.08);box-shadow:0 14px 30px rgba(var(--pink-rgb),.45)}
.deck__btn.prev:hover svg{transform:translateX(-3px)}
.deck__btn.next:hover svg{transform:translateX(3px)}
.deck__btn:active{transform:scale(.94)}
.deck__dots{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.deck__dot{
  height:30px;min-width:30px;max-width:30px;padding:0;border-radius:999px;cursor:pointer;
  border:2px solid var(--pink);background:transparent;color:#fff;overflow:hidden;
  font-size:12px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:max-width .6s var(--ease),background .35s,padding .6s var(--ease);
}
.deck__dot span{opacity:0;transition:opacity .3s}
.deck__dot:hover{background:var(--pink-pale)}
.deck__dot.is-on{max-width:260px;padding:0 16px;background:var(--pink)}
.deck__dot.is-on span{opacity:1;transition-delay:.2s}
.deck.is-ready .deck__hint{display:block;text-align:center;margin-top:14px;font-size:12.5px;color:var(--ink-2);transition:opacity .6s}
.deck.is-used .deck__hint{opacity:0}

@media (max-width:640px){
  .deck{padding:0 12px}
  .deck.is-ready .deck__stage{height:500px}
  .deck.is-ready .cs{min-height:420px}
  .deck__btn{width:52px;height:52px}
  .deck.is-ready .deck__ctrl{gap:12px}
  .deck__dot{height:12px;min-width:12px;max-width:12px;border-width:2px}
  .deck__dot.is-on{max-width:30px;padding:0}
  .deck__dot.is-on span{display:none}
}
@media (prefers-reduced-motion:reduce){
  .deck.is-ready .cs,.deck__dot,.deck__dot span{transition:none}
}

/* --- tarjeta de contenido (post / monografía) --------------------------- */
.cp{
  position:relative;
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.78);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  border-radius:var(--r-card);overflow:hidden;
  /* mismo bug de recorte en Safari que .cs (ver 29/9, arriba): .cp:hover
     lleva un transform (translateY) que en WebKit rompe el recorte de
     border-radius+overflow:hidden aunque sea un transform 2D — el mismo
     workaround de mask-image lo arregla. */
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#fff 100%);
  mask-image:radial-gradient(circle,#fff 100%,#fff 100%);
  box-shadow:0 22px 64px rgba(60,59,62,.045);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .6s var(--ease);
  color:inherit;text-decoration:none;cursor:default;
}
a.cp{cursor:pointer}
/* halo que sigue al cursor (js/main.js mueve --mx/--my con pointermove) —
   igual que los "spotlight cards" de Vengeance/Skiper UI, hecho a mano */
.cp::after{
  content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.45),transparent 62%);
  opacity:0;transition:opacity .35s var(--ease);
  mix-blend-mode:soft-light;
}
.cp:hover::after{opacity:1}
@media (hover:none),(prefers-reduced-motion:reduce){ .cp::after{display:none} }
.cp:hover{transform:translateY(-8px);box-shadow:0 28px 70px rgba(190,80,120,.12)}
.cp__img{
  position:relative;height:205px;overflow:hidden;
  background-size:cover;background-position:center;
  transition:transform .8s var(--ease);
}
.cp__img::after{
  content:"";position:absolute;inset:auto 0 0;height:46%;
  background:linear-gradient(180deg,transparent,rgba(38,28,34,.34));
  pointer-events:none;
}
.cp:hover .cp__img{transform:scale(1.04)}
/* Tarjetas de Conocimiento: la foto se ve ENTERA (contain), nunca recortada; los
   lados se rellenan con la misma foto desenfocada (Bori 23/9/2026) */
.cp__img--foto::before{
  content:"";position:absolute;inset:-24px;background:inherit;
  background-size:cover;background-position:center;filter:blur(18px) saturate(1.05);
}
.cp__foto{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain}
.cp__img--foto::after{z-index:2}
.chip{
  position:absolute;left:16px;top:16px;z-index:3;
  background:rgba(255,255,255,.93);color:var(--pink);
  border-radius:999px;padding:5px 15px;
  font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
}
.cp__bd{padding:22px 22px 8px;flex:1 1 auto}
.cp__bd h3{font-size:17px;margin-bottom:10px;color:var(--ink)}
.cp__bd p{font-size:13px;line-height:1.6;color:var(--ink-2)}
.cp__ft{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 22px 20px;font-size:12px;color:var(--pink);
}
.cp__ft a,.cp__link{display:inline-flex;align-items:center;gap:7px}
/* tarjeta de materia prima destacada: sin foto todavía, fondo degradado + icono.
   Cuando llegue la foto (D-03) basta con style="background-image:url(...)" en .cp__img */
.cp--mp .cp__img{
  background-color:var(--pink-hero-a);
  background-image:
    radial-gradient(circle at 78% 18%,rgba(255,255,255,.32),transparent 28%),
    linear-gradient(135deg,var(--pink-hero-a),var(--pink-hero-b));
  display:grid;place-items:center;
}
.cp--mp .cp__img[style] .cp__ico{display:none}
.cp__ico{width:110px;height:110px;display:block}
/* monografía: su portada (.mono-cub) está en el bloque LÍNEAS DE MARCA, al final */
.cp__meta{color:var(--ink-2)}
.cp__ft svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;transition:transform .3s var(--ease)}
.cp__ft a:hover svg,.cp:hover .cp__link svg{transform:translateX(5px)}

/* =========================================================================
   ¿POR QUÉ TRABAJAR CON FQS?
   Antes era un mosaico asimétrico (bloque grande rosa + 2 tarjetas chicas +
   barra negra a todo lo ancho): tres tratamientos visuales distintos para 4
   razones que pesan lo mismo, sin un orden de lectura claro — "qué lío para
   leer esto" (Bori, 23/9/2026). Ahora es una fila de 4 tarjetas iguales,
   mismo criterio que ya usa "Cómo trabajamos": todas con el mismo tamaño y
   estilo, solo la primera (28 años) en rosa para marcar el dato ancla, igual
   que el paso 04 destaca allí. Entra pieza a pieza según el scroll
   (js/main.js, bloque 5).
   ========================================================================= */
.porque-mosaico{margin-top:46px;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.porque-pieza{
  border-radius:16px;padding:34px 30px;min-height:260px;display:flex;flex-direction:column;
  background:rgba(255,255,255,.74);box-shadow:0 18px 42px rgba(60,59,62,.045);color:var(--ink);
  transition:box-shadow .3s,transform .3s;
}
.porque-pieza:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(0,0,0,.06)}
/* experiencia/catálogo/asesoramiento son <svg> vectorizados de verdad (no
   PNG): a cualquier tamaño se ven nítidos, no hay pixelado posible. El de
   reparto lleva dentro una imagen a 360px de origen, de sobra para este
   tamaño en pantalla. */
.porque-pieza .porque-ico{width:88px;height:88px;color:var(--pink);margin-bottom:auto;display:block}
.porque-pieza h3{font-size:18px;line-height:1.3;font-weight:400;margin:22px 0 8px}
.porque-pieza h3 em{color:var(--pink);font-style:normal}
.porque-pieza p{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
/* experiencia/catálogo/asesoramiento ya no son PNG: vectorizados a <svg>
   real (marching squares, node vectorizar-iconos-porque.js, sin tocar el
   dibujo original) para que el trazo se dibuje de verdad al entrar en
   pantalla, y el relleno aparezca justo después. */
svg.porque-ico .ico-line{fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .9s var(--ease)}
svg.porque-ico .ico-fill{fill:currentColor;opacity:0;transition:opacity .5s var(--ease) .5s}
svg.porque-ico.in .ico-line{stroke-dashoffset:0}
svg.porque-ico.in .ico-fill{opacity:1}
/* reparto (furgoneta) sigue siendo PNG/SVG-con-raster: se queda con el iris
   circular de antes, no se ha vectorizado */
img.porque-ico{clip-path:circle(0% at 50% 50%);transition:clip-path .6s var(--ease)}
img.porque-ico.in{clip-path:circle(75% at 50% 50%)}
/* reparto.svg es blanco (se diseñó para ir sobre la barra negra que ya no
   existe); invertido se ve oscuro y legible sobre la tarjeta blanca */
.porque-rep .porque-ico{filter:invert(1)}
@media (prefers-reduced-motion:reduce){
  img.porque-ico{clip-path:none}
  svg.porque-ico .ico-line{stroke-dashoffset:0 !important;transition:none}
  svg.porque-ico .ico-fill{opacity:1 !important;transition:none}
}
/* la primera tarjeta (28 años) marca el dato ancla en rosa — mismo criterio
   que el paso 04 en "Cómo trabajamos"; las otras tres son iguales entre sí */
.porque-hero{
  color:#fff;
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.22),transparent 25%),
    linear-gradient(135deg,var(--pink) 0%,var(--pink-dk) 100%);
  box-shadow:0 24px 60px rgba(var(--pink-rgb),.20);
}
.porque-hero:hover{box-shadow:0 16px 32px rgba(var(--pink-rgb),.28)}
.porque-hero .porque-ico{color:#fff}
.porque-hero h3 em{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:5px}
.porque-hero p{color:rgba(255,255,255,.9)}

@media (max-width:900px){ .porque-mosaico{grid-template-columns:1fr 1fr} }
@media (max-width:600px){ .porque-mosaico{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .porque-pieza:hover{transform:none}
}

/* =========================================================================
   FRANJA DE CLAIM
   ========================================================================= */
/* Igual que .stats: rosa sólido con un borde de ola neto (mismo motivo del
   hero), no el degradado difuminado de antes. Aquí va por CSS puro (::before
   con máscara SVG) en vez de un <svg> en el HTML porque .claim es un <p>
   compartido por varias páginas (home, empresa, servicios, conocimiento,
   contacto) — un solo arreglo en la hoja de estilos vale para todas. */
.claim{
  position:relative;color:#fff;text-align:center;
  margin-top:clamp(50px,7vw,100px);
  padding:34px 24px 34px;
  font-size:clamp(16px,1.7vw,20px);
  background:var(--pink);
}
.claim::before{
  content:"";position:absolute;left:0;right:0;
  bottom:100%;height:clamp(50px,7vw,100px);
  background:var(--pink);
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,64 C180,18 320,96 520,74 C720,52 860,4 1080,30 C1240,49 1340,86 1440,72 L1440,130 L0,130 Z'/></svg>") bottom/100% 100% no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,64 C180,18 320,96 520,74 C720,52 860,4 1080,30 C1240,49 1340,86 1440,72 L1440,130 L0,130 Z'/></svg>") bottom/100% 100% no-repeat;
}
/* la frase entra palabra a palabra (js/main.js la trocea en spans), no
   en bloque como el resto de .r — por eso aquí el .r ya no anima por sí
   mismo, solo hace de contenedor visible desde el principio */
.claim .r{display:inline-block;opacity:1 !important;transform:none !important}
.claim-word{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.claim-word.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .claim-word{opacity:1;transform:none} }

/* =========================================================================
   FRANJA DE NÚMEROS  (= widget Contador de Elementor, "animar al ver")
   ========================================================================= */
.stats{
  position:relative;color:#fff;
  padding:calc(40px + var(--section-fade) * .3) 0;
  background:var(--pink);
}
.stats__wave{position:absolute;left:0;right:0;z-index:1;line-height:0;pointer-events:none}
.stats__wave svg{width:100%;height:clamp(50px,7vw,100px);display:block;fill:var(--paper)}
.stats__wave--top{top:-1px}
.stats__wave--bottom{bottom:-1px;transform:scaleX(-1)}
.stats__in{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;text-align:center}
.stat__n{
  display:block;font-size:clamp(30px,4vw,48px);font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums;
}
.stat span{
  display:block;margin-top:9px;font-size:12.5px;
  letter-spacing:.05em;text-transform:uppercase;opacity:.92;
}
@media (max-width:680px){ .stats__in{grid-template-columns:repeat(2,1fr);gap:32px 16px} .stats__in .stat:last-child:nth-child(odd){grid-column:1/-1} }
/* Franja con 4 cifras (Empresa): 4 en una fila, sin la última suelta debajo (16/10/2026) */
.stats__in:has(.stat:nth-child(4)){grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:900px){ .stats__in:has(.stat:nth-child(4)){grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px} }

/* subrayado que se dibuja en el hero  (= Titular animado de Elementor, modo
   subrayado / marcador; alternativa: CSS propio en la caja del widget) */
.uline{position:relative;white-space:nowrap;color:inherit;background:none}
.uline::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.04em;height:.11em;
  border-radius:3px;background:#fff;transform:scaleX(0);transform-origin:left;
  animation:uline .7s 1s var(--ease) forwards;
}
@keyframes uline{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){ .uline::after{transform:scaleX(1);animation:none} }

/* =========================================================================
   HABLEMOS DE TU PROYECTO
   ========================================================================= */
.proy{position:relative;overflow:hidden;isolation:isolate;padding:var(--sec-y) 0}
.proy__bg{
  position:absolute;inset:-12% 0;z-index:-2;
  background-size:cover;background-position:center;
  will-change:transform;
}
.proy::before{
  content:"";position:absolute;inset:0;z-index:-1;
  /* antes era rosa liso al 80%→42%: tapaba la foto entera de magenta.
     Mismo criterio que el velo del hero (.hero::before): oscuro donde hace
     falta contraste para el texto blanco, y que se note que hay una foto
     detrás, no un filtro de color plano.
     24/9: la foto nueva es de clave alta (balanza, tarros y bata blancos
     justo bajo el texto), así que el velo ya no se aclara hacia la derecha:
     es donde va el texto blanco. */
  background:linear-gradient(100deg,rgba(35,24,30,.46) 0%,rgba(78,22,50,.56) 50%,rgba(58,18,40,.64) 100%);
}
.proy__in{
  max-width:var(--wrap);margin-inline:auto;padding-inline:24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:56px;align-items:center;
}

.fcard{
  background:rgba(var(--pink-rgb),.85);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  border-radius:26px;padding:34px 32px 30px;color:#fff;
  display:flex;flex-direction:column;gap:13px;
}
.fcard h3{font-size:21px;line-height:1.25}
.fcard>p{font-size:12.5px;line-height:1.55;opacity:.92;margin-bottom:6px}
.fcard input,.fcard textarea{
  width:100%;background:rgba(255,255,255,.14);border:1.4px solid rgba(255,255,255,.75);
  border-radius:999px;padding:11px 20px;font-size:14px;color:#fff;
  transition:border-color .3s,background .3s,box-shadow .3s;
}
.fcard textarea{border-radius:20px;resize:vertical;min-height:86px}
.fcard input::placeholder,.fcard textarea::placeholder{color:rgba(255,255,255,.85)}
.fcard input:focus,.fcard textarea:focus{
  outline:0;border-color:#fff;background:rgba(255,255,255,.24);
  box-shadow:0 0 0 4px rgba(255,255,255,.16);
}
.fcard button{
  align-self:flex-start;margin-top:6px;
  background:#fff;color:var(--pink);border:0;border-radius:999px;
  padding:10px 30px;font-size:13.5px;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.fcard button:hover{transform:translateY(-2px);box-shadow:0 10px 20px rgba(0,0,0,.2)}
.fcard__priv{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.45;cursor:pointer}
.fcard .fcard__priv input{width:auto;flex:none;padding:0;margin-top:2px;accent-color:var(--pink-dk)}
.fcard__priv a,.fcard__legal a{color:inherit;text-decoration:underline}
.fcard>p.fcard__legal{font-size:11px;line-height:1.5;opacity:.8;margin:0}
.fcard__msg{font-size:12.5px;min-height:1.2em;opacity:0;transition:opacity .3s}
.fcard__msg.on{opacity:1}
/* Formularios sobre fondo rosa claro (Contacto, CV, Servicios): el blanco de .fcard no se leía. Texto oscuro y botón rosa (2/10/2026) */
.fcard--claro{color:var(--ink)}
.fcard--claro h3{color:var(--pink-dk)}
.fcard--claro input::placeholder,.fcard--claro textarea::placeholder{color:var(--ink-2);opacity:.85}
.fcard--claro input,.fcard--claro textarea,.fcard--claro select{background:#fff;color:var(--ink);border:1.4px solid rgba(var(--pink-rgb),.45)}
.fcard--claro input:focus,.fcard--claro textarea:focus,.fcard--claro select:focus{background:#fff;border-color:var(--pink);box-shadow:0 0 0 4px rgba(var(--pink-rgb),.18)}
.fcard--claro input[type=checkbox]{background:transparent}
.fcard--claro>p.fcard__legal{opacity:1;color:var(--ink-2)}
.fcard--claro .fcard__priv a,.fcard--claro .fcard__legal a{color:var(--pink-dk)}
.fcard--claro button{background:var(--pink);color:#fff}
.fcard--claro .fcard__msg{color:var(--pink-dk);font-weight:700}

.proy__rt{color:#fff}
.proy__rt h2{font-size:clamp(30px,4vw,46px);font-weight:400;text-transform:uppercase;letter-spacing:.01em;margin-bottom:16px}
.proy__lead{font-size:14px;line-height:1.6;max-width:52ch;margin:var(--head-gap) 0 26px;opacity:.95}
.proy__list li{
  display:flex;gap:18px;align-items:flex-start;
  padding:16px 0;border-top:1px solid rgba(255,255,255,.35);
}
.proy__list li:first-child{border-top:0}
.proy__ico{flex:0 0 64px;display:flex;justify-content:center}
.proy__ico svg{width:34px;height:34px;fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.proy__list li:hover .proy__ico svg,.proy__list li:hover .proy__ico img{transform:translateY(-3px) scale(1.06)}
.proy__ico img{width:56px;height:56px;display:block;transition:transform .4s var(--ease)}
/* «Entrega rápida»: el camión atropella el texto de su fila, se mete las letras en la
   bodega y crece mientras se va. La coreografía está en js/main.js (5 quater); aquí solo
   lo estático. En Elementor: widget HTML con este CSS + su script. */
.proy__list li:hover .proy__ico--envio svg{transform:none}
/* Icono grande del CTA (64 px): la furgoneta con el logo de FQS, en línea blanca como los otros iconos */
.proy__list li:has(.proy__ico--envio){align-items:center}
.proy__ico--envio svg{width:64px;height:64px;overflow:visible}
.proy__list li.is-envio{overflow:clip;overflow-clip-margin:14px}
.proy__ico--envio{position:relative;z-index:2;flex:none;transform-origin:0 50%;will-change:transform}
.envio__lineas{opacity:0}
.envio__sello{transform-origin:30.5px 11px}
.envio__check{stroke-dasharray:9;stroke-dashoffset:0}
.envio-pal{display:inline-block;white-space:nowrap}
.envio-let{display:inline-block;will-change:transform,opacity}
.proy__list h4{font-size:14.5px;text-transform:uppercase;letter-spacing:.045em;margin-bottom:4px}
.proy__list p{font-size:12.5px;opacity:.92}

/* =========================================================================
   GLOBAL / ZERO WASTE
   ========================================================================= */
.split{display:flex;flex-wrap:wrap}
.pn{
  position:relative;flex:1 1 50%;min-height:440px;overflow:hidden;isolation:isolate;
  display:grid;place-items:center;text-align:center;color:#fff;
  transition:flex-grow .6s var(--ease);
}
.pn__bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center;transition:transform .9s var(--ease)}
.pn__bg--global{background-image:url("/img/empresa-panel-global.webp")}
.pn__bg--zero{background-image:url("/img/empresa-panel-zerowaste.webp")}
.pn::before{content:"";position:absolute;inset:0;z-index:-1;transition:opacity .5s}
.pn::before{background:linear-gradient(160deg,rgba(35,24,30,.70),rgba(200,31,95,.55))}
.pn:hover{flex-grow:1.18}
.pn:hover .pn__bg{transform:scale(1.06)}
.pn:hover::before{opacity:.86}
.pn__in{padding:48px 32px;display:flex;flex-direction:column;align-items:center;gap:18px}
.pn__in h2{font-size:clamp(38px,4.6vw,58px);text-shadow:0 3px 18px rgba(0,0,0,.3)}
.pn__in p{font-size:14.5px;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.35);max-width:52ch}
.pn__ico{
  width:96px;height:96px;border-radius:50%;
  background:var(--pink);display:grid;place-items:center;margin-top:8px;
  transition:transform .6s var(--ease);
}
.pn__ico img{width:68px}
.pn:hover .pn__ico{transform:rotate(360deg)}

/* =========================================================================
   PIE
   ========================================================================= */
.foot{background:var(--paper-2);color:var(--ink);padding-top:52px}
.foot__in{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1.65fr);gap:48px;padding-bottom:44px}
.foot__logo{width:150px;margin-bottom:16px}
.foot__brand p{font-size:12.5px;line-height:1.6;color:var(--ink-2);max-width:52ch}
.foot__seals{display:flex;align-items:center;gap:26px;margin-top:24px;flex-wrap:wrap}
.foot__seals img{height:52px;width:auto;filter:saturate(.95)}
.foot__eu{margin-top:22px;max-width:520px}
.foot__eu img{width:100%;height:auto;display:block}
.foot__brand .foot__eu p{font-size:10.5px;line-height:1.55;margin-top:10px}
/* QA M2 (15/10/2026): la banda de logos UE medía ~20 px de alto en móvil y no se leía. En pantalla estrecha se parte en dos filas (mismo PNG recortado con CSS) y el texto sube a 11.5 px. */
.foot__eu-m{display:none}
@media (max-width:600px){
  .foot__eu img{display:none}
  .foot__eu-m{display:grid;gap:12px}
  .foot__eu-m span{display:block;width:100%;background:url(/img/logo-europa.png) no-repeat}
  .foot__eu-m .a{aspect-ratio:450/74;background-size:221.8% auto;background-position:0 0}
  .foot__eu-m .b{aspect-ratio:548/74;background-size:182.1% auto;background-position:100% 0}
  .foot__brand .foot__eu p{font-size:11.5px}
}
.foot__cert{font-size:11.5px;line-height:1.6;color:var(--ink-2);margin-top:10px;max-width:46ch}
.recon__img{height:56px;width:auto;margin-bottom:14px}
.foot__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.foot__cols h4{
  color:var(--pink);font-size:12.5px;letter-spacing:.09em;
  text-transform:uppercase;margin-bottom:14px;
}
.foot__cols li{margin-bottom:7px}
.foot__cols a{
  font-size:13px;color:var(--ink-2);
  background-image:linear-gradient(var(--pink),var(--pink));
  background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s var(--ease),color .35s;
}
.foot__cols a:hover{color:var(--pink);background-size:100% 1px}

.foot__bar{background:var(--pink);color:#fff;padding:14px 0}
.foot__bar-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.foot__legal{display:flex;gap:32px;flex-wrap:wrap}
.foot__legal a{font-size:12.5px;opacity:.95}
.foot__legal a:hover{text-decoration:underline}
.foot__soc{display:flex;gap:14px}
.foot__soc a{
  width:26px;height:26px;border-radius:50%;background:#fff;
  display:grid;place-items:center;
  transition:transform .3s var(--ease);
}
.foot__soc a:hover{transform:translateY(-3px) scale(1.08)}
.foot__soc svg{width:15px;height:15px;fill:var(--pink)}

/* =========================================================================
   BARRA DE REVISIÓN (solo para esta maqueta, no forma parte del diseño)
   ========================================================================= */
.devbar{
  /* a la izquierda: la esquina derecha es de Farmaquín (botón y bocadillo) */
  position:fixed;left:16px;right:auto;bottom:16px;z-index:150;
  pointer-events:none;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-start;
  background:rgba(255,255,255,.94);
  border:1px solid var(--line);border-radius:999px;
  padding:7px 8px 7px 16px;
  box-shadow:0 8px 26px rgba(0,0,0,.14);
  font-size:12px;max-width:min(92vw,540px);
}
.devbar__nota{color:var(--ink-2);padding-right:8px}
.devbar__btn{
  pointer-events:auto;border:0;border-radius:999px;cursor:pointer;
  background:var(--pink-pale);color:var(--pink-dk);
  padding:7px 15px;transition:background .3s,color .3s;
}
.devbar__btn.is-on{background:var(--pink);color:#fff}

/* =========================================================================
   PÁGINA EMPRESA
   ========================================================================= */

/* dato pendiente de confirmar: nunca se inventa un número */
.confirm{
  display:inline;color:var(--pink-dk);background:#fff;
  border:1px dashed var(--pink);border-radius:6px;
  padding:1px 7px;font-size:.78em;
}
.stat__n .confirm{font-size:15px;padding:2px 10px;border-radius:8px}

.btn--outline{background:transparent;color:var(--pink);box-shadow:inset 0 0 0 1.5px var(--pink)}
.btn--outline::before{background:var(--pink)}
.btn--outline:hover{color:#fff}

.eyebrow{
  color:var(--pink);font-size:12.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;
}
.emp-lead{max-width:70ch;font-size:16px;color:var(--ink-2);margin-top:var(--head-gap)}
.emp-cta{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px}
.emp-cta .btn{margin-top:0}

/* --- E2 · trío (fabricación / importación / distribución) ------------- */
.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:var(--block-gap)}
.trio__it{background:var(--pink-soft);border-radius:var(--r-card);padding:26px 24px}
.trio__it .ico{
  width:88px;height:88px;border-radius:22px;
  background:linear-gradient(135deg,var(--pink) 0%,var(--pink-hero-a) 100%);
  display:grid;place-items:center;margin-bottom:16px;
}
.trio__it .ico img{width:68px;height:68px;display:block}
.trio__it h3{font-size:15.5px;margin-bottom:8px}
.trio__it p{font-size:13.5px;line-height:1.6;color:var(--ink-2)}

/* --- E5 · lista con check ------------------------------------------------ */
.checks{max-width:820px;margin-top:calc(var(--block-gap) - 16px)}
.checks li{
  display:flex;gap:16px;align-items:flex-start;
  padding:16px 0;border-top:1px solid var(--line);
}
.checks li:first-child{border-top:0}
.checks .tick{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--pink);display:grid;place-items:center;margin-top:1px;
}
.checks .tick svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.checks p{font-size:14.5px;line-height:1.6}

/* --- E6 · sectores en mini-tarjeta --------------------------------------- */
.sec-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:var(--block-gap);
}
.sec-grid a{
  display:flex;align-items:center;gap:10px;
  background:var(--pink-soft);border-radius:14px;padding:16px 16px;
  font-size:14px;font-weight:700;color:var(--ink);
  transition:background .25s,transform .25s;
  flex:0 1 calc(25% - 10.5px);
}
.sec-grid a{position:relative}
/* zona de contacto que no se mueve: evita el parpadeo cuando el puntero está en el borde inferior y el botón sube al pasar el ratón */
.sec-grid a::after{content:"";position:absolute;left:0;right:0;top:100%;height:6px}
.sec-grid a:hover{background:var(--pink);color:#fff;transform:translateY(-3px)}
/* icono de sector: misma serie ilustrada que «¿Por qué FQS?», blanco sobre la pastilla rosa */
.sec-ico{
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:40px;height:40px;border-radius:12px;background:var(--pink);
  font-style:normal;
}
.sec-ico img{width:28px;height:28px;display:block}

/* --- E7/E8 · bloque texto + imagen --------------------------------------- */
.split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;margin-top:8px}
.split2__img{
  aspect-ratio:4/3;border-radius:var(--r-card);
  background:var(--pink-soft);position:relative;overflow:hidden;
}

.split2--rev .split2__img{order:2}
.split2--rev .split2__tx{order:1}

/* --- Trayectoria (E4) — scrollytelling (6/10/2026) ----------------------
   Escenario fijo a la izquierda + hitos que pasan a la derecha. El JS
   (empresa.js) marca .on en el hito, el año, la foto y el punto activos.   */
.tl-head{max-width:820px}
.tl-line{position:relative;margin:48px 0 20px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:start}

.tl-stage{position:sticky;top:104px;height:calc(100vh - 128px);min-height:440px;max-height:720px;display:flex;flex-direction:column;justify-content:center;gap:26px}
.tl-sls,.tl-pics{display:grid}
.tl-sl,.tl-pic{grid-area:1/1;opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}
.tl-sl.on,.tl-pic.on{opacity:1;transform:none}
.tl-sl__phase{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--pink-dk);margin-bottom:6px}
.tl-bigyear{display:block;font-size:clamp(52px,6.4vw,104px);line-height:.95;font-weight:700;color:var(--pink);white-space:nowrap;letter-spacing:-.01em}
.tl-pic .tl-ph-box{height:min(40vh,380px);width:100%;max-width:520px}

.tl-ph-box{
  aspect-ratio:4/3;border-radius:var(--r-card);border:1px solid var(--line);
  background:repeating-linear-gradient(45deg,var(--paper-2) 0 10px,#fff 10px 20px);
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;font-size:12px;color:var(--ink-2);
}
.tl-ph-box--inline{display:none}

.tl-rail{position:relative;max-width:520px;height:14px}
.tl-rail::before{content:"";position:absolute;left:0;right:0;top:6px;height:2px;background:var(--line)}
.tl-rail__fill{position:absolute;left:0;right:0;top:5px;height:4px;border-radius:99px;background:linear-gradient(90deg,var(--pink),var(--pink-dk));transform-origin:left;transform:scaleX(0)}
.tl-dots{position:absolute;inset:0;display:flex;justify-content:space-between;align-items:center}
.tl-dot{width:14px;height:14px;border-radius:50%;border:3px solid var(--pink);background:#fff;padding:0;cursor:pointer;transition:transform .3s,background .3s}
.tl-dot.done{background:var(--pink-pale)}
.tl-dot.on{background:var(--pink);transform:scale(1.35)}

.tl-steps{padding:6vh 0 10vh}
.tl-step{min-height:72vh;display:flex;align-items:center}
.tl-step__card{
  width:100%;background:#fff;border:1px solid var(--line);border-left:4px solid var(--pink);border-radius:var(--r-card);
  padding:26px 28px;box-shadow:0 18px 42px rgba(60,59,62,.05);
  opacity:.32;transform:scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease);
}
.tl-step.on .tl-step__card{opacity:1;transform:none}
.tl-step__yr{font-size:14px;font-weight:700;color:var(--pink);margin:0 0 10px;font-variant-numeric:tabular-nums}
.tl-step__card h3{font-size:22px;margin:12px 0 10px;color:var(--pink-dk)}
.tl-step__card p{font-size:14.5px;line-height:1.65;color:var(--ink-2);margin-bottom:12px}
.tl-tag{
  display:inline-block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  color:var(--pink-dk);background:var(--pink-soft);border-radius:999px;padding:4px 11px;
}
.tl-impact{border-left:3px solid var(--pink);padding-left:13px;font-size:13.5px}
.tl-impact b{color:var(--pink-dk)}

.tl-step.feat .tl-step__card{background:var(--pink-dk);border-color:var(--pink-dk);border-left-color:#fff}
.tl-step.feat .tl-step__yr,.tl-step.feat .tl-step__card h3{color:#fff}
.tl-step.feat .tl-step__card p{color:rgba(255,255,255,.88)}
.tl-step.feat .tl-tag{background:rgba(255,255,255,.18);color:#fff}
.tl-step.feat .tl-impact{border-left-color:#fff}
.tl-step.feat .tl-impact b{color:#fff}

/* --- Recorrido del pedido (E2): trío fijo mientras se hace scroll -------
   Solo existe cuando empresa.js lo monta (escritorio, sin movimiento
   reducido); si no, se queda la rejilla .trio de siempre.                  */
.pin{height:calc(var(--pasos,3)*70vh + 30vh);position:relative}
.pin__in{position:sticky;top:96px;height:calc(100vh - 120px);min-height:420px;max-height:640px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.trio.pin-lista,.pasos.pin-lista{grid-template-columns:1fr;gap:14px;margin-top:0}
.pin-lista .trio__it,
.pin-lista.in .trio__it{opacity:.32;transform:scale(.98);transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s;display:grid;grid-template-columns:auto 1fr;column-gap:20px;align-items:center;padding:22px 26px}
.pin-lista .trio__it.on{opacity:1;transform:none;box-shadow:0 18px 42px rgba(255,58,130,.16)}
.pin-lista .trio__it .ico{grid-row:1/3;width:64px;height:64px;margin:0;border-radius:18px}
.pin-lista .trio__it .ico img{width:48px;height:48px}
.pin-lista .trio__it h3{font-size:18px;margin:0 0 4px}
.pin-lista .trio__it p{font-size:14px;margin:0}
.pin__art{position:relative;display:grid;place-items:center;height:100%;max-height:480px}
.pin__ic{grid-area:1/1;width:min(100%,360px);aspect-ratio:1;border-radius:36px;background:linear-gradient(135deg,var(--pink) 0%,var(--pink-hero-a) 100%);display:grid;place-items:center;opacity:0;transform:scale(.9) rotate(-3deg);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pin__ic.on{opacity:1;transform:none}
.pin__ic img{width:62%;height:62%;display:block}
.pin__n{position:absolute;bottom:0;right:0;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--pink-dk);font-variant-numeric:tabular-nums}


/* --- Empresa: Equipo / Instalaciones / Calidad — panel con icono, sin scroll (6/10/2026) ---
   Sustituye al hueco de foto. Solo se ve el primer icono de cada panel. */
.sc-art{aspect-ratio:4/3;background:none;display:grid;place-items:center;overflow:visible}
.sc-tile{grid-area:1/1;width:min(100%,340px);aspect-ratio:1;border-radius:36px;background:linear-gradient(135deg,var(--pink) 0%,var(--pink-hero-a) 100%);display:none;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:28px;text-align:center;color:#fff}
.sc-tile.on{display:flex}
.sc-tile img{width:54%;height:54%;object-fit:contain;display:block}
.sc-tile b{font-size:17px;line-height:1.3;font-weight:700;max-width:22ch}
.sc-n{display:none}

@media (max-width:860px){
  .trio,.split2{grid-template-columns:1fr}
  .sec-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-grid a{padding:12px;font-size:13.5px}
  .split2--rev .split2__img,.split2--rev .split2__tx{order:0}

  /* trayectoria en móvil: barra fija con la fase y el año; la foto va dentro de cada hito */
  .tl-line{display:block;margin-top:32px}
  .tl-stage{top:60px;height:auto;min-height:0;max-height:none;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--line);padding:8px 0 10px;gap:8px;margin-inline:-24px;padding-inline:24px}
  .tl-sl{transform:none}
  .tl-bigyear{font-size:34px}
  .tl-sl__phase{font-size:10.5px;margin-bottom:2px}
  .tl-pics{display:none}
  .tl-rail{max-width:none}
  .tl-steps{padding:18px 0 4vh}
  .tl-step{min-height:0;margin-bottom:22px}
  .tl-step__card,.tl-step.on .tl-step__card{opacity:1;transform:none;padding:20px}
  .tl-step__yr{display:none}
  .tl-ph-box--inline{display:flex;margin-top:14px}
}

@media (prefers-reduced-motion:reduce){.tl-sl,.tl-pic,.tl-step__card,.tl-dot,.pin__ic,.pin-lista .trio__it{transition:none}}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:1080px){
  .carr__track>li{flex:0 0 calc((100% - 26px)/2)}
  .hero__sello{width:150px}
}

@media (max-width:860px){
  .hero{padding:150px 0 130px}
  .hero__in{flex-direction:column;align-items:flex-start;gap:28px}
  .hero__sello{width:120px;align-self:flex-end;margin-top:-10px}
  .proy__in{grid-template-columns:1fr;gap:38px}
  .foot__in{grid-template-columns:1fr;gap:34px}
  .search input{width:130px}
  .search input:focus{width:170px}
}

@media (max-width:680px){
  .carr{padding:0 14px;overflow-x:clip} /* el carril sale 28px con margen negativo y ensanchaba la página 14px en el móvil */
  .carr__track>li{flex:0 0 84%}
  .carr__nav{display:none}
  .access span{display:none}
  .access{padding:8px 12px}
  .split{flex-direction:column}
  .pn{min-height:340px}
  .devbar{left:12px;right:96px;justify-content:flex-start;border-radius:16px}
}

/* móvil (25/09/2026): a 375 px la hamburguesa se salía de la pantalla.
   Por debajo de 480 px la barra de búsqueda queda en un círculo con la lupa
   (al tocarla abre igual el buscador grande, js/buscador.js) y el margen
   lateral pasa a 24 px, el mismo que .wrap, para que el contenido y la
   cabecera arranquen alineados. */
@media (max-width:480px){
  .hdr__in,.hdr.is-stuck .hdr__in{padding-inline:24px;gap:16px}
  .hdr__tools{gap:8px}
  .search__ico{left:11.5px}
  .search input,.search input:focus{width:38px;height:38px;padding:0 0 0 38px;cursor:pointer}
  .search input::placeholder{color:transparent}
  .access{padding:8px 10px}
}

/* móvil estrecho (15/10/2026, QA B1): con Novedades y Destacadas la cabecera medía
   249 px y la hamburguesa acababa fuera de la pantalla a 375 px. Se compactan las
   herramientas y, por debajo de 360 px, se esconden Destacadas y el icono de cuenta
   (el menú desplegable sigue llevando a Área de clientes). */
@media (max-width:480px){
  .hdr__in,.hdr.is-stuck .hdr__in{gap:10px}
  .hdr__logo img,.hdr.is-stuck .hdr__logo img{width:100px}
  .hdr__tools{gap:4px}
  .hdr__tools .nov__btn{padding:9px 8px}
  .hdr__tools .dest-av .nov__btn,.hdr__tools .dest-av a{padding:9px 8px}
  .search input,.search input:focus{width:34px;height:34px;padding-left:34px}
  .search__ico{left:9.5px}
  .access{padding:8px}
  .burger{width:34px;height:34px}
}
/* 20/10/2026: las reglas táctiles de 44 px (más arriba) anulaban la compactación anterior y a 375 px
   las herramientas medían 247 px: la hamburguesa asomaba 10 px fuera. Hasta 380 px se esconde Destacadas
   (la home ya la tiene; el menú lleva a todo) y quedan lupa, novedades, cuenta y menú con 44 px. */
@media (max-width:380px){
  .hdr__tools .dest-av{display:none}
}
@media (max-width:360px){
  .hdr__tools .dest-av,.hdr__tools .access{display:none}
  /* QA G13: las 3 columnas de enlaces del pie forzaban 16 px de scroll horizontal a 320 px */
  .foot__in>*{min-width:0}
  .foot__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 18px}
}

/* =========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================= */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .r{opacity:1;transform:none}
  .ln>span{transform:none}
}

/* =====================================================================
   ÁREA DE CLIENTES (maqueta navegable con datos de ejemplo · 16/09/2026)
   Todo va con prefijo .ac para no chocar con el resto de la web.
   ===================================================================== */
.ac{max-width:var(--wrap);margin:var(--sec-y) auto;padding-inline:24px}
/* Página de introducción al gestor documental de SAP (area-clientes.html) */
.ac-intro{max-width:960px}
.ac-intro__q{text-align:center;font-size:clamp(22px,2.6vw,28px);font-weight:400;color:var(--ink);margin-bottom:var(--block-gap)}
.ac-intro__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.ac-intro__card{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:0;padding:30px 30px 28px;transition:transform .25s,box-shadow .25s}
.ac-intro__card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,.08)}
.ac-intro__card h3{font-size:19px;margin:0}
.ac-intro__card p{font-size:15px;color:var(--ink-2);margin:0}
.ac-intro__card .ac-btn{margin-top:auto}
.ac-intro__ico{width:48px;height:48px;border-radius:14px;background:var(--pink-soft);display:grid;place-items:center}
.ac-intro__ico svg{width:24px;height:24px;fill:none;stroke:var(--pink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ac-intro__lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:15px;color:var(--ink)}
.ac-intro__lista li{padding-left:24px;position:relative}
.ac-intro__lista li::before{content:"";position:absolute;left:2px;top:.5em;width:10px;height:6px;border-left:2px solid var(--pink);border-bottom:2px solid var(--pink);transform:rotate(-45deg)}
@media (max-width:720px){.ac-intro__cols{grid-template-columns:1fr}}
.ac-demo{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  background:#fff;border:1px dashed var(--pink);color:var(--pink-dk);
  border-radius:12px;padding:10px 16px;font-size:13px;margin-bottom:22px;
}
.ac-demo b{color:var(--pink-dk)}
.ac-demo label{display:flex;align-items:center;gap:8px;margin-left:auto}
.ac-demo select{font:inherit;border:1px solid var(--line);border-radius:8px;padding:4px 8px;background:#fff;color:var(--ink)}
.ac-demo button{font:inherit;background:none;border:0;color:var(--pink-dk);text-decoration:underline;cursor:pointer}

.ac-shell{display:grid;grid-template-columns:230px 1fr;gap:30px;align-items:start}
.ac-side{position:sticky;top:96px;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 12px}
.ac-side__emp{padding:4px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:10px}
.ac-side__emp b{display:block;font-size:14.5px;color:var(--ink)}
.ac-side__emp span{font-size:12px;color:var(--ink-2)}
.ac-nav{display:flex;flex-direction:column;gap:2px}
.ac-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:9px 12px;border-radius:10px;font-size:14px;color:var(--ink);
  transition:background .2s,color .2s;
}
.ac-nav a:hover{background:var(--pink-soft)}
.ac-nav a[aria-current="page"]{background:var(--pink);color:#fff}
.ac-nav a .ac-badge{background:var(--pink-soft);color:var(--pink-dk)}
.ac-nav a[aria-current="page"] .ac-badge{background:#fff;color:var(--pink-dk)}
.ac-side__salir{margin-top:12px;padding:10px 12px 2px;border-top:1px solid var(--line);font-size:13px}
.ac-side__salir button{background:none;border:0;color:var(--ink-2);cursor:pointer;font:inherit;padding:0}
.ac-side__salir button:hover{color:var(--pink)}

.ac-main{min-width:0}
.ac-h{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}
.ac-h h2{font-size:26px;font-weight:400;color:var(--ink);line-height:1.2}
.ac-h p{font-size:14px;color:var(--ink-2);margin-top:4px}
.ac-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:20px 22px;margin-bottom:18px}
.ac-card h3{font-size:16px;margin-bottom:12px;color:var(--ink)}
.ac-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:18px}
.ac-kpi{background:var(--pink-soft);border-radius:var(--r-card);padding:16px 18px;display:block;color:var(--ink)}
.ac-kpi b{display:block;font-size:28px;line-height:1.1;color:var(--pink-dk)}
.ac-kpi span{font-size:13px;color:var(--ink-2)}
a.ac-kpi:hover{background:var(--pink-pale)}

.ac-btn{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;
  background:var(--pink);color:#fff;border-radius:999px;padding:9px 18px;
  font:inherit;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  transition:background .2s,transform .2s;
}
.ac-btn:hover{background:var(--pink-dk);transform:translateY(-1px)}
.ac-btn--o{background:#fff;color:var(--pink-dk);box-shadow:inset 0 0 0 1.5px var(--pink)}
.ac-btn--o:hover{background:var(--pink-soft)}
.ac-btn--s{padding:6px 12px;font-size:11.5px}
.ac-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.ac-link{background:none;border:0;padding:0;font:inherit;color:var(--pink-dk);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ac-msg{opacity:0;transform:translateY(-3px);transition:opacity .25s,transform .25s}
.ac-msg.on{opacity:1;transform:none}

.ac-tabla{overflow-x:auto}
.ac-tabla table{width:100%;border-collapse:collapse;font-size:14px}
.ac-tabla th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);font-weight:400;text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.ac-tabla td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.ac-tabla tr:last-child td{border-bottom:0}
.ac-tabla .num{text-align:right;white-space:nowrap}
.ac-tabla .acc{text-align:right;white-space:nowrap}
.ac-tabla .acc>*+*{margin-left:6px}

.ac-badge{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;white-space:nowrap}
.ac-st--recibido,.ac-st--confirmado,.ac-st--solicitada{background:var(--paper-2);color:var(--ink-2)}
.ac-st--preparacion,.ac-st--pendiente,.ac-st--enviada{background:var(--pink-soft);color:var(--pink-dk)}
.ac-st--enviado{background:var(--pink-pale);color:var(--pink-dk)}
.ac-st--entregado,.ac-st--pagada,.ac-st--aceptada,.ac-st--activo{background:var(--pink);color:#fff}
.ac-st--vencida{background:#fff;color:var(--pink-dk);box-shadow:inset 0 0 0 1px var(--pink-dk)}
.ac-st--caducada,.ac-st--pausado{background:#eeeaec;color:#6f6d73}
.ac-st--nuevo{background:var(--pink);color:#fff}
/* estados de «Mis solicitudes» */
.ac-st--s_enviada{background:var(--paper-2);color:var(--ink-2)}
.ac-st--s_revision{background:var(--pink-soft);color:var(--pink-dk)}
.ac-st--s_respondida{background:var(--pink);color:#fff}
.ac-st--s_cerrada{background:#eeeaec;color:#6f6d73}

/* Mis solicitudes: filtros y tarjetas desplegables */
.ac-filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.ac-filtro{font:inherit;font-size:13px;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);border-radius:999px;padding:6px 14px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.ac-filtro span{display:inline-block;margin-left:4px;font-size:12px;color:var(--ink-2)}
.ac-filtro:hover{border-color:var(--pink)}
.ac-filtro.is-on{background:var(--pink-soft);border-color:var(--pink);color:var(--pink-dk)}
.ac-sol{padding:0}
.ac-sol summary{list-style:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px;cursor:pointer}
.ac-sol summary::-webkit-details-marker{display:none}
.ac-sol summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--ink-2);border-bottom:2px solid var(--ink-2);transform:rotate(45deg);transition:transform .25s;margin-left:6px}
.ac-sol[open] summary::after{transform:rotate(-135deg)}
.ac-sol__cab{display:grid;gap:3px;min-width:0;flex:1 1 320px}
.ac-sol__tit{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ac-sol__cab b{font-size:15px;color:var(--ink)}
.ac-sol__est{display:flex;align-items:center;gap:10px}
.ac-sol__cuerpo{padding:4px 22px 20px;border-top:1px solid var(--line);padding-top:16px}

.ac-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.ac-form{display:grid;gap:12px}
.ac-form label{display:grid;gap:5px;font-size:13px;color:var(--ink-2)}
.ac-form input,.ac-form select,.ac-form textarea{
  font:inherit;font-size:14px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line);border-radius:10px;padding:9px 12px;width:100%;
}
.ac-form textarea{min-height:76px;resize:vertical}
.ac-form input:focus,.ac-form select:focus,.ac-form textarea:focus{outline:2px solid var(--pink);border-color:transparent}
.ac-nota{font-size:12.5px;color:var(--ink-2)}
.ac-vacio{padding:26px;text-align:center;color:var(--ink-2);font-size:14px}
.ac-buscar{font:inherit;font-size:14px;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;width:100%;margin-bottom:12px}
.ac-buscar:focus{outline:2px solid var(--pink);border-color:transparent}

.ac-qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.ac-qty button{width:30px;height:30px;border:0;background:#fff;cursor:pointer;font-size:16px;color:var(--pink-dk)}
.ac-qty button:hover{background:var(--pink-soft)}
.ac-qty input{width:44px;border:0;text-align:center;font:inherit;font-size:14px;-moz-appearance:textfield}
.ac-qty input::-webkit-outer-spin-button,.ac-qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.ac-comprar{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
.ac-cart{position:sticky;top:96px}
.ac-cart__l{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.ac-cart__l small{display:block;color:var(--ink-2);font-size:12px}
.ac-cart__tot{display:flex;justify-content:space-between;font-size:16px;margin:12px 0}

.ac-tl{list-style:none;margin:6px 0 0;padding:0}
.ac-tl li{position:relative;padding:0 0 16px 26px;font-size:14px}
.ac-tl li::before{content:"";position:absolute;left:6px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--line)}
.ac-tl li::after{content:"";position:absolute;left:10px;top:16px;bottom:0;width:2px;background:var(--line)}
.ac-tl li:last-child::after{display:none}
.ac-tl li.hecho::before{background:var(--pink)}
.ac-tl li.hecho::after{background:var(--pink-wave)}
.ac-tl small{display:block;color:var(--ink-2);font-size:12.5px}

.ac-login{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px;max-width:980px;margin:0 auto}
.ac-login .ac-card{margin:0}
.ac-login ul{margin:10px 0 0 18px;font-size:14px;line-height:1.9;color:var(--ink)}
.ac-perm td,.ac-perm th{text-align:center}
.ac-perm td:first-child,.ac-perm th:first-child{text-align:left}
.ac-si{color:var(--pink-dk);font-weight:700}
.ac-no{color:#b9b1b5}

.ac-toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:90;
  background:var(--ink);color:#fff;border-radius:999px;padding:11px 20px;font-size:14px;
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;max-width:min(92vw,560px);text-align:center;
}
.ac-toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1080px){
  .ac-comprar{grid-template-columns:1fr}
  .ac-cart{position:static}
}
@media (max-width:860px){
  .ac-shell{grid-template-columns:1fr}
  .ac-side{position:static;padding:12px}
  .ac-nav{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px}
  .ac-nav a{white-space:nowrap;border:1px solid var(--line)}
  .ac-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ac-grid2,.ac-login{grid-template-columns:1fr}
  .ac-demo label{margin-left:0}
}

/* =====================================================================
   CONTACTO · mapa de Google (decidido 16/09/2026)
   En Elementor = widget «Google Maps» + tarjeta encima.
   ===================================================================== */
.mapa{position:relative;aspect-ratio:16/6;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.mapa__frame{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapa__card{
  position:absolute;right:24px;top:50%;transform:translateY(-50%);
  background:#fff;border-radius:14px;padding:18px 22px;max-width:270px;
  box-shadow:0 14px 34px rgba(60,59,62,.18);font-size:14px;
}
.mapa__card b{display:block;font-size:17px;color:var(--ink);margin-bottom:6px}
.mapa__card span{display:block;color:var(--ink-2);line-height:1.6}
@media (max-width:760px){
  .mapa{aspect-ratio:auto;overflow:visible;border:0;background:none}
  .mapa__frame{position:static;display:block;aspect-ratio:4/3;height:auto;border-radius:var(--r-card);border:1px solid var(--line)}
  .mapa__card{position:static;transform:none;max-width:none;box-shadow:none;border:1px solid var(--line);margin-top:12px}
}

/* =====================================================================
   SEGUIMIENTO DEL ENVÍO EN MAPA (16/09/2026)
   Componente js/seguimiento-mapa.js · área de clientes + seguimiento.html
   ===================================================================== */
.sg{padding:22px 24px}
.sg-h{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:10px 16px}
.sg-kicker{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--pink-dk);margin:0 0 4px}
.sg h3.sg-estado{font-size:26px;font-weight:400;line-height:1.2;color:var(--ink);margin:0 0 4px}
.sg-sub{font-size:14px;color:var(--ink-2);max-width:64ch}
.sg-sub b{color:var(--ink)}
.sg-vivo{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:12.5px;color:var(--pink-dk);background:var(--pink-soft);border-radius:999px;padding:5px 12px}
.sg-vivo[hidden]{display:none}
.sg-punto{position:relative;display:inline-block;flex:none;width:8px;height:8px;border-radius:50%;background:var(--pink)}
.sg-punto::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--pink);opacity:0;animation:sgLatido 1.8s ease-out infinite}
@keyframes sgLatido{0%{transform:scale(.4);opacity:.8}100%{transform:scale(1.4);opacity:0}}

.sg-pasos{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:20px 0;padding:0}
.sg-pasos li{position:relative;padding-top:20px;text-align:center;font-size:12.5px;color:var(--ink-2)}
.sg-pasos li::before{content:"";position:absolute;z-index:1;top:0;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:#fff;border:2px solid var(--line)}
.sg-pasos li::after{content:"";position:absolute;z-index:0;top:5.5px;left:-50%;width:100%;height:2px;background:var(--line)}
.sg-pasos li:first-child::after{display:none}
.sg-pasos li.hecho::before{background:var(--pink);border-color:var(--pink)}
.sg-pasos li.hecho::after,.sg-pasos li.actual::after{background:var(--pink)}
.sg-pasos li.actual{color:var(--ink);font-weight:700}
.sg-pasos li.actual::before{border-color:var(--pink);box-shadow:0 0 0 4px var(--pink-soft)}

.sg-cuerpo{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:22px;align-items:start}
.sg-mapa-wrap{position:relative}
.sg-mapa{position:relative;z-index:0;height:390px;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--paper-2)}
.sg-mapa.leaflet-container{font:inherit;font-size:12px}
.sg-mapa--off::before{content:"El mapa no se ha podido cargar. El seguimiento de la derecha está al día.";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;color:var(--ink-2);font-size:13.5px}
.sg-mapa-ctrl{position:absolute;z-index:500;top:10px;right:10px}
.sg-chip{font:inherit;font-size:12.5px;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 13px;cursor:pointer;box-shadow:0 4px 12px rgba(60,59,62,.1)}
.sg-chip:hover{border-color:var(--pink);color:var(--pink-dk)}
.sg-chip[hidden]{display:none}
.sg-fuente{font-size:12px;color:var(--ink-2);margin-top:8px}

.sg-lado h4{font-size:12px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.sg-eventos{list-style:none;margin:0 0 16px;padding:0}
.sg-eventos li{position:relative;padding:0 0 14px 22px;font-size:13.5px}
.sg-eventos li::before{content:"";position:absolute;left:3px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--pink-wave)}
.sg-eventos li::after{content:"";position:absolute;left:7px;top:17px;bottom:2px;width:1.5px;background:var(--line)}
.sg-eventos li:last-child::after{display:none}
.sg-eventos li.ult::before{background:var(--pink);box-shadow:0 0 0 3px var(--pink-soft)}
.sg-eventos time{display:block;font-size:12px;color:var(--ink-2)}
.sg-eventos b{display:block;color:var(--ink)}
.sg-eventos span{display:block;font-size:12.5px;color:var(--ink-2)}
.sg-eventos li.vacio{padding-left:0;color:var(--ink-2)}
.sg-eventos li.vacio::before{display:none}
.sg-datos{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px;font-size:13.5px;line-height:1.55;color:var(--ink-2)}
.sg-datos b{color:var(--ink)}
.sg-avisos{border:0;margin:14px 0 0;padding:12px 0 0;box-shadow:inset 0 1px 0 var(--line);display:flex;flex-wrap:wrap;gap:6px 16px;font-size:13.5px}
.sg-avisos legend{float:left;width:100%;padding:0;margin-bottom:6px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.sg-avisos label{display:inline-flex;align-items:center;gap:6px;cursor:pointer;color:var(--ink)}
.sg-avisos input{accent-color:var(--pink);width:15px;height:15px}
.sg-avisos small{flex-basis:100%;font-size:12px;color:var(--ink-2)}
.sg-nota{font-size:12.5px;color:var(--ink-2);margin-top:12px}
.sg-demo-btn{margin-top:14px;font:inherit;font-size:12.5px;color:var(--pink-dk);background:#fff;border:1px dashed var(--pink);border-radius:999px;padding:6px 14px;cursor:pointer}
.sg-demo-btn[hidden]{display:none}
.sg-demo-btn[disabled]{opacity:.6;cursor:progress}

/* marcadores del mapa */
.sg-ic{background:none;border:0}
.sg-ic-fqs{display:flex;align-items:center;justify-content:center;width:46px;height:26px;padding:3px 5px;border-radius:999px;background:var(--pink);box-shadow:0 4px 12px rgba(var(--pink-rgb),.45)}
.sg-ic-fqs svg{display:block;width:100%;height:auto}
.sg-ic-dest{display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--ink);border:2px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.sg-ic-dest svg{width:15px;height:15px;fill:#fff}
.sg-ic-van{position:relative;display:flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;background:#fff;border:2.5px solid var(--pink);box-shadow:0 6px 16px rgba(var(--pink-rgb),.35)}
.sg-ic-van svg{position:relative;width:21px;height:21px;fill:#fff;stroke:var(--pink-dk);stroke-width:1.7;stroke-linejoin:round}
.sg-pulso::before{content:"";position:absolute;inset:-9px;border-radius:50%;background:var(--pink);opacity:0;animation:sgOnda 2.2s ease-out infinite;z-index:-1}
@keyframes sgOnda{0%{transform:scale(.55);opacity:.35}100%{transform:scale(1.45);opacity:0}}

/* resumen del área: pedidos en camino */
.ac-camino{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px 0;border-top:1px solid var(--line)}
.ac-card h3+.ac-camino{border-top:0;padding-top:0}
.ac-camino>div{flex:1;min-width:200px}
.ac-camino b{display:block;font-size:14.5px;color:var(--ink)}
.ac-camino span{font-size:13px;color:var(--ink-2)}

/* página pública «Sigue tu pedido» */
.sg-buscar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:24px;align-items:center}
.sg-buscar h2{font-size:24px;font-weight:400;color:var(--ink);margin-bottom:12px}

@media (max-width:980px){
  .sg-cuerpo,.sg-buscar{grid-template-columns:1fr}
  .sg-mapa{height:330px}
}
@media (max-width:560px){
  .sg{padding:16px}
  .sg-estado{font-size:22px}
  .sg-pasos li{font-size:11px}
  .sg-mapa{height:280px}
}
@media (prefers-reduced-motion:reduce){
  .sg-punto::after,.sg-pulso::before{animation:none;display:none}
}

/* --- Monografía: PDF leído dentro de la web (/monografia.html) ----------- */
.mono{max-width:1080px;margin:0 auto;padding:56px 24px 90px}
.mono__barra{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-bottom:18px;
}
.mono__aviso{margin:0;font-size:14px;color:var(--ink-2)}
.mono__acciones{display:flex;gap:10px;flex-wrap:wrap}
.mono__acciones .btn{margin-top:0}
.btn--sec{background:#fff;color:var(--pink);border:1px solid var(--pink)}
.mono__visor{
  border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;
  background:#f6f5f7;min-height:70vh;
}
.mono__visor iframe{display:block;width:100%;height:78vh;border:0}
.mono__vacio{margin:0;padding:44px 24px;text-align:center;color:var(--ink-2)}
.mono__rel{margin-top:38px}
.mono__rel[hidden]{display:none}
.mono__rel h2{
  font:700 13px/1 "Bariol",system-ui,sans-serif;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 14px;
}
.mono__prods{list-style:none;margin:0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.mono__prods li{
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;
}
.mono__prods a{color:var(--ink);text-decoration:none;font-weight:600}
.mono__prods a:hover{color:var(--pink)}
.mono__prods span{display:block;font-size:12px;color:var(--ink-2);margin-top:2px}
@media (max-width:720px){
  .mono{padding:40px 16px 70px}
  .mono__visor{min-height:0}
}

/* --- Páginas legales (privacidad y aviso legal, cookies) · 23/9/2026 -- */
.legal .wrap{max-width:820px}
.legal h2{font:700 22px/1.3 "Bariol",system-ui,sans-serif;color:var(--pink);margin:38px 0 10px}
.legal h3{font:700 17px/1.35 "Bariol",system-ui,sans-serif;margin:24px 0 8px}
.legal p,.legal li{font-size:15.5px;line-height:1.65;color:var(--ink)}
.legal a{color:var(--pink)}
.legal__tabla{overflow-x:auto;margin:14px 0}
.legal table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:560px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.legal th{font-weight:700;background:var(--paper-2)}
.legal td small{color:var(--ink-2)}

/* --- Consentimiento de cookies (js/cookies.js) · 23/9/2026 --------------- */
.ck{position:fixed;left:16px;bottom:16px;z-index:200;max-width:560px;width:calc(100% - 32px);
  background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:18px;
  box-shadow:0 18px 50px rgba(0,0,0,.18);padding:20px 22px;font:400 14.5px/1.55 "Bariol",system-ui,sans-serif}
.ck[hidden]{display:none}
.ck__tx{margin:0 0 14px}
.ck__tx b{color:var(--pink)}
.ck__tx a{color:var(--pink)}
.ck__opts{display:grid;gap:10px;margin:0 0 16px}
.ck__opts[hidden]{display:none}
.ck__op{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:12px;cursor:pointer}
.ck__op input{margin-top:3px;accent-color:var(--pink);width:16px;height:16px;flex:none}
.ck__op span{font-size:13.5px;color:var(--ink-2)}
.ck__op b{display:block;color:var(--ink);font-size:14.5px}
.ck__btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
/* Aceptar y Rechazar, con el mismo peso (criterio AEPD) */
.ck__b{font:700 14px/1 "Bariol",system-ui,sans-serif;padding:12px 20px;border-radius:999px;cursor:pointer;
  border:1.5px solid var(--pink);background:var(--pink);color:#fff}
.ck__b:hover{filter:brightness(.95)}
.ck__b--link{background:#fff;color:var(--pink)}
.ck__b[hidden]{display:none}
@media (max-width:640px){.ck{left:10px;bottom:10px;width:calc(100% - 20px);padding:16px}.ck__b{flex:1}}
.mapa__frame[hidden]{display:none}
.ck-hueco{position:absolute;inset:0;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;
  gap:12px;padding:24px 48px;text-align:right;color:var(--ink-2)}
.ck-hueco[hidden]{display:none}
.ck-hueco p{margin:0;max-width:34ch}
@media (max-width:760px){.ck-hueco{position:static;align-items:flex-start;text-align:left;padding:18px;
  border:1px solid var(--line);border-radius:var(--r-card)}}
.sec-grid a:hover .sec-ico{background:rgba(255,255,255,.22)}

/* =========================================================================
   LÍNEAS DE MARCA (24/9/2026) — los dos recursos de línea de la papelería
   y las monografías de FQS, llevados a la web. Siempre en trazo fino y
   geométrico (plano técnico, fórmula química), nunca orgánico ni decorativo:
     · rombos: la cenefa de la etiqueta del tarro de las monografías técnicas
     · molécula / trama hexagonal: la trama de las fichas divulgativas y la
       estructura en esqueleto de una molécula
   Dónde van: portada de las tarjetas de monografía, esquina de las cabeceras
   de página (.phero) y borde superior del pie. En ningún sitio más, para
   que sigan siendo un sello y no un papel pintado.
   Los SVG llevan el color escrito (#FF3A82 = --pink, o blanco): un data URI
   no puede leer variables CSS.
   ========================================================================= */
:root{
  --linea-rombos:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M0 14L14 1L28 14L14 27Z' fill='none' stroke='%23FF3A82' stroke-width='1.2'/%3E%3C/svg%3E");
  --linea-hex-blanca:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104' viewBox='0 0 60 104'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1'%3E%3Cpath d='M30 0L60 17V52L30 69L0 52V17Z'/%3E%3Cpath d='M30 69V104'/%3E%3C/g%3E%3C/svg%3E");
  --linea-molecula:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 110'%3E%3Cg fill='none' stroke='%23FF3A82' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M50 38L69 49V71L50 82L31 71V49Z'/%3E%3Cpath d='M69 49L88 38L107 49V71L88 82L69 71'/%3E%3Cpath d='M36 52V68M50 44.5L63 52M50 75.5L63 68'/%3E%3Cpath d='M107 49L126 38L145 49M126 38V20M50 38V20M54 38V21'/%3E%3C/g%3E%3Cg fill='%23FF3A82'%3E%3Ccircle cx='145' cy='49' r='3.2'/%3E%3Ccircle cx='126' cy='20' r='3.2'/%3E%3Ccircle cx='52' cy='18' r='3.2'/%3E%3C/g%3E%3C/svg%3E");
}

/* --- tarjeta de monografía: portada propia en vez de la miniatura del PDF
   (a 200 px de alto la primera página no se leía). Mismo esquema que la
   portada real de la monografía técnica: rótulo espaciado + regla + nombre
   en mayúsculas, la cenefa de rombos abajo y la molécula arriba a la derecha. */
.cp__img--mono,.hub__grid .cp__img--mono{
  background:#fff;background-image:none;
  display:block;
}
.cp__img--mono::after{display:none}
.cp__img--mono::before{            /* molécula */
  content:"";position:absolute;right:14px;top:34px;width:150px;height:103px;
  background:var(--linea-molecula) center/contain no-repeat;opacity:.55;
  transition:opacity .45s var(--ease),transform .8s var(--ease);
}
.cp:hover .cp__img--mono::before{opacity:.9;transform:rotate(-4deg)}
.mono-cub{
  position:absolute;left:22px;right:22px;bottom:48px;z-index:1;
  display:flex;flex-direction:column;gap:10px;
}
.mono-cub__k{
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2);
}
.mono-cub__k::after{content:"";display:block;width:34px;height:2px;background:var(--pink);margin-top:9px}
.mono-cub__t{
  font-size:21px;line-height:1.12;font-weight:700;text-transform:uppercase;color:var(--ink);
  letter-spacing:.01em;max-width:15ch;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.mono-cub__rombos{                 /* cenefa de la etiqueta */
  position:absolute;left:0;right:0;bottom:0;height:28px;
  background:var(--linea-rombos) left bottom/28px 28px repeat-x;opacity:.5;
  border-top:1px solid rgba(var(--pink-rgb),.25);
}
.cp:hover .mono-cub__rombos{opacity:.8}
.cp__img--mono .chip{background:var(--pink-soft)}

/* --- cabeceras de página: trama hexagonal blanca en la esquina derecha,
   fundida hacia el centro para que nunca pise el titular */
.phero::before{
  content:"";position:absolute;top:0;right:0;bottom:0;z-index:-1;width:min(420px,36vw);pointer-events:none;
  background:var(--linea-hex-blanca) right top/60px 104px repeat;opacity:.22;
  -webkit-mask-image:linear-gradient(270deg,#000 0%,transparent 100%);
  mask-image:linear-gradient(270deg,#000 0%,transparent 100%);
}
.phero{isolation:isolate}

/* --- pie: la cenefa de rombos como borde superior */
.foot{position:relative}
.foot::before{
  content:"";position:absolute;left:0;right:0;top:0;height:14px;pointer-events:none;
  background:var(--linea-rombos) left top/14px 14px repeat-x;opacity:.35;
}
@media (max-width:680px){ .phero::before{width:50vw;opacity:.16} }

/* =========================================================================
   ONDAS SIN TAPAR EL FONDO (24/9/2026)
   Antes, el borde ondulado del hero y de la franja de números se hacía
   pintando una onda BLANCA opaca encima del rosa: tapaba la cuadrícula del
   fondo y dejaba una banda lisa de unos milímetros antes de cada zona rosa
   («parece WordPress», Bori). Ahora la onda RECORTA el rosa con una máscara,
   igual que ya hacía .claim: fuera de la onda no hay nada pintado y la
   cuadrícula sigue sin corte hasta el mismo borde del rosa.
   ========================================================================= */
.hero__wave .w2{display:none}
.hero{
  --onda:clamp(70px,9vw,130px);
  -webkit-mask:
    linear-gradient(#000,#000) top/100% calc(100% - var(--onda) + 1px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,92 C200,54 360,112 560,96 C780,78 900,44 1120,62 C1280,75 1360,104 1440,94 L1440,0 L0,0 Z'/></svg>") bottom/100% var(--onda) no-repeat;
  mask:
    linear-gradient(#000,#000) top/100% calc(100% - var(--onda) + 1px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,92 C200,54 360,112 560,96 C780,78 900,44 1120,62 C1280,75 1360,104 1440,94 L1440,0 L0,0 Z'/></svg>") bottom/100% var(--onda) no-repeat;
}
.stats__wave{display:none}
.stats{
  --onda:clamp(50px,7vw,100px);
  -webkit-mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,64 C180,18 320,96 520,74 C720,52 860,4 1080,30 C1240,49 1340,86 1440,72 L1440,130 L0,130 Z'/></svg>") top/100% var(--onda) no-repeat,
    linear-gradient(#000,#000) center/100% calc(100% - 2 * var(--onda) + 2px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,72 C100,86 200,49 360,30 C580,4 720,52 920,74 C1120,96 1260,18 1440,64 L1440,0 L0,0 Z'/></svg>") bottom/100% var(--onda) no-repeat;
  mask:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,64 C180,18 320,96 520,74 C720,52 860,4 1080,30 C1240,49 1340,86 1440,72 L1440,130 L0,130 Z'/></svg>") top/100% var(--onda) no-repeat,
    linear-gradient(#000,#000) center/100% calc(100% - 2 * var(--onda) + 2px) no-repeat,
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 130' preserveAspectRatio='none'><path d='M0,72 C100,86 200,49 360,30 C580,4 720,52 920,74 C1120,96 1260,18 1440,64 L1440,0 L0,0 Z'/></svg>") bottom/100% var(--onda) no-repeat;
}


/* Conocimiento: tarjeta «Próximamente» de ingrediente/normativa sin foto: portada tipográfica sin molécula (1/10/2026) */
.cp__img--pronto::before{display:none}
.cp__img--pronto{background:linear-gradient(180deg,#fff 0%,var(--pink-soft) 100%)}
.cp__img--pronto .mono-cub{bottom:44px}
.cp__img--pronto .mono-cub__t{font-size:17px;max-width:none;-webkit-line-clamp:5}
/* portada sin foto: más baja que la 4:5 de las fotos, para que no quede una mancha vacía */
.hub__grid .cp__img--pronto,#conocimiento .cp__img--pronto{aspect-ratio:16/10;height:auto}
.cp__img--pronto .mono-cub__t{font-size:19px}

/* Portada sin foto, dos tonos (1/10/2026): ingredientes en rosa, normativa en gris cálido; icono grande + fecha, sin repetir el título */
.hub__grid .cp__img--pronto{display:grid;place-items:center;background-image:none}
.cp__img--pronto::before,.cp__img--pronto::after{display:none}
.cp__img--t-ing{background:linear-gradient(160deg,#ffe2ed 0%,#ffc4d9 100%)!important}
.cp__img--t-norm{background:linear-gradient(160deg,#f6ece9 0%,#e6d8d4 100%)!important}
.hub__grid .cp__img--pronto svg.hub__ico{width:72px;height:72px;stroke-width:1.2;opacity:.9}
.hub__grid .cp__img--t-ing svg.hub__ico{stroke:var(--pink)}
.hub__grid .cp__img--t-norm svg.hub__ico{stroke:#7d605d}
.cp__img--t-norm .chip{color:#7d605d}
.pronto__k{position:absolute;left:18px;bottom:14px;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-2)}
/* icono propio por tema (ChatGPT/Codex, 1/10/2026) en las portadas sin foto */
.cp__icono{width:104px;height:104px;object-fit:contain;position:relative;z-index:1}

/* === Opción 1 (1/10/2026): portada tipográfica de marca para las tarjetas de Conocimiento (sin foto ni icono) === */
.hub__grid .cp__img--pronto,#conocimiento .cp__img--pronto{display:block;aspect-ratio:4/3;height:auto;position:relative;background-image:none}
.cp__img--pronto::before{display:block;content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;
  background:var(--linea-hex-blanca) right -22px top -26px/86px 149px repeat;
  -webkit-mask-image:linear-gradient(200deg,#000 0%,transparent 62%);mask-image:linear-gradient(200deg,#000 0%,transparent 62%)}
.cp__img--pronto::after{display:none}
.cp__img--pronto .chip{background:#fff}
.pcov{position:absolute;left:22px;right:22px;bottom:46px;z-index:1;display:flex;flex-direction:column;gap:10px}
.pcov__k{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.pcov__k::after{content:"";display:block;width:34px;height:2px;background:var(--pink);margin-top:9px}
.pcov__t{font-size:19px;line-height:1.14;font-weight:700;text-transform:uppercase;color:var(--ink);letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.pcov__rombos{position:absolute;left:0;right:0;bottom:0;height:28px;z-index:1;
  background:var(--linea-rombos) left bottom/28px 28px repeat-x;opacity:.5;border-top:1px solid rgba(var(--pink-rgb),.25)}
.cp:hover .pcov__rombos{opacity:.8}
/* el título ya va en la portada: el h3 se queda para lectores de pantalla y buscadores, sin repetirlo a la vista */
.cp__bd--pc h3{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* la portada tipográfica también vale fuera del hub (tira de Conocimiento de la home) */
.cp__img--pronto{display:block;aspect-ratio:4/3;height:auto;position:relative;background-image:none}

/* menú «Lo último» sin fotos (1/10/2026): franja de marca (trama + cenefa de rombos) en el tono de la categoría */
.mega__img--t-ing,.mega__img--t-norm{
  background-repeat:repeat-x,repeat,no-repeat;background-size:28px 28px,60px 104px,cover;background-position:left bottom,right -14px top -16px,center;
  background-image:var(--linea-rombos),var(--linea-hex-blanca),linear-gradient(160deg,#ffe2ed 0%,#ffc4d9 100%);
  aspect-ratio:16/7;
}
.mega__img--t-norm{background-image:var(--linea-rombos),var(--linea-hex-blanca),linear-gradient(160deg,#f6ece9 0%,#e6d8d4 100%)}

/* «Lo último» de la cabecera (1/10/2026): misma portada tipográfica que las tarjetas de Conocimiento (.pcov), más compacta; rota cada día */
.mega__card .cp__img--pronto{aspect-ratio:16/10;border-radius:12px;margin-bottom:10px;transform:none}
.mega__card:hover .cp__img--pronto{transform:none}
.mega__card .pcov{left:16px;right:16px;bottom:36px;gap:8px}
.mega__card .pcov__t{font-size:14px;-webkit-line-clamp:3}
.mega__card .pcov__rombos{height:22px;background-size:22px 22px}
.mega__card .mega__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mega__card small{margin-bottom:0}

/* Tarjetas de Conocimiento (1/10/2026, 3.er intento): solo una sombra suave y difusa detrás de cada una, sin borde ni fondo de sección.
   La máscara de .cp (apaño de Safari) recortaba la sombra: se quita y la portada lleva sus propias esquinas. */
.cp{
  -webkit-mask-image:none;mask-image:none;
  background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;
  box-shadow:0 1px 2px rgba(60,30,45,.05),0 8px 22px rgba(60,30,45,.08),0 22px 44px rgba(190,80,120,.08);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),opacity .6s var(--ease);
}
.cp:hover{box-shadow:0 2px 4px rgba(60,30,45,.06),0 14px 32px rgba(60,30,45,.12),0 32px 64px rgba(190,80,120,.14)}
.cp > .cp__img{border-radius:var(--r-card) var(--r-card) 0 0}
.mega__card .cp__img--pronto{box-shadow:0 2px 4px rgba(60,30,45,.06),0 10px 22px rgba(60,30,45,.12)}
.mega__card:hover .cp__img--pronto{box-shadow:0 3px 6px rgba(60,30,45,.08),0 16px 30px rgba(60,30,45,.18)}

/* Profundidad (1/10/2026): sombras en capas (contacto + ambiente + tinte de marca) en las piezas que se veían planas.
   Siempre suaves; el hover las acentúa. */
.cs{border-radius:var(--r-card);box-shadow:0 2px 4px rgba(60,30,45,.06),0 12px 26px rgba(60,30,45,.10),0 26px 50px rgba(190,80,120,.10)}
.cs:hover{box-shadow:0 3px 6px rgba(60,30,45,.08),0 18px 36px rgba(60,30,45,.14),0 34px 64px rgba(190,80,120,.16)}
.porque-pieza{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(60,30,45,.05),0 10px 24px rgba(60,30,45,.07),0 24px 48px rgba(190,80,120,.07)}
.porque-pieza:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 4px rgba(60,30,45,.06),0 16px 34px rgba(60,30,45,.11),0 32px 60px rgba(190,80,120,.12)}

/* Las sombras de las tarjetas se recortaban en recta contra los bordes del carril (overflow-x:auto recorta también en vertical),
   y eso hacía que las esquinas parecieran cuadradas (1/10/2026). El carril gana margen interior para que quepan y se compensa
   con margen negativo: el reparto de las tarjetas no cambia. */
.carr__track{padding:34px 32px 64px;margin:-24px -28px -38px;scroll-padding-inline:32px}
.cp{isolation:isolate}

/* Profundidad en TODAS las tarjetas de la web (Bori, 2/10/2026): la misma sombra suave en tres capas (contacto + ambiente + tinte rosa).
   Se define una vez y se aplica a cada pieza con forma de tarjeta; las que ya tenían sombra propia (.cp, .cs, .porque-pieza)
   conservan la suya, que es esta misma familia. Sin bordes duros ni fondos de color añadidos. */
:root{
  --sombra-tarjeta:0 1px 2px rgba(60,30,45,.05),0 8px 22px rgba(60,30,45,.08),0 22px 44px rgba(190,80,120,.08);
  --sombra-tarjeta-hover:0 2px 4px rgba(60,30,45,.06),0 14px 32px rgba(60,30,45,.12),0 32px 64px rgba(190,80,120,.14);
}
.trio__it,.tl-ph-box,.tl-item.feat,.filtros,.wip__box,.fcard,.mapa,.mapa__card,.ac-card,.ac-intro__card,.art__cta,.mega__trio a{
  box-shadow:var(--sombra-tarjeta);
}
.ac-intro__card:hover,.mega__trio a:hover,.trio__it:hover{box-shadow:var(--sombra-tarjeta-hover)}
.trio__it{transition:box-shadow .3s var(--ease),transform .3s var(--ease)}

/* Safari (2/10/2026): sin la máscara de .cp las esquinas de las tarjetas (destacadas, Conocimiento) salían cuadradas, porque la
   portada, con transform en hover y mezcla de capas, se salía del recorte del contenedor. La máscara va ahora en la propia portada
   (así no recorta la sombra de la tarjeta) y la capa de brillo hereda el radio. */
.cp > .cp__img{
  border-radius:var(--r-card) var(--r-card) 0 0;
  -webkit-mask-image:-webkit-radial-gradient(circle,#fff 100%,#fff 100%);
  mask-image:radial-gradient(circle,#fff 100%,#fff 100%);
}
.cp::after{border-radius:var(--r-card)}
.cp--mp{border-radius:var(--r-card)}
.sec-grid a{box-shadow:var(--sombra-tarjeta)}
.sec-grid a:hover{box-shadow:var(--sombra-tarjeta-hover)}

/* Etiqueta «Nuevo» (artículos publicados hace ≤14 días; js/conocimiento-inicio.js, js/main.js) */
.nuevo{
  display:inline-block;background:var(--pink);color:#fff;border-radius:999px;
  padding:3px 10px;font-size:10px;font-style:normal;font-weight:600;letter-spacing:.11em;text-transform:uppercase;line-height:1.4;
}
.cp .nuevo{position:absolute;right:16px;top:16px;z-index:3}
.mega__card small .nuevo{margin-right:6px;vertical-align:1px}
/* «Nuevo» más visible: más grande, aro blanco y sombra; el punto parpadea suave */
.nuevo{padding:6px 14px 6px 12px;font-size:12px;letter-spacing:.12em;box-shadow:0 0 0 3px #fff,0 6px 16px rgba(255,58,130,.45)}
.nuevo::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#fff;animation:nuevo-p 1.8s ease-in-out infinite}
@keyframes nuevo-p{0%,100%{opacity:1}50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.nuevo::before{animation:none}}
.cp .nuevo{right:18px;top:18px}

/* Aviso «Novedades» (js/main.js): campana en la cabecera que despliega lo publicado en los últimos 14 días.
   Con el desplegable ya abierto (o visto) el contador deja de llamar la atención. */
.nov{position:relative}
.nov__btn{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--pink);border:0;border-radius:999px;padding:9px 14px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;white-space:nowrap}
.nov__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nov__btn em{font-style:normal;background:var(--pink);color:#fff;border-radius:999px;min-width:19px;height:19px;line-height:19px;text-align:center;font-size:11px}
.nov:not(.is-visto) .nov__btn svg{animation:nov-r 2.4s ease-in-out infinite;transform-origin:50% 10%}
.nov.is-visto .nov__btn em{background:var(--ink-2)}
@keyframes nov-r{0%,70%,100%{transform:none}75%{transform:rotate(14deg)}80%{transform:rotate(-12deg)}85%{transform:rotate(8deg)}90%{transform:rotate(-5deg)}}
.nov__panel{position:absolute;right:0;top:calc(100% + 12px);width:320px;background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:18px;box-shadow:0 18px 50px rgba(0,0,0,.2);padding:16px 18px;z-index:300;text-align:left;font-size:14px;line-height:1.4}
.nov__panel[hidden]{display:none}
.nov__h{display:block;color:var(--pink);margin-bottom:8px}
.nov__panel ul{list-style:none;margin:0 0 10px;padding:0}
.nov__panel li a{display:block;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none}
.nov__panel li a:hover span{color:var(--pink)}
.nov__panel small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2)}
.nov__all{color:var(--pink);font-weight:600;text-decoration:none}
@media (max-width:640px){.nov__tx{display:none}.nov__btn{padding:9px 11px}.nov__panel{position:fixed;left:16px;right:16px;top:70px;width:auto}}
@media (prefers-reduced-motion:reduce){.nov:not(.is-visto) .nov__btn svg{animation:none}}

/* Llamada de atención al entrar (js/main.js): ondas en el botón y globo que lo señala */
.nov.is-llama .nov__btn{position:relative;animation:nov-pop .7s .9s cubic-bezier(.34,1.56,.64,1) both}
.nov.is-llama .nov__btn::after,.nov.is-llama .nov__btn::before{content:"";position:absolute;inset:0;border-radius:999px;background:rgba(255,255,255,.6);border:3px solid #fff;pointer-events:none;opacity:0;z-index:-1;animation:nov-onda 1.8s 1.2s ease-out 4}
.nov.is-llama .nov__btn::before{animation-delay:1.7s}
@keyframes nov-pop{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes nov-onda{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2.1,2.4)}}
.nov__globo{position:absolute;right:0;top:calc(100% + 12px);white-space:nowrap;background:#1f1f2b;color:#fff;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:600;
  box-shadow:0 10px 28px rgba(0,0,0,.25);opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none;z-index:299}
.nov__globo::before{content:"";position:absolute;right:26px;top:-5px;width:10px;height:10px;background:inherit;transform:rotate(45deg)}
.nov__globo.is-on{opacity:1;transform:none}
.nov__globo.is-off{opacity:0;transform:translateY(-6px)}
.nov__panel:not([hidden])~.nov__globo{display:none}
@media (max-width:640px){.nov__globo{right:-40px}.nov__globo::before{right:66px}}

/* Buscador: se ensancha un poco al pasar el ratón (sin tocar el foco, que ya lo ensancha más; en móvil sigue siendo la lupa) */
@media (min-width:481px){
  .search input:hover:not(:focus){width:228px}
  .hdr.is-stuck .search input:hover:not(:focus){width:296px}
}
@media (min-width:1101px){
  .search.has-kbd input:hover:not(:focus){width:276px}
  .hdr.is-stuck .search.has-kbd input:hover:not(:focus){width:326px}
  .search.has-kbd.is-destacado input:hover:not(:focus){width:386px}
}

/* Campana de Novedades: suena con más ganas (cada 3 s mientras no se haya abierto), se mueve al pasar el ratón y el botón respira */
.nov__btn svg{transform-origin:50% 12%}
.nov:not(.is-visto) .nov__btn svg{animation:nov-r 3s ease-in-out infinite}
.nov:not(.is-visto) .nov__btn{animation:nov-lat 3s ease-in-out infinite}
.nov.is-llama .nov__btn{animation:nov-pop .7s .9s cubic-bezier(.34,1.56,.64,1) both,nov-lat 3s 1.6s ease-in-out infinite}
.nov__btn:hover svg{animation:nov-r .9s ease-in-out 1}
@keyframes nov-r{0%,55%,100%{transform:none}
  60%{transform:rotate(24deg)}66%{transform:rotate(-22deg)}72%{transform:rotate(18deg)}78%{transform:rotate(-14deg)}84%{transform:rotate(9deg)}90%{transform:rotate(-5deg)}}
@keyframes nov-lat{0%,55%,100%{transform:scale(1)}65%{transform:scale(1.07)}75%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.nov:not(.is-visto) .nov__btn,.nov:not(.is-visto) .nov__btn svg,.nov__btn:hover svg{animation:none}}

/* Botones de la cabecera: al pasar el ratón suben 2 px con sombra, como «Acceso clientes».
   Usan `translate` (no `transform`) para no pisar las animaciones del botón de Novedades. */
.nov__btn,.search input,.lang a,.burger{transition:translate .3s var(--ease),box-shadow .3s var(--ease),width .4s var(--ease)}
.nov__btn:hover,.search input:hover{translate:0 -2px;box-shadow:0 6px 16px rgba(0,0,0,.16)}
.burger:hover{translate:0 -2px}
.lang a:hover{translate:0 -2px}

/* Esquinas de las tarjetas a prueba de Safari (2/10/2026, 3.ª vez): además de border-radius + máscara, la portada se recorta con clip-path
   redondeado (Safari lo respeta aunque haya transform/mezcla de capas) . No recorta la sombra de la tarjeta. */
.cp > .cp__img{clip-path:inset(0 round var(--r-card) var(--r-card) 0 0)}

/* Campana de Novedades (2/10/2026): la campana suena SIEMPRE en bucle, sin tener que pasar el ratón; el círculo del número va en rosa
   mientras haya novedades sin ver y se apaga a gris cuando ya se han visto (el latido del botón sigue solo con novedades sin ver). */
.nov .nov__btn svg{animation:nov-r 3s ease-in-out infinite}
.nov.is-visto .nov__btn em{background:#a39da5;color:#fff}
@media (prefers-reduced-motion:reduce){.nov .nov__btn svg{animation:none}}

/* =========================================================================
   Tarjetas vivas + scroll-telling de Servicios (6/10/2026, Bori)
   - Las tarjetas de Empresa y Servicios tienen sombra en reposo y responden al
     ratón (js/fx/tarjetas-cursor.js: inclinación, sombra contraria, luz que
     sigue al cursor con --mx/--my).
   - En las listas con scroll-telling el icono pequeño sobra: el grande de la
     derecha ya lo enseña (no repetir icono). En su lugar, un número.
   ========================================================================= */
.trio__it,.sec-grid a{
  box-shadow:0 1px 2px rgba(60,59,62,.06),0 10px 26px rgba(190,80,120,.10);
  border:1px solid rgba(255,58,130,.10);
}
.sc-tile{box-shadow:0 2px 4px rgba(60,59,62,.08),0 24px 56px rgba(200,31,95,.28)}
.tl-step__card{box-shadow:0 1px 2px rgba(60,59,62,.06),0 18px 42px rgba(60,59,62,.08)}
/* luz que sigue al cursor sobre el fondo de la tarjeta */
.sec-grid a.is-cursor{background-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 70%)}
.sec-grid a.is-cursor:hover{background-image:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.28),transparent 70%)}
.tl-step__card.is-cursor{background-image:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,58,130,.08),transparent 70%)}
.tl-step.feat .tl-step__card.is-cursor{background-image:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.14),transparent 70%)}
.sc-tile.is-cursor img{translate:calc(var(--tx,0) * -10px) calc(var(--ty,0) * -10px)}
.sc-tile img{transition:translate .3s var(--ease)}

/* lista fija: sin icono pequeño, con número */
.trio.pin-lista .trio__it .ico{display:none}
.trio.pin-lista{counter-reset:pn}
.trio.pin-lista .trio__it{counter-increment:pn;grid-template-columns:auto 1fr}
.trio.pin-lista .trio__it::before{
  content:"0" counter(pn);grid-row:1/3;align-self:center;
  font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--pink);min-width:40px
}
.trio.pin-lista .trio__it.on::before{color:var(--pink-dk)}

/* «Cómo trabajamos» fijo: cada paso es una tarjeta */
.pasos.pin-lista{grid-template-columns:1fr;gap:12px;margin-top:0}
.pasos.pin-lista li{
  background:#fff;border:1px solid var(--line);border-top:1px solid var(--line);border-radius:var(--r-card);
  padding:16px 22px;opacity:.32;transform:scale(.98);
  display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start;
  box-shadow:0 1px 2px rgba(60,59,62,.06),0 10px 26px rgba(190,80,120,.08);
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .5s;
}
.pasos.pin-lista li.on{opacity:1;transform:none;box-shadow:0 18px 42px rgba(255,58,130,.18);border-color:rgba(255,58,130,.35)}
.pasos.pin-lista .pasos__n{grid-row:1/3;margin:2px 0 0;font-size:20px;color:var(--pink)}
.pasos.pin-lista h3{font-size:17px;margin:0 0 3px;font-weight:700}
.pasos.pin-lista p{grid-column:2;font-size:13.5px;line-height:1.5}
.pasos.pin-lista li.pasos__fuerte{border-color:rgba(255,58,130,.35)}
/* pieza grande: número y nombre del paso */
.pin__num{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:#fff;text-align:center;padding:24px}
.pin__num b{font-size:clamp(84px,11vw,150px);line-height:1;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.pin__num span{font-size:20px;font-weight:700;letter-spacing:.04em}
/* la sombra viva (que se aleja del cursor) gana a la de reposo */
.trio__it.is-cursor,.sec-grid a.is-cursor,.sc-tile.is-cursor,.tl-step__card.is-cursor,.pasos.pin-lista li.is-cursor{
  box-shadow:calc(var(--tx,0) * -16px) calc(26px + var(--ty,0) * -12px) 56px rgba(190,80,120,.20);
}

/* Tarjetas del recorrido fijo (Empresa E2, Servicios): también viven con el ratón.
   Al pasar el cursor se encienden aunque no sean el paso activo, siguen al
   puntero sin el retraso de 0,5 s y la sombra se aparta de él. */
.pin-lista .trio__it.is-cursor,
.pasos.pin-lista li.is-cursor{
  opacity:1;
  transition:transform .12s linear,box-shadow .2s linear,opacity .25s;
  box-shadow:calc(var(--tx,0) * -18px) calc(24px + var(--ty,0) * -12px) 52px rgba(255,58,130,.24);
}

/* Pieza grande del recorrido fijo (icono / número): con sombra, y responde al ratón.
   Solo la activa recibe el puntero (las otras están apiladas debajo, invisibles). */
.pin__ic{box-shadow:0 2px 4px rgba(60,59,62,.08),0 26px 56px rgba(200,31,95,.30);pointer-events:none}
.pin__ic.on{pointer-events:auto}
.pin__ic.is-cursor{
  transition:transform .12s linear,box-shadow .2s linear,opacity .5s var(--ease);
  box-shadow:calc(var(--tx,0) * -22px) calc(30px + var(--ty,0) * -14px) 60px rgba(200,31,95,.36);
}
.pin__ic>img,.pin__num{transition:translate .3s var(--ease)}
.pin__ic.is-cursor>img{translate:calc(var(--tx,0) * -14px) calc(var(--ty,0) * -14px)}
.pin__ic.is-cursor .pin__num{translate:calc(var(--tx,0) * -12px) calc(var(--ty,0) * -12px)}

/* elementos de la lista fija: se pueden pulsar para saltar a su paso */
.pin-lista .trio__it,.pasos.pin-lista li{cursor:pointer}
.pin-lista .trio__it:focus-visible,.pasos.pin-lista li:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* =========================================================================
   Servicios · «Cómo trabajamos» como CAMINO de lado a lado (6/10/2026, Bori)
   Solo existe cuando servicios.js lo monta (escritorio, sin movimiento reducido).
   ========================================================================= */
.camino{position:relative}
.camino__in{position:sticky;top:72px;overflow:hidden;margin-inline:calc(50% - 50vw)}
.pasos.camino__track{display:block;position:relative;margin:0;padding:0;gap:0;grid-template-columns:none;will-change:translate}
.camino__svg{position:absolute;left:0;top:0;overflow:visible}
.camino__base{fill:none;stroke:#e3dde0;stroke-width:4;stroke-linecap:round;stroke-dasharray:2 10}
.camino__prog{fill:none;stroke:var(--pink);stroke-width:5;stroke-linecap:round}
.camino__nodo{fill:#fff;stroke:#d8d3d6;stroke-width:3;transition:fill .4s,stroke .4s}
.camino__nodo.on{fill:var(--pink);stroke:var(--pink)}
.camino__dot{fill:var(--pink-dk);stroke:#fff;stroke-width:4;filter:drop-shadow(0 4px 8px rgba(200,31,95,.45))}
.pasos.camino__track li{
  position:absolute;width:300px;box-sizing:border-box;cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:18px 22px;
  display:block;
  opacity:.3;scale:.94;
  box-shadow:0 1px 2px rgba(60,59,62,.06),0 12px 28px rgba(190,80,120,.10);
  transition:opacity .5s var(--ease),scale .5s var(--ease),box-shadow .5s,border-color .5s;
}
.pasos.camino__track li.on{opacity:.75;scale:.97}
.pasos.camino__track li.actual{opacity:1;scale:1;border-color:rgba(255,58,130,.45);box-shadow:0 20px 44px rgba(255,58,130,.22)}
.pasos.camino__track li.camino__arriba{bottom:calc(50% + 46px)}
.pasos.camino__track li.camino__abajo{top:calc(50% + 46px)}
.pasos.camino__track li.is-cursor{opacity:1}
.pasos.camino__track .pasos__n{font-size:34px;font-weight:700;color:var(--pink);margin:0 0 6px;line-height:1}
.pasos.camino__track h3{font-size:19px;font-weight:700;margin:0 0 6px}
.pasos.camino__track p{font-size:14px;line-height:1.5}
.camino__n{position:absolute;right:max(24px,calc(50vw - 600px));bottom:6px;font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--pink-dk);font-variant-numeric:tabular-nums}
.camino__track li:focus-visible{outline:2px solid var(--pink);outline-offset:3px}

/* =========================================================================
   Empresa E2 · recorrido del pedido con RUTA (6/10/2026, Bori)
   Anillos que giran con el scroll, piezas que salen hacia arriba al pasar
   y una ruta Procedencia → Málaga → Tu empresa que se rellena con --p.
   ========================================================================= */
.pin__art::before,.pin__art::after{
  content:"";position:absolute;left:50%;top:46%;border-radius:50%;pointer-events:none;
  border:2px dashed rgba(255,58,130,.28);translate:-50% -50%;
}
.pin__art::before{width:min(118%,440px);aspect-ratio:1;rotate:calc(var(--p,0) * 200deg)}
.pin__art::after{width:min(138%,520px);aspect-ratio:1;border-color:rgba(255,58,130,.16);rotate:calc(var(--p,0) * -140deg)}
.pin__ic{z-index:1}
.pin__ic.pasada{opacity:0;transform:translateY(-46px) scale(.88) rotate(4deg)}
.pin__ruta{position:absolute;left:4%;right:4%;bottom:34px;height:44px;z-index:2}
.pin__ruta::before,.pin__ruta-f{content:"";position:absolute;left:0;right:0;top:9px;height:4px;border-radius:2px;background:#eadfe4}
.pin__ruta-f{right:auto;width:calc(var(--p,0) * 100%);background:var(--pink);transition:none}
.pin__ruta-n{position:absolute;top:0;font-size:12px;font-weight:700;letter-spacing:.04em;color:#a99aa1;white-space:nowrap;transition:color .4s}
.pin__ruta-n b{display:block;width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #d8cdd2;margin:0 0 6px;box-sizing:border-box;transition:background .4s,border-color .4s,transform .4s}
.pin__ruta-n:nth-of-type(1){left:0}
.pin__ruta-n:nth-of-type(2){left:50%;translate:-50% 0;text-align:center}
.pin__ruta-n:nth-of-type(2) b{margin-inline:auto}
.pin__ruta-n:nth-of-type(3){right:0;text-align:right}
.pin__ruta-n:nth-of-type(3) b{margin-left:auto}
.pin__ruta-n.on{color:var(--pink-dk)}
.pin__ruta-n.on b{background:var(--pink);border-color:var(--pink);transform:scale(1.15)}
.pin__art{max-height:540px}

/* Home · «¿Por qué FQS?»: ruta que une las cuatro razones (6/10/2026)
   Se rellena con el mismo avance del scroll que revela las piezas (main.js, bloque 5). */
.porque-ruta{display:none;position:relative;height:22px;margin-top:38px}
.porque-ruta::before,.porque-ruta__f{content:"";position:absolute;left:12.5%;right:12.5%;top:9px;height:4px;border-radius:2px;background:#eadfe4}
.porque-ruta__f{right:auto;width:calc(var(--p,0) * 75%);background:var(--pink)}
.porque-ruta__n{position:absolute;top:0;width:22px;height:22px;border-radius:50%;box-sizing:border-box;background:#fff;border:3px solid #d8cdd2;translate:-50% 0;transition:background .4s,border-color .4s,transform .4s}
.porque-ruta__n:nth-of-type(1){left:12.5%}
.porque-ruta__n:nth-of-type(2){left:37.5%}
.porque-ruta__n:nth-of-type(3){left:62.5%}
.porque-ruta__n:nth-of-type(4){left:87.5%}
.porque-ruta__n.on{background:var(--pink);border-color:var(--pink);transform:scale(1.15)}
.porque-ruta + .porque-mosaico{margin-top:14px}
@media (min-width:901px){.porque-ruta{display:block}}
@media (prefers-reduced-motion:reduce){.porque-ruta__f{width:75%}}

/* =========================================================================
   Recorridos a prueba (6/10/2026) — js/fx/recorridos-prueba.js
   ========================================================================= */
.cam-ct{padding-bottom:0}
.cam-ct .sec__h{text-align:center}
.cam-ct__l{list-style:none;margin:var(--block-gap) auto 0;padding:0;max-width:980px;position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;--p:0}
.cam-ct__l::before,.cam-ct__f{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:15px;height:4px;border-radius:2px;background:#eadfe4}
.cam-ct__f{right:auto;width:calc(var(--p,0) * (100% / 3 * 2));background:var(--pink);z-index:1}
.cam-ct__l li{position:relative;z-index:2;text-align:center;padding:0 6px;opacity:.35;transition:opacity .5s var(--ease)}
.cam-ct__l li.on{opacity:1}
.cam-ct__n{display:grid;place-items:center;width:34px;height:34px;margin:0 auto 16px;border-radius:50%;background:#fff;border:3px solid #d8cdd2;font-size:12px;font-weight:700;color:#a99aa1;transition:background .4s,border-color .4s,color .4s,transform .4s}
.cam-ct__l li.on .cam-ct__n{background:var(--pink);border-color:var(--pink);color:#fff;transform:scale(1.12)}
.cam-ct__l h3{font-size:17px;margin:0 0 6px}
.cam-ct__l p{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
@media (max-width:860px){
  .cam-ct__l{grid-template-columns:1fr;gap:22px}
  .cam-ct__l::before,.cam-ct__f{display:none}
  .cam-ct__l li{opacity:1}
}
.proy__in{position:relative;z-index:2}
/* Furgoneta quieta junto a su texto, en todos los anchos (Bori 7/10/2026: sin recorrido) */
.proy__ico--parada{min-height:56px;background:url(/img/por-que-fqs/iconos-ilustrados/reparto-cta-furgoneta.svg) center/60px no-repeat}

/* =========================================================================
   Trayectoria (Empresa): el año «rueda» cifra a cifra y las tarjetas entran
   desde la derecha (6/10/2026)
   ========================================================================= */
.tl-bigyear i{display:inline-block;font-style:normal;transform:translateY(.8em);opacity:0;transition:transform .7s var(--ease) calc(var(--k,0) * 70ms),opacity .45s calc(var(--k,0) * 70ms)}
.tl-sl.on .tl-bigyear i{transform:none;opacity:1}
.tl-step__card{translate:56px 0;transition:opacity .5s var(--ease),transform .5s var(--ease),translate .7s var(--ease)}
.tl-step.on .tl-step__card{translate:0 0}
@media (max-width:860px){.tl-step__card,.tl-step.on .tl-step__card{translate:0 0}}
@media (prefers-reduced-motion:reduce){.tl-bigyear i{transition:none;transform:none;opacity:1}.tl-step__card{translate:0 0}}

/* Destacadas de la home: etiqueta de por qué está (más pedida / de temporada) y botón de cotizar (Bori 7/10/2026: tienen que vender) */
.cp__badge{position:absolute;right:16px;top:16px;z-index:3;background:var(--pink);color:#fff;border-radius:999px;padding:5px 14px;font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;box-shadow:0 4px 12px rgba(190,40,100,.35)}
.cp__badge--temp{background:#1d1a1c}
#destacadas .cp__ft{gap:10px;flex-wrap:wrap}
#destacadas .cp__cta{background:var(--pink);color:#fff;border-radius:999px;padding:9px 16px;font-weight:600;font-size:12px;transition:background .3s,transform .3s}
#destacadas .cp__cta:hover{background:#c81f5f;transform:translateY(-1px)}
#destacadas .cp__cta svg{stroke:#fff}

/* Aviso «Destacadas» (js/main.js): reutiliza .nov; solo cambia que es un enlace y el pulso de la sección al llegar */
.dest-av .nov__btn{text-decoration:none}
.dest-av:not(.is-visto) .nov__btn svg{fill:var(--pink);fill-opacity:.18}
.dest-av .nov__globo{right:auto;left:0}
.dest-av .nov__globo::before{right:auto;left:26px}
.dest-av.is-llama .nov__btn{animation-delay:7.2s}
.dest-av.is-llama .nov__btn::after,.dest-av.is-llama .nov__btn::before{animation-delay:7.5s}
.dest-av.is-llama .nov__btn::before{animation-delay:8s}
#destacadas.dest-pulso .carr{animation:dest-pulso 2.2s ease-out 1}
@keyframes dest-pulso{0%{box-shadow:0 0 0 0 rgba(255,58,130,.0)}20%{box-shadow:0 0 0 6px rgba(255,58,130,.35)}100%{box-shadow:0 0 0 22px rgba(255,58,130,0)}}
@media (max-width:640px){.dest-av .nov__globo{left:-40px}.dest-av .nov__globo::before{left:66px}}
@media (prefers-reduced-motion:reduce){#destacadas.dest-pulso .carr{animation:none}}
/* La estrella gira sobre su centro (no sobre la punta, que es el eje de la campana) */
.dest-av .nov__btn svg,.dest-av:not(.is-visto) .nov__btn svg{transform-origin:50% 50%;transform-box:fill-box}

/* =========================================================================
   MEJORAS DE DISEÑO · análisis de jerarquía visual (16/10/2026)
   ========================================================================= */
/* 1. Barra de revisión y huecos de imagen: ocultos salvo con ?revision */
.devbar{display:none}
body.revision .devbar{display:flex}

/* 2. Cabecera más ligera: «Acceso clientes» en una línea, menú legible, objetivos táctiles */
.hdr__in{padding:12px 28px}
.hdr.is-stuck .hdr__in{padding:8px 28px}
.nav a{font-size:15px;font-weight:600;letter-spacing:.01em}
.nav ul{gap:28px}
.access{white-space:nowrap;font-size:14px;font-weight:600;padding:9px 18px 9px 13px}
.access span{white-space:nowrap}
.lang a{font-size:14px;padding:8px 8px}
@media (max-width:1280px){ .hdr__tools{gap:10px} .nav{margin-left:20px} .nav ul{gap:20px} }
@media (max-width:980px){ .access span{display:none} .access{padding:10px} }
@media (max-width:1100px){
  .hdr__tools .nov__btn,.hdr__tools .access{min-height:44px;min-width:44px;justify-content:center}
  .burger{width:44px;height:44px}
}
@media (max-width:480px){
  .hdr__in,.hdr.is-stuck .hdr__in{padding-block:10px}
  .hdr__tools{gap:2px}
  .hdr__tools .nov__btn,.hdr__tools .dest-av .nov__btn,.hdr__tools .dest-av a{padding:10px;min-width:44px;min-height:44px}
  .search input,.search input:focus{width:44px;height:44px;padding-left:44px}
  .search__ico{left:14px}
  .access{padding:10px;min-width:44px;min-height:44px}
  .burger{width:44px;height:44px}
}

/* 3. Hero: botón primario protagonista (blanco), secundario en contorno, titular sin esperas */
.hero__h1{font-weight:500}
.hero__p{font-size:18px}
.hero__cta{gap:16px;align-items:center}
.hero__cta .btn{font-size:15px;font-weight:600;padding:16px 36px;min-height:52px;display:inline-flex;align-items:center;letter-spacing:.09em}
.hero__cta .btn:not(.btn--ghost){background:#fff;color:#3C3B3E;box-shadow:0 14px 30px rgba(60,20,40,.22)}
.hero__cta .btn:not(.btn--ghost)::before{background:#FFE3EE}
.hero__cta .btn:not(.btn--ghost):hover{color:#3C3B3E}
.hero__cta .btn--ghost{background:transparent;color:#fff;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
.hero__cta .btn--ghost::before{background:rgba(255,255,255,.18)}
.hero__cta .btn--ghost:hover{color:#fff}
.ln>span{animation-duration:.7s;animation-delay:0s}
@media (max-width:700px){
  .hero__p{font-size:16px}
  .hero__cta .btn{width:100%;justify-content:center}
}

/* 4. Texto pequeño: suelo de 14 px en móvil y botones de tarjeta más grandes */
.cs__cta{font-size:14px;font-weight:600;min-height:44px}
.nov__btn,.nov__tx{font-size:14px}
.stat span{font-size:14px}
@media (max-width:700px){
  .chip,.cp__badge,.mono-cub__k,.pcov__k,.nuevo,time,.fcard__legal,.foot__cert,.cp__cta,#destacadas .cp__cta,.cotiza__vaciar,.btn{font-size:14px}
  .chip,.cp__badge,.mono-cub__k,.pcov__k{letter-spacing:.06em}
  main p,main li,main h4,.foot p,.foot a{font-size:max(14px,1em)}
  #destacadas .cp__cta{padding:12px 18px;min-height:44px;display:inline-flex;align-items:center}
}
#destacadas .cp__cta{font-size:14px;padding:11px 18px;min-height:44px;display:inline-flex;align-items:center}
@media (max-width:700px){
  .cp__ft a,.cp__meta,.cp__bd,.fcard p,.fcard span,.fcard button,.fcard__legal,.fcard__priv,.foot__eu,.porque-pieza p,.cotiza__tx b,.cotiza__vaciar,.cp__bd--pc,.mega h4,.menu h4,section h4{font-size:14px}
}

/* ===== Preguntas frecuentes (20/10/2026) ===== */
.fq-buscar{max-width:640px;margin:0 auto 22px}
.fq-buscar input{width:100%;font:inherit;font-size:16px;padding:14px 18px;border:1.5px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.fq-buscar input:focus{outline:2px solid var(--pink);outline-offset:2px;border-color:var(--pink)}
.fq-cuenta{margin:10px 6px 0;font-size:14px;color:var(--ink-2)}
.fq-lista{display:grid;gap:34px;margin-top:8px}
.fq-grupo__t{font-size:19px;line-height:1.35;margin:0 0 12px;color:var(--ink)}
.fq-grupo__t a{font-size:13.5px;font-weight:600;margin-left:10px;color:var(--pink-dk);text-decoration:underline}
.fq{border:1px solid var(--line);border-radius:14px;background:#fff;margin:0 0 10px;padding:0}
.fq summary{cursor:pointer;list-style:none;padding:16px 20px;font-weight:700;line-height:1.45;color:var(--ink);display:flex;gap:12px;justify-content:space-between;align-items:flex-start;min-height:44px}
.fq summary::-webkit-details-marker{display:none}
.fq summary::after{content:"+";flex:none;font-size:22px;line-height:1;color:var(--pink-dk)}
.fq[open] summary::after{content:"–"}
.fq__a{padding:0 20px 18px;color:var(--ink);font-size:15.5px;line-height:1.7}
.fq__a p{margin:0 0 10px}
.fq__a a{font-weight:600;color:var(--pink-dk);text-decoration:underline}
.fq-nota{margin:30px 0 0;text-align:center;font-size:13.5px;color:var(--ink-2)}
.fq-vacio{text-align:center;color:var(--ink-2);padding:44px}
@media (max-width:480px){.fq summary{padding:14px 16px}.fq__a{padding:0 16px 16px}}

.art__faqmas{margin:22px 0 0}.art__faqmas a{font-weight:600;color:var(--pink-dk);text-decoration:underline}
.art__ctaq{margin:14px 0 0;font-size:14.5px}.art__ctaq a{color:inherit;text-decoration:underline}
.fq-fecha{margin-top:14px}