/* ============================================
   VISUAL NACERT — Brandbook 2026
   Tipografía: Outfit (todo) + Bricolage Grotesque (sólo wordmark)
   ============================================ */

:root {
  /* Colores oficiales del brandbook */
  --orange: #FD801D;
  --orange-deep: #E0670D;
  --orange-soft: #FFE9D4;
  --ink: #16140F;
  --ink-soft: #2A2620;
  --cream: #F5F1EA;
  --mist: #E9E4D9;
  --paper: #FFFFFF;
  --linen: #F5F1EA;       /* alias para mantener compatibilidad */
  --bone: #E9E4D9;
  --mute: #7A7466;
  --mute-light: #BAB4A6;
  --line: rgba(22, 20, 15, 0.08);
  --line-strong: rgba(22, 20, 15, 0.14);
  --line-light: rgba(255, 255, 255, 0.14);

  /* Degradados oficiales del brandbook */
  --grad-warm: linear-gradient(135deg, #FFFFFF 0%, #FFE7CE 45%, #FD801D 100%);
  --grad-ink: linear-gradient(135deg, #16140F 0%, #3A352D 55%, #FD801D 135%);
  --grad-icon: linear-gradient(135deg, #FFB061 0%, #FD801D 50%, #D75F0A 100%);

  /* Tipografía */
  --font-display: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-wordmark: "Bricolage Grotesque", "Outfit", system-ui, sans-serif;
  --font-serif: "Outfit", system-ui, sans-serif;  /* compat */
  --font-mono: "Outfit", system-ui, sans-serif;   /* compat */

  /* Layout */
  --container: 1440px;
  --gutter: clamp(20px, 4vw, 72px);
  --radius: 24px;
  --radius-lg: 36px;
  --radius-xl: 48px;

  /* Sombras premium */
  --shadow-sm: 0 1px 2px rgba(22, 20, 15, 0.04), 0 2px 6px rgba(22, 20, 15, 0.04);
  --shadow-md: 0 4px 12px rgba(22, 20, 15, 0.06), 0 12px 28px rgba(22, 20, 15, 0.08);
  --shadow-lg: 0 8px 24px rgba(22, 20, 15, 0.08), 0 24px 56px rgba(22, 20, 15, 0.12);

  /* Easings */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  background: var(--paper);
  color: var(--ink);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  cursor: none;
}

h1, h2, h3, h4, h5,
.hero__title,
.manifesto__title,
.stats__title,
.solutions__title,
.process__title,
.sectors__title,
.cta-final__title,
.sol__name,
.sector__name,
.step h4,
.nav__brand,
.footer__logo,
.footer__giant,
.logos__track {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
}

img, picture, svg {
  display: block;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: none; border: none; background: none; color: inherit; }

::selection { background: var(--orange); color: #fff; }

/* ============================================
   CURSOR
   ============================================ */
/* ============================================
   CUSTOM CURSOR · isotipo de hexágonos
   ============================================ */
.cursor,
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  /* Por encima de cualquier modal/overlay (cookies-modal 10000),
     pero NO durante el loader (10000) — se oculta mientras body
     no tenga .is-ready (lo añade el JS al terminar la carga). */
  z-index: 10050;
  will-change: transform;
  /* Estado inicial: oculto. Aparece al terminar el loader. */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease);
}
body.is-ready .cursor,
body.is-ready .cursor-dot {
  opacity: 1;
  visibility: visible;
}

/* Wrapper del cursor: un solo hexágono naranja del tamaño de un
   puntero estándar (~18px). Sustituye al isotipo completo. */
.cursor {
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  /* La opacity la gestiona el bloque .cursor,.cursor-dot de arriba
     en función de body.is-ready (oculto durante el loader). */
  /* Drop-shadow sutil para legibilidad sobre cualquier fondo */
  filter:
    drop-shadow(0 1px 2px rgba(22, 20, 15, 0.35))
    drop-shadow(0 0 1px rgba(243, 237, 224, 0.45));
}
.cursor svg {
  width: 100%;
  height: 100%;
  display: block;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
}
.cursor svg polygon {
  fill: var(--orange);
}

/* Hover sobre elementos interactivos: el hexágono crece un poco */
.cursor.is-hover svg {
  transform: scale(1.4);
}

/* Punto que sigue al mouse al instante — naranja, glow sutil */
.cursor-dot {
  width: 4px;
  height: 4px;
  background: var(--orange);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  /* La opacity la gestiona el bloque global en función de
     body.is-ready (oculto durante el loader). */
  box-shadow: 0 0 6px rgba(253, 128, 29, 0.55);
}
body.is-ready .cursor-dot { opacity: 0.9; }

@media (hover: none), (pointer: coarse) {
  body { cursor: auto; }
  button, a { cursor: pointer; }
  .cursor, .cursor-dot { display: none; }
}

/* ============================================
   LOADER
   ============================================ */
.loader {
  position: fixed;
  inset: 0;
  background: var(--ink);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
}
.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}
.loader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  color: var(--linen);
  text-align: center;
}

/* Isotipo animado · 5 hexágonos en secuencia + punto central */
.loader__mark {
  width: 104px;
  height: 104px;
  display: block;
  overflow: visible;
}
.loader-hex {
  fill: rgba(243, 237, 224, 0.16);
  transform-origin: center;
  transform-box: fill-box;
  animation: loaderHex 1.6s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  animation-delay: calc(var(--i) * 0.13s);
  will-change: transform, fill, opacity;
}
.loader-hex--center {
  /* El "núcleo" arranca con base más cálida */
  fill: rgba(253, 128, 29, 0.32);
}
.loader-dot {
  fill: var(--orange);
  transform-origin: center;
  transform-box: fill-box;
  animation: loaderDot 0.9s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes loaderHex {
  0%, 100% {
    fill: rgba(243, 237, 224, 0.14);
    transform: scale(0.88);
    opacity: 0.7;
  }
  40% {
    fill: var(--orange);
    transform: scale(1.08);
    opacity: 1;
  }
  70% {
    fill: rgba(253, 128, 29, 0.45);
    transform: scale(1);
    opacity: 0.95;
  }
}
@keyframes loaderDot {
  0%, 100% { transform: scale(0.65); opacity: 0.35; }
  50% { transform: scale(1.4); opacity: 1; }
}

.loader__wordmark {
  font-family: var(--font-wordmark);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "kern" 1, "liga" 1;
  font-size: 22px;
  letter-spacing: -0.012em;
  line-height: 1;
  color: var(--linen);
  display: inline-flex;
  align-items: baseline;
}
.loader__wordmark .visual { font-weight: 700; }
.loader__wordmark .nacert { font-weight: 500; margin-left: 0.045em; }

.loader__count {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--mute-light);
  margin-top: -8px;
}
.loader__count::after {
  content: '%';
  margin-left: 2px;
  opacity: 0.45;
}

/* Reduce motion: respetar preferencia del usuario */
@media (prefers-reduced-motion: reduce) {
  .loader-hex, .loader-dot { animation: none; }
  .loader-hex { fill: rgba(243, 237, 224, 0.45); }
  .loader-hex--center { fill: var(--orange); }
}

/* ============================================
   NAV
   ============================================ */
.nav {
  position: fixed;
  top: 24px;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  transform: translateY(-120%);
  transition: transform 0.8s var(--ease);
}
.nav.is-visible { transform: translateY(0); }
.nav.is-scrolled .nav__pill {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-color: rgba(14, 15, 10, 0.06);
  box-shadow: 0 12px 32px rgba(14, 15, 10, 0.06);
}

.nav__pill {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 10px 10px 10px 24px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(14, 15, 10, 0.06);
  border-radius: 100px;
  box-shadow: 0 8px 24px rgba(14, 15, 10, 0.04);
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.nav__brand .brand-mark {
  width: 34px;
  height: 34px;
}
.nav__brand .wordmark {
  font-size: 20px;
  letter-spacing: -0.01em;
}

.nav__links {
  display: flex;
  gap: 28px;
}
.nav__links a {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 400;
  opacity: 0.7;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__links a:hover,
.nav__links a.is-active { opacity: 1; color: var(--orange); }

.nav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.nav__lang {
  color: var(--ink);
  font-size: 12px;
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  opacity: 0.55;
  padding: 6px 8px;
}
.nav__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 0.3s var(--ease);
}
.nav__cta:hover { background: var(--orange); color: #fff; }
.nav__arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.nav__cta:hover .nav__arrow { transform: translateX(4px); }

@media (max-width: 960px) {
  .nav__links { display: none; }
  .nav__lang { display: none; }
  .nav__clients { display: none; }
  .nav__cta { display: none; }
  .nav__pill { gap: 12px; padding: 8px 8px 8px 18px; }
  .nav__brand .wordmark { font-size: 18px; }
}

/* ---------- Mobile burger + drawer ---------- */
.nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
  margin-left: 4px;
}
.nav__burger svg { width: 24px; height: 24px; display: block; }
.nav__burger path {
  transform-origin: center;
  transition: transform 0.3s var(--ease), opacity 0.2s var(--ease);
}
.nav__burger[aria-expanded="true"] .bl1 { transform: translateY(6px) rotate(45deg); }
.nav__burger[aria-expanded="true"] .bl2 { opacity: 0; }
.nav__burger[aria-expanded="true"] .bl3 { transform: translateY(-6px) rotate(-45deg); }

.nav__drawer {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 100px 24px 40px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  pointer-events: none;
}
.nav__drawer.is-open {
  transform: translateY(0);
  pointer-events: auto;
}
.nav__drawer__group {
  padding: 14px 0;
  border-bottom: 1px solid rgba(22, 20, 15, 0.08);
}
.nav__drawer__group h4 {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 10px;
  font-weight: 500;
}
.nav__drawer__group a {
  display: block;
  padding: 8px 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.nav__drawer__group a strong { font-weight: 600; color: var(--orange); }
.nav__drawer__cta { margin-top: 28px; align-self: flex-start; }

body.has-drawer-open { overflow: hidden; }

@media (max-width: 960px) {
  .nav__burger { display: inline-flex; }
}
@media (min-width: 961px) {
  .nav__drawer { display: none; }
}

/* ============================================
   UTILITIES
   ============================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* Énfasis brandbook: mismo Outfit, weight 500, color naranja (sin serif itálica) */
em {
  font-family: inherit;
  font-style: normal;
  font-weight: 500;
  letter-spacing: inherit;
  color: var(--orange);
}
.accent {
  color: var(--orange);
  font-family: inherit;
  font-style: normal;
  letter-spacing: inherit;
  font-weight: 500;
}
.accent--bold { font-weight: 700; }

/* ============================================
   WORDMARK · BRAND MARK
   ============================================ */
.wordmark {
  font-family: var(--font-wordmark);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  letter-spacing: -0.012em;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
}
.wordmark .visual { font-weight: 700; }
.wordmark .nacert { font-weight: 500; margin-left: 0.045em; }

/* Brand mark (SVG isotipo) — colores vía CSS vars */
.brand-mark {
  --mc: var(--ink);
  --ma: var(--orange);
  --md: var(--ink);
  display: inline-block;
  flex-shrink: 0;
}
.brand-mark.on-ink     { --mc: #fff; --ma: var(--orange); --md: var(--ink); }
.brand-mark.on-orange  { --mc: #fff; --ma: var(--ink);    --md: #fff; }
.brand-mark.mono-light { --mc: #fff; --ma: #fff;          --md: var(--ink); }
.brand-mark.mono-dark  { --mc: var(--ink); --ma: var(--ink); --md: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.eyebrow--light { color: rgba(243, 237, 224, 0.7); }
.eyebrow__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  display: inline-block;
}

/* ============================================
   BUTTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 24px;
  border-radius: 100px;
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: transform 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
  will-change: transform;
}
.btn--primary {
  background: var(--orange);
  color: #fff;
}
.btn--primary:hover {
  background: var(--ink);
  color: #fff;
}
.btn--ghost-light {
  background: transparent;
  color: var(--linen);
  border: 1px solid rgba(243, 237, 224, 0.3);
}
.btn--ghost-light:hover {
  background: rgba(243, 237, 224, 0.08);
  border-color: rgba(243, 237, 224, 0.5);
}
.btn--ghost-light .btn__play {
  background: rgba(243, 237, 224, 0.12);
  color: var(--linen);
}
.btn--ghost-light:hover .btn__play {
  background: rgba(243, 237, 224, 0.22);
}
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn--ghost:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn--ghost .btn__play {
  background: rgba(22, 20, 15, 0.08);
}
.btn--ghost:hover .btn__play {
  background: rgba(255, 255, 255, 0.15);
}
.btn--lg {
  padding: 20px 32px;
  font-size: 16px;
}
.btn__arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.btn:hover .btn__arrow { transform: translateX(6px); }
.btn__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(243, 237, 224, 0.15);
  font-size: 9px;
  padding-left: 2px;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
  transition: gap 0.3s var(--ease);
}
.link-arrow:hover { gap: 14px; }
.link-arrow--light { color: var(--linen); }

/* ============================================
   HERO — claro, vídeo a la derecha, scroll-scrub
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
}

/* Hero con scroll-scrub: 260vh para dejar espacio al scrub.
   .hero__pin queda pegado al viewport mientras el vídeo avanza. */
.hero--scrub {
  display: block;
  min-height: 260vh;
  overflow: visible;
}
.hero--scrub .hero__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background: var(--ink);
  color: var(--cream);
  isolation: isolate;
}

/* ============ HERO CINEMA ============
   El vídeo es el protagonista absoluto.
   Ocupa todo el viewport. El texto va superpuesto. */

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  /* Anti-rural: menos saturación, más contraste, más oscuro
     para que el texto cream/blanco respire encima del vídeo. */
  filter: saturate(0.62) contrast(1.12) brightness(0.6);
  transform: scale(1.04); /* evita borde si el filter genera bordes raros */
}

/* Multi-layer overlay para legibilidad + halo de marca */
.hero__media-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    /* Capa plana de oscuro a tamaño completo (sutil) */
    rgba(22, 20, 15, 0.22),
    /* Gradiente vertical para anclar el texto arriba y abajo */
    linear-gradient(180deg,
      rgba(22, 20, 15, 0.6) 0%,
      rgba(22, 20, 15, 0.28) 28%,
      rgba(22, 20, 15, 0.32) 60%,
      rgba(22, 20, 15, 0.82) 100%),
    /* Halo naranja sutil centrado */
    radial-gradient(38% 32% at 50% 50%, rgba(253, 128, 29, 0.14), transparent 78%);
}

/* Vignette de bordes (Mistral/Apple) */
.hero__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(130% 90% at 50% 50%, transparent 50%, rgba(22, 20, 15, 0.62) 100%);
}

/* Grano sutil sobre todo */
.hero__grain {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 3;
}

/* SHELL · texto superpuesto, columna única */
.hero__shell {
  position: relative;
  z-index: 4;
  height: 100%;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* Padding inferior generoso para que los CTAs respiren dentro
     del pin y queden bien separados del ticker que viene después. */
  padding: 130px var(--gutter) 200px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 22px;
  color: var(--cream);
}

.hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: rgba(245, 241, 234, 0.72);
}
.hero__meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  color: rgba(245, 241, 234, 0.55);
  text-transform: uppercase;
}

