/* =====================================================================
   FLOCK · CAPA PÚBLICA

   El ultramar es el suelo: secciones enteras van en azul con el texto en
   blanco. El blanco se guarda para donde hay ropa fotografiada. Los
   titulares van en minúscula, como el logotipo, porque la marca se llama
   como se llama una bandada y no hace falta gritar.

   Nada de filetes gruesos ni retículas duras: aquí separa el aire y el
   color, no el borde.

   Orden de carga (marketplace/app.blade.php):
     1. flock-tokens.css   tokens
     2. flock-ui.css       componentes compartidos con el panel
     3. flock.css          esta hoja · va la última para imponerse
                           sobre la plantilla comprada
   ===================================================================== */

/* =====================================================================
   1. BASE
   ===================================================================== */

html { scroll-behavior: auto; background: var(--fk-canvas); }
[id] { scroll-margin-top: 90px; }

/* El navegador oculta `[hidden]` con `display:none`, pero esa regla tiene
   especificidad (0,1,0): cualquier clase nuestra que fije `display` la gana
   y el atributo deja de hacer nada en silencio. Esto lo zanja. */
[hidden] { display: none !important; }

body {
  font-family: var(--fk-sans);
  font-size: var(--fk-t-md);
  line-height: var(--fk-leading);
  background: var(--fk-canvas);
  color: var(--fk-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:focus-visible { outline: 3px solid var(--fk-brasa); outline-offset: 3px; }

.fk-ancho {
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding-inline: clamp(18px, 3.5vw, 56px);
}

/* Radio: suave, no cuadrado. Es lo contrario de lo que había. */
:root { --fk-r: 14px; --fk-r-s: 9px; }

/* =====================================================================
   2. TIPOGRAFÍA SOBRE LA PLANTILLA
   Anybody sólo en titulares. Minúscula siempre: es decisión de marca.
   ===================================================================== */

.heading1, .heading2, .heading3, .heading4, .heading5, .heading6,
h1, h2, h3, .titulo-especial, .titulo-especial2 {
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 106;
  letter-spacing: -.035em !important;
  line-height: 1.02 !important;
  text-transform: none !important;
  color: var(--fk-text);
}
.heading1 { font-size: clamp(2.4rem, 6vw, 4.6rem) !important; }
.heading2 { font-size: clamp(2rem, 4.6vw, 3.4rem) !important; }
.heading3 { font-size: clamp(1.6rem, 3.4vw, 2.6rem) !important; }
.heading4, .heading5, .heading6 { font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important; letter-spacing: -.02em !important; }

.text-button, .text-button-uppercase, .button-main, button,
.caption1, .caption2, p, li, td, th, input, textarea, select { font-family: var(--fk-sans); }

/* =====================================================================
   3. CABECERO
   ===================================================================== */

#header, #header .header-menu { background: var(--fk-canvas) !important; }
#header .header-menu { border-bottom: 1px solid var(--fk-line); height: 72px !important; }

.menu-main > ul > li > a, .menu-main a {
  font-family: var(--fk-sans);
  font-size: var(--fk-t-sm);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fk-text);
}
.menu-main > ul > li > a::after { display: none; }
.menu-main > ul > li > a { position: relative; }
.menu-main > ul > li > a::before {
  content: '';
  position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 2px; background: var(--fk-accent);
  transition: right var(--fk-fast) var(--fk-ease);
}
.menu-main > ul > li > a:hover::before { right: 0; }

.fk-cabecero__buscar {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px 9px 13px;
  border: 0;
  border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-family: var(--fk-sans);
  font-size: var(--fk-t-sm);
  font-weight: 500;
  color: var(--fk-text-soft);
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-cabecero__buscar:hover { background: var(--fk-accent); color: var(--fk-on-accent); }
.fk-cabecero__buscar svg { flex-shrink: 0; }
@media (max-width: 700px) { .fk-cabecero__buscar span { display: none; } .fk-cabecero__buscar { padding: 9px; } }

/* =====================================================================
   4. BARRA DE COMANDO · vuelve al subir
   ===================================================================== */

.fk-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--fk-line);
  transform: translateY(-100%);
  transition: transform 340ms var(--fk-ease);
}
body.fk-bar-on .fk-bar { transform: none; }
body.fk-bar-on.fk-bar-away .fk-bar { transform: translateY(-100%); }

.fk-bar__inner {
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  max-width: 1500px; margin: 0 auto;
  padding: 0 clamp(18px, 3.5vw, 56px);
  height: 62px;
}
.fk-bar__brand { flex-shrink: 0; }

.fk-bar__search {
  display: flex; align-items: center; gap: 10px;
  flex: 1; max-width: 520px; height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-family: var(--fk-sans);
  font-size: var(--fk-t-sm);
  color: var(--fk-text-muted);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease);
}
.fk-bar__search:hover { background: var(--fk-accent-soft); }
.fk-bar__search-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fk-bar__kbd {
  flex-shrink: 0; padding: 2px 7px;
  border-radius: 6px; background: rgba(0, 0, 0, .07);
  font-family: var(--fk-sans); font-size: var(--fk-t-2xs); font-weight: 600;
}

.fk-bar__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.fk-bar__link {
  padding: 8px 12px; border-radius: 999px;
  font-size: var(--fk-t-sm); font-weight: 500;
  color: var(--fk-text);
  transition: background-color var(--fk-fast) var(--fk-ease);
}
.fk-bar__link:hover { background: var(--fk-canvas-deep); }

@media (max-width: 900px) { .fk-bar__nav, .fk-bar__kbd { display: none; } }

/* =====================================================================
   5. BUSCADOR · hoja azul que baja desde arriba
   ===================================================================== */

body.fk-buscador-abierto { overflow: hidden; padding-right: var(--fk-barra-scroll, 0); }

.fk-buscador { position: fixed; inset: 0; z-index: 1200; }
.fk-buscador__fondo {
  position: absolute; inset: 0;
  background: rgba(10, 12, 40, .55);
  opacity: 0;
  transition: opacity 240ms var(--fk-ease);
}
.fk-buscador.is-open .fk-buscador__fondo { opacity: 1; }

.fk-buscador__hoja {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; flex-direction: column;
  max-height: min(92dvh, 980px);
  background: var(--fk-accent);
  color: var(--fk-on-accent);
  border-radius: 0 0 var(--fk-r) var(--fk-r);
  transform: translateY(-14px);
  opacity: 0;
  transition: transform 280ms var(--fk-ease), opacity 180ms linear;
}
.fk-buscador.is-open .fk-buscador__hoja { transform: none; opacity: 1; }

