/* ==========================================================================
   AVÉLISSE COSMÉTICOS — Design System
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Onest:wght@600;700;800&family=Urbanist:wght@400..800&display=swap');

:root {
  /* Colors — punto medio entre rosa mauve y nude/marrón: un rosé-taupe cálido y elegante */
  --color-bg: #fdf8f6;
  --color-bg-alt: #f6ece6;
  --color-surface: #ffffff;
  --color-ink: #382825;
  --color-text: #4a4a4a;
  --color-ink-soft: #836a65;
  --color-rose: #deb2b5;
  --color-rose-deep: #965b56;
  --color-blush: #f6e2e0;
  --color-gold: #c09a87;
  --color-gold-light: #e9d3c3;
  --color-line: rgba(56, 40, 37, 0.1);
  --color-success: #6b8f71;

  /* Gradients for placeholder product art — rosé-taupe intermedio */
  --grad-1: linear-gradient(135deg, #f8e7e4 0%, #ebcac6 45%, #c9928b 100%);
  --grad-2: linear-gradient(135deg, #f5eae0 0%, #e4c8b6 45%, #c09a87 100%);
  --grad-3: linear-gradient(135deg, #f1e5e8 0%, #d4b8be 45%, #a27c80 100%);
  --grad-4: linear-gradient(135deg, #f6e6e6 0%, #e4bfbe 45%, #bb8680 100%);
  --grad-5: linear-gradient(135deg, #f4e6db 0%, #e4bca8 45%, #b17e68 100%);

  /* Type */
  --font-display: "Instrument Sans", sans-serif;
  --font-body: "Instrument Sans", sans-serif;
  --font-brand: "Urbanist", sans-serif;

  /* Layout */
  --container: 1280px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --shadow-soft: 0 20px 60px -25px rgba(56, 40, 37, 0.25);
  --shadow-hover: 0 30px 70px -20px rgba(56, 40, 37, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nav-h: 96px;
  --promo-h: 40px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.12;
  margin: 0;
  color: var(--color-text);
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-rose-deep);
  font-weight: 600;
  margin-bottom: 16px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-rose-deep);
}

/* -------------------- Page transition overlay -------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--color-ink);
  transform: translateY(0);
  pointer-events: none;
  transition: transform 0.65s var(--ease);
}
.page-transition.is-covering { transform: translateY(0%); }
.page-transition.is-hidden { transform: translateY(-101%); }
.page-transition.is-leaving { transform: translateY(0%); }

body.page-ready .page-transition { transform: translateY(-101%); }
body:not(.page-ready) .page-transition { transform: translateY(0%); }

/* -------------------- Intro: seerosa animada (solo portada) --------------------
   Se muestra una sola vez por sesión de navegador (ver sessionStorage en
   index.html) justo antes de que aparezca la página de inicio: una seerosa
   (nenúfar) vista desde arriba se abre en un par de segundos, en los mismos
   tonos rosé de la marca (los del icono de contacto / degradados de
   producto), y luego el overlay se desvanece. Sienta por encima de
   .page-transition (z-index más alto) para taparlo mientras carga la página
   real detrás. Se puede saltar tocando/haciendo clic en cualquier parte.
   Respeta prefers-reduced-motion (se salta la animación). */
html.intro-active, html.intro-active body { overflow: hidden; }
.intro-bloom {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background: var(--color-bg);
  opacity: 1;
  transition: opacity 0.6s var(--ease);
  cursor: pointer;
}
.intro-bloom[hidden] { display: none; }
.intro-bloom.is-leaving { opacity: 0; pointer-events: none; }
.bloom-svg { width: clamp(140px, 28vw, 220px); height: auto; overflow: visible; }
.bloom-stem {
  fill: none;
  stroke: #a3cb9e;
  stroke-width: 4.5;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: bloomStemDraw 1.1s var(--ease) 0.1s forwards;
}
.bloom-leaf {
  fill: #a3cb9e;
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  animation: bloomLeafIn 0.7s var(--ease) forwards;
}
.bloom-leaf-left { animation-delay: 0.45s; }
.bloom-leaf-right { animation-delay: 0.6s; }
.bloom-flower .petal {
  transform-box: fill-box;
  transform-origin: bottom center;
}
.petal-center {
  fill: #d9748a;
  animation: bloomPetalCenter 1.3s var(--ease) 0.35s both;
}
.petal-left {
  fill: #f3a8bb;
  animation: bloomPetalLeft 1.3s var(--ease) 0.5s both;
}
.petal-right {
  fill: #f3a8bb;
  animation: bloomPetalRight 1.3s var(--ease) 0.5s both;
}
.bloom-calyx {
  fill: #a3cb9e;
  opacity: 0;
  transform: scale(0.5);
  transform-box: fill-box;
  transform-origin: bottom center;
  animation: bloomLeafIn 0.6s var(--ease) 0.85s forwards;
}
.bloom-word {
  font-family: var(--font-brand);
  font-size: clamp(34px, 7.5vw, 56px);
  font-weight: 730;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: #4a4a4a;
  opacity: 1;
}
@keyframes bloomStemDraw { to { stroke-dashoffset: 0; } }
@keyframes bloomLeafIn { to { opacity: 1; transform: scale(1); } }
@keyframes bloomPetalCenter {
  0% { transform: scale(0.45) rotate(0deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes bloomPetalLeft {
  0% { transform: scale(0.45) rotate(-4deg); }
  100% { transform: scale(1) rotate(-30deg); }
}
@keyframes bloomPetalRight {
  0% { transform: scale(0.45) rotate(4deg); }
  100% { transform: scale(1) rotate(30deg); }
}
@media (prefers-reduced-motion: reduce) {
  .bloom-stem, .bloom-leaf, .bloom-calyx, .petal-center, .petal-left, .petal-right, .bloom-word {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
}

/* Páginas sin barra promocional: la navbar no debe reservar espacio para
   ella arriba, si no queda un hueco transparente por el que se ve el
   contenido pasando al hacer scroll. */
body.no-promo { --promo-h: 0px; }

/* -------------------- Promo bar -------------------- */
.promo-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  height: var(--promo-h);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-line);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  text-align: center;
  padding: 0 20px;
}

/* -------------------- Navbar -------------------- */
.navbar {
  position: fixed;
  top: var(--promo-h);
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), height 0.4s var(--ease);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.navbar.is-scrolled {
  background: rgba(253, 248, 246, 0.97);
  backdrop-filter: blur(14px);
  box-shadow: 0 10px 30px -20px rgba(56, 40, 37,0.3);
  height: 72px;
}
.navbar .container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  column-gap: 24px;
}
.nav-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 40px;
}
.brand {
  font-family: var(--font-brand);
  font-size: 40px;
  font-weight: 730;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  color: #4a4a4a;
  display: flex;
  align-items: baseline;
  justify-self: center;
  gap: 6px;
}
.brand span { color: var(--color-rose-deep); font-style: italic; }

.nav-links {
  display: flex;
  gap: 40px;
  align-items: center;
}
.nav-links.nav-links-left { justify-self: start; }
.nav-links a, .nav-contact-link {
  font-size: 14.5px;
  font-weight: 500;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after, .nav-contact-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0%;
  height: 1.5px;
  background: var(--color-rose-deep);
  transition: width 0.35s var(--ease);
}
.nav-links a:hover::after, .nav-links a.active::after,
.nav-contact-link:hover::after, .nav-contact-link.active::after { width: 100%; }
.nav-links a.active, .nav-contact-link.active { color: var(--color-rose-deep); }

/* -------------------- Preview de productos (hover en "Productos") -------------------- */
.nav-preview-wrap { position: relative; }
.nav-preview-panel {
  position: fixed;
  top: calc(var(--promo-h) + var(--nav-h));
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1160px, 94vw);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-hover);
  padding: 36px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 1002;
}
.nav-preview-wrap.open .nav-preview-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.nav-preview-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}
.nav-preview-card { display: flex; flex-direction: column; gap: 8px; }
.nav-preview-media {
  position: relative;
  aspect-ratio: 1 / 1.05;
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  transition: transform 0.4s var(--ease);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.nav-preview-card:hover .nav-preview-media { transform: scale(1.03); }
.nav-preview-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  padding: 12px;
  mix-blend-mode: multiply;
  transform-origin: center center;
  transform: scale(0.85);
}
.nav-preview-name { font-size: 15px; font-weight: 600; color: var(--color-text); line-height: 1.3; }
.nav-preview-price { font-size: 13.5px; color: var(--color-ink-soft); }
.nav-preview-all {
  display: block;
  text-align: center;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--color-line);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-ink);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}
