/* ==========================================================================
   PRODUCTOS MILHOJALDRES · Bogotá
   Sistema visual: Editorial Luxury cálido
   Paleta derivada del logo oficial:
   #BD3377 (PANTONE · magenta de marca unificado) · #F9E5DC (crema logo)
   #422312 (cacao) · #F3BAD6 (rosa claro)
   ========================================================================== */

:root {
  --crema: #FBF6EE;            /* lienzo principal, papel horneado */
  --crema-2: #F5EBDC;          /* secciones alternas */
  --crema-3: #EFE2CE;          /* hairlines y fondos suaves */
  --magenta: #BD3377;          /* PANTONE · acento único de marca */
  --magenta-deep: #93285D;     /* hover / profundidad */
  --rodamina: #BD3377;         /* mismo PANTONE · escenario de marca */
  --rodamina-2: #9D2A63;       /* tarjetas sobre rodamina */
  --cacao: #2E1B0F;            /* tinta principal (del cacao del logo) */
  --tinta-suave: #6E5B4A;      /* texto secundario */
  --rosa: #F3BAD6;             /* detalle, tags sobre oscuro */
  --blanco: #FFFDF9;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Plus Jakarta Sans', -apple-system, sans-serif;

  --ease-suave: cubic-bezier(0.32, 0.72, 0, 1);
  --radio-xl: 2rem;
  --radio-int: calc(2rem - 0.4rem);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--crema);
  color: var(--cacao);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Grano sutil de papel: fijo, sin repaints en scroll */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

.contenedor { width: min(1160px, 100% - 2.5rem); margin-inline: auto; }

/* ---------- Tipografía editorial ---------- */
h1, h2, h3, .serif {
  font-family: var(--serif);
  font-weight: 480;
  letter-spacing: -0.015em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 em, h2 em { font-style: italic; color: var(--magenta); font-weight: 420; }

.cejilla {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(189, 51, 119, 0.28);
  color: var(--magenta);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 1.4rem;
  background: rgba(251, 246, 238, 0.6);
}
.cejilla::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--magenta);
}

/* ---------- Animaciones de entrada ---------- */
.js .revelar {
  opacity: 0;
  transform: translateY(2.6rem);
  filter: blur(6px);
  transition: opacity 0.9s var(--ease-suave), transform 0.9s var(--ease-suave), filter 0.9s var(--ease-suave);
  transition-delay: var(--retraso, 0s);
}
.js .revelar.visible { opacity: 1; transform: translateY(0); filter: blur(0); }

@media (prefers-reduced-motion: reduce) {
  .js .revelar { opacity: 1; transform: none; filter: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   NAVEGACIÓN · isla flotante
   ========================================================================== */
.nav {
  position: fixed;
  top: 0.6rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  width: max-content;
  max-width: calc(100% - 1.4rem);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 0.28rem 0.34rem 0.28rem 0.9rem;
  border-radius: 999px;
  background: rgba(251, 246, 238, 0.78);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(66, 35, 18, 0.09);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 12px 40px -18px rgba(66, 35, 18, 0.25);
  transition: box-shadow 0.7s var(--ease-suave), background 0.7s var(--ease-suave),
              padding 0.5s var(--ease-suave), top 0.5s var(--ease-suave);
}
.nav.con-scroll {
  top: 0.4rem;
  padding: 0.2rem 0.28rem 0.2rem 0.8rem;
  background: rgba(251, 246, 238, 0.94);
  box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 14px 40px -18px rgba(66, 35, 18, 0.35);
}
.nav.con-scroll .nav-logo img { height: 22px; }

.nav-logo img { height: 26px; width: auto; transition: height 0.5s var(--ease-suave); }

.nav-links { display: flex; gap: 1.05rem; }
.nav-links a {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--tinta-suave);
  position: relative;
  transition: color 0.5s var(--ease-suave);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -5px;
  width: 100%; height: 1.5px;
  background: var(--magenta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--ease-suave);
}
.nav-links a:hover { color: var(--cacao); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Botón isla: patrón botón-dentro-de-botón */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  border-radius: 999px;
  padding: 0.62rem 0.62rem 0.62rem 1.35rem;
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform 0.6s var(--ease-suave), background 0.6s var(--ease-suave), box-shadow 0.6s var(--ease-suave);
}
.btn:active { transform: scale(0.98); }
.btn .orbe {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: transform 0.6s var(--ease-suave);
}
.btn:hover .orbe { transform: translate(3px, -1px) scale(1.06); }
.btn .orbe svg { width: 0.95rem; height: 0.95rem; }

.btn-magenta { background: var(--magenta); color: var(--blanco); box-shadow: 0 14px 30px -14px rgba(189, 51, 119, 0.65); }
.btn-magenta:hover { background: var(--magenta-deep); }
.btn-magenta .orbe { background: rgba(255, 255, 255, 0.18); }

.btn-fantasma { background: transparent; color: var(--cacao); border: 1px solid rgba(66, 35, 18, 0.22); }
.btn-fantasma:hover { border-color: rgba(66, 35, 18, 0.45); }
.btn-fantasma .orbe { background: rgba(66, 35, 18, 0.07); }

.btn-crema { background: var(--crema); color: var(--cacao); }
.btn-crema:hover { background: var(--blanco); }
.btn-crema .orbe { background: rgba(46, 27, 15, 0.1); }

.nav .btn { padding: 0.36rem 0.4rem 0.36rem 1rem; font-size: 0.74rem; }
.nav .btn .orbe { width: 1.5rem; height: 1.5rem; }
.nav .btn .orbe svg { width: 0.8rem; height: 0.8rem; }

/* Hamburguesa que muta a X */
.nav-burger {
  display: none;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%;
  border: 1px solid rgba(66, 35, 18, 0.15);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex: none;
}
.nav-burger span {
  position: absolute;
  left: 50%; top: 50%;
  width: 1.05rem; height: 1.6px;
  background: var(--cacao);
  transition: transform 0.55s var(--ease-suave);
}
.nav-burger span:nth-child(1) { transform: translate(-50%, calc(-50% - 3.5px)); }
.nav-burger span:nth-child(2) { transform: translate(-50%, calc(-50% + 3.5px)); }
.nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, -50%) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg); }