.fk-buscador__barra {
  display: flex; align-items: center; gap: 16px;
  flex-shrink: 0;
  padding: clamp(18px, 2.4vw, 28px) clamp(18px, 4vw, 56px);
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.fk-buscador input.fk-buscador__campo {
  flex: 1; min-width: 0;
  border: 0 !important; outline: 0; background: transparent !important;
  font-family: var(--fk-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.4rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -.035em;
  color: #FFF !important;
  caret-color: var(--fk-brasa);
}
.fk-buscador input.fk-buscador__campo::placeholder { color: rgba(255, 255, 255, .5); }
.fk-buscador input.fk-buscador__campo:focus { box-shadow: none !important; }
.fk-buscador input.fk-buscador__campo::-webkit-search-cancel-button { display: none; }

.fk-buscador__cerrar {
  flex-shrink: 0;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: transparent;
  font-family: var(--fk-sans);
  font-size: var(--fk-t-sm); font-weight: 500;
  color: #FFF;
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-buscador__cerrar:hover { background: #FFF; color: var(--fk-accent); }

.fk-buscador__cuerpo {
  flex: 1; overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(20px, 2.6vw, 32px) clamp(18px, 4vw, 56px) clamp(26px, 4vw, 44px);
  display: flex; flex-direction: column; gap: clamp(22px, 2.6vw, 34px);
}

.fk-bloque__titulo {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 14px;
  font-family: var(--fk-sans) !important;
  font-size: var(--fk-t-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: rgba(255, 255, 255, .72);
}
.fk-bloque__todo { margin-left: auto; font-weight: 600; color: #FFF; border-bottom: 1px solid rgba(255,255,255,.6); }
.fk-bloque__todo:hover { color: var(--fk-brasa); border-color: var(--fk-brasa); }

.fk-fichas { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-ficha {
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  font-size: var(--fk-t-sm); font-weight: 500;
  color: #FFF;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-ficha:hover { background: #FFF; color: var(--fk-accent); }

.fk-familias { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 12px; }
.fk-familia {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--fk-r);
  background: rgba(255, 255, 255, .1);
}
.fk-familia img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fk-ease); }
.fk-familia:hover img { transform: scale(1.05); }
.fk-familia__nombre {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 12px 11px;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 36, .82));
  color: #FFF;
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-md); letter-spacing: -.025em;
}
.fk-familia__n {
  position: absolute; right: 9px; top: 9px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--fk-brasa); color: #FFF;
  font-size: var(--fk-t-2xs); font-weight: 700;
}

.fk-marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 8px; }
/* Fondo blanco y sin filtros: los logotipos están dibujados para blanco. */
.fk-marca {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  border-radius: var(--fk-r-s);
  background: #FFF;
  transition: transform var(--fk-fast) var(--fk-ease);
}
.fk-marca:hover { transform: translateY(-2px); }
.fk-marca__logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; height: 28px; }
.fk-marca__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fk-marca__nombre { font-size: var(--fk-t-sm); font-weight: 500; color: var(--fk-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fk-prendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.fk-prenda__foto {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--fk-r); background: rgba(255,255,255,.1);
  margin-bottom: 9px;
}
.fk-prenda__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fk-ease); }
.fk-prenda:hover .fk-prenda__foto img { transform: scale(1.04); }
.fk-prenda__marca { display: block; font-size: var(--fk-t-xs); color: rgba(255, 255, 255, .7); }
.fk-prenda__titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 2px 0; font-size: var(--fk-t-sm); line-height: 1.3; color: #FFF;
}
.fk-prenda__precio { display: block; font-weight: 700; font-size: var(--fk-t-sm); color: #FFF; }

.fk-buscador__vacio { margin: 0; padding: 40px 0; text-align: center; font-size: var(--fk-t-lg); color: rgba(255,255,255,.85); }
.fk-buscador__pie {
  display: flex; align-items: center; gap: 20px; flex-shrink: 0;
  padding: 11px clamp(18px, 4vw, 56px);
  border-top: 1px solid rgba(255, 255, 255, .22);
  font-size: var(--fk-t-xs);
  color: rgba(255, 255, 255, .7);
}
.fk-buscador__pie kbd {
  display: inline-block; min-width: 18px; padding: 1px 6px;
  border-radius: 5px; background: rgba(255, 255, 255, .18);
  font-family: var(--fk-sans); text-align: center;
}
.fk-buscador__pie-marca { margin-left: auto; font-weight: 700; color: #FFF; }

@media (max-width: 620px) {
  .fk-buscador__hoja { max-height: 100dvh; bottom: 0; border-radius: 0; }
  .fk-familias, .fk-prendas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =====================================================================
   6. LA BANDADA · la portada
   El enunciado a la izquierda sobre el azul y las marcas derivando a la
   derecha en filas de sentido alterno. Es el único movimiento que no
   provoca quien mira, y está ahí porque el nombre lo pide.
   ===================================================================== */

.bandada {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(40px, 6vw, 86px) 0 clamp(44px, 6vw, 92px);
  overflow: hidden;
  background: var(--fk-accent);
  color: var(--fk-on-accent);
}

.bandada__decir { padding-left: clamp(18px, 3.5vw, 56px); }
.bandada__decir h1 {
  margin: 0;
  max-width: 15ch;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(2.2rem, 4.6vw, 4.2rem) !important;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  color: #FFF !important;
  text-wrap: balance;
}
.bandada__decir p {
  margin: clamp(16px, 2vw, 26px) 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, 1.35vw, 1.2rem);
  line-height: 1.5;
  color: rgba(255, 255, 255, .85);
}
.bandada__acciones { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 2.6vw, 32px); }

/* --- Las filas que derivan --- */
.bandada__filas { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bandada__fila { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.bandada__pista {
  display: flex; gap: 12px; width: max-content;
  animation: fk-deriva var(--fk-deriva, 46s) linear infinite;
}
.bandada__fila:nth-child(even) .fk-pista,
.bandada__fila:nth-child(even) .bandada__pista { animation-direction: reverse; }
.bandada__fila:hover .bandada__pista { animation-play-state: paused; }
@keyframes fk-deriva { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bandada__marca {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: clamp(124px, 12vw, 176px);
  height: clamp(78px, 7.4vw, 108px);
  padding: 14px 18px;
  overflow: hidden;
  border-radius: var(--fk-r);
  background: #FFF;
  transition: transform 300ms var(--fk-ease);
}
.bandada__marca:hover { transform: translateY(-4px); }
.bandada__marca img {
  position: relative; z-index: 2;
  max-width: 100%; max-height: 62%;
  width: auto; height: auto; object-fit: contain;
  transition: opacity 240ms var(--fk-ease);
}
.bandada__foto {
  position: absolute; inset: 0; z-index: 1;
  background: var(--fk-canvas-deep) center / cover no-repeat;
  opacity: 0;
  transition: opacity 280ms var(--fk-ease);
}
.bandada__marca:hover .bandada__foto { opacity: 1; }
.bandada__marca:hover img { opacity: 0; }
.bandada__nombre {
  position: absolute; inset: auto 0 0 0; z-index: 3;
  padding: 20px 10px 8px;
  background: linear-gradient(180deg, transparent, rgba(6, 8, 36, .8));
  color: #FFF;
  font-size: var(--fk-t-xs); font-weight: 600;
  opacity: 0;
  transition: opacity 240ms var(--fk-ease);
}
.bandada__marca:hover .bandada__nombre { opacity: 1; }

@media (max-width: 980px) {
  .bandada { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: clamp(32px, 6vw, 56px); }
  .bandada__decir { padding-inline: clamp(18px, 4vw, 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .bandada__pista { animation: none; }
  .bandada__fila { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
}

/* =====================================================================
   7. BOTONES
   ===================================================================== */

.fk-boton {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--fk-text);
  color: #FFF;
  font-family: var(--fk-sans);
  font-size: var(--fk-t-md);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 170ms var(--fk-ease), color 170ms var(--fk-ease), transform 170ms var(--fk-ease);
}
.fk-boton:hover { background: var(--fk-brasa); color: #FFF; transform: translateY(-2px); }
.fk-boton:active { transform: none; }

/* Sobre el azul, el principal se invierte */
.fk-boton--claro { background: #FFF; color: var(--fk-accent); }
.fk-boton--claro:hover { background: var(--fk-brasa); color: #FFF; }
.fk-boton--linea {
  background: transparent; color: currentColor;
  box-shadow: inset 0 0 0 1.5px currentColor;
}
.fk-boton--linea:hover { background: currentColor; color: var(--fk-accent); box-shadow: none; }
.bandada .fk-boton--linea:hover { color: var(--fk-accent); }

/* =====================================================================
   8. TITULARES DE SECCIÓN
   ===================================================================== */

.fk-titulo {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(18px, 2.4vw, 32px);
}
.fk-titulo h2 {
  margin: 0;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.7rem, 4vw, 3rem) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
}
.fk-titulo p { margin: 8px 0 0; max-width: 52ch; color: var(--fk-text-soft); }
.fk-titulo a { font-weight: 600; color: var(--fk-accent); }
.fk-titulo a:hover { color: var(--fk-brasa); }

/* =====================================================================
   9. CAMPAÑA · imagen o vídeo a sangre
   ===================================================================== */

.fk-campana { padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px); }
.fk-campana__media {
  position: relative; width: 100%; aspect-ratio: 21 / 9;
  overflow: hidden; border-radius: var(--fk-r);
}
.fk-campana__media video, .fk-campana__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fk-campana__pie {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-top: clamp(16px, 2vw, 24px);
}
.fk-campana__pie h2 {
  margin: 0;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.4rem, 3vw, 2.4rem) !important;
  letter-spacing: -.04em !important;
  line-height: 1.02 !important;
}
.fk-campana__pie p { margin: 8px 0 0; max-width: 48ch; color: var(--fk-text-soft); }
@media (max-width: 760px) { .fk-campana__media { aspect-ratio: 4 / 5; } }

/* =====================================================================
   10. CATEGORÍAS
   ===================================================================== */

.banner-block {
  display: grid !important;
  gap: 12px !important;
  padding: 0 clamp(18px, 3.5vw, 56px) !important;
}
.banner-item { position: relative; overflow: hidden; border-radius: var(--fk-r); }
.banner-item .banner-img img {
  width: 100%; height: 100%; object-fit: cover;
  aspect-ratio: 4 / 3;
  transition: transform 700ms var(--fk-ease);
}
.banner-item:hover .banner-img img { transform: scale(1.04); }
.banner-item .banner-content {
  position: absolute; inset: auto 0 0 0 !important;
  display: block !important; height: auto !important;
  padding: 16px !important;
}
.banner-item .heading2 {
  display: inline-block; margin: 0;
  padding: 9px 20px; border-radius: 999px;
  background: #FFF;
  color: var(--fk-text) !important;
  font-size: clamp(.95rem, 1.6vw, 1.2rem) !important;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.banner-item:hover .heading2 { background: var(--fk-accent); color: #FFF !important; }

/* =====================================================================
   11. PRODUCTO
   ===================================================================== */

.product-thumb {
  border-radius: var(--fk-r) !important;
  background: var(--fk-canvas-deep) !important;
  overflow: hidden;
}
.product-img img { transition: transform 700ms var(--fk-ease); }
.product-main:hover .product-img img { transform: scale(1.05); }
.product-main .mt-4 { text-align: left !important; padding: 12px 2px 0 !important; }
.product-main h3 {
  font-family: var(--fk-sans) !important;
  font-size: var(--fk-t-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
.product-main .text-lg { font-size: var(--fk-t-md) !important; font-weight: 700 !important; }

.menu-tab { background: transparent !important; }
.menu-tab .indicator { display: none !important; }
.menu-tab .tab-item {
  padding: 8px 18px !important;
  margin-right: 6px;
  border-radius: 999px !important;
  background: var(--fk-canvas-deep);
  font-family: var(--fk-sans) !important;
  font-size: var(--fk-t-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--fk-text) !important;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.menu-tab .tab-item:hover { background: var(--fk-accent-soft); }
.menu-tab .tab-item.active { background: var(--fk-accent); color: #FFF !important; }

.fk-grupo-titulo {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px; padding-bottom: 10px;
  border-bottom: 1px solid var(--fk-line);
}
.fk-grupo-titulo span { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-xl); letter-spacing: -.03em; }
.fk-grupo-titulo i {
  font-style: normal; padding: 2px 10px; border-radius: 999px;
  background: var(--fk-accent); color: #FFF;
  font-size: var(--fk-t-xs); font-weight: 600;
}

/* =====================================================================
   12. DIRECTORIO DE MARCAS · /marcas
   ===================================================================== */

.fk-directory { padding: 0 0 clamp(34px, 4.6vw, 64px); }
.fk-directory .container { max-width: 1500px !important; padding-inline: clamp(18px, 3.5vw, 56px) !important; }

.fk-directory__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding: clamp(30px, 4.4vw, 62px) 0 clamp(20px, 2.6vw, 34px);
}
.fk-directory__title {
  margin: 0;
  font-size: clamp(2rem, 5.4vw, 4rem) !important;
  line-height: .98 !important;
  letter-spacing: -.045em !important;
}
.fk-directory__sub { margin: 12px 0 0; max-width: 46ch; color: var(--fk-text-soft); }

.fk-directory__search {
  display: flex; align-items: center; gap: 10px;
  min-width: min(320px, 100%);
  height: 48px; padding: 0 18px;
  border-radius: 999px;
  background: var(--fk-canvas-deep);
}
.fk-directory__search input {
  flex: 1; min-width: 0;
  border: 0 !important; outline: 0; background: transparent !important;
  font-size: var(--fk-t-md); color: var(--fk-text) !important;
}
.fk-directory__search input::-webkit-search-cancel-button { display: none; }

.fk-directory__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 12px; }
.fk-directory__item {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px;
  min-height: 168px;
  padding: 24px 18px;
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
  text-align: center;
  transition: background-color var(--fk-fast) var(--fk-ease), transform var(--fk-fast) var(--fk-ease);
}
.fk-directory__item:hover { background: var(--fk-accent-soft); transform: translateY(-3px); }
.fk-directory__logo { display: flex; align-items: center; justify-content: center; height: 46px; }
.fk-directory__logo img { max-width: 140px; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.fk-directory__name { font-size: var(--fk-t-sm); font-weight: 500; color: var(--fk-text); }
.fk-directory__tagline { font-size: var(--fk-t-xs); color: var(--fk-text-soft); }
.fk-directory__empty { padding: 40px 0; text-align: center; font-size: var(--fk-t-lg); }

/* =====================================================================
   13. UNIFICACIÓN CON LA PLANTILLA
   ===================================================================== */

.text-gray-900, .text-gray-800, .text-neutral-800, .text-black { color: var(--fk-text) !important; }
.text-gray-700, .text-neutral-700, .text-gray-600, .text-gray-500,
.text-neutral-500, .text-secondary, .caption1, .caption2 { color: var(--fk-text-soft) !important; }

.bg-white, .bg-surface { background-color: var(--fk-canvas) !important; }
.bg-gray-50, .bg-neutral-50, .bg-gray-100, .bg-neutral-100, .bg-linear { background-color: var(--fk-canvas-deep) !important; }
.bg-gray-800, .bg-gray-900, .bg-black, .bg-dark { background-color: var(--fk-text) !important; }
.border-gray-300, .border-neutral-300, .border-line { border-color: var(--fk-line) !important; }
.rounded-xl, .rounded-2xl, .rounded-lg, .rounded-\[20px\], .rounded-\[32px\] { border-radius: var(--fk-r) !important; }

input[type='text'], input[type='search'], input[type='email'],
input[type='tel'], input[type='password'], textarea, select {
  font-family: var(--fk-sans);
  background: var(--fk-canvas);
  border: 1px solid var(--fk-line-strong);
  color: var(--fk-text);
  border-radius: var(--fk-r-s);
}
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--fk-accent) !important; box-shadow: none; }
::placeholder { color: var(--fk-text-muted); opacity: 1; }

a { color: inherit; text-decoration: none; }

.shop-product, .tab-features-block, .news-block, .brand-section, .text-section-wide {
  padding-block: clamp(36px, 5vw, 72px);
}

.button-main {
  border-radius: 999px !important;
  background: var(--fk-text) !important;
  color: #FFF !important;
  font-family: var(--fk-sans) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color var(--fk-fast) var(--fk-ease) !important;
}
.button-main:hover { background: var(--fk-brasa) !important; color: #FFF !important; }

.fk-empty { border: 0; border-radius: var(--fk-r); background: var(--fk-canvas-deep); }
.fk-empty__mark { background: var(--fk-accent); color: #FFF; }
.fk-empty__title { text-transform: none; font-family: var(--fk-display); }

/* Aviso de cookies de Zoho */
#gdpr_banner.zoho-msgbanr, #consent_container {
  font-family: var(--fk-sans) !important;
  background: var(--fk-text) !important;
  color: #FFF !important;
}
#gdpr_banner a, #consent_container a { color: #FFF !important; text-decoration: underline; }
#gdpr_banner button, #consent_container button {
  background: var(--fk-accent) !important; color: #FFF !important;
  border: 0 !important; border-radius: 999px !important;
  font-family: var(--fk-sans) !important; font-weight: 600 !important;
  padding: 10px 22px !important;
}

/* =====================================================================
   14. EL PIE · azul entero
   ===================================================================== */

.pie { background: var(--fk-accent); color: var(--fk-on-accent); }
.pie__ancho {
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding: clamp(32px, 4.4vw, 60px) clamp(18px, 3.5vw, 56px) clamp(20px, 2.4vw, 32px);
}

.pie__reclamo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: clamp(26px, 3.2vw, 44px);
  margin-bottom: clamp(26px, 3.2vw, 44px);
  border-bottom: 1px solid rgba(255, 255, 255, .26);
}
.pie__reclamo p {
  margin: 0;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.6rem, 4vw, 3.2rem);
  line-height: .98; letter-spacing: -.045em;
  max-width: 16ch;
  color: #FFF;
}

.pie__rejilla {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr) 1.4fr;
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(26px, 3.2vw, 44px);
}
.pie__marca .fk-logo { color: #FFF; }
.pie__marca p { margin: 18px 0 14px; max-width: 30ch; font-size: var(--fk-t-sm); line-height: 1.55; color: rgba(255,255,255,.82); }
.pie__correo { font-weight: 600; color: #FFF; border-bottom: 1px solid rgba(255,255,255,.55); }
.pie__correo:hover { color: var(--fk-brasa); border-color: var(--fk-brasa); }

.pie__columna { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.pie h2 {
  margin: 0 0 10px;
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-lg); letter-spacing: -.03em;
  color: #FFF;
}
.pie__columna a { font-size: var(--fk-t-sm); color: rgba(255,255,255,.85); transition: color var(--fk-fast) var(--fk-ease); }
.pie__columna a:hover { color: #FFF; }

.pie__boletin p { margin: 0 0 14px; font-size: var(--fk-t-sm); max-width: 28ch; color: rgba(255,255,255,.82); }
.pie__formulario { display: flex; gap: 8px; }
.pie__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pie__formulario input {
  flex: 1; min-width: 0; height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .4) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-size: var(--fk-t-sm);
  color: #FFF !important;
}
.pie__formulario input::placeholder { color: rgba(255, 255, 255, .55) !important; }
.pie__formulario button {
  height: 46px; padding: 0 22px;
  border: 0; border-radius: 999px;
  background: #FFF; color: var(--fk-accent);
  font-family: var(--fk-sans); font-size: var(--fk-t-sm); font-weight: 600;
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.pie__formulario button:hover { background: var(--fk-brasa); color: #FFF; }

.pie__redes { display: flex; gap: 10px; margin-top: 18px; }
.pie__redes a {
  display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .16);
  font-size: 18px; color: #FFF;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.pie__redes a:hover { background: #FFF; color: var(--fk-accent); }

.pie__legal {
  margin: 0; padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .26);
  font-size: var(--fk-t-xs);
  color: rgba(255, 255, 255, .7);
}

@media (max-width: 1000px) {
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__marca, .pie__boletin { grid-column: 1 / -1; }
}
@media (max-width: 520px) { .pie__rejilla { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   15. PÁGINAS INTERIORES
   ===================================================================== */

.cabecera {
  padding: clamp(36px, 5vw, 80px) clamp(18px, 3.5vw, 56px) clamp(28px, 3.6vw, 52px);
  background: var(--fk-accent);
  color: var(--fk-on-accent);
}
.cabecera--alta { padding-block: clamp(46px, 7vw, 104px) clamp(32px, 4vw, 62px); }
.cabecera h1 {
  margin: 0; max-width: 19ch;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(2rem, 5.8vw, 4.4rem) !important;
  line-height: .96 !important;
  letter-spacing: -.05em !important;
  color: #FFF !important;
}
.cabecera p { margin: clamp(16px, 2vw, 26px) 0 0; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.85); }
.cabecera__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* --- Preguntas frecuentes --- */
.preguntas { width: 100%; max-width: 880px; margin: 0 auto; padding: clamp(30px, 4vw, 64px) clamp(18px, 3.5vw, 56px) clamp(44px, 5vw, 84px); }
.pregunta { border-bottom: 1px solid var(--fk-line); }
.pregunta summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-family: var(--fk-display); font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.3rem); letter-spacing: -.025em;
  transition: color var(--fk-fast) var(--fk-ease);
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta summary::after {
  content: ''; flex-shrink: 0;
  width: 13px; height: 13px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform 220ms var(--fk-ease);
}
.pregunta[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.pregunta summary:hover { color: var(--fk-accent); }
.pregunta p { margin: 0 0 24px; max-width: 68ch; font-size: var(--fk-t-md); line-height: 1.65; color: var(--fk-text-soft); }

.preguntas__pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  margin-top: clamp(30px, 4vw, 54px);
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.preguntas__pie p { margin: 0; font-family: var(--fk-display); font-weight: 800; font-size: clamp(1.2rem, 2.4vw, 1.8rem); letter-spacing: -.035em; }

/* --- Bloques de tres --- */
.ventajas, .nosotros__puntos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 12px;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px);
}
.ventajas > div, .nosotros__puntos > div {
  padding: clamp(24px, 3vw, 38px);
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.ventajas h2, .nosotros__puntos h2 {
  margin: 0 0 12px;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.03em !important;
  color: var(--fk-accent) !important;
}
.ventajas p, .nosotros__puntos p { margin: 0; font-size: var(--fk-t-md); line-height: 1.6; color: var(--fk-text-soft); }

/* --- Formularios --- */
.formulario {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 60px);
  width: 100%; max-width: 1180px; margin: 0 auto;
  padding: clamp(32px, 4.4vw, 68px) clamp(18px, 3.5vw, 56px) clamp(44px, 5vw, 84px);
}
.formulario__campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-content: start; }
.formulario__campos label { display: flex; flex-direction: column; gap: 8px; }
.formulario__ancho { grid-column: 1 / -1; }
.formulario__campos span { font-size: var(--fk-t-sm); font-weight: 600; }
.formulario__campos input, .formulario__campos textarea {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--fk-line-strong) !important;
  border-radius: var(--fk-r-s) !important;
  background: var(--fk-canvas) !important;
  font-family: var(--fk-sans); font-size: var(--fk-t-md);
  color: var(--fk-text) !important;
  resize: vertical;
}
.formulario__campos [aria-invalid='true'] { border-color: var(--fk-brasa) !important; }
.formulario__campos button { grid-column: 1 / -1; justify-self: start; }
.formulario__aviso, .formulario__error {
  grid-column: 1 / -1; margin: 0;
  padding: 14px 18px; border-radius: var(--fk-r-s);
  font-weight: 500;
}
.formulario__aviso { background: var(--fk-accent-soft); color: var(--fk-accent); }
.formulario__error { background: var(--fk-brasa-soft); color: #B02A10; }

.formulario__aparte { padding: clamp(22px, 2.6vw, 32px); border-radius: var(--fk-r); background: var(--fk-canvas-deep); align-self: start; }
.formulario__aparte h2 {
  margin: 0 0 14px;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-size: var(--fk-t-xl) !important; letter-spacing: -.03em !important;
}
.formulario__aparte p { margin: 0 0 14px; font-size: var(--fk-t-md); line-height: 1.6; color: var(--fk-text-soft); }
.formulario__aparte a { font-weight: 600; color: var(--fk-accent); }
.formulario__aparte a:hover { color: var(--fk-brasa); }
.formulario__correo { font-family: var(--fk-display); font-weight: 800; }

@media (max-width: 860px) {
  .formulario, .formulario__campos { grid-template-columns: minmax(0, 1fr); }
}

/* --- Quiénes somos --- */
.nosotros > * { margin: 0; }
.nosotros__foto { position: relative; margin: 0; padding: 0 clamp(18px, 3.5vw, 56px); }
.nosotros__foto img {
  display: block; width: 100%;
  height: clamp(300px, 52vh, 560px);
  object-fit: cover; border-radius: var(--fk-r);
}
.nosotros__foto figcaption { padding: 12px 2px 0; font-size: var(--fk-t-sm); color: var(--fk-text-soft); }

.nosotros__manifiesto { padding: clamp(40px, 6vw, 88px) clamp(18px, 3.5vw, 56px); }
.nosotros__manifiesto p:first-child {
  margin: 0 0 24px; max-width: 20ch;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.7rem, 4.6vw, 3.4rem);
  line-height: 1; letter-spacing: -.045em;
}
.nosotros__manifiesto p:last-child { margin: 0; max-width: 62ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.65; color: var(--fk-text-soft); }

.nosotros__cierre { padding: clamp(40px, 6vw, 88px) clamp(18px, 3.5vw, 56px); background: var(--fk-accent); color: var(--fk-on-accent); }
.nosotros__cierre h2 {
  margin: 0 0 18px;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-size: clamp(1.7rem, 4.4vw, 3.2rem) !important;
  line-height: 1 !important; letter-spacing: -.045em !important;
  color: #FFF !important;
}
.nosotros__cierre p { margin: 0 0 28px; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.6; color: rgba(255,255,255,.85); }
.nosotros__acciones { display: flex; flex-wrap: wrap; gap: 12px; }

/* --- Stories --- */
.proximas { padding: clamp(32px, 4vw, 64px) clamp(18px, 3.5vw, 56px) clamp(44px, 5vw, 84px); }
.proximas h2 {
  margin: 0 0 22px;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-size: clamp(1.4rem, 3vw, 2.2rem) !important; letter-spacing: -.04em !important;
}
.proximas__tira { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 14px; }
.proximas__marca { display: block; }
.proximas__foto {
  display: block; aspect-ratio: 3 / 4;
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep) center / cover no-repeat;
}
.proximas__nombre {
  display: block; padding: 12px 2px 0;
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-md); letter-spacing: -.025em;
}
.proximas__marca:hover .proximas__nombre { color: var(--fk-accent); }

/* =====================================================================
   16. MOVIMIENTO
   Sólo hay uno que no provoca quien mira: la deriva de la bandada.
   ===================================================================== */

.fk-scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1000;
  background: var(--fk-brasa);
  transform: scaleX(0); transform-origin: 0 50%;
}

.scroll-to-top-btn {
  position: fixed; right: 22px; bottom: 22px; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  border-radius: 999px;
  background: var(--fk-accent); color: #FFF;
  opacity: 0; transform: translateY(10px); pointer-events: none;
  transition: opacity var(--fk-base) var(--fk-ease), transform var(--fk-base) var(--fk-ease), background-color var(--fk-fast) var(--fk-ease);
}
body.fk-scrolled-far .scroll-to-top-btn { opacity: 1; transform: none; pointer-events: auto; }
.scroll-to-top-btn:hover { background: var(--fk-brasa); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =====================================================================
   17. CÓMO FUNCIONA
   ===================================================================== */

.funciona { padding: clamp(36px, 5vw, 76px) clamp(18px, 3.5vw, 56px) clamp(44px, 6vw, 88px); }
.funciona__decir { max-width: 60ch; margin-bottom: clamp(24px, 3vw, 40px); }
.funciona__decir h2 {
  margin: 0;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.8rem, 4.4vw, 3.2rem) !important;
  line-height: 1 !important;
  letter-spacing: -.045em !important;
}
.funciona__decir p { margin: 16px 0 0; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--fk-text-soft); }

.funciona__pasos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 12px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.funciona__pasos > div { padding: clamp(22px, 2.8vw, 34px); border-radius: var(--fk-r); background: var(--fk-canvas-deep); }
.funciona__pasos h3 {
  margin: 0 0 10px;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-size: clamp(1.05rem, 1.7vw, 1.4rem) !important;
  line-height: 1.08 !important; letter-spacing: -.03em !important;
  color: var(--fk-accent) !important;
}
.funciona__pasos p { margin: 0; font-size: var(--fk-t-md); line-height: 1.6; color: var(--fk-text-soft); }

.funciona__foto { margin: 0; }
.funciona__foto img {
  display: block; width: 100%;
  height: clamp(220px, 34vh, 380px);
  object-fit: cover; border-radius: var(--fk-r);
}
.funciona__foto figcaption { padding: 12px 2px 0; font-size: var(--fk-t-sm); color: var(--fk-text-soft); }

/* =====================================================================
   18. CAPTACIÓN DE MARCAS · /join-us
   Dos caminos en paralelo: quien ya vende y quien todavía no. El segundo
   va destacado porque es el que convence a una marca pequeña.
   ===================================================================== */

.caminos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px);
}
.camino {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3.2vw, 40px);
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.camino--destacado { background: var(--fk-accent); color: var(--fk-on-accent); }

