: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; }
  .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:0 0 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 */
}


/* Hero de contacto (tipo banner claro) */
.contact-hero{
  padding: 3.5rem 0 0;
}
.contact-hero-inner{ text-align:center; }

.contact-title{
  margin: 0 0 .6rem;
  font-weight: 800;
  font-size: clamp(2.2rem, 6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

.contact-subtitle{
  margin: 0 0 .5rem;
  color: var(--muted);
  font-size: clamp(1rem, 2.2vw, 1.1rem);
}

.contact-phone{
  display: inline-block;
  margin-top: .2rem;
  font-weight: 800;
  font-size: clamp(1.4rem, 4.5vw, 2.4rem);
  text-decoration: none;
  color: var(--spv-green);        /* verde Magna */
}
.contact-phone:hover{ text-decoration: underline; }

/* Formulario ancho, 2 columnas, inputs grandes */
.contact-form{
  max-width: 1040px;
  margin: 1.6rem auto 0;
}

.contact-form .grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.contact-form .span-2{ grid-column: 1 / -1; }

.contact-form input,
.contact-form textarea{
  width: 100%;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1.5px solid rgba(31,41,55,.25);   /* gris oscuro translúcido */
  background: #fff;
  outline: 0;
  box-shadow: 0 1px 0 rgba(17,17,17,.06);
  font-size: 1rem;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder{ color: #6b7280; }

.contact-form input:focus,
.contact-form textarea:focus{
  border-color: var(--spv-green);
  box-shadow: 0 0 0 4px var(--ring);        /* ya definida en tu :root */
}

.btn-lg{ padding: .9rem 1.2rem; font-size: 1rem; margin-top: .4rem; }

/* Responsive: 1 columna en móvil */
@media (max-width: 760px){
  .contact-form .grid{ grid-template-columns: 1fr; }
}
.menu .is-active{background:var(--spv-green-50);}

/* ==== 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 + variantes ==== */
.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-left{ transform: translateX(26px); }
.reveal-right{ transform: translateX(-26px); }
.reveal-up{ transform: translateY(22px); }
.reveal-zoom{ transform: scale(.96); filter: blur(1.5px); }

/* Alerts */
.alert{ border:1px solid #e5e7eb; border-radius:12px; padding:.9rem 1rem; margin: .6rem 0; background:#fff; }
.alert-success{ border-color:#10b981; background: #ecfdf5; color:#065f46; }
.alert-error{ border-color:#ef4444; background: #fef2f2; color:#7f1d1d; }
.alert ul{ margin:.4rem 0 0 1.1rem; }

/* Contact hero */
.contact-hero{ background:
  radial-gradient(1000px 1000px at 100% 0%, rgba(0,138,46,.18), rgba(0,138,46,.06) 90%),
  #fff; }
.contact-hero-inner{ padding: 2.2rem 0 1.4rem; text-align:center; }
.contact-title{ font-size: clamp(1.6rem, 3vw, 2.2rem); margin:.2rem 0 .4rem; }
.contact-subtitle{ color:#6b7280; margin:0 0 .4rem; }
.contact-phone{ display:inline-block; font-weight:800; color:#008A2E; text-decoration:none; }
.contact-phone:hover{ text-decoration:underline; }

/* Form */
.contact-form .grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:.8rem; }
.contact-form .span-2{ grid-column: span 2 / span 2; }
.contact-form input, .contact-form textarea{
  width:100%; padding:.9rem 1rem; border-radius:12px; border:1px solid #d1d5db; outline:0; background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form input:focus, .contact-form textarea:focus{
  border-color:#008A2E; box-shadow: 0 0 0 4px rgba(0,138,46,.18);
}
.btn-lg{ padding:.9rem 1.2rem; }

/* Honeypot (oculto para humanos, visible para bots) */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* Responsive */
@media (max-width: 760px){
  .contact-form .grid{ grid-template-columns:1fr; }
  .contact-form .span-2{ grid-column:auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}
.contact-title {
  font-size: clamp(3.5rem, 8vw, 5rem);
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  color: #008A2E;
  animation: titlePop .8s ease-out both;
}

@keyframes titlePop {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}