/* =========================================================
   FINOTRATO — main.css
   Layout y componentes globales: announcement bar, nav,
   mobile menu, barra de garantía, footer.
   Tokens en style.css. Mobile-first. CLAUDE.md §6.
   ========================================================= */

.fnt-page { display: flex; flex-direction: column; min-height: 100vh; }
.fnt-main { flex: 1 0 auto; }

/* =========================================================
   ANNOUNCEMENT BAR
   ========================================================= */
.fnt-announce {
  background: var(--primario);
  color: var(--texto-claro);
}
.fnt-announce[hidden] { display: none; }
.fnt-announce__inner {
  position: relative;
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 9px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
}
.fnt-announce__text {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  text-align: center;
  line-height: 1.4;
}
.fnt-announce__close {
  position: absolute;
  right: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255, 255, 255, .7);
  font-size: 20px;
  line-height: 1;
  padding: 4px;
  transition: color .15s ease;
}
.fnt-announce__close:hover { color: var(--texto-claro); }

/* =========================================================
   NAV STICKY
   ========================================================= */
.fnt-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: var(--fondo-base);
  border-bottom: 1px solid var(--borde);
  transition: box-shadow .2s ease;
}
.fnt-nav.is-sticky { box-shadow: 0 2px 16px rgba(0, 35, 78, .08); }

.fnt-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--nav-h);
}

.fnt-nav__logo {
  font-size: 22px;
  font-weight: 700;
  color: var(--primario);
  letter-spacing: -.5px;
  white-space: nowrap;
}
/* Alto editable en Personalizar → Finotrato → Marca y logos.
   Las custom properties las publica inc/branding.php. */
.fnt-nav__logo img {
  height: var(--fnt-logo-h-mob, 30px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

/* Menú desktop */
.fnt-nav__links { display: none; }
.fnt-nav__menu {
  display: flex;
  align-items: center;
  gap: 26px;
}
.fnt-nav__menu a {
  font-size: 14px;
  font-weight: 500;
  color: var(--texto);
  padding-bottom: 2px;
  transition: color .15s ease;
}
.fnt-nav__menu a:hover,
.fnt-nav__menu .current-menu-item > a {
  color: var(--primario);
}
.fnt-nav__menu .current-menu-item > a { border-bottom: 2px solid var(--acento); }

/* Iconos */
.fnt-nav__icons {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--texto);
}
.fnt-nav__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: inherit;
  padding: 4px;
  transition: color .15s ease;
}
.fnt-nav__icon:hover { color: var(--primario); }

.fnt-cart-count {
  position: absolute;
  top: -4px;
  right: -6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: var(--acento);
  color: var(--texto-claro);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  border-radius: var(--radius-pill);
}

/* WhatsApp en nav: oculto en mobile (va en el panel) */
.fnt-nav__wa { color: var(--verde-ok); }

/* Hamburguesa (mobile) */
.fnt-nav__burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  background: none;
  border: none;
  padding: 0;
}
.fnt-nav__burger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--primario);
  border-radius: var(--radius-pill);
  transition: transform .2s ease, opacity .2s ease;
}

/* =========================================================
   MOBILE PANEL (slide-in desde la izquierda)
   ========================================================= */
.fnt-mobile[hidden] { display: none; }
.fnt-mobile {
  position: fixed;
  inset: 0;
  z-index: 400;
}
.fnt-mobile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 35, 78, .45);
  opacity: 0;
  transition: opacity .3s ease;
}
.fnt-mobile.is-open .fnt-mobile__overlay { opacity: 1; }

.fnt-mobile__panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(82vw, 340px);
  background: var(--fondo-base);
  display: flex;
  flex-direction: column;
  padding: 20px;
  transform: translateX(-100%);
  transition: transform .32s var(--ease-img);
  overflow-y: auto;
}
.fnt-mobile.is-open .fnt-mobile__panel { transform: translateX(0); }

.fnt-mobile__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--borde);
}
.fnt-mobile__brand { font-size: 20px; font-weight: 700; color: var(--primario); }
.fnt-mobile__close {
  background: none;
  border: none;
  font-size: 26px;
  line-height: 1;
  color: var(--texto-2);
  padding: 4px;
}
.fnt-mobile__menu { display: flex; flex-direction: column; }
.fnt-mobile__menu a {
  display: block;
  padding: 13px 4px;
  font-size: 16px;
  font-weight: 500;
  color: var(--texto);
  border-bottom: 1px solid var(--borde);
}
.fnt-mobile__menu a:hover { color: var(--primario); }
.fnt-mobile__wa { margin-top: 20px; width: 100%; }

/* =========================================================
   BARRA DE GARANTÍA
   ========================================================= */
.fnt-guarantee {
  background: var(--fondo-suave);
  border-top: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
}
.fnt-guarantee__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  padding-block: 22px;
}
.fnt-guarantee__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primario);
}
.fnt-guarantee__item svg { flex-shrink: 0; color: var(--primario); }

/* =========================================================
   FOOTER
   ========================================================= */
.fnt-footer {
  background: var(--fondo-navy);
  color: var(--texto-claro);
}
.fnt-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-block: 48px 36px;
}
.fnt-footer__logo {
  display: block;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}
/* Logo secundario del footer — alto editable (inc/branding.php) */
.fnt-footer__logo-link { display: inline-block; margin-bottom: 14px; }
.fnt-footer__logo-img {
  height: var(--fnt-logo-footer-h, 40px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
.fnt-footer__tagline {
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .6);
  max-width: 320px;
}
.fnt-footer__col h4 {
  font-family: var(--fuente-cuerpo);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 14px;
}
.fnt-footer__col a {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, .82);
  padding: 5px 0;
  transition: color .15s ease;
}
.fnt-footer__col a:hover { color: var(--texto-claro); }
.fnt-footer__addr {
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .55);
  margin-top: 8px;
}
.fnt-footer__bottom {
  padding-block: 18px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}
.fnt-footer__bottom p {
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  text-align: center;
}

/* =========================================================
   BREAKPOINTS  —  CLAUDE.md §6.6 (mobile-first: 480 / 768 / 900 / 1100)
   ========================================================= */
@media (min-width: 768px) {
  .fnt-guarantee__inner { grid-template-columns: repeat(3, 1fr); }
  .fnt-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
}

@media (min-width: 900px) {
  .fnt-nav__burger { display: none; }
  .fnt-nav__links { display: flex; }
  .fnt-nav__logo img { height: var(--fnt-logo-h, 40px); }
}

/* =========================================================
   COMPONENTES COMPARTIDOS  (card · precio dual · badge · grid · secciones)
   Usados por archive, home y FBT → viven en main.css (global).
   ========================================================= */

