/* ============================================================================
   EL BAÚL DE LOS DESEOS — PIEL «BOUTIQUE CLARA» (27-sep-2026)

   William: «ese diseño tan IA». El negro con oro, la serifa y las fotos generadas
   delataban la plantilla. Esta capa toma los PATRONES (no textos, fotos ni marcas)
   de las tiendas íntimas que más venden — Dame, Maude, LELO —:
     · fondo claro y cálido, una sola tinta fuerte (vino) para comprar;
     · barra de aviso de color arriba; menú limpio;
     · titulares grandes en sans geométrica, sin brillos ni degradados dorados;
     · franja de confianza de color bajo el hero;
     · tarjetas de producto sobre gris cálido, etiqueta arriba, precio y botón sólido;
     · cero imágenes de ambiente generadas: manda la foto real del producto.

   Se carga DESPUÉS de tokens.css. Para volver al diseño anterior basta con quitar
   el <link> de esta hoja: no toca HTML de estructura ni JavaScript.
   ========================================================================= */

@import url("https://cdn.jsdelivr.net/npm/@fontsource-variable/inter-tight@5.1.1/index.css");

:root {
  --c-lino:        #F6F3EF;   /* página: hueso cálido */
  --c-papel:       #FFFFFF;   /* superficies */
  --c-panel:       #FFFFFF;
  --c-panel-alto:  #FFFFFF;
  --c-tinta:       #1B1417;   /* texto principal */
  --c-tinta-2:     #5A4F53;   /* secundario */
  --c-tinta-3:     #7C7074;   /* terciario (4,6:1 sobre hueso) */

  --c-oro:         #7A1B3A;   /* la acción ahora es VINO (antes oro) */
  --c-oro-brillo:  #93244A;
  --c-oro-hondo:   #5E1229;
  --c-granada:     #7A1B3A;
  --c-granada-alt: #93244A;
  --c-granada-piel:#F4E3E7;
  --c-vino:        #7A1B3A;
  --c-vino-suave:  #F4E3E7;

  --c-salvia:      #2F5347;
  --c-salvia-alt:  #24443A;
  --c-salvia-piel: #E6EFEA;
  --c-salvia-texto:#2F5347;

  --c-lino-hondo:  #EDE7E1;   /* fondo de la foto del producto */
  --c-linea:       #E4DDD6;
  --c-linea-fuerte:#CFC5BC;
  --c-velo:        rgba(27, 20, 23, .55);

  --c-arena:       #EFE4DA;   /* bloques de color suaves */
  --c-rubor:       #F3DCD6;

  --f-display: "Inter Tight Variable", "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-texto:   "Inter Tight Variable", "Inter Tight", "Helvetica Neue", Arial, system-ui, sans-serif;
  --p-display-normal: 500;
  --p-display-fuerte: 600;
  --tr-titular: -.035em;
  --tr-etiqueta: .08em;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;

  --s-1: 0 1px 2px rgba(27,20,23,.06);
  --s-2: 0 8px 24px rgba(27,20,23,.08);
  --s-3: 0 18px 48px rgba(27,20,23,.14);
}

html { color-scheme: light; }

body, body.home-luxury, body.catalog-page, body.checkout-page, body.legal-page {
  background: var(--c-lino);
  color: var(--c-tinta);
  font-feature-settings: "ss01", "cv11";
}

h1, h2, h3, .brand__word strong { font-family: var(--f-display); color: var(--c-tinta); }
h1 em, h2 em { color: var(--c-vino); font-style: normal; }
::selection { background: var(--c-rubor); color: var(--c-tinta); }

/* ---- Rótulos: sin versalitas espaciadas de lujo, texto pequeño y firme ---- */
.eyebrow, .product-category {
  color: var(--c-tinta-2) !important;
  letter-spacing: var(--tr-etiqueta) !important;
  font-weight: 600;
}
.eyebrow span { display: none; }

