/* ==========================================================================
   Facilitos Freddo — sistema de diseño
   Dirección: bloques de color saturado + titulares condensados en mayúsculas
   ========================================================================== */

:root{
  /* Naranja de marca, separado por rol de contraste.
     #EF8047 es el naranja oficial pero solo alcanza 2.68:1 contra blanco,
     así que queda reservado para superficies gráficas sin texto encima. */
  --ff-naranja:#EF8047;         /* acento gráfico: círculos, puntos, iconos */
  --ff-naranja-bloque:#C25015;  /* fondo con texto blanco encima — 4.72:1 */
  --ff-naranja-texto:#A8461A;   /* naranja sobre fondo claro — 5.76:1 */
  --ff-naranja-tinte:#FFF3EB;
  --ff-naranja-suave:#F9C7A5;

  /* Café y verde de las divisiones del catálogo */
  --ff-cafe:#814525;
  --ff-cafe-hondo:#5E3019;
  --ff-verde:#505D24;
  --ff-verde-hondo:#3A441A;
  --ff-verde-tinte:#F2F4EA;

  /* Neutros cálidos */
  --ff-crema:#FBF6EF;
  --ff-crema-2:#F4EBDD;
  --ff-tinta:#241E19;
  --ff-tinta-60:#6E625A;
  --ff-linea:#E9DECD;
  --ff-blanco:#FFFFFF;

  /* Tipografía */
  --ff-display:'Oswald',Impact,'Haettenschweiler','Arial Narrow',sans-serif;
  --ff-texto:'Poppins',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Ritmo */
  --ff-radio:20px;
  --ff-radio-sm:12px;
  --ff-radio-lg:36px;
  --ff-pildora:50px;
  --ff-ancho:1360px;
  --ff-ancho-txt:62ch;
  --ff-seccion:clamp(4.5rem,9vw,8.5rem);
  --ff-sombra:0 2px 10px rgba(36,30,25,.05),0 16px 40px rgba(36,30,25,.08);
  --ff-sombra-alta:0 6px 16px rgba(36,30,25,.08),0 30px 64px rgba(36,30,25,.16);
  --ff-cab-alto:76px;
}

/* --------------------------------------------------------------- Base --- */
/* Astra fija la raíz en 91.2%; la devolvemos a 100% para que la escala
   tipográfica en rem sea exactamente la diseñada.
   scroll-padding-top evita que los anclas internos (#catalogo, #planta, las
   categorías del pie) aterricen tapados por la cabecera fija. */
html{
  font-size:100%;
  scroll-padding-top:calc(var(--ff-cab-alto) + 1.5rem);
  scroll-behavior:smooth;
}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