/* Menú móvil expandido */
.menu-movil {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: rgba(251, 246, 238, 0.9);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-suave);
}
.menu-movil.abierto { opacity: 1; pointer-events: auto; }
.menu-movil a {
  font-family: var(--serif);
  font-size: clamp(2rem, 8vw, 2.8rem);
  padding: 0.55rem 0;
  color: var(--cacao);
  opacity: 0;
  transform: translateY(1.2rem);
  transition: opacity 0.6s var(--ease-suave), transform 0.6s var(--ease-suave);
}
.menu-movil.abierto a { opacity: 1; transform: translateY(0); }
.menu-movil.abierto a:nth-child(1) { transition-delay: 0.08s; }
.menu-movil.abierto a:nth-child(2) { transition-delay: 0.14s; }
.menu-movil.abierto a:nth-child(3) { transition-delay: 0.2s; }
.menu-movil.abierto a:nth-child(4) { transition-delay: 0.26s; }
.menu-movil.abierto a:nth-child(5) { transition-delay: 0.32s; }
.menu-movil .menu-contacto { margin-top: 2.2rem; opacity: 0; transition: opacity 0.6s var(--ease-suave) 0.4s; }
.menu-movil.abierto .menu-contacto { opacity: 1; }

/* ==========================================================================
   HERO · CARRUSEL DE PRODUCTOS (referencia: bimbo.com.co)
   Cada slide = un producto con su propia foto, titular y CTA. Auto-avanza
   cada 6 s, se detiene al pasar el mouse o al enfocar con teclado y no
   arranca si el sistema pide movimiento reducido.
   ========================================================================== */
.hero {
  position: relative;
  height: 100dvh;
  min-height: 34rem;
  max-height: 56rem;
  overflow: hidden;
  background: var(--cacao);
}
.carrusel { position: absolute; inset: 0; }

.slides { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; }
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.95s var(--ease-suave), visibility 0s linear 0.95s;
}
.slide.activa {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.95s var(--ease-suave), visibility 0s;
}
.slide picture { display: contents; }
.slide-foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.03);
  transition: transform 9s linear;
}
.slide.activa .slide-foto { transform: scale(1); }

/* Velo: la foto manda, pero el texto siempre se lee. */
.slide-velo {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(95deg, rgba(30, 16, 8, 0.84) 0%, rgba(30, 16, 8, 0.64) 34%,
                    rgba(30, 16, 8, 0.22) 64%, rgba(30, 16, 8, 0.04) 100%),
    linear-gradient(to top, rgba(30, 16, 8, 0.42) 0%, transparent 42%);
}