/* H1 cinemático — 4 líneas balanceadas */
.hero__title {
  align-self: center;
  margin: 0;
  font-family: var(--font-sans);
  /* Tamaño moderado: caben las 4 líneas con holgura inferior
     respecto al ticker, sin perder presencia. */
  font-size: clamp(42px, 6.2vw, 108px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  color: var(--cream);
  max-width: 1180px;
  text-shadow: 0 2px 30px rgba(22, 20, 15, 0.35);
}
.hero__line {
  display: block;
  overflow: hidden;
  /* Padding inferior generoso para no cortar los descenders (g, p)
     y margin negativo que compensa para mantener el tightness. */
  padding-bottom: 0.22em;
  margin-bottom: -0.14em;
}
.hero__line > span {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.hero__title em {
  font-weight: 500;
  color: var(--orange);
  font-style: normal;
}

.hero__bottom {
  align-self: end;
  max-width: 720px;
  display: flex;
  flex-direction: column;
}
.hero__lead {
  max-width: 620px;
}
.hero__lead p {
  /* Lead compacto: deja respirar al H1 y a los CTAs dentro
     del viewport del pin sin pegarse al ticker. */
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.5;
  color: rgba(245, 241, 234, 0.92);
  margin: 0 0 18px;
  max-width: 560px;
}
.hero__lead p strong { color: var(--orange); font-weight: 500; }

.hero__pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 22px;
  align-items: center;
}
.hero__pillars-dot { color: rgba(245, 241, 234, 0.32); }

.hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.hero__scroll {
  position: absolute;
  bottom: 28px;
  right: var(--gutter);
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(245, 241, 234, 0.55);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  z-index: 5;
}
.hero__scroll-line {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, rgba(245, 241, 234, 0.45), transparent);
  position: relative;
  overflow: hidden;
}
.hero__scroll-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--orange);
  transform: translateX(-100%);
  animation: scrollLine 2.4s var(--ease) infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

@media (max-width: 880px) {
  .hero--scrub .hero__pin { min-height: 620px; }
  .hero__shell { padding: 120px var(--gutter) 200px; gap: 20px; }
  .hero__title { font-size: clamp(38px, 10vw, 72px); line-height: 1; }
  .hero__lead p { font-size: 15px; }
  .hero__scroll { display: none; }
  /* En mobile: bajamos el frame y lo movemos hacia la izquierda
     para que los hexágonos queden detrás del texto y el hex
     naranja inferior entre por completo en el viewport. Scale
     compensa el translate para no dejar borde negro a la
     derecha. El velo oscuro evita que la imagen compita con
     el copy. */
  .hero__video {
    object-position: center 78%;
    transform: scale(1.4) translateX(-12%);
  }
  /* Swap lead: en mobile mostramos sólo la versión corta */
  .hero__lead-full { display: none; }
  .hero__lead-short { display: block; }
}
@media (min-width: 881px) {
  .hero__lead-short { display: none; }
  /* Velo oscuro denso en la mitad superior (donde está el copy)
     y más translúcido abajo para dejar respirar el hex animado. */
  .hero__media-glow {
    background:
      linear-gradient(180deg,
        rgba(22, 20, 15, 0.74) 0%,
        rgba(22, 20, 15, 0.60) 40%,
        rgba(22, 20, 15, 0.48) 65%,
        rgba(22, 20, 15, 0.78) 100%);
  }
}
@media (max-width: 480px) {
  .hero__top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero__title { font-size: 38px; }
}

/* ============================================
   TICKER
   ============================================ */
.ticker {
  background: var(--ink);
  color: var(--linen);
  padding: 36px 0;
  overflow: hidden;
  border-top: 1px solid rgba(243, 237, 224, 0.08);
  border-bottom: 1px solid rgba(243, 237, 224, 0.08);
}
.ticker__track {
  display: flex;
  gap: 0;
  animation: ticker 40s linear infinite;
  width: max-content;
}
.ticker__group {
  display: flex;
  align-items: center;
  gap: 48px;
  padding-right: 48px;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.ticker__sep {
  display: inline-block;
  width: 22px;
  height: 19px;
  flex-shrink: 0;
  color: var(--orange);
  vertical-align: middle;
}
.ticker__sep polygon { fill: var(--orange); }
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ============================================
   MANIFIESTO
   ============================================ */
.manifesto {
  background: var(--paper);
  padding: 140px 0 160px;
}
.manifesto__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.manifesto__year {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mute);
}
.manifesto__title {
  font-size: clamp(40px, 6.4vw, 104px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.04em;
  max-width: 1200px;
}
.manifesto__foot {
  margin-top: 64px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: end;
}
.manifesto__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--mute);
  max-width: 520px;
}
@media (max-width: 768px) {
  .manifesto__foot { grid-template-columns: 1fr; }
}

/* ============================================
   BRAND STATEMENT — full-bleed con isotipo en bosque
   ============================================ */
.brand-statement {
  position: relative;
  min-height: 88vh;
  padding: clamp(120px, 14vh, 200px) 0;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.brand-statement__bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  /* Composición: el hexágono naranja con la perla queda al lado derecho.
     El copy en la izquierda respira sobre el oscuro del overlay. */
  background-position: right center;
  background-color: var(--ink);
  z-index: 0;
}
.brand-statement__overlay {
  position: absolute;
  inset: 0;
  /* Gradient horizontal: oscuro al lado del texto (izq), más translúcido
     en el lado del hex naranja (der). Plus tinte general arriba/abajo. */
  background:
    linear-gradient(90deg,
      rgba(22, 20, 15, 0.88) 0%,
      rgba(22, 20, 15, 0.70) 35%,
      rgba(22, 20, 15, 0.42) 65%,
      rgba(22, 20, 15, 0.30) 100%),
    linear-gradient(180deg,
      rgba(22, 20, 15, 0.18) 0%,
      transparent 40%,
      rgba(22, 20, 15, 0.35) 100%);
  z-index: 1;
}
@media (max-width: 880px) {
  .brand-statement__bg { background-position: 75% center; }
  .brand-statement__overlay {
    background:
      linear-gradient(180deg,
        rgba(22, 20, 15, 0.78) 0%,
        rgba(22, 20, 15, 0.55) 45%,
        rgba(22, 20, 15, 0.82) 100%);
  }
}
.brand-statement__content {
  position: relative;
  z-index: 2;
}
.brand-statement__title {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.6vw, 96px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 24px 0 56px;
  max-width: 1100px;
}
.brand-statement__title em {
  color: var(--orange);
  font-weight: 500;
}
.brand-statement__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  max-width: 1100px;
}
.brand-statement__foot .caption {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 12px;
}
.brand-statement__foot p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.88);
  max-width: 480px;
}
@media (max-width: 760px) {
  .brand-statement__foot { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   SHOWCASE
   ============================================ */
.showcase {
  background: var(--paper);
  padding: 40px 0 120px;
}
.showcase__card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 620px;
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 6vw, 80px);
  color: #fff;
  isolation: isolate;
}
.showcase__media {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform 1.4s var(--ease);
  will-change: transform;
}
.showcase__card:hover .showcase__media { transform: scale(1.04); }
.showcase__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 15, 10, 0.55) 0%, rgba(14, 15, 10, 0.92) 100%),
    linear-gradient(90deg, rgba(14, 15, 10, 0.85) 0%, rgba(14, 15, 10, 0.25) 70%);
  z-index: 1;
}
.showcase__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
}
.showcase__title {
  margin: 20px 0 24px;
  font-size: clamp(36px, 4.4vw, 72px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.showcase__lead {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 540px;
}
.showcase__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(8px);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: #fff;
}

/* ============================================
   STATS
   ============================================ */
.stats {
  background: var(--paper);
  padding: 60px 0 140px;
}
.stats__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 72px;
  flex-wrap: wrap;
  gap: 24px;
}
.stats__title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  max-width: 600px;
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--line);
  padding-top: 40px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-right: 24px;
}
.stat__num {
  font-size: clamp(60px, 7vw, 112px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 1;
  color: var(--ink);
}
.stat__lbl {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.4;
  max-width: 220px;
}
@media (max-width: 960px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .stats__grid { grid-template-columns: 1fr; }
}
.stats__source {
  margin: 48px 0 0;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, rgba(245, 241, 234, 0.4));
  text-align: center;
}

/* ============================================
   LOGOS
   ============================================ */
.logos {
  background: var(--paper);
  padding: 0 0 100px;
}
.logos__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 12px;
}
.logos__line {
  font-size: 14px;
  color: var(--mute);
  max-width: 380px;
}
.logos__marquee {
  overflow: hidden;
  width: 100%;
}
.logos__track {
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.05em;
  /* Tamaño más compacto: caben 5-7 marcas a la vez en pantalla
     en lugar de 2-3, con velocidad de scroll más fluida. */
  font-size: clamp(18px, 1.8vw, 26px);
  color: var(--ink);
  animation: ticker 32s linear infinite;
  width: max-content;
  padding-right: 28px;
}
.logos__track .dot { color: var(--orange); opacity: 0.7; }
.logos__hex {
  width: 0.6em;
  height: 0.52em;
  color: var(--orange);
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================
   SOLUTIONS (sticky/pinned)
   ============================================ */
.solutions {
  position: relative;
  /* Degradado oficial Negativo·Ink del brandbook: ink → ink-soft → brasa naranja */
  background: var(--grad-ink);
  color: var(--linen);
  padding: 140px 0 160px;
  overflow: hidden;
}
.solutions__bg {
  position: absolute;
  inset: 0;
  /* Capa superpuesta con radials suaves para reforzar la "brasa"
     y dar textura al gradiente lineal sin saturarlo. */
  background:
    radial-gradient(900px 600px at 100% 100%, rgba(253, 128, 29, 0.18), transparent 60%),
    radial-gradient(700px 500px at 10% 0%, rgba(58, 53, 45, 0.45), transparent 60%);
  pointer-events: none;
}
.solutions::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}
/* Cabecera de la sección · centrada */
.solutions__head {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 760px;
  margin: 0 auto 70px;
}
.solutions__title {
  margin: 24px 0 22px;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.solutions__lead {
  font-size: 17px;
  color: rgba(243, 237, 224, 0.78);
  line-height: 1.55;
  margin: 0 auto 24px;
  max-width: 560px;
}
.solutions__head .link-arrow--light { color: var(--orange); }

/* ===== Grid Plataforma · cards rectangulares estilo Apple ===== */
.platform-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 1120px;
  margin: 0 auto;
}
.platform-card {
  position: relative;
  padding: 38px 34px 34px;
  min-height: 280px;
  border-radius: 22px;
  color: var(--linen);
  overflow: hidden;
  /* Glassmorphism sutil sobre fondo ink: ligeramente más claro
     arriba-izquierda, neutro al centro, profundo abajo-derecha. */
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.055) 0%,
      rgba(255, 255, 255, 0.018) 40%,
      rgba(0, 0, 0, 0.18) 100%);
  /* Borde "lit" Apple: highlight 1px arriba + outline general fino
     + sombra exterior profunda para flotar sobre el fondo. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 18px 30px rgba(0, 0, 0, 0.42);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s var(--ease),
    background 0.5s var(--ease);
}

/* Glow naranja sutil que sube desde abajo en hover (pseudo) */
.platform-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 50% at 50% 110%,
    transparent 0%,
    transparent 100%);
  transition: background 0.5s var(--ease);
  z-index: 0;
}
.platform-card > * { position: relative; z-index: 1; }

.platform-card:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.02) 40%,
      rgba(0, 0, 0, 0.16) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 0 0 1px rgba(253, 128, 29, 0.42),
    0 28px 44px rgba(0, 0, 0, 0.5);
}
.platform-card:hover::after {
  background: radial-gradient(70% 50% at 50% 110%,
    rgba(253, 128, 29, 0.28) 0%,
    rgba(253, 128, 29, 0.06) 50%,
    transparent 80%);
}

/* Tipografía */
.platform-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange);
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 8px;
}
.platform-card h4 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.85vw, 28px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 4px;
  color: #fff;
}
.platform-card__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 237, 224, 0.45);
  padding-bottom: 16px;
  margin-bottom: 4px;
  position: relative;
  display: inline-block;
}
.platform-card__tag::after {
  /* Hairline divisor estilo Apple */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: rgba(243, 237, 224, 0.18);
}
.platform-card p {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(243, 237, 224, 0.72);
  margin: 6px 0 0;
}

@media (max-width: 880px) {
  .platform-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .platform-card { min-height: 240px; padding: 30px 26px 26px; }
  .platform-card h4 { font-size: 20px; }
}
@media (max-width: 480px) {
  .platform-grid { grid-template-columns: 1fr; max-width: 420px; }
  .platform-card { min-height: 200px; padding: 28px 24px 24px; }
  .platform-card p { font-size: 13.5px; }
}

/* ============================================
   PROCESS
   ============================================ */
/* ============================================
   PARTNER BAND · puente plataforma → proceso
   ============================================ */
.partner-band {
  background: var(--paper);
  padding: 110px 0 120px;
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.partner-band__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 60%;
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
}
.partner-band__veil {
  /* Wash linen radial: la imagen respira en los bordes
     (camino + hills + sol) y el centro queda velado para
     que el texto ink mantenga contraste cómodo. */
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 70% at 50% 50%,
      rgba(245, 241, 234, 0.88) 0%,
      rgba(245, 241, 234, 0.55) 45%,
      rgba(245, 241, 234, 0.15) 80%,
      transparent 100%),
    radial-gradient(50% 60% at 50% 50%, rgba(253, 128, 29, 0.06), transparent 70%);
  z-index: 1;
  pointer-events: none;
}
.partner-band > .container { position: relative; z-index: 2; }
.partner-band .eyebrow { justify-content: center; }
.partner-band__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 22px auto 22px;
  max-width: 800px;
}
.partner-band__lead {
  font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.78;
  max-width: 680px;
  margin: 0 auto 26px;
}
.partner-band .link-arrow {
  display: inline-flex;
  font-size: 14px;
}