/* --- Secciones --- */
.fnt-section { padding-block: clamp(40px, 6vw, 72px); }
.fnt-section--soft { background: var(--fondo-suave); }
.fnt-section__head { text-align: center; margin-bottom: 36px; }
.fnt-section__title { font-size: clamp(28px, 3.5vw, 44px); font-weight: 700; color: var(--texto); }
/* Acento rojo mínimo de marca: barrita corta bajo el título de sección. */
.fnt-section__title::after {
  content: ""; display: block; width: 38px; height: 3px;
  background: var(--acento); border-radius: 2px; margin: 12px auto 0;
}
.fnt-section__sub { font-size: 15px; color: var(--texto-2); margin-top: 6px; }
.fnt-section__cta { text-align: center; margin-top: 36px; }

/* --- Grid de productos: 2 mobile → 3 tablet → 4 desktop (briefing) --- */
.fnt-grid--products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  align-items: stretch; /* todas las tarjetas de la fila a la misma altura */
}
/* La tarjeta llena la celda y el botón se ancla abajo → botones alineados. */
.fnt-grid--products > .fnt-card,
.fnt-grid--products > .product { height: 100%; }

/* --- Badge --- */
.fnt-badge {
  display: inline-block;
  font-size: 10px;              /* base para usos inline (ej. "% OFF" de transferencia) */
  font-weight: 600;
  letter-spacing: .04em;
  padding: 0.3em 0.9em;         /* en em: escala con el font-size manteniendo la proporción */
  border-radius: var(--radius-sm);
  line-height: 1.4;
}
.fnt-badge--primario { background: var(--primario); color: var(--texto-claro); }
.fnt-badge--acento,
.fnt-badge--alerta   { background: var(--acento);   color: var(--texto-claro); }
.fnt-badge--mute     { background: var(--fondo-panel); color: var(--texto-2); }
/* Badge sobre la esquina de la imagen (tarjetas + PDP): arriba a la derecha y
   más grande que el inline, para que los descuentos/etiquetas se noten. */
.fnt-badge--corner {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  font-size: 13px;
}
/* PDP: mismo badge, proporcionalmente más grande. */
.fnt-badge--single { font-size: 16px; top: 14px; right: 14px; }
/* Tablet / mobile: se achican manteniendo la proporción (padding en em). */
@media (max-width: 1024px) {
  .fnt-badge--corner { font-size: 12px; }
  .fnt-badge--single { font-size: 15px; }
}
@media (max-width: 600px) {
  .fnt-badge--corner { font-size: 11px; }
  .fnt-badge--single { font-size: 13px; }
}

/* --- Tarjeta de producto --- */
.fnt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fondo-base);
  border: 1px solid var(--borde);
  border-radius: var(--radius);          /* híbrido: radius del mock */
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.fnt-card:hover { box-shadow: var(--sombra-card); }
.fnt-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  background: var(--fondo-suave);
  overflow: hidden;
}
.fnt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .55s var(--ease-img);
}
.fnt-card:hover .fnt-card__media img { transform: scale(1.04); }
.fnt-card__body { display: flex; flex-direction: column; gap: 6px; padding: 16px; flex: 1; }
.fnt-card__linea {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--texto-2);
}
.fnt-card__title { font-family: var(--fuente-cuerpo); font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--texto); }
.fnt-card__title a:hover { color: var(--primario); }
.fnt-card__rating { display: flex; align-items: center; gap: 6px; }
.fnt-card__rating-count { font-size: 12px; color: var(--texto-2); }
/* margin-top:auto ancla el botón abajo → alineado en toda la fila.
   !important documentado: gana a '.woocommerce a.button' del core de WC,
   que si no fuerza margin-top:0 y desalinea los botones. CLAUDE.md §6.4. */
.fnt-card__add { margin-top: auto !important; width: 100%; justify-content: center; text-align: center; }
.fnt-card .fnt-card__add { font-size: 13px; padding: 11px 18px; }