.camino__quien {
  margin: 0 0 12px;
  font-size: var(--fk-t-sm); font-weight: 600;
  color: var(--fk-accent);
}
.camino--destacado .camino__quien { color: rgba(255, 255, 255, .78); }

.camino h2 {
  margin: 0 0 14px;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 2.4vw, 1.9rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -.04em !important;
}
.camino--destacado h2 { color: #FFF !important; }
.camino > p { margin: 0 0 18px; font-size: var(--fk-t-md); line-height: 1.6; color: var(--fk-text-soft); }
.camino--destacado > p { color: rgba(255, 255, 255, .88); }

.camino__lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.camino__lista li {
  position: relative;
  padding-left: 26px;
  font-size: var(--fk-t-md); line-height: 1.5;
}
/* La marca de verificación es un tic dibujado, no un emoji ni un guion */
.camino__lista li::before {
  content: '';
  position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--fk-accent);
  border-bottom: 2px solid var(--fk-accent);
  transform: rotate(-45deg);
}
.camino--destacado .camino__lista li::before { border-color: #FFF; }
.camino__nota { margin: 18px 0 0; font-size: var(--fk-t-sm); font-weight: 600; }
.camino--destacado .camino__nota { color: #FFF; }

/* --- Qué se vende --- */
.quese { padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px); }
.quese__rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 12px; }
.quese__familia { display: flex; flex-direction: column; }
.quese__familia img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--fk-r); margin-bottom: 10px;
}
.quese__nombre { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-lg); letter-spacing: -.03em; }
.quese__n { font-size: var(--fk-t-sm); color: var(--fk-text-soft); }
.quese__pie { margin: clamp(20px, 2.6vw, 30px) 0 0; max-width: 62ch; font-size: var(--fk-t-md); line-height: 1.6; color: var(--fk-text-soft); }

