/* ==========================================================================
   FIVEFISH LUXURY GOURMET & MINIMALIST STYLES
   Paleta: Midnight Navy (#08131d), Warm Alabaster (#FAF8F5),
           Pure Titanium White (#FFFFFF), Subtle Sage/Teal (#2A6375),
           Warm Champagne/Gold (#C5A880), Ultra-thin borders (#EAE6DF)
   ========================================================================== */

:root {
   --ff-bg-luxury: #FAF8F5;
   --ff-bg-card: #FFFFFF;
   --ff-dark: #08131d;
   --ff-dark-surface: #0e1e2d;
   --ff-accent: #2A6375;
   --ff-gold: #C5A880;
   --ff-gold-subtle: rgba(197, 168, 128, 0.15);
   --ff-text-main: #1C2329;
   --ff-text-muted: #6B7280;
   --ff-border: #E8E4DC;
   --ff-border-light: rgba(0, 0, 0, 0.05);
   --ff-radius-sm: 8px;
   --ff-radius-md: 16px;
   --ff-radius-lg: 24px;
   --ff-radius-pill: 100px;
}

body {
   background-color: var(--ff-bg-luxury) !important;
   color: var(--ff-text-main);
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   letter-spacing: -0.01em;
}

/* ==========================================================================
   HEADER & NAVEGACIÓN LIMPIA (FIX CONTRASTE Y 1 LÍNEA)
   ========================================================================== */

/* Asegurar que la barra de navegación nunca rompa en 2 líneas y tenga contraste óptimo */
.tp-header-area.header-transparent {
   background: rgba(250, 248, 245, 0.95) !important;
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-bottom: 1px solid rgba(232, 228, 220, 0.7);
}

.tp-main-menu nav ul,
.mg-main-menu nav ul {
   display: flex !important;
   align-items: center !important;
   gap: 6px !important;
   margin-bottom: 0 !important;
   padding-left: 0 !important;
   list-style: none !important;
   flex-wrap: nowrap !important;
}

.tp-main-menu nav ul li,
.mg-main-menu > nav > ul > li {
   margin: 0 !important;
   display: inline-flex !important;
   white-space: nowrap !important;
}

/* Los links de navegación: texto claro, legible, elegante sobre fondo transparente o suave */
.tp-main-menu nav ul li a,
.mg-main-menu > nav > ul > li > a,
.fivefish-nav-link {
   background: transparent !important;
   color: #08131d !important;
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 14px !important;
   font-weight: 600 !important;
   letter-spacing: -0.01em !important;
   padding: 8px 14px !important;
   border-radius: 100px !important;
   line-height: 1 !important;
   white-space: nowrap !important;
   transition: all 0.25s ease !important;
   text-decoration: none !important;
   display: inline-flex !important;
   align-items: center !important;
   border: 1px solid transparent !important;
}

/* Efecto hover suave y contemporáneo: Fondo Azul Corporativo FiveFish */
.tp-main-menu nav ul li a:hover,
.mg-main-menu > nav > ul > li > a:hover,
.fivefish-nav-link:hover {
   background: #30589f !important;
   color: #FFFFFF !important;
   border-color: #30589f !important;
}

/* Desactivar cualquier pantalla de loading/preloader */
#preloader, .preloader, #loading {
   display: none !important;
   visibility: hidden !important;
   opacity: 0 !important;
   pointer-events: none !important;
}

/* ==========================================================================
   TÍTULOS DE SECCIONES (SIEMPRE EN 1 SOLA LÍNEA & MÁXIMA ELEGANCIA)
   ========================================================================== */

/* Regla estricta: títulos de sección de alto impacto sin partir en 2 líneas */
.ff-section-heading {
   font-family: var(--tp-ff-sequel-bold), 'Sequel Sans', 'Inter', sans-serif !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.03em !important;
   color: var(--ff-dark) !important;
   white-space: nowrap !important; /* Garantiza 1 línea en desktop */
   margin-bottom: 16px !important;
   line-height: 1.1 !important;
}

/* Escala fluida y responsiva para que quepa en 1 sola línea */
h1.ff-section-heading {
   font-size: clamp(28px, 4.2vw, 56px) !important;
}

h2.ff-section-heading {
   font-size: clamp(24px, 3.4vw, 46px) !important;
}

h3.ff-section-heading {
   font-size: clamp(20px, 2.6vw, 34px) !important;
}

/* Eyebrow de sección minimalista */
.ff-eyebrow {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.18em;
   text-transform: uppercase;
   color: var(--ff-accent);
   margin-bottom: 12px;
   white-space: nowrap;
}

.ff-eyebrow.dark {
   color: var(--ff-gold);
}

.ff-eyebrow::before {
   content: "";
   display: inline-block;
   width: 16px;
   height: 1px;
   background: currentColor;
}

/* Logo Gourmet */
.ff-logo-text {
   font-size: 24px;
   font-weight: 800;
   letter-spacing: 0.15em;
   color: var(--ff-dark);
   text-transform: uppercase;
   display: inline-flex;
   align-items: center;
   white-space: nowrap;
}

.ff-logo-text span {
   color: var(--ff-accent);
   font-weight: 300;
}

/* ==========================================================================
   HERO & BODEGÓN CINEMÁTICO
   ========================================================================== */
.ff-hero-container {
   border-radius: 24px;
   overflow: hidden;
   position: relative;
   background: var(--ff-dark);
}

.ff-hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(
      180deg,
      rgba(8, 19, 29, 0.45) 0%,
      rgba(8, 19, 29, 0.7) 60%,
      rgba(8, 19, 29, 0.92) 100%
   );
   z-index: 2;
}

.ff-hero-content {
   position: relative;
   z-index: 3;
}

/* Iconos Lineales Minimalistas SVG */
.ff-icon-linear {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: 1px solid var(--ff-border);
   background: #FFFFFF;
   color: var(--ff-dark);
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   flex-shrink: 0;
}

.ff-icon-linear svg {
   width: 20px;
   height: 20px;
   stroke: currentColor;
   stroke-width: 1.5;
   fill: none;
   stroke-linecap: round;
   stroke-linejoin: round;
   transition: transform 0.35s ease;
}

.ff-value-card:hover .ff-icon-linear {
   border-color: var(--ff-dark);
   background: var(--ff-dark);
   color: #FFFFFF;
   transform: translateY(-2px);
}

.ff-value-card:hover .ff-icon-linear svg {
   transform: scale(1.08);
}

/* Barra Flotante de Valores */
.ff-value-strip {
   background: rgba(255, 255, 255, 0.9);
   backdrop-filter: blur(20px);
   -webkit-backdrop-filter: blur(20px);
   border-radius: 20px;
   border: 1px solid rgba(232, 228, 220, 0.85);
   box-shadow: 0 20px 40px -15px rgba(8, 19, 29, 0.05);
   padding: 30px 34px;
   margin-top: -55px;
   position: relative;
   z-index: 10;
}

.ff-value-card {
   display: flex;
   align-items: center;
   gap: 16px;
}

.ff-value-title {
   font-size: 15px;
   font-weight: 700;
   letter-spacing: -0.01em;
   color: var(--ff-dark);
   margin-bottom: 2px;
   white-space: nowrap;
}

.ff-value-desc {
   font-size: 13px;
   color: var(--ff-text-muted);
   margin: 0;
   line-height: 1.4;
   font-weight: 400;
}

/* ==========================================================================
   TARJETAS DE PRODUCTO GOURMET MINIMALISTAS
   ========================================================================== */
.ff-card-gourmet {
   background: #FFFFFF;
   border: 1px solid var(--ff-border);
   border-radius: 18px;
   overflow: hidden;
   transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
   height: 100%;
   display: flex;
   flex-direction: column;
}

.ff-card-gourmet:hover {
   transform: translateY(-6px);
   border-color: #D3CDC2;
   box-shadow: 0 25px 50px -12px rgba(8, 19, 29, 0.08);
}

.ff-card-media {
   position: relative;
   overflow: hidden;
   aspect-ratio: 4 / 3;
   background: #F0EDE8;
}

.ff-card-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-card-gourmet:hover .ff-card-media img {
   transform: scale(1.04);
}

.ff-card-tag {
   position: absolute;
   top: 16px;
   left: 16px;
   padding: 5px 12px;
   font-size: 10px;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   border-radius: 100px;
   background: rgba(8, 19, 29, 0.75);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
   color: #FFFFFF;
   border: 1px solid rgba(255, 255, 255, 0.15);
}

.ff-card-content {
   padding: 26px 24px;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.ff-card-origin {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ff-accent);
   margin-bottom: 8px;
   white-space: nowrap;
}

.ff-card-title {
   font-size: 19px;
   font-weight: 700;
   color: var(--ff-dark);
   line-height: 1.3;
   margin-bottom: 10px;
}

.ff-card-text {
   font-size: 14px;
   color: var(--ff-text-muted);
   line-height: 1.6;
   margin-bottom: 20px;
   flex-grow: 1;
}

.ff-card-pills {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   padding-top: 14px;
   border-top: 1px solid #F0EDE8;
   margin-bottom: 18px;
}

.ff-card-pill {
   font-size: 11px;
   font-weight: 500;
   color: #4A5568;
   background: #F7F5F0;
   padding: 4px 10px;
   border-radius: 6px;
   display: inline-flex;
   align-items: center;
   gap: 6px;
   white-space: nowrap;
}

.ff-card-pill svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   stroke-width: 1.8;
   fill: none;
}

/* Botón Minimalista de Detalles */
.ff-btn-minimal {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.02em;
   color: var(--ff-dark);
   background: transparent;
   border: 1px solid var(--ff-border);
   padding: 8px 18px;
   border-radius: 100px;
   transition: all 0.25s ease;
   white-space: nowrap;
}

.ff-btn-minimal:hover {
   background: var(--ff-dark);
   color: #FFFFFF;
   border-color: var(--ff-dark);
}

.ff-btn-minimal svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
   transition: transform 0.25s ease;
}

.ff-btn-minimal:hover svg {
   transform: translateX(3px);
}

/* Category Tabs Minimalistas */
.ff-tabs-clean {
   display: inline-flex;
   background: #FFFFFF;
   border: 1px solid var(--ff-border);
   border-radius: 100px;
   padding: 5px;
   gap: 4px;
   flex-wrap: nowrap;
}

.ff-tabs-clean .nav-link {
   border: none;
   border-radius: 100px;
   padding: 10px 24px;
   font-size: 14px;
   font-weight: 600;
   color: var(--ff-text-muted);
   transition: all 0.25s ease;
   background: transparent;
   display: inline-flex;
   align-items: center;
   gap: 8px;
   white-space: nowrap;
}

.ff-tabs-clean .nav-link svg {
   width: 15px;
   height: 15px;
   stroke: currentColor;
   stroke-width: 1.6;
   fill: none;
}

.ff-tabs-clean .nav-link.active {
   background: var(--ff-dark);
   color: #FFFFFF;
   box-shadow: 0 4px 14px rgba(8, 19, 29, 0.15);
}

/* Obrador Card - Luxury Midnight */
.ff-obrador-luxury {
   background: var(--ff-dark-surface);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 24px;
   padding: 55px 48px;
   color: #FFFFFF;
   position: relative;
   overflow: hidden;
}

.ff-obrador-feature {
   border: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(255, 255, 255, 0.03);
   border-radius: 14px;
   padding: 18px;
   transition: background 0.3s ease;
}

.ff-obrador-feature:hover {
   background: rgba(255, 255, 255, 0.06);
}

/* Hitos / Awards Minimalistas */
.ff-timeline-clean {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.ff-timeline-row {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 20px 26px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   transition: all 0.25s ease;
}

.ff-timeline-row:hover {
   background: rgba(255, 255, 255, 0.08);
   border-color: rgba(255, 255, 255, 0.18);
   transform: translateX(4px);
}

.ff-timeline-year {
   font-size: 15px;
   font-weight: 700;
   color: var(--ff-gold);
   min-width: 55px;
   letter-spacing: 0.05em;
   white-space: nowrap;
}

.ff-timeline-main {
   flex-grow: 1;
}

.ff-timeline-title {
   font-size: 15px;
   font-weight: 600;
   color: #FFFFFF;
   margin-bottom: 2px;
}

.ff-timeline-subtitle {
   font-size: 13px;
   color: rgba(255, 255, 255, 0.6);
   line-height: 1.4;
}

.ff-timeline-tag {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(255, 255, 255, 0.85);
   border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 4px 12px;
   border-radius: 100px;
   white-space: nowrap;
}

/* Formulario Minimalista Clean */
.ff-input-clean {
   border: 1px solid var(--ff-border);
   border-radius: 10px;
   padding: 12px 16px;
   font-size: 14px;
   background: #FAF8F5;
   transition: all 0.25s ease;
}

.ff-input-clean:focus {
   border-color: var(--ff-dark);
   background: #FFFFFF;
   box-shadow: none;
   outline: none;
}

/* Modales Gourmet */
.ff-modal-minimal .modal-content {
   border-radius: 20px;
   border: 1px solid var(--ff-border);
   box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15);
   background: #FFFFFF;
}

/* Botones Principales Refinados */
.ff-btn-dark {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: var(--ff-dark);
   color: #FFFFFF;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.02em;
   padding: 13px 28px;
   border-radius: 100px;
   border: 1px solid var(--ff-dark);
   transition: all 0.3s ease;
   text-decoration: none;
   white-space: nowrap;
}

.ff-btn-dark:hover {
   background: var(--ff-accent);
   border-color: var(--ff-accent);
   color: #FFFFFF;
   transform: translateY(-2px);
}

.ff-btn-outline-white {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: transparent;
   color: #FFFFFF;
   font-size: 14px;
   font-weight: 600;
   letter-spacing: 0.02em;
   padding: 13px 28px;
   border-radius: 100px;
   border: 1px solid rgba(255, 255, 255, 0.3);
   transition: all 0.3s ease;
   text-decoration: none;
   white-space: nowrap;
}

.ff-btn-outline-white:hover {
   background: #FFFFFF;
   color: var(--ff-dark);
   border-color: #FFFFFF;
   transform: translateY(-2px);
}

@media (max-width: 991px) {
   .ff-section-heading {
      white-space: normal !important;
   }
   .ff-tabs-clean {
      flex-wrap: wrap;
   }
   .ff-value-strip {
      margin-top: 24px;
      padding: 24px 20px;
   }
   .ff-obrador-luxury {
      padding: 36px 24px;
   }
   .ff-timeline-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
   }
}


/* ==========================================================================
   FICHAS DE PRODUCTO SEAMLESS / MINIMALISTAS (SIN CAJA NI FONDO BLANCO)
   ========================================================================== */



/* Ancho contenido controlado y separado de los bordes */
.container-1600 {
   max-width: 1560px !important;
   margin-left: auto !important;
   margin-right: auto !important;
}

/* Fichas más compactas, estilizadas y con aire alrededor */
.ff-card-seamless {
   background: transparent !important;
   border: 1px solid transparent !important;
   border-radius: 18px;
   padding: 16px 14px 18px 14px;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   height: 100%;
   display: flex;
   flex-direction: column;
   max-width: 440px;
   margin-left: auto;
   margin-right: auto;
   width: 100%;
}

.ff-card-seamless:hover {
   background: rgba(255, 255, 255, 0.45) !important;
   border-color: rgba(200, 195, 185, 0.6) !important;
   box-shadow: 0 16px 36px -12px rgba(8, 19, 29, 0.05);
   transform: scale(1.02);
}

.ff-card-seamless:active {
   transform: scale(0.97) !important;
   transition: transform 0.12s ease !important;
}

.ff-card-seamless .ff-card-media {
   background: transparent !important;
   border-radius: 14px;
   overflow: hidden;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 14px;
   max-height: 290px; /* Tamaño más controlado y contenido */
   margin: 0 auto;
   width: 100%;
}