/* Estrellas (rating) */
.fnt-stars {
  --fnt-rating: 0;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  font-family: Times, serif;
}
.fnt-stars::before {
  content: "★★★★★";
  letter-spacing: 2px;
  background: linear-gradient(90deg, #f59e0b calc(var(--fnt-rating) / 5 * 100%), #d1d5db calc(var(--fnt-rating) / 5 * 100%));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- Precio dual --- */
.fnt-price { display: flex; flex-direction: column; gap: 2px; }
.fnt-price__regular { font-size: 13px; color: rgba(219,19,32,.5); color: color-mix(in srgb, var(--acento) 50%, transparent); text-decoration: line-through; }
/* Números SIEMPRE en DM Sans (legibilidad) */
.fnt-price__main { font-family: var(--fuente-cuerpo); font-weight: 700; color: var(--primario); letter-spacing: -.01em; }
.fnt-price--card .fnt-price__main { font-size: 19px; }
.fnt-price--pdp .fnt-price__main { font-size: 32px; }
.fnt-price__transfer { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.fnt-price__transfer-amount { font-size: 14px; font-weight: 600; color: var(--verde-ok); }
.fnt-price__transfer-label { font-size: 11px; color: var(--texto-2); }
.fnt-price--pdp .fnt-price__transfer-amount { font-size: 18px; }
.fnt-price__off { transform: translateY(-1px); }
.fnt-price__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fnt-price-kg { font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.fnt-price--pdp .fnt-price-kg { font-size: 14px; }

/* --- Breadcrumb (archive + PDP) --- */
.fnt-breadcrumb { padding-block: 14px 0; }
.fnt-breadcrumb__nav { font-size: 12.5px; color: var(--texto-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.fnt-breadcrumb__nav a { color: var(--texto-2); }
.fnt-breadcrumb__nav a:hover { color: var(--primario); }
.fnt-breadcrumb__sep { color: var(--borde); margin-inline: 2px; }

/* --- Tabs por línea (archive) --- */
.fnt-tabs { border-bottom: 1px solid var(--borde); }
.fnt-tabs__inner { display: flex; gap: 8px; overflow-x: auto; padding-block: 14px; scrollbar-width: none; }
.fnt-tabs__inner::-webkit-scrollbar { display: none; }
.fnt-tab {
  flex-shrink: 0;
  border: 1.5px solid var(--primario);
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 500;
  color: var(--primario);
  background: var(--fondo-base);
  transition: background .18s ease, color .18s ease;
}
.fnt-tab:hover { background: var(--fondo-panel); }
.fnt-tab.is-active { background: var(--primario); color: var(--texto-claro); }

/* --- Breadcrumb --- */
.fnt-breadcrumb { padding-block: 14px; font-size: 13px; color: var(--texto-2); }
.fnt-breadcrumb a:hover { color: var(--primario); }
.fnt-breadcrumb__sep { margin: 0 8px; color: var(--borde); }

/* --- Barra de envío gratis (reusable) --- */
.fnt-freeship {
  background: var(--fondo-panel);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.fnt-freeship__msg { font-size: 13px; color: var(--texto); margin-bottom: 8px; }
.fnt-freeship__track { height: 8px; background: var(--borde); border-radius: var(--radius-pill); overflow: hidden; }
.fnt-freeship__fill { height: 100%; background: var(--verde-ok); border-radius: var(--radius-pill); transition: width .4s ease; }
.fnt-freeship--ok .fnt-freeship__fill { background: var(--verde-ok); }
.fnt-freeship--ok .fnt-freeship__msg { color: var(--verde-ok); font-weight: 600; }

/* =========================================================
   HOME (front-page)
   ========================================================= */
.fnt-hero { background: var(--fondo-base); overflow: hidden; }
.fnt-hero__inner { display: grid; grid-template-columns: 1fr; gap: 0; align-items: stretch; }
.fnt-hero__text { padding-block: clamp(48px, 7vw, 88px); display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.fnt-hero__eyebrow { color: var(--secundario); margin-bottom: 14px; }
/* Punto rojo de acento antes del eyebrow del hero (eco del sello 110%). */
.fnt-hero__eyebrow::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--acento); margin-right: 8px; vertical-align: middle;
}
.fnt-hero__title { font-size: clamp(34px, 5vw, 58px); font-weight: 700; line-height: 1.1; color: var(--primario); margin-bottom: 16px; }
.fnt-hero__desc { font-size: 16px; line-height: 1.65; color: var(--texto-2); max-width: 460px; margin-bottom: 28px; }
.fnt-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.fnt-hero__cta-alt { border-color: var(--primario); color: var(--primario); }
.fnt-hero__cta-alt:hover { background: var(--fondo-panel); }
.fnt-hero__perks {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 26px;
}
.fnt-hero__perks li {
  position: relative; padding-left: 22px;
  font-size: 13px; font-weight: 500; color: var(--texto);
}
.fnt-hero__perks li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--verde-ok); color: #fff; border-radius: var(--radius-pill); font-size: 9px;
}
/* Mitad visual = carrusel a sangre. En mobile va debajo del texto con alto fijo;
   en desktop ocupa el 50% y se estira a la altura del hero. */
.fnt-hero__visual {
  position: relative;
  min-height: 300px;
  /* Sangra al borde en mobile (rompe el gutter del container). */
  margin-inline: calc(var(--gutter) * -1);
  overflow: hidden;
}
.fnt-hero__carousel { position: absolute; inset: 0; }
.fnt-hero__slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 1s var(--ease-img);
  will-change: opacity;
}
.fnt-hero__slide.is-active { opacity: 1; }
/* Sello real "Garantía 110%" (imagen, assets/img/garantia-110.png). */
.fnt-hero__badge {
  position: absolute; z-index: 3; right: 18px; top: 18px;
  width: 88px; height: auto;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.28));
}
/* Modo 3 (carrusel completo): slides apilados en la misma celda, crossfade.
   La altura del hero la marca el slide más alto; los inactivos quedan a opacity 0. */
.fnt-hero--full { position: relative; }
.fnt-hero--full .fnt-hero__slides { display: grid; }
.fnt-hero--full .fnt-hero__fslide {
  grid-area: 1 / 1; min-width: 0;
  opacity: 0; visibility: hidden; pointer-events: none;
  /* 320ms, no 1s: con el crossfade largo se veían DOS titulares superpuestos
     el 20% del tiempo. La visibility corta el solapamiento del todo. */
  transition: opacity .32s var(--ease-img), visibility 0s linear .32s;
}
.fnt-hero--full .fnt-hero__fslide.is-active { opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .32s var(--ease-img), visibility 0s; }

/* Puntitos de navegación de los carruseles del hero. Modo 2: blancos sobre la
   imagen. Modo 3: navy, centrados. */
.fnt-hero__dots {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 4;
  display: flex; justify-content: center; gap: 8px; padding: 0;
}
.fnt-hero__dot {
  width: 9px; height: 9px; padding: 0; border: none; border-radius: 50%;
  background: rgba(255,255,255,.55); box-shadow: 0 1px 3px rgba(0,0,0,.28);
  cursor: pointer; transition: background .2s ease, transform .2s ease;
}
.fnt-hero__dot:hover { background: rgba(255,255,255,.85); }
.fnt-hero__dot.is-active { background: #fff; transform: scale(1.25); }
.fnt-hero--full .fnt-hero__dots { bottom: 16px; }
.fnt-hero--full .fnt-hero__dot { background: rgba(0,35,78,.22); box-shadow: none; }
.fnt-hero--full .fnt-hero__dot:hover { background: rgba(0,35,78,.42); }
.fnt-hero--full .fnt-hero__dot.is-active { background: var(--primario); }

/* Barra de confianza (debajo del hero). Separada del hero con un margen. En
   tablet/mobile es un carrusel de 2 por vista (JS initTrustCarousel); en desktop
   una grilla de 4 columnas estática. */
.fnt-trustbar {
  border-bottom: 1px solid var(--borde); background: var(--fondo-suave);
  margin-top: clamp(14px, 2.4vw, 32px);
}
.fnt-trustbar > .fnt-container { padding-block: 22px; }
.fnt-trustbar__viewport { overflow: hidden; }
.fnt-trustbar__track { display: flex; gap: 16px; }
.fnt-trustbar__item {
  flex: 0 0 calc((100% - 16px) / 2); min-width: 0;
  display: flex; align-items: center; gap: 12px;
}
.fnt-trustbar__icon {
  flex: 0 0 auto; width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--fondo-base); color: var(--primario); border-radius: var(--radius-pill);
}
.fnt-trustbar__icon svg { width: 20px; height: 20px; }
.fnt-trustbar__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.fnt-trustbar__text strong { font-size: 14px; color: var(--texto); }
.fnt-trustbar__text span { font-size: 12px; color: var(--texto-2); white-space: normal; }
@media (min-width: 900px) {
  .fnt-trustbar__viewport { overflow: visible; }
  .fnt-trustbar__track {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px;
    transform: none !important;
  }
  .fnt-trustbar__item { flex: none; }
}

/* Líneas */
.fnt-lineas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fnt-linea-card {
  display: flex; flex-direction: column;
  background: var(--fondo-base);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.fnt-linea-card:hover { box-shadow: var(--sombra-card); transform: translateY(-2px); }
.fnt-linea-card__media {
  display: block; aspect-ratio: 4 / 3;
  background: var(--fondo-suave);
  overflow: hidden;
}
.fnt-linea-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease-img); }
.fnt-linea-card:hover .fnt-linea-card__media img { transform: scale(1.05); }
.fnt-linea-card__info { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 20px; flex: 1; }
.fnt-linea-card__label { font-size: 20px; font-weight: 700; color: var(--primario); }
.fnt-linea-card__tagline { font-size: 13px; color: var(--texto-2); line-height: 1.5; flex: 1; }
.fnt-linea-card__more { font-size: 13px; font-weight: 600; color: var(--secundario); margin-top: 4px; }

