/* =============================================================
   AGROVALOR · Hoja maestra v2
   Predominio paper/blanco · Navy solo en hero y footer
   Inspirado en Devini.io (claro minimal) + iron-man (cinematográfico)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Fraunces:ital,wght@1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@400;500;600&display=swap');

@import url('./tokens.css');
@import url('./typography.css');
@import url('./layout.css');
@import url('./components.css');
@import url('./hero.css');
@import url('./animations.css');
@import url('./pages.css');
@import url('./apple-style.css');
@import url('./mood-lighting.css');
@import url('./extras.css');
@import url('./v10.css');

/* === Body global — paper como base === */
body {
  font-family: var(--font-sans);
  background: var(--paper-100);
  color: var(--ink-900);
  overflow-x: hidden;
}

/* === Sección "Trayectoria" — fondo claro === */
.trayectoria-section {
  background: var(--paper-100);
  color: var(--ink-900);
  padding-block: clamp(6rem, 12vw, 12rem);
  position: relative;
}
.trayectoria-section .stats-band {
  border-color: var(--line-on-light);
}
.trayectoria-section .stat-label {
  color: var(--ink-500);
}

/* Pequeño detalle decorativo: línea fina arriba del eyebrow */
.trayectoria-section .section-head .t-eyebrow::before,
.products-section .section-head .t-eyebrow::before,
.manifiesto-section .section-head .t-eyebrow::before,
.socios-section .section-head .t-eyebrow::before,
.casos-section .section-head .t-eyebrow::before,
.cta-final .t-eyebrow::before {
  content: "";
  display: inline-block;
  width: 32px;
  height: 1px;
  background: currentColor;
  margin-right: var(--space-3);
  vertical-align: middle;
  opacity: 0.5;
}

/* === Sección "Productos" — fondo claro, máximo aire === */
.products-section {
  background: var(--paper-100);
  position: relative;
  padding-block: clamp(6rem, 14vw, 14rem);
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
@media (max-width: 1279px) { .products-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1023px) { .products-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .products-grid { grid-template-columns: 1fr; } }

/* === SECCIÓN MANIFIESTO — el momento dark cinematográfico === */
.manifiesto-section {
  background: var(--navy-900);
  color: var(--paper-100);
  padding-block: clamp(8rem, 18vw, 16rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.manifiesto-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 40% at 50% 50%, rgba(255, 110, 42, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, var(--navy-900) 0%, var(--navy-800) 50%, var(--navy-900) 100%);
  z-index: -1;
}
.manifiesto-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(70% 60% at 50% 50%, black 0%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 60% at 50% 50%, black 0%, transparent 100%);
  z-index: -1;
  pointer-events: none;
}
.manifiesto-content {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}
.manifiesto-title {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(3rem, 8vw, 9rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  color: var(--paper-100);
}
.manifiesto-title em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--orange-500);
  letter-spacing: var(--tracking-tighter);
}
.manifiesto-sub {
  font-family: var(--font-sans);
  font-size: clamp(1.125rem, 1.4vw, 1.375rem);
  line-height: var(--leading-normal);
  color: rgba(248, 245, 238, 0.65);
  max-width: 44rem;
  margin: var(--space-12) auto 0;
}

/* === Sección "Programa de Socios" — fondo claro con card signature === */
.socios-section {
  background: var(--paper-100);
  color: var(--ink-900);
  padding-block: clamp(6rem, 14vw, 14rem);
  position: relative;
}
.socios-card {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-16);
  align-items: center;
  background: var(--paper-100);
  border: 1px solid var(--line-on-light);
  border-radius: var(--radius-2xl);
  padding: clamp(2.5rem, 5vw, 5rem);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.socios-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(255, 110, 42, 0.14) 0%, transparent 70%);
  pointer-events: none;
}
.socios-card-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-6) var(--space-4);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-light);
  margin-top: var(--space-6);
}
.socios-card-stats .stat-num {
  font-size: clamp(1.5rem, 2.4vw, 2.25rem); /* mucho más chico que default (era 3rem-5rem) */
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: -0.018em;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.socios-card-stats .stat-num em {
  font-size: 1em;
  letter-spacing: -0.025em;
}
.socios-card-stats .stat-label {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  margin-top: 4px;
}
@media (max-width: 1023px) {
  .socios-card { grid-template-columns: 1fr; padding: var(--space-10); gap: var(--space-10); }
}

/* === Sección "Casos / Obras" — fondo claro === */
.casos-section {
  background: var(--paper-100);
  padding-block: clamp(6rem, 14vw, 14rem);
  position: relative;
}
.casos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}
.caso-card {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--navy-900);
  cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-out-quart);
}
.caso-card:hover { transform: translateY(-6px); }
.caso-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease-out-expo);
}
.caso-card:hover img { transform: scale(1.06); }
.caso-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10, 19, 38, 0.92) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-8);
  color: var(--paper-100);
}
.caso-card-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--orange-500);
  margin-bottom: var(--space-2);
}
.caso-card-title {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}
@media (max-width: 1023px) { .casos-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .casos-grid { grid-template-columns: 1fr; } }

/* === Sección CTA Final — claro con headline gigante y signature orange === */
.cta-final {
  background: var(--paper-100);
  color: var(--ink-900);
  padding-block: clamp(8rem, 18vw, 16rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-final::before {
  content: "";
  position: absolute;
  inset: -10%;
  background: radial-gradient(40% 35% at 50% 50%, rgba(255, 110, 42, 0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cta-final-inner {
  position: relative;
  z-index: 2;
  max-width: 72rem;
  margin: 0 auto;
}
.cta-final .t-display {
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  font-size: clamp(3rem, 9vw, 10rem);
  line-height: 0.95;
  letter-spacing: var(--tracking-tightest);
  color: var(--ink-900);
}
.cta-final .t-display em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--weight-medium);
  color: var(--orange-500);
  letter-spacing: var(--tracking-tighter);
}
.cta-final-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-12);
  flex-wrap: wrap;
}