/* =============================================================
   INTERIM MANAGER CONSULTING — Sistema de Diseño SIMPLICITY
   Editorial · Boutique · AI-Native
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Barlow:wght@300;400;500;600;700&display=swap');

:root {
  /* Paleta corporativa */
  --navy: #0A2540;
  --navy-2: #1C3F6E;
  --navy-soft: #2A4A7A;
  --gold: #BF9000;
  --gold-soft: #C9A961;
  --gold-faint: #E8DCB0;
  --cream: #F5EFE0;
  --cream-soft: #FBF8EF;
  --paper: #FAFAF7;
  --white: #FFFFFF;
  --ink: #1A1A1A;
  --ink-soft: #3A3A3A;
  --meta: #6B6B6B;
  --line: #E8E5DC;
  --line-soft: #F0EDE3;

  /* Tipografía */
  --display: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
  --serif: 'EB Garamond', Georgia, serif;
  --sans: 'Barlow', -apple-system, sans-serif;

  /* Escala */
  --fs-mega: clamp(3.5rem, 8vw, 7rem);
  --fs-display: clamp(2.75rem, 6vw, 5rem);
  --fs-h1: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 2.25rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.5rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: 1.125rem;
  --fs-meta: 0.8125rem;

  /* Espaciado */
  --container: 1440px;
  --container-narrow: 1040px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* Otros */
  --radius: 4px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Tipografía base */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--navy);
}

p { margin-bottom: 1em; }

a {
  color: var(--navy);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { color: var(--gold); }

img, svg { max-width: 100%; height: auto; display: block; }

/* ============================================================
   LAYOUT BASE
   ============================================================ */

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

section { padding: clamp(4rem, 8vw, 7rem) 0; }

/* ============================================================
   NAVEGACIÓN
   ============================================================ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(250, 250, 247, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition), background var(--transition);
}

.nav.scrolled { border-bottom-color: var(--line); }

.nav-inner {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0.875rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--navy);
  flex-shrink: 0;
}

.nav-brand img {
  height: 96px;
  width: auto;
  max-width: 280px;
  display: block;
  flex-shrink: 0;
  object-fit: contain;
}

.nav-brand .diamond {
  width: 9px; height: 9px;
  background: var(--navy);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  flex: 1;
  justify-content: flex-start;
}

.nav-menu a {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--navy);
  position: relative;
  padding: 0.25rem 0;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--gold);
  transition: width var(--transition);
}

.nav-menu a:hover::after,
.nav-menu a.active::after { width: 100%; }

.nav-right {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.lang-toggle {
  display: flex;
  align-items: center;
  gap: 0;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--meta);
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--white);
}

.lang-toggle button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  color: var(--meta);
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  transition: all var(--transition);
}

.lang-toggle button.active {
  background: var(--navy);
  color: var(--white);
}

.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--navy);
  color: var(--white) !important;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: all var(--transition);
  border: 1px solid var(--navy);
}

.btn-cta:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white) !important;
  transform: translateY(-1px);
}

.btn-cta::after {
  content: '→';
  transition: transform var(--transition);
}

.btn-cta:hover::after { transform: translateX(3px); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px; height: 32px;
  padding: 4px;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px; height: 1.5px;
  background: var(--navy);
  transition: var(--transition);
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(5rem, 10vw, 8rem);
  position: relative;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.hero-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--gold);
}

.hero h1 {
  font-family: var(--display);
  font-size: var(--fs-mega);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 1.75rem;
}

.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.hero-lede {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 2.5rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: var(--navy);
  color: var(--white) !important;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid var(--navy);
  transition: all var(--transition);
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white) !important;
  transform: translateY(-1px);
}

.btn-primary::after {
  content: '→';
  font-weight: 400;
  transition: transform var(--transition);
}

.btn-primary:hover::after { transform: translateX(3px); }

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 1rem 2rem;
  background: transparent;
  color: var(--navy) !important;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: 1px solid var(--navy);
  border-radius: 999px;
  transition: all var(--transition);
  cursor: pointer;
}

.btn-secondary:hover {
  background: var(--navy);
  color: var(--white) !important;
}

.hero-aside {
  position: relative;
  border-left: 1px solid var(--line);
  padding-left: clamp(1.5rem, 3vw, 2.5rem);
}

.hero-aside-label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 0.75rem;
}

.hero-aside h3 {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  font-style: italic;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.hero-aside p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--meta);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.award-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem 0.625rem 0.625rem;
  background: var(--cream);
  border: 1px solid var(--gold-faint);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  transition: all var(--transition);
}

.award-badge:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--white);
}

.award-badge svg { width: 22px; height: 22px; flex-shrink: 0; }

/* Marquee de credenciales */
.credentials {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 1.5rem 0;
  background: var(--white);
  overflow: hidden;
}

.credentials-track {
  display: flex;
  gap: 3rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  white-space: nowrap;
  animation: scroll 28s linear infinite;
}

.credentials-track span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}

.credentials-track span::after {
  content: '◆';
  color: var(--gold);
  font-size: 0.5rem;
  align-self: center;
}

@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   SECCIÓN: PILARES (los 4 servicios)
   ============================================================ */

.section-header {
  margin-bottom: clamp(3rem, 6vw, 5rem);
  display: block;
  text-align: center;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.section-eyebrow {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 1rem;
}

.section-eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--gold);
}

.section-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--navy);
}

.section-title em {
  font-style: italic;
  color: var(--gold);
}

.section-intro {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* Grid pilares */
.pillars {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.pillar {
  background: var(--white);
  padding: clamp(2rem, 4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: background var(--transition);
  min-height: 420px;
}

.pillar:hover { background: var(--cream-soft); }

.pillar-num {
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 400;
  font-style: italic;
  color: var(--gold);
  letter-spacing: 0.08em;
  margin-bottom: 1.5rem;
}

.pillar-icon {
  width: 56px; height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.75rem;
  color: var(--navy);
}

.pillar-icon svg { width: 100%; height: 100%; }

.pillar h3 {
  font-family: var(--display);
  font-size: clamp(1.625rem, 2.5vw, 2rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--navy);
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.pillar h3 .italic {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
}

.pillar p {
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
  flex-grow: 1;
}

.pillar-link {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  border-bottom: 1px solid var(--navy);
  padding-bottom: 4px;
  transition: all var(--transition);
}

.pillar-link:hover {
  color: var(--gold);
  border-color: var(--gold);
  gap: 0.875rem;
}

.pillar-link::after {
  content: '→';
  font-size: 1rem;
}

/* ============================================================
   SECCIÓN: GUILLERMO / SOBRE NOSOTROS
   ============================================================ */

.about-section {
  background: var(--cream);
  position: relative;
}

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.about-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--navy);
  overflow: hidden;
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.92);
  transition: transform 1.2s ease;
}

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

.about-photo::after {
  content: '';
  position: absolute;
  top: 1rem; left: 1rem; right: 1rem; bottom: 1rem;
  border: 1px solid rgba(245, 239, 224, 0.4);
  pointer-events: none;
}

.about-text .section-eyebrow { margin-bottom: 1.5rem; }

.about-text h2 {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 1.75rem;
}

.about-text h2 em { font-style: italic; color: var(--gold); }

.about-text p {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.about-signature {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gold-faint);
  font-family: var(--display);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--navy);
}

.about-signature small {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  margin-top: 0.5rem;
}

/* Stats */
.stats {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.stat {
  background: var(--paper);
  padding: 2rem 1.5rem;
  text-align: left;
}

.stat-num {
  font-family: var(--display);
  font-size: clamp(2.5rem, 4.5vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  color: var(--navy);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
}

.stat-num sup {
  font-size: 0.4em;
  color: var(--gold);
  font-weight: 600;
}

.stat-label {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
}

/* ============================================================
   MANIFIESTO
   ============================================================ */

.manifesto {
  background: var(--navy);
  color: var(--cream);
  padding: clamp(5rem, 10vw, 8rem) 0;
  position: relative;
  overflow: hidden;
}

.manifesto::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(191, 144, 0, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(28, 63, 110, 0.5) 0%, transparent 60%);
  pointer-events: none;
}

.manifesto-content {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.manifesto .section-eyebrow { color: var(--gold-soft); justify-content: center; }
.manifesto .section-eyebrow::before { background: var(--gold-soft); }

.manifesto h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cream);
  margin-bottom: 2rem;
}

.manifesto h2 em {
  font-style: italic;
  color: var(--gold-soft);
}

