:root{
  --spv-green:#008A2E;
  --spv-green-600:#007528;
  --spv-green-50:#E6F4EA;
  --ink:#1F2937;
  --muted:#6B7280;
  --bg:#FFFFFF;
  --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,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6}
.container{width:min(1200px,92%);margin-inline:auto}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header responsive */
.site-header{position:sticky;top:0;z-index:50;width:100%;background:#fff;border-bottom:1px solid #e5e7eb;backdrop-filter:saturate(150%) blur(6px)}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink);font-weight:800}
.brand img{display:block;height:110px;width:auto}
.brand-text{display:none}
.menu{display:flex;align-items:center;gap:1rem;list-style:none;margin:0;padding:0}
.menu a{display:inline-block;color:var(--ink);text-decoration:none;padding:.55rem .8rem;border-radius:12px}
.menu a:hover{background:var(--spv-green-50)}
.menu a.is-active{background:var(--spv-green-50);font-weight:700}
.nav-toggle{display:none;background:transparent;border:none;font-size:1.4rem;line-height:1;cursor:pointer}
.btn{display:inline-block;padding:.75rem 1rem;border-radius:999px;text-decoration:none;font-weight:700;border:1px solid transparent}
.btn-solid{background:var(--spv-green);color:#fff;border-color:var(--spv-green)}
.btn-solid:hover{background:var(--spv-green-600);border-color:var(--spv-green-600)}
.btn-ghost{background:transparent;color:var(--spv-green);border:1px solid var(--spv-green-50)}
.btn-ghost:hover{background:var(--spv-green-50)}

/* Hero */
.hero{position:relative;background:
  radial-gradient(1200px 1200px at 100% 0%, rgba(0,138,46,0.12), rgba(0,138,46,0.04) 100%),
  linear-gradient(#fff,#fff)}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center;padding:2.2rem 0 1.2rem}
.hero h1{font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.15;margin:.2rem 0 .6rem}
.hero p{color:var(--muted);max-width:60ch;margin:0}
.hero-ctas{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.hero-art{display:flex;justify-content:center}
.hero-strip{border-top:1px solid #e5e7eb;background:#fff}
.strip-inner{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 0}
.strip-item{display:flex;gap:.5rem;align-items:center;justify-content:center;font-weight:700}
.icon{font-size:1.1rem}

/* Sections */
.section{padding:2.6rem 0}
.section-head h2{margin:0 0 .4rem;font-size:clamp(1.3rem,2.2vw,1.8rem)}
.section-head p{margin:0;color:var(--muted)}

/* Cards sin imágenes */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.card{
  --accent: var(--spv-green);
  position:relative;display:flex;flex-direction:column;gap:.6rem;
  border:1px solid #e5e7eb;border-radius:var(--radius);
  background:linear-gradient(180deg,#ffffff 0%, #fafafa 100%);
  padding:1.1rem 1.1rem 1.15rem;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,filter .25s ease
}
.card::after{content:"";position:absolute;inset:0 auto auto 0;height:4px;width:100%;background:var(--accent);border-top-left-radius:inherit;border-top-right-radius:inherit}
.card:hover{transform:translateY(-4px);box-shadow:0 12px 28px rgba(0,0,0,.12);border-color:#d1d5db;filter:brightness(1.02)}
.card:focus-within{outline:none;transform:translateY(-3px);box-shadow:0 0 0 4px var(--ring),0 12px 28px rgba(0,0,0,.12);border-color:var(--spv-green)}
.card-title{margin:.1rem 0 .2rem;font-size:clamp(1.05rem,2.2vw,1.2rem);line-height:1.2;font-weight:800;color:var(--ink)}
.card-desc{margin:0;color:var(--muted)}
.card-icon{width:44px;height:44px;display:grid;place-items:center;border-radius:12px;background:color-mix(in oklab,var(--accent) 12%,white);border:1px solid color-mix(in oklab,var(--accent) 22%,#e5e7eb);font-size:1.25rem;color:var(--accent)}
.card.is-info{--accent:#2563EB}
.card.is-warn{--accent:#F59E0B}

/* Trust band */
.trust{border:1px solid #e5e7eb;border-radius:var(--radius);padding:1rem;background:#fff;margin-top:1.2rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem}
.trust small{color:#6b7280}

/* Footer */
.site-footer{border-top:1px solid #e5e7eb;background:#fff}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem;padding:2rem 0}
.footer-brand{color:var(--muted)}
.footer-legal{color:var(--muted);font-size:.95rem}

/* Reveal animations */
.reveal{opacity:0;transform: translateY(18px);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}
.reveal-right{transform: translateX(-24px)}
.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:.05s}
.reveal-stagger.is-visible > *:nth-child(2){transition-delay:.12s}
.reveal-stagger.is-visible > *:nth-child(3){transition-delay:.19s}

/* Responsive */
@media (max-width: 920px){
  .brand img{height:110px}
  .hero-inner{grid-template-columns:1fr}
  .strip-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .brand img{height:110px}
  .brand-text{display:inline-block;font-size:.95rem}
  .nav-toggle{display:inline-block}

  /* menú móvil */
  .menu{
    position:absolute;right:4%;top:72px;background:#fff;border:1px solid #e5e7eb;border-radius:16px;
    padding:.6rem;flex-direction:column;min-width:260px;display:none;box-shadow:0 12px 24px rgba(0,0,0,.08)
  }
  .menu a{width:100%}
  .menu .btn.btn-solid{width:100%;text-align:center}

  .cards{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
}

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


/* === Header a pantalla completa === */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  backdrop-filter: saturate(150%) blur(6px);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

/* Elimina el ancho limitado dentro del header */
.header-inner {
  width: 100%;
}

/* Contenedor visual interno del header */
.header-inner .container {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding-inline: 2rem;
}

/* Flex del contenido */
.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Ajustes visuales */
.brand img { height: 110px; }
.menu { display: flex; align-items: center; gap: 1rem; 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); }

/* Móvil */
@media (max-width: 640px) {
  .brand img { height: 52px; }
  .menu {
    position: absolute;
    top: 70px; right: 4%;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: .6rem;
    min-width: 260px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    display: none;
  }
}

.card.is-green {
  --accent: #16A34A; /* Verde Magna */
}

.card.is-premium {
  --accent: #B91C1C; /* Rojo Premium */
}