@charset "UTF-8";
:root {
  --color-primary: #005bb1;
  --color-on-primary: #ffffff;
  --color-primary-container: #1f74d6;
  --color-primary-container-2: #005bb1;
  --color-on-primary-container: #fefcff;
  --color-secondary: #b60078;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fc4db1;
  --color-on-secondary-container: #5b003a;
  --color-tertiary: #954500;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #bb5800;
  --color-background: #f9f9fc;
  --color-on-background: #1a1c1e;
  --color-surface: #f9f9fc;
  --color-on-surface: #1a1c1e;
  --color-surface-variant: #e2e2e5;
  --color-on-surface-variant: #414753;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f6;
  --color-surface-container-high: #e8e8ea;
  --color-surface-container-highest: #e2e2e5;
  --color-outline: #727784;
  --color-outline-variant: #c1c6d5;
  --color-btn-shadow-primary: #00468b;
  --color-btn-shadow-surface: #c1c6d5;
  /* Legacy variables from armar.scss */
  --color-ink: #18212b;
  --color-muted: #647080;
  --color-blue: #075daf;
  --color-blue-dark: #064987;
  --color-pink: #c5117e;
  --color-pink-soft: #ffe1ee;
  --color-line: #d9e0eb;
  --color-amber: #ad4e0d;
  --color-bg-body: #ffffff;
}

[data-theme=dark] {
  --color-primary: #9fc9ff;
  --color-on-primary: #003268;
  --color-primary-container: #00468a;
  --color-primary-container-2: #9fc9ff;
  --color-on-primary-container: #d2e4ff;
  --color-secondary: #ffb1d9;
  --color-on-secondary: #630040;
  --color-secondary-container: #8c005b;
  --color-on-secondary-container: #ffd9ea;
  --color-tertiary: #ffb68c;
  --color-on-tertiary: #522300;
  --color-tertiary-container: #723400;
  --color-background: #1a1c1e;
  --color-on-background: #e2e2e5;
  --color-surface: #1a1c1e;
  --color-on-surface: #e2e2e5;
  --color-surface-variant: #414753;
  --color-on-surface-variant: #c1c6d5;
  --color-surface-container-lowest: #0e0e11;
  --color-surface-container-low: #1a1c1e;
  --color-surface-container-high: #282a2d;
  --color-surface-container-highest: #333538;
  --color-outline: #8c919f;
  --color-outline-variant: #414753;
  --color-btn-shadow-primary: #00224d;
  --color-btn-shadow-surface: #1a1c1e;
  /* Legacy variables from armar.scss */
  --color-ink: #e2e2e5;
  --color-muted: #8c919f;
  --color-blue: #9fc9ff;
  --color-blue-dark: #003268;
  --color-pink: #ffb1d9;
  --color-pink-soft: #630040;
  --color-line: #414753;
  --color-amber: #ffb68c;
  --color-bg-body: #0e0e11;
}

body {
  background-color: var(--color-background, var(--color-bg-body, #ffffff));
}

/* ==========================================================================
   1. TOKENS DE DISEÑO (Extraídos de DESIGN.md)
   ========================================================================== */
/* ==========================================================================
   2. MIXINS TIPOGRÁFICOS
   ========================================================================== */
/* ==========================================================================
   3. MIXINS DE COMPONENTES Y ESTRUCTURA (3D-Tactile Modernism)
   ========================================================================== */
.sabores-container, .hero-container, .footer-container, .nav-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 768px) {
  .sabores-container, .hero-container, .footer-container, .nav-container {
    padding-left: 80px;
    padding-right: 80px;
  }
}

/* ==========================================================================
   4. MIXINS DE INICIALIZACIÓN GLOBAL (Reset, Nav, Footer)
   ========================================================================== */
body {
  background-color: var(--color-background);
  color: var(--color-on-background);
}

/* Dark Mode Overrides for Hardcoded Components */
body, .site-body, .nav-header, .sales-global-header, .footer-site, .sales-submenu, .builder-header {
  background-color: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
}

.nav-item, .footer-link, .sales-submenu a, .config-tab {
  color: var(--color-on-surface-variant) !important;
}

.nav-item:hover, .footer-link:hover, .sales-submenu a:hover, .config-tab:hover {
  color: var(--color-primary) !important;
}

.sales-global-header .nav-item, .sales-global-header .nav-item:hover {
  color: inherit;
}

.footer-site p, .footer-copyright {
  color: var(--color-outline) !important;
}

.account-dialog, .config-panel {
  background: var(--color-surface-container-lowest) !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-outline-variant) !important;
}

.account-dialog input, .config-panel input {
  background: var(--color-surface) !important;
  color: var(--color-on-surface) !important;
  border-color: var(--color-outline-variant) !important;
}

.account-dialog h2, .config-panel h2, .config-panel h3 {
  color: var(--color-on-surface) !important;
}