/* --- Campos extra del alta --- */
.formulario__campos select {
  width: 100%; padding: 13px 16px;
  border: 1px solid var(--fk-line-strong) !important;
  border-radius: var(--fk-r-s) !important;
  background: var(--fk-canvas) !important;
  font-family: var(--fk-sans); font-size: var(--fk-t-md);
  color: var(--fk-text) !important;
}
.formulario__campos label i { font-style: normal; font-weight: 400; color: var(--fk-text-muted); }

.formulario__grupo { margin: 0; padding: 0; border: 0; }
.formulario__grupo legend { padding: 0 0 10px; font-size: var(--fk-t-sm); font-weight: 600; }
.formulario__casillas { display: flex; flex-wrap: wrap; gap: 8px; }
.casilla { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px; background: var(--fk-canvas-deep); cursor: pointer;
  font-size: var(--fk-t-sm); transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease); }
.casilla input { width: 15px; height: 15px; accent-color: var(--fk-accent); margin: 0; flex-shrink: 0; }
.casilla:has(input:checked) { background: var(--fk-accent); color: #FFF; }
.casilla span { font-weight: 500; }

/* =====================================================================
   19. ÁREA DEL SOCIO · /cuenta
   ===================================================================== */

.socio {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(34px, 5vw, 72px) clamp(18px, 3.5vw, 56px);
  background: var(--fk-accent);
  color: var(--fk-on-accent);
}
.socio__saludo { margin: 0 0 6px; font-size: var(--fk-t-md); color: rgba(255,255,255,.78); }
.socio__quien h1 {
  margin: 0;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(2.2rem, 6vw, 4.4rem) !important;
  line-height: .96 !important; letter-spacing: -.05em !important;
  color: #FFF !important;
}
.socio__puntos { margin: 12px 0 0; font-size: var(--fk-t-lg); color: rgba(255,255,255,.88); }
.socio__puntos b { font-family: var(--fk-display); font-weight: 800; font-size: 1.5em; }

.socio__barra {
  height: 8px; margin: 20px 0 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .26); overflow: hidden;
}
.socio__barra span { display: block; height: 100%; border-radius: 999px; background: #FFF; transition: width 600ms var(--fk-ease); }
.socio__falta { margin: 0; font-size: var(--fk-t-sm); color: rgba(255,255,255,.82); }
.socio__falta b { color: #FFF; }

.socio__ventajas { align-self: center; }
.socio__ventajas h2 {
  margin: 0 0 14px;
  font-family: var(--fk-display) !important; font-weight: 800 !important;
  font-size: var(--fk-t-xl) !important; letter-spacing: -.03em !important; color: #FFF !important;
}
.socio__ventajas ul { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 9px; }
.socio__ventajas li { position: relative; padding-left: 26px; font-size: var(--fk-t-md); color: rgba(255,255,255,.9); }
.socio__ventajas li::before {
  content: ''; position: absolute; left: 2px; top: .42em;
  width: 11px; height: 6px;
  border-left: 2px solid #FFF; border-bottom: 2px solid #FFF;
  transform: rotate(-45deg);
}

.socio__aviso {
  margin: 0; padding: 14px clamp(18px, 3.5vw, 56px);
  background: var(--fk-accent-soft); color: var(--fk-accent); font-weight: 600;
}

.socio__bloque { padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px) 0; }
.socio__bloque:last-of-type { padding-bottom: clamp(40px, 5vw, 80px); }
.socio__vacio { margin: 0; max-width: 62ch; color: var(--fk-text-soft); }
.socio__vacio a { font-weight: 600; color: var(--fk-accent); }

.rejilla-prendas { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 16px; }

.prenda-ficha { position: relative; }
.prenda-ficha__foto {
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--fk-r); background: var(--fk-canvas-deep); margin-bottom: 10px;
}
.prenda-ficha__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--fk-ease); }
.prenda-ficha:hover .prenda-ficha__foto img { transform: scale(1.04); }
.prenda-ficha__marca { display: block; font-size: var(--fk-t-xs); color: var(--fk-text-soft); }
.prenda-ficha__titulo {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 2px 0; font-size: var(--fk-t-sm); line-height: 1.3;
}
.prenda-ficha__precio { display: block; font-weight: 700; font-size: var(--fk-t-sm); }

.prenda-ficha__guardar { position: absolute; top: 10px; right: 10px; }
.prenda-ficha__guardar button {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--fk-text);
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.prenda-ficha__guardar button:hover { background: var(--fk-accent); color: #FFF; }
.prenda-ficha__guardar .is-guardada { background: var(--fk-accent); color: #FFF; }

.socio__marcas { display: grid; grid-template-columns: repeat(auto-fill, minmax(164px, 1fr)); gap: 12px; }
.socio__marca {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 18px 14px; border-radius: var(--fk-r); background: var(--fk-canvas-deep);
}
.socio__marca-logo { display: flex; align-items: center; justify-content: center; height: 40px; }
.socio__marca-logo img { max-width: 118px; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.socio__soltar {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--fk-sans); font-size: var(--fk-t-xs); color: var(--fk-text-muted);
  border-bottom: 1px solid currentColor;
}
.socio__soltar:hover { color: var(--fk-brasa); }

.socio__libro { margin: 0; padding: 0; list-style: none; max-width: 640px; }
.socio__libro li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: baseline; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--fk-line);
}
.socio__libro-que { font-size: var(--fk-t-md); }
.socio__libro-cuando { font-size: var(--fk-t-xs); color: var(--fk-text-muted); }
.socio__libro-puntos { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-lg); color: var(--fk-accent); }

.casilla--sola { background: var(--fk-canvas-deep); border-radius: var(--fk-r-s); padding: 14px 18px; }

@media (max-width: 900px) { .socio { grid-template-columns: minmax(0, 1fr); } }

