/*
Theme Name: FAMA
Theme URI: https://fama.cuatroochenta.com/
Author: Tresipunt para Cuatroochenta
Author URI: https://tresipunt.com/
Description: Tema a medida que reproduce la web de FAMA (Facility Management) con Gutenberg + ACF Blocks. Sistema visual compartido, template parts globales, CPTs de casos y noticias.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fama
*/

/* =========================================================================
   FAMA — Sistema visual compartido v2
   Portado desde docs/originales/fama-styles.css (fidelidad 1:1)
   ========================================================================= */

:root {
  --fama-blue: #004FFF;
  --fama-blue-deep: #0033B3;
  --fama-blue-haze: #EEF2FF;
  --fama-green: #00D5A0;
  --fama-cyan: #00DBE4;
  --ink: #0A1426;
  --text: #2A3145;
  --muted: #6B7388;
  --line: #E8EAF0;
  --line-soft: #F1F3F7;
  --bg: #FFFFFF;
  --bg-soft: #F2F6FB;
  --bg-haze: #E4ECFF;
  --bg-dark: #0A1426;
  --radius: 4px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --gradient-brand: linear-gradient(135deg, #004FFF 0%, #00DBE4 100%);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Figtree', system-ui, -apple-system, sans-serif;
  font-weight: 400; font-size: 17px; line-height: 1.6;
  color: var(--text); background: var(--bg);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { list-style: none; }
.container { max-width: var(--max); margin: 0 auto; padding: 0 32px; }

/* ==================== VIÑETA AZUL DE FAMA EN LISTAS DE CONTENIDO ====================
   El reset de arriba quita las viñetas de los <ul>. En cualquier lista de contenido
   —dentro de bloques con editor WYSIWYG (.caso-body, .manifesto-body, .faq-answer) o
   listas nativas de Gutenberg (.wp-block-list)— se restaura la viñeta con el azul de
   FAMA. .art-wrap y .spotlight ya usan su propio marcador azul (::before) y se dejan. */
/* Contenedores que hoy no tienen viñeta (el reset se la quitó): se restaura disc.
   .caso-body y .legal-body ya traen su propio disc + espaciado, así que a esos solo
   se les da el color del marcador (abajo), sin re-tocar padding. */
.manifesto-body ul,
.faq-answer ul,
.wp-block-list { list-style: disc; padding-left: 1.4em; }
.manifesto-body ul li,
.faq-answer ul li,
.wp-block-list li { margin-bottom: 6px; }
/* Color azul del marcador en TODAS las listas de contenido con viñeta. */
.caso-body ul li::marker,
.legal-body ul li::marker,
.manifesto-body ul li::marker,
.faq-answer ul li::marker,
.wp-block-list > li::marker { color: var(--fama-blue); }

/* Bloque «Botones» nativo de Gutenberg → azul FAMA por defecto (el core lo pinta gris).
   Solo cuando no se ha elegido color a mano en el editor (:not(.has-background/.has-text-color)),
   para que un color explícito siga mandando. */
.wp-block-button__link:not(.has-background) { background-color: var(--fama-blue); }
.wp-block-button__link:not(.has-text-color) { color: #fff; }
.wp-block-button__link:not(.has-background):hover,
.wp-block-button__link:not(.has-background):focus { background-color: var(--fama-blue-deep); }
/* Estilo «Contorno»: borde y texto azul FAMA; al pasar el ratón se rellena. */
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) { background-color: transparent; }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-text-color) { color: var(--fama-blue); border-color: var(--fama-blue); }
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):focus { background-color: var(--fama-blue); color: #fff; }

/* Fondos mesh */
.bg-mesh-light {
  background:
    radial-gradient(ellipse at 80% 10%, rgba(0, 79, 255, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(0, 219, 228, 0.08) 0%, transparent 55%),
    #F8FAFF;
}
.bg-mesh-soft {
  background:
    radial-gradient(ellipse at 30% 30%, rgba(0, 79, 255, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(0, 219, 228, 0.06) 0%, transparent 55%),
    var(--bg-soft);
}
.bg-mesh-blue {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(0, 79, 255, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 100% 100%, rgba(0, 219, 228, 0.10) 0%, transparent 60%),
    var(--bg-haze);
}
.bg-mesh-green {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(0, 213, 160, 0.14) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 79, 255, 0.06) 0%, transparent 55%),
    #F4FBF8;
}
.bg-mesh-cyan {
  background:
    radial-gradient(ellipse at 70% 20%, rgba(0, 219, 228, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 20% 80%, rgba(0, 79, 255, 0.08) 0%, transparent 55%),
    #F0FBFC;
}

/* Tipografía */
.eyebrow {
  font-size: 12px; font-weight: 500; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--fama-blue);
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow::before {
  content: ''; width: 24px; height: 1px; background: var(--fama-blue); display: inline-block;
}
.eyebrow.green { color: var(--fama-green); }
.eyebrow.green::before { background: var(--fama-green); }
.eyebrow.cyan, .eyebrow-cyan { color: var(--fama-cyan); }
.eyebrow.cyan::before, .eyebrow-cyan::before { background: var(--fama-cyan); }
.eyebrow.muted { color: var(--muted); }
.eyebrow.muted::before { background: var(--muted); }

h1, h2, h3, h4 {
  font-family: 'Figtree', sans-serif; color: var(--ink);
  letter-spacing: -0.025em; line-height: 1.05; font-weight: 600;
}
h1 { font-size: clamp(40px, 5.6vw, 68px); font-weight: 500; letter-spacing: -0.035em; }
h2 { font-size: clamp(30px, 4vw, 52px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; }
h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.2; }
h4 { font-size: 17px; font-weight: 600; line-height: 1.3; }

p.lead { font-size: clamp(18px, 1.4vw, 21px); line-height: 1.55; color: var(--text); font-weight: 400; }

/* Cursivas azul plano (sin gradiente para evitar cortes) */
.italic-brand, .accent { font-style: italic; font-weight: 300; color: var(--fama-blue); }
.accent-green { font-style: italic; font-weight: 300; color: var(--fama-green); }
.accent-cyan { font-style: italic; font-weight: 300; color: var(--fama-cyan); }

/* Acento de color dentro de títulos de bloque.
   El editor lo marca con *asteriscos* → se convierte en <span class="ac">.
   También se soporta <em> antiguo. SIN cursiva: solo color, misma tipografía que el título.
   En fondos oscuros (CTA final / secciones dark) el acento pasa a cyan/verde por legibilidad. */
h1 em, h2 em, h3 em, .ac { font-style: normal; color: var(--fama-blue); }
.section-dark em, .section-dark .ac { color: var(--fama-cyan); }

/* ==================== TOPBAR ==================== */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 101;
  height: 40px; background: var(--ink); color: rgba(255, 255, 255, 0.85);
  font-size: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.topbar-inner {
  max-width: var(--max); margin: 0 auto; height: 100%;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
}
.topbar-links { display: flex; gap: 28px; align-items: center; }
.topbar-links a {
  color: rgba(255, 255, 255, 0.78);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s; font-weight: 500;
}
.topbar-links a:hover { color: var(--fama-cyan); }
.topbar-links a svg { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.topbar-support {
  padding: 4px 12px; background: rgba(0, 219, 228, 0.10);
  border-radius: 100px; border: 1px solid rgba(0, 219, 228, 0.25);
  color: var(--fama-cyan) !important;
}
.topbar-support:hover { background: rgba(0, 219, 228, 0.18); color: white !important; }
/* Icono del enlace de soporte vía ::before (el ítem de menú no puede llevar SVG).
   Usa mask + currentColor para que herede el color del texto (cyan → blanco al hover). */
.topbar-support::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 14px; display: inline-block;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%3E%3Cpath%20d='M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%3E%3Cpath%20d='M21%2011.5a8.38%208.38%200%200%201-.9%203.8%208.5%208.5%200%200%201-7.6%204.7%208.38%208.38%200%200%201-3.8-.9L3%2021l1.9-5.7a8.38%208.38%200%200%201-.9-3.8%208.5%208.5%200%200%201%204.7-7.6%208.38%208.38%200%200%201%203.8-.9h.5a8.48%208.48%200%200%201%208%208v.5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.lang-dropdown { position: relative; }
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  color: white; font-weight: 500; font-size: 12px;
  padding: 5px 10px; border-radius: 6px;
  transition: background 0.2s; letter-spacing: 0.02em;
}
.lang-btn:hover { background: rgba(255, 255, 255, 0.08); }
.lang-btn > svg:first-child { width: 14px; height: 14px; stroke: currentColor; fill: none; }
.lang-btn .caret { width: 9px; height: 9px; transition: transform 0.25s; opacity: 0.7; }
.lang-btn.open .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: white; color: var(--ink); border-radius: 12px;
  box-shadow: 0 12px 50px rgba(10, 20, 38, 0.18), 0 4px 12px rgba(10, 20, 38, 0.06);
  padding: 6px; min-width: 170px;
  opacity: 0; transform: translateY(-8px); pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
  z-index: 102;
}
.lang-menu.open { opacity: 1; transform: translateY(0); pointer-events: all; }
.lang-menu a {
  display: block; padding: 10px 14px; font-size: 13px;
  font-weight: 500; border-radius: 6px; color: var(--text);
  transition: background 0.15s, color 0.15s;
}
.lang-menu a:hover { background: var(--bg-haze); color: var(--fama-blue); }
.lang-menu a.active { color: var(--fama-blue); background: var(--fama-blue-haze); }

/* ==================== HEADER ==================== */
.site-header {
  position: fixed; top: 40px; left: 0; right: 0; z-index: 100;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(255, 255, 255, 0.95); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 92px; max-width: var(--max); margin: 0 auto; padding: 0 32px;
  gap: 40px;
}
.brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.brand-logo { height: 52px; width: auto; flex-shrink: 0; }
.brand-tag {
  font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
  text-transform: uppercase; padding-left: 14px;
  border-left: 1px solid var(--line); font-weight: 500;
}
.nav-primary { display: flex; gap: 32px; align-items: center; }
.nav-primary > a, .nav-dropdown-trigger {
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: color 0.2s; display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 0; white-space: nowrap;
}
.nav-primary a:hover, .nav-primary a.active, .nav-dropdown-trigger:hover { color: var(--fama-blue); }
.nav-primary svg { width: 9px; height: 9px; opacity: 0.5; transition: transform 0.25s; }
/* Ítem del menú con clase «mainmenu-cta» (p. ej. Contacto): estilo botón. */
.nav-primary > a.mainmenu-cta { background: var(--fama-blue); color: #fff; border-radius: 100px; padding: 9px 20px; font-weight: 600; transition: background 0.2s, transform 0.2s; }
.nav-primary > a.mainmenu-cta:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
/* Cluster móvil de la cabecera: selector de idioma + hamburguesa (solo ≤1100px, ver responsive).
   El selector va sobre fondo claro, así que su texto pasa a color tinta. */
.header-mobile-actions { display: none; }
.header-mobile-actions .lang-btn { color: var(--ink); }
.header-mobile-actions .lang-btn:hover { background: var(--bg-haze); }
/* Enlaces Casos/Noticias que solo aparecen dentro del menú hamburguesa.
   Se usa .nav-primary > a.nav-extra-mobile para ganar en especificidad a
   «.nav-primary > a» (si no, en desktop se mostrarían). */
.nav-primary > a.nav-extra-mobile { display: none; }

.nav-dropdown { position: relative; }
.nav-dropdown-trigger { cursor: pointer; }
.nav-dropdown.open .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown.open .nav-dropdown-trigger { color: var(--fama-blue); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: -16px;
  background: white; border-radius: 14px;
  box-shadow: 0 16px 60px rgba(10, 20, 38, 0.12), 0 4px 16px rgba(10, 20, 38, 0.06);
  padding: 12px; min-width: 340px;
  opacity: 0; transform: translateY(-12px); pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 102; border: 1px solid var(--line);
}
.nav-dropdown.open .nav-dropdown-menu { opacity: 1; transform: translateY(0); pointer-events: all; }
.nav-dropdown-menu a {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 12px 14px; border-radius: 10px;
  transition: background 0.2s;
}
.nav-dropdown-menu a:hover { background: var(--bg-haze); }
.nav-dropdown-menu a svg { display: none; }
.nav-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fama-blue); margin-top: 6px; flex-shrink: 0; }
.nav-dot-green { background: var(--fama-green); }
.nav-dot-cyan { background: var(--fama-cyan); }
.nav-item-text { display: flex; flex-direction: column; gap: 2px; padding: 0; }
.nav-item-text strong { font-size: 14px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.nav-item-text span { font-size: 12px; color: var(--muted); font-weight: 400; line-height: 1.4; }
.nav-dropdown-menu a.active { background: var(--bg-haze); }
/* Página actual: azul + seminegrita (se diferencia del hover). El CTA (mainmenu-cta) se excluye. */
.nav-primary > a.active:not(.mainmenu-cta), .nav-dropdown-trigger.active { color: var(--fama-blue); font-weight: 600; }
.nav-dropdown-menu a.active strong { color: var(--fama-blue); }

/* ==================== BOTONES ==================== */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; padding: 12px 22px;
  border-radius: 100px; transition: all 0.3s var(--ease);
  letter-spacing: -0.005em; white-space: nowrap;
}
.btn-primary { background: var(--ink); color: white; }
.btn-primary:hover { background: var(--fama-blue); transform: translateY(-1px); }
.btn-blue { background: var(--fama-blue); color: white; }
.btn-blue:hover { background: var(--fama-blue-deep); transform: translateY(-1px); }
.btn-green { background: var(--fama-green); color: var(--ink); }
.btn-green:hover { background: #00B989; transform: translateY(-1px); color: white; }
.btn-cyan { background: var(--fama-cyan); color: var(--ink); }
.btn-cyan:hover { background: #00B9C2; transform: translateY(-1px); color: white; }
.btn-ghost { color: var(--ink); padding: 12px 18px; }
.btn-ghost:hover { color: var(--fama-blue); }
.btn-light { background: white; color: var(--ink); }
.btn-light:hover { background: var(--fama-blue); color: white; transform: translateY(-1px); }
.btn-dark { background: var(--ink); color: white; }
.btn-dark:hover { background: var(--fama-blue); transform: translateY(-1px); }
.btn-large { padding: 16px 30px; font-size: 15px; }
.btn .arrow { display: inline-block; transition: transform 0.3s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ==================== HERO INTERIOR ==================== */
.page-hero { padding: 180px 0 100px; position: relative; overflow: hidden; }
.page-hero::before {
  content: ''; position: absolute; top: 0; right: -10%;
  width: 60%; height: 100%;
  background: radial-gradient(ellipse at center, rgba(0, 79, 255, 0.06) 0%, transparent 60%);
  pointer-events: none;
}
.page-hero.green::before { background: radial-gradient(ellipse at center, rgba(0, 213, 160, 0.08) 0%, transparent 60%); }
.page-hero.cyan::before { background: radial-gradient(ellipse at center, rgba(0, 219, 228, 0.10) 0%, transparent 60%); }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: center; position: relative; }
.hero-text { max-width: 620px; }
.hero-mark { display: inline-flex; align-items: center; gap: 14px; margin-bottom: 24px; }
.hero-mark-dot { width: 40px; height: 40px; border-radius: 50%; background: var(--fama-blue); }
.hero-mark-dot.green { background: var(--fama-green); }
.hero-mark-dot.cyan { background: var(--fama-cyan); }
.hero-mark-name { font-size: 12px; font-weight: 700; color: var(--ink); letter-spacing: 0.16em; text-transform: uppercase; }
.page-hero h1 { margin: 12px 0 28px; }
.page-hero p.lead { margin-bottom: 40px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* ==================== MOCKUP ==================== */
.mockup {
  background: white; border-radius: var(--radius-xl);
  box-shadow: 0 1px 2px rgba(10, 20, 38, 0.04), 0 8px 24px rgba(10, 20, 38, 0.06), 0 32px 80px rgba(10, 20, 38, 0.08);
  overflow: hidden;
}
.mock-bar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 22px; }
.mock-dots { display: flex; gap: 6px; }
.mock-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.mock-dot.blue { background: var(--fama-blue); }
.mock-dot.green { background: var(--fama-green); }
.mock-dot.cyan { background: var(--fama-cyan); }
.mock-label { font-size: 11px; color: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; }
.mock-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.mock-row:last-child { border-bottom: none; }
.mock-cell { display: flex; align-items: center; gap: 12px; }
.mock-pin { width: 8px; height: 8px; border-radius: 50%; }
.mock-pin.b { background: var(--fama-blue); }
.mock-pin.g { background: var(--fama-green); }
.mock-pin.c { background: var(--fama-cyan); }
.mock-text { font-size: 13px; color: var(--ink); font-weight: 500; }
.mock-text.sm { font-size: 11px; color: var(--muted); font-weight: 400; }
.mock-metric { font-size: 32px; font-weight: 700; color: var(--ink); letter-spacing: -0.03em; }
.mock-metric-trend { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--fama-green); font-weight: 600; margin-left: 8px; }

/* ==================== SECCIONES ==================== */
.section { padding: 120px 0; }
.section.pad-compacto { padding: 40px 0; }
.section.pad-none { padding: 0; }
.section.con-borde, .section-dark.con-borde { border-bottom: 1px solid var(--line); }
.section-soft { padding: 120px 0; }
.section-dark { padding: 120px 0; background: var(--bg-dark); color: white; }
.section-dark h2 { color: white; }
.section-dark p { color: rgba(255, 255, 255, 0.7); }
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head .eyebrow { margin-bottom: 24px; }
.section-head h2 { margin-bottom: 24px; }
.section-head p { font-size: 19px; color: var(--text); line-height: 1.55; }
.section-dark .section-head p { color: rgba(255, 255, 255, 0.7); }

/* Heading nativo de Gutenberg (bloque «Encabezado» → clase .wp-block-heading):
   el reset global le quita el margen, así que le damos el mismo espacio inferior
   (24px) que usa el H2 del section-head, para que combine con los bloques FAMA.
   Solo afecta al bloque nativo; los títulos de los bloques ACF salen como <h2> pelado.
   En plantillas de prosa (.legal-body/.art-wrap/.caso-body) sus reglas h2 más
   específicas ganan, así que allí conservan su propio margen. */
.wp-block-heading { margin-bottom: 24px; }

/* Párrafo nativo de Gutenberg: sale como <p> pelado (sin clase) y el reset global
   le quita el margen. Se lo devolvemos SOLO a los párrafos de primer nivel del
   contenido en páginas montadas con bloques (page.php / landing → <main id="content">).
   Los <p> dentro de bloques FAMA van anidados en <section>/<div>, así que el
   combinador hijo (>) no los alcanza; y las plantillas de prosa envuelven el
   contenido (.legal-body/.art-wrap) y ya tienen su propio margen de párrafo. */
#content > p { margin-bottom: 20px; }

/* ==================== BENTO ==================== */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.feature-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.feature-card {
  background: white; border: 1px solid var(--line);
  border-radius: var(--radius-xl); padding: 36px;
  transition: all 0.4s var(--ease); position: relative; overflow: hidden;
}
.feature-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 16px 40px rgba(10, 20, 38, 0.06); }
.feature-card.dark { background: var(--ink); color: white; border-color: var(--ink); }
.feature-card.dark h3 { color: white; }
.feature-card.dark p { color: rgba(255, 255, 255, 0.7); }
.feature-card.dark .cap-icon { background: rgba(255, 255, 255, 0.08); }
.feature-card.dark .cap-icon svg { stroke: white; }
.feature-card.span-2 { grid-column: span 2; }
.feature-card.span-3 { grid-column: span 3; }
.cap-icon { width: 44px; height: 44px; background: var(--fama-blue-haze); border-radius: var(--radius-lg); display: flex; align-items: center; justify-content: center; margin-bottom: 24px; }
.cap-icon svg { width: 22px; height: 22px; stroke: var(--fama-blue); fill: none; stroke-width: 1.5; }
.cap-icon.green { background: rgba(0, 213, 160, 0.12); }
.cap-icon.green svg { stroke: var(--fama-green); }
.cap-icon.cyan { background: rgba(0, 219, 228, 0.12); }
.cap-icon.cyan svg { stroke: var(--fama-cyan); }
.feature-card h3 { margin-bottom: 12px; }
.feature-card p { font-size: 14px; line-height: 1.55; color: var(--muted); }