.account-dialog p, .config-panel p, .account-dialog label, .config-panel label {
  color: var(--color-on-surface-variant) !important;
}

/* ==========================================================================
   1. INICIALIZAR ARQUITECTURA GLOBAL
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.site-body {
  background-color: var(--color-background, #f9f9fc);
  color: var(--color-on-background, #1a1c1e);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.selection-theme ::selection {
  background-color: var(--color-primary-container, #1f74d6);
  color: var(--color-on-primary-container, #fefcff);
}

.material-symbols-outlined {
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

.nav-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(var(--color-surface, #f9f9fc), 0.95);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.4);
  box-shadow: 0 4px 20px rgba(var(--color-primary, #005bb1), 0.04);
  transition: all 0.3s ease;
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.nav-brand {
  display: inline-flex;
  align-items: center;
}
.nav-brand .img {
  width: 72px;
  height: 60px;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.nav-brand .img:hover {
  transform: scale(1.05);
}

.nav-links {
  display: none;
  gap: 32px;
  flex: 1;
  justify-content: center;
  align-items: center;
}
@media (min-width: 768px) {
  .nav-links {
    display: flex;
  }
}
@media (max-width: 991px) {
  .nav-links {
    gap: 16px;
  }
}

.nav-item {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  font-size: 15px;
  padding: 10px 16px;
  border-radius: 12px;
  color: var(--color-on-surface-variant, #414753);
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-item:hover, .nav-item:focus {
  color: var(--color-primary, #005bb1);
  background-color: rgba(var(--color-primary, #005bb1), 0.05);
  transform: translateY(-2px);
}
.nav-item.active {
  color: var(--color-primary, #005bb1);
  font-weight: 700;
  background-color: rgba(var(--color-primary, #005bb1), 0.08);
}

.btn-nav {
  display: none;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  background-color: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-primary, #00468b), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-nav:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-primary, #00468b), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-nav:hover {
  transform: scale(1.02);
}
@media (min-width: 768px) {
  .btn-nav {
    display: inline-flex;
  }
}

.account-trigger {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 9px 13px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
  border-radius: 10px;
  color: var(--color-primary, #005bb1);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.2s ease;
}
.account-trigger:hover {
  background: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  transform: translateY(-2px);
}
@media (min-width: 768px) {
  .account-trigger {
    display: inline-flex;
  }
}

.account-avatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-secondary, #b60078);
  color: var(--color-on-secondary, #ffffff);
  font-size: 14px;
  font-weight: 800;
}

.account-trigger > .material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  font-size: 19px;
}

.global-cart {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-left: 4px;
  border-radius: 50%;
  background: var(--color-primary-container, #1f74d6);
  color: var(--color-on-primary, #ffffff);
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.global-cart:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(var(--color-primary, #005bb1), 0.25);
}
.global-cart b {
  position: absolute;
  top: -3px;
  right: -3px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-secondary, #b60078);
  color: var(--color-on-secondary, #ffffff);
  font-size: 10px;
}

.account-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
}
.account-modal[hidden] {
  display: none;
}

.account-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 30, 0.42);
  backdrop-filter: blur(5px);
}

.account-dialog {
  position: relative;
  z-index: 1;
  width: min(420px, 100%);
  padding: 34px;
  border-radius: 24px;
  background: var(--color-surface-container-lowest, #ffffff);
  box-shadow: 0 24px 60px rgba(26, 28, 30, 0.22);
}
.account-dialog h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  margin: 16px 0 7px;
}
.account-dialog p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
}
.account-dialog form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.account-dialog form label {
  display: grid;
  gap: 6px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
}
.account-dialog form input {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
  border-radius: 9px;
  font: inherit;
}
.account-dialog form button {
  width: 100%;
}

.account-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  color: var(--color-on-surface-variant, #414753);
  cursor: pointer;
}

.btn-menu-mobile {
  background: transparent;
  border: none;
  color: var(--color-primary, #005bb1);
  padding: 8px;
  cursor: pointer;
}
@media (min-width: 768px) {
  .btn-menu-mobile {
    display: none;
  }
}

.footer-site {
  background-color: var(--color-surface-container-highest, #e2e2e5);
  padding: 64px 0 24px;
  border-top: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.5);
}

.footer-container {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.footer-top {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 320px;
}
.footer-brand .img {
  width: 120px;
  height: auto;
  object-fit: contain;
}
.footer-brand p {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-link {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  text-decoration: none;
  transition: all 0.2s ease;
}
.footer-link:hover {
  color: var(--color-primary, #005bb1);
  transform: translateX(4px);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(var(--color-outline-variant, #c1c6d5), 0.5);
}
@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

.footer-copyright {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-outline, #727784);
  font-size: 13px;
  text-align: center;
}

.footer-social {
  display: flex;
  gap: 16px;
}
.footer-social a {
  color: var(--color-on-surface-variant, #414753);
  transition: color 0.2s ease;
}
.footer-social a:hover {
  color: var(--color-primary, #005bb1);
}

/* ==========================================================================
2. CLASES UTILITARIAS Y BOTONES (Basadas en Mixins)
========================================================================== */
.btn-3d {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  padding: 16px 32px;
  border-radius: 9999px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  transition: all 0.15s ease;
  width: 100%;
}
@media (min-width: 640px) {
  .btn-3d {
    width: auto;
  }
}