/* Entrada al club desde el cabecero */
.fk-cabecero__cuenta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-size: var(--fk-t-sm); font-weight: 500;
  color: var(--fk-text);
  white-space: nowrap;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-cabecero__cuenta:hover { background: var(--fk-accent); color: #FFF; }
.fk-cabecero__cuenta b {
  padding: 1px 8px; border-radius: 999px;
  background: var(--fk-accent); color: #FFF;
  font-size: var(--fk-t-2xs); font-weight: 700;
}
.fk-cabecero__cuenta:hover b { background: #FFF; color: var(--fk-accent); }
.fk-cabecero__cuenta--alta { background: var(--fk-accent); color: #FFF; font-weight: 600; }
.fk-cabecero__cuenta--alta:hover { background: var(--fk-brasa); }
@media (max-width: 860px) { .fk-cabecero__cuenta span { display: none; } }

/* Seguir una marca desde el directorio */
.fk-directory__celda { position: relative; display: flex; }
.fk-directory__celda .fk-directory__item { flex: 1; }
.fk-directory__seguir { position: absolute; right: 10px; top: 10px; }
.fk-directory__seguir button {
  padding: 6px 14px;
  border: 0; border-radius: 999px;
  background: var(--fk-canvas);
  font-family: var(--fk-sans); font-size: var(--fk-t-2xs); font-weight: 600;
  color: var(--fk-text);
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-directory__seguir button:hover { background: var(--fk-accent); color: #FFF; }
.fk-directory__seguir .is-siguiendo { background: var(--fk-accent); color: #FFF; }
.fk-directory__seguir .is-siguiendo:hover { background: var(--fk-brasa); }

/* =====================================================================
   20. ENTRAR Y DARSE DE ALTA
   Media pantalla con la razón para estar aquí y media con el formulario.
   Antes /register era el Bootstrap por defecto, sin nada de la marca.
   ===================================================================== */

body.entrada {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 100dvh;
  margin: 0;
}

.entrada__motivo { position: relative; overflow: hidden; display: flex; }
.entrada__motivo > img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.entrada__velo { position: absolute; inset: 0; background: var(--fk-accent); opacity: .92; }
.entrada__decir {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center;
  gap: 22px;
  padding: clamp(32px, 5vw, 72px);
  color: #FFF;
}
.entrada__logo { color: #FFF; margin-bottom: 8px; }
.entrada__decir h2 {
  margin: 0;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.8rem, 3.6vw, 3.2rem);
  line-height: .98; letter-spacing: -.045em;
  max-width: 14ch;
  color: #FFF !important;
}
.entrada__decir p { margin: 0; max-width: 42ch; font-size: var(--fk-t-lg); line-height: 1.55; color: rgba(255,255,255,.88); }
.entrada__decir ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.entrada__decir li {
  position: relative; padding-left: 28px;
  font-size: var(--fk-t-md); line-height: 1.5; color: rgba(255,255,255,.92);
}
.entrada__decir li::before {
  content: ''; position: absolute; left: 3px; top: .42em;
  width: 12px; height: 6px;
  border-left: 2px solid #FFF; border-bottom: 2px solid #FFF;
  transform: rotate(-45deg);
}
.entrada__regalo {
  align-self: flex-start;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: var(--fk-t-sm) !important; font-weight: 600;
  color: #FFF !important;
}

.entrada__forma { display: flex; align-items: center; justify-content: center; padding: clamp(28px, 4vw, 56px); }
.entrada__caja { width: 100%; max-width: 420px; }
.entrada__logo--movil { display: none; color: var(--fk-text); margin-bottom: 28px; }

.entrada h1 {
  margin: 0 0 8px;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem);
  line-height: 1; letter-spacing: -.045em;
  color: var(--fk-text);
}
.entrada__bajada { margin: 0 0 26px; font-size: var(--fk-t-md); color: var(--fk-text-soft); }

.entrada__campos { display: flex; flex-direction: column; gap: 16px; }
.entrada__campos label { display: flex; flex-direction: column; gap: 7px; }
.entrada__campos span { font-size: var(--fk-t-sm); font-weight: 600; }
.entrada__campos input[type='text'],
.entrada__campos input[type='email'],
.entrada__campos input[type='password'] {
  width: 100%; padding: 14px 16px;
  border: 1px solid var(--fk-line-strong) !important;
  border-radius: var(--fk-r-s) !important;
  background: var(--fk-canvas) !important;
  font-family: var(--fk-sans); font-size: var(--fk-t-md);
  color: var(--fk-text) !important;
}
.entrada__campos input:focus { border-color: var(--fk-accent) !important; outline: none; }
.entrada__campos [aria-invalid='true'] { border-color: var(--fk-brasa) !important; }
.entrada__campos em { font-style: normal; font-size: var(--fk-t-sm); color: var(--fk-brasa); }
.entrada__campos button { margin-top: 6px; justify-content: center; }

.entrada__recordar {
  flex-direction: row !important; align-items: center; gap: 10px;
  font-size: var(--fk-t-sm);
}
.entrada__recordar input { width: 16px; height: 16px; accent-color: var(--fk-accent); margin: 0; }
.entrada__recordar span { font-weight: 400 !important; color: var(--fk-text-soft); }

.entrada__aviso {
  margin: 0 0 20px; padding: 13px 16px;
  border-radius: var(--fk-r-s);
  background: var(--fk-accent-soft); color: var(--fk-accent);
  font-size: var(--fk-t-sm); font-weight: 500;
}
.entrada__pie { margin: 18px 0 0; font-size: var(--fk-t-sm); color: var(--fk-text-soft); }
.entrada__pie a { font-weight: 600; color: var(--fk-accent); }
.entrada__pie a:hover { color: var(--fk-brasa); }
.entrada__pie--marca { padding-top: 18px; border-top: 1px solid var(--fk-line); }

@media (max-width: 900px) {
  body.entrada { grid-template-columns: minmax(0, 1fr); }
  .entrada__motivo { display: none; }
  .entrada__logo--movil { display: inline-flex; }
  .entrada__forma { align-items: flex-start; padding-top: clamp(32px, 8vh, 64px); }
}

/* =====================================================================
   21. AGOTADO Y AVISO DE REPOSICIÓN
   Una prenda agotada no se esconde: se marca. Esconderla pierde la venta
   y pierde la señal de que alguien la quería.
   ===================================================================== */

.prenda-ficha--agotada .prenda-ficha__foto img { filter: grayscale(.7); opacity: .72; }
.prenda-ficha__sello {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: var(--fk-text); color: #FFF;
  font-size: var(--fk-t-2xs); font-weight: 700;
}
.prenda-ficha__foto { position: relative; }
.prenda-ficha--agotada .prenda-ficha__precio { color: var(--fk-text-muted); text-decoration: line-through; }

.avisame { margin-top: 8px; }
.avisame summary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-size: var(--fk-t-xs); font-weight: 600;
  color: var(--fk-accent);
  cursor: pointer; list-style: none;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.avisame summary::-webkit-details-marker { display: none; }
.avisame summary:hover { background: var(--fk-accent); color: #FFF; }
.avisame[open] summary { background: var(--fk-accent); color: #FFF; }
.avisame form { display: flex; gap: 6px; margin-top: 8px; }
.avisame input {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--fk-line-strong) !important;
  border-radius: 999px !important;
  background: var(--fk-canvas) !important;
  font-size: var(--fk-t-xs); color: var(--fk-text) !important;
}
.avisame button {
  padding: 9px 16px; border: 0; border-radius: 999px;
  background: var(--fk-text); color: #FFF;
  font-family: var(--fk-sans); font-size: var(--fk-t-xs); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background-color var(--fk-fast) var(--fk-ease);
}
.avisame button:hover { background: var(--fk-brasa); }
.avisame__oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Nombre de etiqueta dentro de un texto corrido */
.funciona__pasos code {
  padding: 2px 8px; border-radius: 6px;
  background: var(--fk-accent-soft); color: var(--fk-accent);
  font-family: var(--fk-mono); font-size: .92em;
}

/* =====================================================================
   22. REJILLA EDITORIAL
   Las tres páginas de contenido —quiénes somos, stories, live— eran la
   misma pila de bloques a todo el ancho: banda, foto, texto, tres cajas,
   banda. Cambiaba el texto y nada más. Esto da columnas de verdad, una
   medida de lectura y un índice que acompaña al bajar.
   ===================================================================== */

.hoja { --hoja-borde: clamp(18px, 3.5vw, 56px); }

.hoja__reja {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2.4vw, 34px);
  width: 100%; max-width: 1500px; margin: 0 auto;
  padding-inline: var(--hoja-borde);
}

/* La columna que acompaña mientras se lee */
.hoja__indice {
  grid-column: span 3;
  position: sticky; top: 92px;
  align-self: start;
  padding-block: clamp(36px, 5vw, 76px);
}
.hoja__indice h2 {
  margin: 0 0 16px;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: var(--fk-t-lg) !important;
  letter-spacing: -.03em !important;
}
.hoja__indice ol { margin: 0; padding: 0; list-style: none; counter-reset: paso; }
.hoja__indice li {
  counter-increment: paso;
  padding: 11px 0;
  border-top: 1px solid var(--fk-line);
  font-size: var(--fk-t-sm);
  color: var(--fk-text-soft);
}
.hoja__indice li::before {
  content: counter(paso, decimal-leading-zero);
  display: inline-block; min-width: 26px;
  font-weight: 700; color: var(--fk-accent);
}

/* El texto, a medida de lectura, no a todo el ancho */
.hoja__cuerpo {
  grid-column: 5 / span 7;
  padding-block: clamp(36px, 5vw, 76px);
}
.hoja__cuerpo > * { max-width: 62ch; }
.hoja__cuerpo p { margin: 0 0 20px; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.68; color: var(--fk-text-soft); }
.hoja__cuerpo h3 {
  margin: clamp(30px, 4vw, 48px) 0 14px;
  font-family: var(--fk-display) !important;
  font-weight: 800 !important;
  font-size: clamp(1.3rem, 2.3vw, 1.9rem) !important;
  line-height: 1.06 !important; letter-spacing: -.04em !important;
  color: var(--fk-text);
}
/* La primera frase, más grande: entra en el texto */
.hoja__entradilla {
  max-width: 34ch !important;
  font-family: var(--fk-display);
  font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.5rem, 3vw, 2.4rem) !important;
  line-height: 1.08 !important;
  letter-spacing: -.04em;
  color: var(--fk-text) !important;
  margin-bottom: clamp(22px, 3vw, 34px) !important;
}

/* Una foto que rompe la columna por la derecha */
.hoja__foto { margin: clamp(28px, 4vw, 44px) 0; max-width: none !important; }
.hoja__foto img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--fk-r); }
.hoja__foto figcaption { padding-top: 10px; font-size: var(--fk-t-sm); color: var(--fk-text-muted); }
.hoja__foto--sale { width: calc(100% + clamp(30px, 8vw, 140px)); }

/* Cita a sangre entre secciones */
.hoja__cita {
  margin: 0; padding: clamp(40px, 7vw, 96px) var(--hoja-borde);
  background: var(--fk-canvas-deep);
}
.hoja__cita blockquote {
  margin: 0 auto; max-width: 1100px;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 102;
  font-size: clamp(1.6rem, 4vw, 3.1rem);
  line-height: 1.05; letter-spacing: -.045em;
  color: var(--fk-text);
}
.hoja__cita cite {
  display: block; margin: 20px auto 0; max-width: 1100px;
  font-style: normal; font-size: var(--fk-t-md); color: var(--fk-text-soft);
}

/* Datos duros junto al titular */
.tira-datos { display: flex; flex-wrap: wrap; gap: clamp(22px, 4vw, 56px); margin-top: clamp(24px, 3vw, 38px); }
.tira-datos div { min-width: 96px; }
.tira-datos b {
  display: block;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
  line-height: 1; letter-spacing: -.045em;
  color: #FFF;
}
.tira-datos span { display: block; margin-top: 6px; font-size: var(--fk-t-sm); color: rgba(255,255,255,.78); }

@media (max-width: 980px) {
  .hoja__indice { grid-column: 1 / -1; position: static; padding-bottom: 0; }
  .hoja__cuerpo { grid-column: 1 / -1; padding-top: clamp(20px, 3vw, 30px); }
  .hoja__foto--sale { width: 100%; }
}

/* =====================================================================
   23. STORIES · la revista
   Una historia por marca. La primera manda; el resto va en rejilla.
   ===================================================================== */

.revista {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(14px, 2vw, 26px);
  padding: clamp(28px, 4vw, 60px) clamp(18px, 3.5vw, 56px);
}

.revista__portada {
  position: relative;
  align-self: start;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(380px, 52vw, 620px);
  overflow: hidden;
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
  color: #FFF;
}
.revista__portada .revista__foto { position: absolute; inset: 0; }
.revista__portada .revista__foto--logo { display: flex !important; align-items: center; justify-content: center; padding: 14%; background: var(--fk-accent); }
.revista__portada .revista__marca-grande { max-height: 38% !important; filter: brightness(0) invert(1); }
.revista__portada .revista__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fk-ease); }
.revista__portada:hover .revista__foto img { transform: scale(1.03); }
.revista__portada .revista__texto {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3vw, 40px);
  background: linear-gradient(180deg, transparent, rgba(6, 8, 36, .88) 62%);
}
.revista__portada strong {
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.5rem, 3.2vw, 2.6rem);
  line-height: 1.02; letter-spacing: -.045em;
  max-width: 18ch;
}
.revista__portada .revista__pie { font-size: var(--fk-t-md); color: rgba(255,255,255,.82); max-width: 46ch; }

.revista__resto {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: clamp(14px, 2vw, 22px);
  align-content: start;
}
.revista__ficha { display: flex; flex-direction: column; gap: 10px; }
.revista__ficha .revista__foto {
  position: relative; display: block;
  aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.revista__ficha .revista__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fk-ease); }
.revista__ficha:hover .revista__foto img { transform: scale(1.04); }
.revista__ficha strong {
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-lg); line-height: 1.1; letter-spacing: -.035em;
  color: var(--fk-text);
}
.revista__ficha .revista__pie { font-size: var(--fk-t-sm); color: var(--fk-text-soft); }

.revista__logo { display: flex; align-items: center; height: 26px; }
.revista__logo img { max-width: 108px; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.revista__portada .revista__logo img { filter: brightness(0) invert(1); opacity: .95; }

/* Ficha sin fotografía: el logotipo, grande, sobre el neutro de la marca */
.revista__foto--logo {
  display: flex !important; align-items: center; justify-content: center;
  padding: 18%;
  background: var(--fk-canvas-deep);
}
.revista__marca-grande {
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: 62% !important;
  object-fit: contain !important;
}
.revista__ficha:hover .revista__foto--logo { background: var(--fk-accent-soft); }
.revista__ficha:hover .revista__marca-grande { transform: none !important; }

.revista__sello {
  position: absolute; left: 10px; top: 10px;
  padding: 5px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); color: var(--fk-text);
  font-size: var(--fk-t-2xs); font-weight: 600;
}

