/* Variables */
:root{
  --bg:#0e0e0f;
  --surface:#141416;
  --text:#ececec;
  --muted:#b8b8b8;
  --gold:#d6b25e;
  --gold-2:#b8913b;
  --accent: #e8d39b;
  --ring: rgba(214,178,94,.35);
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

/* Reset + base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background: linear-gradient(180deg, #0b0b0c, #111113 20%, #0b0b0c);
  scroll-behavior:smooth;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{width:min(1200px, 92%); margin-inline:auto}
.section{padding:80px 0}
.section.alt{background: linear-gradient(180deg, #0f0f11, #141416)}
h1,h2,h3{margin:0 0 10px}
h1{font-size: clamp(40px, 7vw, 64px); letter-spacing:.02em}
h2{font-size: clamp(28px, 4vw, 36px)}
h3{font-size: 20px}
p{margin:0 0 16px;color:var(--muted)}
.center{text-align:center}

/* Header / Nav */
.header{
  position:sticky; top:0; z-index:50;
  background: rgba(17,17,19,.6);
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.nav-container{display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:700; letter-spacing:.5px}
.logo{filter: drop-shadow(0 2px 6px rgba(214,178,94,.4));}
.nav{display:flex; gap:18px; align-items:center}
.nav a{opacity:.9; padding:10px 12px; border-radius:10px; transition: transform .2s ease, background .2s ease}
.nav a:hover{background: rgba(255,255,255,.06); transform: translateY(-2px)}
.nav .btn-primary{padding:10px 16px}

.nav-toggle{
  display:none; width:44px; height:40px; background:transparent; border:none; cursor:pointer;
}
.nav-toggle .bar{display:block; height:2px; margin:6px 0; background:var(--text); transition:.3s}

/* Hero */
.hero{
  position:relative; min-height:72vh; display:grid; place-items:center;
  background: url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?q=80&w=2400&auto=format&fit=crop') center/cover no-repeat fixed;
}
.hero-overlay{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.35), rgba(0,0,0,.7));
}
.hero-inner{position:relative; padding:120px 0; text-align:center}
.hero .subtitle{font-size: clamp(16px,2.2vw,20px); color:var(--accent); margin-bottom:26px}

/* Buttons */
.btn{
  display:inline-block; padding:12px 18px; border-radius:14px; border:1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, #1a1a1c, #121214);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  will-change: transform;
}
.btn:hover{transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,.45)}
.btn-primary{
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#141311; border-color: transparent; font-weight:700;
}
.btn-primary:hover{filter:brightness(1.05)}

/* Layout helpers */
.grid{display:grid; gap:24px}
.grid.two{grid-template-columns: 1.1fr 1fr}
.grid.three{grid-template-columns: repeat(3,1fr)}
.stack{display:flex; flex-direction:column; gap:14px}
.mini-grid{display:grid; grid-template-columns: repeat(2,1fr); gap:16px}

/* Cards */
.card{
  background: linear-gradient(180deg, #151517, #111114);
  border:1px solid rgba(255,255,255,.06);
  border-radius:18px; padding:18px; box-shadow: var(--shadow);
}
.card.outline{background: transparent}
.card .icon{color:var(--gold); margin-bottom:10px}
.service ul{padding-left:16px; margin:8px 0 14px}
.service li{margin:4px 0}
.service .price{font-weight:800; color:var(--gold); font-size: 20px; margin-bottom:12px}
.service.highlight{border-color: rgba(214,178,94,.5); position:relative}
.ribbon{
  position:absolute; top:16px; right:-12px; background: linear-gradient(180deg, var(--gold), var(--gold-2));
  color:#141311; padding:6px 12px; border-radius:10px; font-size:12px; font-weight:800; box-shadow: var(--shadow)
}

/* About gallery */
.gallery.about{
  display:grid; gap:12px; grid-template-columns: repeat(2,1fr);
}
.gallery.about img{border-radius:16px; aspect-ratio: 4/3; object-fit:cover; border:1px solid rgba(255,255,255,.08)}

/* Carrusel corregido */
.carousel {
  position: relative;
  margin-top: 14px;
  overflow: hidden; /* oculta scroll y que no se vea otra foto */
}

.carousel-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
}