.process {
  /* Fondo cream warm para que las step cards blancas/glass
     destaquen y se genere un "cambio de modo" claro tras la
     sección Plataforma (ink). */
  background: var(--cream);
  padding: 140px 0 160px;
}
.process__head {
  margin-bottom: 80px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 24px;
}
.process__title {
  font-size: clamp(36px, 4.4vw, 72px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 900px;
}
.process__row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
/* Step cards · misma estética glass que .platform-card pero
   en modo claro sobre fondo paper/cream. */
.step {
  position: relative;
  padding: 38px 32px 34px;
  min-height: 280px;
  border-radius: 22px;
  color: var(--ink);
  overflow: hidden;
  /* Glass claro: blanco con tinte mist en la diagonal opuesta */
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.78) 45%,
      rgba(233, 228, 217, 0.55) 100%);
  /* Highlight superior + outline interna fina + sombra exterior */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(22, 20, 15, 0.06),
    0 18px 30px rgba(22, 20, 15, 0.07);
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s var(--ease),
    background 0.5s var(--ease);
}

/* Glow naranja sutil desde abajo en hover */
.step::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 50% at 50% 110%,
    transparent 0%,
    transparent 100%);
  transition: background 0.5s var(--ease);
  z-index: 0;
}
.step > * { position: relative; z-index: 1; }

.step:hover {
  transform: translateY(-4px);
  background:
    linear-gradient(160deg,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 250, 240, 0.95) 45%,
      rgba(255, 231, 206, 0.5) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(253, 128, 29, 0.42),
    0 28px 44px rgba(253, 128, 29, 0.14);
}
.step:hover::after {
  background: radial-gradient(70% 50% at 50% 110%,
    rgba(253, 128, 29, 0.14) 0%,
    rgba(253, 128, 29, 0.04) 50%,
    transparent 80%);
}

.step__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange);
  font-weight: 500;
  opacity: 0.9;
  margin-bottom: 12px;
}
.step__icon {
  width: 56px;
  height: 50px;
  display: block;
  color: var(--ink);
  margin: 4px 0 24px;
  overflow: visible;
  transition: transform 0.5s var(--ease);
}
.step:hover .step__icon { transform: scale(1.06); }
.step h4 {
  font-family: var(--font-display);
  font-size: clamp(20px, 1.85vw, 26px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 14px;
  padding-bottom: 14px;
  position: relative;
  color: var(--ink);
}
.step h4::after {
  /* Hairline divisor estilo Apple, consistente con .platform-card */
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: rgba(22, 20, 15, 0.18);
}
.step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
  margin: 0;
}
@media (max-width: 960px) {
  .process__row { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .process__row { grid-template-columns: 1fr; }
}

/* ============================================
   SECTORS
   ============================================ */
.sectors {
  background: var(--linen);
  color: var(--ink);
  padding: 140px 0 160px;
}
.sectors__head {
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.sectors__title {
  margin-top: 24px;
  font-size: clamp(36px, 4.4vw, 72px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 1100px;
}
.sectors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.sector {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #2a3a22;
  background-blend-mode: normal;
  display: flex;
  align-items: flex-end;
  padding: 16px;
  isolation: isolate;
  transition: transform 0.5s var(--ease);
}
.sector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 8, 0.25) 0%, rgba(10, 12, 8, 0.55) 50%, rgba(10, 12, 8, 0.95) 100%);
  z-index: 1;
  transition: opacity 0.4s var(--ease);
}
.sector::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 15, 10, 0.55), rgba(253, 128, 29, 0.55));
  z-index: 1;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.sector:hover { transform: scale(0.98); }
.sector:hover::after { opacity: 1; }

/* Variante sin foto: gradient brand + isotipo grabado */
.sector--alt {
  background: var(--grad-ink, linear-gradient(135deg, #1c1a14 0%, #2a2620 100%));
}
.sector--alt::before {
  background: linear-gradient(180deg, rgba(253, 128, 29, 0.10) 0%, rgba(10, 12, 8, 0.55) 70%, rgba(10, 12, 8, 0.95) 100%);
}
.sector--alt .sector__name {
  font-family: inherit;
  font-style: normal;
}

/* ============================================
   TL;DR · resumen answer-first para LLMs y lectores
   ============================================ */
.tldr {
  display: block;
  width: 100%;
  max-width: 840px;
  box-sizing: border-box;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(22, 20, 15, 0.06);
  border-left: 3px solid var(--orange);
  padding: 32px 36px 34px;
  border-radius: 4px 16px 16px 4px;
  margin: 96px auto 96px;
  box-shadow: 0 8px 32px rgba(22, 20, 15, 0.06);
}
.tldr--dark {
  background: rgba(245, 241, 234, 0.04);
  border-color: rgba(245, 241, 234, 0.08);
  border-left-color: var(--orange);
  box-shadow: none;
  color: var(--linen);
}
.tldr__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 14px;
}
.tldr__eyebrow::before {
  content: "";
  width: 18px;
  height: 1px;
  background: var(--orange);
}
.tldr__body p {
  font-size: 17px;
  line-height: 1.55;
  margin: 0 0 10px;
  color: inherit;
}
.tldr__body p:last-child { margin-bottom: 0; }
.tldr__body strong { color: var(--ink); font-weight: 600; }
.tldr--dark .tldr__body strong { color: var(--linen); }
.tldr__body a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.tldr__body a:hover { text-decoration-thickness: 2px; }
.tldr__qa {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}
.tldr__qa-item {
  padding-left: 14px;
  border-left: 2px solid rgba(253, 128, 29, 0.32);
}
.tldr__qa-q {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft, #777);
  margin-bottom: 4px;
}
.tldr--dark .tldr__qa-q { color: rgba(245, 241, 234, 0.55); }
.tldr__qa-a {
  font-size: 15.5px;
  line-height: 1.5;
  margin: 0;
}
@media (max-width: 720px) {
  .tldr { padding: 24px 22px; margin: 56px auto 56px; }
  .tldr__body p { font-size: 16px; }
}

/* ============================================
   QUÉ ES · bloque explícito Qué/Para quién/Cómo
   ============================================ */
.que-es {
  padding: 100px 0 80px;
  background: var(--paper, #FFFFFF);
}
.que-es__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 48px;
}
.que-es__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px;
  background: var(--linen);
  border-radius: 18px;
  border: 1px solid rgba(22, 20, 15, 0.06);
}
.que-es__card-eyebrow {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.que-es__card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
}
.que-es__card p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft, #555);
  margin: 0;
}
@media (max-width: 880px) {
  .que-es__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* ============================================
   CULTIVOS · índice editorial minimal
   ============================================ */
.cultivos {
  padding: 120px 0 160px;
  background: var(--linen);
  color: var(--ink);
}
.cultivos .section__head { border-bottom: 1px solid var(--line); }
.cultivos .section__lead { margin-top: 32px; max-width: 720px; }
.cultivos__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  margin-top: 64px;
  align-items: start;
}
.cultivos__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--line);
}
.cultivos__list li { border-bottom: 1px solid var(--line); }
.cultivo-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 24px;
  padding: 28px 0;
  color: var(--ink);
  text-decoration: none;
  transition: padding 0.3s var(--ease), color 0.2s var(--ease);
  position: relative;
}
.cultivo-row::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--orange);
  opacity: 0;
  transform: translateX(-12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.cultivo-row:hover { padding-left: 18px; }
.cultivo-row:hover::before { opacity: 1; transform: translateX(0); }
.cultivo-row__num {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--ink-soft, #777);
  transition: color 0.2s var(--ease);
}
.cultivo-row__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  font-weight: 400;
  letter-spacing: -0.025em;
  line-height: 1.05;
  transition: color 0.2s var(--ease);
}
.cultivo-row__meta {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft, #777);
  white-space: nowrap;
}
.cultivo-row:hover .cultivo-row__name { color: var(--orange); font-style: italic; }
.cultivo-row:hover .cultivo-row__num { color: var(--orange); }

/* Preview lateral sticky con parallax sutil */
.cultivos__preview {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cultivos__preview-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--ink);
}
.cultivos__preview-img {
  position: absolute;
  inset: -6%;
  background-size: cover;
  background-position: center;
  transition: opacity 0.5s var(--ease), transform 0.8s var(--ease), background-image 0.6s var(--ease);
  will-change: transform;
}
.cultivos__preview.is-empty .cultivos__preview-img { opacity: 0; }
.cultivos__preview-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--grad-ink, linear-gradient(135deg, #1c1a14 0%, #2a2620 100%));
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.cultivos__preview-fallback svg { width: 36%; opacity: 0.18; }
.cultivos__preview.is-empty .cultivos__preview-fallback { opacity: 1; }
.cultivos__preview-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #888);
  text-align: right;
}

@media (max-width: 880px) {
  .cultivos__layout { grid-template-columns: 1fr; gap: 40px; }
  .cultivos__preview { display: none; }
  .cultivo-row { grid-template-columns: 40px 1fr; }
  .cultivo-row__meta { grid-column: 1 / -1; padding-left: 64px; }
}

/* ============================================
   FOOTER · banda de reconocimientos oficiales
   ============================================ */
.footer__seals {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  margin: 48px auto 0;
  max-width: 760px;
  padding: 18px 28px;
  background: var(--orange);
  border-radius: 12px;
  overflow: hidden;
}
.footer__seals::before {
  content: "Avalado por";
  position: absolute;
  top: 6px;
  left: 12px;
  font-family: var(--font-mono, monospace);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}
.seal {
  display: flex;
  align-items: center;
  justify-content: center;
}
.seal img {
  max-height: 44px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* Logos rasterizados a color (PYME, Nación Emprendedora): card blanca
   compacta para que respiren sobre el naranja */
.seal:nth-child(1) img,
.seal:nth-child(2) img {
  background: #FFFFFF;
  padding: 5px 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(22, 20, 15, 0.08);
}
.seal:nth-child(1) img { max-height: 52px; }
.seal:nth-child(2) img { max-height: 32px; }
/* Logo Generalitat-IVF ya es blanco transparente: sin card */
.seal:nth-child(3) img { max-height: 30px; }

@media (max-width: 880px) {
  .footer__seals {
    gap: 18px;
    padding: 22px 18px 14px;
    border-radius: 10px;
  }
  .footer__seals::before { left: 14px; top: 8px; }
}

/* Variante scroll horizontal · selector compacto */
.sectors--scroll .sectors__head { margin-bottom: 48px; }
.sectors__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(24px, calc((100vw - 1280px) / 2 + 24px));
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 8px;
}
.sectors__scroller::-webkit-scrollbar { display: none; }
.sectors__track {
  display: flex;
  gap: 14px;
  padding: 0 max(24px, calc((100vw - 1280px) / 2 + 24px));
}
.sector--mini {
  flex: 0 0 240px;
  aspect-ratio: 3 / 4;
  scroll-snap-align: start;
  padding: 20px;
}
.sector--mini .sector__name {
  font-size: clamp(20px, 2vw, 26px);
}
.sector--mini .sector__meta {
  top: 16px;
  right: 16px;
  font-size: 10px;
  padding: 5px 8px;
}
@media (max-width: 720px) {
  .sector--mini { flex-basis: 200px; }
}

.sector__name {
  position: relative;
  z-index: 2;
  font-size: clamp(14px, 1.3vw, 17px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--linen);
}
.sector__meta {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  background: rgba(243, 237, 224, 0.12);
  backdrop-filter: blur(8px);
  padding: 6px 10px;
  border-radius: 100px;
  color: var(--linen);
}
@media (max-width: 960px) {
  .sectors__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .sectors__grid { grid-template-columns: 1fr; }
}

/* ============================================
   CTA FINAL
   ============================================ */
