/* ============================================================
   TOKENS — identidad Mitamelu (sol, miel, panal)
   mobile-first, inspirado en la limpieza de Typeform
   ============================================================ */
:root{
  --crema-fondo: #FBF6EC;
  --beige: #F4EBDA;
  --beige-linea: #E9DCC3;
  --miel: #E3A72E;
  --miel-oscuro: #B9791F;
  --miel-suave: #F3C868;
  --panal: #6B4226;
  --negro-texto: #201A14;
  --linea: rgba(32,26,20,0.10);

  --font-display: "Fraunces", serif;
  --font-body: "Work Sans", sans-serif;
  --font-tag: "JetBrains Mono", monospace;

  --radio: 18px;
  --radio-sm: 10px;
  --radio-pill: 999px;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

*{ box-sizing: border-box; }

/* asegura que el atributo "hidden" siempre oculte el elemento,
   incluso si tiene su propio display:flex definido más abajo */
[hidden]{ display: none !important; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--crema-fondo);
  color: var(--negro-texto);
  font-family: var(--font-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display:block; }
button{ font-family: inherit; }

:focus-visible{
  outline: 2px solid var(--miel-oscuro);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
  html{ scroll-behavior: auto; }
}

/* ============================================================
   SCROLL REVEAL (typeform-like gentle entrances)
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   BUTTONS — pill-shaped, soft, thumb-friendly
   ============================================================ */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 28px;
  min-height: 48px;
  border-radius: var(--radio-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.btn:active{ transform: scale(0.97); }
.btn-primary{
  background: var(--miel);
  color: var(--negro-texto);
  box-shadow: 0 10px 22px -12px rgba(227,167,46,0.7);
}
.btn-primary:hover{ background: var(--miel-suave); transform: translateY(-1px); }
.btn-outline{
  background: #fff;
  color: var(--negro-texto);
  border-color: var(--beige-linea);
}
.btn-outline:hover{ border-color: var(--negro-texto); transform: translateY(-1px); }
.btn-whatsapp{
  background: #25D366;
  color: #0b3b1f;
  box-shadow: 0 10px 22px -12px rgba(37,211,102,0.55);
}
.btn-whatsapp:hover{ background: #2fe374; transform: translateY(-1px); }

/* ============================================================
   HEADER — compact on mobile, hamburger menu
   ============================================================ */
.site-header{
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(251,246,236,0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--beige-linea);
}
.header-inner{
  max-width: 1180px;
  margin: 0 auto;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand-lockup{ display: flex; align-items: center; gap: 10px; }
.brand-wordtext{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  color: var(--panal);
  white-space: nowrap;
}
.brand-logo{ height: 42px; width: auto; }

.header-nav{
  display: none;
  gap: 28px;
  font-size: 0.92rem;
  color: var(--negro-texto);
}
.header-nav a{ opacity: 0.75; transition: opacity 0.15s ease; }
.header-nav a:hover{ opacity: 1; color: var(--miel-oscuro); }

.header-cta{ display: none; }

.menu-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--beige-linea);
  background: #fff;
  cursor: pointer;
}
.menu-toggle span{
  display: block;
  width: 17px; height: 2px;
  background: var(--negro-texto);
  border-radius: 2px;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.menu-toggle.is-open span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-open span:nth-child(2){ opacity: 0; }
.menu-toggle.is-open span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.nav-mobile{
  max-height: 0;
  overflow: hidden;
  background: var(--crema-fondo);
  border-bottom: 1px solid var(--beige-linea);
  transition: max-height 0.32s var(--ease);
}
.nav-mobile.is-open{ max-height: 320px; }
.nav-mobile-inner{
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 20px 22px;
}
.nav-mobile-inner a{
  padding: 12px 4px;
  font-size: 1.02rem;
  border-bottom: 1px solid var(--beige-linea);
}
.nav-mobile-inner a:last-of-type{ border-bottom: none; }
.nav-mobile-cta{ margin-top: 12px; align-self: flex-start; }

@media (min-width: 780px){
  .header-inner{ padding: 12px 24px; }
  .brand-logo{ height: 52px; }
  .brand-wordtext{ font-size: 1.35rem; }
  .header-nav{ display: flex; }
  .header-cta{ display: inline-flex; padding: 12px 22px; min-height: 46px; font-size: 0.9rem; }
  .menu-toggle, .nav-mobile{ display: none; }
}

/* ============================================================
   GIRASOLES FLOTANTES — capa decorativa fija en toda la página
   ============================================================ */
.floaters{
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.floater{
  position: absolute;
  bottom: -10vh;
  width: 26px; height: 26px;
  opacity: 0;
  animation: flotar linear infinite;
}
.floater:nth-child(1){ left: 4%;  width: 20px; height: 20px; animation-duration: 22s; animation-delay: -1s; }
.floater:nth-child(2){ left: 16%; width: 30px; height: 30px; animation-duration: 28s; animation-delay: -9s; }
.floater:nth-child(3){ left: 28%; width: 16px; height: 16px; animation-duration: 18s; animation-delay: -4s; }
.floater:nth-child(4){ left: 42%; width: 24px; height: 24px; animation-duration: 25s; animation-delay: -14s; }
.floater:nth-child(5){ left: 58%; width: 34px; height: 34px; animation-duration: 30s; animation-delay: -6s; }
.floater:nth-child(6){ left: 71%; width: 18px; height: 18px; animation-duration: 20s; animation-delay: -11s; }
.floater:nth-child(7){ left: 84%; width: 28px; height: 28px; animation-duration: 26s; animation-delay: -3s; }
.floater:nth-child(8){ left: 93%; width: 22px; height: 22px; animation-duration: 23s; animation-delay: -17s; }

@keyframes flotar{
  0%   { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
  8%   { opacity: 0.5; }
  50%  { transform: translateY(-52vh) translateX(18px) rotate(140deg); }
  92%  { opacity: 0.4; }
  100% { transform: translateY(-108vh) translateX(-14px) rotate(280deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .floaters{ display: none; }
}

/* ============================================================
   PORTADA — el carrusel de tendencias es la pieza principal
   ============================================================ */
.portada{
  position: relative;
  padding: 28px 0 0;
  overflow: hidden;
}
.hero-honeycomb{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 84 96'%3E%3Cpath d='M42 0 L84 24 L84 72 L42 96 L0 72 L0 24 Z' fill='none' stroke='%23E9DCC3' stroke-width='1.2'/%3E%3C/svg%3E");
  background-size: 70px 80px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 15%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 15%, transparent 75%);
}
.brand-hero{
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 16px;
  margin-bottom: 0;
}
.brand-badge{
  width: 190px;
  height: 190px;
  filter: drop-shadow(0 0 12px rgba(227,167,46,0.5)) drop-shadow(0 0 28px rgba(227,167,46,0.25));
  animation: badge-breathe 5s ease-in-out infinite;
}
@keyframes badge-breathe{
  0%, 100%{ filter: drop-shadow(0 0 12px rgba(227,167,46,0.5)) drop-shadow(0 0 28px rgba(227,167,46,0.25)); }
  50%{ filter: drop-shadow(0 0 18px rgba(227,167,46,0.68)) drop-shadow(0 0 40px rgba(227,167,46,0.4)); }
}
.badge-halo{ opacity: 0.8; }
.badge-ring-outer{ fill: none; stroke: url(#goldGrad); stroke-width: 3.2; }
.badge-ring-outer-thin{ fill: none; stroke: url(#goldGrad); stroke-width: 1; opacity: 0.55; }
.badge-ring-inner{ fill: none; stroke: url(#goldGrad); stroke-width: 1.2; opacity: 0.6; }
.badge-text{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: 3.5px;
  fill: #241608;
}
.badge-flourish-line{ stroke: url(#goldGrad); stroke-width: 1.5; }
.badge-flourish-dot{ fill: #E3A72E; }
.badge-sparkle{
  transform-origin: center;
  animation: sparkle-twinkle 2.6s ease-in-out infinite;
}
.badge-sparkle-2{ animation-delay: 0.6s; }
.badge-sparkle-3{ animation-delay: 1.3s; }
@keyframes sparkle-twinkle{
  0%, 100%{ opacity: 0.2; transform: scale(0.65); }
  50%{ opacity: 1; transform: scale(1.15); }
}
@media (min-width: 640px){
  .brand-badge{ width: 220px; height: 220px; }
}
@media (prefers-reduced-motion: reduce){
  .brand-badge{ animation: none; }
  .badge-sparkle{ animation: none; opacity: 0.7; }
}

.portada-intro{
  position: relative;
  z-index: 1;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px;
  margin-bottom: 10px;
}
.hero-eyebrow{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  color: var(--miel-oscuro);
  margin: 0 0 10px;
}
.hero-title{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.7rem, 6.5vw, 2.7rem);
  line-height: 1.14;
  color: var(--negro-texto);
  margin: 0;
  font-optical-sizing: auto;
}
.portada-actions{
  position: relative;
  z-index: 1;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 22px 20px 0;
}
.portada-actions .btn{ width: 100%; max-width: 300px; }

@media (min-width: 560px){
  .portada-actions{ flex-wrap: nowrap; }
  .portada-actions .btn{ width: auto; }
}
@media (min-width: 780px){
  .portada{ padding-top: 40px; }
  .portada-intro{ margin-bottom: 28px; }
}

/* wavy divider — soft feminine touch between sections */
.divisor-onda{
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 18px;
}
.divisor-onda path{ fill: var(--crema-fondo); }
.divisor-onda.onda-beige path{ fill: var(--beige); }

/* ============================================================
   CARRUSEL — cuando es la portada, ocupa el ancho completo
   ============================================================ */
.carrusel{
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.carrusel--portada{
  max-width: 100%;
  padding: 0;
}
.carrusel-label{
  position: absolute;
  top: 14px; left: 14px;
  z-index: 2;
  background: rgba(251,246,236,0.92);
  backdrop-filter: blur(4px);
  color: var(--negro-texto);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  padding: 7px 14px;
  border-radius: var(--radio-pill);
}
.carrusel-track{
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 14px;
  scrollbar-width: none;
  border-radius: var(--radio);
}
.carrusel--portada .carrusel-track{ border-radius: 0; gap: 0; }
.carrusel-track::-webkit-scrollbar{ display: none; }

.slide{
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: 320px;
  border-radius: var(--radio);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 26px;
}
.slide-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  animation: mitamelu-kenburns 14s ease-in-out infinite alternate;
  will-change: transform;
}
.slide-media video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes mitamelu-kenburns{
  from{ transform: scale(1); }
  to{ transform: scale(1.1); }
}
@media (prefers-reduced-motion: reduce){
  .slide-media{ animation: none; }
}
.carrusel--portada .slide{ border-radius: 0; min-height: 300px; max-height: 380px; padding: 24px 58px; }
.slide-overlay{
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(32,26,20,0.75) 0%, rgba(32,26,20,0.15) 55%, rgba(32,26,20,0) 100%);
}
.slide-content{ position: relative; z-index: 1; color: #fff; max-width: 480px; }
.slide-title{ font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; margin: 0 0 5px; line-height: 1.15; }
.slide-sub{ font-size: 0.82rem; color: rgba(255,255,255,0.88); margin: 0 0 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slide-link{
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--negro-texto);
  background: var(--miel-suave);
  padding: 10px 18px;
  border-radius: var(--radio-pill);
}
.slide-link:hover{ background: var(--miel); }

.modal-video-toggle{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--negro-texto);
  background: var(--beige);
  border: 1px solid var(--beige-linea);
  border-radius: var(--radio-pill);
  cursor: pointer;
  transition: background 0.15s ease;
}
.modal-video-toggle:hover{ background: var(--miel-suave); }


@media (min-width: 780px){
  .slide{ min-height: 400px; padding: 36px; }
  .carrusel--portada .slide{ min-height: 480px; max-height: 560px; padding: 52px; }
  .slide-title{ font-size: 2.1rem; }
  .slide-sub{ font-size: 1.05rem; max-width: 420px; }
  .carrusel-label{ top: 24px; left: 24px; font-size: 0.95rem; }
}

.carrusel-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--beige-linea);
  color: var(--negro-texto);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 18px -10px rgba(32,26,20,0.35);
  z-index: 2;
}
.carrusel-btn:hover{ background: var(--miel-suave); }
.carrusel-prev{ left: 2px; }
.carrusel-next{ right: 2px; }
.carrusel--portada .carrusel-prev{ left: 14px; }
.carrusel--portada .carrusel-next{ right: 14px; }
@media (min-width: 780px){
  .carrusel-btn{ width: 42px; height: 42px; }
  .carrusel-prev{ left: 4px; }
  .carrusel-next{ right: 4px; }
  .carrusel--portada .carrusel-prev{ left: 24px; }
  .carrusel--portada .carrusel-next{ right: 24px; }
}

.carrusel-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.carrusel--portada .carrusel-dots{
  position: absolute;
  bottom: 16px;
  left: 0; right: 0;
  margin-top: 0;
  z-index: 2;
}
.carrusel-dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--beige-linea); border: none; cursor: pointer; padding: 0; }
.carrusel--portada .carrusel-dot{ background: rgba(255,255,255,0.5); }
.carrusel-dot.is-active{ background: var(--miel-oscuro); width: 20px; border-radius: 4px; transition: width 0.2s ease; }
.carrusel--portada .carrusel-dot.is-active{ background: var(--miel-suave); }

/* ============================================================
   SECTION HEADS
   ============================================================ */
.section-eyebrow{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1rem;
  color: var(--miel-oscuro);
  margin: 0 0 6px;
}
.catalogo-head{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.catalogo-head h2{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.7rem;
  margin: 0 0 22px;
}
@media (min-width: 780px){
  .catalogo-head{ padding: 0 24px; }
  .catalogo-head h2{ font-size: 1.95rem; margin-bottom: 28px; }
}

/* ============================================================
   CATALOG CONTROLS — sticky filter bar on mobile for easy browsing
   ============================================================ */
.catalogo{ max-width: 1180px; margin: 0 auto; padding: 48px 0 40px; }
.catalogo-head{ padding: 0 20px; margin-bottom: 4px; }

.catalogo-controls{
  position: sticky;
  top: 58px;
  z-index: 20;
  background: rgba(251,246,236,0.96);
  backdrop-filter: blur(6px);
  padding: 14px 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.search-wrap{ width: 100%; }
#buscador{
  width: 100%;
  padding: 13px 18px;
  border: 1px solid var(--beige-linea);
  border-radius: var(--radio-pill);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--negro-texto);
}
#buscador:focus{ border-color: var(--miel-oscuro); outline: none; }

.filtros{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.filtros::-webkit-scrollbar{ display: none; }
.filtro-chip{
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: var(--radio-pill);
  border: 1px solid var(--beige-linea);
  background: #fff;
  color: var(--negro-texto);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.filtro-chip:hover{ border-color: var(--miel); }
.filtro-chip.is-active{ background: var(--negro-texto); border-color: var(--negro-texto); color: var(--crema-fondo); }

@media (min-width: 780px){
  .catalogo{ padding: 56px 0 40px; }
  .catalogo-head{ padding: 0 24px; }
  .catalogo-controls{
    top: 74px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    margin-bottom: 36px;
    background: transparent;
    backdrop-filter: none;
    position: static;
  }
  .search-wrap{ flex: 1 1 240px; max-width: 300px; }
  .filtros{ overflow: visible; flex-wrap: wrap; }
}

/* ============================================================
   PRODUCT GRID + CARDS — rounded, soft-shadow, feminine
   signature element: hexagonal "panal" price tag
   ============================================================ */
.grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: 0 20px;
}
@media (min-width: 480px){
  .grid{ grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (min-width: 780px){
  .grid{ grid-template-columns: repeat(3, 1fr); padding: 0 24px; gap: 26px; }
}
@media (min-width: 1040px){
  .grid{ grid-template-columns: repeat(4, 1fr); }
}

.grid-empty{ text-align: center; color: #8a7a68; padding: 60px 20px; font-size: 0.95rem; }

.card{
  position: relative;
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  border: 1px solid var(--beige-linea);
  cursor: pointer;
  transition: transform 0.22s var(--ease), box-shadow 0.22s var(--ease);
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 20px 34px -20px rgba(32,26,20,0.3); }
.card:active{ transform: translateY(-1px) scale(0.99); }

.card-media{
  height: 210px;
  position: relative;
  overflow: hidden;
  background: var(--beige);
}
.card-media img{ width: 100%; height: 100%; object-fit: cover; }
.card-badge{
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--negro-texto);
  color: var(--miel-suave);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--radio-pill);
}

.card-body{ padding: 18px 20px 20px; }
.card-cat{
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--miel-oscuro);
  margin: 0 0 4px;
}
.card-title{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; margin: 0 0 4px; }
.card-tonos{ display: block; font-size: 0.76rem; color: #9a8a76; margin: 0 0 14px; }

.card-footer{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.card-price{ font-family: var(--font-display); font-size: 1.15rem; font-weight: 600; color: var(--negro-texto); }
.card-link{
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--crema-fondo);
  background: var(--negro-texto);
  padding: 9px 16px;
  border-radius: var(--radio-pill);
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.card-link:hover{ background: var(--miel-oscuro); color: var(--negro-texto); }

/* ============================================================
   PAGO / QR
   ============================================================ */
.pago{ background: var(--beige); padding: 56px 20px; }
.pago-inner{
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
  text-align: center;
}
.pago-texto h2{ font-family: var(--font-display); font-size: 1.7rem; font-weight: 600; margin: 0 0 14px; }
.pago-texto p{ color: #5c4f3f; margin: 0 auto 14px; max-width: 420px; }
.pago-nota{ font-size: 0.85rem; color: #93816c !important; }

.pago-qr{ display: flex; justify-content: center; }
.qr-placeholder{
  width: 220px; height: 220px;
  border: 1.5px dashed var(--miel-oscuro);
  border-radius: var(--radio);
  background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px; gap: 8px;
}
.qr-placeholder span{ font-size: 0.85rem; color: var(--negro-texto); font-weight: 600; }
.qr-placeholder small{ font-size: 0.72rem; color: #9a8a76; }
.qr-real{ width: 240px; height: auto; max-height: 420px; object-fit: contain; border-radius: var(--radio); border: 1px solid var(--beige-linea); background:#fff; box-shadow: 0 16px 30px -18px rgba(32,26,20,0.25); }

@media (min-width: 780px){
  .pago{ padding: 72px 24px; }
  .pago-inner{ grid-template-columns: 1.1fr 0.9fr; gap: 56px; text-align: left; }
  .pago-texto p{ margin-left: 0; margin-right: 0; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background: #3A2717; color: #d9cdbb; padding: 40px 20px 20px; }
.footer-inner{
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  text-align: center;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(217,205,187,0.16);
}
.footer-brand{ display: flex; flex-direction: column; align-items: center; gap: 10px; }
.footer-logo-chip{ background: var(--crema-fondo); border-radius: 10px; padding: 6px 10px; display: inline-flex; }
.footer-logo{ height: 34px; width: 34px; }
.footer-brand p{ margin: 0; font-size: 0.85rem; color: #a99a84; }
.footer-links{ display: flex; gap: 22px; font-size: 0.88rem; }
.footer-links a:hover{ color: var(--miel-suave); }
.footer-fine{ text-align: center; font-size: 0.75rem; color: #7a6b58; margin: 16px 0 0; }
.footer-copyright{ text-align: center; font-size: 0.72rem; color: #6b5c49; margin: 6px 0 0; }

@media (min-width: 780px){
  .site-footer{ padding: 44px 24px 20px; }
  .footer-inner{ flex-direction: row; justify-content: space-between; text-align: left; }
  .footer-brand{ flex-direction: row; }
}

/* ============================================================
   FLOATING WHATSAPP BUTTON
   ============================================================ */
.whatsapp-float{
  position: fixed;
  bottom: 18px; right: 18px;
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 10px 22px -8px rgba(0,0,0,0.4);
  z-index: 50;
  transition: transform 0.15s ease;
}
.whatsapp-float:active{ transform: scale(0.94); }
@media (min-width: 780px){
  .whatsapp-float{ bottom: 22px; right: 22px; width: 56px; height: 56px; }
  .whatsapp-float:hover{ transform: scale(1.06); }
}

/* ============================================================
   UTIL
   ============================================================ */
body.no-scroll{ overflow: hidden; }

/* ============================================================
   CART TOGGLE (header)
   ============================================================ */
.cart-toggle{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid var(--beige-linea);
  background: #fff;
  color: var(--negro-texto);
  cursor: pointer;
}
.cart-toggle:hover{ background: var(--beige); }
.cart-badge{
  position: absolute;
  top: -4px; right: -4px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--miel-oscuro);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ============================================================
   MODAL — vista rápida del producto
   ============================================================ */
.modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(32,26,20,0.5);
  backdrop-filter: blur(2px);
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal-panel{
  position: relative;
  background: var(--crema-fondo);
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  border-radius: 22px 22px 0 0;
  padding-bottom: 26px;
}
.modal-close{
  position: absolute;
  top: 14px; right: 14px;
  z-index: 2;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--negro-texto);
  cursor: pointer;
}

.modal-gallery-main{
  height: 300px;
  background: var(--beige);
  background-size: cover;
  background-position: center;
  border-radius: 22px 22px 0 0;
}
.modal-gallery-main img{ width: 100%; height: 100%; object-fit: cover; }

.modal-swatches{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px 0;
}
.swatch{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 2px solid #fff;
  outline: 1px solid var(--beige-linea);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  padding: 0;
}
.swatch.is-active{ outline: 2px solid var(--miel-oscuro); }
.swatch-label{ font-size: 0.82rem; color: #7a6b59; margin-left: 4px; }

.modal-info{ padding: 18px 20px 4px; }
.modal-cat{ font-family: var(--font-display); font-style: italic; font-size: 0.9rem; color: var(--miel-oscuro); margin: 0 0 4px; }
.modal-title{ font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin: 0 0 8px; }
.modal-price{ font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; color: var(--negro-texto); margin: 0 0 14px; }
.modal-desc{ font-size: 0.92rem; color: #5c4f3f; margin: 0 0 20px; }

.modal-qty{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; font-weight: 600; font-size: 0.92rem; }
.qty-stepper{
  display: flex; align-items: center; gap: 14px;
  border: 1px solid var(--beige-linea);
  border-radius: var(--radio-pill);
  padding: 6px 8px;
  background: #fff;
}
.qty-stepper button{
  width: 26px; height: 26px;
  border-radius: 50%;
  border: none;
  background: var(--beige);
  color: var(--negro-texto);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.qty-stepper span{ min-width: 16px; text-align: center; font-weight: 600; }

.modal-actions{ display: flex; flex-direction: column; gap: 10px; }
.modal-actions .btn{ width: 100%; }

@media (min-width: 640px){
  .modal-overlay{ align-items: center; padding: 24px; }
  .modal-panel{ max-width: 560px; border-radius: 22px; max-height: 88vh; }
  .modal-gallery-main{ height: 340px; border-radius: 22px 22px 0 0; }
  .modal-actions{ flex-direction: row; }
  .modal-actions .btn{ width: auto; flex: 1; }
}

/* ============================================================
   CARRITO — panel deslizante
   ============================================================ */
.cart-overlay{
  position: fixed;
  inset: 0;
  background: rgba(32,26,20,0.5);
  z-index: 85;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
}
.cart-overlay.is-open{ opacity: 1; }

.cart-drawer{
  width: 100%;
  max-width: 400px;
  height: 100%;
  background: var(--crema-fondo);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s var(--ease);
}
.cart-overlay.is-open .cart-drawer{ transform: translateX(0); }

.cart-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--beige-linea);
}
.cart-head h3{ font-family: var(--font-display); font-size: 1.2rem; margin: 0; }
.cart-head .modal-close{ position: static; background: var(--beige); }

.cart-items{ flex: 1; overflow-y: auto; padding: 10px 20px; }
.cart-item{
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--beige-linea);
}
.cart-item-media{
  width: 56px; height: 56px;
  border-radius: 12px;
  background: var(--beige);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  flex-shrink: 0;
}
.cart-item-media img{ width: 100%; height: 100%; object-fit: cover; }
.cart-item-info{ flex: 1; min-width: 0; }
.cart-item-nombre{ font-size: 0.92rem; font-weight: 600; margin: 0 0 2px; }
.cart-item-tono{ font-size: 0.78rem; color: #9a8a76; margin: 0 0 8px; }
.cart-item-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.qty-stepper-mini{ padding: 3px 6px; gap: 10px; }
.qty-stepper-mini button{ width: 22px; height: 22px; font-size: 0.95rem; }
.cart-item-precio{ font-size: 0.88rem; font-weight: 600; }
.cart-item-quitar{
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #b09a80;
  cursor: pointer;
  flex-shrink: 0;
}
.cart-item-quitar:hover{ background: var(--beige); color: var(--negro-texto); }

.cart-empty{ text-align: center; color: #9a8a76; padding: 60px 24px; font-size: 0.92rem; }

.cart-footer{
  padding: 16px 20px 20px;
  border-top: 1px solid var(--beige-linea);
}
.cart-total{ display: flex; align-items: center; justify-content: space-between; font-size: 1rem; margin-bottom: 16px; }
.cart-total strong{ font-family: var(--font-display); font-size: 1.25rem; }

.cart-pago{ background: var(--beige); border-radius: var(--radio); padding: 14px; margin-bottom: 14px; text-align: center; }
.cart-pago-titulo{ font-family: var(--font-display); font-style: italic; font-size: 0.95rem; margin: 0 0 10px; }
.cart-qr{ display: flex; justify-content: center; margin-bottom: 8px; }
.qr-placeholder-mini{ width: 140px; height: 140px; }
.qr-real-mini{ width: 150px; }
.cart-pago-nota{ font-size: 0.76rem; color: #93816c; margin: 0; }

.cart-cta{ width: 100%; }