/*
Theme Name: Funded Francisco
Theme URI: https://fundedfrancisco.com
Author: Mstudio
Description: Tema a medida para Funded Francisco. Header, footer, tipografia, colores y botones base del sitio.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: funded-francisco
*/

/* ==========================================================================
   1. FUENTES
   ========================================================================== */
@font-face {
  font-family: 'Monda';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('assets/fonts/monda-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/hind-madurai-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/hind-madurai-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/hind-madurai-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Hind Madurai';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/hind-madurai-700.woff2') format('woff2');
}

/* ==========================================================================
   2. TOKENS: COLOR, TIPOGRAFIA, ESPACIADO
   ========================================================================== */
:root {
  /* Paleta general */
  --ff-primary: #3d1635;      /* morado oscuro - titulos, header, dropdowns */
  --ff-secondary: #571933;    /* vino - footer, boton A, borde boton B */
  --ff-mauve: #984d66;        /* CTA header, boton buscar, iconos sociales */
  --ff-navy: #153753;         /* color de parrafo */
  --ff-gold-light: #e2c37b;
  --ff-gold: #bb902e;
  --ff-olive: #a4a938;
  --ff-accent: #ea5e28;       /* naranja - links globales, hover botones */
  --ff-white: #ffffff;

  /* Tipografia */
  --ff-font-heading: 'Monda', sans-serif;
  --ff-font-body: 'Hind Madurai', sans-serif;

  --ff-fs-h1: clamp(2.5rem, 1.35rem + 5vw, 4.8125rem);   /* 77px */
  --ff-fs-h2: clamp(1.8rem, 1.3rem + 2.2vw, 2.5rem);     /* 40px */
  --ff-fs-h3: clamp(1.5rem, 1.15rem + 1.6vw, 2.0625rem); /* 33px */
  --ff-fs-h4: clamp(1.25rem, 1.05rem + 0.9vw, 1.4375rem);/* 23px */
  --ff-fs-h5: clamp(1.125rem, 1rem + 0.55vw, 1.25rem);   /* 20px */
  --ff-fs-h6: clamp(1.05rem, 0.97rem + 0.35vw, 1.125rem);/* 18px */
  --ff-fs-body: 1rem;       /* 16px */
  --ff-fs-small: 0.8125rem; /* 13px */

  --ff-container: 1360px;
  --ff-radius-pill: 999px;
  --ff-transition: 0.25s ease;
  --ff-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ==========================================================================
   3. RESET BASICO
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff-font-body);
  font-weight: 400;
  font-size: var(--ff-fs-body);
  line-height: 1.6;
  color: var(--ff-navy);
  background: var(--ff-white);
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
::selection { background: var(--ff-navy); color: var(--ff-white); }
::-moz-selection { background: var(--ff-navy); color: var(--ff-white); }
a { text-decoration: none; color: var(--ff-accent); transition: color var(--ff-transition); }
a:hover { color: var(--ff-primary); }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, button { font-size: 1rem; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-font-heading);
  font-weight: 700;
  color: var(--ff-primary);
  line-height: 1.15;
  margin: 0 0 0.6em;
}
h1 { font-size: var(--ff-fs-h1); }
h2 { font-size: var(--ff-fs-h2); }
h3 { font-size: var(--ff-fs-h3); }
h4 { font-size: var(--ff-fs-h4); }
h5 { font-size: var(--ff-fs-h5); }
h6 { font-size: var(--ff-fs-h6); }

p { margin: 0 0 1.2em; color: var(--ff-navy); }
strong, b { font-weight: 700; }

.ff-container {
  width: 100%;
  max-width: var(--ff-container);
  margin-inline: auto;
  padding-inline: 24px;
}

/* ==========================================================================
   4. BOTONES
   ========================================================================== */
.ff-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 9px 26px;
  border-radius: var(--ff-radius-pill);
  font-family: var(--ff-font-body);
  font-weight: 400;
  font-size: var(--ff-fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color var(--ff-transition), color var(--ff-transition),
              border-color var(--ff-transition), transform var(--ff-transition),
              box-shadow var(--ff-transition);
}
.ff-btn .ff-btn__arrow {
  display: inline-flex;
  width: 18px; height: 18px;
  flex-shrink: 0;
  transition: transform var(--ff-transition), color var(--ff-transition);
}
.ff-btn .ff-btn__arrow svg { width: 100%; height: 100%; }
.ff-btn:hover .ff-btn__arrow,
.ff-btn:focus-visible .ff-btn__arrow { transform: translateX(8px); }

/* Boton A - solido */
.ff-btn--a {
  background: var(--ff-secondary);
  color: var(--ff-white);
}
.ff-btn--a .ff-btn__arrow { color: var(--ff-white); }
.ff-btn--a:hover,
.ff-btn--a:focus-visible {
  background: var(--ff-accent);
  color: var(--ff-white);
  transform: scale(1.045);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.55);
}

/* Boton A variante mauve (CTA de header / buscar) */
.ff-btn--mauve { background: var(--ff-mauve); }
.ff-btn--mauve:hover,
.ff-btn--mauve:focus-visible { background: var(--ff-accent); }

/* Boton B - outline */
.ff-btn--b {
  background: var(--ff-white);
  color: var(--ff-secondary);
  border-color: var(--ff-secondary);
}
.ff-btn--b .ff-btn__arrow { color: var(--ff-secondary); }
.ff-btn--b:hover,
.ff-btn--b:focus-visible {
  background: var(--ff-white);
  color: var(--ff-accent);
  border-color: var(--ff-accent);
  transform: scale(1.045);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.4);
}
.ff-btn--b:hover .ff-btn__arrow,
.ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

.ff-btn--small { padding: 6px 18px; gap: 10px; }
.ff-btn--block { width: 100%; }

/* ==========================================================================
   5. HEADER
   ========================================================================== */
.ff-header {
  --ff-header-pad-block: 18px;
  --ff-header-bg-rgb: 61, 22, 53; /* rgb de --ff-primary */
  background-color: rgba(var(--ff-header-bg-rgb), 1);
  transition: background-color var(--ff-transition);
  position: sticky;
  top: 0;
  z-index: 100;
}
/* Solo en portada: header flota transparente sobre el hero */
.ff-header--transparent { background-color: rgba(var(--ff-header-bg-rgb), 0); }
/* Al hacer scroll (en portada y en paginas internas): mismo vidrio esmerilado en todo el sitio */
.ff-header.is-scrolled {
  background-color: rgba(var(--ff-header-bg-rgb), 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ff-header__row {
  display: flex;
  align-items: stretch;
  gap: 28px;
  height: 108px;
  padding-block: var(--ff-header-pad-block);
}
.ff-header__logo { flex-shrink: 0; line-height: 0; align-self: center; }
.ff-header__logo img,
.ff-header__logo svg { height: 70px; width: auto; }

.ff-nav { flex: 1; }
.ff-nav__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
  height: 100%;
}
.ff-nav__list > li { position: relative; display: flex; align-items: stretch; }
.ff-nav__list > li > a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ff-white);
  font-family: var(--ff-font-body);
  font-weight: 400;
  font-size: var(--ff-fs-small);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 10px 2px;
  transition: color var(--ff-transition);
}
.ff-nav__list > li > a:hover,
.ff-nav__list > li.current-menu-item > a { color: var(--ff-accent); }

/* Corchetes de enfoque: mismo motivo visual del corchete del icono de hamburguesa.
   En reposo viven COLAPSADOS (escala 0) en el centro del link (posicionados con
   %/transform de centrado); al activarse se animan en posicion Y escala hacia
   su esquina real, terminando en su tamano/posicion final (escala 1, sin translate
   extra) — "nacen" del centro y crecen hasta donde estan ahora. */
.ff-nav__list > li > a::before,
.ff-nav__list > li > a::after {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  opacity: 0;
}
.ff-nav__list > li > a::before {
  left: 50%; top: 50%;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: translate(-50%, -50%) scale(0);
}
.ff-nav__list > li > a::after {
  right: 50%; bottom: 50%;
  border-bottom: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translate(50%, 50%) scale(0);
}
.ff-nav__list > li.current-menu-item > a::before {
  left: -8px; top: 2px;
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
.ff-nav__list > li.current-menu-item > a::after {
  right: -8px; bottom: 2px;
  opacity: 1;
  transform: translate(0, 0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .ff-nav__list > li > a {
    transition: color var(--ff-transition), transform 0.18s var(--ff-ease-out);
  }
  .ff-nav__list > li > a::before,
  .ff-nav__list > li > a::after {
    transition: left 0.32s var(--ff-ease-out), top 0.32s var(--ff-ease-out),
      right 0.32s var(--ff-ease-out), bottom 0.32s var(--ff-ease-out),
      transform 0.32s var(--ff-ease-out), opacity 0.2s ease;
  }
  .ff-nav__list > li > a:hover {
    transform: scale(1.05) translateY(-2px);
  }
  .ff-nav__list > li > a:hover::before {
    left: -8px; top: 2px;
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  .ff-nav__list > li > a:hover::after {
    right: -8px; bottom: 2px;
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}
.ff-nav__caret { width: 10px; height: 10px; transition: transform var(--ff-transition); flex-shrink: 0; }
.ff-nav__list > li.menu-item-has-children:hover .ff-nav__caret,
.ff-nav__list > li.menu-item-has-children.is-open .ff-nav__caret { transform: rotate(180deg); }

/* Puente invisible: el submenu quedo pegado al borde del header (calc(100% + pad)),
   asi que hay un hueco entre el item y el submenu donde se perderia el hover al bajar el mouse. */
.ff-nav__list > li.menu-item-has-children::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: var(--ff-header-pad-block);
}

.ff-nav__list .sub-menu {
  position: absolute;
  top: calc(100% + var(--ff-header-pad-block));
  left: 0;
  min-width: 250px;
  background: var(--ff-white);
  border-radius: 0 0 14px 14px;
  padding: 14px 0;
  box-shadow: 0 24px 40px -18px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.18s var(--ff-ease-out), transform 0.18s var(--ff-ease-out), visibility 0.18s var(--ff-ease-out);
}
.ff-nav__list > li.menu-item-has-children:hover > .sub-menu,
.ff-nav__list > li.menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.ff-nav__list .sub-menu li a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  color: var(--ff-navy);
  font-family: var(--ff-font-body);
  font-weight: 500;
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.ff-nav__list .sub-menu li a::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-8px) rotate(-45deg);
  opacity: 0;
}
.ff-nav__list .sub-menu li a:hover,
.ff-nav__list .sub-menu li a:focus-visible {
  color: var(--ff-accent);
  transform: translateX(6px);
}
.ff-nav__list .sub-menu li a:hover::before,
.ff-nav__list .sub-menu li a:focus-visible::before {
  opacity: 1;
  transform: translateX(0) rotate(-45deg);
}
@media (hover: hover) and (pointer: fine) {
  .ff-nav__list .sub-menu li a {
    transition: transform 0.18s var(--ff-ease-out);
  }
  .ff-nav__list .sub-menu li a::before {
    transition: opacity 0.18s var(--ff-ease-out), transform 0.18s var(--ff-ease-out);
  }
}

.ff-header__actions {
  display: flex;
  align-items: center;
  align-self: center;
  gap: 18px;
  flex-shrink: 0;
}
.ff-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px; height: 60px;
  background: transparent;
  border: none;
  color: var(--ff-white);
  flex-shrink: 0;
  transition: opacity var(--ff-transition), transform var(--ff-transition);
}
.ff-icon-btn img,
.ff-icon-btn svg { width: 60px; height: 60px; }
.ff-icon-btn.js-ff-search-toggle img,
.ff-icon-btn.js-ff-search-toggle svg { width: 48px; height: 48px; }
.ff-icon-btn:hover { opacity: 0.75; transform: scale(1.06); }

.ff-header .ff-btn { display: none; }
@media (min-width: 992px) {
  .ff-header .ff-btn--cta { display: inline-flex; }
}

/* Nav movil dentro del header se oculta; vive en el off-canvas */
.ff-nav { display: none; }
@media (min-width: 992px) { .ff-nav { display: block; } }

/* Sin el nav (que en desktop empuja las acciones a la derecha via flex:1),
   lupa+hamburguesa quedaban pegadas al logo en vez de ir al borde derecho. */
.ff-header__actions { margin-left: auto; }
@media (min-width: 992px) { .ff-header__actions { margin-left: 0; } }

/* ==========================================================================
   6. BREADCRUMB
   ========================================================================== */
/* Sin fondo propio: hereda el fondo de .ff-header (solido arriba, blur+opacidad al hacer scroll) en vez de taparlo */
.ff-breadcrumb {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.ff-breadcrumb .ff-container {
  padding-block: 10px;
  font-size: var(--ff-fs-small);
  color: rgba(255,255,255,0.75);
  font-family: var(--ff-font-body);
}
.ff-breadcrumb a { color: rgba(255,255,255,0.75); }
.ff-breadcrumb a:hover { color: var(--ff-accent); }

/* ==========================================================================
   7. OVERLAY DE BUSQUEDA
   ========================================================================== */
.ff-search {
  position: absolute;
  top: 100%;
  right: 0;
  width: min(584px, calc(100vw - 24px));
  background: var(--ff-primary);
  border-radius: 0 0 14px 14px;
  padding: 56px 26px 26px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.55);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ff-transition), transform var(--ff-transition), visibility var(--ff-transition);
  z-index: 200;
}
.ff-search.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.ff-search__close {
  position: absolute;
  top: 16px; right: 16px;
  width: 30px; height: 30px;
  border: none; background: transparent; color: var(--ff-white);
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ff-transition), transform var(--ff-transition);
}
.ff-search__close img,
.ff-search__close svg { width: 24px; height: 24px; }
.ff-search__close:hover,
.ff-search__close:focus-visible {
  background: var(--ff-accent);
  transform: scale(1.12);
}
.ff-search__form { display: flex; gap: 0; }
.ff-search__input {
  flex: 1;
  min-width: 0;
  border: 0.5px solid var(--ff-mauve);
  border-right: none;
  border-radius: var(--ff-radius-pill) 0 0 var(--ff-radius-pill);
  padding: 14px 22px;
  background: transparent;
  color: var(--ff-white);
  font-family: var(--ff-font-body);
}
.ff-search__input::placeholder { color: var(--ff-mauve); }
.ff-search__submit {
  border: none;
  border-radius: 0 var(--ff-radius-pill) var(--ff-radius-pill) 0;
  padding: 0 26px;
  background: var(--ff-mauve);
  color: var(--ff-white);
  font-family: var(--ff-font-body);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--ff-fs-small);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background var(--ff-transition), box-shadow var(--ff-transition);
}
.ff-search__submit img,
.ff-search__submit svg { width: 23px; height: 23px; flex-shrink: 0; }
.ff-search__submit:hover {
  background: var(--ff-accent);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.55);
}