/* ============================ AVISO SUPERIOR ============================== */
.announcement {
  background: var(--c-vino) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}
.announcement span, .announcement i { color: #FFFFFF !important; letter-spacing: .02em; font-weight: 500; text-transform: none; }

/* ================================ CABECERA ================================ */
.site-header, .catalog-header {
  background: rgba(255,255,255,.94) !important;
  border-bottom: 1px solid var(--c-linea) !important;
  box-shadow: none !important;
  backdrop-filter: saturate(1.4) blur(10px);
}
.main-nav a { color: var(--c-tinta) !important; font-weight: 500; }
.main-nav a:hover, .main-nav a:focus-visible { color: var(--c-vino) !important; }
.brand__mark { background: #1B1417; border: 0; box-shadow: none; border-radius: 10px; }
.brand__word strong { color: var(--c-tinta) !important; letter-spacing: -.02em; font-weight: 700; }
.brand__word small { color: var(--c-vino) !important; letter-spacing: .12em; font-weight: 600; }
.cart-button {
  background: var(--c-tinta) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
}
.cart-button b { background: #FFFFFF !important; color: var(--c-tinta) !important; }
.icon-button, .menu-button { color: var(--c-tinta) !important; border-color: var(--c-linea) !important; background: #FFFFFF !important; }

/* ================================= BOTONES ================================ */
.button, .add-button, .filter-chip, .quick-view { font-family: var(--f-texto); letter-spacing: 0; text-transform: none; }
.button--primary, .button--light {
  background: var(--c-vino) !important;
  color: #FFFFFF !important;
  border: 1px solid var(--c-vino) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.button--primary:hover, .button--light:hover { background: var(--c-oro-hondo) !important; border-color: var(--c-oro-hondo) !important; transform: none; }
.button--ghost, .button--secondary, .button--outline-light {
  background: transparent !important;
  color: var(--c-tinta) !important;
  border: 1.5px solid var(--c-tinta) !important;
  box-shadow: none !important;
  font-weight: 600;
}
.button--ghost:hover, .button--secondary:hover, .button--outline-light:hover { background: var(--c-tinta) !important; color: #FFFFFF !important; }
.button::before, .button::after { display: none !important; }

/* ================================== HERO ================================== */
/* Sin la foto generada: bloque de color y tipografía grande (Maude/Dame). */
.hero {
  background: var(--c-rubor) !important;
  min-height: 0 !important;
  border: 0 !important;
}
.hero__media, .hero__veil { display: none !important; }
.hero__content { padding-block: clamp(56px, 9vw, 120px) clamp(48px, 7vw, 96px) !important; }
.hero__copy { max-width: 980px !important; }
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 5.6rem) !important;
  line-height: .98 !important;
  font-weight: 600 !important;
  letter-spacing: -.045em !important;
  color: var(--c-tinta) !important;
  max-width: 16ch;
}
.hero h1 em { color: var(--c-vino) !important; }
.hero__lead { color: var(--c-tinta-2) !important; font-size: clamp(1.05rem, 1.4vw, 1.25rem) !important; max-width: 56ch !important; }
.hero__proof { border-color: rgba(27,20,23,.14) !important; }
.hero__proof span, .hero__proof i { color: var(--c-tinta) !important; }

/* =========================== FRANJA DE CONFIANZA =========================== */
.benefit-strip {
  background: var(--c-tinta) !important;
  border: 0 !important;
}
.benefit-strip article span {
  color: var(--c-rubor) !important;
  font-family: var(--f-texto) !important;
  font-weight: 600 !important;
}
.benefit-strip strong { color: #FFFFFF !important; font-family: var(--f-texto) !important; font-weight: 600; }
.benefit-strip p { color: #CFC5C9 !important; }

/* ================================ CATÁLOGO ================================ */
.catalog-section, .faq-section, .experience { background: var(--c-lino) !important; }
.section-heading h2, .experience h2, .faq__intro h2, .assistant-cta h2 {
  font-size: clamp(2rem, 3.6vw, 3.1rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.04em !important;
}
.catalog-toolbar {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-inline: 0 !important;
}
.filter-chip {
  background: #FFFFFF !important;
  color: var(--c-tinta) !important;
  border: 1px solid var(--c-linea-fuerte) !important;
  box-shadow: none !important;
  font-weight: 500;
}
.filter-chip:hover { border-color: var(--c-tinta) !important; }
.filter-chip.is-active, .filter-chip[aria-pressed="true"] {
  background: var(--c-tinta) !important;
  color: #FFFFFF !important;
  border-color: var(--c-tinta) !important;
}
.catalog-search, .catalog-search input {
  background: #FFFFFF !important;
  color: var(--c-tinta) !important;
  border-color: var(--c-linea-fuerte) !important;
}
.catalog-search input::placeholder { color: var(--c-tinta-3) !important; }

/* Tarjeta de producto: foto sobre gris cálido, sin marco dorado ni sombras */
.product-card {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: box-shadow var(--m-medio) ease, transform var(--m-medio) ease;
}
.product-card:hover { box-shadow: var(--s-2) !important; transform: translateY(-2px); }
.product-card__media {
  background: var(--c-lino-hondo) !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.product-card__media img { mix-blend-mode: multiply; object-fit: contain !important; padding: 8%; }
.product-card__media.is-placeholder { background: var(--c-arena) !important; }
.product-card__body { padding: 16px 18px 18px !important; }
.product-card h3 {
  font-family: var(--f-texto) !important;
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--c-tinta) !important;
}
.product-card__description { color: var(--c-tinta-2) !important; }
.product-card__footer { border-top: 1px solid var(--c-linea) !important; }
.product-price strong {
  color: var(--c-tinta) !important;
  font-family: var(--f-texto) !important;
  font-weight: 700 !important;
  font-size: 1.1rem !important;
}
.product-price small { color: var(--c-tinta-3) !important; }
.add-button {
  background: var(--c-vino) !important;
  color: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
}
.add-button:hover { background: var(--c-oro-hondo) !important; }
.add-button:disabled { background: var(--c-linea-fuerte) !important; }
.product-badge {
  background: #FFFFFF !important;
  color: var(--c-tinta) !important;
  border: 0 !important;
  box-shadow: none !important;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
}
.product-badge--new { background: var(--c-rubor) !important; color: var(--c-vino) !important; }
.quick-view { background: #FFFFFF !important; color: var(--c-tinta) !important; border: 0 !important; box-shadow: var(--s-1) !important; }
.product-skeleton { background: var(--c-lino-hondo) !important; border: 0 !important; }
.catalog-meta p { color: var(--c-tinta-2) !important; }
.text-button { color: var(--c-vino) !important; }

/* ============================== EXPERIENCIA =============================== */
/* Sin la foto generada: los tres pasos en tarjetas limpias. */
.experience__image { display: none !important; }
.experience__grid { grid-template-columns: 1fr !important; }
.experience__copy { max-width: none !important; }
.experience__copy > p { max-width: 62ch; color: var(--c-tinta-2) !important; }
.steps { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px !important; }
.steps li {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  padding: 24px !important;
  box-shadow: none !important;
}
.steps li span {
  background: var(--c-rubor) !important;
  color: var(--c-vino) !important;
  border: 0 !important;
  font-family: var(--f-texto) !important;
  font-style: normal !important;
  font-weight: 700 !important;
}
.steps strong { color: var(--c-tinta) !important; font-family: var(--f-texto) !important; }
.steps p { color: var(--c-tinta-2) !important; }
.inline-link { color: var(--c-vino) !important; font-weight: 600; }

/* ============================ ASESORÍA (ALMA) ============================= */
.assistant-cta { background: var(--c-lino) !important; }
.assistant-cta__card {
  background: var(--c-vino) !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--r-lg) !important;
}
.assistant-cta__card h2, .assistant-cta__card p { color: #FFFFFF !important; }
.assistant-cta__card .eyebrow { color: var(--c-rubor) !important; }
.assistant-cta__icon { background: rgba(255,255,255,.14) !important; color: #FFFFFF !important; border: 0 !important; }
.assistant-cta .button--light { background: #FFFFFF !important; color: var(--c-vino) !important; border-color: #FFFFFF !important; }
.assistant-cta .button--outline-light { color: #FFFFFF !important; border-color: rgba(255,255,255,.7) !important; }
.assistant-cta .button--outline-light:hover { background: #FFFFFF !important; color: var(--c-vino) !important; }

/* ================================== FAQ ==================================== */
.faq-list details {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
}
.faq-list summary { color: var(--c-tinta) !important; font-weight: 600; }
.faq-list details p, .faq__intro p { color: var(--c-tinta-2) !important; }
.faq-list summary i { color: var(--c-vino) !important; }

/* ================================= PIE ===================================== */
.site-footer {
  background: var(--c-tinta) !important;
  border: 0 !important;
}
.site-footer, .site-footer p, .site-footer span, .site-footer a { color: #D9D0D3 !important; }
.site-footer h3 { color: #FFFFFF !important; font-family: var(--f-texto) !important; font-weight: 600 !important; font-size: 1rem !important; }
.site-footer a:hover { color: #FFFFFF !important; }
.footer__bottom { border-color: rgba(255,255,255,.12) !important; }

/* ============================ PORTÓN DE EDAD =============================== */
.age-gate { background: rgba(246, 243, 239, .86) !important; backdrop-filter: blur(14px); }
.age-gate__card {
  background: #FFFFFF !important;
  border: 0 !important;
  box-shadow: var(--s-3) !important;
  border-radius: var(--r-lg) !important;
}
.age-gate__card h2 { color: var(--c-tinta) !important; font-weight: 600 !important; letter-spacing: -.03em !important; }
.age-gate__card p, .age-gate__card small { color: var(--c-tinta-2) !important; }
.age-gate__exit { color: var(--c-tinta-2) !important; }

/* ====================== CAJÓN DE COMPRA Y DIÁLOGOS ========================= */
.cart-drawer, .product-modal__dialog, .modal__dialog, .product-modal {
  color: var(--c-tinta);
}
.cart-drawer, .product-modal__dialog, .modal__dialog {
  background: #FFFFFF !important;
  border-color: var(--c-linea) !important;
}

/* =========================== VITRINA DEL HERO ============================= */
/* Fotos REALES de producto sobre blanco (patrón Dame/Maude), no escenas generadas. */
.hero__content {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.hero__shelf {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 14px;
  aspect-ratio: 1 / 1.05;
}
.hero__item {
  position: relative;
  display: block;
  background: #FFFFFF;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  transition: transform var(--m-medio) var(--m-curva), box-shadow var(--m-medio) ease;
}
.hero__item:hover { transform: translateY(-3px); box-shadow: var(--s-2); }
.hero__item--grande { grid-row: 1 / span 2; }
.hero__item img { width: 100%; height: 100%; object-fit: contain; padding: 12% 10% 22%; }
.hero__item span {
  position: absolute; left: 14px; bottom: 12px;
  font-size: .82rem; font-weight: 600; color: var(--c-tinta);
  background: var(--c-lino); padding: 5px 11px; border-radius: 999px;
}

/* ======================= RITMO: menos aire muerto ========================= */
.catalog-section, .experience, .faq-section { padding-block: clamp(56px, 7vw, 96px) !important; }
.assistant-cta { padding-block: 0 !important; }
.benefit-strip article { border-color: rgba(255,255,255,.12) !important; }

/* =============================== MÓVIL ==================================== */
@media (max-width: 860px) {
  .hero__content { grid-template-columns: 1fr; }
  .hero__shelf { aspect-ratio: auto; grid-template-rows: 150px 150px; max-width: 520px; }
  .hero h1 { max-width: none; }
}
@media (max-width: 520px) {
  .hero__shelf { grid-template-rows: 120px 120px; gap: 10px; }
  .hero__item span { font-size: .72rem; left: 8px; bottom: 8px; padding: 3px 8px; }
}

/* Ajuste del hero: la columna de texto ocupa su celda y el titular no se parte en 7 líneas. */
.hero__copy { width: auto !important; max-width: none !important; padding: 0 !important; }
.hero__copy::before { background: var(--c-vino) !important; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4.4rem) !important; max-width: 13ch; }
.hero__content { padding-block: clamp(48px, 6vw, 88px) !important; min-height: 0 !important; }

/* Retoques: producto más grande en la vitrina y aire entre texto y flecha */
.hero__item img { padding: 8% 8% 18%; }
.button { gap: .55em !important; }
.catalog-section__all { margin-top: 28px !important; }

/* ============================ CATÁLOGO (/catalogo) ========================= */
/* catalogo.css fija Georgia a mano en varios titulares: aquí se vuelve a la sans. */
.catalog-intro h1, .catalog-intro aside strong, .catalog-products__heading h2, .catalog-page h1, .catalog-page h2,
.catalog-card h3, .catalog-card h3 a {
  font-family: var(--f-display) !important;
  letter-spacing: -.04em;
}
.catalog-intro h1 { font-weight: 600 !important; font-size: clamp(2.8rem, 6vw, 5.6rem) !important; }
.catalog-intro h1 em { color: var(--c-vino) !important; font-style: normal; }
.catalog-intro aside {
  background: #FFFFFF !important;
  border: 0 !important;
  box-shadow: none !important;
}
.catalog-intro aside strong { color: var(--c-tinta) !important; }
.catalog-intro aside i { color: var(--c-vino) !important; }
.catalog-card {
  background: #FFFFFF !important;
  border: 0 !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  overflow: hidden;
  transition: box-shadow var(--m-medio) ease, transform var(--m-medio) ease;
}
.catalog-card:hover { box-shadow: var(--s-2) !important; transform: translateY(-2px); }
.catalog-card__image {
  background: var(--c-lino-hondo) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.catalog-card__image img {
  box-shadow: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  mix-blend-mode: multiply;
  object-fit: contain !important;
  padding: 8%;
}
.catalog-card h3, .catalog-card h3 a {
  font-size: 1.02rem !important;
  font-weight: 600 !important;
  letter-spacing: -.01em !important;
  line-height: 1.3 !important;
  color: var(--c-tinta) !important;
}
.catalog-card__category { color: var(--c-tinta-2) !important; letter-spacing: var(--tr-etiqueta) !important; font-weight: 600; }
.catalog-card__desc { color: var(--c-tinta-2) !important; }
.catalog-card__price strong { color: var(--c-tinta) !important; font-family: var(--f-texto) !important; font-weight: 700 !important; }
.catalog-card__price-old { color: var(--c-tinta-3) !important; }
.catalog-card__price small { color: var(--c-tinta-3) !important; }
.add-button-catalog { background: var(--c-vino) !important; color: #FFFFFF !important; border: 0 !important; box-shadow: none !important; }
.add-button-catalog:hover { background: var(--c-oro-hondo) !important; }
.quick-button { background: #FFFFFF !important; color: var(--c-tinta) !important; border: 1px solid var(--c-linea-fuerte) !important; box-shadow: none !important; }
.catalog-badge { background: var(--c-rubor) !important; color: var(--c-vino) !important; border: 0 !important; box-shadow: none !important; }
.catalog-header { color: var(--c-tinta); }
.catalog-header a, .catalog-header button { color: var(--c-tinta); }
.catalog-card__image img, .product-card__media img, .hero__item img { filter: none !important; }
.catalog-card:hover .catalog-card__image img { transform: scale(1.03); }