/* Variables y base */
:root{
  --bg:#FFFFFF;
  --bg-alt:#F5F5F5;
  --panel:#ECEFF3;
  --text:#222222;
  --muted:#808285;
  --muted-2:#999999;
  --primary:#4169E1;
  --primary-2:#191970;
  --accent:#0274BE;
  --neutral:#E6E6E6;
  --border:#CCCCCC;
  --radius:12px;
  --shadow:0 8px 30px rgba(0,0,0,.08);
  --shadow-soft:0 4px 16px rgba(0,0,0,.06);
  --glass:rgba(255,255,255,.6);
  --trans:.2s ease;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Oxygen-Sans,Ubuntu,Cantarell,'Helvetica Neue',sans-serif;
  font-size:16px; line-height:1.65; color:var(--text); background:var(--bg);
}
img{max-width:100%; height:auto; display:block}
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.nowrap{white-space:nowrap}
.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}
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus{left:16px; top:16px; width:auto; height:auto; background:#000; color:#fff; padding:8px 12px; z-index:10000}

/* Header */
.site-header{position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(10px); background:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.7)); border-bottom:1px solid var(--border)}
.header-inner{display:flex; align-items:center; gap:16px; padding:12px 0}
.logo{display:flex; align-items:center; gap:10px; color:var(--text); text-decoration:none; font-weight:700; font-family:Montserrat,system-ui,sans-serif}
.main-nav{margin-left:auto}
.nav-toggle{display:none; background:var(--neutral); border:1px solid var(--border); padding:8px 12px; border-radius:8px; transition:var(--trans)}
.nav-toggle:hover{background:#fff}
.menu{list-style:none; display:flex; gap:18px; margin:0; padding:0; align-items:center}
.menu a{color:var(--text); text-decoration:none; font-weight:600; transition:var(--trans)}
.menu a:hover{color:var(--primary)}
.has-sub{position:relative}
.submenu{position:absolute; top:120%; left:0; min-width:220px; background:#fff; border:1px solid var(--border); box-shadow:var(--shadow); border-radius:10px; padding:8px 0; opacity:0; visibility:hidden; transform:translateY(6px); transition:var(--trans)}
.has-sub:hover .submenu, .has-sub:focus-within .submenu{opacity:1; visibility:visible; transform:translateY(0)}
.submenu li{list-style:none}
.submenu a{display:block; padding:10px 14px}
.submenu a:hover{background:var(--bg-alt)}
.header-actions{display:flex; align-items:center; gap:10px; margin-left:16px}
.action{border:1px solid transparent; background:transparent; color:var(--muted); padding:8px 10px; border-radius:8px; text-decoration:none; transition:var(--trans)}
.action:hover{color:var(--primary); background:var(--bg-alt)}
.dot{width:6px; height:6px; background:var(--primary); border-radius:50%; display:inline-block; margin-right:6px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:12px 18px; border-radius:12px; text-decoration:none; font-weight:600; transition:box-shadow var(--trans), transform var(--trans), background var(--trans), color var(--trans)}
.btn.primary{background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff}
.btn.primary:hover{box-shadow:0 8px 24px rgba(65,105,225,.35); transform:translateY(-1px)}
.btn.primary.glow{box-shadow:0 0 0 0 rgba(65,105,225,.5); animation:pulse 2.5s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(65,105,225,.45)}70%{box-shadow:0 0 0 20px rgba(65,105,225,0)}100%{box-shadow:0 0 0 0 rgba(65,105,225,0)}}
.btn.neutral{background:var(--neutral); color:var(--text); border:1px solid var(--border)}
.btn.neutral:hover{background:#fff}
.badge-reserva{padding:8px 12px; border-radius:999px; background:rgba(65,105,225,.1); color:var(--primary); border:1px dashed var(--primary)}
.badge-reserva:hover{background:rgba(65,105,225,.18)}

/* Search panel */
.search-panel{position:fixed; right:20px; top:72px; width:min(620px, calc(100% - 40px)); max-width:100%; border:1px solid var(--border); border-radius:16px; background:var(--glass); backdrop-filter:blur(12px); box-shadow:var(--shadow); transform:translateY(-12px) scale(.98); opacity:0; pointer-events:none; transition:var(--trans);}
.search-panel.open{transform:translateY(0) scale(1); opacity:1; pointer-events:auto}
.search-inner{padding:16px}
.search-form{display:flex; gap:10px}
.search-form input{flex:1; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:#fff}

/* Hero */
.hero{position:relative; min-height:72vh; display:grid; align-items:center; overflow:hidden;}
.hero-media{position:absolute; inset:0}
.hero-media img{width:100%; height:100%; object-fit:cover; will-change:transform; filter:saturate(110%)}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(60% 60% at 20% 20%, rgba(255,255,255,.6), rgba(255,255,255,.2)), linear-gradient(180deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,.2) 100%)}
.hero-content{position:relative; z-index:2; padding:80px 0}
.hero h1{font-family:Montserrat,system-ui,sans-serif; font-weight:700; font-size:2.2em; margin:0 0 10px}
.hero p{max-width:680px; color:#333; margin:0 0 20px}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap}
.decor-bubble{position:absolute; border-radius:50%; filter:blur(30px); opacity:.5; animation:float 12s ease-in-out infinite}
.decor-bubble.a{width:240px; height:240px; background:linear-gradient(135deg,#8fb3ff,#8de1ff); right:-40px; top:-40px}
.decor-bubble.b{width:180px; height:180px; background:linear-gradient(135deg,#b0b8ff,#b0ffe1); left:-30px; bottom:-30px; animation-duration:16s}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(16px)}100%{transform:translateY(0)}}

/* Sections */
.section{padding:64px 0; background:var(--bg)}
.section.alt{background:var(--bg-alt)}
.section-head{margin-bottom:24px}
.section-head h2{font-weight:600; font-size:1.875em; margin:0 0 8px}
.section-head p{color:var(--muted)}

/* Grid helpers (Astra-like) */
.grid{display:grid; gap:20px}
.ast-width-50{grid-template-columns:repeat(2,1fr)}
.ast-width-33{grid-template-columns:repeat(3,1fr)}
.ast-width-25{grid-template-columns:repeat(4,1fr)}
.align-center{align-items:center}

/* Cards */
.card{background:#fff; border-radius:var(--radius); padding:18px; box-shadow:var(--shadow-soft)}
.card.glass{background:rgba(255,255,255,.7); backdrop-filter:blur(8px); border:1px solid var(--border)}
.card.border{border:1px solid var(--border)}
.media-row{margin-top:20px; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}

/* Benefits */
.benefits{list-style:none; margin:0; padding:0}
.benefit{background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px 12px; display:flex; align-items:center; gap:10px; box-shadow:var(--shadow-soft)}
.benefit .ico{font-size:1.2em}

/* Testimonios */
.testimonial{background:#fff; border:1px solid var(--border); border-radius:14px; padding:18px; box-shadow:var(--shadow-soft)}
.testimonial p{margin:0 0 10px}
.testimonial footer{color:var(--muted-2)}

/* FAQs */
.faq-list details{background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-soft)}
.faq-list details+details{margin-top:10px}
.faq-list summary{cursor:pointer; font-weight:600}
.faq-list p{margin:8px 0 0}

/* CTA */
.cta{position:relative; color:#fff; background:linear-gradient(135deg, #191970, #4169E1); overflow:hidden}
.cta:before{content:""; position:absolute; inset:-40%; background:conic-gradient(from 0deg, rgba(255,255,255,.2), transparent 30%, rgba(255,255,255,.2) 60%, transparent 90%); animation:spin 18s linear infinite}
.cta-inner{position:relative; z-index:1; text-align:center}
.cta h2{margin:0 0 8px; color:#fff}
.cta p{margin:0 0 18px; color:#f0f3ff}
@keyframes spin{to{transform:rotate(360deg)}}

/* Social */
.social{display:flex; align-items:center; justify-content:center; font-weight:700; text-decoration:none; padding:24px; border:1px solid var(--border); transition:var(--trans)}
.social.ig{background:linear-gradient(135deg,#f9d1d7,#fff)}
.social.tk{background:linear-gradient(135deg,#d1f4ff,#fff)}
.social:hover{transform:translateY(-2px); box-shadow:var(--shadow)}

/* Contact form placeholders */
.contact{background:var(--bg-alt)}
.contact-form{background:#fff; border:1px solid var(--border); border-radius:16px; padding:20px; box-shadow:var(--shadow); min-height:180px; display:grid; place-items:center}
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:12px}
.form-field input,.form-field textarea{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff; transition:var(--trans)}
.form-field input:focus,.form-field textarea:focus{outline:2px dashed var(--accent); outline-offset:2px; border-color:var(--primary)}
.form-field.consent{flex-direction:row; align-items:center; gap:10px}
.contact-submit{display:inline-flex; align-items:center; gap:10px; padding:12px 18px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; border:none; border-radius:12px; cursor:pointer; transition:var(--trans)}
.contact-submit:hover{box-shadow:0 8px 24px rgba(65,105,225,.35); transform:translateY(-1px)}

/* Footer */
.site-footer{border-top:1px solid var(--border); background:#fff}
.footer-brand{display:flex; align-items:center; gap:10px; margin-bottom:8px}
.logo-mark{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:10px; background:linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; font-weight:700}
.foot-title{font-size:1.05em; margin:0 0 8px}
.foot-links{list-style:none; margin:0; padding:0}
.foot-links li+li{margin-top:6px}
.foot-links a{text-decoration:none; color:var(--text)}
.foot-links a:hover{color:var(--primary)}
.foot-bottom{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--border); margin-top:20px}
.foot-legal{display:flex; align-items:center; gap:8px}

/* Focus visible */
:focus-visible{outline:2px dashed var(--accent); outline-offset:2px}

/* Responsive */
@media (max-width:1024px){
  .nav-toggle{display:inline-block}
  .menu{position:absolute; left:0; right:0; top:64px; background:#fff; border-bottom:1px solid var(--border); padding:12px 20px; flex-direction:column; gap:10px; transform:translateY(-10px); opacity:0; pointer-events:none; transition:var(--trans)}
  .menu.open{transform:translateY(0); opacity:1; pointer-events:auto}
  .has-sub .submenu{position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none; padding:0; display:none}
  .has-sub.open .submenu{display:block}
  .ast-width-50,.ast-width-33,.ast-width-25{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
  .header-actions{display:none}
  .hero{min-height:64vh}
  .hero h1{font-size:1.8em}
  .ast-width-50,.ast-width-33,.ast-width-25{grid-template-columns:1fr}
}

/* contact-details:start */
.contact-details {
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92));
  border: 1px solid var(--border, rgba(148, 163, 184, 0.35));
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
  display: grid;
  gap: 0.65rem;
  color: var(--text, #0f172a);
}

.contact-details strong {
  letter-spacing: 0.05em;
  font-size: 0.95rem;
  text-transform: uppercase;
  color: var(--muted, #475569);
}

.contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.contact-row .label {
  color: var(--muted, #475569);
  font-size: 0.95rem;
}

.contact-link {
  color: var(--text, #0f172a);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.contact-link:hover {
  color: var(--color-accent, #2563eb);
}

@media (max-width: 540px) {
  .contact-row {
    flex-direction: column;
    align-items: flex-start;
  }
}
/* contact-details:end */

/* contrast-guard:start */
body {
  color: var(--text, #0f172a);
  background-color: var(--bg, #ffffff);
}

header, section, footer, .contact-panel, .cta-box, .feature-card, .contact-details {
  color: var(--text, #0f172a);
}

.dark, .dark-section, footer.dark, header.dark {
  background-color: var(--color-surface, #0f172a);
  color: var(--color-contrast, #f8fafc);
}

.contact-form input,
.contact-form textarea {
  color: var(--text, #0f172a);
  background: #ffffff;
}

.cta-btn, .contact-submit {
  color: #ffffff;
}
/* contrast-guard:end */

/* contact-wrapper-styles:start */
.contact-shell {
  position: relative;
  isolation: isolate;
}

.contact-panel {
  width: min(640px, 100%);
  margin-inline: auto;
  backdrop-filter: blur(18px);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.9));
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 24px;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  box-shadow: var(--shadow-soft, 0 12px 24px rgba(15, 23, 42, 0.12));
}

.contact-form-card {
  width: 100%;
  max-width: 720px;
}

.contact-heading {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}

.contact-kicker {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85rem;
  opacity: 0.65;
  color: var(--color-accent, #2563eb);
}

.contact-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2rem);
}

.contact-lead {
  margin: 0;
  color: var(--muted, #475569);
  max-width: 640px;
}

.contact-form-shell {
  margin-top: 1.25rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.form-field {
  display: grid;
  gap: 0.5rem;
  color: var(--text, #0f172a);
}

.form-field.consent {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
}

.form-field.consent span {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.85;
}

.form-field span {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  opacity: 0.65;
}

.form-field input,
.form-field textarea {
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border, rgba(148, 163, 184, 0.45));
  background: #fff;
  color: inherit;
  resize: vertical;
  min-height: 54px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--muted, #6b7280);
}

.contact-form input[type="checkbox"] {
  width: auto;
  min-height: auto;
  accent-color: var(--color-accent, #2563eb);
}

.form-field textarea {
  min-height: 140px;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.85);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  transform: translateY(-2px);
}

.contact-submit {
  justify-self: start;
  padding: 1rem 2.6rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, var(--color-accent, #2563eb) 0%, var(--color-accent-strong, #22d3ee) 100%);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}

.contact-submit:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 45px rgba(244, 114, 182, 0.32);
  filter: brightness(1.05);
}

@media (max-width: 640px) {
  .contact-panel {
    padding: 1.25rem;
  }
}
/* contact-wrapper-styles:end */