.cta-final {
  position: relative;
  padding: 180px 0 200px;
  color: var(--linen);
  overflow: hidden;
  /* Fallback bajo el overlay: si el parallax desplaza .cta-final__bg
     queda un margen sin foto y el body blanco asomaba en franja. */
  background-color: var(--ink, #16140F);
}
.cta-final__bg {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  background-color: #1a2614;
  will-change: transform;
}
.cta-final__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(14, 15, 10, 0.82) 0%, rgba(14, 15, 10, 0.96) 100%),
    radial-gradient(900px 600px at 50% 0%, rgba(253, 128, 29, 0.22), transparent 60%);
}
.cta-final .container {
  position: relative;
  z-index: 2;
  text-align: center;
}
.cta-final__title {
  margin: 32px auto 24px;
  font-size: clamp(54px, 7.8vw, 128px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.96;
  max-width: 1200px;
}
.cta-final__title--light { font-weight: 300; }
.cta-final__title--light .accent { font-weight: 300; }
.cta-final__lead {
  font-size: 18px;
  color: rgba(243, 237, 224, 0.75);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.55;
}
.cta-final__actions {
  display: inline-flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  background: var(--linen);
  color: var(--ink);
  padding: 80px 0 0;
  border-top: 1px solid var(--line);
  overflow: hidden;
}
.footer__top {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 80px;
  padding-bottom: 64px;
  border-bottom: 1px solid var(--line);
}
.footer__brand p {
  margin-top: 20px;
  font-size: 15px;
  color: var(--mute);
  max-width: 280px;
  line-height: 1.55;
}
.footer__social {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.footer__social-label {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 4px;
}
.footer__social a {
  padding: 8px 14px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink);
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__social a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer__logo .brand-mark {
  width: 32px;
  height: 32px;
}
.footer__logo .wordmark {
  font-size: 26px;
  color: var(--ink);
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.footer__col h5 {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 20px;
}
.footer__col a {
  display: block;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.78;
  padding: 4px 0;
  line-height: 1.5;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.footer__col a:hover { color: var(--orange); opacity: 1; }
.footer__contact-line {
  display: block;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  line-height: 1.5;
  padding: 2px 0;
}
.footer__contact-meta {
  font-size: 13px !important;
  color: var(--mute) !important;
  opacity: 0.75 !important;
  margin-bottom: 4px;
}

.footer__bottom {
  padding: 28px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--mute);
  flex-wrap: wrap;
  gap: 12px;
}
.footer__legal {
  display: flex;
  gap: 20px;
}
.footer__legal a { transition: color 0.2s var(--ease); }
.footer__legal a:hover { color: var(--orange); }

.footer__giant {
  font-family: var(--font-wordmark);
  font-variation-settings: "wdth" 100;
  font-feature-settings: "kern" 1, "liga" 1;
  font-size: clamp(80px, 22vw, 320px);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.85;
  text-align: center;
  margin: 40px -10px -8% -10px;
  color: var(--ink);
  white-space: nowrap;
  user-select: none;
  display: flex;
  justify-content: center;
}
.footer__giant .visual { font-weight: 700; }
.footer__giant .nacert { font-weight: 500; margin-left: 0.045em; color: var(--orange); }

@media (max-width: 960px) {
  .footer__top { grid-template-columns: 1fr; gap: 48px; }
  .footer__cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .footer__cols { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================
   INNER PAGES — Hero compacto
   ============================================ */
.page-hero {
  position: relative;
  min-height: 76vh;
  display: flex;
  align-items: flex-end;
  color: var(--linen);
  overflow: hidden;
  padding-bottom: 80px;
}
.page-hero__media {
  position: absolute;
  inset: 0;
}
.page-hero__image {
  position: absolute;
  inset: -5%;
  background-size: cover;
  background-position: center;
  background-color: #1a2614;
  will-change: transform;
}
.page-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 700px at 80% 100%, rgba(253, 128, 29, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(22, 20, 15, 0.78) 0%, rgba(22, 20, 15, 0.65) 30%, rgba(22, 20, 15, 0.96) 100%),
    linear-gradient(90deg, rgba(22, 20, 15, 0.7) 0%, rgba(22, 20, 15, 0.2) 70%);
}
.page-hero__watermark {
  position: absolute;
  top: 50%;
  right: -6%;
  transform: translateY(-44%);
  width: 56vw;
  max-width: 680px;
  aspect-ratio: 1 / 1;
  opacity: 0.08;
  pointer-events: none;
  z-index: 1;
  --mc: #fff;
  --ma: var(--orange);
  --md: #fff;
}
.page-hero__watermark svg { width: 100%; height: 100%; }
@media (max-width: 768px) {
  .page-hero__watermark { right: -28%; width: 100vw; opacity: 0.06; }
}
.page-hero__shell {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 140px var(--gutter) 0;
}
.page-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60px;
}
.page-hero__crumb {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(243, 237, 224, 0.6);
  text-transform: uppercase;
}
.page-hero__crumb a { transition: color 0.2s var(--ease); }
.page-hero__crumb a:hover { color: var(--orange); }
.page-hero__title {
  font-family: var(--font-display);
  font-size: clamp(48px, 7.4vw, 128px);
  font-weight: 500;
  line-height: 0.96;
  letter-spacing: -0.04em;
  max-width: 1200px;
  margin-bottom: 32px;
}
.page-hero__title em { color: var(--orange); font-weight: 500; }
.page-hero__lead {
  font-size: clamp(16px, 1.6vw, 20px);
  max-width: 620px;
  line-height: 1.5;
  color: rgba(243, 237, 224, 0.85);
}

/* ===== Variante cinemática (sectores) =====
   Hero más grande con imagen naranja a la derecha y texto a la izq.
   El render 3D tiene los hexágonos compuestos al lado derecho, así
   que oscurecemos solo la mitad izquierda para que el texto respire. */
.page-hero--cinema {
  min-height: 92vh;
  padding-bottom: 100px;
}
.page-hero--cinema .page-hero__image {
  /* Imagen panorámica: cover llena el container respetando
     proporciones. Anclada a la derecha — el cluster queda
     visible y el lado izquierdo queda naranja plano para el copy. */
  inset: 0;
  background-position: right center;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: var(--orange);
}
.page-hero--cinema .page-hero__overlay {
  /* Gradiente horizontal: muy oscuro a la izquierda (texto), claro
     a la derecha (donde está el cluster de hex). Sumamos vignette
     y sello inferior oscuro para anclar el lead y el crumb. */
  background:
    linear-gradient(90deg,
      rgba(22, 20, 15, 0.78) 0%,
      rgba(22, 20, 15, 0.55) 30%,
      rgba(22, 20, 15, 0.20) 60%,
      rgba(22, 20, 15, 0.05) 100%),
    linear-gradient(180deg,
      rgba(22, 20, 15, 0.20) 0%,
      transparent 35%,
      rgba(22, 20, 15, 0.45) 100%);
}
.page-hero--cinema .page-hero__title {
  /* Tamaño cinemático equiparable al H1 del home */
  font-size: clamp(48px, 7.6vw, 132px);
  letter-spacing: -0.035em;
  text-shadow: 0 2px 30px rgba(22, 20, 15, 0.35);
  max-width: 920px;
}
.page-hero--cinema .page-hero__lead {
  font-size: clamp(16px, 1.5vw, 19px);
  max-width: 560px;
}

@media (max-width: 880px) {
  .page-hero--cinema { min-height: 78vh; }
  .page-hero--cinema .page-hero__image {
    /* En móvil mantenemos cover (la imagen llena toda el área)
       posicionada al 80% para que el cluster quede a la derecha. */
    background-size: cover;
    background-position: 80% center;
  }
  .page-hero--cinema .page-hero__overlay {
    background:
      linear-gradient(180deg,
        rgba(22, 20, 15, 0.72) 0%,
        rgba(22, 20, 15, 0.45) 35%,
        rgba(22, 20, 15, 0.75) 100%);
  }
  .page-hero--cinema .page-hero__title { font-size: clamp(40px, 10vw, 72px); }
}

/* ============================================
   SECCIONES INTERIORES — comunes
   ============================================ */
.section {
  background: var(--paper);
  padding: 120px 0;
}
.section--dark {
  background: var(--ink);
  color: var(--linen);
}
.section__head {
  margin-bottom: 64px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 24px;
}
.section--dark .section__head { border-bottom-color: var(--line-light); }
.section__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 64px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin-top: 16px;
  max-width: 900px;
}
.section__title em { color: var(--orange); font-weight: 500; }
.section__lead {
  max-width: 760px;
  margin: -32px 0 56px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft, #555);
}

/* ============================================
   CONTACTO
   ============================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.3fr;
  gap: 80px;
}
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.contact-block h4 {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 12px;
}
.contact-block p {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--ink);
}
.contact-block p span {
  display: block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--mute);
  margin-top: 4px;
}
.contact-block a { color: inherit; transition: color 0.2s var(--ease); }
.contact-block a:hover { color: var(--orange); }
.contact-socials {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.contact-socials a {
  padding: 10px 16px;
  border-radius: 100px;
  border: 1px solid var(--line);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.01em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.contact-socials a:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.contact-form {
  background: var(--linen);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 56px);
  border: 1px solid var(--line);
}
.contact-form__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
}
.contact-form__head .eyebrow { color: var(--ink); }
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.contact-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.contact-form__field--full { grid-column: 1 / -1; }
.contact-form__field label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mute);
}
.contact-form__field input,
.contact-form__field select,
.contact-form__field textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--ink);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  outline: none;
}
.contact-form__field input:focus,
.contact-form__field select:focus,
.contact-form__field textarea:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(253, 128, 29, 0.15);
}
.contact-form__field textarea { resize: vertical; min-height: 110px; }
.contact-form__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.contact-form__chip {
  position: relative;
}
.contact-form__chip input { position: absolute; opacity: 0; pointer-events: none; }
.contact-form__chip span {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 100px;
  background: var(--paper);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 400;
  cursor: none;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.contact-form__chip input:checked + span {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.contact-form__chip:hover span { border-color: var(--orange); color: var(--orange); }
.contact-form__chip input:checked:hover + span { color: #fff; border-color: var(--ink); }
.contact-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--orange);
  color: #fff;
  padding: 18px 28px;
  border-radius: 100px;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.3s var(--ease);
  margin-top: 24px;
  border: none;
  cursor: none;
}
.contact-form__submit:hover { background: var(--ink); }
.contact-form__legal {
  margin-top: 16px;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.5;
}
.contact-form__legal a { text-decoration: underline; }

@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
  .contact-form__row { grid-template-columns: 1fr; }
}

/* ============================================
   CLIENTES / CASOS
   ============================================ */
.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 40px;
}
.stats-row .stat__num { font-size: clamp(48px, 6vw, 96px); }
@media (max-width: 760px) { .stats-row { grid-template-columns: repeat(2, 1fr); } }

.cases {
  display: flex;
  flex-direction: column;
  gap: 80px;
}
.case {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.case:nth-child(even) {
  grid-template-columns: 1fr 1.1fr;
}
.case:nth-child(even) .case__media { order: 2; }
.case__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #2a3a22;
}
.case__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 8, 0.5) 100%);
}
.case__tag {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
}
.case__num {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--orange);
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}
.case__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 16px;
}
.case__title em { color: var(--orange); font-weight: 500; }
.case__desc {
  font-size: 16px;
  color: var(--mute);
  line-height: 1.55;
  margin-bottom: 24px;
  max-width: 520px;
}
.case__kpis {
  display: flex;
  gap: 32px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.case__kpi { display: flex; flex-direction: column; gap: 2px; }
.case__kpi strong {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: currentColor;
}
.case__kpi span {
  font-size: 12px;
  color: currentColor;
  opacity: 0.55;
  letter-spacing: 0.04em;
}
.section--dark .case__title { color: #fff; }
.section--dark .case__desc { color: rgba(255, 255, 255, 0.7); }
@media (max-width: 960px) {
  .case, .case:nth-child(even) { grid-template-columns: 1fr; gap: 32px; }
  .case:nth-child(even) .case__media { order: 0; }
}

.client-sectors {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.client-sector {
  background: var(--linen);
  border-radius: var(--radius);
  padding: 32px;
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.client-sector:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.client-sector:hover h4 { color: var(--orange); }
.client-sector:hover li { color: rgba(255,255,255,0.7); }
.client-sector h4 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
  transition: color 0.3s var(--ease);
}
.client-sector ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.client-sector li {
  font-size: 13.5px;
  color: var(--mute);
  padding-right: 12px;
  border-right: 1px solid var(--line);
  transition: color 0.3s var(--ease);
}
.client-sector li:last-child { border-right: 0; }
@media (max-width: 760px) { .client-sectors { grid-template-columns: 1fr; } }

/* ============================================
   NOSOTROS / HISTORIA
   ============================================ */
.intro-block {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.intro-block__year {
  font-family: var(--font-display);
  font-size: clamp(80px, 12vw, 160px);
  font-weight: 500;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--orange);
}
.intro-block__year span {
  display: block;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--mute);
  text-transform: uppercase;
  margin-top: 16px;
}
.intro-block__body p {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 20px;
  color: var(--ink);
}
.intro-block__body p:last-child { margin-bottom: 0; }
.intro-block__body em { color: var(--orange); }
@media (max-width: 960px) { .intro-block { grid-template-columns: 1fr; gap: 32px; } }

.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.timeline__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
  padding: 40px 0;
  border-top: 1px solid var(--line);
}
.timeline__item:last-child { border-bottom: 1px solid var(--line); }
.timeline__year {
  font-family: var(--font-display);
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--orange);
}
.timeline__content h4 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 10px;
}
.timeline__content p {
  font-size: 15px;
  color: var(--mute);
  line-height: 1.55;
  max-width: 620px;
}
@media (max-width: 760px) {
  .timeline__item { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pillar {
  background: var(--linen);
  border-radius: var(--radius);
  padding: 40px 32px;
  border: 1px solid var(--line);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pillar:hover { background: var(--ink); color: #fff; transform: translateY(-4px); }
.pillar:hover .pillar__num { color: rgba(255,255,255,0.4); }
.pillar:hover p { color: rgba(255,255,255,0.75); }
.pillar__num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 24px;
}
.pillar h4 {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  margin-bottom: 12px;
}
.pillar p {
  font-size: 15px;
  color: var(--mute);
  line-height: 1.55;
  transition: color 0.3s var(--ease);
}
@media (max-width: 880px) { .pillars-grid { grid-template-columns: 1fr; } }

.founders-showcase {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 60px;
  align-items: center;
}
.founders-showcase img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.founders-showcase__copy p {
  font-size: 19px;
  line-height: 1.55;
  margin-bottom: 16px;
  color: var(--ink);
}
.founders-showcase__copy em {
  color: var(--orange);
  font-weight: 500;
}
@media (max-width: 880px) {
  .founders-showcase { grid-template-columns: 1fr; gap: 32px; }
}

/* Bios detalladas E-E-A-T */
.founders-bios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 64px;
}
.founder-bio {
  background: var(--linen);
  border-radius: 18px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  border: 1px solid rgba(22, 20, 15, 0.06);
}
/* SLIM — nombre + rol + LinkedIn */
.founders-bios--slim { margin-top: 48px; }
.founder-bio--slim {
  padding: 28px 32px;
  gap: 20px;
}
.founder-bio__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--linen);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  width: fit-content;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.founder-bio__linkedin:hover {
  background: var(--orange);
  transform: translateY(-1px);
}
@media (max-width: 640px) {
  .founders-bios { grid-template-columns: 1fr; }
}

/* NEXT GEN — bloque compacto de Carla (foto pequeña + texto) */
.nextgen {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  background: var(--linen);
  border: 1px solid rgba(22, 20, 15, 0.06);
  border-radius: 18px;
  padding: 24px 28px;
  margin-top: 32px;
}
.nextgen__photo {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(253, 128, 29, 0.14), rgba(22, 20, 15, 0.06));
  border: 1px dashed rgba(22, 20, 15, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.nextgen__photo[style*="background-image"] {
  background: var(--linen);
  background-size: cover;
  background-position: center;
  border-style: solid;
  border-color: rgba(22, 20, 15, 0.06);
}
.nextgen__photo[style*="background-image"] .nextgen__photo-placeholder { display: none; }
.nextgen__photo-placeholder {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(22, 20, 15, 0.4);
}
.nextgen__body { min-width: 0; }
.nextgen__role {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.nextgen h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 4px 0 12px;
  color: var(--ink);
}
.nextgen__facts {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nextgen__facts li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #555);
  padding-left: 14px;
  position: relative;
}
.nextgen__facts li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--orange);
}
.nextgen__facts li strong { color: var(--ink); }
.nextgen__quote {
  font-family: var(--font-display);
  font-size: 14.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  padding-left: 14px;
  border-left: 2px solid var(--orange);
}
@media (max-width: 640px) {
  .nextgen { grid-template-columns: 1fr; padding: 22px; gap: 20px; }
  .nextgen__photo { aspect-ratio: 4 / 3; max-width: 240px; }
}
.founder-bio__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(22, 20, 15, 0.08);
}
.founder-bio__role {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.founder-bio__head h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0;
}
.founder-bio__facts {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.founder-bio__facts li {
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
}
.founder-bio__facts li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--orange);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.founder-bio__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft, #555);
  border-left: 2px solid var(--orange);
  padding-left: 14px;
  margin: 4px 0 0;
}
@media (max-width: 880px) {
  .founders-bios { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; }
  .founder-bio { padding: 24px; }
}