body.facilitos{
  font-family:var(--ff-texto);
  color:var(--ff-tinta);
  background:var(--ff-blanco);
  font-size:1.0625rem;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.facilitos h1,.facilitos h2,.facilitos h3,.facilitos .ff-display{
  font-family:var(--ff-display);
  font-weight:700;
  text-transform:uppercase;
  line-height:.92;
  letter-spacing:.005em;
  color:var(--ff-tinta);
  margin:0 0 .4em;
}
.facilitos h1{font-size:clamp(3rem,8.5vw,7rem)}
.facilitos h2{font-size:clamp(1.85rem,3.3vw,2.85rem)}
.facilitos h3{font-size:clamp(1.25rem,1.9vw,1.6rem)}
.facilitos h4{
  font-family:var(--ff-texto);font-weight:600;font-size:1.05rem;
  line-height:1.4;margin:0 0 .4em;text-transform:none;letter-spacing:0;
}
.facilitos p{margin:0 0 1.2em}
/* :where() aporta especificidad cero, así cualquier regla de componente
   (.ff-btn--*, .ff-cat, .ff-dato) gana sin necesidad de !important. */
.facilitos :where(a){color:var(--ff-naranja-texto);text-underline-offset:3px}
.facilitos img{max-width:100%;height:auto;display:block}
.facilitos strong{font-weight:600}

.facilitos :focus-visible{
  outline:3px solid var(--ff-naranja-texto);outline-offset:3px;border-radius:4px;
}

/* El <summary> del catálogo heredaba content-box: con width:100% más el
   padding lateral se hacía más ancho que su tarjeta y el chevrón quedaba
   recortado por el overflow:hidden. Se acota a todos los componentes propios. */
.facilitos [class^="ff-"],
.facilitos [class*=" ff-"],
.facilitos [class^="ff-"]::before,
.facilitos [class*=" ff-"]::before{box-sizing:border-box}

/* ------------------------------------------------------------ Layout --- */
/* Astra envuelve el contenido en un .ast-container con display:flex. Un item
   flex se dimensiona a su max-content, así que la pista de la marquesina
   (ancho max-content por diseño) estiraba todo el main y generaba scroll
   horizontal. Volvemos el contenedor a block y acotamos el main. */
.facilitos .ast-container{display:block;max-width:100%;padding:0}
.facilitos #principal{width:100%;min-width:0;max-width:100%;overflow-x:clip}
.facilitos #page{max-width:100%;overflow-x:clip}
/* Astra aplica body{overflow-x:hidden}. CSS no admite mezclar hidden con
   visible, así que fuerza overflow-y:auto y el body pasa a ser contenedor de
   scroll: los anclas nativos y window.scrollTo dejan de funcionar. `clip`
   recorta igual sin crear contenedor de scroll. */
body.facilitos{overflow-x:clip;overflow-y:visible}

.ff-wrap{width:min(100% - 2.5rem,var(--ff-ancho));margin-inline:auto}
.ff-wrap--angosto{width:min(100% - 2.5rem,900px);margin-inline:auto}
.ff-wrap--amplio{width:min(100% - 2.5rem,1600px);margin-inline:auto}
.ff-seccion{padding-block:var(--ff-seccion)}
.ff-seccion--compacta{padding-block:clamp(3rem,6vw,5.5rem)}

/* Bloques de color a sangre */
.ff-bloque--crema{background:var(--ff-crema)}
.ff-bloque--tinte{background:var(--ff-naranja-tinte)}
.ff-bloque--verde-tinte{background:var(--ff-verde-tinte)}
.ff-bloque--naranja{background:var(--ff-naranja-bloque);color:#fff}
.ff-bloque--cafe{background:var(--ff-cafe);color:#fff}
.ff-bloque--verde{background:var(--ff-verde);color:#fff}
.ff-bloque--tinta{background:var(--ff-tinta);color:#fff}
.ff-bloque--naranja h1,.ff-bloque--naranja h2,.ff-bloque--naranja h3,.ff-bloque--naranja h4,
.ff-bloque--cafe h1,.ff-bloque--cafe h2,.ff-bloque--cafe h3,.ff-bloque--cafe h4,
.ff-bloque--verde h1,.ff-bloque--verde h2,.ff-bloque--verde h3,.ff-bloque--verde h4,
.ff-bloque--tinta h1,.ff-bloque--tinta h2,.ff-bloque--tinta h3,.ff-bloque--tinta h4{color:#fff}
.ff-bloque--cafe p,.ff-bloque--verde p,.ff-bloque--tinta p{color:rgba(255,255,255,.88)}
/* Sobre naranja el texto va en blanco puro: cualquier alfa baja de 4.5:1. */
.ff-bloque--naranja p,.ff-bloque--naranja .ff-lead,.ff-bloque--naranja .ff-kicker{color:#fff}

/* --------------------------------------------------- Tipos de bloque --- */
.ff-kicker{
  display:inline-block;font-family:var(--ff-texto);
  font-size:.78rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ff-naranja-texto);margin-bottom:1.1rem;
}
.ff-bloque--cafe .ff-kicker,
.ff-bloque--verde .ff-kicker,.ff-bloque--tinta .ff-kicker{color:rgba(255,255,255,.88)}
.ff-lead{
  font-size:clamp(1.05rem,1.5vw,1.25rem);font-weight:300;line-height:1.65;
  color:var(--ff-tinta-60);max-width:var(--ff-ancho-txt);
}
.ff-bloque--cafe .ff-lead,
.ff-bloque--verde .ff-lead,.ff-bloque--tinta .ff-lead{color:rgba(255,255,255,.9)}
.ff-encabezado{max-width:var(--ff-ancho-txt);margin-bottom:clamp(2.5rem,5vw,4rem)}
.ff-encabezado--centro{margin-inline:auto;text-align:center}
.ff-encabezado--centro .ff-lead{margin-inline:auto}
.ff-encabezado--ancho{max-width:none}

/* ------------------------------------------------------------ Botones --- */
.ff-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--ff-texto);font-weight:600;font-size:1rem;line-height:1;
  padding:1rem 2.1rem;border-radius:var(--ff-pildora);border:2px solid transparent;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease;
}
.ff-btn svg{width:1.05em;height:1.05em;flex:none}
.ff-btn--primario{background:var(--ff-naranja-bloque);color:#fff}
.ff-btn--primario:hover{background:var(--ff-naranja-texto);color:#fff;transform:translateY(-2px)}
.ff-btn--linea{border-color:var(--ff-tinta);color:var(--ff-tinta);background:transparent}
.ff-btn--linea:hover{background:var(--ff-tinta);color:#fff;transform:translateY(-2px)}
.ff-btn--claro{background:#fff;color:var(--ff-naranja-texto)}
.ff-btn--claro:hover{background:var(--ff-crema-2);color:var(--ff-cafe-hondo);transform:translateY(-2px)}
.ff-btn--fantasma{border-color:rgba(255,255,255,.6);color:#fff}
.ff-btn--fantasma:hover{background:#fff;color:var(--ff-naranja-texto);border-color:#fff;transform:translateY(-2px)}
.ff-botonera{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.25rem}
.ff-botonera--centro{justify-content:center}

/* -------------------------------------------------------- Barra aviso --- */
.ff-aviso{
  background:var(--ff-cafe);color:#fff;overflow:hidden;
  font-size:.8rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
}
.ff-aviso__pista{
  display:flex;gap:3rem;width:max-content;padding-block:.65rem;
  animation:ff-desliza 34s linear infinite;
}
.ff-aviso__pista span{display:flex;align-items:center;gap:3rem;white-space:nowrap}
.ff-aviso__pista span::after{content:"◆";font-size:.6rem;opacity:.55}
@keyframes ff-desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ff-aviso:hover .ff-aviso__pista{animation-play-state:paused}

/* --------------------------------------------------------------- Hero --- */
/* Altura fija e idéntica en las cuatro páginas: el contenido varía (Inicio
   lleva botones y sellos, Contacto solo un titular) y con altura automática
   cada hero medía distinto. La foto ocupa exactamente la mitad derecha y la
   columna de texto está acotada a la izquierda, así el texto nunca puede
   caer sobre la imagen. */
.ff-hero{
  position:relative;overflow:hidden;
  background:var(--ff-hero-fondo,var(--ff-naranja-bloque));
  color:var(--ff-tinta);
  --ff-hero-alto:clamp(430px,42vw,540px);
  min-height:var(--ff-hero-alto);
  display:flex;align-items:center;
  padding-block:clamp(2rem,4vw,3rem);
  /* Calculados contra el fondo más saturado de las cuatro fotos (el coral de
     ensaladas, luminancia 0.461): por encima de estos tonos el texto pequeño
     no llega a 4.5:1. */
  --ff-hero-texto:#4A3E35;
  --ff-hero-acento:#6B2A0D;
}
.facilitos .ff-hero__fondo{
  position:absolute;top:0;right:0;bottom:0;
  width:50%;height:100%;max-width:none;
  /* El producto vive en el tercio derecho: anclando a la derecha se
     recorta el fondo vacío y nunca la comida. */
  object-fit:cover;object-position:right center;
  z-index:0;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 14%);
  mask-image:linear-gradient(to right,transparent 0,#000 14%);
}
.ff-hero__grid{position:relative;z-index:1}
/* Se detiene bien antes del borde de la foto */
.ff-hero__texto{max-width:min(100%,30rem)}

.ff-hero h1{
  color:var(--ff-tinta);margin-bottom:.35em;text-wrap:balance;
  /* Más contenido que la imagen: el titular no debe competir con la foto */
  font-size:clamp(2.15rem,3.6vw,3.25rem);
}
.ff-hero .ff-lead{
  color:var(--ff-hero-texto);font-size:clamp(1rem,1.25vw,1.12rem);font-weight:400;
  max-width:34ch;
}
.ff-hero .ff-kicker{color:var(--ff-hero-acento);margin-bottom:.85rem}
.ff-hero .ff-botonera{margin-top:1.75rem}

/* Sellos bajo el titular */
.ff-sellos{
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;margin-top:1.35rem;
  padding-top:1.1rem;border-top:1px solid rgba(36,30,25,.16);
}
.ff-sello{
  display:flex;align-items:center;gap:.5rem;
  font-size:.82rem;font-weight:500;color:var(--ff-hero-texto);
}
.ff-sello svg{width:1.1rem;height:1.1rem;flex:none;color:var(--ff-hero-acento)}

/* Botones sobre fondo claro */
.ff-hero .ff-btn{padding:.85rem 1.6rem;font-size:.95rem}
.ff-hero .ff-btn--claro{background:var(--ff-naranja-bloque);color:#fff}
.ff-hero .ff-btn--claro:hover{background:var(--ff-naranja-texto);color:#fff}
.ff-hero .ff-btn--fantasma{border-color:var(--ff-tinta);color:var(--ff-tinta)}
.ff-hero .ff-btn--fantasma:hover{background:var(--ff-tinta);color:#fff;border-color:var(--ff-tinta)}

/* Por debajo de 1024 px la columna de texto y la foto se tocarían: se apila. */
@media (max-width:1024px){
  .ff-hero{display:block;min-height:0;padding-top:0;padding-bottom:clamp(2.25rem,6vw,3rem)}
  .facilitos .ff-hero__fondo{
    position:relative;width:100vw;margin-left:calc(50% - 50vw);
    height:clamp(220px,44vw,330px);object-position:right center;
    -webkit-mask-image:none;mask-image:none;
  }
  .ff-hero__grid{padding-top:clamp(1.5rem,5vw,2.25rem)}
  .ff-hero__texto{max-width:none}
  .ff-hero .ff-lead{max-width:52ch}
}

/* ---- Hero con fotografía ----
   Las fotos de cocina no tienen zona plana en la mitad izquierda (ventana,
   repisa, botellas), así que el texto no puede ir encima. En vez de velar la
   imagen, la foto ocupa la columna derecha completa y el texto vive sobre
   blanco: contraste garantizado y la foto entra íntegra, solo reencuadrada. */
.ff-hero--foto{background:#fff}
.facilitos .ff-hero--foto .ff-hero__fondo{
  position:absolute;top:0;bottom:0;right:0;left:auto;
  width:var(--ff-foto,58%);height:100%;max-width:none;
  /* Anclada a la derecha: lo que el encuadre recorta es la cocina vacía de la
     izquierda, nunca el producto. El 22 % vertical deja completa la bolsa
     (su borde superior está al 4 % del alto) en pantallas muy anchas. */
  object-fit:cover;object-position:right 22%;
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%);
          mask-image:linear-gradient(to right,transparent 0,#000 11%);
  z-index:0;
}
/* 40vw mantiene la proporción cerca de la de la foto (1.78:1): entre 1280 y
   1920 px no hay recorte vertical apreciable. */
.ff-hero--foto{--ff-hero-alto:clamp(430px,40vw,620px)}
.ff-hero--foto .ff-hero__texto{max-width:min(100%,30rem)}
/* Especificidad (0,3,0): tiene que ganarle a `.ff-hero > .ff-wrap{z-index:1}`,
   que aparece más abajo en la hoja. */
.facilitos .ff-hero--foto .ff-hero__grid{position:relative;z-index:2}

@media (max-width:1200px){
  .ff-hero--foto{--ff-foto:54%}
  .ff-hero--foto .ff-hero__texto{max-width:min(100%,24rem)}
}
@media (max-width:1024px){
  /* Apilado: la foto va en banda arriba y el texto debajo, sobre blanco. */
  .facilitos .ff-hero--foto .ff-hero__fondo{
    position:relative;inset:auto;width:100vw;margin-left:calc(50% - 50vw);
    height:clamp(230px,46vw,340px);object-position:right center;
    -webkit-mask-image:none;mask-image:none;
  }
}

/* --------------------------------------------------------- Marquesina --- */
.ff-tira{
  background:var(--ff-tinta);color:#fff;padding-block:1.15rem;overflow:hidden;
}
.ff-tira__pista{
  display:flex;width:max-content;animation:ff-desliza 40s linear infinite;
}
.ff-tira__pista span{
  display:flex;align-items:center;gap:2.5rem;padding-right:2.5rem;white-space:nowrap;
  font-family:var(--ff-display);font-size:clamp(1.2rem,2vw,1.7rem);
  text-transform:uppercase;letter-spacing:.02em;color:rgba(255,255,255,.92);
}
.ff-tira__pista span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--ff-naranja);flex:none}

/* ------------------------------------------------------------ Tarjetas --- */
.ff-grid{display:grid;gap:1.5rem}
.ff-grid--2{grid-template-columns:repeat(2,1fr)}
.ff-grid--3{grid-template-columns:repeat(3,1fr)}
.ff-grid--4{grid-template-columns:repeat(4,1fr)}

.ff-tarjeta{
  background:#fff;border-radius:var(--ff-radio);padding:2.25rem 1.9rem;height:100%;
  border:1px solid var(--ff-linea);
  transition:transform .2s ease,box-shadow .2s ease;
}
.ff-tarjeta:hover{transform:translateY(-5px);box-shadow:var(--ff-sombra)}
.ff-tarjeta h3{font-size:1.35rem;margin-bottom:.55rem}
.ff-tarjeta p{color:var(--ff-tinta-60);margin-bottom:0;font-size:.98rem;font-weight:300}
.ff-tarjeta__icono{
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:var(--ff-naranja);color:#fff;margin-bottom:1.35rem;
}
.ff-tarjeta__icono svg{width:27px;height:27px}
/* Velo oscuro en lugar de claro: sobre el naranja de bloque, un blanco al 10%
   aclara el fondo a 3.98:1 y el texto pequeño deja de cumplir. El negro al 12%
   lo lleva a 5.68:1 y mantiene el mismo efecto de tarjeta hundida. */
.ff-tarjeta--sobre-color{background:rgba(0,0,0,.12);border-color:rgba(255,255,255,.24)}
.ff-tarjeta--sobre-color h3{color:#fff}
.ff-tarjeta--sobre-color p{color:#fff}
.ff-tarjeta--sobre-color .ff-tarjeta__icono{background:#fff;color:var(--ff-naranja-texto)}
.ff-tarjeta--sobre-color:hover{box-shadow:none;background:rgba(0,0,0,.18)}

/* ----------------------------------------------------- Dos vertientes --- */
.ff-vertiente{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4.5vw,4rem);align-items:center}
.ff-vertiente + .ff-vertiente{margin-top:clamp(3.5rem,7vw,6.5rem)}
.ff-vertiente--invertida .ff-vertiente__media{order:-1}
.ff-vertiente__media{
  position:relative;border-radius:var(--ff-radio-lg);overflow:hidden;
  display:grid;place-items:center;padding:clamp(1rem,2vw,1.75rem);
  min-height:clamp(300px,34vw,440px);background:var(--ff-naranja);
}
.ff-vertiente__media--verde{background:var(--ff-verde)}
.ff-vertiente__media--cafe{background:var(--ff-cafe)}
/* Sin disco de fondo: el producto va directo sobre la plasta de color. */
.ff-vertiente__media img{
  position:relative;z-index:2;
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 24px 42px rgba(36,30,25,.34));
}
.ff-vertiente__etiqueta{
  display:inline-block;font-family:var(--ff-texto);font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;padding:.5rem 1.1rem;
  border-radius:var(--ff-pildora);background:var(--ff-cafe);color:#fff;margin-bottom:1.2rem;
}
.ff-vertiente__etiqueta--verde{background:var(--ff-verde)}

.ff-lista{list-style:none;margin:1.75rem 0 0;padding:0;display:grid;gap:1rem}
.ff-lista li{display:flex;gap:.9rem;align-items:flex-start;font-size:1rem;font-weight:300;color:var(--ff-tinta-60)}
.ff-lista li strong{color:var(--ff-tinta);font-weight:600}
.ff-lista svg{width:1.4rem;height:1.4rem;color:var(--ff-naranja-texto);flex:none;margin-top:.2rem}

/* ---------------------------------------------------------- Categorías --- */
/* Tarjetas más grandes para que la fotografía se aprecie: 3 arriba de
   1500 px, 2 en el rango intermedio y 1 en móvil. */
.ff-cats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,430px),1fr));
  gap:clamp(1.5rem,2.2vw,2.25rem);
  /* Todas las filas a la altura de la mayor: los textos de categoría tienen
     distinto largo y si no, cada fila mide diferente. */
  grid-auto-rows:1fr;
}
.ff-cat{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border-radius:var(--ff-radio);text-decoration:none;color:inherit;background:var(--ff-crema);
  transition:transform .22s ease,box-shadow .22s ease;
}
.ff-cat:hover{transform:translateY(-6px);box-shadow:var(--ff-sombra-alta);color:inherit}
.ff-cat__img{
  /* aspect-ratio cede ante el contenido: sin overflow:hidden y sin acotar la
     altura de la imagen, las fotos verticales estiran la tarjeta y las filas
     dejan de alinear. */
  aspect-ratio:1/1;display:grid;place-items:center;padding:1rem;position:relative;
  overflow:hidden;min-height:0;
  background:var(--ff-naranja);
}
.ff-cat:nth-child(3n+2) .ff-cat__img{background:var(--ff-verde)}
.ff-cat:nth-child(3n+3) .ff-cat__img{background:var(--ff-cafe)}
/* Sin disco de fondo: el producto va directo sobre la plasta de color. */
.ff-cat__img img{
  position:relative;z-index:2;
  width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 18px 30px rgba(36,30,25,.32));
  transition:transform .3s ease;
}
.ff-cat:hover .ff-cat__img img{transform:scale(1.05)}
.ff-cat__cuerpo{padding:1.75rem 1.9rem 2rem;background:#fff;flex:1}
.ff-cat__cuerpo h3{font-size:1.5rem;margin-bottom:.5rem}
.ff-cat__cuerpo p{font-size:.98rem;font-weight:300;color:var(--ff-tinta-60);margin:0;line-height:1.6}
.ff-cat__conteo{
  display:inline-block;margin-top:1.1rem;font-size:.8rem;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ff-naranja-texto);
}

/* ------------------------------------------------------------ Carrusel --- */
.ff-carrusel__cabecera{
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.ff-carrusel__controles{display:flex;gap:.6rem;flex:none}
.ff-carrusel__btn{
  /* `padding:0` es imprescindible: Astra pone `padding:12px 24px` a todo
     <button> y, aunque el box-sizing sea border-box, los 48 px horizontales
     más el icono fijan un ancho mínimo mayor que los 52 px de alto: el
     círculo salía ovalado. */
  width:52px;height:52px;min-width:0;padding:0;border-radius:50%;flex:none;
  display:grid;place-items:center;cursor:pointer;
  background:#fff;border:2px solid var(--ff-linea);color:var(--ff-tinta);
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
.ff-carrusel__btn svg{width:1.35rem;height:1.35rem}
.ff-carrusel__btn[data-dir="-1"] svg{transform:rotate(180deg)}
.facilitos .ff-carrusel__btn{background:#fff;border-color:var(--ff-linea);color:var(--ff-tinta)}
.facilitos .ff-carrusel__btn:is(:hover,:focus,:focus-visible,:active):not(:disabled){
  background:var(--ff-naranja-bloque);border-color:var(--ff-naranja-bloque);color:#fff;transform:translateY(-2px);
}
.ff-carrusel__btn:disabled{opacity:.35;cursor:default}

.ff-carrusel{
  list-style:none;margin:0;padding:0 0 1.25rem;
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,340px);
  gap:1.5rem;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-left:0;
  scrollbar-width:thin;scrollbar-color:var(--ff-naranja-suave) transparent;
}
.ff-carrusel::-webkit-scrollbar{height:6px}
.ff-carrusel::-webkit-scrollbar-track{background:var(--ff-linea);border-radius:99px}
.ff-carrusel::-webkit-scrollbar-thumb{background:var(--ff-naranja-suave);border-radius:99px}
.ff-carrusel:focus-visible{outline:3px solid var(--ff-naranja-texto);outline-offset:6px;border-radius:var(--ff-radio)}

.ff-empaque{
  scroll-snap-align:start;
  background:#fff;border-radius:var(--ff-radio-lg);overflow:hidden;
  display:flex;flex-direction:column;
  box-shadow:0 1px 3px rgba(36,30,25,.05);
  transition:transform .22s ease,box-shadow .22s ease;
}
.ff-empaque:hover{transform:translateY(-6px);box-shadow:var(--ff-sombra-alta)}
.ff-empaque__foto{position:relative;aspect-ratio:1;overflow:hidden}
.ff-empaque__foto img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.ff-empaque:hover .ff-empaque__foto img{transform:scale(1.04)}
.ff-empaque__sello{
  position:absolute;left:1rem;bottom:1rem;
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .9rem;border-radius:var(--ff-pildora);
  background:rgba(36,30,25,.82);color:#fff;backdrop-filter:blur(4px);
}
.ff-empaque__cuerpo{padding:1.5rem 1.6rem 1.75rem;flex:1;display:flex;flex-direction:column;gap:.4rem}
.ff-empaque__cuerpo h3{font-size:1.3rem;margin:0}
.ff-empaque__cuerpo p{font-size:.92rem;font-weight:300;color:var(--ff-tinta-60);margin:0 0 .5rem}
.ff-empaque__cuerpo .ff-chip{align-self:flex-start;margin-top:auto}

@media (max-width:860px){
  .ff-carrusel__cabecera{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .ff-carrusel__controles{display:none}   /* en táctil se desliza con el dedo */
  .ff-carrusel{grid-auto-columns:minmax(260px,78vw)}
}

/* Cuando la categoría tiene fotografía propia, esta llena la tarjeta: no
   necesita el recorte centrado ni la sombra del producto suelto. */
.ff-cat__img--foto{padding:0}
.ff-cat__img--foto img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;
  filter:none;
}
.ff-filtro__disco--foto{padding:0}
.ff-filtro__disco--foto img{width:100%;height:100%;object-fit:cover;filter:none}
.ff-grupo__foto--foto{padding:0;overflow:hidden}
/* `.facilitos` es necesario: `.ff-grupo__foto img{object-fit:contain}` está
   más abajo en la hoja y con la misma especificidad le ganaba por orden. */
.facilitos .ff-grupo__foto--foto img{width:100%;height:100%;object-fit:cover}

/* Bloque de vertiente con fotografía completa (con su propio fondo) en vez
   de un producto recortado: llena el marco de borde a borde. */
.ff-vertiente__media--foto{padding:0}
.facilitos .ff-vertiente__media--foto img{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;filter:none;
}
/* Foto vertical (1080x1350): el marco crece a lo alto para que quepan la caja
   y la mano; el encuadre al 26 % recorta pared arriba y mesa abajo. */
.ff-vertiente__media--retrato{min-height:clamp(360px,44vw,620px)}
.facilitos .ff-vertiente__media--retrato img{object-position:center 26%}

/* --------------------------------------------------------------- Ruta --- */
.ff-ruta{display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;counter-reset:paso}
.ff-ruta__paso{position:relative;padding-top:3.5rem}
.ff-ruta__paso::before{
  counter-increment:paso;content:counter(paso,decimal-leading-zero);
  position:absolute;top:0;left:0;
  font-family:var(--ff-display);font-size:2.6rem;font-weight:700;line-height:1;
  color:var(--ff-naranja);
}
.ff-ruta__paso::after{
  content:"";position:absolute;top:1.3rem;left:3.4rem;right:-1.5rem;height:2px;
  background:repeating-linear-gradient(90deg,var(--ff-naranja-suave) 0 8px,transparent 8px 16px);
}
.ff-ruta__paso:last-child::after{display:none}
.ff-ruta__paso h3{font-size:1.15rem;margin-bottom:.4rem}
.ff-ruta__paso p{font-size:.93rem;font-weight:300;color:var(--ff-tinta-60);margin:0}
.ff-bloque--verde .ff-ruta__paso::before{color:rgba(255,255,255,.55)}
.ff-bloque--verde .ff-ruta__paso p{color:rgba(255,255,255,.82)}
.ff-bloque--verde .ff-ruta__paso::after{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.45) 0 8px,transparent 8px 16px);
}

/* -------------------------------------------------------------- Cifras --- */
.ff-cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;text-align:center}
.ff-cifra__num{
  font-family:var(--ff-display);font-weight:700;line-height:1;display:block;
  font-size:clamp(2.6rem,4.6vw,3.9rem);color:#fff;margin-bottom:.45rem;
}
.ff-cifra p{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.9);margin:0}

/* ----------------------------------------------------------- Banda CTA --- */
.ff-cta{position:relative;overflow:hidden;text-align:center;padding-block:clamp(4rem,8vw,7rem)}
.ff-cta > *{position:relative;z-index:2}
.ff-cta h2{margin-bottom:.5rem;text-wrap:balance}
.ff-cta p{max-width:52ch;margin-inline:auto;font-size:1.15rem;font-weight:300}

/* ------------------------------------------------- Piezas de terceros --- */
/* Astra trae su propio azul por dos vías, y las dos había que cortarlas:

   1. Sus tokens `--ast-global-color-0/1` (#046bd2 y #045cb4), que usan decenas
      de reglas suyas y de plugins, incluidos estados hover/focus que no se
      pueden enumerar uno a uno. Se reasignan a la paleta de marca en origen.
   2. `a{color:#4169e1}` y `a:focus,a:hover{color:#191970}` de su hoja base.
      La regla del tema es `.facilitos :where(a)`, y `:where()` no suma
      especificidad: (0,1,0) contra los (0,1,1) de `a:hover`, así que cualquier
      enlace sin hover propio se ponía azul marino al pasar el ratón.

   Con `html:root` (0,1,1) el remapeo gana a cualquier `:root` suelto, venga
   antes o después en la cascada. */
html:root{
  --ast-global-color-0:#C25015;   /* acento: era #046bd2 */
  --ast-global-color-1:#A8461A;   /* acento en hover: era #045cb4 */
  --ast-global-color-2:#241E19;
  --ast-global-color-3:#4A3E35;
  --ast-global-color-5:#F9F5EF;
  --ast-global-color-7:#E9DECD;
  --ast-border-color:#E9DECD;
  --e-global-color-astglobalcolor0:#C25015;
  --e-global-color-astglobalcolor1:#A8461A;
}

/* Estados de enlace. Van con `.facilitos a` (0,1,1) para empatar en
   especificidad con `a:hover` y ganarle por orden, pero sin `!important`:
   así cualquier regla propia más específica (botones, pie, menú) sigue
   mandando sobre su propio hover. */
.facilitos a:hover,
.facilitos a:focus,
.facilitos a:active{color:var(--ff-naranja-texto)}
.facilitos a:visited{color:inherit}
/* Los enlaces que ya son botones o piezas con color propio conservan el suyo. */
.facilitos a.ff-btn:hover,
.facilitos a.ff-btn:focus,
.facilitos a.ff-btn:active,
.facilitos a.ff-dato:hover,
.facilitos a.ff-dato:focus,
.facilitos .ff-pie a:hover,
.facilitos .ff-pie a:focus,
.facilitos .ff-cab a:hover,
.facilitos .ff-cab a:focus,
.facilitos .ff-cat:hover,
.facilitos .ff-cat:focus{color:inherit}
.facilitos .ff-btn--primario:hover,
.facilitos .ff-btn--primario:focus,
.facilitos .ff-btn--claro:hover,
.facilitos .ff-btn--claro:focus{color:#fff}
.facilitos .ff-pie a:hover,
.facilitos .ff-pie a:focus{color:#fff}

/* Astra pone `color:#fff` a TODO <button> en hover y focus. En sus botones
   azules tenía sentido; sobre los nuestros, que son claros, dejaba la
   etiqueta blanca sobre blanco. Se neutraliza solo en los botones que no son
   del tema — los que sí lo son declaran su propio color más abajo. */
.facilitos :is(button,.button,input[type=button],input[type=reset],input[type=submit]):not([class*="ff-"]):is(:hover,:focus,:active){
  color:inherit;
}


/* Astra y los plugins traen su propio azul. `\.facilitos :where(a)` no les gana
   porque `:where()` no suma especificidad, así que se corrigen aquí uno a uno. */

/* Botón «volver arriba» de Astra: azul y cuadrado. Redondo y de la paleta. */
.facilitos #ast-scroll-top{
  background:var(--ff-naranja-bloque);color:#fff;
  width:48px;height:48px;min-width:0;padding:0;border-radius:50%;
  display:grid;place-items:center;
  box-shadow:0 6px 18px rgba(36,30,25,.22);
  transition:background-color .18s ease,transform .18s ease;
}
.facilitos #ast-scroll-top:hover{background:var(--ff-naranja-texto);transform:translateY(-2px)}
.facilitos #ast-scroll-top svg{fill:currentColor;width:18px;height:18px}

/* El foco de los campos de formulario lleva un #046BD2 literal (no un token),
   así que hay que ganarle aparte: (0,2,1) contra los (0,1,1) de Astra. */
.facilitos :is(input,select,textarea):focus{
  border-color:var(--ff-naranja-bloque);color:var(--ff-tinta);
}

/* Enlaces sueltos que pinta el navegador o un plugin (formulario, avisos). */
.facilitos .frm-fluent-form a,
.facilitos .ff-form-caja a,
.facilitos .wp-block-post-content a,
.facilitos .entry-content a{color:var(--ff-naranja-texto);text-decoration-color:var(--ff-naranja-suave)}
.facilitos .frm-fluent-form a:hover,
.facilitos .ff-form-caja a:hover{color:var(--ff-cafe)}

/* ------------------------------------------------------------- Catálogo --- */
.ff-catalogo{display:grid;gap:1rem}
.ff-cat-bloque{
  border:1px solid var(--ff-linea);border-radius:var(--ff-radio);overflow:hidden;background:#fff;
  transition:border-color .2s ease;
}
.ff-cat-bloque[open]{border-color:var(--ff-naranja-suave)}
.ff-cat-bloque__btn{
  width:100%;display:flex;align-items:center;gap:1.25rem;
  padding:1.5rem 1.75rem;cursor:pointer;list-style:none;
  font-family:var(--ff-display);font-size:clamp(1.15rem,2vw,1.55rem);font-weight:600;
  text-transform:uppercase;color:var(--ff-tinta);
  transition:background-color .18s ease;
}
.ff-cat-bloque__btn::-webkit-details-marker{display:none}
.ff-cat-bloque__btn:hover{background:var(--ff-naranja-tinte)}
.ff-cat-bloque__punto{width:14px;height:14px;border-radius:50%;background:var(--ff-naranja);flex:none}
.ff-cat-bloque:nth-of-type(3n+2) .ff-cat-bloque__punto{background:var(--ff-verde)}
.ff-cat-bloque:nth-of-type(3n+3) .ff-cat-bloque__punto{background:var(--ff-cafe)}
.ff-cat-bloque__conteo{
  margin-left:auto;font-family:var(--ff-texto);font-size:.8rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ff-tinta-60);
  background:var(--ff-crema-2);padding:.35rem .9rem;border-radius:var(--ff-pildora);
}
.ff-cat-bloque__flecha{width:1.5rem;height:1.5rem;color:var(--ff-naranja-texto);flex:none;transition:transform .25s ease}
.ff-cat-bloque[open] .ff-cat-bloque__flecha{transform:rotate(180deg)}
.ff-cat-bloque__panel{padding:0 1.75rem 2rem;border-top:1px solid var(--ff-linea)}
.ff-cat-bloque__intro{display:flex;gap:1.75rem;align-items:center;padding-top:1.75rem}
.ff-cat-bloque__intro img{width:160px;flex:none;filter:drop-shadow(0 10px 20px rgba(36,30,25,.16))}
.ff-cat-bloque__intro p{margin:0;color:var(--ff-tinta-60);font-weight:300;font-size:.98rem}

.ff-productos{
  list-style:none;margin:1.75rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1rem;
}
.ff-producto{
  background:var(--ff-crema);border-radius:var(--ff-radio-sm);padding:1.2rem 1.35rem;
  border-left:4px solid var(--ff-naranja);
}
.ff-producto h4{font-size:1.05rem;font-weight:600;margin:0 0 .2rem}
.ff-producto__desc{font-size:.88rem;font-weight:300;color:var(--ff-tinta-60);margin:0 0 .7rem}
.ff-producto__meta{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.ff-chip{
  font-size:.74rem;font-weight:500;padding:.28rem .7rem;border-radius:var(--ff-pildora);
  background:#fff;border:1px solid var(--ff-linea);color:var(--ff-tinta-60);
}
.ff-chip--cod{
  background:var(--ff-naranja-tinte);border-color:transparent;color:var(--ff-naranja-texto);
  font-weight:600;letter-spacing:.05em;
}

/* ------------------------------------------------------------- Contacto --- */
.ff-contacto{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.ff-datos{display:grid;gap:1rem}
.ff-dato{
  display:flex;gap:1.15rem;align-items:center;
  padding:1.4rem 1.5rem;background:var(--ff-crema);border-radius:var(--ff-radio);
  text-decoration:none;color:inherit;border:2px solid transparent;
  transition:border-color .18s ease,transform .18s ease,background-color .18s ease;
}
a.ff-dato:hover{border-color:var(--ff-naranja);transform:translateY(-2px);background:#fff;color:inherit}
.ff-dato__icono{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:var(--ff-naranja);color:#fff;
}
.ff-dato__icono svg{width:22px;height:22px}
.ff-dato__et{
  display:block;font-size:.72rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ff-tinta-60);margin-bottom:.1rem;
}
.ff-dato__val{font-size:1.05rem;font-weight:600;color:var(--ff-tinta);line-height:1.35}
.ff-form-caja{
  background:#fff;border:1px solid var(--ff-linea);border-radius:var(--ff-radio-lg);
  padding:clamp(1.75rem,4vw,3rem);box-shadow:var(--ff-sombra);
}
.ff-form-caja > h3{margin-bottom:.4rem}
.ff-form-caja > p{color:var(--ff-tinta-60);font-weight:300;margin-bottom:2rem}

/* Fluent Forms dentro del tema */
.ff-form-caja .frm-fluent-form .ff-el-group{margin-bottom:1.2rem}
.ff-form-caja .frm-fluent-form label,
.ff-form-caja .frm-fluent-form .ff-el-input--label label{
  font-family:var(--ff-texto);font-weight:600;font-size:.9rem;color:var(--ff-tinta);
  margin-bottom:.45rem;display:block;
}
.ff-form-caja .frm-fluent-form input[type=text],
.ff-form-caja .frm-fluent-form input[type=email],
.ff-form-caja .frm-fluent-form input[type=tel],
.ff-form-caja .frm-fluent-form select,
.ff-form-caja .frm-fluent-form textarea{
  width:100%;padding:.85rem 1.1rem;border:1.5px solid var(--ff-linea);border-radius:var(--ff-radio-sm);
  font-family:var(--ff-texto);font-size:1rem;font-weight:400;color:var(--ff-tinta);background:#fff;
  transition:border-color .18s ease,box-shadow .18s ease;
}
.ff-form-caja .frm-fluent-form input:focus,
.ff-form-caja .frm-fluent-form select:focus,
.ff-form-caja .frm-fluent-form textarea:focus{
  border-color:var(--ff-naranja);box-shadow:0 0 0 3px rgba(239,128,71,.2);outline:none;
}
.ff-form-caja .frm-fluent-form .ff-btn-submit,
.ff-form-caja .frm-fluent-form button[type=submit]{
  background:var(--ff-naranja-bloque);color:#fff;border:0;border-radius:var(--ff-pildora);
  font-family:var(--ff-texto);font-weight:600;font-size:1rem;padding:1rem 2.25rem;
  cursor:pointer;transition:background-color .18s ease,transform .18s ease;
}
.ff-form-caja .frm-fluent-form .ff-btn-submit:hover,
.ff-form-caja .frm-fluent-form button[type=submit]:hover{
  background:var(--ff-naranja-texto);transform:translateY(-2px);
}

/* --------------------------------------------------------------- Mapa --- */
.ff-mapa{border-radius:var(--ff-radio-lg);overflow:hidden;line-height:0;box-shadow:var(--ff-sombra)}
.ff-mapa iframe{width:100%;height:440px;border:0;display:block}

/* ------------------------------------------------------- Cabecera --- */
.ff-cab{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.ff-cab.esta-fija{border-bottom-color:var(--ff-linea);box-shadow:0 2px 18px rgba(36,30,25,.07)}
.ff-cab__inner{display:flex;align-items:center;gap:1.5rem;min-height:var(--ff-cab-alto)}
.ff-cab__logo{flex:none;display:block;line-height:0}
.ff-cab__logo img{height:44px;width:auto}

.ff-cab__nav{margin-left:auto;display:flex;align-items:center;gap:2.25rem}
.ff-menu{display:flex;align-items:center;gap:2rem;list-style:none;margin:0;padding:0}
.ff-menu a{
  font-family:var(--ff-texto);font-weight:500;font-size:.85rem;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--ff-tinta);text-decoration:none;padding:.35rem 0;position:relative;
  transition:color .18s ease;
}
.ff-menu a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;border-radius:2px;
  background:var(--ff-naranja);transform:scaleX(0);transform-origin:left;transition:transform .22s ease;
}
.ff-menu a:hover,.ff-menu .current-menu-item > a{color:var(--ff-naranja-texto)}
.ff-menu a:hover::after,.ff-menu .current-menu-item > a::after{transform:scaleX(1)}
.ff-cab__cta{padding:.75rem 1.5rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase}

.ff-cab__toggle{
  display:none;margin-left:auto;background:none;border:0;cursor:pointer;
  padding:.6rem;border-radius:var(--ff-radio-sm);
  /* Área táctil mínima recomendada */
  min-width:44px;min-height:44px;place-items:center;
}
.facilitos .ff-cab__toggle:is(:hover,:focus,:focus-visible,:active){background:var(--ff-crema);color:var(--ff-tinta)}
.ff-cab__barras{display:grid;gap:5px;width:24px}
.ff-cab__barras span{display:block;height:2.5px;border-radius:2px;background:var(--ff-tinta);transition:transform .25s ease,opacity .2s ease}
.ff-cab__toggle[aria-expanded=true] .ff-cab__barras span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ff-cab__toggle[aria-expanded=true] .ff-cab__barras span:nth-child(2){opacity:0}
.ff-cab__toggle[aria-expanded=true] .ff-cab__barras span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* --------------------------------------------------------------- Pie --- */
.ff-pie{background:var(--ff-tinta);color:rgba(255,255,255,.75);padding-block:clamp(3.5rem,7vw,5rem) 0}
.ff-pie__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1.25fr;gap:2.5rem;padding-bottom:3.25rem}
.ff-pie img.ff-pie__logo{width:180px;margin-bottom:1.35rem}
.ff-pie p{font-size:.95rem;font-weight:300;line-height:1.7;color:rgba(255,255,255,.68)}
.ff-pie h4{
  font-family:var(--ff-texto);color:#fff;font-size:.76rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.2rem;
}
.ff-pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.ff-pie li{font-size:.95rem;font-weight:300;color:rgba(255,255,255,.68)}
.ff-pie a{color:rgba(255,255,255,.72);text-decoration:none;font-size:.95rem;transition:color .18s ease}
.ff-pie a:hover{color:var(--ff-naranja-suave)}
.ff-pie__sellos{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.35rem}
.ff-pie__sello{
  font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:.42rem .9rem;border-radius:var(--ff-pildora);
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8);
}
.ff-pie__base{
  border-top:1px solid rgba(255,255,255,.12);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;align-items:center;
  font-size:.85rem;font-weight:300;color:rgba(255,255,255,.5);
}

/* ------------------------------------------------- Ilustraciones de marca --- */
.ff-deco{
  position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0;
}
.ff-deco__item{
  position:absolute;display:block;width:var(--ff-w,190px);line-height:0;
  transform:rotate(var(--ff-rot,0deg));
  will-change:transform;
}
.ff-deco__item svg{width:100%;height:auto;display:block}

/* La marca usa las ilustraciones planas, al 100% y en su color original:
   nunca recoloreadas ni con transparencia. Por eso solo se colocan sobre
   fondos claros, donde el verde y el naranja leen bien, y se recortan contra
   el borde de la sección igual que en la portada del catálogo. */

/* Las secciones que llevan decoración necesitan contexto y quedar por encima */
.ff-hero,.ff-cta,.ff-seccion,.ff-pie{position:relative}
.ff-hero > .ff-wrap,.ff-cta > .ff-wrap,.ff-seccion > .ff-wrap,.ff-pie > .ff-wrap{position:relative;z-index:1}

/* Deriva lenta al hacer scroll, atada a --ff-desliz desde el JS */
.ff-deco__item{
  transform:translate3d(0,var(--ff-desliz,0px),0) rotate(var(--ff-rot,0deg));
}

@media (max-width:860px){
  /* En pantallas angostas solo quedan las piezas ancladas al borde: las que
     entran al lienzo se montarían sobre el texto, porque el margen lateral
     baja a 20 px. Las que quedan siguen a color pleno, solo más pequeñas. */
  .ff-deco__item{width:calc(var(--ff-w,190px) * .45)}
  .ff-deco__item--escritorio{display:none}
}

/* ----------------------------------------- Entrada del contenido visible ---
   El hero está sobre la línea de flotación: no debe esperar al JS para
   mostrarse. Va con animación CSS pura, que corre siempre y sin parpadeo. */
@keyframes ff-entra{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:none}}
@keyframes ff-entra-izq{from{opacity:0;transform:translate3d(-28px,0,0)}to{opacity:1;transform:none}}
@keyframes ff-entra-zoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

.ff-entra{animation:ff-entra .85s cubic-bezier(.22,.7,.3,1) both}
.ff-entra--izq{animation-name:ff-entra-izq}
.ff-entra--zoom{animation-name:ff-entra-zoom;animation-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .ff-entra{animation:none}
}

/* --------------------------------------------- Animaciones de entrada --- */
.ff-js .ff-anim{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:opacity .75s cubic-bezier(.22,.7,.3,1) var(--ff-retraso,0ms),
             transform .75s cubic-bezier(.22,.7,.3,1) var(--ff-retraso,0ms);
  will-change:opacity,transform;
}
.ff-js .ff-anim--izq{transform:translate3d(-32px,0,0)}
.ff-js .ff-anim--der{transform:translate3d(32px,0,0)}
.ff-js .ff-anim--zoom{transform:scale(.94)}
.ff-js .ff-anim.es-visible{opacity:1;transform:none}

/* Escalonado dentro de un grupo */
.ff-js [data-escalona] > *{
  opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1);
}
.ff-js [data-escalona].es-visible > *{opacity:1;transform:none}

/* Subrayado que se dibuja al entrar */
.ff-js .ff-kicker{position:relative}

@media (prefers-reduced-motion:reduce){
  .ff-js .ff-anim,
  .ff-js [data-escalona] > *{opacity:1!important;transform:none!important;transition:none!important}
  .ff-deco__item{transform:rotate(var(--ff-rot,0deg))!important}
}

/* ------------------------------------------- Categorías visuales (v2) --- */
.ff-filtros{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(152px,1fr));gap:.85rem;
  margin-bottom:clamp(2.5rem,5vw,3.5rem);
}
.ff-filtro{
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  padding:1rem .75rem 1.1rem;cursor:pointer;
  background:#fff;border:2px solid var(--ff-linea);border-radius:var(--ff-radio);
  font-family:var(--ff-texto);font-size:.82rem;font-weight:600;line-height:1.25;
  text-align:center;color:var(--ff-tinta);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease,background-color .2s ease;
}
.facilitos .ff-filtro:is(:hover,:focus,:focus-visible,:active){
  color:var(--ff-tinta);background:#fff;
  transform:translateY(-3px);box-shadow:var(--ff-sombra);border-color:var(--ff-naranja-suave);
}
.ff-filtro__disco{
  width:92px;height:92px;border-radius:50%;flex:none;
  display:grid;place-items:center;overflow:hidden;background:var(--ff-naranja);
  transition:transform .25s ease;
}
.ff-filtro:nth-child(3n+2) .ff-filtro__disco{background:var(--ff-verde)}
.ff-filtro:nth-child(3n+3) .ff-filtro__disco{background:var(--ff-cafe)}
.ff-filtro__disco img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(36,30,25,.3))}
/* La fotografía de categoría ya trae su propio fondo: llena el disco entero,
   sin margen ni sombra. El `contain` de arriba es para los recortes de
   producto, que sí necesitan aire sobre la plasta de color. */