.ff-card-seamless .ff-card-media img {
   width: 100%;
   height: 100%;
   object-fit: contain !important;
   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-card-seamless:hover .ff-card-media img {
   transform: scale(1.04);
}

.ff-card-seamless .ff-card-content {
   background: transparent !important;
   padding: 14px 6px 0 6px !important;
   display: flex;
   flex-direction: column;
   flex-grow: 1;
}

.ff-card-seamless .ff-card-origin {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--ff-accent);
   margin-bottom: 6px;
}

.ff-card-seamless .ff-card-title {
   font-size: 18px;
   font-weight: 700;
   color: var(--ff-dark);
   line-height: 1.3;
   margin-bottom: 8px;
}

.ff-card-seamless .ff-card-text {
   font-size: 13.5px;
   color: var(--ff-text-muted);
   line-height: 1.55;
   margin-bottom: 14px;
}

.ff-card-seamless .ff-card-pills {
   background: transparent !important;
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   padding-top: 10px;
   margin-bottom: 14px;
   gap: 5px;
}

.ff-card-seamless .ff-card-pill {
   font-size: 10.5px;
   padding: 3px 8px;
   background: rgba(255, 255, 255, 0.65) !important;
   border: 1px solid rgba(0, 0, 0, 0.04);
}

.ff-card-seamless .ff-btn-minimal {
   background: #FFFFFF !important;
   border: 1px solid var(--ff-border) !important;
   font-size: 12.5px;
   font-weight: 600;
   padding: 7px 18px;
   border-radius: 100px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
   transition: all 0.25s ease;
}

.ff-card-seamless:hover .ff-btn-minimal {
   background: var(--ff-dark) !important;
   color: #FFFFFF !important;
   border-color: var(--ff-dark) !important;
}


/* ==========================================================================
   MAQUETACIÓN EDITORIAL TRIPARTITA (ESTILO ARQUITECTURA / INTERIOR LUXURY)
   ========================================================================== */

.ff-about-tri-wrap {
   background: #FAF8F5 !important; /* Tono cálido lino / arena sutil */
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ff-tri-photo {
   border-radius: 12px;
   overflow: hidden;
   aspect-ratio: 4 / 3.8;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
   background: #F0EDE8;
}

.ff-tri-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-tri-photo:hover img {
   transform: scale(1.03);
}

.ff-tri-headline {
   font-family: var(--tp-ff-sequel-bold), 'Sequel Sans', 'Inter', sans-serif !important;
   font-size: clamp(24px, 2.6vw, 38px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.02em !important;
   color: #2D241E !important; /* Tono café / espresso sofisticado */
   line-height: 1.15 !important;
}

.ff-tri-body {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 15px !important;
   line-height: 1.85 !important;
   color: #5A524C !important;
}

.ff-tri-signature-block {
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   margin-top: 32px;
}

.ff-signature-svg {
   width: 130px;
   height: 60px;
   opacity: 0.85;
   margin-bottom: 4px;
}

.ff-signature-name {
   font-size: 11px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.18em;
   color: #2D241E;
}

.ff-signature-role {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: #8C827A;
}

/* 3 Pilares sutiles integrados debajo */
.ff-tri-pilar {
   border-top: 1px solid rgba(0, 0, 0, 0.08);
   padding-top: 18px;
}

.ff-tri-pilar-num {
   font-size: 11px;
   font-weight: 700;
   letter-spacing: 0.15em;
   color: #B39268;
   margin-bottom: 6px;
}

.ff-tri-pilar-title {
   font-size: 14px;
   font-weight: 700;
   color: #2D241E;
   margin-bottom: 4px;
}

.ff-tri-pilar-desc {
   font-size: 12.5px;
   color: #6E6660;
   line-height: 1.5;
   margin: 0;
}


/* ==========================================================================
   MAQUETACIÓN EDITORIAL MANIFIESTO (REFERENCIA 2: FOTO DERECHA COMPACTA)
   ========================================================================== */

.ff-manifiesto-editorial-wrap {
   background: #FAF8F5 !important; /* Mismo fondo cálido lino / arena sutil */
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.ff-editorial-huge-title {
   font-family: var(--tp-ff-sequel-bold), 'Sequel Sans', 'Inter', sans-serif !important;
   font-size: clamp(30px, 3.6vw, 54px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: #2D241E !important; /* Tono café / espresso sofisticado */
   line-height: 1.08 !important;
}

.ff-editorial-side-photo {
   border-radius: 12px;
   overflow: hidden;
   aspect-ratio: 1 / 1;
   max-width: 320px;
   margin-left: auto;
   box-shadow: 0 14px 35px rgba(0, 0, 0, 0.06);
   background: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.06);
}

.ff-editorial-side-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-editorial-side-photo:hover img {
   transform: scale(1.04);
}

.ff-editorial-text-p {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 16px !important;
   line-height: 1.85 !important;
   color: #5A524C !important;
}

.ff-editorial-pills-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-top: 24px;
}

.ff-editorial-pill-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.07);
   padding: 7px 16px;
   border-radius: 100px;
   font-size: 12.5px;
   font-weight: 600;
   color: #2D241E;
}

.ff-editorial-pill-tag svg {
   width: 14px;
   height: 14px;
   stroke: #1e708f;
   stroke-width: 2;
   fill: none;
}

/* ============================================================
   TIPOGRAFÍA MANROPE Y ESCALA REFINADA PARA TÍTULOS
   ============================================================ */
:root {
   --ff-font-title: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.ff-section-heading {
   font-family: var(--ff-font-title) !important;
   font-weight: 800 !important;
   letter-spacing: -0.03em !important;
   text-transform: uppercase !important;
   color: #2D241E !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   display: block !important;
   max-width: 100% !important;
   line-height: 1.15 !important;
}

/* Tamaños más pequeños y armónicos para títulos */
h1.ff-section-heading { font-size: clamp(24px, 3.4vw, 44px) !important; }
h2.ff-section-heading { font-size: clamp(22px, 2.8vw, 38px) !important; }
h3.ff-section-heading { font-size: clamp(18px, 2.2vw, 28px) !important; }

.ff-tri-headline {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(22px, 2.6vw, 36px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.03em !important;
   color: #2D241E !important;
   line-height: 1.15 !important;
}

/* ============================================================
   SECCIÓN MANIFIESTO GOURMET (#FishLovers) - MÁS AIRE Y FOTO GRANDE
   ============================================================ */
.ff-manifiesto-editorial-wrap {
   background: #FAF8F5 !important; /* Lino cálido gourmet */
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding-top: clamp(80px, 9vw, 150px) !important;
   padding-bottom: clamp(80px, 9vw, 150px) !important;
}

.ff-editorial-huge-title {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(24px, 2.8vw, 38px) !important; /* Más pequeño, refinado y elegante */
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.03em !important;
   color: #2D241E !important; /* Espresso profundo */
   line-height: 1.15 !important;
}

.ff-editorial-side-photo {
   border-radius: 16px;
   overflow: hidden;
   aspect-ratio: 4 / 3.8; /* Proporción amplia y generosa */
   width: 100%;
   max-width: 580px; /* Mucho más grande y protagonista */
   margin: 0 auto;
   box-shadow: 0 20px 45px rgba(45, 36, 30, 0.08);
   background: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.06);
}

.ff-editorial-side-photo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-editorial-side-photo:hover img {
   transform: scale(1.03);
}

.ff-editorial-text-p {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 16px !important;
   line-height: 1.85 !important;
   color: #5A524C !important;
   max-width: 560px;
}

.ff-editorial-pills-row {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
}

.ff-editorial-pill-tag {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   background: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 999px;
   padding: 8px 18px;
   font-size: 13px;
   font-weight: 600;
   color: #2D241E;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
   transition: all 0.25s ease;
}

.ff-editorial-pill-tag:hover {
   border-color: #2D241E;
   background: #F4F1EA;
}

.ff-editorial-pill-tag svg {
   width: 14px;
   height: 14px;
   stroke: #2D241E;
   stroke-width: 2.2;
   fill: none;
}

/* ============================================================
   GALERÍA PARALLAX MULTICOLUMNA DE LA PLANTILLA
   ============================================================ */
.ff-gallery-editorial-section {
   border-top: 1px solid rgba(0, 0, 0, 0.06);
   padding-top: 60px;
}

.ff-gallery-editorial-section .tp-gallery-wrapper {
   background: #111B24 !important; /* Azul marino abisal muy elegante */
   border-radius: 28px !important;
   padding: 30px !important;
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.12);
}

.ff-gallery-editorial-section .tp-gallery-item {
   border-radius: 18px !important;
   overflow: hidden !important;
   background: #1A2834;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
   transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.ff-gallery-editorial-section .tp-gallery-item:hover {
   transform: translateY(-4px);
   box-shadow: 0 16px 35px rgba(0, 0, 0, 0.4);
}

.ff-gallery-editorial-section .tp-gallery-item img {
   border-radius: 18px !important;
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   aspect-ratio: 4 / 3.8;
   transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-gallery-editorial-section .tp-gallery-item:hover img {
   transform: scale(1.05);
}

/* ============================================================
   MAQUETACIÓN MODERNA Y VISUAL V2 PARA MANIFIESTO (#FishLovers)
   ============================================================ */
.ff-manifesto-v2-wrap {
   background: #FAF8F5 !important;
   border-top: 1px solid rgba(0, 0, 0, 0.05);
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
   padding-top: clamp(80px, 8vw, 130px) !important;
   padding-bottom: clamp(80px, 8vw, 130px) !important;
}

.ff-editorial-lead {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 16px !important;
   line-height: 1.8 !important;
   color: #5A524C !important;
}

/* Stack de Tarjetas Interactivas de Atributos */
.ff-manifesto-cards-stack {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.ff-manifesto-card {
   display: flex;
   align-items: flex-start;
   gap: 18px;
   background: #FFFFFF;
   border: 1px solid rgba(0, 0, 0, 0.07);
   border-radius: 16px;
   padding: 18px 22px;
   cursor: pointer;
   transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
   position: relative;
   overflow: hidden;
}

.ff-manifesto-card::before {
   content: '';
   position: absolute;
   left: 0;
   top: 0;
   bottom: 0;
   width: 4px;
   background: var(--ff-gold);
   transform: scaleY(0);
   transition: transform 0.3s ease;
}

.ff-manifesto-card:hover,
.ff-manifesto-card.active {
   border-color: rgba(45, 36, 30, 0.2);
   box-shadow: 0 12px 28px rgba(45, 36, 30, 0.07);
   transform: translateX(6px);
}

.ff-manifesto-card.active::before {
   transform: scaleY(1);
}

.ff-card-icon-box {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 12px;
   background: #F4F1EA;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.3s ease;
}

.ff-manifesto-card:hover .ff-card-icon-box,
.ff-manifesto-card.active .ff-card-icon-box {
   background: var(--ff-dark);
}

.ff-card-icon-box svg {
   width: 20px;
   height: 20px;
   stroke: var(--ff-dark);
   fill: none;
   stroke-width: 1.8;
   transition: stroke 0.3s ease;
}

.ff-manifesto-card:hover .ff-card-icon-box svg,
.ff-manifesto-card.active .ff-card-icon-box svg {
   stroke: var(--ff-gold);
}

.ff-card-text-box {
   flex-grow: 1;
}

.ff-manifesto-card-title {
   font-family: var(--ff-font-title) !important;
   font-size: 15px !important;
   font-weight: 700 !important;
   color: #2D241E !important;
   letter-spacing: -0.01em;
}

.ff-manifesto-card-badge {
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.1em;
   padding: 3px 8px;
   border-radius: 6px;
   background: #FAF8F5;
   color: #8C827A;
   border: 1px solid rgba(0, 0, 0, 0.05);
}

.ff-manifesto-card-desc {
   font-size: 13px;
   color: #726A64;
   line-height: 1.55;
}

/* Escenario Visual / Hero Foto Derecha */
.ff-manifesto-visual-stage {
   position: relative;
   padding: 10px;
}

.ff-manifesto-visual-frame {
   position: relative;
   border-radius: 24px;
   overflow: hidden;
   aspect-ratio: 4 / 3.7;
   background: #F0ECE4;
   box-shadow: 0 25px 60px rgba(45, 36, 30, 0.12);
   border: 1px solid rgba(0, 0, 0, 0.06);
}

.ff-manifesto-img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-manifesto-visual-frame:hover .ff-manifesto-img {
   transform: scale(1.03);
}

/* Badge Flotante Gourmet con Glasmorfismo */
.ff-manifesto-floating-badge {
   position: absolute;
   bottom: 24px;
   left: 24px;
   display: flex;
   align-items: center;
   gap: 14px;
   background: rgba(17, 27, 36, 0.88);
   backdrop-filter: blur(14px);
   -webkit-backdrop-filter: blur(14px);
   border: 1px solid rgba(255, 255, 255, 0.15);
   padding: 14px 20px;
   border-radius: 16px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
}

.ff-floating-icon {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: rgba(200, 169, 126, 0.15);
   border: 1px solid rgba(200, 169, 126, 0.3);
   display: flex;
   align-items: center;
   justify-content: center;
}

.ff-floating-icon svg {
   width: 18px;
   height: 18px;
   stroke: var(--ff-gold);
   fill: var(--ff-gold);
}

.ff-floating-sup {
   display: block;
   font-size: 10px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 0.12em;
   color: var(--ff-gold);
}

.ff-floating-title {
   font-family: var(--ff-font-title) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   color: #FFFFFF !important;
   margin-bottom: 0 !important;
}

/* ============================================================
   MODAL DE PRODUCTO LUXURY (ESTILO DOLCE & GABBANA / GOURMET)
   ============================================================ */
.ff-luxury-modal .modal-dialog {
   max-width: 1040px !important;
   margin: 20px auto !important;
}

.ff-luxury-modal-content {
   background: #0E161E !important; /* Negro abisal noble */
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 28px !important;
   overflow: hidden !important;
   box-shadow: 0 35px 80px rgba(0, 0, 0, 0.6) !important;
   position: relative;
}

/* Botón Circular Minimalista de Cierre */
.ff-luxury-modal-close {
   position: absolute;
   top: 22px;
   right: 22px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   color: #FFFFFF;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 10;
   cursor: pointer;
   transition: all 0.25s ease;
}

.ff-luxury-modal-close:hover {
   background: rgba(255, 255, 255, 0.2);
   transform: rotate(90deg);
}

.ff-luxury-modal-close svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
   stroke-width: 2;
   fill: none;
}

/* Columna Izquierda: Escenario de Foto */
.ff-modal-media-wrapper {
   background: #F4F0E8; /* Fondo lino / arena cálido que hace resaltar el envase */
   height: 100%;
   min-height: 440px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 40px;
   position: relative;
}

.ff-modal-img {
   max-width: 82%;
   max-height: 420px;
   width: auto;
   height: auto;
   object-fit: contain;
   filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.14));
   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-modal-media-wrapper:hover .ff-modal-img {
   transform: scale(1.05);
}

/* Columna Derecha: Panel de Información Editorial */
.ff-modal-info-panel {
   padding: clamp(30px, 4vw, 55px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   height: 100%;
}

.ff-modal-eyebrow-row {
   margin-bottom: 12px;
}

.ff-modal-eyebrow {
   font-family: var(--ff-font-title) !important;
   font-size: 11px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   color: var(--ff-gold);
}

.ff-modal-main-title {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(22px, 2.6vw, 34px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.02em !important;
   color: #FFFFFF !important;
   line-height: 1.15 !important;
   margin-bottom: 8px !important;
}

.ff-modal-subtitle {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(16px, 1.8vw, 22px);
   font-weight: 700;
   color: #C8A97E; /* Oro gourmet */
   margin-bottom: 22px;
}

.ff-modal-desc-text {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 14.5px !important;
   line-height: 1.75 !important;
   color: #A9B4BC !important;
   margin-bottom: 25px !important;
}

/* Píldoras Dark Elegantes */
.ff-modal-pills-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 30px;
}

.ff-modal-tag-pill {
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.1);
   color: #D3DDE4;
   font-size: 12px;
   font-weight: 600;
   padding: 7px 16px;
   border-radius: 999px;
   letter-spacing: 0.02em;
}

/* Fila de Acción (Selector de Raciones + Botón CTA) */
.ff-modal-action-row {
   display: flex;
   align-items: center;
   gap: 14px;
   margin-bottom: 22px;
}

.ff-modal-qty-selector {
   display: inline-flex;
   align-items: center;
   gap: 12px;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 999px;
   padding: 6px 14px;
}

.ff-qty-btn {
   background: transparent;
   border: none;
   color: #FFFFFF;
   font-size: 18px;
   font-weight: 700;
   line-height: 1;
   cursor: pointer;
   padding: 0 6px;
   transition: color 0.2s ease;
}

.ff-qty-btn:hover {
   color: var(--ff-gold);
}

.ff-qty-value {
   font-family: var(--ff-font-title) !important;
   font-size: 15px;
   font-weight: 700;
   color: #FFFFFF;
   min-width: 18px;
   text-align: center;
}

.ff-modal-cta-btn {
   flex-grow: 1;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   background: var(--ff-gold);
   color: #0E161E !important;
   font-family: var(--ff-font-title) !important;
   font-size: 13px;
   font-weight: 800;
   text-transform: uppercase;
   letter-spacing: 0.08em;
   padding: 13px 26px;
   border-radius: 999px;
   text-decoration: none;
   border: 1px solid var(--ff-gold);
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ff-modal-cta-btn:hover {
   background: #FFFFFF;
   border-color: #FFFFFF;
   color: #0E161E !important;
   transform: translateY(-2px);
   box-shadow: 0 10px 25px rgba(200, 169, 126, 0.3);
}

.ff-modal-cta-btn svg {
   width: 15px;
   height: 15px;
   stroke: currentColor;
   stroke-width: 2.2;
   fill: none;
}

.ff-modal-footer-note {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 12px;
   color: #717E88;
}

.ff-modal-footer-note svg {
   width: 14px;
   height: 14px;
   stroke: var(--ff-gold);
   stroke-width: 1.8;
   fill: none;
   flex-shrink: 0;
}

/* ============================================================
   AJUSTE DE MODAL LUXURY: FOTOGRAFÍA MÁS PROTAGONISTA Y GRANDE
   ============================================================ */
.ff-luxury-modal .modal-dialog {
   max-width: 1100px !important;
}

.ff-modal-media-wrapper {
   background: #F4F0E8 !important;
   height: 100% !important;
   min-height: 520px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 24px !important; /* Menor padding para que la foto llene mucho más el espacio */
}

.ff-modal-img {
   max-width: 95% !important;
   max-height: 500px !important; /* Foto significativamente más grande */
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.16)) !important;
   transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ff-modal-media-wrapper:hover .ff-modal-img {
   transform: scale(1.04) !important;
}

.ff-modal-info-panel {
   padding: clamp(35px, 4.5vw, 65px) !important;
}

/* ============================================================
   SOBRE NOSOTROS: MÁS AIRE Y RESPIRO CON LOS BORDES
   ============================================================ */
.ff-about-tri-wrap {
   padding-top: clamp(90px, 9vw, 160px) !important;
   padding-bottom: clamp(90px, 9vw, 160px) !important;
}

.ff-about-tri-wrap .container-fluid {
   max-width: 1520px !important;
   padding-left: clamp(24px, 5vw, 80px) !important;
   padding-right: clamp(24px, 5vw, 80px) !important;
}

.ff-tri-photo {
   border-radius: 18px !important;
   aspect-ratio: 4 / 3.7 !important;
   box-shadow: 0 20px 45px rgba(45, 36, 30, 0.08) !important;
}

/* ============================================================
   ALINEACIÓN ARMÓNICA Y EQUILIBRADA EN SOBRE NOSOTROS
   ============================================================ */
.ff-about-tri-wrap .row.align-items-start {
   align-items: flex-start !important;
}

.ff-eyebrow-container {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   line-height: 1;
}

.ff-eyebrow-line {
   display: inline-block;
   width: 20px;
   height: 1.5px;
   background: #8C827A;
}

/* Alineación exacta de la línea de base superior */
.ff-tri-headline {
   margin-top: 0 !important;
}

.ff-tri-right-content {
   padding-top: 32px; /* Compensa la altura del eyebrow para que el primer renglón del párrafo coincida perfectamente con el primer renglón del titular */
}

@media (max-width: 991.98px) {
   .ff-tri-right-content {
      padding-top: 0;
   }
}

.ff-tri-body {
   margin-top: 0 !important;
}

.ff-tri-signature-block {
   margin-top: 28px !important;
   align-items: flex-end !important; /* Firma apoyada a la derecha de forma elegante */
   text-align: right !important;
}

/* ============================================================
   MAQUETACIÓN EDITORIAL FIDELIDAD TOTAL A LA REFERENCIA
   ============================================================ */
.ff-about-tri-wrap {
   background: #FAF8F5 !important;
   border-top: none !important;
   border-bottom: none !important;
   padding-top: clamp(100px, 11vw, 180px) !important;
   padding-bottom: clamp(100px, 11vw, 180px) !important;
}

.ff-about-tri-wrap .container-fluid {
   max-width: 1480px !important;
   padding-left: clamp(28px, 6vw, 90px) !important;
   padding-right: clamp(28px, 6vw, 90px) !important;
}

.ff-tri-photo {
   border-radius: 16px !important;
   overflow: hidden !important;
   aspect-ratio: 1 / 1 !important; /* Cuadrado exacto como en la captura */
   width: 100% !important;
   max-width: 440px !important;
   box-shadow: 0 16px 40px rgba(45, 36, 30, 0.08) !important;
   background: #EAE6DE !important;
}

.ff-tri-photo img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
}