/* ============================================
   GLOSARIO · página de referencia para LLMs
   ============================================ */
.glosario {
  padding: 100px 0 140px;
  background: var(--linen);
  color: var(--ink);
}
.glosario__index {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: 12px;
  margin-bottom: 56px;
  position: sticky;
  top: 88px;
  z-index: 5;
}
.glosario__index a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-radius: 6px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.glosario__index a:hover { background: var(--orange); color: #fff; }
.glosario__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}
.glosario__letter {
  font-family: var(--font-display);
  font-size: clamp(48px, 5vw, 88px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--orange);
  margin: 56px 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 160px;
}
.glosario__letter:first-of-type { margin-top: 0; }
.glosario__entry {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid rgba(22, 20, 15, 0.06);
  align-items: start;
}
.glosario__entry dt {
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 21px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
  scroll-margin-top: 160px;
}
.glosario__entry dd {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft, #444);
}
.glosario__entry dd a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.glosario__entry dd a:hover { text-decoration-thickness: 2px; }
.glosario__source {
  margin-top: 56px;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft, #666);
}
.glosario__source a {
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 720px) {
  .glosario__index { position: static; }
  .glosario__entry { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
}

/* ============================================
   FUTURO · bloque narrativo post-hero
   ============================================ */
.future {
  padding: 120px 0 100px;
  background: var(--paper, #FFFFFF);
  color: var(--ink);
}
.future__head { margin-bottom: 48px; }
.future__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.05;
  margin: 16px 0 0;
  max-width: 1000px;
}
.future__title em { color: var(--orange); font-weight: 500; }
.future__body {
  max-width: 760px;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.future__body p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft, #444);
  margin: 0;
}
.future__claim {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.4vw, 32px) !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  border-left: 3px solid var(--orange);
  padding-left: 18px;
}
@media (max-width: 880px) {
  .future { padding: 72px 0; }
  .future__body { margin-left: 0; }
}

/* ============================================
   DIFERENCIA · 3 pilares
   ============================================ */
.diff {
  padding: 100px 0;
  background: var(--linen);
  color: var(--ink);
}
.diff .section__lead {
  max-width: 820px;
  margin: -16px 0 56px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-soft, #444);
}
.diff__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.diff__card {
  position: relative;
  background: var(--paper, #FFFFFF);
  border-radius: 18px;
  border: 1px solid rgba(22, 20, 15, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.diff__card:hover {
  transform: translateY(-4px);
  border-color: rgba(253, 128, 29, 0.32);
  box-shadow: 0 18px 40px rgba(22, 20, 15, 0.08);
}
.diff__card__photo {
  aspect-ratio: 16 / 10;
  background-size: cover;
  background-position: center;
  background-color: #f0ece4;
}
.diff__card__body {
  padding: 28px 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.diff__num {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.16em;
  color: var(--orange);
}
.diff__card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.diff__card p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft, #555);
  margin: 0;
}
@media (max-width: 880px) {
  .diff__grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ============================================
   PARTNERS · Innovación y colaboración (logos institucionales)
   ============================================ */
.partners {
  padding: 100px 0;
  background: var(--ink);
  color: var(--linen);
}
.partners .section__head { border-bottom-color: rgba(245, 241, 234, 0.10); }
.partners .section__title { color: var(--linen); }
.partners .section__lead {
  max-width: 820px;
  margin: -16px 0 56px;
  font-size: 17px;
  line-height: 1.55;
  color: rgba(245, 241, 234, 0.72);
}
/* Marquee infinito horizontal — auto-anima para invitar al scroll */
.partners__marquee {
  overflow: hidden;
  padding: 8px 0;
  margin-top: -16px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.partners__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: partners-marquee 48s linear infinite;
  will-change: transform;
}
.partners__marquee:hover .partners__track,
.partners__marquee:focus-within .partners__track {
  animation-play-state: paused;
}
@keyframes partners-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .partners__track { animation: none; }
}
.partner {
  flex: 0 0 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  padding: 28px 22px;
  background: rgba(245, 241, 234, 0.03);
  border: 1px solid rgba(245, 241, 234, 0.08);
  border-radius: 14px;
  min-height: 130px;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.partner:hover {
  background: rgba(245, 241, 234, 0.06);
  border-color: rgba(253, 128, 29, 0.45);
  transform: translateY(-3px);
}
@media (max-width: 720px) {
  .partner { flex-basis: 220px; }
  .partners__track { animation-duration: 36s; }
}
.partner__tag {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}
.partner__name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--linen);
}
.partners__foot {
  margin-top: 32px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.5);
  text-align: center;
}
@media (max-width: 1080px) { .partners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .partners__grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================
   CAPACIDADES · grid compacto 3×2
   ============================================ */
.cap-section {
  padding: 100px 0 140px;
  background: var(--linen);
}
.cap-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.cap-card {
  background: var(--ink, #16140F);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  overflow: hidden;
  color: #fff;
  scroll-margin-top: 120px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}
.cap-card:hover {
  border-color: rgba(253, 128, 29, 0.42);
  box-shadow: 0 18px 40px rgba(22, 20, 15, 0.18);
}
.cap-card.is-open {
  border-color: rgba(253, 128, 29, 0.5);
  box-shadow: 0 22px 48px rgba(22, 20, 15, 0.22);
}
.cap-card__header {
  display: grid;
  grid-template-columns: 320px 1fr auto;
  align-items: stretch;
  width: 100%;
  padding: 0;
  background: transparent;
  border: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  min-height: 220px;
  transition: background 0.25s var(--ease);
}
.cap-card__header:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: -4px;
}
.cap-card__header:hover {
  background: rgba(253, 128, 29, 0.04);
}
.cap-card__media {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 220px;
}
.cap-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 55%, rgba(22, 20, 15, 0.55) 100%);
  pointer-events: none;
}
.cap-card__content {
  padding: 30px 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;
}
.cap-card__num {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--orange);
}
.cap-card__tag {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.cap-card__title {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 4px 0;
  color: #fff;
}
.cap-card__desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}
.cap-card__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  color: rgba(255, 255, 255, 0.55);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s var(--ease);
}
.cap-card__chevron svg { display: block; }
.cap-card__header:hover .cap-card__chevron { color: var(--orange); }
.cap-card.is-open .cap-card__chevron {
  transform: rotate(180deg);
  color: var(--orange);
}
.cap-card__panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.55s cubic-bezier(0.4, 0, 0.2, 1);
  background: var(--paper, #FFFFFF);
  color: var(--ink);
}
.cap-card.is-open .cap-card__panel { max-height: 3400px; }
.cap-card__panel-inner {
  padding: 4px 44px 44px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 48px;
  border-top: 1px solid rgba(22, 20, 15, 0.08);
}
.cap-card__section h3 {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 28px 0 12px;
  font-weight: 500;
}
.cap-card__section p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 10px;
}
.cap-card__section p:last-child { margin-bottom: 0; }
.cap-card__section ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cap-card__section li {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-soft, #4a463d);
  padding-left: 16px;
  position: relative;
}
.cap-card__section li strong { color: var(--ink); }
.cap-card__section li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--orange);
}
.cap-card__section li a {
  color: var(--ink);
  border-bottom: 1px dotted rgba(22, 20, 15, 0.3);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.cap-card__section li a:hover { color: var(--orange); border-color: var(--orange); }
.cap-card__section--intro {
  grid-column: 1 / -1;
  padding-bottom: 6px;
}
.cap-card__section--intro h3 { margin-top: 24px; }
.cap-card__section--wide { grid-column: 1 / -1; }

@media (max-width: 880px) {
  .cap-card__header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
  }
  .cap-card__media {
    grid-column: 1 / -1;
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .cap-card__media::after {
    background: linear-gradient(180deg, transparent 55%, rgba(22, 20, 15, 0.55) 100%);
  }
  .cap-card__content { padding: 24px 24px; }
  .cap-card__chevron { padding: 0 22px; }
  .cap-card__panel-inner {
    grid-template-columns: 1fr;
    padding: 4px 24px 32px;
    gap: 8px;
  }
  .cap-card.is-open .cap-card__panel { max-height: 5000px; }
}
.inline-cta {
  margin: 80px auto 24px;
  max-width: 760px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.inline-cta .eyebrow { justify-content: center; }
.inline-cta__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 4px 0 12px;
  color: var(--ink);
}
.inline-cta__title em {
  font-style: normal;
  color: var(--orange);
}
@media (max-width: 640px) {
  .inline-cta { margin: 56px auto 16px; }
  .inline-cta__title br { display: none; }
}
@media (max-width: 880px) {
  .cap-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .cap-card__media {
    aspect-ratio: 16 / 9;
    min-height: 0;
  }
  .cap-card__media::after {
    background: linear-gradient(180deg, transparent 55%, rgba(22, 20, 15, 0.55) 100%);
  }
  .cap-card__content { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .cap-section { padding: 64px 0 90px; }
}

/* ============================================
   CAPACIDADES · página Qué hacemos
   ============================================ */
.capacity-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px;
  background: var(--paper, #FFFFFF);
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: 14px;
  margin-bottom: 0;
}
.capacity-toc__link {
  flex: 1 1 auto;
  text-align: center;
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink);
  text-decoration: none;
  background: var(--linen);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.capacity-toc__link:hover {
  background: var(--orange);
  color: #fff;
}
.capacity {
  padding: 90px 0;
  scroll-margin-top: 100px;
}
.capacity__head {
  margin-bottom: 6px;
  padding-bottom: 0;
}
.capacity__head .section__title {
  margin-top: 8px;
}
.capacity .section__lead {
  margin: 0 0 40px;
  max-width: 900px;
}
.section__title--product {
  font-family: var(--font-display);
  font-size: clamp(40px, 5.4vw, 76px);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--orange);
}
.capacity__subline {
  margin: 12px 0 0;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft, #666);
}
.capacity__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 48px;
}
.capacity__col-title {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 16px;
}
.capacity__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.capacity__list li {
  font-size: 15px;
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
  color: var(--ink);
}
.capacity__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  background: var(--orange);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.capacity__foot {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.capacity__grid--secondary {
  grid-template-columns: 1fr 1fr;
  margin-top: 32px;
  padding-top: 32px;
  border-top: 1px dashed rgba(22, 20, 15, 0.1);
}
.capacity__grid--single {
  grid-template-columns: 1fr;
  max-width: 780px;
}
.capacity__prose {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  margin: 0;
}
.capacity__how {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--paper, #FFFFFF);
  border-left: 3px solid var(--orange);
  border-radius: 0 14px 14px 0;
  padding: 22px 28px;
  margin: 4px 0 32px;
  max-width: 920px;
  box-shadow: 0 6px 20px rgba(22, 20, 15, 0.05);
}
.capacity__how-label {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}
.capacity__how p {
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  color: var(--ink);
}
@media (max-width: 880px) {
  .capacity { padding: 60px 0; }
  .capacity__grid { grid-template-columns: 1fr; gap: 28px; }
  .capacity-toc { flex-direction: column; }
  .capacity-toc__link { text-align: left; }
}

/* Bloque "Glosario relacionado" para blog posts */
.glosario-related .glosario-related__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 16px 0 24px;
  color: var(--ink);
}
.glosario-related .glosario-related__title em {
  color: var(--orange);
  font-weight: 500;
}
.glosario-related .glosario-related__list {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft, #555);
  margin: 0 0 24px;
  max-width: 820px;
}
.glosario-related .glosario-related__list a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: color 0.2s var(--ease);
}
.glosario-related .glosario-related__list a:hover { color: var(--orange); }

/* Footer · fuentes oficiales con enlaces normativos */
.footer__sources {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid rgba(245, 241, 234, 0.08);
}
.footer__sources-label {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245, 241, 234, 0.55);
  margin-bottom: 16px;
}
.footer__sources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}
.footer__sources-list a {
  font-size: 12px;
  color: rgba(245, 241, 234, 0.6);
  text-decoration: none;
  border-bottom: 1px dotted rgba(245, 241, 234, 0.2);
  padding-bottom: 1px;
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__sources-list a:hover {
  color: var(--orange);
  border-bottom-color: var(--orange);
}

.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.founder {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #2a3a22;
  display: flex;
  align-items: flex-end;
  padding: 32px;
  isolation: isolate;
}
.founder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(10, 12, 8, 0.85) 100%);
  z-index: 1;
}
.founder__info { position: relative; z-index: 2; color: #fff; }
.founder__name {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 500;
  letter-spacing: -0.025em;
  display: block;
}
.founder__role {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.75);
  text-transform: uppercase;
}
@media (max-width: 760px) { .founders { grid-template-columns: 1fr; } }

/* Card destacada de reconocimiento (premio con foto) */
.recog-feature {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 24px;
}
.recog-feature__media {
  min-height: 380px;
  background-size: cover;
  background-position: center top;
  background-color: var(--ink);
  position: relative;
}
.recog-feature__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 20, 15, 0.10) 0%, transparent 55%);
}
.recog-feature__body {
  padding: 48px 52px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.recog-feature__body h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.recog-feature__body h3 em { color: var(--orange); font-style: normal; font-weight: 500; }
.recog-feature__body p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.82;
  margin: 0;
}
.recog-feature__body p strong { color: var(--ink); font-weight: 500; opacity: 1; }
.recog-feature__kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.recog-feature__kpis > div { display: flex; flex-direction: column; }
.recog-feature__kpis strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.recog-feature__kpis span {
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
@media (max-width: 880px) {
  .recog-feature { grid-template-columns: 1fr; }
  .recog-feature__media { min-height: 280px; }
  .recog-feature__body { padding: 32px 28px; }
}
@media (max-width: 520px) {
  .recog-feature__kpis { grid-template-columns: 1fr; gap: 10px; }
}

.recogs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.recogs--3 { grid-template-columns: repeat(3, 1fr); }
.recogs--2 { grid-template-columns: repeat(2, 1fr); max-width: 720px; }
/* Layout horizontal: icono a la izquierda, título+texto a la derecha */
.recogs--horizontal {
  max-width: none;
  gap: 20px;
  margin-bottom: 32px;
}
.recog--horizontal {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: center;
  padding: 22px 28px;
}
.recog--horizontal .recog__icon { margin-bottom: 0; flex-shrink: 0; }
.recog--horizontal .recog__content { display: flex; flex-direction: column; gap: 4px; }
.recog--horizontal h5 { margin-bottom: 0; }
@media (max-width: 640px) {
  .recog--horizontal { padding: 20px 22px; gap: 16px; }
}
/* Galería secundaria de fotos del acto (bajo el recog-feature principal) */
.recog-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 24px;
}
.recog-gallery__shot {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 14px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  transition: transform 0.4s var(--ease);
}
.recog-gallery__shot:hover { transform: scale(1.015); }
@media (max-width: 640px) {
  .recog-gallery { grid-template-columns: 1fr; }
}
/* Bloque destacado Endeavor — tema claro con acentos de su branding
   (fondo paper, teal + amarillo como acentos, formas decorativas) */