.facilitos .ff-filtro__disco--foto img{width:100%;height:100%;object-fit:cover;filter:none}
.ff-filtro:hover .ff-filtro__disco{transform:scale(1.07)}
.ff-filtro__conteo{font-size:.72rem;font-weight:500;color:var(--ff-tinta-60);letter-spacing:.04em}
.facilitos .ff-filtro[aria-selected="true"],
.facilitos .ff-filtro[aria-selected="true"]:is(:hover,:focus,:focus-visible){
  border-color:var(--ff-naranja-bloque);background:var(--ff-naranja-tinte);color:var(--ff-tinta);
}
.ff-filtro[aria-selected="true"] .ff-filtro__disco{transform:scale(1.05)}

/* ---- Catálogo a dos columnas ----
   A la izquierda se elige la categoría y a la derecha se despliega, sin que la
   lista se pierda de vista: el panel de elección queda pegajoso bajo la
   cabecera mientras se recorren los productos. */
.ff-catalogo2{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,3.5vw,3.25rem);align-items:start;
}
.ff-catalogo2__elegir{position:sticky;top:calc(var(--ff-cab-alto) + 1.5rem)}
.ff-catalogo2__ver{min-width:0}

/* La pastilla pasa de tarjeta vertical a fila: disco a la izquierda, nombre y
   conteo apilados a la derecha. Cabe el doble en la mitad de ancho. */
