:root{
  --spv-green:#008A2E;
  --spv-green-50:#E6F4EA;
  --ink:#1F2937;
  --muted:#6B7280;
  --alt:#F7F9F7;
  --ring: rgba(0,138,46,.25);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:'Inter',system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);line-height:1.6}

/* Utilidades */
.container{width:min(1200px,92%);margin-inline:auto}
.section{padding:1rem 0 1rem 0}
.section.alt{background:var(--alt)}
.muted{color:var(--muted)}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:999px;text-decoration:none;font-weight:600;border:1px solid transparent}
.btn-solid{background:var(--spv-green);color:#fff;border-color:var(--spv-green)}
.btn-solid:hover{filter:brightness(.95)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%; /* 🔹 asegura que cubra toda la pantalla */
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: saturate(150%) blur(6px);
}

/* Contenedor interno */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 2rem;  /* 🔹 más espacio lateral */
  width: 100%;
  max-width: 100%;      /* 🔹 elimina límite de ancho */
  box-sizing: border-box;
}

.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--ink);text-decoration:none}
.brand img{display:block; height:110px;}
.nav-toggle{display:none;background:transparent;border:none;font-size:1.35rem}
.menu{display:flex;gap:1rem;align-items:center;list-style:none;margin:0;padding:0}
.menu a{color:var(--ink);text-decoration:none;padding:.55rem .8rem;border-radius:12px}
.menu a:hover{background:var(--spv-green-50)}

/* Hero plano */
.hero-plain{background:#fff;solid #e5e7eb}
.hero-plain .hero-inner{padding:3.2rem 0 2rem;text-align:center}
.hero-plain h1{margin:0 0 .5rem;font-weight:800;font-size:clamp(2rem,5vw,3rem);letter-spacing:-.02em}
.hero-plain .lead{margin:0;color:var(--muted)}

/* Grid de historia + cifras */
.grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:start}
.story-card{border:1px solid #e5e7eb;background:#fff;border-radius:var(--radius);padding:1.2rem}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem;list-style:none;margin:0 0 .6rem;padding:0}
.stats .num{display:block;font-weight:800;font-size:1.8rem;line-height:1}
.stats .label{display:block;color:var(--muted);font-size:.95rem}

/* Paneles "Quiénes somos / Qué hacemos" */
.panel{border:1px solid #e5e7eb;background:#fff;border-radius:var(--radius);padding:1.2rem}
.panel h2{margin:.2rem 0 .6rem}
.bullets{margin:.6rem 0 0;padding-left:1.1rem}
.bullets li{margin:.25rem 0}

/* CTA */
.cta{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid #e5e7eb;border-radius:var(--radius);padding:1.2rem;background:#fff}
.accent{color:var(--spv-green)}

/* Footer sencillo */
.site-footer{border-top:1px solid #e5e7eb;background:#fff}
.footer-inner{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;padding:1.6rem 0}
.footer-legal a{color:inherit;text-decoration:none}
.footer-legal a:hover{text-decoration:underline}

/* Responsive */
@media (max-width: 920px){
  .grid-2{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}
@media (max-width: 640px){
  .menu{display:none;position:absolute;right:4%;top:64px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:.6rem;flex-direction:column;min-width:260px}
  .nav-toggle{display:inline-block}
}

.menu .is-active{background:var(--spv-green-50);}
/* ===== Mosaicos de métricas SPV ===== */
:root{
  --tile-green1:#00913A;   /* verde principal */
  --tile-green2:#00A542;   /* degradado más claro */
  --tile-green-dark:#DC2626; /* verde profundo para contraste */
  --tile-text-light:#ffffff;
}

#metricas{
  padding-top:2rem;
}

.stats-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:1.2rem;
}

.tile{
  border-radius:28px;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:1.2rem;
  color:#fff;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease;
}

.tile:hover{
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(0,0,0,.25);
  filter:brightness(1.05);
}

/* Verde corporativo degradado */
.tile-green{
  background:
    linear-gradient(135deg, var(--tile-green1) 0%, var(--tile-green2) 100%);
}

/* Versión oscura para contraste */
.tile-dark{
  background: var(--tile-green-dark);
}

/* Tipografía */
.tile-num{
  font-weight:800;
  font-size:clamp(2rem,6vw,4rem);
  line-height:1;
  letter-spacing:-.02em;
}
.tile-label{
  margin-top:.35rem;
  font-weight:600;
  font-size:clamp(.95rem,2.2vw,1.05rem);
  opacity:.95;
}

/* Nota inferior */
.metrics-note{
  margin-top:1rem;
  color:#4b5563;
  text-align:center;
}

/* Responsivo */
@media (max-width:1100px){
  .stats-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:760px){
  .stats-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .stats-grid{grid-template-columns:1fr;}
}

/* ==== Sección de video ==== */
.video-wrap{
  text-align:center;
  max-width:900px;
  margin-inline:auto;
}

.video-title{
  font-weight:800;
  font-size:clamp(1.8rem,5vw,2.5rem);
  margin-bottom:.4rem;
}

.video-subtitle{
  color:var(--muted);
  margin-bottom:1.2rem;
}

/* Contenedor responsive del iframe */
.video-frame{
  position:relative;
  width:100%;
  padding-bottom:56.25%; /* 16:9 ratio */
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 25px rgba(0,0,0,0.15);
  background:#000;
}

.video-frame iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* ==== Reveal on Scroll (base) ==== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform;
}

/* Variantes */
.reveal-up    { transform: translateY(24px); }
.reveal-down  { transform: translateY(-24px); }
.reveal-left  { transform: translateX(24px); }
.reveal-right { transform: translateX(-24px); }
.reveal-zoom  { transform: scale(.96); filter: blur(2px); }

/* Estado visible */
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

/* Stagger por data-delay (ms) */
.reveal[data-delay] { transition-delay: calc(attr(data-delay ms) * 1ms); }

/* Contenedores: revela hijos en cascada */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}
.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: .05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: .19s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: .26s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: .33s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: .40s; }