/* ==========================================================================
   8. OFF-CANVAS (menu de hamburguesa)
   ========================================================================== */
.ff-offcanvas {
  position: fixed;
  inset: 0;
  z-index: 999;
  visibility: hidden;
  transition: visibility var(--ff-transition);
}
.ff-offcanvas.is-open { visibility: visible; }

.ff-offcanvas__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 85% 0%, #571933 0%, #3d1635 65%);
  opacity: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity var(--ff-transition);
}
.ff-offcanvas.is-open .ff-offcanvas__backdrop { opacity: 0.9; }

.ff-offcanvas__panel {
  position: absolute;
  top: 0; right: 0;
  height: 100%;
  width: min(420px, 88vw);
  background: var(--ff-white);
  padding: 34px 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s ease;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.ff-offcanvas.is-open .ff-offcanvas__panel { transform: translateX(0); }

.ff-offcanvas__top { display: flex; align-items: flex-start; justify-content: space-between; }
.ff-offcanvas__logo img { height: 120px; width: auto; }
.ff-offcanvas__close {
  width: 34px; height: 34px;
  border: none; background: transparent; color: var(--ff-primary);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ff-offcanvas__close img,
.ff-offcanvas__close svg { width: 30px; height: 30px; }

.ff-offcanvas__section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ff-font-heading);
  font-size: 1.25rem;
  color: var(--ff-primary);
  margin-bottom: 14px;
}
.ff-offcanvas__section-title::before {
  content: '';
  width: 18px; height: 2px;
  background: var(--ff-primary);
  flex-shrink: 0;
}

.ff-offcanvas__nav ul { display: flex; flex-direction: column; }
.ff-offcanvas__nav > ul > li { border-bottom: 1px solid rgba(61,22,53,0.1); }
.ff-offcanvas__nav > ul > li > a,
.ff-offcanvas__nav > ul > li > button.ff-offcanvas__toggle {
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 13px 2px;
  font-family: var(--ff-font-body);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--ff-fs-small);
  color: var(--ff-navy);
  background: none; border: none; text-align: left;
}
.ff-offcanvas__nav a:hover { color: var(--ff-accent); }
.ff-offcanvas__toggle svg { width: 12px; height: 12px; transition: transform var(--ff-transition); }
.ff-offcanvas__nav li.is-open > .ff-offcanvas__toggle svg { transform: rotate(180deg); }
.ff-offcanvas__nav .sub-menu {
  display: none;
  padding: 4px 0 12px 14px;
  flex-direction: column;
  gap: 4px;
}
.ff-offcanvas__nav li.is-open > .sub-menu { display: flex; }
.ff-offcanvas__nav .sub-menu a {
  padding: 7px 0;
  font-family: var(--ff-font-body);
  font-weight: 500;
  font-size: var(--ff-fs-small);
  color: var(--ff-navy);
  text-transform: none;
}

/* En escritorio el menu principal ya vive en el header; el flotante solo muestra Newsletter + Sigueme */
@media (min-width: 992px) {
  .ff-offcanvas__nav,
  .ff-offcanvas__cta { display: none; }
}

.ff-offcanvas__newsletter p:not(.ff-offcanvas__section-title) { font-size: var(--ff-fs-small); margin-bottom: 16px; }
.ff-newsletter-form { display: flex; gap: 0; }
.ff-newsletter-form input[type="email"] {
  flex: 1;
  min-width: 0; /* sin esto el input no se achica por debajo de su ancho minimo de contenido
                   y empuja el boton fuera del formulario en contenedores angostos (offcanvas mobile) */
  border: 1px solid rgba(61,22,53,0.25);
  border-right: none;
  border-radius: var(--ff-radius-pill) 0 0 var(--ff-radius-pill);
  padding: 12px 18px;
  font-family: var(--ff-font-body);
  color: var(--ff-primary);
}
.ff-newsletter-form button {
  width: 46px; height: 46px;
  border-radius: 0 var(--ff-radius-pill) var(--ff-radius-pill) 0;
  border: 1px solid rgba(61,22,53,0.25);
  border-left: none;
  background: var(--ff-mauve);
  color: var(--ff-white);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--ff-transition);
}
.ff-newsletter-form button:hover { background: var(--ff-accent); }
.ff-newsletter-form button svg { width: 18px; height: 18px; }

.ff-social { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-social a {
  width: 44.8px; height: 37.3px;
  border-radius: 13.1px;
  background: var(--ff-mauve);
  color: var(--ff-white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--ff-transition), transform var(--ff-transition);
}
.ff-social a:hover { background: var(--ff-accent); transform: translateY(-2px); }
.ff-social a img,
.ff-social a svg { width: 18.48px; height: 18.48px; }

body.ff-offcanvas-open { overflow: hidden; }
body.ff-lightbox-open { overflow: hidden; }

/* ==========================================================================
   9. FOOTER
   ========================================================================== */
.ff-footer { background: var(--ff-secondary); color: var(--ff-white); }
.ff-footer a { color: rgba(255,255,255,0.85); }
.ff-footer a:hover { color: var(--ff-accent); }

.ff-footer__top {
  padding-block: 60px 40px;
  display: grid;
  /* Escritorio (>1100px): Talleres, Servicios y De Interes en el mismo nivel, 3 columnas propias
     (no apiladas). El orden natural del markup ya las coloca asi, sin necesidad de grid-column/row. */
  grid-template-columns: 454px minmax(150px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(240px, 1fr);
  gap: 28px;
}


.ff-footer__brand {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-right: 24px;
  border-right: 0.5px solid #984d66;
  margin-block: -60px -40px;
  padding-block: 60px 40px;
}
.ff-footer__brand .ff-footer__mark { display: block; width: 156px; height: auto; margin-bottom: 0; flex-shrink: 0; }
.ff-footer__contact-wrap { flex: 1; margin-right: -24px; }
.ff-footer__mark svg { width: 100%; height: auto; }
.ff-footer__contact-block { margin-bottom: 22px; }
.ff-footer__contact-block + .ff-footer__contact-block { border-top: 0.5px solid #984d66; padding-top: 22px; }
.ff-footer__contact-block h6 {
  display: flex; align-items: center; gap: 10px;
  color: var(--ff-white);
  font-size: 1.0625rem;
  margin-bottom: 10px;
}
.ff-footer__contact-block h6::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--ff-white);
}
.ff-footer__contact-block a,
.ff-footer__contact-block p {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
}
.ff-footer__contact-block a + a { margin-top: 10px; }
.ff-footer__contact-block img,
.ff-footer__contact-block svg { width: 32px; height: 32px; flex-shrink: 0; }

.ff-footer__col h6 {
  display: flex; align-items: center; gap: 10px;
  color: var(--ff-white);
  font-size: 1.0625rem;
  margin-bottom: 18px;
}
.ff-footer__col h6::before {
  content: '';
  width: 16px; height: 2px;
  background: var(--ff-white);
}
.ff-footer__col ul { display: flex; flex-direction: column; gap: 11px; }
.ff-footer__col a {
  font-size: 0.9375rem;
  display: flex; align-items: center; gap: 8px;
  transition: color var(--ff-transition), transform 0.18s var(--ff-ease-out);
}
.ff-footer__col a::before {
  content: '';
  width: 6px; height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateX(-8px) rotate(-45deg);
  opacity: 0;
  transition: opacity 0.18s var(--ff-ease-out), transform 0.18s var(--ff-ease-out);
}
.ff-footer__col a:hover,
.ff-footer__col a:focus-visible {
  color: var(--ff-accent);
  transform: translateX(6px);
}
.ff-footer__col a:hover::before,
.ff-footer__col a:focus-visible::before {
  opacity: 1;
  transform: translateX(0) rotate(-45deg);
}

.ff-footer__newsletter { padding-left: 24px; border-left: 0.5px solid #984d66; margin-block: -60px -40px; padding-block: 60px 40px; }
.ff-footer__newsletter p { font-size: 0.875rem; color: rgba(255,255,255,0.75); margin-bottom: 18px; }
.ff-footer__newsletter .ff-newsletter-form input[type="email"] {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.25);
  color: var(--ff-white);
}
.ff-footer__newsletter .ff-newsletter-form button { border-color: rgba(255,255,255,0.25); }
.ff-footer__newsletter .ff-newsletter-form input[type="email"]::placeholder { color: rgba(255,255,255,0.6); }

@media (max-width: 1100px) {
  .ff-footer__top { grid-template-columns: 1fr 1fr; }
  .ff-footer__col--talleres { grid-column: 2; grid-row: 1; }
  .ff-footer__col--servicios { grid-column: 1; grid-row: 2; }
  .ff-footer__col--interes { grid-column: 2; grid-row: 2; }
  /* Newsletter pasa a ocupar una fila propia a todo el ancho: el divisor y el margen negativo
     de la version desktop (pensados para sentarse al lado de otra columna) quedan sueltos aca. */
  .ff-footer__newsletter { grid-column: 1 / -1; grid-row: 3; border-left: none; margin-block: 0; padding-block: 0; padding-left: 0; }
}

@media (max-width: 640px) {
  /* En 1 sola columna los strokes divisorios (pensados para el grid de
     escritorio, con el truco de margin-block negativo para que la linea
     toque el borde superior/inferior del bloque) quedan descolgados y
     con ancho parcial en vez de acompanar el nuevo layout apilado. */
  /* Logo a la izquierda, contacto a la derecha (orden natural del markup) */
  .ff-footer__brand { border-right: none; margin-block: 0; padding-block: 0; padding-right: 0; }
  .ff-footer__contact-wrap { margin-right: 0; }
  .ff-footer__contact-block + .ff-footer__contact-block { border-top: none; padding-top: 0; }

  .ff-footer__top { grid-template-columns: 1fr 1fr; padding-block: 44px 30px; }
  .ff-footer__brand { grid-column: 1 / -1; grid-row: 1; }
  /* Talleres y Servicios apilados en la columna izquierda, De Interes al lado ocupando
     esas mismas 2 filas: asi no queda el hueco vacio a la derecha de una sola columna larga. */
  .ff-footer__col--talleres { grid-column: 1; grid-row: 2; }
  .ff-footer__col--servicios { grid-column: 1; grid-row: 3; }
  .ff-footer__col--interes { grid-column: 2; grid-row: 2 / span 2; }
  .ff-footer__newsletter { grid-column: 1 / -1; grid-row: 4; border-left: none; margin-block: 0; padding-block: 0; padding-left: 0; }
}

.ff-footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-block: 20px;
  text-align: center;
  font-size: var(--ff-fs-small);
  color: rgba(255,255,255,0.75);
}

/* ==========================================================================
   10. HERO - HOME
   ========================================================================== */
.ff-hero {
  position: relative;
  margin-top: -108px; /* alto de .ff-header__row: el hero sube para quedar detras del header transparente */
  background-color: var(--ff-secondary);
  padding-block: 190px 160px;
  overflow: hidden;
}

/* Capa de fondo separada del contenido para poder animarla (escala + blur) sin mover el texto */
.ff-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--ff-secondary);
  background-image:
    radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%),
    linear-gradient(90deg, rgba(61, 22, 53, 0.95) 0%, rgba(61, 22, 53, 0.85) 30%, rgba(61, 22, 53, 0.45) 60%, rgba(61, 22, 53, 0.12) 100%),
    var(--ff-hero-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;
  transform: scale(1.08);
  filter: blur(16px);
  /* Arranca despues de que termine la entrada del texto (ver .ff-hero__cta a:nth-child(2), 1150ms + 450ms)
     para que el texto y la foto no animen a la vez y compitan por recursos al cargar */
  animation:
    ff-hero-bg-in 1500ms var(--ff-ease-out) 1600ms forwards,
    ff-hero-bg-ambient 22s ease-in-out 3100ms infinite alternate;
}

@keyframes ff-hero-bg-in {
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* Loop ambiente sutil (tipo "Ken Burns") una vez terminada la entrada: zoom + pan lento */
@keyframes ff-hero-bg-ambient {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.6%, -1.2%); }
}

.ff-hero__inner { position: relative; z-index: 2; }

/* Red geometrica que se arma con el mouse (solo desktop con hover, ver main.js) */
.ff-hero__constellation {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.ff-hero__content { max-width: 700px; }
.ff-hero__title { color: var(--ff-white); }

/* Titulo: cada letra entra en un orden random con blur (ver ff_scramble_chars() en functions.php) */
.ff-hero__word { display: inline-block; }
.ff-hero__char {
  display: inline-block;
  opacity: 0;
  filter: blur(6px);
  transform: translate(var(--tx, 0), var(--ty, 10px));
  animation: ff-char-in 520ms var(--ff-ease-out) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes ff-char-in {
  to { opacity: 1; filter: blur(0); transform: translate(0, 0); }
}

.ff-hero__subtitle {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.0625rem;
  max-width: 620px;
  margin-bottom: 32px;
  opacity: 0;
  transform: translateY(14px);
  animation: ff-fade-up 550ms var(--ff-ease-out) forwards;
  animation-delay: 700ms;
}
.ff-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  margin-bottom: 40px;
}
.ff-hero__badges li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--ff-fs-small);
  color: rgba(255, 255, 255, 0.9);
  white-space: nowrap;
  padding-right: 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.25);
  opacity: 0;
  transform: translateY(12px);
  animation: ff-fade-up 450ms var(--ff-ease-out) forwards;
}
.ff-hero__badges li:nth-child(1) { animation-delay: 900ms; }
.ff-hero__badges li:nth-child(2) { animation-delay: 950ms; }
.ff-hero__badges li:nth-child(3) { animation-delay: 1000ms; }
.ff-hero__badges li:last-child { border-right: none; padding-right: 0; }
.ff-hero__badges .ff-icon-check { width: 20px; height: 20px; color: var(--ff-accent); flex-shrink: 0; }
.ff-hero__badges a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.4);
  text-underline-offset: 3px;
  transition: color var(--ff-transition);
}
.ff-hero__badges a:hover { color: var(--ff-accent); }