.btn-primary {
  background-color: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-primary, #00468b), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-primary, #00468b), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary:hover {
  transform: scale(1.02);
}

.btn-surface {
  background-color: var(--color-surface, #f9f9fc);
  color: var(--color-primary, #005bb1);
  border: none;
  border-radius: 9999px;
  box-shadow: 0 4px 0 var(--color-btn-shadow-surface, #c1c6d5), 0 8px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--color-outline-variant, #c1c6d5);
}
.btn-surface:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--color-btn-shadow-surface, #c1c6d5), 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-surface:hover {
  transform: scale(1.02);
}

/* ==========================================================================
   3. ANIMACIONES KEYFRAMES
   ========================================================================== */
@keyframes blob-float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* ==========================================================================
   4. SECCIÓN HERO (3D-Tactile Modernism)
   ========================================================================== */
.hero-section {
  position: relative;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 80px 0;
}

/* Blobs Ambientales */
.blob {
  border-radius: 40% 60% 70% 30%/40% 50% 60% 50%;
  filter: blur(40px);
  z-index: 0;
  position: absolute;
  animation: blob-float 6s ease-in-out infinite;
}

.blob-secondary {
  top: 10%;
  left: 10%;
  width: 256px;
  height: 256px;
  background-color: rgba(var(--color-secondary-container, #fc4db1), 0.3);
}

.blob-primary {
  bottom: 10%;
  right: 10%;
  width: 320px;
  height: 320px;
  background-color: rgba(var(--color-primary-container, #1f74d6), 0.2);
}
.blob-primary.delayed {
  animation-delay: 1s;
  animation-duration: 8s;
}

.hero-gradient-overlay {
  position: absolute;
  inset: -10%;
  background: linear-gradient(to bottom, transparent, rgba(var(--color-surface-container-lowest, #ffffff), 0.5));
  z-index: 0;
  pointer-events: none;
}

/* Contenido Hero */
.hero-container {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  top: -80px;
  align-items: center;
}
@media (min-width: 768px) {
  .hero-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background-color: var(--color-surface-container-high, #e8e8ea);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.pulse-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--color-secondary, #b60078);
  animation: pulse 2s infinite;
}

.tag-text {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  color: var(--color-on-surface-variant, #414753);
}

.hero-title {
  font-family: "Montserrat", sans-serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 64px;
  letter-spacing: -0.02em;
  color: var(--color-on-background, #1a1c1e);
}
@media (max-width: 767px) {
  .hero-title {
    font-size: 40px;
    line-height: 48px;
  }
}

.highlight-text {
  color: var(--color-primary, #005bb1);
  position: relative;
  display: inline-block;
}

.highlight-underline {
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 100%;
  height: 12px;
  color: var(--color-secondary, #b60078);
}

.hero-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 28px;
  color: var(--color-on-surface-variant, #414753);
  max-width: 32rem;
}

.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin-top: 16px;
}
@media (min-width: 640px) {
  .hero-actions {
    flex-direction: row;
    width: auto;
  }
}

/* Área de Imagen 3D */
.hero-image-area {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}
@media (min-width: 768px) {
  .hero-image-area {
    height: 600px;
  }
}

.hero-3d-image {
  position: absolute;
  width: 100%;
  max-width: 800px;
  object-fit: contain;
  /* 1. Mantenemos intacta tu animación de flotar original */
  animation: blob-float 6.5s ease-in-out infinite;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
  z-index: 15;
  left: 30%;
  rotate: 30deg;
}

.frut {
  position: absolute;
  width: 100px;
  height: auto;
  object-fit: contain;
  /* 1. Mantenemos intacta tu animación de flotar original */
  animation: blob-float 6.5s ease-in-out infinite;
  /* 2. Suavizamos SOLO el translate y el scale controlados por el JS */
  transition: translate 0.2s ease-out, scale 0.2s ease-out;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.1));
  z-index: 25;
}

#fruta1 {
  top: 30%;
  left: 10%;
  rotate: -15deg;
  width: 120px;
}

#fruta2 {
  width: 130px;
  top: 60%;
  left: 20%;
  rotate: -10deg;
}

#fruta3 {
  width: 140px;
  top: 50%;
  left: 90%;
  rotate: 10deg;
}

#fruta4 {
  top: 70%;
  left: 70%;
  rotate: 15deg;
  width: 120px;
}

.hero-3d-img {
  position: absolute;
  width: 100%;
  max-width: 800px;
  object-fit: contain;
  animation: blob-float 6s ease-in-out infinite;
  filter: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
  z-index: 20;
  left: -10%;
  rotate: -10deg;
  transition: transform 0.1s ease-out; /* Suaviza el movimiento */
  transform-style: preserve-3d;
}

.hero-image-glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(to top right, var(--color-primary-container, #1f74d6), var(--color-secondary-container, #fc4db1));
  opacity: 0.2;
  filter: blur(40px);
  z-index: 0;
}

/* ==========================================================================
   5. SECCIÓN BENTO GRID (SABORES)
   ========================================================================== */
.sabores-section {
  padding: 80px 0;
  background-color: var(--color-surface-container-low, #f3f3f6);
}

.sabores-header {
  text-align: center;
  margin-bottom: 64px;
}

.section-title {
  font-family: "Montserrat", sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: -0.01em;
  color: var(--color-on-background, #1a1c1e);
  margin-bottom: 16px;
}

.section-subtitle {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
  max-width: 42rem;
  margin: 0 auto;
}

.bento-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  grid-auto-rows: 300px;
}
@media (min-width: 768px) {
  .bento-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.bento-card {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transform: scale(1);
  transition: box-shadow 0.3s ease;
}
.bento-card:hover {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}
.bento-card:hover .bento-icon-wrapper {
  transform: scale(1.3);
}
.bento-card:hover .action-icon {
  transform: scale(1.3);
}
.bento-card:hover .bento-title-sm {
  transform: scale(1.05);
}
.bento-card:hover .bento-icon-img {
  transform: scale(1.4);
}

@media (min-width: 768px) {
  .card-large {
    grid-column: span 2;
  }
}

.bento-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.7s ease;
  background-color: #ffe600;
}

.fut-3d {
  position: absolute;
  width: 100%;
  max-width: 400px;
  object-fit: contain;
  animation: blob-float 6s ease-in-out infinite;
  filter: drop-shadow(0 15px 15px rgba(0, 0, 0, 0.1));
  z-index: 25;
  top: 113%;
  left: 40%;
  /* 2. Suavizamos SOLO el translate y el scale controlados por el JS */
  transition: translate 0.2s ease-out, scale 0.2s ease-out;
}

#fut-1 {
  top: 165%;
  rotate: 10deg;
  width: 270px;
  left: 27%;
}

#fut-2 {
  top: 153%;
  rotate: 5deg;
  width: 350px;
  left: 47%;
}

.bento-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(110, 110, 110, 0.8), rgba(0, 0, 0, 0.2), transparent);
}

.bento-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 32px;
}

.bento-tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.05em;
  display: inline-block;
  padding: 4px 12px;
  background-color: rgba(var(--color-surface, #f9f9fc), 0.9);
  color: var(--color-primary, #005bb1);
  margin-bottom: 12px;
  backdrop-filter: blur(4px);
}

.bento-title-lg {
  font-family: "Montserrat", sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 40px;
  color: #ffffff;
  margin-bottom: 8px;
}

.bento-title-sm {
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 32px;
  color: #ffffff;
  margin-bottom: 4px;
}
.bento-title-sm.text-dark {
  color: var(--color-on-surface, #1a1c1e);
}

.bento-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: rgba(255, 255, 255, 0.9);
}
.bento-desc.op-80 {
  opacity: 0.8;
}

/* Tarjeta Clara Específica (Fresa) */
.card-light {
  background-color: rgba(var(--color-secondary-container, #fc4db1), 0.2);
  border: 1px solid rgba(var(--color-secondary-container, #fc4db1), 0.3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px;
}

.bento-icon-wrapper {
  width: 96px;
  height: 96px;
  margin-bottom: 24px;
  background-color: #ffffff;
  border-radius: 9999px;
  box-shadow: inset 0 4px 6px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.bento-icon-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bento-desc-dark {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--color-on-surface-variant, #414753);
}

/* Tarjeta de Acción CTA */
.card-action {
  background-color: var(--color-primary, #005bb1);
  color: var(--color-on-primary, #ffffff);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 32px;
}

.action-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.featured-product-strip {
  padding: 28px 0 8px;
}

.featured-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.feature-card {
  position: relative;
  padding: 26px 22px 22px;
  border-radius: 28px;
  overflow: hidden;
  min-height: 200px;
  color: #fff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.12);
}

.feature-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0));
}

.feature-card > * {
  position: relative;
  z-index: 1;
}

.feature-card h3 {
  margin: 14px 0 12px;
  font-size: clamp(24px, 2vw, 32px);
  font-family: "Montserrat", sans-serif;
}

.feature-card p {
  margin: 0 0 18px;
  color: rgba(255,255,255,0.92);
  line-height: 1.6;
}

.feature-card a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.22);
}

.feature-pink { background: linear-gradient(135deg, #ff5fa2, #db2777); }
.feature-blue { background: linear-gradient(135deg, #1d4ed8, #3b82f6); }
.feature-gold { background: linear-gradient(135deg, #f59e0b, #d97706); }

.chip {
  display: inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.seasonal-section,
.combo-section,
.reviews-section {
  padding: 32px 0 80px;
}

.seasonal-grid,
.combo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.seasonal-card,
.combo-card,
.review-card {
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

.seasonal-card img,
.combo-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.seasonal-card-body,
.combo-card-body {
  padding: 18px;
}

.seasonal-rating {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f59e0b;
  font-size: 14px;
  margin-bottom: 12px;
}

.seasonal-rating span {
  color: #334155;
  font-weight: 700;
}

.seasonal-card h3,
.combo-card h3 {
  margin: 0 0 8px;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1.2;
}

.seasonal-card p,
.combo-card p {
  margin: 0 0 16px;
  color: #475569;
  line-height: 1.6;
}

.seasonal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.seasonal-footer strong {
  color: #0f172a;
  font-size: 18px;
}

.mini-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 999px;
  background: #ec4899;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

.combo-badge {
  display: inline-block;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(236, 72, 153, 0.12);
  color: #be185d;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 10px;
}

.reviews-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  align-items: start;
}

.reviews-list {
  display: grid;
  gap: 18px;
}

.review-card {
  padding: 20px;
}

.review-stars {
  color: #f59e0b;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-card p {
  margin: 0 0 12px;
  color: #334155;
  line-height: 1.6;
}

.review-card strong {
  font-size: 14px;
  color: #0f172a;
}

.review-panel {
  display: flex;
  align-items: stretch;
}

.review-form,
.review-login-prompt {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 22px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
  display: grid;
  gap: 16px;
}

.review-login-prompt {
  align-content: center;
  text-align: center;
}

.review-login-prompt h3,
.review-form h3 {
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 28px;
}

.review-login-prompt p {
  margin: 0;
  color: #475569;
  line-height: 1.6;
}

.launches-section { padding: 76px 0; background: #fffaf7; border-block: 1px solid #f3e9e2; }
.launches-heading, .reviews-feed-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px; }
.launches-heading h2 { margin:12px 0 8px; color:#20252c; font:700 clamp(28px,4vw,40px)/1.15 Montserrat,sans-serif; letter-spacing:-.03em; }
.launches-heading p, .reviews-feed-heading p { margin:0; color:#68717d; line-height:1.65; }
.launches-kicker, .reviews-kicker { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid #f2cce1; border-radius:999px; color:#a40068; background:#fff0f7; font-size:12px; font-weight:800; }
.launches-kicker .material-symbols-outlined, .reviews-kicker .material-symbols-outlined { font-size:17px; }
.launches-all { display:inline-flex; align-items:center; gap:7px; flex-shrink:0; color:#005bb1; font-weight:800; text-decoration:none; }
.launches-all .material-symbols-outlined { transition:transform .2s ease; }
.launches-all:hover .material-symbols-outlined { transform:translateX(4px); }
.launches-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),360px)); justify-content:center; gap:24px; }
.launch-card { overflow:hidden; display:flex; flex-direction:column; min-width:0; border:1px solid #e9e6e3; border-radius:24px; background:#fff; box-shadow:0 12px 32px #301b0d0b; transition:transform .25s ease,box-shadow .25s ease; }
.launch-card:hover { transform:translateY(-5px); box-shadow:0 20px 42px #301b0d18; }
.launch-card-image { position:relative; height:230px; padding:20px; display:grid; place-items:center; overflow:hidden; background:linear-gradient(145deg,#fce8ef,#fff8ee 70%); }
.launch-card-image img { display:block; width:auto; height:auto; max-width:100%; max-height:190px; object-fit:contain; filter:drop-shadow(0 12px 12px #30201520); }
.launch-card-image>span { position:absolute; top:16px; left:16px; padding:7px 11px; border-radius:999px; color:#9a165b; background:#ffffffdf; box-shadow:0 2px 10px #27101a12; font-size:10px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.launch-card-body { display:flex; flex:1; flex-direction:column; padding:22px; }
.launch-card-rating { display:flex; align-items:center; gap:8px; margin-bottom:9px; color:#f2a900; letter-spacing:2px; }
.launch-card-rating small { color:#535a64; font-size:12px; font-weight:800; letter-spacing:0; }
.launch-product-status { display:inline-flex; align-items:center; gap:7px; margin-bottom:10px; color:#167044; font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; }
.launch-product-status::before { content:""; width:8px; height:8px; border-radius:50%; background:#2f9e65; box-shadow:0 0 0 3px #e7f6ed; }
.launch-card h3 { margin:0 0 8px; color:#20252c; font:700 21px/1.3 Montserrat,sans-serif; }
.launch-card-body>p { flex:1; margin:0 0 20px; color:#68717d; font-size:14px; line-height:1.65; }
.launch-card-bottom { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:16px; border-top:1px solid #f0ece9; }
.launch-card-bottom>strong { color:#252a30; font-size:13px; }
.launch-price-options { display:grid; gap:7px; margin:0 0 18px; padding:12px; border:1px solid #eceef1; border-radius:13px; background:#f8f9fb; }
.launch-price-options>div { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; color:#505967; font-size:10px; line-height:1.45; }
.launch-price-options>div b { flex-shrink:0; color:#005bb1; white-space:nowrap; }
.launch-buy { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:10px 13px; color:white; background:#b60078; font-size:12px; font-weight:800; transition:background .2s ease,transform .2s ease; }
.launch-buy:hover { background:#8b005b; transform:translateY(-1px); }
.launch-buy .material-symbols-outlined { font-size:16px; }
.launches-empty { grid-column:1/-1; padding:25px; border:1px dashed #dfc7d4; border-radius:16px; color:#68717d; text-align:center; }
.reviews-section { padding:80px 0; background:#f9f9fc; }
.reviews-heading { max-width:760px; margin:0 auto 42px; text-align:center; }
.reviews-heading .section-title { margin:14px 0 10px; }
.reviews-heading .section-subtitle { max-width:unset; }
.reviews-layout { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:22px; align-items:stretch; margin-bottom:54px; }
.reviews-summary, .review-form-card { padding:clamp(22px,3vw,34px); border:1px solid #e5e6ea; border-radius:24px; background:white; box-shadow:0 12px 30px #1823340a; }
.reviews-score-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding-bottom:22px; border-bottom:1px solid #eaebef; }
.reviews-score-row>div>strong { color:#171c24; font:800 54px/1 Montserrat,sans-serif; letter-spacing:-.05em; }
.reviews-score-row>div>span { margin-left:6px; color:#747c87; font:600 20px Montserrat,sans-serif; }
.reviews-score-row .review-stars { margin:9px 0 5px; font-size:20px; }
.reviews-score-row small { color:#737b86; font-size:11px; }
.reviews-verified { display:inline-flex; align-items:center; gap:5px; padding:7px 9px; border-radius:999px; color:#127447; background:#e9f8ef; font-size:10px; font-weight:800; white-space:nowrap; }
.reviews-verified .material-symbols-outlined { font-size:15px; }
.reviews-breakdown { display:grid; gap:12px; padding:22px 0; }
.review-bar-row { display:grid; grid-template-columns:42px 1fr 36px; align-items:center; gap:10px; color:#555e69; font-size:12px; font-weight:700; }
.review-bar-row>div { height:9px; overflow:hidden; border-radius:99px; background:#eceef1; }
.review-bar-row i { display:block; height:100%; border-radius:inherit; background:#e6aa20; }
.review-bar-row small { color:#78808a; text-align:right; }
.review-trust { display:flex; align-items:center; gap:12px; padding:14px; border:1px solid #e6eaf2; border-radius:14px; background:#f6f8fc; }
.review-trust>.material-symbols-outlined { color:#b60078; }
.review-trust p { margin:0; color:#58616e; font-size:11px; line-height:1.55; }
.review-form-card { display:flex; }
.review-form, .review-login-prompt { align-content:start; }
.review-form-card h3 { margin:4px 0 0; color:#20252c; font:700 24px/1.25 Montserrat,sans-serif; }
.review-form-kicker { color:#b60078; font-size:10px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.review-form label { color:#505967; font-size:12px; font-weight:800; }
.review-form textarea { width:100%; box-sizing:border-box; padding:13px 14px; border:1px solid #d8dde5; border-radius:13px; background:#f8f9fb; color:#20252c; font:400 13px/1.55 'Plus Jakarta Sans',sans-serif; resize:vertical; }
.review-form textarea:focus { outline:2px solid #005bb133; border-color:#005bb1; }
.review-form .star-group { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.review-form .star-group>span { color:#505967; font-size:12px; font-weight:800; }
.review-form .star-rating { display:flex; gap:4px; }
.review-form .star-button { padding:0 2px; border:0; color:#c8cbd0; background:transparent; font-size:28px; }
.review-form .star-button.active { color:#e6aa20; }
.review-form .btn-3d, .review-login-prompt .btn-3d { justify-self:start; padding:12px 20px; border:0; border-radius:999px; color:white; background:#005bb1; font-weight:800; }
.review-login-prompt { align-content:center; justify-items:center; text-align:center; }
.review-login-prompt>.material-symbols-outlined { color:#005bb1; font-size:38px; }
.review-login-prompt h3 { margin:0; }
.review-login-prompt p { max-width:320px; }
.reviews-feed-heading { margin-bottom:20px; }
.reviews-feed-heading h3 { margin:0 0 5px; color:#20252c; font:700 22px Montserrat,sans-serif; }
.reviews-feed-heading p { font-size:13px; }
.reviews-feed-heading>span { color:#68717d; font-size:12px; font-weight:800; }
.reviews-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.review-card { display:flex; flex-direction:column; padding:22px; border:1px solid #e5e6ea; border-radius:20px; background:#fff; box-shadow:0 8px 22px #18233408; }
.review-card-top { display:flex; align-items:center; gap:11px; }
.review-avatar { display:grid; flex:0 0 44px; width:44px; height:44px; place-items:center; border-radius:50%; color:#005bb1; background:#e5efff; font-weight:900; }
.review-avatar-mascot { flex-basis:58px; width:58px; height:58px; border-radius:18px; background:linear-gradient(145deg,#fff2f8,#edf5ff); box-shadow:inset 0 0 0 1px #ffffff,0 5px 14px #18233412; }
.review-avatar-mascot img { width:100%; height:100%; object-fit:contain; padding:2px; filter:drop-shadow(0 5px 5px #18233426); transition:transform .25s ease; }
.review-card:hover .review-avatar-mascot img { transform:translateY(-3px) rotate(-3deg) scale(1.06); }
.review-author { display:grid; min-width:0; gap:4px; }
.review-author strong { overflow:hidden; color:#252a30; font-size:13px; text-overflow:ellipsis; white-space:nowrap; }
.review-author small { color:#7a828c; font-size:10px; }
.review-card-top>.review-stars { margin:0 0 0 auto; font-size:13px; white-space:nowrap; }
.review-card>p { flex:1; margin:18px 0; color:#535c68; font-size:13px; line-height:1.7; }
.review-verified-badge { display:inline-flex; align-items:center; gap:4px; color:#0c7543; font-size:10px; font-weight:800; }
.review-verified-badge .material-symbols-outlined { font-size:15px; }
.reviews-empty { grid-column:1/-1; padding:24px; border:1px dashed #d8dde5; border-radius:16px; color:#68717d; text-align:center; }
.launch-modal { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; }
.launch-modal-backdrop { position:absolute; inset:0; background:#101521b8; backdrop-filter:blur(7px); }
.launch-modal-dialog { position:relative; display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,1.2fr); width:min(900px,100%); max-height:min(90vh,760px); overflow:auto; border:1px solid #fff9; border-radius:26px; background:#fff; box-shadow:0 30px 90px #080d1d55; }
.launch-modal-close { position:absolute; z-index:1; top:13px; right:13px; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; color:#414753; background:#ffffffdf; font-size:27px; }
.launch-modal-media { min-height:340px; display:grid; place-items:center; padding:30px; background:linear-gradient(145deg,#ffeaf2,#fff5e8); }
.launch-modal-media img { width:100%; max-height:420px; object-fit:contain; filter:drop-shadow(0 16px 16px #30201525); }
.launch-modal-content { display:flex; flex-direction:column; gap:13px; padding:34px; }
.launch-modal-tag { align-self:start; padding:7px 10px; border-radius:999px; color:#a40068; background:#fff0f7; font-size:10px; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.launch-modal-content h2 { margin:0; color:#20252c; font:800 28px/1.2 Montserrat,sans-serif; }
.launch-modal-content>p { margin:0; color:#68717d; font-size:13px; line-height:1.6; }
.launch-promo-note { padding:10px 12px; border:1px solid #bee8cf; border-radius:12px; color:#126b3b; background:#effaf3; font-size:12px; font-weight:800; }
.launch-size-label, .launch-flavors-label { margin:5px 0 -5px!important; color:#505967!important; font-size:11px!important; font-weight:900; text-transform:uppercase; }
.launch-sizes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.launch-size-option { display:flex; align-items:flex-start; gap:7px; padding:11px 9px; border:1px solid #e0e3e8; border-radius:13px; background:#fafbfc; cursor:pointer; }
.launch-size-option:has(input:checked) { border-color:#d83f92; background:#fff3f9; }
.launch-size-option input { width:auto; margin:3px 0 0; accent-color:#b60078; }
.launch-size-option span { display:grid; gap:4px; }
.launch-size-option b { color:#29313b; font-size:11px; }
.launch-size-option small { color:#737b86; font-size:9px; }
.launch-flavors { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-height:155px; overflow:auto; }
.launch-flavors label { color:#505967; font-size:10px; font-weight:800; }
.launch-flavors select { margin-top:5px; padding:9px; border:1px solid #d8dde5; border-radius:10px; background:#fafbfc; }
.launch-formulas { display:grid; gap:8px; max-height:210px; overflow:auto; }
.launch-formula-option { display:flex; align-items:flex-start; gap:9px; padding:11px; border:1px solid #e0e3e8; border-radius:12px; background:#fafbfc; cursor:pointer; }
.launch-formula-option:has(input:checked) { border-color:#45a76a; background:#f0faf2; }
.launch-formula-option input { flex:0 0 auto; margin:3px 0 0; accent-color:#16804a; }
.launch-formula-option span { display:grid; gap:4px; }
.launch-formula-option b { color:#29313b; font-size:11px; }
.launch-formula-option small { color:#737b86; font-size:10px; line-height:1.45; }
.launch-multi-list { display:grid; gap:8px; max-height:330px; overflow:auto; }
.launch-multi-option { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; border:1px solid #e0e3e8; border-radius:14px; background:#f8f9fb; }
.launch-multi-option>div:first-child { display:grid; gap:4px; }
.launch-multi-option>div:first-child strong { color:#29313b; font-size:12px; }
.launch-multi-option>div:first-child small { color:#737b86; font-size:10px; line-height:1.45; }
.launch-single-quantity { justify-content:flex-end; }
.launch-single-quantity>span { margin-right:auto; color:#505967; font-size:11px; font-weight:800; }
.launch-modal-footer>div { display:grid; gap:3px; min-width:120px; }
.launch-modal-footer>div small { color:#737b86; font-size:10px; }
.launch-modal-footer>div strong { color:#20252c; font:800 18px Montserrat,sans-serif; white-space:nowrap; }
.launch-modal-footer { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid #eceef1; }
.launch-quantity { display:flex; align-items:center; gap:13px; padding:6px; border:1px solid #e4e6ea; border-radius:14px; background:#f7f8fa; }
.launch-quantity button { width:32px; height:32px; border:0; border-radius:10px; color:#39414b; background:#fff; font-size:19px; }
.launch-quantity strong { min-width:12px; color:#262d36; text-align:center; }
.launch-add-cart { display:flex; flex:1; align-items:center; justify-content:space-between; gap:8px; padding:13px 15px; border:0; border-radius:14px; color:#fff; background:linear-gradient(100deg,#b60078,#7f2bc1); font-size:12px; font-weight:900; }
.launch-add-cart b { font-size:11px; white-space:nowrap; }
.launch-cart-message { min-height:16px; color:#08783c!important; font-size:11px!important; font-weight:800; }
@media(max-width:900px) { .launches-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .reviews-layout { grid-template-columns:1fr; } }
@media(max-width:620px) { .launches-section,.reviews-section { padding:55px 0; } .launches-heading,.reviews-feed-heading { align-items:flex-start; flex-direction:column; } .launches-grid,.reviews-list { grid-template-columns:1fr; } .launch-card-image { height:200px; } .launch-card-body { padding:20px; } .launch-card-bottom { align-items:flex-start; flex-direction:column; } .launch-buy { width:100%; justify-content:center; } .reviews-score-row { flex-direction:column; } .launch-modal { padding:10px; } .launch-modal-dialog { grid-template-columns:1fr; max-height:94vh; border-radius:20px; } .launch-modal-media { min-height:180px; max-height:210px; padding:15px; } .launch-modal-media img { max-height:180px; } .launch-modal-content { padding:22px 18px; gap:11px; } .launch-modal-content h2 { font-size:23px; } .launch-sizes { grid-template-columns:1fr; } .launch-size-option { align-items:center; } }

.review-form label {
  display: grid;
  gap: 8px;
  font-weight: 600;
  color: #1f2937;
}

.review-form input,
.review-form textarea,
.review-form select {
  width: 100%;
  border: 1px solid #dbe3ef;
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
}

.review-form textarea {
  min-height: 110px;
  resize: vertical;
}

.star-group {
  display: grid;
  gap: 8px;
  color: #1f2937;
  font-weight: 600;
}

.star-rating {
  display: flex;
  gap: 8px;
  font-size: 32px;
  color: #cbd5e1;
  user-select: none;
}

.star-button {
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  color: #cbd5e1;
  transition: transform 0.15s ease, color 0.15s ease;
}

.star-button:hover,
.star-button.active {
  color: #f59e0b;
  transform: translateY(-1px);
}

.hidden {
  display: none !important;
}

#review-message {
  margin: 0;
  font-weight: 600;
}

.empty {
  margin: 0;
  padding: 18px;
  border-radius: 16px;
  background: rgba(148, 163, 184, 0.08);
  color: #475569;
}

@media (max-width: 768px) {
  .reviews-layout {
    grid-template-columns: 1fr;
  }
}

/*# sourceMappingURL=style.css.map */