.slide-cuerpo {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 6rem 0 7.5rem;
  max-width: 46rem;
}
.cejilla-claro {
  border-color: rgba(255, 255, 255, 0.45);
  color: #FFFFFF;
  background: rgba(0, 0, 0, 0.22);
}
.cejilla-claro::before { background: #FFFFFF; }

.slide-titulo {
  font-family: var(--serif);
  font-weight: 480;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
  font-size: clamp(2.9rem, 7.5vw, 5.8rem);
  color: var(--blanco);
  margin: 1rem 0 1rem;
  text-shadow: 0 2px 30px rgba(30, 16, 8, 0.35);
}
.slide-sub {
  font-size: clamp(1rem, 1.55vw, 1.18rem);
  color: #FFFFFF;
  max-width: 30rem;
  margin-bottom: 2.1rem;
  text-shadow: 0 1px 16px rgba(30, 16, 8, 0.5);
}
.slide-banda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.3rem;
}
/* ---------- Controles ---------- */
.carrusel-flecha {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(30, 16, 8, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--blanco);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.45s var(--ease-suave), border-color 0.45s var(--ease-suave), transform 0.45s var(--ease-suave);
}
.carrusel-flecha svg { width: 1.15rem; height: 1.15rem; }
.carrusel-flecha:hover { background: var(--rodamina); border-color: var(--rodamina); }
.carrusel-prev { left: clamp(0.6rem, 2vw, 1.6rem); }
.carrusel-next { right: clamp(0.6rem, 2vw, 1.6rem); }
.carrusel-prev:hover { transform: translateY(-50%) translateX(-2px); }
.carrusel-next:hover { transform: translateY(-50%) translateX(2px); }

.carrusel-pie {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(1.3rem, 3.5vh, 2.4rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;
}
.carrusel-puntos { display: flex; gap: 0.55rem; pointer-events: auto; }
.carrusel-punto {
  width: 2.4rem;
  height: 1.1rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.carrusel-punto span {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.42);
  transition: background 0.5s var(--ease-suave), transform 0.5s var(--ease-suave);
}
.carrusel-punto:hover span { background: rgba(255, 255, 255, 0.72); }
.carrusel-punto.activo span { background: var(--blanco); transform: scaleY(1.7); }

.carrusel-prueba {
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-align: center;
}
.carrusel-prueba strong { color: var(--blanco); font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .slide, .slide-foto { transition: none; }
  .slide.activa .slide-foto, .slide-foto { transform: none; }
}

/* ==========================================================================
   MARQUESINA
   ========================================================================== */
.marquesina {
  border-block: 1px solid var(--crema-3);
  padding: 1.1rem 0;
  overflow: hidden;
  white-space: nowrap;
  background: var(--blanco);
}
.marquesina-pista {
  display: inline-flex;
  gap: 3rem;
  animation: desfile 38s linear infinite;
  will-change: transform;
}
.marquesina span {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-style: italic;
  color: var(--tinta-suave);
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.marquesina span::after { content: '·'; color: var(--magenta); font-style: normal; }
@keyframes desfile { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquesina-pista { animation: none; } }

/* ==========================================================================
   SECCIONES GENERALES
   ========================================================================== */
.seccion { padding: clamp(2.6rem, 4.4vw, 4rem) 0; }
.seccion-cabeza { max-width: 44rem; margin-bottom: clamp(1.8rem, 3.4vw, 2.8rem); }
.seccion-cabeza h2 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 1.1rem; }
.seccion-cabeza p { color: var(--tinta-suave); font-size: 1.02rem; max-width: 36rem; }

/* ---------- HISTORIA ---------- */
.historia {
  background: var(--rodamina);
  color: var(--crema);
  position: relative;
  overflow: hidden;
}
.historia::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 55% 45% at 12% 12%, rgba(189, 51, 119, 0.22), transparent 65%),
              radial-gradient(ellipse 45% 40% at 92% 88%, rgba(243, 186, 214, 0.1), transparent 60%);
  pointer-events: none;
}
.historia .contenedor { position: relative; }
.historia .cejilla { border-color: rgba(255, 255, 255, 0.45); color: #FFFFFF; background: rgba(0, 0, 0, 0.18); }
.historia .cejilla::before { background: #FFFFFF; }
.historia h2 em { color: #FFD9EC; }
.historia .marco { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.22); }
.historia-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.historia-texto p { color: #FFFFFF; margin-bottom: 1.2rem; font-size: 1.02rem; }
.historia-texto p strong { color: var(--crema); font-weight: 700; }

.historia-cita {
  border-left: 2px solid var(--magenta);
  padding-left: 1.4rem;
  margin: 2rem 0;
}
.historia-cita p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  line-height: 1.4;
  color: var(--cacao);
  margin: 0;
}

.valores { display: grid; gap: 0.8rem; }
.valor {
  background: rgba(249, 229, 220, 0.06);
  border: 1px solid rgba(249, 229, 220, 0.14);
  border-radius: 1.3rem;
  padding: 0.35rem;
}
.valor-int {
  border-radius: calc(1.3rem - 0.35rem);
  padding: 1.15rem 1.3rem;
  background: var(--rodamina-2);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.18);
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.valor .num { font-family: var(--serif); font-style: italic; color: #FFD9EC; font-size: 1.1rem; flex: none; }
.valor h3 { font-family: var(--sans); font-size: 0.95rem; font-weight: 700; letter-spacing: 0; margin-bottom: 0.2rem; color: var(--blanco); }
.valor p { font-size: 0.85rem; color: rgba(255, 255, 255, 0.92); margin: 0; }

.historia-banda { margin-top: clamp(1.8rem, 3.4vw, 2.6rem); }
.historia-banda .marco-int img { display: block; width: 100%; height: auto;
  aspect-ratio: 1800 / 820; object-fit: cover; object-position: center; }
@media (max-width: 640px) {
  .historia-banda .marco-int img { aspect-ratio: 4 / 3; }
}

.historia-foto .marco-int img { aspect-ratio: 1 / 1; object-position: center; }

/* ---------- EL LIBERAL ---------- */
.liberal {
  background: var(--crema-2);
  color: var(--cacao);
  position: relative;
  overflow: hidden;
}
.liberal::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(243, 186, 214, 0.28), transparent 65%),
              radial-gradient(ellipse 45% 40% at 8% 90%, rgba(189, 51, 119, 0.05), transparent 60%);
  pointer-events: none;
}
.liberal .contenedor { position: relative; }


.liberal-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.liberal h2 { font-size: clamp(2.4rem, 5.5vw, 4rem); margin-bottom: 1.4rem; }
.liberal h2 em { color: var(--magenta); }
.liberal-texto p { color: var(--tinta-suave); margin-bottom: 1.15rem; font-size: 1.02rem; max-width: 34rem; }
.liberal-texto p strong { color: var(--cacao); font-weight: 700; }
.liberal .btn { margin-top: 1rem; }

.liberal-tarjeta {
  background: rgba(255, 253, 249, 0.75);
  border: 1px solid rgba(66, 35, 18, 0.07);
  border-radius: var(--radio-xl);
  padding: 0.45rem;
  transform: rotate(1.5deg);
}
.liberal-tarjeta-int {
  border-radius: var(--radio-int);
  background: var(--blanco);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
  padding: clamp(1.8rem, 4vw, 2.8rem);
}
.liberal-tarjeta-int .glifo { font-family: var(--serif); font-style: italic; font-size: 3.2rem; line-height: 1; color: var(--magenta); }
.liberal-foto { margin: -0.4rem -0.4rem 0.2rem; border-radius: calc(var(--radio-int) - 0.3rem); overflow: hidden; }
.liberal-foto img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.liberal-tarjeta-int h3 { font-size: 1.5rem; margin: 1rem 0 0.8rem; color: var(--cacao); }
.liberal-tarjeta-int p { font-size: 0.92rem; color: var(--tinta-suave); }
.liberal-tarjeta-int .nota {
  margin-top: 1.6rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(66, 35, 18, 0.1);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--magenta);
}

