/* =========================
   MonteBlanco - styles.css
   Versión limpia y optimizada
   ========================= */

/* ========== Variables / Design tokens ========== */
:root {
  --mb-red:   #ed1c25;   /* rojo principal */
  --mb-gray:  #0f1216;   /* gris/negro secundario */
  --mb-text:  #222;
  --mb-muted: #666;
  --mb-bg:    #f7f7f7;
  --mb-white: #fff;

  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
}

/* ========== Reset / Base ========== */
* { box-sizing:border-box }
html { scroll-behavior:smooth }
body {
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:var(--mb-text);
  background:var(--mb-bg);
  line-height:1.5;
}
img { max-width:100%; display:block; height:auto }
a { color:inherit; text-decoration:none }

/* ========== Utilidades ========== */
.container { width:min(1100px,92%); margin-inline:auto }
.btn {
  display:inline-block; padding:.9rem 1.15rem; border-radius:10px; font-weight:600;
  border:2px solid transparent; transition:.2s ease;
}
.btn-primary { background:var(--mb-red); color:var(--mb-white) }
.btn-primary:hover { filter:brightness(.95) }
.btn-white { background:var(--mb-white); color:var(--mb-gray); box-shadow:var(--shadow) }
.btn-white:hover { transform:translateY(-1px) }
.btn-outline { background:transparent; border-color:var(--mb-gray); color:var(--mb-gray) }
.btn-outline:hover { background:var(--mb-gray); color:var(--mb-white) }

/* ========== Header / Nav (ROJO) ========== */
.site-header {
  position:sticky; top:0; z-index:100;
  background:var(--mb-red);
}
.nav {
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 0;
}
.brand { display:flex; align-items:center; gap:.6rem }
.brand-logo { height:56px; width:auto }
.brand-name { color:var(--mb-white); font-weight:700; letter-spacing:.3px }

/* Menú */
.menu { display:flex; align-items:center; gap:1rem }
.menu a {
  color:var(--mb-white);
  padding:.5rem .6rem; border-radius:8px; font-weight:500;
  position:relative; transition:background .15s ease,color .15s ease;
}
.menu a:hover { background:rgba(255,255,255,.12) }
.menu a.active {
  color:#fff;
}
.menu a.active::after {
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px;
  border-radius:2px; background:#fff; opacity:.85;
}