.ff-tri-headline {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(22px, 2.5vw, 36px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: #2D241E !important;
   line-height: 1.14 !important;
   margin-top: 0 !important;
}

.ff-tri-right-content {
   padding-top: 26px !important; /* Coincide exactamente con la altura del titular */
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   min-height: 280px;
}

@media (max-width: 991.98px) {
   .ff-tri-right-content {
      padding-top: 0 !important;
      min-height: auto;
   }
}

.ff-tri-body {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 15.5px !important;
   line-height: 1.85 !important;
   color: #554D47 !important;
   max-width: 440px !important;
}

.ff-tri-signature-block {
   margin-top: auto !important;
   padding-top: 24px;
   display: flex;
   flex-direction: column;
   align-items: flex-end !important;
   text-align: right !important;
}

.ff-signature-svg {
   width: 120px !important;
   height: auto !important;
   margin-bottom: 6px;
}

.ff-signature-name {
   font-family: var(--ff-font-title) !important;
   font-size: 13px !important;
   font-weight: 800 !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   color: #2D241E !important;
   display: block;
   margin-bottom: 3px;
}

.ff-signature-role {
   font-size: 11px !important;
   letter-spacing: 0.12em !important;
   text-transform: uppercase !important;
   color: #8C827A !important;
   display: block;
}

/* Transición limpia y fluida hacia Catálogo de Productos */
#productos {
   background: #FAF8F5 !important; /* Mismo fondo continuo y armonioso */
   padding-top: clamp(60px, 7vw, 110px) !important;
}

/* ============================================================
   SOBRE NOSOTROS: MAQUETACIÓN EDITORIAL EXACTA A LA CAPTURA
   ============================================================ */
.ff-tri-headline {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(26px, 2.7vw, 42px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: #2D241E !important;
   line-height: 1.12 !important;
   white-space: normal !important; /* Permite los saltos de línea editoriales de la captura */
   text-overflow: unset !important;
   overflow: visible !important;
}

.ff-tri-body {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 16px !important;
   line-height: 1.75 !important;
   color: #554D47 !important;
   max-width: 460px !important;
   margin-bottom: 0 !important;
}

.ff-tri-right-content {
   padding-top: 0 !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   min-height: 270px !important;
}

.ff-tri-signature-block {
   margin-top: 40px !important;
   align-items: flex-end !important;
   text-align: right !important;
}

.ff-signature-svg {
   width: 140px !important;
   height: auto !important;
   margin-bottom: 8px !important;
}

.ff-signature-name {
   font-family: var(--ff-font-title) !important;
   font-size: 12.5px !important;
   font-weight: 800 !important;
   letter-spacing: 0.16em !important;
   text-transform: uppercase !important;
   color: #2D241E !important;
   margin-bottom: 4px !important;
}

.ff-signature-role {
   font-family: var(--ff-font-title) !important;
   font-size: 10.5px !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   color: #8C827A !important;
}

/* ============================================================
   SOBRE NOSOTROS: REPLICA EXACTA DE LA CAPTURA (FOTO + TÍTULO JUNTOS)
   ============================================================ */
.ff-tri-photo-box {
   width: 280px;
   max-width: 100%;
}

.ff-tri-photo {
   border-radius: 18px !important;
   overflow: hidden !important;
   aspect-ratio: 1 / 1 !important;
   width: 100% !important;
   box-shadow: 0 16px 40px rgba(45, 36, 30, 0.08) !important;
   background: #EAE6DE !important;
}

.ff-tri-photo img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
}

.ff-tri-title-box {
   flex-grow: 1;
}

.ff-tri-headline {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(22px, 2.2vw, 32px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: #2D241E !important;
   line-height: 1.15 !important;
   white-space: normal !important;
}

.ff-tri-right-content {
   padding-top: 0 !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   min-height: auto !important;
}

.ff-tri-body {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 14.5px !important;
   line-height: 1.8 !important;
   color: #554D47 !important;
   max-width: 420px !important;
   margin-bottom: 25px !important;
}

.ff-tri-signature-block {
   margin-top: 15px !important;
   display: flex !important;
   flex-direction: column !important;
   align-items: flex-start !important; /* Firma en la misma columna de lectura */
   text-align: left !important;
}

.ff-signature-svg {
   width: 110px !important;
   height: auto !important;
   margin-bottom: 6px !important;
}

.ff-signature-name {
   font-family: var(--ff-font-title) !important;
   font-size: 12px !important;
   font-weight: 800 !important;
   letter-spacing: 0.16em !important;
   text-transform: uppercase !important;
   color: #2D241E !important;
   margin-bottom: 3px !important;
}

.ff-signature-role {
   font-family: var(--ff-font-title) !important;
   font-size: 10px !important;
   letter-spacing: 0.14em !important;
   text-transform: uppercase !important;
   color: #8C827A !important;
}

/* ============================================================
   TICKER MARQUEE OUTLINE (SÓLO CONTORNO DE LETRAS)
   ============================================================ */
.ff-outline-marquee-wrap {
   background: #FAF8F5 !important;
   padding: clamp(30px, 4vw, 55px) 0 !important;
   overflow: hidden;
   user-select: none;
   position: relative;
   border-top: 1px solid rgba(45, 36, 30, 0.04);
   border-bottom: 1px solid rgba(45, 36, 30, 0.04);
}

.ff-outline-marquee-text {
   font-family: var(--ff-font-title), 'Sequel Sans', sans-serif !important;
   font-size: clamp(48px, 6vw, 90px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.02em !important;
   line-height: 1 !important;
   white-space: nowrap !important;
   display: inline-block;
   
   /* Solo contorno de letras (Stroke) sin relleno */
   color: transparent !important;
   -webkit-text-stroke: 1.5px #2D241E !important;
   text-stroke: 1.5px #2D241E !important;
   opacity: 0.35;
   transition: opacity 0.4s ease, -webkit-text-stroke-color 0.4s ease;
}

.ff-outline-marquee-wrap:hover .ff-outline-marquee-text {
   opacity: 0.85;
   -webkit-text-stroke-color: #2D241E !important;
}

.ff-marquee-dot {
   display: inline-block;
   font-size: 0.65em;
   vertical-align: middle;
   margin: 0 20px;
   color: transparent !important;
   -webkit-text-stroke: 1.5px var(--ff-gold) !important;
   text-stroke: 1.5px var(--ff-gold) !important;
   opacity: 0.7;
}

/* ============================================================
   LOGOTIPO OFICIAL FIVEFISH (CABECERA SUPERIOR IZQUIERDA)
   ============================================================ */
.ff-official-logo {
   height: clamp(38px, 3.2vw, 48px);
   width: auto;
   max-width: 220px;
   display: block;
   object-fit: contain;
   transition: transform 0.3s ease, opacity 0.3s ease;
}

.tp-header-logo a:hover .ff-official-logo {
   transform: scale(1.03);
   opacity: 0.9;
}

/* ============================================================
   HEADER: MÁS AIRE Y RESPIRO CON LOS BORDES + LOGO MÁS GRANDE
   ============================================================ */
.tp-header-area {
   padding-top: clamp(22px, 2.5vw, 38px) !important;
   padding-bottom: clamp(22px, 2.5vw, 38px) !important;
}

.tp-header-area .container-fluid {
   max-width: 1560px !important; /* Más separado de los bordes laterales */
   padding-left: clamp(28px, 4vw, 70px) !important;
   padding-right: clamp(28px, 4vw, 70px) !important;
}

.ff-official-logo {
   height: clamp(48px, 4.2vw, 65px) !important; /* Más grande y visible */
   max-width: 280px !important;
   width: auto !important;
   display: block !important;
   object-fit: contain !important;
}

/* ============================================================
   HERO / BANNER PRINCIPAL PURO (FOTO DE SLIDE CONVERTIDO_24.WEBP)
   ============================================================ */
.ff-hero-clean-wrap {
   background: #FAF8F5 !important;
   padding-top: clamp(15px, 2vw, 30px) !important;
   padding-bottom: clamp(40px, 5vw, 80px) !important;
}

.ff-hero-banner-frame {
   border-radius: 24px !important;
   overflow: hidden !important;
   width: 100% !important;
   max-height: 720px !important;
   box-shadow: 0 20px 50px rgba(45, 36, 30, 0.08) !important;
   background: #08131D !important;
   position: relative;
}

.ff-hero-banner-img {
   width: 100% !important;
   height: 100% !important;
   max-height: 720px !important;
   object-fit: cover !important;
   object-position: center !important;
   display: block !important;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ff-hero-banner-frame:hover .ff-hero-banner-img {
   transform: scale(1.02) !important;
}

/* ============================================================
   RESTAURACIÓN DEL TAMAÑO Y FORMATO ORIGINAL DEL SLIDE
   ============================================================ */
.mg-hero-area.mg-hero-spacing {
   padding-top: 15px !important;
   padding-bottom: 40px !important;
}

.ff-hero-container {
   height: clamp(520px, 62vh, 840px) !important;
   width: 100% !important;
   position: relative !important;
   border-radius: 40px !important;
   overflow: hidden !important;
}

.mg-hero-bg {
   position: absolute !important;
   inset: 0 !important;
   width: 100% !important;
   height: 100% !important;
}

.mg-hero-bg img {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
   filter: none !important;
   border-radius: 40px !important;
}

/* ============================================================
   RESTAURACIÓN EXACTA DE LA MAQUETACIÓN HERO (REFERENCIA CUNNET)
   ============================================================ */
.mg-hero-spacing {
   padding-top: 20px !important;
}

.mg-hero-spacing-inner {
   border-radius: 40px !important;
   overflow: hidden !important;
   padding-top: clamp(60px, 7vw, 100px) !important;
   padding-bottom: clamp(35px, 4vw, 55px) !important;
}

.mg-hero-bg {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 0 !important;
}

.mg-hero-bg img {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
   filter: brightness(0.68) !important; /* Permite lectura perfecta en blanco como en la referencia */
   border-radius: 40px !important;
}

.mg-hero-slider-title {
   font-size: clamp(48px, 6.2vw, 92px) !important;
   font-weight: 800 !important;
   line-height: 1 !important;
   color: #FFFFFF !important;
}

.mg-hero-slider-title a {
   color: #FFFFFF !important;
}

/* ============================================================
   SOLUCIÓN DESBORDE Y SCROLL HERO
   ============================================================ */
/* Asegurar que el contenedor fluya con altura natural sin forzar un alto fijo que corte el contenido */
.mg-hero-spacing {
   padding-top: 20px !important;
}

.mg-hero-spacing-inner {
   position: relative !important;
   border-radius: 40px !important;
   overflow: hidden !important;
   padding-top: clamp(80px, 9vw, 130px) !important; /* Espacio para que el texto superior no quede cortado por la cabecera */
   padding-bottom: clamp(45px, 5vw, 75px) !important;
   min-height: 720px !important;
   height: auto !important; /* Permite scroll natural */
}

.mg-hero-bg {
   position: absolute !important;
   inset: 0 !important;
   width: 100% !important;
   height: 100% !important;
   z-index: 0 !important;
}

.mg-hero-bg img {
   position: absolute !important;
   inset: 0 !important;
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center 25% !important; /* Encuadre óptimo de los envases */
   filter: brightness(0.72) !important;
   border-radius: 40px !important;
}

/* Restablecer scroll fluido en smooth-content */
#smooth-wrapper {
   overflow: visible !important;
}

#smooth-content {
   overflow: visible !important;
   min-height: 100vh !important;
}

/* ============================================================
   HEADER ULTRA-ESTRECHO Y SEPARACIÓN ABSOLUTA DEL SLIDE
   ============================================================ */
.tp-header-area {
   padding-top: 10px !important;
   padding-bottom: 10px !important;
}

.ff-official-logo {
   height: 42px !important; /* Estilizado, nítido y esbelto */
   max-width: 200px !important;
}

/* Espacio suficiente en el slide para que NUNCA quede pisado por la cabecera */
.mg-hero-area.mg-hero-spacing {
   padding-top: 95px !important; /* Desplaza todo el slide debajo de la cabecera fija */
}

.mg-hero-spacing-inner {
   padding-top: 60px !important; /* Espacio interior generoso antes del texto superior */
   padding-bottom: 35px !important;
   border-radius: 40px !important;
}

.mg-hero-dec {
   margin-top: 10px !important;
}

.mg-hero-dec p {
   font-size: 16px !important;
   line-height: 1.6 !important;
}

/* ============================================================
   SOBRE NOSOTROS: ELEVAR POSICIÓN Y REDUCIR SEPARACIÓN SUPERIOR
   ============================================================ */
.ff-about-tri-wrap {
   padding-top: clamp(40px, 4.5vw, 75px) !important; /* Más pegado hacia el slide superior */
   padding-bottom: clamp(70px, 8vw, 120px) !important;
}

/* ============================================================
   HERO: TICKER GIGANTE DE LADO A LADO CASI HASTA ABAJO
   ============================================================ */
.mg-hero-spacing-inner {
   min-height: clamp(540px, 68vh, 820px) !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: space-between !important;
   padding-top: 30px !important;
   padding-bottom: 25px !important; /* Casi hasta el borde inferior */
}

.mg-hero-spacing-inner > .row {
   flex-grow: 1;
}

.mg-hero-text-slider-wrap {
   margin-bottom: 0 !important;
   padding-bottom: 10px !important;
}

.mg-hero-bg img {
   object-position: center 30% !important; /* Los envases FiveFish quedan completamente despejados y protagonistas */
}

/* ============================================================
   BLOQUE OFICIAL DE CARACTERÍSTICAS FIVEFISH (CARACTERISTICAS.SVG)
   ============================================================ */
.ff-caracteristicas-banner-wrap {
   background: #FAF8F5 !important;
   padding-top: clamp(30px, 4vw, 55px) !important;
   padding-bottom: clamp(35px, 4.5vw, 65px) !important;
   border-top: none !important;
   border-bottom: none !important;
}

.ff-caracteristicas-box {
   max-width: 980px;
   margin: 0 auto;
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 10px 20px;
}

.ff-caracteristicas-img {
   width: 100% !important;
   max-width: 880px !important;
   height: auto !important;
   display: block !important;
   object-fit: contain !important;
   filter: drop-shadow(0 4px 12px rgba(45, 36, 30, 0.04));
   transition: transform 0.4s ease;
}

.ff-caracteristicas-box:hover .ff-caracteristicas-img {
   transform: scale(1.015);
}

/* ============================================================
   AJUSTE DE ESPACIADOS: UNIR SOBRE NOSOTROS, CARACTERÍSTICAS Y CATÁLOGO
   ============================================================ */
/* Reducir el espacio inferior de Sobre Nosotros */
.ff-about-tri-wrap {
   padding-bottom: clamp(15px, 2vw, 30px) !important;
}

/* Espaciado ceñido en el banner de características */
.ff-caracteristicas-banner-wrap {
   padding-top: 10px !important;
   padding-bottom: clamp(15px, 2vw, 25px) !important;
}

/* Reducir el espacio superior del Catálogo de Productos */
#productos {
   padding-top: clamp(20px, 2.5vw, 40px) !important;
}