/* La Más Elegida */
.fnt-elegida__inner { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: center; }
.fnt-elegida__text h2 { font-size: clamp(28px, 4vw, 44px); color: var(--primario); margin: 8px 0 14px; }
.fnt-elegida__text p { font-size: 15px; color: var(--texto-2); line-height: 1.7; margin-bottom: 18px; max-width: 520px; }
.fnt-elegida__bullets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.fnt-elegida__bullets li { position: relative; padding-left: 28px; font-size: 14px; color: var(--texto); }
.fnt-elegida__bullets li::before {
  content: "✓"; position: absolute; left: 0; top: -1px;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  background: var(--verde-ok); color: #fff; border-radius: var(--radius-pill); font-size: 11px;
}
.fnt-elegida__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 280px; }
.fnt-elegida__img { width: 80%; max-width: 360px; }
.fnt-elegida__img img { width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(0,35,78,.16)); }
.fnt-elegida__seal {
  position: absolute; right: 4%; bottom: 6%; z-index: 2;
  width: 132px; height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.24));
}

/* Sellos */
.fnt-seals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.fnt-seal { text-align: center; padding: 20px 14px; }
.fnt-seal__title { display: block; font-size: 17px; font-weight: 700; color: var(--primario); margin-bottom: 4px; }
.fnt-seal__sub { font-size: 12px; color: var(--texto-2); }

/* Testimonios */
.fnt-testimonials { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fnt-testimonial {
  background: var(--fondo-base);
  border: 1px solid var(--borde);
  border-radius: var(--radius);
  padding: 24px;
}
.fnt-testimonial__stars { color: #f59e0b; font-size: 15px; letter-spacing: 2px; margin-bottom: 12px; }
.fnt-testimonial__quote { font-family: var(--fuente-display); font-size: 17px; line-height: 1.5; color: var(--texto); margin-bottom: 14px; }
.fnt-testimonial__author { font-size: 13px; font-weight: 600; color: var(--texto); }
.fnt-testimonial__author span { color: var(--texto-2); font-weight: 400; }

/* CTA final */
.fnt-cta-final { background: var(--fondo-navy); color: var(--texto-claro); padding-block: clamp(48px, 7vw, 88px); }
.fnt-cta-final__inner { text-align: center; }
.fnt-cta-final__inner h2 { font-size: clamp(28px, 4vw, 46px); margin-bottom: 12px; }
.fnt-cta-final__inner p { font-size: 16px; opacity: .85; margin-bottom: 28px; }

/* =========================================================
   REVEAL ON SCROLL  (CLAUDE.md §"reveal on scroll")
   ========================================================= */
.fnt-reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.fnt-reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fnt-reveal { opacity: 1; transform: none; transition: none; }
}

/* =========================================================
   BREAKPOINTS COMPONENTES
   ========================================================= */
@media (min-width: 600px) {
  .fnt-lineas { grid-template-columns: repeat(3, 1fr); }
  .fnt-seals { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 768px) {
  .fnt-grid--products { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .fnt-testimonials { grid-template-columns: repeat(3, 1fr); }
  .fnt-elegida__inner { grid-template-columns: 1.1fr .9fr; }
  /* Hero 50/50: texto | carrusel. El visual se estira a la altura del hero
     y su imagen sangra al borde derecho. */
  .fnt-hero__inner { grid-template-columns: 1.08fr 0.92fr; align-items: stretch; gap: 0; }
  .fnt-hero__text { padding-right: clamp(24px, 4vw, 56px); }
  .fnt-hero__visual { min-height: 420px; margin: 0; margin-right: calc(var(--gutter) * -1); }
}
@media (min-width: 1100px) {
  .fnt-grid--products { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   INTEGRACIÓN WOOCOMMERCE — botones, mensajes, inputs
   Especificidad suficiente para ganarle a los estilos core de WC
   (que pintan los botones de morado #7f54b3).
   ========================================================= */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt,
.woocommerce .single_add_to_cart_button,
.woocommerce-page button.button,
.woocommerce-page a.button {
  background: var(--primario);
  color: var(--texto-claro);
  border: none;
  border-radius: var(--radius-pill);
  font-family: var(--fuente-cuerpo);
  font-weight: 600;
  text-transform: none;
  padding: 12px 26px;
  transition: opacity .15s ease, transform .1s ease;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover { background: var(--primario); opacity: .9; }

/* Botón "agregado" / ver carrito */
.woocommerce a.added_to_cart {
  display: inline-block; margin-top: 6px;
  font-size: 12px; font-weight: 600; color: var(--secundario);
}

/* Inputs WC */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection {
  border: 1px solid var(--borde);
  border-radius: var(--radius-sm);
  font-family: var(--fuente-cuerpo);
}

/* Mensajes / notices */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
  border-top-color: var(--primario);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.woocommerce-message::before,
.woocommerce-info::before { color: var(--primario); }
.woocommerce-message .button,
.woocommerce-info .button { background: var(--primario); }

/* Precios nativos de WC (cualquier .amount): DM Sans, nunca serif */
.woocommerce .price,
.woocommerce .amount,
.woocommerce-Price-amount { font-family: var(--fuente-cuerpo); }

/* Related products / upsells heading */
.woocommerce .related > h2,
.woocommerce .upsells > h2,
.woocommerce .cross-sells > h2 {
  font-family: var(--fuente-display);
  font-size: clamp(22px, 3vw, 30px);
  color: var(--primario);
  margin-bottom: 18px;
}
/* El grid de related usa la grilla de cards */
.woocommerce .related ul.products,
.woocommerce .upsells ul.products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 0;
}
@media (min-width: 768px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1100px) {
  .woocommerce .related ul.products,
  .woocommerce .upsells ul.products { grid-template-columns: repeat(4, 1fr); }
}

/* =========================================================
   HOVER DE 2DO MEDIO EN TARJETAS (archive + home)
   ========================================================= */
.fnt-card__media-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 1;
}
.fnt-card__media-hover img,
.fnt-card__media-hover video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fnt-card:hover .fnt-card__media-hover { opacity: 1; }

/* =========================================================
   TABLA COMPARATIVA
   ========================================================= */
.fnt-comp-section { background: var(--fondo-suave); }
.fnt-comp__wrap { overflow-x: auto; border-radius: var(--radius); }
.fnt-comp {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--fondo-base);
  border-radius: var(--radius);
  overflow: hidden;
}
.fnt-comp th,
.fnt-comp td {
  padding: 14px 16px;
  text-align: center;
  font-size: 14px;
  border-bottom: 1px solid var(--borde);
}
.fnt-comp thead th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto-2);
  background: var(--fondo-panel);
}
.fnt-comp__feature { text-align: left; font-weight: 500; color: var(--texto); }
.fnt-comp__brand {
  background: rgba(0, 35, 78, .04);
  color: var(--primario);
  font-weight: 600;
}
.fnt-comp thead .fnt-comp__brand { background: var(--primario); color: var(--texto-claro); }
.fnt-comp__yes {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--verde-ok); color: #fff;
  border-radius: var(--radius-pill); font-size: 12px;
}
.fnt-comp__no { color: var(--borde); font-size: 16px; }
.fnt-comp__conclusion {
  margin-top: 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--texto-2);
  max-width: 760px;
}
.fnt-comp__conclusion strong { color: var(--primario); }

