/* =========================================================
   LESMAN — Estilos personalizados (complemento de Tailwind)
   ========================================================= */

:root {
  --lesman-black: #000000;
  --lesman-gold: #D4AF37;
  --lesman-gold-dark: #C5A059;
  --lesman-ivory: #FAF9F6;
  --lesman-red: #C1443C;
  --lesman-yellow: #E8B84B;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--lesman-ivory);
  color: #171310;
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-serif {
  font-family: 'Playfair Display', serif;
}

/* Scrollbar dorado sutil */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--lesman-ivory); }
::-webkit-scrollbar-thumb { background: var(--lesman-gold-dark); border-radius: 999px; }

/* Selección de texto con acento dorado */
::selection { background: var(--lesman-gold); color: #000; }

/* -------------------- Botones -------------------- */
.btn-gold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--lesman-gold);
  color: #000;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  border: 1px solid var(--lesman-gold);
}
.btn-gold:hover {
  background: var(--lesman-gold-dark);
  border-color: var(--lesman-gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 25px -8px rgba(212, 175, 55, 0.6);
}

.btn-gold-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: transparent;
  color: var(--lesman-gold);
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  border: 1px solid var(--lesman-gold);
  transition: all 0.3s ease;
}
.btn-gold-outline:hover {
  background: var(--lesman-gold);
  color: #000;
  transform: translateY(-2px);
}

.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #000;
  color: var(--lesman-ivory);
  padding: 0.9rem 2rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.8rem;
  transition: all 0.3s ease;
  border: 1px solid #000;
}
.btn-dark:hover {
  background: #1a1a1a;
  transform: translateY(-2px);
}

/* -------------------- Navegación -------------------- */
.nav-link {
  position: relative;
  padding-bottom: 4px;
  transition: color 0.25s ease;
  color: rgba(250, 249, 246, 0.85);
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background: var(--lesman-gold);
  transition: width 0.3s ease;
}
.nav-link:hover,
.nav-link.active {
  color: var(--lesman-gold);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* -------------------- Títulos de sección -------------------- */
.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--lesman-gold-dark);
  text-transform: uppercase;
  letter-spacing: 0.25em;
  font-size: 0.72rem;
  font-weight: 600;
}
.section-eyebrow::before {
  content: '';
  width: 28px;
  height: 1px;
  background: var(--lesman-gold-dark);
  display: inline-block;
}

/* -------------------- Tarjetas -------------------- */
.card-elegant {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 1.25rem;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.card-elegant:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 40px -20px rgba(0,0,0,0.25);
  border-color: rgba(212, 175, 55, 0.4);
}

/* Placeholder visual (mientras no hay fotografía real) */
.media-placeholder {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: radial-gradient(circle at 30% 20%, rgba(212,175,55,0.25), transparent 55%),
              linear-gradient(135deg, #0a0a0a 0%, #1c1a16 55%, #2a2216 100%);
}
/* Tarjetas del catálogo: relación de aspecto fija (misma en todos los breakpoints),
   en vez de una altura en píxeles que cambia de proporción según el ancho de la tarjeta. */
.media-placeholder.h-56 {
  height: auto;
  aspect-ratio: 5 / 4;
}
/* Tarjetas resumen de la home: fotos horizontales 16:9 (no cuadradas como las
   de servicios.html), así que el contenedor usa esa misma proporción. */
.media-placeholder.h-52 {
  height: auto;
  aspect-ratio: 16 / 9;
}
.media-placeholder::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: inherit;
  pointer-events: none;
}
.media-placeholder .emoji {
  font-size: 3.5rem;
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.4));
}
.media-placeholder .tag {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(250,249,246,0.55);
  z-index: 2;
}

/* Variante con fotografía real (misma moldura, imagen en vez de emoji) */
.media-placeholder.has-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.media-placeholder.has-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%);
  z-index: 1;
  pointer-events: none;
}
.media-placeholder.has-photo .tag {
  color: rgba(250,249,246,0.85);
}

/* Ajustes de encuadre por foto: el recorte por defecto (center) corta la
   parte superior de estos productos (cono/paletas/adorno), así que se sube
   el punto de referencia para conservarla. */
.media-placeholder.has-photo img[src*="barra-helados"],
.media-placeholder.has-photo img[src*="barra-paletas"],
.media-placeholder.has-photo img[src*="barra-fruta"] {
  object-position: center 20%;
}
/* Coctelería/Cantaritos: el gajo de toronja llega casi hasta el borde superior
   de la foto, así que con "center" el recorte lo corta. Micheladas: la espuma
   y la rodaja de limón quedan justo al filo del borde superior. */