#productos .text-center.mb-55 {
   margin-bottom: 30px !important;
}

/* ============================================================
   TÍTULOS EN FONDO CLARO EN AZUL #30589F Y MISMO TAMAÑO UNIFICADO
   ============================================================ */
/* Color azul de marca extraído de características */
:root {
   --ff-blue-brand: #30589f;
}

/* Unificación de tamaño para todos los títulos de secciones claras */
.ff-section-heading:not(.text-white),
.ff-tri-headline,
.ff-editorial-huge-title {
   color: var(--ff-blue-brand) !important;
   font-size: clamp(24px, 2.8vw, 38px) !important; /* Mismo tamaño unificado para todos */
   font-weight: 800 !important;
   letter-spacing: -0.025em !important;
   line-height: 1.15 !important;
}

/* Caja azul para la palabra CATÁLOGO con texto blanco */
.ff-catalogo-title-box {
   display: inline-flex !important;
   align-items: center !important;
   justify-content: center !important;
   gap: 12px !important;
   color: var(--ff-blue-brand) !important;
}

.ff-badge-catalogo {
   background: var(--ff-blue-brand) !important;
   color: #FFFFFF !important;
   padding: 6px 18px !important;
   border-radius: 8px !important;
   display: inline-block !important;
   font-size: 0.88em !important;
   font-weight: 800 !important;
   letter-spacing: 0.02em !important;
   line-height: 1 !important;
   box-shadow: 0 4px 14px rgba(48, 88, 159, 0.25) !important;
}

/* ============================================================
   CATÁLOGO DE PRODUCTOS: MISMA SEPARACIÓN DEL BORDE QUE SOBRE NOSOTROS
   ============================================================ */
#productos .container-fluid {
   max-width: 1480px !important;
   padding-left: clamp(28px, 6vw, 90px) !important;
   padding-right: clamp(28px, 6vw, 90px) !important;
}

/* ============================================================
   ELEMENTOS DE CATÁLOGO Y LOGOTIPO EN AZUL #30589F
   ============================================================ */
/* 1. Botón "Ver Producto" de las tarjetas en azul #30589f */
.ff-card-seamless .ff-btn-minimal,
.ff-btn-minimal {
   background: var(--ff-blue-brand) !important;
   color: #FFFFFF !important;
   border-color: var(--ff-blue-brand) !important;
   box-shadow: 0 4px 12px rgba(48, 88, 159, 0.22) !important;
}

.ff-card-seamless .ff-btn-minimal:hover,
.ff-btn-minimal:hover {
   background: #254682 !important;
   border-color: #254682 !important;
   color: #FFFFFF !important;
   transform: translateY(-2px);
   box-shadow: 0 6px 18px rgba(48, 88, 159, 0.35) !important;
}

/* 2. Píldoras / Pestañas de categoría activas en azul #30589f */
.ff-tabs-clean .nav-link.active {
   background: var(--ff-blue-brand) !important;
   color: #FFFFFF !important;
   box-shadow: 0 4px 16px rgba(48, 88, 159, 0.28) !important;
}

/* 3. Nombres / Títulos de los productos del catálogo en azul #30589f */
.ff-card-title {
   color: var(--ff-blue-brand) !important;
   font-family: var(--ff-font-title) !important;
   font-weight: 700 !important;
}

/* 4. Logotipo oficial en la cabecera en azul #30589f */
.ff-official-logo {
   filter: none !important;
}

/* ============================================================
   BANDA AZUL DE LADO A LADO CON CARACTERÍSTICAS EN BLANCO
   ============================================================ */
.ff-caracteristicas-blue-strip {
   background: var(--ff-blue-brand) !important; /* Azul #30589f de lado a lado */
   width: 100% !important;
   padding-top: clamp(35px, 4vw, 55px) !important;
   padding-bottom: clamp(35px, 4vw, 55px) !important;
   box-shadow: 0 10px 30px rgba(48, 88, 159, 0.18) !important;
}

.ff-caracteristicas-blue-strip .ff-caracteristicas-img {
   width: 100% !important;
   max-width: 880px !important;
   height: auto !important;
   display: block !important;
   object-fit: contain !important;
   transition: transform 0.4s ease;
}

.ff-caracteristicas-blue-strip:hover .ff-caracteristicas-img {
   transform: scale(1.02);
}

/* ============================================================
   SEPARAR MÁS SOBRE NOSOTROS Y CATÁLOGO DE LA BANDA AZUL
   ============================================================ */
/* Más respiro entre Sobre Nosotros y la banda azul */
.ff-about-tri-wrap {
   padding-bottom: clamp(60px, 7vw, 110px) !important;
}

/* Más respiro entre la banda azul y el Catálogo de Productos */
#productos {
   padding-top: clamp(65px, 7.5vw, 120px) !important;
}

/* ============================================================
   TARJETA AZUL DE DOSSIER TÉCNICO FIVEFISH (#30589F)
   ============================================================ */
.ff-dossier-blue-card {
   background: var(--ff-blue-brand) !important; /* Fondo azul de marca */
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
   border-radius: 24px !important;
   box-shadow: 0 16px 40px rgba(48, 88, 159, 0.22) !important;
   color: #FFFFFF !important;
   position: relative;
   overflow: hidden;
}

.ff-dossier-icon-box {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.14);
   border: 1px solid rgba(255, 255, 255, 0.25);
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
}

.ff-dossier-icon-box svg {
   width: 22px;
   height: 22px;
   stroke: #FFFFFF;
   stroke-width: 1.8;
   fill: none;
}

.ff-dossier-blue-card h4 {
   font-family: var(--ff-font-title) !important;
   font-size: 18px !important;
   color: #FFFFFF !important;
   letter-spacing: -0.01em;
}

.ff-dossier-blue-card p {
   font-size: 14px !important;
   color: rgba(255, 255, 255, 0.8) !important;
   line-height: 1.5;
}

/* Botón de descarga en blanco de alto contraste sobre fondo azul */
.ff-dossier-white-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #FFFFFF !important;
   color: var(--ff-blue-brand) !important;
   font-family: var(--ff-font-title) !important;
   font-size: 13.5px !important;
   font-weight: 800 !important;
   letter-spacing: 0.02em !important;
   padding: 12px 24px !important;
   border-radius: 100px !important;
   text-decoration: none !important;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
   white-space: nowrap !important;
}

.ff-dossier-white-btn:hover {
   background: #F4F1EA !important;
   color: #1F3D70 !important;
   transform: translateY(-2px);
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18) !important;
}

.ff-dossier-white-btn svg {
   stroke: currentColor !important;
}

/* ============================================================
   MANIFIESTO GOURMET: RESPIRACIÓN, SEPARACIÓN DE BORDES Y TEXTO COMPLETO
   ============================================================ */
.ff-manifesto-v2-wrap {
   background: #FAF8F5 !important;
   padding-top: clamp(80px, 9vw, 150px) !important;
   padding-bottom: clamp(80px, 9vw, 150px) !important;
   border: none !important;
}

/* Misma separación de bordes que Sobre Nosotros y Catálogo */
.ff-manifesto-v2-wrap .container-fluid {
   max-width: 1480px !important;
   padding-left: clamp(28px, 6vw, 90px) !important;
   padding-right: clamp(28px, 6vw, 90px) !important;
}

/* Titular en Manrope sin recortar con puntos suspensivos */
.ff-manifesto-heading {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(24px, 2.5vw, 36px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: var(--ff-blue-brand) !important; /* Azul #30589f */
   line-height: 1.18 !important;
   white-space: normal !important;
   overflow: visible !important;
   text-overflow: unset !important;
}

/* Botón Dossier PDF dentro de Manifiesto en azul coordinado */
.ff-manifesto-v2-wrap .ff-btn-minimal {
   background: transparent !important;
   color: var(--ff-blue-brand) !important;
   border: 1px solid var(--ff-blue-brand) !important;
   box-shadow: none !important;
}

.ff-manifesto-v2-wrap .ff-btn-minimal:hover {
   background: var(--ff-blue-brand) !important;
   color: #FFFFFF !important;
}

.ff-manifesto-v2-wrap .ff-btn-minimal svg {
   stroke: currentColor !important;
}

/* ============================================================
   MANIFIESTO: CONCENTRACIÓN Y ALINEACIÓN DE ALTURA CON LA FOTO
   ============================================================ */
/* Alinear en estiramiento simétrico para sincronizar alturas */
#producto-estrella .row.align-items-center {
   align-items: stretch !important;
}

#producto-estrella .col-lg-6:first-child {
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
}

/* Contenido más concentrado y compacto */
#producto-estrella .pe-xl-3 {
   padding-right: clamp(15px, 2.5vw, 40px) !important;
}

#producto-estrella .ff-manifesto-heading {
   font-size: clamp(22px, 2.3vw, 32px) !important;
   margin-bottom: 14px !important;
   line-height: 1.15 !important;
}

#producto-estrella .ff-editorial-lead {
   font-size: 14.5px !important;
   line-height: 1.65 !important;
   margin-bottom: 20px !important;
}

/* Tarjetas más condensadas y concentradas */
#producto-estrella .ff-manifesto-cards-stack {
   gap: 10px !important;
   margin-bottom: 24px !important;
}

#producto-estrella .ff-manifesto-card {
   padding: 12px 16px !important;
   gap: 14px !important;
   border-radius: 14px !important;
}

#producto-estrella .ff-card-icon-box {
   width: 36px !important;
   height: 36px !important;
   border-radius: 10px !important;
}

#producto-estrella .ff-card-icon-box svg {
   width: 17px !important;
   height: 17px !important;
}

#producto-estrella .ff-manifesto-card-title {
   font-size: 13.5px !important;
   margin-bottom: 2px !important;
}

#producto-estrella .ff-manifesto-card-desc {
   font-size: 12px !important;
   line-height: 1.45 !important;
}

#producto-estrella .ff-manifesto-card-badge {
   font-size: 9px !important;
   padding: 2px 7px !important;
}

/* Foto derecha con marco de altura equilibrada y ajustada */
#producto-estrella .ff-manifesto-visual-stage {
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
   padding: 0 !important;
}

#producto-estrella .ff-manifesto-visual-frame {
   width: 100% !important;
   height: 100% !important;
   min-height: 520px !important;
   aspect-ratio: auto !important;
}

/* Quitar margen inferior del stack de tarjetas al no haber botones debajo */
#producto-estrella .ff-manifesto-cards-stack {
   margin-bottom: 0 !important;
}

#producto-estrella .ff-manifesto-visual-frame {
   min-height: 480px !important;
}

/* ============================================================
   TARJETAS CORPORATIVAS FIVEFISH (MANIFIESTO) - MINIMALISTA
   Sin fondo, sin sombras/efectos, solo borde azul e icono check azul
   ============================================================ */
.ff-manifesto-card {
   background: transparent !important;
   background-color: transparent !important;
   border: 1.5px solid #30589f !important;
   border-radius: 14px !important;
   padding: 16px 20px !important;
   box-shadow: none !important;
   transform: none !important;
   transition: none !important;
}

.ff-manifesto-card::before {
   display: none !important;
   content: none !important;
}

.ff-manifesto-card:hover,
.ff-manifesto-card.active {
   background: transparent !important;
   background-color: transparent !important;
   border-color: #30589f !important;
   box-shadow: none !important;
   transform: none !important;
}