.manifesto-quote {
  font-family: var(--display);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.4;
  color: var(--gold-soft);
  margin: 3rem 0 2rem;
}

.manifesto-cite {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.7;
}

.manifesto p {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: rgba(245, 239, 224, 0.85);
  margin-bottom: 1.5rem;
}

/* ============================================================
   BLOG SECTION
   ============================================================ */

.blog-section { background: var(--paper); }

.blog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-bottom: 3rem;
  align-items: start;
}

.blog-featured {
  background: var(--white);
  border: 1px solid var(--line);
  padding: 0;
  overflow: hidden;
  position: relative;
  transition: all var(--transition);
}

.blog-featured:hover {
  border-color: var(--gold-faint);
  transform: translateY(-2px);
}

.blog-featured-img {
  aspect-ratio: 16/9;
  max-height: 420px;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

.blog-featured-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1s ease;
}

.blog-featured:hover .blog-featured-img img { transform: scale(1.04); }

.blog-featured-body { padding: clamp(1.5rem, 3vw, 2.5rem); }

.blog-meta {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.blog-meta .sep { color: var(--line); }
.blog-meta .author { color: var(--meta); }

.blog-featured h3 {
  font-family: var(--display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 500;
  line-height: 1.15;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
}

.blog-featured h3 a { color: var(--navy); transition: color var(--transition); }
.blog-featured h3 a:hover { color: var(--gold); }

.blog-featured p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.blog-list { display: flex; flex-direction: column; gap: 0; }

.blog-item {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1.25rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--line);
  transition: all var(--transition);
}

.blog-item:first-child { padding-top: 0; }
.blog-item:hover { padding-left: 0.5rem; }

.blog-item-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--cream);
}

.blog-item-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-item:hover .blog-item-img img { transform: scale(1.08); }

.blog-item-body { padding: 0; }

.blog-item .blog-meta {
  margin-bottom: 0.5rem;
  font-size: 0.625rem;
}

.blog-item h4 {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--navy);
}

.blog-item h4 a:hover { color: var(--gold); }

.blog-cta {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* ============================================================
   BIBLIOTECA (LIBROS)
   ============================================================ */

.library-section {
  background: var(--cream);
  position: relative;
}

.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.book {
  text-align: left;
  transition: transform var(--transition);
}

.book:hover { transform: translateY(-4px); }

.book-cover {
  aspect-ratio: 2/3;
  background: var(--navy);
  margin-bottom: 1rem;
  box-shadow:
    0 1px 0 0 rgba(10, 37, 64, 0.1),
    0 4px 8px -2px rgba(10, 37, 64, 0.15),
    0 12px 24px -8px rgba(10, 37, 64, 0.2);
  transition: box-shadow var(--transition);
}

.book:hover .book-cover {
  box-shadow:
    0 1px 0 0 rgba(10, 37, 64, 0.1),
    0 8px 16px -4px rgba(10, 37, 64, 0.2),
    0 20px 40px -12px rgba(10, 37, 64, 0.3);
}

.book-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
}

.book-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.book-sub {
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--meta);
  line-height: 1.4;
}

/* ============================================================
   CTA FINAL
   ============================================================ */

.cta-final {
  background: var(--paper);
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) 0;
  border-top: 1px solid var(--line);
}

.cta-final h2 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: 400;
  line-height: 1.05;
  color: var(--navy);
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
}

.cta-final h2 em { font-style: italic; color: var(--gold); }

.cta-final p {
  font-family: var(--serif);
  font-size: var(--fs-lead);
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto 2.5rem;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer {
  background: var(--navy);
  color: var(--cream);
  padding: 4rem 0 1.5rem;
  font-family: var(--sans);
}

.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: 4rem;
}

.footer-brand .diamond {
  width: 12px; height: 12px;
  background: var(--gold);
  transform: rotate(45deg);
  margin-bottom: 1.5rem;
}

.footer-brand h4 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.footer-brand p {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold-soft);
  margin-bottom: 1.5rem;
}

.footer-col h5 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 1.25rem;
}

.footer-col ul { list-style: none; }

.footer-col li { margin-bottom: 0.625rem; }

.footer-col a {
  color: rgba(245, 239, 224, 0.7);
  font-size: 0.875rem;
  transition: color var(--transition);
}

.footer-col a:hover { color: var(--gold-soft); }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid rgba(245, 239, 224, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: rgba(245, 239, 224, 0.5);
}

.footer-bottom a { color: rgba(245, 239, 224, 0.5); }
.footer-bottom a:hover { color: var(--gold-soft); }

.footer-legal {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* ============================================================
   CHATBOT FLOTANTE
   ============================================================ */

.chat-fab {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 60px; height: 60px;
  background: var(--navy);
  color: var(--cream);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(10, 37, 64, 0.3);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}

.chat-fab:hover {
  background: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(191, 144, 0, 0.4);
}

.chat-fab svg { width: 26px; height: 26px; }

.chat-panel {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: min(380px, calc(100vw - 2rem));
  height: min(580px, calc(100vh - 3rem));
  background: var(--paper);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(10, 37, 64, 0.25);
  z-index: 51;
  display: none;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
}

.chat-panel.open { display: flex; animation: chatIn 0.3s ease; }

@keyframes chatIn {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.chat-header {
  background: var(--navy);
  color: var(--cream);
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-header-title {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.chat-header-title .dot {
  width: 8px; height: 8px;
  background: #4ADE80;
  border-radius: 50%;
}

.chat-close {
  background: none;
  border: none;
  color: var(--cream);
  cursor: pointer;
  padding: 4px;
  opacity: 0.7;
  transition: opacity var(--transition);
}

.chat-close:hover { opacity: 1; }

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.chat-msg {
  max-width: 85%;
  padding: 0.625rem 0.875rem;
  border-radius: 12px;
  font-size: 0.875rem;
  line-height: 1.5;
}

.chat-msg.bot {
  background: var(--white);
  color: var(--ink);
  align-self: flex-start;
  border: 1px solid var(--line);
}

.chat-msg.user {
  background: var(--navy);
  color: var(--cream);
  align-self: flex-end;
}

.chat-msg.bot.typing {
  display: flex;
  gap: 4px;
  padding: 0.875rem 1rem;
}

.chat-msg.bot.typing span {
  width: 6px; height: 6px;
  background: var(--meta);
  border-radius: 50%;
  animation: bounce 1.2s infinite;
}

.chat-msg.bot.typing span:nth-child(2) { animation-delay: 0.2s; }
.chat-msg.bot.typing span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-input-wrap {
  border-top: 1px solid var(--line);
  padding: 0.875rem 1rem;
  display: flex;
  gap: 0.5rem;
  background: var(--white);
}

.chat-input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.625rem 1rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  background: var(--paper);
  outline: none;
  transition: border-color var(--transition);
}

.chat-input:focus { border-color: var(--navy); }

.chat-send {
  background: var(--navy);
  color: var(--white);
  border: none;
  border-radius: 50%;
  width: 38px; height: 38px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.chat-send:hover { background: var(--gold); }

.chat-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: 0.5rem;
}

.chat-quick-btn {
  background: var(--cream);
  border: 1px solid var(--gold-faint);
  border-radius: 999px;
  padding: 0.375rem 0.75rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  color: var(--navy);
  cursor: pointer;
  transition: all var(--transition);
}

.chat-quick-btn:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

/* ============================================================
   ANIMACIONES DE ENTRADA
   ============================================================ */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ============================================================
   I18N — visibilidad por idioma
   ============================================================ */

html[lang="es"] [data-lang="en"]:not(button) { display: none; }
html[lang="en"] [data-lang="es"]:not(button) { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .nav-menu { display: none; position: fixed; top: 64px; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--paper); border-bottom: 1px solid var(--line); padding: 1rem 0; }
  .nav-menu.open { display: flex; }
  .nav-menu li { padding: 0.75rem var(--gutter); width: 100%; text-align: center; }
  .nav-toggle { display: flex; }
  .nav-right .btn-cta { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 3rem; }
  .hero-aside { border-left: none; border-top: 1px solid var(--line); padding-left: 0; padding-top: 2rem; }

  .pillars { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }

  .about-grid { grid-template-columns: 1fr; gap: 3rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .section-header { grid-template-columns: 1fr; gap: 1rem; align-items: start; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .blog-item { grid-template-columns: 80px 1fr; gap: 1rem; }
}

/* ============================================================
   PÁGINAS INTERIORES (pilares, blog, contacto)
   ============================================================ */

.page-hero {
  padding-top: clamp(8rem, 14vw, 11rem);
  padding-bottom: clamp(3rem, 6vw, 5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.page-hero-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.breadcrumb {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin-bottom: 2rem;
  display: flex;
  gap: 0.625rem;
  align-items: center;
}

.breadcrumb a { color: var(--meta); }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span.sep { color: var(--gold); }

.page-hero h1 {
  font-family: var(--display);
  font-size: clamp(2.75rem, 7vw, 5.5rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.025em;
  color: var(--navy);
  margin-bottom: 1.5rem;
  max-width: 22ch;
}

.page-hero h1 em { font-style: italic; color: var(--gold); }

.page-hero-lede {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.75vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 60ch;
  margin-top: 1.5rem;
}

/* Cuerpo de página de pilar */
.pillar-body {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}

.pillar-content h2 {
  font-family: var(--display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 500;
  margin: 3rem 0 1.25rem;
  color: var(--navy);
  letter-spacing: -0.01em;
}

.pillar-content h2:first-child { margin-top: 0; }

.pillar-content h2 em { font-style: italic; color: var(--gold); }

.pillar-content h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  margin: 2rem 0 0.75rem;
  color: var(--navy);
}

.pillar-content p {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.25rem;
}

.pillar-content ul {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}

.pillar-content ul li {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding-left: 1.5rem;
  margin-bottom: 0.625rem;
  position: relative;
}

.pillar-content ul li::before {
  content: '◆';
  color: var(--gold);
  position: absolute;
  left: 0;
  top: 0.125rem;
  font-size: 0.625rem;
}

.pillar-sidebar {
  position: sticky;
  top: 6rem;
  align-self: start;
}

.sidebar-card {
  background: var(--cream);
  border: 1px solid var(--gold-faint);
  padding: 2rem;
  margin-bottom: 1.5rem;
}

.sidebar-card h4 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.sidebar-card p {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.sidebar-card .btn-primary { width: 100%; justify-content: center; }
.sidebar-card .btn-secondary { width: 100%; justify-content: center; margin-top: 0.625rem; }

@media (max-width: 960px) {
  .pillar-body { grid-template-columns: 1fr; }
  .pillar-sidebar { position: static; }
}

/* Tabla de servicios */
.services-table {
  margin-top: 2.5rem;
  border-top: 1px solid var(--line);
}

.service-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.service-row h3 {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--navy);
  margin: 0;
}

.service-row p {
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
}

@media (max-width: 720px) {
  .service-row { grid-template-columns: 1fr; gap: 0.5rem; }
}

/* Blog listing page */
.blog-listing {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-card {
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: all var(--transition);
}

.blog-card:hover {
  border-color: var(--gold-faint);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.08);
}

.blog-card-img {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--cream);
}

.blog-card-img img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.blog-card:hover .blog-card-img img { transform: scale(1.06); }

.blog-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-card h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  letter-spacing: -0.01em;
}

.blog-card h3 a { color: var(--navy); }
.blog-card h3 a:hover { color: var(--gold); }

.blog-card p {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 1rem;
  flex: 1;
}

.blog-card-link {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  align-self: flex-start;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--navy);
}

.blog-card-link:hover { color: var(--gold); border-color: var(--gold); }

/* Filtros del blog */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin: 2.5rem 0;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--line);
}

.blog-filter {
  padding: 0.5rem 1rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--transition);
}

.blog-filter:hover { border-color: var(--navy); color: var(--navy); }
.blog-filter.active { background: var(--navy); border-color: var(--navy); color: var(--cream); }

/* Contacto */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 5vw, 5rem);
}