/* ---------- PRODUCTOS ---------- */
.productos-cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.8rem);
}
.categorias { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.categoria {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  border: 1px solid rgba(66, 35, 18, 0.14);
  border-radius: 999px;
  padding: 0.42rem 1rem;
}

.grid-productos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.1rem;
}
.producto {
  background: rgba(66, 35, 18, 0.045);
  border: 1px solid rgba(66, 35, 18, 0.08);
  border-radius: var(--radio-xl);
  padding: 0.4rem;
  transition: transform 0.7s var(--ease-suave), box-shadow 0.7s var(--ease-suave);
}
.producto:hover { transform: translateY(-6px); box-shadow: 0 32px 55px -30px rgba(66, 35, 18, 0.4); }
.producto-int {
  border-radius: var(--radio-int);
  background: var(--blanco);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.producto-foto { overflow: hidden; }
.producto-foto img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  transition: transform 1.2s var(--ease-suave);
}
.producto:hover .producto-foto img { transform: scale(1.05); }
.producto-info { padding: 1.15rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.producto-cat { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta); margin-bottom: 0.4rem; }
.producto-info h3 { font-size: 1.25rem; margin-bottom: 0.25rem; }
.producto-sede {
  display: inline-flex; align-items: center; gap: 0.34rem;
  align-self: flex-start; width: fit-content; max-width: 100%;
  margin-top: 0.45rem; padding: 0.2rem 0.5rem 0.2rem 0.42rem;
  background: rgba(189, 51, 119, 0.09); border-radius: 999px;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--magenta-deep); line-height: 1.3;
}
.producto-sede::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--rodamina); flex: none;
}
.producto-und { font-size: 0.78rem; color: var(--tinta-suave); margin-bottom: 0.9rem; }
.producto-pie { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.producto-precio { font-family: var(--serif); font-size: 1.2rem; }
.producto-precio small { font-family: var(--sans); font-size: 0.68rem; color: var(--tinta-suave); }
.producto-pedir {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--magenta);
  border: 1px solid rgba(189, 51, 119, 0.3);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  transition: background 0.5s var(--ease-suave), color 0.5s var(--ease-suave);
}
.producto-pedir:hover { background: var(--magenta); color: var(--blanco); }