/* ==================== QA (dos columnas) ==================== */
.qa-block.qa-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-bottom: 32px; }
.qa-col { border-radius: var(--radius-xl); padding: 40px 36px; }
.qa-col-title { font-size: clamp(22px, 2.2vw, 28px); font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; margin: 16px 0 24px; }
/* Listas: viñeta = el punto de lista estándar (disc). Izquierda azul; derecha hereda el color del texto. */
.qa-list { list-style: disc; padding-left: 1.2em; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.qa-list li { font-size: 15px; line-height: 1.55; }

/* Columna izquierda: preguntas sobre fondo gris. */
.qa-col--questions { background: var(--bg-haze); }
.qa-col--questions .qa-col-title { color: var(--ink); }
.qa-col--questions .qa-list li { color: var(--text); }
.qa-col--questions .qa-list li::marker { color: var(--fama-blue); }

/* Columna derecha «Con FAMA»: color configurable. */
.qa-col--fill .qa-col-title { color: inherit; }
.qa-col--fill .qa-list li { color: inherit; }
.qa-col--fill .qa-list li::marker { color: currentColor; }
.qa-col--fill .qa-eyebrow-der { color: currentColor; opacity: 0.9; }
.qa-col--fill .qa-eyebrow-der::before { background: currentColor; }
.qa-cierre { margin: 24px 0 0; padding-top: 20px; border-top: 1px solid currentColor; font-size: 14px; line-height: 1.6; color: inherit; opacity: 0.92; }
.qa-boton { margin-top: 24px; }
/* Variantes de color (fondo oscuro → texto blanco; fondo claro → texto ink). */
.qa-fill-blue  { background: var(--fama-blue);  color: #fff; }
.qa-fill-dark  { background: var(--ink);        color: #fff; }
.qa-fill-green { background: var(--fama-green);  color: var(--ink); }
.qa-fill-cyan  { background: var(--fama-cyan);   color: var(--ink); }

@media (max-width: 860px) {
	.qa-block.qa-2col { grid-template-columns: 1fr; }
	.qa-col { padding: 32px 28px; }
}

/* ==================== LOGO STRIP ==================== */
.logo-strip { padding: 70px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.logo-strip-label { text-align: center; font-size: 12px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 36px; font-weight: 500; }
.logo-strip-item { font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 16px; color: var(--ink); letter-spacing: -0.02em; text-align: center; font-style: italic; }
.logo-strip-item.serif { font-family: Georgia, 'Times New Roman', serif; font-style: normal; letter-spacing: 0.05em; }
.logo-strip-item.spaced { letter-spacing: 0.16em; font-weight: 400; }
.logo-strip-item.bold-tracked { font-weight: 800; letter-spacing: -0.04em; font-style: normal; }

/* ==================== SECTORES ==================== */
.sectors-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.sector-card { position: relative; height: 320px; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all 0.5s var(--ease); }
.sector-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--fama-blue-deep) 0%, var(--ink) 100%); transition: transform 0.7s var(--ease); }
.sector-card:hover .sector-bg { transform: scale(1.08); }
.sector-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 20, 38, 0.95) 0%, rgba(10, 20, 38, 0.4) 50%, rgba(10, 20, 38, 0.2) 100%); }
.sector-content { position: absolute; inset: 0; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; z-index: 2; }
.sector-num { font-size: 11px; color: rgba(255, 255, 255, 0.5); font-weight: 500; letter-spacing: 0.16em; }
.sector-name { font-size: 19px; font-weight: 600; color: white; letter-spacing: -0.02em; line-height: 1.15; }
.sector-tag { font-size: 11px; color: rgba(255, 255, 255, 0.6); margin-top: 6px; letter-spacing: 0.02em; }
.sector-card .pattern { position: absolute; inset: 0; opacity: 0.4; }
.sector-card.publico .pattern { background: linear-gradient(45deg, #0033B3 0%, #004FFF 100%); }
.sector-card.sanitario .pattern { background: linear-gradient(45deg, #002878 0%, #0033B3 100%); }
.sector-card.retail .pattern { background: linear-gradient(45deg, #001E5C 0%, #002878 100%); }
.sector-card.transporte .pattern { background: linear-gradient(45deg, #0033B3 0%, #00DBE4 200%); }
.sector-card.asegurador .pattern { background: linear-gradient(45deg, #001E5C 0%, #004FFF 100%); }
.sector-svg { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.25; stroke: white; fill: none; stroke-width: 1; width: 55%; }

/* ==================== WHY FAMA ==================== */
.why-fama-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 60px; }
.why-item h3 { margin-bottom: 14px; }
.why-item p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.why-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 48px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 60px 0; }
.why-stat-num { font-size: clamp(40px, 5vw, 64px); font-weight: 300; color: var(--ink); letter-spacing: -0.04em; line-height: 1; }
.why-stat-num .plus { font-size: 0.4em; color: var(--fama-blue); font-weight: 500; }
.why-stat-label { margin-top: 10px; font-size: 13px; color: var(--muted); font-weight: 500; letter-spacing: -0.01em; }

/* ==================== FINAL CTA ==================== */
.final-cta { padding: 60px 0; background: var(--ink); color: white; position: relative; overflow: hidden; }
.final-cta::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 800px; height: 800px; background: radial-gradient(circle, rgba(0, 79, 255, 0.18) 0%, transparent 60%); pointer-events: none; }
.final-cta.green::before { background: radial-gradient(circle, rgba(0, 213, 160, 0.18) 0%, transparent 60%); }
.final-cta.cyan::before { background: radial-gradient(circle, rgba(0, 219, 228, 0.18) 0%, transparent 60%); }
.final-cta-inner { text-align: center; max-width: 720px; margin: 0 auto; position: relative; z-index: 2; }
.final-cta h2 { color: white; font-size: clamp(36px, 4.5vw, 58px); margin-bottom: 20px; font-weight: 400; }
.final-cta h2 em, .final-cta .ac { font-style: normal; color: var(--fama-cyan); }
.final-cta.green h2 em, .final-cta.green .ac { color: var(--fama-green); }
.final-cta p { font-size: 18px; color: rgba(255, 255, 255, 0.7); margin-bottom: 40px; max-width: 520px; margin-left: auto; margin-right: auto; }
.final-cta .btn-blue, .final-cta .btn-green, .final-cta .btn-cyan { background: white; color: var(--ink); }
.final-cta .btn-blue:hover { background: var(--fama-blue); color: white; }
.final-cta .btn-green:hover { background: var(--fama-green); color: var(--ink); }
.final-cta .btn-cyan:hover { background: var(--fama-cyan); color: var(--ink); }

/* ==================== OTHER PRODUCTS ==================== */
.other-products { padding: 100px 0; border-top: 1px solid var(--line); }
.other-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.other-products-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.other-products-grid.cols-1 { grid-template-columns: 1fr; max-width: 720px; }
.other-product { padding: 36px; border: 1px solid var(--line); border-radius: var(--radius-xl); transition: all 0.4s var(--ease); }
.other-product:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(10, 20, 38, 0.06); }
.other-product-mark { width: 32px; height: 32px; border-radius: 50%; background: var(--fama-blue); margin-bottom: 24px; }
.other-product-mark.green { background: var(--fama-green); }
.other-product-mark.cyan { background: var(--fama-cyan); }
.other-product-name { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.other-product h3 { font-size: 20px; margin-bottom: 12px; line-height: 1.2; }
.other-product p { font-size: 14px; color: var(--text); line-height: 1.55; margin-bottom: 24px; }
.other-product-link { font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; transition: gap 0.3s var(--ease); }
.other-product-link:hover { gap: 12px; color: var(--fama-blue); }

/* ==================== FOOTER ==================== */
.site-footer { background: var(--ink); color: white; padding: 80px 0 32px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.footer-brand { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 16px; }
.footer-brand-logo { height: 40px; width: auto; margin-bottom: 16px; }
.footer-tag { font-size: 11px; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 28px; }
.footer-desc { font-size: 14px; color: rgba(255, 255, 255, 0.6); line-height: 1.6; max-width: 320px; }
.footer-col h5 { font-size: 12px; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.14em; font-weight: 600; margin-bottom: 20px; }
.footer-col li { margin-bottom: 12px; }
.footer-col a { font-size: 14px; color: rgba(255, 255, 255, 0.85); transition: color 0.2s; }
.footer-col a:hover { color: var(--fama-cyan); }
.footer-bottom { padding-top: 32px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); }
.footer-bottom-right { display: flex; gap: 32px; }
.support-block { background: rgba(255, 255, 255, 0.04); padding: 16px 20px; border-radius: var(--radius-lg); margin-top: 20px; font-size: 13px; }
.support-block strong { color: white; display: block; margin-bottom: 4px; }
.support-block a { color: var(--fama-cyan); font-weight: 500; }

/* ==================== SCROLL TO TOP ==================== */
.scroll-top {
  position: fixed; bottom: 28px; right: 28px; z-index: 50;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--fama-blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 79, 255, 0.30), 0 16px 48px rgba(0, 79, 255, 0.20);
  opacity: 0; transform: translateY(20px) scale(0.9); pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s;
}
.scroll-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.scroll-top:hover { background: var(--ink); transform: translateY(-2px); }
.scroll-top svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ==================== REVEALS ==================== */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.16s; }
.reveal-d3 { transition-delay: 0.24s; }
.reveal-d4 { transition-delay: 0.32s; }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 1200px) {
  .nav-primary { gap: 24px; }
  .nav-primary > a, .nav-dropdown-trigger { font-size: 14px; }
}
@media (max-width: 1100px) {
  .hero-grid { grid-template-columns: 1fr; gap: 60px; }
  .feature-grid, .feature-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .feature-card.span-3, .feature-card.span-2 { grid-column: span 2; }
  .sectors-strip { grid-template-columns: repeat(2, 1fr); }
  .why-fama-grid { grid-template-columns: 1fr; gap: 40px; }
  .why-stats { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .other-products-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* Cabecera móvil (hamburguesa a partir de aquí): sin topbar; sus contenidos
     se reubican (idioma junto a la hamburguesa; Casos/Noticias en el menú). */
  .topbar { display: none; }
  .site-header { top: 0; }
  .admin-bar .site-header { top: 32px; }
  .fama-content-offset { padding-top: 92px; }
  .admin-bar .fama-content-offset { padding-top: 124px; }
  .header-mobile-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  .nav-primary > a.nav-extra-mobile { display: flex; }
}
@media (max-width: 720px) {
  .container { padding: 0 20px; }
  .topbar { display: none; }
  .site-header { top: 0; }
  .page-hero { padding: 110px 0 60px; }
  .header-inner { height: 76px; padding: 0 20px; }
  .brand-logo { height: 40px; }
  .brand-tag { display: none; }
  .feature-grid, .feature-grid.cols-2, .feature-grid.cols-4 { grid-template-columns: 1fr; gap: 12px; }
  .feature-card.span-3, .feature-card.span-2 { grid-column: span 1; }
  .sectors-strip { grid-template-columns: 1fr; }
  .other-products-grid.cols-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 16px; }
  .scroll-top { right: 16px; bottom: 16px; }
  .section, .section-soft, .section-dark { padding: 80px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   Funcionalidades — extensiones añadidas
   ========================================================== */
.nav-dropdown-menu-wide { min-width: 420px; }

.feature-illust {
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  background: white; padding: 32px;
  box-shadow:
    0 1px 2px rgba(10, 20, 38, 0.04),
    0 12px 32px rgba(0, 79, 255, 0.10),
    0 32px 80px rgba(10, 20, 38, 0.08);
  aspect-ratio: 5/4;
}

.spotlight {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 80px; align-items: center; padding: 90px 0;
  border-top: 1px solid var(--line);
}
.spotlight:first-of-type { border-top: 0; padding-top: 0; }
.spotlight.reverse .spotlight-text { order: 2; }
.spotlight-eyebrow {
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fama-blue); margin-bottom: 14px;
}
.spotlight h3 { font-size: clamp(26px, 2.4vw, 34px); margin-bottom: 20px; line-height: 1.15; }
.spotlight p, .spotlight li {
  font-size: 16px; line-height: 1.7; color: var(--text);
}
.spotlight ul { margin-top: 20px; list-style: disc; padding-left: 1.2em; }
.spotlight ul li { padding: 6px 0; }
.spotlight ul li::marker { color: var(--fama-blue); }
.spotlight-illust {
  position: relative; border-radius: var(--radius-xl);
  background: white; padding: 36px; min-height: 380px;
  box-shadow:
    0 1px 2px rgba(10, 20, 38, 0.04),
    0 12px 32px rgba(0, 79, 255, 0.08),
    0 32px 80px rgba(10, 20, 38, 0.06);
}

/* Panel del hero (bloques «hero» y «hero-mockup»): la tarjeta blanca la pone el CSS
   (el SVG es «solo contenido»), igual que en los spotlights, para que las traducciones
   no dependan de un fondo dentro del SVG. En global para que cargue con cualquiera de
   los dos bloques. */
.hero-media {
  background: #fff;
  border: 1px solid #E6EAF2;
  border-radius: var(--radius-xl);
  box-shadow:
    0 1px 2px rgba(10, 20, 38, 0.04),
    0 12px 32px rgba(0, 79, 255, 0.08),
    0 32px 80px rgba(10, 20, 38, 0.06);
}

/* FAQ */
.faq-list { max-width: 820px; }
.faq-item {
  border-top: 1px solid var(--line); padding: 4px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; font-size: 18px; font-weight: 500; color: var(--ink);
  transition: color 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--fama-blue); }
.faq-item summary svg {
  width: 14px; height: 14px; flex-shrink: 0;
  stroke: currentColor; transition: transform 0.3s var(--ease); opacity: 0.6;
}
.faq-item[open] summary svg { transform: rotate(180deg); opacity: 1; }
.faq-answer {
  padding: 0 0 24px; max-width: 720px;
  font-size: 16px; line-height: 1.65; color: var(--muted);
}

@media (max-width: 1100px) {
  .spotlight, .spotlight.reverse { grid-template-columns: 1fr; gap: 48px; padding: 60px 0; }
  .spotlight.reverse .spotlight-text { order: 1; }
  .nav-dropdown-menu-wide { min-width: 320px; }
}

/* ==========================================================
   WordPress core / admin bar — ajustes de integración
   ========================================================== */
.admin-bar .topbar { top: 32px; }
.admin-bar .site-header { top: 72px; }
@media (max-width: 782px) {
  .admin-bar .topbar { top: 46px; }
  .admin-bar .site-header { top: 46px; }
}
@media (max-width: 720px) {
  .admin-bar .site-header { top: 46px; }
}

/* ==========================================================
   Template parts globales — extras de index.html
   (footer enriquecido, chip de acento, utilidades)
   ========================================================== */
.hidden-mobile { display: inline; }

.footer-brand-tag {
  font-size: 11px; color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 24px;
}
.footer-brand-tag a { transition: color 0.2s; }
.footer-brand-tag a:hover { color: var(--fama-cyan); }
.footer-col ul li { margin-bottom: 12px; }

.footer-certs {
  padding: 40px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 40px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); flex-wrap: wrap;
}
.footer-certs-left { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cert-chip {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px; padding: 10px 16px;
  display: inline-flex; flex-direction: column; line-height: 1.2;
  transition: border-color 0.2s;
}
.cert-chip:hover { border-color: var(--fama-cyan); }
.cert-chip strong { font-size: 13px; font-weight: 700; color: white; }
.cert-chip span { font-size: 11px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }
.cert-badge {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px; padding: 10px 14px;
  color: var(--ink); font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 6px;
}
.cert-gptw {
  background: var(--gradient-brand); color: white;
  border-radius: 8px; padding: 12px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-align: center; line-height: 1.3;
}
.cert-bme {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 6px; padding: 8px 14px;
  color: #002856; font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
  display: inline-flex; align-items: center; gap: 6px;
}
.cert-bme small { color: #8c9091; font-weight: 500; font-size: 10px; }

/* Certificaciones (izquierda) y logos adicionales (derecha) del pie desde «FAMA ·
   Configuración» (Ajustes): imágenes enlazadas (color original, alt del gestor
   multimedia). La fila mantiene el space-between de .footer-certs. */
.footer-certs--imgs .footer-certs-left,
.footer-certs--imgs .footer-certs-right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.footer-certs--imgs .footer-cert-item { display: inline-flex; transition: transform 0.2s var(--ease); }
.footer-certs--imgs a.footer-cert-item:hover { transform: translateY(-1px); }
/* Se acota alto Y ancho (con auto en ambos) para que la proporción se mantenga y
   ningún logo (p. ej. un wordmark ancho como BME Growth) se dispare de tamaño. */
.footer-certs--imgs .footer-cert-img { max-height: 50px; max-width: 140px; width: auto; height: auto; display: block; border-radius: 6px; object-fit: contain; }

/* Texto solo para lectores de pantalla (títulos de widget ocultos, etc.). */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.footer-social {
  padding: 30px 0; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.social-list { display: flex; gap: 18px; font-size: 13px; flex-wrap: wrap; align-items: center; }
.social-list a { color: rgba(255, 255, 255, 0.7); transition: color 0.2s; display: inline-flex; }
.social-list a:hover { color: var(--fama-cyan); }
.social-list .social-icon { width: 20px; height: 20px; fill: currentColor; display: block; }
.footer-offices { font-size: 13px; color: rgba(255, 255, 255, 0.6); }

.footer-legal {
  padding-top: 28px; display: flex; justify-content: space-between; align-items: center;
  gap: 20px; flex-wrap: wrap; font-size: 12px; color: rgba(255, 255, 255, 0.4);
}
.footer-legal-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-legal-links a { transition: color 0.2s; }
.footer-legal-links a:hover { color: var(--fama-cyan); }

/* Chip de acento del hero (home) */
.accent-chip {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px; border-radius: 100px;
  background: rgba(0, 79, 255, 0.08); border: 1px solid rgba(0, 79, 255, 0.16);
  font-size: 13px; font-weight: 500; color: var(--fama-blue); margin-bottom: 28px;
}
.accent-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }

@media (max-width: 720px) {
  .hidden-mobile { display: none; }
}

/* ==========================================================
   Mockups field-driven (panel de estado) — datos en campos, diseño fijo
   ========================================================== */
.semaforo { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.semaforo-verde { background: #00B989; }
.semaforo-amarillo { background: #FFB020; }
.semaforo-rojo { background: #E63946; }

.norm-pill {
  display: inline-block; padding: 5px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600; margin: 4px;
  background: #00DBE420; color: #007E84; border: 1px solid #00DBE440;
}
.norm-strip { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.norm-strip-label { font-size: 13px; font-weight: 600; color: var(--muted); }

.mock-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }
.mock-metric-card { padding: 10px; border: 1px solid var(--line); border-radius: 8px; text-align: center; }
.mock-metric-card .mock-metric { font-size: 18px; }
.mock-metric-card.cyan  { border-color: #00DBE430; background: #00DBE408; }
.mock-metric-card.cyan  .mock-metric { color: #00B4BB; }
.mock-metric-card.green { border-color: #00B98930; background: #00B98908; }
.mock-metric-card.green .mock-metric { color: #00B989; }
.mock-metric-card.amber { border-color: #FFB02030; background: #FFB02008; }
.mock-metric-card.amber .mock-metric { color: #FFB020; }
.mock-metric-card.blue  { border-color: rgba(0,79,255,0.20); background: rgba(0,79,255,0.04); }
.mock-metric-card.blue  .mock-metric { color: var(--fama-blue); }
.mock-cell-lead { display: flex; align-items: center; gap: 8px; }
.mock-status { font-size: 11px; font-weight: 600; }
.mock-status.green { color: #00B989; }
.mock-status.amber { color: #FFB020; }
.mock-status.red { color: #E63946; }

/* ==========================================================
   Software: qué incluye, tabla comparativa
   ========================================================== */
.incluye-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.incluye-item { padding: 28px 24px; border-radius: var(--radius-lg); background: var(--bg-soft); }
.incluye-item .cap-icon { margin-bottom: 16px; }
.incluye-item h3 { font-size: 17px; font-weight: 700; margin-bottom: 10px; }
.incluye-item p { font-size: 14px; color: var(--muted); line-height: 1.65; }
@media (max-width: 1100px) { .incluye-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .incluye-grid { grid-template-columns: 1fr; } }

.comp-table-wrap { overflow-x: auto; }
.comp-table { width: 100%; border-collapse: collapse; border-radius: var(--radius-lg); overflow: hidden; }
.comp-table th { font-size: 13px; font-weight: 700; padding: 14px 20px; background: var(--ink); color: white; text-align: left; }
.comp-table td { font-size: 14px; padding: 14px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
.comp-table tr:last-child td { border-bottom: 0; }
.comp-table tr:nth-child(even) td { background: var(--bg-soft); }
.comp-check { color: #00B989; font-weight: 700; }

/* Pirámide IWMS */
.pyramid { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pyramid-layer { background: white; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px 28px; text-align: center; }
.pyramid-layer:nth-child(1) { width: 60%; margin: 0 auto; background: var(--ink); color: white; border-color: var(--ink); }
.pyramid-layer:nth-child(2) { width: 72%; margin: 0 auto; }
.pyramid-layer:nth-child(3) { width: 84%; margin: 0 auto; }
.pyramid-layer:nth-child(4) { width: 92%; margin: 0 auto; }
.pyramid-layer:nth-child(5) { width: 100%; margin: 0 auto; }
.pyramid-label { font-size: 16px; font-weight: 700; }
.pyramid-tags { font-size: 12px; color: var(--muted); margin-top: 6px; }
.pyramid-layer:nth-child(1) .pyramid-tags { color: rgba(255,255,255,0.6); }

/* ==========================================================
   Somos: timeline + valores
   ========================================================== */
.timeline { position: relative; padding: 0; padding-left: 32px; max-width: 720px; }
.timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--line); }
.tl-item { display: grid; grid-template-columns: 140px 1fr; gap: 40px; padding: 0 0 56px 0; position: relative; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ''; position: absolute; left: -5px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--fama-blue); border: 2px solid white; box-shadow: 0 0 0 3px var(--fama-blue-haze); }
.tl-year { font-size: 28px; font-weight: 800; color: var(--fama-blue); padding-left: 28px; line-height: 1; }
.tl-content h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.tl-content p { font-size: 15px; color: var(--muted); line-height: 1.65; }
@media (max-width: 680px) { .tl-item { grid-template-columns: 80px 1fr; gap: 20px; } .tl-year { font-size: 20px; } }

.valores-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.valor-card { padding: 36px 32px; border-radius: var(--radius-xl); background: white; border: 1px solid var(--line); }
.valor-num { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fama-blue); margin-bottom: 20px; }
.valor-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 14px; line-height: 1.2; }
.valor-card p { font-size: 15px; color: var(--muted); line-height: 1.7; }
@media (max-width: 1100px) { .valores-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 680px) { .valores-grid { grid-template-columns: 1fr; } }

/* Info de contacto */
.contacto-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px; align-items: start; }
.contacto-info h3 { font-size: 20px; margin-bottom: 20px; }
.contacto-info-item { margin-bottom: 24px; }
.contacto-info-item .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.contacto-info-item a, .contacto-info-item p { font-size: 15px; color: var(--text); }
.contacto-oficinas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.contacto-form { background: white; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 40px; }
@media (max-width: 900px) { .contacto-grid { grid-template-columns: 1fr; gap: 40px; } }
/* Móvil: caja del formulario con menos padding para que el iframe gane ancho
   (casi full width), manteniendo un margen interno entre el borde y el contenido. */
@media (max-width: 600px) { .contacto-form { padding: 20px; } }

/* ==========================================================
   Páginas legales (contenido en bloques nativos)
   ========================================================== */
.legal-body { max-width: 820px; margin: 0 auto; padding: 60px 0 80px; }
.legal-body h1 { font-size: clamp(28px, 3.5vw, 44px); margin-bottom: 12px; }
.legal-body .legal-meta { font-size: 13px; color: var(--muted); margin-bottom: 40px; }
.legal-body h2 { font-size: 20px; font-weight: 700; margin: 40px 0 12px; }
.legal-body h3 { font-size: 17px; font-weight: 700; margin: 28px 0 10px; }
.legal-body p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 16px; }
.legal-body ul { margin: 0 0 16px 20px; }
.legal-body ul li { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 6px; list-style: disc; }
.legal-body a { color: var(--fama-blue); }
.legal-body strong { color: var(--ink); }

/* Offset para plantillas genéricas (evita que topbar+header fijos tapen el contenido).
   Las páginas con hero a sangre (Fase 4) NO usan esta clase. */
.fama-content-offset { padding-top: 132px; }
.admin-bar .fama-content-offset { padding-top: 164px; }
@media (max-width: 782px) {
  .admin-bar .fama-content-offset { padding-top: 122px; }
}
@media (max-width: 720px) {
  .fama-content-offset { padding-top: 76px; }
  .admin-bar .fama-content-offset { padding-top: 122px; }
}

/* ==========================================================
   CPT Casos de éxito — single + archive
   ========================================================== */
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 24px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--muted); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--fama-blue); }
.caso-hero { background: linear-gradient(135deg, #F0F4FF 0%, white 50%, #F8F9FF 100%); padding: 52px 0 40px; border-bottom: 1px solid var(--line); }
.caso-hero h1 { font-size: clamp(24px, 3vw, 40px); line-height: 1.12; max-width: 760px; margin-bottom: 14px; }
.caso-hero-sector { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fama-blue); margin-bottom: 12px; display: block; }
.caso-hero-lead { font-size: 17px; color: var(--muted); line-height: 1.7; max-width: 620px; margin-bottom: 28px; }
.caso-hero .tag, .sidebar-box .tag { display: inline-block; padding: 4px 12px; border-radius: 20px; background: var(--bg-haze); color: var(--fama-blue); font-size: 12px; font-weight: 600; margin: 2px 4px 2px 0; }
.caso-layout { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; padding: 56px 0 80px; }
.caso-body h2 { font-size: clamp(20px, 2.2vw, 28px); margin: 40px 0 12px; line-height: 1.2; padding-left: 14px; border-left: 3px solid var(--fama-blue); }
.caso-body h2:first-child { margin-top: 0; }
.caso-body p { font-size: 15px; line-height: 1.8; color: var(--muted); margin-bottom: 14px; }
.caso-body strong { color: var(--ink); }
.caso-body ul { margin: 0 0 20px 0; padding-left: 1.4em; list-style: disc; }
.caso-body ul li { font-size: 15px; line-height: 1.7; color: var(--muted); margin-bottom: 10px; padding-left: 4px; }
.caso-body ul li::marker { color: var(--fama-blue); }
.caso-body ol { margin: 0 0 20px 0; padding: 0; list-style: none; counter-reset: results; display: flex; flex-direction: column; gap: 10px; }
.caso-body ol li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.7; color: var(--muted); counter-increment: results; }
.caso-body ol li::before { content: counter(results, decimal-leading-zero); font-size: 11px; font-weight: 700; color: var(--fama-blue); min-width: 24px; margin-top: 3px; }
.caso-quote { border: 1px solid var(--line); border-left: 4px solid var(--fama-blue); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 22px 22px 18px 26px; margin: 28px 0; background: white; }
.caso-quote p { font-size: 16px; font-style: italic; color: var(--ink); line-height: 1.7; margin: 0 0 12px; }
.caso-quote cite { font-size: 13px; font-weight: 600; color: var(--muted); font-style: normal; display: flex; align-items: center; gap: 8px; }
.caso-quote cite::before { content: ''; width: 20px; height: 2px; background: var(--fama-blue); flex-shrink: 0; }
.modules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 24px 0; }
.module-item { padding: 14px 12px; border-radius: 10px; background: var(--bg-haze); border: 1px solid var(--line); font-size: 13px; font-weight: 600; color: var(--fama-blue); text-align: center; line-height: 1.4; }
.caso-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin: 28px 0; }
.caso-kpi { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; background: white; }
.caso-kpi-valor { font-size: clamp(28px, 3vw, 40px); font-weight: 300; color: var(--fama-blue); letter-spacing: -0.03em; line-height: 1; }
.caso-kpi-label { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.video-wrap { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; border-radius: var(--radius-xl); margin: 32px 0; box-shadow: 0 6px 32px rgba(0, 79, 255, 0.13); }
.video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }
/* Si el vídeo abre la columna, alinear su borde superior con el de la columna derecha. */
.caso-body > .video-wrap:first-child { margin-top: 0; }
.caso-sidebar { position: sticky; top: 96px; display: flex; flex-direction: column; gap: 14px; }
.sidebar-box { background: white; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 22px; }
.sidebar-box h4 { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.sidebar-box p { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0; line-height: 1.3; }
.sidebar-link { display: flex; align-items: center; justify-content: space-between; font-size: 14px; font-weight: 600; color: var(--ink); padding: 9px 0; border-bottom: 1px solid var(--line); transition: color 0.2s; }
.sidebar-link:last-child { border-bottom: none; }
.sidebar-link:hover { color: var(--fama-blue); }
.sidebar-link span { color: var(--fama-blue); }
.rel-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.rel-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 7px; transition: all 0.25s var(--ease); background: white; }
.rel-card:hover { box-shadow: 0 8px 32px rgba(0, 79, 255, 0.1); transform: translateY(-2px); }
.rel-sector { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fama-blue); }
.rel-title { font-size: 14px; font-weight: 700; color: var(--ink); line-height: 1.35; flex: 1; }
.rel-link { font-size: 13px; font-weight: 600; color: var(--fama-blue); }
@media (max-width: 1100px) { .caso-layout { grid-template-columns: 1fr; gap: 40px; } .caso-sidebar { position: static; } }
@media (max-width: 768px) { .modules-grid { grid-template-columns: 1fr 1fr; } .rel-grid { grid-template-columns: 1fr; } }

/* Archivo de casos */
.filter-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 48px; align-items: center; }
.filter-btn { padding: 8px 18px; border-radius: 100px; font-size: 13px; font-weight: 600; border: 1.5px solid var(--line); background: white; color: var(--muted); cursor: pointer; transition: all 0.2s; font-family: inherit; }
.filter-btn:hover, .filter-btn.active { background: var(--ink); color: white; border-color: var(--ink); }
.casos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.caso-card { border-radius: var(--radius-xl); border: 1px solid var(--line); background: white; overflow: hidden; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); display: flex; flex-direction: column; }
.caso-card:hover { box-shadow: 0 12px 48px rgba(0, 79, 255, 0.12), 0 2px 8px rgba(10, 20, 38, 0.06); transform: translateY(-3px); }
.caso-thumb { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.caso-thumb-bg { position: absolute; inset: 0; background: linear-gradient(135deg, var(--bg-haze) 0%, var(--bg-soft) 100%); }
.caso-logo-text { position: relative; font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; z-index: 1; text-align: center; padding: 0 20px; }
.caso-video-badge { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--ink); color: white; border-radius: 20px; font-size: 11px; font-weight: 700; padding: 4px 10px; display: inline-flex; align-items: center; gap: 5px; }
.caso-card .caso-body { padding: 24px; flex: 1; display: flex; flex-direction: column; gap: 10px; }
.caso-card .caso-sector { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fama-blue); }
.caso-card .caso-title { font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink); }
.caso-card .caso-desc { font-size: 14px; color: var(--muted); line-height: 1.65; flex: 1; }
.caso-card .caso-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.caso-card .caso-tag { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; background: var(--bg-haze); color: var(--fama-blue); }
.caso-card .caso-link { font-size: 13px; font-weight: 600; color: var(--fama-blue); display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.caso-card.destacado { grid-column: span 2; flex-direction: row; }
.caso-card.destacado .caso-thumb { width: 45%; min-width: 300px; height: auto; border-bottom: none; border-right: 1px solid var(--line); flex-shrink: 0; }
.caso-card.destacado .caso-body { padding: 36px; justify-content: center; }
.caso-card.destacado .caso-title { font-size: 20px; }
.archive-stats { background: var(--ink); color: white; }
.archive-stats .why-stat-num { color: white; }
@media (max-width: 1100px) { .casos-grid { grid-template-columns: 1fr 1fr; } .caso-card.destacado { flex-direction: column; } .caso-card.destacado .caso-thumb { width: 100%; height: 200px; border-right: none; border-bottom: 1px solid var(--line); } }
@media (max-width: 680px) { .casos-grid { grid-template-columns: 1fr; } .caso-card.destacado { grid-column: span 1; } }

/* ==========================================================
   CPT Noticias — single + archive
   ========================================================== */
.noticia-hero { padding: 52px 0 40px; border-bottom: 1px solid var(--line); }
.noticia-breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 20px; }
.noticia-breadcrumb a { color: var(--fama-blue); }
.noticia-meta { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.noticia-date { font-size: 13px; color: var(--muted); font-weight: 500; }
.noticia-cat { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fama-blue); background: rgba(0, 79, 255, 0.08); padding: 4px 14px; border-radius: 20px; }
.noticia-titulo { font-size: clamp(26px, 3.5vw, 44px); font-weight: 700; line-height: 1.18; letter-spacing: -0.02em; color: var(--ink); max-width: 820px; }
.art-wrap { max-width: 760px; margin: 0 auto; padding: 56px 0 80px; }
.art-volver { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fama-blue); margin-bottom: 48px; }
.art-wrap h2 { font-size: 24px; font-weight: 700; color: var(--ink); margin: 44px 0 14px; letter-spacing: -0.02em; line-height: 1.3; }
.art-wrap h3 { font-size: 19px; font-weight: 600; color: var(--ink); margin: 32px 0 10px; }
.art-wrap p { font-size: 17px; line-height: 1.78; color: var(--text); margin-bottom: 22px; }
.art-wrap ol { padding-left: 22px; margin-bottom: 22px; }
.art-wrap ol li { font-size: 17px; line-height: 1.78; color: var(--text); margin-bottom: 7px; list-style: decimal; }
.art-wrap ul { list-style: none; padding: 0; margin-bottom: 24px; }
.art-wrap ul li { font-size: 17px; line-height: 1.75; color: var(--text); padding: 6px 0 6px 26px; position: relative; margin-bottom: 2px; }
.art-wrap ul li::before { content: ''; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--fama-blue); }
.art-wrap blockquote { border-left: 3px solid var(--fama-blue); padding: 14px 24px; margin: 28px 0; background: var(--bg-haze); border-radius: 0 8px 8px 0; }
.art-wrap blockquote p { font-size: 18px; font-style: italic; color: var(--ink); margin: 0; font-weight: 500; }
.art-cta-inline { background: var(--bg-soft); border-radius: 16px; padding: 36px; margin: 48px 0; border: 1px solid var(--line); }
.art-cta-inline h3 { font-size: 20px; margin-bottom: 10px; }
.art-cta-inline p { font-size: 15px; color: var(--muted); margin-bottom: 16px; }
.art-share { display: flex; align-items: center; gap: 10px; padding-top: 32px; border-top: 1px solid var(--line); margin-top: 48px; flex-wrap: wrap; }
.art-share-label { font-size: 13px; color: var(--muted); margin-right: 2px; }
.art-share a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--fama-blue); border: 1px solid var(--line); border-radius: 8px; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.art-share a:hover { background: var(--fama-blue); border-color: var(--fama-blue); color: white; }
.art-share .social-icon { width: 18px; height: 18px; fill: currentColor; display: block; }

/* Archivo de noticias */
.page-banner { padding: 40px 0 48px; border-bottom: 1px solid var(--line); }
.page-banner h1 { font-size: clamp(36px, 5vw, 60px); font-weight: 700; letter-spacing: -0.03em; color: var(--ink); margin: 12px 0 16px; }
.page-banner p { font-size: 18px; color: var(--muted); max-width: 560px; }
.blog-section { padding: 56px 0 80px; }
.blog-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 56px; }
.blog-card { background: white; border: 1px solid var(--line); border-radius: 12px; padding: 32px; display: flex; flex-direction: column; transition: border-color 0.2s, box-shadow 0.2s; }
.blog-card:hover { border-color: var(--fama-blue); box-shadow: 0 4px 24px rgba(0, 79, 255, 0.07); }
.blog-card--featured { border-color: rgba(0, 79, 255, 0.2); background: linear-gradient(145deg, #ffffff 0%, #f5f7ff 100%); }
.blog-card-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.blog-date { font-size: 12px; color: var(--muted); font-weight: 500; }
.blog-cat { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fama-blue); }
.blog-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: white; background: var(--fama-blue); padding: 2px 9px; border-radius: 20px; }
.blog-card-title { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ink); margin-bottom: 10px; flex: 1; }
.blog-card-title a { color: inherit; }
.blog-card-title a:hover { color: var(--fama-blue); }
.blog-card-excerpt { font-size: 14px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; }
.blog-card-link { font-size: 13px; font-weight: 600; color: var(--fama-blue); margin-top: auto; }