.contact-info h3 {
  font-family: var(--display);
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--navy);
  margin-bottom: 2rem;
}

.contact-item {
  margin-bottom: 1.75rem;
  padding-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.contact-item:last-child { border-bottom: none; }

.contact-item h5 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.contact-item p {
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--navy);
  margin: 0;
}

.contact-item a { color: var(--navy); }
.contact-item a:hover { color: var(--gold); }

.calendly-embed {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  min-height: 660px;
}

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   v1.5 — DEFINITIVO: tipografía, centrado, recursos 2x2 limpio
   Sustituye todos los overrides previos.
   ============================================================ */

/* ----- NAV: ancho amplio, logo discreto, menú a la derecha ----- */
.nav { padding: 0; }
.nav-inner {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0.75rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.nav-menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  flex: 1;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}
.nav-menu a {
  font-family: var(--sans);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  position: relative;
  padding: 0.5rem 0;
  transition: color var(--transition);
}
.nav-menu a:hover,
.nav-menu a.active { color: var(--gold); }
.nav-menu a.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: var(--gold);
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

/* Responsive nav */
@media (max-width: 1500px) and (min-width: 961px) {
  .nav-menu { gap: 1.25rem; }
  .nav-menu a { font-size: 0.72rem; }
  .nav-inner { padding: 0.75rem 1.5rem; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  .nav-menu { gap: 0.875rem; }
  .nav-menu a { font-size: 0.68rem; }
}

@media (max-width: 960px) {
  .nav-menu {
    position: fixed; inset: 0;
    background: var(--cream);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
  }
  .nav-menu.open { transform: translateX(0); }
  .nav-menu a {
    font-size: 1.25rem;
    font-family: var(--display);
    font-weight: 400;
    letter-spacing: 0;
    color: var(--navy);
  }
}

/* ----- HERO: alineación correcta ----- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: stretch;
}
.hero-aside {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0;
}

/* ----- SECTION HEADERS: centrados, títulos grandes ----- */
.section-header {
  display: block !important;
  text-align: center !important;
  margin-bottom: clamp(2.5rem, 5vw, 4rem) !important;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.section-header > div:first-child,
.section-header .section-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
}
.section-title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--navy);
  max-width: 22ch !important;
  margin: 0 auto 1.5rem !important;
  text-align: center !important;
}
.section-intro {
  font-family: var(--serif);
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft);
  max-width: 64ch !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* ----- PILARES: números, iconos y títulos grandes ----- */
.pillar-card {
  padding: 2.75rem 2.25rem !important;
}
.pillar-number {
  font-family: var(--sans);
  font-size: 0.875rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.18em !important;
  color: var(--gold) !important;
  opacity: 1 !important;
  text-transform: uppercase;
}
.pillar-icon {
  width: 56px !important;
  height: 56px !important;
  margin: 1.25rem 0 1.75rem !important;
  color: var(--navy);
}
.pillar-icon svg {
  width: 56px !important;
  height: 56px !important;
  stroke-width: 1.5 !important;
}
.pillar-card h3 {
  font-family: var(--display);
  font-size: clamp(1.625rem, 2.5vw, 2rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.01em !important;
  color: var(--navy);
  margin-bottom: 1rem !important;
}
.pillar-card h3 em {
  font-style: italic;
  color: var(--gold);
}
.pillar-card p {
  font-family: var(--serif);
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}
.pillar-link {
  font-family: var(--sans);
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
  color: var(--navy);
}

/* ----- MANIFESTO: compacto pero elegante ----- */
.manifesto { padding: clamp(3.5rem, 7vw, 6rem) 0 !important; }
.manifesto-quote {
  font-size: clamp(1.75rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  margin: 1.25rem 0 1.5rem !important;
}

/* ----- CTA-FINAL: compacto ----- */
.cta-final { padding: clamp(2.5rem, 5vw, 4.5rem) 0 !important; }
.cta-final h2 {
  font-size: clamp(2rem, 4.5vw, 3.25rem) !important;
  margin-bottom: 1rem !important;
}
.cta-final p {
  font-size: 1.0625rem !important;
  line-height: 1.55;
  margin: 0 auto 1.75rem !important;
  max-width: 56ch;
}

/* ----- CHAT FAB ----- */
.chat-fab {
  width: 64px !important;
  height: 64px !important;
}
.chat-fab svg {
  width: 30px !important;
  height: 30px !important;
}

/* ----- FOOTER: logo PNG visible ----- */
.footer-brand .footer-logo,
.footer-logo {
  height: 88px !important;
  width: auto !important;
  max-width: 280px !important;
  margin-bottom: 1rem !important;
  display: block;
  filter: brightness(0) invert(1) !important;
  opacity: 0.92;
}
.footer-admin-link {
  display: inline-block;
  margin-left: 1.25rem;
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity var(--transition);
}
.footer-admin-link:hover {
  opacity: 1;
  color: var(--gold);
}

/* ----- RECURSOS: grid 2×2 minimal, tarjetas compactas y elegantes ----- */
.resources-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: clamp(2rem, 4vw, 3rem);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 860px) {
  .resources-grid { grid-template-columns: 1fr; }
}

.resource-card {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--white);
  transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  align-items: stretch !important;
  border-bottom: 1px solid var(--line) !important;
  margin: 0 !important;
  overflow: hidden;
  position: relative;
}
.resource-card:hover {
  border-color: var(--navy) !important;
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(10, 37, 64, 0.10);
}
.resource-card-gift {
  background: var(--cream) !important;
  border: 1px solid var(--gold-faint) !important;
}
.resource-card-gift:hover {
  border-color: var(--gold) !important;
}