/* =========================================================
   BOTÓN PEQUEÑO + ADD-ON DE CHECKOUT
   ========================================================= */
.fnt-btn--sm { padding: 8px 16px; font-size: 13px; }

.fnt-checkout-addons {
  margin-bottom: 22px;
  padding: 16px;
  background: var(--fondo-suave);
  border: 1px dashed var(--secundario);
  border-radius: var(--radius);
}
.fnt-checkout-addons__list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.fnt-addon { display: flex; align-items: center; gap: 12px; background: var(--fondo-base); border: 1px solid var(--borde); border-radius: var(--radius-sm); padding: 10px; }
.fnt-addon img { width: 48px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.fnt-addon__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fnt-addon__name { font-size: 13px; font-weight: 600; color: var(--texto); }
.fnt-addon__price { font-size: 13px; color: var(--verde-ok); font-weight: 600; }
.fnt-addon.is-added { opacity: .6; }

/* Precio de upsell con descuento evidente (was / now / −%) — bump y add-on */
.fnt-upsell-price { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.fnt-upsell-price__was { font-size: 13px; color: var(--texto-2); text-decoration: line-through; }
.fnt-upsell-price__now { font-size: 16px; font-weight: 700; color: var(--primario); }
.fnt-upsell-price__off { font-size: 11px; padding: 2px 7px; }
/* Sello −% junto al nombre del ítem con descuento en el carrito */
.fnt-upsell-tag {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  color: var(--acento); background: rgba(219, 19, 32, .1); border-radius: var(--radius-sm); padding: 1px 6px;
}

/* =========================================================
   MARQUEE DE SELLOS
   ========================================================= */
.fnt-marquee {
  overflow: hidden;
  background: var(--primario);
  color: var(--texto-claro);
  padding: 14px 0;
  white-space: nowrap;
}
.fnt-marquee__track {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  animation: fnt-marquee 28s linear infinite;
}
.fnt-marquee__item {
  font-family: var(--fuente-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .01em;
}
.fnt-marquee__dot { opacity: .5; }
@keyframes fnt-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .fnt-marquee__track { animation: none; }
}

/* =========================================================
   GRID SOCIAL
   ========================================================= */
.fnt-social-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fnt-social-grid__item { position: relative; aspect-ratio: 1/1; overflow: hidden; border-radius: var(--radius-sm); background: var(--fondo-suave); }
.fnt-social-grid__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-img); }
.fnt-social-grid__item:hover img { transform: scale(1.06); }
.fnt-social-grid__icon {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,35,78,.35); color: #fff;
  opacity: 0; transition: opacity .2s ease;
}
.fnt-social-grid__item:hover .fnt-social-grid__icon { opacity: 1; }

/* =========================================================
   ACORDEÓN (base global, usado en home FAQ y PDP)
   ========================================================= */
.fnt-acc { border-bottom: 1px solid var(--borde); }
.fnt-acc > summary {
  cursor: pointer; list-style: none;
  padding: 16px 0;
  font-size: 15px; font-weight: 600; color: var(--primario);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.fnt-acc > summary::-webkit-details-marker { display: none; }
.fnt-acc > summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--texto-2); flex-shrink: 0; }
.fnt-acc[open] > summary::after { content: "−"; }
.fnt-acc__body { padding: 0 0 16px; font-size: 14px; color: var(--texto-2); line-height: 1.65; }
.fnt-faq__list { max-width: 760px; margin-inline: auto; }

@media (min-width: 600px) {
  .fnt-social-grid { grid-template-columns: repeat(5, 1fr); }
}

/* =========================================================
   CHIPS DE ATRIBUTO (tarjetas)
   ========================================================= */
.fnt-card__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; padding: 0; }
.fnt-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border: 1px solid var(--borde); border-radius: var(--radius-pill);
  font-size: 11px; font-weight: 500; color: var(--texto-2); background: var(--fondo-base); line-height: 1.25;
}
.fnt-chip__icon { display: inline-flex; flex-shrink: 0; }
.fnt-chip__icon svg { width: 13px; height: 13px; color: var(--primario); }

/* =========================================================
   TOP PICKS (tabs perros / gatos)
   ========================================================= */
.fnt-toppicks__tabs {
  display: inline-flex; gap: 6px; margin-top: 16px;
  background: var(--fondo-panel); padding: 5px; border-radius: var(--radius-pill);
}
.fnt-toppicks__tab {
  border: none; background: transparent; cursor: pointer;
  padding: 8px 20px; border-radius: var(--radius-pill);
  font-family: var(--fuente-cuerpo); font-size: 14px; font-weight: 600; color: var(--texto-2);
  transition: background .2s, color .2s;
}
.fnt-toppicks__tab.is-active { background: var(--primario); color: var(--texto-claro); }
.fnt-toppicks__panel.is-hidden { display: none; }

/* =========================================================
   CATEGORÍAS (bento)
   ========================================================= */