.carousel-track img {
  flex: 0 0 100%;   /* cada imagen ocupa todo el ancho */
  width: 100%;
  height: 500px;    /* ajusta altura a tu gusto */
  object-fit: cover;
  border-radius: 12px;
  border:1px solid rgba(255,255,255,.08);
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.2);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
}
.carousel-btn:hover { background: rgba(0,0,0,.6); }
.carousel .prev { left: 8px; }
.carousel .next { right: 8px; }

/* Filters */
.filters{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin:10px 0 14px}
.chip{
  background:#171719; border:1px solid rgba(255,255,255,.1); color:var(--muted);
  padding:8px 12px; border-radius:999px; cursor:pointer; transition:.2s
}
.chip:hover{transform: translateY(-2px)}
.chip.active{border-color: var(--gold); color:#fff}

/* Masonry Grid */
.masonry{
  columns: 1 280px; column-gap: 12px; margin-top: 18px;
}
.masonry .m-item{
  break-inside: avoid; margin-bottom:12px; border-radius:16px; overflow:hidden;
  border:1px solid rgba(255,255,255,.08)
}
.masonry img{width:100%; height:auto; display:block}

/* Contact */
.hp{position:absolute !important; left:-10000px !important; opacity:0 !important}
.form-grid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:14px;
}
.form-grid .full{grid-column:1/-1}
label{display:flex; flex-direction:column; gap:8px; color:#fff}
input,select,textarea{
  background: #111114; color:var(--text); border:1px solid rgba(255,255,255,.14);
  padding:12px 12px; border-radius:12px; outline: none;
}
input:focus,select:focus,textarea:focus{border-color: var(--gold); box-shadow: 0 0 0 6px var(--ring)}
textarea{min-height:120px; resize:vertical}
.form-footer{display:flex; align-items:center; gap:12px; margin-top:10px}
#formMsg{font-size:14px}

/* Map */
.map-card{background: linear-gradient(180deg,#151517,#111114); border:1px solid rgba(255,255,255,.08); border-radius:18px; padding:18px; box-shadow: var(--shadow)}
.map{border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.08)}
.map iframe{width:100%; height:320px; display:block}

/* Footer */
.footer{padding:24px 0; border-top:1px solid rgba(255,255,255,.06); background:#0d0d0f}
.footer-inner{display:flex; justify-content:space-between; align-items:center; gap:12px}
.to-top{background:#161618; border:1px solid rgba(255,255,255,.1); padding:8px 12px; border-radius:10px}

/* Reveal on scroll */
.reveal{opacity:0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1; transform:none}

/* Responsive */
@media (max-width: 980px){
  .grid.two{grid-template-columns: 1fr}
  .grid.three{grid-template-columns: 1fr}
  .mini-grid{grid-template-columns: 1fr}
  .nav{position:fixed; inset:64px 0 auto 0; padding:12px; display:grid; gap:8px;
       background: rgba(15,15,17,.96); transform: translateY(-120%); transition: transform .3s ease; border-bottom:1px solid rgba(255,255,255,.08)}
  .nav.open{transform: translateY(0)}
  .nav-toggle{display:block}
}

@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto}
  .reveal{transition:none}
}

/* --- Extras para redes sociales y pequeños detalles --- */
.logo{filter: drop-shadow(0 2px 6px rgba(214,178,94,.4)); border-radius:8px}

.social{display:flex; align-items:center; gap:10px}
.social-link{
  display:inline-flex; align-items:center; gap:8px;
  background:#161618; border:1px solid rgba(255,255,255,.1);
  padding:8px 12px; border-radius:12px; transition: .2s ease transform, .2s ease border-color, .2s ease color;
}
.social-link:hover{
  transform: translateY(-2px);
  border-color: var(--gold);
  color: var(--gold);
}

/* Botón "Reservar ahora" dentro de paquetes ajustado a ancho */
.card.service .btn{width:100%; text-align:center; font-weight:700}

/* Mejoras menores en listas largas de paquetes */
.card.service ul{max-height: 260px; overflow:auto; padding-right:8px}
.card.service ul::-webkit-scrollbar{width:8px}
.card.service ul::-webkit-scrollbar-thumb{background: rgba(255,255,255,.1); border-radius:8px}

/* Video sobre nosotros */
.video-about {
  width: 100%;
  border-radius: 16px;
  height: 70%; /* reducido un 30% */
  object-fit: cover;
  border:1px solid rgba(255,255,255,.08);
  box-shadow: var(--shadow);
}

/* Redes sociales en footer */
.social {
  display: flex;
  gap: 12px;
  align-items: center;
}
.social-link img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border:1px solid rgba(255,255,255,.1);
  transition: transform .2s, filter .3s;
}
.social-link img:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px var(--gold));
}
.calendar.mobile { display: none; }
@media (max-width: 768px){
  .calendar.desktop { display: none; }
  .calendar.mobile { display: block; }
}
.social-float {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  z-index: 1000;
}
.social-float img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  box-shadow: 0 4px 8px rgba(0,0,0,.3);
  border: 2px solid #fff;
  background: #fff;
  transition: transform .2s;
}
.social-float img:hover {
  transform: scale(1.1);
}
/* Calendario personalizado */
#calendar {
  max-width: 900px;
  margin: 40px auto;
  background: #141416;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
  border: 1px solid rgba(255,255,255,.08);
}