/* Cabecera horizontal: portada pequeña + tag */
.resource-card-header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.25rem 1.5rem 0.5rem;
  border-bottom: none;
}

.resource-cover {
  width: 60px !important;
  flex-shrink: 0;
  max-width: none !important;
  aspect-ratio: 60/84 !important;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(10,37,64,0.1) !important;
  margin: 1.25rem 0 0 1.5rem;
  align-self: flex-start;
}
.resource-cover img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}
.resource-card:hover .resource-cover {
  transform: none !important;
  box-shadow: 0 6px 18px rgba(10,37,64,0.15) !important;
}

.resource-body {
  padding: 1.25rem 1.5rem 1.5rem !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.resource-tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.6rem !important;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  background: transparent;
  padding: 0.25rem 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--gold-faint);
  margin-bottom: 0.875rem !important;
  align-self: flex-start;
}
.resource-tag-gift {
  background: var(--gold);
  color: var(--cream);
  border: none !important;
  padding: 0.25rem 0.6rem !important;
  border-bottom: none;
}

.resource-body h2 {
  font-family: var(--display);
  font-size: 1.0625rem !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  color: var(--navy);
  margin-bottom: 0.625rem !important;
  letter-spacing: 0;
  max-width: 30ch;
}
.resource-body h2 em {
  font-style: italic;
  color: var(--gold);
}
.resource-body p {
  font-family: var(--serif);
  font-size: 0.8125rem !important;
  line-height: 1.5 !important;
  color: var(--ink-soft);
  margin-bottom: 1rem !important;
  max-width: none !important;
  max-height: 4.5em;
  overflow: hidden;
}

/* Formulario elegante e inline */
.resource-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0.5rem !important;
  max-width: none !important;
  margin-top: auto;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line);
}
.resource-form input[name="name"] {
  grid-column: 1 / 2;
}
.resource-form input[name="company"] {
  grid-column: 2 / 3;
}
.resource-form input[name="email"] {
  grid-column: 1 / 3;
}
.resource-form input {
  width: 100%;
  padding: 0.55rem 0.75rem !important;
  border: 1px solid var(--line) !important;
  background: var(--paper) !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  color: var(--ink);
  transition: border-color 0.2s, background 0.2s;
}
.resource-form input:focus {
  outline: none;
  border-color: var(--gold) !important;
  background: var(--white) !important;
}
.resource-form input::placeholder { color: var(--meta); }
.resource-form button {
  grid-column: 1 / 3;
  width: 100%;
  padding: 0.7rem 1rem !important;
  font-family: var(--sans);
  font-size: 0.72rem !important;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--navy);
  color: var(--cream);
  border: none;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
  margin-top: 0.125rem;
}
.resource-form button:hover {
  background: var(--gold);
}
.resource-form button:active {
  transform: scale(0.985);
}
.resource-form button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.resource-form-note {
  grid-column: 1 / 3;
  font-family: var(--sans);
  font-size: 0.65rem !important;
  color: var(--meta);
  margin: 0.25rem 0 0 0 !important;
  line-height: 1.4;
  text-align: center;
}

/* Caja del cupón PULSE: discreta y horizontal */
.resource-code-box {
  background: var(--navy);
  color: var(--cream);
  padding: 0.75rem 1rem !important;
  margin: 0 0 0.875rem !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  max-width: none !important;
  flex-wrap: wrap;
}
.resource-code-label {
  display: none !important;
}
.resource-code-value {
  font-family: 'Courier New', monospace !important;
  font-size: 0.8125rem !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cream);
  grid-column: auto !important;
  grid-row: auto !important;
  flex: 1;
}
.resource-code-copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.6rem !important;
  background: transparent;
  color: var(--gold-soft);
  border: 1px solid var(--gold-soft);
  font-family: var(--sans);
  font-size: 0.62rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  grid-column: auto !important;
  grid-row: auto !important;
  align-self: auto !important;
  margin: 0 !important;
  transition: all 0.2s;
}
.resource-code-copy:hover {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
}
.resource-code-copy.copied {
  background: #2d7a2d;
  border-color: #2d7a2d;
  color: var(--cream);
}
.resource-code-copy svg {
  width: 11px;
  height: 11px;
}

/* Toast (reaprovecho) */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--navy);
  color: var(--cream);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 0 12px 32px rgba(10, 37, 64, 0.24);
  z-index: 1000;
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s;
  max-width: calc(100vw - 2rem);
}
.toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast svg { color: #6FCF97; flex-shrink: 0; }
.toast.toast-error { background: #8B2A2A; }

@media (max-width: 640px) {
  .resource-form {
    grid-template-columns: 1fr !important;
  }
  .resource-form input[name="name"],
  .resource-form input[name="company"],
  .resource-form input[name="email"] {
    grid-column: 1 !important;
  }
  .resource-form button { grid-column: 1 !important; }
  .resource-form-note { grid-column: 1 !important; }
}

/* ----- BLOG cards: enlaces activos ----- */
.blog-card-img { display: block; }
.blog-card h3 a { color: var(--navy); text-decoration: none; transition: color var(--transition); }
.blog-card h3 a:hover { color: var(--gold); }
.blog-card-link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
  text-decoration: none;
}
.blog-card-link:hover { color: var(--gold); }

/* ============================================================
   v1.6 — HERO REDISEÑADO: columna única, premio píldora, cifras horizontales
   ============================================================ */
.hero.hero-centered {
  padding: clamp(4rem, 8vw, 7rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--paper);
  text-align: center;
}

.hero.hero-centered .container-hero {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.hero.hero-centered .hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}

.hero.hero-centered .hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  text-align: center;
}
.hero.hero-centered .hero-eyebrow::before,
.hero.hero-centered .hero-eyebrow::after {
  content: '';
  width: 32px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}

.hero.hero-centered h1 {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 6.25rem) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.03em !important;
  color: var(--navy);
  margin: 0 auto 2rem !important;
  text-align: center;
  max-width: 18ch;
}
.hero.hero-centered h1 em {
  font-style: italic;
  color: var(--gold);
}

.hero.hero-centered .hero-lede {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 60ch;
  margin: 0 auto 2.25rem;
  text-align: center;
}

.hero.hero-centered .hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

/* Premio como píldora compacta horizontal */
.hero-award-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.625rem 1.25rem 0.625rem 0.875rem;
  background: var(--cream);
  border: 1px solid var(--gold-faint);
  border-radius: 999px;
  text-decoration: none;
  transition: all var(--transition);
  max-width: 100%;
}
.hero-award-pill:hover {
  border-color: var(--gold);
  background: var(--white);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(191, 144, 0, 0.12);
}
.hero-award-pill svg {
  width: 18px;
  height: 18px;
  color: var(--gold);
  flex-shrink: 0;
}
.hero-award-label {
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--meta);
  line-height: 1;
}
.hero-award-label::after {
  content: '·';
  margin: 0 0.5rem;
  color: var(--gold-soft);
}
.hero-award-name {
  font-family: var(--display);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1;
}

/* Cifras IMC: barra horizontal de 4 columnas, separadas por líneas */
.hero-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 880px;
  margin: clamp(3rem, 5vw, 4.5rem) auto 0;
  padding-top: 2.5rem;
  border-top: 1px solid var(--gold-faint);
}
.hero-number {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 0.75rem;
  position: relative;
}
.hero-number:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--line);
}
.hero-number-value {
  font-family: var(--display);
  font-size: clamp(2rem, 3vw, 2.625rem);
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 0.625rem;
}
.hero-number-label {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--meta);
  line-height: 1.35;
  text-transform: none;
}

@media (max-width: 720px) {
  .hero-numbers {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 0;
  }
  .hero-number:nth-child(2)::after {
    display: none;
  }
  .hero.hero-centered h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem) !important;
  }
  .hero-award-pill {
    flex-wrap: wrap;
    border-radius: 16px;
  }
}

/* Eliminar el hero-grid antiguo */
.hero-grid {
  display: block !important;
}