.fnt-cats__grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.fnt-cat-card {
  position: relative; display: flex; align-items: flex-end;
  min-height: 200px; padding: 22px; border-radius: var(--radius); overflow: hidden;
  background-color: var(--fondo-panel); background-image: var(--fnt-cat-bg);
  background-size: cover; background-position: center; background-repeat: no-repeat;
  text-decoration: none; isolation: isolate;
  transition: transform .25s, box-shadow .25s;
}
.fnt-cat-card:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); }
.fnt-cat-card__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,35,78,0) 30%, rgba(0,35,78,.8) 100%);
}
.fnt-cat-card__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; }
.fnt-cat-card__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.85); }
.fnt-cat-card__name { font-size: 24px; font-weight: 800; color: #fff; line-height: 1.1; }

@media (min-width: 700px) {
  .fnt-cats__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; }
  .fnt-cat-card--lg { grid-column: span 2; grid-row: span 2; }
  .fnt-cat-card--lg .fnt-cat-card__name { font-size: 34px; }
}

/* =========================================================
   BUNDLE BUILDER (armá tu combo · ref. "Stack Your Bowl")
   ========================================================= */
.fnt-section__head--center { text-align: center; }
.fnt-section__head--center .fnt-section__sub { margin-inline: auto; }
.fnt-bb { display: flex; flex-direction: column; gap: 22px; }

/* Escenario: card destacada + carrusel de productos */
.fnt-bb__stage { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* Card destacada (gradiente navy con el %) */
.fnt-bb__feature {
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 240px; padding: 24px;
  border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(150deg, var(--primario), var(--secundario));
  color: var(--texto-claro);
}
.fnt-bb__feature-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; opacity: .85; }
.fnt-bb__feature-pct { font-size: clamp(52px, 8vw, 76px); font-weight: 800; line-height: .95; margin-top: 8px; }
.fnt-bb__feature-label { font-size: 16px; font-weight: 600; }
.fnt-bb__feature-sub { font-size: 13px; opacity: .85; margin-top: 10px; }

/* Carrusel de productos: scroll horizontal en mobile, grilla en desktop */
.fnt-bb__products { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
/* Modo perro + gato: 2 perros + 2 gatos. Desktop = los 4 en fila (dos grupos
   lado a lado, 2 tarjetas c/u). Tablet/mobile = grupos apilados, 2 y 2. */
.fnt-bb__groups { display: grid; grid-template-columns: 1fr; gap: 20px; }
.fnt-bb__group .fnt-grid--products { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.fnt-bb__group-title {
  font-family: var(--fuente-display); font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1px; color: var(--primario);
  margin-bottom: 12px; padding-bottom: 6px; border-bottom: 1px solid var(--borde);
}
/* Perro + gato: SIEMPRE apilados (perros arriba, gatos abajo), cada fila es su
   propio carrusel a ancho completo. No lado a lado — evita que se corra. */

/* --- Carrusel de grupo (perros / gatos): track deslizable + flechas evidentes --- */
/* min-width:0 en toda la cadena: sin esto los ítems de grid/flex conservan
   min-width:auto y el track crece hasta las 10 tarjetas → desborda la página.
   Con min-width:0 el track queda acotado y overflow-x:auto recorta (scroll interno). */
.fnt-bb__groups, .fnt-bb__group, .fnt-bb__carousel, .fnt-bb__track { min-width: 0; }
.fnt-bb__carousel { position: relative; }
.fnt-bb__track {
  display: flex; gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 2px 6px;
}
.fnt-bb__track::-webkit-scrollbar { display: none; }
.fnt-bb__track > .fnt-card {
  /* Mobile: 2 tarjetas exactas por fila (1 gap de 12px). */
  flex: 0 0 calc((100% - 12px) / 2);
  scroll-snap-align: start;
}
@media (min-width: 768px) {
  /* Tablet + desktop: 3 tarjetas exactas por fila (2 gaps de 12px). */
  .fnt-bb__track > .fnt-card { flex-basis: calc((100% - 24px) / 3); }
}
.fnt-bb__arrow {
  position: absolute; top: 38%; transform: translateY(-50%);
  z-index: 4; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--fondo-base); color: var(--primario);
  border: 1px solid var(--borde);
  box-shadow: 0 4px 16px rgba(0, 35, 78, .16);
  cursor: pointer;
  transition: opacity .15s ease, box-shadow .15s ease;
}
.fnt-bb__arrow--prev { left: 4px; }
.fnt-bb__arrow--next { right: 4px; }
.fnt-bb__arrow:hover { box-shadow: 0 6px 20px rgba(0, 35, 78, .24); }
.fnt-bb__arrow:disabled { opacity: 0; pointer-events: none; }
/* Sin scroll disponible → sin flechas */
.fnt-bb__carousel:not(.has-overflow) .fnt-bb__arrow { display: none; }

/* Tarjeta elegida dentro del combo (anillo navy) */
.fnt-bb .fnt-card.is-bb-selected {
  box-shadow: 0 0 0 2px var(--primario);
  border-radius: var(--radius);
}

/* Faltantes del combo, en rojo (perro / gato) */
.fnt-bb__missing {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--acento);
}
.fnt-bb__missing::before {
  content: "+"; flex: 0 0 auto;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--acento); color: #fff; font-size: 13px; line-height: 1;
}

/* Perro + gato: la card destacada va ARRIBA (banner centrado full-width) para
   no comprimir los productos; el stage pasa a una sola columna en todo ancho. */
.fnt-bb[data-bb-mode="perro_gato"] .fnt-bb__stage { grid-template-columns: 1fr; gap: 0; }
.fnt-bb[data-bb-mode="perro_gato"] .fnt-bb__feature {
  min-height: 0;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 24px;
  margin-bottom: 22px;
}
.fnt-bb[data-bb-mode="perro_gato"] .fnt-bb__feature-pct { font-size: clamp(34px, 6vw, 48px); margin-top: 2px; }
.fnt-card__bb-add { width: 100%; margin-top: auto; }
.fnt-card__bb-add.is-added { background: var(--primario); color: var(--texto-claro); border-color: var(--primario); }