/* Cabecera del calendario */
.fc-toolbar-title {
  color: var(--gold);
  font-size: 22px;
  font-weight: 700;
}

/* Botones del calendario */
.fc-button {
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  border: none;
  color: #141311;
  font-weight: 600;
  border-radius: 8px;
  padding: 6px 12px;
  transition: transform .2s ease;
}
.fc-button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

/* Celdas del calendario */
.fc-daygrid-day {
  background: #1a1a1c;
  border: 1px solid rgba(255,255,255,.08);
  color: var(--text);
}
.fc-daygrid-day.fc-day-today {
  background: rgba(214,178,94,0.15);
}

/* Eventos reservados */
.fc-event {
  background: var(--gold-2);
  color: #141311;
  font-weight: 600;
  border-radius: 6px;
  padding: 2px 6px;
  border: none;
}
#calendar {
  margin-top: 20px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.calendar-event {
  background: #f3f4f6;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 8px;
  font-size: 14px;
}
/* ... aquí van todos tus estilos previos de la web ... */

/* ====== Estilos personalizados FullCalendar (Negro + Dorado) ====== */
#calendar {
  background: #111; /* Fondo principal */
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.7);
  color: #f1f1f1; /* Texto claro */
  font-family: 'Segoe UI', sans-serif;
}

/* Cabecera del calendario */
.fc-toolbar-title {
  color: #f1c40f; /* Dorado */
  font-size: 1.5rem;
  font-weight: bold;
}

/* Botones de navegación */
.fc-button {
  background: #222 !important;
  border: 1px solid #f1c40f !important;
  color: #f1c40f !important;
  font-weight: bold;
  text-transform: capitalize;
  border-radius: 6px !important;
  transition: all 0.2s ease;
}

.fc-button:hover {
  background: #f1c40f !important;
  color: #111 !important;
}

/* Cabecera de los días */
.fc-col-header-cell {
  background: #222;
  color: #f1c40f;
  font-weight: bold;
  text-transform: uppercase;
  border: 1px solid #333;
  padding: 8px;
}

/* Celdas del calendario */
.fc-daygrid-day {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  transition: background 0.2s ease;
}

.fc-daygrid-day:hover {
  background: #2c2c2c;
}

/* Día actual */
.fc-day-today {
  background: #2c2c2c !important;
  border: 2px solid #f1c40f !important;
}

/* Eventos */
.fc-event {
  background: #f1c40f !important;
  color: #111 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 3px 6px;
  font-size: 0.85rem;
  font-weight: bold;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fc-event:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 10px rgba(241,196,15,0.6);
}

/* Vista de lista */
.fc-list-day {
  background: #222 !important;
  color: #f1c40f !important;
  font-weight: bold;
}

.fc-list-event {
  background: #1a1a1a !important;
  border-left: 4px solid #f1c40f !important;
  padding: 6px;
  color: #fff;
}