.ff-hero__cta { display: flex; flex-wrap: wrap; gap: 18px; }
.ff-hero__cta a {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  animation: ff-fade-up-scale 450ms var(--ff-ease-out) forwards;
}
.ff-hero__cta a:nth-child(1) { animation-delay: 1100ms; }
.ff-hero__cta a:nth-child(2) { animation-delay: 1150ms; }

@keyframes ff-fade-up { to { opacity: 1; transform: translateY(0); } }
@keyframes ff-fade-up-scale { to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .ff-hero__bg { animation: none; opacity: 1; transform: none; filter: none; }
  .ff-hero__char { animation: none; opacity: 1; filter: none; transform: none; }
  .ff-hero__subtitle,
  .ff-hero__badges li,
  .ff-hero__cta a { animation: none; opacity: 1; transform: none; }
}

/* Boton B sobre fondo oscuro del hero: outline blanco en vez de vino */
.ff-hero .ff-btn--b {
  background: transparent;
  color: var(--ff-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.ff-hero .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-hero .ff-btn--b:hover,
.ff-hero .ff-btn--b:focus-visible {
  background: transparent;
  color: var(--ff-accent);
  border-color: var(--ff-accent);
}
.ff-hero .ff-btn--b:hover .ff-btn__arrow,
.ff-hero .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

@media (max-width: 640px) {
  .ff-hero { padding-block: 110px 76px; }
  .ff-hero__badges li { border-right: none; padding-right: 0; white-space: normal; }
}

/* ==========================================================================
   11. TALLERES (HOME) + PAGINA DE DETALLE
   ========================================================================== */
.ff-talleres { padding-block: 100px; }
.ff-talleres__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}
.ff-talleres__head-text { max-width: 640px; }
.ff-talleres__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-talleres__head-text h2 { margin-bottom: 16px; }
.ff-talleres__subtitle { color: var(--ff-navy); font-size: 1.0625rem; margin-bottom: 0; }
.ff-talleres__head .ff-btn { flex-shrink: 0; }

.ff-talleres__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 36px;
  margin-top: 56px;
  justify-items: start;
}

.ff-taller-card {
  position: relative;
  width: 80%; /* ancho reducido un 20% respecto al ancho de la columna */
  margin-bottom: 44px; /* deja lugar al panel que sobresale por debajo */
}

.ff-taller-card__media {
  display: block;
  position: relative;
  width: 76%; /* mas angosta que la tarjeta: deja espacio a la derecha para que el panel quede afuera */
  aspect-ratio: 25 / 26; /* alto +30% respecto al 5/4 anterior */
  border-radius: 24px;
  overflow: hidden;
  background: var(--ff-primary);
  transition: box-shadow var(--ff-transition);
}
.ff-taller-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ff-ease-out);
}
.ff-taller-card:hover .ff-taller-card__media img { transform: scale(1.06); }
.ff-taller-card:hover .ff-taller-card__media { box-shadow: 0 24px 44px -20px rgba(61, 22, 53, 0.45); }

.ff-taller-card__media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-taller-card__media-fallback img { width: 64px; height: auto; opacity: 0.35; }

/* Panel solido flotando sobre la esquina inferior de la imagen */
.ff-taller-card__panel {
  position: absolute;
  left: 40%;
  width: 68%;
  bottom: -26px;
  background: var(--ff-primary);
  border-radius: 18px;
  padding: 24px 26px 26px;
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.5);
}
.ff-taller-card__panel h3 { font-size: var(--ff-fs-h5); color: var(--ff-white); margin-bottom: 18px; }
.ff-taller-card__panel h3 a { color: inherit; }
.ff-taller-card__panel h3 a:hover { color: var(--ff-accent); }
.ff-taller-card__panel .ff-btn { width: 100%; }

.ff-stars { display: inline-flex; gap: 4px; margin-bottom: 14px; }
.ff-star { position: relative; width: 17px; height: 17px; color: rgba(255, 255, 255, 0.3); }
.ff-star__outline,
.ff-star__fill { position: absolute; inset: 0; }
.ff-star__outline svg,
.ff-star__fill svg { width: 17px; height: 17px; max-width: none; fill: currentColor; display: block; }
.ff-star__fill { width: var(--fill); overflow: hidden; color: var(--ff-gold-light); }

/* Boton solido en acento, para el panel oscuro de la tarjeta de taller */
.ff-btn--accent { background: var(--ff-accent); color: var(--ff-white); }
.ff-btn--accent .ff-btn__arrow { color: var(--ff-white); }
.ff-btn--accent:hover,
.ff-btn--accent:focus-visible {
  background: var(--ff-white);
  color: var(--ff-accent);
  transform: scale(1.045);
  box-shadow: 0 12px 26px -6px rgba(0, 0, 0, 0.45);
}
.ff-btn--accent:hover .ff-btn__arrow,
.ff-btn--accent:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

.ff-talleres-archive { padding-block: 60px 100px; }

/* ==========================================================================
   SERVICIOS (HOME)
   ========================================================================== */
.ff-servicios { padding-block: 100px; }

.ff-servicios__layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

.ff-servicios__intro { grid-column: 1; }
.ff-servicios__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-servicios__intro h2 { margin-bottom: 16px; }
.ff-servicios__subtitle { color: var(--ff-navy); font-size: 1.0625rem; margin-bottom: 28px; }

.ff-servicios__grid {
  grid-column: 2 / span 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-content: start;
}
.ff-servicios__empty { grid-column: 2 / span 2; color: var(--ff-navy); }

.ff-servicio-card {
  position: relative;
  overflow: hidden;
  background: var(--ff-white);
  border-radius: 0;
  padding: 28px 24px 22px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
/* Sin gap entre cards: todo el grid se ve como un solo objeto. Cada card
   solo redondea la esquina que le toca cuando cae en el borde EXTERIOR del
   bloque completo (calculado en PHP segun la posicion real y el total de
   servicios, ver template-parts/servicio-card.php) — nunca un lado que
   toque otra card. */
.ff-servicio-card.ff-corner-tl { border-top-left-radius: 20px; }
.ff-servicio-card.ff-corner-tr { border-top-right-radius: 20px; }
.ff-servicio-card.ff-corner-bl { border-bottom-left-radius: 20px; }
.ff-servicio-card.ff-corner-br { border-bottom-right-radius: 20px; }
.ff-servicio-card:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: scale(1.02);
  z-index: 3;
}

.ff-servicio-card__row {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 45px;
}

.ff-servicio-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--ff-primary);
}
.ff-servicio-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
  transition: transform 0.5s var(--ff-ease-out);
}
.ff-servicio-card:hover .ff-servicio-card__media img { transform: scale(1.06); }
.ff-servicio-card__media-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-servicio-card__media-fallback img { width: 40%; height: auto; max-width: 40%; opacity: 0.35; }

.ff-servicio-card__body h3 { font-size: var(--ff-fs-h6); line-height: 1.25; color: var(--ff-primary); margin-bottom: 8px; }
.ff-servicio-card__body h3 a { color: inherit; }
.ff-servicio-card__body h3 a:hover { color: var(--ff-accent); }
.ff-servicio-card__excerpt { color: var(--ff-navy); font-size: 0.875rem; line-height: 1.55; margin: 0; }

.ff-servicio-card__link {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 16px;
  border-top: 0.5px solid rgba(21, 55, 83, 0.18);
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ff-servicio-card__link svg { width: 14px; height: 14px; color: var(--ff-accent); transition: transform var(--ff-transition); }
.ff-servicio-card__link:hover svg { transform: translateX(6px); }

.ff-servicio-card__number {
  position: absolute;
  right: 14px;
  bottom: -24px;
  z-index: 1;
  font-family: var(--ff-font-heading);
  font-weight: 700;
  line-height: 1;
  font-size: clamp(56px, 6vw, 84px);
  color: var(--ff-primary);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--ff-transition), transform var(--ff-transition);
  pointer-events: none;
  user-select: none;
}
.ff-servicio-card:hover .ff-servicio-card__number { opacity: 0.14; transform: translateY(0); }

@media (max-width: 900px) {
  .ff-servicios__layout { grid-template-columns: 1fr; }
  .ff-servicios__intro { grid-column: 1; max-width: 640px; }
  .ff-servicios__grid,
  .ff-servicios__empty { grid-column: 1; margin-top: 40px; }
}

@media (max-width: 640px) {
  .ff-servicios { padding-block: 64px; }
  .ff-servicios__grid { grid-template-columns: 1fr; gap: 24px; }
  /* En 1 sola columna cada card queda separada y sin vecinas por los costados: redondeo completo de nuevo, sin importar las clases ff-corner-* calculadas para el layout de 2 columnas */
  .ff-servicios__grid .ff-servicio-card {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ff-servicio-card,
  .ff-servicio-card__media img,
  .ff-servicio-card__number { transition: none; }
}

/* ---------- archive-servicio.php (/servicios/) ---------- */
/* Misma card que el home, pero a 3 columnas pegadas (gap:0) ya que aca no
   compite con una columna de texto — el bloque completo de cards se ve
   como un solo objeto grande (ver ff_servicio_card_corners()). */
.ff-servicios-archive { padding-block: 60px 100px; }
.ff-servicios-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.ff-servicios-archive__empty { color: var(--ff-navy); }

@media (max-width: 900px) {
  /* A 2 columnas el redondeo "objeto unico" (calculado en PHP para 3 columnas) ya no encaja: se pisa con redondeo completo normal, mismo criterio que el home en mobile */
  .ff-servicios-archive__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .ff-servicios-archive__grid .ff-servicio-card {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}
@media (max-width: 640px) {
  .ff-servicios-archive { padding-block: 40px 64px; }
  .ff-servicios-archive__grid { grid-template-columns: 1fr; }
}

/* Listas del editor (the_content): el reset global "ul{list-style:none}" es para UI propia del tema,
   pero le saca la vinieta a las listas que el usuario escribe en el editor — se restaura solo dentro
   del contenido enriquecido. */
.ff-taller-desc ul,
.ff-analisis-content ul {
  list-style: disc;
  padding-left: 1.3em;
  margin: 0 0 1.2em;
}
.ff-taller-desc ol,
.ff-analisis-content ol {
  list-style: decimal;
  padding-left: 1.3em;
  margin: 0 0 1.2em;
}
.ff-taller-desc ul ul,
.ff-taller-desc ul ol,
.ff-taller-desc ol ul,
.ff-taller-desc ol ol,
.ff-analisis-content ul ul,
.ff-analisis-content ul ol,
.ff-analisis-content ol ul,
.ff-analisis-content ol ol { margin-bottom: 0; }
.ff-taller-desc li,
.ff-analisis-content li { margin-bottom: 0.4em; }

/* ---------- Galeria de fotos (single-servicio.php) ---------- */
.ff-gallery { padding-block: 20px 100px; }
.ff-gallery h2 { font-size: var(--ff-fs-h3); margin-bottom: 32px; }
/* Anidada dentro de .ff-taller-content (single-servicio.php): el espaciado ya lo da .ff-taller-block, no hace falta el padding-block propio */
.ff-taller-block.ff-gallery { padding-block: 0; }
.ff-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
}
.ff-gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: none;
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--ff-primary);
  cursor: zoom-in;
}
.ff-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ff-ease-out); }
.ff-gallery__item:hover img { transform: scale(1.06); }
.ff-gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(61, 22, 53, 0);
  transition: background var(--ff-transition);
}
.ff-gallery__item:hover::after { background: rgba(61, 22, 53, 0.15); }

/* Lightbox: overlay a pantalla completa con navegacion, en el mismo espiritu que el overlay de busqueda */
.ff-lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 8, 17, 0.94);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--ff-transition);
  padding: 40px;
}
.ff-lightbox.is-open { opacity: 1; visibility: visible; }
.ff-lightbox__img {
  max-width: 100%;
  max-height: 86vh;
  border-radius: 8px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.3s var(--ff-ease-out), transform 0.3s var(--ff-ease-out);
}
.ff-lightbox.is-open .ff-lightbox__img { opacity: 1; transform: scale(1); }
.ff-lightbox__close,
.ff-lightbox__prev,
.ff-lightbox__next {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: var(--ff-white);
  cursor: pointer;
  transition: background var(--ff-transition), border-color var(--ff-transition);
}
.ff-lightbox__close:hover,
.ff-lightbox__prev:hover,
.ff-lightbox__next:hover { background: var(--ff-accent); border-color: var(--ff-accent); }
.ff-lightbox__close { top: 24px; right: 24px; width: 46px; height: 46px; }
.ff-lightbox__close svg { width: 18px; height: 18px; }
.ff-lightbox__prev,
.ff-lightbox__next { top: 50%; transform: translateY(-50%); width: 54px; height: 54px; }
.ff-lightbox__prev { left: 24px; }
.ff-lightbox__next { right: 24px; }
.ff-lightbox__prev svg,
.ff-lightbox__next svg { width: 22px; height: 22px; }
.ff-lightbox__counter {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  letter-spacing: 0.06em;
}

@media (max-width: 640px) {
  .ff-lightbox { padding: 16px; }
  .ff-lightbox__prev,
  .ff-lightbox__next { width: 44px; height: 44px; }
  .ff-lightbox__prev { left: 8px; }
  .ff-lightbox__next { right: 8px; }
  .ff-lightbox__close { top: 12px; right: 12px; }
}