/* Paginación del listado de noticias (bloque acf/noticias-grid) */
.blog-pagination { display: flex; justify-content: center; }
.blog-pagination .page-numbers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.blog-pagination .page-numbers li { margin: 0; }
.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 42px; padding: 0 15px; border-radius: 10px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; transition: border-color 0.2s, color 0.2s, background 0.2s; }
.blog-pagination .page-numbers a:hover { border-color: var(--fama-blue); color: var(--fama-blue); }
.blog-pagination .page-numbers .current { background: var(--fama-blue); border-color: var(--fama-blue); color: white; }
.blog-pagination .page-numbers .dots { border-color: transparent; }

/* ── Página 404 ─────────────────────────────────────────── */
.error-404 { padding: 180px 0 100px; text-align: center; border-bottom: none; }
@media (max-width: 720px) { .error-404 { padding: 110px 0 60px; } }
.error-404 .lead { max-width: 620px; margin: 0 auto 32px; }
.error-404 .hero-ctas { justify-content: center; }
.error-404-links { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: center; font-size: 15px; }
.error-404-links span { color: var(--muted); }
.error-404-links a { color: var(--fama-blue); font-weight: 600; }
.error-404-links a:hover { color: var(--fama-blue-deep); }

/* ==========================================================
   Navegación móvil — hamburguesa + panel desplegable full-width
   El botón .nav-toggle solo aparece a ≤1100px; el menú .nav-primary
   se convierte en un panel bajo el header con submenús en acordeón.
   ========================================================== */