.lang-switch { position: relative; display: flex; align-items: center; }
.flag-badge {
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
  border-radius: 6px;
  transition: background 0.25s var(--ease), opacity 0.25s var(--ease);
}
.flag-badge:hover { background: var(--color-bg-alt); }
.lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-hover);
  padding: 5px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
  z-index: 1003;
}
.lang-switch.open .lang-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* -------------------- Búsqueda de productos (barra completa bajo la navbar, al estilo rarebeauty.com) -------------------- */
.search-trigger svg { width: 19px; height: 19px; }
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1002;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  box-shadow: 0 20px 40px -30px rgba(56, 40, 37, 0.35);
  max-height: 70vh;
  overflow-y: auto;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s var(--ease), visibility 0.2s;
}
.search-overlay.open { opacity: 1; visibility: visible; }
.search-box {
  max-width: var(--container);
  margin: 0 auto;
  padding: 14px 32px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.search-box svg { width: 18px; height: 18px; color: var(--color-ink-soft); flex-shrink: 0; }
.search-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text);
}
.search-input::placeholder { color: var(--color-ink-soft); opacity: 0.5; }
.search-close { display: flex; align-items: center; justify-content: center; color: var(--color-ink-soft); }
.search-close .ico svg { width: 16px; height: 16px; }
.search-results {
  max-width: var(--container);
  margin: 0 auto;
  border-top: 1px solid var(--color-line);
}
.search-results:empty { border-top: none; }
.search-result {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 32px;
  border-bottom: 1px solid var(--color-line);
}
.search-result:hover { background: var(--color-bg-alt); }
.search-result-media {
  width: 44px; height: 44px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.search-result-media .ico svg { width: 20px; height: 20px; color: white; }
.search-result-info { display: flex; flex-direction: column; gap: 2px; }
.search-result-name { font-size: 14px; font-weight: 600; }
.search-result-price { font-size: 12.5px; color: var(--color-ink-soft); }
.search-empty { padding: 6px 32px 26px; font-size: 14px; color: var(--color-ink-soft); }
.search-see-all {
  display: block;
  text-align: center;
  padding: 16px 32px;
  font-size: 13px;
  font-weight: 600;
}

.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.icon-btn:hover { background: var(--color-blush); transform: translateY(-2px); }
.icon-btn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute;
  top: -2px; right: -2px;
  background: var(--color-rose-deep);
  color: white;
  font-size: 10.5px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transform: scale(0);
  transition: transform 0.3s var(--ease);
}
.cart-count.show { transform: scale(1); }

.nav-toggle {
  display: none;
  width: 42px; height: 42px;
  align-items: center; justify-content: center;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle .bar {
  width: 22px; height: 2px; background: var(--color-ink);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open .bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.open .bar:nth-child(2) { opacity: 0; }
.nav-toggle.open .bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  top: calc(var(--promo-h) + var(--nav-h)); left: 0; right: 0;
  background: var(--color-bg);
  z-index: 999;
  padding: 20px 0 30px;
  transform: translateY(-120%);
  visibility: hidden;
  transition: transform 0.45s var(--ease), visibility 0s linear 0.45s;
  box-shadow: 0 30px 40px -30px rgba(0,0,0,0.2);
}
.mobile-menu.open { transform: translateY(0); visibility: visible; transition: transform 0.45s var(--ease); }
.mobile-menu .container { display: flex; flex-direction: column; gap: 4px; }
.mobile-menu a { padding: 14px 0; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--color-line); }

/* -------------------- Buttons -------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 34px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), color .35s var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: var(--color-ink);
  color: white;
}
.btn-primary:hover {
  background: var(--color-rose-deep);
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-ink);
  color: var(--color-ink);
}
.btn-outline:hover {
  background: var(--color-ink);
  color: white;
  transform: translateY(-3px);
}
.btn-block { width: 100%; }
.btn-sm { padding: 11px 22px; font-size: 13px; }
.btn:disabled { opacity: 0.5; pointer-events: none; }

/* -------------------- Hero -------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--promo-h) + var(--nav-h));
  background: radial-gradient(circle at 80% 20%, var(--color-blush) 0%, transparent 45%),
              radial-gradient(circle at 10% 80%, var(--color-gold-light) 0%, transparent 40%),
              var(--color-bg);
  overflow: hidden;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 60px;
  align-items: center;
}
.hero-copy h1 {
  font-size: clamp(36px, 4.2vw, 58px);
  letter-spacing: -0.01em;
}
.hero-copy h1 em {
  font-style: normal;
  color: var(--color-rose-deep);
}
.hero-copy p.lead {
  margin-top: 24px;
  font-size: 18px;
  color: var(--color-ink-soft);
  max-width: 480px;
  line-height: 1.7;
}
.hero-cta {
  margin-top: 40px;
  display: flex;
  gap: 18px;
  align-items: center;
}
.hero-stats {
  margin-top: 56px;
  display: flex;
  gap: 48px;
}
.hero-stats div strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.01em;
  font-size: 30px;
}
.hero-stats div span {
  font-size: 13px;
  color: var(--color-ink-soft);
}

.hero-visual {
  position: relative;
  height: 560px;
}
.hero-card {
  position: absolute;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: float 6s ease-in-out infinite;
}
.hero-card.card-1 { width: 66%; height: 78%; top: 0; right: 0; background: var(--grad-1); }
.hero-card.card-2 {
  width: 46%; height: 42%; left: 0; bottom: 0;
  background: var(--color-surface);
  padding: 22px;
  display: flex; flex-direction: column; justify-content: space-between;
  animation-delay: 1.2s;
}
.hero-card.card-2 .badge-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-2);
  display: flex; align-items: center; justify-content: center;
}
.hero-card.card-2 strong { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.01em; font-size: 22px; }
.hero-card.card-2 small { color: var(--color-ink-soft); font-size: 12.5px; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-16px); }
}

.scroll-cue {
  position: absolute;
  left: 50%; bottom: 32px;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-soft);
}
.scroll-cue .line {
  width: 1px; height: 40px;
  background: linear-gradient(var(--color-ink-soft), transparent);
  animation: scrollLine 2s ease-in-out infinite;
}
@keyframes scrollLine {
  0% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* -------------------- Showcase carousel (estilo Rare Beauty) -------------------- */
