/* Agencia Turística de Morelos MarYsol - Styles */
:root{
  --primary:#00a7b5; /* turquesa logo */
  --secondary:#ffd54d; /* amarillo sol */
  --accent:#0e7a83; /* teal oscuro */
  --bg:#f4fbfb;
  --text:#0b2a2e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
  color:var(--text);
  background:var(--bg);
}

a{color:var(--primary);text-decoration:none}
a:hover{opacity:.9}

.header{
  position:sticky; top:0; z-index:1000;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(255,255,255,.8);
  border-bottom:1px solid #e5f3f3;
}
.nav{
  max-width:1100px; margin:auto; padding:12px 18px;
  display:flex; align-items:center; justify-content:space-between;
}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:42px; height:42px; border-radius:10px}
.brand h1{font-size:1.05rem; margin:0; line-height:1.1}
.brand small{display:block; font-weight:500; color:var(--accent)}

.menu{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.menu a{padding:8px 12px; border-radius:10px; font-weight:600}
.menu a.cta{background:var(--primary); color:white}
.menu a.outline{border:2px solid var(--primary)}

.hero{
  position:relative;
  min-height:68vh;
  display:grid; place-items:center;
  background:radial-gradient(ellipse at 20% -20%, rgba(255,213,77,.35), transparent 45%), linear-gradient(180deg, #e8fbff, #ffffff);
  overflow:hidden;
}
.hero .bg{
  position:absolute; inset:0;
  background:url('./assets/bus_marysol.jpg') center/cover no-repeat;
  filter:contrast(1.05) saturate(1.1);
  opacity:.28;
}
.hero .content{
  position:relative; z-index:1;
  max-width:1100px; margin:auto; padding:32px 18px;
  display:grid; gap:14px;
  text-align:center;
}
.badge{
  display:inline-grid; place-items:center; justify-self:center;
  padding:6px 12px; border-radius:100px; background:#fff; border:1px solid #d5eeee; 
  color:var(--accent); font-weight:700; box-shadow:0 8px 30px rgba(0,0,0,.08);
}
.hero h2{font-size:clamp(1.8rem, 4vw, 3rem); margin:6px 0; color:#053b40}
.hero p{font-size:clamp(1rem, 2vw, 1.1rem)}
.hero .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.button{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 16px; border-radius:12px; font-weight:700; border:none; cursor:pointer;
  background:var(--primary); color:#fff; box-shadow:0 12px 30px rgba(0,167,181,.25);
}
.button.alt{background:#fff; color:var(--primary); border:2px solid var(--primary); box-shadow:none}

.section{padding:50px 18px}
.container{max-width:1100px; margin:auto}

.grid{
  display:grid; gap:16px; grid-template-columns:repeat(12, 1fr);
}
.card{
  background:#fff; border:1px solid #e8f2f2; border-radius:18px; padding:16px;
  box-shadow:0 6px 18px rgba(0,0,0,.04);
}
.card h3{margin-top:0}

.gallery{
  display:grid; gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
}
.gallery img{width:100%; height:200px; object-fit:cover; border-radius:14px; cursor:pointer; transition:transform .25s ease}
.gallery img:hover{transform:scale(1.02)}

.lightbox{
  position:fixed; inset:0; display:none; place-items:center; background:rgba(0,0,0,.75); z-index:2000;
}
.lightbox img{max-width:90vw; max-height:85vh; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.55)}
.lightbox.show{display:grid}

.cards-3 > *{grid-column:span 4}
@media (max-width:900px){ .cards-3 > *{grid-column:span 6} }
@media (max-width:640px){ .cards-3 > *{grid-column:span 12} }

.social-embeds{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
.embed{background:#fff; border:1px solid #e8f2f2; border-radius:18px; padding:0; overflow:hidden}

.contact{
  display:grid; gap:16px; grid-template-columns:repeat(12,1fr);
}
.contact .details{grid-column:span 5}
.contact form{grid-column:span 7; background:#fff; border:1px solid #e8f2f2; border-radius:18px; padding:16px}
@media (max-width:900px){
  .contact .details, .contact form{grid-column:span 12}
}

input, textarea{
  width:100%; padding:12px; margin:6px 0 14px;
  border:1px solid #d8ebeb; border-radius:12px; font-size:1rem;
}
textarea{min-height:140px; resize:vertical}
form .row{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:600px){ form .row{grid-template-columns:1fr} }
form button{width:100%}

.footer{
  background:#052b2f; color:#dff7f7; padding:28px 18px; margin-top:30px
}
.footer a{color:#fff; text-decoration:underline}
.whatsapp-float{
  position:fixed; right:16px; bottom:16px; z-index:1500;
  width:58px; height:58px; border-radius:50%;
  display:grid; place-items:center; background:#25D366; color:white;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.whatsapp-float svg{width:30px; height:30px}
/* subtle fade-in */
.reveal{opacity:0; transform:translateY(10px); transition:all .6s ease}
.reveal.show{opacity:1; transform:none}