/* Bento asimétrico: dos protagonistas, resto en apoyo */
.producto:nth-child(1), .producto:nth-child(2) { grid-column: span 3; }
.producto:nth-child(1) .producto-foto img, .producto:nth-child(2) .producto-foto img { aspect-ratio: 16 / 11; }
.producto:nth-child(n+3) { grid-column: span 2; }
.producto:nth-child(6), .producto:nth-child(7) { grid-column: span 3; }
.producto:nth-child(6) .producto-foto img, .producto:nth-child(7) .producto-foto img { aspect-ratio: 16 / 10; }

.productos-nota {
  margin-top: 2.2rem;
  font-size: 0.85rem;
  color: var(--tinta-suave);
  max-width: 40rem;
}
.productos-nota strong { color: var(--cacao); }

/* ---------- CÓMO PEDIR ---------- */
.pedir { background: var(--crema-2); }
.pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.paso {
  background: rgba(255, 253, 249, 0.75);
  border: 1px solid rgba(66, 35, 18, 0.07);
  border-radius: var(--radio-xl);
  padding: 0.4rem;
}
.paso-int {
  border-radius: var(--radio-int);
  background: var(--blanco);
  padding: 1.8rem 1.6rem;
  height: 100%;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.paso .num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--magenta);
  display: block;
  margin-bottom: 1rem;
}
.paso h3 { font-family: var(--sans); font-size: 1.02rem; font-weight: 700; margin-bottom: 0.5rem; }
.paso p { font-size: 0.88rem; color: var(--tinta-suave); }
.paso p a { color: var(--magenta); font-weight: 600; }

/* ---------- PUNTOS DE VENTA ---------- */
.puntos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.punto {
  background: rgba(66, 35, 18, 0.045);
  border: 1px solid rgba(66, 35, 18, 0.08);
  border-radius: var(--radio-xl);
  padding: 0.4rem;
}
.punto-int {
  border-radius: var(--radio-int);
  background: var(--blanco);
  padding: 1.9rem 1.7rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6);
}
.punto-barrio { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--magenta); margin-bottom: 0.7rem; }
.punto h3 { font-size: 1.45rem; margin-bottom: 0.4rem; }
.punto-dir { font-size: 0.9rem; color: var(--tinta-suave); margin-bottom: 1.2rem; }
.punto-horario { border-top: 1px solid var(--crema-3); padding-top: 1.1rem; margin-bottom: 1.4rem; flex: 1; }
.punto-horario li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8rem;
  padding: 0.28rem 0;
}
.punto-horario li span:first-child { color: var(--tinta-suave); flex: none; }
.punto-horario li span:last-child { text-align: right; font-weight: 600; }
.punto-mapa {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--magenta);
}
.punto-mapa svg { width: 0.85rem; height: 0.85rem; transition: transform 0.5s var(--ease-suave); }
.punto-mapa:hover svg { transform: translate(2px, -2px); }

/* ---------- CTA FINAL ---------- */
.cta-final { padding-bottom: clamp(5.5rem, 10vw, 8.5rem); }
.cta-caja {
  background: var(--rodamina);
  border-radius: calc(var(--radio-xl) + 0.5rem);
  padding: 0.5rem;
  border: 1px solid rgba(189, 51, 119, 0.3);
}
.cta-caja-int {
  border-radius: var(--radio-xl);
  background: radial-gradient(ellipse 70% 90% at 80% 10%, rgba(255, 255, 255, 0.18), transparent 62%), var(--rodamina);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.22);
  padding: clamp(3rem, 7vw, 5.5rem) clamp(1.8rem, 5vw, 4.5rem);
  text-align: center;
  color: var(--crema);
}
.cta-caja h2 { font-size: clamp(2.1rem, 4.8vw, 3.4rem); margin-bottom: 1rem; }
.cta-caja h2 em { color: #FFD9EC; }
.cta-caja p { color: rgba(255, 255, 255, 0.94); max-width: 32rem; margin: 0 auto 2.2rem; }
.cta-caja .btn { font-size: 0.95rem; }

/* ---------- Pedidos: CTA grande (reemplaza la sección final, feedback 7-sep) ---------- */
.pedir-cta { display: flex; justify-content: center; margin-top: clamp(2.2rem, 4vw, 3.2rem); }
.btn-grande {
  font-size: clamp(0.95rem, 1.6vw, 1.12rem);
  padding: clamp(1.05rem, 2vw, 1.35rem) clamp(1.8rem, 3.4vw, 2.6rem);
  border-radius: 999px;
  gap: 1rem;
}
.btn-grande .orbe { width: 2.1rem; height: 2.1rem; }
@media (max-width: 640px) {
  .pedir-cta { display: block; }
  .btn-grande { width: 100%; justify-content: space-between; }
}

/* ---------- FOOTER ---------- */
.footer { background: var(--rodamina); color: rgba(255, 255, 255, 0.9); padding: 4.5rem 0 2.5rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}
.footer-marca .footer-logo { display: inline-block; background: var(--crema); padding: 0.7rem 1.1rem; border-radius: 14px; margin-bottom: 1.1rem; line-height: 0; }
.footer-marca .footer-logo img { height: 40px; width: auto; display: block; }
.footer-marca p { font-size: 0.88rem; max-width: 20rem; }
.footer h4 {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFD9EC;
  margin-bottom: 1.1rem;
}
.footer li { padding: 0.28rem 0; font-size: 0.88rem; }
.footer a { transition: color 0.4s var(--ease-suave); }
.footer a:hover { color: var(--blanco); }
.footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem;
  padding-top: 2rem;
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.7);
}

