/* =========================
   El Salvador Renta Car
   Mobile-first • Navy (#001f3f) y blanco (#fff)
   ========================= */
:root{
  --navy:#001f3f;
  --white:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --primary:#001f3f;
  --primary-contrast:#ffffff;
  --shadow: 0 10px 30px rgba(0,0,0,.12);
  --radius:16px;
  --radius-sm:12px;
  --radius-lg:22px;
  --container: 1160px;
  --logo-size: 60px;
  --logo-small: 42px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
  color: var(--ink);
  background:#f7f9fc;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto;}
a{color:inherit; text-decoration:none;}
.container{width:min(100% - 24px, var(--container)); margin-inline:auto;}

/* ===== Header / Navbar (hamburguesa clásica) ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(0,0,0,.06);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; position:relative;}
.brand{display:flex; align-items:center; gap:12px; font-weight:700;}
.logo{width:var(--logo-size); height:var(--logo-size); object-fit:contain;}
.logo.small{width:var(--logo-small); height:var(--logo-small);}
.brand-text{display:none; font-size:1.05rem;}

.hamburger{
  width:42px; height:42px; border:none; border-radius:12px; background:#fff;
  box-shadow:var(--shadow); display:grid; place-items:center; padding:0; cursor:pointer;
}
.hamburger span{display:block; width:20px; height:2px; background:#0b2447; margin:3px 0; border-radius:2px; transition:transform .2s;}
.nav{display:none; gap:16px; align-items:center;}
/* panel tipo dropdown dentro del header */
.header-inner .nav.open{
  position:absolute; top:60px; left:12px; right:12px;
  display:flex; flex-direction:column; background:#fff; padding:12px; border-radius:14px; box-shadow:var(--shadow); z-index:1001;
}
.nav a{padding:8px 10px; border-radius:10px;}
.nav a:hover{background:rgba(0,0,0,.05);}

@media (min-width: 768px){
  .brand-text{display:inline;}
  .hamburger{display:none;}
  .nav{display:flex;}
}

/* ===== Botones ===== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:0; border-radius:999px; padding:12px 18px; font-weight:700; cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .2s ease;
  box-shadow: 0 8px 20px rgba(0,31,63,.18);
}
.btn:hover{transform: translateY(-1px);}
.btn:active{transform: translateY(0);}
.btn-primary{background:var(--primary); color:var(--primary-contrast);}
.btn-outline{background:transparent; border:2px solid var(--primary); color:var(--primary);}
.btn-ghost{background:rgba(0,31,63,.06); color:var(--primary);}
.btn-lg{padding:14px 22px; font-size:1.05rem;}
.small{padding:8px 12px; font-weight:600;}
.w-100{width:100%;}

/* ===== Hero / Carrusel ===== */
.hero{position:relative; min-height:86vh; display:grid; place-items:center; overflow:hidden; color:#fff; background:#000;}
.hero-slide{position:absolute; inset:0; background-image:var(--bg); background-size:cover; background-position:center; opacity:0; transform:scale(1.06); transition: opacity 1s ease, transform 4s ease;}
.hero-slide.current{opacity:1; transform:scale(1);}
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.78)),
              linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,.65));
  opacity: var(--hero-scrim, .85);
}
.hero-content{position:relative; z-index:2; text-align:center; padding:64px 0;}
.hero-title{font-size: clamp(1.6rem, 4vw, 2.8rem); line-height:1.1; margin:0 0 10px;}
.hero-title small{display:block; font-weight:500; opacity:.95; margin-top:8px; font-size:.9em;}
.animated-typing{background: linear-gradient(90deg,#fff, #e6f0ff); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-cta{margin-top:16px;}
.hero-dots{display:flex; gap:10px; justify-content:center; margin-top:22px;}
.dot{width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.55); border:none; cursor:pointer;}
.dot.active{background:#fff;}
.parallax-layer{position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,31,63,.25) 100%); z-index:1; pointer-events:none; transform: translateY(0);}
.hero-bubble{display:inline-block; background: rgba(0, 15, 35, .42); border: 1px solid rgba(255,255,255,.12); border-radius: 18px; padding: 14px 16px; backdrop-filter: blur(4px); box-shadow: 0 10px 30px rgba(0,0,0,.25);}