/* ============================================================
   v1.7 — FIXES VISUALES DEFINITIVOS
   - Page-hero de pilares CENTRADO
   - Items del menú como TABS con padding y borde
   - Logo nav contenido (sin brand-text)
   ============================================================ */

/* === MENÚ: items con look de TABS === */
.nav-menu {
  gap: 0.25rem !important;
}

.nav-menu li {
  list-style: none;
  display: block;
}

.nav-menu a {
  display: block;
  padding: 0.625rem 0.875rem !important;
  font-family: var(--sans) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  white-space: nowrap;
  border: 1px solid transparent !important;
  border-radius: 4px !important;
  transition: all 0.2s ease !important;
  position: relative;
  text-transform: none !important;
}

.nav-menu a:hover {
  color: var(--navy) !important;
  background: rgba(191, 144, 0, 0.06) !important;
  border-color: var(--gold-faint) !important;
}

.nav-menu a.active {
  color: var(--gold) !important;
  background: var(--cream) !important;
  border-color: var(--gold-faint) !important;
  font-weight: 600 !important;
}

.nav-menu a.active::after {
  display: none;
}

/* === Responsive: en pantallas medianas reducir tabs === */
@media (max-width: 1400px) and (min-width: 1100px) {
  .nav-menu { gap: 0.125rem !important; }
  .nav-menu a {
    padding: 0.5rem 0.625rem !important;
    font-size: 0.72rem !important;
  }
  .nav-inner { padding: 0.625rem 1.5rem !important; }
}

@media (max-width: 1099px) and (min-width: 961px) {
  .nav-menu { gap: 0.125rem !important; }
  .nav-menu a {
    padding: 0.45rem 0.5rem !important;
    font-size: 0.68rem !important;
    letter-spacing: 0 !important;
  }
  .nav-inner { padding: 0.5rem 1rem !important; gap: 1rem !important; }
}

/* === PAGE-HERO: centrar contenido === */
.page-hero {
  text-align: center !important;
  padding-top: clamp(7rem, 12vw, 10rem) !important;
  padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

.page-hero-inner {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding: 0 var(--gutter) !important;
}

.page-hero .breadcrumb {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem;
  margin-bottom: 1.75rem !important;
}

.page-hero h1 {
  font-family: var(--display) !important;
  font-size: clamp(3rem, 7vw, 5.75rem) !important;
  font-weight: 400 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.028em !important;
  color: var(--navy) !important;
  margin: 0 auto 1.75rem !important;
  max-width: 18ch !important;
  text-align: center !important;
}

.page-hero h1 em {
  font-style: italic !important;
  color: var(--gold) !important;
}

.page-hero-lede {
  font-family: var(--serif) !important;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--ink-soft) !important;
  max-width: 64ch !important;
  margin: 0 auto !important;
  text-align: center !important;
}

/* En móvil reducir el menú a hamburguesa overlay (ya existe ese CSS) */

/* ============================================================
   v1.8 — PÁGINAS DE PILAR EN COLUMNA ÚNICA CENTRADA
   Soluciona descentrados de Asesoramiento, Grants, Processes, Lab
   ============================================================ */

/* Layout principal de pilar: NO más grid de 2 columnas */
.pillar-body {
  display: block !important;
  grid-template-columns: none !important;
  margin-top: clamp(2.5rem, 5vw, 4rem) !important;
}

/* Contenido principal: columna estrecha CENTRADA */
.pillar-content {
  max-width: 760px !important;
  margin: 0 auto !important;
}

/* Títulos h2 internos: CENTRADOS y más prominentes */
.pillar-content h2 {
  font-family: var(--display) !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.018em !important;
  color: var(--navy) !important;
  margin: 3.5rem auto 1.5rem !important;
  text-align: center !important;
  max-width: 22ch;
}

.pillar-content h2:first-child {
  margin-top: 0 !important;
}

.pillar-content h2 em {
  font-style: italic !important;
  color: var(--gold) !important;
}

/* Subtítulos h3: alineados a la izquierda en columna estrecha */
.pillar-content h3 {
  font-family: var(--display) !important;
  font-size: 1.375rem !important;
  font-weight: 500 !important;
  margin: 2.25rem 0 0.75rem !important;
  color: var(--navy);
  text-align: left;
}

/* Párrafos y listas: alineados a la izquierda (legibilidad) */
.pillar-content p,
.pillar-content ul,
.pillar-content ol {
  text-align: left !important;
}

.pillar-content p {
  font-family: var(--serif);
  font-size: 1.125rem !important;
  line-height: 1.7 !important;
  color: var(--ink) !important;
  margin-bottom: 1.25rem !important;
}

/* Sidebar: pasa de ser columna derecha a caja CTA al final, centrada */
.pillar-sidebar {
  max-width: 760px !important;
  margin: 4rem auto 0 !important;
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

@media (max-width: 720px) {
  .pillar-sidebar {
    grid-template-columns: 1fr;
  }
}

/* Sidebar cards: estilo CTA boutique */
.sidebar-card {
  background: var(--cream);
  border: 1px solid var(--gold-faint);
  padding: 1.75rem !important;
  border-radius: 0;
  text-align: left;
}

.sidebar-card h4 {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.875rem;
}

.sidebar-card p {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink);
  margin-bottom: 1.25rem;
}

/* Bloques personalizados dentro de pilar (tablas de niveles, cajas) */
.pillar-content [style*="background: var(--cream)"],
.pillar-content [style*="background: var(--paper)"] {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Listas: centrar el contenedor manteniendo bullets a la izquierda */
.pillar-content ul,
.pillar-content ol {
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding-left: 1.5rem;
}

.pillar-content ul li,
.pillar-content ol li {
  margin-bottom: 0.625rem;
  line-height: 1.65;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
}

/* ============================================================
   v1.8 — Coherencia: h2 dentro de container-narrow centrados
   ============================================================ */

.container-narrow > div > h2,
.container-narrow .section-eyebrow + h2,
.container-narrow > h2 {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 24ch;
}

/* Eyebrow dentro de container-narrow también centrado */
.container-narrow .section-eyebrow {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.25rem !important;
}

/* Párrafos siguen alineados a la izquierda para legibilidad */
.container-narrow > div > p,
.container-narrow > p {
  text-align: left;
}

/* Las tablas / grids dentro de container-narrow se centran */
.container-narrow > div > [style*="grid-template-columns"] {
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   v1.9 — Fix: foto del destacado del blog no se estira
   ============================================================ */
.blog-featured {
  align-self: start !important;
}

.blog-featured-img {
  aspect-ratio: 16/9 !important;
  max-height: 380px;
  width: 100%;
  overflow: hidden;
}

.blog-featured-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}

/* ============================================================
   v2.0 — Estilos para páginas legales + badge libro nuevo + responsive refuerzo
   ============================================================ */

/* Páginas legales: contenido legible y bien estructurado */
.legal-content {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  max-width: 760px;
  margin: 0 auto;
}

.legal-content p { margin-bottom: 1.1rem; }
.legal-content ul, .legal-content ol { margin: 1rem 0 1.25rem; }
.legal-content ul li, .legal-content ol li { margin-bottom: 0.5rem; }
.legal-content a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.legal-content a:hover { color: var(--navy); }
.legal-content strong { color: var(--navy); }

/* Badge "NUEVO" para libro destacado */
.book.book-new {
  position: relative;
}
.book-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  padding: 0.4rem 0.65rem;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* ============ RESPONSIVE REFORZADO ============ */

/* TABLET (entre 720px y 960px) */
@media (max-width: 960px) and (min-width: 721px) {
  .pillar-content { max-width: 100% !important; }
  .books-grid { grid-template-columns: repeat(3, 1fr) !important; }
  .blog-grid { grid-template-columns: 1fr !important; }
  .blog-featured-img { max-height: 320px; }
  .nav-menu { gap: 0.05rem !important; }
  .nav-menu a {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.7rem !important;
  }
}

/* MÓVIL ANCHO (entre 560 y 720px) */
@media (max-width: 720px) {
  /* Nav: ocultar menú y mostrar hamburguesa */
  .nav-menu {
    display: none;
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--paper);
    flex-direction: column;
    padding: 1.5rem 0;
    border-top: 1px solid var(--line);
    box-shadow: 0 8px 24px rgba(10,37,64,0.08);
    z-index: 1000;
  }
  .nav-menu.open { display: flex !important; }
  .nav-menu li { width: 100%; }
  .nav-menu a {
    display: block !important;
    width: 100% !important;
    padding: 0.9rem 1.5rem !important;
    border-radius: 0 !important;
    border: none !important;
    border-bottom: 1px solid var(--line) !important;
    text-align: center;
    font-size: 0.95rem !important;
  }
  .nav-toggle { display: block !important; }

  /* Hero: títulos más pequeños */
  .hero h1, .page-hero h1 {
    font-size: clamp(2.25rem, 9vw, 3.5rem) !important;
  }

  /* Libros: 2 columnas */
  .books-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 1rem !important; }
  .book-title { font-size: 0.92rem !important; }
  .book-sub { font-size: 0.78rem !important; }

  /* Blog: 1 columna, todo */
  .blog-grid { grid-template-columns: 1fr !important; gap: 2rem !important; }
  .blog-featured-img { aspect-ratio: 16/10 !important; max-height: 260px !important; }
  .blog-item { grid-template-columns: 110px 1fr !important; }
  .blog-item-img { aspect-ratio: 1/1 !important; }

  /* Cifras horizontales: stack */
  .hero-stats {
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Pilares: padding reducido */
  .pillar-content {
    padding: 0 0.5rem !important;
  }
  .pillar-content h2 {
    font-size: 1.65rem !important;
  }

  /* Recursos: grid 1 columna */
  .recursos-grid {
    grid-template-columns: 1fr !important;
  }

  /* Footer: stack todas las columnas */
  .footer-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center;
  }
  .footer-col h5 { text-align: center; }
  .footer-col ul { padding: 0; }
  .footer-legal {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }
}