/* ---------- WHATSAPP FLOTANTE ---------- */
.wa-flotante {
  position: fixed;
  bottom: 1.4rem;
  right: 1.4rem;
  z-index: 70;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  background: var(--magenta);
  border: 2px solid rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 18px 38px -14px rgba(46, 27, 15, 0.55);
  transition: transform 0.6s var(--ease-suave);
}
.wa-flotante:hover { transform: scale(1.08) translateY(-2px); }
.wa-flotante svg { width: 1.6rem; height: 1.6rem; fill: var(--blanco); }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px) {
  .grid-productos { grid-template-columns: repeat(2, 1fr); }
  .producto, .producto:nth-child(n) { grid-column: span 1 !important; }
  .producto .producto-foto img { aspect-ratio: 1 !important; }
}

@media (max-width: 900px) {
  .nav-links, .nav .btn-magenta { display: none; }
  .nav-burger { display: block; }
  .nav { width: calc(100% - 1.4rem); justify-content: space-between; }
  .historia-grid, .liberal-grid { grid-template-columns: 1fr; }
  .slide-cuerpo { padding: 7rem 0 8.5rem; max-width: none; }
  .slide-velo {
    background: linear-gradient(to top, rgba(30, 16, 8, 0.90) 0%, rgba(30, 16, 8, 0.70) 46%,
                                rgba(30, 16, 8, 0.16) 78%, rgba(30, 16, 8, 0.04) 100%);
  }
  .carrusel-flecha { width: 2.4rem; height: 2.4rem; top: auto; bottom: 6rem; transform: none; }
  .carrusel-prev:hover, .carrusel-next:hover { transform: none; }
  .carrusel-pie { bottom: 1.6rem; gap: 0.75rem; }
  .carrusel-prueba { font-size: 0.66rem; letter-spacing: 0.06em; }
  .pasos, .puntos-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 560px) {
  .contenedor { width: calc(100% - 2rem); }
  .grid-productos { grid-template-columns: 1fr; }
  .hero { max-height: none; }
  .slide-banda .btn { width: 100%; justify-content: space-between; }
  .liberal-tarjeta { transform: none; }
}

/* ==========================================================================
   v2 · agosto 2026 — copy nuevo, filtros de portafolio, reseñas y laminado
   ========================================================================== */