/* Barra "Contenido del combo" */
.fnt-bb__contents {
  display: grid; grid-template-columns: 1fr; gap: 20px;
  background: var(--fondo-base); border: 1px solid var(--borde);
  border-radius: var(--radius); padding: 22px 24px;
}
.fnt-bb__contents-title { font-size: 18px; margin: 0 0 6px; color: var(--primario); }
.fnt-bb__hint { font-size: 13px; color: var(--texto-2); margin: 0 0 10px; }
.fnt-bb__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fnt-bb__empty { font-size: 13px; color: var(--texto-2); font-style: italic; }
.fnt-bb__item { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fnt-bb__item-name { flex: 1; color: var(--texto); line-height: 1.3; }
.fnt-bb__item-price { font-weight: 600; color: var(--primario); white-space: nowrap; }
.fnt-bb__remove { border: none; background: var(--fondo-panel); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; color: var(--texto-2); font-size: 15px; line-height: 1; flex-shrink: 0; }
.fnt-bb__remove:hover { background: var(--acento); color: #fff; }
.fnt-bb__totals { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.fnt-bb__trow { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-2); }
.fnt-bb__trow--discount { color: var(--acento); font-weight: 600; }
.fnt-bb__trow--total { font-size: 16px; font-weight: 700; color: var(--texto); border-top: 1px solid var(--borde); padding-top: 8px; margin-top: 2px; }
.fnt-bb__finalize { width: 100%; }
.fnt-bb__finalize:disabled { opacity: .5; cursor: not-allowed; }
.fnt-bb__stack-note {
  display: flex; align-items: flex-start; gap: 7px;
  font-size: 12px; line-height: 1.4; color: var(--verde-ok);
  background: rgba(46, 80, 68, .08); border-radius: var(--radius-sm);
  padding: 9px 11px; margin: 0;
}
.fnt-bb__stack-note svg { flex: 0 0 auto; margin-top: 1px; }

@media (min-width: 900px) {
  /* Las dos columnas (card destacada + productos) SOLO cuando la card existe.
     En modo "mixto" el stage no la renderiza y su único hijo es .fnt-bb__products:
     sin el :has(), la grilla igual reservaba los 280px y metía los productos ahí,
     dejándolos en tres columnas de ~85px y la columna 1fr vacía al lado.
     Sin soporte de :has() queda en una sola columna a todo ancho, que es correcto. */
  .fnt-bb__stage:has(.fnt-bb__feature) { grid-template-columns: 280px 1fr; align-items: stretch; }
  .fnt-bb__products { grid-template-columns: repeat(3, 1fr); }
  .fnt-bb__contents { grid-template-columns: 1.1fr 1.3fr 1fr; align-items: start; }
}

/* Wrapper de páginas WooCommerce con shortcode (carrito, checkout, mi cuenta) */
.fnt-wc-page { padding-block: clamp(32px, 5vw, 56px); }

/* =========================================================
   FORMULARIO DE BÚSQUEDA  (reusable: header, 404, resultados)
   ========================================================= */
.fnt-searchform {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: var(--fondo-base);
  border: 1.5px solid var(--borde);
  border-radius: var(--radius-pill);
  padding: 6px 6px 6px 20px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.fnt-searchform:focus-within {
  border-color: var(--primario);
  box-shadow: 0 0 0 3px rgba(0, 35, 78, .08);
}
.fnt-searchform__input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: var(--fuente-cuerpo);
  font-size: 15px;
  color: var(--texto);
  outline: none;
  min-width: 0;
}
.fnt-searchform__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--primario);
  color: var(--texto-claro);
  transition: opacity .15s ease;
}
.fnt-searchform__submit:hover { opacity: .9; }

/* =========================================================
   PANEL DE BÚSQUEDA  (drop-down desde el header)
   ========================================================= */
.fnt-search-panel {
  position: fixed;
  inset: 0;
  z-index: 1200;
}
.fnt-search-panel__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 35, 78, .35);
  opacity: 0;
  transition: opacity .28s ease;
}
.fnt-search-panel.is-open .fnt-search-panel__overlay { opacity: 1; }
.fnt-search-panel__inner {
  position: relative;
  background: var(--fondo-base);
  padding-block: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(-100%);
  transition: transform .28s var(--ease-img);
  box-shadow: 0 8px 24px rgba(0, 35, 78, .12);
}
.fnt-search-panel.is-open .fnt-search-panel__inner { transform: translateY(0); }
.fnt-search-panel__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 760px;
  width: 100%;
  margin-inline: auto;
}
.fnt-search-panel__bar .fnt-searchform { flex: 1; }
.fnt-search-panel__close {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: none;
  background: var(--fondo-suave);
  border-radius: var(--radius-pill);
  font-size: 26px;
  line-height: 1;
  color: var(--texto-2);
}
.fnt-search-panel__close:hover { background: var(--fondo-panel); color: var(--texto); }

/* ----- Resultados en vivo (dropdown) ----- */
.fnt-search-results {
  max-width: 760px;
  width: 100%;
  margin-inline: auto;
  max-height: min(64vh, 520px);
  overflow-y: auto;
}
.fnt-search-results[hidden] { display: none; }
.fnt-search-results.is-loading { position: relative; min-height: 60px; }
.fnt-search-results.is-loading::after {
  content: "";
  position: absolute; top: 18px; left: 50%; margin-left: -13px;
  width: 26px; height: 26px;
  border: 3px solid var(--fondo-panel); border-top-color: var(--primario);
  border-radius: 50%; animation: fnt-spin .8s linear infinite;
}
@keyframes fnt-spin { to { transform: rotate(360deg); } }

.fnt-sr-group { padding: 6px 0; border-top: 1px solid var(--borde); }
.fnt-sr-group:first-child { border-top: none; }
.fnt-sr-group-title {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--texto-2); padding: 8px 6px 6px;
}
.fnt-sr-cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--texto);
}
.fnt-sr-cat:hover { background: var(--fondo-suave); }
.fnt-sr-cat-name { font-weight: 600; }
.fnt-sr-cat-count { font-size: 12px; color: var(--texto-2); }

