:root{
  --sand:#FDF8F3;   /* arena clara (fondo principal) */
  --sand-2:#F2E8DD; /* arena más profunda (olas/zonas intermedias) */
  --sand-3:#E9D7C2; /* arena un poco más oscura (capa base) */
  --coffee:#7B4B36; /* café tostado */
  --mauve:#8C6BB1;  /* morado acento */
  --dark:#2C2523;   /* texto oscuro suave */
  --cream-2:#EBDAC8;/* borde sutil */
  --card:#FFFFFF;   /* tarjetas claras */
  --lilac-1:#EDE5F7;
  --lilac-2:#D9C8F0;
}

*{box-sizing:border-box}
body{
  font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--sand);
  color:var(--mauve);
}
.bg-cream{background-color:var(--sand)}
.section-alt{background:linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%)}
.border-cream-2{border-color:var(--cream-2)!important}

/* a{color:var(--mauve)}
.navbar{backdrop-filter:saturate(130%) blur(4px)}
.navbar-toggler{border:0}
.navbar-toggler-icon{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(44,37,35,0.85)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
} */

.hero{
  min-height:110vh; 
  position:relative;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  background:linear-gradient(180deg, var(--sand) 72%, var(--sand-2) 100%);
  overflow:hidden;
}


/* CTA */
.btn-primary{background-color:var(--mauve); border-color:var(--mauve)}
.btn-primary:hover{background-color:var(--coffee); border-color:var(--coffee)}
.btn-accent{background:var(--mauve); color:#fff; border:0}
.btn-accent:hover{filter:brightness(1.05)}
.link-accent{color:var(--mauve); text-decoration:none}
.link-accent:hover{opacity:.85}

/* Cards */
.card{background:var(--card)}
.text-accent{color:var(--coffee)}
.bullet{inline-size:18px; block-size:18px; border-radius:50%}
.bullet-coffee{background: radial-gradient(circle at 30% 30%, #A96C52, var(--coffee))}
.bullet-ice{background: radial-gradient(circle at 30% 30%, #BFA8E2, var(--mauve))}
.bullet-sweet{background: radial-gradient(circle at 30% 30%, #E8CBB2, #C98A58)}
.bullet-savory{background: radial-gradient(circle at 30% 30%, #C7CFA3, #8AA05E)}


/* ---------- CARD IMAGES ---------- */
.card-img-top-wrapper {
  width: 100%;
  height: 180px; /* puedes ajustar el tamaño aquí */
  overflow: hidden;
  position: relative;
  border-bottom: 3px solid var(--sand-2);
}

.card-img-top {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* ======== Imágenes de los productos ======== */
.menu-img {
  display: block;
  margin: 0 auto;
  max-width: 180px;          /* todas tendrán el mismo ancho máximo */
  height: auto;              /* mantiene proporción original */
  object-fit: contain;       /* ajusta dentro del espacio sin recortar */
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.15)); /* sombra ligera debajo */
}

.menu-img:hover {
  transform: scale(1.05);    /* sutil efecto al pasar el mouse */
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25));
}

/* Ajuste en móviles */
@media (max-width: 768px) {
  .menu-img {
    max-width: 140px;
  }
}

/* ---------- DUNAS ---------- */
.clip-wave{
  width:100%;
  height:130px;               
  position:relative;
  overflow:visible;
  margin-top: -40px;
}
.clip-wave-1{
  position:absolute; left:50%; bottom:-1px;
  width:100vw; transform:translateX(-50%); /* evita costuras laterales en hero */
}
.clip-wave-2, .clip-wave-3, .clip-wave-4{ position:relative }

/* Formas de duna (puedes ajustar los puntos si quieres otra figura) */
.clip-wave-1{
  background:var(--sand-2);
  clip-path:polygon(0 55%, 12% 60%, 24% 50%, 36% 58%, 48% 46%, 60% 55%, 72% 48%, 84% 56%, 100% 45%, 100% 100%, 0 100%);
}
.clip-wave-2{
  background:var(--sand-2);
  clip-path:polygon(0 60%, 10% 55%, 25% 62%, 40% 50%, 55% 58%, 70% 47%, 85% 55%, 100% 48%, 100% 100%, 0 100%);
}
.clip-wave-3{
  background: linear-gradient(180deg, var(--sand) 0%, var(--sand-2) 100%);
  margin-top: -1px;
  clip-path:polygon(0 50%, 14% 58%, 28% 45%, 42% 55%, 56% 47%, 70% 60%, 84% 50%, 100% 58%, 100% 100%, 0 100%);
}
.clip-wave-4{
  background:var(--sand-2);
  clip-path:polygon(0 55%, 16% 48%, 32% 58%, 48% 46%, 64% 56%, 80% 50%, 100% 60%, 100% 100%, 0 100%);
}

/* --- Capas extra: Agua lila sutil (arriba) + Arena más oscura (abajo) --- */
.clip-wave::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:72px;
  pointer-events:none; z-index:1;
  background: linear-gradient(to bottom, var(--lilac-2) 0%, var(--lilac-1) 55%, rgba(255,255,255,0) 100%);
  filter: blur(0.2px); opacity:.55;
}
/* En CALIENTES no hay agua lila */
.clip-wave-2::before{ display:none; }

.clip-wave::after{
  content:""; position:absolute; left:0; bottom:-1px; width:100%; height:26px;
  pointer-events:none; z-index:1;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in oklab, var(--sand-3) 85%, transparent) 65%,
    var(--sand-3) 100%);
  opacity:.55;
}

/* ---------- Espuma (UNA sola ola; movimiento VERTICAL rápido) ---------- */
.clip-wave .foam{
  position:absolute; z-index:2; left:50%; bottom:-2px;
  transform: translateX(-50%);
  width:110%; height:110px;    /* mayor visibilidad */
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(255,255,255,.55) 0%, rgba(255,255,255,.28) 55%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
          mask: linear-gradient(to bottom, rgba(0,0,0,.35) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,1) 100%);
}
.clip-wave .foam::after{
  content:""; position:absolute; left:50%; bottom:0; width:100%; height:60px;
  transform: translate(-50%, 8px);
  background:
    url("data:image/svg+xml;utf8,\
      <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'>\
        <defs>\
          <linearGradient id='fade' x1='0' x2='0' y1='0' y2='1'>\
            <stop offset='0%' stop-color='white' stop-opacity='0.95'/>\
            <stop offset='100%' stop-color='white' stop-opacity='0.0'/>\
          </linearGradient>\
          <filter id='blur' x='-10%' y='-50%' width='120%' height='200%'>\
            <feGaussianBlur in='SourceGraphic' stdDeviation='5'/>\
          </filter>\
        </defs>\
        <path d='M0,110 C160,90 320,120 480,110 C640,100 800,120 960,110 C1060,102 1130,118 1200,110 L1200,200 L0,200 Z' fill='url(%23fade)' filter='url(%23blur)'/>\
      </svg>") center bottom / 100% 100% no-repeat;
  opacity:.96;
  /* velocidad global más rápida */
  animation: shore-swell 16s ease-in-out infinite;
}


/* Variaciones rápidas entre secciones */
.clip-wave-2 .foam::after{ animation-duration: 18s }
.clip-wave-3 .foam::after{ animation-duration: 20s }
.clip-wave-4 .foam::after{ animation-duration: 18s }

/* Movimiento vertical */
@keyframes shore-swell{
  0%   { transform: translate(-50%, 10px); opacity:.97; }
  50%  { transform: translate(-50%, 0px);  opacity:.92; }
  100% { transform: translate(-50%, 10px); opacity:.97; }
}

/* Accesibilidad */
@media (prefers-reduced-motion: reduce){
  .clip-wave .foam::after{ animation:none }
}

/* --- Video de fondo del hero --- */
.hero {
  position: relative;
  background-color: var(--mauve); 
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.35; 
  z-index: 1;
  pointer-events: none; /* evita que bloquee clics */
  transform: translateZ(0);    /* mejora render en algunos móviles */
  will-change: transform, opacity;
}

/* Asegura que el contenido quede por encima del video */
.hero .container {
  position: relative;
  z-index: 3;
}

#toTop {
  display: none; /* empieza oculto */
  position: fixed;
  right: 1rem;    /* end-0 + m-3 */
  bottom: 1rem;   /* bottom-0 + m-3 */
  z-index: 9999;  /* siempre encima */
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 24px;
  text-align: center;
  border-radius: 50%;
  background-color: var(--mauve);
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}
#toTop:hover {
  filter: brightness(1.1);
}