:root {
  --endeavor-navy: #0A0733;
  --endeavor-teal: #29E5C8;
  --endeavor-yellow: #FFC935;
}
.recog-endeavor {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px 60px;
  margin-top: 56px;
  margin-bottom: 32px;
  overflow: hidden;
  isolation: isolate;
}
.recog-endeavor::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--endeavor-teal);
  z-index: 1;
}
.recog-endeavor__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.recog-endeavor__semicircle {
  position: absolute;
  top: -140px;
  right: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: var(--endeavor-teal);
  opacity: 0.18;
}
.recog-endeavor__triangle {
  position: absolute;
  bottom: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  background: var(--endeavor-teal);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.12;
}
.recog-endeavor__body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}
.recog-endeavor__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute, #6b6660);
}
.recog-endeavor__eyedot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--endeavor-yellow);
  box-shadow: 0 0 0 3px rgba(255, 201, 53, 0.22);
}
.recog-endeavor__body h3 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
  color: var(--ink);
}
.recog-endeavor__body h3 em {
  color: #14B5A0; /* teal oscurecido para legibilidad sobre paper */
  font-style: normal;
  font-weight: 500;
}
.recog-endeavor__body p {
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(22, 20, 15, 0.72);
  margin: 0;
}
.recog-endeavor__body p strong { color: var(--ink); font-weight: 500; }
.recog-endeavor__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--endeavor-teal);
  color: var(--endeavor-navy);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  width: fit-content;
  margin-top: 8px;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 8px 20px rgba(41, 229, 200, 0.22);
}
.recog-endeavor__link:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(41, 229, 200, 0.34);
}
@media (max-width: 760px) {
  .recog-endeavor {
    padding: 40px 28px;
    margin-top: 36px;
  }
  .recog-endeavor__semicircle {
    width: 220px;
    height: 220px;
    top: -110px;
    right: -60px;
  }
  .recog-endeavor__triangle {
    width: 140px;
    height: 140px;
    bottom: -40px;
    right: -30px;
  }
}
.recog {
  background: var(--linen);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: left;
  transition: background 0.3s var(--ease);
}
.recog:hover { background: var(--paper); }
.recog__icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 16px;
}
.recog h5 {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.recog p { font-size: 13px; color: var(--mute); line-height: 1.5; }
@media (max-width: 880px) { .recogs { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .recogs { grid-template-columns: 1fr; } }

/* ============================================
   APP / LAB / ACADEMY — Bloques específicos
   ============================================ */

/* Features grid (App) */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.feature {
  background: var(--paper);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: background 0.3s var(--ease);
}
.feature:hover { background: var(--linen); }
.feature__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--orange);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}
.feature h4 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.feature p {
  font-size: 14px;
  color: var(--mute);
  line-height: 1.55;
}
@media (max-width: 960px) { .features-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .features-grid { grid-template-columns: 1fr; } }

/* Big device showcase (App) */
.device-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.device-showcase__media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #1a2614;
}
.device-showcase__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(253, 128, 29, 0.0), rgba(14, 15, 10, 0.15));
}
.device-showcase__content { max-width: 540px; }
.device-showcase__content h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 20px;
}
.device-showcase__content h3 em { color: var(--orange); font-weight: 500; }
.device-showcase__content p {
  font-size: 17px;
  color: var(--mute);
  line-height: 1.55;
  margin-bottom: 24px;
}
@media (max-width: 960px) { .device-showcase { grid-template-columns: 1fr; gap: 32px; } }

/* App store badges */
.app-stores {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 14px;
  background: var(--ink);
  color: #fff;
  transition: background 0.3s var(--ease);
}
.store-badge:hover { background: var(--orange); }
.store-badge__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #fff;
}
.store-badge__icon svg,
svg.store-badge__icon { display: block; }
.store-badge__txt { display: flex; flex-direction: column; line-height: 1.1; }
.store-badge__txt small { font-size: 10px; opacity: 0.7; letter-spacing: 0.04em; text-transform: uppercase; }
.store-badge__txt strong {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
}

/* Areas grid (Lab) */
.areas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.area {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.area:hover { background: var(--linen); transform: translateY(-3px); }
.area__num {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 4px;
}
.area h4 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.area p {
  font-size: 15px;
  color: var(--mute);
  line-height: 1.55;
}
@media (max-width: 760px) { .areas-grid { grid-template-columns: 1fr; } }

/* Big media block (Lab) */
.media-block {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 520px;
  background-size: cover;
  background-position: center;
  background-color: #1a2614;
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 5vw, 72px);
  color: #fff;
}
.media-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 12, 8, 0.2) 30%, rgba(10, 12, 8, 0.9) 100%);
}
.media-block__content { position: relative; z-index: 2; max-width: 700px; }
.media-block h3 {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin-bottom: 16px;
}
.media-block h3 em { color: var(--orange); font-weight: 500; }
.media-block p {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.55;
}

/* Lab key data row */
.kd-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.kd { display: flex; flex-direction: column; gap: 4px; }
.kd__lbl {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.kd__val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.025em;
  color: var(--ink);
}
@media (max-width: 760px) { .kd-row { grid-template-columns: repeat(2, 1fr); } }

/* Academy programs */
.programs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.program {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.program:hover { background: var(--ink); color: #fff; transform: translateY(-3px); }
.program:hover p { color: rgba(255,255,255,0.7); }
.program:hover .program__meta { color: var(--orange); }
.program__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.program__meta {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.program__type {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  color: var(--mute);
}
.program:hover .program__type { border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.7); }
.program h4 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.program p {
  font-size: 15px;
  color: var(--mute);
  line-height: 1.55;
  transition: color 0.3s var(--ease);
}
.program__foot {
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 760px) { .programs { grid-template-columns: 1fr; } }

/* ============================================
   HORIZONTAL SCROLLER
   ============================================ */
.scroller {
  position: relative;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: 0 var(--gutter);
}
.scroller__track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  cursor: grab;
  padding-bottom: 32px;
}
.scroller__track::-webkit-scrollbar { display: none; }
.scroller__track.is-grabbing { cursor: grabbing; user-select: none; }
.scroller__track > * { scroll-snap-align: start; flex-shrink: 0; }

/* Solution card (big) */
.sol-card {
  width: clamp(280px, 38vw, 480px);
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 36px;
  display: flex;
  flex-direction: column;
  min-height: 460px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.4s var(--ease);
}
.sol-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(500px 400px at 80% 100%, rgba(253, 128, 29, 0.4), transparent 60%),
    radial-gradient(400px 400px at 0% 0%, rgba(253, 128, 29, 0.08), transparent 50%);
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  z-index: 0;
}
.sol-card:hover { transform: translateY(-4px); }
.sol-card:hover::before { opacity: 1; }
.sol-card > * { position: relative; z-index: 1; }
.sol-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 56px;
}
.sol-card__num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}
.sol-card__tag {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  color: var(--orange);
}
.sol-card__name {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.sol-card__desc {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 24px;
  flex: 1;
}
.sol-card__feats {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 28px;
}
.sol-card__feat {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.85);
  padding-left: 18px;
  position: relative;
}
.sol-card__feat::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--orange);
}
.sol-card__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}

/* Mini card for "más soluciones" */
.mini-card {
  width: clamp(220px, 26vw, 300px);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 200px;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.mini-card:hover { background: var(--linen); transform: translateY(-3px); }
.mini-card__cat {
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--orange);
}
.mini-card__name {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
.mini-card__desc {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
  flex: 1;
}
.mini-card__more {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
}

/* Scroller controls */
.scroller__controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32px;
  gap: 24px;
}
.scroller__progress {
  flex: 1;
  height: 2px;
  background: var(--line);
  position: relative;
  overflow: hidden;
  border-radius: 2px;
}
.scroller__progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: var(--orange);
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.2s linear;
}
.scroller__arrows {
  display: flex;
  gap: 8px;
}
.scroller__arrow {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: var(--ink);
  cursor: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.scroller__arrow:hover {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.scroller__arrow:disabled { opacity: 0.3; cursor: default; }

/* Two-col text block (about/intro) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: start;
}
.two-col__head {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.4vw, 60px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.two-col__head em { color: var(--orange); font-weight: 500; }
.two-col__body p {
  font-size: 17px;
  line-height: 1.55;
  margin-bottom: 16px;
  color: var(--ink);
}
.two-col__body em { color: var(--orange); }
@media (max-width: 960px) { .two-col { grid-template-columns: 1fr; gap: 32px; } }

/* ============================================
   FAQ
   ============================================ */
.faq-section {
  background: var(--paper);
  padding: 100px 0 140px;
}
.faq-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 80px;
  align-items: start;
}
.faq-toc {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.faq-toc__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  margin-bottom: 18px;
}
.faq-toc__link {
  font-size: 14px;
  color: var(--ink);
  opacity: 0.65;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.faq-toc__link:hover,
.faq-toc__link.is-active {
  color: var(--orange);
  opacity: 1;
}
.faq-content { min-width: 0; }
.faq-group { margin-bottom: 64px; scroll-margin-top: 120px; }
.faq-group__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 32px;
  padding-bottom: 18px;
  border-bottom: 2px solid var(--ink);
}
.faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.faq-item summary {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.4vw, 21px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.35;
  color: var(--ink);
  transition: color 0.2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.3s var(--ease);
}
.faq-item:hover summary { color: var(--orange); }
.faq-item:hover summary::after {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.faq-item[open] summary::after {
  content: "×";
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  transform: rotate(0deg);
  font-size: 24px;
  font-weight: 300;
}
.faq-item[open] summary { color: var(--orange); }
.faq-item__body {
  padding-top: 14px;
  max-width: 760px;
}
.faq-item__body p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--mute);
  margin: 0;
}
@media (max-width: 880px) {
  .faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .faq-toc {
    position: relative;
    top: auto;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line);
  }
  .faq-toc__label { width: 100%; margin-bottom: 8px; }
  .faq-toc__link {
    padding: 8px 14px;
    border-radius: 100px;
    border: 1px solid var(--line);
    font-size: 13px;
  }
  .faq-toc__link.is-active { background: var(--ink); color: #fff; border-color: var(--ink); }
}

/* ============================================
   COOKIE CONSENT
   ============================================ */
.cookies {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  z-index: 999;
  display: flex;
  justify-content: center;
  padding: 0 24px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.cookies.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }

.cookies__panel {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 920px;
  padding: 18px 22px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(22, 20, 15, 0.08);
  border-radius: 28px;
  box-shadow: 0 12px 32px rgba(22, 20, 15, 0.12), 0 4px 12px rgba(22, 20, 15, 0.06);
}
.cookies__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  --mc: var(--ink);
  --ma: var(--orange);
  --md: var(--ink);
}
.cookies__icon svg { width: 32px; height: 32px; }