.fnt-sr-product {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 12px; border-radius: var(--radius-sm);
}
.fnt-sr-product:hover { background: var(--fondo-suave); }
.fnt-sr-thumb {
  width: 52px; height: 52px; flex: 0 0 auto;
  background: var(--fondo-suave); border-radius: var(--radius-sm); overflow: hidden;
}
.fnt-sr-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fnt-sr-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fnt-sr-name { font-size: 14px; font-weight: 600; color: var(--texto); line-height: 1.3; }
.fnt-sr-price { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.fnt-sr-price-mp { font-size: 14px; font-weight: 700; color: var(--texto); }
.fnt-sr-price-tf { font-size: 12px; font-weight: 600; color: var(--verde-ok); }
.fnt-sr-empty { padding: 18px 8px; color: var(--texto-2); font-size: 14px; }
.fnt-sr-seeall {
  display: block; text-align: center; margin-top: 8px; padding: 13px;
  border-radius: var(--radius-pill); background: var(--primario); color: var(--texto-claro);
  font-weight: 600; font-size: 14px;
}
.fnt-sr-seeall:hover { opacity: .92; }

/* Mobile: el panel ocupa todo el alto y el form full-width */
@media (max-width: 560px) {
  .fnt-search-panel__inner { min-height: 100dvh; padding-block: 16px; }
  .fnt-search-results { max-height: calc(100dvh - 96px); }
}

/* ============================================================
   HOME · Colores por línea + sellos rediseñados + iconos
   (añadido — sobreescribe reglas previas por cascada)
   ============================================================ */

/* --- Categorías: tinte por color de línea + imagen contenida --- */
.fnt-cat-card {
  --_c: var(--fnt-linea-color, var(--primario));
  background-image: none !important;
  background-color: color-mix(in srgb, var(--_c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--_c) 22%, #fff);
  align-items: flex-start;
  flex-direction: column;
  justify-content: flex-end;
}
.fnt-cat-card__overlay { display: none; }
.fnt-cat-card__img {
  position: absolute; right: -6%; top: 50%; transform: translateY(-50%);
  height: 78%; width: auto; max-width: 60%; object-fit: contain; z-index: 1;
  filter: drop-shadow(0 14px 22px rgba(0, 35, 78, .16));
  transition: transform .45s var(--ease-img, cubic-bezier(.16, 1, .3, 1));
  pointer-events: none;
}
.fnt-cat-card:hover .fnt-cat-card__img { transform: translateY(-50%) scale(1.05); }
.fnt-cat-card__body { position: relative; z-index: 2; max-width: 66%; }
.fnt-cat-card__eyebrow {
  color: color-mix(in srgb, var(--_c) 82%, #000);
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.fnt-cat-card__name { color: var(--primario); }
.fnt-cat-card__go {
  margin-top: 8px; font-size: 13px; font-weight: 600;
  color: var(--_c); opacity: 0; transform: translateY(4px);
  transition: opacity .3s, transform .3s;
}
.fnt-cat-card:hover .fnt-cat-card__go { opacity: 1; transform: none; }
.fnt-cat-card--lg .fnt-cat-card__img { height: 86%; right: 2%; max-width: 56%; }
@media (min-width: 700px) {
  .fnt-cat-card--lg .fnt-cat-card__body { max-width: 58%; }
}

/* --- Sello 110%: tamaño un poco mayor en desktop (imagen real, misma proporción). --- */
@media (min-width: 860px) {
  .fnt-hero__badge { width: 108px; }
  .fnt-elegida__seal { width: 150px; }
}

/* --- Sellos de confianza (con medallón de icono) --- */
.fnt-seal {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 26px 16px; background: var(--fondo-base);
  border: 1px solid var(--borde); border-radius: var(--radius);
}
.fnt-seal__icon {
  width: 52px; height: 52px; margin-bottom: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: color-mix(in srgb, var(--primario) 8%, #fff);
  color: var(--primario);
}
.fnt-seal__icon svg { width: 26px; height: 26px; }

/* ============================================================
   HOME · Secciones extra (destacado, banners, pasos)
   ============================================================ */

/* --- Producto destacado (más vendido) — espeja la columna del PDP --- */
.fnt-featured__inner {
  display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: start;
}
.fnt-featured__media {
  --_c: var(--fnt-linea-color, var(--primario));
  position: relative; display: block; border-radius: var(--radius);
  background: color-mix(in srgb, var(--_c) 6%, #fff);
  overflow: hidden; text-decoration: none;
}
/* La caja se ajusta a la imagen (height:auto) -> sin espacio sobrante alrededor. */
.fnt-featured__media img { width: 100%; height: auto; display: block; }
.fnt-featured__flag {
  position: absolute; left: 16px; top: 16px; z-index: 2;
  background: var(--fnt-linea-color, var(--primario)); color: #fff;
  font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 5px;
}
/* La info reusa los estilos del PDP vía el wrapper .fnt-single (sin su padding). */
.fnt-featured .fnt-single { padding-block: 0; }
/* La regla base del PDP (gap 14px) pide un ancestro div.product que la home no
   tiene, así que el destacado define su propio flex-column con aire responsive. */
.fnt-featured__info .entry-summary { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); }
.fnt-featured__info .product_title { margin: 0; }
.fnt-featured__info .product_title a { color: inherit; text-decoration: none; }
.fnt-featured__info .product_title a:hover { color: var(--acento); }
@media (min-width: 860px) {
  .fnt-featured__inner { grid-template-columns: 0.9fr 1.1fr; }
  .fnt-featured__media { position: sticky; top: calc(var(--nav-h, 72px) + 16px); }
}

/* --- Banners promocionales --- */
.fnt-promos { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px) { .fnt-promos { grid-template-columns: repeat(3, 1fr); } }
.fnt-promo {
  --_c: var(--fnt-linea-color, var(--primario));
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-height: 180px; padding: 26px; border-radius: var(--radius); text-decoration: none;
  background: color-mix(in srgb, var(--_c) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--_c) 22%, #fff);
  transition: transform .25s, box-shadow .25s;
}
.fnt-promo:hover { transform: translateY(-3px); box-shadow: var(--sombra-card); }
.fnt-promo__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--_c) 82%, #000); }
.fnt-promo__title { font-size: 22px; font-weight: 800; color: var(--primario); margin: 6px 0 12px; line-height: 1.1; }
.fnt-promo__cta { font-size: 14px; font-weight: 700; color: var(--_c); }

/* --- Pasos "cómo empezar" --- */
.fnt-pasos { display: grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 760px) { .fnt-pasos { grid-template-columns: repeat(4, 1fr); } }
.fnt-paso { text-align: center; }
.fnt-paso__num {
  width: 56px; height: 56px; margin: 0 auto 14px;
  display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
  background: color-mix(in srgb, var(--primario) 8%, #fff); color: var(--primario);
}
.fnt-paso__num svg { width: 26px; height: 26px; }
.fnt-paso__step { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--secundario); margin-bottom: 4px; }
.fnt-paso__title { display: block; font-size: 17px; color: var(--primario); margin-bottom: 6px; }
.fnt-paso__text { font-size: 13px; color: var(--texto-2); line-height: 1.55; }

/* =========================================================
   AUDITORÍA — alineación de tarjetas + breadcrumb mobile
   ========================================================= */
/* Reserva 2 líneas de título para que el precio/botón alineen entre tarjetas. */
.fnt-card__title { min-height: 2.7em; }

/* Breadcrumb en una sola línea con scroll horizontal en mobile (no wrap). */
@media (max-width: 600px) {
  .fnt-breadcrumb__nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .fnt-breadcrumb__nav::-webkit-scrollbar { display: none; }
  .fnt-breadcrumb__nav > * { flex: 0 0 auto; }
}