/* ---------- Filas de taller del archivo (/talleres/): la misma tarjeta del home (sin tocar su estilo), con el extracto suelto (sin fondo) y el precio a la derecha ---------- */
.ff-talleres-archive__list { display: flex; flex-direction: column; }
.ff-taller-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 48px;
  padding-block: 44px;
}
.ff-taller-row:first-child { padding-top: 0; }
.ff-taller-row:last-child { padding-bottom: 0; }
/* Separador a todo el ancho de la pantalla (no solo el ancho del contenedor) */
.ff-taller-row:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  border-bottom: 1px solid rgba(21, 55, 83, 0.12);
}
/* Contenedor de la tarjeta (imagen + panel con titulo y "Ver Taller"): 35% mas angosto que la version anterior */
.ff-taller-row .ff-taller-card { width: auto; flex: 0 0 42%; margin-bottom: 0; }
/* Imagen destacada 50px mas ancha hacia la derecha (el panel flotante no se toca) */
.ff-taller-row .ff-taller-card__media { width: calc(76% + 80px); }
.ff-taller-row__excerpt {
  flex: 1;
  min-width: 0;
  align-self: center;
  color: var(--ff-navy);
  font-size: 1.0625rem;
  line-height: 1.7;
}
/* Columna del precio + formas de pago: alineada arriba del contenedor de la fila */
.ff-taller-row__side { flex: 0 0 auto; width: 170px; }
/* Precio con su etiqueta, version chica para la fila (la base .ff-taller-price esta pensada para la sidebar, mucho mas ancha). Selector con mayor especificidad que ".ff-taller-price" para no depender del orden en el archivo. */
.ff-taller-row .ff-taller-price.ff-taller-row__price {
  width: 170px;
  margin: 0 0 22px;
}
.ff-taller-row__price .ff-taller-price__amount { font-size: clamp(1.9rem, 2.6vw, 2.3rem); padding-inline: 16px; }
.ff-taller-row__price .ff-taller-price__suffix { font-size: 0.75rem; }
/* "Formas de pago" debajo del precio, sobre fondo blanco (no el fondo oscuro de la sidebar de single-taller.php). Selectores con ".ff-taller-row" para pisar ".ff-taller-list--pagos" sin depender del orden en el archivo. */
.ff-taller-row .ff-taller-sidebar__label.ff-taller-row__pagos-label { color: var(--ff-navy); opacity: 0.6; margin-bottom: 10px; }
.ff-taller-row .ff-taller-list--pagos.ff-taller-row__pagos { grid-template-columns: 1fr; row-gap: 8px; margin-bottom: 0; }
.ff-taller-row .ff-taller-row__pagos li span { color: var(--ff-navy); font-size: 0.9375rem; }

@media (max-width: 900px) {
  .ff-taller-row { flex-wrap: wrap; }
  .ff-taller-row__side { order: 1; }
}

@media (max-width: 780px) {
  .ff-talleres__head { flex-direction: column; align-items: flex-start; }
  .ff-taller-row { flex-direction: column; align-items: flex-start; gap: 24px; }
  .ff-taller-row .ff-taller-card { flex-basis: auto; width: 100%; }
  /* El panel de titulo esta pensado para sobresalir de una card que mide 80% de su columna (left:40%+width:68%=108%,
     ver .ff-taller-card__panel arriba). Aca la card mide 100% de la fila, asi que ese mismo 108% se pasaba
     ~26px del borde real y generaba el micro-scroll horizontal. Con right:-24px (el padding-inline
     de .ff-container) el panel llega justo al borde de la pantalla en vez de pasarse: mantiene el
     efecto "pegado al borde" sin el overflow. */
  .ff-taller-row .ff-taller-card__panel { width: auto; right: -24px; }
  /* La columna de precio/pago tenia el ancho fijo de 170px (pensado para el layout de 2 columnas
     de escritorio) y quedaba pegada a la izquierda, dejando un hueco vacio a la derecha de la fila. */
  .ff-taller-row__side { width: 100%; }
  .ff-taller-row .ff-taller-price.ff-taller-row__price { margin: 0 auto 22px; }
  .ff-taller-row .ff-taller-sidebar__label.ff-taller-row__pagos-label { text-align: center; }
  .ff-taller-row .ff-taller-list--pagos.ff-taller-row__pagos { grid-template-columns: 1fr 1fr; max-width: 280px; margin-inline: auto; }
}

@media (max-width: 640px) {
  .ff-talleres { padding-block: 64px; }
  .ff-talleres__grid { grid-template-columns: 1fr; gap: 26px; margin-top: 40px; justify-items: center; }
  /* Mismo tratamiento "a todo el ancho, panel pegado al borde" que /talleres/ en mobile (ver .ff-taller-row arriba) */
  .ff-talleres__grid .ff-taller-card { width: 100%; }
  .ff-talleres__grid .ff-taller-card__media { width: calc(76% + 80px); }
  .ff-talleres__grid .ff-taller-card__panel { width: auto; right: -24px; }
}

/* ---------- single-taller.php ---------- */
.ff-taller-hero { position: relative; overflow: hidden; background: var(--ff-primary); padding-block: 56px 44px; }
/* Banner de /talleres/: contenedor 30% mas bajo que el de single-taller.php, y sin blur en la imagen (los talleres internos si mantienen el blur) */
.ff-taller-hero--archive { padding-block: 39px 31px; }
.ff-taller-hero--archive .ff-taller-hero__bg { filter: none; transform: none; }
/* Imagen destacada de fondo: desenfocada + tenida con el color de marca para que el titulo siga legible */
.ff-taller-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--ff-taller-hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.15); /* evita bordes sin cubrir que deja el blur */
  filter: blur(20px);
}
.ff-taller-hero__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ff-primary);
  opacity: 0.72;
}
.ff-taller-hero__inner { position: relative; z-index: 1; }
.ff-taller-hero__eyebrow {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.ff-taller-hero h1 { color: var(--ff-white); margin-bottom: 0; }

/* single-servicio.php ya no tiene banner/sello propio: reusa exactamente
   .ff-taller-hero + .ff-taller-layout/.ff-taller-sidebar de single-taller.php
   (ver mas abajo) para que el precio se vea igual de prolijo en la sidebar,
   sin el sello rotado sobresaliendo del banner que tenia antes. */

.ff-taller-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 60px;
  align-items: start;
  padding-block: 60px 100px;
}
/* Mismo ancho que "Tematicas" (ocupa toda la columna, sin recorte propio) */
.ff-taller-desc { max-width: 100%; }
.ff-taller-block { margin-top: 44px; }
.ff-taller-block h2 { font-size: var(--ff-fs-h4); margin-bottom: 20px; }
.ff-taller-list { display: flex; flex-direction: column; gap: 14px; }
/* El check vive DENTRO de la caja de texto (no colgado al margen, que en mobile
   se salia del contenedor) — mismo patron de .ff-pricing__features/.ff-taller-list--pagos */
.ff-taller-list li { display: flex; align-items: flex-start; gap: 10px; }
.ff-taller-list .ff-icon-check { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--ff-accent); }

.ff-taller-sidebar { position: sticky; top: 128px; }
.ff-taller-sidebar__card {
  background: var(--ff-primary);
  border-radius: 20px;
  padding: 32px 28px;
  text-align: center;
}
.ff-taller-sidebar__card .ff-stars { justify-content: center; gap: 8px; margin-bottom: 22px; }
.ff-taller-sidebar__card .ff-star,
.ff-taller-sidebar__card .ff-star__outline svg,
.ff-taller-sidebar__card .ff-star__fill svg { width: 34px; height: 34px; }

/* Etiqueta de precio: sello ondulado (ver ff_icon_price_seal en inc/icons.php) con el monto encima.
   width en min(): en pantallas angostas donde la sidebar queda con menos de 304+padding de ancho,
   un valor fijo forzaba el grid de una columna a desbordar y se comia el margen derecho de la pagina. */
.ff-taller-price {
  position: relative;
  width: min(304px, 100%);
  aspect-ratio: 1;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--ff-transition);
}
/* Cuando hay multiples precios la etiqueta es un link a "Planes y precios" */
a.ff-taller-price { cursor: pointer; }
a.ff-taller-price:hover,
a.ff-taller-price:focus-visible { transform: scale(1.045); }
.ff-taller-price__seal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ff-accent);
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.35));
}
.ff-taller-price__amount {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: clamp(3.6rem, 6vw, 5.4rem);
  line-height: 1;
  color: var(--ff-white);
  padding-inline: 22px;
  text-align: center;
}
.ff-taller-price__suffix {
  font-family: var(--ff-font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ff-taller-sidebar__note {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
  margin-bottom: 24px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}

/* Boton B outline blanco (mismo estilo que en el hero del home) para el fondo oscuro de la tarjeta */
.ff-taller-sidebar__card .ff-btn--b {
  background: transparent;
  color: var(--ff-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.ff-taller-sidebar__card .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-taller-sidebar__card .ff-btn--b:hover,
.ff-taller-sidebar__card .ff-btn--b:focus-visible {
  background: transparent;
  color: var(--ff-accent);
  border-color: var(--ff-accent);
}
.ff-taller-sidebar__card .ff-btn--b:hover .ff-btn__arrow,
.ff-taller-sidebar__card .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }
.ff-taller-sidebar__from {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ff-taller-sidebar__label {
  color: rgba(255, 255, 255, 0.65);
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
/* Lista "Formas de pago" del sidebar: circulos naranjas llenos en vez del check, en linea (no colgados como en Tematicas) */
.ff-taller-list--pagos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  row-gap: 10px;
  text-align: left;
  margin-bottom: 24px;
}
.ff-taller-list--pagos li { position: static; display: flex; align-items: center; gap: 10px; }
.ff-taller-list--pagos .ff-icon-dot { position: static; width: 11px; height: 11px; flex-shrink: 0; color: var(--ff-accent); }
.ff-taller-list--pagos li span { color: rgba(255, 255, 255, 0.85); font-size: 1.0625rem; }

@media (max-width: 900px) {
  /* minmax(0, ...) y no "1fr" a secas: mismo motivo que en desktop (ver arriba) —
     sin el minmax(0, ...) la columna no puede achicarse por debajo del contenido
     mas ancho de la sidebar (el sello de precio) y se come el margen derecho. */
  .ff-taller-layout { grid-template-columns: minmax(0, 1fr); }
  .ff-taller-sidebar { position: static; }
  /* En una sola columna, el precio/CTA va primero (antes de Tematicas, FAQ y Precios) para que no quede enterrado al final */
  .ff-taller-content { order: 2; }
  .ff-taller-sidebar { order: 1; margin-bottom: 40px; }
}

/* ---------- Tabla de precios comparativa (single-taller.php) ---------- */
/* Vive dentro de .ff-taller-content (misma columna que Tematicas/FAQ), no en su propio .ff-container: asi el sidebar sticky abarca toda la pagina */
.ff-pricing { scroll-margin-top: 160px; /* header (108px) + breadcrumb: que el titulo no quede tapado al saltar desde la etiqueta de precio */ }
.ff-pricing h2 { font-size: var(--ff-fs-h3); margin-bottom: 36px; text-align: left; }
.ff-pricing__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 28px;
  align-items: stretch;
  padding-inline: 22px;
}
.ff-pricing__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--ff-white);
  border-radius: 20px;
  padding: 38px 28px 30px;
  color: var(--ff-navy);
  /* Sombra muy chica y sin difuminado: se ve como un stroke fino, no como una sombra flotante */
  box-shadow: 0 0 0 1.5px rgba(21, 55, 83, 0.14);
  transition: box-shadow var(--ff-transition);
}
.ff-pricing__card.is-featured { box-shadow: 0 0 0 1.5px var(--ff-accent); }
.ff-pricing__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ff-accent);
  color: var(--ff-white);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 18px;
  border-radius: 999px;
  white-space: nowrap;
}
.ff-pricing__card h3 { font-size: var(--ff-fs-h5); color: var(--ff-primary); margin-bottom: 8px; }
.ff-pricing__price {
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: var(--ff-fs-h3);
  color: var(--ff-accent);
  margin-bottom: 26px;
}
.ff-pricing__features { margin-bottom: 30px; flex-grow: 1; }
/* Dentro de la tarjeta de precio el check vuelve a ir en linea (no colgado, como en Tematicas) */
.ff-pricing__features li { position: static; display: flex; align-items: flex-start; gap: 10px; }
.ff-pricing__features .ff-icon-check { position: static; width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: var(--ff-accent); }
.ff-pricing__features li span { color: var(--ff-navy); }
.ff-pricing__card .ff-btn { margin-top: auto; }

/* ---------- FAQ: acordeon (single-taller.php y single-servicio.php) ---------- */
/* Vive dentro de .ff-taller-content (misma columna que el resto), no en su propio .ff-container: asi el sidebar sticky abarca toda la pagina */
.ff-faq-section h2 { font-size: var(--ff-fs-h3); margin-bottom: 24px; }
.ff-faq { display: flex; flex-direction: column; }
.ff-faq__item { border-bottom: 1px solid rgba(21, 55, 83, 0.14); }
.ff-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 22px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ff-navy);
}
.ff-faq__question:hover .ff-faq__q-text,
.ff-faq__question:focus-visible .ff-faq__q-text { color: var(--ff-accent); }
.ff-faq__icon {
  position: relative;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--ff-accent);
  transition: background-color var(--ff-transition);
}
.ff-faq__icon::before,
.ff-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--ff-accent);
  transform: translate(-50%, -50%);
  transition: transform 0.3s var(--ff-ease-out), opacity 0.3s var(--ff-ease-out);
}
.ff-faq__icon::before { width: 11px; height: 1.6px; }
.ff-faq__icon::after { width: 1.6px; height: 11px; }
.ff-faq__item.is-open .ff-faq__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; }
.ff-faq__item.is-open .ff-faq__icon { background: var(--ff-accent); }
.ff-faq__item.is-open .ff-faq__icon::before,
.ff-faq__item.is-open .ff-faq__icon::after { background: var(--ff-white); }
.ff-faq__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s var(--ff-ease-out);
}
.ff-faq__panel-inner { overflow: hidden; }
.ff-faq__panel-inner p { padding-bottom: 24px; max-width: 680px; color: var(--ff-navy); }
.ff-faq__item.is-open .ff-faq__panel { grid-template-rows: 1fr; }