/* ---------- Accesibilidad ---------- */
.saltar {
  position: absolute; left: 0.75rem; top: -3.5rem; z-index: 200;
  background: var(--magenta); color: var(--blanco);
  padding: 0.6rem 1.1rem; border-radius: 999px;
  font-size: 0.8rem; font-weight: 700;
  transition: top 0.3s var(--ease-suave);
}
.saltar:focus { top: 0.75rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:where(a, button):focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- GESTO FIRMA: el laminado ----------
   Milhojaldres = mil hojaldres. El hojaldre se hace laminando: doblar la masa
   sobre sí misma hasta dejar cientos de capas finas. Esa sección transversal
   es la firma del sitio: capas que se van asentando, una tras otra.          */
.laminado {
  height: clamp(20px, 2.4vw, 30px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(3px, 0.55vw, 6px);
  padding-block: 0.5rem;
  background: var(--crema);
}
.laminado.sobre-crema-2 { background: var(--crema-2); }
.js .laminado i {
  display: block;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(66, 35, 18, 0.16) 12%,
    rgba(189, 51, 119, 0.30) 50%,
    rgba(66, 35, 18, 0.16) 88%,
    transparent 100%);
  transform: translateX(var(--desde, -14%));
  opacity: 0;
  transition: transform 1.05s var(--ease-suave), opacity 0.8s var(--ease-suave);
  transition-delay: var(--paso, 0s);
}
.laminado i:nth-child(even) { --desde: 14%; }
.laminado i:nth-child(3n) { height: 2px; opacity: 0; }
.laminado.in i { transform: translateX(0); opacity: 1; }
.laminado.in i:nth-child(3n) { opacity: 0.75; }
@media (prefers-reduced-motion: reduce) {
  .laminado i { transition: none; transform: none; opacity: 1; }
  .laminado.in i:nth-child(3n) { opacity: 0.75; }
}


/* ---------- Portafolio: intro y filtros ---------- */
.productos-cabeza { display: block; }
.productos-intro {
  color: var(--tinta-suave);
  font-size: 1.02rem;
  max-width: 40rem;
  margin-top: 1.1rem;
}
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.filtro {
  font-family: var(--sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  background: transparent;
  border: 1px solid rgba(66, 35, 18, 0.16);
  border-radius: 999px;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.45s var(--ease-suave), border-color 0.45s var(--ease-suave), background 0.45s var(--ease-suave);
}
.filtro:hover { color: var(--cacao); border-color: rgba(66, 35, 18, 0.4); }
.filtro .cuenta {
  font-size: 0.66rem;
  letter-spacing: 0;
  color: var(--magenta);
  background: rgba(189, 51, 119, 0.09);
  border-radius: 999px;
  padding: 0.1rem 0.42rem;
  transition: color 0.45s var(--ease-suave), background 0.45s var(--ease-suave);
}
.filtro.activo {
  color: var(--blanco);
  background: var(--magenta);
  border-color: var(--magenta);
  box-shadow: 0 12px 26px -14px rgba(189, 51, 119, 0.7);
}
.filtro.activo .cuenta { color: var(--blanco); background: rgba(255, 255, 255, 0.22); }

/* Rejilla uniforme: los tramos por nth-child se rompen al filtrar. */
.grid-productos { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.grid-productos .producto,
.grid-productos .producto:nth-child(n) { grid-column: auto; }
.producto.oculto { display: none; }
.producto.entrando { animation: asentar 0.55s var(--ease-suave) both; }
@keyframes asentar {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .producto.entrando { animation: none; } }

/* Precio con la presentación encima */
.producto-precio { display: flex; flex-direction: column; line-height: 1.15; }
.producto-precio small {
  display: block;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.15rem;
  font-weight: 700;
  font-size: 0.6rem;
}
/* Fichas con dos presentaciones: lista compacta de precios. Reusa el mismo
   lenguaje tipográfico del precio simple (etiqueta en versalitas + cifra en
   serif), solo que en dos filas, para que no compita con el resto de la reja. */
.producto-precios { display: flex; flex-direction: column; gap: 0.24rem; }
.pp-fila { display: flex; align-items: baseline; gap: 0.5rem; }
.pp-und {
  font-family: var(--sans);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  min-width: 3.5rem;
  flex: none;
}
.pp-val { font-family: var(--serif); font-size: 1.05rem; line-height: 1.1; }

.producto-precio-consulta {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tinta-suave);
  justify-content: center;
}

/* Fichas sin fotografía: se sostienen con el glifo de marca */
.producto-foto-vacia {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(243, 186, 214, 0.5) 0%, transparent 62%),
    repeating-linear-gradient(180deg, var(--crema-2) 0 7px, var(--crema-3) 7px 8px);
}
.glifo-mini {
  font-family: var(--serif);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--magenta);
  opacity: 0.5;
}
.producto-encargo .producto-int { background: var(--crema); }

/* ---------- RESEÑAS ---------- */
.resenas { background: var(--crema-2); }
.resenas-grid {
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: center;
}
.resenas h2 { font-size: clamp(2rem, 4.4vw, 3.1rem); margin-bottom: 1.2rem; }
.resenas-texto p { color: var(--tinta-suave); font-size: 1.02rem; max-width: 34rem; }
.resenas-ctas { margin-top: 1.8rem; }