/* Iconos Check en Azul */
.ff-card-icon-box {
   background: transparent !important;
   background-color: transparent !important;
   border: none !important;
   box-shadow: none !important;
   width: 28px !important;
   height: 28px !important;
   margin-top: 2px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.ff-card-icon-box svg {
   width: 22px !important;
   height: 22px !important;
   stroke: #30589f !important;
   fill: none !important;
   stroke-width: 2.4 !important;
   stroke-linecap: round !important;
   stroke-linejoin: round !important;
}

.ff-manifesto-card:hover .ff-card-icon-box,
.ff-manifesto-card.active .ff-card-icon-box {
   background: transparent !important;
   background-color: transparent !important;
   border: none !important;
}

.ff-manifesto-card:hover .ff-card-icon-box svg,
.ff-manifesto-card.active .ff-card-icon-box svg {
   stroke: #30589f !important;
}

/* Títulos y textos corporativos */
.ff-manifesto-card-title {
   font-family: var(--ff-font-title) !important;
   font-size: 15px !important;
   font-weight: 700 !important;
   color: #0E161E !important;
   letter-spacing: -0.01em !important;
}

.ff-manifesto-card:hover .ff-manifesto-card-title,
.ff-manifesto-card.active .ff-manifesto-card-title {
   color: #0E161E !important;
}

.ff-manifesto-card-desc {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 13.5px !important;
   line-height: 1.55 !important;
   color: #636E78 !important;
}

/* ============================================================
   PUNTO MEDIO NORMAL EN EL TICKER DEL SLIDE
   ============================================================ */
.mg-hero-slider-symbol {
   border: none !important;
   border-radius: 0 !important;
   width: auto !important;
   height: auto !important;
   position: static !important;
   display: inline-block !important;
   font-size: 0.85em !important;
   line-height: 1 !important;
   padding: 0 25px !important;
   margin: 0 !important;
   color: #FFFFFF !important;
   vertical-align: middle !important;
   letter-spacing: normal !important;
}

/* ============================================================
   PUNTO EN EL TICKER DEL SLIDE: ELIMINADO
   ============================================================ */
.mg-hero-slider-symbol {
   display: none !important;
}

/* Estilo para #FishLovers en caja azul integrada en texto fluido */
.ff-manifesto-heading .ff-badge-catalogo {
   vertical-align: middle !important;
   margin: 0 4px !important;
   font-size: 0.9em !important;
   padding: 4px 14px !important;
}

/* ============================================================
   SECCIÓN FUNDADOR EN AZUL CORPORATIVO (#08131D / #30589F)
   ============================================================ */
.ff-fundador-blue-wrap {
   background: #08131D !important; /* Azul abisal profundo con máximo contraste y elegancia */
   padding-top: clamp(80px, 9vw, 150px) !important;
   padding-bottom: clamp(80px, 9vw, 150px) !important;
   color: #FFFFFF !important;
}

.ff-fundador-blue-wrap .container-fluid {
   max-width: 1480px !important;
   padding-left: clamp(28px, 6vw, 90px) !important;
   padding-right: clamp(28px, 6vw, 90px) !important;
}

/* Escenario Fotográfico Izquierdo */
.ff-fundador-visual-stage {
   height: 100% !important;
   display: flex !important;
   align-items: center !important;
}

.ff-fundador-visual-frame {
   position: relative !important;
   border-radius: 24px !important;
   overflow: hidden !important;
   width: 100% !important;
   min-height: 520px !important;
   height: 100% !important;
   background: #0E161E !important;
   box-shadow: 0 25px 60px rgba(0, 0, 0, 0.45) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.ff-fundador-img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
   display: block !important;
   transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ff-fundador-visual-frame:hover .ff-fundador-img {
   transform: scale(1.03) !important;
}

/* Badge Flotante sobre la foto */
.ff-fundador-floating-badge {
   position: absolute !important;
   bottom: 24px !important;
   left: 24px !important;
   background: rgba(8, 19, 29, 0.88) !important;
   backdrop-filter: blur(12px) !important;
   -webkit-backdrop-filter: blur(12px) !important;
   border: 1px solid rgba(255, 255, 255, 0.15) !important;
   padding: 12px 20px !important;
   border-radius: 14px !important;
}

.ff-fundador-badge-role {
   display: block !important;
   font-size: 11px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.12em !important;
   color: var(--ff-gold) !important;
}

.ff-fundador-badge-name {
   font-family: var(--ff-font-title) !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   color: #FFFFFF !important;
   margin-bottom: 0 !important;
}

/* Títulos y tipografía en fondo azul */
.ff-fundador-heading {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(26px, 2.8vw, 42px) !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: -0.025em !important;
   color: #FFFFFF !important;
   line-height: 1.12 !important;
}

.ff-fundador-subheading {
   font-family: var(--ff-font-title) !important;
   font-size: clamp(15px, 1.6vw, 20px) !important;
   font-weight: 700 !important;
   color: #5B95E0 !important; /* Azul celeste luminoso y legible */
   letter-spacing: -0.01em !important;
}

.ff-fundador-bio p {
   font-family: 'Inter', -apple-system, sans-serif !important;
   font-size: 15px !important;
   line-height: 1.8 !important;
   color: #C0CDD8 !important; /* Gris azulado luminoso y muy legible */
}

/* Píldoras de cargos discretas */
.ff-fundador-pill {
   background: rgba(255, 255, 255, 0.06) !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
   color: #D3DFEB !important;
   font-size: 11.5px !important;
   font-weight: 600 !important;
   padding: 6px 14px !important;
   border-radius: 999px !important;
   letter-spacing: 0.02em !important;
}

/* Acordeón Discreto e Integrado */
.ff-fundador-accordion-wrap {
   border-top: 1px solid rgba(255, 255, 255, 0.12);
   padding-top: 20px;
}

.ff-accordion-item {
   background: transparent !important;
   border: none !important;
}

.ff-accordion-btn {
   background: rgba(255, 255, 255, 0.04) !important;
   border: 1px solid rgba(255, 255, 255, 0.1) !important;
   border-radius: 12px !important;
   color: #FFFFFF !important;
   font-family: var(--ff-font-title) !important;
   font-size: 13.5px !important;
   font-weight: 700 !important;
   padding: 12px 18px !important;
   box-shadow: none !important;
   transition: all 0.25s ease !important;
}

.ff-accordion-btn:hover {
   background: rgba(255, 255, 255, 0.08) !important;
   border-color: rgba(255, 255, 255, 0.2) !important;
   color: #5B95E0 !important;
}

.ff-accordion-btn::after {
   filter: brightness(0) invert(1) !important; /* Flecha blanca */
   transform-origin: center;
}

.ff-accordion-body {
   background: transparent !important;
   color: #FFFFFF !important;
}

.ff-fundador-timeline-mini {
   display: flex;
   flex-direction: column;
   gap: 12px;
   padding: 10px 6px;
}

.ff-mini-timeline-item {
   display: flex;
   align-items: flex-start;
   gap: 16px;
   padding-bottom: 12px;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.ff-mini-timeline-item:last-child {
   border-bottom: none;
   padding-bottom: 0;
}

.ff-mini-year {
   font-family: var(--ff-font-title) !important;
   font-size: 12px !important;
   font-weight: 800 !important;
   color: var(--ff-gold) !important;
   background: rgba(200, 169, 126, 0.12);
   border: 1px solid rgba(200, 169, 126, 0.25);
   padding: 2px 8px;
   border-radius: 6px;
   white-space: nowrap;
}

.ff-mini-title {
   font-family: var(--ff-font-title) !important;
   font-size: 13.5px !important;
   font-weight: 700 !important;
   color: #FFFFFF !important;
   margin-bottom: 3px !important;
}

.ff-mini-desc {
   font-size: 12px !important;
   color: #9FB2C2 !important;
   line-height: 1.5 !important;
   margin-bottom: 0 !important;
}
/* Desactivar cursor magico por completo */
#magic-cursor, #ball, .tp-magic-cursor {
   display: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
   pointer-events: none !important;
}

/* ============================================================
   ESTILOS DUAL PHOTO FOTOGRAFÍAS MODAL PRODUCTOS
   ============================================================ */
.ff-dual-photo-wrapper {
   position: relative !important;
   overflow: hidden !important;
}

.ff-dual-photo-wrapper .ff-modal-img {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   transform: translate(-50%, -50%) scale(0.96) !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.8s !important;
   max-width: 85% !important;
   max-height: 440px !important;
}

.ff-dual-photo-wrapper .ff-modal-img.active {
   opacity: 1 !important;
   visibility: visible !important;
   transform: translate(-50%, -50%) scale(1) !important;
}

.ff-photo-switcher-indicators {
   position: absolute;
   bottom: 20px;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 8px;
   z-index: 5;
   background: rgba(14, 22, 30, 0.4);
   backdrop-filter: blur(8px);
   padding: 6px 14px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.ff-photo-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: rgba(255, 255, 255, 0.3);
   cursor: pointer;
   transition: all 0.3s ease;
}

.ff-photo-dot.active {
   width: 22px;
   border-radius: 6px;
   background: #30589f;
}

/* Ficha técnica y bloques interiores del modal */
.ff-modal-section-box {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 14px;
   padding: 12px 16px;
}

.ff-modal-attr-tile {
   background: rgba(255, 255, 255, 0.04);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 12px;
   padding: 10px 14px;
}

.ff-modal-nutrition-card {
   background: rgba(255, 255, 255, 0.03);
   border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 14px;
   padding: 14px 16px;
}

.ff-quality-tag {
   font-size: 11px;
   font-weight: 700;
   color: #D3DDE4;
   background: rgba(255, 255, 255, 0.06);
   border: 1px solid rgba(255, 255, 255, 0.1);
   padding: 4px 10px;
   border-radius: 999px;
   letter-spacing: 0.02em;
}


/* ============================================================
   AJUSTE DE ALTURA Y PROPORCIONES COMPACTAS PARA MODAL PRODUCTOS
   ============================================================ */
.ff-luxury-modal .modal-dialog {
   max-width: 1040px !important;
   margin: 1.5rem auto !important;
}

.ff-luxury-modal-content {
   max-height: calc(100vh - 3rem) !important;
   overflow: hidden !important;
   border-radius: 24px !important;
}

/* Escenario de la fotografía: altura ajustada y sin cortes */
.ff-modal-media-wrapper {
   background: #F4F0E8 !important;
   height: 100% !important;
   min-height: 480px !important;
   max-height: 620px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   padding: 24px 20px 48px 20px !important;
   position: relative !important;
}

.ff-modal-img {
   max-width: 90% !important;
   max-height: 520px !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   filter: drop-shadow(0 14px 25px rgba(0, 0, 0, 0.14)) !important;
   transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.ff-dual-photo-wrapper .ff-modal-img {
   position: absolute !important;
   top: 50% !important;
   left: 50% !important;
   max-width: 88% !important;
   max-height: 520px !important;
   width: auto !important;
   height: auto !important;
   object-fit: contain !important;
   transform: translate(-50%, -50%) scale(0.96) !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transition: opacity 0.7s ease, transform 0.7s ease, visibility 0.7s !important;
}

.ff-dual-photo-wrapper .ff-modal-img.active {
   opacity: 1 !important;
   visibility: visible !important;
   transform: translate(-50%, -50%) scale(1) !important;
}

/* Panel de información derecho más compacto y sin scroll innecesario */
.ff-modal-info-panel {
   padding: 28px 32px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   max-height: 620px !important;
   overflow-y: auto !important;
}

.ff-modal-info-panel::-webkit-scrollbar {
   width: 4px;
}
.ff-modal-info-panel::-webkit-scrollbar-thumb {
   background: rgba(255, 255, 255, 0.15);
   border-radius: 4px;
}

.ff-modal-main-title {
   font-size: clamp(20px, 2.2vw, 26px) !important;
   line-height: 1.15 !important;
   margin-bottom: 4px !important;
}

.ff-modal-subtitle {
   font-size: 13.5px !important;
   margin-bottom: 14px !important;
}

.ff-modal-section-box {
   padding: 10px 14px !important;
   margin-bottom: 10px !important;
}

.ff-modal-section-box p {
   font-size: 13px !important;
   line-height: 1.5 !important;
}

.ff-modal-attr-tile {
   padding: 8px 12px !important;
}

.ff-modal-attr-tile p {
   font-size: 12.5px !important;
}

.ff-modal-nutrition-card {
   padding: 10px 14px !important;
   margin-bottom: 12px !important;
}

.ff-modal-nutrition-card .row strong {
   font-size: 13px !important;
}

.ff-photo-switcher-indicators {
   bottom: 14px !important;
   padding: 4px 10px !important;
}

.ff-photo-dot {
   width: 7px !important;
   height: 7px !important;
}

.ff-photo-dot.active {
   width: 18px !important;
}


/* ============================================================
   MAQUETACIÓN EDITORIAL LUXURY Y ELEGANTE PARA FICHA DE PRODUCTO
   ============================================================ */
.ff-luxury-modal-close {
   top: 18px !important;
   right: 18px !important;
   width: 34px !important;
   height: 34px !important;
   background: rgba(255, 255, 255, 0.08) !important;
   border: 1px solid rgba(255, 255, 255, 0.12) !important;
   z-index: 20 !important;
}

.ff-luxury-modal-close svg {
   width: 14px !important;
   height: 14px !important;
}

.ff-modal-info-panel {
   padding: 34px 40px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   background: #08131d !important; /* Azul noche abisal editorial */
}

.ff-modal-eyebrow {
   font-size: 10.5px !important;
   font-weight: 800 !important;
   letter-spacing: 0.18em !important;
   text-transform: uppercase !important;
   color: #8C9BA5 !important;
}

.ff-modal-mini-dot {
   width: 3px !important;
   height: 3px !important;
   border-radius: 50% !important;
   background: #8C9BA5 !important;
   display: inline-block !important;
}

.ff-modal-tag-ready {
   font-size: 10px !important;
   font-weight: 700 !important;
   letter-spacing: 0.06em !important;
   color: #6CA2F5 !important;
   text-transform: uppercase !important;
}

.ff-modal-main-title {
   font-family: var(--ff-font-title) !important;
   font-size: 24px !important;
   font-weight: 800 !important;
   line-height: 1.2 !important;
   letter-spacing: -0.01em !important;
   color: #FFFFFF !important;
   margin-bottom: 4px !important;
}

.ff-modal-claim {
   font-size: 13px !important;
   color: #C8A97E !important; /* Oro suave gourmet */
   font-weight: 600 !important;
   margin-bottom: 12px !important;
}

/* Lista editorial limpia con separadores sutiles */
.ff-modal-clean-list {
   border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
   margin-bottom: 12px !important;
}

.ff-clean-row {
   display: flex !important;
   padding: 10px 0 !important;
   border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
   align-items: baseline !important;
   font-size: 13px !important;
   gap: 16px !important;
}

.ff-clean-label {
   min-width: 110px !important;
   max-width: 110px !important;
   font-size: 10.5px !important;
   font-weight: 700 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.1em !important;
   color: #7A8B98 !important;
   flex-shrink: 0 !important;
}

.ff-clean-val {
   color: #E2E8F0 !important;
   line-height: 1.55 !important;
   font-size: 13px !important;
   flex-grow: 1 !important;
}

.ff-energy-text {
   font-weight: 700 !important;
   color: #FFFFFF !important;
   display: inline-block !important;
   margin-bottom: 6px !important;
}

.ff-macros-pills {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 10px !important;
   font-size: 12px !important;
   color: #94A3B8 !important;
   margin-bottom: 4px !important;
}

.ff-macros-pills span strong {
   color: #FFFFFF !important;
   font-weight: 700 !important;
}

.ff-clean-notes {
   font-size: 11.5px !important;
   color: #8C9BA5 !important;
   font-style: italic !important;
   display: block !important;
}

/* Sellos minimalistas inferiores */
.ff-modal-footer-badges {
   display: flex !important;
   flex-wrap: wrap !important;
   gap: 12px !important;
   font-size: 11px !important;
   color: #8C9BA5 !important;
}

.ff-modal-footer-badges span {
   display: inline-flex !important;
   align-items: center !important;
   gap: 4px !important;
   background: rgba(255, 255, 255, 0.03) !important;
   border: 1px solid rgba(255, 255, 255, 0.06) !important;
   padding: 4px 10px !important;
   border-radius: 999px !important;
}


/* ============================================================
   FOTOS DE PRODUCTO AL 100% DE SU ESPACIO (SIN MÁRGENES / BLEED)
   ============================================================ */
.ff-modal-media-wrapper {
   background: #0E161E !important;
   height: 100% !important;
   width: 100% !important;
   min-height: 480px !important;
   max-height: 600px !important;
   padding: 0 !important; /* Elimina cualquier borde o padding interior */
   margin: 0 !important;
   position: relative !important;
   overflow: hidden !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.ff-modal-img {
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: cover !important; /* Ocupa absolutamente todo el espacio disponible */
   object-position: center !important;
   display: block !important;
   filter: none !important;
   border-radius: 0 !important;
}

.ff-dual-photo-wrapper .ff-modal-img {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
   transform: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transition: opacity 0.8s ease, visibility 0.8s ease !important;
}

.ff-dual-photo-wrapper .ff-modal-img.active {
   opacity: 1 !important;
   visibility: visible !important;
   transform: none !important;
}

/* Indicadores de fotos superpuestos elegantemente sobre la imagen */
.ff-photo-switcher-indicators {
   position: absolute !important;
   bottom: 18px !important;
   left: 50% !important;
   transform: translateX(-50%) !important;
   background: rgba(8, 19, 29, 0.6) !important;
   backdrop-filter: blur(10px) !important;
   -webkit-backdrop-filter: blur(10px) !important;
   border: 1px solid rgba(255, 255, 255, 0.2) !important;
   padding: 5px 12px !important;
   border-radius: 999px !important;
   z-index: 10 !important;
}

.ff-photo-dot {
   width: 7px !important;
   height: 7px !important;
   background: rgba(255, 255, 255, 0.4) !important;
}

.ff-photo-dot.active {
   width: 20px !important;
   background: #FFFFFF !important;
}


/* ============================================================
   AJUSTE DE PROPORCIÓN DEL MODAL: FOTOS AL 100% SIN CORTES (RATIO 1350x1920)
   ============================================================ */
.ff-luxury-modal .modal-dialog {
   max-width: 960px !important;
   width: 92% !important;
   margin: 2rem auto !important;
}

.ff-luxury-modal-content {
   max-height: 92vh !important;
   border-radius: 20px !important;
   overflow: hidden !important;
}

/* Columna de la foto con ratio de aspecto proporcional (ratio vertical 1350:1920 ~ 0.7) */
.ff-modal-media-wrapper {
   background: #060E15 !important;
   width: 100% !important;
   height: 100% !important;
   min-height: 580px !important;
   max-height: 640px !important;
   aspect-ratio: 1350 / 1920 !important;
   padding: 0 !important;
   position: relative !important;
   overflow: hidden !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
}

.ff-modal-img {
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important; /* Muestra la foto íntegra sin ningún corte */
   object-position: center !important;
   display: block !important;
}

.ff-dual-photo-wrapper .ff-modal-img {
   position: absolute !important;
   top: 0 !important;
   left: 0 !important;
   width: 100% !important;
   height: 100% !important;
   max-width: 100% !important;
   max-height: 100% !important;
   object-fit: contain !important; /* Muestra la foto íntegra sin ningún corte */
   object-position: center !important;
   transform: none !important;
   opacity: 0 !important;
   visibility: hidden !important;
   transition: opacity 0.6s ease, visibility 0.6s ease !important;
}

.ff-dual-photo-wrapper .ff-modal-img.active {
   opacity: 1 !important;
   visibility: visible !important;
   transform: none !important;
}

/* Panel de información derecho perfectamente coordinado en altura */
.ff-modal-info-panel {
   padding: 32px 36px !important;
   min-height: 580px !important;
   max-height: 640px !important;
   display: flex !important;
   flex-direction: column !important;
   justify-content: center !important;
   overflow-y: auto !important;
}


/* ============================================================
   GRID DE PRODUCTOS A 4 COLUMNAS Y FONDO EXACTO DE FICHA #060E15
   ============================================================ */
/* Ajuste de contenedor para albergar 4 columnas con aire y holgura */
#productos .container-fluid {
   max-width: 1600px !important;
   padding-left: clamp(24px, 4vw, 60px) !important;
   padding-right: clamp(24px, 4vw, 60px) !important;
}

.ff-card-seamless {
   max-width: 100% !important;
   padding: 12px 10px 16px 10px !important;
}

.ff-card-seamless .ff-card-media {
   max-height: 240px !important;
   padding: 8px !important;
}

.ff-card-seamless .ff-card-title {
   font-size: 16px !important;
   margin-bottom: 6px !important;
}

.ff-card-seamless .ff-card-text {
   font-size: 12.5px !important;
   line-height: 1.5 !important;
   margin-bottom: 10px !important;
}

.ff-card-seamless .ff-card-pills {
   padding-top: 8px !important;
   margin-bottom: 10px !important;
   gap: 4px !important;
}

.ff-card-seamless .ff-card-pill {
   font-size: 10px !important;
   padding: 2px 7px !important;
}

.ff-card-seamless .ff-btn-minimal {
   font-size: 11.5px !important;
   padding: 6px 14px !important;
}

/* Fondo exacto de la captura #060E15 para el contenedor de la fotografía en la ficha */
.ff-modal-media-wrapper {
   background-color: #060E15 !important;
   background: #060E15 !important;
}

.ff-luxury-modal-content {
   background-color: #060E15 !important;
   border-color: rgba(255, 255, 255, 0.08) !important;
}


/* ============================================================
   EFECTO HOVER TEXTO ANIMADO DEL SLIDE (COLOR AZUL FIVEFISH)
   ============================================================ */
.mg-hero-text-slider-wrap .tp-title-text span {
   text-shadow: 0 1.05em #30589f !important;
}

.mg-hero-text-slider-wrap .tp-title-anim:hover .tp-title-text span {
   color: #30589f !important;
   text-shadow: 0 1.05em #30589f !important;
}

.mg-hero-slider-title a:hover,
.mg-hero-slider-title a:hover .tp-title-text {
   color: #30589f !important;
}



/* ==========================================================================
   OPTIMIZACIÓN RESPONSIVE MÓVIL Y TABLET (PERFECTO Y SIN CORTES)
   ========================================================================== */
@media (max-width: 767.98px) {
   /* 1. Header y Navegación */
   .tp-header-spacing {
      padding-top: 10px !important;
      padding-bottom: 10px !important;
   }

   .ff-official-logo {
      height: 30px !important;
      max-width: 140px !important;
   }

   /* 2. Hero Section */
   .mg-hero-spacing {
      padding-top: 10px !important;
   }

   .mg-hero-spacing-inner {
      border-radius: 24px !important;
      min-height: 520px !important;
      padding-top: 25px !important;
      padding-bottom: 25px !important;
      position: relative !important;
   }

   .mg-hero-bg img {
      border-radius: 24px !important;
   }

   .mg-hero-spacing-inner > .row > .col-12:first-child .text-end {
      text-align: right !important;
      padding-right: 15px !important;
      padding-top: 5px !important;
   }

   .mg-hero-awards {
      width: 140px !important;
      height: 140px !important;
      margin-right: 0 !important;
      margin-top: 0 !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      position: relative !important;
   }

   .mg-hero-awards img.rotate-infinite {
      width: 140px !important;
      height: 140px !important;
      display: block !important;
   }

   .mg-hero-awards img.mp-hero-w-logo {
      width: 40px !important;
      height: 40px !important;
      position: absolute !important;
      top: 50% !important;
      left: 50% !important;
      transform: translate(-50%, -50%) !important;
      margin: 0 !important;
   }

   .mg-hero-slider-title {
      font-size: clamp(34px, 9vw, 54px) !important;
      line-height: 1.05 !important;
   }

   /* 3. Títulos Generales de Sección */
   .ff-section-heading {
      font-size: clamp(24px, 6.8vw, 32px) !important;
      letter-spacing: -0.02em !important;
      line-height: 1.2 !important;
      white-space: normal !important;
   }

   .ff-badge-catalogo {
      display: inline-block !important;
      font-size: 0.85em !important;
      padding: 4px 12px !important;
      margin-bottom: 4px !important;
   }

   .ff-tri-headline {
      font-size: clamp(23px, 6.2vw, 30px) !important;
      line-height: 1.25 !important;
      text-align: center !important;
   }

   .ff-tri-photo-box {
      width: 100% !important;
      max-width: 280px !important;
      margin: 0 auto !important;
   }

   /* 3.1. Textos justificados y centrados en Móvil */
   /* 1. Sobre Nosotros */
   .ff-about-tri-wrap .text-center-sm,
   .ff-about-tri-wrap .ff-eyebrow,
   .ff-about-tri-wrap .ff-tri-body {
      text-align: justify !important;
      text-align-last: center !important;
   }

   .ff-about-tri-wrap .ff-eyebrow {
      display: inline-flex !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      text-align-last: center !important;
      margin: 0 auto 12px auto !important;
      width: auto !important;
   }

   .ff-about-tri-wrap .ff-eyebrow-container {
      display: flex !important;
      justify-content: center !important;
      width: 100% !important;
      text-align: center !important;
   }

   .ff-tri-right-content {
      align-items: center !important;
   }

   .ff-tri-signature-block {
      align-items: center !important;
      text-align: center !important;
      margin: 20px auto 0 auto !important;
   }

   .ff-tri-signature-block .ff-signature-svg {
      margin: 0 auto 6px auto !important;
   }

   /* 2. Manifiesto Gourmet */
   #producto-estrella .pe-xl-3 {
      text-align: center !important;
   }

   #producto-estrella .ff-eyebrow {
      display: inline-flex !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      margin: 0 auto 10px auto !important;
      width: auto !important;
   }

   #producto-estrella .pe-xl-3 .mb-3 {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
   }

   #producto-estrella .ff-manifesto-heading {
      text-align: center !important;
   }

   #producto-estrella .ff-editorial-lead {
      text-align: justify !important;
      text-align-last: center !important;
      max-width: 520px !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }

   /* 3. Manuel Almazán Oteo (Fundador) */
   #fundador .ps-xl-3,
   .ff-fundador-content {
      text-align: center !important;
   }

   #fundador .ff-eyebrow,
   .ff-fundador-content .ff-eyebrow {
      display: inline-flex !important;
      justify-content: center !important;
      align-items: center !important;
      text-align: center !important;
      margin: 0 auto 12px auto !important;
      width: auto !important;
   }

   #fundador .mb-3,
   .ff-fundador-content .mb-3 {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      width: 100% !important;
      text-align: center !important;
   }

   .ff-fundador-heading,
   .ff-fundador-subheading {
      text-align: center !important;
   }

   .ff-fundador-bio p {
      text-align: justify !important;
      text-align-last: center !important;
      max-width: 520px !important;
      margin-left: auto !important;
      margin-right: auto !important;
   }

   /* 4. Banda de Características Oficiales */
   .ff-caracteristicas-blue-strip {
      padding: 16px 12px !important;
   }

   .ff-caracteristicas-img {
      max-width: 100% !important;
      height: auto !important;
   }

   /* 5. Catálogo y Tabs */
   #productos {
      padding-top: 50px !important;
      padding-bottom: 0px !important; /* Cero espacio inferior para que Manifiesto suba al máximo */
   }

   .ff-tabs-clean {
      flex-direction: column !important;
      width: 100% !important;
      gap: 8px !important;
   }

   .ff-tabs-clean .nav-item {
      width: 100% !important;
   }

   .ff-tabs-clean .nav-link {
      width: 100% !important;
      justify-content: center !important;
      font-size: 13px !important;
      padding: 10px 14px !important;
   }

   .ff-product-card {
      margin-bottom: 20px !important;
   }

   .ff-product-img-wrapper {
      max-height: 220px !important;
   }

   /* 6. Galería Dinámica: En Móvil carrusel automático continuo sin caja azul oscuro */
   .ff-gallery-editorial-section {
      padding-top: 20px !important;
      margin-top: 20px !important;
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
      border-top: 1px solid rgba(0, 0, 0, 0.04) !important;
   }

   .ff-gallery-editorial-section .tp-gallery-wrapper {
      background: transparent !important; /* Elimina el cuadro azul oscuro en móvil */
      padding: 0 !important;
      margin-bottom: 0 !important;
      border-radius: 0 !important;
      box-shadow: none !important;
      overflow: hidden !important;
   }

   .ff-mobile-gallery-marquee {
      width: 100vw !important;
      margin-left: calc(-50vw + 50%) !important;
      margin-right: calc(-50vw + 50%) !important;
      overflow: hidden !important;
      padding: 4px 0 0 0 !important;
      margin-bottom: 0 !important;
      position: relative !important;
      display: block !important;
   }

   .ff-mobile-gallery-track {
      display: flex !important;
      gap: 16px !important;
      width: max-content !important;
      animation: ffGalleryMarquee 32s linear infinite !important;
      will-change: transform !important;
   }

   .ff-mobile-gallery-track:hover {
      animation-play-state: paused !important; /* Permite pausar al tocar */
   }

   .ff-mobile-gallery-item {
      width: 230px !important;
      height: 230px !important;
      flex: 0 0 230px !important;
      border-radius: 20px !important;
      overflow: hidden !important;
      box-shadow: 0 10px 25px rgba(45, 36, 30, 0.12) !important;
      border: 1px solid rgba(0, 0, 0, 0.06) !important;
      background: #FFFFFF !important;
   }

   .ff-mobile-gallery-item img {
      width: 100% !important;
      height: 100% !important;
      object-fit: cover !important;
      display: block !important;
      border-radius: 20px !important;
   }

   @keyframes ffGalleryMarquee {
      0% {
         transform: translateX(0);
      }
      100% {
         transform: translateX(-50%);
      }
   }

   /* 7. Sección Manifiesto & Tarjetas Corporativas: Pegado directamente a la galería */
   .ff-manifesto-v2-wrap {
      padding-top: 0 !important; /* Cero padding superior */
      margin-top: -15px !important; /* Sube la sección para abrazar las fotos */
      padding-bottom: 45px !important;
      border-top: none !important;
   }

   .ff-manifesto-cards-stack {
      gap: 12px !important;
   }

   .ff-manifesto-card {
      padding: 14px 16px !important;
      gap: 12px !important;
   }

   .ff-manifesto-card-title {
      font-size: 16px !important;
   }

   .ff-manifesto-card-desc {
      font-size: 13.5px !important;
   }

   .ff-manifesto-visual-frame {
      min-height: 320px !important;
      border-radius: 18px !important;
      margin-top: 25px !important;
   }

   /* 8. Sección Fundador */
   .ff-fundador-blue-wrap {
      padding-top: 60px !important;
      padding-bottom: 60px !important;
   }

   .ff-fundador-visual-frame {
      min-height: 340px !important;
      max-height: 420px !important;
      border-radius: 18px !important;
      margin-bottom: 25px !important;
   }

   .ff-fundador-heading {
      font-size: 28px !important;
   }

   .ff-fundador-subheading {
      font-size: 16px !important;
   }

   .ff-fundador-bio p {
      font-size: 14px !important;
      line-height: 1.65 !important;
   }

   .ff-fundador-pill {
      font-size: 11px !important;
      padding: 6px 12px !important;
   }

   /* 9. Contacto */
   #contacto {
      padding-top: 60px !important;
      padding-bottom: 60px !important;
   }

   #contacto .d-flex.flex-wrap {
      flex-direction: column !important;
      align-items: center !important;
      gap: 20px !important;
   }

   #contacto .d-flex.align-items-center {
      width: 100% !important;
      max-width: 310px !important;
      justify-content: flex-start !important;
   }

   /* 10. Modales de Ficha Técnica de Producto */
   .ff-luxury-modal .modal-dialog {
      margin: 12px !important;
   }

   .ff-luxury-modal-content {
      border-radius: 18px !important;
      max-height: 92vh !important;
   }

   .ff-modal-info-panel {
      padding: 20px 18px !important;
      max-height: 52vh !important;
   }

   .ff-modal-main-title {
      font-size: 20px !important;
   }

   .ff-modal-claim {
      font-size: 12px !important;
   }

   .ff-clean-row {
      padding: 8px 0 !important;
      font-size: 12px !important;
   }

   .ff-clean-label {
      width: 85px !important;
      font-size: 11px !important;
   }

   .ff-clean-val {
      font-size: 12px !important;
   }

   .ff-macros-pills {
      gap: 4px !important;
   }

   .ff-macros-pills span {
      font-size: 10.5px !important;
      padding: 2px 7px !important;
   }

   .ff-modal-footer-badges {
      gap: 6px !important;
   }

   .ff-modal-footer-badges span {
      font-size: 10.5px !important;
      padding: 3px 8px !important;
   }
}