.showcase {
  position: relative;
  overflow: hidden;
  background: var(--color-bg);
  padding: 0;
  margin-top: calc(var(--promo-h) + var(--nav-h));
}
.showcase-track {
  display: flex;
  transition: transform 0.6s var(--ease);
}
.showcase-slide {
  min-width: 100%;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
}
.showcase-media {
  height: 78vh;
  min-height: 460px;
  max-height: 680px;
  position: relative;
  overflow: hidden;
}
.showcase-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 16px;
  box-sizing: border-box;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}
.showcase-media:has(img)::after { display: none; }
.showcase-media::after {
  content: "Foto próximamente";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(56, 40, 37, 0.35);
}
.showcase-content {
  padding: 60px 70px;
}
.showcase-content .eyebrow { margin-bottom: 18px; }
.showcase-content h2 { font-size: clamp(30px, 3.2vw, 46px); margin-bottom: 20px; }
.showcase-content p { color: var(--color-ink-soft); line-height: 1.8; font-size: 15.5px; margin-bottom: 30px; max-width: 420px; }
.showcase-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  z-index: 5;
  transition: background 0.3s var(--ease);
}
.showcase-arrow:hover { background: var(--color-ink); color: white; }
.showcase-arrow.prev { left: 24px; }
.showcase-arrow.next { right: 24px; }
.showcase-dots { display: flex; gap: 8px; justify-content: center; padding: 20px 0; }
.showcase-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-line);
  transition: background 0.3s var(--ease);
}
.showcase-dots span.active { background: var(--color-rose-deep); }

/* -------------------- About teaser (breve, arriba del carrusel) -------------------- */
.about-teaser {
  padding: 12px 0;
  margin-top: calc(var(--promo-h) + var(--nav-h));
  text-align: left;
}
.about-teaser .eyebrow { margin-bottom: 20px; }
.about-teaser p {
  max-width: 620px;
  margin: 0;
  font-size: 18px;
  line-height: 1.8;
  color: var(--color-text);
}
.about-teaser a {
  display: inline-block;
  margin-top: 24px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* -------------------- Sections -------------------- */
section { padding: 130px 0; }
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 64px;
  gap: 40px;
}
.section-head h2 { font-size: clamp(32px, 4vw, 48px); }
.section-head p { color: var(--color-ink-soft); max-width: 420px; margin-top: 14px; line-height: 1.7; }
.section-head.center { flex-direction: column; align-items: center; text-align: center; }
.section-head.center p { max-width: 560px; }

.bg-alt { background: var(--color-bg-alt); }

/* -------------------- Reveal animation -------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }
.reveal-stagger.in-view > * { opacity: 1; transform: translateY(0); }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal-stagger.in-view > *:nth-child(1) { transition-delay: 0s; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 0.08s; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 0.16s; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 0.24s; }
.reveal-stagger.in-view > *:nth-child(5) { transition-delay: 0.32s; }
.reveal-stagger.in-view > *:nth-child(6) { transition-delay: 0.4s; }

/* -------------------- Category pills -------------------- */
.category-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.pill {
  padding: 12px 24px;
  border-radius: 100px;
  border: 1.5px solid var(--color-line);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s var(--ease);
  background: var(--color-surface);
}
.pill:hover { border-color: var(--color-rose-deep); }
.pill.active {
  background: var(--color-ink);
  color: white;
  border-color: var(--color-ink);
}

.subcategory-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: -30px 0 40px;
}
.subcategory-row .pill {
  padding: 8px 18px;
  font-size: 13px;
  background: transparent;
  border-color: var(--color-line);
}
.subcategory-row .pill.active {
  background: var(--color-rose-deep);
  color: white;
  border-color: var(--color-rose-deep);
}

/* -------------------- Product grid & cards -------------------- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  /* stretch (no "start"): con align-items:start cada tarjeta conservaba su
     propia altura de contenido, así que una tarjeta con una línea extra
     ("Color: ...") terminaba más abajo que su vecina en la misma fila —
     el efecto "no simétrico" que se veía en el catálogo. Con stretch todas
     las tarjetas de una fila ocupan la altura de la más alta, y el
     margin-top:auto del precio (ver .type-info .type-price) se encarga de
     que el precio siga pegado abajo en cada una. */
  align-items: stretch;
}
.product-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* Productos recomendados (página de producto): 4 en una fila, íconos chicos y livianos */
#related-products {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
#related-products .product-media svg {
  width: 52px; height: 52px;
  opacity: 0.75;
}
#related-products .product-info { padding: 20px 16px 18px; gap: 8px; }
#related-products .product-cat { font-size: 13px; }
#related-products .product-name { font-size: 18px; font-weight: 500; }
#related-products .product-rating { font-size: 11.5px; }
#related-products .price-current { font-size: 18.5px; font-weight: 600; }
#related-products .price-old { font-size: 15px; }

.product-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 10px 30px -22px rgba(56, 40, 37,0.3);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-hover);
}
.product-media-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-media svg {
  width: 110px; height: 110px;
  opacity: 0.92;
  transition: transform 0.6s var(--ease);
}
/* Nota: sin "isolation", a propósito — con isolation, mix-blend-mode
   sólo se funde con lo que haya DENTRO de ese contexto aislado (que
   aquí es nada), y el blanco de la foto deja de desaparecer. */
.product-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.6s var(--ease);
  /* ~15% más chica que el marco, centrada exactamente en el medio, y
     multiply funde el fondo blanco de estudio con el beige de la tarjeta. */
  transform-origin: center center;
  transform: scale(0.85);
  mix-blend-mode: multiply;
}
.product-card:hover .product-media img { transform: scale(0.9); }
/* Solo en la portada: 4 productos destacados por fila, tarjetas más chicas */
#featured-products {
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}
#featured-products .product-media svg {
  width: 68px; height: 68px;
}
#featured-products .product-info { padding: 22px 18px 20px; gap: 8px; }
#featured-products .product-cat { font-size: 14px; }
#featured-products .product-name { font-size: 19px; }
#featured-products .product-rating { font-size: 12px; }
#featured-products .price-current { font-size: 20px; }
#featured-products .price-old { font-size: 15px; }
.product-card:hover .product-media svg { transform: scale(1.12) rotate(-4deg); }

.product-badge {
  position: absolute;
  top: 14px; left: 14px;
  background: var(--color-ink);
  color: white;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 12px;
  border-radius: 100px;
}
.product-badge.offer { background: var(--color-rose-deep); }

/* Sello "Coming Soon" — grande, centrado y muy visible sobre la foto del
   producto, para productos que aún no tenemos en inventario (rhode, Rare
   Beauty). No es un badge chico de esquina: cubre el marco completo con
   un velo oscuro y un sello rotado, para que sea imposible pasarlo por alto. */
.coming-soon-stamp {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 32, 29, 0.42);
  pointer-events: none;
}
.coming-soon-stamp span {
  display: inline-block;
  background: var(--color-ink);
  color: #fff;
  font-family: var(--font-brand, var(--font-display));
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: clamp(13px, 1.5vw, 21px);
  line-height: 1.2;
  padding: 11px 22px;
  border: 2px solid #fff;
  border-radius: 4px;
  transform: rotate(-7deg);
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}
.coming-soon-stamp.mini {
  z-index: 3;
}
.coming-soon-stamp.mini span {
  font-size: 10.5px;
  padding: 5px 10px;
  border-width: 1.5px;
  letter-spacing: 0.03em;
}

.product-quick {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  gap: 8px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s var(--ease);
}
.product-card:hover .product-quick { opacity: 1; transform: translateY(0); }
.product-quick button {
  flex: 1;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-radius: 100px;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: background 0.3s var(--ease), color .3s var(--ease);
}
.product-quick button:hover { background: var(--color-ink); color: white; }

