/* =======================
   PALMARENA TURISMO
   Estilos globales
   ======================= */

:root {
  --primario: #004c3f;
  --secundario: #007f6d;
  --acento: #f8c13a;
  --claro: #f5f7fa;
  --oscuro: #002822;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* =======================
   PALMARENA TURISMO — Paleta clara y moderneada (tema atardecer suave)
   ======================= */

:root{
  /* Paleta derivada de la imagen del banner: tonos cálidos y marinos suaves */
  --peach-1: #fff3e8; /* fondo claro cálido */
  --peach-2: #ffd9bf; /* melocotón suave */
  --coral:   #ff9a76; /* acento cálido */
  --lavender: #e9e0ff; /* tono lavanda pálido */
  --sea:     #7fd6de; /* azul verdoso claro */
  --bg: #fffdfb; /* fondo general */
  --card-bg: rgba(255,255,255,0.98);
  --muted: #2d2d2d; /* texto oscuro para contraste */
  --accent: linear-gradient(90deg,#ff9a76,#ffd6b6); /* degradado principal */
  --accent-strong: linear-gradient(90deg,#ff6f43,#ff8a4a); /* versión más oscura para CTAs */
  --radius: 14px;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;
  background: linear-gradient(180deg,var(--bg) 0%, #fffefc 60%);
  color:var(--muted);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.6;
}

a{color:var(--accent);text-decoration:none}

/* Header limpio y luminoso */
header.encabezado{
  width:100%;
  max-width:1200px;
  margin:18px auto;
  padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;
  background: linear-gradient(90deg,var(--sun-2),#fff);
  border-radius:12px;box-shadow:0 6px 20px rgba(38,28,23,0.06);
}
header .logo{height:56px}
header h1{font-size:1.2rem;font-weight:700;color:var(--muted);margin-left:12px}
nav{display:flex;gap:12px;align-items:center}
nav a{padding:8px 14px;border-radius:10px;color:var(--muted);font-weight:600;transition:all .18s ease}
nav a.activo, nav a:hover{background:var(--sun-1);color:#5a372b;box-shadow:0 6px 18px rgba(229,171,148,0.22)}

/* Hero luminoso */
.hero{
  max-width:1200px;margin:30px auto;padding:60px 28px;border-radius:16px;
  background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=1920&q=80');
  background-size: cover;
  background-position: center;
  position: relative;overflow: hidden;
  box-shadow: 0 12px 30px rgba(38,28,23,0.04);
  display:flex;flex-direction:column;align-items:center;text-align:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  /* Overlay suave: mezcla cálida arriba -> fría abajo para armonizar con la foto */
  background: linear-gradient(180deg, rgba(255,154,118,0.18), rgba(125,214,222,0.06));
  z-index:0;
}
.hero *{position:relative;z-index:1}
.hero h2{font-size:2.2rem;margin-bottom:10px;letter-spacing:0.2px;color:#ffffff;text-shadow:0 8px 30px rgba(0,0,0,0.45)}
.hero p{font-size:1.05rem;color:rgba(255,255,255,0.95);max-width:820px;margin-bottom:18px}
.hero .btn{display:inline-block;padding:12px 20px;border-radius:999px;background:#ff9a76;color:#fff;font-weight:700;box-shadow:0 8px 20px rgba(255,154,118,0.12);transition:transform .18s ease,box-shadow .18s ease}
.hero .btn:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(255,154,118,0.14)}

/* boton por defecto (otros usos) mantiene el gradiente suave */
.btn{display:inline-block;padding:12px 20px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700;box-shadow:0 8px 24px rgba(255,154,118,0.12);transition:transform .18s ease,box-shadow .18s ease}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(255,154,118,0.18)}

/* Aplicar la paleta a diferentes elementos para variedad armónica */
.card-body .precio{color:#ff6f43}
.iconos i{color:var(--sea)}
nav a.activo, nav a:hover{background:var(--peach-2);color:#5a372b;box-shadow:0 6px 18px rgba(229,171,148,0.14)}
.card-destino{border:1px solid rgba(0,0,0,0.03)}
.card-destino:hover{box-shadow:0 28px 60px rgba(38,28,23,0.06);}
.card-destino::after{content:"";position:absolute;inset:0;border-radius:12px;pointer-events:none}

/* sutil glow acorde al acento */
.card-destino:hover{box-shadow:0 30px 60px rgba(255,150,110,0.06)}


/* Sección: por qué elegirnos */
.porque-elegirnos{max-width:1200px;margin:28px auto;padding:26px;border-radius:12px;background:transparent}
.porque-elegnos-title{color:var(--muted);text-align:center;margin-bottom:10px}
.iconos{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.iconos div{background:var(--card-bg);padding:16px;border-radius:12px;min-width:180px;text-align:center;box-shadow:0 10px 30px rgba(38,28,23,0.05);transition:transform .18s ease}
.iconos div:hover{transform:translateY(-6px)}
.iconos i{font-size:1.8rem;color:var(--accent);margin-bottom:8px}

/* Grid de destinos claro y elegante */
.contenedor-grid{max-width:1200px;margin:28px auto;padding:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card-destino{background:var(--card-bg);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(38,28,23,0.06);transition:transform .22s ease;display:flex;flex-direction:column}
.card-destino img{width:100%;height:180px;object-fit:cover;display:block}
.card-body{padding:14px;display:flex;flex-direction:column;gap:10px}
.card-body h3{margin:0;color:var(--muted);font-size:1.05rem}
.card-body .precio{color:var(--accent);font-weight:800}
.card-body .resumen{color:rgba(43,43,43,0.85);font-size:0.95rem}
.card-destino:hover{transform:translateY(-8px);box-shadow:0 22px 48px rgba(38,28,23,0.08)}

/* Detalle */
.detalle-destino{max-width:980px;margin:36px auto;padding:20px}
.detalle-portada{width:100%;height:auto;border-radius:12px;box-shadow:0 12px 30px rgba(38,28,23,0.06);margin:12px 0}
.descripcion{color:rgba(43,43,43,0.95);line-height:1.8}
.galeria-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:12px}
.galeria-grid img{width:100%;height:100px;object-fit:cover;border-radius:8px}

/* Formulario y tarjetas */
.formulario-contacto{max-width:700px;margin:28px auto;padding:20px;border-radius:12px;background:var(--card-bg);box-shadow:0 8px 24px rgba(38,28,23,0.05)}
.formulario-contacto input,.formulario-contacto textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(43,43,43,0.06);background:transparent;color:var(--muted)}
.formulario-contacto button{background:linear-gradient(90deg,var(--accent),#ffd6b6);color:#fff;border:none;padding:12px 18px;border-radius:12px;font-weight:700}

/* Footer limpio */
footer{max-width:1200px;margin:28px auto 40px;padding:18px;text-align:center;color:rgba(43,43,43,0.7)}

/* WhatsApp flotante */
.btn-whatsapp{position:fixed;right:20px;bottom:20px;width:60px;height:60px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#ff9a76;color:#fff;font-size:24px;box-shadow:0 12px 30px rgba(38,28,23,0.06);z-index:9999;transition:transform .14s ease,box-shadow .14s ease}
.btn-whatsapp:hover{transform:scale(1.05);box-shadow:0 18px 36px rgba(255,138,100,0.14)}

/* Responsivo */
@media (max-width:900px){
  .hero{padding:28px}
  .hero h2{font-size:1.6rem}
  header.encabezado{flex-direction:column;gap:8px;padding:12px}
  nav{flex-wrap:wrap;justify-content:center}
}

@media (max-width:480px){
  .card-destino img{height:140px}
  .galeria-grid img{height:80px}
  .contenedor-grid{padding:12px;gap:12px}
}

/* pequeños helpers */
.error{background:rgba(255,0,0,0.06);padding:8px;border-radius:8px;color:#a33}
.admin-header .btn{margin-left:6px}

/* Lightbox styles (llb = little lightbox) */
#llb-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:99999;pointer-events:none;opacity:0;transition:opacity .24s ease}
#llb-modal.open{opacity:1;pointer-events:auto}
#llb-modal .llb-overlay{position:absolute;inset:0;background:rgba(0,0,0,0.6)}
#llb-modal .llb-window{position:relative;max-width:94vw;max-height:92vh;padding:8px;border-radius:10px;z-index:2;}
#llb-modal .llb-img{display:block;max-width:100%;max-height:86vh;border-radius:8px;box-shadow:0 18px 40px rgba(0,0,0,0.5)}
#llb-modal .llb-close{position:absolute;right:-8px;top:-8px;background:#fff;border-radius:50%;width:36px;height:36px;border:none;font-size:20px;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,0.15)}