@media (max-width: 900px) { .revista { grid-template-columns: minmax(0, 1fr); } }

/* --- Una historia --- */
.historia__alto { position: relative; }
.historia__portada {
  display: block; width: 100%;
  height: clamp(280px, 44vh, 480px);
  object-fit: cover;
}
.historia__titulo {
  padding: clamp(28px, 4vw, 56px) clamp(18px, 3.5vw, 56px) clamp(24px, 3vw, 40px);
  background: var(--fk-accent); color: var(--fk-on-accent);
}
.historia__volver { display: inline-block; margin-bottom: 14px; font-size: var(--fk-t-sm); font-weight: 600; color: rgba(255,255,255,.82); }
.historia__volver:hover { color: #FFF; }
.historia__logo { display: flex; align-items: center; height: 48px; margin-bottom: 18px; }
.historia__logo img { max-width: 210px; max-height: 100%; width: auto; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.historia__titulo h1 {
  margin: 0; max-width: 20ch;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.9rem, 5vw, 3.8rem);
  line-height: .98; letter-spacing: -.05em;
  color: #FFF;
}
.historia__titulo p { margin: 18px 0 0; max-width: 56ch; font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.5; color: rgba(255,255,255,.88); }

.historia__ficha dl { margin: 0 0 20px; }
.historia__ficha dl > div { padding: 10px 0; border-top: 1px solid var(--fk-line); }
.historia__ficha dt { font-size: var(--fk-t-xs); color: var(--fk-text-muted); }
.historia__ficha dd { margin: 3px 0 0; font-size: var(--fk-t-sm); font-weight: 500; }
.historia__seguir { margin-top: 10px; }
.historia__seguir button {
  width: 100%; padding: 12px;
  border: 1px solid var(--fk-line-strong); border-radius: 999px;
  background: transparent;
  font-family: var(--fk-sans); font-size: var(--fk-t-sm); font-weight: 600;
  color: var(--fk-text); cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.historia__seguir button:hover { background: var(--fk-canvas-deep); }
.historia__seguir .is-siguiendo { background: var(--fk-accent); border-color: var(--fk-accent); color: #FFF; }

/* =====================================================================
   24. FLOCK LIVE · un evento tiene fecha y sitio, y se ven
   ===================================================================== */

.evento { position: relative; overflow: hidden; background: var(--fk-accent); }
.evento__fondo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .28;
}
.evento__decir {
  position: relative; z-index: 1;
  padding: clamp(40px, 7vw, 104px) clamp(18px, 3.5vw, 56px) clamp(32px, 4vw, 62px);
  color: var(--fk-on-accent);
}
.evento__cuando {
  margin: 0 0 12px;
  font-family: var(--fk-display); font-weight: 800;
  font-size: clamp(1rem, 1.8vw, 1.4rem);
  letter-spacing: -.02em;
  color: #FFF;
}
.evento h1 {
  margin: 0; max-width: 18ch;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(2.1rem, 6vw, 4.6rem);
  line-height: .95; letter-spacing: -.05em;
  color: #FFF;
}
.evento__donde { margin: 16px 0 0; font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 500; color: rgba(255,255,255,.9); }
.evento__entradilla { margin: 16px 0 0; max-width: 56ch; font-size: var(--fk-t-lg); line-height: 1.55; color: rgba(255,255,255,.85); }

.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--fk-r); }

/* =====================================================================
   25. FICHA DE MARCA · mosaico de lo que hace
   Una marca se entiende por sus prendas, no por su logotipo. La ficha
   enseña cuatro suyas; si no hay catálogo, el logotipo sobre color.
   ===================================================================== */

.ficha-marca { display: flex; flex-direction: column; gap: 10px; }

.ficha-marca__mosaico {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.ficha-marca__mosaico img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--fk-ease); }
.ficha-marca:hover .ficha-marca__mosaico img { transform: scale(1.04); }

/* Con menos de cuatro fotos, la primera manda */
.ficha-marca__mosaico--1 { grid-template-columns: 1fr; }
.ficha-marca__mosaico--2 { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.ficha-marca__mosaico--3 img:first-child { grid-column: span 2; }

/* El logotipo, en una esquina sobre plaquita blanca para que se lea
   siempre, encima de cualquier foto */
.ficha-marca__logo {
  position: absolute; left: 8px; bottom: 8px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  height: 26px; padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
}
.ficha-marca__logo img { max-width: 76px; max-height: 100%; width: auto; height: auto; object-fit: contain; transform: none !important; }

.ficha-marca__mosaico--logo {
  display: flex !important; align-items: center; justify-content: center;
  padding: 20%;
  background: var(--fk-accent);
}
.ficha-marca__mosaico--logo .ficha-marca__logo { display: none; }
.ficha-marca__grande {
  width: auto !important; height: auto !important;
  max-width: 100%; max-height: 54% !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1);
}

.ficha-marca__nombre {
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-lg); line-height: 1.1; letter-spacing: -.035em;
  color: var(--fk-text);
}
.ficha-marca__pie { font-size: var(--fk-t-sm); color: var(--fk-text-soft); }
.ficha-marca__historia {
  align-self: flex-start;
  padding: 3px 11px; border-radius: 999px;
  background: var(--fk-accent-soft); color: var(--fk-accent);
  font-size: var(--fk-t-2xs); font-weight: 600;
}

/* =====================================================================
   26. PÁGINA DE MARCA
   Su catálogo entero con las categorías que tiene de verdad, filtrable
   sin recargar. Es lo que faltaba: hasta ahora todo salía directo a su
   tienda sin poder mirar antes.
   ===================================================================== */

.marca__alto {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  align-items: end;
  gap: clamp(20px, 3vw, 44px);
  padding: clamp(30px, 4.6vw, 68px) clamp(18px, 3.5vw, 56px) clamp(24px, 3vw, 40px);
  background: var(--fk-accent);
  color: var(--fk-on-accent);
}
.marca__identidad { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.marca__logo {
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: clamp(72px, 9vw, 116px); height: clamp(72px, 9vw, 116px);
  padding: 14px;
  border-radius: var(--fk-r);
  background: #FFF;
}
.marca__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.marca__alto h1 {
  margin: 0;
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.9rem, 5vw, 3.6rem);
  line-height: .98; letter-spacing: -.05em;
  color: #FFF;
}
.marca__que { margin: 10px 0 0; font-size: var(--fk-t-lg); color: rgba(255,255,255,.85); }

.marca__cifras { display: flex; gap: clamp(18px, 3vw, 40px); }
.marca__cifras b {
  display: block;
  font-family: var(--fk-display); font-weight: 800;
  font-size: clamp(1.2rem, 2.2vw, 1.9rem);
  line-height: 1; letter-spacing: -.04em;
  color: #FFF; white-space: nowrap;
}
.marca__cifras span { display: block; margin-top: 5px; font-size: var(--fk-t-xs); color: rgba(255,255,255,.75); }