.resenas-panel {
  background: var(--blanco);
  border: 1px solid rgba(66, 35, 18, 0.08);
  border-radius: var(--radio-xl);
  padding: clamp(1.6rem, 3.2vw, 2.3rem);
  box-shadow: 0 40px 70px -45px rgba(66, 35, 18, 0.5);
}
.marcador { text-align: center; padding-bottom: 1.4rem; border-bottom: 1px solid var(--crema-3); }
.marcador-num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 7vw, 4.6rem);
  line-height: 0.95;
  color: var(--cacao);
  font-variant-numeric: tabular-nums;
}
.estrellas { display: flex; justify-content: center; gap: 0.18rem; margin: 0.55rem 0 0.5rem; }
.estrella { font-size: 1.05rem; color: var(--crema-3); line-height: 1; }
.estrella.llena { color: var(--magenta); }
.estrella.media {
  background: linear-gradient(90deg, var(--magenta) 30%, var(--crema-3) 30%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.marcador-cap { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tinta-suave); }

.sedes-rating { display: flex; flex-direction: column; gap: 0.55rem; margin: 1.4rem 0 1.2rem; }
.sedes-rating li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  padding: 0.7rem 0.9rem;
  background: var(--crema);
  border-radius: 0.9rem;
}
.sedes-rating strong { display: block; font-size: 0.9rem; font-weight: 700; }
.sedes-rating span { font-size: 0.74rem; color: var(--tinta-suave); }
.pastilla {
  flex: none;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--magenta);
  background: rgba(189, 51, 119, 0.09);
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  white-space: nowrap;
}
.pastilla-suave { color: var(--tinta-suave); background: rgba(66, 35, 18, 0.07); }
.resenas-invita { font-size: 0.82rem; color: var(--tinta-suave); text-align: center; }
.resenas-invita a { color: var(--magenta); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pie ---------- */
.footer-beyond { opacity: 0.75; }
.footer-beyond a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Adaptación a celular ---------- */
@media (max-width: 900px) {
  .resenas-grid { grid-template-columns: 1fr; }
  .resenas-panel { order: -1; }
}
@media (max-width: 560px) {
  #productos { overflow-x: clip; }
  .hero-meta { gap: 1rem 1.6rem; }
  .hero-meta .dato { min-width: 5.6rem; }
  .filtros {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-inline: -1.25rem;   /* exacto = gutter de .contenedor, sin fracciones */
    padding-inline: 1.25rem;
    scroll-snap-type: x proximity;
  }
  .filtros::-webkit-scrollbar { display: none; }
  .filtro { flex: none; scroll-snap-align: start; }
  .grid-productos { grid-template-columns: 1fr; }
  .sedes-rating li { flex-direction: column; align-items: flex-start; gap: 0.45rem; }
}
.menu-movil.abierto a:nth-child(6) { transition-delay: 0.38s; }



/* ==========================================================================
   RESEÑAS · muro de citas reales de Google
   ========================================================================== */
.resenas-cabeza { max-width: 46rem; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }
.resenas-cabeza h2 { font-size: clamp(2rem, 4.2vw, 3rem); margin-bottom: 1rem; }
.resenas-cabeza p { color: var(--tinta-suave); max-width: 40rem; }

.resenas-muro {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.resena {
  background: var(--blanco);
  border: 1px solid var(--crema-3);
  border-radius: var(--radio-xl);
  padding: 1.6rem 1.5rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 22px 40px -34px rgba(66, 35, 18, 0.5);
  transition: transform 0.5s var(--ease-suave), box-shadow 0.5s var(--ease-suave);
}
.resena:hover { transform: translateY(-4px); box-shadow: 0 30px 52px -32px rgba(66, 35, 18, 0.55); }
.resena blockquote {
  font-size: 1.06rem;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.015em;
  flex: 1;
}
.resena blockquote::before { content: '“'; color: var(--magenta); font-weight: 700; }
.resena blockquote::after { content: '”'; color: var(--magenta); font-weight: 700; }
.resena figcaption { display: flex; align-items: center; gap: 0.7rem; border-top: 1px solid var(--crema-3); padding-top: 0.85rem; }
.resena figcaption strong { display: block; font-size: 0.86rem; font-weight: 600; }
.resena figcaption small { display: block; font-size: 0.7rem; color: var(--tinta-suave); }
.inicial {
  flex: none;
  width: 2.1rem; height: 2.1rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--crema-2);
  color: var(--magenta);
  font-weight: 700;
  font-size: 0.88rem;
}
.resena-cta { background: var(--rodamina); border-color: transparent; color: var(--blanco); text-align: center; align-items: center; justify-content: center; gap: 0.5rem; }
.resena-cta .marcador-num { font-size: 3rem; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.resena-cta p { font-size: 0.76rem; color: var(--rosa); }
.resena-cta .btn { margin-top: 0.4rem; }
.resena-cta .resena-invita { font-size: 0.72rem; color: rgba(255, 253, 249, 0.62); margin-top: 0.3rem; }
.resena-cta .resena-invita a { color: var(--rosa); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 560px) {
  .resenas-muro { grid-template-columns: 1fr; }
  .resena blockquote { font-size: 1rem; }
}