:root{
  --brand:#b22222; --brand-dark:#8b1d1a; --ink:#0f172a; --muted:#6b7280; --soft:#f6f7fb;
  --paper:#fff; --shadow:0 25px 60px rgba(0,0,0,.18);
}

/* ===== Reset base ===== */
*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* ✅ IMPORTANTE: quitamos el gris del body para que NO haya franja arriba del hero */
body{
  margin:0;
  font-family:'Poppins',system-ui,Arial,sans-serif;
  color:var(--ink);
  background:#fff; /* antes: var(--soft) */
}

/* ===== NAVBAR ===== */
.topbar{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:60;width:min(1200px,94%);
  border-radius:14px;padding:8px 12px;border:1px solid var(--brand);background:rgba(178,34,34,.35);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 30px rgba(0,0,0,.15)
}
.topbar.solid{background:rgba(178,34,34,.96)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand-logo{font-family:'Playfair Display',serif;font-weight:800;letter-spacing:2px;color:#fff;font-size:24px;text-decoration:none}
.menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.menu a{color:#fff;text-decoration:none;font-weight:700;font-size:13px;text-transform:uppercase;padding:8px 10px;border-radius:10px}
.menu a.active{background:rgba(255,255,255,.2)}
.nav-actions{display:flex;gap:10px}
.login{color:#fff;width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:rgba(255,255,255,.16)}
.login .avatar-mini{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#ffffff26;color:#fff;font-weight:900;font-size:14px;letter-spacing:.4px}
.hamburger{display:none;background:transparent;border:0;color:#fff;font-size:22px}
@media (max-width:940px){.menu{display:none}.hamburger{display:block}}

/* ===== Page container ===== */
/* ✅ Ahora el fondo gris vive aquí (en el contenido), no arriba del hero */
.page{
  max-width:1200px;
  margin:110px auto 60px;
  padding:0 16px;
  background:var(--soft);
}

/* ===== HERO mejorado ===== */
.hero{
  position:relative; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
  min-height:320px;
}
.hero .hero-bg{position:relative}
.hero .hero-bg img{
  width:100%; height: clamp(260px, 38vw, 420px); object-fit:cover; display:block;
}
.hero .hero-overlay{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.40) 60%, rgba(0,0,0,.58) 100%),
    linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,0) 55%);
}
.hero .hero-content{
  position:absolute; inset:0;
  padding: clamp(16px, 6vw, 64px);
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  color:#fff; text-align:left; text-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hero .hero-content h1{
  margin:0 0 8px; font-weight:900; line-height:1.05;
  font-size: clamp(28px, 5vw, 52px); letter-spacing:.2px;
}
.hero .hero-content h1 span{ font-family:'Playfair Display',serif }
.hero .hero-content p{
  margin:0; font-weight:600; opacity:.95;
  font-size: clamp(13px, 1.8vw, 18px); max-width:min(680px,92%);
}

/* ===== Hero FULL-WIDTH (solo la imagen a todo el ancho) ===== */
/* ✅ Aquí está el FIX real: ya NO usamos margin-top negativo, usamos top para pegarlo arriba */
.page > .hero{
  position:relative;
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  top: -110px;          /* ⬅️ elimina la franja gris superior */
  margin-bottom: -110px;/* ⬅️ compensa para que no “jale” el contenido de abajo */

  border-radius:0;
  box-shadow:none;
}
.page > .hero .hero-bg img{
  height: clamp(360px, 55vh, 640px);
}

/* Chips de sucursales */
.hero-chips{
  position:absolute; left:0; right:0; bottom:12px;
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; padding:0 10px;
}
.chip{
  background:rgba(255,255,255,.95); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  border:1px solid #e5e7eb; color:#111; font-weight:800; border-radius:999px;
  padding:8px 12px; font-size:12px; box-shadow:0 10px 20px rgba(0,0,0,.1); white-space:nowrap;
}
.chip i{ color:var(--brand); margin-right:6px }

/* ===== Maps ===== */
.maps{
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin:18px 0;
}
@media (max-width:980px){ .maps{ grid-template-columns:1fr } }

.map-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden; box-shadow:var(--shadow);
}
.map-head{
  padding:10px 12px; font-weight:900; border-bottom:1px solid #e5e7eb;
}
.map-head i{ color:var(--brand); margin-right:8px }
.map-body iframe{
  display:block; width:100%; height:320px; border:0;
}

/* ===== Contact grid + form ===== */
.contact-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:20px; margin-top:18px;
}
@media (max-width:980px){ .contact-grid{ grid-template-columns:1fr } }

.form-card{
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; box-shadow:var(--shadow); padding:16px;
}
.form-card h2{ margin:0 0 12px }

.contact-form .row{ display:grid; gap:12px; margin-bottom:10px }
.contact-form .grid-2{ grid-template-columns:1fr 1fr }