.product-info { padding: 30px 26px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.product-cat { font-size: 18px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-rose-deep); font-weight: 600; }
.product-name { font-family: var(--font-display); font-size: 27px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.product-rating { display: flex; align-items: center; gap: 6px; font-size: 16px; color: var(--color-ink-soft); }
.product-rating svg { width: 17px; height: 17px; fill: var(--color-gold); }
.product-price-row { display: flex; align-items: baseline; gap: 10px; margin-top: auto; padding-top: 10px; }
.price-current { font-size: 27px; font-weight: 700; }
.price-old { font-size: 20px; color: var(--color-ink-soft); text-decoration: line-through; }

/* -------------------- Footer -------------------- */
footer {
  background: var(--color-ink);
  color: rgba(255,255,255,0.82);
  padding: 90px 0 0;
  position: relative;
  overflow: hidden;
}
/* Marca de agua del logo, apenas visible, como el emblema de fondo de L'Oréal */
footer::before {
  content: "avélisse";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-brand);
  font-weight: 730;
  text-transform: lowercase;
  /* vorher fest 230px: passte auf Desktop, war aber auf dem Handy riesig und
     zeigte nur die mittleren Buchstaben ("élis") abgeschnitten. Jetzt skaliert
     die Wasserzeichen-Schrift proportional zur Bildschirmbreite, sodass das
     ganze Wort "avélisse" auf jeder Größe sichtbar bleibt; ab ca. 1150px
     Breite bleibt es wie bisher bei 230px gedeckelt. */
  font-size: clamp(60px, 20vw, 230px);
  line-height: 1;
  letter-spacing: -0.01em;
  color: rgba(255,255,255,0.045);
  white-space: nowrap;
  pointer-events: none;
  z-index: 0;
}
.footer-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 50px;
  padding-bottom: 60px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.footer-grid h4 { color: white; font-family: var(--font-body); font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 22px; font-weight: 600; }
.footer-grid ul li { margin-bottom: 12px; font-size: 14.5px; overflow-wrap: anywhere; }
.footer-grid ul li a:hover { color: white; }
.footer-brand p { margin-top: 18px; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,0.65); max-width: 320px; }
/* Barra inferior oscura, a todo lo ancho, al estilo loreal-paris.de */
.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  padding: 20px 0;
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,0.5);
  clip-path: inset(0 -100vmax);
  box-shadow: 0 0 0 100vmax rgba(0,0,0,0.35);
  background: rgba(0,0,0,0.35);
}
.social-row { display: flex; gap: 14px; margin-top: 20px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s var(--ease);
}
.social-row a:hover { background: white; color: var(--color-ink); }
.social-row svg { width: 16px; height: 16px; }

/* -------------------- Cart drawer -------------------- */
.overlay {
  position: fixed; inset: 0;
  background: rgba(56, 40, 37,0.45);
  backdrop-filter: blur(2px);
  z-index: 1400;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.overlay.open { opacity: 1; pointer-events: auto; }

.cart-drawer {
  position: fixed;
  top: 0; right: 0;
  width: 440px; max-width: 92vw;
  height: 100%;
  background: var(--color-surface);
  z-index: 1500;
  box-shadow: -30px 0 60px -30px rgba(0,0,0,0.3);
  transform: translateX(100%);
  transition: transform 0.5s var(--ease);
  display: flex; flex-direction: column;
}
.cart-drawer.open { transform: translateX(0); }
.cart-head {
  padding: 28px 28px 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--color-line);
}
.cart-head h3 { font-size: 22px; }
.cart-close { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background 0.3s; }
.cart-close:hover { background: var(--color-blush); }
.cart-items { flex: 1; overflow-y: auto; padding: 20px 28px; display: flex; flex-direction: column; gap: 18px; }
.cart-item { display: flex; gap: 14px; }
.cart-item-media {
  width: 74px; height: 74px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.cart-item-media svg { width: 32px; height: 32px; }
.cart-item-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
  transform-origin: center center;
  transform: scale(0.85);
  mix-blend-mode: multiply;
}
.cart-item-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.cart-item-info .name { font-size: 14.5px; font-weight: 600; }
.cart-item-info .cat { font-size: 12px; color: var(--color-ink-soft); }
.cart-item-row { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; }
.qty-control { display: flex; align-items: center; gap: 10px; border: 1px solid var(--color-line); border-radius: 100px; padding: 4px 8px; }
.qty-control button { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.remove-item { font-size: 12px; color: var(--color-rose-deep); text-decoration: underline; }
.cart-empty { text-align: center; padding: 60px 20px; color: var(--color-ink-soft); }
.cart-empty svg { width: 56px; height: 56px; margin: 0 auto 16px; opacity: 0.4; }

.cart-footer { padding: 24px 28px 30px; border-top: 1px solid var(--color-line); }
.cart-subtotal-row { display: flex; justify-content: space-between; font-size: 15px; margin-bottom: 18px; }
.cart-subtotal-row strong { font-size: 20px; }

/* -------------------- Forms -------------------- */
.form-group { margin-bottom: 20px; }
.form-group label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
input, select, textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-line);
  font-family: inherit;
  font-size: 14.5px;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color 0.3s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-rose-deep); }
textarea { resize: vertical; min-height: 110px; }

/* -------------------- Payment options -------------------- */
.pay-options { display: flex; flex-direction: column; gap: 14px; }
.pay-option {
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
  display: flex; align-items: center; gap: 16px;
  cursor: pointer;
  transition: border-color 0.3s, background 0.3s;
}
.pay-option:hover { border-color: var(--color-rose-deep); }
.pay-option.selected { border-color: var(--color-rose-deep); background: var(--color-blush); }
.pay-option input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; }
.pay-option .pay-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--color-bg-alt);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pay-option .pay-icon svg { width: 22px; height: 22px; }
.pay-option .pay-text strong { display: block; font-size: 14.5px; }
.pay-option .pay-text span { font-size: 12.5px; color: var(--color-ink-soft); }

.pay-option-wrap { display: flex; flex-direction: column; }
.pay-option-wrap.selected .pay-option { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.pay-details {
  display: none;
  padding: 16px 20px 18px;
  border: 1.5px solid var(--color-rose-deep);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: var(--color-blush);
  font-size: 13px;
  line-height: 1.7;
}
.pay-option-wrap.selected .pay-details { display: block; }
.pay-details p { margin: 0 0 4px; }
.pay-details p:last-child { margin-bottom: 0; }
.pay-details strong { color: var(--color-ink); }
.pay-details .pay-details-note { margin-top: 8px; color: var(--color-ink-soft); font-style: italic; }

/* -------------------- Page hero (inner pages) -------------------- */
.page-hero {
  padding: 200px 0 70px;
  text-align: center;
  background: linear-gradient(180deg, var(--color-blush) 0%, var(--color-bg) 100%);
}

/* -------------------- Barra mini de portada (sin título, marcador de imagen) -------------------- */
.mini-hero-bar {
  margin-top: calc(var(--promo-h) + var(--nav-h));
  height: 200px;
  background: var(--grad-3);
  position: relative;
  overflow: hidden;
}
.mini-hero-bar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mini-hero-bar:has(img)::after { display: none; }
.mini-hero-bar::after {
  content: "Foto próximamente";
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.page-hero h1 { font-size: clamp(36px, 5vw, 58px); font-family: var(--font-brand); }
.page-hero.align-left { text-align: left; padding-bottom: 30px; }
.page-hero.align-right { text-align: right; }
/* Kopfbereich der Produktseite: fester Wert 160px passt zum großen Desktop-Navbar
   (96px) + Promo-Leiste. War vorher als Inline-Style hart auf 160px codiert, was
   auf dem Handy (kleinerer Navbar von 72px, keine Promo-Leiste) einen riesigen,
   leeren weißen/rosa Balken zwischen Navbar und Breadcrumb erzeugte. Jetzt per
   Klasse gesteuert und auf Mobile proportional zur tatsächlichen Navbar-Höhe. */
.pd-page-hero { padding: 160px 0 0; }
.breadcrumb { margin-top: 18px; font-size: 13.5px; color: var(--color-ink-soft); }
.breadcrumb a:hover { color: var(--color-rose-deep); }

/* -------------------- Catalog hero (estilo rhode) -------------------- */
.catalog-hero {
  position: relative;
  margin-top: calc(var(--promo-h) + var(--nav-h));
  height: 56vh;
  min-height: 360px;
  max-height: 540px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-rose) 0%, var(--color-gold-light) 55%, var(--color-blush) 100%);
}
.catalog-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.catalog-hero-scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(253,248,246,.88) 0%, rgba(253,248,246,.8) 45%, rgba(253,248,246,.45) 78%, rgba(253,248,246,.2) 100%);
}
.catalog-hero .tagline {
  position: relative;
  z-index: 1;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(22px, 3.2vw, 38px);
  color: var(--color-ink);
  text-align: center;
  max-width: 700px;
  padding: 0 24px;
}
.catalog-hero .tagline em { font-style: normal; font-weight: 700; }

