@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,600;0,700;0,900;1,500&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600&family=Cinzel:wght@500;600&family=Marcellus&family=Dancing+Script:wght@600;700&family=Pinyon+Script&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  --rosa: #e8a3b8;
  --rosa-oscuro: #c9678a;
  --rosa-suave: #fbe9ee;
  --dorado: #cda45e;
  --crema: #fffaf6;
  --texto: #4a3236;
  --texto-suave: #6e5559;
  --verde: #4caf82;
  --rojo: #d9534f;
  --vino: #6b2140;
  --vino-claro: #8a3055;
  --sombra: 0 4px 16px rgba(201, 103, 138, 0.18);
  --radio: 18px;
  /* Sistema de movimiento (estilo Emil Kowalski): pocas curvas, pocas
     duraciones, todas "ease-out" para entradas — arranca rápido y frena
     suave, que es como se mueve algo natural.
       --ease-out    : hovers, reveals, micro-interacciones
       --ease-sheet  : overlays / hojas de modal (más "peso" al frenar)
       --ease-inout  : cosas que van y vuelven
     Duraciones: 130ms micro · 200ms estándar · 300ms medio (modal/hoja). */
  --ease-suave: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur: 200ms;
  --dur-slow: 300ms;
  /* Variantes más oscuras de rosa/dorado, solo para texto/fondos de botón —
     las originales (--rosa-oscuro, --dorado) no llegan a 4.5:1 de contraste
     con blanco en texto normal; estas sí, sin perder la paleta de marca. */
  --rosa-boton: #aa5775;
  --dorado-oscuro: #7b6238;
}

* { box-sizing: border-box; }

/* Visible solo para lectores de pantalla — se usa para el <h1> que
   encabeza cada pestaña sin cambiar el diseño. */
.solo-lectores {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* "Saltar al contenido": oculto hasta que recibe foco con Tab. */
.saltar-contenido {
  position: fixed;
  top: 8px; left: 8px;
  z-index: 999;
  transform: translateY(-160%);
  transition: transform 0.18s ease-out;
  background: var(--rosa-oscuro, #c9678a);
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.saltar-contenido:focus { transform: translateY(0); outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .saltar-contenido { transition: none; } }

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  background: var(--crema);
  color: var(--texto);
  padding-bottom: 90px;
}

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

a { color: inherit; }

/* ---------- Encabezado ---------- */
.header {
  position: relative;
  background: linear-gradient(135deg, var(--rosa), var(--rosa-oscuro));
  color: #fff;
  padding: 22px 18px 28px;
  text-align: center;
  border-radius: 0 0 28px 28px;
  box-shadow: var(--sombra);
}
.header .logo { font-size: 2rem; margin: 0; letter-spacing: 1px; }
.header .lema { margin: 4px 0 0; font-size: 0.9rem; opacity: 0.9; }

.container { max-width: 640px; margin: 0 auto; padding: 16px; }

/* ---------- Botones grandes, táctiles (mínimo 44x44px) ---------- */
button, .btn, a, .tab-link {
  -webkit-tap-highlight-color: rgba(201, 103, 138, 0.25);
  touch-action: manipulation;
}
button, .btn {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  border-radius: 14px;
  min-height: 56px;
  min-width: 44px;
  padding: 14px 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  transition: transform 0.08s ease, box-shadow 0.15s ease;
}
button:active, .btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--rosa-boton);
  color: #fff;
  box-shadow: var(--sombra);
  position: relative;
  overflow: hidden;
  animation: respirar-boton 3.6s ease-in-out infinite;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: brillo-boton 3.6s ease-in-out infinite;
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(107,33,64,0.35); }
}
.btn-secondary { background: var(--rosa-suave); color: var(--rosa-oscuro); }
.btn-dorado { background: var(--dorado); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--rosa-oscuro); color: var(--rosa-oscuro); }
.btn-block { width: 100%; }
.btn-lg { min-height: 72px; font-size: 1.15rem; }
.btn-whatsapp { background: #167e3d; color: #fff; }

/* Grilla de botones de sabor para "Registrar Venta" (grandes, con el dedo lleno de harina) */
.grid-sabores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}
.btn-sabor {
  flex-direction: column;
  min-height: 96px;
  background: #fff;
  border: 2px solid var(--rosa-suave);
  color: var(--texto);
  font-size: 1.05rem;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 6px 18px rgba(107,33,64,0.06);
}
.btn-sabor .precio { font-size: 0.8rem; color: var(--texto-suave); font-weight: 400; }
.btn-sabor.selected { border-color: var(--rosa-oscuro); background: var(--rosa-suave); }

