:root{
  --bg:#0f1115; --ink:#f7f7f7; --accent:#ffd34e; --muted:#c8d1dc;
  --card:rgba(255,255,255,.06); --card-bd:rgba(255,255,255,.12);
  --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.35);
  --danger:#ff6b6b; --ok:#46d39a;
  
  .topbar{
  position: sticky;
  top: 0;
  z-index: 1000;
}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial}
a{color:var(--accent);text-decoration:none}
img{max-width:100%;display:block}
.topbar{position:sticky;top:0;z-index:50;background:rgba(10,12,16,.7);border-bottom:1px solid var(--card-bd);backdrop-filter:saturate(180%) blur(8px)}
.wrap{max-width:1150px;margin:auto;padding:0 20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:74px}
.brand{display:flex;align-items:center;gap:12px}
.brand img{height: 64px;width:auto}
.brand .name{font-weight:800;letter-spacing:.4px font-size: 1.15rem;}
.menu a{margin:0 10px;font-weight:600;opacity:.9}
.menu a:hover{opacity:1}
.hero{position:relative;background:linear-gradient(180deg,#0c0f14 0%,#10151e 60%,#0f1115 100%);padding:80px 0 40px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:stretch}
.hero h1{font-size:clamp(30px,5vw,52px);margin:.2em 0}
.hero p{color:var(--muted);font-size:1.1rem;line-height:1.6}
.cta{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap}
.btn{background:var(--accent);color:#1b1400;border:0;padding:12px 18px;font-weight:800;border-radius:10px;cursor:pointer;box-shadow:var(--shadow);display:inline-flex;align-items:center;gap:10px}
.btn.ghost{background:transparent;color:var(--accent);border:1px solid var(--accent)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:22px}
.card{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.card img{aspect-ratio:16/10;object-fit:cover}
.card-body{padding:14px 16px}
.badge{display:inline-block;font-size:.8rem;background:#1c222d;border:1px solid var(--card-bd);padding:6px 8px;border-radius:999px;margin-right:8px}
.card .btn{margin:12px 16px 16px 16px}
.foot{padding:26px 0;text-align:center;color:var(--muted);font-size:.95rem}
.calendar{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;height:100%}
.calendar img{border-radius:10px;aspect-ratio:4/5;object-fit:cover}
.calendar h3{margin:10px 0 2px 0}
.calendar p{color:var(--muted);margin:0 0 10px 0}
.subtle{font-size:.9rem;color:var(--muted)}
@media(max-width:900px){ .hero-inner{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} }
#contacto{padding:50px 0;background:linear-gradient(180deg,#0f1115 0%,#121722 100%);border-top:1px solid var(--card-bd);border-bottom:1px solid var(--card-bd)}
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:26px;align-items:center}
.contact-card{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.wa-row{display:flex;align-items:center;gap:12px;margin:10px 0 16px 0}
.icon-wa{width:22px;height:22px;display:inline-block}
.price{font-weight:800;margin:8px 16px 0 16px}
#carrito{padding:50px 0}
.cart{background:var(--card);border:1px solid var(--card-bd);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.cart h2{margin-top:0}
.cart-table{width:100%;border-collapse:collapse;margin-bottom:14px}
.cart-table th,.cart-table td{padding:10px;border-bottom:1px solid var(--card-bd);text-align:left}
.right{text-align:right}
.small{font-size:.9rem;color:var(--muted)}
.input{width:100%;padding:10px;border-radius:8px;border:1px solid var(--card-bd);background:#12151c;color:var(--ink)}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:680px){.row{grid-template-columns:1fr}}
.ok{color:var(--ok);font-weight:700}
.danger{color:var(--danger);font-weight:700}
.pill{display:inline-block;padding:2px 8px;border:1px solid var(--card-bd);border-radius:999px;font-size:.8rem;margin-left:6px}
.cart-link{display:inline-flex;align-items:center;gap:8px}
.icon-cart{width:22px;height:22px;vertical-align:middle}

/* === Vertical 12 additions === */
/* Vertical 16: hero a bit taller, prevent overflow */
.hero.tall{ min-height:92vh; max-height:100vh; overflow:hidden; padding:6vh 0 3vh; }
.rotor{ background:var(--card); border:1px solid var(--card-bd); border-radius:14px; padding:12px; box-shadow:var(--shadow); }
.rotor h3{ margin:4px 0 8px 0; font-size:1.15rem; }
.rotor figure{ margin:0 }
.rotor img{ border-radius:10px; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover }
.rotor .controls{ display:flex; align-items:center; justify-content:space-between; margin-top:8px }
.rotor .dots{ display:flex; gap:6px }
.dot{ width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35) }
.dot.active{ background:var(--accent) }
/* Section titles outside cards (match Expediciones/Tienda look) */
.section-title{
  font-size:clamp(26px,4.5vw,42px);
  font-weight:800;
  letter-spacing:.2px;
  margin:26px 0 14px 0;
  text-align:center;
}
#contacto{ padding:50px 0; }

/* === Vertical 14: Language toggle (ES/EN) === */
.lang-toggle{display:inline-flex;align-items:center;gap:8px;margin-left:10px;border:1px solid var(--card-bd);background:transparent;padding:8px 10px;border-radius:999px;cursor:pointer}
.lang-toggle .icon{width:18px;height:18px;display:inline-block}
.lang-toggle span{font-weight:600; font-size:.9rem}
@media(max-width:520px){ .lang-toggle span{display:none} }

/* Vertical 16: language toggle in yellow */
.lang-toggle{
  background:#FFD400 !important;
  color:#111 !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.lang-toggle:hover{ filter:brightness(0.95); }
.topbar .lang-toggle .icon path{ fill:#111; }

/* V16 update: widen rotor column for a bigger calendar image */
@media(min-width:901px){
  .hero-inner{ grid-template-columns: 1fr 1.25fr; }
}

/* V16 update: bigger rotor image without overflowing below the fold */
.rotor img{
  aspect-ratio: 4 / 3 !important;
  max-height: calc(100vh - 240px);
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* V18 updates: Contact section to match topbar & social/slogan styling */
#contacto{ background: rgba(10,12,16,.7) !important; color:#fff !important; }
#contacto .section-title, #contacto h2, #contacto h3, #contacto p, #contacto a{ color:#fff !important; }
#contacto .contact-card{ background: transparent !important; border:1px solid rgba(255,255,255,.12) !important; }
#slogan-block .slogan{ color:#FFD400; font-weight:900; font-size: clamp(24px,4.2vw,36px); letter-spacing:.2px; margin:8px 0 2px; }
#slogan-block .follow{ color:#fff; font-size:.95rem; opacity:.95; }
.socials{ display:flex; gap:12px; align-items:center; margin-top:8px; flex-wrap:wrap; }
.socials a{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid rgba(255,255,255,.15); border-radius:999px; color:#fff !important; text-decoration:none !important; }
.socials svg{ width:18px; height:18px; }