/* ===== Secciones ===== */
.section{padding:48px 0;}
.section.alt{background:#eef3fb;}
.section-header{text-align:center; margin-bottom:18px;}
.section-header h2{margin:0 0 6px; font-size:clamp(1.35rem, 4vw, 2rem);}
.section-header p{color:var(--muted); margin:0;}

/* ===== Cards de vehículos ===== */
.cards{display:grid; gap:16px; margin-top:18px;}
.card{background:#fff; border-radius: var(--radius); overflow:hidden; box-shadow:var(--shadow); transform: translateY(6px); transition: transform .25s ease, box-shadow .25s ease;}
.card:hover{transform: translateY(0); box-shadow: 0 16px 40px rgba(0,0,0,.12);}
.card img{aspect-ratio: 16/10; object-fit:cover;}
.card-body{padding:14px;}
.card h3{margin:8px 0 2px; font-size:1.1rem;}
.meta{margin:0 0 8px; color:var(--muted); font-size:.92rem;}
.badges{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px;}
.badge{background:#eef3fb; color:#0b2e63; padding:4px 8px; border-radius:999px; font-size:.78rem; font-weight:700;}
.card-actions{display:flex; gap:10px; margin-top:10px;}

/* ===== Por qué elegirnos ===== */
.features{display:grid; gap:16px; margin-top:10px;}
.feature{background:#fff; border-radius: var(--radius); padding:18px; box-shadow:var(--shadow); text-align:center; transition: transform .25s ease;}
.feature:hover{transform: translateY(-2px);}
.icon-bubble{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; background: #0b2e63; color:#fff; margin:0 auto 10px; box-shadow: var(--shadow); animation: floaty 4s ease-in-out infinite;}
.icon-bubble svg{width:28px; fill:#fff; opacity:.95;}

/* ===== Testimonios ===== */
.testimonials{display:grid; gap:14px; margin-top:10px;}
.testimonial{background:#fff; padding:16px; border-radius: var(--radius); box-shadow:var(--shadow);}
.testimonial blockquote{margin:0 0 8px; font-style:italic;}
.testimonial figcaption{color:var(--muted);}

/* ===== Aeropuerto ===== */
.airport-grid{display:grid; gap:16px;}
.airport-info .list{margin:8px 0 0 18px;}
.airport-map img{border-radius: var(--radius); box-shadow:var(--shadow);}

/* ===== Footer ===== */
.site-footer{background:var(--navy); color:#c9d7ef; margin-top:30px;}
.footer-grid{display:grid; gap:18px; padding:26px 0;}
.footer-brand p{margin-top:8px; color:#b9c7e0;}
.footer-contact a{color:#fff; text-decoration:underline;}
.footer-links ul{list-style:none; padding:0; margin:0;}
.footer-links a:hover{text-decoration:underline;}
.socials{display:flex; gap:12px; margin-top:6px;}
.socials a{width:40px; height:40px; display:grid; place-items:center; border-radius:12px; background:#0b2e63; box-shadow:var(--shadow);}
.socials svg{width:20px; fill:#fff;}
.footer-copy{border-top:1px solid rgba(255,255,255,.12); text-align:center; padding:12px; color:#a8bbdd;}

/* ===== Modal Reserva: ahora con scroll interno ===== */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px; z-index:2000;}
.modal[aria-hidden="false"]{display:flex;}
.modal-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(2px);}
.modal-content{
  position:relative; z-index:1; width:min(100%, 560px); background:#fff; border-radius:20px; box-shadow:var(--shadow);
  padding:18px; animation: pop .2s ease;
  max-height:92vh; overflow:auto; -webkit-overflow-scrolling:touch; /* ← esto permite hacer scroll y ver el botón */
}
.modal-close{
  position:absolute; right:8px; top:6px; width:36px; height:36px; border:none; border-radius:10px; background:transparent; font-size:28px; cursor:pointer; color:#334155;
}
.modal-scroll{display:block;} /* el form puede crecer, el contenedor hace scroll */
.form-row{display:flex; flex-direction:column; gap:6px; margin-bottom:12px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
label{font-weight:600;}
input, textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:1px solid #d3d8e6; background:#fff; font: inherit; outline:none;
}
input:focus, textarea:focus{border-color:#7aa2ff; box-shadow:0 0 0 3px rgba(122,162,255,.2);}
.error-msg{color:#c1121f; font-size:.85rem; min-height:1.1em;}

/* ===== Lightbox / Galería: cierre fácil en móvil ===== */
.gallery-modal{position:fixed; inset:0; display:none; z-index:2100;}
.gallery-modal[aria-hidden="false"]{display:block;}
.gallery-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter: blur(2px);}
.gallery-content{
  position:absolute; inset:0; display:grid; grid-template-rows: auto 1fr auto; padding:12px; color:#fff;
}
.gallery-close{
  position:absolute; right:10px; top:10px; width:44px; height:44px; border:none; border-radius:12px;
  background:rgba(255,255,255,.18); color:#fff; font-size:28px; cursor:pointer;
}
.gallery-header{ padding-right: 56px; }
.gallery-title{margin:0; font-size:1.05rem;}
.gallery-counter{ display:none !important; }
.gallery-stage{position:relative; min-height:55vh; display:grid; place-items:center; margin:6px 0;}
.gallery-stage img{
  max-width:100%; max-height:70vh; border-radius:12px; box-shadow: 0 15px 40px rgba(0,0,0,.35);
  cursor:pointer; /* ← indica que se puede tocar para cerrar */
}
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border:none; border-radius:50%;
  background:rgba(255,255,255,.18); color:#fff; font-size:18px; cursor:pointer;
}
.gallery-nav:hover{ background:rgba(255,255,255,.3); }
.gallery-nav.prev{ left:8px; }
.gallery-nav.next{ right:8px; }
.gallery-thumbs{display:flex; gap:8px; overflow-x:auto; padding:6px 2px;}
.gallery-thumbs img{width:72px; height:56px; object-fit:cover; border-radius:8px; opacity:.8; cursor:pointer; border:2px solid transparent; flex:0 0 auto;}
.gallery-thumbs img.active{opacity:1; border-color:#fff;}
.gallery-footer{padding:8px 0 2px;}

/* ===== Toast ===== */
#toast{position:fixed; left:50%; bottom:16px; transform: translateX(-50%) translateY(120%); background:#0a1e3c; color:#fff; padding:10px 14px; border-radius:999px; z-index:2200; opacity:0; transition: transform .25s ease, opacity .25s ease;}
#toast.show{transform: translateX(-50%) translateY(0); opacity:1;}
.toast-inner{display:flex; align-items:center; gap:8px;}
.toast-inner .check{background:#11c26b; color:#052c1f; width:22px; height:22px; display:grid; place-items:center; border-radius:50%; font-weight:900;}

/* ===== Animaciones por scroll ===== */
.reveal{opacity:0; transform: translateY(16px); transition: opacity .7s ease, transform .7s ease;}
.reveal.visible{opacity:1; transform: translateY(0);}

/* ===== Keyframes ===== */
@keyframes pop{from{transform: scale(.96); opacity:0;} to{transform: scale(1); opacity:1;}}
@keyframes floaty{0%,100%{transform: translateY(0)} 50%{transform: translateY(-6px)}}

/* ===== Desktop enhancements ===== */
@media (min-width: 768px){
  .cards{grid-template-columns: repeat(3, 1fr);}
  .features{grid-template-columns: repeat(3, 1fr);}
  .testimonials{grid-template-columns: repeat(3, 1fr);}
  .airport-grid{grid-template-columns: 1fr 1fr; align-items:center;}
  .hero{min-height:92vh;}
}

/* ===== Footer horizontal moderno ===== */
.footer-horizontal{
  background: linear-gradient(180deg, #001f3f 0%, #00152a 100%);
  color:#dbe7ff;
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-row{
  display:flex; align-items:center; gap:16px;
  padding:12px 0;
  overflow-x:auto; /* scroll horizontal en móvil si no cabe */
  -webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}
.footer-row .fh-col{ flex:0 0 auto; scroll-snap-align:center; display:flex; align-items:center; gap:10px; }

.fh-brand .logo{ width:48px; height:48px; object-fit:contain; border-radius:12px; background:rgba(255,255,255,.06); padding:6px; }
.fh-brand .fh-txt{ display:flex; flex-direction:column; line-height:1.1; }
.fh-brand .fh-txt strong{ color:#ffffff; font-size:.98rem; }
.fh-brand .fh-txt small{ color:#b9c7e0; font-size:.8rem; }

.fh-actions .btn{ box-shadow:none; }
.footer-horizontal .btn-outline{ border-color:#fff; color:#fff; }
.footer-horizontal .btn-outline:hover{ background:rgba(255,255,255,.1); }
.footer-horizontal .btn-primary{ background:#fff; color:#001f3f; }

.fh-links a{
  padding:8px 10px; border-radius:10px; color:#dbe7ff; font-weight:600;
}
.fh-links a:hover{ background:rgba(255,255,255,.1); }

.fh-socials a{
  width:40px; height:40px; display:grid; place-items:center;
  border-radius:12px; background:rgba(255,255,255,.12);
}
.fh-socials svg{ width:20px; fill:#fff; opacity:.95; }

.fh-copy{ color:#a8bbdd; font-size:.9rem; margin-left:auto; }

/* Desktop: más aire y centrado */
@media (min-width: 768px){
  .footer-row{ gap:22px; padding:16px 0; overflow:visible; }
  .fh-brand .logo{ width:56px; height:56px; }
}