: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, var(--spv-green-50), transparent 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}
.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 */
}

.card {
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}


/* === Combustibles page extras === */
.hero-combustibles{
  background-image: url("../assets/bg-header.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.2rem}
.badge{border:1px solid #e5e7eb;border-radius:var(--radius);padding:1.2rem;background:#fff}
.badge-ico{font-size:1.6rem;margin-bottom:.4rem}
.badge h3{margin:.2rem 0 .4rem}

.fuel-cards .card h3{margin-bottom:.6rem}
.feature-list{margin:0;padding-left:1.1rem;display:grid;gap:.35rem}
.feature-list li{color:var(--muted)}

.trans-grid{grid-template-columns:repeat(3,1fr)}
.trans-card{border:1px solid #e5e7eb;border-radius:var(--radius);padding:1rem;background:#fff}
.meta-list{margin:.2rem 0 .2rem;padding-left:1.1rem;color:var(--muted)}
.meta-ol{margin:.2rem 0 .2rem;padding-left:1.25rem;color:var(--muted)}
.muted{color:var(--muted)}

.accordion details{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:.6rem 1rem}
.accordion details+details{margin-top:.6rem}
.accordion summary{cursor:pointer;font-weight:600;list-style:none}
.accordion summary::-webkit-details-marker{display:none}
.accordion .acc-body{margin-top:.4rem;color:var(--muted)}

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

@media (max-width: 920px){
  .badges{grid-template-columns:1fr 1fr}
  .trans-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 640px){
  .badges{grid-template-columns:1fr}
  .trans-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;
  }
}

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

/* Contenedor con aparición en cascada */
.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; }
.reveal-stagger.is-visible > *:nth-child(4){ transition-delay:.26s; }

/* Detalles/FAQ: caret y hover */
.accordion details{
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  padding:.6rem .9rem;
  margin:.6rem 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.accordion details:hover{ border-color:#d1d5db; }
.accordion summary{
  cursor:pointer;
  list-style:none;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.accordion summary::-webkit-details-marker{ display:none; }
.accordion summary::before{
  content:'▸';
  display:inline-block;
  transition: transform .25s ease;
}
.accordion details[open] summary::before{ transform: rotate(90deg); }

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