.catalog-toolbar { padding: 44px 0 0; }
.catalog-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  padding: 20px 0 28px;
  border-top: 1px solid var(--color-line);
  margin-top: 24px;
}
.catalog-meta .sort-label {
  font-size: 14px;
  color: var(--color-ink-soft);
  display: flex;
  align-items: center;
  gap: 8px;
}
.catalog-meta select {
  border: none;
  background: none;
  font-weight: 700;
  color: var(--color-text);
  font-size: 14px;
  padding: 0;
  cursor: pointer;
}
.catalog-meta .search-mini {
  border: none;
  border-bottom: 1.5px solid var(--color-line);
  background: none;
  font-size: 14px;
  padding: 4px 2px;
  width: 180px;
}
.catalog-meta .result-count { font-size: 14px; color: var(--color-ink-soft); }

/* Tarjetas de producto tipográficas (sin foto todavía, estilo rhode) */
.product-card-type {
  background: var(--color-bg-alt);
  border-radius: var(--radius-md);
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  box-shadow: 0 10px 30px -22px rgba(56, 40, 37, 0.3);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.product-card-type:hover { transform: translateY(-8px); box-shadow: var(--shadow-hover); }
.product-card-type .type-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.product-card-type .type-cat { font-size: 14px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-rose-deep); font-weight: 600; }
.product-card-type .type-badge { background: var(--color-ink); color: white; font-size: 11px; font-weight: 600; padding: 6px 12px; border-radius: 100px; white-space: nowrap; }
.product-card-type .type-badge.offer { background: var(--color-rose-deep); }
.product-card-type .type-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: clamp(18px, 2.1vw, 26px);
  letter-spacing: -0.01em;
  color: var(--color-text);
  text-transform: lowercase;
  line-height: 1.08;
}
.product-card-type .type-price { margin-top: 8px; font-size: 17.5px; font-weight: 700; color: var(--color-text); }
.product-card-type .type-price .price-old { margin-left: 8px; font-weight: 500; font-size: 15.5px; color: var(--color-ink-soft); text-decoration: line-through; }

/* Variante con foto real de producto: estilo minimalista (como rhode.com) —
   el producto se ve pequeño y centrado sobre un fondo claro, con el nombre
   y el precio debajo en texto normal (no superpuesto ni gigante). */
.product-card-type.has-photo {
  aspect-ratio: auto;
  padding: 0;
  justify-content: flex-start;
}
.product-card-type .type-photo-wrap {
  /* Mismo patrón robusto que .product-media-wrap/.product-media (posición
     absoluta llenando el marco), en vez de centrar por flex directamente
     sobre una caja con aspect-ratio — así se evita el corrimiento hacia
     un lado que puede pasar al combinar aspect-ratio con flex-stretch.
     Sin color propio: el multiply de la foto se funde con el beige de la
     tarjeta (.product-card-type), que ya está detrás. */
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.product-card-type .type-photo-inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}
.product-card-type .type-photo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transition: transform 0.5s var(--ease);
  /* Las fotos originales traen fondo blanco de estudio; con multiply el
     blanco se funde con el beige de la tarjeta y desaparece el recuadro
     duro, sin tener que recortar el producto a mano. */
  mix-blend-mode: multiply;
  /* ~15% más chica que el marco, centrada exactamente en el medio del
     campo (no ocupa toda la tarjeta de borde a borde). */
  transform-origin: center center;
  transform: scale(var(--card-img-scale, 0.85));
}
.product-card-type.has-photo:hover .type-photo { transform: scale(calc(var(--card-img-scale, 0.85) + 0.05)); }
.product-card-type.has-photo .type-badge {
  position: absolute;
  top: 14px;
  left: 14px;
}
.product-card-type .type-info {
  /* Más padding arriba para que el texto quede claramente separado de la
     foto (que termina en .type-photo-wrap justo encima). */
  padding: 20px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* flex:1 + el margin-top:auto del precio (más abajo) es lo que permite
     que el precio quede siempre pegado abajo de la tarjeta, sin importar
     si hay o no línea de "Color: ..." — así todas las tarjetas de una
     misma fila terminan a la misma altura (ver también align-items:stretch
     en .product-grid). */
  flex: 1;
}
.product-card-type .type-info .type-cat { display: block; }
.product-card-type .type-name-plain {
  font-family: inherit;
  font-weight: 600;
  font-size: 17.5px;
  color: var(--color-text);
  line-height: 1.35;
  text-transform: none;
  /* Recorta a 2 líneas siempre: sin esto, un nombre de producto largo hace
     la tarjeta más alta que sus vecinas y deja huecos irregulares en la
     grilla (nombres cortos vs. largos). Con line-clamp todas las tarjetas
     de una fila terminan a la misma altura sin importar el largo del nombre. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-card-type .type-info .type-price { margin-top: auto; padding-top: 8px; }
.product-card-type .type-color {
  font-size: 13.5px;
  color: var(--color-ink-soft);
}
.product-card-type .type-color-more {
  font-size: 12px;
  color: var(--color-ink-soft);
  opacity: 0.75;
  margin-top: -2px;
}

/* -------------------- Misc components -------------------- */
.badge-tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 100px;
  background: var(--color-blush);
  color: var(--color-rose-deep);
  font-size: 12px;
  font-weight: 600;
}

.value-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.value-card {
  text-align: center;
}
.value-card .icon-wrap {
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--grad-1);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 22px;
}
.value-card .icon-wrap svg { width: 24px; height: 24px; color: white; }
.value-card h3 { font-size: 18px; margin-bottom: 10px; }
.value-card p { color: var(--color-ink-soft); font-size: 14.5px; line-height: 1.7; max-width: 300px; margin: 0 auto; }
.reseller-note {
  text-align: center;
  color: var(--color-ink-soft);
  line-height: 1.7;
  max-width: 560px;
  margin: 50px auto 0;
}

.testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.testimonial-card {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 34px;
  box-shadow: 0 10px 30px -22px rgba(56, 40, 37,0.25);
}
.testimonial-stars { display: flex; gap: 4px; margin-bottom: 18px; color: var(--color-rose); letter-spacing: 2px; }
.testimonial-stars svg { width: 15px; height: 15px; fill: var(--color-gold); }
.testimonial-card p.quote { font-size: 15px; line-height: 1.7; color: var(--color-ink-soft); margin-bottom: 22px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-author .avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--grad-3);
}
.testimonial-author strong { display: block; font-size: 14px; }
.testimonial-author span { font-size: 12.5px; color: var(--color-ink-soft); }

.instagram-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.instagram-strip .insta-tile {
  aspect-ratio: 1; border-radius: 14px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.instagram-strip .insta-tile svg { width: 26px; height: 26px; color: white; opacity: 0; transition: opacity 0.3s; }
.instagram-strip .insta-tile:hover svg { opacity: 1; }
.instagram-strip .insta-tile::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.25);
  opacity: 0; transition: opacity 0.3s;
}
.instagram-strip .insta-tile:hover::after { opacity: 1; }

.newsletter {
  background: var(--color-ink);
  border-radius: var(--radius-lg);
  padding: 70px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  color: white;
}
.newsletter h2 { color: white; font-size: clamp(26px, 3vw, 36px); max-width: 420px; }
.newsletter-form { display: flex; gap: 12px; flex: 1; max-width: 460px; }
.newsletter-form input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.25);
  color: white;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.5); }
.newsletter-form .btn-primary { background: white; color: var(--color-ink); }
.newsletter-form .btn-primary:hover { background: var(--color-rose-deep); color: white; }

/* -------------------- Popup de bienvenida (códigos de descuento) -------------------- */
.promo-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(56, 40, 37, 0.55);
  backdrop-filter: blur(3px);
  z-index: 2200;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.promo-modal-overlay.open { opacity: 1; pointer-events: auto; }
.promo-modal {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  max-width: 420px;
  width: 100%;
  padding: 40px 32px 32px;
  text-align: center;
  transform: translateY(16px) scale(0.97);
  opacity: 0;
  transition: all 0.45s var(--ease);
}
.promo-modal-overlay.open .promo-modal { transform: translateY(0) scale(1); opacity: 1; }
.promo-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 34px; height: 34px; border-radius: 50%;
  border: none; background: var(--color-bg-alt); color: var(--color-ink);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.25s var(--ease);
}
.promo-modal-close:hover { background: var(--color-rose); }
.promo-modal-close svg { width: 15px; height: 15px; }
.promo-modal-badge {
  width: 62px; height: 62px; border-radius: 50%;
  background: var(--color-blush); color: var(--color-rose-deep);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.promo-modal-badge svg { width: 28px; height: 28px; }
.promo-modal h3 {
  font-family: var(--font-brand);
  font-size: 24px; font-weight: 700;
  color: var(--color-ink); margin-bottom: 14px;
}
.promo-modal p {
  font-size: 14.5px; line-height: 1.6; color: var(--color-text);
  margin-bottom: 10px;
}
.promo-modal p strong { color: var(--color-rose-deep); font-weight: 700; }
.promo-modal-cta { margin-top: 16px; width: 100%; }

/* -------------------- Toast -------------------- */
.toast {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%) translateY(30px);
  background: var(--color-ink);
  color: white;
  padding: 16px 28px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 500;
  display: flex; align-items: center; gap: 10px;
  z-index: 2000;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s var(--ease);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { width: 18px; height: 18px; color: var(--color-success); }

/* -------------------- Chat de soporte (preguntas frecuentes) -------------------- */
.support-chat-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--color-ink);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 34px -14px rgba(56, 40, 37, 0.5);
  z-index: 1600;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.support-chat-btn:hover { background: var(--color-rose-deep); transform: translateY(-2px); }
.support-chat-btn svg { width: 25px; height: 25px; position: absolute; transition: opacity 0.25s var(--ease), transform 0.3s var(--ease); }
.support-chat-btn .chat-btn-close { opacity: 0; transform: scale(0.5) rotate(-40deg); }
.support-chat-btn .chat-btn-open { opacity: 1; transform: scale(1) rotate(0); }
.support-chat-btn.open .chat-btn-open { opacity: 0; transform: scale(0.5) rotate(40deg); }
.support-chat-btn.open .chat-btn-close { opacity: 1; transform: scale(1) rotate(0); }

.support-chat-panel {
  position: fixed;
  bottom: 100px;
  right: 28px;
  width: 372px;
  max-width: calc(100vw - 32px);
  height: 520px;
  max-height: calc(100vh - 150px);
  background: var(--color-bg);
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.97);
  transform-origin: bottom right;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s;
  z-index: 1600;
}
.support-chat-panel.open { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: var(--color-ink);
  color: white;
  flex-shrink: 0;
}
.chat-head-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--color-rose-deep);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.chat-head-avatar svg { width: 18px; height: 18px; color: white; stroke: white; }
.chat-head-text { display: flex; flex-direction: column; gap: 2px; }
.chat-head-title { font-size: 14.5px; font-weight: 700; }
.chat-head-subtitle { font-size: 12px; opacity: 0.7; }

.chat-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.chat-msg { max-width: 86%; font-size: 13.5px; line-height: 1.65; padding: 11px 15px; border-radius: 15px; }
.chat-msg-bot { align-self: flex-start; background: var(--color-surface); color: var(--color-text); border-bottom-left-radius: 4px; box-shadow: 0 6px 16px -12px rgba(56,40,37,0.35); }
.chat-msg-user { align-self: flex-end; background: var(--color-rose-deep); color: white; border-bottom-right-radius: 4px; }

.chat-quick { width: 100%; }
.chat-quick-label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-ink-soft); margin-bottom: 9px; display: block;
}
.chat-chip-row { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; align-items: flex-start; }
.chat-chip {
  font-size: 12.5px; font-weight: 500; padding: 9px 15px; border-radius: 100px;
  background: var(--color-surface); border: 1px solid var(--color-line); color: var(--color-text);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
  text-align: left; max-width: 100%;
}
.chat-chip:hover { background: var(--color-blush); border-color: var(--color-rose-deep); }

.chat-more-wrap { width: 100%; }
.chat-more-btn {
  font-size: 12px; font-weight: 600; color: var(--color-rose-deep);
  padding: 7px 0; text-decoration: underline; text-underline-offset: 3px;
}

.chat-cta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.chat-cta { font-size: 12.5px; font-weight: 600; padding: 9px 16px; border-radius: 100px; background: var(--color-rose-deep); color: white; display: inline-block; }
.chat-cta-outline { background: none; border: 1px solid var(--color-line); color: var(--color-text); }

.chat-input-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-top: 1px solid var(--color-line); background: var(--color-surface); flex-shrink: 0;
}
#chat-input { flex: 1; font-size: 13.5px; border: none; background: none; padding: 8px 6px; }
#chat-input:focus { outline: none; }
.chat-send {
  width: 36px; height: 36px; border-radius: 50%; background: var(--color-ink); color: white;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background 0.25s var(--ease);
}
.chat-send:hover { background: var(--color-rose-deep); }
.chat-send svg { width: 16px; height: 16px; }

@media (max-width: 520px) {
  .support-chat-panel { right: 16px; bottom: 92px; width: calc(100vw - 32px); height: calc(100vh - 170px); }
  .support-chat-btn { right: 16px; bottom: 20px; }
}

/* Ocultar el chat de soporte mientras el carrito está abierto: el botón
   "Finalizar Compra" del carrito queda justo en esa esquina y se superponía
   con la burbuja del chat. */