/* MÓVIL ESTRECHO (≤ 480px) */
@media (max-width: 480px) {
  :root { --gutter: 1rem; }
  .hero h1, .page-hero h1 {
    font-size: clamp(2rem, 10vw, 2.85rem) !important;
    letter-spacing: -0.02em !important;
  }
  .books-grid { grid-template-columns: 1fr 1fr !important; gap: 0.75rem !important; }
  .book-cover { aspect-ratio: 2/3 !important; }
  .container-narrow { padding: 0 1rem !important; }
  .legal-content h2 { font-size: 1.25rem !important; }
  .legal-content h3 { font-size: 1.05rem !important; }
  .chat-fab { width: 56px !important; height: 56px !important; }
}

/* MÓVIL MUY ESTRECHO (≤ 360px) */
@media (max-width: 360px) {
  .nav-brand img { height: 26px !important; max-width: 90px !important; }
  .hero h1, .page-hero h1 { font-size: 1.85rem !important; }
}

/* Asegurar que el toggle del nav existe y funciona */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 1.4rem;
  padding: 0.4rem 0.7rem;
  cursor: pointer;
  border-radius: 4px;
}

/* v28 article align fix - alinea imagen y texto del artículo al mismo eje */
.article-page .article-image,
.article-page .article-body {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.article-page .article-body {
  max-width: 720px !important;
}


/* ============================================================
   OVERRIDE FINAL v29 — LOGO IMC + NAV
   Sobrescribe cualquier regla anterior duplicada.
   ============================================================ */
.nav-inner {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  min-height: 96px !important;
}
.nav-brand {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  text-decoration: none !important;
}
.nav-brand img {
  height: 96px !important;
  width: auto !important;
  max-width: 280px !important;
  display: block !important;
  object-fit: contain !important;
}
@media (max-width: 720px) {
  .nav-brand img { height: 56px !important; max-width: 180px !important; }
  .nav-inner { min-height: 72px !important; padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
}

/* ============================================================
   OVERRIDE FINAL v29 — BLOG FEATURED IMAGE
   ============================================================ */
.blog-featured-img {
  aspect-ratio: 16/10 !important;
  max-height: 320px !important;
}
.blog-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  align-items: start !important;
}

/* ============================================================
   OVERRIDE FINAL v29 — ARTICLE PAGE ALIGN
   ============================================================ */
.article-page .container-narrow {
  max-width: 820px !important;
}
.article-page .article-image,
.article-page .article-body {
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   v1.9 — FIX NAV MOBILE: overlay garantizado + tipografía hero
   Machaca todas las reglas .nav-menu anteriores (5 definiciones
   acumuladas conflictivas). Debe ir AL FINAL del archivo.
   ============================================================ */

@media (max-width: 960px) {
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    background: var(--cream) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.5rem !important;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000 !important;
    padding: 5rem 2rem 2rem !important;
    margin: 0 !important;
    list-style: none;
    overflow-y: auto;
  }
  .nav-menu.open {
    transform: translateX(0) !important;
  }
  .nav-menu li {
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    border: none !important;
  }
  .nav-menu a {
    display: inline-block !important;
    padding: 0.5rem 1rem !important;
    font-family: var(--display) !important;
    font-size: 1.25rem !important;
    font-weight: 400 !important;
    color: var(--navy) !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    white-space: normal !important;
  }
  .nav-menu a:hover,
  .nav-menu a.active {
    color: var(--gold) !important;
    background: transparent !important;
    border: none !important;
  }
  /* Botón hamburguesa por encima del overlay */
  .nav-toggle {
    z-index: 1001 !important;
    position: relative;
  }
  /* Bloquear scroll del body cuando el menú está abierto */
  body:has(.nav-menu.open) {
    overflow: hidden;
  }
}

/* ============================================================
   v1.9 — Tipografía hero ligeramente más prominente en escritorio
   Aumento ~12-15% sobre los clamp() originales sin reventar el ritmo
   ============================================================ */

@media (min-width: 961px) {
  .page-hero h1 {
    font-size: clamp(3.5rem, 7.5vw, 6.5rem) !important;
    max-width: 20ch !important;
    letter-spacing: -0.03em !important;
  }
  .page-hero-lede {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem) !important;
    max-width: 68ch !important;
  }
  .page-hero-inner {
    max-width: 1100px !important;
  }
}

/* ============================================================
   v2.0 — TIPOGRAFÍA MÁS PROMINENTE EN ESCRITORIO
   Container 1280→1440, body 1.0625→1.125rem, contenido +8-10%
   ============================================================ */

@media (min-width: 961px) {
  /* Párrafos de páginas de pilar (Grants, Grantify, Processes, Consilium, Lab) */
  .pillar-content p {
    font-size: 1.1875rem !important;
    line-height: 1.7 !important;
  }
  .pillar-content ul li {
    font-size: 1.125rem !important;
    line-height: 1.7 !important;
    margin-bottom: 0.65rem !important;
  }
  /* Service-table internas (asesoramiento, grantify) */
  .services-table .service-row h3 {
    font-size: 1.5rem !important;
  }
  .services-table .service-row p {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
  }
  /* Lede del page-hero ya ampliado en v1.9, reforzamos */
  .page-hero-lede {
    font-size: clamp(1.2rem, 1.8vw, 1.5rem) !important;
    max-width: 72ch !important;
  }
  /* Hero principal de index.html: lede más grande */
  .hero-lede {
    font-size: clamp(1.15rem, 1.7vw, 1.4rem) !important;
  }
  /* Texto descriptivo de los pilares (tarjetas) */
  .pillar p {
    font-size: 1.0625rem !important;
    line-height: 1.6 !important;
  }
  /* Botones primarios un poco más prominentes */
  .btn-primary, .btn-cta-large {
    font-size: 0.92rem !important;
    padding: 1rem 1.85rem !important;
  }
  /* CTA finales */
  .cta-final h2 {
    font-size: clamp(2.25rem, 4.5vw, 3.5rem) !important;
  }
  .cta-final p {
    font-size: 1.1875rem !important;
    max-width: 60ch !important;
  }
}

/* ============================================================
   v2.1 — FIXES Guillermo · 13/05/2026
   3. Resource code (PRESCRIPTORES2026) responsive en mobile
   5. Reducir hueco page-hero → primera section siguiente
   7. Nav menú más grande en escritorio
   8. Safe-area top para iOS (notch) — parte superior cortada
   ============================================================ */

/* 3 · resource-code-value escala bien en mobile */
/* PRESCRIPTORES2026 SIEMPRE en una línea: tamaño adaptativo + nowrap forzado */
.resource-code-value {
  font-size: clamp(0.85rem, 2.6vw, 1.3rem) !important;
  letter-spacing: clamp(0.04em, 0.4vw, 0.12em) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis;
  max-width: 100%;
  text-align: center;
  word-break: keep-all;
  hyphens: none;
}
.resource-code-block {
  padding: 1.25rem 1rem !important;
}
@media (max-width: 380px) {
  .resource-code-value {
    font-size: 0.78rem !important;
    letter-spacing: 0.03em !important;
  }
}