/* ==========================================================================
   ANALISIS (CPT) — single-analisis.php, archive-analisis.php,
   taxonomy-analisis_categoria.php, taxonomy-analisis_etiqueta.php
   ========================================================================== */

/* ---------- single-analisis.php: hero ---------- */
.ff-analisis-hero__category {
  display: inline-block;
  transition: color var(--ff-transition);
}
.ff-analisis-hero__category:hover { color: var(--ff-accent); }
.ff-analisis-hero__meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  margin: 14px 0 0;
}
.ff-analisis-hero__meta-sep { margin: 0 8px; opacity: 0.6; }

/* Imagen destacada DENTRO del banner, de fondo, con opacidad (tinte del color de marca
   encima, sin blur — a diferencia del hero de Taller/Servicio, aca conviene que la foto/logo
   se distinga, no que se vuelva abstracta) para que el texto siga siendo legible encima. */
.ff-analisis-hero.ff-taller-hero { padding-block: 72px 56px; }
/* Blur suave (menos que el de Taller/Servicio, que la foto/logo siga distinguiendose de fondo)
   para que el titulo no se pierda contra imagenes con mucho detalle/texto propio, + mas opacidad
   de tinte para reforzar el contraste. */
.ff-analisis-hero .ff-taller-hero__bg { filter: blur(10px); transform: scale(1.08); }
.ff-analisis-hero .ff-taller-hero__bg::after { opacity: 0.85; }

/* ---------- layout de 2 columnas: contenido + sidebar sticky (indice + contacto) ----------
   Todo el contenido "de lectura" (texto, graficas, galeria, botones, tags) vive DENTRO de la
   misma columna/grid que el sidebar (nunca en secciones .ff-container separadas afuera), para
   que el sidebar sticky tenga alto de sobra para acompañar el scroll — mismo criterio que
   .ff-taller-layout en single-taller.php. */
.ff-analisis-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  padding-block: 48px 0;
}
.ff-analisis-main > * + * { margin-top: 44px; }

/* ---------- columna de lectura: mas angosta que el resto de secciones (mejora la legibilidad
   de articulos largos) pero SIN centrar — pegada al mismo margen izquierdo que el titulo del
   hero y el resto de la pagina, para que no se vea descuadrada. */
.ff-analisis-content > * { max-width: 100%; }
.ff-analisis-content > *:first-child { margin-top: 0; }
.ff-analisis-content h2 { font-size: var(--ff-fs-h3); margin-top: 1.4em; scroll-margin-top: 160px; }
.ff-analisis-content h3 { font-size: var(--ff-fs-h4); margin-top: 1.2em; scroll-margin-top: 160px; }
.ff-analisis-content p { font-size: 1.0625rem; line-height: 1.75; }
.ff-analisis-content img { border-radius: 14px; }
.ff-analisis-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ff-accent);
  font-style: italic;
  color: var(--ff-primary);
}

/* ---------- sidebar sticky: indice del articulo + contacto ---------- */
.ff-analisis-sidebar { position: sticky; top: 128px; }
.ff-analisis-sidebar__card {
  background: var(--ff-white);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.16);
}
.ff-analisis-sidebar__title {
  font-family: var(--ff-font-body);
  color: var(--ff-primary);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.ff-analisis-toc {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(21, 55, 83, 0.12);
}
.ff-analisis-toc a {
  color: var(--ff-navy);
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(21, 55, 83, 0.14);
  transition: color var(--ff-transition), border-color var(--ff-transition);
}
.ff-analisis-toc a:hover { color: var(--ff-accent); border-color: var(--ff-accent); }

/* "Recomendados"/relacionados dentro del sidebar: lista compacta (miniatura + titulo), no la card grande del archivo */
.ff-analisis-sidebar__related {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(21, 55, 83, 0.12);
}
.ff-analisis-sidebar__related-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ff-analisis-sidebar__related-media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ff-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-analisis-sidebar__related-media img { width: 100%; height: 100%; object-fit: cover; }
.ff-analisis-sidebar__related-media img[src*="solo_F_"] { width: 22px; height: auto; opacity: 0.4; }
.ff-analisis-sidebar__related-title {
  color: var(--ff-navy);
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  transition: color var(--ff-transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ff-analisis-sidebar__related-item:hover .ff-analisis-sidebar__related-title { color: var(--ff-accent); }

.ff-analisis-sidebar__contact p { color: var(--ff-navy); font-size: 0.875rem; line-height: 1.5; margin-bottom: 16px; }
.ff-analisis-sidebar__contact .ff-btn + .ff-btn { margin-top: 10px; }

/* ---------- graficas de TradingView ---------- */
.ff-analisis-charts h2 { font-size: var(--ff-fs-h3); margin-bottom: 24px; }
.ff-analisis-charts__list { display: flex; flex-direction: column; gap: 40px; }
.ff-analisis-chart h3 { font-size: var(--ff-fs-h5); color: var(--ff-primary); margin-bottom: 14px; }
.ff-analisis-chart__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
}
.ff-analisis-chart__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- botones de enlace ---------- */
.ff-analisis-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

/* Galeria: reusa .ff-gallery de Servicio tal cual, solo se le quita el padding pensado
   para cuando era una seccion .ff-container propia (aca vive dentro de .ff-analisis-main) */
.ff-analisis-main .ff-gallery { padding-block: 0; }

/* ---------- etiquetas ---------- */
.ff-analisis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ff-analisis-tags__pill {
  padding: 7px 16px;
  border-radius: var(--ff-radius-pill);
  background: rgba(21, 55, 83, 0.06);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  transition: background-color var(--ff-transition), color var(--ff-transition);
}
.ff-analisis-tags__pill:hover { background: var(--ff-accent); color: var(--ff-white); }

/* ---------- CTA de contacto: a todo el ancho de pantalla, se une directo con el footer (sin margen/gap abajo) ---------- */
.ff-analisis-contact {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 50%, var(--ff-secondary) 0%, var(--ff-primary) 68%);
  padding-block: 96px;
  margin-top: 72px;
  margin-bottom: 0;
}
.ff-analisis-contact__constellation {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.ff-analisis-contact__inner {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.ff-analisis-contact__inner h2 { color: var(--ff-white); margin-bottom: 6px; font-size: var(--ff-fs-h4); }
.ff-analisis-contact__inner p { color: rgba(255, 255, 255, 0.75); margin: 0; }
.ff-analisis-contact__actions { display: flex; flex-wrap: wrap; gap: 16px; flex-shrink: 0; }
.ff-analisis-contact .ff-btn--b { background: transparent; color: var(--ff-white); border-color: rgba(255, 255, 255, 0.55); flex-shrink: 0; }
.ff-analisis-contact .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-analisis-contact .ff-btn--b:hover,
.ff-analisis-contact .ff-btn--b:focus-visible { background: transparent; color: var(--ff-accent); border-color: var(--ff-accent); }
.ff-analisis-contact .ff-btn--b:hover .ff-btn__arrow,
.ff-analisis-contact .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }


/* ---------- tarjeta de articulo (archivo): imagen a la izquierda, contenido a la derecha ---------- */
.ff-analisis-card {
  display: flex;
  align-items: stretch;
  background: var(--ff-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-analisis-card:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: translateY(-4px);
}
.ff-analisis-card__media { position: relative; flex: 0 0 50%; overflow: hidden; background: var(--ff-primary); }
.ff-analisis-card__media-link { display: block; width: 100%; height: 100%; }
.ff-analisis-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ff-ease-out); }
.ff-analisis-card:hover .ff-analisis-card__media img { transform: scale(1.06); }
.ff-analisis-card__media-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-analisis-card__media-fallback img { width: 48px; height: auto; max-width: none; opacity: 0.35; }
/* Badge de categoria: link propio (no anidado dentro del link de la imagen) que va al archivo de esa categoria */
.ff-analisis-card__badge {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  padding: 6px 14px;
  border-radius: var(--ff-radius-pill);
  background: rgba(61, 22, 53, 0.85);
  color: var(--ff-white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  transition: background-color var(--ff-transition);
}
.ff-analisis-card__badge:hover { background: var(--ff-accent); color: var(--ff-white); }
.ff-analisis-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.ff-analisis-card__date { color: var(--ff-navy); opacity: 0.55; font-size: 0.8125rem; margin-bottom: 8px; }
.ff-analisis-card__body h3 { font-size: var(--ff-fs-h5); color: var(--ff-primary); margin-bottom: 10px; line-height: 1.25; }
.ff-analisis-card__body h3 a { color: inherit; }
.ff-analisis-card__body h3 a:hover { color: var(--ff-accent); }
.ff-analisis-card__excerpt { flex-grow: 1; color: var(--ff-navy); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 18px; }
.ff-analisis-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ff-analisis-card__link svg { width: 14px; height: 14px; color: var(--ff-accent); transition: transform var(--ff-transition); }
.ff-analisis-card__link:hover svg { transform: translateX(6px); }

/* ---------- archive-analisis.php / taxonomy-analisis_*.php ---------- */
.ff-analisis-archive { padding-block: 56px 100px; }
.ff-analisis-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ff-analisis-filter__pill {
  padding: 9px 20px;
  border-radius: var(--ff-radius-pill);
  box-shadow: 0 0 0 1px rgba(21, 55, 83, 0.16);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  font-weight: 500;
  transition: background-color var(--ff-transition), color var(--ff-transition), box-shadow var(--ff-transition);
}
.ff-analisis-filter__pill:hover { box-shadow: 0 0 0 1px var(--ff-accent); color: var(--ff-accent); }
.ff-analisis-filter__pill.is-active { background: var(--ff-primary); color: var(--ff-white); box-shadow: 0 0 0 1px var(--ff-primary); }
.ff-analisis-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.ff-analisis-archive__empty { color: var(--ff-navy); }

/* Filtro por fetch(): fundido de salida mientras carga el resultado nuevo, y entrada
   escalonada de las cards cuando llega (ver bloque "Filtro de Analisis" en main.js) */
#ff-analisis-results { transition: opacity 0.2s ease; }
#ff-analisis-results.is-loading { opacity: 0; }
#ff-analisis-results .ff-analisis-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s var(--ff-ease-out), transform 0.45s var(--ff-ease-out);
}
#ff-analisis-results.is-entering .ff-analisis-card { opacity: 0; transform: translateY(18px); }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(1) { transition-delay: 0s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(2) { transition-delay: 0.05s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(3) { transition-delay: 0.1s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(4) { transition-delay: 0.15s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(5) { transition-delay: 0.2s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(6) { transition-delay: 0.25s; }
#ff-analisis-results .ff-analisis-archive__grid .ff-analisis-card:nth-child(n+7) { transition-delay: 0.3s; }

.ff-analisis-pagination { margin-top: 56px; display: flex; justify-content: center; }
.ff-analisis-pagination .nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ff-analisis-pagination a,
.ff-analisis-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border-radius: var(--ff-radius-pill);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  font-weight: 500;
}
.ff-analisis-pagination a { box-shadow: 0 0 0 1px rgba(21, 55, 83, 0.16); transition: background-color var(--ff-transition), color var(--ff-transition), box-shadow var(--ff-transition); }
.ff-analisis-pagination a:hover { box-shadow: 0 0 0 1px var(--ff-accent); color: var(--ff-accent); }
.ff-analisis-pagination .current { background: var(--ff-primary); color: var(--ff-white); }

@media (max-width: 900px) {
  .ff-analisis-archive__grid { grid-template-columns: 1fr; }
  .ff-analisis-contact { padding-block: 64px; margin-top: 48px; }

  .ff-analisis-layout { grid-template-columns: minmax(0, 1fr); padding-block: 32px 0; }
  .ff-analisis-sidebar { position: static; order: 1; margin-bottom: 36px; }
  .ff-analisis-main { order: 2; }
}

@media (max-width: 640px) {
  .ff-analisis-card { flex-direction: column; }
  .ff-analisis-card__media { flex-basis: auto; aspect-ratio: 4 / 3; }
  .ff-analisis-hero.ff-taller-hero { padding-block: 48px 36px; }
  .ff-analisis-contact { padding-block: 56px; }
  .ff-analisis-contact__inner { flex-direction: column; align-items: flex-start; }
  .ff-analisis-charts__list { gap: 28px; }
  .ff-analisis-main > * + * { margin-top: 32px; }
}

/* ==========================================================================
   12. UTILIDADES / RESPONSIVE HELPERS
   ========================================================================== */
@media (max-width: 991px) {
  .ff-header__row { gap: 14px; }
  .ff-search { right: 12px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #ff-analisis-results,
  #ff-analisis-results .ff-analisis-card { transition: none; }
  #ff-articulos-results,
  #ff-articulos-results .ff-articulo-card { transition: none; }
  .ff-nav__list > li > a { transition: color var(--ff-transition); }
  .ff-nav__list > li > a::before,
  .ff-nav__list > li > a::after { transition: opacity 0.2s ease; }
  .ff-nav__list .sub-menu li a { transition: color var(--ff-transition); }
  .ff-nav__list .sub-menu li a::before { transition: opacity 0.2s ease; }
  .ff-nav__list .sub-menu { transition: opacity 0.2s ease, visibility 0.2s ease; }
}

/* ==========================================================================
   ARTICULOS (post nativo) — single.php, home.php, category.php.
   Separado a proposito de la seccion ANALISIS (CPT) de arriba: partio del
   mismo markup/CSS pero ahora son clases independientes (.ff-articulo-*
   / .ff-articulos-*) para poder darle un toque visual propio sin afectar
   a Analisis. Toque distinto actual: badge de categoria en color acento
   (naranja) en vez del vino oscuro de Analisis, y borde del sello de
   sidebar/cards ligeramente redondeado distinto — ver comentarios puntuales.
   ========================================================================== */

/* ---------- single.php: hero ---------- */
.ff-articulo-hero__category {
  display: inline-block;
  transition: color var(--ff-transition);
}
.ff-articulo-hero__category:hover { color: var(--ff-accent); }
.ff-articulo-hero__meta {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.9375rem;
  margin: 14px 0 0;
}
.ff-articulo-hero__meta-sep { margin: 0 8px; opacity: 0.6; }

.ff-articulo-hero.ff-taller-hero { padding-block: 72px 56px; }
.ff-articulo-hero .ff-taller-hero__bg { filter: blur(10px); transform: scale(1.08); }
.ff-articulo-hero .ff-taller-hero__bg::after { opacity: 0.85; }

/* ---------- layout de 2 columnas: contenido + sidebar sticky (indice + contacto) ---------- */
.ff-articulo-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 56px;
  align-items: start;
  padding-block: 48px 0;
}
.ff-articulo-main > * + * { margin-top: 44px; }