/* CTA WhatsApp en el header */
.site-header .btn-primary {
  background:var(--mb-white); color:var(--mb-red); border-color:var(--mb-white);
}
.site-header .btn-primary:hover { background:#f4f5f7 }

/* Toggle móvil */
.nav-toggle { display:none; background:none; border:0; padding:.4rem; cursor:pointer }
.nav-toggle span { display:block; width:24px; height:2px; background:#fff; margin:5px 0; transition:.2s }

/* ========== Hero (slideshow) ========== */
.hero--slideshow {
  position: relative;
  color: var(--mb-white);
  overflow: hidden;
  min-height: 80vh;
  display: grid;
  align-items: center;
}
.hero--slideshow h1 { color:#fff; margin-bottom:.5rem }
.hero--slideshow p { color:#f0f0f0; max-width:70ch }
.hero--slideshow .hero-media { display:none }

.hero-slides {
  position:absolute; inset:0;
  z-index:0;
}
.hero-slides::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45));
  z-index:2;
}
.slide {
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation: mbFade 42s infinite; /* 7 imágenes x 6s */
  z-index:1;
}

@keyframes mbFade {
  0%   {opacity:0}
  5%   {opacity:1}
  30%  {opacity:1}
  35%  {opacity:0}
  100% {opacity:0}
}

/* delays para 7 slides */
.slide:nth-child(1){ animation-delay:0s }
.slide:nth-child(2){ animation-delay:6s }
.slide:nth-child(3){ animation-delay:12s }
.slide:nth-child(4){ animation-delay:18s }
.slide:nth-child(5){ animation-delay:24s }
.slide:nth-child(6){ animation-delay:30s }
.slide:nth-child(7){ animation-delay:36s }

.hero--slideshow .hero-grid {
  position:relative; z-index:3; color:#fff; min-height:inherit;
}
@media (max-width:900px) {
  .hero--slideshow{ min-height:90vh; padding:24px 0 }
}

/* ========== Stripe ========== */
.stripe {
  margin:0; padding:.9rem 0;
  background:var(--mb-gray); color:var(--mb-white);
  text-align:center; font-weight:600; letter-spacing:.3px;
}

/* ========== Secciones base ========== */
.section { padding: clamp(28px, 5vw, 52px) 0 }
.section-title { margin:0 0 16px 0; font-size: clamp(20px, 3vw, 26px); color:var(--mb-gray) }

/* ========== Footer ========== */
.site-footer {
  background: var(--mb-gray);
  color: var(--mb-white);
  margin-top:40px;
}
.footer-grid {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:28px 0;
}
.footer-logo { height:60px; width:auto }
.footer-grid p { margin:0; color: var(--mb-white) }
.subfooter {
  border-top:1px solid rgba(255,255,255,.15);
  padding:12px 0;
  font-size:14px;
  color:#ddd;
  display:flex; justify-content:space-between; gap:12px;
}
.footer-cta .btn-primary {
  background: var(--mb-red);
  color: var(--mb-white);
  border:none;
  transition: all .25s ease;
}
.footer-cta .btn-primary:hover {
  background: var(--mb-gray);
  color: var(--mb-white);
  animation: wiggle 0.35s ease;
}
@keyframes wiggle {
  0% { transform: rotate(0deg) }
  25% { transform: rotate(3deg) }
  50% { transform: rotate(-3deg) }
  75% { transform: rotate(2deg) }
  100% { transform: rotate(0deg) }
}
.footer-brand {
  display:flex; align-items:center; gap:16px;
}
.footer-brand p {
  margin:0; font-size:15px; color: var(--mb-white);
}

/* ========== Botones header extra ========== */
.site-header .btn-whatsapp {
  background: var(--mb-white);
  color: var(--mb-red);
  border:2px solid var(--mb-white);
  box-shadow:0 6px 22px rgba(0,0,0,.08);
  animation: pulseCta 2.6s ease-in-out infinite;
}
@keyframes pulseCta {
  0%,100% { transform:translateY(0); box-shadow:0 6px 22px rgba(0,0,0,.08) }
  50% { transform:translateY(-2px); box-shadow:0 12px 28px rgba(0,0,0,.18) }
}
.btn-ghost-light {
  background:transparent; color:var(--mb-white);
  border:2px solid rgba(255,255,255,.7);
  transition:.2s ease;
}
.btn-ghost-light:hover {
  background:rgba(255,255,255,.08); border-color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}

/* ========== Reveal (animación al hacer scroll) ========== */
.page-construccion [data-reveal] {
  opacity:0;
  transform:translateY(20px);
  transition:opacity .8s ease, transform .8s ease;
}
.page-construccion [data-reveal].is-visible {
  opacity:1;
  transform:none;
}
/* fallback sin JS */
html.no-js .page-construccion [data-reveal] {
  opacity:1 !important;
  transform:none !important;
}

/* ========== Responsive ========== */
@media (max-width:900px){
  .hero-grid{ grid-template-columns:1fr }
}
@media (max-width:820px){
  .nav-toggle{ display:block }
  .menu{
    position:fixed; inset:64px 0 auto 0;
    background:var(--mb-red);
    display:grid;
    transform:translateY(-120%);
    transition:.25s ease;
  }
  .menu a{ padding:1rem 1.2rem; border-radius:0 }
  .menu .btn{ margin:.8rem 1.2rem 1.2rem }
  .menu.open{ transform:translateY(0) }
  .nav-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg) }
  .nav-toggle.active span:nth-child(2){ opacity:0 }
  .nav-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg) }
}

/* ===== hero: ken-burns suave en cada slide ===== */
@keyframes mbFadeZoom{
  0%   { opacity:0; transform: scale(1) }
  5%   { opacity:1; transform: scale(1.01) }
  30%  { opacity:1; transform: scale(1.06) }
  35%  { opacity:0; transform: scale(1.06) }
  100% { opacity:0; transform: scale(1.06) }
}
.hero-slides .slide{
  animation: mbFadeZoom 36s infinite;
  will-change: opacity, transform;
}

/* parallax: el contenedor del hero aceptará una variable Y */
.hero--slideshow{
  --parallax: 0px;                 /* la cambiaremos con JS */
}
.hero-slides{ transform: translateY(var(--parallax)); }

/* header: sombra al scrollear */
.site-header.is-scrolled{ box-shadow: 0 10px 24px rgba(0,0,0,.12); }

/* reveal on scroll (puede que ya lo tengas; lo dejo por si no) */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal].is-in{ opacity:1; transform: none; }

/* respetar reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero-slides .slide{ animation: none !important; opacity:1 !important; transform:none !important; }
  .hero-slides{ transform:none !important; }
  [data-reveal]{ opacity:1 !important; transform:none !important; }
}