.marca__acciones { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.marca__acciones form { margin: 0; }

/* --- Catálogo --- */
.marca__catalogo { padding: clamp(24px, 3.4vw, 48px) clamp(18px, 3.5vw, 56px) clamp(32px, 4vw, 60px); }

.marca__filtros {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: clamp(20px, 2.6vw, 30px);
  padding-bottom: clamp(16px, 2vw, 22px);
  border-bottom: 1px solid var(--fk-line);
}
.marca__filtro {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  border: 0; border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-family: var(--fk-sans); font-size: var(--fk-t-sm); font-weight: 500;
  color: var(--fk-text);
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.marca__filtro i { font-style: normal; font-size: var(--fk-t-xs); color: var(--fk-text-muted); }
.marca__filtro:hover { background: var(--fk-accent-soft); }
.marca__filtro.is-on { background: var(--fk-accent); color: #FFF; }
.marca__filtro.is-on i { color: rgba(255,255,255,.75); }

/* La prenda que se filtra entra, no aparece de golpe */
.marca__catalogo [data-fk-familia] { animation: fk-entra 260ms var(--fk-ease) both; }
@keyframes fk-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.marca__nada { padding: 48px 0; text-align: center; font-size: var(--fk-t-lg); color: var(--fk-text-soft); }

.marca__vacia { padding: clamp(36px, 5vw, 72px) clamp(18px, 3.5vw, 56px); }
.marca__vacia p { max-width: 58ch; }
.marca__vacia > p:last-of-type { margin-bottom: 24px; color: var(--fk-text-soft); }

.marca__historia { background: var(--fk-canvas-deep); }
.marca__historia .hoja__indice { position: static; }

@media (max-width: 860px) {
  .marca__alto { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .marca__cifras { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .marca__catalogo [data-fk-familia] { animation: none; }
}

/* =====================================================================
   27. STORIES · portada de la última escrita, y aviso único si no hay
   ===================================================================== */

.portada-historia { padding: clamp(24px, 3.4vw, 48px) clamp(18px, 3.5vw, 56px) 0; }
.portada-historia__enlace {
  position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(340px, 46vw, 560px);
  overflow: hidden;
  border-radius: var(--fk-r);
  background: var(--fk-accent);
  color: #FFF;
}
.portada-historia__foto { position: absolute; inset: 0; }
.portada-historia__foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms var(--fk-ease); }
.portada-historia__enlace:hover .portada-historia__foto img { transform: scale(1.03); }
.portada-historia__texto {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 12px;
  padding: clamp(24px, 3.4vw, 46px);
  background: linear-gradient(180deg, transparent, rgba(6, 8, 36, .9) 66%);
}
.portada-historia__eyebrow { font-size: var(--fk-t-sm); font-weight: 600; color: rgba(255,255,255,.8); }
.portada-historia__texto strong {
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.6rem, 3.6vw, 3rem);
  line-height: 1.02; letter-spacing: -.045em;
  max-width: 18ch;
}
.portada-historia__pie { max-width: 52ch; font-size: var(--fk-t-md); color: rgba(255,255,255,.85); }

/* Cuando no hay ninguna escrita, se dice una vez y en un sitio */
.aviso-vacio {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 3vw, 40px); flex-wrap: wrap;
  margin: clamp(24px, 3.4vw, 48px) clamp(18px, 3.5vw, 56px) 0;
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.aviso-vacio p { margin: 0; max-width: 56ch; }
.aviso-vacio p + p { margin-top: 12px; color: var(--fk-text-soft); }

/* =====================================================================
   28. UNA SOLA VOZ
   La bandada de la portada marca el tono: titular ancho y apretado,
   texto de apoyo grande y con aire. Fuera de ella cada sección llevaba
   su propio tamaño de titular y el texto se quedaba en 13–15 px gris, y
   parecían dos webs. Esto lo iguala todo a la bandada.
   ===================================================================== */

:root {
  --fk-borde: clamp(18px, 3.5vw, 56px);
  --hoja-borde: var(--fk-borde);            /* también fuera de .hoja */
  --fk-h2: clamp(2rem, 4.4vw, 3.5rem);
  --fk-entradilla: clamp(1.05rem, 1.35vw, 1.2rem);
  --fk-cuerpo: 1rem;
  --fk-velo: 6, 8, 36;                      /* el negro azulado de los velos */
}

.seccion { padding: clamp(44px, 6vw, 88px) var(--fk-borde) 0; }

/* --- Titulares de sección: todos con la misma voz --- */
.fk-titulo h2,
.fk-campana__texto h2,
.funciona__decir h2,
.proximas h2,
.nosotros__cierre h2 {
  font-size: var(--fk-h2) !important;
  font-variation-settings: 'wdth' 104;
  line-height: .96 !important;
  letter-spacing: -.045em !important;
  text-wrap: balance;
}
.fk-titulo { margin-bottom: clamp(22px, 3vw, 40px); }
.fk-titulo p,
.funciona__decir p,
.quese__pie,
.aviso-vacio p + p,
.marca__vacia > p:last-of-type {
  font-size: var(--fk-entradilla);
  line-height: 1.5;
  color: var(--fk-text-soft);
}
.fk-titulo p { margin-top: 14px; max-width: 46ch; }
.fk-titulo > a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fk-t-md); font-weight: 600;
  color: var(--fk-text);
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.fk-titulo > a::after { content: '→'; transition: transform var(--fk-fast) var(--fk-ease); }
.fk-titulo > a:hover { color: var(--fk-accent); }
.fk-titulo > a:hover::after { transform: translateX(3px); }

/* --- Etiquetas pequeñas: en mayúscula espaciada, no en gris diminuto --- */
.camino__quien,
.portada-historia__eyebrow {
  font-size: var(--fk-t-xs) !important;
  font-weight: 700 !important;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* --- Texto corrido: nada por debajo de 16 px en los bloques --- */
.funciona__pasos p, .ventajas p, .nosotros__puntos p,
.camino > p, .camino__lista li,
.pregunta p,
.formulario__aparte p,
.hoja__cita cite,
.revista__portada .revista__pie,
.portada-historia__pie { font-size: var(--fk-cuerpo); line-height: 1.6; }
.hoja__cita cite { font-size: var(--fk-entradilla); }
.hoja__indice li { font-size: var(--fk-t-md); }
.camino__nota { font-size: var(--fk-t-md); }

/* --- Bloques de tres: numerados y con filete, como un índice ---
   Antes eran cajas lila con el titular en azul; al lado de la bandada
   parecían de otra plantilla. */
.funciona__pasos, .ventajas, .nosotros__puntos { counter-reset: paso; gap: clamp(20px, 3vw, 40px); }
.funciona__pasos > div, .ventajas > div, .nosotros__puntos > div {
  counter-increment: paso;
  padding: 20px 0 0;
  border-radius: 0;
  border-top: 2px solid var(--fk-text);
  background: transparent;
}
.funciona__pasos > div::before, .ventajas > div::before, .nosotros__puntos > div::before {
  content: counter(paso, decimal-leading-zero);
  display: block; margin-bottom: 18px;
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-md); letter-spacing: -.02em;
  color: var(--fk-accent);
}
.funciona__pasos h3, .ventajas h2, .nosotros__puntos h2 {
  margin: 0 0 12px !important;
  font-size: clamp(1.35rem, 2.1vw, 1.8rem) !important;
  line-height: 1 !important;
  letter-spacing: -.04em !important;
  color: var(--fk-text) !important;
}
.funciona__pasos p, .ventajas p, .nosotros__puntos p { max-width: 38ch; }

/* --- Pie de foto: rotulado encima, no en letra pequeña debajo --- */
.fk-foto-rotulada { position: relative; --foto-margen: 0px; }
.nosotros__foto.fk-foto-rotulada { --foto-margen: var(--fk-borde); }
.fk-foto-rotulada figcaption {
  position: absolute; left: var(--foto-margen); right: var(--foto-margen); bottom: 0;
  padding: clamp(48px, 7vw, 110px) clamp(18px, 3vw, 40px) clamp(18px, 3vw, 36px) !important;
  border-radius: 0 0 var(--fk-r) var(--fk-r);
  background: linear-gradient(180deg, transparent, rgba(var(--fk-velo), .8));
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.2rem, 2.4vw, 2rem) !important;
  line-height: 1.04; letter-spacing: -.04em;
  color: #FFF !important;
  text-wrap: balance;
}
.fk-foto-rotulada figcaption { max-width: none; }
.funciona__foto.fk-foto-rotulada img { height: clamp(300px, 46vh, 520px); }

/* --- Puertas por prenda (portada y /join-us) --- */
.puertas {
  display: grid;
  grid-template-columns: repeat(var(--puertas-n, 4), minmax(0, 1fr));
  gap: 12px;
}
.puerta {
  position: relative; isolation: isolate;
  display: block; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--fk-r);
  background: var(--fk-accent);
  color: #FFF;
}
.puerta img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--fk-ease);
}
.puerta::before, .puerta::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.puerta::before { background: linear-gradient(180deg, transparent 42%, rgba(var(--fk-velo), .78)); }
.puerta::after { background: var(--fk-accent); opacity: 0; mix-blend-mode: multiply; transition: opacity var(--fk-base) var(--fk-ease); }
.puerta:hover img { transform: scale(1.05); }
.puerta:hover::after { opacity: .45; }
.puerta__texto {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding: clamp(16px, 2vw, 26px);
}
.puerta__nombre {
  font-family: var(--fk-display); font-weight: 800;
  font-variation-settings: 'wdth' 104;
  font-size: clamp(1.6rem, 2.7vw, 2.5rem);
  line-height: .95; letter-spacing: -.045em;
}
.puerta__n {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fk-t-md); font-weight: 600;
  color: rgba(255, 255, 255, .9);
}
.puerta__n svg { transition: transform var(--fk-base) var(--fk-ease); }
.puerta:hover .puerta__n svg { transform: translateX(5px); }
.quese .puertas { margin-top: 0; }

@media (max-width: 900px) {
  /* En el móvil, tira que se desliza: cuatro fotos altas apiladas son
     cuatro pantallas de scroll antes de ver una prenda */
  .puertas {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 64%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(-1 * var(--fk-borde));
    padding-inline: var(--fk-borde);
    scroll-padding-inline: var(--fk-borde);
  }
  .puertas::-webkit-scrollbar { display: none; }
  .puerta { scroll-snap-align: start; }
}

