:root{
  --al-azul: #0F3D4A;
  --al-azul-claro: #1C5A6B;
  --al-teja: #C1502E;
  --al-teja-oscuro: #9E3D22;
  --al-sol: #F2B134;
  --al-cal: #FFFFFF;
  --al-arena: #FBF7EF;
  --al-tinta: #16232A;
  --al-gris: #5C6B6F;
  --al-linea: #E4DFD3;
  --al-libre: #DDEFE0;
  --al-libre-borde: #7CBE87;
  --al-pendiente: #FCEBC9;
  --al-pendiente-borde: #E0A93F;
  --al-ocupada: #F4D2C8;
  --al-ocupada-borde: #C1502E;
}
.al-landing{ font-family:'Bricolage Grotesque', sans-serif; color: var(--al-tinta); max-width: 900px; margin: 0 auto; background: var(--al-arena); }
.al-landing *{ box-sizing: border-box; }

/* ---------- HERO ---------- */
.al-hero{ position: relative; overflow: hidden; background: var(--al-azul); color: var(--al-cal); padding: 56px 24px 70px; text-align: center; border-radius: 0 0 24px 24px; }
.al-hero-rays{ position:absolute; top:-40%; left:50%; transform:translateX(-50%); width:1200px; height:1200px; opacity:.14; background: repeating-conic-gradient(var(--al-sol) 0deg 4deg, transparent 4deg 16deg); border-radius:50%; }
.al-hero-inner{ position: relative; max-width: 640px; margin: 0 auto; }
.al-hero .al-badge{ display:inline-block; white-space: nowrap; width: max-content; border:1px solid rgba(255,255,255,.5); border-radius:999px; padding:6px 18px; font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:22px; color: var(--al-sol); }
.al-hero h1{ font-family:'Abril Fatface', serif; font-weight:400; font-size: clamp(2rem, 5.5vw, 3.4rem); line-height:1.08; margin:0 0 16px; }
.al-hero .al-descripcion{ font-size:1rem; color:#D8E6E9; max-width:480px; margin:0 auto 24px; line-height:1.55; }
.al-hero .al-precio{ display:inline-flex; align-items:baseline; gap:6px; background: var(--al-teja); padding:11px 24px; border-radius:14px; font-size:1rem; margin-bottom:26px; color:#fff; }
.al-hero .al-precio b{ font-size:1.4rem; }
.al-cta{ display:inline-block; background: var(--al-sol); color: var(--al-azul); font-weight:700; border:none; padding:14px 28px; border-radius:10px; font-size:.95rem; cursor:pointer; text-decoration:none; box-shadow: 0 5px 0 var(--al-teja-oscuro); }

/* ---------- SECTIONS ---------- */
.al-landing section{ padding: 40px 24px; }
.al-eyebrow{ font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color: var(--al-teja); font-weight:700; margin-bottom:8px; }
.al-landing h2{ font-family:'Abril Fatface', serif; font-weight:400; font-size:1.6rem; margin:0 0 18px; color: var(--al-azul); }

/* ---------- GALERÍA ---------- */
.al-galeria{ display:grid; grid-template-columns: 1.4fr 1fr; grid-template-rows: 1fr 1fr; gap:10px; height:340px; margin-top: 6px;}
.al-ph{ border-radius:12px; overflow:hidden; background:#eee; }
.al-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.al-ph-grande{ grid-row: span 2; }

/* ---------- UBICACIÓN ---------- */
.al-ubicacion-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap:14px; }
.al-ubi-card{ background: var(--al-cal); border:1px solid var(--al-linea); border-radius:14px; padding:16px; }
.al-ubi-card .al-ico{ font-size:1.4rem; margin-bottom:6px; display:block; }
.al-ubi-card p{ margin:0; font-size:.9rem; color: var(--al-gris); line-height:1.5; }
.al-ubi-card strong{ display:block; color: var(--al-tinta); margin-bottom:2px; font-size:.95rem; }

/* ---------- CALENDARIO ---------- */
.al-leyenda{ display:flex; gap:16px; flex-wrap:wrap; font-size:.85rem; margin-bottom:18px; color: var(--al-gris); }
.al-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.al-badge-dot{ width:12px; height:12px; border-radius:4px; display:inline-block; }
.al-badge-dot.al-libre{ background: var(--al-libre); border:1px solid var(--al-libre-borde); }
.al-badge-dot.al-pendiente{ background: var(--al-pendiente); border:1px solid var(--al-pendiente-borde); }
.al-badge-dot.al-ocupada{ background: var(--al-ocupada); border:1px solid var(--al-ocupada-borde); }

.al-meses-wrap{ display:flex; gap:20px; flex-wrap:wrap; }
.al-mes{ flex:1; min-width:230px; background: var(--al-cal); border:1px solid var(--al-linea); border-radius:14px; padding:14px; }
.al-mes h3{ text-align:center; font-family:'Abril Fatface', serif; font-weight:400; color: var(--al-azul); text-transform:capitalize; margin:0 0 10px; font-size:1.05rem; }
.al-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:4px; }
.al-grid .al-dow{ text-align:center; font-size:.7rem; color: var(--al-gris); font-weight:700; }
.al-dia{ text-align:center; padding:7px 0; border-radius:6px; font-size:.82rem; }
.al-dia.al-vacio{ background: transparent; }
.al-dia.al-d-libre{ background: var(--al-libre); cursor:pointer; }
.al-dia.al-d-libre:hover{ outline:2px solid var(--al-libre-borde); }
.al-dia.al-d-pendiente{ background: var(--al-pendiente); cursor: not-allowed; }
.al-dia.al-d-bloqueada, .al-dia.al-d-confirmada{ background: var(--al-ocupada); color: var(--al-teja-oscuro); cursor: not-allowed; }
.al-dia.al-d-pasado{ background: transparent; color: #C9C2B2; }

/* ---------- RESERVA ---------- */
.al-reserva-section form{ display:flex; flex-direction:column; gap:14px; max-width:480px; }
.al-reserva-section label{ display:flex; flex-direction:column; font-size:.85rem; font-weight:700; gap:5px; color: var(--al-azul); }
.al-reserva-section input, .al-reserva-section textarea{ font-family:'Bricolage Grotesque', sans-serif; font-size:1rem; padding:10px 12px; border:1px solid var(--al-linea); border-radius:9px; font-weight:400; color: var(--al-tinta); }
.al-reserva-section input:focus, .al-reserva-section textarea:focus{ outline:2px solid var(--al-azul-claro); border-color:transparent; }
.al-fechas-form{ display:flex; gap:14px; }
.al-fechas-form label{ flex:1; }
.al-boton-enviar{ background: var(--al-azul); color:#fff; border:none; padding:13px 20px; border-radius:10px; font-size:1rem; font-weight:700; cursor:pointer; }
.al-boton-enviar:hover{ background: var(--al-azul-claro); }
.al-boton-enviar:disabled{ background:#999; cursor:not-allowed; }

#al-mensaje-resultado .al-ok{ background: var(--al-libre); border:1px solid var(--al-libre-borde); padding:14px; border-radius:10px; font-size:.9rem; line-height:1.5; margin-bottom:14px; }
#al-mensaje-resultado .al-error{ background: var(--al-ocupada); border:1px solid var(--al-ocupada-borde); padding:12px; border-radius:10px; font-size:.88rem; margin-bottom:14px; }

@media (max-width: 640px){
  .al-fechas-form{ flex-direction: column; }
  .al-galeria{ grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .al-galeria .al-ph{ height: 180px; }
  .al-ph-grande{ grid-row: auto; }
  .al-hero .al-badge{ font-size:.65rem; padding:5px 14px; letter-spacing:.1em; }
}