.nav-toggle { display: none; }

@media (max-width: 1100px) {
  /* Botón hamburguesa */
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; flex-shrink: 0;
    background: transparent; border: 0; border-radius: 10px;
    color: var(--ink); cursor: pointer;
  }
  .nav-toggle:hover { background: var(--bg-haze); }
  .nav-toggle .nav-toggle-bars,
  .nav-toggle .nav-toggle-bars::before,
  .nav-toggle .nav-toggle-bars::after {
    display: block; width: 22px; height: 2px; border-radius: 2px;
    background: currentColor;
    transition: transform 0.3s var(--ease), opacity 0.2s var(--ease), top 0.3s var(--ease);
  }
  .nav-toggle .nav-toggle-bars { position: relative; }
  .nav-toggle .nav-toggle-bars::before { content: ''; position: absolute; top: -7px; left: 0; }
  .nav-toggle .nav-toggle-bars::after  { content: ''; position: absolute; top: 7px;  left: 0; }
  /* Estado abierto → aspa */
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after  { top: 0; transform: rotate(-45deg); }

  /* Panel de navegación desplegable a todo el ancho */
  .nav-primary {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-top: 1px solid var(--line);
    box-shadow: 0 24px 48px rgba(10, 20, 38, 0.12);
    padding: 8px 20px 28px;
    max-height: calc(100vh - 76px);
    max-height: calc(100dvh - 76px);
    overflow-y: auto;
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s linear 0.25s;
  }
  .nav-primary.is-open {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s;
  }

  /* Ítems de primer nivel a ancho completo */
  .nav-primary > a,
  .nav-dropdown-trigger {
    width: 100%; box-sizing: border-box;
    font-size: 16px; padding: 16px 4px;
    justify-content: space-between;
    border-bottom: 1px solid var(--line-soft);
  }
  .nav-dropdown { position: static; }
  .nav-dropdown-trigger svg { width: 12px; height: 12px; }

  /* Submenús: acordeón en flujo, colapsados por defecto */
  .nav-dropdown-menu,
  .nav-dropdown-menu-wide {
    position: static; min-width: 0;
    opacity: 1; transform: none; pointer-events: auto;
    background: transparent; box-shadow: none; border: 0; border-radius: 0;
    padding: 4px 0 12px; display: none;
  }
  .nav-dropdown.open .nav-dropdown-menu { display: block; }
  .nav-dropdown-menu a { padding: 12px; border-radius: 10px; }

  /* Bloqueo de scroll del body con el menú abierto */
  body.nav-open { overflow: hidden; }
}