/* ============================================================
   GRID DE PRODUCTOS: TÍTULOS MÁS GRANDES EN 1 LÍNEA Y CENTRADOS
   ============================================================ */
.ff-card-title,
.ff-card-seamless .ff-card-title {
   font-size: clamp(17px, 1.35vw, 21px) !important;
   font-weight: 800 !important;
   color: #30589f !important;
   text-align: center !important;
   white-space: nowrap !important;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   margin-bottom: 8px !important;
   display: block !important;
   line-height: 1.25 !important;
}

/* Centrado del botón Ver Producto */
.ff-card-seamless .border-top {
   justify-content: center !important;
}

.ff-card-seamless .ff-btn-minimal {
   margin: 0 auto !important;
   text-align: center !important;
}

/* ============================================================
   RESPONSIVE MÓVIL: FICHAS DE PRODUCTO PERFECTAS, FOTO COMPLETA Y LECTURA CÓMODA
   ============================================================ */
@media (max-width: 767.98px) {
   /* Títulos de las tarjetas de producto en el catálogo móvil */
   .ff-card-title,
   .ff-card-seamless .ff-card-title {
      font-size: 21px !important;
      text-align: center !important;
      white-space: normal !important; /* Permite lectura completa y clara en móvil */
      line-height: 1.25 !important;
      margin-bottom: 10px !important;
   }

   /* Modal dialog ocupa la pantalla cómodamente con margen natural */
   .ff-luxury-modal .modal-dialog {
      margin: 12px auto !important;
      max-width: calc(100vw - 20px) !important;
   }

   /* Contenido del modal con scroll unificado fluido sin cortes */
   .ff-luxury-modal-content {
      border-radius: 20px !important;
      max-height: 90vh !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch !important;
      background: #060E15 !important;
   }

   /* Contenedor de la fotografía: 
      Ratio vertical natural para que el pack cuadrado (2362x2362) 
      y el emplatado (1350x1920) se vean ENTEROS Y GRANDES sin recortar */
   .ff-modal-media-wrapper {
      min-height: 320px !important;
      max-height: 380px !important;
      width: 100% !important;
      position: relative !important;
      padding: 16px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      background: #060E15 !important;
   }

   .ff-modal-img {
      width: 100% !important;
      height: 100% !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important; /* Muestra el producto completo sin ningún corte */
      object-position: center !important;
   }

   .ff-dual-photo-wrapper .ff-modal-img {
      position: absolute !important;
      top: 16px !important;
      left: 16px !important;
      width: calc(100% - 32px) !important;
      height: calc(100% - 32px) !important;
      max-width: 100% !important;
      max-height: 100% !important;
      object-fit: contain !important;
      object-position: center !important;
   }

   /* Indicadores de alternancia de foto bien posicionados */
   .ff-photo-switcher-indicators {
      bottom: 12px !important;
      padding: 4px 10px !important;
      gap: 8px !important;
   }

   .ff-photo-dot {
      width: 8px !important;
      height: 8px !important;
   }

   /* Panel de información con textos generosos, nítidos y legibles */
   .ff-modal-info-panel {
      padding: 24px 22px 30px 22px !important;
      min-height: auto !important;
      max-height: none !important; /* El scroll fluye de manera natural en todo el modal */
      overflow: visible !important;
      background: #060E15 !important;
   }

   .ff-modal-header-row {
      margin-bottom: 8px !important;
   }

   .ff-modal-eyebrow {
      font-size: 11.5px !important;
      letter-spacing: 0.12em !important;
   }

   .ff-modal-tag-ready {
      font-size: 10.5px !important;
      padding: 3px 8px !important;
   }

   .ff-modal-main-title {
      font-size: 25px !important; /* Título grande, legible y con impacto en móvil */
      font-weight: 800 !important;
      margin-bottom: 8px !important;
      line-height: 1.2 !important;
      color: #FFFFFF !important;
   }

   .ff-modal-claim {
      font-size: 13.5px !important; /* Subtítulo legible con claridad */
      margin-bottom: 16px !important;
      color: rgba(255, 255, 255, 0.72) !important;
      line-height: 1.45 !important;
   }

   .ff-modal-clean-list {
      margin-top: 10px !important;
   }

   .ff-clean-row {
      padding: 11px 0 !important;
      font-size: 13.5px !important; /* Tipografía cómoda para lectura en smartphone */
      border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
      display: flex !important;
      flex-direction: column !important; /* En móvil, etiqueta arriba y contenido abajo para que no se apelotone */
      align-items: flex-start !important;
      gap: 3px !important;
   }

   .ff-clean-label {
      width: 100% !important;
      min-width: 100% !important;
      font-size: 11px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.08em !important;
      color: rgba(255, 255, 255, 0.45) !important;
      margin-bottom: 2px !important;
   }

   .ff-clean-val {
      font-size: 14px !important;
      line-height: 1.5 !important;
      color: #FFFFFF !important;
   }

   .ff-energy-text {
      font-size: 13.5px !important;
      font-weight: 700 !important;
      color: #5B95E0 !important;
   }

   .ff-clean-notes {
      font-size: 12px !important;
      line-height: 1.5 !important;
      color: rgba(255, 255, 255, 0.6) !important;
      margin-top: 6px !important;
   }

   /* Píldoras de macronutrientes amplias y bien separadas */
   .ff-macros-pills {
      margin-top: 8px !important;
      gap: 6px !important;
      display: flex !important;
      flex-wrap: wrap !important;
   }

   .ff-macros-pills span {
      font-size: 12px !important;
      padding: 4px 10px !important;
      background: rgba(255, 255, 255, 0.08) !important;
      border: 1px solid rgba(255, 255, 255, 0.12) !important;
      border-radius: 6px !important;
   }

   /* Sellos de garantía en el footer de la ficha */
   .ff-modal-footer-badges {
      margin-top: 18px !important;
      padding-top: 14px !important;
      gap: 8px !important;
      display: flex !important;
      flex-wrap: wrap !important;
   }

   .ff-modal-footer-badges span {
      font-size: 11.5px !important;
      padding: 5px 10px !important;
      border-radius: 6px !important;
      background: rgba(48, 88, 159, 0.22) !important;
      border: 1px solid rgba(48, 88, 159, 0.4) !important;
      color: #A5C4F5 !important;
   }

   /* Botón de cierre visible y accesible */
   .ff-luxury-modal-close {
      width: 40px !important;
      height: 40px !important;
      top: 12px !important;
      right: 12px !important;
      background: rgba(6, 14, 21, 0.75) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      z-index: 10 !important;
   }

   .ff-luxury-modal-close svg {
      width: 20px !important;
      height: 20px !important;
   }
}