.field{ display:flex; flex-direction:column; gap:6px }
.field label{
  font-size:12px; color:#6b7280; font-weight:800; text-transform:uppercase; letter-spacing:.3px
}
.field input,.field textarea{
  padding:12px 14px; border:1px solid #d1d5db; border-radius:12px; background:#fff;
  transition:border .2s, box-shadow .2s
}
.field input:focus,.field textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(178,34,34,.12)
}
.field .hint{ font-size:12px; color:#6b7280 }

.form-actions{
  display:flex; gap:10px; justify-content:flex-end; margin-top:6px
}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:10px; border:0;
  cursor:pointer; font-weight:900
}
.btn-primary{ background:var(--brand); color:#fff }
.btn-secondary{ background:#111827; color:#fff }
.btn-ghost{ background:#e5e7eb; color:#111 }

.cbox{ display:flex; gap:10px; align-items:flex-start; margin:6px 0; font-size:13px }
.cbox input{ display:none }
.cbox .checkmark{
  width:18px; height:18px; border-radius:4px; border:2px solid #cbd5e1; position:relative; flex:0 0 18px; margin-top:2px
}
.cbox input:checked + .checkmark{ border-color:var(--brand); background:var(--brand) }
.cbox input:checked + .checkmark::after{
  content:""; position:absolute; left:4px; top:1px; width:6px; height:10px;
  border:2px solid #fff; border-top:0; border-left:0; transform:rotate(45deg)
}

.disclaimer{ font-size:12px; color:#6b7280; margin-top:10px }
.disclaimer a{ color:var(--brand-dark); text-decoration:none; font-weight:700 }

/* ===== Right side (CTA + imagen) ===== */
.contact-right{ display:grid; gap:16px; align-content:start }
.card-cta{
  background:linear-gradient(180deg,#fff,#f9fafb); border:1px solid #e5e7eb; border-radius:14px; padding:16px; box-shadow:var(--shadow)
}
.cta-icon{
  width:60px; height:60px; border-radius:14px; background:#111; color:#fff;
  display:grid; place-items:center; font-size:26px; margin-bottom:8px
}
.card-cta h3{ margin:0 0 6px }
.cta-actions{ display:flex; gap:10px; margin:10px 0 }
.cta-hours{ font-size:13px; color:#374151 }
.illus{
  width:100%; height:260px; object-fit:cover; border-radius:14px; box-shadow:var(--shadow)
}

/* ===== Footer ===== */
.footer-elegant{ background:linear-gradient(180deg,#111,#1a1a1a); color:#e5e7eb; margin-top:32px }
.footer-social{ display:flex; justify-content:center; gap:20px; padding:18px 0 8px }
.footer-social a{ width:44px; height:44px; border-radius:50%; background:#222; display:grid; place-items:center; color:#fff }
.footer-main{
  max-width:1200px; margin:0 auto; padding:20px 16px 28px;
  display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:26px; border-top:1px solid #2b2b2b
}
.footer-locs{ display:grid; gap:12px }
.loc-card{
  display:flex; gap:10px; align-items:center; background:rgba(255,255,255,.06); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  padding:10px 12px; border-radius:10px
}
.footer-brand{text-align:center}
.footer-brand h2{ font-family:'Playfair Display',serif; letter-spacing:3px; margin:0 }
.brand-line{
  width:180px; height:2px; background:linear-gradient(90deg,transparent,#fff,transparent); margin:8px auto 0; opacity:.3
}
.footer-links{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
.footer-links a{ color:#e5e7eb; text-decoration:none; font-weight:600 }
.footer-payments{
  max-width:1200px; margin:0 auto 18px; display:flex; flex-wrap:wrap; gap:18px; justify-content:center
}
.footer-payments img{
  height:28px; background:#fff; padding:6px 10px; border-radius:6px; box-shadow:0 4px 10px rgba(0,0,0,.25)
}
.footer-copy{ text-align:center; color:#9ca3af; font-size:13px; padding:10px 0 18px; border-top:1px solid #2b2b2b }

/* ===== Toast (opcional) ===== */
.toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);
  background:#111827;color:#fff;padding:12px 16px;border-radius:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);display:none;gap:10px;align-items:center;
  font-weight:700;z-index:99
}
.toast.show{display:flex;animation:fadeUp .35s ease}
.toast i{color:#22c55e}
@keyframes fadeUp{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* ===== Responsive fino ===== */
@media (max-width:720px){
  .brand-logo{font-size:20px}
  .hero .hero-content{ padding:20px }
  .hero .hero-content h1{ font-size: clamp(26px, 7vw, 40px) }
  .hero-chips{ bottom:8px; gap:8px }
  .maps{ gap:12px }
}
@media (max-width:520px){
  .page{ margin-top:96px }
  .page > .hero{
    top:-96px;
    margin-bottom:-96px;
  }
  .hero .hero-content{ padding:16px }
  .chip{ font-size:11px; padding:7px 10px }
}

/* Accesibilidad: reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important }
}

/* ===== Alerts / Validación ===== */
.alert {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.alert-success { background: #e6f4ea; color: #14532d; border: 1px solid #b7e4c7; }
.alert-danger  { background: #fde8e8; color: #b91c1c; border: 1px solid #fecaca; }

.is-invalid {
  border-color: #b91c1c !important;
  background-color: #fff5f5;
}
.error {
  color: #b91c1c;
  font-size: 13px;
  margin-top: 4px;
  display: block;
}
/* ===========================
   FIX: quitar franja gris arriba del HERO
   (NO mueve la navbar)
=========================== */

/* 1) La page ya NO empuja hacia abajo con margin-top.
      En su lugar, baja el contenido con padding-top (espacio para navbar) */
.page{
  max-width:1200px;
  margin:0 auto 60px !important;
  padding:110px 16px 0 !important;
  background:transparent; /* no es necesario pintar nada aquí */
}

/* 2) El hero full width se “mete” en el padding-top y queda pegado arriba */
.page > .hero{
  width:100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  margin-top:-110px !important; /* quita el espacio gris superior */
  border-radius:0 !important;
  box-shadow:none !important;
}

/* 3) Ajuste móvil para que no vuelva a aparecer */
@media (max-width:520px){
  .page{
    padding-top:96px !important;
  }
  .page > .hero{
    margin-top:-96px !important;
  }
}