/* Accesibilidad: respetar usuarios que prefieren menos animación */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ==== Reveal base ==== */
.reveal{
  opacity:0;
  transform: translateY(22px);
  filter: blur(2px);
  transition: opacity .6s ease, transform .6s ease, filter .6s ease;
  will-change: opacity, transform, filter;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* ==== Variantes ==== */
.reveal-up    { transform: translateY(22px); }
.reveal-down  { transform: translateY(-22px); }
.reveal-left  { transform: translateX(26px); }
.reveal-right { transform: translateX(-26px); }

/* zoom/blur */
.reveal-zoom  { transform: scale(.96); filter: blur(1.5px); }
/* giro sutil 3D */
.reveal-rotate{ transform: perspective(800px) rotateX(6deg) translateY(8px); transform-origin: 50% 0; }

/* blur dedicado */
.reveal-blur  { filter: blur(4px); }

/* Stagger en listas/containers */
.reveal-stagger > *{
  opacity:0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.reveal-stagger.is-visible > *{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *:nth-child(1){ transition-delay:.06s; }
.reveal-stagger.is-visible > *:nth-child(2){ transition-delay:.12s; }
.reveal-stagger.is-visible > *:nth-child(3){ transition-delay:.18s; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.24s; }
.reveal-stagger.is-visible > *:nth-child(5){ transition-delay:.30s; }

/* Tiles: efecto hover */
.tile{
  transition: transform .35s ease, box-shadow .35s ease, filter .35s ease;
}
.tile:hover{
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  filter: brightness(1.03);
}

/* Video frame pop */
.video-frame{
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}

/* Parallax: no estilos extra necesarios (JS moverá translateY) */

/* Reduced motion: respeta accesibilidad */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-stagger > *{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}