/* ============================================================
   CENTRADO DE LAS ETIQUETAS DE ATRIBUTOS EN LAS TARJETAS
   (100% Natural, 3 min, Sin Espinas)
   ============================================================ */
.ff-card-pills,
.ff-card-seamless .ff-card-pills {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
   flex-wrap: wrap !important;
   text-align: center !important;
}


/* ============================================================
   TARJETA AZUL CORPORATIVA: SEDE & OBRADOR
   ============================================================ */
.ff-sede-blue-card {
   background: #30589f !important;
   border-radius: 14px !important;
   padding: 16px 28px !important;
   color: #FFFFFF !important;
   display: inline-flex !important;
   flex-direction: column !important;
   align-items: center !important;
   box-shadow: 0 8px 24px rgba(48, 88, 159, 0.18) !important;
   max-width: 480px !important;
   width: 100% !important;
   transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.ff-sede-blue-card:hover {
   transform: translateY(-2px) !important;
   box-shadow: 0 12px 28px rgba(48, 88, 159, 0.25) !important;
}

.ff-sede-tag {
   font-size: 11px !important;
   font-weight: 800 !important;
   text-transform: uppercase !important;
   letter-spacing: 0.14em !important;
   color: rgba(255, 255, 255, 0.75) !important;
   margin-bottom: 4px !important;
   display: block !important;
}

.ff-sede-address {
   font-family: var(--ff-font-title) !important;
   font-size: 15.5px !important;
   font-weight: 700 !important;
   color: #FFFFFF !important;
   letter-spacing: -0.01em !important;
   line-height: 1.4 !important;
}


/* ============================================================
   AJUSTE EDITORIAL: SOMOS ARTESANOS DEL MAR COMPROMETIDOS...
   ============================================================ */
.ff-tri-headline {
   font-size: clamp(20px, 1.85vw, 29px) !important;
   font-weight: 800 !important;
   line-height: 1.25 !important;
   letter-spacing: -0.02em !important;
   color: #30589f !important;
}

@media (min-width: 992px) {
   .ff-tri-title-box {
      min-width: 320px !important;
   }
}


/* ============================================================
   INTERCAMBIO RESPONSIVE DE CARACTERÍSTICAS (DESKTOP VS PHONE)
   ============================================================ */
.ff-caracteristicas-box picture {
   display: block !important;
   width: 100% !important;
   text-align: center !important;
}

.ff-caracteristicas-blue-strip .ff-caracteristicas-img {
   width: 100% !important;
   max-width: 880px !important;
   height: auto !important;
   display: block !important;
   margin: 0 auto !important;
   object-fit: contain !important;
   transition: transform 0.4s ease;
}

@media (max-width: 767.98px) {
   .ff-caracteristicas-blue-strip .ff-caracteristicas-img {
      max-width: 320px !important;
      margin: 0 auto !important;
   }

   .ff-caracteristicas-blue-strip {
      padding-top: 24px !important;
      padding-bottom: 24px !important;
   }
}

/* ============================================================
   MODAL POP-UP EDITORIAL CON SCROLL: AVISO LEGAL
   ============================================================ */
.ff-legal-modal .modal-dialog {
   max-width: 860px !important;
   margin: 30px auto !important;
}

.ff-legal-modal-content {
   background: #FFFFFF !important;
   border: 1px solid rgba(48, 88, 159, 0.12) !important;
   border-radius: 20px !important;
   box-shadow: 0 25px 70px rgba(0, 0, 0, 0.25) !important;
   overflow: hidden !important;
}

.ff-legal-modal-header {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 24px 32px 18px 32px !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
   background: #FAF8F5 !important;
}

.ff-legal-title {
   font-family: var(--ff-font-title) !important;
   font-size: 26px !important;
   font-weight: 800 !important;
   color: #30589f !important;
   letter-spacing: -0.02em !important;
}

.ff-legal-modal-close {
   width: 38px !important;
   height: 38px !important;
   border-radius: 50% !important;
   background: rgba(0, 0, 0, 0.05) !important;
   border: none !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   cursor: pointer !important;
   transition: all 0.25s ease !important;
   color: #2D241E !important;
}

.ff-legal-modal-close:hover {
   background: #30589f !important;
   color: #FFFFFF !important;
   transform: rotate(90deg);
}

.ff-legal-modal-close svg {
   width: 18px !important;
   height: 18px !important;
   stroke: currentColor !important;
   stroke-width: 2 !important;
   fill: none !important;
}

.ff-legal-modal-body {
   padding: 28px 32px !important;
   max-height: 65vh !important;
   overflow-y: auto !important;
   -webkit-overflow-scrolling: touch !important;
   color: #4A4036 !important;
   font-size: 14.5px !important;
   line-height: 1.7 !important;
}

.ff-legal-modal-body::-webkit-scrollbar {
   width: 6px;
}

.ff-legal-modal-body::-webkit-scrollbar-track {
   background: #F1EFEA;
}

.ff-legal-modal-body::-webkit-scrollbar-thumb {
   background: #30589f;
   border-radius: 4px;
}

.ff-legal-lead {
   font-size: 15px !important;
   color: #2D241E !important;
   font-weight: 500 !important;
   line-height: 1.7 !important;
   margin-bottom: 22px !important;
}

.ff-legal-heading {
   font-family: var(--ff-font-title) !important;
   font-size: 15px !important;
   font-weight: 800 !important;
   color: #30589f !important;
   text-transform: uppercase !important;
   letter-spacing: 0.04em !important;
   margin-top: 24px !important;
   margin-bottom: 10px !important;
}

.ff-legal-modal-body p {
   margin-bottom: 14px !important;
}

.ff-legal-modal-body a {
   color: #30589f !important;
   text-decoration: underline !important;
   font-weight: 600 !important;
   transition: opacity 0.2s ease !important;
}

.ff-legal-modal-body a:hover {
   opacity: 0.8 !important;
}

.ff-legal-modal-body ul {
   padding-left: 20px !important;
   margin-bottom: 16px !important;
}

.ff-legal-modal-body li {
   margin-bottom: 6px !important;
}

.ff-legal-modal-footer {
   padding: 16px 32px !important;
   border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
   background: #FAF8F5 !important;
   display: flex !important;
   justify-content: flex-end !important;
}

.ff-btn-legal-close {
   background: #30589f !important;
   color: #FFFFFF !important;
   font-size: 14px !important;
   font-weight: 700 !important;
   padding: 9px 24px !important;
   border-radius: 999px !important;
   border: none !important;
   transition: all 0.25s ease !important;
}

.ff-btn-legal-close:hover {
   background: #23437e !important;
   color: #FFFFFF !important;
   transform: translateY(-1px);
}

@media (max-width: 767.98px) {
   .ff-legal-modal .modal-dialog {
      margin: 16px auto !important;
      max-width: calc(100vw - 24px) !important;
   }

   .ff-legal-modal-header {
      padding: 18px 20px 14px 20px !important;
   }

   .ff-legal-title {
      font-size: 22px !important;
   }

   .ff-legal-modal-body {
      padding: 20px 20px !important;
      max-height: 70vh !important;
      font-size: 13.5px !important;
   }

   .ff-legal-modal-footer {
      padding: 14px 20px !important;
   }
}

/* ============================================================
   BANNER DE COOKIES MINIMALISTA FIJO INFERIOR
   ============================================================ */
.ff-cookie-banner {
   position: fixed !important;
   bottom: 0 !important;
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   z-index: 1050 !important;
   background: rgba(6, 14, 21, 0.94) !important;
   backdrop-filter: blur(16px) !important;
   -webkit-backdrop-filter: blur(16px) !important;
   border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
   box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.45) !important;
   padding: 16px 20px !important;
   transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease !important;
   transform: translateY(100%);
   opacity: 0;
}

.ff-cookie-banner.ff-cookie-banner-visible {
   transform: translateY(0) !important;
   opacity: 1 !important;
}

.ff-cookie-banner.ff-cookie-banner-hiding {
   transform: translateY(100%) !important;
   opacity: 0 !important;
}

.ff-cookie-banner-inner {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   gap: 24px !important;
   flex-wrap: wrap !important;
}

.ff-cookie-banner-text {
   flex: 1 1 500px !important;
}

.ff-cookie-banner-text p {
   color: rgba(255, 255, 255, 0.86) !important;
   font-size: 13.5px !important;
   line-height: 1.55 !important;
}

.ff-cookie-link {
   color: #6CA2F5 !important;
   text-decoration: underline !important;
   font-weight: 600 !important;
   transition: opacity 0.2s ease !important;
}

.ff-cookie-link:hover {
   opacity: 0.8 !important;
}