.cart-drawer.open ~ .support-chat-btn,
.cart-drawer.open ~ .support-chat-panel {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* -------------------- Gradient utility classes -------------------- */
.grad-1 { background: var(--grad-1); }
.grad-2 { background: var(--grad-2); }
.grad-3 { background: var(--grad-3); }
.grad-4 { background: var(--grad-4); }
.grad-5 { background: var(--grad-5); }

/* -------------------- Product detail page -------------------- */
.pd-grid {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  gap: 70px;
}
/* Umschließt .pd-media UND die Slide-Punkte darunter. Die Punkte lagen
   vorher als absolut positionierte Ebene direkt AUF dem Produktbild (nah am
   unteren Rand) — das sah gequetscht aus und war zudem fehleranfällig
   (Bezugsrahmen ging beim Deaktivieren des Sticky-Effekts auf kleineren
   Bildschirmen verloren). Jetzt sind die Punkte ein normales Element im
   Textfluss UNTER dem Bild, mit eigenem Abstand — robuster und sieht auf
   allen Bildschirmgrößen besser aus. Das Sticky-Scrollverhalten (Bild bleibt
   beim Scrollen sichtbar) sitzt jetzt hier statt auf .pd-media. */
.pd-visual { position: sticky; top: 120px; }
.pd-media {
  border-radius: var(--radius-lg);
  aspect-ratio: 1/1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  overflow: hidden;
}
.pd-media svg { width: 160px; height: 160px; opacity: 0.9; }
.pd-media img {
  width: 100%; height: 100%;
  object-fit: var(--pd-img-fit, cover);
  object-position: center center;
  transform-origin: center center;
  transform: scale(var(--pd-img-scale, 0.85));
  mix-blend-mode: multiply;
}

.pd-media-sprite { padding: 0; display: flex; align-items: center; justify-content: center; }
.pd-sprite {
  width: 100%; height: 100%;
  background-repeat: no-repeat;
  background-position-y: center;
  transition: background-position 0.3s var(--ease);
}
.pd-sprite-window {
  position: relative;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
}
.pd-media-sprite img.pd-sprite-img {
  position: absolute;
  top: 0; left: 0;
  width: auto; height: 100%;
  max-width: none;
  object-fit: unset;
  transform: none;
  mix-blend-mode: normal;
  transition: left 0.3s var(--ease);
}

/* -------------------- Slider de fotos del producto -------------------- */
.pd-media.has-slider { padding: 0; }
.pd-slider { position: relative; width: 100%; height: 100%; touch-action: pan-y; }
.pd-slide {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: var(--pd-img-fit, cover);
  object-position: center center;
  transform-origin: center center;
  transform: scale(var(--pd-slide-scale, var(--pd-img-scale, 0.85)));
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  pointer-events: none;
}
.pd-slide.active { opacity: 1; pointer-events: auto; }
.pd-slide-sprite {
  transform: none;
  mix-blend-mode: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-slide-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px;
  line-height: 1;
  color: var(--color-ink);
  box-shadow: 0 8px 22px rgba(56,40,37,0.18);
  z-index: 3;
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pd-slide-arrow:hover { background: white; transform: translateY(-50%) scale(1.06); }
.pd-slide-prev { left: 16px; }
.pd-slide-next { right: 16px; }
.pd-slide-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
}
.pd-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(56,40,37,0.15);
  transition: background 0.3s var(--ease), transform 0.3s var(--ease);
}
.pd-dot.active { background: var(--color-rose-deep); border-color: var(--color-rose-deep); transform: scale(1.25); }
.pd-cat { color: var(--color-rose-deep); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; }
.pd-title { font-size: clamp(30px, 3.4vw, 42px); margin-top: 12px; }
.pd-color { font-size: 15px; color: var(--color-ink-soft); margin-top: 8px; }
.pd-shades { margin-top: 14px; }
.pd-shades-label { font-size: 14px; color: var(--color-ink-soft); }
.pd-shades-label strong { color: var(--color-ink); font-weight: 600; }
.pd-shades-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pd-shade-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 16px 6px 8px;
  border-radius: 100px;
  border: 1.5px solid var(--color-line);
  background: white;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.pd-shade-btn:hover { border-color: var(--color-rose-deep); }
.pd-shade-btn.active { background: var(--color-ink); border-color: var(--color-ink); color: white; }
.pd-shade-chip {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex: none;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-repeat: no-repeat;
}
.pd-shade-btn.active .pd-shade-chip { border-color: rgba(255, 255, 255, 0.65); }
/* Foto de referencia opcional (p.ej. la línea completa de estilos), solo
   informativa — no forma parte de las fotos/variantes que se pueden
   comprar ni participa en el slider principal. */
.pd-reference { margin-top: 18px; }
.pd-reference-label {
  display: block;
  font-size: 13px;
  color: var(--color-ink-soft);
  margin-bottom: 8px;
}
.pd-reference-img {
  max-width: 260px;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-line);
  display: block;
}
.cart-item-variant { font-weight: 400; color: var(--color-ink-soft); font-size: 13px; }
.pd-rating { display: flex; align-items: center; gap: 10px; margin-top: 16px; font-size: 14px; color: var(--color-ink-soft); }
.pd-rating svg { width: 15px; height: 15px; fill: var(--color-gold); }
.pd-price-row { display: flex; align-items: baseline; gap: 14px; margin-top: 24px; }
.pd-price-row .price-current { font-size: 30px; }
.pd-desc { margin-top: 24px; color: var(--color-ink-soft); line-height: 1.8; font-size: 15px; }
.pd-highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
.pd-highlights li { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.pd-highlights li svg { width: 16px; height: 16px; color: var(--color-rose-deep); flex-shrink: 0; }
.pd-actions { display: flex; gap: 16px; margin-top: 36px; align-items: center; }
.pd-qty { display: flex; align-items: center; border: 1.5px solid var(--color-line); border-radius: 100px; padding: 6px 8px; gap: 16px; }
.pd-qty button { width: 30px; height: 30px; font-size: 18px; }
.pd-trust { display: flex; gap: 26px; margin-top: 36px; padding-top: 30px; border-top: 1px solid var(--color-line); }
.pd-trust div { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--color-ink-soft); }
.pd-trust svg { width: 20px; height: 20px; color: var(--color-rose-deep); }

/* "Quiénes somos" en sobre-nosotros.html: texto + foto en 2 columnas.
   Antes esto era un style="display:grid;grid-template-columns:1fr 1fr..."
   puesto directo en el HTML — un estilo inline no se puede "apagar" desde
   una media query del CSS (gana siempre por especificidad), así que en
   celular se quedaba forzado a 2 columnas de ~160px cada una: el texto se
   partía en líneas de 1-2 palabras (parecía gigante) y la foto quedaba
   diminuta al lado. Ahora es una clase normal, así el media query de abajo
   sí puede apilarlo en una sola columna. */
.about-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.about-intro-photo {
  border-radius: var(--radius-lg);
  aspect-ratio: 4/5;
  overflow: hidden;
}