/* --- Campaña: el texto sobre el vídeo, como una campaña de verdad --- */
.fk-campana { padding: clamp(44px, 6vw, 88px) var(--fk-borde) 0; }
.fk-campana__media { aspect-ratio: 21 / 9; min-height: 460px; }
.fk-campana__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--fk-velo), .74), rgba(var(--fk-velo), .3) 52%, transparent 78%);
}
.fk-campana__texto {
  position: absolute; inset: 0 auto 0 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  max-width: 680px;
  padding: clamp(24px, 4.4vw, 64px);
  color: #FFF;
}
.fk-campana__texto h2 { margin: 0; max-width: 13ch; color: #FFF !important; }
.fk-campana__texto p {
  margin: 16px 0 26px; max-width: 40ch;
  font-size: var(--fk-entradilla); line-height: 1.5;
  color: rgba(255, 255, 255, .88);
}
@media (max-width: 760px) {
  .fk-campana__media { aspect-ratio: 4 / 5; min-height: 0; }
  .fk-campana__media::after { background: linear-gradient(180deg, transparent 25%, rgba(var(--fk-velo), .85)); }
  .fk-campana__texto { inset: 0; }
}

/* --- Píldoras de filtro (portada) --- */
.fk-pildoras { display: flex; flex-wrap: wrap; gap: 8px; }
.fk-pildora {
  padding: 11px 20px;
  border: 0; border-radius: 999px;
  background: var(--fk-canvas-deep);
  font-family: var(--fk-sans); font-size: var(--fk-t-md); font-weight: 500; line-height: 1;
  color: var(--fk-text);
  cursor: pointer;
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-pildora:hover { background: var(--fk-accent-soft); }
.fk-pildora.is-on { background: var(--fk-accent); color: #FFF; }

/* --- Ficha de prenda: marca en versal, nombre legible, precio con la
       tipografía de los titulares --- */
.rejilla-prendas { gap: clamp(22px, 2.4vw, 34px) clamp(10px, 1.2vw, 16px); }
.rejilla-prendas--cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .rejilla-prendas--cuatro { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.prenda-ficha__foto { margin-bottom: 12px; }
.prenda-ficha__marca {
  font-size: var(--fk-t-2xs); font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--fk-text-muted);
}
.prenda-ficha__titulo {
  margin: 5px 0 6px;
  font-size: var(--fk-t-md); font-weight: 500; line-height: 1.3;
  color: var(--fk-text);
}
.prenda-ficha__precio {
  font-family: var(--fk-display); font-weight: 800;
  font-size: var(--fk-t-lg); letter-spacing: -.02em;
}
.prenda-ficha > a:hover .prenda-ficha__titulo { color: var(--fk-accent); }

/* --- El pie: mismo cuerpo que el resto y la línea legal en su sitio --- */
.pie h2 { font-size: var(--fk-t-xl); }
.pie__marca p, .pie__boletin p, .pie__columna a { font-size: var(--fk-t-md); }
.pie__columna { gap: 11px; }
.pie__legal {
  display: flex; justify-content: space-between; flex-wrap: wrap;
  gap: 6px 24px;
  font-size: var(--fk-t-sm);
}
@media (min-width: 761px) { .pie__legal { padding-right: 64px; } }  /* hueco del botón de subir */
/* El nombre se mide contra su foto, no contra la pantalla: con cinco
   puertas en fila «Accesorios» no cabía */
.puerta { container-type: inline-size; }
.puerta__nombre { font-size: clamp(1.25rem, 11.5cqi, 2.5rem); overflow-wrap: anywhere; }
.puerta { background: #0C0C0E; }
/* En escritorio el botón de alta se lee; en estrecho es un icono y deja
   sitio al logotipo, que va centrado */
@media (min-width: 861px) { .fk-cabecero__cuenta--alta svg { display: none; } }
@media (max-width: 860px) { .fk-cabecero__cuenta--alta:has(svg) { padding: 9px; } }

/* =====================================================================
   29. VENTA DIRECTA · ficha, cesta, pago y pedido
   ===================================================================== */

.fk-boton--acento { background: var(--fk-accent); color: #FFF; }
.fk-boton--acento:hover { background: var(--fk-brasa); color: #FFF; }
.fk-boton--ancho { width: 100%; justify-content: center; }
.seccion--final { padding-bottom: clamp(44px, 6vw, 88px); }

/* --- La cesta en el cabecero --- */
.fk-cabecero__cesta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: 999px;
  background: var(--fk-canvas-deep);
  color: var(--fk-text);
  transition: background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.fk-cabecero__cesta:hover { background: var(--fk-accent); color: #FFF; }
.fk-cabecero__cesta b {
  position: absolute; top: -3px; right: -3px;
  min-width: 19px; height: 19px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px; border: 2px solid var(--fk-canvas);
  background: var(--fk-brasa); color: #FFF;
  font-size: 10px; font-weight: 700; line-height: 1;
}
@media (max-width: 480px) {
  #header .list-action { gap: 6px !important; }
  .fk-cabecero__cesta, .fk-cabecero__buscar, .fk-cabecero__cuenta--alta:has(svg) { width: 36px; height: 36px; padding: 0 !important; justify-content: center; }
}

/* --- Ficha de prenda --- */
.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  padding: clamp(24px, 3.4vw, 48px) var(--fk-borde) 0;
  max-width: 1500px; margin: 0 auto;
}
.ficha__fotos { display: flex; flex-direction: column; gap: 10px; }
.ficha__foto {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--fk-r); background: var(--fk-canvas-deep);
}
.ficha__foto img { width: 100%; height: 100%; object-fit: cover; }
.ficha__miniaturas { display: flex; gap: 8px; overflow-x: auto; }
.ficha__miniaturas button {
  flex: 0 0 72px; aspect-ratio: 3 / 4; padding: 0; overflow: hidden;
  border: 2px solid transparent; border-radius: var(--fk-r-s);
  background: var(--fk-canvas-deep); cursor: pointer;
}
.ficha__miniaturas button.is-on { border-color: var(--fk-accent); }
.ficha__miniaturas img { width: 100%; height: 100%; object-fit: cover; }

.ficha__datos { align-self: start; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 18px; }
.ficha__marca {
  font-size: var(--fk-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--fk-accent);
}
.ficha__marca:hover { color: var(--fk-brasa); }
.ficha__titulo {
  margin: -8px 0 0;
  font-size: clamp(1.8rem, 3.4vw, 3rem) !important;
  font-variation-settings: 'wdth' 104;
  line-height: .98 !important; letter-spacing: -.045em !important;
  text-wrap: balance;
}
.ficha__precio {
  margin: 0; display: flex; align-items: baseline; gap: 12px;
  font-family: var(--fk-display); font-weight: 800;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: -.03em;
}
.ficha__precio s { font-family: var(--fk-sans); font-weight: 500; font-size: var(--fk-t-lg); color: var(--fk-text-muted); }

.ficha__compra { display: flex; flex-direction: column; gap: 16px; }
.ficha__tallas { margin: 0; padding: 0; border: 0; }
.ficha__tallas legend { padding: 0 0 10px; font-size: var(--fk-t-sm); font-weight: 700; }
.ficha__tallas > div { display: flex; flex-wrap: wrap; gap: 8px; }
.talla { position: relative; cursor: pointer; }
.talla input { position: absolute; opacity: 0; pointer-events: none; }
.talla span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 46px; padding: 0 16px;
  border: 1.5px solid var(--fk-line-strong); border-radius: var(--fk-r-s);
  font-size: var(--fk-t-md); font-weight: 600;
  transition: border-color var(--fk-fast) var(--fk-ease), background-color var(--fk-fast) var(--fk-ease), color var(--fk-fast) var(--fk-ease);
}
.talla:hover span { border-color: var(--fk-text); }
.talla input:checked + span { border-color: var(--fk-text); background: var(--fk-text); color: #FFF; }
.talla input:focus-visible + span { outline: 3px solid var(--fk-brasa); outline-offset: 2px; }
.talla--agotada { cursor: not-allowed; }
.talla--agotada span { color: var(--fk-text-muted); border-style: dashed; text-decoration: line-through; }

.ficha__botones { display: flex; flex-wrap: wrap; gap: 10px; }
.ficha__botones .fk-boton { flex: 1 1 200px; justify-content: center; }
.ficha__error { margin: 0; color: #B02A10; font-weight: 600; }
.ficha__hecho { margin: 0; padding: 12px 16px; border-radius: var(--fk-r-s); background: var(--fk-accent-soft); color: var(--fk-accent); font-weight: 600; }
.ficha__hecho a { text-decoration: underline; }

.ficha__notas { margin: 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--fk-line); display: flex; flex-direction: column; gap: 8px; }
.ficha__notas li { position: relative; padding-left: 24px; font-size: var(--fk-t-md); line-height: 1.5; color: var(--fk-text-soft); }
.ficha__notas li::before {
  content: ''; position: absolute; left: 2px; top: .45em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--fk-accent); border-bottom: 2px solid var(--fk-accent);
  transform: rotate(-45deg);
}
.ficha__descripcion { font-size: var(--fk-t-md); line-height: 1.65; color: var(--fk-text-soft); }
.ficha__descripcion p { margin: 0 0 12px; }

@media (max-width: 860px) {
  .ficha { grid-template-columns: minmax(0, 1fr); }
  .ficha__datos { position: static; }
}

/* --- Cesta, pago y pedido: líneas a la izquierda, resumen a la derecha --- */
.caja {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
  gap: clamp(24px, 4vw, 56px);
  max-width: 1280px; margin: 0 auto;
  padding: clamp(28px, 4vw, 56px) var(--fk-borde) clamp(44px, 6vw, 88px);
}
.caja__lineas { display: flex; flex-direction: column; gap: 22px; align-content: start; }
.caja__marca header {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 2px solid var(--fk-text);
}
.caja__marca header a { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-xl); letter-spacing: -.035em; }
.caja__marca header span { font-size: var(--fk-t-sm); color: var(--fk-text-soft); }

.linea {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) auto auto;
  align-items: center; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--fk-line);
}
.linea__foto { display: block; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--fk-r-s); background: var(--fk-canvas-deep); }
.linea__foto img { width: 100%; height: 100%; object-fit: cover; }
.linea__que { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linea__titulo { font-size: var(--fk-t-md); font-weight: 600; }
.linea__talla { font-size: var(--fk-t-sm); color: var(--fk-text-soft); }
.linea__aviso { font-size: var(--fk-t-xs); font-weight: 600; color: var(--fk-caution); }
.linea__cantidad select {
  height: 40px; padding: 0 30px 0 12px;
  border: 1px solid var(--fk-line-strong); border-radius: var(--fk-r-s);
  font-size: var(--fk-t-md); background: var(--fk-canvas);
}
.linea__importe { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-lg); letter-spacing: -.02em; white-space: nowrap; }
@media (max-width: 560px) {
  .linea { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .linea__cantidad { grid-column: 2; }
  .linea__importe { grid-column: 3; grid-row: 1; }
}

.caja__resumen {
  align-self: start; position: sticky; top: 96px;
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.6vw, 32px);
  border-radius: var(--fk-r);
  background: var(--fk-canvas-deep);
}
.caja__resumen h2 { margin: 0; font-size: var(--fk-t-xl) !important; letter-spacing: -.035em !important; }
.caja__resumen dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.caja__resumen dl div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fk-t-md); }
.caja__resumen dt { color: var(--fk-text-soft); }
.caja__resumen dd { margin: 0; font-weight: 600; }
.caja__total { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--fk-line-strong); }
.caja__total dt, .caja__total dd { font-family: var(--fk-display); font-weight: 800; font-size: var(--fk-t-xl); color: var(--fk-text) !important; letter-spacing: -.03em; }
.caja__nota { margin: 0; font-size: var(--fk-t-sm); line-height: 1.5; color: var(--fk-text-soft); }
.caja__nota a { color: var(--fk-accent); font-weight: 600; }
.caja__grupo { margin: 4px 0 0; font-size: var(--fk-t-xs); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--fk-text-muted); }
.caja__mini { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.caja__mini li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 10px; align-items: center; font-size: var(--fk-t-sm); }
.caja__mini img { width: 44px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; }
.caja__mini i { display: block; font-style: normal; color: var(--fk-text-muted); }
.caja__volver { font-size: var(--fk-t-sm); font-weight: 600; color: var(--fk-accent); }

.caja .formulario__campos { align-content: start; }
.caja .formulario__campos > button { justify-self: stretch; justify-content: center; }

@media (max-width: 900px) {
  .caja { grid-template-columns: minmax(0, 1fr); }
  .caja__resumen { position: static; order: -1; }
}

/* --- Pago --- */
.reserva {
  margin: 0; padding: 14px 18px;
  border-radius: var(--fk-r-s);
  background: var(--fk-accent-soft); color: var(--fk-accent);
  font-weight: 600;
}
.reserva b { font-family: var(--fk-display); font-variant-numeric: tabular-nums; }
.reserva.is-fuera { background: var(--fk-brasa-soft); color: #B02A10; }
.pago { display: flex; flex-direction: column; gap: 16px; }
.pago__tarjeta { min-height: 220px; }
.pago-prueba { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 2px dashed var(--fk-line-strong); border-radius: var(--fk-r); }
.pago-prueba p { margin: 0; }

.estado { font-weight: 600; }
.estado--comprado { color: var(--fk-positive) !important; }
.estado--fallido, .estado--liberado { color: #B02A10 !important; }

/* --- Puntos del club en el pago --- */
.puntos {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 0; padding: 16px 18px;
  border-radius: var(--fk-r-s);
  background: var(--fk-accent-soft); color: var(--fk-text);
  font-size: var(--fk-t-md); line-height: 1.5;
  cursor: pointer;
}
.puntos input { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--fk-accent); flex-shrink: 0; }
.puntos b { color: var(--fk-accent); }
.puntos i { display: block; font-style: normal; font-size: var(--fk-t-sm); color: var(--fk-text-soft); }
.puntos--solo { cursor: default; display: block; }
.puntos a { color: var(--fk-accent); font-weight: 600; text-decoration: underline; }
.caja__descuento dd { color: var(--fk-positive) !important; }

/* =====================================================================
   30. LA TARJETA DEL CLUB · así se ve en el wallet
   ===================================================================== */

.tarjeta-club {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(32px, 4.4vw, 64px) var(--fk-borde) 0;
  max-width: 1500px; margin: 0 auto;
}
.tarjeta-club__pase {
  position: relative; overflow: hidden;
  aspect-ratio: 1.586;                       /* la de una tarjeta de verdad */
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 22px 24px;
  border-radius: 18px;
  background: var(--fk-accent);
  color: #FFF;
  box-shadow: 0 30px 60px -20px rgba(43, 50, 232, .55), 0 8px 18px rgba(12, 12, 14, .12);
  transform: rotate(-2deg);
  transition: transform 500ms var(--fk-ease);
}
.tarjeta-club:hover .tarjeta-club__pase { transform: rotate(0) translateY(-4px); }
.tarjeta-club__arriba { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 1; }
.tarjeta-club__logo { height: 26px; width: auto; }
.tarjeta-club__saldo { text-align: right; line-height: 1; }
.tarjeta-club__saldo span, .tarjeta-club__abajo span {
  display: block; margin-bottom: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.7);
}
.tarjeta-club__saldo b { font-family: var(--fk-display); font-weight: 800; font-size: 34px; letter-spacing: -.03em; }
.tarjeta-club__bandada { position: absolute; right: -6%; bottom: 14%; width: 62%; opacity: .14; pointer-events: none; }
.tarjeta-club__abajo { display: flex; gap: 22px; position: relative; z-index: 1; }
.tarjeta-club__abajo b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.tarjeta-club__abajo div:first-child b { max-width: 150px; overflow: hidden; text-overflow: ellipsis; display: block; }

.tarjeta-club__texto h2 { margin: 0 0 12px; font-size: clamp(1.6rem, 3vw, 2.4rem) !important; }
.tarjeta-club__texto p { margin: 0 0 20px; max-width: 46ch; font-size: var(--fk-entradilla); line-height: 1.5; color: var(--fk-text-soft); }
.tarjeta-club__botones { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.wallet-boton {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 20px 0 16px;
  border-radius: 12px; background: #000; color: #FFF;
  transition: transform var(--fk-fast) var(--fk-ease), background-color var(--fk-fast) var(--fk-ease);
}
.wallet-boton:hover { transform: translateY(-2px); background: #1c1c1e; color: #FFF; }
.wallet-boton span { display: flex; flex-direction: column; line-height: 1.1; font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.wallet-boton small { font-size: 11px; font-weight: 500; opacity: .85; }
.tarjeta-club__nota, .tarjeta-club__pronto { font-size: var(--fk-t-sm) !important; color: var(--fk-text-muted) !important; }
.tarjeta-club__pronto { padding: 12px 16px; border-radius: var(--fk-r-s); background: var(--fk-accent-soft); color: var(--fk-accent) !important; font-weight: 600; display: inline-block; }

@media (max-width: 860px) {
  .tarjeta-club { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-club__pase { max-width: 420px; transform: none; }
}
.alta__sub { font-size: var(--fk-t-sm); color: var(--fk-text-muted); }
.alta__sub b { color: var(--fk-accent); }

/* Marcas de demostración */
.ficha__demo { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; padding: 18px 20px; border-radius: var(--fk-r); border: 2px dashed var(--fk-line-strong); }
.ficha__demo b { font-family: var(--fk-display); font-size: var(--fk-t-lg); }
.ficha__demo p { margin: 0; font-size: var(--fk-t-md); line-height: 1.5; color: var(--fk-text-soft); }
.marca__demo { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1.5px dashed rgba(255,255,255,.7); color: #FFF; font-weight: 600; font-size: var(--fk-t-sm); }