.ff-cookie-banner-actions {
   display: flex !important;
   align-items: center !important;
   gap: 10px !important;
   flex-wrap: wrap !important;
}

.ff-btn-cookie {
   font-size: 13px !important;
   font-weight: 700 !important;
   padding: 8px 18px !important;
   border-radius: 999px !important;
   border: 1px solid transparent !important;
   cursor: pointer !important;
   transition: all 0.25s ease !important;
   white-space: nowrap !important;
}

.ff-btn-cookie-primary {
   background: #30589f !important;
   color: #FFFFFF !important;
   border-color: #30589f !important;
}

.ff-btn-cookie-primary:hover {
   background: #24447d !important;
   border-color: #24447d !important;
   transform: translateY(-1px);
   box-shadow: 0 4px 12px rgba(48, 88, 159, 0.35);
}

.ff-btn-cookie-outline {
   background: transparent !important;
   color: #FFFFFF !important;
   border-color: rgba(255, 255, 255, 0.25) !important;
}

.ff-btn-cookie-outline:hover {
   background: rgba(255, 255, 255, 0.1) !important;
   border-color: rgba(255, 255, 255, 0.5) !important;
   color: #FFFFFF !important;
}

.ff-btn-cookie-ghost {
   background: transparent !important;
   color: rgba(255, 255, 255, 0.65) !important;
   border: none !important;
}

.ff-btn-cookie-ghost:hover {
   color: #FFFFFF !important;
   background: rgba(255, 255, 255, 0.08) !important;
}

/* Filas de alternancia en modal de configuración */
.ff-cookie-toggle-row {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   padding: 14px 0 !important;
   border-bottom: 1px solid rgba(0, 0, 0, 0.07) !important;
}

.ff-cookie-opt-title {
   font-size: 14.5px !important;
   font-weight: 700 !important;
   color: #2D241E !important;
   margin-bottom: 3px !important;
}

.ff-cookie-opt-desc {
   font-size: 12.5px !important;
   color: #6C757D !important;
   line-height: 1.4 !important;
}

.ff-cookie-toggle-row .form-check-input {
   cursor: pointer !important;
   width: 2.4em !important;
   height: 1.3em !important;
}

.ff-cookie-toggle-row .form-check-input:checked {
   background-color: #30589f !important;
   border-color: #30589f !important;
}

@media (max-width: 767.98px) {
   .ff-cookie-banner {
      padding: 14px 16px !important;
   }

   .ff-cookie-banner-inner {
      gap: 12px !important;
   }

   .ff-cookie-banner-text p {
      font-size: 12.5px !important;
   }

   .ff-cookie-banner-actions {
      width: 100% !important;
      display: flex !important;
      justify-content: space-between !important;
      gap: 6px !important;
   }

   .ff-btn-cookie {
      flex: 1 1 auto !important;
      font-size: 11.5px !important;
      padding: 7px 10px !important;
      text-align: center !important;
   }
}

/* ============================================================
   BOTONES REDONDOS AZULES DE REDES SOCIALES (FACEBOOK & INSTAGRAM)
   ============================================================ */
.ff-social-circle {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: #30589f; /* Azul corporativo FiveFish */
   color: #FFFFFF !important;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   transition: all 0.25s ease-in-out;
   box-shadow: 0 4px 10px rgba(48, 88, 159, 0.2);
   text-decoration: none;
   flex-shrink: 0;
}

.ff-social-circle:hover {
   background: #23437e;
   color: #FFFFFF !important;
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(48, 88, 159, 0.35);
}

.ff-social-circle svg {
   width: 17px;
   height: 17px;
   fill: currentColor;
   transition: transform 0.25s ease;
}

.ff-social-circle:hover svg {
   transform: scale(1.08);
}

/* Ajustes específicos para el menú desplegable móvil */
.ff-mobile-socials {
   padding-top: 6px;
}

.ff-mobile-socials .ff-social-circle {
   width: 40px;
   height: 40px;
}

.ff-mobile-socials .ff-social-circle svg {
   width: 18px;
   height: 18px;
}

/* ============================================================
   ANIMACIONES EDITORIALES Y DE SCROLL (1, 3, 5 y 6)
   ============================================================ */
/* 1. Revelado Escalonado del Catálogo de Productos */
.ff-card-seamless {
   opacity: 0;
   transform: translateY(35px);
   transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity, transform;
}

.ff-card-seamless.is-inview {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

/* 3. Aparición Elegante y Suave de Títulos Editoriales */
.ff-scroll-reveal-title {
   opacity: 0;
   transform: translateY(28px);
   transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity, transform;
}

.ff-scroll-reveal-title.is-inview {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

/* 5. Slide & Fade en Cascada de las Tarjetas del Manifiesto */
.ff-manifesto-card {
   opacity: 0;
   transform: translateX(35px);
   transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
   will-change: opacity, transform;
}

.ff-manifesto-card.is-inview {
   opacity: 1 !important;
   transform: translateX(0) !important;
}

/* 6. Firma de Manuel Almazán: Trazado de Tinta Artesanal */
.ff-signature-svg path {
   stroke-dasharray: 600;
   stroke-dashoffset: 600;
   transition: stroke-dashoffset 2.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.ff-signature-svg.is-drawn path {
   stroke-dashoffset: 0 !important;
}

.ff-signature-name,
.ff-signature-role {
   opacity: 0;
   transform: translateY(8px);
   transition: opacity 0.6s ease 1.2s, transform 0.6s ease 1.2s;
}

.ff-tri-signature-block.is-inview .ff-signature-name,
.ff-tri-signature-block.is-inview .ff-signature-role {
   opacity: 1 !important;
   transform: translateY(0) !important;
}

/* Reducción de movimiento para usuarios que lo tengan configurado en su dispositivo */
@media (prefers-reduced-motion: reduce) {
   .ff-card-seamless,
   .ff-scroll-reveal-title,
   .ff-manifesto-card {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
   }
   .ff-signature-svg path {
      stroke-dashoffset: 0 !important;
      transition: none !important;
   }
   .ff-signature-name,
   .ff-signature-role {
      opacity: 1 !important;
      transform: none !important;
   }
}

.ff-whatsapp-float {
   position: fixed;
   left: 28px;
   bottom: 28px;
   z-index: 998;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #25D366;
   color: #FFFFFF !important;
   text-decoration: none !important;
   box-shadow: 0 8px 24px rgba(37, 211, 102, 0.38), 0 2px 6px rgba(0, 0, 0, 0.12);
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   cursor: pointer;
}

.ff-whatsapp-float svg {
   width: 32px;
   height: 32px;
   fill: #FFFFFF;
   transition: transform 0.3s ease;
}

.ff-whatsapp-float:hover {
   background: #20BA5A;
   color: #FFFFFF !important;
   transform: scale(1.08) translateY(-3px);
   box-shadow: 0 12px 28px rgba(37, 211, 102, 0.48), 0 4px 10px rgba(0, 0, 0, 0.18);
}

.ff-whatsapp-float:hover svg {
   transform: scale(1.05);
}

.ff-whatsapp-float:active {
   transform: scale(0.95);
}

/* Tooltip elegante en escritorio */
.ff-whatsapp-tooltip {
   position: absolute;
   left: calc(100% + 14px);
   top: 50%;
   transform: translateY(-50%) translateX(-8px);
   background: #060E15;
   color: #FFFFFF;
   padding: 7px 14px;
   border-radius: 20px;
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
   transition: all 0.25s ease;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.ff-whatsapp-tooltip::before {
   content: "";
   position: absolute;
   right: 100%;
   top: 50%;
   margin-top: -5px;
   border-width: 5px;
   border-style: solid;
   border-color: transparent #060E15 transparent transparent;
}

.ff-whatsapp-float:hover .ff-whatsapp-tooltip {
   opacity: 1;
   visibility: visible;
   transform: translateY(-50%) translateX(0);
}

/* Onda sutil de pulsación para llamar la atención discretamente */
.ff-whatsapp-float::before {
   content: "";
   position: absolute;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background: #25D366;
   opacity: 0.5;
   z-index: -1;
   animation: ffWhatsappPulse 3s infinite;
}

@keyframes ffWhatsappPulse {
   0% {
      transform: scale(1);
      opacity: 0.5;
   }
   50% {
      transform: scale(1.22);
      opacity: 0;
   }
   100% {
      transform: scale(1.22);
      opacity: 0;
   }
}

/* Responsive Móvil (≤ 767.98px) */
@media (max-width: 767.98px) {
   .ff-whatsapp-float {
      left: 18px;
      bottom: 20px;
      width: 52px;
      height: 52px;
      box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35), 0 2px 5px rgba(0, 0, 0, 0.15);
   }

   .ff-whatsapp-float svg {
      width: 28px;
      height: 28px;
   }

   /* Ocultar tooltip en pantallas táctiles */
   .ff-whatsapp-tooltip {
      display: none !important;
   }
}

/* ============================================================
   CARRUSEL INTERACTIVO MANIFIESTO GOURMET (FOTOS "PLATOS 2")
   ============================================================ */
.ff-manifesto-swiper {
   position: absolute !important;
   top: 0;
   left: 0;
   width: 100% !important;
   height: 100% !important;
   z-index: 1;
}

.ff-manifesto-swiper .swiper-slide {
   width: 100% !important;
   height: 100% !important;
   overflow: hidden;
}

.ff-manifesto-swiper .swiper-slide img.ff-manifesto-img {
   width: 100% !important;
   height: 100% !important;
   object-fit: cover !important;
   object-position: center !important;
   transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
   display: block !important;
}

.ff-manifesto-visual-frame:hover .ff-manifesto-swiper .swiper-slide-active img.ff-manifesto-img {
   transform: scale(1.04) !important;
}

/* Flechas de Navegación Editorial con Glasmorfismo */
.ff-manifesto-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   background: rgba(6, 14, 21, 0.65);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: 1px solid rgba(255, 255, 255, 0.18);
   color: #FFFFFF !important;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.28s ease;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
   padding: 0;
}

.ff-manifesto-prev {
   left: 18px;
}

.ff-manifesto-next {
   right: 18px;
}

.ff-manifesto-nav:hover {
   background: #30589F;
   border-color: #30589F;
   color: #FFFFFF !important;
   transform: translateY(-50%) scale(1.08);
   box-shadow: 0 8px 20px rgba(48, 88, 159, 0.45);
}

.ff-manifesto-nav:active {
   transform: translateY(-50%) scale(0.94);
}

.ff-manifesto-nav.swiper-button-disabled {
   opacity: 0.35;
   pointer-events: none;
}

/* Paginación Sutil con Puntos Minimalistas */
.ff-manifesto-pagination {
   position: absolute;
   bottom: 18px !important;
   left: 0;
   right: 0;
   z-index: 10;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
}

.ff-manifesto-pagination .swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   background: rgba(255, 255, 255, 0.5);
   border-radius: 50%;
   transition: all 0.3s ease;
   opacity: 1;
   margin: 0 !important;
   cursor: pointer;
}

.ff-manifesto-pagination .swiper-pagination-bullet-active {
   background: #FFFFFF !important;
   width: 22px;
   border-radius: 6px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Ajustes Responsive para Móvil (≤ 767.98px) */
@media (max-width: 767.98px) {
   .ff-manifesto-visual-frame {
      min-height: 380px !important;
      aspect-ratio: 4 / 3.4 !important;
   }

   .ff-manifesto-nav {
      width: 38px;
      height: 38px;
   }

   .ff-manifesto-nav svg {
      width: 17px;
      height: 17px;
   }

   .ff-manifesto-prev {
      left: 10px;
   }

   .ff-manifesto-next {
      right: 10px;
   }

   .ff-manifesto-pagination {
      bottom: 12px !important;
   }
}

/* ============================================================
   BOTÓN CONMUTADOR DE INFORMACIÓN / ARTÍCULO SEO EN MODALES
   Icono 'i' e icono 'características' en azul claro con destello dorado
   ============================================================ */
.ff-modal-claim-row {
   display: flex !important;
   align-items: center !important;
   justify-content: space-between !important;
   gap: 12px !important;
   margin-bottom: 14px !important;
}

.ff-modal-claim-row .ff-modal-claim {
   margin-bottom: 0 !important;
}

/* Botón interactivo con halo/destello dorado */
.ff-modal-toggle-btn {
   position: relative;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   background: rgba(14, 28, 44, 0.85);
   border: 1px solid rgba(86, 172, 235, 0.35);
   color: #56ACEB !important; /* Azul claro gourmet */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   padding: 0;
   flex-shrink: 0;
   transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
   outline: none;
   box-shadow: 0 4px 12px rgba(6, 14, 21, 0.4);
}

.ff-modal-toggle-btn svg {
   width: 17px;
   height: 17px;
   stroke: #56ACEB;
   fill: none;
   stroke-width: 2;
   transition: transform 0.3s ease, stroke 0.3s ease;
}

/* Destello dorado que recorre continuamente el círculo del icono */
.ff-modal-toggle-btn::before {
   content: "";
   position: absolute;
   inset: -2px;
   border-radius: 50%;
   padding: 2px;
   background: conic-gradient(from 0deg, transparent 0%, #C8A97E 18%, #FFE5B4 25%, #C8A97E 32%, transparent 45%, transparent 100%);
   -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
   -webkit-mask-composite: xor;
   mask-composite: exclude;
   animation: ffGoldShimmerRotate 3s linear infinite;
   pointer-events: none;
}

@keyframes ffGoldShimmerRotate {
   0% {
      transform: rotate(0deg);
   }
   100% {
      transform: rotate(360deg);
   }
}

.ff-modal-toggle-btn:hover {
   background: rgba(86, 172, 235, 0.18);
   border-color: #56ACEB;
   transform: scale(1.08);
   box-shadow: 0 0 16px rgba(200, 169, 126, 0.45), 0 4px 14px rgba(6, 14, 21, 0.5);
}

.ff-modal-toggle-btn:active {
   transform: scale(0.92);
}

.ff-modal-toggle-btn .ff-icon-minus {
   display: none;
}

.ff-modal-toggle-btn .ff-icon-plus {
   display: block;
}

/* Estado activo: cuando se está viendo el texto/artículo */
.ff-modal-toggle-btn.is-story-active {
   background: rgba(86, 172, 235, 0.22);
   border-color: #56ACEB;
}

.ff-modal-toggle-btn.is-story-active .ff-icon-plus {
   display: none;
}

.ff-modal-toggle-btn.is-story-active .ff-icon-minus {
   display: block;
}

/* Vistas conmutables dentro de la ficha de producto */
.ff-modal-view-features {
   display: block;
   animation: ffFadeViewIn 0.35s ease;
}

.ff-modal-view-story {
   display: none;
   animation: ffFadeViewIn 0.35s ease;
   padding-top: 6px;
}

@keyframes ffFadeViewIn {
   from {
      opacity: 0;
      transform: translateY(6px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

/* Estilo editorial de alta gastronomía para los textos SEO */
.ff-modal-story-title {
   font-family: var(--ff-font-title) !important;
   font-size: 16px !important;
   font-weight: 700 !important;
   color: #56ACEB !important; /* Azul claro elegante */
   line-height: 1.35 !important;
   margin-bottom: 12px !important;
   letter-spacing: -0.01em !important;
}

.ff-modal-story-p {
   font-size: 13.5px !important;
   line-height: 1.75 !important;
   color: rgba(255, 255, 255, 0.88) !important;
   margin-bottom: 12px !important;
   text-align: justify;
}

.ff-modal-story-p strong {
   color: #C8A97E !important; /* Dorado FiveFish */
   font-weight: 700 !important;
}

@media (max-width: 767.98px) {
   .ff-modal-claim-row {
      gap: 8px !important;
   }
   
   .ff-modal-toggle-btn {
      width: 32px;
      height: 32px;
   }

   .ff-modal-toggle-btn svg {
      width: 15px;
      height: 15px;
   }

   .ff-modal-story-title {
      font-size: 15px !important;
   }

   .ff-modal-story-p {
      font-size: 12.8px !important;
      line-height: 1.65 !important;
   }
}