.cookies__body { flex: 1; min-width: 0; }
.cookies__body h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.cookies__body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--mute);
}
.cookies__link {
  color: var(--orange);
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.cookies__link:hover { color: var(--orange-deep); }

.cookies__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.cookies__btn {
  padding: 12px 18px;
  font-size: 13.5px;
  border-radius: 100px;
}

@media (max-width: 760px) {
  .cookies { bottom: 16px; padding: 0 12px; }
  .cookies__panel {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 18px;
    border-radius: 22px;
  }
  .cookies__icon { display: none; }
  .cookies__actions { width: 100%; }
  .cookies__btn { flex: 1; justify-content: center; }
}

/* ============================================
   REVEAL ANIMATIONS (initial states)
   ============================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Stagger within a grid container */
.process__row [data-reveal]:nth-child(1),
.sectors__grid [data-reveal]:nth-child(1),
.stats__grid [data-reveal]:nth-child(1),
.solutions__list [data-reveal]:nth-child(1) { transition-delay: 0s; }

.process__row [data-reveal]:nth-child(2),
.sectors__grid [data-reveal]:nth-child(2),
.stats__grid [data-reveal]:nth-child(2),
.solutions__list [data-reveal]:nth-child(2) { transition-delay: 0.08s; }

.process__row [data-reveal]:nth-child(3),
.sectors__grid [data-reveal]:nth-child(3),
.stats__grid [data-reveal]:nth-child(3),
.solutions__list [data-reveal]:nth-child(3) { transition-delay: 0.16s; }

.process__row [data-reveal]:nth-child(4),
.sectors__grid [data-reveal]:nth-child(4),
.stats__grid [data-reveal]:nth-child(4),
.solutions__list [data-reveal]:nth-child(4) { transition-delay: 0.24s; }

.sectors__grid [data-reveal]:nth-child(5),
.solutions__list [data-reveal]:nth-child(5) { transition-delay: 0.32s; }

.sectors__grid [data-reveal]:nth-child(6),
.solutions__list [data-reveal]:nth-child(6) { transition-delay: 0.40s; }

/* ============================================
   LEGAL PAGES (Aviso legal · Privacidad · Cookies)
   ============================================ */
.legal-prose {
  font-family: var(--font-sans);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
  max-width: 760px;
}
.legal-prose .legal-updated {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 40px;
}
.legal-prose .legal-updated::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--orange);
}
.legal-prose .legal-group {
  margin-bottom: 56px;
  scroll-margin-top: 120px;
}
.legal-prose .legal-group__num {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  margin-bottom: 14px;
  display: block;
}
.legal-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.legal-prose h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 32px 0 12px;
}
.legal-prose p {
  margin: 0 0 16px;
  color: var(--ink);
  opacity: 0.82;
}
.legal-prose strong { color: var(--ink); font-weight: 500; opacity: 1; }
.legal-prose em { color: var(--orange); font-style: normal; font-weight: 500; }
.legal-prose a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.2s var(--ease);
}
.legal-prose a:hover { opacity: 0.7; }
.legal-prose ul {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}
.legal-prose ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  color: var(--ink);
  opacity: 0.82;
}
.legal-prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 8px; height: 7px;
  background: var(--orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.legal-prose .legal-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 28px 32px;
  margin: 24px 0;
}
.legal-prose .legal-card p:last-child { margin-bottom: 0; }
.legal-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
}
.legal-prose table th,
.legal-prose table td {
  text-align: left;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal-prose table th {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  border-bottom: 1px solid var(--ink);
}
.legal-prose table td { color: var(--ink); opacity: 0.85; }
@media (max-width: 820px) {
  .legal-prose table, .legal-prose thead, .legal-prose tbody, .legal-prose th, .legal-prose td, .legal-prose tr { display: block; }
  .legal-prose thead { display: none; }
  .legal-prose tr { border-bottom: 1px solid var(--line); padding: 12px 0; }
  .legal-prose td { padding: 4px 0; border: none; }
}

/* ============================================
   NAV DROPDOWN — "Plataforma" submenu
   ============================================ */
.nav__dropdown { position: relative; display: inline-flex; align-items: center; }
/* Bridge invisible debajo del toggle: extiende el área de hover
   sobre el gap entre el toggle y el menú, evitando que el menú se
   cierre cuando el cursor cruza el hueco. */
.nav__dropdown::after {
  content: '';
  position: absolute;
  top: 100%;
  left: -10px;
  right: -10px;
  height: 22px;
  pointer-events: auto;
}
.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--ink);
  opacity: 0.7;
  /* Igualar exactamente .nav__links a — el toggle es un <span>,
     no un <a>, así que no hereda automáticamente el font-size. */
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1;
  transition: opacity 0.2s var(--ease), color 0.2s var(--ease);
  user-select: none;
}
.nav__dropdown-toggle::after {
  content: '';
  width: 5px; height: 5px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg);
  margin-left: 1px;
  margin-top: -3px;
  transition: transform 0.2s var(--ease), margin-top 0.2s var(--ease);
}
.nav__dropdown:hover .nav__dropdown-toggle,
.nav__dropdown:focus-within .nav__dropdown-toggle { opacity: 1; color: var(--orange); }
.nav__dropdown:hover .nav__dropdown-toggle::after,
.nav__dropdown:focus-within .nav__dropdown-toggle::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.nav__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, 12px);
  background: #fff;
  border-radius: 18px;
  padding: 12px;
  box-shadow: 0 24px 60px rgba(22, 20, 15, 0.14), 0 0 0 1px var(--line);
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.18s var(--ease), visibility 0.18s var(--ease), transform 0.18s var(--ease);
  pointer-events: none;
  z-index: 1000;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 4px);
  pointer-events: auto;
}
.nav__dropdown-menu a {
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink) !important;
  opacity: 1 !important;
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav__dropdown-menu a:hover {
  background: var(--cream);
  color: var(--orange) !important;
}
.nav__dropdown-menu .dd-cap {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  padding: 8px 14px 4px;
}

/* ===== Mega dropdown (Ecosistema · 2 columnas + CTA) ===== */
.nav__dropdown-menu--mega {
  min-width: 520px;
  padding: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
}
.nav__dropdown-menu--mega .nav__dropdown-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 12px;
  padding: 4px;
  background: rgba(22, 20, 15, 0.025);
}
.nav__dropdown-menu--mega .dd-cap {
  padding: 10px 14px 6px;
  color: var(--orange);
  font-weight: 500;
}
.nav__dropdown-menu--mega a {
  font-size: 13.5px;
}
.nav__dropdown-cta {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding: 12px 14px !important;
  text-align: center;
  background: var(--orange) !important;
  color: #fff !important;
  border-radius: 10px;
  font-size: 13px !important;
  letter-spacing: 0.02em;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(253, 128, 29, 0.25);
  transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.nav__dropdown-cta:hover {
  background: var(--ink) !important;
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(22, 20, 15, 0.28);
}
@media (max-width: 720px) {
  .nav__dropdown-menu--mega { min-width: 320px; grid-template-columns: 1fr; }
}

/* ===== Eco Apps · 3 cards grandes (página ecosistema) ===== */
.eco-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.eco-app {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 36px 32px 32px;
  background: var(--paper);
  border-radius: 22px;
  text-decoration: none;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    inset 0 0 0 1px rgba(22, 20, 15, 0.06),
    0 18px 30px rgba(22, 20, 15, 0.06);
  transition:
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.5s var(--ease),
    background 0.5s var(--ease);
}
.eco-app::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(70% 50% at 50% 110%, transparent 0%, transparent 100%);
  transition: background 0.5s var(--ease);
}
.eco-app:hover {
  transform: translateY(-4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 0 0 1px rgba(253, 128, 29, 0.42),
    0 28px 44px rgba(253, 128, 29, 0.14);
}
.eco-app:hover::after {
  background: radial-gradient(70% 50% at 50% 110%, rgba(253, 128, 29, 0.10) 0%, transparent 75%);
}
.eco-app > * { position: relative; z-index: 1; }

.eco-app__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--cream);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.eco-app__icon svg {
  width: 36px;
  height: 36px;
  --mc: var(--ink);
  --ma: var(--orange);
  --md: var(--ink);
}
.eco-app__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
}
.eco-app h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2vw, 28px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 4px 0 8px;
  color: var(--ink);
}
.eco-app p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.72;
  margin: 0 0 18px;
  flex: 1;
}
.eco-app__cta {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);
  margin-top: auto;
  transition: transform 0.3s var(--ease);
  display: inline-flex;
}
.eco-app:hover .eco-app__cta { transform: translateX(4px); }

@media (max-width: 960px) {
  .eco-apps { grid-template-columns: 1fr; }
}

/* ============================================
   SECTORES — page (verticales del brief)
   ============================================ */
.sector-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: var(--paper);
}
.sector-toc__link {
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 100px;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.sector-toc__link:hover { background: var(--ink); color: #fff; }
@media (max-width: 700px) {
  .sector-toc { border-radius: 18px; }
}

.vertical { padding: 100px 0; }
.vertical__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 80px;
  align-items: center;
}
.vertical--reverse .vertical__grid { direction: rtl; }
.vertical--reverse .vertical__grid > * { direction: ltr; }
.vertical__copy { min-width: 0; }
.vertical__title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: var(--ink);
  margin: 20px 0 22px;
}
.vertical__title em { color: var(--orange); font-style: normal; font-weight: 500; }
.vertical__lead {
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  max-width: 540px;
  margin: 0 0 28px;
}
.vertical__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.vertical__features li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.88;
}
.vertical__features li::before {
  content: '';
  position: absolute;
  left: 0; top: 8px;
  width: 12px; height: 10px;
  background: var(--orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.vertical__features strong { color: var(--ink); font-weight: 500; opacity: 1; }
.vertical__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 22px 24px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  margin-bottom: 28px;
}
.vertical__stats > div { display: flex; flex-direction: column; }
.vertical__stats strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  color: var(--orange);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 4px;
}
.vertical__stats span {
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.02em;
}
.vertical__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.vertical__media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, transparent 50%, rgba(22, 20, 15, 0.5) 100%);
}
@media (max-width: 900px) {
  .vertical { padding: 64px 0; }
  .vertical__grid { grid-template-columns: 1fr; gap: 36px; }
  .vertical--reverse .vertical__grid { direction: ltr; }
  .vertical__stats { grid-template-columns: 1fr 1fr; }
  .vertical__media { aspect-ratio: 16 / 11; }
}

.decisores-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.decisor {
  padding: 32px;
  border: 1px solid rgba(245, 241, 234, 0.15);
  border-radius: 20px;
  background: rgba(245, 241, 234, 0.03);
}
.decisor__role {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
  display: block;
  margin-bottom: 16px;
}
.decisor p { font-size: 16px; line-height: 1.55; opacity: 0.82; margin: 0; }
@media (max-width: 900px) {
  .decisores-grid { grid-template-columns: 1fr; }
}

/* ============================================
   DEMO PAGE — Calendly + form
   ============================================ */
.demo-hero {
  position: relative;
  padding: 160px 0 100px;
  background: var(--cream);
  overflow: hidden;
}
.demo-hero__bg {
  position: absolute;
  inset: 0;
  /* Acento cálido del degradado Naranja+blanco del brandbook
     en la esquina superior derecha, fundido al cream del fondo. */
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255, 231, 206, 0.65), transparent 60%),
    radial-gradient(50% 40% at 100% 0%, rgba(253, 128, 29, 0.10), transparent 55%),
    radial-gradient(50% 40% at 0% 100%, rgba(22, 20, 15, 0.04), transparent 60%);
  pointer-events: none;
}
.demo-hero__watermark {
  position: absolute;
  right: -180px;
  top: 30%;
  width: 580px;
  height: 580px;
  opacity: 0.05;
  transform: rotate(-12deg);
  pointer-events: none;
}
.demo-hero__watermark svg { width: 100%; height: 100%; color: var(--ink); }
.demo-hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 80px;
  align-items: start;
}
.demo-hero__copy { padding-top: 8px; }
.demo-hero__title {
  font-family: var(--font-display);
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 0.98;
  color: var(--ink);
  margin: 22px 0 24px;
}
.demo-hero__title em { color: var(--orange); font-style: normal; font-weight: 500; }
.demo-hero__lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--ink);
  opacity: 0.78;
  max-width: 520px;
  margin: 0 0 32px;
}
.demo-hero__bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.demo-hero__bullets li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: var(--ink);
  opacity: 0.9;
}
.demo-hero__bullets li svg {
  width: 14px;
  height: 12px;
  color: var(--orange);
  flex-shrink: 0;
}
.demo-hero__trust {
  display: grid;
  grid-template-columns: repeat(3, auto);
  gap: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.demo-hero__trust-block { display: flex; flex-direction: column; }
.demo-hero__trust-block strong {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 6px;
}
.demo-hero__trust-block span {
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.02em;
}

.demo-card {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 80px rgba(22, 20, 15, 0.10), 0 0 0 1px var(--line);
  padding: 12px;
  position: sticky;
  top: 110px;
}
.demo-card__tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  background: var(--cream);
  border-radius: 14px;
  margin-bottom: 12px;
}
.demo-card__tab {
  appearance: none;
  border: 0;
  background: transparent;
  font: 500 13px var(--font-sans);
  color: var(--ink);
  opacity: 0.65;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s var(--ease), opacity 0.2s var(--ease), color 0.2s var(--ease);
}
.demo-card__tab.is-active {
  background: #fff;
  opacity: 1;
  box-shadow: 0 2px 6px rgba(22, 20, 15, 0.06);
}
.demo-card__panel { display: none; padding: 12px 18px 18px; }
.demo-card__panel.is-active { display: block; }
.demo-card__caption {
  font-size: 13px;
  color: var(--mute);
  margin-bottom: 14px;
}
.demo-card__fine {
  font-size: 11px;
  color: var(--mute);
  margin: 12px 0 0;
  line-height: 1.5;
}
.demo-card__fine a { color: var(--orange); text-decoration: none; border-bottom: 1px solid currentColor; }

.demo-form { display: flex; flex-direction: column; gap: 14px; }
.demo-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.demo-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-sans); }
.demo-form label > span {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.demo-form input,
.demo-form select,
.demo-form textarea {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.demo-form input:focus,
.demo-form select:focus,
.demo-form textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 4px rgba(253, 128, 29, 0.12);
}
.demo-form textarea { resize: vertical; min-height: 88px; }
.demo-form__check {
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 10px !important;
  font-size: 12px !important;
  color: var(--ink);
  opacity: 0.85;
}
.demo-form__check span { font-size: 12px !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--ink) !important; opacity: 0.85; font-weight: 400 !important; }
.demo-form__check a { color: var(--orange); border-bottom: 1px solid currentColor; }
.demo-form__submit { justify-content: center; margin-top: 6px; }
.demo-form__fine {
  font-size: 11px;
  color: var(--mute);
  text-align: center;
  margin: 4px 0 0;
}
.demo-form__success {
  text-align: center;
  padding: 32px 16px;
}
.demo-form__success-mark { width: 56px; height: 56px; margin-bottom: 16px; }
.demo-form__success h3 {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--ink);
}
.demo-form__success p { font-size: 14px; color: var(--mute); line-height: 1.55; margin: 0; }
.demo-form__success a { color: var(--orange); border-bottom: 1px solid currentColor; }

@media (max-width: 980px) {
  .demo-hero { padding: 130px 0 80px; }
  .demo-hero__grid { grid-template-columns: 1fr; gap: 50px; }
  .demo-card { position: relative; top: auto; }
}
@media (max-width: 600px) {
  .demo-form__row { grid-template-columns: 1fr; }
  .demo-hero__trust { grid-template-columns: 1fr 1fr; gap: 22px; }
}

/* Demo bullets (what you'll see) */
.demo-bullets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.demo-bullet {
  padding: 32px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
}
.demo-bullet__num {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--orange);
  font-weight: 500;
  display: block;
  margin-bottom: 16px;
}
.demo-bullet h4 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
  color: var(--ink);
}
.demo-bullet p { font-size: 14px; line-height: 1.55; color: var(--ink); opacity: 0.78; margin: 0; }
@media (max-width: 900px) {
  .demo-bullets { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .demo-bullets { grid-template-columns: 1fr; }
}

/* Demo team */
.demo-team {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}
.demo-team__copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  opacity: 0.82;
  margin: 0 0 18px;
}
.demo-team__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.demo-team__row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.demo-team__row:last-of-type { border-bottom: 0; padding-bottom: 0; }
.demo-team__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--cream);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.demo-team__avatar svg { width: 32px; height: 32px; }
.demo-team__row strong {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.demo-team__row span { font-size: 13px; color: var(--mute); }
.demo-team__contact {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: 4px;
}
.demo-team__contact a {
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  text-decoration: none;
}
.demo-team__contact a:hover { color: var(--orange); opacity: 1; }
@media (max-width: 900px) {
  .demo-team { grid-template-columns: 1fr; gap: 36px; }
}

/* ============================================
   BLOG / RECURSOS
   ============================================ */
.blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 100px;
  margin-bottom: 56px;
}
.blog-filters__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  margin-right: 8px;
}
.chip {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  padding: 7px 14px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--line);
  text-decoration: none;
  transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.chip:hover { background: var(--cream); color: var(--orange); border-color: var(--orange); }
