:root {
  --primario: #F4C64E;
  --amarillo: #F4C64E;
  --naranja: #F15A38;
  --coral: #C81745;
  --menta: #0099A8;
  --turquesa: #0099A8;
  --oliva: #6F842D;
  --uva: #44304F;
  --rosa: #F7D1E1;
  --cielo: #DFF9FB;
  --blanco: #FFFFFF;
  --texto: #1A1A1A;
  --borde: #E8E1D3;
  --fondo: #FFFDF6;
  --superficie: #FFFFFF;
  --suave: #FFF4CC;
}

[x-cloak] { display: none !important; }

.max-w-7xl { max-width: 90rem; }

body {
  background:
    linear-gradient(180deg, rgba(244,198,78,.18), rgba(255,255,255,0) 18rem),
    linear-gradient(90deg, rgba(200,23,69,.05), rgba(0,153,168,.05)),
    var(--fondo);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.site-header {
  backdrop-filter: blur(16px);
  background:
    repeating-linear-gradient(115deg, rgba(255,255,255,.22) 0 8px, transparent 8px 34px),
    repeating-linear-gradient(35deg, rgba(200,23,69,.12) 0 6px, transparent 6px 42px),
    #FFD21A;
  border-bottom: 0;
  box-shadow: 0 10px 30px rgba(68,48,79,.08);
  overflow: visible;
  position: relative;
}

.site-header nav,
.site-header > div {
  position: relative;
  z-index: 1;
}

.site-header nav {
  align-items: center;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(5rem, 1fr) minmax(14rem, 34rem) minmax(5rem, 1fr);
}

.site-header::after {
  background: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta), var(--oliva));
  bottom: 0;
  content: "";
  height: 4px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 0;
}

.brand-home {
  align-items: center;
  display: inline-flex;
  gap: .7rem;
  justify-self: start;
  min-width: 0;
}

.brand-wordmark-home {
  display: flex;
  justify-content: center;
  min-width: 0;
}

.brand-logo-frame {
  aspect-ratio: 1 / 1;
  display: grid;
  flex: 0 0 5rem;
  height: 5rem;
  place-items: center;
}

.brand-logo-frame img {
  display: block;
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.brand-wordmark-image {
  display: block;
  flex: 0 1 100%;
  min-width: 12rem;
}

.brand-wordmark-image img {
  display: block;
  height: auto;
  max-height: 5.4rem;
  object-fit: contain;
  object-position: center;
  width: 100%;
}

.desktop-actions {
  justify-self: end;
}

.brand-wordmark {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  font-size: clamp(1.15rem, 2.3vw, 1.65rem);
  font-weight: 950;
  gap: .16rem .35rem;
  letter-spacing: 0;
  line-height: .95;
  text-shadow: 0 2px 0 #fff, 0 3px 0 rgba(68,48,79,.18);
}

.brand-word { white-space: nowrap; }
.brand-letter { display: inline-block; }
.color-red { color: var(--coral); }
.color-orange { color: var(--naranja); }
.color-yellow { color: #C99710; }
.color-teal { color: var(--menta); }
.color-olive { color: var(--oliva); }

.brand-mark {
  background: var(--primario);
  border: 2px solid #111;
  border-radius: 8px;
  box-shadow: 4px 4px 0 #111;
  color: #111;
  display: grid;
  height: 2.5rem;
  place-items: center;
  width: 2.5rem;
}

.site-footer {
  background:
    linear-gradient(90deg, rgba(200,23,69,.08), rgba(244,198,78,.18), rgba(0,153,168,.08)),
    #fff;
  border-top: 4px solid transparent;
  border-image: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta), var(--oliva)) 1;
  box-shadow: 0 -10px 30px rgba(68,48,79,.05);
  color: var(--texto);
}

.site-footer p { color: #5f5a52; }
.site-footer .font-bold, .site-footer .font-black { color: var(--uva); }

.btn-primary,
.btn-secondary,
.btn-danger,
.nav-link,
.icon-button,
.nav-toggle {
  align-items: center;
  border-radius: 8px;
  font-weight: 800;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .65rem .9rem;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease, transform .18s ease;
}

.btn-primary, .btn-secondary, .btn-danger, .nav-link, .icon-button { display: inline-flex; }

/* .nav-toggle controla su propia visibilidad (oculto en escritorio via md:hidden de Tailwind);
   se define aqui por breakpoint en vez de con un display incondicional para no pisar esa utilidad. */
.nav-toggle { display: inline-flex; }
@media (min-width: 768px) {
  .nav-toggle { display: none; }
}

.btn-primary {
  background: linear-gradient(135deg, var(--primario), #FFD86B);
  border: 1px solid var(--uva);
  box-shadow: 3px 3px 0 var(--uva);
  color: #000;
}
.btn-primary:hover { background: linear-gradient(135deg, var(--naranja), var(--coral)); color: #fff; transform: translate(-1px, -1px); }
.btn-secondary { border: 1px solid var(--borde); background: #fff; color: var(--texto); }
.btn-danger { background: #fff1f2; border: 1px solid var(--coral); color: #9f1239; }
.btn-danger:hover { background: var(--coral); color: #fff; transform: translateY(-1px); }
.btn-secondary:hover, .nav-link:hover { border-color: var(--menta); background: var(--cielo); color: #111; }
.nav-link { background: rgba(255,255,255,.72); border: 1px solid transparent; color: var(--texto); }
.icon-button, .nav-toggle { border: 1px solid var(--borde); background: #fff; box-shadow: 0 6px 14px rgba(68,48,79,.06); padding: .65rem; }
.icon-button:hover, .nav-toggle:hover { border-color: var(--primario); background: #fff8d8; transform: translateY(-1px); }
.icon-button svg, .nav-toggle svg, .btn-primary svg, .btn-secondary svg, .btn-danger svg { height: 1.1rem; width: 1.1rem; }

.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.nav-link:focus-visible,
.icon-button:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.nav-more {
  position: relative;
}

.nav-more-button {
  align-items: center;
  background:
    linear-gradient(135deg, rgba(255,255,255,.94), rgba(255,244,204,.94));
  border: 2px solid rgba(255,255,255,.8);
  border-radius: 8px;
  color: var(--texto);
  display: inline-flex;
  font-weight: 900;
  gap: .45rem;
  min-height: 2.5rem;
  padding: .65rem .9rem;
  box-shadow: 3px 3px 0 rgba(68,48,79,.2);
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-more-button svg {
  height: 1rem;
  transition: transform .18s ease;
  width: 1rem;
}

.nav-more:hover .nav-more-button,
.nav-more:focus-within .nav-more-button {
  background: linear-gradient(135deg, var(--naranja), var(--coral));
  border-color: #fff;
  color: #fff;
  transform: translate(-1px, -1px);
}

.nav-more:hover .nav-more-button svg,
.nav-more:focus-within .nav-more-button svg {
  transform: rotate(180deg);
}

.nav-more-menu {
  background:
    radial-gradient(circle at 12% 16%, rgba(244,198,78,.42) 0 .7rem, transparent .75rem),
    radial-gradient(circle at 88% 18%, rgba(0,153,168,.25) 0 .85rem, transparent .9rem),
    radial-gradient(circle at 72% 88%, rgba(241,90,56,.22) 0 .95rem, transparent 1rem),
    linear-gradient(135deg, #fffdf6, #fff4cc);
  border: 2px solid #fff;
  border-radius: 8px;
  box-shadow: 0 18px 42px rgba(68,48,79,.16), 0 0 0 1px rgba(68,48,79,.08);
  display: grid;
  gap: .35rem;
  min-width: 13.5rem;
  opacity: 0;
  padding: .55rem;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: calc(100% + .55rem);
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease;
  z-index: 50;
}

.nav-more-menu::after {
  background: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta), var(--oliva));
  border-radius: 999px;
  content: "";
  height: .28rem;
  left: .7rem;
  position: absolute;
  right: .7rem;
  top: .45rem;
}

.nav-more-menu::before {
  content: "";
  height: .7rem;
  left: 0;
  position: absolute;
  right: 0;
  top: -.7rem;
}

.nav-more:hover .nav-more-menu,
.nav-more:focus-within .nav-more-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.nav-more-menu .nav-link {
  --nav-item-color: var(--menta);
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(68,48,79,.08);
  border-left: 5px solid var(--nav-item-color);
  box-shadow: 2px 2px 0 rgba(68,48,79,.08);
  color: var(--uva);
  justify-content: flex-start;
  min-height: 2.7rem;
  position: relative;
  width: 100%;
}

.nav-more-menu .nav-link:nth-child(1) { --nav-item-color: var(--coral); }
.nav-more-menu .nav-link:nth-child(2) { --nav-item-color: var(--naranja); }
.nav-more-menu .nav-link:nth-child(3) { --nav-item-color: var(--menta); }
.nav-more-menu .nav-link:nth-child(4) { --nav-item-color: var(--oliva); }
.nav-more-menu .nav-link:nth-child(5) { --nav-item-color: var(--primario); }

.nav-more-menu .nav-link:hover,
.nav-more-menu .nav-link:focus-visible {
  background: var(--nav-item-color);
  border-color: var(--nav-item-color);
  color: #fff;
  transform: translateX(-3px);
}

.cart-link {
  align-items: center;
  border: 1px solid var(--primario);
  border-radius: 8px;
  display: inline-flex;
  gap: .5rem;
  min-height: 2.5rem;
  padding: .65rem .9rem;
  position: relative;
}

#carrito-badge {
  align-items: center;
  background: var(--coral);
  border-radius: 999px;
  color: #fff;
  display: none;
  font-size: .72rem;
  font-weight: 900;
  height: 1.25rem;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 .25rem;
}

.hero-band {
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.84)),
    linear-gradient(90deg,
      rgba(200,23,69,.14) 0 20%,
      rgba(241,90,56,.14) 20% 40%,
      rgba(244,198,78,.18) 40% 60%,
      rgba(0,153,168,.13) 60% 80%,
      rgba(111,132,45,.13) 80% 100%),
    #fff;
  border-bottom: 1px solid rgba(244,198,78,.65);
}
.section-band {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,244,204,.84)),
    #fff;
  border-bottom: 1px solid var(--borde);
  border-top: 1px solid var(--borde);
}

.carousel-shell {
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.84)),
    linear-gradient(90deg,
      rgba(200,23,69,.16) 0 20%,
      rgba(241,90,56,.16) 20% 40%,
      rgba(244,198,78,.2) 40% 60%,
      rgba(0,153,168,.15) 60% 80%,
      rgba(111,132,45,.15) 80% 100%);
  border: 3px solid #fff;
  border-radius: 8px;
  box-shadow: 0 18px 45px rgba(68,48,79,.16), 0 0 0 1px rgba(68,48,79,.1);
  min-height: 320px;
  overflow: hidden;
  position: relative;
}

.carousel-shell::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.22)),
    linear-gradient(90deg,
      rgba(200,23,69,.16) 0 20%,
      rgba(241,90,56,.14) 20% 40%,
      rgba(244,198,78,.18) 40% 60%,
      rgba(0,153,168,.13) 60% 80%,
      rgba(111,132,45,.13) 80% 100%);
  content: "";
  inset: 0;
  mix-blend-mode: screen;
  opacity: .38;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.carousel-slide {
  display: none;
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%;
}