.ff-filtros--lista{
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.7rem;margin-bottom:0;
}
.facilitos .ff-filtros--lista .ff-filtro{
  display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:.85rem;row-gap:.1rem;align-items:center;
  text-align:left;padding:.65rem .9rem;
}
.ff-filtros--lista .ff-filtro__disco{grid-row:1/3;width:62px;height:62px}
.ff-filtros--lista .ff-filtro__conteo{align-self:start}

/* Apilado: vuelve la rejilla de tarjetas de siempre, a todo el ancho. */
@media (max-width:1023px){
  .ff-catalogo2{grid-template-columns:1fr;gap:clamp(2rem,5vw,2.75rem)}
  .ff-catalogo2__elegir{position:static}
  .ff-filtros--lista{grid-template-columns:repeat(auto-fit,minmax(152px,1fr))}
  .facilitos .ff-filtros--lista .ff-filtro{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    gap:.6rem;padding:1rem .75rem 1.1rem;
  }
  .ff-filtros--lista .ff-filtro__disco{width:92px;height:92px}
}

.ff-grupo{scroll-margin-top:calc(var(--ff-cab-alto) + 2rem)}
.ff-grupo__cabecera{
  display:flex;align-items:center;gap:1.5rem;
  padding-bottom:1.5rem;margin-bottom:2rem;border-bottom:2px solid var(--ff-linea);
}
.ff-grupo__foto{
  width:110px;height:110px;border-radius:var(--ff-radio);flex:none;
  display:grid;place-items:center;overflow:hidden;background:var(--ff-crema-2);padding:.5rem;
}
.ff-grupo__foto img{width:100%;height:100%;object-fit:contain}
.ff-grupo__titulo h3{margin-bottom:.35rem}
.ff-grupo__titulo p{margin:0;color:var(--ff-tinta-60);font-weight:300;font-size:.98rem;max-width:60ch}
.ff-grupo + .ff-grupo{margin-top:clamp(3rem,6vw,4.5rem)}
.ff-js .ff-grupo[hidden]{display:none}