.chip--active {
  background: var(--ink);
  color: var(--cream);
  border-color: var(--ink);
}
.chip--active:hover { background: var(--orange); border-color: var(--orange); color: #fff; }
@media (max-width: 700px) {
  .blog-filters { border-radius: 18px; padding: 14px 18px; }
}

.blog-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  margin-bottom: 56px;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.blog-feature:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.blog-feature__media {
  min-height: 380px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
  position: relative;
}
.blog-feature__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 20, 15, 0.15) 0%, transparent 60%);
}
.blog-feature__body {
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.blog-feature__meta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.blog-feature__title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--ink);
}
.blog-feature__title em { color: var(--orange); font-style: normal; font-weight: 500; }
.blog-feature__lead {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 0;
}
@media (max-width: 900px) {
  .blog-feature { grid-template-columns: 1fr; }
  .blog-feature__media { min-height: 240px; }
  .blog-feature__body { padding: 36px 28px; }
}

.blog-cat {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 500;
}
.blog-date {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0.02em;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  margin-bottom: 56px;
}
.blog-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease);
}
.blog-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: rgba(22, 20, 15, 0.12);
}
.blog-card__media {
  height: 220px;
  background-size: cover;
  background-position: center;
  background-color: var(--ink);
}
.blog-card__body {
  padding: 28px 28px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.blog-card__meta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.blog-card__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}
.blog-card__lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.75;
  margin: 0;
}
.blog-card--placeholder {
  opacity: 0.55;
  background: var(--paper);
  border-style: dashed;
}
.blog-card--placeholder:hover { transform: none; box-shadow: none; cursor: default; }
@media (max-width: 760px) {
  .blog-grid { grid-template-columns: 1fr; }
  .blog-card__media { height: 180px; }
}

/* Newsletter pill */
.newsletter-pill {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 48px 56px;
  background: var(--grad-ink);
  color: var(--cream);
  border-radius: 24px;
  margin-top: 24px;
  box-shadow: 0 30px 60px rgba(22, 20, 15, 0.18);
  overflow: hidden;
  position: relative;
}
.newsletter-pill h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 14px 0 14px;
  color: var(--cream);
}
.newsletter-pill h3 em { color: var(--orange); font-style: normal; font-weight: 500; }
.newsletter-pill p {
  font-size: 15px;
  line-height: 1.55;
  color: rgba(245, 241, 234, 0.78);
  margin: 0;
}
.newsletter-form .newsletter-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}
.newsletter-form input[type="email"] {
  background: rgba(245, 241, 234, 0.08);
  border: 1px solid rgba(245, 241, 234, 0.15);
  border-radius: 100px;
  padding: 14px 22px;
  color: var(--cream);
  font: 15px var(--font-sans);
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.newsletter-form input[type="email"]::placeholder { color: rgba(245, 241, 234, 0.5); }
.newsletter-form input[type="email"]:focus {
  outline: none;
  background: rgba(245, 241, 234, 0.14);
  border-color: var(--orange);
}
.newsletter-form .btn--primary { border-radius: 100px; }
.newsletter-ok {
  padding: 14px 18px;
  background: rgba(253, 128, 29, 0.14);
  border: 1px solid rgba(253, 128, 29, 0.35);
  border-radius: 14px;
  font-size: 14px;
  color: var(--cream);
}
.newsletter-ok strong { color: var(--orange); }
.newsletter-fine {
  font-size: 11.5px;
  color: rgba(245, 241, 234, 0.5);
  margin: 12px 0 0;
}
.newsletter-fine a { color: var(--orange); border-bottom: 1px solid currentColor; text-decoration: none; }
@media (max-width: 880px) {
  .newsletter-pill { grid-template-columns: 1fr; padding: 36px 28px; gap: 28px; }
}

/* ============================================
   POST · artículo individual
   ============================================ */
.post-hero {
  padding: 160px 0 70px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.post-hero__crumb {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
  margin-bottom: 24px;
}
.post-hero__crumb a { color: var(--ink); text-decoration: none; }
.post-hero__crumb a:hover { color: var(--orange); }
.post-hero__cat { margin-bottom: 18px; }
.post-hero__title {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.6vw, 64px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  margin: 0 0 24px;
  max-width: 940px;
}
.post-hero__title em { color: var(--orange); font-style: normal; font-weight: 500; }
.post-hero__lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  max-width: 760px;
  margin: 0 0 32px;
}
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--mute);
}
.post-hero__meta strong { color: var(--ink); font-weight: 500; }
.post-hero__sep { opacity: 0.5; }

.post-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
  padding: 80px var(--gutter) 100px;
}
.post-toc {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
@media (max-width: 960px) {
  .post-layout { grid-template-columns: 1fr; gap: 40px; padding: 60px var(--gutter) 80px; }
  .post-toc { position: relative; top: auto; }
}

.post-prose {
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.75;
  color: var(--ink);
  max-width: 720px;
}
.post-prose h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.022em;
  line-height: 1.15;
  margin: 56px 0 18px;
  color: var(--ink);
  scroll-margin-top: 120px;
}
.post-prose h2:first-child { margin-top: 0; }
.post-prose h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin: 32px 0 12px;
  color: var(--ink);
}
.post-prose p {
  margin: 0 0 18px;
  color: var(--ink);
  opacity: 0.88;
}
.post-prose strong { color: var(--ink); font-weight: 500; opacity: 1; }
.post-prose em { color: var(--orange); font-style: normal; font-weight: 500; }
.post-prose a {
  color: var(--orange);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.post-prose ul, .post-prose ol { margin: 0 0 22px; padding-left: 0; list-style: none; }
.post-prose ul li,
.post-prose ol li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 12px;
  color: var(--ink);
  opacity: 0.88;
}
.post-prose ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 10px; height: 8px;
  background: var(--orange);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.post-prose ol { counter-reset: step; }
.post-prose ol li { counter-increment: step; }
.post-prose ol li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  color: var(--orange);
  letter-spacing: 0.04em;
}

.post-cta {
  margin-top: 60px;
  padding: 40px 44px;
  background: var(--grad-ink);
  color: var(--cream);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 50px rgba(22, 20, 15, 0.18);
}
.post-cta h3 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  color: var(--cream);
}
.post-cta p { color: rgba(245, 241, 234, 0.78); font-size: 15px; margin-bottom: 22px; }
.post-cta .btn--primary { border-radius: 100px; }

/* ============================================
   STICKY CTA · pill flotante (home y sectores)
   ============================================ */
.sticky-cta {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  /* Degradado oficial App icon del brandbook (FFB061 → FD801D → D75F0A) */
  background: var(--grad-icon);
  color: #fff;
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 20px 40px rgba(253, 128, 29, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s, background 0.3s, box-shadow 0.3s;
}
.sticky-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.sticky-cta:hover {
  /* En hover invierte al degradado Negativo·Ink */
  background: var(--grad-ink);
  box-shadow: 0 20px 40px rgba(22, 20, 15, 0.45);
}
.sticky-cta svg { width: 16px; height: 14px; }
@media (max-width: 600px) {
  .sticky-cta { bottom: 20px; right: 20px; padding: 12px 18px; font-size: 13px; }
}

/* ============================================
   COOKIES — modal granular + chip de reapertura
   ============================================ */
body.is-cookies-modal { overflow: hidden; }

.cookies-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.cookies-modal.is-visible { opacity: 1; }
.cookies-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(22, 20, 15, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}
.cookies-modal__panel {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 720px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 36px 36px 28px;
  box-shadow: 0 30px 80px rgba(22, 20, 15, 0.25);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s var(--ease);
}
.cookies-modal.is-visible .cookies-modal__panel { transform: translateY(0) scale(1); }
.cookies-modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 14px;
  color: var(--mute);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.cookies-modal__close:hover { background: var(--cream); color: var(--ink); }
.cookies-modal__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 4px 0 20px;
  color: var(--ink);
}
.cookies-modal__intro {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 0 0 24px;
}

/* Filas de categorías */
.cookies-row {
  background: var(--paper);
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.cookies-row__header {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  text-align: left;
}
.cookies-row__name {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
}
.cookies-row__status--always {
  font-size: 13px;
  color: #16a34a;
  font-weight: 500;
}
.cookies-row__caret {
  width: 10px;
  height: 10px;
  border-right: 1.5px solid var(--mute);
  border-bottom: 1.5px solid var(--mute);
  transform: rotate(45deg);
  transition: transform 0.25s var(--ease);
  flex-shrink: 0;
}
.cookies-row.is-open .cookies-row__caret { transform: rotate(-135deg); }
.cookies-row__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease), padding 0.3s var(--ease);
  padding: 0 20px;
}
.cookies-row.is-open .cookies-row__body {
  max-height: 240px;
  padding: 0 20px 18px;
}
.cookies-row__body p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  opacity: 0.78;
  margin: 0;
}

/* Switch */
.cookies-switch {
  width: 44px;
  height: 24px;
  border-radius: 100px;
  background: rgba(22, 20, 15, 0.85);
  position: relative;
  cursor: pointer;
  transition: background 0.25s var(--ease);
  flex-shrink: 0;
  display: inline-block;
}
.cookies-switch__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.25s var(--ease);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.cookies-switch.is-on { background: var(--orange); }
.cookies-switch.is-on .cookies-switch__knob { transform: translateX(20px); }

/* Acciones inferiores */
.cookies-modal__actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 22px 0 18px;
}
.cookies-modal__actions .btn {
  justify-content: center;
  padding: 14px 16px;
  font-size: 14px;
}
.cookies-modal__actions .btn--ghost {
  background: var(--orange);
  color: #fff;
  border-color: var(--orange);
}
.cookies-modal__actions .btn--ghost:hover {
  background: var(--orange-deep, #e06b00);
  border-color: var(--orange-deep, #e06b00);
}

.cookies-modal__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cookies-modal__legal a {
  font-size: 13px;
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.78;
  transition: color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.cookies-modal__legal a:hover { color: var(--orange); opacity: 1; }

@media (max-width: 600px) {
  .cookies-modal__panel { padding: 28px 22px 22px; border-radius: 14px; }
  .cookies-modal__actions { grid-template-columns: 1fr; }
  .cookies-modal__legal { gap: 12px; font-size: 12px; }
}

/* Chip flotante "Cookies" (reabrir modal cuando ya hay consentimiento) */
.cookies-chip {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 80;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(22, 20, 15, 0.10);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), background 0.2s, color 0.2s;
}
.cookies-chip.is-visible { opacity: 0.85; transform: translateY(0); }
.cookies-chip:hover {
  opacity: 1;
  background: var(--ink);
  color: var(--orange);
}
.cookies-chip svg { width: 22px; height: 22px; }

/* ============================================
   NAV · BOTÓN CLIENTES (acceso al portal)
   ============================================ */
.nav__clients {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px solid var(--orange);
  border-radius: 100px;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--orange);
  background: transparent;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav__clients:hover {
  background: var(--orange);
  color: #fff;
}
.nav__clients svg { width: 14px; height: 14px; }
@media (max-width: 760px) {
  .nav__clients span { display: none; }
  .nav__clients { padding: 9px 11px; }
}
@media (max-width: 960px) {
  .nav__clients { display: none; }
}

/* Panel "Llámanos" — contacto directo en card */
.direct-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.direct-row:last-of-type { border-bottom: 0; }
.direct-row__label {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mute);
  font-weight: 500;
}
.direct-row__value {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.1;
  margin-top: 2px;
  transition: color 0.2s var(--ease);
}
.direct-row__value:hover { color: var(--orange); }
.direct-row__meta {
  font-size: 13px;
  color: var(--mute);
  margin-top: 4px;
  line-height: 1.45;
}

/* ============================================
   CAPACIDADES · home (grid compacto de 7)
   ============================================ */
.caps {
  background: var(--linen);
  padding: 110px 0 120px;
}
.caps .section__lead {
  margin: -12px 0 56px;
  max-width: 760px;
}
.caps__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
/* La séptima capacidad se centra en la fila final para cierre simétrico */
.caps__grid > :nth-child(7) { grid-column: 2; }

.cap-tile {
  background: var(--paper);
  border: 1px solid rgba(22, 20, 15, 0.06);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 160px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.cap-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(253, 128, 29, 0.4);
  box-shadow: 0 14px 30px rgba(22, 20, 15, 0.06);
}
.cap-tile__num {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--orange);
  font-weight: 500;
}
.cap-tile h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 2px 0 0;
  color: var(--ink);
}
.cap-tile p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft, #555);
  margin: 0;
}
.caps__cta {
  margin-top: 44px;
  display: flex;
  justify-content: center;
}
.sectors__cta {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}
@media (max-width: 880px) {
  .caps__grid { grid-template-columns: repeat(2, 1fr); }
  .caps__grid > :nth-child(7) { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
  .caps__grid { grid-template-columns: 1fr; gap: 12px; }
  .caps__grid > :nth-child(7) { grid-column: 1; }
  .caps { padding: 70px 0 90px; }
}

/* ============================================
   FINCA MILÚ · bloque en Nosotros
   ============================================ */
/* Head propio — evita el space-between del .section__head global */
.finca-milu__head {
  margin-bottom: 40px;
  max-width: 900px;
}
.finca-milu__head .eyebrow { margin-bottom: 12px; }
.finca-milu__title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--ink);
  margin: 0;
}
.finca-milu__title em { font-style: normal; color: var(--orange); }

/* Layout: galería izquierda + texto derecha, alineados en la misma fila */
.finca-milu__layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 44px;
  align-items: center;
  margin-bottom: 56px;
}
.finca-milu__gallery {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  aspect-ratio: 4 / 3;
}
.finca-milu__shot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-color: #d9d3c6;
  transition: transform 0.4s var(--ease);
  display: block;
}
.finca-milu__shot:hover { transform: scale(1.015); }
.finca-milu__shot--lead { grid-row: 1 / -1; }
.finca-milu__body p {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft, #555);
  margin: 0 0 14px;
}
.finca-milu__body p:last-child { margin-bottom: 0; }
.finca-milu__body p strong { color: var(--ink); }
.finca-milu__pillars { margin-top: 0; }
@media (max-width: 960px) {
  .finca-milu__layout { grid-template-columns: 1fr; gap: 32px; }
  .finca-milu__gallery { aspect-ratio: 16 / 9; }
}
@media (max-width: 480px) {
  .finca-milu__gallery {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    aspect-ratio: auto;
  }
  .finca-milu__shot { aspect-ratio: 16 / 10; }
  .finca-milu__shot--lead { grid-row: auto; }
}
