:root{
  --spv-green:#008A2E; /* Verde Magna */
  --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 */
.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)}

.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{background:var(--spv-green-600);border-color:var(--spv-green-600)}
.btn-ghost{background:transparent;color:var(--spv-green);border-color: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.8), rgba(0,138,46,0.1) 100%),
    linear-gradient(#fff, #fff);}
  .hero-inner {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    gap: 2rem;
    align-items: center;
    padding: 2.5rem 0 1.5rem;
    background-size: cover;        /* hace que la imagen cubra todo el espacio */
    background-position: center;   /* centra la imagen */
    background-repeat: no-repeat;  /* evita que se repita */
  }

.hero h1{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin:.2rem 0 .8rem}
.hero p{color:var(--muted);max-width:60ch}
.hero-ctas{display:flex;gap:.8rem;margin-top:1rem;flex-wrap:wrap}
.hero-art img{width:100%;max-width:300px;display:block;margin-inline:auto}

.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:600}
.icon{font-size:1.1rem}

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

/* Search */
.search{display:flex;gap:.6rem;align-items:center;margin:1rem 0 1.2rem}
.search input{flex:1;padding:.9rem 1rem;border-radius:999px;border:1px solid #d1d5db;outline:0}
.search input:focus{border-color:var(--spv-green);box-shadow:0 0 0 4px var(--ring)}

.results{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1rem}
.result-card{padding:1rem;border:1px solid #e5e7eb;border-radius:var(--radius);background:#fff}
.result-card h4{margin:.2rem 0}
.result-card p{color:var(--muted);margin:.2rem 0 .6rem}
.result-meta{font-size:.9rem;color:var(--muted)}

.map-wrap{margin-top:1rem;border-radius:var(--radius);overflow:hidden;border:1px solid #e5e7eb}
.map-wrap iframe{width:100%;height:380px;border:0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:1.2rem}
.card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:1.2rem;background:#fff}
.card-icon{font-size:1.6rem;margin-bottom:.3rem}
.card h3{margin:.2rem 0 .4rem}
.card p{margin:0;color:var(--muted)}

/* Promos */
.grid{display:grid;gap:1rem}
.promos-grid{grid-template-columns:repeat(3,1fr)}
.promo{border:1px solid #e5e7eb;border-radius:var(--radius);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.promo img{width:100%;height:180px;object-fit:cover;background:var(--spv-green-50)}
.promo-body{padding:1rem}
.link{color:var(--spv-green);text-decoration:none;font-weight:600}
.link:hover{text-decoration:underline}

/* Factura */
.factura-box{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid #e5e7eb;border-radius:var(--radius);padding:1rem;background:#fff;margin-top:1rem}
.factura-box ol{margin:0;padding-left:1rem}
.factura-box .btn{white-space:nowrap}

/* Forms */
.form{display:grid;gap:.8rem;max-width:720px}
.form-row{display:grid;gap:.35rem}
.form-row input,.form-row textarea{
  padding:.9rem 1rem;border-radius:12px;border:1px solid #d1d5db;outline:0;background:#fff
}
.form-row input:focus,.form-row textarea:focus{border-color:var(--spv-green);box-shadow:0 0 0 4px var(--ring)}
.form-note{margin:.4rem 0 0;color:var(--muted)}

/* Footer */
.site-footer{border-top:1px solid #e5e7eb;background:#fff}
.footer-inner{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:1rem;padding:2rem 0}
.footer-brand{color:var(--muted)}
.footer-links{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.footer-links a{color:var(--ink);text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.footer-legal{color:var(--muted);font-size:.95rem}

/* Responsive */
@media (max-width: 920px){
  .hero-inner{grid-template-columns:1fr}
  .strip-inner{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .promos-grid{grid-template-columns:1fr 1fr}
  .results{grid-template-columns:1fr 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}
  .cards{grid-template-columns:1fr}
  .promos-grid{grid-template-columns:1fr}
  .results{grid-template-columns:1fr}
  .factura-box{flex-direction:column;align-items:flex-start}
}

a, a:visited, a:hover, a:active {
  color: inherit;           /* usa el mismo color del texto del contenedor */
  text-decoration: none;    /* quita subrayado */
  outline: none;            /* sin borde de foco */
}

/* ===== 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(4, 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;}
}
/* ==== 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;
  }
}

.card{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  transform: translateZ(0);
  transition: transform .28s ease, box-shadow .28s ease, filter .28s ease;
}

.card::before{
  content:"";
  position:absolute; inset:0;
  background-size: cover; background-position:center;
  transform: scale(1.02);
  filter: brightness(.78);
  transition: transform .45s ease, filter .35s ease;
}

/* interacción */
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.card:hover::before{
  transform: scale(1.06);
  filter: brightness(.9);
}
/* Accesible: teclado */
.card:focus-within{
  outline: none;
  box-shadow: 0 0 0 4px rgba(0,138,46,.25), 0 16px 36px rgba(0,0,0,.18);
  transform: translateY(-4px);
}
.card > a{ display:block; position:relative; z-index:1; text-decoration:none; color:inherit; }

/* ==== Reveal on Scroll (base) ==== */
.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;
}
/* Stagger container: revela hijos en cascada */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(16px);
  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; }

/* Tiles con pop suave al entrar */
.tile { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }
.tile.is-visible { transform: translateZ(0); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,.12); filter: brightness(1.03); }

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

.menu .is-active{background:var(--spv-green-50);}

/* ===== Estilo clásico del tablero de precios ===== */
.pv-board-classic {
  max-width: 500px;
  margin: 40px auto;
  background: #000;
  color: #fff;
  border: 4px solid #333;
  border-radius: 12px;
  box-shadow: 0 0 25px rgba(0,0,0,.6);
  font-family: "Seven Segment", "Courier New", monospace;
  text-align: center;
  padding: 10px 0 20px;
}

.pv-board-header h2 {
  margin: 10px 0 2px;
  font-size: 1.4rem;
  letter-spacing: 1px;
  color: #ccc;
}

.pv-board-header p {
  font-size: 0.9rem;
  color: #999;
}

.pv-board-display {
  border-top: 2px solid #333;
  border-bottom: 2px solid #333;
  margin: 15px auto;
  padding: 10px 0;
}

.pv-row {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #333;
  padding: 14px 0;
  font-size: 2.2rem;
  font-weight: bold;
}

.pv-row:last-child {
  border-bottom: none;
}

.pv-magna .pv-price {
  color: #00e676;
}
.pv-premium .pv-price {
  color: #ff5252;
}

.pv-unit {
  font-size: 1.2rem;
  color: #ccc;
}

/* Animación simple al cambiar precio */
.pv-price.pv-flash {
  animation: flash .4s ease;
}
@keyframes flash {
  0% { opacity: .3; }
  100% { opacity: 1; }
}

/* Panel admin (oculto normalmente) */
.pv-admin {
  margin-top: 10px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.pv-admin input {
  width: 80px;
  text-align: right;
  font-size: 1rem;
}

/* Fuerza ocultar cuando tenga el atributo hidden */
.pv-admin[hidden] { display: none !important; }

/* (lo que ya tenías) */
.pv-admin { display: flex; gap: 10px; justify-content: center; }