@media (max-width:600px){
  .ff-filtros{grid-template-columns:repeat(2,1fr)}
  .ff-grupo__cabecera{flex-direction:column;text-align:center;gap:1rem}
  .ff-grupo__foto{width:96px;height:96px}
}

/* ---------------------------------------------------------- Utilidades --- */
.ff-nota{font-size:.85rem;font-weight:300;color:var(--ff-tinta-60);font-style:italic;margin-top:1.75rem}
.ff-solo-lector{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.ff-saltar{
  position:absolute;left:-9999px;top:0;z-index:999;padding:1rem 1.5rem;
  background:var(--ff-naranja-bloque);color:#fff;font-weight:600;border-radius:0 0 var(--ff-radio-sm) 0;
}
.ff-saltar:focus{left:0;color:#fff}

/* ------------------------------------------------------------ Responsive --- */
@media (max-width:1100px){
  .ff-grid--4{grid-template-columns:repeat(2,1fr)}
  .ff-ruta{grid-template-columns:repeat(2,1fr);gap:2.25rem}
  .ff-ruta__paso::after{display:none}
  .ff-cifras{grid-template-columns:repeat(2,1fr);gap:2.5rem}
  .ff-pie__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  .ff-cab__toggle{display:grid}
  .ff-cab__nav{
    position:fixed;inset:var(--ff-cab-alto) 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--ff-linea);
    padding:1rem 1.25rem 1.75rem;box-shadow:0 18px 40px rgba(36,30,25,.16);
    transform:translateY(-12px);opacity:0;visibility:hidden;
    transition:transform .25s ease,opacity .25s ease,visibility .25s;
    max-height:calc(100dvh - var(--ff-cab-alto));overflow-y:auto;
  }
  .ff-cab__nav.esta-abierto{transform:translateY(0);opacity:1;visibility:visible}
  .ff-menu{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .ff-menu li{border-bottom:1px solid var(--ff-linea)}
  .ff-menu a{display:block;padding:1.05rem .25rem;font-size:.95rem}
  .ff-menu a::after{display:none}
  .ff-cab__cta{margin-top:1.35rem;width:100%}
  body.ff-menu-abierto{overflow:hidden}
}
@media (max-width:860px){
  .ff-hero__grid{grid-template-columns:1fr;gap:2.5rem}
  .ff-vertiente{grid-template-columns:1fr}
  .ff-vertiente--invertida .ff-vertiente__media{order:0}
  .ff-contacto{grid-template-columns:1fr}
  .ff-grid--3,.ff-grid--2{grid-template-columns:1fr}
}
@media (max-width:600px){
  .ff-grid--4{grid-template-columns:1fr}
  .ff-ruta{grid-template-columns:1fr}
  .ff-cifras{grid-template-columns:1fr;gap:2.25rem}
  .ff-pie__grid{grid-template-columns:1fr;gap:2.25rem}
  .ff-botonera .ff-btn{width:100%}
  .ff-cat-bloque__intro{flex-direction:column;text-align:center}
  .ff-cat-bloque__intro img{width:130px}
  .ff-cat-bloque__btn{padding:1.2rem 1.25rem;gap:.85rem}
  .ff-cat-bloque__conteo{display:none}
  .ff-cat-bloque__panel{padding-inline:1.25rem}
}

/* Respeta la preferencia de menos movimiento */
@media (prefers-reduced-motion:reduce){
  .facilitos *,.facilitos *::before,.facilitos *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  /* Sin animación no hace falta la copia duplicada del contenido: se oculta
     para que el set restante quepa sin aplastarse. */
  .ff-aviso__pista,.ff-tira__pista{animation:none;width:100%;justify-content:space-around;flex-wrap:wrap}
  .ff-aviso__pista > span:nth-child(n+5){display:none}
  .ff-tira__pista > span:nth-child(n+9){display:none}
  .ff-tira__pista > span{padding-right:0}
  .ff-tarjeta:hover,.ff-cat:hover,.ff-btn:hover,a.ff-dato:hover{transform:none}
}

/* Impresión */
@media print{
  .ff-aviso,.ff-tira,.ff-cta,.ff-pie,.ff-cab{display:none!important}
  .ff-cat-bloque__panel{display:block!important}
  .ff-hero{background:#fff;color:#000}
  .ff-hero__fondo{display:none}
}