/* -------------------- Responsive -------------------- */
@media (max-width: 1100px) {
  .product-grid { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .value-grid, .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .instagram-strip { grid-template-columns: repeat(4, 1fr); }
  .pd-grid { grid-template-columns: 1fr; }
  /* Schaltet nur noch den Sticky-Scroll-Effekt ab (ergibt in der gestapelten
     Mobile-Ansicht keinen Sinn). .pd-media selbst bleibt jetzt immer
     "position: relative" (siehe Basis-Regel oben) — die Pfeile brauchen das
     dauerhaft als Bezugsrahmen, egal auf welcher Bildschirmgröße. */
  .pd-visual { position: static; }
}

@media (max-width: 860px) {
  :root { --nav-h: 72px; }
  section { padding: 90px 0; }
  .pd-page-hero { padding-top: calc(var(--promo-h) + var(--nav-h) + 24px); }
  .hero { min-height: auto; padding-bottom: 80px; }
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { height: 380px; margin-top: 40px; }
  .hero-stats { gap: 30px; flex-wrap: wrap; }
  /* Los links de texto (Inicio/Productos/Sobre Nosotros) no caben en la
     barra angosta, así que se ocultan — pero solo ellos, no el contenedor
     .nav-links-left completo: ese contenedor se reutiliza para mostrar en
     su lugar los íconos de buscar/idioma (ver updateMobileNavGroups() en
     main.js), tal como en escritorio hay contenido a cada lado del logo. */
  .nav-links-left > a { display: none; }
  /* Buscar+bandera (izquierda) pesan menos en píxeles que carrito+menú
     (derecha): aunque ambos grupos quedan a 20px exactos del borde de la
     pantalla (simétrico) y ambas columnas del grid miden lo mismo, como el
     contenido de la izquierda es más angosto, el espacio que sobra dentro
     de su columna queda pegado al logo — agrandando el hueco entre el logo
     y los íconos de la izquierda más que el de la derecha. Con esto el ojo
     percibe el logo corrido hacia la izquierda aunque matemáticamente esté
     centrado. Fijamos un ancho mínimo igual al del grupo de la derecha
     (carrito 38px + menú 38px + gap ≈ 90px) para que el espacio sobrante
     quede parejo a ambos lados del logo. */
  .nav-links-left { gap: 10px; min-width: 90px; }
  /* El link "Contacto" es movido por JS (orderNavRight) dentro de
     .nav-actions junto a los íconos, así que la regla de arriba
     (.nav-links-left > a { display:none }) no lo alcanza (ya no vive ahí).
     Sin ocultarlo aquí, el texto "Contacto" ocupa tanto espacio en la barra
     angosta que empuja el botón de menú (.nav-toggle) fuera de la pantalla
     — por eso el menú "desaparecía" en el celular. Contacto sigue
     disponible desde el menú hamburguesa (.mobile-menu). */
  .nav-contact-link { display: none; }
  /* .navbar .container es un grid de 3 columnas (1fr auto 1fr): izquierda /
     marca / derecha. Fijamos la columna de cada uno explícitamente como
     red de seguridad — por ejemplo, si .nav-links-left llegara a quedar
     vacío un instante (antes de que updateMobileNavGroups() mueva los
     íconos ahí), un grid-item vacío igual no se saca solo del
     auto-placement, así que sin esto el logo y el resto podrían
     desplazarse de columna. */
  .navbar .container .brand { grid-column: 2; }
  .navbar .container .nav-right { grid-column: 3; }
  .nav-toggle { display: flex; }
  .nav-actions { gap: 10px; }
  .lang-switch { gap: 2px; }
  .flag-badge { font-size: 15px; padding: 2px; }
  .icon-btn { width: 38px; height: 38px; }
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); }
  /* #featured-products y #related-products fijan su propio grid-template-
     columns a 4 columnas (ver más arriba) con un selector de ID, que pesa
     más que la clase .product-grid de aquí arriba — sin repetirlo con el
     mismo tipo de selector, esas dos grillas seguían en 4 columnas
     angostísimas en el celular aunque el resto del catálogo sí se adaptaba. */
  #featured-products, #related-products { grid-template-columns: repeat(2, 1fr); }
  .section-head { flex-direction: column; align-items: flex-start; }
  .newsletter { flex-direction: column; text-align: center; padding: 50px 30px; }
  .newsletter-form { max-width: 100%; }
  .form-row { grid-template-columns: 1fr; }
  .value-grid, .testimonial-grid { grid-template-columns: 1fr; }
  .about-intro-grid { grid-template-columns: 1fr; gap: 36px; }
  .about-intro-photo { aspect-ratio: 4/3; max-width: 420px; margin: 0 auto; }
  .instagram-strip { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .pd-highlights { grid-template-columns: 1fr; }
  /* El carrusel del showcase (portada) usaba el mismo grid de 2 columnas
     (imagen | texto) del escritorio en cualquier ancho: en el celular eso
     dejaba la imagen del producto reducida a una franja angosta y el
     título/texto estirado en una columna muy angosta y muy alta. Aquí se
     apila en una sola columna, como el resto de las secciones. */
  .showcase-slide { grid-template-columns: 1fr; }
  .showcase-media { height: 42vh; min-height: 260px; max-height: 420px; }
  /* En escritorio la foto usa object-fit:contain con relleno, para mostrar
     el producto completo sin recortar. En el celular eso dejaba mucho aire
     vacío alrededor (las fotos traen su propio margen blanco de estudio),
     así que el producto se veía chico y "encajonado" en vez de ocupar la
     pantalla. object-fit:cover sin relleno hace que la foto llene el ancho
     completo de lado a lado, igual que en "Los favoritos de nuestras
     clientas" — mismo tratamiento que ya usamos ahí. */
  .showcase-media img { padding: 0; object-fit: cover; }
  .showcase-content { padding: 32px 24px 44px; }
  .showcase-content h2 { font-size: clamp(24px, 6vw, 32px); }
  .showcase-content p { max-width: 100%; }
  /* Las flechas usan "top:50%" (ver arriba) pensado para cuando la imagen
     ocupa toda la altura del slide, como en escritorio. Al apilar imagen y
     texto en una sola columna arriba, ese 50% cae fuera de la imagen, justo
     sobre el texto "NUEVO"/"Recomendado" — por eso tapaban esa palabra. Aquí
     se recalcula para que queden centradas dentro de la imagen (mitad de su
     altura), no de todo el slide. */
  .showcase-arrow { width: 38px; height: 38px; top: min(21vh, 210px); }
  /* Fotos de producto claramente más grandes en el celular, para que se
     reconozca el producto sin necesidad de hacer zoom. Antes el catálogo
     (.type-photo, object-fit:contain + scale 0.85) se veía bastante más
     chico que "Los favoritos de nuestras clientas" en la portada
     (.product-media img, object-fit:cover, sin encoger) — mismas fotos,
     mismo tamaño de tarjeta, pero con mucho más "aire" alrededor en el
     catálogo. Ahora el catálogo usa el mismo tratamiento: casi sin
     padding y sin encoger la imagen, así ambas secciones se ven parejas. */
  .product-card-type .type-photo-inner { padding: 6px; }
  .product-card-type .type-photo {
    object-fit: cover;
    transform: scale(1);
  }
  .product-card-type.has-photo:hover .type-photo { transform: scale(1.02); }
  .product-media img { transform: scale(0.95); }
}

@media (max-width: 520px) {
  .container { padding: 0 20px; }
  .product-grid, .product-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  #featured-products, #related-products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  /* Antes el carrito ocupaba el 100% del ancho en celular — sin dejar
     nada visible del fondo oscuro (.overlay) a los lados, que es lo que
     normalmente se puede tocar para cerrar el carrito. Quedaba "atrapado":
     la única salida era el botón X, chiquito, arriba. Con un poco de
     margen visible a la izquierda, se puede volver a tocar ahí para
     cerrar, como el resto del sitio. */
  .cart-drawer { width: 88%; max-width: 380px; }
  .footer-grid { grid-template-columns: 1fr; }
  .showcase-media { height: 38vh; min-height: 220px; }
  .showcase-arrow { top: min(19vh, 190px); }
}