/* ---------- Tarjetas ---------- */
.card {
  background: #fff;
  border-radius: var(--radio);
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  padding: 18px;
  margin-bottom: 16px;
}
.card h2, .card h3 { margin-top: 0; color: var(--rosa-oscuro); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stat {
  background: var(--rosa-suave);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}
.stat .valor { font-size: 1.4rem; font-weight: 700; color: var(--rosa-oscuro); display: block; }
.stat .etiqueta { font-size: 0.78rem; color: var(--texto-suave); }
.stat.ganancia .valor { color: var(--verde); }
.stat.alerta .valor { color: var(--rojo); }

/* ---------- Formularios ---------- */
label { display: block; font-size: 0.85rem; color: var(--texto-suave); margin: 10px 0 4px; }
input, select, textarea {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 2px solid #eee0e2;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--rosa); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, .btn:focus-visible,
[role="button"]:focus-visible, [role="switch"]:focus-visible {
  outline: 2px solid var(--rosa-oscuro);
  outline-offset: 2px;
}
/* Sobre el hero (fondo vino/foto) el contorno vino no se ve — ahí va blanco. */
.hero .insignia-calificacion:focus-visible { outline-color: #fff; }

.fila { display: flex; gap: 10px; align-items: flex-end; }
.fila > * { flex: 1; }

table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid rgba(107,33,64,0.10); }
th { color: var(--texto-suave); font-weight: 600; }
tr:last-child td { border-bottom: none; }
.text-right { text-align: right; }

.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
}
.pill-verde { background: #e3f5ec; color: var(--verde); }
.pill-rojo { background: #fbe4e3; color: var(--rojo); }
.pill-dorado { background: #f8f0e0; color: var(--dorado-oscuro); }

/* ---------- Navegación inferior (pulgar-friendly) ---------- */
.nav-inferior {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
  display: flex;
  justify-content: space-around;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index: 50;
  overflow-x: auto;
}
/* Pista de que el menú de abajo se puede deslizar — sin esto, en celular
   se pierden "Recetas/Contenido/Reseñas" porque no se ve que sigue algo. */
.nav-scroll-hint {
  position: fixed;
  bottom: 0;
  width: 32px;
  height: 60px;
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 51;
  color: var(--rosa-oscuro);
  transition: opacity 0.25s ease;
}
.nav-scroll-hint svg { width: 16px; height: 16px; }
.nav-scroll-hint-der { right: 0; background: linear-gradient(to right, rgba(255,255,255,0), #fff 60%); animation: rebote-flecha-nav 1.6s ease-in-out infinite; }
.nav-scroll-hint-izq { left: 0; background: linear-gradient(to left, rgba(255,255,255,0), #fff 60%); }
.nav-scroll-hint.oculto { opacity: 0; }
@keyframes rebote-flecha-nav { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
.nav-inferior a {
  flex: 1 0 auto;
  min-width: 64px;
  text-align: center;
  text-decoration: none;
  color: var(--texto-suave);
  font-size: 0.7rem;
  padding: 8px 6px;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border-radius: 12px;
}
.nav-inferior a.activo { color: var(--vino); background: var(--rosa-suave); }
.nav-inferior .icono { font-size: 1.3rem; display: block; }
.nav-inferior .icono svg { width: 22px; height: 22px; }

/* ---------- Catálogo público ---------- */
.postre-card {
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  margin-bottom: 18px;
}
.postre-card {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.postre-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(201, 103, 138, 0.22); }
.postre-foto {
  width: 100%;
  aspect-ratio: 4/3;
  background: linear-gradient(135deg, var(--rosa-suave), #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rosa);
  font-size: 2.4rem;
  position: relative;
  overflow: hidden;
}
.postre-foto img { transition: transform 0.6s ease; }
.postre-card:hover .postre-foto img { transform: scale(1.09); }
.badge-artesanal {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.92);
  color: var(--rosa-boton);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.postre-info { padding: 16px; }
.postre-info h3 { margin: 0 0 4px; }
.postre-precio { font-size: 1.2rem; font-weight: 700; color: var(--rosa-oscuro); }
.postre-desc { color: var(--texto-suave); font-size: 0.9rem; margin: 8px 0 14px; }

.estrellas { color: var(--dorado-oscuro); letter-spacing: 2px; }

/* Carrusel de reseñas: se desliza horizontal en celular, con "snap" para
   que cada tarjeta quede bien encuadrada al soltar. */
.grid-resenas {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scroll-snap-type: x mandatory;
}
.resena-card {
  scroll-snap-align: start;
  flex: 0 0 78%;
  max-width: 300px;
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.resena-nombre { font-weight: 600; }
.resena-fecha { color: var(--texto-suave); font-size: 0.75rem; }

.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 0.9rem;
  z-index: 100;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  animation: fadein 0.2s ease;
}
@keyframes fadein { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
.toast-deshacer { display: flex; align-items: center; gap: 14px; padding-right: 8px; }
.toast-deshacer button {
  all: unset;
  cursor: pointer;
  color: #ffd9e4;
  font-weight: 700;
  font-size: 0.85rem;
  padding: 6px 12px;
  border-radius: 20px;
  min-height: 0;
}
.toast-deshacer button:hover, .toast-deshacer button:focus-visible { background: rgba(255,255,255,0.15); outline: none; }
.toast-deshacer button:focus-visible { outline: 2px solid #fff; }

.modal-fondo {
  position: fixed; inset: 0;
  background: rgba(74, 50, 54, 0.45);
  display: flex; align-items: flex-end;
  z-index: 200;
  animation: entrarFondoModal 0.16s ease-out both;
}
.modal {
  background: #fff;
  width: 100%;
  border-radius: 24px 24px 0 0;
  padding: 22px;
  max-height: 88vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Hoja que sube: poco recorrido (20px), escala casi 1, y una curva con
     "peso" al frenar — se siente como algo físico que se asienta. */
  animation: entrarHojaModal 0.3s var(--ease-sheet) both;
}
/* Salida (la agrega el JS antes de quitar el nodo). */
.modal-fondo.cerrando { animation: salirFondoModal 0.14s ease-in both; }
.modal-fondo.cerrando .modal { animation: salirHojaModal 0.18s var(--ease-inout) both; }
@keyframes entrarFondoModal { from { opacity: 0; } to { opacity: 1; } }
@keyframes salirFondoModal { to { opacity: 0; } }
@keyframes entrarHojaModal { from { opacity: 0; transform: translateY(20px) scale(0.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes salirHojaModal { to { opacity: 0; transform: translateY(14px) scale(0.99); } }
.modal h3 { margin-top: 0; color: var(--rosa-oscuro); }

.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--rosa-suave);
  padding: 12px 16px;
  border-radius: 14px;
  margin-bottom: 12px;
  /* Es un <button> real (para teclado + role="switch"), así que hay que
     resetear la apariencia por defecto de botón. */
  width: 100%;
  min-height: 0;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.switch-row-texto { flex: 1; min-width: 0; }

/* Fotos que aparecen con un fundido suave al cargar, en vez de "saltar".
   El contenedor ya trae fondo rosa suave, así que mientras carga se ve
   un placeholder de color, no un hueco blanco. */
.img-prog { opacity: 0; transition: opacity 0.45s var(--ease-out, ease-out); }
.img-prog.cargada { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .img-prog { transition: none; } }

/* Enlace de texto que en realidad es un <button> (acción en la misma
   página, no navegación). */
.enlace-inline {
  all: unset;
  cursor: pointer;
  color: var(--rosa-oscuro);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.enlace-inline:focus-visible { outline: 2px solid var(--rosa-oscuro); outline-offset: 2px; border-radius: 3px; }
.switch {
  position: relative;
  display: block;
  flex: none;
  width: 52px; height: 30px;
  background: #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.2s;
}
.switch.on { background: var(--rosa-oscuro); }
.switch .knob {
  position: absolute; top: 3px; left: 3px;
  width: 24px; height: 24px;
  background: #fff;
  border-radius: 50%;
  transition: left 0.2s;
}
.switch.on .knob { left: 25px; }

.texto-ayuda { font-size: 0.8rem; color: var(--texto-suave); line-height: 1.4; }

/* Cifras que se comparan entre sí o que "cuentan" en vivo: mismo ancho
   por dígito para que no salten horizontalmente al cambiar de valor. */
.destacado-mini .precio,
.postre-precio,
.badge-precio-circular,
.badge-precio-circular strong,
.barra-carrito-info strong,
.card-total-pedido,
#total-final-pedido,
#linea-envio,
.prime-precio,
.insignia-calificacion,
.resena-fecha,
.franja-horario,
.stat .valor {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.divisor { height: 1px; background: #f1e3e6; margin: 16px 0; }

.badge-offline {
  position: fixed;
  top: 10px; right: 10px;
  background: #fff3cd;
  color: #856404;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.72rem;
  z-index: 300;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.pin-pantalla {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
}
.pin-pantalla input { text-align: center; letter-spacing: 8px; font-size: 1.5rem; max-width: 220px; }

/* ---------- Catálogo cloud / miniaturas / bandeja de pedidos ---------- */
.fila-catalogo {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(107,33,64,0.10);
}
.fila-catalogo:last-child { border-bottom: none; }
.miniatura {
  width: 64px; height: 64px;
  border-radius: 12px;
  object-fit: cover;
  background: var(--rosa-suave);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}

/* ================= Selector de logo (admin) ================= */
.miniatura-logo {
  width: 72px; height: 72px;
  background: var(--rosa-suave);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  overflow: hidden;
}
.miniatura-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.miniatura-logo-circulo { border-radius: 50%; }
.miniatura-logo-cuadrado { border-radius: 12px; }
.miniatura-logo-rectangulo { border-radius: 12px; width: 128px; height: 72px; }
.miniatura-logo-transparente { border-radius: 0; width: 128px; height: 72px; background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 50% / 14px 14px; }
.miniatura-logo-transparente img { object-fit: contain; }
.selector-forma-logo { display: flex; gap: 8px; flex-wrap: wrap; }
.opcion-forma {
  flex: 1 1 auto;
  min-width: 100px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid var(--rosa-suave);
  background: #fff;
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.opcion-forma.activa { border-color: var(--vino); background: var(--rosa-suave); color: var(--vino); }
.mini-topbar-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 250, 246, 0.9);
  border: 1px solid #f1e3e6;
  border-radius: 14px;
  padding: 10px 14px;
  min-height: 60px;
  position: relative;
}
.mini-topbar-preview img { display: block; }
.mini-topbar-acciones { display: flex; gap: 6px; }
.mini-topbar-acciones span { width: 16px; height: 16px; border-radius: 50%; background: var(--rosa-suave); }
.mini-topbar-pos-centro { justify-content: center; }
.mini-topbar-pos-centro .mini-topbar-acciones { position: absolute; right: 14px; }
.mini-topbar-pos-derecha { flex-direction: row-reverse; }

/* Ventana de "encuadrar foto" antes de subir (logo / foto de la fundadora) */
.recorte-modal { text-align: center; }
.recorte-marco {
  width: 100%;
  max-width: 280px;
  margin: 10px auto 6px;
  overflow: hidden;
  background: var(--rosa-suave);
}
.recorte-circulo { aspect-ratio: 1/1; border-radius: 50%; }
.recorte-rectangulo { aspect-ratio: 1.58/1; border-radius: 12px; }
.recorte-marco img { width: 100%; height: 100%; object-fit: cover; display: block; }
.recorte-modal label { text-align: left; }
.fila-catalogo-info { flex: 1; min-width: 0; }
.fila-catalogo-info .nombre { font-weight: 600; }
.fila-catalogo-acciones { display: flex; flex-direction: column; gap: 6px; }
/* Ocultar visualmente el <input type="file"> SIN display:none — varios
   navegadores móviles (sobre todo Safari/iOS) se niegan a abrir el
   selector de archivos si el input tiene display:none, incluso cuando
   el clic viene de un <label> asociado. Esta técnica lo mantiene
   "presente" pero invisible, y sí dispara el selector nativo. */
.input-file-oculto {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  opacity: 0;
  cursor: pointer;
  margin: 0;
  min-height: 0;
}
/* El <input type=file> real es invisible; cuando recibe foco con Tab,
   mostramos el anillo sobre la etiqueta-botón que lo contiene. */
label:focus-within.btn,
label.btn:focus-within,
label.ev-add:focus-within {
  outline: 2px solid var(--rosa-oscuro);
  outline-offset: 2px;
}
.btn-subir-foto {
  font-size: 0.75rem;
  min-height: 36px;
  padding: 6px 10px;
}

.pedido-card {
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  border-left: 4px solid var(--rosa);
}
.pedido-card.atendido { border-left-color: #ccc; opacity: 0.7; }
.pedido-card .encabezado { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.pedido-card .fecha { font-size: 0.75rem; color: var(--texto-suave); }

.aviso-nube {
  background: #fff3cd;
  color: #856404;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* ================= Barra superior del catálogo (sticky) ================= */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255, 250, 246, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar .logo { font-size: 1.35rem; margin: 0; color: var(--rosa-oscuro); }

/* Tamaño y ubicación del logo del encabezado — elegibles desde el admin. */
.logo-img.logo-topbar-pequeno { height: 34px; width: 34px; }
.logo-img.logo-topbar-mediano { height: 44px; width: 44px; }
.logo-img.logo-topbar-grande { height: 60px; width: 60px; }
.logo-img.logo-topbar-xl { height: 76px; width: 76px; }
.topbar-logo-centro { justify-content: center; }
.topbar-logo-centro .topbar-acciones { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); }
.topbar-logo-derecha .logo-img { order: 2; }
.topbar-logo-derecha .topbar-acciones { order: 1; }

/* ================= Hero (portada del catálogo) ================= */
.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px 70px;
  color: #fff;
  overflow: hidden;
  /* Arranca en un rosa un poco más profundo (#cf7a99 en vez de #d989a5)
     para que el texto blanco de arriba (eyebrow + logo) alcance ~3.5:1. */
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px), linear-gradient(165deg, #cf7a99 0%, var(--rosa-oscuro) 45%, #7a3454 100%);
  background-size: 18px 18px, cover;
  border-radius: 0 0 44px 44px;
  box-shadow: var(--sombra);
}
.hero::before, .hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.35;
  background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 70%);
}
.hero::before { width: 260px; height: 260px; top: -80px; left: -60px; }
.hero::after { width: 320px; height: 320px; bottom: -120px; right: -80px; background: radial-gradient(circle, rgba(205,164,94,0.5), transparent 70%); }
.hero-contenido { position: relative; z-index: 2; max-width: 480px; display: flex; flex-direction: column; align-items: center; }
.hero-video-fondo-wrap { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.hero-video-capa {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: 1;
  transform: scale(var(--hv-escala, 1.04));
  filter: blur(var(--hv-desenfoque, 4px));
  transition: opacity 1.3s ease, transform 1.8s ease, filter 1.3s ease;
}
.hero-video-capa.hv-activa {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
  filter: blur(0);
}
.hero-video-flash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 40%, rgba(255,241,214,0.5), transparent 65%);
  opacity: 0;
  pointer-events: none;
}
.hero-video-flash.hv-flash-pulso { animation: destello-transicion 1.3s ease-out; }
@keyframes destello-transicion {
  0% { opacity: 0; }
  35% { opacity: 1; }
  100% { opacity: 0; }
}
.hero-video-scrim {
  position: absolute;
  inset: 0;
  z-index: 4;
  /* La FORMA del scrim es fija (más peso abajo, donde van el título y el botón;
     casi limpio arriba y al centro). Qué tan OSCURO va lo controla Catalina
     desde Admin -> Contenido con `--scrim-fuerza` (porcentaje: 15..70).
     Nota: cuanto más claro, más se nota el texto que venga QUEMADO en los .mp4. */
  opacity: clamp(0, calc(var(--scrim-fuerza, 40) / 100), 0.95);
  background:
    linear-gradient(to bottom,
      rgba(16,6,12,0.95) 0%,
      rgba(16,6,12,0.55) 11%,
      rgba(20,8,14,0.18) 30%,
      rgba(22,9,16,0.16) 54%,
      rgba(26,10,18,0.6) 80%,
      rgba(26,10,18,0.98) 100%),
    radial-gradient(130% 90% at 50% 108%, rgba(16,6,12,0.8) 0%, transparent 58%),
    radial-gradient(120% 120% at 50% 50%, transparent 56%, rgba(16,6,12,0.55) 100%);
}
.hero-con-video::before, .hero-con-video::after { display: none; }
.hero-con-video .hero-particulas { z-index: 5; }
.hero-con-video .hero-contenido { z-index: 6; }
.btn-pausa-hero-video {
  position: absolute;
  top: 14px; right: 14px;
  z-index: 7;
  width: 44px; height: 44px;
  min-height: 44px; min-width: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.35);
  color: #fff;
  font-size: 0.95rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  transition: background 0.2s var(--ease-suave), transform 0.2s var(--ease-suave);
}
.btn-pausa-hero-video:hover { background: rgba(0,0,0,0.5); }
.btn-pausa-hero-video:active { transform: scale(0.92); }
.hero-particulas { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero-particula {
  position: absolute;
  bottom: -12px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,233,214,0.5) 60%, transparent 75%);
  box-shadow: 0 0 6px 1px rgba(255,255,255,0.65);
  opacity: 0;
  animation-name: flotar-particula;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes flotar-particula {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: 0.9; }
  50% { transform: translate(var(--deriva, 12px), -150px); opacity: 0.6; }
  88% { opacity: 0.25; }
  100% { transform: translate(calc(var(--deriva, 12px) * -1), -300px); opacity: 0; }
}
/* Postres flotando suave en el hero — decorativo, detrás del texto */
.hero-postres { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.hero-con-video .hero-postres { z-index: 5; }
.hero-postre-flota {
  position: absolute;
  bottom: -14%;
  line-height: 1;
  opacity: 0;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 10px rgba(80, 30, 50, 0.28));
  animation-name: hero-postre-subir;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes hero-postre-subir {
  0%   { opacity: 0; transform: translateY(0) translateX(0) rotate(-8deg); }
  10%  { opacity: var(--op, 0.26); }
  50%  { transform: translateY(-46vh) translateX(var(--sway, 14px)) rotate(6deg); }
  90%  { opacity: var(--op, 0.26); }
  100% { opacity: 0; transform: translateY(-92vh) translateX(0) rotate(-4deg); }
}
@media (prefers-reduced-motion: reduce) { .hero-postres { display: none; } }
/* Sombra detrás del texto del hero: con video el fondo puede quedar claro
   justo donde va el texto; sin video, el rosa de arriba es demasiado claro
   para blanco puro. En ambos casos la sombra asegura la legibilidad. */
.hero .hero-eyebrow,
.hero .subtitulo {
  text-shadow: 0 1px 2px rgba(74, 20, 44, 0.55), 0 2px 12px rgba(74, 20, 44, 0.45);
}
.hero-con-video .hero-eyebrow,
.hero-con-video .subtitulo {
  /* Con el scrim ya ligero, la legibilidad la sostiene sobre todo la sombra
     del texto: una capa nítida pegada a la letra + un halo suave más amplio. */
  text-shadow:
    0 1px 2px rgba(0,0,0,0.7),
    0 2px 6px rgba(0,0,0,0.55),
    0 4px 22px rgba(0,0,0,0.45);
}

.hero-eyebrow {
  font-family: 'Dancing Script', cursive;
  font-size: 1.7rem;
  color: #ffe9d6;
  display: block;
  margin-bottom: 2px;
  /* Entrada suave y escalonada: primero el "Bienvenido a", luego el título. */
  animation: hero-eyebrow-entra 0.55s var(--ease-out) 0.05s both;
}
.hero h1 { font-size: 2.5rem; margin: 4px 0 10px; line-height: 1.15; }
.hero .subtitulo {
  /* Fuente / color / tamaño son configurables desde Admin (clases
     hero-fuente-*, hero-color-*, hero-tam-*). Esto es solo el respaldo por si
     no llega ninguna clase. */
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.28;
  margin: 6px auto 26px;
  text-wrap: balance;
  position: relative;
  display: inline-block;
  color: #fff;
  /* Entrada elegante: sube un poco y "enfoca" (blur -> nítido). Una sola vez,
     al cargar; en CSS para que no se trabe mientras carga el video. */
  animation: hero-titulo-entra 0.7s var(--ease-out) 0.14s both;
}
.hero .subtitulo::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -10px;
  width: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--dorado), transparent);
  transform: translateX(-50%);
  animation: crecer-linea 1s ease-out both;
  animation-delay: 0.7s;
}
@keyframes hero-eyebrow-entra {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-titulo-entra {
  from { opacity: 0; transform: translateY(20px) scale(0.985); }
  to   { opacity: 0.97; transform: translateY(0) scale(1); }
}
@keyframes hero-titulo-aparece {
  from { opacity: 0; }
  to   { opacity: 0.97; }
}
@keyframes entrada-subtitulo {
  from { opacity: 0; transform: translateY(14px); letter-spacing: 0.03em; }
  to { opacity: 0.94; transform: translateY(0); letter-spacing: normal; }
}
@keyframes crecer-linea {
  from { width: 0; }
  to { width: 70%; }
}
.hero .btn-primary { background: #fff; color: var(--rosa-boton); box-shadow: 0 8px 20px rgba(0,0,0,0.2); }
.hero-desliza { position: relative; z-index: 2; margin-top: 28px; font-size: 1.4rem; opacity: 0.8; animation: rebote 1.8s ease-in-out infinite; }
@keyframes rebote { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* ================= Títulos de sección ================= */
.section-title { text-align: center; margin: 6px 0 20px; }
.section-title .eyebrow {
  font-family: 'Dancing Script', cursive;   /* Pinyon Script se veia preciosa pero mucha gente no la lee */
  font-size: 1.7rem;
  display: inline-block;
  margin-bottom: -4px;
  padding: 0 0.08em;
  color: #6d4f17;
  /* Degradado oro más oscuro: cada tono llega a ~4:1 de contraste sobre la
     crema del fondo (antes los tonos claros #e6c98d/#dcbd80 quedaban casi
     invisibles ~1.6:1). Sigue leyéndose como oro con brillo. */
  background: linear-gradient(100deg, #a97f37 0%, #7c5a1f 26%, #5f4614 52%, #986f28 74%, #6d4f17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: brillo-oro 6s ease-in-out infinite;
}
.section-title h2 { margin: 2px 0 0; font-size: 1.65rem; color: var(--texto); }
.section-title p { color: var(--texto-suave); font-size: 0.92rem; max-width: 420px; margin: 8px auto 0; }

/* ================= Nuestra historia ================= */
.historia-card {
  background: linear-gradient(160deg, #fff, var(--rosa-suave));
  border-radius: var(--radio);
  padding: 26px 22px;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  position: relative;
}
.historia-card .comilla { font-family: 'Playfair Display', serif; font-size: 3rem; color: var(--rosa); line-height: 0; position: relative; top: 18px; }
.historia-card p { font-style: italic; color: var(--texto); line-height: 1.7; font-size: 1.02rem; }
.historia-card .firma { font-family: 'Dancing Script', cursive; font-size: 1.4rem; color: var(--rosa-oscuro); margin-top: 10px; display: block; text-align: right; }

/* ================= Video responsivo ================= */
.video-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radio);
  overflow: hidden;
  background: #000;
  box-shadow: var(--sombra);
}
.video-wrap iframe, .video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}

/* ================= Blog / Recetas & historia ================= */
.articulo-card {
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  margin-bottom: 18px;
  cursor: pointer;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.articulo-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(201, 103, 138, 0.2); }
.articulo-foto {
  width: 100%; aspect-ratio: 16/9;
  object-fit: cover;
  background: linear-gradient(135deg, var(--rosa-suave), #fff);
  display: flex; align-items: center; justify-content: center;
  font-size: 2.2rem; color: var(--rosa);
  overflow: hidden;
}
.articulo-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.articulo-card:hover .articulo-foto img { transform: scale(1.08); }
.articulo-info { padding: 16px; }
.articulo-categoria {
  display: inline-block;
  background: var(--rosa-suave);
  color: var(--rosa-oscuro);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.articulo-info h3 { margin: 0 0 6px; font-size: 1.12rem; }
.articulo-resumen { color: var(--texto-suave); font-size: 0.88rem; line-height: 1.5; }

.articulo-detalle .articulo-foto { aspect-ratio: 16/9; border-radius: var(--radio); margin-bottom: 16px; }
.articulo-detalle-contenido { line-height: 1.75; font-size: 0.98rem; color: var(--texto); }
.articulo-detalle-contenido p { margin: 0 0 14px; }

/* ================= Postres destacados (teaser en Inicio) ================= */
.destacados-scroll {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 4px 2px 14px;
  scroll-snap-type: x mandatory;
}
.destacado-mini {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 190px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  text-align: center;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.destacado-mini:active { transform: scale(0.96); }
.destacado-mini .foto { position: relative; width: 100%; aspect-ratio: 1/1; object-fit: cover; background: var(--rosa-suave); display:flex; align-items:center; justify-content:center; font-size:1.8rem; color:var(--rosa); overflow: hidden; }
.destacado-mini .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-suave); }
.destacado-descripcion-hover {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(58,20,36,0.15) 0%, rgba(58,20,36,0.92) 65%);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 14px 12px;
  opacity: 0;
  transition: opacity 0.3s var(--ease-suave);
}
.destacado-descripcion-hover p { color: #fff; font-size: 0.78rem; line-height: 1.35; margin: 0; }
@media (hover: hover) {
  .destacado-mini:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(107,33,64,0.16); }
  .destacado-mini:hover .foto img { transform: scale(1.08); }
  .destacado-mini:hover .destacado-descripcion-hover { opacity: 1; }
}
.destacado-mini.tocada { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(107,33,64,0.16); }
.destacado-mini.tocada .foto img { transform: scale(1.08); }
.destacado-mini.tocada .destacado-descripcion-hover { opacity: 1; }
.destacado-mini .nombre { font-size: 0.85rem; font-weight: 600; padding: 8px 6px 2px; }
.destacado-mini .precio { font-size: 0.78rem; color: var(--texto-suave); padding-bottom: 8px; }

/* ================= Animación de aparición al hacer scroll ================= */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out); }
.reveal.visible { opacity: 1; transform: none; }

/* ================= Tarjetas de postre estilo editorial (overlay) ================= */
.postre-foto { display: flex; align-items: flex-end; }
.postre-foto .overlay-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(30,10,20,0.78) 0%, rgba(30,10,20,0.15) 55%, transparent 80%);
  z-index: 1;
}
.postre-foto .overlay-texto {
  position: relative; z-index: 2;
  color: #fff;
  padding: 18px;
  width: 100%;
}
.postre-foto .overlay-texto h3 { margin: 0; color: #fff; font-size: 1.3rem; }
.postre-foto .overlay-texto .postre-precio { color: #ffe4ea; font-size: 1.05rem; }
.postre-foto .emoji-fallback {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.postre-foto .emoji-fallback svg { width: 55%; height: 55%; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.08)); }
.destacado-mini .foto svg { width: 70%; height: 70%; }

/* ================= Banner oscuro (CTA eventos) ================= */
.banner-oscuro {
  background: radial-gradient(circle at 15% 20%, rgba(255,255,255,0.06), transparent 45%), linear-gradient(135deg, #3a1626, #1f0d16);
  color: #fff;
  border-radius: var(--radio);
  padding: 30px 24px;
  margin: 10px 0 26px;
  text-align: center;
}
.banner-oscuro .eyebrow { font-family: 'Dancing Script', cursive; color: var(--dorado); font-size: 1.4rem; display: block; }
.banner-oscuro h2 { color: #fff; margin: 4px 0 10px; }
.banner-oscuro p { color: rgba(255,255,255,0.78); font-size: 0.92rem; max-width: 380px; margin: 0 auto 20px; }
.banner-oscuro .btn-primary { background: var(--dorado); color: #2a1018; }

/* ================= Contenido de redes sociales ================= */
.embeds-grid { display: flex; flex-direction: column; gap: 20px; align-items: center; }
.embed-card {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  /* Reserva un alto cercano al de un Reel/post ya cargado (~560px) para
     que el salto al terminar de cargar sea mínimo, y muestra un spinner
     mientras el script de Instagram/TikTok trae el contenido. */
  min-height: 560px;
  border-radius: 14px;
  background: var(--rosa-suave);
  position: relative;
  overflow: hidden;
}
.embed-card::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 28px; height: 28px;
  margin: -14px 0 0 -14px;
  border: 3px solid rgba(201, 103, 138, 0.25);
  border-top-color: var(--rosa-oscuro);
  border-radius: 50%;
  animation: girar-embed 0.9s linear infinite;
  z-index: 0;
}
@keyframes girar-embed { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .embed-card::after { animation: none; border-top-color: rgba(201, 103, 138, 0.25); }
}
.embed-card > * { position: relative; z-index: 1; }
.embed-card iframe, .embed-card .instagram-media, .embed-card .tiktok-embed { background: #fff; }
.embed-titulo { text-align: center; font-weight: 600; color: var(--texto-suave); margin-bottom: 8px; font-size: 0.9rem; }

/* ================= Fundadora ================= */
.fundadora-card {
  text-align: center;
  padding: 10px 10px 30px;
  margin-bottom: 10px;
}
.fundadora-foto-wrap { position: relative; width: 180px; height: 180px; margin: 0 auto 14px; }
.fundadora-foto {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rosa), var(--dorado));
  padding: 4px;
  box-shadow: 0 10px 30px rgba(201,103,138,0.4);
  display: flex; align-items: center; justify-content: center;
  animation: respirar-fundadora 4.5s ease-in-out infinite;
}
.fundadora-foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid #fff; }
@keyframes respirar-fundadora {
  0%, 100% { box-shadow: 0 10px 30px rgba(201,103,138,0.4); }
  50% { box-shadow: 0 12px 38px rgba(205,164,94,0.55); }
}
.destello {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255,233,181,0.6) 60%, transparent 75%);
  box-shadow: 0 0 10px 2px rgba(255,233,181,0.75);
  animation: titilar-destello 2.6s ease-in-out infinite;
  pointer-events: none;
}
.destello-1 { top: -4px; right: 22%; animation-delay: 0s; }
.destello-2 { top: 24%; right: -8px; width: 6px; height: 6px; animation-delay: 0.7s; }
.destello-3 { bottom: 10%; left: -8px; animation-delay: 1.4s; }
.destello-4 { bottom: -6px; right: 30%; width: 5px; height: 5px; animation-delay: 2.1s; }
@keyframes titilar-destello {
  0%, 100% { opacity: 0.2; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.35); }
}
.fundadora-foto span { font-size: 2.6rem; background: #fff; width: 100%; height: 100%; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.fundadora-frase { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; max-width: 380px; margin: 0 auto 8px; color: var(--texto); }
.fundadora-nombre { font-size: 0.82rem; color: var(--texto-suave); text-transform: uppercase; letter-spacing: 0.5px; }

/* ================= Botones con más energía (CTA vivas) ================= */
.btn-vivo {
  background: linear-gradient(120deg, var(--rosa-oscuro), #e0668f, var(--dorado));
  background-size: 200% auto;
  color: #fff;
  /* El degradado pasa por dorado, más claro — la sombra oscura mantiene el
     texto legible en toda la animación, no solo en las zonas rosa/vino. */
  text-shadow: 0 1px 3px rgba(58,20,36,0.45);
  animation: brillo-cta 3.5s ease infinite;
  box-shadow: 0 6px 20px rgba(201,103,138,0.35);
}
@keyframes brillo-cta { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
.btn-vivo:active { transform: scale(0.96); }

/* ================= Confeti de celebración ================= */
.confeti-overlay {
  position: fixed; inset: 0;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.confeti-pieza {
  position: absolute;
  top: -20px;
  width: 9px; height: 14px;
  opacity: 0.95;
  animation: caer-confeti linear forwards;
  border-radius: 2px;
}
.confeti-emoji {
  width: auto; height: auto;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
@keyframes caer-confeti {
  0% { transform: translateY(0) rotate(0); }
  to { transform: translateY(110vh) rotate(600deg); opacity: 0.3; }
}
.confeti-mensaje {
  position: relative;
  background: linear-gradient(160deg, #fff, var(--rosa-suave) 140%);
  border: 2px solid #fff;
  border-radius: 26px;
  padding: 36px 30px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(107,33,64,0.35);
  animation: pop-mensaje 0.45s cubic-bezier(.34,1.56,.64,1);
  max-width: 320px;
}
@keyframes pop-mensaje { from { transform: scale(0.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confeti-mensaje .icono-check {
  position: relative;
  width: 68px; height: 68px;
  background: linear-gradient(135deg, var(--verde), #2d9464);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.1rem; color: #fff;
  margin: 0 auto 18px;
  box-shadow: 0 8px 20px rgba(76,175,130,0.4);
}
.anillo-pulso {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 3px solid var(--verde);
  animation: pulso-anillo 1.6s ease-out infinite;
}
.anillo-pulso-b { animation-delay: 0.5s; }
@keyframes pulso-anillo {
  0% { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.confeti-mensaje h3 { color: var(--vino); margin: 0 0 8px; font-size: 1.3rem; }
.confeti-mensaje p { color: var(--texto-suave); font-size: 0.92rem; margin: 0; }

/* ================= Mon Chérie Prime (premium dorado) ================= */
.prime-badge {
  display: inline-block;
  background: linear-gradient(120deg, var(--dorado), #e8c27a);
  color: #2a1e08;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.prime-hero {
  background: radial-gradient(circle at 20% 20%, rgba(205,164,94,0.25), transparent 45%), linear-gradient(160deg, #241521, #120a12);
  color: #fff;
  text-align: center;
  padding: 44px 24px 40px;
  border-radius: 0 0 40px 40px;
  box-shadow: var(--sombra);
}
.prime-hero h1 { color: #fff; font-size: 2.1rem; margin: 4px 0 10px; }
.prime-hero p { color: rgba(255,255,255,0.82); max-width: 360px; margin: 0 auto; }
.prime-precio { font-family: 'Playfair Display', serif; font-size: 2.2rem; color: var(--dorado); margin-top: 14px !important; }
.prime-precio span { font-size: 1rem; color: rgba(255,255,255,0.7); }

.prime-lista { list-style: none; padding: 0; margin: 0; }
.prime-lista li { padding: 10px 0; border-bottom: 1px solid rgba(107,33,64,0.10); font-size: 0.95rem; }
.prime-lista li:last-child { border-bottom: none; }

.banner-prime {
  background: radial-gradient(circle at 80% 30%, rgba(205,164,94,0.35), transparent 45%), linear-gradient(135deg, #2a1a12, #17100c);
  color: #fff;
  border-radius: var(--radio);
  padding: 30px 24px;
  margin: 10px 0 26px;
  text-align: center;
}
.banner-prime h2 { color: #fff; margin: 4px 0 10px; }
.banner-prime p { color: rgba(255,255,255,0.8); font-size: 0.92rem; max-width: 360px; margin: 0 auto 20px; }
.banner-prime .btn-primary { background: linear-gradient(120deg, var(--dorado), #e8c27a); color: #2a1e08; }

/* ================= Recordatorios antes de enviar el pedido ================= */
.mini-recordatorio {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rosa-suave);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.mini-recordatorio:active { transform: scale(0.98); }
.mini-recordatorio span { font-size: 1.6rem; }
.mini-recordatorio strong { font-size: 0.92rem; display: block; }
.mini-recordatorio p { margin: 2px 0 0; font-size: 0.82rem; color: var(--texto-suave); }
.mini-recordatorio-prime { background: linear-gradient(135deg, #fdf3e0, #fbe9ee); }

/* ================= Síguenos / pie de página ================= */
.siguenos-bloque {
  margin-top: 14px;
  padding: 16px;
  background: linear-gradient(135deg, var(--rosa-suave), #fff);
  border-radius: 18px;
  border: 1px solid rgba(201,103,138,0.18);
  text-align: center;               /* respaldo: centra aunque alguna regla de más arriba falle */
}
.siguenos-fila { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 18px; margin-top: 10px; }
.siguenos-titulo { width: 100%; font-weight: 700; font-size: 0.95rem; color: var(--vino); }
.siguenos-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.siguenos-nombre { font-size: 0.72rem; font-weight: 600; color: var(--texto-suave); }
.siguenos-link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; min-height: 52px; min-width: 52px;
  border-radius: 15px;                 /* esquinas redondas, como el icono real de cada app */
  color: #fff;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  transition: transform 0.25s var(--ease-suave), box-shadow 0.25s var(--ease-suave);
  animation: laton-siguenos 2.6s ease-in-out infinite;
}
.siguenos-link svg, .fab-siguenos-opcion svg { width: 26px; height: 26px; }
.siguenos-link:hover { transform: translateY(-4px) scale(1.08); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.siguenos-link.siguenos-instagram { background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fa7e1e 25%, #d62976 55%, #962fbf 75%, #4f5bd5 100%); }
.siguenos-link.siguenos-tiktok { background: #000; animation-delay: 0.3s; }
.siguenos-link.siguenos-facebook { background: #1877f2; animation-delay: 0.6s; }
.siguenos-pendiente { opacity: 0.35; filter: grayscale(1); cursor: default; animation: none; box-shadow: none; }
@keyframes laton-siguenos { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.pie-pagina { text-align: center; padding: 10px 4px 20px; }

/* ================= Tarjeta de postre v2 (insignia + contador) ================= */
.postre-card-v2 {
  background: #fff;
  border-radius: var(--radio);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  margin-bottom: 22px;
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.postre-card-v2:hover, .postre-card-v2.tocada { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(107,33,64,0.18); }
.postre-foto-v2 {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: visible;
  background: linear-gradient(135deg, var(--rosa-suave), #fff);
}
.postre-foto-v2-recorte {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--radio) var(--radio) 0 0;
}
.postre-foto-v2 img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-suave); }
.postre-card-v2:hover .postre-foto-v2 img, .postre-card-v2.tocada .postre-foto-v2 img { transform: scale(1.08); }
.postre-foto-v2 .emoji-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.postre-foto-v2 .emoji-fallback svg { width: 60%; height: 60%; }
.badge-precio-circular {
  position: absolute;
  bottom: -22px; right: 16px;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 28%, var(--vino-claro), var(--vino) 70%);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  line-height: 1.15;
  box-shadow: 0 8px 18px rgba(107,33,64,0.45), 0 0 0 4px #fff;
  font-size: 0.6rem;
  font-weight: 600;
  z-index: 3;
  animation: aparecer-badge 0.4s ease-out, respirar-precio 2.6s ease-in-out infinite;
  animation-delay: 0s, 0.6s;
  cursor: default;
  transition: transform 0.2s ease;
  padding: 4px;
}
.badge-precio-circular::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.35);
}
.badge-precio-circular::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0deg, rgba(255,233,181,0.9) 25deg, transparent 60deg, transparent 360deg);
  animation: girar-brillo-precio 2.6s linear infinite;
  animation-delay: 0.6s;
}
@keyframes aparecer-badge {
  from { transform: scale(0.6) rotate(-12deg); opacity: 0; }
  to { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes respirar-precio {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 18px rgba(107,33,64,0.45), 0 0 0 4px #fff; }
  50% { transform: scale(1.09); box-shadow: 0 10px 24px rgba(107,33,64,0.5), 0 0 0 4px #fff, 0 0 16px 4px rgba(205,164,94,0.6); }
}
@keyframes girar-brillo-precio {
  to { transform: rotate(360deg); }
}
@media (hover: hover) {
  .badge-precio-circular:hover { animation: none; transform: scale(1.14); }
  .badge-precio-circular:hover::after { animation: none; }
}
.badge-precio-circular span { display: block; font-size: 0.56rem; opacity: 0.85; text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 1px; }
.badge-precio-circular strong { font-size: 0.92rem; font-weight: 700; white-space: nowrap; letter-spacing: -0.2px; }
.postre-info-v2 { padding: 34px 18px 18px; }
.postre-info-v2 h3 { font-style: italic; font-size: 1.4rem; margin: 0 0 6px; color: var(--vino); }
.postre-info-v2 .postre-desc { margin: 0 0 10px; }
/* Chips para filtrar el menú por etiqueta/alérgeno */
.filtros-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 0 auto 20px;
  max-width: 560px;
}
.chip-filtro {
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--rosa-oscuro);
  background: #fff;
  border: 1.5px solid var(--rosa-suave);
  padding: 7px 14px;
  border-radius: 20px;
  min-height: 0;
  cursor: pointer;
  transition: background var(--dur, .2s) var(--ease-out, ease), border-color var(--dur, .2s) var(--ease-out, ease), color var(--dur, .2s) var(--ease-out, ease);
}
@media (hover: hover) { .chip-filtro:hover { border-color: var(--rosa-oscuro); } }
.chip-filtro.activo {
  background: var(--rosa-oscuro);
  border-color: var(--rosa-oscuro);
  color: #fff;
}
.chip-filtro-limpiar { color: var(--texto-suave); border-color: #eee0e2; }

/* Reseña de prueba social en el checkout */
.resena-checkout { background: linear-gradient(160deg, #fff, var(--rosa-suave)); }
.resena-checkout-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.resena-checkout .estrellas { font-size: 0.95rem; }
.resena-checkout-texto { font-style: italic; color: var(--texto); line-height: 1.6; margin: 8px 0 0; }

/* Pantalla de confirmación de pedido */
.confirmacion-pedido { text-align: center; }
.confirmacion-pedido h1 { font-size: 1.5rem; color: var(--rosa-oscuro); margin: 10px 0 8px; text-wrap: balance; }
.confirmacion-check {
  width: 56px; height: 56px; margin: 0 auto;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 1.8rem;
  display: flex; align-items: center; justify-content: center;
}
.confirmacion-resumen {
  text-align: left;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--texto-suave);
  background: var(--rosa-suave);
  border-radius: 12px;
  padding: 14px;
  margin: 14px 0;
  max-height: 220px;
  overflow-y: auto;
}

.etiquetas-alergenos { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.etiqueta-alergeno {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--texto-suave);
  background: var(--rosa-suave);
  padding: 4px 10px;
  border-radius: 20px;
}

.accion-postre .btn-lo-quiero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--rosa-suave), #fce3ea);
  color: var(--vino);
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.85rem;
  box-shadow: 0 2px 8px rgba(107,33,64,0.12);
  transition: background 0.4s ease, color 0.35s ease, box-shadow 0.35s ease, transform 0.2s ease;
  animation: respirar-boton 3.6s ease-in-out infinite;
}
.accion-postre .btn-lo-quiero::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.65), transparent);
  transform: skewX(-20deg);
  animation: brillo-boton 3.6s ease-in-out infinite;
  animation-delay: inherit;
}
@keyframes respirar-boton {
  0%, 100% { box-shadow: 0 2px 8px rgba(107,33,64,0.12); }
  50% { box-shadow: 0 5px 16px rgba(107,33,64,0.24); }
}
@keyframes brillo-boton {
  0%, 22% { left: -60%; }
  62%, 100% { left: 130%; }
}
.accion-postre .btn-lo-quiero:active {
  transform: scale(0.95);
  transition: transform 0.1s ease;
}
@media (hover: hover) {
  .accion-postre .btn-lo-quiero:hover {
    background: linear-gradient(135deg, var(--vino), var(--rosa-oscuro));
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(107,33,64,0.35);
  }
}
.stepper-cantidad {
  display: flex;
  align-items: stretch;
  background: var(--vino);
  border-radius: 14px;
  overflow: hidden;
  min-height: 52px;
}
.stepper-cantidad button {
  background: transparent;
  color: #fff;
  border-radius: 0;
  flex: 0 0 56px;
  font-size: 1.3rem;
  min-height: 52px;
  transition: transform 0.1s ease;
}
.stepper-cantidad button:first-child { background: rgba(255,255,255,0.12); }
.stepper-cantidad button:last-child { background: var(--rosa-oscuro); }
.stepper-cantidad button:active { transform: scale(0.88); }
@media (prefers-reduced-motion: reduce) {
  .stepper-cantidad button { transition: none; }
}
.stepper-cantidad .cantidad-valor {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 1.1rem;
}

/* ================= Barra flotante de pedido ================= */
.barra-carrito {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 74px;
  z-index: 45;
  background: linear-gradient(120deg, var(--vino), #4a1730);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 10px 10px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: subir-barra 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
@keyframes subir-barra { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Al vaciar el carrito, sale por donde entró (nunca desaparece de golpe) */
.barra-carrito.barra-carrito-sale {
  animation: bajar-barra 0.25s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes bajar-barra { to { transform: translateY(30px); opacity: 0; } }
@media (min-width: 860px) {
  /* En escritorio el contenido queda centrado y angosto — esta barra no
     debe estirarse de borde a borde de la pantalla (se veía como una
     franja larga y vacía). Se vuelve una tarjeta flotante compacta,
     igual que el resto de los elementos flotantes del sitio. */
  .barra-carrito { left: auto; right: 24px; bottom: 92px; width: 380px; max-width: calc(100vw - 48px); } /* arriba del botón de WhatsApp, que va en bottom:24 */
}
.barra-carrito-cantidad {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--rosa-oscuro);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* Pulso corto de feedback cuando cambia un número de cantidad (postre,
   línea del pedido, o el contador de la barra) — nunca reemplaza el
   elemento entero, solo confirma que el clic de +/- surtió efecto. */
.pulso-cantidad { animation: pulso-cantidad 0.2s ease; }
@keyframes pulso-cantidad { 40% { transform: scale(1.18); } 100% { transform: scale(1); } }
.barra-carrito-info { flex: 1; color: #fff; min-width: 0; }
.barra-carrito-info .etiqueta { font-size: 0.68rem; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.5px; display: block; }
.barra-carrito-info strong { font-size: 1.1rem; }
.barra-carrito .btn-terminar {
  background: #fff;
  color: var(--vino);
  font-weight: 700;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  flex-shrink: 0;
  transition: transform 0.12s ease;
}
.barra-carrito .btn-terminar:active { transform: scale(0.95); }
@media (prefers-reduced-motion: reduce) {
  .barra-carrito, .barra-carrito.barra-carrito-sale, .pulso-cantidad { animation: none !important; }
}

/* ================= Pie de página global (WhatsApp + redes, en todas las pantallas) ================= */
.footer-global {
  text-align: center;
  padding: 36px 16px 58px; /* el extra abajo es para que el texto de copyright no
    quede tapado por el botón flotante de "síguenos" (fijo en la esquina) */
  margin-top: 36px;
  border-top: 1px solid #ecd9df;
  /* Un tono rosa apenas más cálido que el fondo crema, para que el pie se
     sienta un cierre de página y no se funda con el resto. */
  background: linear-gradient(180deg, #fdf4f7 0%, #f8e9ee 100%);
}
.footer-whatsapp-link {
  display: inline-flex; align-items: center; gap: 6px;
  background: #e9fbf1;
  color: #1e7e4a;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 8px 16px;
  border-radius: 20px;
  margin-bottom: 12px;
}
.footer-global .siguenos-fila { justify-content: center; }
.footer-copy { color: var(--texto-suave); font-size: 0.75rem; margin-top: 12px; }
.footer-grid { display: flex; flex-direction: column; gap: 22px; text-align: center; }
.footer-col h4 { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--vino); margin: 0 0 10px; }
.footer-col a { display: block; color: var(--texto-suave); text-decoration: none; font-size: 0.88rem; padding: 9px 0; } /* antes solo tenía margin-bottom:6px — el área para tocar con el dedo era muy angosta */
.footer-col a:hover { color: var(--rosa-oscuro); }
.footer-col p { color: var(--texto-suave); font-size: 0.88rem; margin: 0 0 6px; }
.logo-img-footer { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; margin-bottom: 8px; }
.logo-img-footer.logo-forma-circulo, .logo-img-footer.logo-forma-cuadrado, .logo-img-footer.logo-forma-rectangulo { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.footer-marca .footer-tagline { font-size: 0.85rem; color: var(--texto-suave); max-width: 220px; margin: 0 auto; }

/* ================= Logo de marca (assets/logo.png) — marco circular ================= */
.marca-topbar { display: flex; align-items: center; }
.logo-img, .logo-img-hero, .logo-img-grande, .logo-img-header {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.logo-img { height: 44px; width: 44px; box-shadow: 0 2px 6px rgba(0,0,0,0.12); transition: opacity 0.25s ease; }
.logo-img-hero { height: 132px; width: 132px; margin: 4px auto 6px; box-shadow: 0 8px 22px rgba(0,0,0,0.3), 0 0 0 4px rgba(255,255,255,0.5); }
.logo-img-grande { height: 132px; width: 132px; margin: 0 auto; box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.logo-img-header { height: 66px; width: 66px; margin: 0 auto 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }

/* ================= Forma del logo (elegible desde el admin) ================= */
.logo-forma-circulo { border-radius: 50%; background: #fff; }
.logo-forma-cuadrado { border-radius: 12px; background: #fff; }
.logo-forma-rectangulo { border-radius: 12px; width: auto !important; aspect-ratio: 1.58 / 1; background: #fff; }
.logo-forma-transparente {
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  width: auto !important;
  object-fit: contain;
}

.logo-animado { animation: respirar-logo 4s ease-in-out infinite; }
@keyframes respirar-logo {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(205,164,94,0)); }
  50% { transform: scale(1.045); filter: drop-shadow(0 0 10px rgba(205,164,94,0.45)); }
}

.btn-musica {
  min-height: 44px;
  min-width: 44px;
  padding: 6px;
  background: var(--rosa-suave);
  border-radius: 50%;
  font-size: 1rem;
}
.btn-admin-acceso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 6px;
  background: var(--rosa-suave);
  border-radius: 50%;
  font-size: 1rem;
  text-decoration: none;
}
.acciones-header-admin {
  position: absolute;
  top: 16px; right: 16px;
  display: flex;
  gap: 8px;
}
.btn-catalogo-acceso,
.btn-salir-acceso {
  background: rgba(255,255,255,0.2);
  color: #fff;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.btn-idioma {
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  background: var(--rosa-suave);
  color: var(--vino);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: 20px;
}

.info-entrega-pago p { margin: 6px 0; font-size: 0.9rem; }

/* ================= Aviso "Instalar como app" ================= */
.banner-instalar-app {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 14px 0;
  padding: 12px 34px 12px 14px;
  background: linear-gradient(120deg, #fff, var(--rosa-suave));
  border: 1px solid #f1d3dd;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(107, 33, 64, 0.1);
  position: relative;
  animation: banner-instalar-entra 0.35s ease-out;
}
@keyframes banner-instalar-entra {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.banner-instalar-icono { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; flex: 0 0 auto; }
.banner-instalar-texto { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.banner-instalar-texto strong { font-size: 0.92rem; color: var(--vino); }
.banner-instalar-texto span { font-size: 0.78rem; color: var(--texto-suave); line-height: 1.35; }
.banner-instalar-boton {
  flex: 0 0 auto;
  background: linear-gradient(120deg, var(--vino), var(--rosa-oscuro));
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 9px 16px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.banner-instalar-boton:disabled { opacity: 0.6; }
.banner-instalar-cerrar {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(107, 33, 64, 0.08);
  color: var(--vino);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
/* La ✕ se ve de 30px pero el área para el dedo llega a ~46px. */
.banner-instalar-cerrar::before {
  content: "";
  position: absolute;
  inset: -8px;
}
@media (min-width: 860px) {
  .banner-instalar-app { display: none !important; } /* este aviso es solo para celular */
}
@media (prefers-reduced-motion: reduce) {
  .banner-instalar-app { animation: none; }
}

/* ================= Llamado a la acción flotante ================= */
.cta-flotante {
  position: fixed;
  right: 14px;
  bottom: 108px; /* a 84px rozaba la barra de navegación inferior */
  z-index: 46;
  background: linear-gradient(120deg, var(--vino), var(--rosa-oscuro));
  color: #fff;
  border-radius: 30px;
  min-height: 52px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 8px 22px rgba(107,33,64,0.4);
  animation: pulso-cta 2.4s ease-in-out infinite;
}
@keyframes pulso-cta { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.cta-flotante.oculto { display: none; }
/* "Pedir ahora" se sube para no chocar con el botón de WhatsApp (misma esquina). */
.cta-flotante:not(.oculto) { bottom: 172px; }

/* ---------------- Botón flotante de WhatsApp (con panel de bienvenida) ------- */
.fab-whatsapp-wrap {
  position: fixed;
  right: 14px;
  bottom: 108px;
  z-index: 47;
}
.fab-whatsapp-wrap.oculto { display: none; }
.fab-whatsapp {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: linear-gradient(135deg, #25d366, #128c4b);
  box-shadow: 0 8px 22px rgba(18,140,75,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Media opacidad en reposo para no estorbar la lectura; al 100% al pasar
     por encima, tocarlo o cuando el panel está abierto. */
  opacity: 0.5;
  transition: opacity 0.2s ease, transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out);
}
.fab-whatsapp svg { width: 30px; height: 30px; flex-shrink: 0; }
.fab-whatsapp-txt { display: none; }
.fab-whatsapp:focus-visible,
.fab-whatsapp:active,
.fab-whatsapp-wrap.abierto .fab-whatsapp { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .fab-whatsapp:hover { opacity: 1; transform: translateY(-3px) scale(1.05); box-shadow: 0 12px 28px rgba(18,140,75,0.55); }
}
.fab-whatsapp:active { transform: scale(0.96); }

/* En escritorio no hay barra inferior y el círculo solo se veía chiquito y
   perdido en la esquina: se convierte en una píldora con texto. */
@media (min-width: 900px) {
  .fab-whatsapp-wrap { right: 24px; bottom: 24px; }
  .fab-whatsapp {
    width: auto;
    height: 56px;
    border-radius: 28px;
    padding: 0 22px 0 18px;
    gap: 10px;
    opacity: 0.9;
  }
  .fab-whatsapp svg { width: 26px; height: 26px; }
  .fab-whatsapp-txt {
    display: inline;
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
  }
  .fab-wa-panel { right: 0; width: 300px; }
}

/* Panel de bienvenida que sale del botón */
.fab-wa-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 12px);
  width: min(78vw, 290px);
  background: #fff;
  border-radius: 18px;
  padding: 16px 16px 14px;
  box-shadow: 0 1px 2px rgba(107,33,64,0.10), 0 16px 40px rgba(107,33,64,0.22);
  transform-origin: bottom right;
  animation: fab-wa-entra 0.24s var(--ease-out) both;
}
.fab-wa-panel[hidden] { display: none; }
@keyframes fab-wa-entra {
  from { opacity: 0; transform: translateY(8px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.fab-wa-panel::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: -7px;
  width: 14px; height: 14px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(107,33,64,0.10);
}
.fab-wa-cerrar {
  position: absolute;
  top: 8px; right: 8px;
  width: 30px; height: 30px;
  border: none;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.fab-wa-cerrar svg { width: 16px; height: 16px; }
.fab-wa-saludo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--vino);
  margin: 0 24px 4px 0;
}
.fab-wa-texto {
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--texto-suave);
  margin: 0 0 12px;
}
.fab-wa-opciones { display: flex; flex-direction: column; gap: 8px; }
.fab-wa-opcion {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 12px;
  background: #f5eef0;
  color: var(--vino);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: background 0.15s ease, transform 0.12s ease;
}
.fab-wa-opcion:last-child { background: linear-gradient(135deg, #25d366, #128c4b); color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .fab-wa-opcion:hover { transform: translateX(2px); background: #efe2e6; }
  .fab-wa-opcion:last-child:hover { background: linear-gradient(135deg, #2ce072, #12a256); }
}
.fab-wa-opcion:active { transform: scale(0.98); }

@media (prefers-reduced-motion: reduce) {
  .fab-wa-panel { animation: none; }
}

/* Widget de Turnstile (anti-spam) — solo aparece si hay una site key puesta
   en Admin. En modo "Administrado"/"No interactivo" ocupa una cajita visible. */
.cf-turnstile { margin: 12px 0; min-height: 65px; display: flex; justify-content: center; }
.cf-turnstile:empty { min-height: 0; margin: 0; }

/* ---------------- Botón flotante "síguenos" (esquina opuesta) ---------------- */
.fab-siguenos-wrap {
  position: fixed;
  left: 14px;
  bottom: 108px;   /* un poco mas arriba: a 84px quedaba encima del boton "Lo quiero" de las tarjetas */
  z-index: 46;
}
.fab-siguenos-wrap.oculto { display: none; }
/* Las opciones van con position:absolute — así NO agrandan el área que
   se mide al arrastrar, y el corazón sí puede llegar a cualquier esquina. */
.fab-siguenos-opciones {
  position: absolute;
  left: 0;                 /* pegado al borde del botón, nunca se sale de la pantalla */
  bottom: 100%;
  margin-bottom: 10px;
  max-width: calc(100vw - 28px);
}
.fab-siguenos-wrap.fab-abre-abajo .fab-siguenos-opciones { bottom: auto; top: 100%; margin-bottom: 0; margin-top: 10px; }
.fab-siguenos-wrap.fab-a-la-derecha .fab-siguenos-opciones { left: auto; right: 0; }
/* Arrastre: el corazón se puede mover a donde estorbe menos */
.fab-siguenos { cursor: grab; touch-action: none; }
.fab-siguenos-wrap.fab-arrastrando .fab-siguenos { cursor: grabbing; animation: none; transform: scale(1.12); box-shadow: 0 14px 30px rgba(107,33,64,.5); }
.fab-siguenos-wrap.fab-a-la-derecha .fab-siguenos-fila { flex-direction: row-reverse; }
.fab-siguenos {
  width: 52px; height: 52px;
  min-height: 52px; min-width: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, var(--rosa-oscuro), var(--dorado));
  color: #fff;
  font-size: 1.3rem;
  padding: 0;
  box-shadow: 0 8px 22px rgba(107,33,64,0.4);
  animation: pulso-cta 2.4s ease-in-out infinite;
}
.fab-siguenos-opciones {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.fab-siguenos-fila {
  display: flex; align-items: center; gap: 8px;
  text-decoration: none;
  opacity: 0;
  transform: translateY(12px) scale(0.7);
  pointer-events: none;
  transition: opacity 0.25s var(--ease-suave), transform 0.25s var(--ease-suave);
}
.fab-siguenos-wrap.abierto .fab-siguenos-fila { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.fab-siguenos-nombre {
  background: #fff;
  color: var(--vino);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  white-space: nowrap;
}
.fab-siguenos-opcion {
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px;
  min-height: 46px; min-width: 46px;
  border-radius: 13px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.24);
  flex-shrink: 0;
}
.fab-siguenos-fila.siguenos-instagram .fab-siguenos-opcion { background: radial-gradient(circle at 30% 110%, #ffdb73 0%, #fa7e1e 25%, #d62976 55%, #962fbf 75%, #4f5bd5 100%); }
.fab-siguenos-fila.siguenos-tiktok .fab-siguenos-opcion { background: #000; }

/* ================= Pedido como regalo / ocasión especial ================= */
.bloque-regalo { display: none; margin-top: 14px; }
.bloque-regalo.visible { display: block; animation: pop-mensaje 0.25s ease; }

.extra-regalo-opcion {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--rosa-suave);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}
.extra-regalo-opcion input { width: 20px; height: 20px; flex-shrink: 0; min-height: auto; }
.extra-regalo-opcion span { flex: 1; }
.extra-regalo-opcion strong { color: var(--vino); font-size: 0.85rem; }

/* ================= Pedido: carrito y total, con más vida ================= */
.card-pedido { border-top: 3px solid var(--rosa); position: relative; overflow: hidden; }
.fila-carrito {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #f1e3e6;
}
.fila-carrito:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.stepper-carrito { display: flex; align-items: center; gap: 10px; }
.stepper-carrito span { min-width: 20px; text-align: center; font-weight: 700; color: var(--vino); }
.btn-cantidad-circular {
  width: 44px; height: 44px;
  min-height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--rosa-suave);
  color: var(--vino);
  font-size: 1.2rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(107,33,64,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-cantidad-circular:active { transform: scale(0.88); }
.btn-cantidad-mas { background: linear-gradient(135deg, var(--rosa-oscuro), var(--vino)); color: #fff; box-shadow: 0 4px 10px rgba(107,33,64,0.35); }

.card-total-pedido {
  text-align: right;
  background: linear-gradient(135deg, var(--vino), var(--vino-claro) 130%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(107,33,64,0.35);
}
.card-total-pedido::before {
  content: "";
  position: absolute;
  top: -40%; right: -20%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(255,255,255,0.14), transparent 70%);
}
.card-total-pedido .texto-ayuda { color: rgba(255,255,255,0.75); }
#total-final-pedido {
  font-size: 1.8rem;
  font-weight: 800;
  color: #fff;
  display: inline-block;
}
.total-pop { animation: pop-total 0.4s cubic-bezier(.34,1.56,.64,1); }
@keyframes pop-total {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.tarjeta-regalo { position: relative; overflow: hidden; }
.tarjeta-regalo::after {
  content: "🎀";
  position: absolute;
  top: -10px; right: -6px;
  font-size: 2.6rem;
  opacity: 0.12;
  transform: rotate(12deg);
}

/* ================= Pedido: flujo guiado por pasos (B + C) ================= */
.pedido-flujo { position: relative; padding-bottom: 128px; }
/* Paso 3: la barra inferior crece a 2 filas (total + botón de enviar a todo
   el ancho), así que hace falta más colchón para que no tape el último bloque. */
.pedido-flujo--confirmar { padding-bottom: 196px; }

.pedido-progreso {
  list-style: none;
  margin: 0 0 18px;
  padding: 12px 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--crema);
  border-radius: 0 0 14px 14px;
}
.pedido-progreso__paso {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.82rem; font-weight: 600;
  color: var(--texto-suave);
  white-space: nowrap;
}
.pedido-progreso__num {
  width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #efe2e6; color: var(--texto-suave);
  font-size: 0.8rem; font-weight: 700;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}
.pedido-progreso__paso.activo { color: var(--vino); }
.pedido-progreso__paso.activo .pedido-progreso__num { background: linear-gradient(135deg, var(--rosa-oscuro), var(--vino)); color: #fff; }
.pedido-progreso__paso.hecho .pedido-progreso__num { background: var(--dorado); color: #fff; }
.pedido-progreso__linea { flex: 1; height: 2px; background: #e8d7dc; min-width: 10px; }
.pedido-progreso__micro {
  flex-basis: 100%;
  margin: 4px 0 0;
  font-size: 0.8rem;
  color: var(--vino);
  font-weight: 600;
}
.pedido-progreso__micro:empty { display: none; }

.pedido-columnas { display: block; }
.paso-panel { display: none; }
.paso-panel--activo { display: block; animation: paso-entra .34s var(--ease-out); }
@keyframes paso-entra { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.paso-panel__tit { outline: none; }

.pedido-item {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px dashed #f1e3e6;
}
.pedido-item:last-child { border-bottom: none; }
.pedido-item__miniatura {
  width: 52px; height: 52px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--rosa-suave);
  flex-shrink: 0;
}
.pedido-item__miniatura img,
.pedido-item__miniatura svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.pedido-item__texto { min-width: 0; }
.pedido-item__texto strong { display: block; font-size: 0.95rem; }
.pedido-item__texto .texto-ayuda { font-size: 0.8rem; }
.pedido-subtotal { text-align: right; font-size: 1rem; color: var(--texto-suave); margin: 10px 0 0; }
.pedido-subtotal strong { color: var(--vino); }

.chips-fecha { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.chip-fecha {
  border: 1px solid #e8d7dc;
  background: #fff;
  color: var(--texto);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.82rem;
  font-weight: 600;
  min-height: 40px;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}
@media (hover: hover) { .chip-fecha:hover:not([disabled]) { border-color: var(--rosa-oscuro); } }
.chip-fecha.activo { background: linear-gradient(135deg, var(--rosa-oscuro), var(--vino)); border-color: transparent; color: #fff; }
.chip-fecha[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Recibo (paso 3 · confirmar) */
.pedido-recibo__cab { display: flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--vino); margin-bottom: 10px; }
.pedido-recibo__cab span { font-size: 1.3rem; }
.pedido-recibo__fila { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.pedido-recibo__sep { border-top: 1px dashed #e8d7dc; margin: 8px 0; }
.pedido-recibo__dato { font-size: 0.86rem; color: var(--texto-suave); padding: 3px 0; }
.pedido-recibo__dato strong { color: var(--texto); }

/* Aside resumen tipo ticket (solo escritorio) */
.pedido-resumen { display: none; }
.pedido-ticket__tit { font-weight: 700; color: var(--vino); margin: 0 0 8px; text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.76rem; }
.pedido-ticket__fila { display: flex; justify-content: space-between; gap: 10px; font-size: 0.84rem; padding: 4px 0; font-variant-numeric: tabular-nums; }
.pedido-ticket__sep { border-top: 2px dashed #e0cdd4; margin: 8px 0; }
.pedido-ticket__total { font-weight: 700; color: var(--vino); font-size: 0.95rem; }
.pedido-ticket__nota { font-size: 0.74rem; color: var(--texto-suave); margin: 8px 0 0; }

/* Barra inferior de acción (sticky) — mismas medidas que .barra-carrito, que
   ya es una posición aceptada sobre la nav inferior. */
.pedido-barra-inferior {
  position: fixed;
  left: 12px; right: 12px;
  bottom: 74px;
  z-index: 45;
  background: linear-gradient(120deg, var(--vino), #4a1730);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  animation: subir-barra 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}
.pedido-barra-cant {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--rosa-oscuro); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem; flex-shrink: 0;
}
.pedido-barra-info { flex: 1; color: #fff; min-width: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pedido-barra-info span { font-size: 0.8rem; opacity: 0.8; }
.pedido-barra-info strong { font-size: 1.1rem; }
.pedido-barra-btn {
  flex-shrink: 0;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 12px;
  font-weight: 700;
  background: #fff;
  color: var(--vino);
  transition: transform 0.12s ease;
}
.pedido-barra-btn:active { transform: scale(0.95); }
.pedido-barra-btn--enviar { background: linear-gradient(135deg, #167e3d, #0d4f26); color: #fff; }
.pedido-barra-btn[hidden] { display: none; }
#pedido-barra-siguiente:disabled { opacity: 0.55; }

/* Paso 3 — "Enviar pedido por WhatsApp" es un texto largo y no cabe al lado
   del total en pantallas angostas (antes se salía de la barra y quedaba
   encima de las cifras). Se le da su propia fila, a todo el ancho. */
.pedido-barra--enviar { flex-wrap: wrap; row-gap: 8px; }
.pedido-barra--enviar .pedido-barra-info { flex-wrap: nowrap; }
.pedido-barra--enviar .pedido-barra-info span { display: none; } /* deja solo el total */
.pedido-barra--enviar .pedido-barra-btn--enviar {
  order: 3;
  flex: 1 1 100%;
  min-height: 46px;
}

/* Moño que aparece al abrir el bloque de regalo */
.bloque-regalo { position: relative; }
.bloque-regalo__mono {
  position: absolute; top: -36px; right: 2px;
  width: 44px; height: 32px;
  opacity: 0; transform: scale(0.4) rotate(-18deg);
  transform-origin: 70% 100%;
  pointer-events: none;
}
.bloque-regalo__mono svg { width: 100%; height: 100%; }
.bloque-regalo.visible .bloque-regalo__mono { animation: mono-entra .55s cubic-bezier(.34,1.56,.64,1) forwards; }
@keyframes mono-entra {
  0% { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  60% { opacity: 1; transform: scale(1.12) rotate(6deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Pantalla de gracias con más celebración */
.confirmacion-pedido__ilustracion { width: 116px; height: 128px; margin: 0 auto 4px; }
.confirmacion-pedido__ilustracion img,
.confirmacion-pedido__ilustracion svg { width: 100%; height: 100%; object-fit: contain; border-radius: 14px; }
.confirmacion-gracias {
  font-family: 'Dancing Script', cursive;
  font-weight: 700;
  font-size: 2.4rem;
  color: var(--vino);
  margin: 2px 0 4px;
  line-height: 1;
}

@media (min-width: 900px) {
  .container.container-pedido { max-width: 980px; }
  .pedido-flujo { padding-bottom: 0; }
  .pedido-columnas {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 32px;
    align-items: start;
  }
  .pedido-resumen { display: block; }
  .pedido-ticket {
    position: sticky;
    top: 20px;
    background: #fff;
    border: 1px solid #efdfe4;
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
  }
  .pedido-ticket::before {
    content: "";
    display: block;
    height: 8px;
    margin: -18px -18px 12px;
    border-radius: 16px 16px 0 0;
    background-color: var(--rosa-oscuro);
    background-image: radial-gradient(circle at 8px 10px, var(--crema) 5px, transparent 6px);
    background-size: 16px 16px;
    background-repeat: repeat-x;
  }
  .pedido-barra-inferior {
    position: sticky;
    left: auto; right: auto; bottom: 16px;
    width: 100%;
    margin-top: 20px;
  }
  /* En escritorio la barra es ancha y sí caben total + botón en una fila. */
  .pedido-barra--enviar { flex-wrap: nowrap; }
  .pedido-barra--enviar .pedido-barra-info span { display: inline; }
  .pedido-barra--enviar .pedido-barra-btn--enviar { order: 0; flex: 0 0 auto; }
  .pedido-flujo--confirmar { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .paso-panel--activo,
  .pedido-barra-inferior,
  .bloque-regalo.visible .bloque-regalo__mono { animation: none !important; }
  .bloque-regalo__mono { opacity: 1; transform: none; }
}

.btn-whatsapp {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #167e3d, #0d4f26);
  box-shadow: 0 8px 20px rgba(22,126,61,0.4);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  animation: respirar-boton 3.6s ease-in-out infinite;
}
.btn-whatsapp::before {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.5), transparent);
  transform: skewX(-20deg);
  animation: brillo-boton 3.6s ease-in-out infinite;
}
@media (hover: hover) {
  .btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(37,211,102,0.5); }
}
.btn-whatsapp:active { transform: translateY(0) scale(0.98); }

/* ================= Franja de confianza (Inicio) ================= */
.franja-confianza {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 auto 28px;
  padding: 0 16px;
}
.confianza-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto);
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (hover: hover) {
  .confianza-item:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(107,33,64,0.14); }
}
.confianza-item span { font-size: 1.4rem; display: flex; color: var(--rosa-oscuro); }
.confianza-item span svg { width: 24px; height: 24px; }

/* ================= Prueba social (calificación, favorito) ================= */
.insignia-calificacion {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  margin: 10px 0 18px;
  cursor: pointer;
}
.insignia-calificacion .estrellas { color: var(--dorado); font-size: 0.85rem; letter-spacing: 1px; }
.texto-ayuda-clara { font-weight: 400; opacity: 0.85; font-size: 0.8rem; }

.btn-compartir-postre {
  position: absolute;
  top: 8px; left: 8px;
  z-index: 2;
  width: 44px; height: 44px;
  min-height: 44px; min-width: 44px;
  border-radius: 50%;
  border: none;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.85);
  color: var(--rosa-boton);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: transform 0.2s var(--ease-suave), background 0.2s var(--ease-suave);
}
.btn-compartir-postre:hover { background: #fff; transform: scale(1.1); }
.btn-compartir-postre:active { transform: scale(0.92); }
.badge-favorito {
  position: absolute;
  top: 12px; right: 12px;
  background: linear-gradient(120deg, #ff7b54, #d9384e);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  z-index: 2;
}

.prime-contador {
  color: var(--dorado);
  font-size: 0.88rem;
  font-weight: 600;
  margin-top: 8px !important;
}

/* ================= Estado de carga (shimmer) ================= */
.upsell-modal { text-align: center; }
.upsell-modal h3 { color: var(--vino); margin: 10px 0; }

.cargando-shimmer {
  border-radius: var(--radio);
  background: linear-gradient(90deg, var(--rosa-suave) 25%, #fff 50%, var(--rosa-suave) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  height: 120px;
  margin-bottom: 16px;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .cargando-shimmer, .sk-card > * { animation: none !important; } }

/* Skeleton con la forma real de una tarjeta de postre (foto + 2 líneas) */
.sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sk-card {
  border-radius: var(--radio);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 2px rgba(107,33,64,0.05), 0 8px 24px rgba(107,33,64,0.07);
}
.sk-card .sk-foto { aspect-ratio: 4/3; }
.sk-card .sk-linea { height: 12px; border-radius: 6px; margin: 12px 14px; }
.sk-card .sk-linea.corta { width: 45%; }
.sk-card > * {
  background: linear-gradient(90deg, var(--rosa-suave) 25%, #fff 50%, var(--rosa-suave) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@media (min-width: 560px) { .sk-grid { grid-template-columns: repeat(3, 1fr); } }

/* ================= Galería de eventos y clientes felices ================= */
.galeria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 10px;
}
.galeria-item {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--rosa-suave);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.galeria-item img, .galeria-item video { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform 0.5s var(--ease-suave); }
@media (hover: hover) {
  .galeria-item:hover { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(107,33,64,0.18); }
  .galeria-item:hover img, .galeria-item:hover video { transform: scale(1.08); }
}
.galeria-item.tocada { transform: translateY(-4px); box-shadow: 0 14px 28px rgba(107,33,64,0.18); }
.galeria-item.tocada img, .galeria-item.tocada video { transform: scale(1.08); }
.galeria-titulo { font-size: 0.78rem; color: var(--texto-suave); padding: 6px 8px; margin: 0; }
.galeria-item { cursor: pointer; }
.galeria-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  padding-left: 3px;
  pointer-events: none;
}

/* ================= Lightbox — fotos/videos de la galería en grande ================= */
.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,8,14,0.92);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  overscroll-behavior: contain;
  transition: opacity 0.3s var(--ease-suave);
}
.lightbox-overlay.visible { opacity: 1; }
.lightbox-contenido {
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  transform: scale(0.96);
  transition: transform 0.3s var(--ease-suave);
}
.lightbox-overlay.visible .lightbox-contenido { transform: scale(1); }
.lightbox-contenido img, .lightbox-contenido video {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  display: block;
  margin: 0 auto;
}
.lightbox-titulo { color: #fff; margin-top: 14px; font-size: 0.95rem; }
.lightbox-cerrar {
  position: fixed;
  top: 16px; right: 16px;
  width: 48px; height: 48px;
  min-height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 1.3rem;
  z-index: 901;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease;
}
.lightbox-cerrar:hover { background: rgba(255,255,255,0.28); }
.lightbox-cerrar:active { transform: scale(0.9); }

.galeria-grid-admin { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.galeria-item-admin { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 1/1; background: var(--rosa-suave); }
.galeria-item-admin img, .galeria-item-admin video { width: 100%; height: 100%; object-fit: cover; }
.galeria-item-admin button { position: absolute; bottom: 4px; right: 4px; min-height: 32px; min-width: 32px; padding: 4px; font-size: 0.8rem; background: rgba(255,255,255,0.9); }

/* ==========================================================================
   ESCRITORIO — la app está diseñada como experiencia de celular (barra
   inferior, topbar pegajosa, CTA flotante, todo en una sola columna). En
   pantallas anchas eso se veía chico y con espacio vacío a los lados.
   Aquí se usa un lienzo ancho de verdad (1080px) y las listas de postres,
   recetas y galería pasan a ser cuadrículas de varias columnas — los
   formularios (Pedir, Prime, Reseña nueva) se quedan angostos y centrados,
   como cualquier checkout, para que sigan siendo fáciles de leer.
   ========================================================================== */
@media (min-width: 860px) {
  body {
    /* Textura de puntos MUY tenue en toda la página (como la del hero) para
       que los márgenes anchos del escritorio no se vean como vacío plano,
       más la franja rosa de arriba de siempre. */
    background:
      radial-gradient(rgba(201,103,138,0.055) 1px, transparent 1.5px) 0 0 / 24px 24px fixed,
      linear-gradient(180deg, #f4dde5, #ecd3dc 420px, var(--crema) 420px);
  }
  /* El contenido central va sobre crema sólida y con una sombra suave: se
     "levanta" del fondo texturado y los lados quedan como un marco, no un hueco. */
  #contenido {
    background: var(--crema);
    box-shadow: 0 0 70px rgba(107,33,64,0.07);
  }
  .footer-global { padding-bottom: 18px; } /* en escritorio el texto queda lejos del botón flotante, no hace falta el espacio extra */
  /* .topbar y .header van en flujo normal (sticky/estático): con
     max-width + margin:auto ya quedan centrados. .nav-inferior es
     "fixed" con left:0/right:0 heredado de móvil, así que el mismo
     max-width + margin:auto también lo centra — sin necesitar el
     truco de left:50%+transform (que fue justo lo que lo descuadraba). */
  .topbar, .nav-inferior, #contenido, .header {
    max-width: min(95vw, 1420px);   /* antes 1080px fijo: en monitores grandes dejaba mucho vacío a los lados */
    margin-left: auto;
    margin-right: auto;
  }

  /* La app estaba pensada para una barra de pestañas pegada abajo del
     celular. En escritorio eso dejaba la topbar con el logo y los
     botones tirados cada uno en una esquina, con un vacío enorme en
     medio — de ahí que se viera "mal centrada". Aquí la barra de
     pestañas sube justo debajo del logo, como el menú de un sitio
     de verdad, y deja de flotar al final de la página. */
  body { padding-bottom: 48px; }
  #contenido { margin-top: 100px; }
  .topbar { padding: 20px 36px; z-index: 41; }
  .logo-img { width: 52px; height: 52px; }
  .nav-inferior {
    position: fixed;
    top: 92px;
    bottom: auto;
    justify-content: center;
    gap: 6px;
    border-radius: 0;
    box-shadow: 0 4px 14px rgba(107,33,64,0.08);
    z-index: 40;
  }
  .nav-inferior a { flex: 0 1 130px; min-width: 0; }
  .cta-flotante { display: none; }
  .nav-scroll-hint { display: none; }
  .topbar .logo, .header .logo { font-size: 1.6rem; }
  .nav-inferior a { font-size: 0.82rem; padding: 12px 6px; }
  .nav-inferior .icono { font-size: 1.5rem; }
  .nav-inferior .icono svg { width: 24px; height: 24px; }
  .nav-inferior a.activo { background: var(--rosa-suave); border-radius: 12px; }

  /* Formularios y listas de lectura: se quedan angostos y centrados
     dentro del lienzo ancho, como cualquier checkout de escritorio. */
  .container { max-width: 640px; }

  /* Postres, recetas y galería: sí usan el ancho completo, en cuadrícula. */
  .container-ancho { max-width: min(95vw, 1420px); }
  .franja-confianza { grid-template-columns: repeat(4, 1fr); padding: 0; }
  .card-angosta { max-width: 560px; margin-left: auto; margin-right: auto; }

  .grid-postres, .grid-articulos {
    display: grid;
    gap: 24px;
    align-items: start;
  }
  /* Hasta 3 columnas, cada tarjeta con un ancho tope y las columnas vacías
     colapsan (auto-fit): así con 1, 2, 4 o 5 postres las tarjetas no se
     estiran ni dejan huecos raros — siempre quedan parejas y centradas. */
  .grid-postres {
    grid-template-columns: repeat(auto-fit, minmax(280px, 360px));
    justify-content: center;
    max-width: 1128px;   /* ~3 × 360 + 2 × gap */
    margin-inline: auto;
  }
  .grid-postres .postre-card-v2 { margin-bottom: 0; }
  .grid-articulos { grid-template-columns: repeat(2, 1fr); }
  .grid-articulos .articulo-card { margin-bottom: 0; }
  .grid-articulos-preview { grid-template-columns: repeat(2, 1fr); }
  /* Reseñas: se queda como carrusel deslizable también en escritorio,
     solo que con tarjetas más anchas. */
  .resena-card { flex-basis: 340px; max-width: 360px; }

  .destacados-scroll {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 280px));
    justify-content: center;
    gap: 20px;
    overflow: visible;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
  }
  .destacados-scroll .destacado-mini { width: 100%; }
  .destacado-mini .nombre { font-size: 0.98rem; padding: 12px 10px 2px; }
  .destacado-mini .precio { font-size: 0.85rem; padding-bottom: 12px; }

  .galeria-grid { grid-template-columns: repeat(4, 1fr); }
  .embeds-grid { flex-direction: row; flex-wrap: wrap; justify-content: center; }

  /* ---- Bloques de texto de la portada: se leen mal a 1300px de ancho.
     Se limitan a una medida cómoda y se centran. ---- */
  .historia-card { max-width: 720px; margin-left: auto; margin-right: auto; }
  .faq-lista { max-width: 760px; margin-left: auto; margin-right: auto; }

  /* ---- Tarjeta de la fundadora: en escritorio va a 2 columnas
     (foto | frase) dentro de un ancho contenido, en vez de estirada y vacía. ---- */
  .fundadora-card {
    display: flex;
    align-items: center;
    gap: 34px;
    text-align: left;
    max-width: 760px;
    margin: 0 auto 10px;
    padding: 24px 28px;
  }
  .fundadora-foto-wrap { flex-shrink: 0; margin: 0; }
  .fundadora-texto { flex: 1; min-width: 0; }
  .fundadora-frase { max-width: none; margin: 0 0 10px; font-size: 1.18rem; }
  .fundadora-nombre { text-align: left; }

  /* Hero: con más ancho disponible, el contenido central también crece.
     Más alto en escritorio: a 62vh quedaba como una franja fina y el video
     (vertical) se veía en una tira. */
  .hero { border-radius: 0 0 32px 32px; padding: 76px 24px 96px; min-height: clamp(520px, 72vh, 760px); }
  .hero-contenido { max-width: 620px; }
  .hero .subtitulo { font-size: 1.6rem; }
  .logo-img-hero { width: 180px; height: 180px; }

  /* El admin tiene 10 pestañas (el catálogo público solo 8) — con el
     mismo ancho de 1080 les sobra demasiado espacio a cada lado, así que
     usa un lienzo más angosto y propio. */
  .pagina-admin .header,
  .pagina-admin #contenido,
  .pagina-admin .nav-inferior {
    max-width: 820px;
  }
  .pagina-admin #contenido { margin-top: 0; }
  .pagina-admin .nav-inferior {
    width: 820px;
    justify-content: space-around;
    gap: 0;
    position: fixed;
    top: auto;
    bottom: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -6px 24px rgba(107,33,64,0.14);
  }
  .pagina-admin .nav-inferior a { flex: 1 1 0; min-width: 0; font-size: 0.72rem; padding: 8px 2px; }
  .pagina-admin { padding-bottom: 90px; }

  /* Pie de página del catálogo: de columna centrada a una cuadrícula
     de verdad, como el pie de cualquier sitio profesional. */
  .footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
    gap: 32px;
    text-align: left;
    padding: 8px 12px;
  }
  .footer-marca { text-align: left; }
  .logo-img-footer { margin: 0 0 10px; }
  .footer-marca .footer-tagline { margin: 0; }
  .footer-col .footer-whatsapp-link { margin-bottom: 10px; }
  .footer-global .siguenos-fila { justify-content: flex-start; }
}

/* En monitores anchos el menú puede llegar a 4 columnas (menos hueco a los lados). */
@media (min-width: 1520px) {
  .grid-postres { max-width: 1520px; }
}

/* ==========================================================================
   ACCESIBILIDAD — animaciones continuas apagadas para quien tenga activada
   "reducir movimiento" en su sistema (mareo, vestibular, etc). Este bloque
   va al FINAL a propósito: así siempre gana en especificidad empatada,
   sin importar dónde se defina cada animación arriba en el archivo.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero .subtitulo::after { animation: none; }
  .hero-eyebrow { animation: none; opacity: 1; }
  /* Se conserva un fundido suave (sin movimiento) para que el título no
     aparezca de golpe, pero se quita el desplazamiento y el desenfoque. */
  .hero .subtitulo { animation: hero-titulo-aparece 0.4s ease both; }
  .accion-postre .btn-lo-quiero,
  .cta-flotante,
  .hero-desliza,
  .btn-primary,
  .btn-whatsapp,
  .badge-precio-circular,
  .fab-siguenos,
  .siguenos-link,
  .nav-scroll-hint-der {
    animation: none;
  }
  .accion-postre .btn-lo-quiero::before,
  .btn-primary::before,
  .btn-whatsapp::before,
  .badge-precio-circular::after {
    animation: none;
    display: none;
  }
  .hero-particulas { display: none; }
  .btn-pausa-hero-video { display: none; }
  .logo-animado { animation: none; }
  .fundadora-foto { animation: none; }
  .destello { display: none; }
  .reveal { transition: none !important; transition-delay: 0s !important; }
  .modal-fondo, .modal,
  .modal-fondo.cerrando, .modal-fondo.cerrando .modal { animation: none !important; }
  .lightbox-overlay, .lightbox-contenido { transition: none !important; }
  .destacado-mini, .destacado-mini .foto img,
  .postre-card-v2, .postre-foto-v2 img,
  .galeria-item, .galeria-item img, .galeria-item video {
    transition: none !important;
  }
}

/* ==========================================================================
   TIPOGRAFIA DORADA — caligrafia con degradado de oro liquido, para los
   titulos que tienen que enamorar (portada y encabezados de seccion).
   ========================================================================== */
.script-dorado {
  font-family: 'Dancing Script', cursive;   /* Pinyon Script se veia preciosa pero mucha gente no la lee */
  color: #6d4f17;                     /* respaldo si el navegador no recorta el degradado */
  /* Degradado oro más oscuro: cada tono llega a ~4:1 de contraste sobre la
     crema del fondo (antes los tonos claros #e6c98d/#dcbd80 quedaban casi
     invisibles ~1.6:1). Sigue leyéndose como oro con brillo. */
  background: linear-gradient(100deg, #a97f37 0%, #7c5a1f 26%, #5f4614 52%, #986f28 74%, #6d4f17 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 200% auto;
  animation: brillo-oro 6s ease-in-out infinite;
  padding: 0 0.08em;                  /* evita que se corten las colas de la letra */
}
@keyframes brillo-oro {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}
.eyebrow-dorado {
  font-family: 'Poppins', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #6d4f17;
  display: block;
}

/* ==========================================================================
   ICONOS ILUSTRADOS ANIMADOS — cada uno con su propio gesto. Todo con
   transform/opacity (los mueve la tarjeta gráfica, no traban el celular)
   y todo se apaga solo si el visitante pidió menos movimiento.
   ========================================================================== */
.ic { overflow: visible; }
.nav-inferior .icono { display: block; }
.nav-inferior .icono svg { width: 26px; height: 26px; }
.confianza-item span svg { width: 26px; height: 26px; }

@keyframes ic-vapor    { 0% { opacity: 0; transform: translateY(0) scaleX(1); } 25% { opacity: .8; } 100% { opacity: 0; transform: translateY(-7px) scaleX(1.5); } }
@keyframes ic-titila   { 0%, 100% { opacity: .3; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes ic-chispa   { 0%, 100% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1); } }
@keyframes ic-late     { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }
@keyframes ic-flota    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ic-girito   { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes ic-bate     { 0%, 100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes ic-rebota   { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-2px) scale(1.06); } }
@keyframes ic-rueda    { 0%, 100% { transform: translateX(-1.8px); } 50% { transform: translateX(1.8px); } }
@keyframes ic-moneda   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes ic-brillo   { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.ic-vapor     { animation: ic-vapor 2.4s ease-out infinite; }
.ic-titila    { animation: ic-titila 1.9s ease-in-out infinite; }
.ic-chispa    { animation: ic-chispa 2s ease-in-out infinite; }
.ic-late      { animation: ic-late 1.7s ease-in-out infinite; transform-origin: 50% 60%; transform-box: fill-box; }
.ic-flota     { animation: ic-flota 2.8s ease-in-out infinite; }
.ic-crema     { animation: ic-flota 2.8s ease-in-out infinite; }
.ic-girito    { animation: ic-girito 3.2s ease-in-out infinite; transform-origin: 50% 55%; transform-box: fill-box; }
.ic-bate      { animation: ic-bate 2.6s ease-in-out infinite; transform-origin: 50% 95%; transform-box: fill-box; }
.ic-rebota    { animation: ic-rebota 2.4s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.ic-rueda     { animation: ic-rueda 3s ease-in-out infinite; }
.ic-moneda    { animation: ic-moneda 2.2s ease-in-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
.ic-brillo    { animation: ic-brillo 3s ease-in-out infinite; }
.ic-marcador  { animation: ic-flota 3.4s ease-in-out infinite; }
.ic-d2 { animation-delay: .7s; }
.ic-d3 { animation-delay: 1.2s; }

/* La pestaña activa hace un brinco corto al entrar */
.nav-inferior a.activo .icono { animation: brinco-icono .5s var(--ease-suave); }
@keyframes brinco-icono {
  0% { transform: translateY(0) scale(1); }
  38% { transform: translateY(-5px) scale(1.16); }
  100% { transform: translateY(0) scale(1); }
}
.nav-inferior a .icono { transition: transform .3s var(--ease-suave); }
@media (hover: hover) { .nav-inferior a:hover .icono { transform: translateY(-2px) scale(1.08); } }

/* Accesibilidad: si el visitante pidió menos movimiento, todo queda quieto */
@media (prefers-reduced-motion: reduce) {
  .ic *, .ic { animation: none !important; }
  .nav-inferior a.activo .icono, .nav-inferior a .icono { animation: none !important; transition: none !important; }
  .script-dorado, .section-title .eyebrow { animation: entrada-subtitulo 0.9s cubic-bezier(.22,1,.36,1) both !important; }
  .hero .subtitulo { animation: hero-titulo-aparece 0.4s ease both !important; }
}

.franja-horario {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px;
  background: var(--rosa-suave);
  color: var(--vino);
  font-size: 0.82rem;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 12px;
  margin: 10px auto 4px;
  text-align: center;
}
.franja-horario-sep { opacity: 0.4; }

/* ================= Preguntas frecuentes ================= */
.faq-lista { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.faq-item {
  background: #fff;
  border: 1px solid #f1e3e6;
  border-radius: 14px;
  padding: 4px 16px;
}
.faq-item summary {
  padding: 14px 26px 14px 0;
  font-weight: 600;
  color: var(--vino);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--rosa-oscuro);
  transition: transform 0.25s var(--ease-suave);
}
.faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq-item p { margin: 0 0 14px; color: var(--texto-suave); font-size: 0.92rem; line-height: 1.55; }

/* Botón "Ver postres" sobre el video del hero: un poco más abajo y con
   vidrio esmerilado en vez de blanco sólido, para que no tape tanto el
   video de fondo. */
.btn-sobre-video {
  margin-top: 18px;
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Corazón flotante de redes: más chico, más discreto (semi-transparente)
   hasta que el dedo/mouse pasa por encima, y puede llegar a cualquier
   esquina sin quedar tapado por el menú de abajo. */
.fab-siguenos {
  width: 44px; height: 44px;
  min-height: 44px; min-width: 44px;
  font-size: 1.05rem;
  opacity: 0.62;
  backdrop-filter: blur(2px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-suave);
}
.fab-siguenos:hover, .fab-siguenos:active, .fab-siguenos-wrap.fab-arrastrando .fab-siguenos { opacity: 1; }

/* En escritorio: el postre flotante se ve un poco más y, al pasar el mouse,
   muestra una etiqueta "Redes sociales" (y el cursor de "agarrar" avisa que
   se puede mover a donde estorbe menos). */
@media (min-width: 900px) {
  .fab-siguenos { opacity: 0.82; }
  .fab-siguenos-wrap::after {
    content: "Redes sociales";
    position: absolute;
    left: calc(100% + 12px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
    white-space: nowrap;
    background: var(--vino);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s var(--ease-out);
    box-shadow: 0 6px 16px rgba(107,33,64,0.28);
  }
  .fab-siguenos-wrap.fab-a-la-derecha::after { left: auto; right: calc(100% + 12px); transform: translateY(-50%) translateX(6px); }
  .fab-siguenos-wrap:hover::after,
  .fab-siguenos-wrap:focus-within::after { opacity: 1; transform: translateY(-50%) translateX(0); }
  .fab-siguenos-wrap.abierto::after,
  .fab-siguenos-wrap.fab-arrastrando::after { opacity: 0; }
}

.firma-fundadora { font-size: 1.9rem; display: block; margin-bottom: 2px; }

/* ================= Estilo del título del Hero (elegible desde Admin) =================
   Fuente, color y tamaño se eligen en Admin -> Contenido. Cada regla lleva DOS
   selectores: `.hero .subtitulo.X` para el sitio (le gana en especificidad a la
   regla base del título, que si no dejaba todo en Playfair + blanco) y
   `.preview-hero-titulo .X` para la vista previa del panel. Un solo lugar. */

/* --- Fuente --- */
.hero .subtitulo.hero-fuente-serif,       .preview-hero-titulo .hero-fuente-serif       { font-family: 'Playfair Display', serif; font-weight: 700; }
.hero .subtitulo.hero-fuente-contraste,   .preview-hero-titulo .hero-fuente-contraste   { font-family: 'Cormorant Garamond', 'Playfair Display', serif; font-weight: 600; letter-spacing: 0.005em; }
.hero .subtitulo.hero-fuente-romana,      .preview-hero-titulo .hero-fuente-romana      { font-family: 'Cinzel', 'Playfair Display', serif; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero .subtitulo.hero-fuente-clasica,     .preview-hero-titulo .hero-fuente-clasica     { font-family: 'Marcellus', 'Playfair Display', serif; font-weight: 400; letter-spacing: 0.01em; }
.hero .subtitulo.hero-fuente-manuscrita,  .preview-hero-titulo .hero-fuente-manuscrita  { font-family: 'Dancing Script', cursive; font-weight: 700; }
.hero .subtitulo.hero-fuente-caligrafia,  .preview-hero-titulo .hero-fuente-caligrafia  { font-family: 'Pinyon Script', cursive; font-weight: 400; }
.hero .subtitulo.hero-fuente-moderna,     .preview-hero-titulo .hero-fuente-moderna     { font-family: 'Poppins', sans-serif; font-weight: 700; letter-spacing: -0.01em; }

/* Ajuste de escala propio de cada fuente (las de tipo "script" se ven chicas a
   igual tamaño). Lo consume el bloque de tamaño de abajo. */
.hero .subtitulo, .preview-hero-titulo #preview-hero-texto { --hero-fuente-escala: 1; }
.hero .subtitulo.hero-fuente-caligrafia, .preview-hero-titulo .hero-fuente-caligrafia { --hero-fuente-escala: 1.45; }
.hero .subtitulo.hero-fuente-manuscrita, .preview-hero-titulo .hero-fuente-manuscrita { --hero-fuente-escala: 1.24; }
.hero .subtitulo.hero-fuente-contraste,  .preview-hero-titulo .hero-fuente-contraste  { --hero-fuente-escala: 1.12; }
.hero .subtitulo.hero-fuente-romana,     .preview-hero-titulo .hero-fuente-romana     { --hero-fuente-escala: 0.84; }

/* --- Tamaño --- (clamp = responsive sin media queries; x el ajuste de la fuente) */
.hero .subtitulo.hero-tam-pequeno, .preview-hero-titulo .hero-tam-pequeno { font-size: calc(clamp(1.45rem, 4.6vw, 1.9rem)  * var(--hero-fuente-escala, 1)); }
.hero .subtitulo.hero-tam-mediano, .preview-hero-titulo .hero-tam-mediano { font-size: calc(clamp(1.8rem,  5.6vw, 2.5rem)  * var(--hero-fuente-escala, 1)); }
.hero .subtitulo.hero-tam-grande,  .preview-hero-titulo .hero-tam-grande  { font-size: calc(clamp(2.2rem,  7vw,   3.3rem)  * var(--hero-fuente-escala, 1)); }
.hero .subtitulo.hero-tam-xl,      .preview-hero-titulo .hero-tam-xl      { font-size: calc(clamp(2.6rem,  8.6vw, 4.1rem)  * var(--hero-fuente-escala, 1)); }

/* --- Color --- */
.hero .subtitulo.hero-color-blanco, .preview-hero-titulo .hero-color-blanco { color: #fff; -webkit-text-fill-color: currentColor; }
.hero .subtitulo.hero-color-crema,  .preview-hero-titulo .hero-color-crema  { color: #fdf3e3; -webkit-text-fill-color: currentColor; }
.hero .subtitulo.hero-color-dorado, .preview-hero-titulo .hero-color-dorado { color: #e7c579; -webkit-text-fill-color: currentColor; }
.hero .subtitulo.hero-color-rosa,   .preview-hero-titulo .hero-color-rosa   { color: #f4b9cd; -webkit-text-fill-color: currentColor; }
/* "Dorado metalizado": degradado vertical con rango real de luz para que lea
   como lámina de oro, SIN el brillo animado de antes (se veía barato). */
.hero .subtitulo.hero-color-dorado-brillo, .preview-hero-titulo .hero-color-dorado-brillo {
  color: #efd9a4;
  background: linear-gradient(178deg, #fdf2d2 0%, #edcd8b 28%, #caa252 52%, #f3dda6 66%, #d3ac5c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 0.06em;
  /* Con el texto "recortado" la text-shadow normal se ve como un fantasma
     gris; para legibilidad sobre el video se usa drop-shadow. */
  text-shadow: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5)) drop-shadow(0 3px 10px rgba(0,0,0,0.4));
}

.preview-hero-titulo {
  background: linear-gradient(160deg, #6b2140, #3a1626);
  border-radius: 14px;
  padding: 30px 16px;
  text-align: center;
  font-size: 1.6rem;
  line-height: 1.3;
}

/* ================= Decoración lateral (opción 1, escritorio grande) =================
   Postres ilustrados flotando en los márgenes vacíos — solo aparecen
   cuando de verdad sobra espacio (monitores anchos), position:fixed para
   que acompañen sin importar el scroll, y se apagan solos con "reducir
   movimiento". */
.decor-lateral { display: none; }
/* Antes en 1500px (solo monitores enormes). Bajado a 1180px para que los
   márgenes de un portátil normal también luzcan las ilustraciones
   animadas de repostería. */
@media (min-width: 1180px) {
  .decor-lateral { display: block; }
  .decor-item {
    position: fixed;
    z-index: 1;
    pointer-events: none;
    animation: flota-decor 7s ease-in-out infinite;
    /* Sin `will-change`: promovía ~30 capas fijas en la GPU a la vez y hacía
       que el escritorio (con el video del hero encima) fuera a ~17fps. El
       navegador ya promueve solo lo que anima con transform. */
  }
  .decor-item svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 4px 8px rgba(58,20,36,0.14)); }
  .decor-item:nth-of-type(3n+1) { animation-delay: 0s; }
  .decor-item:nth-of-type(3n+2) { animation-delay: 1.8s; }
  .decor-item:nth-of-type(3n)   { animation-delay: 3.4s; }
  .decor-item:nth-of-type(odd)  { animation-duration: 8.6s; }
  .decor-item:nth-of-type(4n)   { animation-duration: 6s; }

  /* Batidoras estilo KitchenAid: vaivén lento del cabezal en vez del flote. */
  .decor-mixer {
    animation: mecer-batidora 5s cubic-bezier(0.37, 0, 0.63, 1) infinite;
    transform-origin: 72% 82%;
    filter: drop-shadow(0 6px 12px rgba(58,20,36,0.16));
  }
  .decor-mixer-flip { transform: scaleX(-1); animation-name: mecer-batidora-flip; }

  /* --- Gestos de cada ilustración (mismos que en la galería que eligió
     Catalina). Todo transform/opacity, se compone con el flote de arriba. --- */
  .dc-swirl  { animation: dc-swirl 2.8s ease-in-out infinite; transform-origin: 50% 60%; transform-box: fill-box; }
  .dc-rise   { animation: dc-rise 2.4s ease-in-out infinite; }
  .dc-steam  { animation: dc-steam 2.8s ease-out infinite; transform-origin: 50% 100%; transform-box: fill-box; }
  .dc-spin   { animation: dc-spin 4.2s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  .dc-beat   { animation: dc-beat 1.15s ease-in-out infinite; transform-origin: 50% 12%; transform-box: fill-box; }
  .dc-sway   { animation: dc-sway 3s ease-in-out infinite; transform-origin: 50% 8%; transform-box: fill-box; }
  .dc-tilt   { animation: dc-tilt 3.4s ease-in-out infinite; transform-origin: 50% 90%; transform-box: fill-box; }
  .dc-pulse  { animation: dc-pulse 2.4s ease-in-out infinite; transform-origin: 50% 55%; transform-box: fill-box; }
  .dc-scoop  { animation: dc-scoop 2.9s ease-in-out infinite; transform-origin: 20% 80%; transform-box: fill-box; }
  .dc-shine  { animation: dc-shine 3.4s ease-in-out infinite; }
  .dc-twinkle{ animation: dc-twinkle 2.1s ease-in-out infinite; }
  .dc-twinkle.d2 { animation-delay: .6s; }
  .dc-drift  { animation: dc-drift 4s linear infinite; }
  .dc-drift.d2 { animation-delay: 1.3s; }
  .dc-drift.d3 { animation-delay: 2.6s; }

  /* Destellos fucsia entre los postres — el mismo titileo del hero */
  .destello-lateral {
    position: fixed;
    z-index: 1;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ec1f8f;
    box-shadow: 0 0 10px 3px rgba(236,31,143,0.65);
    pointer-events: none;
    animation: titila-lateral 1.9s ease-in-out infinite;
  }
}
/* En portátiles normales (1180–1499px) se muestra ~la mitad de la decoración:
   menos capas animadas a la vez = el video del hero y el scroll van fluidos.
   El set completo se ve solo en monitores grandes. */
@media (min-width: 1180px) and (max-width: 1499px) {
  .decor-lateral > span:nth-of-type(even) { display: none; }
}
@keyframes flota-decor {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-18px) rotate(6deg); }
}
@keyframes mecer-batidora {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-11px) rotate(2.5deg); }
}
@keyframes mecer-batidora-flip {
  0%, 100% { transform: scaleX(-1) translateY(0) rotate(-4deg); }
  50% { transform: scaleX(-1) translateY(-11px) rotate(2.5deg); }
}
@keyframes titila-lateral {
  0%, 100% { opacity: 0.15; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.3); }
}
@keyframes dc-swirl  { 0%,100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-1.5px); } }
@keyframes dc-rise   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dc-steam  { 0% { opacity: 0; transform: translateY(2px) scaleX(1); } 30% { opacity: .7; } 100% { opacity: 0; transform: translateY(-9px) scaleX(1.5); } }
@keyframes dc-spin   { to { transform: rotate(360deg); } }
@keyframes dc-beat   { 0%,100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
@keyframes dc-sway   { 0%,100% { transform: rotate(-11deg); } 50% { transform: rotate(11deg); } }
@keyframes dc-tilt   { 0%,100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes dc-pulse  { 0%,100% { transform: scale(1); } 45% { transform: scale(1.2); } }
@keyframes dc-scoop  { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } }
@keyframes dc-shine  { 0% { transform: translateX(-140%); } 55%,100% { transform: translateX(240%); } }
@keyframes dc-twinkle{ 0%,100% { opacity: .25; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1); } }
@keyframes dc-drift  { 0% { opacity: 0; transform: translateY(6px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-14px); } }
@media (prefers-reduced-motion: reduce) {
  .decor-lateral *, .destello-lateral { animation: none !important; }
  .decor-mixer-flip { transform: scaleX(-1); }
}

/* ================= Badge del carrito (rebota al agregar/quitar) ================= */
.icono-con-badge { position: relative; }
.carrito-badge {
  position: absolute;
  top: -4px; right: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--rosa-boton);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.carrito-badge.visible { opacity: 1; transform: scale(1); }
.carrito-badge.carrito-badge-rebote { animation: rebote-carrito 0.45s var(--ease-suave); }
@keyframes rebote-carrito {
  0% { transform: scale(1); }
  35% { transform: scale(1.55); }
  65% { transform: scale(0.9); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .carrito-badge.carrito-badge-rebote { animation: none; }
}

/* ================= Animación de los títulos de sección al entrar =================
   Tres estilos que rotan: máquina de escribir, letra-por-letra y aparición lenta. */
.letra-titulo { display: inline-block; opacity: 0; }

/* Estilo 1 — cada letra sube y aparece */
.titulo-letras .letra-titulo {
  transform: translateY(10px);
  animation: entra-letra 0.42s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes entra-letra { to { opacity: 1; transform: translateY(0); } }

/* Estilo 0 — máquina de escribir: la letra aparece rápida, con cursor.
   (Sin `steps(1)` + duración de 0.01s: esa combinación a veces dejaba una
   letra suelta con opacity:0 pegada — "se borraba" una letra del título.) */
.titulo-tipeo .letra-titulo { animation: tipeo-letra 0.07s ease forwards; }
@keyframes tipeo-letra { from { opacity: 0; } to { opacity: 1; } }
/* Red de seguridad: pase lo que pase con las animaciones, al terminar todas
   las letras quedan visibles. */
.titulo-letras.anim-fin .letra-titulo,
.titulo-tipeo.anim-fin .letra-titulo { opacity: 1 !important; animation: none !important; }
.titulo-caret {
  display: inline-block;
  width: 0.06em;
  height: 1.05em;
  margin-left: 0.04em;
  vertical-align: -0.14em;
  background: currentColor;
  border-radius: 1px;
  animation: titulo-caret-parpadeo 0.7s steps(1) infinite;
}
@keyframes titulo-caret-parpadeo { 50% { opacity: 0; } }

/* Estilo 2 — el título entero aparece lento, con un desenfoque que se aclara */
.titulo-aparece {
  opacity: 0;
  transform: translateY(12px);
  filter: blur(5px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out), filter 0.75s var(--ease-out);
}
.titulo-aparece.titulo-aparece--go { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .letra-titulo { opacity: 1 !important; transform: none !important; animation: none !important; }
  .titulo-caret { display: none; }
  .titulo-aparece { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}