.ff-articulo-content > * { max-width: 100%; }
.ff-articulo-content > *:first-child { margin-top: 0; }
.ff-articulo-content h2 { font-size: var(--ff-fs-h3); margin-top: 1.4em; scroll-margin-top: 160px; }
.ff-articulo-content h3 { font-size: var(--ff-fs-h4); margin-top: 1.2em; scroll-margin-top: 160px; }
.ff-articulo-content p { font-size: 1.0625rem; line-height: 1.75; }
.ff-articulo-content img { border-radius: 14px; }
.ff-articulo-content blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--ff-accent);
  font-style: italic;
  color: var(--ff-primary);
}

/* ---------- sidebar sticky: indice del articulo + contacto ---------- */
.ff-articulo-sidebar { position: sticky; top: 128px; }
.ff-articulo-sidebar__card {
  background: var(--ff-white);
  border-radius: 20px;
  padding: 28px 26px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.16);
}
.ff-articulo-sidebar__title {
  font-family: var(--ff-font-body);
  color: var(--ff-primary);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 16px;
}
.ff-articulo-toc {
  display: flex;
  flex-direction: column;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(21, 55, 83, 0.12);
}
.ff-articulo-toc a {
  color: var(--ff-navy);
  font-size: 0.9375rem;
  line-height: 1.4;
  padding: 8px 0 8px 14px;
  border-left: 2px solid rgba(21, 55, 83, 0.14);
  transition: color var(--ff-transition), border-color var(--ff-transition);
}
.ff-articulo-toc a:hover { color: var(--ff-accent); border-color: var(--ff-accent); }

.ff-articulo-sidebar__related {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(21, 55, 83, 0.12);
}
.ff-articulo-sidebar__related-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ff-articulo-sidebar__related-media {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ff-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ff-articulo-sidebar__related-media img { width: 100%; height: 100%; object-fit: cover; }
.ff-articulo-sidebar__related-media img[src*="solo_F_"] { width: 22px; height: auto; opacity: 0.4; }
.ff-articulo-sidebar__related-title {
  color: var(--ff-navy);
  font-size: 0.875rem;
  line-height: 1.35;
  font-weight: 500;
  transition: color var(--ff-transition);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ff-articulo-sidebar__related-item:hover .ff-articulo-sidebar__related-title { color: var(--ff-accent); }

.ff-articulo-sidebar__contact p { color: var(--ff-navy); font-size: 0.875rem; line-height: 1.5; margin-bottom: 16px; }

/* ---------- etiquetas ---------- */
.ff-articulo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ff-articulo-tags__pill {
  padding: 7px 16px;
  border-radius: var(--ff-radius-pill);
  background: rgba(21, 55, 83, 0.06);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  transition: background-color var(--ff-transition), color var(--ff-transition);
}
.ff-articulo-tags__pill:hover { background: var(--ff-accent); color: var(--ff-white); }


/* ---------- tarjeta de articulo (archivo): imagen a la izquierda, contenido a la derecha ---------- */
.ff-articulo-card {
  display: flex;
  align-items: stretch;
  background: var(--ff-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-articulo-card:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: translateY(-4px);
}
.ff-articulo-card__media { position: relative; flex: 0 0 33.333%; overflow: hidden; background: var(--ff-primary); }
.ff-articulo-card__media-link { display: block; width: 100%; height: 100%; }
.ff-articulo-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ff-ease-out); }
.ff-articulo-card:hover .ff-articulo-card__media img { transform: scale(1.06); }
.ff-articulo-card__media-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-articulo-card__media-fallback img { width: 48px; height: auto; max-width: none; opacity: 0.35; }
/* Badge de categoria: naranja/acento (distinto del vino de Analisis) */
.ff-articulo-card__badge {
  position: absolute;
  z-index: 2;
  top: 16px; left: 16px;
  padding: 6px 14px;
  border-radius: var(--ff-radius-pill);
  background: var(--ff-accent);
  color: var(--ff-white);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  backdrop-filter: blur(4px);
  transition: background-color var(--ff-transition);
}
.ff-articulo-card__badge:hover { background: var(--ff-primary); color: var(--ff-white); }
.ff-articulo-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 22px 24px; }
.ff-articulo-card__date { color: var(--ff-navy); opacity: 0.55; font-size: 0.8125rem; margin-bottom: 8px; }
.ff-articulo-card__body h3 { font-size: var(--ff-fs-h5); color: var(--ff-primary); margin-bottom: 10px; line-height: 1.25; }
.ff-articulo-card__body h3 a { color: inherit; }
.ff-articulo-card__body h3 a:hover { color: var(--ff-accent); }
.ff-articulo-card__excerpt { flex-grow: 1; color: var(--ff-navy); font-size: 0.9375rem; line-height: 1.6; margin-bottom: 18px; }
.ff-articulo-card__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ff-articulo-card__link svg { width: 14px; height: 14px; color: var(--ff-accent); transition: transform var(--ff-transition); }
.ff-articulo-card__link:hover svg { transform: translateX(6px); }

/* ---------- card destacada: el post mas reciente (pagina 1), a todo el ancho del grid,
   con la proporcion de imagen/contenido invertida (2/3 imagen, 1/3 contenido) respecto
   a la card normal, y badge fijo "Último artículo" en vez de la categoria. ---------- */
.ff-articulo-card--featured { grid-column: 1 / -1; }
.ff-articulo-card__badge--featured { background: var(--ff-primary); cursor: default; }
@media (min-width: 641px) {
  .ff-articulo-card--featured { min-height: 440px; }
  .ff-articulo-card--featured .ff-articulo-card__media { flex: 0 0 66.667%; }
  .ff-articulo-card--featured .ff-articulo-card__body { flex: 0 0 33.333%; justify-content: center; }
  .ff-articulo-card--featured .ff-articulo-card__body h3 { font-size: var(--ff-fs-h3); }
  .ff-articulo-card--featured .ff-articulo-card__excerpt { flex-grow: 0; }
}

/* ---------- home.php / category.php ---------- */
.ff-articulos-archive { padding-block: 56px 100px; }
.ff-articulos-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 40px; }
.ff-articulos-filter__pill {
  padding: 9px 20px;
  border-radius: var(--ff-radius-pill);
  box-shadow: 0 0 0 1px rgba(21, 55, 83, 0.16);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  font-weight: 500;
  transition: background-color var(--ff-transition), color var(--ff-transition), box-shadow var(--ff-transition);
}
.ff-articulos-filter__pill:hover { box-shadow: 0 0 0 1px var(--ff-accent); color: var(--ff-accent); }
.ff-articulos-filter__pill.is-active { background: var(--ff-accent); color: var(--ff-white); box-shadow: 0 0 0 1px var(--ff-accent); }
.ff-articulos-archive__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.ff-articulos-archive__empty { color: var(--ff-navy); }

#ff-articulos-results { transition: opacity 0.2s ease; }
#ff-articulos-results.is-loading { opacity: 0; }
#ff-articulos-results .ff-articulo-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.45s var(--ff-ease-out), transform 0.45s var(--ff-ease-out);
}
#ff-articulos-results.is-entering .ff-articulo-card { opacity: 0; transform: translateY(18px); }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(1) { transition-delay: 0s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(2) { transition-delay: 0.05s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(3) { transition-delay: 0.1s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(4) { transition-delay: 0.15s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(5) { transition-delay: 0.2s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(6) { transition-delay: 0.25s; }
#ff-articulos-results .ff-articulos-archive__grid .ff-articulo-card:nth-child(n+7) { transition-delay: 0.3s; }

.ff-articulos-pagination { margin-top: 56px; display: flex; justify-content: center; }
.ff-articulos-pagination .nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ff-articulos-pagination a,
.ff-articulos-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border-radius: var(--ff-radius-pill);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  font-weight: 500;
}
.ff-articulos-pagination a { box-shadow: 0 0 0 1px rgba(21, 55, 83, 0.16); transition: background-color var(--ff-transition), color var(--ff-transition), box-shadow var(--ff-transition); }
.ff-articulos-pagination a:hover { box-shadow: 0 0 0 1px var(--ff-accent); color: var(--ff-accent); }
.ff-articulos-pagination .current { background: var(--ff-accent); color: var(--ff-white); }

@media (max-width: 900px) {
  .ff-articulos-archive__grid { grid-template-columns: 1fr; }

  .ff-articulo-layout { grid-template-columns: minmax(0, 1fr); padding-block: 32px 0; }
  .ff-articulo-sidebar { position: static; order: 1; margin-bottom: 36px; }
  .ff-articulo-main { order: 2; }
}

@media (max-width: 640px) {
  .ff-articulo-card { flex-direction: column; }
  .ff-articulo-card__media { flex-basis: auto; aspect-ratio: 4 / 3; }
  .ff-articulo-hero.ff-taller-hero { padding-block: 48px 36px; }
  .ff-articulo-main > * + * { margin-top: 32px; }
}

/* ==========================================================================
   BUSCADOR (search.php) — lista de texto simple tipo buscador estandar,
   a proposito SIN cards/imagenes como el resto del sitio (pedido explicito
   del usuario: "que no parezca otra pagina de post"). Clases propias
   .ff-search-page / .ff-search-result, sin relacion con .ff-search del
   panel desplegable del header (header.php/main.js), que es un componente
   distinto (el input flotante que abre la lupa).
   ========================================================================== */

.ff-search-page { padding-block: 88px 100px; max-width: 760px; }

/* Mismo patron que .ff-search__form del panel del header (header.php): input y
 * boton pegados sin gap, cada uno redondeado solo en su borde exterior (pill 0 0
 * pill / 0 pill pill 0) para que se vean como un unico cuerpo con una costura al
 * medio, y el boton estirado por altura (padding-block:0 + align-items:stretch)
 * para que mida exactamente lo mismo que el input, nunca mas chico/grande. */
.ff-search-page__form { display: flex; gap: 0; }
.ff-search-page__input {
  flex: 1;
  min-width: 0;
  border: 0.5px solid rgba(21, 55, 83, 0.3);
  border-right: none;
  border-radius: var(--ff-radius-pill) 0 0 var(--ff-radius-pill);
  padding: 14px 22px;
  background: transparent;
  font-family: var(--ff-font-body);
  font-size: 0.9375rem;
  color: var(--ff-navy);
}
.ff-search-page__input:focus { outline: none; }
.ff-search-page__input::placeholder { color: rgba(21, 55, 83, 0.45); }
.ff-search-page__submit {
  border: none;
  border-radius: 0 var(--ff-radius-pill) var(--ff-radius-pill) 0;
  padding: 0 26px;
  background: var(--ff-primary);
  color: var(--ff-white);
  font-family: var(--ff-font-body);
  font-weight: 400;
  text-transform: uppercase;
  font-size: var(--ff-fs-small);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color var(--ff-transition);
}
.ff-search-page__submit img { width: 20px; height: 20px; flex-shrink: 0; }
.ff-search-page__submit:hover { background: var(--ff-accent); }

.ff-search-page__count { margin-top: 20px; color: var(--ff-navy); opacity: 0.6; font-size: 0.875rem; }

.ff-search-page__list { margin-top: 12px; }

.ff-search-result { padding-block: 26px; border-bottom: 1px solid rgba(21, 55, 83, 0.1); }
.ff-search-result:first-child { padding-top: 0; }