.media-placeholder.has-photo img[src*="barra-cocteleria-cantaritos"] {
  object-position: center 15%;
}
/* Fotos verticales (0.8 de relación, más altas que las cuadradas de 1254x1254)
   dentro del mismo contenedor 5:4: el recorte por defecto corta la parte
   superior en las que tienen el copete/adorno pegado al borde de la foto. */
.media-placeholder.has-photo img[src*="nieves"],
.media-placeholder.has-photo img[src*="boing"] {
  object-position: center 15%;
}
/* Raspados: la banderilla de tamarindo ya toca el borde superior en la foto
   original (casi sin margen), así que se sube el punto de referencia casi
   al máximo para conservar la mayor parte posible de la punta. */
.media-placeholder.has-photo img[src*="raspados"] {
  object-position: center 5%;
}
/* Mini Hot Cakes y Fresas con crema: el copete de toppings llega muy cerca
   del borde superior de la foto original, el recorte por defecto lo cortaba. */
.media-placeholder.has-photo img[src*="mini-hot-cakes"],
.media-placeholder.has-photo img[src*="fresasconcrema"] {
  object-position: center 20%;
}

/* -------------------- Catálogo de servicios: detalle en modal -------------------- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  line-height: 1.2;
  background: rgba(0,0,0,0.05);
  color: #171310;
}
.modal-note {
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.35);
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #4a3f2e;
}
.cocktail-group {
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 1rem;
  padding: 1.1rem 1.1rem 0.6rem;
  background: rgba(0,0,0,0.015);
}

/* -------------------- Animación de aparición -------------------- */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------------------- Header dinámico -------------------- */
#site-header {
  transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}
#site-header.scrolled {
  box-shadow: 0 10px 30px -15px rgba(0,0,0,0.5);
}

/* -------------------- Botón flotante de WhatsApp -------------------- */
.whatsapp-float {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 60;
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--lesman-gold);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 25px -8px rgba(212,175,55,0.7);
  transition: transform 0.25s ease;
}
.whatsapp-float:hover { transform: scale(1.08); }
.whatsapp-float::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 1px solid rgba(212,175,55,0.55);
  animation: pulse-ring 2.4s ease-out infinite;
}
@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  80% { transform: scale(1.35); opacity: 0; }
  100% { opacity: 0; }
}

/* -------------------- Modal / Lightbox -------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(4px);
  z-index: 70;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.modal-backdrop.open { display: flex; }

/* -------------------- Crea tu Snack: constructor -------------------- */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--lesman-black);
  color: var(--lesman-gold);
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem;
  flex-shrink: 0;
}

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

.option-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border: 1.5px solid rgba(0,0,0,0.1);
  border-radius: 0.9rem;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
  font-size: 0.88rem;
  font-weight: 500;
}
.option-card:hover {
  border-color: rgba(212, 175, 55, 0.6);
  transform: translateY(-2px);
}
.option-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.option-card__icon {
  font-size: 1.3rem;
  line-height: 1;
}
.option-card__photo {
  width: 3rem;
  height: 3rem;
  border-radius: 0.6rem;
  object-fit: cover;
  flex-shrink: 0;
  background: #f2ede4;
}
.option-card:has(input:checked) {
  border-color: var(--lesman-gold);
  background: rgba(212, 175, 55, 0.1);
  box-shadow: 0 8px 20px -12px rgba(212, 175, 55, 0.8);
}

/* Opción seleccionable en forma de píldora (constructor "Crea tu
   Snack"): mismo lenguaje visual que .option-card (borde dorado al
   marcar), pero sin foto por opción — para categorías con muchas
   opciones de solo texto (fritura, toppings, salsas, sabores...). */
.pill-choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: rgba(0,0,0,0.05);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  user-select: none;
}
.pill-choice input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pill-choice:has(input:checked) {
  background: rgba(212, 175, 55, 0.15);
  border-color: var(--lesman-gold);
  font-weight: 600;
}
.pill-choice.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Snack Builder — previsualización con la foto base única del
   servicio elegido (enfoque híbrido: una foto por servicio, no una
   por combinación exacta; las opciones elegidas se muestran como
   chips junto a la foto, ver js/snack-builder.js). */
.snack-preview {
  position: relative;
  width: 260px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0 auto;
  border-radius: 1.25rem;
  overflow: hidden;
}

/* -------------------- Utilidades varias -------------------- */
.gold-divider {
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, var(--lesman-gold), transparent);
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}