/* 5 · Reducir hueco page-hero → primera section que le siga */
.page-hero + section {
  padding-top: clamp(2rem, 4vw, 3.5rem) !important;
}
@media (min-width: 961px) {
  .page-hero {
    padding-bottom: clamp(2rem, 4vw, 3rem) !important;
  }
}

/* 7 · Nav menú más prominente en escritorio (>=961px) */
@media (min-width: 961px) {
  .nav-menu {
    gap: 2.5rem !important;
  }
  .nav-menu a {
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.03em !important;
    padding: 0.4rem 0 !important;
  }
  .nav-brand img {
    height: auto;
    max-height: 64px;
  }
  .nav-inner {
    min-height: 72px;
  }
}

/* 8 · Safe-area inset top para iPhones con notch (cubre el viewport-fit=cover) */
.nav {
  padding-top: env(safe-area-inset-top, 0px);
}
@media (max-width: 960px) {
  body {
    padding-top: env(safe-area-inset-top, 0px);
  }
  .nav-menu {
    padding-top: calc(5rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ============================================================
   v2.3 — Botón nav EU AI Act (lead magnet siempre visible)
   ============================================================ */

.btn-eu-ai-act {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--gold, #C9A52C);
  color: var(--navy, #0A2540);
  font-family: var(--sans, 'Barlow', Arial, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.55rem 0.9rem;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(201, 165, 44, 0.18);
}
.btn-eu-ai-act:hover {
  background: var(--navy, #0A2540);
  color: var(--gold, #C9A52C);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(10, 37, 64, 0.25);
}
.btn-eu-ai-act .btn-eu-badge {
  font-size: 0.6rem;
  background: rgba(10, 37, 64, 0.18);
  padding: 0.15rem 0.4rem;
  border-radius: 2px;
  letter-spacing: 0.12em;
  font-weight: 800;
}
.btn-eu-ai-act:hover .btn-eu-badge {
  background: rgba(201, 165, 44, 0.25);
}

/* Mobile: compactar el botón */
@media (max-width: 960px) {
  .btn-eu-ai-act {
    padding: 0.4rem 0.65rem;
    font-size: 0.68rem;
    gap: 0.3rem;
  }
  .btn-eu-ai-act .btn-eu-badge {
    font-size: 0.55rem;
    padding: 0.1rem 0.3rem;
  }
}
@media (max-width: 480px) {
  .btn-eu-ai-act .btn-eu-badge { display: none; }
  .btn-eu-ai-act {
    padding: 0.4rem 0.6rem;
    font-size: 0.65rem;
  }
}

/* ============================================================
   v2.4 — Lead magnet EU AI Act · card destacada en recursos.html
   Sobreescribe los !important del CSS base de .resource-card
   con selectores de mayor especificidad (article.resource-card)
   ============================================================ */

/* MOBILE (default): card apilada vertical, full-width */
article.resource-card.resource-card-featured {
  grid-column: 1 / -1 !important;
  flex-direction: column !important;
  padding: 0 !important;
  border: 2px solid var(--gold) !important;
  background: linear-gradient(135deg, var(--cream) 0%, #faf6ed 100%) !important;
  position: relative !important;
  overflow: visible !important;
}
article.resource-card.resource-card-featured .resource-cover {
  width: 100% !important;
  margin: 0 !important;
  aspect-ratio: 16/9 !important;
  border: none !important;
  box-shadow: none !important;
  background: var(--navy) !important;
  border-radius: 0 !important;
  align-self: stretch !important;
}
article.resource-card.resource-card-featured .resource-cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
article.resource-card.resource-card-featured .resource-body {
  padding: 2rem 2rem 2.25rem !important;
}
article.resource-card.resource-card-featured .resource-tag {
  font-size: 0.78rem !important;
  letter-spacing: 0.15em !important;
  color: var(--gold) !important;
  font-weight: 700 !important;
  margin-bottom: 0.85rem !important;
}
article.resource-card.resource-card-featured h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem) !important;
  line-height: 1.1 !important;
  margin-bottom: 1.15rem !important;
  color: var(--navy) !important;
}
article.resource-card.resource-card-featured p {
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: var(--ink-soft) !important;
  margin-bottom: 1.5rem !important;
}
article.resource-card.resource-card-featured .btn-primary {
  display: inline-block !important;
  font-size: 0.9rem !important;
  padding: 0.95rem 1.85rem !important;
}

/* DESKTOP (>=861px): card horizontal, thumbnail izquierda + contenido derecha */
@media (min-width: 861px) {
  article.resource-card.resource-card-featured {
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0 !important;
  }
  article.resource-card.resource-card-featured .resource-cover {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    flex-shrink: 0 !important;
    aspect-ratio: 1/1 !important;
    align-self: stretch !important;
  }
  article.resource-card.resource-card-featured .resource-body {
    padding: 2.5rem 2.5rem 2.5rem !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  article.resource-card.resource-card-featured h2 {
    font-size: clamp(2rem, 3.2vw, 2.85rem) !important;
  }
  article.resource-card.resource-card-featured p {
    font-size: 1.1rem !important;
  }
}

/* Formulario landing — clase nueva sin conflicto con .resource-form */
.lead-magnet-form { display: block !important; }
.lead-magnet-form input,
.lead-magnet-form label {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* ============================================================
   v2.5 — Blog featured con preview ampliado (último del CMS)
   ============================================================ */

.blog-featured-tag {
  display: inline-block;
  background: var(--gold);
  color: var(--navy);
  font-family: var(--sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
}

.blog-featured-preview {
  font-family: var(--display);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 1rem 0 1.5rem;
}
.blog-featured-preview p {
  margin: 0 0 1rem;
}
.blog-featured-preview p:first-child {
  font-size: 1.05em;
  color: var(--ink);
}
.blog-featured-preview p:first-child::first-letter {
  font-family: var(--display);
  font-size: 3.5em;
  font-weight: 500;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.12em 0 0;
  color: var(--navy);
}
.blog-featured-preview h2,
.blog-featured-preview h3 {
  font-family: var(--display);
  font-size: 1.25rem;
  color: var(--navy);
  margin: 1.25rem 0 0.75rem;
}
.blog-featured-preview ul,
.blog-featured-preview ol {
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}
.blog-featured-preview blockquote {
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1rem;
  font-style: italic;
  margin: 1rem 0;
}

.blog-featured-cta {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.blog-featured-readtime {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--meta);
  letter-spacing: 0.05em;
}

/* Fallback: si no hay destacado del CMS, la lista ocupa el grid entero */
.blog-grid.blog-grid-no-featured {
  grid-template-columns: 1fr !important;
}
.blog-grid.blog-grid-no-featured .blog-list {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 1.5rem;
}
@media (max-width: 860px) {
  .blog-grid.blog-grid-no-featured .blog-list {
    grid-template-columns: 1fr !important;
  }
}

/* ============================================================
   v2.6 — Soporte Quill editor (alineados + bajada extracto)
   Para que el contenido del CMS conserve su formato editorial
   ============================================================ */

.blog-featured-preview .ql-align-justify { text-align: justify !important; }
.blog-featured-preview .ql-align-center  { text-align: center  !important; }
.blog-featured-preview .ql-align-right   { text-align: right   !important; }
.blog-featured-preview .ql-align-left    { text-align: left    !important; }

/* Bajada / dek: el extracto editorial entre el título y el preview */
.blog-featured-dek {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  line-height: 1.45;
  margin: 0.5rem 0 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}


/* ============================================================
   v3.0 — FIX DEFINITIVO MOBILE (mayo 2026)
   ============================================================
   Soluciona dos bugs acumulados:

   1. MENÚ MÓVIL no aparece: línea 3013 redefine .nav-toggle
      como display:none sin media query. Y el botón EU AI ACT
      en .nav-right ocupa demasiado espacio en móvil, apretando
      al hamburguesa hasta ocultarlo visualmente.

   2. BLOG solo muestra featured en móvil: línea 3070 fuerza
      .blog-grid a 2 columnas SIN media query con !important.

   Este bloque va al final del archivo para garantizar que
   sobreescribe cualquier regla anterior por cascada CSS.
   ============================================================ */

/* ----------------------------------------------------------
   FIX 1 — BLOG: una sola columna en móvil
   ---------------------------------------------------------- */

@media (max-width: 960px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
  }

  /* En móvil el destacado ya no necesita aspect-ratio fijo grande */
  .blog-featured-img {
    aspect-ratio: 16/10 !important;
    max-height: 240px !important;
  }

  /* Los items del listado: más compactos pero legibles */
  .blog-list {
    margin-top: 0.5rem;
  }
}

/* ----------------------------------------------------------
   FIX 2 — MENÚ MÓVIL: hamburguesa visible y bien posicionado
   ---------------------------------------------------------- */

@media (max-width: 960px) {
  /* El botón hamburguesa: visible, contraste alto, tamaño táctil */
  .nav-toggle {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 5px !important;
    width: 44px !important;
    height: 44px !important;
    padding: 10px !important;
    background: var(--navy) !important;
    border: none !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    z-index: 1001 !important;
    position: relative !important;
  }

  .nav-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    background: var(--cream) !important;
    border-radius: 1px;
    transition: all 0.3s;
  }

  /* Animación X cuando el menú está abierto */
  body.menu-open .nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  body.menu-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.menu-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Bloquear scroll del body cuando el menú está abierto */
  body.menu-open {
    overflow: hidden;
  }

  /* .nav-right: que no aplaste al hamburguesa */
  .nav-right {
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
  }
}

/* ----------------------------------------------------------
   FIX 3 — MÓVIL PEQUEÑO (≤480px): compactar EU AI ACT
   para liberar espacio al hamburguesa
   ---------------------------------------------------------- */

@media (max-width: 480px) {
  .btn-eu-ai-act {
    padding: 0.4rem 0.55rem !important;
    font-size: 0.6rem !important;
    letter-spacing: 0.05em !important;
  }

  .btn-eu-ai-act .btn-eu-badge {
    display: none !important;
  }

  /* Selector idioma más compacto */
  .lang-toggle button {
    padding: 0.3rem 0.45rem !important;
    font-size: 0.65rem !important;
  }

  /* Reducir un poco el gap entre elementos del nav-right */
  .nav-right {
    gap: 0.35rem !important;
  }
}

/* ----------------------------------------------------------
   FIX 4 — MÓVIL MUY PEQUEÑO (≤380px): solo logo + hamburguesa
   En pantallas muy pequeñas (iPhone SE, etc.) ocultamos el
   selector de idioma del nav (sigue accesible en el menú).
   ---------------------------------------------------------- */

@media (max-width: 380px) {
  .nav-right .lang-toggle {
    display: none !important;
  }
}


/* ============================================================
   v3.7 — FIX CRÍTICO: garantizar visibilidad de elementos .reveal
   ============================================================
   El sistema .reveal/.visible depende de que el JavaScript
   (IntersectionObserver en main.js) se ejecute correctamente.
   Si por cualquier motivo ese JS falla (error, bloqueador de
   scripts, latencia), el contenido del artículo queda invisible
   permanentemente (opacity: 0).

   Solución: fallback en CSS puro. Tras 1.5s sin recibir .visible,
   los elementos .reveal aparecen automáticamente con una animación
   suave. Cuando el JS funciona, sigue ganando él (la regla
   .reveal.visible cancela la animación-fallback).
   ============================================================ */

@keyframes a11y-reveal-fallback {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.reveal {
  /* Mantener la opacity: 0 inicial pero programar la aparición
     automática a los 1.5s si nadie añade .visible */
  animation: a11y-reveal-fallback 0.6s ease 1.5s forwards;
}

/* Cuando el JS sí añade .visible, ganan estas reglas */
.reveal.visible {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Si el usuario tiene "reducir movimiento" activo, no animar */
@media (prefers-reduced-motion: reduce) {
  .reveal {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}


/* ============================================================
   v3.8 — FIX: centrar sección "Biblioteca" (Nueve libros...)
   ============================================================
   La sección "Biblioteca" en la home tenía el eyebrow y el texto
   intro descentrados. Causa: el div primer hijo del .section-header
   estaba en display:flex con flex-direction:row (por defecto),
   poniendo el eyebrow a la izquierda del título en lugar de arriba.
   Y la línea decorativa del eyebrow (::before) se alineaba al texto
   pero sin ancla central.

   Solución: forzar columna y centrado explícito.
   ============================================================ */

.section-header > div:first-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  width: 100% !important;
}

.section-header .section-eyebrow {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.625rem !important;
}

.section-header .section-intro {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 64ch !important;
}


/* ============================================================
   OVERRIDE v30 — LOGO ESTRATÉGICAMENTE (marca paraguas)
   El logotipo es un lockup horizontal: se ajusta alto y ancho.
   ============================================================ */
.nav-brand img { height: 40px !important; max-width: 320px !important; }
@media (max-width: 720px) {
  .nav-brand img { height: 32px !important; max-width: 250px !important; }
}
.footer-brand .footer-logo,
.footer-logo { height: 42px !important; width: auto !important; max-width: 340px !important; }


/* ============================================================
   OVERRIDE v31 — ABOUT sin foto: columna única, texto legible
   ============================================================ */
.about-grid { grid-template-columns: 1fr !important; }
.about-grid .about-text { max-width: 820px; margin-inline: auto; }


/* ============================================================
   OVERRIDE v32 — SOBRE NOSOTROS
   ============================================================ */
.sobre-sec { padding: clamp(3.5rem,7vw,6rem) 0; text-align: center; }
.sobre-sec .container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 var(--gutter); }
.sobre-h2 { font-family: var(--display); font-size: var(--fs-h2); font-weight: 400;
  line-height: 1.14; margin: .4rem 0 1.7rem; color: var(--navy); }
.sobre-h2 em { font-style: italic; color: var(--gold); }
.sobre-p { font-family: var(--serif); font-size: var(--fs-lead); line-height: 1.62;
  color: var(--ink-soft); margin: 0 auto 1.15rem; max-width: 64ch; text-align: center; }
.sobre-p:last-child { margin-bottom: 0; }
.partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; margin-top: 2.2rem; }
.partner-card { background: var(--white); border: 1px solid var(--line);
  border-top: 3px solid var(--gold-soft); border-radius: var(--radius); padding: 2rem 1.9rem;
  text-align: center; }
.pc-name { font-family: var(--display); font-size: 1.55rem; color: var(--navy);
  line-height: 1.15; margin-bottom: .55rem; }
.pc-role { font-family: var(--sans); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.model-layers { display: flex; flex-direction: column; gap: 1rem; margin-top: 2.2rem; }
.model-layer { display: flex; flex-direction: column; align-items: center; text-align: center;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 2.2rem 2rem; }
.ml-num { font-family: var(--display); font-size: 2.6rem; line-height: 1; color: var(--gold-soft); margin-bottom: .55rem; }
.ml-title { font-family: var(--display); font-size: 1.35rem; color: var(--navy);
  margin-bottom: .45rem; line-height: 1.2; }
.ml-desc { font-family: var(--sans); font-size: 1rem; line-height: 1.62; color: var(--ink-soft); }
.advantage { background: var(--navy); }
.advantage .sobre-h2 { color: var(--cream); }
.advantage .sobre-h2 em { color: var(--gold-soft); }
.advantage .sobre-p { color: rgba(245,239,224,.82); }
.advantage .section-eyebrow { color: var(--gold-soft); }
.advantage .section-eyebrow::before { background: var(--gold-soft); }
.advantage .model-layer { background: rgba(255,255,255,.04); border-color: rgba(245,239,224,.14); }
.sobre-stats { display: flex; flex-wrap: wrap; gap: 1.6rem; margin-top: 1.6rem; }
.sobre-stat { flex: 1; min-width: 190px; border-top: 2px solid var(--gold-soft); padding-top: 1.1rem; text-align: center; }
.ss-val { font-family: var(--display); font-size: clamp(2.4rem,4vw,3.3rem); color: var(--navy); line-height: 1; }
.ss-lab { font-family: var(--sans); font-size: .92rem; color: var(--meta); margin-top: .55rem; line-height: 1.45; }
@media (max-width: 720px) {
  .partners-grid { grid-template-columns: 1fr; }
  .model-layer { grid-template-columns: 1fr; gap: .4rem; }
  .ml-num { font-size: 2rem; }
}


/* ============================================================
   OVERRIDE v33 — centrado total de Sobre nosotros (hero incluido)
   ============================================================ */
.sobre-hero { text-align: center; }
.sobre-hero .breadcrumb { justify-content: center; }
.sobre-hero .page-hero-lede { max-width: 56ch; margin-left: auto; margin-right: auto; }


/* ============================================================
   OVERRIDE v34 — NAV: hamburguesa accesible sobre el menú móvil
   ============================================================ */
@media (max-width: 960px) {
  .nav-toggle { position: relative; z-index: 1001; }
}