.ff-search-result__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  font-size: 0.8125rem;
}
.ff-search-result__type {
  color: var(--ff-accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ff-search-result__breadcrumb { color: var(--ff-navy); opacity: 0.55; }
.ff-search-result__breadcrumb::before { content: '·'; margin-right: 10px; }

.ff-search-result__title { font-size: var(--ff-fs-h4); margin-bottom: 6px; }
.ff-search-result__title a { color: var(--ff-primary); transition: color var(--ff-transition); }
.ff-search-result__title a:hover { color: var(--ff-accent); }

.ff-search-result__excerpt { color: var(--ff-navy); opacity: 0.8; font-size: 0.9375rem; line-height: 1.6; margin: 0; }
.ff-search-result__excerpt strong { color: var(--ff-primary); font-weight: 700; }

.ff-search-page__empty { margin-top: 12px; color: var(--ff-navy); }
.ff-search-page__empty-links { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 14px; }
.ff-search-page__empty-links a {
  color: var(--ff-accent);
  font-weight: 600;
  font-size: 0.9375rem;
  border-bottom: 1px solid transparent;
  transition: border-color var(--ff-transition);
}
.ff-search-page__empty-links a:hover { border-color: var(--ff-accent); }

.ff-search-pagination { margin-top: 40px; display: flex; justify-content: center; }
.ff-search-pagination .nav-links { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ff-search-pagination a,
.ff-search-pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding-inline: 12px;
  border-radius: var(--ff-radius-pill);
  color: var(--ff-navy);
  font-size: var(--ff-fs-small);
  font-weight: 500;
}
.ff-search-pagination a { box-shadow: 0 0 0 1px rgba(21, 55, 83, 0.16); transition: background-color var(--ff-transition), color var(--ff-transition), box-shadow var(--ff-transition); }
.ff-search-pagination a:hover { box-shadow: 0 0 0 1px var(--ff-accent); color: var(--ff-accent); }
.ff-search-pagination .current { background: var(--ff-primary); color: var(--ff-white); }

@media (max-width: 640px) {
  .ff-search-result__meta { flex-wrap: wrap; row-gap: 2px; }
}

/* ==========================================================================
   404 (404.php). UN solo cuerpo con fondo degradado oscuro (mismo gradiente
   que las secciones de contacto de Analisis/Articulos) y la constelacion de
   particulas de fondo (initConstellation() en main.js) detras de TODO el
   contenido -- numero, accesos rapidos y buscador -- sin bloques en blanco
   aparte (pedido explicito del usuario, "todo un mismo cuerpo").
   ========================================================================== */
.ff-404-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 15% 50%, var(--ff-secondary) 0%, var(--ff-primary) 68%);
  padding-block: 140px 120px;
  text-align: center;
}
.ff-404-hero__constellation { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block; }
.ff-404-hero__inner { position: relative; z-index: 2; max-width: 640px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; }
.ff-404-hero__code {
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: clamp(8rem, 6rem + 10vw, 13rem);
  line-height: 1;
  color: var(--ff-white);
  margin-bottom: 4px;
}
.ff-404-hero__inner h1 {
  color: var(--ff-white);
  font-size: var(--ff-fs-h5);
  font-weight: 600;
  margin-bottom: 12px;
}
.ff-404-hero__text { color: rgba(255, 255, 255, 0.75); margin-bottom: 0; }

.ff-404-hero__links { margin-top: 48px; }
.ff-404-hero__links-label { color: rgba(255, 255, 255, 0.55); font-size: var(--ff-fs-small); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px; }
.ff-404-hero__links-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; }
.ff-404-hero__links-list a {
  color: var(--ff-white);
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid transparent;
  transition: color var(--ff-transition), border-color var(--ff-transition);
}
.ff-404-hero__links-list a:hover { color: var(--ff-accent); border-color: var(--ff-accent); }

.ff-404-hero__search { margin-top: 48px; width: 100%; }
.ff-404-hero__search-label { color: var(--ff-white); font-size: 1.0625rem; font-weight: 600; margin-bottom: 18px; }
.ff-404-hero__search .ff-search__form { max-width: 480px; margin-inline: auto; }

@media (max-width: 640px) {
  .ff-404-hero { padding-block: 100px 80px; }
  .ff-404-hero__links,
  .ff-404-hero__search { margin-top: 36px; }
}

/* ---------- Glitch en loop: numero 404 + titulo + subtitulo (.ff-glitch) ----------
   La rafaga vive AL INICIO de cada ciclo (0%-12%) en vez de cerca del final, para
   que se dispare de entrada apenas carga la pagina (la animacion arranca a tocar
   el keyframe 0% inmediatamente) y se repita cada 5s. Rafaga mas marcada que la
   version anterior: opacidad casi solida, offsets mas grandes (hasta 8px) y un
   flicker de opacidad en el texto real ademas del desfase de color cian/naranja +
   rebanadas con clip-path. Saltos abruptos (steps(1), sin easing: un glitch
   suavizado no lee como glitch). Los 3 elementos arrancan con un pequeno delay
   entre si para que el corte se sienta como una "ola", no un parpadeo sincronizado.
   content:attr(data-text) duplica el texto real en los pseudo-elementos. */
.ff-glitch { position: relative; }
.ff-glitch::before,
.ff-glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ff-glitch::before { color: #4bd8ff; }
.ff-glitch::after { color: var(--ff-accent); }

@media (prefers-reduced-motion: no-preference) {
  .ff-glitch::before { animation: ff-glitch-a 5s steps(1) infinite; }
  .ff-glitch::after { animation: ff-glitch-b 5s steps(1) infinite; }
  .ff-glitch { animation: ff-glitch-jitter 5s steps(1) infinite; }

  h1.ff-glitch, h1.ff-glitch::before, h1.ff-glitch::after { animation-delay: 0.12s; }
  .ff-404-hero__text.ff-glitch, .ff-404-hero__text.ff-glitch::before, .ff-404-hero__text.ff-glitch::after { animation-delay: 0.24s; }
}

@keyframes ff-glitch-a {
  0% { opacity: 0.95; transform: translate(-7px, 2px); clip-path: inset(8% 0 55% 0); }
  4% { opacity: 0.95; transform: translate(6px, -2px); clip-path: inset(58% 0 8% 0); }
  8% { opacity: 0.95; transform: translate(-5px, 2px); clip-path: inset(28% 0 42% 0); }
  12%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes ff-glitch-b {
  0% { opacity: 0.95; transform: translate(7px, -2px); clip-path: inset(45% 0 20% 0); }
  4.5% { opacity: 0.95; transform: translate(-6px, 2px); clip-path: inset(15% 0 60% 0); }
  8.5% { opacity: 0.95; transform: translate(5px, -2px); clip-path: inset(50% 0 15% 0); }
  12.5%, 100% { opacity: 0; transform: translate(0, 0); clip-path: inset(0 0 0 0); }
}
@keyframes ff-glitch-jitter {
  0% { transform: translate(4px, 0); opacity: 0.8; }
  2% { transform: translate(4px, 0); opacity: 1; }
  4% { transform: translate(-4px, 0); opacity: 0.8; }
  6% { transform: translate(-4px, 0); opacity: 1; }
  8% { transform: translate(3px, 0); opacity: 0.85; }
  12%, 100% { transform: translate(0, 0); opacity: 1; }
}

/* ==========================================================================
   CONTACTO (template-contacto.php) — 2 cards grandes, sin formulario.
   ========================================================================== */
.ff-contacto { padding-block: 56px 100px; }
.ff-contacto__intro {
  max-width: 620px;
  font-size: 1.0625rem;
  line-height: 1.7;
  margin-bottom: 56px;
}

.ff-contacto__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.ff-contacto-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: var(--ff-white);
  border-radius: 20px;
  padding: 48px 32px 0;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.16);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-contacto-card:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: translateY(-4px);
}

.ff-contacto-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  margin-bottom: 24px;
  transition: transform var(--ff-transition);
}
.ff-contacto-card__icon img { width: 112px; height: 112px; }
.ff-contacto-card:hover .ff-contacto-card__icon { transform: scale(1.06); }

.ff-contacto-card--whatsapp .ff-contacto-card__icon { background: #25d366; }
.ff-contacto-card--telegram .ff-contacto-card__icon { background: #2cb5e5; }

.ff-contacto-card h3 { font-size: var(--ff-fs-h4); color: var(--ff-primary); margin-bottom: 6px; }
.ff-contacto-card p { color: var(--ff-navy); opacity: 0.7; margin-bottom: 24px; }

.ff-contacto-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding-block: 20px;
  border-top: 1px solid rgba(21, 55, 83, 0.1);
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-weight: 600;
  font-size: var(--ff-fs-small);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ff-contacto-card__cta svg { width: 14px; height: 14px; color: var(--ff-accent); transition: transform var(--ff-transition); }
.ff-contacto-card:hover .ff-contacto-card__cta svg { transform: translateX(6px); }

@media (max-width: 768px) {
  .ff-contacto__grid { grid-template-columns: 1fr; }
}

/* ---------- Auditoria de Cuentas (copy trading): chart embebido de FX Blue +
   card de estadisticas de RoboForex (esa pagina no se puede embeber limpio,
   es un sitio completo con su propio header/footer, asi que se muestran los
   numeros reales tal como figuran ahi + link "ver en vivo" para el detalle). ---------- */
.ff-contacto-audit { padding-block: 0 100px; scroll-margin-top: 160px; }
.ff-contacto-audit__head { margin-bottom: 40px; }
.ff-contacto-audit__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

.ff-contacto-audit__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

.ff-contacto-audit-card {
  display: flex;
  flex-direction: column;
  background: var(--ff-white);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.16);
}
.ff-contacto-audit-card__label {
  color: var(--ff-primary);
  font-family: var(--ff-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  margin-bottom: 20px;
}
.ff-contacto-audit-card__label span { display: block; color: var(--ff-navy); opacity: 0.6; font-family: var(--ff-font-body); font-weight: 400; font-size: 0.8125rem; margin-top: 2px; }

.ff-contacto-audit-card__chart { position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; }
.ff-contacto-audit-card__chart iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.ff-contacto-audit-card__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  flex-grow: 1;
  align-content: center;
  padding-block: 16px;
}
.ff-contacto-audit-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ff-contacto-audit-stat__value { font-family: var(--ff-font-heading); font-weight: 700; font-size: var(--ff-fs-h4); color: var(--ff-primary); }
.ff-contacto-audit-stat__label { color: var(--ff-navy); opacity: 0.6; font-size: 0.8125rem; margin-top: 4px; }

@media (max-width: 768px) {
  .ff-contacto-audit__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* En una tarjeta angosta, "1145.26%" no entra en 1/3 de columna a este
     tamano de fuente y se superponia con el siguiente numero: se apilan
     en 1 columna en vez de forzar 3 numeros en una fila muy angosta. */
  .ff-contacto-audit-card__stats { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   COPY TRADING (front-page.php) — misma seccion "Auditoria de Cuentas" de
   template-contacto.php (reusa .ff-contacto-audit-card* tal cual, son las
   mismas cards), con un head eyebrow+h2+boton igual al patron de
   .ff-talleres__head/.ff-servicios__intro en vez del texto simple de Contacto.
   ========================================================================== */
.ff-copytrading { padding-block: 0 100px; }
.ff-copytrading__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
}
.ff-copytrading__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-copytrading__head-text h2 { margin-bottom: 0; }
.ff-copytrading__head .ff-btn { flex-shrink: 0; }

@media (max-width: 640px) {
  .ff-copytrading__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ---------- single.php: bloque de Servicios al final del articulo (reemplaza
   el CTA generico de WhatsApp que tenia antes, a pedido del usuario) — reusa
   .ff-servicios-archive/.ff-servicios-archive__grid/.ff-servicio-card tal
   cual (mismas clases del archivo de Servicios), solo se agrega el head. ---------- */
.ff-articulo-services__head { margin-bottom: 32px; }
.ff-articulo-services__head h2 { margin-bottom: 0; }

/* ---------- Ticker de cotizaciones (home): full-bleed, a todo el ancho de
   la ventana, no del .ff-container — mismo widget que fundedfrancisco.com
   (produccion) pero con el tema oscuro de marca (isTransparent + colorTheme
   dark en ff_ticker_tape_embed_url()). Se probo escalar el iframe con
   transform:scale() para verlo mas grande, pero se veia borroso (el texto
   se reescala como si fuera una imagen) — se volvio al tamano normal.
   El alto real de la fila del widget es ~46px (confirmado midiendo el
   documento interno del iframe): un height mayor ahi solo agrega espacio
   vacio abajo, asi que el alto del iframe/CSS tiene que coincidir con el
   height del JSON de ff_ticker_tape_embed_url(), no un numero mas grande. */
.ff-ticker { background: var(--ff-primary); overflow: hidden; line-height: 0; }
.ff-ticker iframe { display: block; width: 100%; height: 46px; border: 0; }

/* ---------- Bloque de confianza (home): "no me creas, revisalo vos mismo",
   mismo color de fondo que el ticker de arriba (continuidad visual). ---------- */
.ff-trust { background: var(--ff-primary); padding-block: 88px; position: relative; overflow: hidden; }
.ff-trust__constellation { position: absolute; inset: 0; z-index: 1; pointer-events: none; display: block; }
/* Boton outline transparente, igual que el hero (.ff-hero__cta) — el .ff-btn--b
   solido de base queda para fondos claros; en fondo oscuro cada seccion lo
   pisa asi (mismo patron que usaba .ff-analisis-contact/.ff-articulo-contact). */
.ff-trust .ff-btn--b { background: transparent; color: var(--ff-white); border-color: rgba(255, 255, 255, 0.55); }
.ff-trust .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-trust .ff-btn--b:hover,
.ff-trust .ff-btn--b:focus-visible { background: transparent; color: var(--ff-accent); border-color: var(--ff-accent); }
.ff-trust .ff-btn--b:hover .ff-btn__arrow,
.ff-trust .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }
.ff-trust__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 64px;
  align-items: start;
}

.ff-trust__main h2 { color: var(--ff-white); margin-bottom: 24px; max-width: 780px; }
.ff-trust__main p { color: rgba(255, 255, 255, 0.75); font-size: 1.0625rem; line-height: 1.7; max-width: 680px; }
.ff-trust__main p:last-of-type { margin-bottom: 32px; }

.ff-trust__credentials { display: flex; flex-direction: column; }
.ff-trust__credentials li { padding-block: 20px; border-top: 0.5px solid var(--ff-mauve); }
.ff-trust__credentials li:first-child { border-top: none; padding-top: 0; }
.ff-trust__credentials-title { color: var(--ff-white); font-family: var(--ff-font-heading); font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; }
.ff-trust__credentials-text { color: rgba(255, 255, 255, 0.65); font-size: 0.9375rem; margin-bottom: 0; }
.ff-trust__darwinex-logo { display: block; width: 234px; height: 44px; margin-top: 14px; opacity: 0.9; }

@media (max-width: 900px) {
  .ff-trust__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ff-trust { padding-block: 64px; }
}

/* ---------- Reveal al hacer scroll: entrada escalonada la primera vez que la
   seccion entra en pantalla (main.js agrega .is-visible via IntersectionObserver
   la primera vez, no se repite). El bloque de texto entra de arriba a abajo y
   despues las 3 credenciales en cascada, para que se sienta como dos "oleadas"
   en vez de un fade parejo. */
.ff-trust__main > *,
.ff-trust__credentials > li {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.ff-trust.is-visible .ff-trust__main > *,
.ff-trust.is-visible .ff-trust__credentials > li {
  opacity: 1;
  transform: translateY(0);
}
.ff-trust__main > *:nth-child(1) { transition-delay: 0s; }
.ff-trust__main > *:nth-child(2) { transition-delay: 0.08s; }
.ff-trust__main > *:nth-child(3) { transition-delay: 0.16s; }
.ff-trust__main > *:nth-child(4) { transition-delay: 0.24s; }
.ff-trust__credentials > li:nth-child(1) { transition-delay: 0.32s; }
.ff-trust__credentials > li:nth-child(2) { transition-delay: 0.42s; }
.ff-trust__credentials > li:nth-child(3) { transition-delay: 0.52s; }

@media (prefers-reduced-motion: reduce) {
  .ff-trust__main > *,
  .ff-trust__credentials > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------- Reveal al hacer scroll: CTA "Mi filosofia" (Quien Soy + home) ----------
   Entrada escalonada de los 4 hijos directos (eyebrow, h2, parrafo, botones),
   mismo patron que .ff-trust arriba. */
.ff-quien-mission__inner > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1), transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.ff-quien-mission.is-visible .ff-quien-mission__inner > * {
  opacity: 1;
  transform: translateY(0);
}
.ff-quien-mission__inner > *:nth-child(1) { transition-delay: 0s; }
.ff-quien-mission__inner > *:nth-child(2) { transition-delay: 0.1s; }
.ff-quien-mission__inner > *:nth-child(3) { transition-delay: 0.2s; }
.ff-quien-mission__inner > *:nth-child(4) { transition-delay: 0.3s; }

@media (prefers-reduced-motion: reduce) {
  .ff-quien-mission__inner > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   PAGINA "QUIEN SOY" (template-quien-soy.php)
   ========================================================================== */

/* ---------- Historia: foto real + texto ---------- */
.ff-quien-historia {
  padding-block: 88px;
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  align-items: start;
  gap: 64px;
}
.ff-quien-historia__photo { position: sticky; top: 128px; }
.ff-quien-historia__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: calc(50% - 30px) center;
  border-radius: 20px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.25), 0 32px 56px -24px rgba(21, 55, 83, 0.4);
}
.ff-quien-historia__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-quien-historia__text h2 { margin-bottom: 20px; max-width: 620px; }
.ff-quien-historia__text p:not(.ff-quien-historia__eyebrow) { color: var(--ff-navy); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 20px; max-width: 620px; }
.ff-quien-historia__text p:last-child { margin-bottom: 0; }

@media (max-width: 900px) {
  .ff-quien-historia { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ff-quien-historia__photo { position: static; }
  .ff-quien-historia__photo img { max-width: 320px; margin-inline: auto; }
}

/* ---------- Trayectoria / credenciales ---------- */
.ff-quien-credenciales { padding-block: 100px; }
.ff-quien-credenciales__head { max-width: 640px; }
.ff-quien-credenciales__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-quien-credenciales__head h2 { margin-bottom: 0; }

.ff-quien-credenciales__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}
.ff-quien-credencial-card {
  background: var(--ff-white);
  border-radius: 20px;
  padding: 32px 28px 28px;
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-quien-credencial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
}
.ff-quien-credencial-card .ff-icon-check { width: 34px; height: 34px; color: var(--ff-accent); margin-bottom: 20px; }
.ff-quien-credencial-card h3 { font-size: var(--ff-fs-h5); margin-bottom: 8px; }
.ff-quien-credencial-card p { color: var(--ff-navy); margin-bottom: 0; }

.ff-quien-credencial-card--darwinex {
  display: block;
  background: var(--ff-secondary);
  box-shadow: none;
  color: inherit;
}
.ff-quien-credencial-card--darwinex:hover {
  box-shadow: 0 18px 36px -14px rgba(21, 55, 83, 0.5);
}
.ff-quien-credencial-card--darwinex .ff-trust__darwinex-logo { margin-bottom: 20px; }
.ff-quien-credencial-card--darwinex h3 { color: var(--ff-white); }
.ff-quien-credencial-card--darwinex p { color: rgba(255, 255, 255, 0.7); }

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

/* ---------- Mision: CTA final tipo manifiesto, full-bleed + constelacion
   (mismo patron que .ff-analisis-contact/.ff-articulo-contact, clase propia
   para poder ajustarla sin tocar esas otras secciones) ---------- */
.ff-quien-mission {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 85% 50%, var(--ff-secondary) 0%, var(--ff-primary) 68%);
  padding-block: 96px;
  margin-top: 0;
  margin-bottom: 0;
}
.ff-quien-mission__constellation {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.ff-quien-mission__inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}
.ff-quien-mission__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.ff-quien-mission__inner h2 { color: var(--ff-white); margin-bottom: 20px; }
.ff-quien-mission__inner p { color: rgba(255, 255, 255, 0.78); font-size: 1.0625rem; line-height: 1.7; margin-bottom: 36px; }
.ff-quien-mission__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.ff-quien-mission .ff-btn--b { background: transparent; color: var(--ff-white); border-color: rgba(255, 255, 255, 0.55); }
.ff-quien-mission .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-quien-mission .ff-btn--b:hover,
.ff-quien-mission .ff-btn--b:focus-visible { background: transparent; color: var(--ff-accent); border-color: var(--ff-accent); }
.ff-quien-mission .ff-btn--b:hover .ff-btn__arrow,
.ff-quien-mission .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