.carousel-slide.activo { display: block; }
.carousel-slide img { height: 100%; object-fit: cover; width: 100%; }

.carousel-copy {
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(68,48,79,.12);
  border-left: 7px solid var(--primario);
  bottom: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 16px 34px rgba(68,48,79,.16);
  display: grid;
  gap: .35rem;
  left: 1.5rem;
  max-width: min(28rem, calc(100% - 3rem));
  padding: 1rem;
  position: absolute;
  z-index: 2;
}

.carousel-copy strong, .carousel-copy h1, .default-hero h1 { font-size: clamp(2rem, 5vw, 4.75rem); font-weight: 950; line-height: .95; margin: 0; }
.carousel-copy small { color: #525252; font-size: 1rem; }

.default-hero {
  align-items: center;
  background: linear-gradient(135deg, #fff8d8, var(--cielo));
  display: flex;
  padding: 2rem;
}

.default-hero p { color: #525252; max-width: 42rem; }
.eyebrow { color: var(--naranja); font-size: .78rem; font-weight: 950; letter-spacing: 0; text-transform: uppercase; }

.carousel-shell:has(.default-hero) .carousel-btn { display: none; }

.carousel-btn {
  background: #fff;
  border: 1px solid rgba(68,48,79,.14);
  border-radius: 999px;
  box-shadow: 0 10px 22px rgba(68,48,79,.14);
  display: grid;
  height: 2.5rem;
  place-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem;
  z-index: 3;
}

.promo-panel {
  border: 0;
  border-radius: 8px;
  box-shadow: 0 14px 34px rgba(68,48,79,.16);
  color: #fff;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  min-height: 0;
  overflow: hidden;
  padding: 1.35rem;
  place-items: center;
  position: relative;
  text-shadow: 0 2px 0 rgba(68,48,79,.28);
  transition: filter .18s ease, transform .18s ease, box-shadow .18s ease;
}

.promo-stack { grid-template-rows: repeat(2, minmax(0, 1fr)); }
.promo-panel::before {
  background:
    radial-gradient(circle at 12% 24%, rgba(255,255,255,.24) 0 13px, transparent 14px),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.18) 0 23px, transparent 24px),
    radial-gradient(circle at 72% 76%, rgba(255,255,255,.22) 0 17px, transparent 18px),
    radial-gradient(circle at 24% 84%, rgba(255,255,255,.16) 0 27px, transparent 28px),
    radial-gradient(circle at 48% 38%, rgba(255,255,255,.14) 0 9px, transparent 10px);
  content: "";
  inset: 0;
  position: absolute;
}
.promo-panel:hover { box-shadow: 0 18px 38px rgba(68,48,79,.2); filter: saturate(1.08); transform: translateY(-2px); }
.promo-panel-mayor {
  background:
    linear-gradient(135deg, rgba(0,153,168,.82), rgba(6,115,125,.9)),
    linear-gradient(90deg,
      rgba(200,23,69,.2) 0 20%,
      rgba(241,90,56,.2) 20% 40%,
      rgba(244,198,78,.26) 40% 60%,
      rgba(0,153,168,.22) 60% 80%,
      rgba(111,132,45,.2) 80% 100%);
}
.promo-panel-detal {
  background:
    linear-gradient(135deg, rgba(200,23,69,.84), rgba(241,90,56,.9)),
    linear-gradient(90deg,
      rgba(200,23,69,.2) 0 20%,
      rgba(241,90,56,.2) 20% 40%,
      rgba(244,198,78,.26) 40% 60%,
      rgba(0,153,168,.22) 60% 80%,
      rgba(111,132,45,.2) 80% 100%);
}
.promo-panel b,
.promo-panel strong,
.promo-panel span {
  position: relative;
  z-index: 1;
}
.promo-panel b {
  align-self: end;
  color: #fff;
  font-size: clamp(1.43rem, 2.85vw, 2.03rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  margin-bottom: .35rem;
  text-transform: uppercase;
}
.promo-panel span {
  align-self: end;
  background: var(--naranja);
  border-radius: 999px;
  color: #fff;
  font-size: .78rem;
  font-weight: 950;
  justify-self: start;
  padding: .32rem .7rem;
  text-shadow: 0 1px 0 rgba(68,48,79,.25);
  text-transform: uppercase;
  width: fit-content;
}
.promo-panel strong {
  font-family: "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  color: #fff;
  font-size: clamp(1.43rem, 2.85vw, 2.03rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  margin-top: .35rem;
  max-width: 16ch;
  overflow-wrap: anywhere;
  text-align: center;
  text-transform: uppercase;
}
.badge-orange, .badge-red { border-radius: 999px; color: #fff; font-size: .75rem; font-weight: 900; padding: .35rem .65rem; width: fit-content; }
.badge-orange { background: var(--naranja); }
.badge-red { background: var(--coral); }

.section-heading { align-items: end; display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-heading h2 {
  color: var(--uva);
  font-size: 1.65rem;
  font-weight: 950;
  position: relative;
}
.section-heading h2::after {
  background: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta));
  border-radius: 999px;
  content: "";
  display: block;
  height: .28rem;
  margin-top: .35rem;
  width: 4.5rem;
}
.section-heading a { color: var(--naranja); font-weight: 900; }

.about-band {
  background:
    radial-gradient(circle at 8% 18%, rgba(255,210,26,.42) 0 7rem, transparent 7.1rem),
    radial-gradient(circle at 94% 80%, rgba(0,153,168,.18) 0 10rem, transparent 10.1rem),
    linear-gradient(135deg, #fffdf4 0%, #fff7d9 48%, #fff 100%);
  border-top: 4px solid var(--amarillo);
  overflow: hidden;
  position: relative;
  scroll-margin-top: 7rem;
}

.about-confetti {
  inset: 0;
  opacity: .55;
  pointer-events: none;
  position: absolute;
}

.about-confetti::before,
.about-confetti::after {
  border-radius: 999px;
  content: "";
  position: absolute;
  transform: rotate(-18deg);
}

.about-confetti::before {
  background: var(--coral);
  box-shadow:
    5rem 4rem 0 var(--amarillo),
    11rem -1rem 0 var(--turquesa),
    19rem 6rem 0 var(--oliva);
  height: .65rem;
  left: 3%;
  top: 12%;
  width: 1.8rem;
}

.about-confetti::after {
  background: var(--turquesa);
  bottom: 12%;
  box-shadow:
    -6rem -2rem 0 var(--naranja),
    -13rem 2rem 0 var(--amarillo),
    -21rem -3rem 0 var(--coral);
  height: .65rem;
  right: 4%;
  width: 1.8rem;
}

.about-layout {
  align-items: center;
  display: grid;
  gap: clamp(1.5rem, 4vw, 4.5rem);
  grid-template-columns: minmax(0, 1.15fr) minmax(20rem, .85fr);
  padding-bottom: 1.5rem;
  padding-top: 3.5rem;
  position: relative;
  z-index: 1;
}

.about-copy {
  align-content: center;
  display: grid;
  gap: 1.15rem;
}

.about-kicker {
  align-items: center;
  color: var(--uva) !important;
  display: flex;
  font-size: .86rem !important;
  font-weight: 950;
  gap: .55rem;
  text-transform: uppercase;
}

.about-kicker span {
  background: var(--coral);
  border-radius: 999px;
  color: #fff;
  display: inline-flex;
  padding: .42rem .75rem;
}

.about-copy h2 {
  color: var(--uva);
  font-size: clamp(2rem, 4vw, 3.35rem);
  font-weight: 950;
  letter-spacing: 0;
  line-height: 1;
  max-width: 48rem;
}

.about-copy h2 em {
  color: var(--coral);
  font-style: normal;
}

.about-copy p {
  color: #514b44;
  font-size: 1.02rem;
  max-width: 44rem;
}

.about-story-bubbles {
  display: grid;
  gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 44rem;
}

.about-story-bubble {
  background: #fff;
  border: 2px solid var(--story-color);
  border-radius: 1.2rem;
  box-shadow: 4px 5px 0 var(--story-shadow);
  display: grid;
  gap: .5rem;
  padding: .8rem .9rem;
  position: relative;
}

.about-story-bubble::before {
  background: var(--story-color);
  border: 3px solid #fff;
  border-radius: 50%;
  content: "";
  height: .85rem;
  position: absolute;
  right: .75rem;
  top: -.5rem;
  width: .85rem;
}

.about-story-bubble-yellow {
  --story-color: #F4C64E;
  --story-shadow: rgba(244,198,78,.28);
}

.about-story-bubble-cyan {
  --story-color: #0099A8;
  --story-shadow: rgba(0,153,168,.2);
}

.about-copy .about-story-bubble p {
  color: #514b44;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.42;
}

.about-pillars {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: .25rem;
}

.about-pillars .about-pillar {
  align-items: center;
  background: #fff;
  border: 1px solid rgba(68,48,79,.1);
  border-left: 5px solid var(--pillar-color);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(68,48,79,.07);
  display: flex;
  gap: .75rem;
  min-height: 5.4rem;
  padding: .9rem;
  position: relative;
  text-align: left;
  transition: box-shadow .18s ease, transform .18s ease;
  width: 100%;
}

.about-pillars .about-pillar:hover,
.about-pillars .about-pillar:focus-visible {
  box-shadow: 0 15px 28px rgba(68,48,79,.13);
  transform: translateY(-2px);
}

.about-pillars .about-pillar:focus-visible {
  outline: 3px solid rgba(244,198,78,.5);
  outline-offset: 2px;
}

.about-pillar-red { --pillar-color: var(--coral); }
.about-pillar-orange { --pillar-color: var(--naranja); }
.about-pillar-teal {
  --pillar-color: #0099A8;
  background: #F1FCFD;
  background: linear-gradient(90deg, rgba(0,153,168,.1), #fff 42%);
  border-left: 5px solid #0099A8;
}
.about-pillar-olive { --pillar-color: var(--oliva); }

.about-pillar-teal .about-pillar-mark {
  background: #DFF9FB;
  color: #007B87 !important;
}

.about-pillar-mark {
  align-items: center;
  background: color-mix(in srgb, var(--pillar-color) 14%, white);
  border-radius: 50%;
  color: var(--pillar-color) !important;
  display: inline-flex;
  flex: 0 0 2.55rem;
  font-size: 1.3rem !important;
  font-weight: 950;
  height: 2.55rem;
  justify-content: center;
}

.about-pillars .about-pillar > div {
  display: grid;
  gap: .25rem;
  padding-right: 1.5rem;
}

.about-pillars strong {
  color: var(--uva);
  font-weight: 950;
  line-height: 1.05;
}

.about-pillars span {
  color: #5f5a52;
  font-size: .9rem;
}

.about-pillar-action {
  bottom: .45rem;
  color: var(--pillar-color) !important;
  font-size: .62rem !important;
  font-weight: 950;
  position: absolute;
  right: .6rem;
  text-transform: uppercase;
}

.about-detail-open { overflow: hidden; }

.about-detail-overlay {
  align-items: center;
  background: rgba(68,48,79,.56);
  display: flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  padding: 1rem;
  position: fixed;
  transition: opacity .18s ease;
  z-index: 120;
}
.about-detail-overlay[hidden] { display: none; }
.about-detail-overlay.is-open { opacity: 1; }

.about-detail-bubble {
  --detail-color: #F4C64E;
  background: #fff;
  border: 4px solid var(--detail-color);
  border-radius: 2rem;
  box-shadow: 10px 12px 0 rgba(68,48,79,.88);
  display: grid;
  gap: .8rem;
  max-width: 38rem;
  padding: 2rem;
  position: relative;
  transform: translateY(20px) scale(.92);
  transition: transform .2s ease;
  width: 100%;
}
.about-detail-overlay.is-open .about-detail-bubble { transform: translateY(0) scale(1); }
.about-detail-bubble::before {
  background: var(--detail-color);
  border-radius: 50%;
  content: "";
  height: 5rem;
  opacity: .12;
  position: absolute;
  right: 1.2rem;
  top: 1rem;
  width: 5rem;
}
.about-detail-bubble::after {
  background: #fff;
  border-bottom: 4px solid var(--detail-color);
  border-right: 4px solid var(--detail-color);
  bottom: -1.05rem;
  content: "";
  height: 2rem;
  left: 4rem;
  position: absolute;
  transform: rotate(45deg);
  width: 2rem;
}
.about-detail-close {
  align-items: center;
  background: var(--uva);
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  display: flex;
  font-size: 1.6rem;
  font-weight: 900;
  height: 2.5rem;
  justify-content: center;
  line-height: 1;
  position: absolute;
  right: -.7rem;
  top: -.7rem;
  width: 2.5rem;
  z-index: 2;
}
.about-detail-mark {
  align-items: center;
  background: var(--detail-color);
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  font-size: 1.5rem;
  font-weight: 950;
  height: 3.5rem;
  justify-content: center;
  width: 3.5rem;
}
.about-detail-label {
  color: var(--detail-color) !important;
  font-size: .72rem !important;
  font-weight: 950;
  text-transform: uppercase;
}
.about-detail-bubble h3 {
  color: var(--uva);
  font-size: clamp(1.6rem, 4vw, 2.35rem);
  font-weight: 950;
  line-height: 1.02;
}
.about-detail-bubble > p:not(.about-detail-label) {
  color: #514b44;
  font-size: 1rem;
  line-height: 1.65;
}
.about-detail-bubble > strong {
  border-left: 4px solid var(--detail-color);
  color: var(--uva);
  padding-left: .8rem;
}
.about-slogan {
  border-left: 4px solid var(--amarillo);
  color: var(--coral) !important;
  font-size: 1.08rem !important;
  font-weight: 950;
  padding-left: .85rem;
}

.about-character {
  align-self: end;
  min-height: 35rem;
  position: relative;
}

.about-character img {
  bottom: -1rem;
  display: block;
  filter: drop-shadow(0 20px 20px rgba(68,48,79,.16));
  height: auto;
  max-height: 34rem;
  max-width: 28rem;
  object-fit: contain;
  object-position: bottom center;
  position: absolute;
  right: -2.25rem;
  width: 100%;
}

.speech-bubble {
  background: #fff;
  border: 3px solid var(--uva);
  border-radius: 1.5rem;
  box-shadow: 7px 7px 0 var(--amarillo);
  color: var(--texto);
  display: grid;
  gap: .35rem;
  left: -3.25rem;
  max-width: 16.5rem;
  padding: 1.1rem 1.15rem;
  position: absolute;
  top: -.5rem;
  z-index: 2;
}

.speech-bubble::after {
  background: #fff;
  border-bottom: 3px solid var(--uva);
  border-right: 3px solid var(--uva);
  content: "";
  height: 1.25rem;
  position: absolute;
  right: -0.72rem;
  top: 78%;
  transform: rotate(-45deg);
  width: 1.25rem;
}

.speech-bubble strong {
  color: var(--coral);
  font-size: 1.25rem;
  font-weight: 950;
}

.speech-bubble span {
  color: #514b44;
  font-size: .94rem;
  font-weight: 800;
}

.category-grid { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(128px, 160px)); }
.category-tile {
  align-items: end;
  aspect-ratio: 1.35 / 1;
  background:
    linear-gradient(135deg, rgba(244,198,78,.28), rgba(0,153,168,.14)),
    #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  display: flex;
  overflow: hidden;
  padding: .75rem;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-tile::before {
  background: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta), var(--oliva));
  content: "";
  height: .35rem;
  inset: 0 0 auto;
  position: absolute;
  z-index: 1;
}
.category-tile:hover, .category-tile:focus-visible { border-color: var(--primario); box-shadow: 0 14px 30px rgba(68,48,79,.1); transform: translateY(-2px); }
.category-tile:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.category-tile img { height: 100%; inset: 0; object-fit: cover; position: absolute; width: 100%; }
.category-tile span { background: #fff; border-radius: 8px; box-shadow: 0 8px 18px rgba(68,48,79,.1); color: var(--uva); font-size: .86rem; font-weight: 900; padding: .3rem .5rem; position: relative; z-index: 2; }

.product-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.catalog-product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.home-product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.product-card {
  background: #fff;
  border: 1px solid rgba(68,48,79,.12);
  border-radius: 8px;
  box-shadow: 0 10px 26px rgba(68,48,79,.06);
  overflow: hidden;
  position: relative;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.product-card::before,
.product-card::after {
  background: linear-gradient(90deg, var(--coral), var(--naranja), var(--primario), var(--menta), var(--oliva));
  content: "";
  height: .28rem;
  position: absolute;
  z-index: 2;
}
.product-card::before { inset: 0 0 auto; }
.product-card::after { inset: auto 0 0; }
.product-card:hover, .product-card:focus-within { border-color: rgba(244,198,78,.85); box-shadow: 0 20px 42px rgba(68,48,79,.12); transform: translateY(-3px); }
.product-image:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.product-image {
  align-items: center;
  aspect-ratio: 1 / 1.18;
  background: #fff;
  display: flex;
  justify-content: center;
  overflow: hidden;
  padding: .75rem;
  position: relative;
}
.product-image img { height: 100%; object-fit: contain; object-position: center; transition: transform .24s ease; width: 100%; }
.product-card:hover .product-image img { transform: scale(1.03); }
.product-placeholder {
  align-items: center;
  background: var(--primario);
  border: 2px solid #111;
  border-radius: 8px;
  color: #111;
  display: inline-flex;
  font-size: 2rem;
  font-weight: 950;
  height: 4rem;
  justify-content: center;
  text-transform: uppercase;
  width: 4rem;
}
.product-card-body { display: grid; gap: .45rem; padding: .85rem; }
.product-category { color: var(--menta); font-size: .68rem; font-weight: 950; text-transform: uppercase; }
.subcategory-list { display: flex; flex-wrap: wrap; gap: .25rem; }
.subcategory-list span {
  background: var(--cielo);
  border: 1px solid rgba(0,153,168,.16);
  border-radius: 999px;
  color: #075f66;
  font-size: .66rem;
  font-weight: 900;
  padding: .18rem .42rem;
}
.product-title {
  display: -webkit-box;
  font-size: .95rem;
  font-weight: 950;
  line-height: 1.12;
  min-height: 2.15rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.product-meta { color: #666; font-size: .8rem; }
.product-mode-badge,
.product-featured,
.product-ribbon {
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 950;
  line-height: 1;
  padding: .4rem .6rem;
  position: absolute;
}
.product-mode-badge { background: var(--uva); color: #fff; right: .75rem; top: .75rem; }
.product-featured { background: linear-gradient(135deg, var(--primario), #fff07a); color: #111; right: .75rem; top: 2.65rem; }
.product-badge-stack {
  display: grid;
  gap: .25rem;
  left: .75rem;
  position: absolute;
  top: .75rem;
  z-index: 3;
}
.product-ribbon { position: static; width: fit-content; }
.product-ribbon.sold { background: var(--coral); color: #fff; }
.product-ribbon.trend { background: var(--coral); color: #fff; }
.price { color: var(--coral); font-size: 1.05rem; font-weight: 950; }

.catalog-hero {
  background: linear-gradient(135deg, rgba(244,198,78,.42), rgba(0,153,168,.12), #fff);
  border-bottom: 1px solid var(--primario);
}
.catalog-hero.mayor {
  background: linear-gradient(135deg, rgba(241,90,56,.22), rgba(244,198,78,.32), #fff);
  border-bottom-color: var(--naranja);
}
.catalog-hero h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 950; line-height: 1; max-width: 48rem; }
.catalog-summary { color: #525252; font-weight: 800; margin-top: .75rem; }
.catalog-layout {
  align-items: start;
  display: grid;
  gap: 1.2rem;
  grid-template-columns: 260px minmax(0, 1fr);
}
.catalog-sidebar {
  position: sticky;
  top: 6rem;
}
.catalog-results-bar {
  align-items: center;
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 10px 24px rgba(68,48,79,.05);
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding: .7rem .85rem;
}
.catalog-results-bar strong { color: var(--uva); font-size: .92rem; }
.catalog-results-bar span { color: #666; font-size: .82rem; font-weight: 800; }
.catalog-filters {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(68,48,79,.06);
  display: grid;
  gap: .75rem;
  padding: .85rem;
}
.filter-heading {
  align-items: center;
  color: var(--uva);
  display: flex;
  gap: .45rem;
  font-size: .92rem;
}
.filter-heading svg { height: 1rem; width: 1rem; }

.input {
  border: 1px solid var(--borde);
  border-radius: 8px;
  background: #fff;
  min-height: 2.75rem;
  padding: .7rem .85rem;
  width: 100%;
}
.quantity-choice {
  font-size: .72rem;
  gap: .25rem;
}
.quantity-choice .input {
  font-size: .78rem;
  min-height: 2.2rem;
  padding: .4rem .5rem;
}
.input:focus { border-color: var(--primario); outline: 3px solid rgba(245,197,24,.25); }
label { color: #404040; display: grid; font-size: .9rem; font-weight: 800; gap: .35rem; }

.detail-image { align-items: center; aspect-ratio: 1 / .9; background: #fff; border: 1px solid var(--borde); border-radius: 8px; display: flex; justify-content: center; overflow: hidden; padding: 1rem; }
.detail-image img { height: 100%; object-fit: contain; width: 100%; }
.detail-copy { align-content: start; display: grid; gap: 1.1rem; }
.detail-copy h1 { font-size: clamp(2rem, 5vw, 4rem); font-weight: 950; line-height: 1; }
.detail-copy p { color: #525252; }
.stock-pill {
  background: #ecfdf5;
  border: 1px solid rgba(27,153,139,.25);
  border-radius: 999px;
  color: #075f55 !important;
  font-size: .9rem;
  font-weight: 900;
  padding: .45rem .7rem;
  width: fit-content;
}
.price-tier-panel {
  background: #fff;
  border: 1px solid rgba(0,153,168,.22);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,153,168,.08);
  padding: 1rem;
}

.auth-shell { display: grid; min-height: 70vh; place-items: center; padding: 2rem 1rem; }
.auth-card, .checkout-form, .cart-summary, .admin-form {
  border: 1px solid rgba(68,48,79,.12);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,248,216,.7), #fff 8rem),
    #fff;
  box-shadow: 0 12px 30px rgba(26,26,26,.06);
  padding: 1.5rem;
}
.auth-card { display: grid; gap: 1rem; max-width: 28rem; width: 100%; }
.auth-card h1, .checkout-form h1, .cart-summary h2 { font-size: 1.8rem; font-weight: 950; }
.form-error { background: #fff1f2; border: 1px solid var(--coral); border-radius: 8px; color: #9f1239; padding: .75rem; }
.payment-options { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
.payment-options label, .check-label { align-items: center; background: #fff; border: 1px solid var(--borde); border-radius: 8px; display: flex; gap: .5rem; padding: .75rem; }

.empty-state { background: #fff; border: 1px dashed var(--borde); border-radius: 8px; color: #525252; padding: 1rem; }
.notif-carrito {
  background: var(--uva);
  border-left: 5px solid var(--primario);
  border-radius: 8px;
  bottom: 1rem;
  color: #fff;
  font-weight: 800;
  padding: .9rem 1rem;
  position: fixed;
  right: 1rem;
  z-index: 80;
}

.admin-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 1.5rem; }
.table-shell { background: #fff; border: 1px solid var(--borde); border-radius: 8px; box-shadow: 0 10px 26px rgba(26,26,26,.05); overflow: hidden; }
.table-title { background: linear-gradient(90deg, var(--primario), #fff07a); font-weight: 950; padding: .85rem 1rem; }
table { border-collapse: collapse; min-width: 720px; width: 100%; }
th, td { border-bottom: 1px solid var(--borde); padding: .8rem; text-align: left; vertical-align: top; }
th { background: #fafafa; font-size: .8rem; text-transform: uppercase; }
.config-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.config-card, .setup-panel {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 8px;
  overflow: hidden;
}
.config-card { display: grid; gap: .9rem; padding: 1rem; }
.config-card h2 { font-size: 1.05rem; font-weight: 950; line-height: 1.15; }
.config-card p, .setup-step p { color: #525252; font-size: .92rem; }
.status-ok, .status-pending {
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 950;
  padding: .3rem .55rem;
  white-space: nowrap;
}
.status-ok { background: #dcfce7; color: #166534; }
.status-pending { background: #fff8d8; color: #854d0e; }
.var-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.var-list code, .env-snippet {
  background: #fafafa;
  border: 1px solid var(--borde);
  border-radius: 8px;
}
.var-list code { font-size: .75rem; font-weight: 800; padding: .3rem .45rem; }
.setup-step { border: 1px solid var(--borde); border-radius: 8px; padding: 1rem; }
.setup-step strong { display: block; font-weight: 950; margin-bottom: .25rem; }
.env-snippet { font-size: .85rem; margin: 1rem; overflow-x: auto; padding: 1rem; white-space: pre; }

.pagination {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.pagination span {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 999px;
  color: #525252;
  font-size: .9rem;
  font-weight: 900;
  padding: .55rem .8rem;
}

.whatsapp-float {
  align-items: center;
  background: linear-gradient(135deg, #25D366, #128C7E);
  border: 3px solid #fff;
  border-radius: 999px;
  bottom: 1.25rem;
  box-shadow: 0 14px 32px rgba(37,211,102,.34), 0 6px 18px rgba(68,48,79,.18);
  color: #fff;
  display: inline-flex;
  height: 4rem;
  justify-content: center;
  position: fixed;
  right: 1.25rem;
  transition: box-shadow .18s ease, filter .18s ease, transform .18s ease;
  width: 4rem;
  z-index: 90;
}

.whatsapp-float::before {
  border: 1px solid rgba(37,211,102,.38);
  border-radius: inherit;
  content: "";
  inset: -.45rem;
  position: absolute;
}

.whatsapp-float:hover {
  box-shadow: 0 18px 38px rgba(37,211,102,.42), 0 8px 22px rgba(68,48,79,.22);
  filter: saturate(1.08);
  transform: translateY(-2px) scale(1.03);
}

.whatsapp-float svg {
  height: 2.25rem;
  position: relative;
  width: 2.25rem;
}

.whatsapp-float.is-disabled {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  cursor: not-allowed;
  filter: grayscale(.2);
}

.whatsapp-float.is-disabled::before { border-color: rgba(156,163,175,.35); }

@media (max-width: 640px) {
  .site-header nav {
    display: flex;
    position: relative;
  }
  .brand-home { flex: 1 1 auto; }
  .brand-logo-frame {
    flex-basis: 4.25rem;
    height: 4.25rem;
  }
  .brand-wordmark-home {
    left: 50%;
    min-width: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(11.5rem, calc(100vw - 10rem));
  }
  .brand-wordmark-image { min-width: 0; }
  .brand-wordmark-image img {
    max-height: 4.25rem;
    object-position: center;
  }
  .nav-toggle {
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    z-index: 2;
  }
  .carousel-shell { aspect-ratio: 1 / 1; min-height: 330px; }
  .carousel-copy { bottom: 1rem; left: 1rem; max-width: calc(100% - 2rem); }
  .section-heading { align-items: start; flex-direction: column; }
  .catalog-layout { display: block; }
  .catalog-sidebar { position: static; }
  .catalog-filters { display: grid; }
  .catalog-results-bar { margin-top: 1rem; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-tile { aspect-ratio: 1.55 / 1; min-height: 0; }
  .product-grid { gap: .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-card-body { padding: .7rem; }
  .product-title { font-size: .86rem; line-height: 1.12; min-height: 1.95rem; }
  .product-card .price { font-size: 1rem; }
  .product-card .btn-secondary { min-height: 2.25rem; padding: .5rem .65rem; }
  .product-image { aspect-ratio: 1 / 1.18; padding: .45rem; }
  .about-band { scroll-margin-top: 5rem; }
  .about-layout {
    gap: .5rem;
    grid-template-columns: 1fr;
    padding-bottom: 0;
    padding-top: 2.5rem;
  }
  .about-copy h2 { font-size: 2.15rem; }
  .about-story-bubbles {
    gap: .6rem;
    grid-template-columns: 1fr;
  }
  .about-story-bubble {
    gap: .35rem;
    padding: .75rem .85rem;
  }
  .about-copy .about-story-bubble p {
    font-size: .84rem;
    line-height: 1.38;
  }
  .about-detail-bubble {
    border-radius: 1.4rem;
    padding: 1.5rem 1.2rem;
  }
  .about-detail-bubble > p:not(.about-detail-label) {
    font-size: .93rem;
    line-height: 1.55;
  }
  .about-pillars { grid-template-columns: 1fr; }
  .about-character {
    min-height: 32rem;
    margin-top: .5rem;
  }
  .about-character img {
    bottom: -2rem;
    left: 50%;
    max-height: 24rem;
    max-width: 20rem;
    right: auto;
    transform: translateX(-50%);
  }
  .speech-bubble {
    left: 50%;
    max-width: min(16rem, calc(100% - 3rem));
    padding: 1rem 1.05rem;
    top: -.25rem;
    transform: translateX(-50%);
  }
  .speech-bubble::after {
    bottom: -0.72rem;
    left: 68%;
    right: auto;
    top: auto;
    transform: rotate(45deg);
  }
  .whatsapp-float {
    bottom: 1rem;
    height: 3.5rem;
    right: 1rem;
    width: 3.5rem;
  }
  .whatsapp-float svg { height: 2rem; width: 2rem; }
}

.whatsapp-loading{display:none}.whatsapp-float.is-loading{border-radius:2rem;gap:.65rem;overflow:hidden;padding:0 1rem;width:12.5rem}.whatsapp-float.is-loading>svg{display:none}.whatsapp-float.is-loading .whatsapp-loading{align-items:center;display:flex;gap:.6rem;white-space:nowrap}.whatsapp-loading i{animation:wa-spin .7s linear infinite;border:3px solid rgba(255,255,255,.4);border-radius:50%;border-top-color:#fff;height:1.25rem;width:1.25rem}.whatsapp-loading small{font-size:.78rem;font-weight:900}@keyframes wa-spin{to{transform:rotate(360deg)}}
.social-band{background:linear-gradient(90deg,#fff1f3,#fff8cf,#e6fbfb,#f1f5df);border-top:1px solid #f2d45c;text-align:center}.social-band h2{font-size:clamp(1.8rem,4vw,3rem);font-weight:1000}.social-band>div>p:not(.eyebrow){color:#525252;margin:.5rem auto 1.5rem;max-width:44rem}.social-links{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}.social-links button{align-items:center;background:#fff;border:2px solid #f2d45c;border-radius:999px;box-shadow:0 8px 18px rgba(45,35,55,.08);display:flex;gap:.5rem;padding:.75rem 1rem}.social-links button:nth-child(1){color:#d7264f}.social-links button:nth-child(2){color:#078e9c}.social-links button:nth-child(3){color:#ef4f3f}.social-links button:nth-child(4){color:#708734}
.admin-shell{background:#f7f8fa;display:grid;grid-template-columns:250px minmax(0,1fr);min-height:calc(100vh - 90px)}.admin-sidebar{background:#34233d;color:#fff;padding:1.5rem}.admin-sidebar small{color:#ffd429;font-weight:900;text-transform:uppercase}.admin-sidebar h1{font-size:1.6rem;font-weight:1000}.admin-sidebar nav{display:grid;gap:.45rem;margin-top:2rem;position:sticky;top:7rem}.admin-sidebar a{align-items:center;border-radius:.5rem;display:flex;gap:.7rem;padding:.8rem}.admin-sidebar a:hover,.admin-sidebar a.active{background:#ffd429;color:#34233d}.admin-content{min-width:0;padding:2rem}.admin-heading{align-items:center;display:flex;justify-content:space-between;margin-bottom:1.5rem}.admin-heading p{color:#078e9c;font-weight:900}.admin-heading h2{font-size:2rem;font-weight:1000}.admin-primary{align-items:center;background:#ef4f3f;border-radius:.45rem;color:#fff;display:inline-flex;font-weight:900;gap:.5rem;justify-content:center;padding:.75rem 1rem}.admin-alert{background:#fee2e2;border-left:5px solid #dc2626;margin-bottom:1rem;padding:1rem}
.stat-grid{display:grid;gap:1rem;grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:1.25rem}.stat-card{background:#fff;border:1px solid var(--borde);border-top-width:5px;border-radius:.5rem;box-shadow:0 8px 24px rgba(30,30,40,.07);display:grid;gap:.4rem;padding:1.2rem}.stat-card svg{height:1.35rem}.stat-card span{color:#666;font-size:.82rem;font-weight:800}.stat-card strong{font-size:1.6rem;font-weight:950}.stat-card.cyan{border-color:#079aaa}.stat-card.yellow{border-color:#ffd429}.stat-card.red{border-color:#ef4f3f}.stat-card.olive{border-color:#7d9139}.admin-dashboard-grid{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}.admin-panel,.admin-form{background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 8px 24px rgba(30,30,40,.05);padding:1.2rem}.admin-panel h3,.admin-form h3{align-items:center;display:flex;font-size:1.1rem;font-weight:1000;gap:.5rem;margin-bottom:1rem}.admin-empty{background:#f9fafb;color:#666;padding:1rem}.ranking{display:grid;gap:.5rem}.ranking>div{align-items:center;border-bottom:1px solid #eee;display:flex;gap:.7rem;padding:.6rem 0}.ranking>div>b{background:#ffd429;border-radius:50%;display:grid;height:1.8rem;place-items:center;width:1.8rem}.ranking>div>span{flex:1}.ranking>div>strong{color:#078e9c}
.admin-workspace{align-items:start;display:grid;gap:1.25rem;grid-template-columns:390px minmax(0,1fr)}.admin-form{display:grid;gap:.8rem}.admin-form>label,.field-pair label{display:grid;font-size:.82rem;font-weight:900;gap:.3rem}.admin-form input,.admin-form select,.admin-form textarea{background:#fff;border:1px solid #d1d5db;border-radius:.4rem;font-weight:400;padding:.7rem;width:100%}.admin-form textarea{min-height:5rem}.field-pair{display:grid;gap:.7rem;grid-template-columns:1fr 1fr}.check-row{display:flex;flex-wrap:wrap;gap:1rem}.check-row label{align-items:center;display:flex;gap:.4rem}.check-row input{width:auto}.code-input{font-family:monospace;font-size:.75rem}.upload-drop{align-items:center!important;background:#f3fbfc!important;border:2px dashed #079aaa!important;border-radius:.6rem!important;cursor:pointer!important;display:flex!important;flex-direction:column!important;padding:1rem!important;text-align:center}.upload-drop input{display:none}.upload-drop.dragging{background:#fff4b8!important;transform:scale(1.01)}.upload-drop img{height:8rem;margin-top:.7rem;object-fit:contain;width:100%}.upload-drop span{color:#666;font-size:.72rem;font-weight:500}
.admin-table-wrap{overflow:auto}.admin-table-wrap table{border-collapse:collapse;width:100%}.admin-table-wrap th{background:#34233d;color:#fff;font-size:.8rem;padding:.8rem;text-align:left}.admin-table-wrap td{border-bottom:1px solid #eee;padding:.75rem}.product-cell{align-items:center;display:flex;gap:.65rem}.product-cell img{background:#fff;border-radius:.35rem;height:3rem;object-fit:contain;width:3rem}.product-cell span{display:grid}.product-cell small{color:#777}.row-actions{display:flex;gap:.4rem}.row-actions a,.row-actions button{background:#edfafa;border-radius:.35rem;color:#087f89;display:grid;padding:.5rem;place-items:center}.row-actions button{background:#fee2e2;color:#dc2626}.status-pill{background:#ecfdf5;border-radius:999px;color:#047857;font-size:.75rem;font-weight:900;padding:.3rem .55rem}.banner-admin-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.banner-admin-card{background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;overflow:hidden}.banner-admin-card>img{aspect-ratio:16/8;object-fit:cover;width:100%}.banner-admin-card>div{display:grid;gap:.4rem;padding:.9rem}.banner-admin-card span{color:#666;font-size:.8rem}
@media(max-width:900px){.admin-shell{grid-template-columns:1fr}.admin-sidebar{padding:1rem}.admin-sidebar nav{display:flex;margin-top:1rem;overflow:auto;position:static}.admin-content{padding:1rem}.stat-grid{grid-template-columns:repeat(2,1fr)}.admin-workspace,.admin-dashboard-grid{grid-template-columns:1fr}}

/* Branding refinements */
.brand-wordmark-image{overflow:visible}
.brand-wordmark-image img{max-height:5rem;transform:scale(1.32);transform-origin:center}
.site-footer{background:repeating-linear-gradient(115deg,rgba(255,255,255,.22) 0 8px,transparent 8px 34px),repeating-linear-gradient(35deg,rgba(200,23,69,.12) 0 6px,transparent 6px 42px),#FFD21A}
.site-footer p{color:#44304F}
.social-links button{display:none}
.social-links a{align-items:center;background:#fff;border:3px solid currentColor;border-radius:50%;box-shadow:0 8px 18px rgba(45,35,55,.1);display:grid;height:4.5rem;justify-items:center;place-content:center;position:relative;transition:transform .18s ease,box-shadow .18s ease;width:4.5rem}
.social-links a:hover{box-shadow:0 12px 24px rgba(45,35,55,.18);transform:translateY(-4px) scale(1.04)}
.social-links a i{font-size:1.75rem}.social-links a span{bottom:-1.7rem;color:#44304f;font-size:.72rem;font-weight:900;position:absolute}
.social-links a:nth-child(1){color:#d7264f}.social-links a:nth-child(2){color:#1877f2}.social-links a:nth-child(3){color:#111}.social-links a:nth-child(4){color:#f00}.social-links{padding-bottom:1.8rem}
.language-toggle{align-items:center;background:rgba(255,255,255,.72);border:2px solid rgba(68,48,79,.18);border-radius:999px;color:#44304f;display:inline-flex;font-size:.78rem;font-weight:1000;gap:.35rem;padding:.5rem .65rem}
.language-toggle svg{height:1rem;width:1rem}
@media(max-width:640px){.brand-wordmark-image img{transform:scale(1.18)}}

/* Compact mobile navigation and horizontal banners */
.carousel-shell{aspect-ratio:16/9;min-height:0}
.carousel-slide img{background:#fff;object-fit:contain}
@media(max-width:640px){
  .mobile-menu{
    background:#FFD21A;
    border:2px solid rgba(68,48,79,.18);
    border-radius:.6rem;
    box-shadow:0 16px 35px rgba(68,48,79,.22);
    position:absolute!important;
    right:.75rem;
    top:calc(100% - .25rem);
    width:min(15rem,calc(100vw - 1.5rem));
    z-index:60;
  }
  .mobile-menu>div{border:0!important;gap:.25rem!important;padding:.55rem!important}
  .mobile-menu .nav-link,.mobile-menu .btn-primary{font-size:.82rem;min-height:2.15rem;padding:.45rem .6rem;width:100%}
  .carousel-shell{aspect-ratio:16/9;min-height:0}
  .carousel-shell:has(.default-hero){aspect-ratio:auto;min-height:22rem}
  .carousel-copy{background:rgba(255,255,255,.9);border-left-width:4px;bottom:.45rem;gap:0;left:.55rem;max-width:calc(100% - 4.5rem);padding:.45rem .55rem}
  .carousel-copy strong, .carousel-copy h1{font-size:clamp(.82rem,4vw,1.1rem);line-height:1.05;margin:0}
  .carousel-copy small{display:none}
  .carousel-btn{height:2rem;width:2rem}
  .default-hero{padding:1.25rem}
  .default-hero h1{font-size:clamp(1.5rem,7vw,2.25rem)}
  .default-hero p{font-size:.85rem}
}

.category-admin-layout{align-items:start;display:grid;gap:1.25rem;grid-template-columns:390px minmax(0,1fr)}.category-admin-forms{display:grid;gap:1rem}.upload-drop.compact{min-height:8rem}.category-tree{display:grid;gap:1rem}.tree-root{background:#fff;border:1px solid #e5e7eb;border-left:6px solid #ffd429;border-radius:.55rem;box-shadow:0 8px 24px rgba(30,30,40,.05);padding:1rem}.tree-row{align-items:center;display:flex;gap:.65rem;min-height:2.5rem}.tree-row>strong,.tree-row>span{flex:1}.tree-row img{background:#f7f7f7;border-radius:.35rem;height:2.5rem;object-fit:contain;width:2.5rem}.tree-child{border-left:2px solid #079aaa;margin-left:1.2rem;padding-left:1rem}.tree-leaf{border-left:2px solid #ef4f3f;margin-left:1.5rem;padding-left:1rem}.node-picker{border:1px solid #d1d5db;border-radius:.45rem;display:grid;gap:.45rem;max-height:15rem;overflow:auto;padding:.7rem}.node-picker legend{font-size:.82rem;font-weight:900;padding:0 .3rem}.node-picker>div{border-bottom:1px solid #eee;display:grid;gap:.3rem;padding:.35rem 0}.node-picker label{align-items:center;display:flex;font-size:.78rem;gap:.4rem}.node-picker input{width:auto}.node-picker .node-leaf{padding-left:1rem}
.catalog-pro-layout{align-items:start;display:grid;gap:1.25rem;grid-template-columns:270px minmax(0,1fr)}.catalog-filter-panel{background:#fff;border:1px solid #e5e7eb;border-top:5px solid #ffd429;border-radius:.5rem;box-shadow:0 8px 24px rgba(30,30,40,.06);position:sticky;top:7rem}.catalog-filter-panel form{display:grid;gap:.85rem;padding:1rem}.filter-title{align-items:center;display:flex;justify-content:space-between}.filter-title a{color:#078e9c;font-size:.75rem;font-weight:900}.catalog-filter-panel label{display:grid;font-size:.78rem;font-weight:900;gap:.25rem}.catalog-filter-panel input,.catalog-filter-panel select{border:1px solid #d1d5db;border-radius:.4rem;background:#fff;padding:.6rem;width:100%}.filter-price{display:grid;gap:.5rem;grid-template-columns:1fr 1fr}.filter-checks{background:#f8fafc;border-radius:.4rem;display:grid;gap:.45rem;padding:.7rem}.filter-checks label{align-items:center;display:flex;gap:.45rem}.filter-checks input{width:auto}.catalog-count{color:#666;margin-bottom:1rem}.catalog-count strong{color:#078e9c;font-size:1.2rem}
@media(max-width:900px){.category-admin-layout,.catalog-pro-layout{grid-template-columns:1fr}.catalog-filter-panel{position:static}.catalog-filter-panel form{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-title,.filter-checks,.catalog-filter-panel .btn-primary{grid-column:1/-1}}
@media(max-width:640px){.catalog-filter-panel form{grid-template-columns:1fr}.filter-title,.filter-checks,.catalog-filter-panel .btn-primary{grid-column:auto}.category-admin-layout{grid-template-columns:1fr}}

.catalog-filter-disclosure{background:#fff;border:1px solid #eadb99;border-radius:.55rem;box-shadow:0 7px 20px rgba(68,48,79,.06);margin-bottom:1.25rem;overflow:hidden}.catalog-filter-disclosure>summary{align-items:center;background:#fff8d5;cursor:pointer;display:flex;justify-content:space-between;list-style:none;padding:.85rem 1rem}.catalog-filter-disclosure>summary::-webkit-details-marker{display:none}.catalog-filter-disclosure>summary span{align-items:center;color:#44304f;display:flex;font-weight:1000;gap:.55rem}.catalog-filter-disclosure>summary small{color:#087f89;font-weight:800}.catalog-filter-disclosure[open]>summary{border-bottom:1px solid #eadb99}.catalog-filter-disclosure .catalog-filter-panel{border:0;border-radius:0;box-shadow:none;position:static}.catalog-filter-disclosure .catalog-filter-panel form{grid-template-columns:repeat(4,minmax(0,1fr))}.catalog-filter-disclosure .filter-title{display:none}.catalog-filter-disclosure .filter-checks,.catalog-filter-disclosure .btn-primary{align-self:end}.catalog-results{min-width:0}
.global-search-toggle{align-items:center;background:#FFD21A;border:2px solid #fff3a5;border-radius:50%;box-shadow:0 5px 0 #d7a900,0 9px 16px rgba(68,48,79,.18);color:#44304f;display:grid;height:2.65rem;place-items:center;transition:transform .15s ease,box-shadow .15s ease;width:2.65rem}.global-search-toggle:hover{box-shadow:0 3px 0 #d7a900,0 7px 14px rgba(68,48,79,.2);transform:translateY(2px)}.global-search-toggle svg{height:1.25rem;width:1.25rem}
/* La instancia movil (hijo directo de nav, con md:hidden en el HTML) debe ocultarse en escritorio;
   la instancia de escritorio vive dentro de .desktop-actions y no se ve afectada. */
@media (min-width: 768px) { .site-header nav > .global-search-toggle { display: none; } }
.global-search-panel{background:#fff8d5;border:2px solid #FFD21A;border-radius:.65rem;box-shadow:0 18px 38px rgba(68,48,79,.2);left:50%;padding:.75rem;position:absolute;top:calc(100% - .15rem);transform:translateX(-50%);width:min(44rem,calc(100vw - 2rem));z-index:70}.global-search-panel form{align-items:center;background:#fff;border:2px solid #eadb99;border-radius:.5rem;display:flex;gap:.5rem;padding:.35rem}.global-search-panel form>svg{color:#d7a900;margin-left:.4rem}.global-search-panel input{flex:1;min-width:0;padding:.65rem}.global-search-panel button,.search-page-form button{background:#ef4f3f;border-radius:.4rem;color:#fff;font-weight:900;padding:.65rem 1rem}.global-search-panel p{color:#6b5c28;font-size:.74rem;margin:.45rem .4rem 0}
.search-page h1{font-size:clamp(2rem,5vw,3.5rem);font-weight:1000}.search-page-form{align-items:center;background:#fff;border:3px solid #FFD21A;border-radius:.7rem;box-shadow:0 12px 30px rgba(68,48,79,.1);display:flex;gap:.55rem;margin:1.3rem 0;padding:.45rem}.search-page-form>svg{color:#d7a900;margin-left:.55rem}.search-page-form input{flex:1;min-width:0;padding:.8rem}.search-hint{color:#666}.search-result-grid{display:grid;gap:.7rem}.search-result{align-items:center;background:#fff;border:1px solid #e5e7eb;border-left:5px solid #079aaa;border-radius:.5rem;display:grid;gap:.8rem;grid-template-columns:3.5rem 1fr auto;padding:.75rem;transition:transform .15s ease,box-shadow .15s ease}.search-result:hover{box-shadow:0 10px 24px rgba(68,48,79,.1);transform:translateX(3px)}.search-result>img,.search-result>span{background:#fff8d5;border-radius:.4rem;display:grid;height:3.5rem;object-fit:contain;place-items:center;width:3.5rem}.search-result>div{display:grid}.search-result small{color:#ef4f3f;font-size:.7rem;font-weight:1000;text-transform:uppercase}.search-result strong{font-size:1.05rem}.search-result p{color:#666;font-size:.82rem}
@media(max-width:900px){.catalog-filter-disclosure .catalog-filter-panel form{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.catalog-filter-disclosure .catalog-filter-panel form{grid-template-columns:1fr}.catalog-filter-disclosure>summary small{display:none}.global-search-panel{top:100%}.search-page-form button{padding:.65rem}.search-result{grid-template-columns:3rem 1fr}.search-result>img,.search-result>span{height:3rem;width:3rem}.search-result>svg{display:none}}

/* Header overlays never participate in layout */
.site-header>.global-search-panel{position:absolute;top:calc(100% + .45rem)}
.site-header>.mobile-menu{position:absolute}
@media(min-width:768px) and (max-width:1050px){
  .site-header nav{gap:.5rem;grid-template-columns:4.25rem minmax(10rem,1fr) auto}
  .brand-logo-frame{flex-basis:4.25rem;height:4.25rem}
  .brand-wordmark-image img{transform:scale(1.08)}
  .desktop-actions{gap:.35rem}
  .nav-more-button,.cart-link{padding:.55rem .65rem}
}
@media(max-width:767px){
  .site-header nav{align-items:center;display:flex;flex-wrap:nowrap;min-height:5.25rem}
  .site-header>.mobile-menu{background:linear-gradient(145deg,#fff8d5,#fff);border:2px solid #fff;border-radius:.65rem;box-shadow:0 18px 40px rgba(68,48,79,.24),0 0 0 1px rgba(68,48,79,.1);right:.75rem;top:calc(100% + .4rem);width:min(15rem,calc(100vw - 1.5rem));z-index:80}
  .mobile-menu>div{border:0!important;gap:.35rem!important;padding:.65rem!important}
  .mobile-menu .nav-link,.mobile-menu .btn-primary{--mobile-color:#079aaa;background:#fff;border:1px solid rgba(68,48,79,.08);border-left:5px solid var(--mobile-color);box-shadow:2px 2px 0 rgba(68,48,79,.08);color:#44304f;font-size:.82rem;min-height:2.25rem;padding:.45rem .65rem;width:100%}
  .mobile-menu a:nth-child(1){--mobile-color:#c81745}.mobile-menu a:nth-child(2){--mobile-color:#f15a38}.mobile-menu a:nth-child(3){--mobile-color:#0099a8}.mobile-menu a:nth-child(4){--mobile-color:#6f842d}.mobile-menu a:nth-child(5){--mobile-color:#c99710}.mobile-menu a:nth-child(6){--mobile-color:#c81745}
  .mobile-menu .nav-link:hover,.mobile-menu .nav-link:focus,.mobile-menu .btn-primary:hover{background:var(--mobile-color);border-color:var(--mobile-color);color:#fff;transform:translateX(-3px)}
  .site-header>.global-search-panel{top:calc(100% + .4rem);z-index:90}
}

/* Rich social and WhatsApp motion */
.social-links a:nth-child(1){background:linear-gradient(145deg,#ffecf5,#ffd1e7);color:#c81745}.social-links a:nth-child(2){background:linear-gradient(145deg,#edf5ff,#cfe3ff);color:#1877f2}.social-links a:nth-child(3){background:linear-gradient(145deg,#e8ffff,#ffcbd6);color:#111}.social-links a:nth-child(4){background:linear-gradient(145deg,#fff0f0,#ffcaca);color:#e60000}
.whatsapp-float,.whatsapp-float.is-disabled{background:linear-gradient(135deg,#2ee66f,#0fa958);color:#fff;filter:none}
.whatsapp-float.is-disabled{cursor:pointer}
.whatsapp-float.is-loading::after{animation:wa-message-flight .85s ease-in forwards;background:#fff;border-radius:.45rem;box-shadow:0 3px 10px rgba(0,0,0,.18);color:#17ad59;content:"➤";display:grid;height:1.7rem;place-items:center;position:absolute;right:1rem;top:.3rem;width:2rem}
@keyframes wa-message-flight{0%{opacity:0;transform:translate(-2.5rem,2rem) scale(.6) rotate(-18deg)}35%{opacity:1}100%{opacity:0;transform:translate(2.5rem,-2rem) scale(1) rotate(8deg)}}