@media (max-width: 600px) {
  .ff-quien-mission { padding-block: 64px; }
  .ff-quien-credenciales { padding-block: 64px; }
  .ff-quien-historia { padding-block: 64px; }
}

/* ==========================================================================
   ANALISIS (HOME) — seccion dinamica: el analisis mas reciente en una card
   grande tipo portada + los 3 siguientes en cards horizontales chicas
   (reusa .ff-analisis-card de archive-analisis.php tal cual)
   ========================================================================== */
.ff-home-analisis { padding-block: 100px; }
.ff-home-analisis__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
}
.ff-home-analisis__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-home-analisis__head-text h2 { margin-bottom: 0; }
.ff-home-analisis__head .ff-btn { flex-shrink: 0; }
.ff-home-analisis__empty { color: var(--ff-navy); }

.ff-home-analisis__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.ff-home-analisis__list { display: flex; flex-direction: column; gap: 24px; }
.ff-home-analisis__list .ff-analisis-card { flex: 1; }
/* Sin extracto aca (a diferencia del archivo de Analisis, que si lo muestra) */
.ff-home-analisis__list .ff-analisis-card__excerpt { display: none; }
/* Imagen mas angosta que el 50% default (mitad de ancho) para que cada card quede mas compacta.
   Solo arriba de 640px: abajo de eso .ff-analisis-card pasa a flex-direction:column (regla generica
   mas abajo en el archivo) y flex-basis pasaria a controlar el ALTO, no el ancho. */
@media (min-width: 641px) {
  .ff-home-analisis__list .ff-analisis-card__media { flex-basis: 25%; }
}

/* Card grande: imagen de fondo a toda la tarjeta, contenido superpuesto abajo con degradado */
.ff-home-analisis__featured { height: 100%; }
.ff-home-analisis-featured {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ff-primary);
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-home-analisis-featured:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: translateY(-4px);
}
.ff-home-analisis-featured__media { position: absolute; inset: 0; display: block; }
.ff-home-analisis-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ff-ease-out); }
.ff-home-analisis-featured:hover .ff-home-analisis-featured__media img { transform: scale(1.06); }
.ff-home-analisis-featured__media-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-home-analisis-featured__media-fallback img { width: 64px; height: auto; max-width: none; opacity: 0.35; }
.ff-home-analisis-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61, 22, 53, 0.92) 0%, rgba(61, 22, 53, 0.55) 38%, rgba(61, 22, 53, 0) 68%);
  pointer-events: none;
}
.ff-home-analisis-featured__content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 420px;
}
.ff-home-analisis-featured__date { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; margin-bottom: 10px; }
.ff-home-analisis-featured__content h3 { font-size: var(--ff-fs-h2); margin-bottom: 20px; }
.ff-home-analisis-featured__content h3 a { color: var(--ff-white); }
.ff-home-analisis-featured__content h3 a:hover { color: var(--ff-accent); }
.ff-home-analisis-featured .ff-btn--b {
  align-self: flex-start;
  background: transparent;
  color: var(--ff-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.ff-home-analisis-featured .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-home-analisis-featured .ff-btn--b:hover,
.ff-home-analisis-featured .ff-btn--b:focus-visible {
  background: transparent;
  color: var(--ff-accent);
  border-color: var(--ff-accent);
}
.ff-home-analisis-featured .ff-btn--b:hover .ff-btn__arrow,
.ff-home-analisis-featured .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

@media (max-width: 900px) {
  .ff-home-analisis__grid { grid-template-columns: 1fr; }
  .ff-home-analisis-featured__content { min-height: 320px; }
}
@media (max-width: 640px) {
  .ff-home-analisis { padding-block: 64px; }
  .ff-home-analisis__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   ARTICULOS (HOME) — mismo estilo que la seccion ANALISIS (HOME) de arriba,
   con clases propias .ff-home-articulos-* (reusa .ff-articulo-card tal cual
   para las 3 chicas, igual que Analisis reusa .ff-analisis-card)
   ========================================================================== */
.ff-home-articulos { padding-block: 100px; }
.ff-home-articulos__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 40px;
}
.ff-home-articulos__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-home-articulos__head-text h2 { margin-bottom: 0; }
.ff-home-articulos__head .ff-btn { flex-shrink: 0; }
.ff-home-articulos__empty { color: var(--ff-navy); }

.ff-home-articulos__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.ff-home-articulos__list { display: flex; flex-direction: column; gap: 24px; }
.ff-home-articulos__list .ff-articulo-card { flex: 1; }
.ff-home-articulos__list .ff-articulo-card__excerpt { display: none; }
@media (min-width: 641px) {
  /* Mas ancha que en Analisis (25%): las categorias de Articulos son mas largas
     ("Trading Algorítmico", "Mercados y Economía") y el badge necesita mas
     espacio para no partirse en 2 lineas. */
  .ff-home-articulos__list .ff-articulo-card__media { flex-basis: 38%; }
  .ff-home-articulos__list .ff-articulo-card__badge { white-space: nowrap; }
}

/* Card grande: imagen de fondo a toda la tarjeta, contenido superpuesto abajo con degradado */
.ff-home-articulos__featured { height: 100%; }
.ff-home-articulos-featured {
  position: relative;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ff-primary);
  box-shadow: 0 0 0 0.5px rgba(21, 55, 83, 0.4);
  transition: box-shadow var(--ff-transition), transform var(--ff-transition);
}
.ff-home-articulos-featured:hover {
  box-shadow: 0 0 0 0.5px var(--ff-accent), 0 18px 36px -14px rgba(21, 55, 83, 0.32);
  transform: translateY(-4px);
}
.ff-home-articulos-featured__media { position: absolute; inset: 0; display: block; }
.ff-home-articulos-featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ff-ease-out); }
.ff-home-articulos-featured:hover .ff-home-articulos-featured__media img { transform: scale(1.06); }
.ff-home-articulos-featured__media-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 140% at 100% 0%, rgba(234, 94, 40, 0.55) 0%, rgba(87, 25, 51, 0.35) 45%, rgba(87, 25, 51, 0) 72%), var(--ff-primary);
}
.ff-home-articulos-featured__media-fallback img { width: 64px; height: auto; max-width: none; opacity: 0.35; }
.ff-home-articulos-featured__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(61, 22, 53, 0.92) 0%, rgba(61, 22, 53, 0.55) 38%, rgba(61, 22, 53, 0) 68%);
  pointer-events: none;
}
.ff-home-articulos-featured__content {
  position: relative;
  z-index: 1;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  min-height: 420px;
}
.ff-home-articulos-featured__date { color: rgba(255, 255, 255, 0.7); font-size: 0.875rem; margin-bottom: 10px; }
.ff-home-articulos-featured__content h3 { font-size: var(--ff-fs-h2); margin-bottom: 20px; }
.ff-home-articulos-featured__content h3 a { color: var(--ff-white); }
.ff-home-articulos-featured__content h3 a:hover { color: var(--ff-accent); }
.ff-home-articulos-featured .ff-btn--b {
  align-self: flex-start;
  background: transparent;
  color: var(--ff-white);
  border-color: rgba(255, 255, 255, 0.55);
}
.ff-home-articulos-featured .ff-btn--b .ff-btn__arrow { color: var(--ff-white); }
.ff-home-articulos-featured .ff-btn--b:hover,
.ff-home-articulos-featured .ff-btn--b:focus-visible {
  background: transparent;
  color: var(--ff-accent);
  border-color: var(--ff-accent);
}
.ff-home-articulos-featured .ff-btn--b:hover .ff-btn__arrow,
.ff-home-articulos-featured .ff-btn--b:focus-visible .ff-btn__arrow { color: var(--ff-accent); }

@media (max-width: 900px) {
  .ff-home-articulos__grid { grid-template-columns: 1fr; }
  .ff-home-articulos-featured__content { min-height: 320px; }
}
@media (max-width: 640px) {
  .ff-home-articulos { padding-block: 64px; }
  .ff-home-articulos__head { flex-direction: column; align-items: flex-start; gap: 20px; }
}

/* ==========================================================================
   PREGUNTAS FRECUENTES (HOME) — reusa el acordeon .ff-faq* tal cual
   (single-taller.php/single-servicio.php), solo agrega el head + ancho de lectura
   ========================================================================== */
.ff-home-faq { padding-block: 100px; }
.ff-home-faq__head { max-width: 640px; margin-bottom: 40px; }
.ff-home-faq__eyebrow {
  color: var(--ff-accent);
  font-family: var(--ff-font-body);
  font-size: var(--ff-fs-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.ff-home-faq__head h2 { margin-bottom: 0; }
.ff-home-faq__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 56px;
}

@media (max-width: 900px) {
  .ff-home-faq__list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
}
@media (max-width: 640px) {
  .ff-home-faq { padding-block: 64px; }
}