/* =========================================================================
   El Mejor Perfume — hoja de estilos del tema
   Fuente de diseño: EMP-Home.dc.html (Claude Design)
   Convertido de estilos inline a clases con tokens reutilizables.
   ========================================================================= */

:root {
  --emp-cream: #F5F1E8;
  --emp-black: #111111;
  --emp-dark: #0c0a09;      /* footer / fondos de tarjeta oferta */
  --emp-panel: #1a1714;     /* tarjeta oscura */
  --emp-panel-2: #1c1a17;   /* barra envío */
  --emp-gold: var(--emp-wine);       /* alias legado: el acento ya no es dorado, es el rojo de marca */
  --emp-gold-soft: var(--emp-wine-soft);
  --emp-wine: #E2231A;      /* rojo vivo, a tono con el rojo del logo */
  --emp-wine-dark: #B91C1C;
  --emp-wine-soft: #EC706A; /* tinte claro del rojo, para texto/acentos sobre fondo oscuro */
  --emp-green: #2E7D4F;
  --emp-wa: #25D366;

  --emp-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --emp-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --emp-maxw: 1180px;
  --emp-topbar-h: 44px;      /* alto real de la barra de confianza (padding + contenido) */
  --emp-header-h: 62px;
  --emp-appbanner-h: 46px;   /* alto del banner de la App */
  --emp-shipbar-h: 56px;     /* alto de la barra de envío gratis (siempre visible) */

  /* Alto TOTAL de lo que queda pegado arriba, con solo lo que existe en esta
     página. Lo calcula initStickyOffsets() midiendo de verdad; el valor de aquí
     es solo el de arranque. Sumar las variables sueltas NO sirve:
     `--emp-appbanner-h` vale 46px aunque el banner esté apagado. */
  --emp-stack-h: 162px;
}

/* ---- Base ---------------------------------------------------------------- */
body.emp {
  margin: 0;
  background: var(--emp-cream);
  font-family: var(--emp-sans);
  color: var(--emp-black);
  overflow-x: hidden;
  position: relative;
}

.emp *,
.emp *::before,
.emp *::after {
  box-sizing: border-box;
}

/* Bloquea el scroll de fondo mientras el menú móvil (u otro overlay) está
   abierto. En iOS Safari, overflow:hidden solo en el body NO evita el
   scroll/rebote elástico de fondo — hace falta además position:fixed con
   el body corrido por el scroll actual (el JS fija "top" y lo restaura
   al cerrar). */
body.emp-scroll-lock {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

.emp img {
  max-width: 100%;
  display: block;
}

.emp a {
  color: var(--emp-wine);
}

.emp a:hover {
  color: var(--emp-wine-dark);
}

.emp ::-webkit-scrollbar {
  width: 8px;
}

.emp ::-webkit-scrollbar-thumb {
  background: var(--emp-gold);
  border-radius: 4px;
}

.emp-container {
  max-width: var(--emp-maxw);
  margin: 0 auto;
}

.emp-serif {
  font-family: var(--emp-serif);
}

/* Utilidad de accesibilidad */
.emp-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- 1. Barra de confianza superior ------------------------------------- */
.emp-topbar {
  background: var(--emp-black);
  color: var(--emp-cream);
  padding: 0 16px;
  height: var(--emp-topbar-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden;
  position: sticky;
  top: 0;
  z-index: 60;
  /* Separa visualmente la barra rotativa del header (antes se veían como
     un solo bloque negro continuo). */
  border-bottom: 1px solid rgba(226, 35, 26, 0.4);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.emp-topbar__msg {
  /* Fundido con UNA sola transición (sin animaciones que compitan/reinicien y
     causen parpadeo). emp-marquee-in solo corre una vez, en la carga inicial. */
  animation: emp-marquee-in 0.4s ease-out;
  transition: opacity 0.2s ease, transform 0.2s ease;
  font-weight: 700;
  letter-spacing: 0.035em;
  color: var(--emp-cream);
  text-shadow: 0 0 14px rgba(245, 241, 232, 0.35);
  will-change: opacity, transform;
}

.emp-topbar__msg.is-leaving {
  opacity: 0;
  transform: translateY(-5px);
}

@media (prefers-reduced-motion: reduce) {
  .emp-topbar__msg {
    animation: none;
    transition: none;
  }
}

/* Punto pulsante: da vida a la barra sin competir con el texto (reemplaza
   los puntos de carrusel que se veían dispersos). */
.emp-topbar__spark {
  width: 6px;
  height: 6px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--emp-wine);
  box-shadow: 0 0 8px 1px rgba(226, 35, 26, 0.8);
  animation: emp-spark-pulse 1.4s ease-in-out infinite;
}

@keyframes emp-spark-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 8px 1px rgba(226, 35, 26, 0.8);
  }
  50% {
    transform: scale(1.8);
    box-shadow: 0 0 14px 4px rgba(226, 35, 26, 0.95);
  }
}

/* ---- 2. Header ----------------------------------------------------------- */
.emp-header {
  background: var(--emp-black);
  padding: 14px 20px;
  position: sticky;
  top: var(--emp-topbar-h);
  /* Por encima de .emp-topbar (60): el panel del menú móvil vive dentro de
     este header (su propio contexto de apilamiento), así que si el header
     quedara por debajo de la topbar, esta se pintaría encima del panel
     entero sin importar el z-index interno del panel. No overlapean
     normalmente (el header empieza justo donde termina la topbar), así
     que subir esto no cambia nada en el uso normal. */
  z-index: 65;
  border-bottom: 1px solid rgba(226, 35, 26, 0.2);
}

.emp-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
}

/* El menú queda centrado entre el logo y el grupo de la derecha. En
   escritorio el panel no genera caja propia (display:contents) para que
   el <ul class="emp-nav"> de adentro sea el ítem de grid directo. */
.emp-nav-panel {
  display: contents;
}

.emp-nav-panel > .emp-nav {
  justify-content: center;
}

.emp-nav-panel__head {
  display: none;
}

.emp-header__right {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* ---- Botón hamburguesa (solo visible en móvil) --------------------------- */
.emp-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 26px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.emp-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--emp-cream);
  border-radius: 2px;
}

/* ---- Banner de la App (bajo el header, de extremo a extremo) ------------- */
/* La barra entera es el botón — sin pill ni márgenes, de borde a borde de
   la pantalla — y queda pegada (sticky) justo debajo del header, siempre
   visible al hacer scroll, igual que el header y la topbar. */
.emp-app-banner {
  height: var(--emp-appbanner-h);
  position: sticky;
  top: calc(var(--emp-topbar-h) + var(--emp-header-h));
  z-index: 58;
}

/* .emp-app-banner__btn.emp-app-banner__btn (doble clase) para ganarle en
   especificidad a la regla global ".emp a { color: var(--emp-wine) }" —
   con una sola clase el link salía en rojo sobre fondo rojo, casi invisible. */
.emp-app-banner__btn.emp-app-banner__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, var(--emp-wine-dark), var(--emp-wine) 50%, var(--emp-wine-dark));
  color: #fff;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(226, 35, 26, 0.4);
  box-shadow: 0 6px 18px -6px rgba(226, 35, 26, 0.65);
  animation: emp-appbanner-glow 2.4s ease-in-out infinite;
}

.emp-app-banner__btn.emp-app-banner__btn:hover {
  color: #fff;
  filter: brightness(1.1);
}

.emp-app-banner__btn:active {
  filter: brightness(0.95);
}

@keyframes emp-appbanner-glow {
  0%, 100% { box-shadow: 0 6px 18px -6px rgba(226, 35, 26, 0.65); }
  50% { box-shadow: 0 6px 22px -4px rgba(226, 35, 26, 0.95); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-app-banner__btn {
    animation: none;
  }
}

@media (max-width: 720px) {
  .emp-app-banner__btn {
    font-size: 13.5px;
    padding: 0 14px;
    text-align: center;
  }
}

/* ---- Overlay del menú móvil ----------------------------------------------- */
/* z-index menor al de .emp-header (59): el panel vive DENTRO del header
   (sticky, con su propio contexto de apilamiento), así que si el overlay
   tuviera un z-index mayor quedaría pintado encima del panel entero,
   oscureciéndolo — por eso debe ir por debajo del header, no por encima. */
.emp-nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 45;
}

.emp-nav-overlay.is-open {
  display: block;
}

.emp-logo {
  font-family: var(--emp-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--emp-gold);
  white-space: nowrap;
  text-decoration: none;
}

.emp-logo:hover {
  color: var(--emp-gold-soft);
}

/* Logo en imagen (Personalizar → Identidad del sitio → Logo del sitio). */
.emp-logo--image {
  display: flex;
  align-items: center;
}

.emp-logo--image img {
  display: block;
  height: auto;
  max-height: 44px;
  width: auto;
}

.emp-logo--image a {
  display: flex;
}

.emp-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.emp-search {
  width: 160px;
  flex: 0 0 auto;
  position: relative;
}

.emp-search__input {
  width: 100%;
  box-sizing: border-box;
  background: rgba(245, 241, 232, 0.08);
  border: 1px solid rgba(245, 241, 232, 0.18);
  color: var(--emp-cream);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
}

.emp-search__input::placeholder {
  color: rgba(245, 241, 232, 0.5);
}

/* Botón de lupa: solo se usa en móvil para ahorrar espacio (ver media
   query); en escritorio el buscador ya se ve completo y este botón sobra. */
.emp-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: none;
  color: var(--emp-cream);
  cursor: pointer;
  padding: 0;
}

.emp-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 13.5px;
  font-weight: 600;
  margin: 0;
  padding: 0;
  list-style: none;
}

.emp-nav li {
  position: relative;
}

/* Flecha de despliegue del menú móvil (inyectada por JS); en escritorio el
   despliegue es por hover y este botón no hace falta. */
.emp-nav__toggle {
  display: none;
}

.emp-nav a {
  display: block;
  color: rgba(245, 241, 232, 0.85);
  text-decoration: none;
}

.emp-nav a:hover {
  color: var(--emp-cream);
}

.emp-nav a.emp-nav__accent,
.emp-nav .emp-nav__accent > a {
  color: var(--emp-gold);
}

/* ---- Submenús (1er y 2do nivel) ------------------------------------------ */
/* Un solo cuadro por ítem de menú principal (con acento vino, el color
   principal de la marca). Dentro, cada ítem del 1er submenú es una COLUMNA:
   su encabezado + su propio 2do submenú apilado debajo. Si hay varias
   categorías con hijos, las columnas quedan una al lado de la otra (y así
   sucesivamente con la que siga). */
.emp-nav > li > .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 70;
  display: none;
  flex-direction: row;
  align-items: flex-start;
  gap: 28px;
  margin: 0;
  padding: 14px 20px;
  background: var(--emp-panel);
  border: 1.5px solid rgba(226, 35, 26, 0.55);
  border-radius: 10px;
  box-shadow: 0 20px 44px -14px rgba(0, 0, 0, 0.75);
}

/* Despliegue por hover — SOLO escritorio. En móvil el despliegue es por
   clic en la flechita (clase .is-open, ver media query más abajo); si esta
   regla corriera también en móvil, tocar el botón de la flecha (un
   <button> real) puede enfocarlo y activar :focus-within aquí, compitiendo
   con el estado .is-open y haciendo que el submenú parezca abrirse y
   cerrarse solo. */
@media (min-width: 721px) {
  .emp-nav > li:hover > .sub-menu,
  .emp-nav > li:focus-within > .sub-menu {
    display: flex;
  }

  /* Espacio para que el subrayado rojo de :hover no quede pegado al texto. */
  .emp-nav > li > a {
    padding-bottom: 4px;
  }

  /* Empuja el frasco un poco más hacia el centro del hero (separándolo del
     bloque de texto) sin tocar el resto del layout. */
  .emp-hero__media {
    margin-left: 28px;
  }

  /* Resaltado en rojo de marca al pasar el mouse por los ítems del menú
     principal (subrayado con box-shadow para no mover el layout). SOLO
     escritorio: en móvil el toque deja el link enfocado sin navegar
     (preventDefault en el toggle del submenú) y :focus-visible se quedaba
     pegado en rojo aunque is-open ya se hubiera quitado al plegar. */
  .emp-nav > li > a:hover,
  .emp-nav > li > a:focus-visible {
    color: var(--emp-wine);
    box-shadow: inset 0 -2px 0 var(--emp-wine);
  }

  /* Centrado bajo el ítem del menú (solo escritorio: en móvil el submenú
     es position:static y este transform lo cortaría hacia la izquierda). */
  .emp-nav > li > .sub-menu {
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Cada ítem del 1er submenú es su propia columna (encabezado + su 2do
   submenú apilado debajo), no un ancho al 100%. */
.emp-nav > li > .sub-menu > li {
  width: auto;
  min-width: 190px;
  display: flex;
  flex-direction: column;
}

.emp-nav .sub-menu li {
  width: 100%;
}

.emp-nav .sub-menu a {
  padding: 9px 4px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
}

.emp-nav .sub-menu a:hover {
  background: rgba(245, 241, 232, 0.06);
}

/* Encabezado del 1er submenú: resaltado con el color vino de la marca.
   Es solo un rótulo de categoría — no es clickeable ni seleccionable. */
.emp-nav > li > .sub-menu > li > a {
  padding: 8px 10px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--emp-cream);
  background: var(--emp-wine-dark);
  pointer-events: none;
  cursor: default;
  user-select: none;
}

/* 2do submenú: apilado debajo de su propio encabezado, dentro de la misma
   columna (no flota aparte ni se pone al lado). */
.emp-nav .sub-menu .sub-menu {
  position: static;
  display: flex;
  flex-direction: column;
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-width: 0;
}

.emp-nav .sub-menu .sub-menu a {
  padding: 8px 10px;
  font-size: 13px;
  color: rgba(245, 241, 232, 0.75);
}

/* Flecha solo en los ítems del menú principal, no en el 1er submenú. */
.emp-nav .sub-menu .menu-item-has-children > a::after {
  display: none;
}

.emp-nav .menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  opacity: 0.6;
}

.emp-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

.emp-icon-btn {
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: var(--emp-cream);
  display: inline-flex;
}

.emp-cart-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background: var(--emp-wine);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---- Barra de progreso envío gratis -------------------------------------
   SIEMPRE visible (antes solo aparecía al añadir algo) y muy destacada: es la
   palanca de ticket promedio del sitio.

   ⚠️ **Sin animación `infinite` a propósito.** Esta barra está en pantalla el
   100% del tiempo, así que un pulso permanente sería justo el coste que costó
   caro en el Home (74 animaciones a la vez, ver la sección de rendimiento).
   Destaca por tamaño, peso y contraste, que no cuestan frames. Si algún día se
   añade un pulso aquí, hay que meterlo en `ANIM_SEL` y en el bloque
   `.emp-scrolling` — no negociable.
   -------------------------------------------------------------------------- */
.emp-shipbar {
  background: var(--emp-black);
  color: var(--emp-cream);
  padding: 11px 20px 12px;
  border-top: 2px solid var(--emp-wine);
  position: sticky;
  top: calc(var(--emp-topbar-h) + var(--emp-header-h));
  z-index: 55;
}

/* Si el banner de la App está activo, la barra de envío gratis debe
   pegarse debajo de ese banner también (si no, quedarían superpuestas). */
body.emp-has-app-banner .emp-shipbar {
  top: calc(var(--emp-topbar-h) + var(--emp-header-h) + var(--emp-appbanner-h));
}

.emp-shipbar__inner {
  max-width: 620px;
  margin: 0 auto;
}

.emp-shipbar__top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-bottom: 7px;
}

.emp-shipbar__icon {
  flex-shrink: 0;
  color: var(--emp-wine-soft);
}

.emp-shipbar__msg {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.emp-shipbar__track {
  height: 8px;
  background: rgba(245, 241, 232, 0.16);
  border-radius: 100px;
  overflow: hidden;
}

.emp-shipbar__fill {
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--emp-wine-dark), var(--emp-wine));
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Conseguido: crema. Sobre el negro el rojo ya es el color del "te faltan", así
   que repetirlo no marcaría el cambio de estado (misma regla que en el cajón). */
.emp-shipbar.is-free {
  border-top-color: var(--emp-cream);
}

.emp-shipbar.is-free .emp-shipbar__icon {
  color: var(--emp-cream);
}

.emp-shipbar.is-free .emp-shipbar__fill {
  background: var(--emp-cream);
}

@media (max-width: 560px) {
  .emp-shipbar {
    padding: 9px 14px 10px;
  }

  .emp-shipbar__msg {
    font-size: 12.5px;
  }

  .emp-shipbar__top {
    gap: 7px;
    margin-bottom: 6px;
  }

  .emp-shipbar__track {
    height: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-shipbar__fill {
    transition-duration: 0.01s;
  }
}

/* ---- 3. Hero ------------------------------------------------------------- */
.emp-hero {
  background: var(--emp-black);
  padding: 56px 20px 60px;
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}

/* Las dos imágenes configurables (Customizer) de extremo a extremo de la pantalla. */
.emp-hero__bg {
  position: absolute;
  inset: 0;
  display: flex;
}

.emp-hero__bg-half {
  width: 50%;
  height: 100%;
  overflow: hidden;
}

.emp-hero__bg-half img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emp-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(17, 17, 17, 0.88) 0%,
    rgba(17, 17, 17, 0.72) 38%,
    rgba(17, 17, 17, 0.32) 65%,
    rgba(17, 17, 17, 0.5) 100%
  );
}

.emp-hero__aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 20%, rgba(226, 35, 26, 0.14), transparent 60%);
  pointer-events: none;
}

.emp-hero__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px;
  position: relative;
  z-index: 1;
  /* Para el parallax 3D del frasco (initHeroBottle inclina .emp-hero__media).
     Solo afecta a descendientes con transform 3D; el resto del hero no se entera. */
  perspective: 1000px;
}

/* Con el hero fuera de pantalla no tiene sentido seguir animando (batería en
   celular). La clase la pone/quita initHeroBottle con un IntersectionObserver. */
.emp-hero.is-idle .emp-bottle,
.emp-hero.is-idle .emp-glow,
.emp-hero.is-idle .emp-bottle__sheen::before {
  animation-play-state: paused;
}

.emp-hero__copy {
  flex: 1;
  min-width: 280px;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.emp-hero__media {
  position: relative;
  width: min(55vw, 260px);
  aspect-ratio: 3 / 4;
  flex-shrink: 0;
}

.emp-glow {
  position: absolute;
  inset: -15%;
  background: radial-gradient(circle, rgba(226, 35, 26, 0.4), transparent 65%);
  /* Mismo ciclo que la flotación (antes 3.5s contra 4s: se desincronizaban y el
     conjunto se sentía aleatorio), así el halo brilla más justo cuando el frasco
     está arriba. Sin el `rotate` que tenía —girar un gradiente CIRCULAR no cambia
     un píxel pero cuesta— y sin `blur`, que se recalculaba en cada frame para
     suavizar un degradado que ya es suave. */
  animation: emp-shimmer 7s ease-in-out infinite;
}

.emp-bottle {
  position: relative;
  width: 100%;
  height: 100%;
  animation: emp-float 7s ease-in-out infinite;
  filter: drop-shadow(0 24px 32px rgba(0, 0, 0, 0.45));
}

.emp-bottle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Destello de luz sobre el vidrio: una banda diagonal recorre el frasco una vez
   por ciclo. Va **enmascarada con el propio PNG** (`--emp-bottle-img`, que imprime
   `front-page.php`) para que la luz caiga solo sobre el frasco y no sobre un
   rectángulo, y el mismo `cover` que la imagen para que máscara y foto encuadren
   igual. La banda vive en el ::before y el `overflow` de este contenedor la recorta. */
.emp-bottle__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-image: var(--emp-bottle-img);
  mask-image: var(--emp-bottle-img);
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* `screen` es obligatorio: en modo normal la banda PINTA de blanco y deja el
   frasco gris (probado); en screen suma luz y se lee como reflejo. */
.emp-bottle__sheen::before {
  content: '';
  position: absolute;
  top: -25%;
  bottom: -25%;
  left: 0;
  width: 26%;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 255, 255, 0.38) 45%,
    rgba(255, 255, 255, 0.62) 50%,
    rgba(255, 255, 255, 0.38) 55%,
    transparent
  );
  mix-blend-mode: screen;
  filter: blur(1px);
  animation: emp-sheen 7s ease-in-out infinite;
}

.emp-eyebrow {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 8px;
  background: rgba(226, 35, 26, 0.12);
  border: 1px solid rgba(226, 35, 26, 0.35);
  color: var(--emp-gold-soft);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.emp-hero__title {
  font-family: var(--emp-serif);
  font-weight: 700;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  color: var(--emp-cream);
  margin: 0;
  text-wrap: balance;
}

.emp-hero__sub {
  font-size: 16.5px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.72);
  margin: 0;
  max-width: 460px;
  text-wrap: pretty;
}

.emp-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

/* Los 3 hijos de .emp-hero__ctas llevan orden explícito para poder
   reacomodarlos distinto en móvil sin duplicar markup: en escritorio el
   aviso queda en su propia línea después de los dos botones; en móvil se
   mueve entre el botón principal y "Ver ofertas" (ver media query). */
.emp-hero__ctas .emp-btn--primary {
  order: 1;
}

.emp-hero__ctas .emp-btn--ghost {
  order: 2;
}

.emp-hero__cta-hint {
  order: 3;
  flex-basis: 100%;
}

.emp-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  border-radius: 10px;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.emp-btn--primary {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--emp-wine);
  color: var(--emp-cream);
  padding: 16px 30px;
  font-weight: 700;
  font-size: 15.5px;
  box-shadow: 0 10px 24px -8px rgba(226, 35, 26, 0.55);
  animation: emp-appbanner-glow 2.4s ease-in-out infinite;
}

.emp-btn__icon {
  flex-shrink: 0;
}

.emp-hero__cta-hint {
  margin: 0;
  font-size: 12px;
  color: rgba(245, 241, 232, 0.55);
}

/* Brillo que cruza el botón cada pocos segundos, encima del pulso del
   box-shadow — mismo botón, dos animaciones distintas conviviendo. */
.emp-btn--primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  animation: emp-cta-shine 3.2s ease-in-out infinite;
  pointer-events: none;
}

.emp-btn--primary:hover {
  transform: scale(1.03);
  color: var(--emp-cream);
  animation-play-state: paused;
}

.emp-btn--primary:active {
  transform: scale(0.98);
}

.emp-btn--ghost {
  background: transparent;
  color: var(--emp-cream);
  padding: 16px 26px;
  font-weight: 600;
  font-size: 15.5px;
  border: 1.5px solid rgba(245, 241, 232, 0.3);
}

.emp-btn--ghost:hover {
  border-color: rgba(245, 241, 232, 0.7);
  color: var(--emp-cream);
  background: rgba(245, 241, 232, 0.08);
  transform: scale(1.03);
}

.emp-btn--ghost:active {
  transform: scale(0.98);
}

@keyframes emp-cta-shine {
  0%, 20% { left: -60%; }
  55%, 100% { left: 130%; }
}

/* .emp a { color: var(--emp-wine); } (más arriba) tiene más especificidad
   que .emp-btn--primary/--ghost solas (1 clase vs 1 clase+1 elemento), así
   que el texto de estos botones salía rojo (invisible sobre el fondo rojo
   del botón principal). Se sube la especificidad para que gane el blanco. */
.emp a.emp-btn--primary,
.emp a.emp-btn--primary:hover {
  color: #fff;
}

.emp a.emp-btn--ghost,
.emp a.emp-btn--ghost:hover {
  color: #fff;
}

.emp-hero__social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.emp-stars {
  display: flex;
  gap: 2px;
}

/* Entrada escalonada de cada estrella al cargar la página, y un titileo
   suave y continuo después para que la fila no quede estática. */
.emp-stars svg {
  animation: emp-star-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) backwards,
             emp-star-twinkle 2.6s ease-in-out 1.2s infinite;
}

.emp-stars svg:nth-child(1) { animation-delay: 0s, 1.2s; }
.emp-stars svg:nth-child(2) { animation-delay: 0.08s, 1.4s; }
.emp-stars svg:nth-child(3) { animation-delay: 0.16s, 1.6s; }
.emp-stars svg:nth-child(4) { animation-delay: 0.24s, 1.8s; }
.emp-stars svg:nth-child(5) { animation-delay: 0.32s, 2s; }

@keyframes emp-star-pop {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  60% { opacity: 1; transform: scale(1.2) rotate(8deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes emp-star-twinkle {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.92); }
}

.emp-hero__social-text {
  color: rgba(245, 241, 232, 0.7);
  font-size: 13px;
  font-weight: 500;
}

.emp-hero__social-text strong {
  color: var(--emp-cream);
}

/* ---- Placeholder de imagen (cuando no hay foto) -------------------------- */
.emp-imgslot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(17, 17, 17, 0.35);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg, rgba(226, 35, 26, 0.06) 0 10px, transparent 10px 20px),
    rgba(226, 35, 26, 0.08);
}

.emp-imgslot--dark {
  color: rgba(245, 241, 232, 0.4);
  background:
    repeating-linear-gradient(45deg, rgba(226, 35, 26, 0.08) 0 10px, transparent 10px 20px),
    rgba(255, 255, 255, 0.02);
}

/* ---- Secciones con reveal ------------------------------------------------ */
.emp-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  will-change: opacity, transform;
}

.emp-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .emp-reveal {
    opacity: 1;
    transform: none;
  }
}

.emp-section {
  padding: 60px 20px;
}

.emp-section--cream {
  background: var(--emp-cream);
}

.emp-section--dark {
  background: var(--emp-black);
}

.emp-eyebrow-sm {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-wine);
  margin-bottom: 8px;
}

.emp-h2 {
  font-family: var(--emp-serif);
  font-size: clamp(24px, 3.5vw, 32px);
  margin: 0;
  color: var(--emp-black);
}

.emp-h2--light {
  color: var(--emp-cream);
}

/* ---- 4. Quiz (pop-up) ------------------------------------------------------ */
/* Mismo patrón que el exit-intent (.emp-exit): un overlay fijo a pantalla
   completa, centrado con flex, oculto/visible con .emp-hidden. Se abre desde
   el botón "Encuentra tu fragancia" del hero (#emp-quiz-open). */
.emp-quiz-pop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}

.emp-quiz-pop__box {
  position: relative;
  background: var(--emp-cream);
  border-radius: 16px;
  padding: 44px 32px 36px;
  max-width: 640px;
  width: 100%;
  margin: auto;
}

.emp-quiz-pop__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.06);
  border: none;
  border-radius: 50%;
  font-size: 14px;
  color: var(--emp-black);
  cursor: pointer;
}

.emp-quiz-pop__close:hover {
  background: rgba(17, 17, 17, 0.12);
}

@media (max-width: 480px) {
  .emp-quiz-pop__box {
    padding: 40px 18px 26px;
  }
}

.emp-quiz {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.emp-quiz__title {
  font-family: var(--emp-serif);
  font-size: clamp(26px, 4vw, 36px);
  margin: 0 0 28px;
  color: var(--emp-black);
}

.emp-quiz__bar {
  height: 5px;
  background: rgba(17, 17, 17, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 32px;
}

.emp-quiz__bar-fill {
  height: 100%;
  background: var(--emp-wine);
  border-radius: 3px;
  width: 0;
  transition: width 0.4s ease;
}

.emp-quiz__step-q {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 18px;
}

.emp-quiz__options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.emp-quiz__opt {
  background: #fff;
  border: 1.5px solid rgba(17, 17, 17, 0.12);
  padding: 14px 20px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.emp-quiz__opt--lg {
  padding: 16px 24px;
  font-size: 14.5px;
  min-width: 120px;
}

.emp-quiz__opt:hover {
  border-color: var(--emp-gold);
  transform: scale(1.03);
}

.emp-quiz__opt:active {
  transform: scale(0.97);
}

.emp-quiz__results-title {
  font-weight: 700;
  font-size: 19px;
  margin-bottom: 6px;
  font-family: var(--emp-serif);
}

.emp-quiz__results-lead {
  font-size: 13.5px;
  color: rgba(17, 17, 17, 0.6);
  margin: 0 0 20px;
}

.emp-quiz__email {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.emp-input {
  padding: 12px 14px;
  border-radius: 8px;
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  font-size: 14px;
  font-family: inherit;
  min-width: 220px;
}

.emp-btn--wine-sm {
  background: var(--emp-wine);
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.emp-quiz__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  text-align: left;
}

.emp-quiz__reset {
  margin-top: 18px;
  background: none;
  border: none;
  color: rgba(17, 17, 17, 0.5);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  font-family: inherit;
}

.emp-hidden {
  display: none !important;
}

/* ---- Tarjeta de producto (mini, resultados quiz) ------------------------- */
.emp-mini-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.emp-mini-card__img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
  background: var(--emp-cream);
}

.emp-mini-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-mini-card__brand {
  font-size: 11px;
  font-weight: 700;
  color: var(--emp-wine);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.emp-mini-card__name {
  font-weight: 700;
  font-size: 14px;
  margin: 2px 0 6px;
}

.emp-mini-card__price {
  font-weight: 700;
  font-size: 14.5px;
}

/* ---- 5. Ofertas del día -------------------------------------------------- */
.emp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 28px;
}

.emp-section-head .emp-h2 {
  flex-shrink: 0;
}

.emp-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  max-width: 460px;
  min-width: 240px;
  background: var(--emp-wine);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #fff;
  padding: 16px 24px;
  border-radius: 0;
  font-weight: 800;
  font-size: 17px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  animation: emp-countdown-urgent 1s ease-in-out infinite;
}

@keyframes emp-countdown-urgent {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 2px 10px rgba(226, 35, 26, 0.3);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 8px 30px rgba(226, 35, 26, 0.85);
    filter: brightness(1.18);
  }
}

@media (max-width: 480px) {
  .emp-countdown {
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-countdown {
    animation: none;
  }
}

/* Carrusel horizontal de tarjetas. El "límite por pantalla" son 2 tarjetas en
   celular y 4 en computador; si hay más, se desplazan en horizontal (swipe
   táctil en celular, flechas en computador). Cada tarjeta ocupa exactamente esa
   fracción del ancho visible, y las que sobran quedan fuera para hacer scroll. */
.emp-carousel {
  position: relative;
  /* Contiene el desborde horizontal del carrusel infinito: los clones viven
     dentro de .emp-grid (overflow-x:auto), pero con justify-content:center el
     área desplazable "se filtra" al ancestro y estira la PÁGINA (scroll lateral
     en celular). Recortar aquí lo contiene sin tocar el overflow de html/body
     (así no se rompe el position:sticky del header). Se usa `clip` (con `hidden`
     de reserva) y solo en X, para no cortar el lift/sombra vertical de las
     tarjetas al hacer hover. */
  overflow-x: hidden;
  overflow-x: clip;
}

.emp-grid {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  justify-content: safe center; /* centra si caben; se alinea al inicio si desbordan */
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 8px 2px 16px;         /* aire para el lift/sombra del hover */
  scrollbar-width: none;          /* Firefox: ocultar barra */
}

.emp-grid::-webkit-scrollbar {
  display: none;                  /* WebKit: ocultar barra */
}

.emp-grid > .emp-card {
  flex: 0 0 calc((100% - 14px) / 2); /* 2 por pantalla en celular */
  scroll-snap-align: start;
}

@media (min-width: 721px) {
  .emp-grid {
    gap: 20px;
  }
  .emp-grid > .emp-card {
    flex-basis: calc((100% - 60px) / 4); /* 4 por pantalla en computador */
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-grid { scroll-behavior: auto; }
}

/* Flechas de navegación (computador; en celular se usa swipe) */
.emp-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(245, 241, 232, 0.25);
  background: rgba(17, 17, 17, 0.82);
  color: var(--emp-cream);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: filter 0.15s ease;
}

.emp-carousel__arrow:hover {
  filter: brightness(1.25);
}

.emp-carousel__arrow[hidden] {
  display: none;
}

/* Nota: van ligeramente DENTRO del carrusel (no en negativo) porque el wrapper
   ahora recorta el overflow-x; a -6px el clip cortaría un borde de la flecha. */
.emp-carousel__arrow--prev {
  left: 6px;
}

.emp-carousel__arrow--next {
  right: 6px;
}

.emp-carousel__arrow svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 720px) {
  .emp-carousel__arrow {
    display: none;
  }
}

/* ---- Tarjeta de producto (sistema de 8 estados) -------------------------
   Portada de "EMP Tarjeta Producto" (Claude Design). Tarjeta oscura unificada;
   el estado de inventario (data-estado) gobierna badges, CTA y bloques extra.
   El acento del diseño (dorado) se mapea al rojo de marca del tema. --------- */
.emp-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.emp-card {
  display: flex;
  flex-direction: column;
  /* Notablemente más clara que el fondo negro de la sección (--emp-black:
     #111) para que la tarjeta se despegue en vez de fundirse con él. */
  background: linear-gradient(180deg, #262019, #1b1713);
  border: 1px solid rgba(226, 35, 26, 0.32);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(245, 241, 232, 0.05) inset;
  transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s ease, border-color 0.32s ease;
}

.emp-card:hover {
  transform: translateY(-4px);
  border-color: rgba(226, 35, 26, 0.55);
  box-shadow: 0 24px 46px rgba(0, 0, 0, 0.6), 0 0 26px rgba(226, 35, 26, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .emp-card { transition: none; }
  .emp-card:hover { transform: none; }
}

/* Zona de imagen (CUADRADA y de tamaño fijo).
   El alto se deriva del ancho vía aspect-ratio 1/1, y la imagen se posiciona en
   absoluto llenando la zona con object-fit: cover. Así la foto SIEMPRE se ve
   cuadrada y NUNCA cambia el alto de la tarjeta, sea cual sea el tamaño o la
   proporción del archivo original. */
.emp-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 20%, rgba(226, 35, 26, 0.12), transparent 60%),
    linear-gradient(155deg, #201c17, #0b0a08);
}

.emp-card--agotado .emp-card__image {
  filter: saturate(0.87) brightness(0.96);
}

.emp-card__img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.emp-card__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Badges (columna superior izquierda) */
.emp-card__badges {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}

.emp-badge {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.emp-badge--bestseller,
.emp-badge--preventa {
  background: var(--emp-wine);
  color: #fff;
}

.emp-badge--agotado {
  background: rgba(245, 241, 232, 0.14);
  color: var(--emp-cream);
}

.emp-badge--discount {
  background: var(--emp-black);
  color: var(--emp-cream);
  font-weight: 800;
}

.emp-badge--lowstock {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(142, 27, 46, 0.9);
  color: var(--emp-cream);
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
}

.emp-badge__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--emp-cream);
  animation: emp-pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .emp-badge__dot { animation: none; }
}

/* Sello "100% Original" (superior derecha) — ataca la objeción #1 */
.emp-card__original {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 4;
  background: rgba(226, 35, 26, 0.14);
  border: 1px solid rgba(226, 35, 26, 0.4);
  color: var(--emp-wine-soft);
  font-size: 8.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Cuerpo */
.emp-card__body {
  /* flex:1 para estirarse hasta el alto de la tarjeta más alta de la fila
     (CSS Grid ya iguala el alto de las tarjetas); junto con margin-top:auto
     en el CTA (más abajo), esto deja el botón y el texto de confianza
     siempre a la misma altura sin importar cuánto contenido variable
     (descuento, ahorro, etc.) tenga cada tarjeta arriba. */
  flex: 1;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
}

.emp-card__brand {
  font-family: var(--emp-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-card__name {
  font-family: var(--emp-serif);
  font-weight: 700;
  font-size: 18px;
  color: var(--emp-cream);
  line-height: 1.15;
  margin: 2px 0 4px;
}

.emp-card__name a {
  color: inherit;
  text-decoration: none;
}

.emp-card__meta {
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.55);
  margin: 0 0 8px;
}

/* Ocasión(es) en texto plano, una línea (marcas del producto). */
.emp-card__occasion-text {
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.55);
  margin: 0 0 8px;
}

/* Aromas/familias como badges (etiquetas del producto). */
.emp-card__occasion {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}

.emp-card__occasion span {
  display: inline-block;
  background: rgba(245, 241, 232, 0.06);
  border: 1px solid rgba(245, 241, 232, 0.14);
  color: rgba(245, 241, 232, 0.75);
  font-size: 10.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
}

/* Descripción corta del producto (WooCommerce → "Descripción corta").
   min-height fija (2 líneas) e impresa siempre, aunque esté vacía: así
   todas las tarjetas de una fila reservan el mismo alto en este bloque y
   el CTA (margin-top:auto) nunca queda a distinta altura entre tarjetas
   con descripción larga, corta o sin descripción. */
.emp-card__desc {
  font-size: 11.5px;
  line-height: 1.4;
  min-height: calc(1.4em * 2);
  color: rgba(245, 241, 232, 0.55);
  margin: 0 0 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pirámide olfativa (desplegable) — ataca la objeción #2 */
.emp-card__pyramid-toggle {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--emp-sans);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emp-wine-soft);
}

.emp-card__pyramid-toggle svg {
  transition: transform 0.25s ease;
}

.emp-card__pyramid-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.emp-card__pyramid {
  margin-bottom: 8px;
}

.emp-card__pyramid[hidden] {
  display: none;
}

.emp-card__pyramid-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  background: rgba(245, 241, 232, 0.04);
  border: 1px solid rgba(245, 241, 232, 0.1);
  border-radius: 8px;
  padding: 10px;
}

.emp-card__pyramid-tier {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
  margin-bottom: 3px;
}

.emp-card__pyramid-notes {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.68);
  line-height: 1.4;
}

/* Precio */
.emp-card__prices {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
  margin: 2px 0;
}

.emp-card__old {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.35);
  text-decoration: line-through;
}

.emp-card__price {
  font-family: var(--emp-serif);
  font-weight: 700;
  font-size: 20px;
  color: var(--emp-cream);
  display: inline-block;
  transform-origin: left center;
}

/* El pulso de entrada solo corre mientras la tarjeta está a la vista:
   initPriceReveal() en emp.js agrega/quita esta clase con un
   IntersectionObserver, así que el pulso se repite cada vez que la
   tarjeta vuelve a aparecer en pantalla (scroll o carrusel). El delay
   (inline, ver emp_product_card()) escalona el pulso entre tarjetas
   para que no salten todas a la vez. */
.emp-card__price.emp-anim-play {
  animation: emp-price-pop 0.6s ease-in-out;
}

.emp-card__price--muted {
  color: rgba(245, 241, 232, 0.55);
}

/* El precio con descuento pulsa más fuerte para llevar el ojo al ahorro. */
.emp-card__prices:has(.emp-card__old) .emp-card__price.emp-anim-play {
  animation-name: emp-price-pop-strong;
}

@keyframes emp-price-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes emp-price-pop-strong {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-card__price.emp-anim-play { animation: none; }
}

/* Prefijo "Desde " en productos con variaciones (rango de precios). */
.emp-card__price-from {
  font-family: var(--emp-sans);
  font-weight: 600;
  font-size: 11px;
  color: rgba(245, 241, 232, 0.55);
}

/* Etiqueta tipo "ticket de descuento": borde punteado interior + muesca a la
   izquierda (como un tag colgante) y un pulso de sombra sutil e infinito
   para que el ojo la encuentre sin necesidad de pasar el mouse — más
   distintivo que una píldora plana, que se perdía entre el resto de la
   tarjeta. */
.emp-card__savings {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: var(--emp-wine);
  background: rgba(226, 35, 26, 0.1);
  border: 1px dashed rgba(226, 35, 26, 0.55);
  padding: 3px 9px 3px 14px;
  border-radius: 4px;
  margin: 0 0 10px;
  animation: emp-savings-pulse 2.2s ease-in-out infinite;
}

.emp-card__savings::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  background: var(--emp-black);
  border: 1px dashed rgba(226, 35, 26, 0.55);
  border-radius: 50%;
}

@keyframes emp-savings-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(226, 35, 26, 0.35); }
  50% { box-shadow: 0 0 0 4px rgba(226, 35, 26, 0); }
}

.emp-card__status-line {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.55);
  margin: 6px 0 9px;
}

.emp-card__status-line--italic {
  font-style: italic;
}

.emp-card__status-line--gold {
  color: var(--emp-wine-soft);
  font-weight: 600;
}

/* CTA (cambia según estado) */
.emp-card__cta {
  margin-top: auto;
  width: 100%;
  box-sizing: border-box;
  border: none;
  padding: 13px 8px;
  border-radius: 8px;
  font-family: var(--emp-sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: filter 0.2s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.emp-card__cta:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

.emp-card__cta:active {
  transform: scale(0.96);
}

.emp-card__cta--wine,
.emp-card__cta--gold {
  background: var(--emp-wine);
  color: #fff;
  animation: emp-cta-glow 1.6s ease-in-out infinite;
}

.emp-card__cta--wine:hover,
.emp-card__cta--gold:hover {
  animation-play-state: paused;
  box-shadow: 0 8px 26px rgba(226, 35, 26, 0.65);
}

@keyframes emp-cta-glow {
  0%, 100% { box-shadow: 0 2px 10px rgba(226, 35, 26, 0.25); transform: scale(1); }
  50% { box-shadow: 0 6px 26px rgba(226, 35, 26, 0.75); transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-card__cta--wine,
  .emp-card__cta--gold {
    animation: none;
  }
}

.emp-card__cta--ghost {
  background: rgba(245, 241, 232, 0.08);
  color: var(--emp-cream);
  border: 1.5px solid rgba(245, 241, 232, 0.28);
}

/* Cuando un CTA es un enlace (<a>) —p. ej. "Elegir opciones" en variables o
   "Ver alternativas" en descontinuados— hereda el rojo de la regla global
   ".emp a". Forzamos el color correcto del botón con igual/mayor especificidad
   (y en :hover) para que el texto salga blanco/crema, no rojo. */
a.emp-card__cta--wine,
a.emp-card__cta--gold,
a.emp-card__cta--wine:hover,
a.emp-card__cta--gold:hover {
  color: #fff;
}

a.emp-card__cta--ghost,
a.emp-card__cta--ghost:hover {
  color: var(--emp-cream);
}

/* Captura de reingreso (agotado) — reemplaza al CTA en el flujo, así que
   necesita el mismo margin-top:auto para quedar a la misma altura. */
.emp-card__notify {
  margin-top: auto;
}

.emp-card__notify-form,
.emp-card__notify-done {
  border-radius: 8px;
  padding: 12px;
}

.emp-card__notify-form[hidden],
.emp-card__notify-done[hidden] {
  display: none;
}

.emp-card__notify-form {
  background: rgba(245, 241, 232, 0.05);
  border: 1px solid rgba(245, 241, 232, 0.14);
}

.emp-card__notify-form p {
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.62);
  margin: 0 0 8px;
}

.emp-card__notify-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 11px;
  margin-bottom: 7px;
  border-radius: 6px;
  border: 1px solid rgba(245, 241, 232, 0.2);
  background: rgba(0, 0, 0, 0.25);
  color: var(--emp-cream);
  font-family: var(--emp-sans);
  font-size: 12.5px;
  outline: none;
}

.emp-card__notify-confirm {
  width: 100%;
  background: var(--emp-wine-dark);
  color: var(--emp-cream);
  border: none;
  padding: 11px;
  border-radius: 6px;
  font-family: var(--emp-sans);
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
}

.emp-card__notify-cancel {
  width: 100%;
  background: none;
  border: none;
  margin-top: 7px;
  color: rgba(245, 241, 232, 0.4);
  font-family: var(--emp-sans);
  font-size: 10.5px;
  cursor: pointer;
}

.emp-card__notify-done {
  background: rgba(226, 35, 26, 0.1);
  border: 1px solid rgba(226, 35, 26, 0.32);
  text-align: center;
}

.emp-card__notify-done-title {
  font-family: var(--emp-serif);
  font-size: 15px;
  color: var(--emp-cream);
  margin: 0 0 3px;
}

.emp-card__notify-done-text {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.55);
  margin: 0;
}

.emp-card__trust {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--emp-wine-soft);
  text-align: center;
  margin: 9px 0 0;
  letter-spacing: 0.02em;
}

/* ---- 6. Comprar por ocasión / aroma ------------------------------------- */
#ocasion .emp-h2,
#ocasion .emp-chips-lead {
  text-align: center;
}

/* Sección oscura: el subtítulo y el chip activo por defecto asumen fondo
   claro (gris oscuro / negro sobre negro), así que se ajustan aquí. Las
   tarjetas NO necesitan override — ya son oscuras por defecto, pensadas
   justo para secciones como esta. */
#ocasion .emp-chips-lead {
  color: rgba(245, 241, 232, 0.55);
}

#ocasion .emp-chip.is-active {
  background: var(--emp-wine);
  color: #fff;
  border-color: var(--emp-wine);
}

#ocasion .emp-chips {
  justify-content: center;
}

/* Esta sección tiene fondo crema (emp-section--cream); las tarjetas por
   defecto son oscuras (pensadas para las secciones dark), así que aquí se
   invierte el esquema a claro para que combinen con el fondo. */
#ofertas .emp-card {
  /* Blanco puro contra el fondo crema (--emp-cream: #F5F1E8) + borde y
     sombra más marcados para que la tarjeta se note separada del fondo. */
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.16);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}

#ofertas .emp-card:hover {
  border-color: rgba(226, 35, 26, 0.4);
  box-shadow: 0 26px 46px rgba(17, 17, 17, 0.18);
}

#ofertas .emp-card__brand {
  color: var(--emp-wine);
}

/* La muesca de ".emp-card__savings" simula un agujero de tag usando el color
   de fondo de la tarjeta; en #ofertas la tarjeta es blanca, no negra. */
#ofertas .emp-card__savings::before {
  background: #ffffff;
}

#ofertas .emp-card__name,
#ofertas .emp-card__price,
#ofertas .emp-card__notify-done-title {
  color: var(--emp-black);
}

#ofertas .emp-card__meta,
#ofertas .emp-card__occasion-text,
#ofertas .emp-card__price--muted,
#ofertas .emp-card__price-from,
#ofertas .emp-card__status-line,
#ofertas .emp-card__notify-form p,
#ofertas .emp-card__notify-done-text,
#ofertas .emp-card__desc {
  color: rgba(17, 17, 17, 0.55);
}

#ofertas .emp-card__old {
  color: rgba(17, 17, 17, 0.32);
}

#ofertas .emp-card__occasion span {
  background: rgba(17, 17, 17, 0.05);
  border-color: rgba(17, 17, 17, 0.14);
  color: rgba(17, 17, 17, 0.7);
}

#ofertas .emp-card__pyramid-toggle {
  color: var(--emp-wine);
}

#ofertas .emp-card__pyramid-grid {
  background: rgba(17, 17, 17, 0.03);
  border-color: rgba(17, 17, 17, 0.1);
}

#ofertas .emp-card__pyramid-tier {
  color: var(--emp-wine);
}

#ofertas .emp-card__pyramid-notes {
  color: rgba(17, 17, 17, 0.62);
}

#ofertas .emp-card__cta--ghost,
#ofertas a.emp-card__cta--ghost,
#ofertas a.emp-card__cta--ghost:hover {
  background: rgba(17, 17, 17, 0.05);
  color: var(--emp-black);
  border-color: rgba(17, 17, 17, 0.18);
}

#ofertas .emp-card__notify-form {
  background: rgba(17, 17, 17, 0.03);
  border-color: rgba(17, 17, 17, 0.1);
}

#ofertas .emp-card__notify-form input {
  background: #fff;
  border-color: rgba(17, 17, 17, 0.15);
  color: var(--emp-black);
}

#ofertas .emp-card__notify-cancel {
  color: rgba(17, 17, 17, 0.4);
}

.emp-chips-lead {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.55);
  margin: 0 0 22px;
}

.emp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.emp-chips + .emp-chips {
  margin-top: 14px;
}

/* Grupo de chips con su etiqueta de fila (ocasión / aroma en líneas separadas). */
.emp-chips-group {
  margin-top: 16px;
}

.emp-chips-label {
  display: block;
  font-family: var(--emp-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-wine);
  margin-bottom: 8px;
  text-align: center;
}

.emp-chip {
  background: #fff;
  color: var(--emp-black);
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.emp-chip.is-active {
  background: var(--emp-black);
  color: var(--emp-cream);
  border-color: var(--emp-black);
}

/* ---- 7. Más vendidos ----------------------------------------------------- */
#mas-vendidos {
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

.emp-section--tight {
  padding: 20px 20px 64px;
}

.emp-filter-clear {
  background: none;
  border: 1px solid rgba(17, 17, 17, 0.2);
  color: var(--emp-black);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ---- 8. Garantías -------------------------------------------------------- */
.emp-guarantees {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
}

.emp-guarantee {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.emp-guarantee__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(226, 35, 26, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emp-gold);
}

.emp-guarantee__title {
  font-weight: 700;
  font-size: 14px;
  color: var(--emp-cream);
}

.emp-guarantee__desc {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.55);
}

/* #garantias es la única sección clara que usa .emp-guarantee* (las demás
   viven sobre fondo oscuro), así que invierte el texto a oscuro sobre crema. */
#garantias .emp-guarantee__title {
  color: var(--emp-black);
}

/* Entrada escalonada de los sellos, enganchada al `.is-visible` que ya pone
   initReveal() en la sección: cada sello sube y aparece 90ms después del
   anterior, y su icono hace un pop corto. Es lo ÚNICO que llevan — se probó
   darles tarjeta blanca con sombra y se descartó por recargado.

   El retardo va en una custom property por sello (`--emp-seal-d`) que el icono
   HEREDA, así no hay que repetir un `nth-child` por cada parte.

   Clave: **no hay estado inicial oculto en CSS**. El `both` del fill-mode aplica
   el fotograma 0 solo cuando la animación existe, es decir solo cuando la
   sección ya recibió `.is-visible` desde JS. Si el JS no corre, los sellos se
   ven normales en vez de quedarse invisibles para siempre. */
#garantias .emp-guarantee:nth-child(2) { --emp-seal-d: 0.09s; }
#garantias .emp-guarantee:nth-child(3) { --emp-seal-d: 0.18s; }
#garantias .emp-guarantee:nth-child(4) { --emp-seal-d: 0.27s; }

#garantias.is-visible .emp-guarantee {
  animation: emp-seal-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) var(--emp-seal-d, 0s) both;
}

#garantias.is-visible .emp-guarantee__icon {
  animation: emp-seal-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) calc(var(--emp-seal-d, 0s) + 0.08s) both;
}

@keyframes emp-seal-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes emp-seal-pop {
  from { transform: scale(0.7); }
  to   { transform: scale(1); }
}

#garantias .emp-guarantee__desc {
  color: rgba(17, 17, 17, 0.55);
}

/* ---- 9. Reseñas ---------------------------------------------------------- */
.emp-reviews {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.emp-reviews__count {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 28px;
}

.emp-reviews__count strong {
  color: var(--emp-black);
}

.emp-reviews__empty {
  font-size: 14.5px;
  color: rgba(17, 17, 17, 0.5);
  font-style: italic;
  margin: 28px 0 8px;
}

.emp-review {
  background: #fff;
  border-radius: 16px;
  padding: 28px;
  border: 1px solid rgba(17, 17, 17, 0.08);
  margin-top: 28px;
}

.emp-review__stars {
  display: flex;
  gap: 2px;
  justify-content: center;
  margin-bottom: 12px;
}

.emp-review__text {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--emp-black);
  margin: 0 0 14px;
  font-style: italic;
}

.emp-review__author {
  font-weight: 700;
  font-size: 14px;
}

.emp-review__dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
}

.emp-review__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: rgba(17, 17, 17, 0.2);
  transition: background 0.2s ease;
}

.emp-review__dot.is-active {
  background: var(--emp-wine);
}

/* ---- Botón "Deja tu reseña" (animado, abre el popup) --------------------- */
.emp-review-cta {
  margin: 22px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--emp-wine);
  color: #fff;
  border: none;
  padding: 13px 24px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  animation: emp-review-cta-bounce 1.8s ease-in-out infinite;
  transition: filter 0.2s ease, transform 0.15s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;
}

.emp-review-cta svg {
  animation: emp-review-cta-spin 1.8s ease-in-out infinite;
}

@keyframes emp-review-cta-bounce {
  0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(226, 35, 26, 0.28); }
  25% { transform: translateY(-5px) scale(1.06); box-shadow: 0 14px 28px rgba(226, 35, 26, 0.6); }
  50% { transform: translateY(0) scale(1); box-shadow: 0 4px 14px rgba(226, 35, 26, 0.28); }
  75% { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 20px rgba(226, 35, 26, 0.42); }
}

@keyframes emp-review-cta-spin {
  0%, 55%, 100% { transform: rotate(0deg) scale(1); }
  20% { transform: rotate(-18deg) scale(1.15); }
  40% { transform: rotate(14deg) scale(1.15); }
}

.emp-review-cta:hover {
  filter: brightness(1.12);
  transform: translateY(-3px) scale(1.05);
  animation-play-state: paused;
  box-shadow: 0 16px 32px rgba(226, 35, 26, 0.7);
}

.emp-review-cta:hover svg {
  animation-play-state: paused;
}

.emp-review-cta:active {
  transform: scale(0.94);
}

@media (prefers-reduced-motion: reduce) {
  .emp-review-cta,
  .emp-review-cta svg {
    animation: none;
  }
}

/* ---- Popup: dejar una reseña (reusa .emp-quiz-pop/.emp-input/.emp-btn--wine-sm) */
.emp-review-form {
  max-width: 420px;
  margin: 0 auto;
  text-align: left;
}

.emp-review-form__stars {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-bottom: 18px;
}

.emp-review-form__star {
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: rgba(17, 17, 17, 0.2);
  transition: color 0.15s ease, transform 0.15s ease;
}

.emp-review-form__star:hover {
  transform: scale(1.15);
}

.emp-review-form__star.is-active {
  color: var(--emp-wine);
}

.emp-review-form__field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
}

.emp-review-form__field:first-of-type {
  margin-top: 0;
}

.emp-review-form__textarea {
  min-height: 100px;
  resize: vertical;
  font-family: inherit;
}

/* Honeypot anti-spam: fuera de pantalla, invisible para personas. */
.emp-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.emp-review-form__submit {
  width: 100%;
  margin-top: 14px;
}

.emp-review-form__submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.emp-review-form__msg {
  font-size: 12.5px;
  color: var(--emp-wine);
  text-align: center;
  min-height: 16px;
  margin: 10px 0 0;
}

.emp-review-form__done {
  text-align: center;
  padding: 20px 0;
}

.emp-review-form__done-title {
  font-family: var(--emp-serif);
  font-size: 22px;
  margin: 0 0 8px;
}

/* ---- Videos de redes ------------------------------------------------------
   Reels/TikToks/Shorts incrustados, reproducibles sin salir de la página
   (emp_social_embed_src() en inc/social-videos.php construye la URL de
   embed). El carrusel es "por ventanas" (índice acotado a [0, N-visibles],
   nunca clona tarjetas): duplicar una tarjeta con <iframe> duplicaría un
   reproductor de video en vivo (costo extra de red/render, riesgo de audio
   doble), a diferencia de los carruseles de producto (tarjetas livianas, sin
   iframe) que sí pueden clonar para el efecto infinito. Sobre un iframe el
   swipe no es fiable (el iframe se queda con el toque para su propio
   reproductor), así que las FLECHAS son la navegación principal — también
   en celular, no solo en computador. */
.emp-social-head {
  text-align: center;
  margin-bottom: 28px;
}

.emp-social-head .emp-chips-lead {
  margin: 6px 0 0;
}

.emp-social-wrap {
  width: 100%;
  padding: 0 clamp(20px, 4vw, 48px);
}

.emp-social-stage {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}

.emp-social-viewport {
  overflow: hidden;
  container-type: inline-size;
}

.emp-social-track {
  display: flex;
  width: max-content;
}

.emp-social-card {
  flex: 0 0 auto;
  width: calc(50cqw - 12px);
  margin-right: 12px;
  position: relative;
  display: block;
  height: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.2);
  text-decoration: none;
}

@media (min-width: 721px) {
  .emp-social-card {
    width: calc(25cqw - 15px);
    margin-right: 20px;
    height: 520px;
  }
}

.emp-social-card iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Guardas sobre el embed: capas transparentes que capturan el toque en las
   zonas de ENLACE de la plataforma (barra de usuario/"ver perfil" arriba;
   "ver más"/like/comentar/compartir/guardar abajo), para que solo el CENTRO
   (el video) quede tocable → reproducir/pausar. El sandbox del iframe es el
   seguro real contra "salir de la página"; esto es la capa de UX que evita que
   se interactúe con la interfaz de Instagram. Alturas fijas porque la barra de
   usuario y la de acciones de IG miden ~lo mismo sin importar el alto de la
   tarjeta. */
.emp-social-guard {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  background: transparent;
}
.emp-social-guard--top {
  top: 0;
  height: 54px;
}
.emp-social-guard--bottom {
  bottom: 0;
  height: 120px;
}

.emp-social-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-social-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(226, 35, 26, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 3px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

.emp-social-card__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 30px 14px 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
  color: var(--emp-cream);
  font-family: var(--emp-sans);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}

.emp-social-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 17, 17, 0.55);
  color: var(--emp-cream);
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.25);
  transition: background 0.2s ease, transform 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.emp-social-arrow:hover {
  background: var(--emp-wine);
  transform: translateY(-50%) scale(1.08);
}

.emp-social-arrow--prev {
  left: -6px;
}

.emp-social-arrow--next {
  right: -6px;
}

@media (min-width: 721px) {
  .emp-social-arrow {
    width: 46px;
    height: 46px;
  }
  .emp-social-arrow--prev {
    left: -14px;
  }
  .emp-social-arrow--next {
    right: -14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-social-track {
    transition: none !important;
  }
}

/* ---- Timeline animada: cómo funciona tu pedido ---------------------------
   Al entrar en pantalla (initTimeline(), IntersectionObserver una sola vez):
   la línea se "dibuja" de 0% a 100% (transition en .emp-tline-fill) mientras
   los 4 pasos se van iluminando en secuencia (is-active con delay
   escalonado) — da la sensación de progreso en vivo. Los pasos ya
   iluminados quedan con un pulso sutil e infinito para que la sección se
   sienta viva, no solo un dibujo estático. */
.emp-tline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 0;
  column-gap: 10px;
  margin-top: 40px;
}

@media (min-width: 721px) {
  .emp-tline {
    column-gap: 20px;
  }
}

.emp-tline-track {
  display: block;
  position: absolute;
  top: 26px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: rgba(245, 241, 232, 0.12);
  border-radius: 3px;
  z-index: 0;
  overflow: visible;
}

.emp-tline-fill {
  position: relative;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--emp-wine), var(--emp-wine-soft));
  border-radius: 3px;
  transition: width 1.5s cubic-bezier(0.65, 0, 0.35, 1);
  overflow: visible;
}

/* "Paquete en camino": un punto que recorre la línea en bucle una vez que
   se terminó de dibujar (clase is-done, agregada por JS). Refuerza que la
   sección sigue viva después de la animación de entrada. */
.emp-tline-runner {
  position: absolute;
  top: 50%;
  left: 0;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(226, 35, 26, 0.8);
  opacity: 0;
}

.emp-tline.is-done .emp-tline-runner {
  opacity: 1;
  animation: emp-tline-runner 2.4s ease-in-out infinite;
}

@keyframes emp-tline-runner {
  0% { left: 0%; opacity: 0; }
  8% { opacity: 1; }
  92% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

.emp-tline-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  cursor: pointer;
}

.emp-tline-step.is-in {
  opacity: 1;
  transform: translateY(0);
}

.emp-tline-dot {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 2px solid rgba(245, 241, 232, 0.18);
  background: rgba(245, 241, 232, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245, 241, 232, 0.4);
  transition: border-color 0.35s ease, background 0.35s ease, color 0.35s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.emp-tline-step:hover .emp-tline-dot {
  transform: scale(1.14);
}

.emp-tline-step:active .emp-tline-dot {
  transform: scale(0.92);
}

.emp-tline-step.is-active .emp-tline-dot {
  border-color: var(--emp-wine);
  background: var(--emp-wine);
  color: #fff;
  animation: emp-tline-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), emp-tline-pulse 1.8s ease-in-out 0.5s infinite;
}

.emp-tline-step.is-active:hover .emp-tline-dot {
  animation-play-state: paused;
  transform: scale(1.14);
  box-shadow: 0 0 0 9px rgba(226, 35, 26, 0.3);
}

@keyframes emp-tline-pop {
  0% { transform: scale(0.55) rotate(-8deg); }
  55% { transform: scale(1.2) rotate(4deg); }
  80% { transform: scale(0.95) rotate(-1deg); }
  100% { transform: scale(1) rotate(0deg); }
}

@keyframes emp-tline-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(226, 35, 26, 0.22); }
  50% { box-shadow: 0 0 0 13px rgba(226, 35, 26, 0.04); }
}

.emp-tline-step.is-active .emp-tline-dot svg {
  animation: emp-tline-icon-in 0.5s ease 0.05s backwards;
}

@keyframes emp-tline-icon-in {
  0% { transform: scale(0); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.emp-tline-label {
  font-weight: 700;
  font-size: 13.5px;
  color: rgba(245, 241, 232, 0.55);
  max-width: 150px;
  transition: color 0.35s ease;
}

.emp-tline-step:hover .emp-tline-label {
  color: var(--emp-cream);
}

.emp-tline-step.is-active .emp-tline-label {
  color: var(--emp-cream);
}

.emp-tline-desc {
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.35);
  max-width: 150px;
}

/* #tline es la única sección clara que usa .emp-tline* (nació sobre fondo
   oscuro); invierte el track, los puntos inactivos y los textos a oscuro
   sobre crema. El punto activo (rojo) y el runner ya funcionan igual en
   ambos fondos, así que no necesitan override. */
#tline .emp-tline-track {
  background: rgba(17, 17, 17, 0.1);
}

#tline .emp-tline-dot {
  border-color: rgba(17, 17, 17, 0.15);
  background: rgba(17, 17, 17, 0.03);
  color: rgba(17, 17, 17, 0.4);
}

/* El selector de arriba (id + clase) pesa más que ".emp-tline-step.is-active
   .emp-tline-dot" (dos clases) del bloque base, así que sin este override
   el punto activo se quedaba con el estilo inactivo (gris) en vez de rojo. */
#tline .emp-tline-step.is-active .emp-tline-dot {
  border-color: var(--emp-wine);
  background: var(--emp-wine);
  color: #fff;
}

#tline .emp-tline-label {
  color: rgba(17, 17, 17, 0.55);
}

#tline .emp-tline-step:hover .emp-tline-label,
#tline .emp-tline-step.is-active .emp-tline-label {
  color: var(--emp-black);
}

#tline .emp-tline-desc {
  color: rgba(17, 17, 17, 0.4);
}

@media (prefers-reduced-motion: reduce) {
  .emp-tline-fill,
  .emp-tline-step,
  .emp-tline-dot {
    transition: none;
  }
  .emp-tline-step.is-active .emp-tline-dot,
  .emp-tline-step.is-active .emp-tline-dot svg,
  .emp-tline-runner {
    animation: none;
  }
  .emp-tline-runner {
    display: none;
  }
}

/* ---- Medios de pago (franja de extremo a extremo dentro de #garantias) --
   #garantias tiene padding lateral fijo (56px 20px), así que este truco de
   "full-bleed" clásico (width:100vw + margin-left negativo a la mitad del
   viewport) es lo que saca la franja de ese padding para que toque los dos
   bordes de la pantalla sin depender de cuánto mida el padding del padre. */
.emp-payments {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-top: 40px;
  padding: 22px 0;
  overflow: hidden;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  border-bottom: 1px solid rgba(17, 17, 17, 0.08);
}

.emp-payments__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation-name: emp-brands-scroll;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.emp-payments__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-right: 48px;
  flex-shrink: 0;
}

.emp-payments__item img {
  height: 100%;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  opacity: 0.75;
  filter: grayscale(1);
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.emp-payments__item:hover img {
  opacity: 1;
  filter: grayscale(0);
}

@media (prefers-reduced-motion: reduce) {
  .emp-payments__track {
    animation: none;
  }
}

/* ---- 10. Marcas ---------------------------------------------------------- */
.emp-brands {
  padding: 36px 0;
  background: var(--emp-black);
  overflow: hidden;
  border-top: 1px solid rgba(226, 35, 26, 0.15);
  border-bottom: 1px solid rgba(226, 35, 26, 0.15);
}

.emp-brands__track {
  display: flex;
  width: max-content;
  /* La separación va como margin-right en cada item (NO como gap): así el ancho
     total es un múltiplo exacto del "item + separación" y la animación a -50%
     cae justo sobre una copia idéntica, sin el salto de medio gap que deja `gap`
     al unir las dos mitades. Duración mayor (45s) para mantener la velocidad
     original ahora que la pista es más larga (4 copias). */
  animation: emp-brands-scroll 45s linear infinite;
}

.emp-brands__item {
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
  color: rgba(245, 241, 232, 0.55);
  white-space: nowrap;
  margin-right: 56px;
  flex-shrink: 0;
}

/* ---- 11. Valor de marca -------------------------------------------------- */
.emp-value {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
}

.emp-value__title {
  font-family: var(--emp-serif);
  font-size: clamp(24px, 3.5vw, 30px);
  margin: 0 0 14px;
  color: var(--emp-black);
}

.emp-value__text {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(17, 17, 17, 0.65);
  margin: 0;
}

.emp-value__title--light {
  color: var(--emp-cream);
}

.emp-value__text--light {
  color: rgba(245, 241, 232, 0.6);
}

.emp-value__cta {
  margin-top: 28px;
  /* Sin el pulso infinito de .emp-btn--primary A PROPÓSITO: `emp-appbanner-glow`
     anima `box-shadow`, y una animación en marcha le gana SIEMPRE a la
     declaración de abajo. Con ella puesta, el degradado de proximidad se
     calculaba en cada frame y no se veía nunca. Aquí manda la serpiente. */
  animation: none;
  /* Resalte por PROXIMIDAD de la cabeza de la serpiente: el JS escribe
     --emp-cta-near (0→1) en los últimos ~350px, así el botón empieza a responder
     antes de que la línea lo toque en vez de encenderse de golpe. Al tocarlo manda
     .emp-cta-lit (más abajo), que gana por especificidad.
     La primera capa es la sombra normal del botón: esta regla REEMPLAZA la de
     .emp-btn--primary, así que si no se repite el botón se queda sin relieve. */
  box-shadow:
    0 10px 24px -8px rgba(226, 35, 26, 0.55),
    0 0 calc(var(--emp-cta-near, 0) * 30px) calc(var(--emp-cta-near, 0) * 8px) rgba(226, 35, 26, calc(var(--emp-cta-near, 0) * 0.5)),
    0 0 calc(var(--emp-cta-near, 0) * 10px) rgba(255, 120, 100, calc(var(--emp-cta-near, 0) * 0.45));
}

/* ---- Línea "serpiente" de scroll ------------------------------------------ */
#emp-content {
  position: relative;
}

.emp-snake-trail {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  overflow: visible;
  pointer-events: none;
  z-index: 2;
  /* El JS lo atenúa mientras el trazo está desactualizado (ver scheduleBuild). */
  transition: opacity 0.22s ease;
}

.emp-snake-trail path {
  fill: none;
  /* Zig-zag rojo. El JS reemplaza este stroke por un gradiente vertical que le da
     más alfa sobre las secciones oscuras que sobre las crema, para que la línea
     pese igual en todo el recorrido (ver paintGradient en emp.js). */
  stroke: var(--emp-wine);
  stroke-opacity: 0.65;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Tramo "caliente" detrás de la cabeza (efecto cometa): tres capas con grosor y
   opacidad crecientes, recortadas a los últimos px de arco con stroke-dasharray.
   Grosor y opacidad los pone el JS en el estilo inline de cada capa.
   `butt` es obligatorio: con `round`, el trozo de longitud 0 del patrón de
   guiones pintaría un punto suelto al principio del trazo. */
.emp-snake-trail .emp-snake-hot {
  fill: none;
  stroke: var(--emp-wine);
  stroke-linecap: butt;
  stroke-linejoin: round;
}

/* Cabeza: punto brillante que late, con dos anillos que emanan continuamente. */
.emp-snake-dot {
  fill: var(--emp-wine);
  filter: drop-shadow(0 0 6px rgba(226, 35, 26, 0.95));
  transform-box: fill-box;
  transform-origin: center;
  animation: emp-snake-dotpulse 1.05s ease-in-out infinite;
}

@keyframes emp-snake-dotpulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.45); }
}

.emp-snake-halo {
  fill: var(--emp-wine);
  transform-box: fill-box;
  transform-origin: center;
  animation: emp-snake-pulse 1.7s ease-out infinite;
}

.emp-snake-halo--2 { animation-delay: -0.85s; }

/* La escala máxima la fija el JS (--emp-halo-max sobre el SVG): con la línea
   pegada al borde en celular, el 4.2× se salía de la pantalla y se veía medio
   anillo cortado, así que ahí baja a 2.2×. */
@keyframes emp-snake-pulse {
  0%   { transform: scale(0.5); opacity: 0.6; }
  70%  { opacity: 0; }
  100% { transform: scale(var(--emp-halo-max, 4.2)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-snake-dot { animation: none; }
  .emp-snake-halo { animation: none; }
}

/* Resalte del botón "Ver catálogo" cuando la cabeza lo toca. La clase se
   agrega/quita con el scroll, así que el flash se re-dispara cada vez. */
.emp-value__cta.emp-cta-lit {
  box-shadow:
    0 10px 24px -8px rgba(226, 35, 26, 0.55),
    0 0 40px 12px rgba(226, 35, 26, 0.75),
    0 0 14px 3px rgba(255, 120, 100, 0.9);
  filter: brightness(1.15);
  animation: emp-cta-flash 0.7s ease-out;
}

/* El flash es un DISPARO ÚNICO de 0,7s, no un pulso infinito: tiene que quedar
   fuera del presupuesto de animación. Las dos pausas de rendimiento lo estaban
   matando —.emp-scrolling lo congelaba en el frame 0 justo al dispararse (para
   que la cabeza llegue al botón hay que estar haciendo scroll, siempre) y solo
   arrancaba 140ms después de soltar; .emp-anim-off lo dejaba a medias si el
   botón salía de pantalla—. Va con !important y 3 clases para ganarle a las dos.
   El brillo infinito del ::after sigue pausándose: esta regla no lo toca. */
.emp-btn--primary.emp-value__cta.emp-cta-lit {
  animation-play-state: running !important;
}

/* Página cargada YA por debajo del botón (restauración de scroll, "atrás" del
   navegador): el primer cálculo lo enciende con el botón fuera de pantalla y el
   flash se gastaría sin que nadie lo vea. Se pone el estado final sin animar;
   al subir y volver a bajar sí se dispara. */
.emp-value__cta.emp-cta-lit.emp-cta-noflash {
  animation: none;
}

/* El 0% arranca donde LO DEJÓ el degradado de proximidad (near = 1 al tocar).
   Antes reseteaba a `0 0 0 0` y el botón se apagaba de golpe un instante antes
   de destellar. Las tres capas se repiten en los tres pasos: box-shadow solo
   interpola suave entre listas del mismo largo. */
@keyframes emp-cta-flash {
  0%   { box-shadow: 0 10px 24px -8px rgba(226, 35, 26, 0.55), 0 0 30px 8px rgba(226, 35, 26, 0.5), 0 0 10px 0 rgba(255, 120, 100, 0.45); filter: brightness(1); transform: scale(1); }
  35%  { box-shadow: 0 10px 24px -8px rgba(226, 35, 26, 0.55), 0 0 54px 20px rgba(255, 90, 70, 0.95), 0 0 20px 6px rgba(255, 180, 160, 0.95); filter: brightness(1.5); transform: scale(1.05); }
  100% { box-shadow: 0 10px 24px -8px rgba(226, 35, 26, 0.55), 0 0 40px 12px rgba(226, 35, 26, 0.75), 0 0 14px 3px rgba(255, 120, 100, 0.9); filter: brightness(1.15); transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-value__cta.emp-cta-lit { animation: none; }
}

#emp-faq-section {
  border-top: 1px solid rgba(245, 241, 232, 0.14);
}

/* ---- FAQ (acordeón) -------------------------------------------------------
   Animación de alto real con la técnica grid-template-rows 0fr→1fr (no
   necesita medir el alto del contenido por JS ni usar max-height con un
   valor arbitrario). El JS (initFaq()) solo agrega/quita clases; toda la
   animación es CSS. Acordeón de un solo panel abierto a la vez. */
.emp-faq {
  max-width: 760px;
  margin: 0 auto;
}

.emp-faq-list {
  margin-top: 8px;
}

.emp-faq-item {
  border-bottom: 1px solid rgba(245, 241, 232, 0.14);
}

.emp-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: none;
  border: none;
  padding: 20px 4px;
  margin: 0;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-weight: 700;
  font-size: 15.5px;
  color: var(--emp-cream);
  transition: color 0.2s ease;
}

.emp-faq-q:hover {
  color: var(--emp-wine-soft);
}

.emp-faq-q__icon {
  flex-shrink: 0;
  color: var(--emp-wine);
  transition: transform 0.3s ease;
}

.emp-faq-q[aria-expanded="true"] .emp-faq-q__icon {
  transform: rotate(135deg);
}

.emp-faq-a-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s ease;
}

.emp-faq-item.is-open .emp-faq-a-wrap {
  grid-template-rows: 1fr;
}

.emp-faq-a-inner {
  overflow: hidden;
}

.emp-faq-a {
  margin: 0;
  padding: 0 26px 20px 4px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 241, 232, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .emp-faq-a-wrap,
  .emp-faq-q__icon {
    transition: none;
  }
}

/* ---- 12. Footer (5 franjas — portado de "EMP Footer.dc.html") -------------
   El acento dorado #C9A24B del diseño se mapea al rojo de marca --emp-wine.
   Sobre fondo negro el rojo vivo puede vibrar, así que se usa el tinte claro
   --emp-wine-soft para textos/íconos de acento y --emp-wine para bordes/bandas.
   Los enlaces del footer ganan a la regla global `.emp a` porque van scopeados
   bajo `.emp-footer` (misma especificidad, pero más abajo en el archivo). */
.emp-footer {
  background: var(--emp-black);
  font-size: 14px;
  color: var(--emp-cream);
}

.emp-footer a {
  color: rgba(245, 241, 232, 0.62);
  text-decoration: none;
  transition: color 0.2s ease;
}

.emp-footer a:hover {
  color: var(--emp-wine-soft);
}

/* Franja 1 — Newsletter -------------------------------------------------- */
.emp-ft-news {
  background: var(--emp-wine);
  padding: 52px 20px;
}

.emp-ft-news__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
  justify-content: space-between;
}

.emp-ft-news__copy {
  flex: 1;
  min-width: 260px;
}

.emp-ft-news__title {
  font-family: var(--emp-serif);
  font-weight: 700;
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 0 0 8px;
  color: var(--emp-cream);
  text-wrap: balance;
}

.emp-ft-news__sub {
  font-size: 14.5px;
  color: rgba(245, 241, 232, 0.85);
  margin: 0;
  max-width: 440px;
  text-wrap: pretty;
}

.emp-ft-news__formwrap {
  flex: 1;
  min-width: 280px;
  max-width: 460px;
}

.emp-ft-news__form {
  display: flex;
  max-width: 460px;
}

.emp-ft-news__input {
  flex: 1;
  min-width: 0;
  background: rgba(245, 241, 232, 0.12);
  border: 1px solid rgba(245, 241, 232, 0.38);
  border-right: none;
  border-radius: 10px 0 0 10px;
  padding: 0 16px;
  height: 50px;
  font-size: 14px;
  color: var(--emp-cream);
  font-family: inherit;
  outline: none;
}

.emp-ft-news__input::placeholder {
  color: rgba(245, 241, 232, 0.6);
}

.emp-ft-news__input:focus {
  border-color: var(--emp-cream);
}

.emp-ft-news__btn {
  background: var(--emp-cream);
  color: var(--emp-black);
  border: none;
  border-radius: 0 10px 10px 0;
  padding: 0 22px;
  height: 50px;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.2s ease, transform 0.1s ease;
}

.emp-ft-news__btn:hover {
  filter: brightness(0.94);
}

.emp-ft-news__btn:active {
  transform: scale(0.98);
}

.emp-ft-news__fine {
  font-size: 10.5px;
  color: rgba(245, 241, 232, 0.55);
  margin: 8px 0 0;
}

.emp-ft-news__ok {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 241, 232, 0.12);
  border: 1px solid rgba(245, 241, 232, 0.3);
  border-radius: 10px;
  padding: 14px 18px;
  color: var(--emp-cream);
  animation: emp-ft-in 0.4s ease-out;
}

.emp-ft-news__ok svg {
  color: var(--emp-cream);
  flex-shrink: 0;
}

.emp-ft-news__ok span {
  font-size: 14px;
  font-weight: 600;
}

/* La caja de éxito envuelve cuando entra el código del cupón, para que en
   celular el código caiga a su propia línea en vez de apretar el texto. */
.emp-ft-news__ok {
  flex-wrap: wrap;
}

/* Código de cupón: es un <button> porque copia al portapapeles al tocarlo. */
.emp-ft-news__coupon,
.emp-exit__coupon {
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--emp-cream);
  background: rgba(245, 241, 232, 0.16);
  border: 1px dashed rgba(245, 241, 232, 0.55);
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.emp-ft-news__coupon:hover,
.emp-exit__coupon:hover {
  background: rgba(245, 241, 232, 0.26);
  border-color: var(--emp-cream);
}

/* Confirmación de copiado: el propio botón lo dice, sin sacar un toast.
   .is-select es el caso en que el navegador no dejó copiar y el código quedó
   seleccionado para hacerlo a mano. */
.emp-ft-news__coupon.is-copied::after,
.emp-exit__coupon.is-copied::after {
  content: " ¡copiado!";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
}

.emp-ft-news__coupon.is-select::after,
.emp-exit__coupon.is-select::after {
  content: " copia el código";
  font-size: 11px;
  font-weight: 600;
  letter-spacing: normal;
}

.emp-exit__coupon {
  color: var(--emp-black);
  background: rgba(17, 17, 17, 0.06);
  border-color: rgba(17, 17, 17, 0.4);
  margin-top: 10px;
}

.emp-exit__coupon:hover {
  background: rgba(17, 17, 17, 0.12);
  border-color: var(--emp-black);
}

/* Mensajes de error de los formularios de correo. */
.emp-ft-news__err,
.emp-exit__err {
  font-size: 12.5px;
  font-weight: 600;
  margin: 8px 0 0;
  color: #ff9b9b;
}

.emp-exit__err {
  color: var(--emp-wine);
}

.emp-exit__ok {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 14px;
  font-weight: 600;
  color: var(--emp-black);
  animation: emp-ft-in 0.4s ease-out;
}

/* Honeypot anti-spam: fuera de la vista pero sin display:none ni
   visibility:hidden, que muchos bots detectan y saltan. */
.emp-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none;
}

@keyframes emp-ft-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Franja 2 — Barra de confianza + chips de pago -------------------------- */
.emp-ft-trust {
  border-top: 1px solid rgba(226, 35, 26, 0.18);
  border-bottom: 1px solid rgba(226, 35, 26, 0.14);
}

.emp-ft-trust__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  padding: 0 20px;
}

.emp-ft-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.emp-ft-trust__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 22px 20px;
  border-right: 1px solid rgba(226, 35, 26, 0.12);
}

.emp-ft-trust__icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--emp-wine-soft);
}

.emp-ft-trust__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emp-cream);
  line-height: 1.35;
}

/* Franja 2: mismo carrusel de #garantias, pero sobre fondo oscuro del footer. */
.emp-ft-payments {
  margin-top: 0;
  border-top: 1px solid rgba(226, 35, 26, 0.14);
}

.emp-ft-payments .emp-payments__item img {
  filter: grayscale(1) invert(1) brightness(1.6);
}

/* Franja 3 — Navegación -------------------------------------------------- */
.emp-ft-nav {
  padding: 48px 20px 8px;
}

.emp-ft-nav__grid {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
}

.emp-ft-col {
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(226, 35, 26, 0.12);
}

.emp-ft-col__toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  min-height: 44px;
}

.emp-ft-col__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-ft-chevron {
  color: var(--emp-wine-soft);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.emp-ft-col.is-open .emp-ft-chevron,
.emp-ft-seo-sec.is-open .emp-ft-chevron {
  transform: rotate(180deg);
}

.emp-ft-col__body,
.emp-ft-seo-sec__body {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.emp-ft-col.is-open .emp-ft-col__body {
  max-height: 600px;
  opacity: 1;
}

.emp-ft-seo-sec.is-open .emp-ft-seo-sec__body {
  max-height: 900px;
  opacity: 1;
}

.emp-ft-col__list {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-ft-col__list a {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 13.5px;
}

/* Franja 4 — Hub SEO ----------------------------------------------------- */
.emp-ft-seo {
  padding: 8px 20px 24px;
  border-top: 1px solid rgba(226, 35, 26, 0.14);
}

.emp-ft-seo__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
}

.emp-ft-seo-sec {
  border-bottom: 1px solid rgba(226, 35, 26, 0.12);
}

.emp-ft-seo-sec__toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  min-height: 44px;
}

.emp-ft-seo-sec__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.6);
}

.emp-ft-seo-sec__toggle .emp-ft-chevron {
  color: rgba(245, 241, 232, 0.6);
}

.emp-ft-seo-sec__groups {
  padding: 4px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-ft-seo-group__label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--emp-wine-soft);
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

.emp-ft-seo-group__items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.emp-ft-seo-group__items a {
  font-size: 12.5px;
  color: rgba(245, 241, 232, 0.5);
  min-height: 32px;
  display: flex;
  align-items: center;
}

/* Franja 5 — Legal y contacto -------------------------------------------- */
.emp-ft-legal {
  border-top: 1px solid rgba(226, 35, 26, 0.18);
  padding: 36px 20px 28px;
}

.emp-ft-legal__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
}

.emp-ft-legal__top {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(226, 35, 26, 0.12);
}

.emp-ft-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
}

.emp-ft-contact a {
  font-size: 13.5px;
}

.emp-ft-contact span {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.42);
}

.emp-ft-hours {
  max-width: 280px;
  background: rgba(226, 35, 26, 0.08);
  border: 1px solid rgba(226, 35, 26, 0.24);
  border-radius: 10px;
  padding: 14px 16px;
}

.emp-ft-hours__t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-wine-soft);
  margin: 0 0 4px;
}

.emp-ft-hours__d {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.62);
  margin: 0;
  line-height: 1.5;
}

.emp-ft-social {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.emp-ft-social__count {
  font-size: 11.5px;
  color: rgba(245, 241, 232, 0.42);
}

.emp-ft-social__icons {
  display: flex;
  gap: 10px;
}

.emp-footer .emp-ft-social__icons a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(226, 35, 26, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emp-wine-soft);
  transition: border-color 0.2s ease, background 0.2s ease;
}

.emp-footer .emp-ft-social__icons a:hover {
  border-color: var(--emp-wine);
  background: rgba(226, 35, 26, 0.12);
  color: var(--emp-wine-soft);
}

.emp-ft-legal__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 20px;
}

.emp-ft-legal__copy {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.38);
  letter-spacing: 0.02em;
  margin: 0;
}

.emp-ft-legal__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.emp-ft-legal__links a {
  font-size: 11px;
  color: rgba(245, 241, 232, 0.38);
}

/* Escritorio: la barra de confianza pasa a 5 columnas, la navegación se abre
   en columnas fijas (los toggles se desactivan) y el hub SEO sigue en acordeón. */
@media (min-width: 900px) {
  .emp-ft-trust__grid {
    grid-template-columns: repeat(5, 1fr);
  }

  .emp-ft-nav__grid {
    grid-template-columns: 2fr 1fr 1fr 1.1fr;
    gap: 0 40px;
  }

  .emp-ft-col {
    border-bottom: none;
    padding-bottom: 8px;
  }

  .emp-ft-col__toggle {
    cursor: default;
    pointer-events: none;
  }

  .emp-ft-col .emp-ft-chevron {
    display: none;
  }

  /* En escritorio las columnas de navegación quedan siempre abiertas,
     sin importar el estado is-open del acordeón móvil. */
  .emp-ft-col__body {
    max-height: none !important;
    opacity: 1 !important;
    overflow: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-ft-news__ok,
  .emp-ft-chevron,
  .emp-ft-col__body,
  .emp-ft-seo-sec__body {
    animation: none;
    transition: none;
  }
}

/* ---- Carrito lateral -----------------------------------------------------
   Portado de "EMP Carrito Lateral" (Claude Design). El dorado #C9A24B del
   mockup se mapea al rojo de marca; donde el mockup contrastaba dorado CONTRA
   vino (la barra de envío conseguida, la etiqueta sobre el fondo negro) el
   sustituto es CREMA, porque rojo sobre rojo no se distingue.
   -------------------------------------------------------------------------- */
.emp-cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(17, 17, 17, 0.52);
  z-index: 80;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.emp-cart-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

/* En celular el cajón ocupa el 80% de la pantalla (pedido del usuario), no el
   100vw del mockup: dejar ver un trozo de la tienda detrás recuerda que el
   carrito es una capa y que se cierra tocando fuera.
   `min()` resuelve los dos tamaños sin media query: 80vw solo gana por debajo de
   525px de ancho (80vw = 420px justo ahí), así que en tablet y escritorio el
   cajón se queda clavado en 420px como estaba. */
.emp-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(420px, 80vw);
  background: var(--emp-cream);
  z-index: 81;
  box-shadow: -24px 0 70px rgba(0, 0, 0, 0.34);
  transform: translateX(100%);
  transition: transform 0.34s cubic-bezier(0.22, 0.61, 0.36, 1);
  display: flex;
  flex-direction: column;
}

.emp-cart.is-open {
  transform: translateX(0);
}

/* Mientras hay una petición en vuelo se bloquea SOLO el botón de finalizar: el
   total que muestra todavía no es el definitivo y salir al checkout a mitad de
   una actualización enseñaría dos cifras distintas. El resto del cajón sigue
   respondiendo a propósito — bloquearlo entero anularía el pintado optimista de
   cantidades, que existe justo para poder pulsar "+" varias veces seguidas. */
.emp-cart.is-busy .emp-cart__checkout {
  opacity: 0.6;
  pointer-events: none;
}

/* 1. Cabecera ------------------------------------------------------------- */
.emp-cart__head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 17px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  background: #fff;
}

.emp-cart__headline {
  display: flex;
  align-items: baseline;
  gap: 9px;
  min-width: 0;
}

.emp-cart__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.2;
}

.emp-cart__badge {
  flex-shrink: 0;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--emp-wine);
  background: rgba(226, 35, 26, 0.09);
  padding: 3px 9px;
  border-radius: 100px;
}

.emp-cart__close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.14);
  background: var(--emp-cream);
  color: var(--emp-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emp-cart__close:hover {
  background: #fff;
}

/* Aviso del cajón --------------------------------------------------------- */
.emp-cart__toast {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 18px;
  background: var(--emp-black);
  color: var(--emp-cream);
  font-size: 12.5px;
  font-weight: 600;
}

.emp-cart__toast svg {
  flex-shrink: 0;
  color: var(--emp-wine-soft);
}

/* Animación de UN SOLO disparo (no `infinite`): no entra en el presupuesto de
   animaciones de initAnimBudget() ni en la pausa por scroll. */
.emp-cart__toast.is-in {
  animation: empCartToastIn 0.26s ease both;
}

@keyframes empCartToastIn {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* 2. Barra de envío gratis ------------------------------------------------ */
.emp-cart__ship {
  flex-shrink: 0;
  padding: 14px 18px;
  background: var(--emp-black);
}

.emp-cart__ship-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}

/* Mismo peso visual que la barra del header (pedido del usuario): las dos son
   la misma promesa y tenían que resaltar igual. */
.emp-cart__ship-msg {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--emp-cream);
  line-height: 1.3;
}

.emp-cart__ship-tag {
  flex-shrink: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-cart__ship-track {
  height: 8px;
  border-radius: 100px;
  background: rgba(245, 241, 232, 0.16);
  overflow: hidden;
}

.emp-cart__ship-fill {
  height: 100%;
  width: 0;
  border-radius: 100px;
  background: linear-gradient(90deg, var(--emp-wine-dark), var(--emp-wine));
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Conseguido: crema, no rojo. Sobre el fondo negro el rojo ya es el color del
   "te faltan", así que repetirlo no marcaría el cambio de estado. */
.emp-cart__ship.is-free .emp-cart__ship-fill {
  background: var(--emp-cream);
}

.emp-cart__ship.is-free .emp-cart__ship-tag {
  color: var(--emp-cream);
}

/* Cuerpo ------------------------------------------------------------------ */
.emp-cart__body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.emp-cart__loading {
  padding: 44px 24px;
  text-align: center;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.5);
}

/* 3. Líneas de producto --------------------------------------------------- */
.emp-cart__lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.emp-cart__line {
  display: flex;
  gap: 13px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}

.emp-cart__line-img {
  width: 74px;
  height: 92px;
  flex-shrink: 0;
  background: #EDE7DA;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}

.emp-cart__line-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-cart__line-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-cart__line-brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

/* Los CTA/enlaces del cajón fuerzan su color: la regla global
   `.emp a { color: var(--emp-wine) }` les gana en especificidad. */
.emp a.emp-cart__line-name {
  font-family: var(--emp-serif);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.18;
  color: var(--emp-black);
  text-decoration: none;
}

.emp a.emp-cart__line-name:hover {
  color: var(--emp-wine);
}

.emp-cart__line-variant {
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.55);
}

.emp-cart__line-low {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 700;
  color: var(--emp-wine);
}

.emp-cart__line-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--emp-wine);
  display: inline-block;
}

.emp-cart__line-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 9px;
}

.emp-cart__qty {
  display: flex;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, 0.18);
  border-radius: 2px;
  background: #fff;
}

.emp-cart__qty-btn {
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--emp-black);
  line-height: 1;
}

.emp-cart__qty-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}

.emp-cart__qty-n {
  min-width: 26px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.emp-cart__line-prices {
  text-align: right;
}

.emp-cart__line-old {
  display: block;
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.42);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.emp-cart__line-total {
  display: block;
  font-size: 14.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp-cart__line-remove {
  align-self: flex-start;
  margin-top: 7px;
  min-height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 11px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.45);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-cart__line-remove:hover {
  color: var(--emp-wine);
}

/* 4. Cross-sell ----------------------------------------------------------- */
.emp-cart__cross {
  padding: 16px 18px;
  background: #EFEADC;
  border-bottom: 1px solid rgba(17, 17, 17, 0.09);
}

.emp-cart__cross-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 11px;
}

.emp-cart__cross-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

.emp-cart__cross-reason {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
}

.emp-cart__cross-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.emp-cart__cross-item {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 3px;
  padding: 9px 11px;
}

.emp-cart__cross-img {
  width: 44px;
  height: 52px;
  flex-shrink: 0;
  background: #EDE7DA;
  border-radius: 2px;
  overflow: hidden;
  display: block;
}

.emp-cart__cross-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-cart__cross-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.emp-cart__cross-brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

.emp a.emp-cart__cross-name {
  font-family: var(--emp-serif);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--emp-black);
  text-decoration: none;
}

.emp a.emp-cart__cross-name:hover {
  color: var(--emp-wine);
}

.emp-cart__cross-meta {
  font-size: 11px;
  color: rgba(17, 17, 17, 0.52);
}

.emp .emp-cart__cross-add {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--emp-black);
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--emp-black);
  text-decoration: none;
}

.emp .emp-cart__cross-add:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

/* 5. Cupón ---------------------------------------------------------------- */
.emp-cart__coupon {
  padding: 14px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.09);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.emp-cart__coupon-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emp-cart__coupon-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 6px 5px 11px;
  border-radius: 100px;
  background: rgba(46, 125, 79, 0.12);
  color: var(--emp-green);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.emp-cart__coupon-tag button {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background: rgba(46, 125, 79, 0.16);
  color: inherit;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.emp-cart__coupon-link {
  align-self: flex-start;
  min-height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 12px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-cart__coupon-link:hover {
  color: var(--emp-wine);
}

.emp-cart__coupon-form {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.emp-cart__coupon-row {
  display: flex;
  gap: 7px;
}

.emp-cart__coupon-input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  border-radius: 2px;
  background: #fff;
  font-family: var(--emp-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emp-black);
}

.emp-cart__coupon-apply {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--emp-black);
  border-radius: 2px;
  background: var(--emp-black);
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--emp-cream);
}

.emp-cart__coupon-msg {
  font-size: 11.5px;
  font-weight: 600;
}

.emp-cart__coupon-msg.is-ok { color: var(--emp-green); }
.emp-cart__coupon-msg.is-err { color: var(--emp-wine); }

/* 6. Resumen -------------------------------------------------------------- */
.emp-cart__summary {
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emp-cart__sub {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.emp-cart__sub-label {
  font-size: 13px;
  color: rgba(17, 17, 17, 0.62);
}

.emp-cart__sub-value {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp-cart__savings {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.emp-cart__savings-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-wine);
}

.emp-cart__savings-detail {
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.5);
}

.emp-cart__points {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-radius: 3px;
  background: rgba(226, 35, 26, 0.08);
  color: var(--emp-wine-dark);
  font-size: 12px;
  font-weight: 600;
}

.emp-cart__points svg {
  flex-shrink: 0;
}

/* 7. Sellos de confianza -------------------------------------------------- */
.emp-cart__trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(17, 17, 17, 0.09);
  border-top: 1px solid rgba(17, 17, 17, 0.09);
}

.emp-cart__trust-item {
  background: var(--emp-cream);
  padding: 13px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(17, 17, 17, 0.72);
}

.emp-cart__trust-item svg {
  color: var(--emp-wine);
}

/* 8. CTA fijo abajo ------------------------------------------------------- */
.emp-cart__foot {
  flex-shrink: 0;
  padding: 13px 18px;
  padding-bottom: max(13px, env(safe-area-inset-bottom));
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.emp a.emp-cart__checkout {
  min-height: 54px;
  border-radius: 2px;
  background: var(--emp-wine);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--emp-sans);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-cream);
  text-decoration: none;
}

.emp a.emp-cart__checkout:hover {
  background: var(--emp-wine-dark);
  color: var(--emp-cream);
}

.emp-cart__checkout-total {
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.emp-cart__foot-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/* ⚠️ Los dos van con `inline-flex` + `align-items:center` para que el TEXTO
   quede a la misma altura. Con `min-height` a secas las CAJAS sí alineaban
   (medido: 0px de desfase entre ellas) pero el texto no: un `<button>` centra su
   contenido verticalmente por defecto y un `<a>` en bloque lo deja pegado
   arriba, y salían 11px descuadrados. No es el contenedor —ya tiene
   `align-items:center`—, es el interior de cada uno. */
.emp-cart__keep,
.emp .emp-cart__help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  color: rgba(17, 17, 17, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-cart__keep:hover,
.emp .emp-cart__help:hover {
  color: var(--emp-wine);
}

/* 9. Estado vacío --------------------------------------------------------- */
.emp-cart__empty {
  padding: 44px 24px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.emp-cart__empty-icon {
  color: var(--emp-wine);
  margin-bottom: 16px;
}

.emp-cart__empty-title {
  margin: 0 0 9px;
  font-family: var(--emp-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  max-width: 270px;
}

.emp-cart__empty-text {
  margin: 0 0 20px;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.6);
  max-width: 290px;
  text-wrap: pretty;
}

.emp-cart__empty-actions {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 100%;
  max-width: 290px;
}

.emp-cart__empty-cta,
.emp a.emp-cart__empty-alt {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border-radius: 2px;
  font-family: var(--emp-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
}

.emp-cart__empty-cta {
  border: none;
  background: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-cart__empty-cta:hover {
  background: var(--emp-wine-dark);
}

.emp a.emp-cart__empty-alt {
  border: 1px solid var(--emp-black);
  background: transparent;
  color: var(--emp-black);
}

.emp a.emp-cart__empty-alt:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

.emp a.emp-cart__empty-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  padding: 9px 13px;
  border-radius: 3px;
  background: rgba(226, 35, 26, 0.08);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emp-wine-dark);
  text-decoration: none;
  text-align: left;
}

.emp a.emp-cart__empty-note svg {
  flex-shrink: 0;
}

/* Sugerencias del carrito vacío. Reusa `.emp-cart__cross` entero y solo se
   recoloca: el estado vacío va centrado y con 24px de aire a los lados, así que
   los márgenes negativos lo devuelven a ancho completo —como la banda que se ve
   cuando SÍ hay productos— y el de abajo se come el padding final del bloque.
   Ojo si cambia el `padding` de `.emp-cart__empty`: estos -24/-30 lo espejan. */
.emp-cart__cross--empty {
  width: calc(100% + 48px);
  margin: 28px -24px -30px;
  text-align: left;
  border-top: 1px solid rgba(17, 17, 17, 0.09);
  border-bottom: none;
}

/* Celular estrecho: el cajón al 80% deja ~288px en un teléfono de 360px, y con
   las medidas del mockup (imagen de 74px + control de cantidad de 94px + precio)
   la fila de cada línea pedía 171px donde solo había 165 y se desbordaba. Se
   aprieta lo justo —relleno, foto y botones— para que cantidad y precio sigan
   cabiendo EN LA MISMA FILA, que es lo que hace la línea legible de un vistazo.
   El corte va en 430px y no en los 525px donde empieza el 80vw: entre medias el
   cajón pasa de 320px y no hace falta apretar nada. */
@media (max-width: 430px) {
  .emp-cart__head,
  .emp-cart__ship,
  .emp-cart__toast,
  .emp-cart__line,
  .emp-cart__cross,
  .emp-cart__coupon,
  .emp-cart__summary,
  .emp-cart__foot {
    padding-left: 13px;
    padding-right: 13px;
  }

  .emp-cart__title {
    font-size: 19px;
  }

  .emp-cart__line {
    gap: 10px;
  }

  .emp-cart__line-img {
    width: 58px;
    height: 72px;
  }

  .emp-cart__qty-btn {
    width: 30px;
    height: 30px;
  }

  .emp-cart__qty-n {
    min-width: 22px;
  }

  .emp-cart__line-total {
    font-size: 13.5px;
  }

  .emp-cart__cross-img {
    width: 38px;
    height: 46px;
  }

  .emp .emp-cart__cross-add {
    padding: 0 11px;
  }

  /* Los dos enlaces del pie no caben lado a lado a este ancho. */
  .emp-cart__foot-links {
    gap: 10px;
  }

  /* La etiqueta lateral ("Envío 24 h" / "Conseguido") se cae aquí: al 80% le
     robaba ~75px al mensaje y lo partía en dos líneas, dejando el emoji solo en
     la segunda. Es decorativa —y con envío conseguido dice lo mismo que el
     propio mensaje—, así que el mensaje se queda con todo el ancho. */
  .emp-cart__ship-tag {
    display: none;
  }
}

/* Teléfonos de 320px (SE de primera generación y Androids viejos): ahí el 80%
   son 256px, el caso más justo del tema. Se
   aprieta un escalón más en vez de dejar que el precio salte de línea. */
@media (max-width: 340px) {
  .emp-cart__head,
  .emp-cart__ship,
  .emp-cart__toast,
  .emp-cart__line,
  .emp-cart__cross,
  .emp-cart__coupon,
  .emp-cart__summary,
  .emp-cart__foot {
    padding-left: 10px;
    padding-right: 10px;
  }

  .emp-cart__line-img {
    width: 48px;
    height: 60px;
  }

  .emp-cart__qty-btn {
    width: 28px;
    height: 28px;
  }

  .emp-cart__line-total {
    font-size: 13px;
  }

  .emp-cart__sub-value {
    font-size: 17px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-cart,
  .emp-cart-overlay,
  .emp-cart__ship-fill {
    transition-duration: 0.01s;
  }

  .emp-cart__toast.is-in {
    animation-duration: 0.01s;
  }
}

/* ---- Toast prueba social ------------------------------------------------- */
.emp-toast {
  position: fixed;
  bottom: 22px;
  left: 22px;
  max-width: 260px;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  z-index: 70;
  display: flex;
  gap: 10px;
  align-items: center;
  transition: bottom 0.3s ease-out;
}

/* La sticky CTA (fija abajo, ancho completo) tapa el toast cuando está
   visible; lo sube por encima usando el alto real que mide initStickyCta. */
body.has-sticky-cta .emp-toast {
  bottom: calc(22px + var(--emp-stickycta-h, 0px));
}

.emp-toast.is-in {
  animation: emp-toast-in 0.4s ease-out;
}

.emp-toast__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emp-green);
  flex-shrink: 0;
  animation: emp-pulse 1.6s ease-in-out infinite;
}

.emp-toast__msg {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--emp-black);
}

/* ---- Exit-intent --------------------------------------------------------- */
.emp-exit {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.emp-exit__box {
  background: var(--emp-cream);
  border-radius: 16px;
  padding: 36px 28px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  position: relative;
}

.emp-exit__close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

.emp-exit__title {
  font-family: var(--emp-serif);
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.emp-exit__text {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.6);
  margin: 0 0 18px;
}

.emp-exit__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-exit__input {
  padding: 13px;
  border-radius: 8px;
  border: 1.5px solid rgba(17, 17, 17, 0.15);
  font-size: 14px;
  font-family: inherit;
}

.emp-btn--wine-block {
  background: var(--emp-wine);
  color: #fff;
  border: none;
  padding: 13px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14.5px;
  cursor: pointer;
  font-family: inherit;
}

/* ---- Animaciones --------------------------------------------------------- */
/* Flotación del frasco. Antes recorría 38px y giraba de -6° a +6°: 12 grados de
   vaivén no es flotar, es mecerse como un péndulo. Y el `scale(1.05)` reescalaba
   en cada frame un PNG que ya se muestra reducido (375×500 → 286×372): los bordes
   dorados vibraban y obligaba a re-rasterizar el drop-shadow. Solo translate y un
   giro corto = la capa se cachea y la animación sale prácticamente gratis. */
@keyframes emp-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2.5deg); }
  50%      { transform: translate3d(0, -14px, 0) rotate(4.5deg); }
}

@keyframes emp-shimmer {
  0%, 100% { opacity: 0.3; transform: scale(0.92); }
  50%      { opacity: 0.62; transform: scale(1.12); }
}

/* El destello espera parado fuera del frasco y cruza en el último 26% del ciclo
   (~1,8s): un reflejo es un golpe de luz, no un barrido constante. */
@keyframes emp-sheen {
  0%, 74% { transform: translateX(-130%); }
  100%    { transform: translateX(420%); }
}

@keyframes emp-marquee-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes emp-brands-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes emp-toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes emp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-bottle,
  .emp-bottle__sheen::before,
  .emp-glow,
  #garantias .emp-guarantee,
  #garantias .emp-guarantee__icon,
  .emp-brands__track,
  .emp-toast__dot,
  .emp-badge--lowstock,
  .emp-card__savings,
  .emp-btn--primary,
  .emp-btn--primary::after,
  .emp-stars svg {
    animation: none !important;
  }
}

/* ---- Ajustes responsive -------------------------------------------------- */
@media (max-width: 720px) {
  .emp-hero {
    min-height: 460px;
    padding: 40px 20px 44px;
  }

  .emp-hero__scrim {
    background: rgba(17, 17, 17, 0.78);
  }

  /* En escritorio las dos fotos del hero van lado a lado (mitad izquierda /
     mitad derecha); en celular se apilan una debajo de otra en vez de
     quedar angostas. El alto total de la sección no cambia — cada foto
     pasa a ocupar la mitad del alto en vez de la mitad del ancho. */
  .emp-hero__bg {
    flex-direction: column;
  }

  .emp-hero__bg-half {
    width: 100%;
    height: 50%;
  }

  .emp-hero__media {
    width: min(32vw, 145px);
    /* Frasco arriba, texto abajo (invierte el orden visual del DOM sin
       tocarlo, para que el texto siga leyéndose primero por lectores de
       pantalla). */
    order: -1;
    margin: 0 auto;
  }

  .emp-hero__copy {
    order: 1;
    align-items: center;
    text-align: center;
  }

  .emp-eyebrow {
    align-self: center;
  }

  .emp-hero__ctas {
    justify-content: center;
  }

  /* El aviso "Responde 4 preguntas..." pasa a ir entre el botón principal y
     "Ver ofertas" (en escritorio va después de ambos). */
  .emp-hero__cta-hint {
    order: 2;
    text-align: center;
  }

  .emp-hero__ctas .emp-btn--ghost {
    order: 3;
  }

  /* Estrellas arriba, texto centrado debajo (en fila se veía descuadrado
     al partirse en dos líneas, con las estrellas pegadas solo a la primera). */
  .emp-hero__social {
    flex-direction: column;
    gap: 6px;
  }

  .emp-hero__social-text {
    text-align: center;
  }

  /* Grid de 3 columnas simétricas (1fr auto 1fr): el logo queda centrado de
     verdad en la columna del medio sin importar que la hamburguesa y el
     grupo de íconos tengan anchos distintos. */
  .emp-header__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
  }

  .emp-hamburger {
    justify-self: start;
  }

  .emp-header__right {
    justify-self: end;
    gap: 10px;
  }

  .emp-header__actions {
    gap: 8px;
  }

  /* La barra de búsqueda se reemplaza por una lupa para dar más espacio a
     logo/menú/íconos; al tocarla se despliega el campo como un pequeño
     panel debajo del ícono. */
  .emp-search-toggle {
    display: flex;
  }

  .emp-search {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: min(78vw, 260px);
    padding: 10px;
    background: var(--emp-panel);
    border: 1px solid rgba(245, 241, 232, 0.14);
    border-radius: 10px;
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  }

  .emp-search-wrap.is-open .emp-search {
    display: block;
  }

  .emp-hamburger {
    display: flex;
  }

  /* El panel deja de ser "display:contents" y se vuelve un cajón (drawer)
     fijo que entra desde la izquierda. */
  .emp-nav-panel {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    width: min(82vw, 300px);
    height: 100dvh;
    background: var(--emp-black);
    padding: 18px;
    gap: 4px;
    overflow-y: auto;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 16px 0 32px rgba(0, 0, 0, 0.4);
  }

  .emp-nav-panel.is-open {
    transform: translateX(0);
  }

  .emp-nav-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  }

  .emp-nav-panel__title {
    font-family: var(--emp-serif);
    font-weight: 700;
    font-size: 16px;
    color: var(--emp-cream);
  }

  .emp-nav-panel__close {
    background: none;
    border: none;
    color: var(--emp-cream);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
  }

  .emp-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
  }

  .emp-nav > li {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .emp-nav > li:not(:last-child) {
    border-bottom: 1px solid rgba(245, 241, 232, 0.14);
  }

  .emp-nav > li > a {
    flex: 1;
    padding: 10px 4px;
    font-size: 14.5px;
  }

  /* Botón flecha (inyectado por JS) que despliega/oculta el submenú de un
     ítem del menú principal — sin hover confiable en táctil, se hace clic.
     order:1 la mantiene junto al texto (línea 1) aunque en el DOM esté
     después del submenú; el submenú (order:2) siempre pasa a la línea
     siguiente al desplegarse, en vez de empujar la flecha hacia abajo. */
  .emp-nav__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 1;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    color: var(--emp-cream);
    cursor: pointer;
    padding: 0;
  }

  .emp-nav__toggle svg {
    transition: transform 0.2s ease;
  }

  .emp-nav > li.is-open > .emp-nav__toggle svg {
    transform: rotate(180deg);
  }

  /* Resaltado rojo del ítem principal mientras su submenú está desplegado
     (equivalente móvil del :hover de escritorio); se quita solo al plegar. */
  .emp-nav > li.is-open > a {
    color: var(--emp-wine);
    box-shadow: inset 0 -2px 0 var(--emp-wine);
  }

  /* Submenús apilados en columna (en vez de la mega-columna en fila de
     escritorio), colapsados por defecto y desplegados con la flecha. */
  .emp-nav .sub-menu,
  .emp-nav > li > .sub-menu {
    position: static;
    display: none;
    order: 2;
    flex-direction: column;
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 4px 0 4px 14px;
    margin: 0;
    min-width: 0;
    gap: 0;
    width: 100%;
  }

  .emp-nav > li.is-open > .sub-menu {
    display: flex;
  }

  /* El 2do submenú (dentro de su categoría) sigue viéndose completo en
     cuanto el 1er submenú está desplegado — no tiene flecha propia. */
  .emp-nav .sub-menu .sub-menu {
    display: flex !important;
    padding-left: 14px;
  }

  .emp-nav .menu-item-has-children > a::after {
    display: none;
  }

  /* Encabezado del 1er submenú: el resaltado vino llega de lado a lado del
     cajón (no solo del ancho del texto). Cancela el padding del panel
     (18px) y el inset del submenú (14px) con márgenes negativos, y los
     repone como padding para que el texto quede en la misma posición. */
  .emp-nav > li > .sub-menu > li > a {
    margin: 0 -18px 0 -32px;
    padding: 10px 18px 10px 32px;
    border-radius: 0;
  }
}

/* =========================================================================
   Página "Descarga la App" (plantilla template-descarga-app.php)
   ========================================================================= */
.emp-appdl {
  min-height: 62vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 20px 80px;
  background:
    radial-gradient(1200px 500px at 50% -10%, rgba(226, 35, 26, 0.18), transparent 60%),
    var(--emp-cream);
}

.emp-appdl__card {
  width: 100%;
  max-width: 560px;
  text-align: center;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  border-radius: 22px;
  padding: 44px 34px 40px;
  box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.25);
}

.emp-appdl__icon {
  width: 96px;
  height: 96px;
  margin: 0 auto 22px;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--emp-black), var(--emp-panel));
  box-shadow: 0 12px 26px -12px rgba(17, 17, 17, 0.6);
  overflow: hidden;
}

.emp-appdl__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}

.emp-appdl__icon-txt {
  font-family: var(--emp-serif);
  font-size: 44px;
  font-weight: 700;
  color: var(--emp-gold-soft);
}

.emp-appdl__title {
  font-family: var(--emp-serif);
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--emp-black);
}

.emp-appdl__lead {
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.7);
  margin: 0 auto 30px;
  max-width: 420px;
}

.emp-appdl__stores {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.emp-appdl__store.emp-appdl__store {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 200px;
  padding: 12px 22px;
  border-radius: 13px;
  background: var(--emp-black);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.emp-appdl__store.emp-appdl__store:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -16px rgba(17, 17, 17, 0.7);
  filter: brightness(1.08);
}

.emp-appdl__store-ico {
  flex: none;
}

.emp-appdl__store-txt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.emp-appdl__store-txt small {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

.emp-appdl__store-txt strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.emp-appdl__empty {
  font-size: 14px;
  color: var(--emp-wine);
  margin: 4px 0 0;
}

.emp-appdl__content {
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(17, 17, 17, 0.8);
}

@media (max-width: 480px) {
  .emp-appdl__card { padding: 34px 20px 30px; }
  .emp-appdl__store.emp-appdl__store { min-width: 100%; justify-content: center; }
}

/* ---- Sticky CTA (barra inferior tras perder de vista el CTA del hero) ---
   El fondo negro liso se perdía contra las secciones oscuras del Home (poco
   contraste con lo que hay justo encima); ahora lleva un borde superior en
   degradado wine + una sombra con tinte rojo para que la barra se despegue
   del contenido sin importar qué haya detrás. */
.emp-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 75;
  background: linear-gradient(180deg, #1c1414, var(--emp-black));
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--emp-wine), var(--emp-wine-soft), var(--emp-wine)) 1;
  box-shadow: 0 -12px 32px rgba(226, 35, 26, 0.22), 0 -4px 14px rgba(0, 0, 0, 0.45);
  padding: 9px 16px calc(9px + env(safe-area-inset-bottom, 0px));
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
}

/* Variante clara (.emp-sticky-cta--light, la usa front-page.php): mismo
   borde en degradado wine para que siga notándose el "corte" con lo que
   haya detrás, pero fondo crema y sombra gris en vez de negro/rojo — el
   ghost (.emp-btn--ghost, pensado para fondo oscuro) necesita texto y
   borde oscuros aquí, si no queda blanco sobre blanco. */
.emp-sticky-cta--light {
  background: linear-gradient(180deg, #fffdfa, var(--emp-cream));
  box-shadow: 0 -10px 28px rgba(17, 17, 17, 0.14), 0 -2px 8px rgba(17, 17, 17, 0.08);
}

.emp-sticky-cta--light a.emp-btn--ghost {
  color: var(--emp-black);
  border-color: rgba(17, 17, 17, 0.25);
}

/* El :hover base (.emp-btn--ghost:hover) y ".emp a.emp-btn--ghost:hover"
   pintan texto crema/blanco — invisible sobre este fondo claro. Hay que
   igualar su especificidad exacta (clase+clase+:hover, elemento a) para
   ganarles también en hover, no solo en reposo. */
.emp-sticky-cta--light a.emp-btn--ghost:hover {
  color: var(--emp-black);
  border-color: rgba(17, 17, 17, 0.55);
  background: rgba(17, 17, 17, 0.05);
}

.emp-sticky-cta.is-visible {
  transform: translateY(0);
}

.emp-sticky-cta__inner {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.emp-sticky-cta .emp-btn {
  flex: 1;
  justify-content: center;
  padding: 10px 18px;
  font-size: 14px;
}

.emp-sticky-cta .emp-btn--primary {
  box-shadow: 0 8px 22px -4px rgba(226, 35, 26, 0.75);
}

.emp-sticky-cta .emp-btn--ghost {
  border-width: 2px;
  border-color: rgba(245, 241, 232, 0.45);
  font-weight: 700;
}

.emp-sticky-cta .emp-btn--ghost:hover {
  border-color: rgba(245, 241, 232, 0.85);
}

@media (min-width: 640px) {
  .emp-sticky-cta__inner { justify-content: center; }
  .emp-sticky-cta .emp-btn { flex: 0 0 auto; padding: 10px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-sticky-cta {
    transition: none;
  }
}

/* ---- Catálogo (PLP) -------------------------------------------------------
   Portado de "EMP Catalogo.dc.html" (Claude Design). El mockup usaba la paleta
   vieja (vino #8E1B2E + dorado #C9A24B); aquí ambos acentos se mapean al ROJO
   de marca, que es el único acento que quedó tras quitar el dorado:
     · #8E1B2E  ->  var(--emp-wine)
     · #C9A24B  ->  var(--emp-wine) en rellenos/reglas y var(--emp-wine-soft)
                    cuando es TEXTO sobre fondo oscuro (el rojo pleno sobre
                    negro no se lee, el tinte claro sí)
   Donde el mockup contrastaba dorado CONTRA vino (el CTA del banner del quiz,
   su halo) el sustituto no es rojo sobre rojo sino CREMA: si no, el botón se
   funde con su propio fondo.
   El ancho es var(--emp-maxw), no los 1340px del mockup, para que el catálogo
   quede alineado con el header y el footer del tema.
   -------------------------------------------------------------------------- */
.emp-plp {
  padding-bottom: 8px;
}

.emp-plp__crumbs,
.emp-plp-hero,
.emp-plp-trust,
.emp-plp-toolbar,
.emp-plp-body {
  max-width: var(--emp-maxw);
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

/* ---- Migas ---- */
.emp-plp__crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  padding-top: 14px;
  font-size: 12px;
  color: rgba(17, 17, 17, 0.55);
}

.emp .emp-plp__crumbs a {
  color: rgba(17, 17, 17, 0.55);
  text-decoration: none;
}

.emp .emp-plp__crumbs a:hover {
  color: var(--emp-wine);
}

.emp-plp__crumbs span[aria-hidden] {
  opacity: 0.4;
}

.emp-plp__crumbs-current {
  color: var(--emp-black);
  font-weight: 600;
}

/* ---- Encabezado de categoría ---- */
.emp-plp-hero {
  margin-top: 14px;
}

.emp-plp-hero__box {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 44px 28px 40px;
}

.emp-plp-hero--dark .emp-plp-hero__box {
  background:
    radial-gradient(120% 130% at 15% 0%, rgba(226, 35, 26, 0.2), transparent 58%),
    linear-gradient(155deg, #1c1813 0%, #111111 60%, #0b0a08 100%);
  border: 1px solid rgba(226, 35, 26, 0.24);
}

/* Segundo foco de luz, abajo a la derecha: en el mockup era vino sobre dorado;
   aquí baja de opacidad para que no se lea como una mancha plana de rojo. */
.emp-plp-hero--dark .emp-plp-hero__box::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 88% 110%, rgba(226, 35, 26, 0.28), transparent 70%);
  pointer-events: none;
}

.emp-plp-hero--light .emp-plp-hero__box {
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
    linear-gradient(150deg, #f7efe7 0%, #efe4da 55%, #e7d9ce 100%);
  border: 1px solid rgba(17, 17, 17, 0.08);
}

.emp-plp-hero__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-plp-hero__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.emp-plp-hero--dark .emp-plp-hero__kicker { color: var(--emp-wine-soft); }
.emp-plp-hero--light .emp-plp-hero__kicker { color: var(--emp-wine); }

.emp-plp-hero__title {
  font-family: var(--emp-serif);
  font-weight: 600;
  font-size: clamp(32px, 5.4vw, 54px);
  line-height: 1.04;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

.emp-plp-hero--dark .emp-plp-hero__title { color: var(--emp-cream); }
.emp-plp-hero--light .emp-plp-hero__title { color: var(--emp-black); }

.emp-plp-hero__sub {
  font-size: 15px;
  line-height: 1.55;
  max-width: 520px;
  margin: 0;
  text-wrap: pretty;
}

.emp-plp-hero--dark .emp-plp-hero__sub { color: rgba(245, 241, 232, 0.72); }
.emp-plp-hero--light .emp-plp-hero__sub { color: rgba(17, 17, 17, 0.65); }

.emp-plp-hero__count {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}

.emp-plp-hero__rule {
  width: 26px;
  height: 1px;
  background: var(--emp-wine);
  flex-shrink: 0;
}

.emp-plp-hero--dark .emp-plp-hero__count { color: var(--emp-wine-soft); }
.emp-plp-hero--light .emp-plp-hero__count { color: var(--emp-wine); }

/* ---- Barra de confianza ---- */
.emp-plp-trust {
  margin-top: 12px;
}

.emp-plp-trust__box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  align-items: center;
  justify-content: center;
  background: var(--emp-black);
  border-radius: 10px;
  padding: 11px 18px;
}

.emp-plp-trust__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--emp-cream);
}

.emp-plp-trust__item svg {
  flex-shrink: 0;
  color: var(--emp-wine);
}

/* ---- Barra de herramientas ---- */
.emp-plp-toolbar {
  margin-top: 18px;
}

.emp-plp-toolbar__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  padding-bottom: 12px;
}

.emp-plp-toolbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.emp-plp-filter-btn {
  display: none; /* solo en celular: en computador el panel está siempre a la vista */
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: none;
  background: var(--emp-wine);
  color: var(--emp-cream);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.emp-plp-showing {
  font-size: 13px;
  color: rgba(17, 17, 17, 0.62);
  font-variant-numeric: tabular-nums;
}

.emp-plp-sort {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  color: rgba(17, 17, 17, 0.62);
}

.emp-plp-sort select {
  min-height: 40px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #fff;
  font-family: var(--emp-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--emp-black);
  cursor: pointer;
}

/* ---- Cuerpo: panel + resultados ---- */
.emp-plp-body {
  display: flex;
  align-items: flex-start;
  gap: 28px;
  padding-top: 20px;
}

.emp-plp-main {
  flex: 1 1 auto;
  min-width: 0;
}

.emp-plp-backdrop {
  display: none;
}

/* ---- Panel de filtros ---- */
.emp-plp-panel {
  flex: 0 0 240px;
  width: 240px;
  position: sticky;
  /* Debajo de TODO lo que queda pegado arriba: barra rotativa, header, banner de
     la App y barra de envío gratis. Se usa `--emp-stack-h` (initStickyOffsets()
     la mide sumando solo lo que existe) en vez de encadenar variables: el banner
     de la App puede estar apagado y la de envío es fija desde 1.12.5. Antes esto
     solo contaba topbar + header, así que con el banner activo —o con la barra de
     envío visible— el panel se metía DEBAJO de ellos al hacer scroll. */
  top: calc(var(--emp-stack-h) + 16px);
  max-height: calc(100vh - var(--emp-stack-h) - 32px);
  overflow-y: auto;
  padding-right: 4px;
}

.emp-plp-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(17, 17, 17, 0.12);
}

.emp-plp-panel__title {
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
}

.emp-plp-panel__actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emp .emp-plp-clear,
.emp .emp-plp-chips__clear {
  background: none;
  border: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--emp-wine);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-plp-panel__close {
  display: none; /* solo en el cajón de celular */
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, 0.16);
  background: #fff;
  color: var(--emp-black);
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-plp-group {
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  padding: 14px 0;
}

.emp-plp-group__toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: none;
  border: none;
  padding: 0;
  min-height: 32px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.emp-plp-group__title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emp-black);
}

.emp-plp-group__caret {
  font-size: 16px;
  line-height: 1;
  color: rgba(17, 17, 17, 0.45);
}

.emp-plp-group__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 10px;
}

.emp-plp-group__body[hidden] {
  display: none;
}

.emp-plp-group__search {
  width: 100%;
  min-height: 38px;
  margin-bottom: 6px;
  padding: 0 11px;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.18);
  background: #fff;
  font-family: var(--emp-sans);
  font-size: 13px;
}

.emp-plp-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 0 4px;
  border-radius: 7px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--emp-black);
  transition: background 0.15s ease;
}

.emp-plp-opt:hover {
  background: rgba(226, 35, 26, 0.08);
}

.emp-plp-opt input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--emp-wine);
  cursor: pointer;
  flex-shrink: 0;
}

.emp-plp-opt__label {
  flex: 1;
}

.emp-plp-opt--empty .emp-plp-opt__label {
  opacity: 0.38;
}

.emp-plp-opt__count {
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.42);
  font-variant-numeric: tabular-nums;
}

.emp-plp-opt--wide {
  min-height: 44px;
}

.emp-plp-group--price .emp-plp-group__title {
  display: block;
  margin-bottom: 12px;
}

.emp-plp-price {
  width: 100%;
  cursor: pointer;
  accent-color: var(--emp-wine);
}

.emp-plp-price__legend {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

.emp-plp-price__max {
  font-weight: 700;
  color: var(--emp-wine);
}

.emp-plp-group--toggles {
  border-bottom: none;
  padding: 16px 0;
}

.emp-plp-apply {
  width: 100%;
  min-height: 50px;
  border: none;
  border-radius: 10px;
  background: var(--emp-wine);
  color: var(--emp-cream);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 8px;
}

/* ---- Chips de faceta activa ---- */
.emp-plp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.emp .emp-plp-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(226, 35, 26, 0.32);
  background: rgba(226, 35, 26, 0.07);
  color: var(--emp-wine);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease;
}

.emp .emp-plp-chip:hover {
  background: rgba(226, 35, 26, 0.14);
  color: var(--emp-wine);
}

.emp-plp-chip__x {
  font-size: 14px;
  line-height: 1;
  opacity: 0.7;
}

.emp .emp-plp-chips__clear {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  color: rgba(17, 17, 17, 0.55);
}

/* ---- Grilla ----------------------------------------------------------------
   NO usa .emp-grid a propósito: initCarousels() convierte toda .emp-grid en un
   carrusel horizontal, y un catálogo tiene que ser una grilla que crece hacia
   abajo. Las tarjetas son las del tema (emp_product_card), oscuras como en el
   mockup. Si se prefiere el esquema claro de #ofertas para fondo crema, ver
   .emp-plp-grid--light más abajo (filtro emp_plp_light_cards).
   -------------------------------------------------------------------------- */
.emp-plp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

/* Entrada escalonada. Igual que los sellos de #garantias: SIN estado inicial
   oculto en la regla base — el fotograma 0 solo aplica porque la animación
   existe (fill-mode both), así que si la animación no corriera las tarjetas se
   verían normales en vez de quedarse invisibles para siempre. */
/* ⚠️ El segundo selector NO es un duplicado: en Mi cuenta → Favoritos la tarjeta
   va envuelta en `.emp-acc-fav` para poder colgarle el corazón encima, y ese div
   ROMPE todos los selectores de hijo directo de este bloque. Sin él la tarjeta
   se quedaba con el fondo oscuro y el texto oscuro encima: ilegible. Si añades
   aquí una regla nueva con `>`, acuérdate de la envuelta.
   (El escalonado por `nth-child` sí se pierde en favoritos —entran todas a la
   vez—; con cuatro tarjetas no se nota y no vale siete reglas más.) */
.emp-plp-grid > .emp-card,
.emp-plp-grid > .emp-acc-fav > .emp-card {
  animation: emp-plp-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.emp-plp-grid > .emp-card:nth-child(2) { animation-delay: 0.03s; }
.emp-plp-grid > .emp-card:nth-child(3) { animation-delay: 0.06s; }
.emp-plp-grid > .emp-card:nth-child(4) { animation-delay: 0.09s; }
.emp-plp-grid > .emp-card:nth-child(5) { animation-delay: 0.12s; }
.emp-plp-grid > .emp-card:nth-child(6) { animation-delay: 0.15s; }
.emp-plp-grid > .emp-card:nth-child(7) { animation-delay: 0.18s; }
.emp-plp-grid > .emp-card:nth-child(n + 8) { animation-delay: 0.21s; }

@keyframes emp-plp-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .emp-plp-grid > .emp-card,
  .emp-plp-grid > .emp-acc-fav > .emp-card { animation: none; }
}

/* Variante clara de tarjeta para el fondo crema, misma inversión que #ofertas
   (activar con: add_filter('emp_plp_light_cards','__return_true')). */
.emp-plp-grid--light > .emp-card,
.emp-plp-grid--light > .emp-acc-fav > .emp-card {
  background: #ffffff;
  border-color: rgba(17, 17, 17, 0.16);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}

.emp-plp-grid--light > .emp-card:hover,
.emp-plp-grid--light > .emp-acc-fav > .emp-card:hover {
  border-color: rgba(226, 35, 26, 0.4);
  box-shadow: 0 26px 46px rgba(17, 17, 17, 0.18);
}

.emp-plp-grid--light .emp-card__brand,
.emp-plp-grid--light .emp-card__pyramid-toggle,
.emp-plp-grid--light .emp-card__pyramid-tier {
  color: var(--emp-wine);
}

.emp-plp-grid--light .emp-card__savings::before {
  background: #ffffff;
}

.emp-plp-grid--light .emp-card__name,
.emp-plp-grid--light .emp-card__price,
.emp-plp-grid--light .emp-card__notify-done-title {
  color: var(--emp-black);
}

.emp-plp-grid--light .emp-card__meta,
.emp-plp-grid--light .emp-card__occasion-text,
.emp-plp-grid--light .emp-card__price--muted,
.emp-plp-grid--light .emp-card__price-from,
.emp-plp-grid--light .emp-card__status-line,
.emp-plp-grid--light .emp-card__notify-form p,
.emp-plp-grid--light .emp-card__notify-done-text,
.emp-plp-grid--light .emp-card__desc {
  color: rgba(17, 17, 17, 0.55);
}

.emp-plp-grid--light .emp-card__old {
  color: rgba(17, 17, 17, 0.32);
}

.emp-plp-grid--light .emp-card__occasion span {
  background: rgba(17, 17, 17, 0.05);
  border-color: rgba(17, 17, 17, 0.14);
  color: rgba(17, 17, 17, 0.7);
}

.emp-plp-grid--light .emp-card__pyramid-grid {
  background: rgba(17, 17, 17, 0.03);
  border-color: rgba(17, 17, 17, 0.1);
}

.emp-plp-grid--light .emp-card__pyramid-notes {
  color: rgba(17, 17, 17, 0.62);
}

.emp-plp-grid--light .emp-card__cta--ghost,
.emp-plp-grid--light a.emp-card__cta--ghost,
.emp-plp-grid--light a.emp-card__cta--ghost:hover {
  background: rgba(17, 17, 17, 0.05);
  color: var(--emp-black);
  border-color: rgba(17, 17, 17, 0.18);
}

.emp-plp-grid--light .emp-card__notify-form {
  background: rgba(17, 17, 17, 0.03);
  border-color: rgba(17, 17, 17, 0.1);
}

.emp-plp-grid--light .emp-card__notify-form input {
  background: #fff;
  border-color: rgba(17, 17, 17, 0.15);
  color: var(--emp-black);
}

.emp-plp-grid--light .emp-card__notify-cancel {
  color: rgba(17, 17, 17, 0.4);
}

/* ---- Estado vacío ---- */
.emp-plp-empty {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.1);
  border-radius: 14px;
  padding: 44px 28px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.emp-plp-empty > svg {
  color: var(--emp-wine);
}

.emp-plp-empty__title {
  font-family: var(--emp-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0;
}

.emp-plp-empty__text {
  font-size: 14px;
  color: rgba(17, 17, 17, 0.6);
  max-width: 420px;
  margin: 0;
  text-wrap: pretty;
}

.emp-plp-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.emp .emp-plp-empty__all {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: 9px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: #fff;
  color: var(--emp-black);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}

.emp .emp-plp-empty__all:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

.emp-plp-sugg {
  width: 100%;
  margin-top: 26px;
  text-align: left;
}

.emp-plp-sugg__label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.5);
  margin-bottom: 12px;
}

.emp-plp-sugg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}

.emp .emp-plp-sugg__item {
  display: flex;
  gap: 11px;
  align-items: center;
  background: var(--emp-black);
  border-radius: 11px;
  padding: 11px;
  text-decoration: none;
}

.emp-plp-sugg__img {
  width: 52px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  background: linear-gradient(155deg, #201c17, #0b0a08);
  border: 1px solid rgba(226, 35, 26, 0.2);
}

.emp-plp-sugg__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-plp-sugg__text {
  min-width: 0;
}

.emp-plp-sugg__brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-plp-sugg__name {
  font-family: var(--emp-serif);
  font-size: 14px;
  color: var(--emp-cream);
  line-height: 1.2;
}

.emp-plp-sugg__price {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-cream);
  margin-top: 3px;
}

/* ---- Banner del quiz ---- */
.emp-plp-quiz {
  margin-top: 20px;
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--emp-wine) 0%, #8f1310 55%, var(--emp-black) 100%);
  padding: 26px 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

/* El halo del mockup era dorado sobre vino; en crema se lee igual de bien y no
   se pierde dentro del propio rojo del fondo. */
.emp-plp-quiz__glow {
  position: absolute;
  right: -40px;
  top: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 241, 232, 0.26), transparent 70%);
  pointer-events: none;
}

.emp-plp-quiz__text {
  position: relative;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.emp-plp-quiz__kicker {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, 0.75);
}

.emp-plp-quiz__title {
  font-family: var(--emp-serif);
  font-size: clamp(20px, 2.6vw, 27px);
  font-weight: 600;
  color: var(--emp-cream);
  line-height: 1.15;
  margin: 0;
}

.emp-plp-quiz__sub {
  font-size: 13.5px;
  color: rgba(245, 241, 232, 0.75);
  margin: 0;
  text-wrap: pretty;
}

.emp .emp-plp-quiz__cta {
  position: relative;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  padding: 0 26px;
  border-radius: 9px;
  background: var(--emp-cream);
  color: var(--emp-black);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.15s ease;
}

.emp .emp-plp-quiz__cta:hover {
  color: var(--emp-black);
  transform: scale(1.03);
}

/* ---- Cargar más + paginación ---- */
.emp-plp-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
}

.emp .emp-plp-more__btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  padding: 0 34px;
  border-radius: 9px;
  border: 1.5px solid var(--emp-black);
  background: transparent;
  color: var(--emp-black);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.emp .emp-plp-more__btn:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

.emp-plp-more__btn.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

.emp-plp-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 13px;
}

.emp .emp-plp-pager .page-numbers {
  min-width: 38px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.16);
  color: var(--emp-black);
  text-decoration: none;
}

.emp .emp-plp-pager .page-numbers:hover {
  border-color: var(--emp-wine);
  color: var(--emp-wine);
}

.emp .emp-plp-pager .page-numbers.current {
  background: var(--emp-black);
  border-color: var(--emp-black);
  color: var(--emp-cream);
  font-weight: 700;
}

.emp .emp-plp-pager .page-numbers.dots {
  border-color: transparent;
}

/* En computador con JS el formulario se envía solo al marcar una casilla, así
   que el botón "Ver N perfumes" sobra. Sin JS (sin la clase .emp-plp--js) se
   queda: es la única forma de aplicar los filtros. */
@media (min-width: 960px) {
  .emp-plp--js .emp-plp-apply {
    display: none;
  }
}

/* ---- Celular / tablet -----------------------------------------------------
   El cajón lateral SOLO existe con JS: sin él, un panel fuera de pantalla sin
   botón que lo abra dejaría los filtros inalcanzables. Por eso el estado base
   en celular es el panel dentro del flujo (encima de la grilla) y es el JS
   —al poner .emp-plp--js— el que lo convierte en cajón y muestra el botón
   "Filtrar". Mismo criterio que el hub SEO del footer: nada queda oculto sin
   forma de abrirlo.
   -------------------------------------------------------------------------- */
@media (max-width: 959px) {
  .emp-plp-body {
    display: block;
  }

  .emp-plp-panel {
    position: static;
    width: auto;
    max-height: none;
    padding: 0 0 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(17, 17, 17, 0.12);
  }

  .emp-plp--js .emp-plp-filter-btn {
    display: inline-flex;
  }

  .emp-plp--js .emp-plp-panel__close {
    display: inline-flex;
  }

  .emp-plp--js .emp-plp-panel {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(340px, 88vw);
    z-index: 120;
    background: var(--emp-cream);
    padding: 18px 18px 20px;
    margin-bottom: 0;
    border-bottom: none;
    overflow-y: auto;
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.3);
    transform: translateX(-100%);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .emp-plp--js .emp-plp-panel.is-open {
    transform: none;
  }

  .emp-plp--js .emp-plp-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.55);
    z-index: 119;
  }

  .emp-plp--js .emp-plp-backdrop[hidden] {
    display: none;
  }

  .emp-plp--js .emp-plp-apply {
    position: sticky;
    bottom: 0;
  }

  .emp-plp-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
  }

  .emp-plp-hero__box {
    padding: 34px 20px 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-plp-panel {
    transition: none;
  }
}

/* Estado "aplicando filtro": mientras el servidor devuelve la columna nueva, la
   actual se atenúa y deja de aceptar clics. Sin spinner a propósito — la
   respuesta llega en unos cientos de ms y un spinner que aparece y desaparece
   molesta más de lo que informa. */
.emp-plp-main {
  transition: opacity 0.15s ease;
}

.emp-plp.is-loading {
  cursor: progress;
}

.emp-plp.is-loading .emp-plp-main {
  opacity: 0.45;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .emp-plp-main { transition: none; }
}

/* El CTA de la franja 1 es un enlace, no un botón: necesita la forma del botón
   y forzar su color, porque la regla global `.emp a` le gana en especificidad. */
.emp a.emp-ft-news__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: var(--emp-black);
  text-decoration: none;
  /* Más grande que el botón original del formulario: aquí es el único elemento
     accionable de la franja, no la mitad derecha de un campo de correo. */
  height: 58px;
  padding: 0 36px;
  font-size: 15px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
  /* Anillo que late hacia fuera. En crema y no en rojo: sobre el fondo rojo de
     la franja, un halo rojo no se vería. Mismo recurso que el punto de la barra
     superior. */
  animation: emp-ftnews-pulse 2.2s ease-in-out infinite;
}

.emp a.emp-ft-news__cta:hover {
  color: var(--emp-black);
  transform: translateY(-2px);
}

@keyframes emp-ftnews-pulse {
  0%, 100% {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 0 0 rgba(245, 241, 232, 0.6);
  }
  50% {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3), 0 0 0 12px rgba(245, 241, 232, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp a.emp-ft-news__cta { animation: none; }
}

/* ---- Celular: cupón del footer y banner del quiz, centrados --------------
   Los dos son "texto a la izquierda / acción a la derecha" en computador. Al
   apilarse en una columna estrecha, esa alineación deja el botón descolgado
   bajo un texto que ya ocupa todo el ancho; centrados se leen como una pieza.
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .emp-ft-news__inner {
    justify-content: center;
    text-align: center;
    gap: 20px;
  }

  /* flex-basis y no width: las dos columnas llevan `flex: 1` (= base 0%),
     que ignora el width y las mantenía lado a lado en vez de apilarlas. */
  .emp-ft-news__copy,
  .emp-ft-news__formwrap {
    flex: 1 1 100%;
    min-width: 0;
    max-width: none;
  }

  .emp-plp-quiz {
    justify-content: center;
    text-align: center;
  }

  .emp-plp-quiz__text {
    align-items: center;
    max-width: none;
  }
}

/* ---- Ajustes de tarjeta (precios, ahorro, badges y calificación) ---------
   Van al final del archivo a propósito: son retoques sobre el bloque de la
   tarjeta que hay más arriba y ganan por orden, sin tener que subir la
   especificidad con selectores más largos.
   -------------------------------------------------------------------------- */

/* Precios un punto más grandes: son el dato que decide la compra. */
.emp-card__old {
  font-size: 13.5px;
}

.emp-card__price {
  font-size: 23px;
}

/* El ticket de "Ahorras…" respiraba poco para lo que pesa el mensaje. */
.emp-card__savings {
  font-size: 11.5px;
  padding: 6px 11px 6px 16px;
}

/* Badges sobre la foto: SIN sombra ni cambio de tamaño — se probaron y el
   usuario los descartó por recargados. Solo cambian de color.
   "-40%" pasa de negro sobre la foto a crema con texto negro: contrasta por
   color, no por peso, y no se confunde con el rojo de "Más vendido".
   "100% Original" deja el rojo translúcido (que se perdía sobre fotos con
   detalle) por un contorno en crema. */
.emp-badge--discount {
  background: var(--emp-cream);
  color: var(--emp-black);
  /* El descuento se destaca con MOVIMIENTO, no con tamaño ni sombra: las dos
     se probaron y el usuario las descartó. Late despacio, lo justo para que el
     ojo lo pille al recorrer la grilla. El transform no toca el layout, así que
     no empuja a los badges vecinos. */
  animation: emp-badge-discount-pulse 1.8s ease-in-out infinite;
}

@keyframes emp-badge-discount-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-badge--discount {
    animation: none;
  }
}

.emp-card__original {
  background: rgba(17, 17, 17, 0.55);
  border-color: rgba(245, 241, 232, 0.55);
  color: var(--emp-cream);
}

/* ---- Calificación (entre las etiquetas de aroma y la descripción) ---- */
.emp-card__rating {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Alto reservado aunque el producto no tenga valoraciones: si no, el CTA
     quedaría a distinta altura entre tarjetas de la misma fila. */
  min-height: 17px;
  margin: 0 0 8px;
}

.emp-card__stars {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}

.emp-card__star {
  color: rgba(245, 241, 232, 0.22);
}

.emp-card__star.is-on {
  color: var(--emp-wine);
}

.emp-card__rating-num {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(245, 241, 232, 0.75);
  font-variant-numeric: tabular-nums;
}

.emp-card__rating-count {
  font-weight: 500;
  color: rgba(245, 241, 232, 0.45);
}

/* Variante clara de tarjeta (#ofertas del Home y grilla del catálogo): el gris
   de "estrella apagada" no puede ser el mismo sobre blanco que sobre negro. */
#ofertas .emp-card__star,
.emp-plp-grid--light .emp-card__star {
  color: rgba(17, 17, 17, 0.18);
}

#ofertas .emp-card__star.is-on,
.emp-plp-grid--light .emp-card__star.is-on {
  color: var(--emp-wine);
}

#ofertas .emp-card__rating-num,
.emp-plp-grid--light .emp-card__rating-num {
  color: rgba(17, 17, 17, 0.7);
}

#ofertas .emp-card__rating-count,
.emp-plp-grid--light .emp-card__rating-count {
  color: rgba(17, 17, 17, 0.45);
}


/* Pausa de animaciones fuera de pantalla (ver initAnimBudget en emp.js). Se
   incluyen los pseudoelementos porque algunas animaciones viven en ellos (el
   brillo que cruza .emp-btn--primary es un ::after). */
.emp-anim-off,
.emp-anim-off::before,
.emp-anim-off::after {
  animation-play-state: paused !important;
}

/* Mientras se hace scroll se congelan los pulsos, incluidos los que están
   SIEMPRE en pantalla y que la pausa por visibilidad no puede atrapar (ver
   initScrollIdle en emp.js). Nadie mira un brillo mientras arrastra la página,
   y son repintados que no se pueden componer.
   Los marquees quedan fuera a propósito: van con transform, son baratos, y
   pararlos sí se notaría. */
.emp-scrolling .emp-topbar__spark,
.emp-scrolling .emp-app-banner__btn,
.emp-scrolling .emp-btn--primary,
.emp-scrolling .emp-btn--primary::after,
.emp-scrolling .emp-card__cta--wine,
.emp-scrolling .emp-card__cta--gold,
.emp-scrolling .emp-card__savings,
.emp-scrolling .emp-badge--discount,
.emp-scrolling .emp-badge__dot,
.emp-scrolling .emp-countdown,
.emp-scrolling .emp-review-cta,
.emp-scrolling .emp-review-cta svg,
.emp-scrolling .emp-stars svg,
.emp-scrolling .emp-ft-news__cta,
.emp-scrolling .emp-snake-dot,
.emp-scrolling .emp-snake-halo,
.emp-scrolling .emp-pdp-dot,
.emp-scrolling .emp-pdp-reviews__hint svg {
  animation-play-state: paused !important;
}

/* Y el filtro de la cabeza fuera mientras se arrastra: un drop-shadow SVG se
   recalcula en CADA frame porque el punto cambia de sitio, y en Safari es de lo
   más caro que hay. Parado el scroll vuelve, así que el brillo se conserva
   donde se mira. */
.emp-scrolling .emp-snake-dot {
  filter: none !important;
}

/* =========================================================================
   FICHA DE PRODUCTO (PDP) — single-product.php
   Portado de "EMP Pagina Producto" (Claude Design).

   Mapeo de color respecto al mockup, según la regla del tema: el DORADO
   (#C9A24B) y el VINO (#8E1B2E) del diseño son los dos el mismo acento aquí,
   --emp-wine. Sobre fondo oscuro se usa --emp-wine-soft para texto y bordes
   (el rojo pleno sobre negro se apaga), y donde el mockup contrastaba dorado
   CONTRA vino —los números y el icono de la franja de garantía— el sustituto
   es CREMA, porque rojo sobre rojo no se lee.
   ========================================================================= */

.emp-pdp {
  background: var(--emp-cream);
}

/* ---- Migas de pan -------------------------------------------------------- */
.emp-pdp-crumbs {
  padding: 14px 20px 0;
  font-size: 12px;
  color: rgba(17, 17, 17, 0.55);
}

.emp-pdp-crumbs .emp-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

/* .emp a { color: var(--emp-wine) } gana por especificidad a una sola clase:
   las migas necesitan el prefijo para quedarse en gris. */
.emp .emp-pdp-crumbs a {
  color: rgba(17, 17, 17, 0.55);
  text-decoration: none;
}

.emp .emp-pdp-crumbs a:hover {
  color: var(--emp-wine);
}

.emp-pdp-crumbs__sep {
  opacity: 0.4;
}

.emp-pdp-crumbs__here {
  color: var(--emp-black);
  font-weight: 600;
}

/* ---- Galería + caja de compra ------------------------------------------- */
.emp-pdp-top {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
  padding: 18px 20px 0;
}

.emp-pdp-gallery {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}

.emp-pdp-stage {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(circle at 32% 18%, rgba(226, 35, 26, 0.16), transparent 58%),
    linear-gradient(155deg, #201c17 0%, #111111 55%, #0b0a08 100%);
  border: 1px solid rgba(226, 35, 26, 0.22);
}

/* El cursor de lupa solo cuando el JS confirma que hay una imagen más grande
   detrás: prometer zoom y no ampliar nada es peor que no ofrecerlo. */
.emp-pdp-stage--zoomable {
  cursor: zoom-in;
}

.emp-pdp-stage__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.28s ease;
  transform-origin: 50% 50%;
}

.emp-pdp-stage.is-zoom .emp-pdp-stage__img {
  transform: scale(1.9);
}

.emp-pdp-stage .emp-imgslot {
  width: 100%;
  height: 100%;
}

.emp-pdp-stage__badges {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 7px;
  align-items: flex-start;
}

.emp-pdp-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.emp-pdp-badge--off {
  background: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-pdp-badge--low {
  background: rgba(17, 17, 17, 0.82);
  border: 1px solid rgba(226, 35, 26, 0.45);
  color: var(--emp-cream);
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
}

.emp-pdp-badge--orig {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  background: rgba(226, 35, 26, 0.14);
  border: 1px solid rgba(226, 35, 26, 0.5);
  color: var(--emp-wine-soft);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
}

.emp-pdp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
  animation: emp-pdp-pulse 1.8s ease-in-out infinite;
}

@keyframes emp-pdp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.8); }
}

/* ---- Miniaturas ---------------------------------------------------------- */
/* Cuatro columnas FIJAS, no `auto-fit`. Con auto-fit las miniaturas se repartían
   todo el ancho entre las que hubiera: con dos fotos cada una ocupaba media
   galería y competía con la principal. Con cuatro columnas siempre tienen el
   mismo tamaño —el de "caben cuatro"— haya 2, 3 o 4, y a partir de la quinta
   pasan a una segunda fila. */
.emp-pdp-thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.emp-pdp-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  background: linear-gradient(155deg, #201c17, #0b0a08);
  border: 1.5px solid rgba(226, 35, 26, 0.2);
  transition: border-color 0.2s ease;
}

.emp-pdp-thumb.is-active,
.emp-pdp-thumb:hover {
  border-color: var(--emp-wine);
}

.emp-pdp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Caja de compra ------------------------------------------------------ */
.emp-pdp-buy {
  display: flex;
  flex-direction: column;
}

.emp-pdp-brand {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

.emp-pdp-title {
  font-family: var(--emp-serif);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  margin: 6px 0 0;
  color: var(--emp-black);
}

.emp-pdp-meta {
  font-size: 13.5px;
  color: rgba(17, 17, 17, 0.6);
  margin-top: 7px;
}

.emp .emp-pdp-rating {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 12px;
  color: var(--emp-black);
  text-decoration: none;
}

.emp-pdp-stars {
  display: inline-flex;
  gap: 1px;
  line-height: 0;
}

/* emp_card_stars() nació para la tarjeta OSCURA: su estrella apagada es crema
   al 22% y sobre este fondo claro desaparece. Aquí se redefinen las dos. */
.emp-pdp-stars .emp-card__star {
  color: rgba(17, 17, 17, 0.18);
}

.emp-pdp-stars .emp-card__star.is-on {
  color: var(--emp-wine);
}

.emp-pdp-rating__num {
  font-size: 13px;
  font-weight: 700;
}

.emp-pdp-rating__count {
  font-size: 13px;
  color: rgba(17, 17, 17, 0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Sin ninguna valoración: las cinco estrellas van apagadas y la invitación a
   opinar queda algo más tenue, para que no compita con el precio que va justo
   debajo. El enlace sigue siendo el mismo, baja al formulario de reseñas. */
.emp-pdp-rating--empty .emp-pdp-rating__count {
  color: rgba(17, 17, 17, 0.45);
}

.emp .emp-pdp-rating--empty:hover .emp-pdp-rating__count {
  color: var(--emp-wine);
}

/* ---- Precio -------------------------------------------------------------- */
.emp-pdp-price-box {
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.08);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emp-pdp-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.emp-pdp-price {
  font-size: clamp(30px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.emp-pdp-price-old {
  font-size: 17px;
  color: rgba(17, 17, 17, 0.42);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.emp-pdp-price-off {
  background: var(--emp-wine);
  color: var(--emp-cream);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
}

.emp-pdp-save {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--emp-wine);
}

.emp-pdp-points {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: rgba(17, 17, 17, 0.62);
  padding-top: 8px;
  border-top: 1px solid rgba(17, 17, 17, 0.08);
}

/* ---- Presentaciones ------------------------------------------------------ */
.emp-pdp-variants {
  margin: 20px 0 0;
  padding: 0;
  border: none;
}

.emp-pdp-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 10px;
  padding: 0;
}

.emp-pdp-variants__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 9px;
}

.emp-pdp-variant {
  text-align: left;
  min-height: 64px;
  padding: 10px 13px;
  border-radius: 11px;
  cursor: pointer;
  background: #fff;
  border: 1.5px solid rgba(17, 17, 17, 0.14);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.2s ease, background 0.2s ease;
  font-family: inherit;
}

.emp-pdp-variant.is-active {
  background: rgba(226, 35, 26, 0.08);
  border-color: var(--emp-wine);
}

.emp-pdp-variant__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--emp-black);
}

.emp-pdp-variant__price {
  font-size: 12.5px;
  color: rgba(17, 17, 17, 0.6);
  font-variant-numeric: tabular-nums;
}

.emp-pdp-variant__stock {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--emp-green);
}

.emp-pdp-variant.is-out .emp-pdp-variant__stock {
  color: rgba(17, 17, 17, 0.4);
}

/* Una presentación agotada NO se deshabilita: se puede elegir para ver su
   precio y dejar el correo de aviso. Solo se atenúa. */
.emp-pdp-variant.is-out {
  opacity: 0.72;
}

/* ---- Escasez ------------------------------------------------------------- */
.emp-pdp-scarcity {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(226, 35, 26, 0.07);
  border: 1px solid rgba(226, 35, 26, 0.24);
  border-radius: 10px;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--emp-wine);
}

/* ---- Botones ------------------------------------------------------------- */
.emp-pdp-cta {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-pdp-btn {
  width: 100%;
  min-height: 56px;
  border-radius: 11px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.emp-pdp-btn--primary {
  border: none;
  background: var(--emp-wine);
  color: var(--emp-cream);
  box-shadow: 0 6px 20px rgba(226, 35, 26, 0.28);
}

.emp-pdp-btn--primary:hover {
  filter: brightness(1.09);
  transform: translateY(-1px);
}

.emp-pdp-btn--ghost {
  min-height: 52px;
  border: 1.5px solid var(--emp-black);
  background: transparent;
  color: var(--emp-black);
  font-size: 15px;
  font-weight: 700;
}

.emp-pdp-btn--ghost:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

/* ---- Agotado ------------------------------------------------------------- */
.emp-pdp-out {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.emp-pdp-out__msg {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.6);
}

.emp-pdp-notify {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.emp-pdp-notify input[type="email"] {
  flex: 1 1 180px;
  min-height: 52px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
}

.emp-pdp-notify button {
  min-height: 52px;
  padding: 0 22px;
  border: none;
  border-radius: 11px;
  background: var(--emp-black);
  color: var(--emp-cream);
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

.emp-pdp-notify__ok {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--emp-green);
}

/* ---- Entrega y sellos ---------------------------------------------------- */
.emp-pdp-delivery {
  margin-top: 16px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: var(--emp-black);
  border-radius: 11px;
  padding: 14px 15px;
  color: var(--emp-wine-soft);
}

.emp-pdp-delivery svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.emp-pdp-delivery > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-pdp-delivery__title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--emp-cream);
}

.emp-pdp-delivery__sub {
  font-size: 12px;
  color: rgba(245, 241, 232, 0.65);
}

.emp-pdp-seals {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.emp-pdp-seal {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  border: 1px solid rgba(226, 35, 26, 0.3);
  border-radius: 9px;
  padding: 10px 11px;
  color: var(--emp-black);
}

.emp-pdp-seal svg {
  flex-shrink: 0;
  color: var(--emp-wine);
}

/* ---- Franja de medios de pago -------------------------------------------- */
.emp-pdp-payrail {
  margin-top: 26px;
  padding: 14px 20px;
  border-top: 1px solid rgba(17, 17, 17, 0.1);
  border-bottom: 1px solid rgba(17, 17, 17, 0.1);
  display: flex;
  align-items: center;
  gap: 14px;
}

.emp-pdp-payrail__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.45);
  flex-shrink: 0;
}

/* El marquee es full-bleed por defecto (width:100vw + margin negativo) para
   tocar los dos bordes en #garantias; dentro de esta franja tiene que quedarse
   en su columna. */
.emp-pdp-payrail .emp-payments {
  width: auto;
  margin-left: 0;
  margin-top: 0;
  padding: 0;
  flex: 1;
  min-width: 0;
}

/* ---- Descripción sensorial ----------------------------------------------- */
.emp-pdp-desc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 36px;
  align-items: start;
}

/* Sin segunda foto no hay columna derecha, pero el tope de ancho va en el TEXTO,
   nunca en el .emp-container: ahí el `margin: 0 auto` del contenedor centraba el
   bloque de 760px y la sección arrancaba ~180px más adentro que todas las demás
   de la ficha (medido: x=572 contra x=390 del resto). Limitando el texto, el
   contenedor sigue alineado con el resto y la línea de lectura no se estira. */
.emp-pdp-desc__grid--solo {
  grid-template-columns: minmax(0, 1fr);
}

.emp-pdp-desc__grid--solo .emp-pdp-desc__text {
  max-width: 760px;
}

.emp-pdp-desc__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-pdp-desc__body p {
  font-size: 15.5px;
  line-height: 1.72;
  color: rgba(17, 17, 17, 0.72);
  text-wrap: pretty;
  margin: 0 0 14px;
}

.emp-pdp-desc__body > :last-child {
  margin-bottom: 0;
}

.emp-pdp-desc__pitch {
  padding: 16px 18px;
  background: #fff;
  border-left: 3px solid var(--emp-wine);
  border-radius: 0 10px 10px 0;
}

/* Desde que el contenido de la caja sale de la descripción larga, puede traer
   más de un párrafo (todo lo que vaya después del <!--more-->), así que se
   separan entre sí y solo el último va sin margen abajo. */
.emp-pdp-desc__pitch p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--emp-black);
  text-wrap: pretty;
}

.emp-pdp-desc__pitch > :last-child {
  margin-bottom: 0;
}

/* Mismo marco que el visor de la galería (`.emp-pdp-stage`): cuadrado y con la
   foto entera dentro. Antes era 4/5 con `object-fit: cover`, o sea recortada —y
   en un frasco de perfume el recorte se come el tapón o la base—. Aquí la foto
   se ve igual que arriba, solo que más pequeña. */
.emp-pdp-desc__media {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background: linear-gradient(155deg, #1c1813, #0b0a08);
  border: 1px solid rgba(226, 35, 26, 0.18);
}

/* Las fotos van APILADAS en absoluto, no una debajo de otra: el alto lo fija el
   aspect-ratio del contenedor, así que la rotación es un fundido de opacidad y
   no mueve nada del layout. La primera lleva .is-active desde el servidor, para
   que se vea aunque el JS no llegue a correr. */
.emp-pdp-desc__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.emp-pdp-desc__shot.is-active {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .emp-pdp-desc__shot {
    transition: none;
  }
}

/* ---- Pirámide olfativa --------------------------------------------------- */
.emp-pdp-pyramid {
  border-radius: 18px;
  background:
    radial-gradient(120% 120% at 12% 0%, rgba(226, 35, 26, 0.14), transparent 58%),
    linear-gradient(160deg, #1c1813 0%, #111111 62%, #0b0a08 100%);
  border: 1px solid rgba(226, 35, 26, 0.22);
  padding: clamp(26px, 4vw, 44px);
}

.emp-pdp-pyramid__head {
  margin-bottom: 30px;
}

/* Sobre negro el rojo pleno del eyebrow se apaga; el tinte claro es el que el
   tema reserva para texto de acento sobre fondo oscuro. */
.emp-pdp-pyramid__head .emp-eyebrow-sm {
  color: var(--emp-wine-soft);
}

.emp-pdp-pyramid__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
}

.emp-pdp-tier {
  background: rgba(245, 241, 232, 0.045);
  border: 1px solid rgba(226, 35, 26, 0.2);
  border-radius: 14px;
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.emp-pdp-tier__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.emp-pdp-tier__name {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-pdp-tier__timing {
  font-size: 11px;
  font-weight: 600;
  color: rgba(245, 241, 232, 0.5);
}

.emp-pdp-tier__notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emp-pdp-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(226, 35, 26, 0.1);
  border: 1px solid rgba(226, 35, 26, 0.28);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emp-cream);
}

.emp-pdp-note__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--emp-wine);
  flex-shrink: 0;
}

.emp-pdp-tier__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: rgba(245, 241, 232, 0.6);
  text-wrap: pretty;
}

/* ---- Carácter ------------------------------------------------------------ */
.emp-pdp-character {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 32px;
  align-items: start;
}

.emp-h2--sm {
  font-size: 24px;
}

.emp-pdp-meters {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.emp-pdp-meter {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.emp-pdp-meter__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.emp-pdp-meter__label {
  font-size: 13.5px;
  font-weight: 700;
}

.emp-pdp-meter__value {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--emp-wine);
}

.emp-pdp-meter__track,
.emp-pdp-dist__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.09);
  overflow: hidden;
  display: block;
}

.emp-pdp-meter__fill,
.emp-pdp-dist__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--emp-wine-dark), var(--emp-wine));
}

.emp-pdp-tags {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.emp-pdp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.emp-pdp-chip {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.14);
  color: rgba(17, 17, 17, 0.7);
}

/* Se imprimen TODAS las opciones del grupo y solo las del perfume llevan .is-on:
   rojo de marca suave —relleno al 9%, borde al 45%— para que se distingan sin
   convertirse en cuatro botones gritando. Las apagadas se quedan con el gris de
   .emp-pdp-chip, que ya contrasta lo justo para leerse sin competir. */
.emp-pdp-chip.is-on {
  background: rgba(226, 35, 26, 0.09);
  border-color: rgba(226, 35, 26, 0.45);
  color: var(--emp-wine);
}

/* Sin uso desde que las pastillas pasaron a "todas + las suyas encendidas": era
   la pastilla negra de "Ocasión ideal". Se conserva por si vuelve a hacer falta
   una pastilla sólida. */
.emp-pdp-chip--solid {
  background: var(--emp-black);
  border-color: var(--emp-black);
  color: var(--emp-cream);
}

.emp-pdp-howto {
  background: var(--emp-black);
  border-radius: 12px;
  padding: 16px 18px;
}

.emp-pdp-howto .emp-pdp-label {
  color: var(--emp-wine-soft);
  letter-spacing: 0.14em;
  margin-bottom: 6px;
}

.emp-pdp-howto p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(245, 241, 232, 0.78);
  text-wrap: pretty;
}

/* ---- Prueba social ------------------------------------------------------- */
.emp-pdp-soldbar {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(226, 35, 26, 0.1);
  border: 1px solid rgba(226, 35, 26, 0.35);
  border-radius: 11px;
  padding: 12px 16px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--emp-black);
}

/* La barra vive en su propia sección, entre "Carácter" y las reseñas, que son
   las dos crema y con 60px de padding. Sin recortarlo aquí, un renglón quedaría
   flotando en 120px de aire. Se deja solo el hueco de abajo para separarla de
   las reseñas y que no se lea como parte de ellas. */
.emp-pdp-soldsec {
  padding-top: 0;
  padding-bottom: 8px;
}

.emp-pdp-soldbar svg {
  flex-shrink: 0;
  color: var(--emp-wine);
}

.emp-pdp-social {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: 32px;
  align-items: start;
}

.emp-pdp-score {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 14px;
  padding: 22px;
  position: sticky;
  top: 16px;
}

.emp-pdp-score__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.emp-pdp-score__num {
  font-size: 46px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}

.emp-pdp-score__count {
  display: block;
  font-size: 12.5px;
  color: rgba(17, 17, 17, 0.55);
  margin-top: 3px;
}

.emp-pdp-dist {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.emp-pdp-dist__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emp-pdp-dist__star {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
  width: 26px;
  flex-shrink: 0;
}

.emp-pdp-dist__track {
  flex: 1;
  height: 7px;
}

.emp-pdp-dist__n {
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.5);
  width: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.emp-pdp-reviews {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-pdp-review {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.09);
  border-radius: 14px;
  padding: 18px 19px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-pdp-review__head {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
}

.emp-pdp-review__avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--emp-black);
  color: var(--emp-wine-soft);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.emp-pdp-review__who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.emp-pdp-review__name {
  font-size: 13.5px;
  font-weight: 700;
}

.emp-pdp-review__date {
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.52);
}

.emp-pdp-review__verified {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--emp-green);
  background: rgba(46, 125, 79, 0.09);
  border-radius: 999px;
  padding: 4px 9px;
  white-space: nowrap;
}

.emp-pdp-review__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.66;
  color: rgba(17, 17, 17, 0.72);
  text-wrap: pretty;
}

.emp-pdp-more {
  align-self: flex-start;
  min-height: 46px;
  padding: 0 22px;
  border-radius: 10px;
  border: 1.5px solid var(--emp-black);
  background: transparent;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.emp-pdp-more:hover {
  background: var(--emp-black);
  color: var(--emp-cream);
}

.emp-pdp-noreviews p {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.66;
  color: rgba(17, 17, 17, 0.65);
  max-width: 60ch;
}

/* ---- Garantía ------------------------------------------------------------ */
.emp-pdp-warranty {
  border-radius: 16px;
  background: linear-gradient(120deg, var(--emp-wine) 0%, var(--emp-wine-dark) 55%, var(--emp-black) 100%);
  padding: clamp(26px, 3.6vw, 38px);
  position: relative;
  overflow: hidden;
}

/* En el mockup este halo era dorado sobre vino. Rojo sobre rojo no se ve, así
   que el brillo va en CREMA — misma sustitución que en el CTA del banner del
   quiz del catálogo. */
.emp-pdp-warranty__glow {
  position: absolute;
  right: -50px;
  top: -50px;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 241, 232, 0.22), transparent 70%);
  pointer-events: none;
}

.emp-pdp-warranty__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 28px;
  align-items: start;
}

.emp-pdp-warranty svg {
  color: var(--emp-cream);
  margin-bottom: 11px;
}

.emp-pdp-warranty .emp-h2--light {
  line-height: 1.14;
}

.emp-pdp-warranty__lead {
  margin: 11px 0 0;
  font-size: 14.5px;
  line-height: 1.66;
  color: rgba(245, 241, 232, 0.78);
  text-wrap: pretty;
}

.emp-pdp-warranty__steps {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.emp-pdp-step {
  display: flex;
  gap: 11px;
  align-items: flex-start;
}

.emp-pdp-step__n {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.18);
  border: 1px solid rgba(245, 241, 232, 0.5);
  color: var(--emp-cream);
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.emp-pdp-step__title {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--emp-cream);
}

.emp-pdp-step__body {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(245, 241, 232, 0.7);
  text-wrap: pretty;
}

/* ---- Encabezado apilado (relacionados) ----------------------------------- */
.emp-pdp-head {
  margin-bottom: 20px;
}

/* ---- Vistos recientemente ------------------------------------------------ */
.emp-pdp-recent {
  border-top: 1px solid rgba(17, 17, 17, 0.11);
  padding-top: 26px;
}

.emp-pdp-recent__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.emp .emp-pdp-recent__item {
  display: flex;
  gap: 12px;
  align-items: center;
  background: var(--emp-black);
  border-radius: 12px;
  padding: 11px;
  color: var(--emp-cream);
  text-decoration: none;
}

.emp-pdp-recent__img {
  width: 52px;
  height: 64px;
  flex-shrink: 0;
  border-radius: 7px;
  overflow: hidden;
  background: linear-gradient(155deg, #201c17, #0b0a08);
  border: 1px solid rgba(226, 35, 26, 0.18);
}

.emp-pdp-recent__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-pdp-recent__text {
  min-width: 0;
}

.emp-pdp-recent__brand {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-pdp-recent__name {
  display: block;
  font-family: var(--emp-serif);
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--emp-cream);
}

.emp-pdp-recent__price {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}

/* ---- Barra fija de compra (celular) -------------------------------------- */
.emp-pdp-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 55;
  background: var(--emp-cream);
  border-top: 1px solid rgba(17, 17, 17, 0.14);
  box-shadow: 0 -8px 26px rgba(0, 0, 0, 0.13);
  padding: 10px 14px 12px;
  display: none;
  align-items: center;
  gap: 12px;
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.emp-pdp-sticky.is-visible {
  transform: translateY(0);
}

.emp-pdp-sticky__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.emp-pdp-sticky__meta {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-pdp-sticky__price {
  font-size: 19px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp-pdp-sticky .emp-pdp-btn {
  flex: 1;
  min-height: 52px;
  font-size: 15px;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 899px) {
  .emp-pdp-top {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  .emp-pdp-gallery {
    position: static;
  }

  .emp-pdp-social {
    grid-template-columns: minmax(0, 1fr);
  }

  .emp-pdp-score {
    position: static;
  }

  .emp-pdp-desc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }

  /* La barra fija solo existe en celular: en computador el botón de la caja de
     compra está a la vista casi todo el recorrido. Deja hueco al final de la
     página para que no tape el último bloque. */
  .emp-pdp-sticky {
    display: flex;
  }

  .emp-pdp {
    padding-bottom: 86px;
  }

  .emp-pdp-payrail {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .emp-pdp-payrail .emp-payments {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .emp-pdp-dot {
    animation: none;
  }

  .emp-pdp-stage__img,
  .emp-pdp-sticky {
    transition: none;
  }
}

/* ---- Formulario de reseña (comment_form de WordPress) --------------------
   El markup lo genera WordPress, así que aquí se estiliza por etiqueta y por
   las clases que él imprime (.comment-form-*), no por clases propias. */
/* Vive dentro del pop-up (.emp-pdp-reviewpop), así que ya no lleva ni margen
   superior ni tope de ancho propios: los pone la caja del pop-up. */
.emp-pdp-reviewform {
  background: #fff;
  border-radius: 14px;
  padding: 0;
}

.emp-pdp-reviewform .comment-reply-title {
  font-family: var(--emp-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 16px;
  color: var(--emp-black);
}

.emp-pdp-reviewform p {
  margin: 0 0 14px;
}

.emp-pdp-reviewform label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.55);
  margin-bottom: 7px;
}

.emp-pdp-reviewform input[type="text"],
.emp-pdp-reviewform input[type="email"],
.emp-pdp-reviewform select,
.emp-pdp-reviewform textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid rgba(17, 17, 17, 0.2);
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--emp-black);
}

.emp-pdp-reviewform textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

.emp-pdp-reviewform input:focus,
.emp-pdp-reviewform select:focus,
.emp-pdp-reviewform textarea:focus {
  outline: none;
  border-color: var(--emp-wine);
}

.emp-pdp-reviewform__fine {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: rgba(17, 17, 17, 0.5);
}

/* El botón de envío es un <input type=submit>: no hereda el min-height de
   .emp-pdp-btn en todos los navegadores, así que se le fija el alto aquí. */
.emp-pdp-reviewform .emp-pdp-reviewform__submit {
  width: auto;
  min-width: 200px;
  height: 52px;
  min-height: 52px;
  padding: 0 26px;
}

.emp-pdp-reviewform .comment-form-cookies-consent {
  display: flex;
  align-items: center;
  gap: 8px;
}

.emp-pdp-reviewform .comment-form-cookies-consent label {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12.5px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.6);
}

.emp-pdp-reviewform .comment-form-cookies-consent input {
  width: auto;
}

@media (max-width: 599px) {
  .emp-pdp-reviewform .emp-pdp-reviewform__submit {
    width: 100%;
  }
}

/* ==========================================================================
   Ficha — reseñas: indicadores, lista con scroll propio y campos del formulario
   ========================================================================== */

/* ---- Indicadores del cuadro de resumen ("126 de 128 confirman…") ---------
   Salen de lo que responde cada cliente al reseñar, no de un número fijo, así
   que un indicador sin respuestas no se imprime y la caja se queda sin él. */
.emp-pdp-tallies {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(17, 17, 17, 0.09);
}

.emp-pdp-tally {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-pdp-tally__value {
  font-size: 17px;
  font-weight: 800;
  color: var(--emp-wine);
  line-height: 1.15;
}

.emp-pdp-tally__label {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.6);
}

/* ---- Lista de reseñas con scroll propio ---------------------------------
   Al pulsar "Ver las demás", initPdp() fija como max-height el alto que ya
   ocupaban las tres primeras y añade .is-scroll. El resultado es que la página
   mide lo mismo con 3 reseñas que con 60: se recorren dentro de la caja.
   El max-height lo escribe el JS (depende de lo que midan las tres primeras),
   aquí solo va el comportamiento. */
.emp-pdp-reviews__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-pdp-reviews__list.is-scroll {
  overflow-y: auto;
  /* Hueco para la barra: sin él, la barra se monta encima del borde derecho de
     las tarjetas de reseña. */
  padding-right: 12px;
  scrollbar-width: auto;
  scrollbar-color: var(--emp-wine) rgba(17, 17, 17, 0.09);
}

/* La barra va con carril VISIBLE, no transparente: media señal de que hay más
   contenido es que se vea el recorrido, no solo el pulgar. */
.emp-pdp-reviews__list.is-scroll::-webkit-scrollbar {
  width: 9px;
}

.emp-pdp-reviews__list.is-scroll::-webkit-scrollbar-thumb {
  background: var(--emp-wine);
  border-radius: 999px;
}

.emp-pdp-reviews__list.is-scroll::-webkit-scrollbar-track {
  background: rgba(17, 17, 17, 0.09);
  border-radius: 999px;
}

/* La última reseña se desvanece por abajo: es la forma más rápida de decir
   "esto sigue". Se hace con `mask-image` sobre el propio listado y NO con un
   `::after` sobre el contenedor, que fue el primer intento: ese degradado caía
   también sobre el aviso de "desplázate", que vive justo debajo, y lo dejaba
   lavado y medio ilegible. La máscara solo afecta al listado.
   Al llegar al final se quita, para no dejar un velo sobre la última reseña. */
.emp-pdp-reviews__list.is-scroll {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 64px), transparent 100%);
}

.emp-pdp-reviews__list.is-scroll.is-end {
  -webkit-mask-image: none;
  mask-image: none;
}

/* Aviso explícito. El degradado por sí solo se puede leer como un adorno; esto
   no deja lugar a dudas. Se oculta en cuanto se llega al final. */
.emp-pdp-reviews__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 12px 0 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-wine);
}

.emp-pdp-reviews__hint svg {
  flex-shrink: 0;
  animation: emp-hint-bob 1.6s ease-in-out infinite;
}

@keyframes emp-hint-bob {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-pdp-reviews__hint svg {
    animation: none;
  }
}

/* ---- Título, ciudad, foto y sellos de cada reseña ------------------------ */
.emp-pdp-review__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: 16px;
  line-height: 1.3;
  color: var(--emp-black);
}

.emp-pdp-review__photo {
  display: block;
  align-self: flex-start;
  max-width: 160px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(17, 17, 17, 0.1);
  line-height: 0;
}

.emp-pdp-review__photo img {
  width: 100%;
  height: auto;
  display: block;
}

.emp-pdp-review__marks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.emp-pdp-review__mark {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  background: rgba(226, 35, 26, 0.08);
  border: 1px solid rgba(226, 35, 26, 0.3);
  color: var(--emp-wine);
}

/* ---- Campos nuevos del formulario --------------------------------------- */
/* Calificación y título en una fila; en pantalla estrecha, uno debajo de otro. */
.emp-pdp-reviewform__row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 14px;
  align-items: end;
}

.emp-pdp-reviewform__row > p {
  margin: 0;
}

.emp-pdp-reviewform__opt {
  font-weight: 400;
  color: rgba(17, 17, 17, 0.45);
}

.emp-pdp-reviewform__photo input[type="file"] {
  display: block;
  width: 100%;
  font-size: 13px;
  color: rgba(17, 17, 17, 0.7);
}

.emp-pdp-reviewform__photo input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1.5px solid var(--emp-black);
  background: transparent;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-black);
  cursor: pointer;
}

.emp-pdp-reviewform__report {
  margin: 4px 0 0;
  padding: 16px 18px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 12px;
  background: rgba(17, 17, 17, 0.02);
}

.emp-pdp-reviewform__report legend {
  padding: 0 6px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(17, 17, 17, 0.6);
}

.emp-pdp-reviewform__q {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.07);
}

.emp-pdp-reviewform__q:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.emp-pdp-reviewform__qlabel {
  flex: 1 1 100%;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--emp-black);
}

.emp-pdp-reviewform__q label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
  color: rgba(17, 17, 17, 0.72);
  cursor: pointer;
}

.emp-pdp-reviewform__q input[type="radio"] {
  accent-color: var(--emp-wine);
  margin: 0;
}

.emp-pdp-reviewform__q input[type="number"] {
  width: 110px;
}

.emp-pdp-reviewform__q .emp-pdp-reviewform__fine {
  flex: 1 1 100%;
  margin-top: 0;
}

@media (max-width: 720px) {
  .emp-pdp-reviewform__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .emp-pdp-review__photo {
    max-width: 120px;
  }
}

/* El botón de publicar, resaltado: ancho completo, más alto y con halo propio. */
.emp-pdp-reviewform .emp-pdp-reviewform__submit {
  width: 100%;
  min-width: 0;
  height: 58px;
  min-height: 58px;
  padding: 0 26px;
  font-size: 15.5px;
  letter-spacing: 0.01em;
}

/* ⚠️ El color necesita ESTE selector tan largo, no basta con la clase.
   WooCommerce trae en su propia hoja `#respond input#submit { background: …;
   color: …; box-shadow: none }` —DOS ids— y le gana a cualquier regla de una o
   dos clases, incluida `.emp-pdp-btn--primary`. Comprobado en el staging: el
   botón se estaba pintando GRIS (#e9e6ed sobre #515151) con esquinas de 3px, no
   rojo, desde que existe el formulario. Con dos ids MÁS dos clases la pelea se
   gana sin recurrir a !important. Si el botón vuelve a salir gris, mira aquí
   antes que en el tema.
   El :hover repite la sombra entera porque `box-shadow` no se acumula entre
   reglas: declarar solo el desenfoque perdería la de reposo. */
.emp-pdp-reviewform #respond input#submit.emp-pdp-reviewform__submit {
  background: var(--emp-wine);
  color: var(--emp-cream);
  border: none;
  border-radius: 12px;
  font-weight: 800;
  box-shadow: 0 12px 26px rgba(226, 35, 26, 0.32);
}

.emp-pdp-reviewform #respond input#submit.emp-pdp-reviewform__submit:hover {
  background: var(--emp-wine);
  color: var(--emp-cream);
  filter: brightness(1.09);
  box-shadow: 0 16px 32px rgba(226, 35, 26, 0.42);
}

.emp-pdp-reviewform .form-submit {
  margin-bottom: 0;
}

/* ---- Aviso "reseña enviada" ---------------------------------------------
   Sale al volver de publicar. La reseña queda en espera de aprobación, así que
   no aparece en la lista: si no se le dijera nada, el cliente daría por hecho
   que falló y la escribiría otra vez. */
.emp-pdp-sent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  /* Se llega aquí por el ancla #emp-pdp-review-sent, y la cabecera va fija:
     sin este margen de scroll el aviso queda justo debajo de ella y el cliente
     aterriza sin ver lo único que había venido a leer. Comprobado en el
     staging: la barra superior + el header + el banner de la App ocupan ~130px. */
  scroll-margin-top: 150px;
  margin-bottom: 24px;
  padding: 16px 18px;
  border-radius: 12px;
  background: rgba(46, 125, 79, 0.08);
  border: 1px solid rgba(46, 125, 79, 0.32);
  color: var(--emp-black);
}

.emp-pdp-sent svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--emp-green);
}

.emp-pdp-sent strong {
  display: block;
  font-size: 14.5px;
  margin-bottom: 3px;
}

.emp-pdp-sent span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.66);
}

/* ---- Sello "Compra verificada" en la esquina superior derecha -------------
   Va en absoluto sobre la tarjeta y no dentro de la fila de la cabecera: ahí
   dependía de `margin-left: auto` y, con `flex-wrap`, en pantalla estrecha se
   caía a una segunda línea y dejaba de estar arriba a la derecha. El
   padding-right de la cabecera es el hueco que necesita el nombre para no
   pasar por debajo del sello. */
.emp-pdp-review {
  position: relative;
}

.emp-pdp-review__head {
  padding-right: 120px;
}

.emp-pdp-review .emp-pdp-review__verified {
  position: absolute;
  top: 14px;
  right: 14px;
  margin-left: 0;
}

@media (max-width: 599px) {
  .emp-pdp-review__head {
    padding-right: 0;
  }

  /* En móvil no cabe la cabecera con el sello al lado: vuelve al flujo, debajo
     de la fila, en vez de montarse encima del nombre. */
  .emp-pdp-review .emp-pdp-review__verified {
    position: static;
    align-self: flex-start;
  }
}

/* ---- Pop-up del formulario de reseña -------------------------------------
   Reutiliza el overlay del quiz (.emp-quiz-pop) y solo ajusta la caja: este
   formulario es más largo que el quiz, así que se limita a la altura de la
   pantalla y se recorre por dentro en vez de empujar el overlay.

   Lo abre "Escribir reseña", que va bajo los promedios y también en el bloque
   de "sé el primero" —sin reseñas no hay cuadro de promedios y sin ese segundo
   botón no habría forma de escribir la primera—.

   El overlay lo mueve initPdp() a <body> al arrancar: es `position: fixed` y
   dentro de una sección con `.emp-reveal` (que anima `transform`) el padre pasa
   a ser su contenedor de posicionamiento y el pop-up quedaría encajado en la
   sección en vez de a pantalla completa. */
.emp-pdp-reviewpop__box {
  background: #fff;
  max-width: 660px;
  padding: 44px 26px 26px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(226, 35, 26, 0.45) transparent;
}

.emp-pdp-reviewpop__box::-webkit-scrollbar {
  width: 6px;
}

.emp-pdp-reviewpop__box::-webkit-scrollbar-thumb {
  background: rgba(226, 35, 26, 0.45);
  border-radius: 999px;
}

/* El botón que abre el pop-up. En el cuadro de promedios va a ancho completo,
   debajo de los indicadores y separado por la misma línea que los separa a
   ellos, para que se lea como el siguiente paso y no como parte del resumen. */
.emp-pdp-score .emp-pdp-review-open {
  width: 100%;
  margin-top: 16px;
  padding-top: 0;
}

/* Aquí el contenedor es un bloque normal, no flex: el ancho lo acota
   `min-width` + `width: auto`, no un `align-self` que no aplicaría. */
.emp-pdp-noreviews .emp-pdp-review-open {
  width: auto;
  margin-top: 18px;
  min-width: 220px;
}

/* ---- Selector de unidades + "Añadir al carrito" --------------------------
   Van en una fila: el selector con ancho fijo y el botón ocupando el resto.
   El alto del selector NO se escribe a mano: lo iguala el `align-items: stretch`
   de la fila. Se probó con 52px fijos y quedó 4px más bajo que el botón, que usa
   `min-height: 56px` — y ese número puede cambiar. Estirándolo, no hay nada que
   mantener sincronizado. */
.emp-pdp-buyrow {
  display: flex;
  align-items: stretch;
  gap: 10px;
}

.emp-pdp-buyrow .emp-pdp-btn {
  flex: 1;
  min-width: 0;
}

.emp-pdp-qty {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  border: 1.5px solid rgba(17, 17, 17, 0.16);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.emp-pdp-qty__btn {
  width: 38px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  color: var(--emp-black);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.emp-pdp-qty__btn:hover {
  background: rgba(226, 35, 26, 0.08);
  color: var(--emp-wine);
}

/* El input va sin flechas nativas: al lado hay dos botones que hacen lo mismo y
   los spinners del navegador, además de descuadrar el alto, se ven distintos en
   cada uno. */
.emp-pdp-qty__input {
  width: 44px;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  color: var(--emp-black);
  -moz-appearance: textfield;
  appearance: textfield;
}

.emp-pdp-qty__input::-webkit-outer-spin-button,
.emp-pdp-qty__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.emp-pdp-qty__input:focus {
  outline: none;
}

.emp-pdp-qty:focus-within {
  border-color: var(--emp-wine);
}

@media (max-width: 420px) {
  /* En pantalla muy angosta el botón se queda sin espacio para su texto: el
     selector pasa arriba, a lo ancho. */
  .emp-pdp-buyrow {
    flex-wrap: wrap;
  }

  .emp-pdp-qty {
    width: 100%;
    justify-content: space-between;
  }

  .emp-pdp-qty__input {
    flex: 1;
  }
}

/* =========================================================================
   CHECKOUT + CONFIRMACIÓN
   Fuente de diseño: "EMP Checkout" (Claude Design), con el vino #8E1B2E y el
   dorado #C9A24B del mockup mapeados al rojo de marca --emp-wine. Donde el
   mockup contrastaba dorado CONTRA vino (el sello y las promesas sobre negro) el
   sustituto es --emp-wine-soft, no rojo sobre rojo.

   ⚠️ **Ojo con los selectores largos: no son manía, son especificidad.** Esta
   es la única pantalla del tema montada sobre plantillas de WooCommerce, y su
   hoja de estilos pelea de verdad: el bloque de pago lo estiliza por ID
   (`.woocommerce-checkout #payment`, `.woocommerce #payment #place_order`) y el
   resumen con cadenas de dos clases y dos elementos
   (`.woocommerce table.shop_table td`), que EMPATAN o le ganan a una clase del
   tema. Un empate lo decide el orden en que se imprimen las hojas, que depende
   de en qué orden se encolaron — o sea, de algo que no se ve desde aquí. Por eso
   lo que compite con WooCommerce lleva `body` delante y arrastra su clase
   (`.emp-co-sum.shop_table`, `#payment … li.emp-co-pm`): así gana por
   especificidad y da igual el orden. Lo que no compite con nada va con la clase
   sola.
   ========================================================================= */

/* ---- Cabecera del checkout ---------------------------------------------- */
/* En el checkout la cabecera es la del sitio pero sin controles: quedan el logo y,
   en el hueco que dejó el menú, el recordatorio de compra.
   `1fr auto 1fr` en vez de `auto 1fr auto`: así el recordatorio queda centrado
   respecto a la PÁGINA y no respecto al espacio que sobra a la derecha del logo,
   que es lo que pasaba con la rejilla del menú (y con un logo ancho se notaba). */
/* ⚠️ Las tres piezas llevan fila Y columna explícitas, en los dos anchos. No es
   redundante: con colocación automática el sello se iba a una TERCERA fila en
   estrecho, porque el recordatorio ocupa toda la fila 2 y el cursor de la rejilla
   nunca retrocede — el sello ya no cabía en la 1 aunque estuviera libre. */
.emp-co-page .emp-header__inner {
  grid-template-columns: 1fr auto 1fr;
}

.emp-co-page .emp-logo {
  grid-row: 1;
  grid-column: 1;
  justify-self: start;
}

/* ⚠️ Con `a.` delante y `.emp` de ancestro, y hace falta las dos veces: la regla
   global `.emp a { color: var(--emp-wine) }` le gana a una clase sola, así que sin
   esto el texto sale ROJO sobre el negro del header — pasó tal cual al subirlo.
   Es la misma trampa que ya obliga a escribir `a.emp-card__cta--*` en las tarjetas.
   Aquí importa además por contraste: el crema sobre negro se lee de lejos y el rojo
   de marca se queda en el límite para este tamaño. */
.emp a.emp-co-addmore {
  grid-row: 1;
  grid-column: 2;
  justify-self: center;
  text-align: center;
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--emp-cream);
  /* Subrayado SIEMPRE y rojo al pasar por encima: el mismo trato que el
     "¿Tienes un cupón?" del cajón (`.emp-cart__coupon-link`). El subrayado es
     además lo que lo delata como pulsable, que aquí hace falta — es el único
     enlace del centro de una cabecera sin menú. */
  text-decoration: underline;
  text-underline-offset: 4px;
  padding: 4px 8px;
}

/* Con `.emp a` + clase + `:hover` para ganarle a `.emp a:hover`, que si no lo
   pintaría del rojo oscuro global en vez del rojo de marca. */
.emp a.emp-co-addmore:hover,
.emp a.emp-co-addmore:focus-visible {
  color: var(--emp-wine);
  text-decoration: underline;
}

/* Sello "Compra segura" del mockup, en el hueco que dejaron los iconos de cuenta
   y carrito. Es el remate derecho de la cabecera del checkout.

   Va en el rojo de marca (pedido del usuario), que es el mismo trato que ya
   reciben las otras etiquetas en versalitas sobre fondo oscuro del tema. Ojo si
   alguna vez hay que hacerlo más legible: a 11,5px el rojo sobre negro es una
   pareja de contraste bajo, y `--emp-wine-soft` —el tinte claro, que es lo que
   usa el resto de texto rojo sobre oscuro— es la salida sin cambiar de idioma. */
.emp-co-safe {
  grid-row: 1;
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--emp-wine);
  white-space: nowrap;
}

/* Por debajo de ~900px el recordatorio ya no cabe entre el logo y el sello: la
   cabecera pasa a dos filas — logo y "Compra segura" arriba, como en el mockup, y
   el recordatorio debajo a lo ancho. */
@media (max-width: 900px) {
  .emp-co-page .emp-header__inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
    row-gap: 8px;
  }

  .emp-co-page .emp-logo {
    grid-row: 1;
    grid-column: 1;
    justify-self: start;
  }

  .emp-co-safe {
    grid-row: 1;
    grid-column: 2;
  }

  .emp a.emp-co-addmore {
    grid-row: 2;
    grid-column: 1 / -1;
    font-size: 16px;
    padding: 0;
  }
}

/* ---- Armazón mínimo (pie del checkout) ----------------------------------- */
.emp-co-foot {
  margin-top: 40px;
  border-top: 1px solid rgba(17, 17, 17, .1);
  background: #fff;
  padding: 18px 20px;
}

.emp-co-foot__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.emp-co-foot__legal {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .5);
}

.emp-co-foot__help {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none;
}

/* ---- Indicador de progreso --------------------------------------------- */
.emp-co-steps {
  background: #fff;
  border-bottom: 1px solid rgba(17, 17, 17, .1);
}

.emp-co-steps__inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 13px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.emp-co-step {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}

.emp-co-step--last {
  flex: 0 0 auto;
}

.emp-co-step__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(17, 17, 17, .26);
  color: rgba(17, 17, 17, .42);
  font-size: 11px;
  font-weight: 800;
}

.emp-co-step__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: rgba(17, 17, 17, .42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-co-step__rule {
  flex: 1;
  height: 1.5px;
  min-width: 14px;
  background: rgba(17, 17, 17, .14);
}

.emp-co-step.is-current .emp-co-step__dot {
  background: var(--emp-black);
  border-color: var(--emp-black);
  color: var(--emp-cream);
}

.emp-co-step.is-done .emp-co-step__dot {
  background: var(--emp-wine);
  border-color: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-co-step.is-done .emp-co-step__rule {
  background: var(--emp-wine);
}

.emp-co-step.is-current .emp-co-step__label,
.emp-co-step.is-done .emp-co-step__label {
  color: var(--emp-black);
}

/* ---- Rejilla de dos columnas -------------------------------------------- */
.emp-co {
  max-width: 1160px;
  width: 100%;
  margin: 0 auto;
  padding: 26px 20px 44px;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(320px, .85fr);
  gap: 26px;
  align-items: start;
}

.emp-co__main {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-co__aside {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  position: sticky;
  /* Debajo de lo que queda pegado arriba. Desde que el checkout lleva la cabecera
     completa del tema (2026-07-30) hay apilado sticky de verdad —barra de
     confianza, header, banner de la App y barra de envío—, y sin descontarlo el
     resumen se metía por debajo de ellos al hacer scroll. `--emp-stack-h` lo mide
     `initStickyOffsets()` sumando solo lo que existe en la página; NO encadenes
     las variables sueltas, que valen su alto aunque el elemento esté apagado. */
  top: calc(var(--emp-stack-h) + 16px);
}

/* ---- Encabezado --------------------------------------------------------- */
.emp-co-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

.emp-co-head__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 600;
  line-height: 1.15;
}

.emp-co-head__login {
  font-size: 12px;
  color: rgba(17, 17, 17, .55);
}

.emp-co-head__login a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-co-head__sub {
  margin: -6px 0 0;
  font-size: 12.5px;
  color: rgba(17, 17, 17, .58);
}

/* ---- Bloques (fieldset) ------------------------------------------------- */
/* "Tus datos" y "Entrega" son hermanos DENTRO de `.woocommerce-billing-fields`
   (form-billing.php), no hijos de `.emp-co__main`: el `gap` de la columna no les
   llega y sin esto los dos bloques quedan pegados. */
.emp-co-fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-co-card {
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  background: #fff;
  padding: 17px 18px 19px;
  margin: 0;
  min-width: 0;
}

/* ⚠️ El `float` no es decorativo: saca al `<legend>` de la colocación ESPECIAL que
   le da el navegador, que lo monta a caballo del borde superior del `<fieldset>`.
   Como el relleno blanco de la tarjeta empieza justo en ese borde, el rótulo
   («1 · Tus datos») acababa dibujado fuera de la caja, sobre el crema de la
   página. Con `float` + `width: 100%` vuelve al flujo normal, dentro del relleno:
   el borde queda entero y el rótulo, sobre el blanco. */
.emp-co-card__legend {
  float: left;
  width: 100%;
  padding: 0;
  margin: 0 0 14px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

/* Lo que va detrás del rótulo tiene que limpiar ese float. Vale para los dos
   casos: la rejilla de campos y la lista de métodos de pago. */
.emp-co-card > *:not(.emp-co-card__legend) {
  clear: both;
}

.emp-co-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

/* ---- Campos ------------------------------------------------------------- */
/* Las filas de WooCommerce flotan al 47% y traen relleno propio: eso pelearía
   con la rejilla, así que se neutraliza. */
body.emp-co-page .emp-co .form-row {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

body.emp-co-page .emp-co .form-row::after,
body.emp-co-page .emp-co .form-row::before {
  content: none;
}

body.emp-co-page .emp-co .emp-co-f--full {
  grid-column: 1 / -1;
}

/* ⚠️ `!important` y hace falta: `wc-address-i18n.js` recorre los campos de
   dirección con `jQuery.show()/hide()`, y `.show()` escribe `display` en el
   atributo `style` del elemento. Un estilo en línea le gana a cualquier regla de
   la hoja, así que sin `!important` la fila del país volvía a aparecer un instante
   después de cargar (visto en el staging con la tienda ya restringida a Colombia:
   la clase estaba puesta, la regla existía, y el `display` seguía siendo block). */
body.emp-co-page .emp-co .emp-co-f--silent {
  display: none !important;
}

body.emp-co-page .emp-co .form-row label {
  line-height: 1.3;
  font-size: 12px;
  font-weight: 700;
  color: var(--emp-black);
}

.emp-co-f__hint {
  font-weight: 500;
  color: rgba(17, 17, 17, .5);
}

/* Casi todo es obligatorio: el asterisco de WooCommerce solo añadiría ruido.
   Los opcionales lo dicen en su propia etiqueta ("· opcional"). */
.emp-co .required,
.emp-co .optional {
  display: none;
}

.emp-co .woocommerce-input-wrapper {
  display: block;
  width: 100%;
}

body.emp-co-page .emp-co input[type="text"],
body.emp-co-page .emp-co input[type="tel"],
body.emp-co-page .emp-co input[type="email"],
body.emp-co-page .emp-co input[type="number"],
body.emp-co-page .emp-co input[type="password"],
body.emp-co-page .emp-co select,
body.emp-co-page .emp-co textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
  background: #fff;
  font-family: var(--emp-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--emp-black);
  box-shadow: none;
}

/* `line-height` aparte y con la clase de WooCommerce dentro: la suya
   (`.woocommerce form .form-row input.input-text`) le gana a la regla de arriba
   por especificidad, y con `line-height: 1` el textarea queda apretado. */
body.emp-co-page .emp-co .form-row input.input-text,
body.emp-co-page .emp-co .form-row textarea,
body.emp-co-page .emp-co .form-row select {
  line-height: 1.35;
}

body.emp-co-page .emp-co textarea {
  min-height: 74px;
  padding: 12px 13px;
  resize: vertical;
}

body.emp-co-page .emp-co input::placeholder,
body.emp-co-page .emp-co textarea::placeholder {
  color: rgba(17, 17, 17, .34);
}

body.emp-co-page .emp-co input:focus,
body.emp-co-page .emp-co select:focus,
body.emp-co-page .emp-co textarea:focus {
  border-color: var(--emp-wine);
  outline: none;
}

/* Campo inválido: la clase la pone el propio JS de WooCommerce al validar, así
   que el borde rojo del mockup sale gratis mientras no se le quite
   `validate-required` a los campos (ver emp_co_apply_field()). */
body.emp-co-page .emp-co .woocommerce-invalid input,
body.emp-co-page .emp-co .woocommerce-invalid select,
body.emp-co-page .emp-co .woocommerce-invalid .select2-selection {
  border-color: var(--emp-wine);
}

/* selectWoo/select2: WooCommerce lo usa para país y departamento. No se puede
   quitar (su propio script depende de él), así que se disfraza de campo del tema. */
body.emp-co-page .emp-co .select2-container {
  width: 100% !important;
}

body.emp-co-page .emp-co .select2-container--default .select2-selection--single {
  height: 48px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
  background: #fff;
}

body.emp-co-page .emp-co .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 46px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--emp-black);
}

body.emp-co-page .emp-co .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 46px;
}

/* El desplegable de select2 se cuelga del <body>, fuera de .emp-co. */
body.emp-co-page .select2-dropdown {
  border-color: rgba(17, 17, 17, .2);
  border-radius: 3px;
  font-size: 14px;
}

body.emp-co-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background: var(--emp-wine);
}

/* Formulario de acceso de WooCommerce (lo despliega el enlace .showlogin). */
body.emp-co-page .emp-co-login form.login {
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  background: #fff;
  padding: 18px 18px 20px;
  margin: 18px auto 0;
  max-width: 1160px;
}

/* ---- Cupón ------------------------------------------------------------- */
.emp-co-coupon {
  padding: 2px 2px 0;
}

/* Dentro del resumen se alinea con las demás filas (mismo sangrado de 17px) y
   suelta su relleno propio, que era de cuando vivía en la columna del formulario.
   El `max-width` de 420px también sobra: aquí manda el ancho de la tarjeta. */
body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__couponrow td {
  padding: 2px 17px 14px;
  /* Las filas del pie del resumen alinean a la derecha (ahí van los importes);
     el cupón no es un importe y tiene que leerse desde la izquierda, como la
     línea de "Ahorras" que lleva justo encima. */
  text-align: left;
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-coupon {
  padding: 0;
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-coupon__box {
  max-width: none;
}

.emp-co-coupon__link {
  min-height: 30px;
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, .55);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-co-coupon__box {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 420px;
}

.emp-co-coupon__row {
  display: flex;
  gap: 8px;
}

body.emp-co-page .emp-co .emp-co-coupon__input {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.emp-co-coupon__apply {
  flex-shrink: 0;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid var(--emp-black);
  border-radius: 3px;
  background: var(--emp-black);
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--emp-cream);
}

.emp-co-coupon.is-busy .emp-co-coupon__apply {
  opacity: .6;
  pointer-events: none;
}

.emp-co-coupon__msg {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--emp-wine);
  min-height: 14px;
}

.emp-co-coupon__msg.is-ok {
  color: var(--emp-green);
}

/* ---- Métodos de pago ---------------------------------------------------- */
/* Todo este bloque va contra `#payment`, que WooCommerce estiliza por ID. */
body.emp-co-page #payment {
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

body.emp-co-page #payment ul.payment_methods {
  list-style: none;
  margin: 0;
  padding: 0;
  border: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

body.emp-co-page #payment ul.payment_methods li.emp-co-pm {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  /* `start` y no `center`: el círculo va arriba a la izquierda, a la altura de
     la primera línea del título. Con `center` se hundía al medio de la tarjeta
     en cuanto la descripción hacía crecer el alto. */
  align-items: start;
  gap: 0 12px;
  margin: 0;
  padding: 13px 15px;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 4px;
  background: #fff;
  min-height: 52px;
  line-height: 1.4;
  font-weight: 400;
}

/* ⚠️ Las tres piezas llevan fila y columna ESCRITAS. Antes solo las tenía la
   descripción (`grid-column: 2`) y las otras dos se dejaban a la colocación
   automática — que no retrocede: con la descripción ocupando la columna 2, el
   círculo acababa en la columna 2 fila 1 y el título en la columna 1 fila 2. En
   pantalla eso era el círculo en mitad de la tarjeta y la descripción al lado
   del título en vez de debajo. Es la misma trampa que ya mordió en la cabecera
   del checkout; si tocas una de las tres, revisa las tres. */
body.emp-co-page #payment ul.payment_methods li input.emp-co-pm__radio {
  grid-column: 1;
  grid-row: 1;
  width: 19px;
  height: 19px;
  /* Un pelo abajo para que el círculo quede centrado con la primera línea del
     título, no con su borde superior. */
  margin: 1px 0 0;
  flex-shrink: 0;
  accent-color: var(--emp-wine);
  cursor: pointer;
}

body.emp-co-page #payment ul.payment_methods li label.emp-co-pm__label {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
}

.emp-co-pm__note {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: rgba(17, 17, 17, .5);
  text-align: right;
}

body.emp-co-page #payment ul.payment_methods li .emp-co-pm__icon img {
  display: inline-block;
  max-height: 22px;
  width: auto;
  margin: 0;
  padding: 0;
}

/* El resalte rojo es del método ELEGIDO, no de contra entrega
   (pedido del usuario). Antes iba clavado en `--hero`, así que la tarjeta
   destacada seguía enmarcada aunque el cliente hubiera elegido otra: dos
   tarjetas peleando por parecer la activa, y la que el cliente acababa de
   pulsar perdiendo.

   Va con `:has()` y sin nada de JS, y eso importa aquí más que en otro sitio:
   **WooCommerce repinta `#payment` entero en cada recálculo de totales**, así
   que una clase puesta por JS habría que volver a ponerla en cada repintado y
   se desincronizaría en cuanto alguien olvidara ese detalle. Con CSS el
   resalte no puede quedarse desfasado nunca. Donde no haya `:has()` no se
   pinta el marco y ya está: se pierde el énfasis, no la función — el radio se
   sigue viendo marcado.

   El grosor extra va por `box-shadow: inset`, NO subiendo `border-width`: el
   borde cambia el tamaño de la caja y las tarjetas darían un salto de 2px cada
   vez que se cambia de método. La sombra interior se dibuja sin mover nada. */
body.emp-co-page #payment ul.payment_methods li.emp-co-pm:has(input.emp-co-pm__radio:checked) {
  border-color: var(--emp-wine);
  box-shadow: inset 0 0 0 1px var(--emp-wine);
  background: rgba(226, 35, 26, .05);
}

/* Contra entrega ya no se enmarca sola; sigue destacando por la píldora
   "Recomendado" y por el título algo mayor, que es lo que la recomienda —el
   marco decía "elegida", que es otra cosa—. El relleno se iguala al del resto
   para que todas las tarjetas midan lo mismo. */
body.emp-co-page #payment ul.payment_methods li.emp-co-pm--hero {
  padding: 13px 15px;
}

.emp-co-pm--hero .emp-co-pm__title {
  font-size: 14.5px;
  font-weight: 800;
}

.emp-co-pm__badge {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emp-wine-dark);
  background: rgba(226, 35, 26, .16);
  padding: 3px 8px;
  border-radius: 100px;
}

/* La descripción de la pasarela (y sus campos) los pinta WooCommerce en
   `.payment_box`; se coloca bajo el título, alineada con la etiqueta. */
body.emp-co-page #payment div.payment_box.emp-co-pm__box {
  grid-column: 2;
  grid-row: 2;
  width: auto;
  margin: 6px 0 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .66);
}

body.emp-co-page #payment div.payment_box.emp-co-pm__box::before {
  display: none;
}

body.emp-co-page #payment div.payment_box.emp-co-pm__box p {
  margin: 0 0 6px;
}

body.emp-co-page #payment div.payment_box.emp-co-pm__box p:last-child {
  margin-bottom: 0;
}

.emp-co-pay__none {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .62);
  list-style: none;
}

/* ---- Sellos de confianza ----------------------------------------------- */
.emp-co-seals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(17, 17, 17, .1);
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  overflow: hidden;
}

.emp-co-seal {
  background: #fff;
  padding: 14px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

.emp-co-seal svg {
  flex-shrink: 0;
  color: var(--emp-wine);
}

.emp-co-seal__text {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: rgba(17, 17, 17, .75);
}

/* ---- Botón de compra --------------------------------------------------- */
body.emp-co-page #payment div.form-row.emp-co-place {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

/* Va contra `#payment #place_order` porque WooCommerce estiliza ese botón con
   dos IDs (`float: right`) y con `.woocommerce button.button.alt` (fondo
   morado): las dos le ganan a cualquier cadena de clases del tema. */
body.emp-co-page #payment #place_order {
  float: none;
  width: 100%;
  min-height: 58px;
  border: none;
  border-radius: 3px;
  background: var(--emp-wine);
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emp-cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 18px;
  line-height: 1.2;
  text-shadow: none;
}

body.emp-co-page #payment #place_order:hover {
  background: var(--emp-wine-dark);
  color: var(--emp-cream);
}

/* El total va en `data-total`, no en un nodo hijo: el JS de WooCommerce
   reescribe el TEXTO de #place_order con .text() al cambiar de método de pago y
   se llevaría por delante cualquier <span> de dentro. El contenido generado
   sobrevive. */
body.emp-co-page #payment #place_order[data-total]::after {
  content: attr(data-total);
  font-weight: 700;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  opacity: .86;
}

.emp-co-place__noscript {
  font-size: 12px;
  color: rgba(17, 17, 17, .62);
}

/* Aviso de privacidad y casilla de condiciones: los imprime WooCommerce desde
   `checkout/terms.php`. No están en el mockup, pero se dejan —son la base legal
   del tratamiento de datos— con el tamaño de una nota al pie, no compitiendo con
   el botón que tienen justo debajo. */
body.emp-co-page #payment .woocommerce-privacy-policy-text,
body.emp-co-page #payment .woocommerce-terms-and-conditions-wrapper {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .5);
}

body.emp-co-page #payment .woocommerce-privacy-policy-text p {
  margin: 0;
}

/* ---- Resumen del pedido ------------------------------------------------ */
/* `.emp-co-sum.shop_table` (dos clases) para ganarle a
   `.woocommerce table.shop_table td/th`, que empata con una clase sola. */
body.emp-co-page .emp-co-sum.shop_table {
  width: 100%;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  background: #fff;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0;
  font-size: 13px;
}

body.emp-co-page .emp-co-sum.shop_table th,
body.emp-co-page .emp-co-sum.shop_table td {
  padding: 0;
  border: none;
  background: transparent;
  vertical-align: baseline;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.4;
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__head {
  padding: 15px 17px 13px;
  border-bottom: 1px solid rgba(17, 17, 17, .09);
  text-align: left;
  font-family: var(--emp-serif);
  font-size: 17px;
  font-weight: 600;
}

/* Líneas */
body.emp-co-page .emp-co-sum.shop_table .emp-co-item__cell {
  padding: 14px 17px;
  border-bottom: 1px solid rgba(17, 17, 17, .08);
}

.emp-co-item__row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.emp-co-item__img {
  width: 60px;
  height: 74px;
  flex-shrink: 0;
  background: #EDE7DA;
  border-radius: 3px;
  overflow: hidden;
  display: block;
}

.emp-co-item__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.emp-co-item__img .emp-imgslot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
}

.emp-co-item__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-co-item__brand {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

.emp-co-item__name {
  font-family: var(--emp-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.emp-co-item__name a {
  color: inherit;
  text-decoration: none;
}

.emp-co-item__variant {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .55);
}

.emp-co-item__qty {
  font-size: 11.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, .45);
}

/* Selector de unidades del resumen. Pequeño a propósito: es un ajuste de última
   hora, no una acción principal — el peso visual de la línea tiene que seguir
   siendo el nombre del perfume y su precio. */
.emp-co-qty {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: 2px;
  border: 1px solid rgba(17, 17, 17, .16);
  border-radius: 3px;
  background: #fff;
  overflow: hidden;
}

body.emp-co-page .emp-co-qty__btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  font-family: var(--emp-sans);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: var(--emp-black);
  display: flex;
  align-items: center;
  justify-content: center;
}

body.emp-co-page .emp-co-qty__btn:hover:not([disabled]) {
  background: rgba(226, 35, 26, .08);
  color: var(--emp-wine);
}

/* En el tope (1 unidad abajo, el stock arriba) el botón se apaga en vez de
   desaparecer: si se moviera de sitio, el siguiente clic caería en otra cosa. */
body.emp-co-page .emp-co-qty__btn[disabled] {
  opacity: .3;
  cursor: default;
}

.emp-co-qty__val {
  min-width: 22px;
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--emp-black);
  border-left: 1px solid rgba(17, 17, 17, .12);
  border-right: 1px solid rgba(17, 17, 17, .12);
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emp-co-item__meta {
  font-size: 11px;
  color: rgba(17, 17, 17, .5);
}

.emp-co-item__meta:empty {
  display: none;
}

.emp-co-item__meta p {
  margin: 0;
}

.emp-co-item__price {
  text-align: right;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.emp-co-item__was {
  font-size: 11px;
  color: rgba(17, 17, 17, .4);
  text-decoration: line-through;
  font-variant-numeric: tabular-nums;
}

.emp-co-item__now {
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-item__note td {
  padding: 0 17px 14px;
  font-size: 12px;
  color: rgba(17, 17, 17, .6);
}

/* Filas de totales. Las de WooCommerce (envío, impuestos, comisiones) llevan
   sus propias clases y caen en esta misma regla por ser <tr> de la tabla. */
body.emp-co-page .emp-co-sum.shop_table tfoot tr > th,
body.emp-co-page .emp-co-sum.shop_table tfoot tr > td {
  padding: 7px 17px;
}

body.emp-co-page .emp-co-sum.shop_table tfoot tr:first-child > th,
body.emp-co-page .emp-co-sum.shop_table tfoot tr:first-child > td {
  padding-top: 14px;
}

body.emp-co-page .emp-co-sum.shop_table tfoot tr > th {
  text-align: left;
  font-size: 13px;
  font-weight: 500;
  color: rgba(17, 17, 17, .62);
  width: 55%;
}

body.emp-co-page .emp-co-sum.shop_table tfoot tr > td {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.emp-co-free {
  color: var(--emp-green);
  font-weight: 800;
}

body.emp-co-page .emp-co-sum.shop_table .woocommerce-shipping-methods {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: right;
}

body.emp-co-page .emp-co-sum.shop_table .woocommerce-shipping-methods label {
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

body.emp-co-page .emp-co-sum.shop_table .woocommerce-shipping-destination,
body.emp-co-page .emp-co-sum.shop_table .shipping-calculator-button {
  font-size: 11.5px;
  font-weight: 500;
  color: rgba(17, 17, 17, .5);
}

body.emp-co-page .emp-co-sum.shop_table .woocommerce-remove-coupon {
  font-size: 11px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__savings td {
  padding: 4px 17px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--emp-wine);
}

/* La fila del total va del MISMO blanco que el resto de la tarjeta. El mockup la
   pintaba en crema, pero aquí la tarjeta se apoya sobre una página crema y esa
   banda se leía como un hueco en la caja, no como un remate. Lo que la destaca es
   el filete de arriba y el tamaño —23px contra 13px— que ya sobra para separarla
   de subtotal y envío. */
body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__total > th,
body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__total > td {
  padding: 15px 17px;
  background: transparent;
  border-top: 1px solid rgba(17, 17, 17, .09);
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__total > th {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emp-black);
}

body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__total > td {
  font-size: 23px;
  font-weight: 800;
}

/* ⚠️ Esta celda NO puede llevar `display: flex`. Lo llevaba, y con eso dejaba de
   ser una celda de tabla: el `colspan="2"` se ignoraba y el pie de promesas medía
   224px dentro de una tarjeta de 410, dejando el filete superior cortado a media
   caja. Se queda como celda y el apilado lo hacen las propias promesas, que ya son
   bloques flex. */
body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__perks td {
  padding: 13px 17px;
  border-top: 1px solid rgba(17, 17, 17, .09);
  text-align: left;
}

.emp-co-perk + .emp-co-perk {
  margin-top: 9px;
}

.emp-co-perk {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--emp-wine);
}

.emp-co-perk svg {
  flex-shrink: 0;
}

.emp-co-perk--eta {
  font-weight: 700;
}

/* ---- Celular: barra plegable del resumen y CTA fijo -------------------- */
.emp-co-bar {
  display: none;
}

.emp-co-sticky {
  display: none;
}

/* ---- Confirmación / página de agradecimiento --------------------------- */
/* Portada de "EMP Pagina Agradecimiento" (Claude Design). Sustituyó al bloque
   `.emp-co-done*`, que era la confirmación reducida del mockup del checkout.
   El resumen (`.emp-co-sum`) y la tarjeta de entrega (`.emp-co-delivery`) NO se
   duplican aquí: son los mismos del checkout y siguen más abajo. */
.emp-ty {
  /* Ámbar del estado "en espera". No sale de los tokens del tema a propósito:
     el mockup insiste en que ese estado va en ÁMBAR Y NUNCA EN ROJO —no es un
     fallo, es un paso normal— y el rojo es justo el acento de marca. Mapearlo
     como se hace con el dorado de los mockups viejos convertiría un aviso
     tranquilo en una alarma. Es un color de ESTADO, como el verde de "pagado". */
  --emp-ty-amber: #C9A24B;
  --emp-ty-amber-ink: #6E5615;
  --emp-ty-amber-mid: #8A6D1F;
  --emp-ty-ok: var(--emp-green);

  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 26px 20px 44px;
}

.emp-ty__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, .86fr);
  gap: 24px;
  align-items: start;
}

/* Sin pedido y con el pago rechazado no hay resumen que enseñar: la columna
   derecha desaparece y la izquierda se centra en vez de quedarse a media
   pantalla con un hueco al lado. */
.emp-ty__grid--solo {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

.emp-ty__main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* El lateral va MÁS JUNTO que la columna principal (pedido del usuario,
   2026-07-31): resumen, "Entrega en" y "¿Alguna duda?" son tres caras de la
   misma cosa —el pedido que se acaba de hacer— y con el mismo hueco que la
   columna de al lado se leían como tres bloques sin relación. Siguen siendo
   tarjetas separadas y en el mismo orden: solo se acercan. */
.emp-ty__aside {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

/* ⚠️ **Sin esto el `gap` de arriba no se nota, y ese fue el fallo.** Bajar el
   hueco a 7px no acercó nada porque lo que separaba las tarjetas NO era el gap:
   eran los márgenes propios de WooCommerce sobre `.woocommerce-order-details` y
   `.woocommerce-customer-details`, que son las clases que llevan el resumen y la
   tarjeta de entrega. `.emp-co-orderdetails { margin: 0 }` y
   `.emp-co-delivery { margin: 0 }` son de UNA clase, así que **empataban** con
   las de WooCommerce y el desempate lo decidía el orden de las hojas — la misma
   trampa que ya está documentada para el resto del CSS del checkout.
   Con `body` delante la regla gana sin depender de ese orden, y el espaciado del
   lateral pasa a estar gobernado SOLO por el `gap`. Va sobre todos los hijos
   directos a propósito: así también neutraliza lo que cuelgue cualquier plugin
   de `woocommerce_thankyou`. */
body.emp-co-page .emp-ty__aside > * {
  margin: 0;
}

/* Cuelga del apilado sticky del header (barra de confianza + header + barra de
   envío), igual que el resumen del checkout: con un `top` fijo se metería
   debajo de la barra en cuanto cambie cualquiera de las tres. */
.emp-ty__aside {
  position: sticky;
  top: calc(var(--emp-stack-h) + 16px);
}

/* ---- 1 · Certeza inmediata --------------------------------------------- */
.emp-ty-hero {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 34px 30px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: empTyRise .42s cubic-bezier(.22, .61, .36, 1) both;
}

.emp-ty-hero__ring {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  margin-bottom: 16px;
  animation: empTyRing .52s cubic-bezier(.22, .61, .36, 1) both;
}

.emp-ty-hero__ring--ok {
  background: rgba(46, 125, 79, .11);
  border: 1.5px solid rgba(46, 125, 79, .3);
  color: var(--emp-ty-ok);
}

.emp-ty-hero__ring--wait {
  background: rgba(201, 162, 75, .18);
  border: 1.5px solid rgba(201, 162, 75, .5);
  color: var(--emp-ty-amber-mid);
}

@keyframes empTyRing {
  0% { transform: scale(.6); opacity: 0; }
  55% { transform: scale(1.07); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes empTyRise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .emp-ty-hero,
  .emp-ty-hero__ring {
    animation: none;
  }
}

.emp-ty-hero__eyebrow {
  margin: 0 0 9px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.emp-ty-hero__eyebrow--ok {
  color: var(--emp-ty-ok);
}

.emp-ty-hero__eyebrow--wait {
  color: var(--emp-ty-amber-mid);
}

.emp-ty-hero__title {
  margin: 0 0 11px;
  font-family: var(--emp-serif);
  font-size: clamp(28px, 4.6vw, 40px);
  font-weight: 600;
  line-height: 1.08;
}

.emp-ty-hero__lead {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(17, 17, 17, .62);
  max-width: 450px;
}

.emp-ty-hero__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 19px;
}

.emp-ty-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-top: 19px;
}

.emp-ty-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--emp-cream);
  border: 1px solid rgba(17, 17, 17, .13);
  border-radius: 100px;
  padding: 10px 16px;
}

.emp-ty-chip__num {
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
}

.emp-ty-chip--eta {
  background: rgba(226, 35, 26, .1);
  border-color: transparent;
  color: var(--emp-wine-dark);
}

.emp-ty-chip--wait {
  background: rgba(201, 162, 75, .2);
  border-color: transparent;
  color: var(--emp-ty-amber-ink);
}

/* ---- 2 · Pago en espera: qué pasa y qué hacer -------------------------- */
.emp-ty-wait {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 19px 20px 21px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-ty-wait__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-ty-wait__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

.emp-ty-wait__body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(17, 17, 17, .66);
}

/* Lo que imprime la PASARELA. Llega como markup suyo (un `<p>`, la lista de
   datos bancarios de una transferencia…), así que se le da tipografía de nota
   sin tocar su estructura: el bloque que manda es el título que tiene encima.
   Fuera de "Qué está pasando" —o sea con el pedido ya confirmado— se pinta como
   una tarjeta más, porque ahí no tiene ninguna que lo contenga. */
.emp-ty-gateway {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 14px 18px;
}

.emp-ty-wait .emp-ty-gateway {
  background: none;
  border: 0;
  padding: 0;
}

.emp-ty-gateway > * {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(17, 17, 17, .68);
}

.emp-ty-gateway > :last-child {
  margin-bottom: 0;
}

.emp-ty-gateway ul {
  list-style: none;
  padding: 14px 15px;
  background: var(--emp-cream);
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 11px;
  font-size: 13px;
}

.emp-ty-gateway ul li {
  word-break: break-word;
}

/* ⚠️ **El `.emp-ty` de delante NO sobra: sin él este botón sale SIN TEXTO.** La
   regla global de enlaces del tema es `body.emp a` —una clase y dos elementos—,
   que le gana a una clase suelta, así que el texto se pintaba en rojo de marca
   sobre el fondo rojo del botón y desaparecía. Es la misma trampa de
   especificidad ya documentada para el CSS del checkout. Se vio en la vista
   previa, no en el código. */
.emp-ty .emp-ty-wait__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  background: var(--emp-wine);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--emp-cream);
  text-decoration: none;
}

.emp-ty .emp-ty-wait__cta:hover {
  background: var(--emp-wine-dark);
  color: var(--emp-cream);
}

.emp-ty-wait__total {
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  font-variant-numeric: tabular-nums;
  opacity: .86;
}

.emp-ty-wait__note {
  margin: -4px 0 0;
  font-size: 12px;
  color: rgba(17, 17, 17, .5);
  text-align: center;
}

.emp-ty-wait__hold {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px 15px;
  background: rgba(201, 162, 75, .15);
  border-radius: 4px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--emp-ty-amber-ink);
}

.emp-ty-wait__hold svg {
  flex-shrink: 0;
  color: var(--emp-ty-amber-mid);
}

/* ---- Rótulos compartidos ----------------------------------------------- */
.emp-ty-eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emp-wine);
}

.emp-ty-eyebrow--wait {
  color: var(--emp-ty-amber-mid);
}

/* Sobre el negro, el rojo puro pierde legibilidad: se usa el tinte claro, el
   mismo criterio del resto de acentos del tema sobre fondo oscuro. */
.emp-ty-eyebrow--dark {
  color: var(--emp-wine-soft);
}

/* ---- 3 · Qué sigue ------------------------------------------------------ */
.emp-ty-next {
  background: var(--emp-black);
  border-radius: 4px;
  padding: 21px 22px 23px;
}

.emp-ty-next__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 17px;
}

.emp-ty-next__eta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--emp-cream);
}

.emp-ty-next__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emp-ty-next__item {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.emp-ty-next__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 26px;
}

.emp-ty-next__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 241, 232, .28);
  color: rgba(245, 241, 232, .45);
  font-size: 11px;
  font-weight: 800;
}

.emp-ty-next__item.is-past .emp-ty-next__dot {
  background: var(--emp-wine);
  border-color: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-ty-next__item.is-current .emp-ty-next__dot {
  background: var(--emp-cream);
  border-color: var(--emp-cream);
  color: var(--emp-black);
}

.emp-ty-next__rule {
  flex: 1;
  width: 1.5px;
  min-height: 26px;
  background: rgba(245, 241, 232, .18);
}

.emp-ty-next__item.is-past .emp-ty-next__rule {
  background: rgba(226, 35, 26, .55);
}

.emp-ty-next__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 18px;
  min-width: 0;
}

.emp-ty-next__item.is-last .emp-ty-next__body {
  padding-bottom: 0;
}

.emp-ty-next__line {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.emp-ty-next__title {
  font-size: 13.5px;
  font-weight: 800;
  color: rgba(245, 241, 232, .55);
}

.emp-ty-next__item.is-past .emp-ty-next__title,
.emp-ty-next__item.is-current .emp-ty-next__title {
  color: var(--emp-cream);
}

.emp-ty-next__now {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emp-cream);
  background: var(--emp-wine);
  padding: 3px 8px;
  border-radius: 100px;
}

.emp-ty-next__text {
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(245, 241, 232, .6);
}

/* ---- 4 · Reafirmación --------------------------------------------------- */
.emp-ty-seals {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(17, 17, 17, .1);
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  overflow: hidden;
}

.emp-ty-seal {
  background: #fff;
  padding: 15px 13px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.emp-ty-seal svg {
  color: var(--emp-wine);
}

.emp-ty-seal__title {
  font-size: 12.5px;
  font-weight: 800;
  line-height: 1.3;
}

.emp-ty-seal__text {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(17, 17, 17, .55);
}

/* ---- 5b · Cuenta -------------------------------------------------------- */
.emp-ty-account {
  background: rgba(226, 35, 26, .07);
  border: 1px solid rgba(226, 35, 26, .28);
  border-radius: 4px;
  padding: 17px 19px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.emp-ty-account__copy {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-ty-account__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 800;
}

.emp-ty-account__title svg {
  color: var(--emp-wine);
}

.emp-ty-account__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .62);
}

.emp-ty-account__form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.emp-ty-account__input {
  min-height: 48px;
  min-width: 180px;
  flex: 1;
  padding: 0 14px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
  background: #fff;
  font-size: 14px;
}

.emp-ty-account__input:focus {
  outline: 2px solid var(--emp-wine);
  outline-offset: 1px;
}

.emp-ty-account__msg {
  flex-basis: 100%;
  margin: 0;
  font-size: 12.5px;
  font-weight: 600;
}

.emp-ty-account__msg--ok {
  color: var(--emp-green);
}

.emp-ty-account__msg--err {
  color: var(--emp-wine-dark);
}

.emp-ty-account--done {
  background: rgba(46, 125, 79, .09);
  border-color: rgba(46, 125, 79, .3);
}

/* ---- 5c · Comunidad ----------------------------------------------------- */
.emp-ty-social {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 18px 19px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-ty-social__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-ty-social__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.emp-ty-social__text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .58);
}

.emp-ty-social__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 9px;
}

.emp-ty .emp-ty-social__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(17, 17, 17, .14);
  border-radius: 3px;
  color: var(--emp-black);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}

.emp-ty .emp-ty-social__link:hover {
  border-color: var(--emp-wine);
  color: var(--emp-wine);
}

/* ---- 6 · Cross-sell ----------------------------------------------------- */
.emp-ty-cross {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-ty-cross__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-ty-cross__title {
  margin: 0;
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
}

.emp-ty-cross__reason {
  margin: 0;
  font-size: 12.5px;
  color: rgba(17, 17, 17, .55);
}

/* ---- Ayuda (columna derecha) -------------------------------------------- */
.emp-ty-help {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 17px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.emp-ty-help__title {
  font-size: 13.5px;
  font-weight: 800;
}

.emp-ty-help__text {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .58);
}

.emp-ty .emp-ty-help__wa,
.emp-ty .emp-ty-help__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  text-decoration: none;
}

.emp-ty .emp-ty-help__wa {
  background: var(--emp-wine);
  border: 1px solid var(--emp-wine);
  color: var(--emp-cream);
}

.emp-ty .emp-ty-help__wa:hover {
  background: var(--emp-wine-dark);
  border-color: var(--emp-wine-dark);
  color: var(--emp-cream);
}

.emp-ty .emp-ty-help__link {
  min-height: 46px;
  border: 1px solid rgba(17, 17, 17, .2);
  color: var(--emp-black);
}

.emp-ty .emp-ty-help__link:hover {
  border-color: var(--emp-black);
  background: var(--emp-black);
  color: var(--emp-cream);
}

/* Con el pago en espera la ayuda SUBE de jerarquía: ahí el soporte es lo más
   útil de la pantalla, así que pasa de tarjeta blanca a bloque rojo sólido y el
   botón invierte los colores para seguir siendo el elemento más visible. */
.emp-ty-help--loud {
  background: var(--emp-wine);
  border-color: var(--emp-wine);
}

.emp-ty-help--loud .emp-ty-help__title {
  color: var(--emp-cream);
}

.emp-ty-help--loud .emp-ty-help__text {
  color: rgba(245, 241, 232, .78);
}

.emp-ty .emp-ty-help--loud .emp-ty-help__wa {
  background: var(--emp-cream);
  border-color: var(--emp-cream);
  color: var(--emp-wine-dark);
}

.emp-ty .emp-ty-help--loud .emp-ty-help__wa:hover {
  background: #fff;
  border-color: #fff;
  color: var(--emp-wine-dark);
}

.emp-ty .emp-ty-help--loud .emp-ty-help__link {
  border-color: rgba(245, 241, 232, .55);
  color: var(--emp-cream);
}

.emp-ty .emp-ty-help--loud .emp-ty-help__link:hover {
  background: rgba(245, 241, 232, .12);
  border-color: var(--emp-cream);
  color: var(--emp-cream);
}

/* ---- Botón genérico de la pantalla -------------------------------------- */
.emp-ty .emp-ty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 20px;
  background: var(--emp-black);
  border: 1px solid var(--emp-black);
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--emp-cream);
  text-decoration: none;
  cursor: pointer;
}

.emp-ty .emp-ty-btn:hover {
  background: var(--emp-wine);
  border-color: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-ty .emp-ty-btn--ghost {
  background: transparent;
  border-color: rgba(17, 17, 17, .2);
  color: var(--emp-black);
}

.emp-ty .emp-ty-btn--ghost:hover {
  color: var(--emp-cream);
}

.emp-co-orderdetails {
  margin: 0;
}

/* Cualquier `<p>` suelto que un plugin cuelgue de `woocommerce_thankyou`: cae en
   la columna derecha, junto al resumen, y se le da caja de nota para que no
   quede flotando sin fondo entre dos tarjetas. Las instrucciones de la pasarela
   NO entran por aquí — esas se capturan y se colocan a mano (`.emp-ty-gateway`). */
.emp-ty__aside > p {
  margin: 0;
  padding: 14px 18px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(17, 17, 17, .62);
}

/* Sin margen: en la confirmación es un hijo más de la columna, que ya separa con
   `gap`. Un margen aquí se sumaría al hueco y esta tarjeta quedaría más suelta
   que las demás. */
.emp-co-delivery {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 18px 20px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emp-co-delivery__addr {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 700;
}

.emp-co-delivery__addr svg {
  flex-shrink: 0;
  color: var(--emp-wine);
}

.emp-co-delivery__meta,
.emp-co-delivery__note {
  font-size: 12.5px;
  color: rgba(17, 17, 17, .58);
}

/* ---- Avisos de WooCommerce dentro del checkout ------------------------- */
body.emp-co-page .woocommerce-error,
body.emp-co-page .woocommerce-info,
body.emp-co-page .woocommerce-message,
body.emp-co-page .woocommerce-NoticeGroup {
  max-width: 1160px;
  margin: 18px auto 0;
}

body.emp-co-page .woocommerce-error,
body.emp-co-page .woocommerce-info,
body.emp-co-page .woocommerce-message {
  list-style: none;
  border: 1px solid rgba(17, 17, 17, .12);
  border-top: 1px solid rgba(17, 17, 17, .12);
  border-left: 3px solid var(--emp-wine);
  border-radius: 3px;
  background: #fff;
  padding: 13px 16px;
  font-size: 12.5px;
  line-height: 1.5;
  width: auto;
}

/* WooCommerce dibuja su icono con un ::before de fuente propia; sobra. */
body.emp-co-page .woocommerce-error::before,
body.emp-co-page .woocommerce-info::before,
body.emp-co-page .woocommerce-message::before {
  display: none;
}

body.emp-co-page .woocommerce-error li,
body.emp-co-page .woocommerce-message li,
body.emp-co-page .woocommerce-info li {
  margin: 0 0 4px;
  padding: 0;
  list-style: none;
}

body.emp-co-page .woocommerce-error li:last-child,
body.emp-co-page .woocommerce-message li:last-child,
body.emp-co-page .woocommerce-info li:last-child {
  margin-bottom: 0;
}

body.emp-co-page .woocommerce-message {
  border-left-color: var(--emp-green);
}

/* Desvanecido de los avisos que se cierran solos a los 5 s (ver initCheckout()).
   Los de error no llevan esta clase nunca. */
body.emp-co-page .woocommerce-message,
body.emp-co-page .woocommerce-info {
  transition: opacity .35s ease, transform .35s ease;
}

body.emp-co-page .emp-co-notice--out {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

/* ---- Celular ----------------------------------------------------------- */
@media (max-width: 860px) {
  .emp-co {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0 0 8px;
  }

  /* Orden en celular: barra con el total, resumen plegable y luego el
     formulario. Un solo resumen para las dos anchuras — ver form-checkout.php. */
  .emp-co-bar {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    padding: 0 20px;
    border: none;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
    background: #fff;
    cursor: pointer;
    font-family: var(--emp-sans);
  }

  .emp-co-bar__left {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--emp-wine);
  }

  .emp-co-bar .emp-co-i--chev {
    transition: transform .24s ease;
  }

  .emp-co-bar.is-open .emp-co-i--chev {
    transform: rotate(180deg);
  }

  .emp-co-bar .emp-co-total-live {
    font-size: 16px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--emp-black);
  }

  .emp-co__aside {
    grid-column: 1;
    grid-row: 2;
    position: static;
    display: none;
    background: #fff;
    border-bottom: 1px solid rgba(17, 17, 17, .12);
    padding: 0 20px 18px;
  }

  .emp-co__aside.is-open {
    display: block;
  }

  .emp-co__main {
    grid-column: 1;
    grid-row: 3;
    padding: 18px 20px 8px;
  }

  .emp-co-card__grid {
    grid-template-columns: 1fr;
  }

  .emp-co-seals {
    grid-template-columns: 1fr;
  }

  /* El CTA real sigue en el DOM (oculto): la barra fija lo pulsa por JS para
     no saltarse a las pasarelas que se enganchan a SU clic. */
  body.emp-co-page #payment #place_order {
    display: none;
  }

  .emp-co-sticky {
    display: block;
    position: sticky;
    bottom: 0;
    z-index: 20;
    background: #fff;
    border-top: 1px solid rgba(17, 17, 17, .14);
    padding: 11px 20px;
    padding-bottom: max(11px, env(safe-area-inset-bottom));
    box-shadow: 0 -10px 26px rgba(17, 17, 17, .08);
  }

  .emp-co-sticky__btn {
    width: 100%;
    min-height: 56px;
    border: none;
    border-radius: 3px;
    background: var(--emp-wine);
    cursor: pointer;
    font-family: var(--emp-sans);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--emp-cream);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 16px;
  }

  .emp-co-sticky__btn .emp-co-total-live {
    font-weight: 700;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    opacity: .86;
  }

  /* ---- Confirmación en celular ---------------------------------------- */
  .emp-ty {
    padding: 18px 18px 30px;
  }

  /* Una sola columna, y el resumen **debajo** del bloque de certeza: lo primero
     que necesita ver quien acaba de pagar es que el pedido está hecho, no el
     desglose de lo que ya pagó. Y sin `sticky`, que en una columna sola no
     tiene nada a lo que quedarse pegado. */
  .emp-ty__grid,
  .emp-ty__grid--solo {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .emp-ty__aside {
    position: static;
  }

  .emp-ty-hero {
    padding: 28px 20px 26px;
  }

  .emp-co-steps__inner {
    padding: 12px 18px;
  }

  /* A esta anchura los rótulos de los tres pasos no caben con el punto: se
     quedan los puntos y el del paso actual, que es el que informa. */
  .emp-co-step:not(.is-current) .emp-co-step__label {
    display: none;
  }
}

@media (max-width: 420px) {
  .emp-co-item__img {
    width: 48px;
    height: 60px;
  }

  body.emp-co-page .emp-co-sum.shop_table {
    font-size: 12.5px;
  }

  body.emp-co-page .emp-co-sum.shop_table .emp-co-sum__total > td {
    font-size: 20px;
  }

  /* A esta anchura los tres sellos quedan a dos palabras por línea. La rejilla
     de sugerencias no hace falta tocarla: es `.emp-plp-grid`, con auto-fill. */
  .emp-ty-seals {
    grid-template-columns: 1fr;
  }

  .emp-ty-account__form {
    width: 100%;
  }

  .emp-ty-account__form .emp-ty-btn {
    width: 100%;
  }
}


/* -- Checkout: cifras recalculándose ------------------------------------
   Cambiar una unidad cuesta dos viajes al servidor en fila (~1,2 s en el
   staging) y WooCommerce solo tapa el resumen en el último tramo. Sin esto,
   el número de unidades cambia al instante y las cifras se quedan clavadas
   más de un segundo: parece que el clic no hizo nada.

   Se atenúa SOLO lo que va a cambiar. El número de unidades y los nombres se
   quedan a plena luz: ya son correctos, y apagar la pantalla entera haría
   dudar de lo que se acaba de pulsar. Sin animación 'infinite' a propósito
   (ver el presupuesto de animación en CLAUDE.md): una transición de opacidad
   no se repinta cuando nadie la mira. */
body.emp .emp-co-item__now,
body.emp .emp-co-item__old,
body.emp .emp-co-sum__row td,
body.emp .emp-co-sum__savings td,
body.emp .emp-co-sum__total td,
body.emp .emp-co-total-live {
	transition: opacity .18s ease;
}

body.emp .emp-co--recalc .emp-co-item__now,
body.emp .emp-co--recalc .emp-co-item__old,
body.emp .emp-co--recalc .emp-co-sum__row td,
body.emp .emp-co--recalc .emp-co-sum__savings td,
body.emp .emp-co--recalc .emp-co-sum__total td,
body.emp .emp-co--recalc .emp-co-total-live {
	opacity: .38;
}

/* El botón de pagar lleva el total en `data-total` y lo pinta con
   `content`, así que se atenúa el pseudo-elemento y no el botón: apagarlo
   entero sugeriría que no se puede pulsar, y sí se puede.

   Los dos ids no sobran: la regla base es
   `body.emp-co-page #payment #place_order[data-total]::after`, y con una clase
   suelta esto perdería la pelea sin dejar rastro. */
body.emp-co-page .emp-co--recalc #payment #place_order[data-total]::after {
	opacity: .38;
	transition: opacity .18s ease;
}


/* -- Checkout: ciudad apagada hasta elegir departamento ------------------
   El campo se apaga de verdad (`disabled`), no solo de aspecto, para que no se
   pueda elegir una ciudad que no corresponde al departamento. Tiene que NOTARSE
   que está apagado y por qué: si se viera igual que los demás, se leería como
   que el formulario no responde. El propio marcador lo dice
   ("Elige primero el departamento"); esto solo lo acompaña visualmente.

   `opacity` no: sobre el borde y el texto a la vez deja un gris sucio. Se
   bajan el fondo y el color por separado. */
body.emp .emp-co-f select:disabled {
	background-color: #f4f2ef;
	color: rgba(17, 17, 17, .45);
	cursor: not-allowed;
	border-color: rgba(17, 17, 17, .12);
}

/* La flecha del desplegable también se apaga; si no, invita a pulsar algo que
   no se va a abrir. */
body.emp .emp-co-f select:disabled + .emp-co-f__arrow,
body.emp .emp-co-f--disabled .emp-co-f__arrow {
	opacity: .35;
}


/* -- Checkout: los dos desplegables de "Entrega", con el mismo aspecto --
   Departamento lo convierte select2 (lo hace WooCommerce) y ciudad se queda
   como un <select> nativo. Sin esto quedan uno al lado del otro con dos
   aspectos distintos y, peor, la ciudad SIN flecha: con `appearance: none`
   heredado se lee como una caja de texto, que es justo lo que se quitó.

   No se pasa la ciudad por select2 a propósito: el desplegable nativo ya trae
   búsqueda por teclado (escribir "med" salta a Medellín entre los 152
   municipios de Antioquia) y en el celular abre el selector del sistema, que
   se maneja mejor que una lista dentro de la página. */
body.emp-co-page .emp-co select.emp-co-sel {
	height: 48px;
	padding: 0 34px 0 12px;
	border: 1px solid rgba(17, 17, 17, .2);
	border-radius: 3px;
	background-color: #fff;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='.55'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 10px 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--emp-black);
}

/* Apagado: mismo trato que el resto, pero con la especificidad de la regla de
   arriba o perdería el fondo. La flecha también se atenúa; si no, invita a
   pulsar algo que no se va a abrir. */
body.emp-co-page .emp-co select.emp-co-sel:disabled {
	background-color: #f4f2ef;
	border-color: rgba(17, 17, 17, .12);
	color: rgba(17, 17, 17, .45);
	cursor: not-allowed;
	opacity: 1;
}


/* Sobra el contenedor de select2 en el departamento: initCityCascade() lo
   deshace en el navegador, pero si el JS no llega a correr —o tarda— se vería
   un instante. Ocultarlo dejaría el campo sin nada visible, así que NO se
   oculta: solo se le da el mismo aspecto, y así el paso de uno a otro no se
   nota. */
body.emp-co-page .emp-co .select2-container--default .select2-selection--single {
	height: 48px;
	border: 1px solid rgba(17, 17, 17, .2);
	border-radius: 3px;
	background: #fff;
}


/* -- Checkout: envío "Calculando…" --------------------------------------
   Se ve como lo que es: un dato que todavía no está, no una cifra. Por eso va
   en gris y sin el peso de los números del resumen — si se pintara igual que
   un precio, el ojo lo leería como el importe del envío.

   Sin animación: esta línea está a la vista todo el rato en la pantalla de
   pago, y un pulso permanente es justo el coste que ya salió caro en el Home
   (ver el presupuesto de animación). */
body.emp-co-page .emp-co .emp-co-calc {
	color: rgba(17, 17, 17, .45);
	font-weight: 500;
	font-style: italic;
}

/* La fila de envío de WooCommerce trae su propia lista para los métodos; con un
   solo método no se imprime, pero si algún día hay varios conviene que no
   herede viñetas ni sangría del resumen. */
body.emp-co-page .emp-co ul.woocommerce-shipping-methods {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================================
   MI CUENTA  (portada de "EMP Mi Cuenta")
   =========================================================================
   Los datos y las decisiones están en `inc/account.php`; el markup en
   `woocommerce/myaccount/*.php`.

   ⚠️ PALETA: el mockup usa dorado #C9A24B y vino #8E1B2E, que son los colores de
   los diseños viejos. Aquí los DOS se mapean al rojo de marca (`--emp-wine`),
   como manda la regla de portado del tema. Dos excepciones:
     - sobre el fondo NEGRO del hero y del bloque de puntos el acento va con
       `--emp-wine-soft`: el rojo pleno sobre negro se apaga y los rótulos de
       10px dejan de leerse;
     - el ámbar del estado "Preparando" NO es el acento de marca, es un color de
       ESTADO, y reusa los `--emp-ty-amber*` de la confirmación. Un pedido en
       camino pintado de rojo se lee como un problema.

   ⚠️ ESPECIFICIDAD: media pantalla pelea con la hoja de WooCommerce
   (`.woocommerce-MyAccount-navigation ul li a`, `.woocommerce form .form-row`,
   sus botones). Por eso casi todo va con el prefijo `.emp` o
   `body.emp-acc-page`, igual que en el checkout. Bajarle la especificidad a una
   regla de aquí es la forma de que WooCommerce se la coma sin avisar.
   ====================================================================== */

.emp-acc {
  --emp-acc-line: rgba(17, 17, 17, .11);
  --emp-acc-line-soft: rgba(17, 17, 17, .07);
  --emp-acc-ink-2: rgba(17, 17, 17, .55);
  --emp-acc-radius: 4px;

  width: 100%;
}

/* La página se dibuja de borde a borde: el contenedor de page.php no aplica. */
body.emp-acc-page #emp-main {
  padding: 0;
}

/* ---- Cabecera de bienvenida -------------------------------------------- */

.emp-acc-hero {
  background: var(--emp-black);
  border-bottom: 1px solid rgba(245, 241, 232, .12);
  padding: 26px 20px;
}

.emp-acc-hero__in {
  max-width: var(--emp-maxw);
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.emp-acc-hero__who {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}

.emp-acc-hero__tier {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-acc-hero__title {
  font-family: var(--emp-serif);
  font-size: clamp(25px, 3.6vw, 34px);
  font-weight: 600;
  line-height: 1.1;
  color: var(--emp-cream);
  margin: 0;
}

.emp-acc-hero__since {
  font-size: 12.5px;
  color: rgba(245, 241, 232, .55);
  max-width: 46ch;
}

.emp-acc-hero__side {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.emp-acc-hero__stats {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: wrap;
}

.emp-acc-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.emp-acc-stat__v {
  font-family: var(--emp-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
  color: var(--emp-cream);
  font-variant-numeric: tabular-nums;
}

.emp-acc-stat__v--accent {
  color: var(--emp-wine-soft);
}

.emp-acc-stat__l {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .5);
}

.emp .emp-acc-hero__out {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(245, 241, 232, .28);
  border-radius: 3px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(245, 241, 232, .8);
  text-decoration: none;
  transition: border-color .18s ease, color .18s ease;
}

.emp .emp-acc-hero__out:hover {
  border-color: rgba(245, 241, 232, .6);
  color: var(--emp-cream);
}

/* ---- Rejilla: menú lateral + panel ------------------------------------- */

.emp-acc__grid {
  width: 100%;
  max-width: var(--emp-maxw);
  margin: 0 auto;
  padding: 22px 20px 72px;
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}

.emp-acc__grid--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 760px;
}

.emp-acc__grid--login {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 900px;
  align-items: stretch;
}

.emp-acc__panel {
  min-width: 0;
}

/* ---- Navegación --------------------------------------------------------- */

.emp .emp-acc-nav {
  position: sticky;
  top: calc(var(--emp-stack-h) + 12px);
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  min-width: 0;
  float: none;
  width: auto;
  margin: 0;
}

.emp .emp-acc-nav__list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.emp .emp-acc-nav__item {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.emp .emp-acc-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-left: 3px solid transparent;
  border-radius: 3px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: rgba(17, 17, 17, .68);
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s ease, color .16s ease;
}

.emp .emp-acc-nav__link:hover {
  background: rgba(17, 17, 17, .04);
  color: var(--emp-black);
}

.emp .emp-acc-nav__item.is-active > .emp-acc-nav__link {
  border-left-color: var(--emp-wine);
  background: rgba(226, 35, 26, .07);
  color: var(--emp-wine);
  font-weight: 800;
}

.emp-acc-nav__ico {
  display: inline-flex;
  flex-shrink: 0;
  color: rgba(17, 17, 17, .5);
}

.emp .emp-acc-nav__item.is-active .emp-acc-nav__ico {
  color: var(--emp-wine);
}

.emp-acc-nav__txt {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.emp-acc-nav__badge {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 100px;
  background: rgba(17, 17, 17, .08);
  color: rgba(17, 17, 17, .55);
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp .emp-acc-nav__item.is-active .emp-acc-nav__badge {
  background: var(--emp-wine);
  color: var(--emp-cream);
}

/* ---- Piezas comunes ----------------------------------------------------- */

.emp-acc-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.emp-acc-stack--tight {
  gap: 12px;
}

.emp-acc-card {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  overflow: hidden;
}

.emp-acc-card--pad {
  padding: 17px 18px 19px;
}

.emp-acc-card__head {
  padding: 15px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, .07);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.emp-acc-card__aside {
  font-size: 12px;
  color: rgba(17, 17, 17, .55);
}

.emp-acc-card__body {
  padding: 15px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.emp-acc-h1 {
  font-family: var(--emp-serif);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.emp-acc-h2 {
  font-family: var(--emp-serif);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  margin: 0;
}

.emp-acc-h3 {
  font-family: var(--emp-serif);
  font-size: 17px;
  font-weight: 600;
  margin: 22px 0 12px;
}

.emp-acc-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp-acc-block__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.emp-acc-block__head--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.emp-acc-block__sub {
  font-size: 12.5px;
  color: rgba(17, 17, 17, .55);
  margin: 0;
}

.emp .emp-acc-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--emp-wine);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.emp-acc-tag {
  display: inline-flex;
  align-items: center;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(17, 17, 17, .08);
  color: rgba(17, 17, 17, .6);
}

.emp-acc-tag--accent {
  background: rgba(226, 35, 26, .1);
  color: var(--emp-wine);
}

.emp-acc-msg {
  font-size: 12.5px;
  font-weight: 600;
  margin: 0;
  min-height: 16px;
}

.emp-acc-msg--ok {
  color: var(--emp-green);
}

.emp-acc-msg--bad {
  color: var(--emp-wine);
}

/* ---- Botones ------------------------------------------------------------
   Los CTA que son enlaces necesitan forzar su color: la regla global
   `.emp a { color: var(--emp-wine) }` les gana en especificidad, la misma
   trampa ya documentada para los CTA de la tarjeta de producto. */

.emp .emp-acc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.emp .emp-acc-btn--sm {
  min-height: 40px;
  padding: 0 14px;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: none;
}

.emp .emp-acc-btn--block {
  width: 100%;
}

.emp .emp-acc-btn--primary {
  background: var(--emp-wine);
  border-color: var(--emp-wine);
  color: var(--emp-cream);
}

.emp .emp-acc-btn--primary:hover {
  background: var(--emp-wine-dark);
  border-color: var(--emp-wine-dark);
  color: var(--emp-cream);
}

.emp .emp-acc-btn--dark {
  background: var(--emp-black);
  border-color: var(--emp-black);
  color: var(--emp-cream);
}

.emp .emp-acc-btn--dark:hover {
  background: #000;
  color: var(--emp-cream);
}

.emp .emp-acc-btn--ghost {
  border-color: rgba(17, 17, 17, .22);
  color: var(--emp-black);
}

.emp .emp-acc-btn--ghost:hover {
  border-color: var(--emp-black);
  color: var(--emp-black);
}

.emp .emp-acc-btn--outline-accent {
  border-color: rgba(236, 112, 106, .5);
  color: var(--emp-wine-soft);
  min-height: 44px;
  font-size: 11.5px;
}

.emp .emp-acc-btn--outline-accent:hover {
  border-color: var(--emp-wine-soft);
  color: var(--emp-cream);
}

.emp .emp-acc-btn--muted,
.emp .emp-acc-btn[disabled] {
  border-color: rgba(17, 17, 17, .16);
  color: rgba(17, 17, 17, .4);
  cursor: not-allowed;
}

/* ---- Tarjeta de pedido --------------------------------------------------- */

/* ---- Plegado del pedido -------------------------------------------------
   Lo hace `<details>` nativo (ver la cabecera de emp-order-card.php): funciona
   sin JavaScript y el teclado ya sabe usarlo. Lo único que hay que hacer es
   quitarle el triángulo del navegador — y hacen falta LAS DOS reglas:
   `list-style` para Firefox y el pseudo `::-webkit-details-marker` para Safari
   y los Chrome viejos. Con una sola, el triángulo sigue saliendo en la mitad de
   los navegadores. */
.emp-acc-order > summary {
  list-style: none;
  cursor: pointer;
}

.emp-acc-order > summary::-webkit-details-marker {
  display: none;
}

.emp-acc-order > summary:focus-visible {
  outline: 2px solid var(--emp-wine);
  outline-offset: -2px;
}

.emp-acc-order__head {
  padding: 14px 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  transition: background .16s ease;
}

/* El borde solo cuando está abierta: plegada, la línea bajo la cabecera parecía
   una tarjeta cortada por la mitad. El `<summary>` LLEVA la clase
   `.emp-acc-order__head`, no la contiene — por eso el selector va al summary.
   La cabecera del DETALLE del pedido (`view-order.php`) no es plegable y lleva
   su borde siempre. */
.emp-acc-order[open] > summary,
.emp-acc-vieworder > .emp-acc-order__head {
  border-bottom: 1px solid rgba(17, 17, 17, .07);
}

.emp-acc-order > summary:hover .emp-acc-order__num {
  color: var(--emp-wine);
}

.emp-acc-order__right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emp-acc-order__chev {
  display: inline-flex;
  color: rgba(17, 17, 17, .4);
  transition: transform .2s ease;
}

.emp-acc-order[open] .emp-acc-order__chev {
  transform: rotate(180deg);
}

.emp-acc-order__id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.emp-acc-order__num {
  font-size: 13.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp-acc-order__meta {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .52);
}

.emp-acc-order__meta .amount,
.emp-acc-order__meta bdi {
  font-weight: 700;
  color: rgba(17, 17, 17, .62);
}

.emp-acc-order__body {
  padding: 15px 17px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.emp-acc-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 7px 12px;
  border-radius: 100px;
  white-space: nowrap;
}

.emp-acc-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

/* Ámbar = "va en camino". Ver la nota de paleta de arriba. */
.emp-acc-pill--wait {
  background: rgba(201, 162, 75, .22);
  color: #6E5615;
}

.emp-acc-pill--ok {
  background: rgba(46, 125, 79, .12);
  color: var(--emp-green);
}

.emp-acc-pill--bad {
  background: rgba(226, 35, 26, .1);
  color: var(--emp-wine-dark);
}

/* ---- Línea de tiempo del pedido ------------------------------------------ */

.emp .emp-acc-tl {
  display: flex;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.emp .emp-acc-tl__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin: 0;
  list-style: none;
}

.emp-acc-tl__bar {
  height: 5px;
  border-radius: 100px;
  background: rgba(17, 17, 17, .12);
}

.emp-acc-tl__step.is-done .emp-acc-tl__bar {
  background: var(--emp-wine);
}

.emp-acc-tl__label {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.3;
  color: rgba(17, 17, 17, .64);
}

.emp-acc-tl__step.is-done .emp-acc-tl__label {
  color: var(--emp-black);
}

.emp-acc-tl__step.is-current .emp-acc-tl__label {
  font-weight: 800;
}

/* ---- Líneas de producto del pedido --------------------------------------- */

.emp-acc-order__thumbs {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}

.emp-acc-thumb {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.emp-acc-thumb__img {
  width: 44px;
  height: 54px;
  flex-shrink: 0;
  background: #EDE7DA;
  border-radius: 2px;
  overflow: hidden;
  display: block;
}

.emp-acc-thumb__img img,
.emp-acc-line__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.emp-acc-thumb__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.emp-acc-thumb__name {
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}

.emp-acc-thumb__var {
  font-size: 11px;
  color: rgba(17, 17, 17, .5);
}

.emp .emp-acc-lines {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}

.emp .emp-acc-line {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
  list-style: none;
}

.emp-acc-line__img {
  width: 48px;
  height: 58px;
  flex-shrink: 0;
  background: #EDE7DA;
  border-radius: 2px;
  overflow: hidden;
  display: block;
}

.emp-acc-line__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.emp-acc-line__name {
  font-family: var(--emp-serif);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.emp .emp-acc-line__name a {
  color: var(--emp-black);
  text-decoration: none;
}

.emp .emp-acc-line__name a:hover {
  color: var(--emp-wine);
}

.emp-acc-line__meta {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .52);
}

.emp-acc-line__price {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.emp-acc-order__actions {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
}

.emp .emp-acc-order__actions .emp-acc-btn--primary {
  flex: 1;
  min-width: 170px;
}

/* En "Tu último pedido" (la tarjeta compacta del Resumen) son solo DOS botones y
   los dos crecen a la par, como en el mockup. Dejando que creciera solo el rojo,
   ocupaba tres cuartos de la fila y "Seguir envío" quedaba encogido contra el
   borde: se leía como un enlace secundario cuando es la otra mitad de lo que el
   cliente vino a hacer. En "Mis pedidos" son tres y ahí sí manda el primario. */
.emp .emp-acc-order--compact .emp-acc-order__actions .emp-acc-btn {
  flex: 1;
  min-width: 150px;
}

/* ---- Bloque de puntos (fondo oscuro) ------------------------------------- */

.emp-acc-points {
  background: var(--emp-black);
  border-radius: 4px;
  padding: 24px 24px 26px;
  color: var(--emp-cream);
}

.emp-acc-points--mini {
  padding: 20px 22px 22px;
}

.emp-acc-points__eyebrow {
  display: block;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--emp-wine-soft);
}

.emp-acc-points__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.emp-acc-points__num {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-acc-points__value {
  font-family: var(--emp-serif);
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  color: var(--emp-cream);
  font-variant-numeric: tabular-nums;
}

.emp-acc-points__row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 8px 0 18px;
}

.emp-acc-points__big {
  font-family: var(--emp-serif);
  font-size: clamp(44px, 7vw, 60px);
  font-weight: 600;
  line-height: 1;
  color: var(--emp-cream);
  font-variant-numeric: tabular-nums;
}

.emp-acc-points__eq {
  font-size: 14px;
  font-weight: 700;
  color: rgba(245, 241, 232, .6);
}

.emp-acc-bar {
  height: 9px;
  border-radius: 100px;
  background: rgba(245, 241, 232, .16);
  overflow: hidden;
  display: block;
}

.emp-acc-points--mini .emp-acc-bar {
  height: 8px;
  margin-bottom: 9px;
}

.emp-acc-bar__fill {
  display: block;
  height: 100%;
  border-radius: 100px;
  background: var(--emp-wine);
  /* Sin animación infinita: es un valor, no un pulso. Ver el presupuesto de
     animación en el CLAUDE.md. */
  transition: width .5s cubic-bezier(.22, .61, .36, 1);
}

.emp-acc-points__foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 9px;
  flex-wrap: wrap;
}

.emp-acc-points__msg {
  font-size: 12.5px;
  color: rgba(245, 241, 232, .66);
  margin: 0;
  text-wrap: pretty;
}

.emp-acc-points__pct {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--emp-wine-soft);
  font-variant-numeric: tabular-nums;
}

/* ---- Niveles ------------------------------------------------------------- */

.emp-acc-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 13px;
}

.emp-acc-tier {
  border: 1.5px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  padding: 14px 15px;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.emp-acc-tier.is-current {
  border-color: var(--emp-wine);
  background: rgba(226, 35, 26, .05);
}

.emp-acc-tier__top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.emp-acc-tier__name {
  font-size: 13px;
  font-weight: 800;
}

.emp-acc-tier__range {
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(17, 17, 17, .5);
  font-variant-numeric: tabular-nums;
}

.emp-acc-tier__perk {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(17, 17, 17, .58);
  text-wrap: pretty;
}

.emp-acc-tiers__note {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .48);
  margin: 12px 0 0;
}

/* ---- Recompensas y movimientos ------------------------------------------- */

.emp-acc-reward {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  border: 1px solid rgba(17, 17, 17, .1);
  border-radius: 4px;
  flex-wrap: wrap;
}

.emp-acc-reward__txt {
  flex: 1;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-acc-reward__title {
  font-size: 13.5px;
  font-weight: 800;
}

.emp-acc-reward__cost {
  font-size: 12px;
  color: rgba(17, 17, 17, .55);
}

.emp-acc-reward form {
  margin: 0;
}

.emp .emp-acc-log {
  list-style: none;
  margin: 0;
  padding: 0;
}

.emp .emp-acc-log__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(17, 17, 17, .07);
  margin: 0;
  list-style: none;
}

.emp .emp-acc-log__item:last-child {
  border-bottom: 0;
}

.emp-acc-log__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.emp-acc-log__title {
  font-size: 13px;
  font-weight: 700;
}

.emp-acc-log__date {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .5);
}

.emp-acc-log__delta {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.emp-acc-log__delta--up {
  color: var(--emp-green);
}

.emp-acc-log__delta--down {
  color: var(--emp-wine);
}

/* ---- Accesos rápidos ----------------------------------------------------- */

.emp-acc-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.emp .emp-acc-quick__item {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 60px;
  padding: 0 15px;
  border: 1px solid rgba(17, 17, 17, .12);
  border-radius: 4px;
  background: #fff;
  text-align: left;
  text-decoration: none;
  color: var(--emp-black);
  transition: border-color .18s ease, transform .18s ease;
}

.emp .emp-acc-quick__item:hover {
  border-color: var(--emp-wine);
  transform: translateY(-1px);
  color: var(--emp-black);
}

.emp-acc-quick__ico {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--emp-wine);
}

.emp-acc-quick__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.emp-acc-quick__label {
  font-size: 13px;
  font-weight: 800;
}

.emp-acc-quick__note {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .52);
}

/* ---- Estado vacío -------------------------------------------------------- */

.emp-acc-empty {
  padding: 42px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.emp-acc-empty__ico {
  display: inline-flex;
  color: var(--emp-wine);
  margin-bottom: 15px;
}

.emp-acc-empty__title {
  font-family: var(--emp-serif);
  font-size: clamp(23px, 3.6vw, 29px);
  font-weight: 600;
  line-height: 1.14;
  max-width: 400px;
  margin: 0 0 10px;
}

.emp-acc-empty__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(17, 17, 17, .6);
  max-width: 420px;
  margin: 0 0 20px;
  text-wrap: pretty;
}

.emp-acc-empty__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  max-width: 420px;
}

.emp .emp-acc-empty__actions .emp-acc-btn {
  flex: 1;
  min-width: 180px;
  min-height: 50px;
}

.emp-acc-coupon {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 22px 0 0;
  padding: 14px 16px;
  background: rgba(226, 35, 26, .07);
  border: 1.5px dashed var(--emp-wine);
  border-radius: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.emp-acc-coupon__code {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--emp-wine-dark);
}

.emp-acc-coupon__txt {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(17, 17, 17, .7);
}

/* ---- Direcciones --------------------------------------------------------- */

.emp-acc-addrs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.emp-acc-addr {
  padding: 16px 17px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.emp-acc-addr.is-default {
  border-width: 1.5px;
  border-color: var(--emp-wine);
}

.emp-acc-addr__top {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

.emp-acc-addr__tag {
  font-size: 13.5px;
  font-weight: 800;
}

.emp-acc-addr__body {
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
  color: var(--emp-black);
  margin: 0;
}

.emp-acc-addr__contact {
  font-size: 12.5px;
  color: rgba(17, 17, 17, .55);
  margin: 0;
}

.emp-acc-addr__actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 3px;
}

.emp .emp-acc-addr-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 150px;
  border: 1.5px dashed rgba(17, 17, 17, .24);
  border-radius: 4px;
  color: var(--emp-black);
  text-decoration: none;
  transition: border-color .18s ease, background .18s ease;
}

.emp .emp-acc-addr-add:hover {
  border-color: var(--emp-wine);
  background: rgba(226, 35, 26, .04);
  color: var(--emp-black);
}

.emp-acc-addr-add__ico {
  display: inline-flex;
  color: var(--emp-wine);
}

.emp-acc-addr-add__txt {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ---- Formularios ---------------------------------------------------------
   Los campos de dirección los imprime `woocommerce_form_field()` con SUS
   clases; aquí solo se neutraliza su maquetado flotado y se les da el aspecto
   del tema. Mismo enfoque que en el checkout: las clases se añaden, no se
   reemplazan. */

.emp-acc-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.emp .emp-acc-field,
.emp .emp-acc-fields .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
}

.emp-acc-field--wide,
.emp .emp-acc-fields .form-row-wide,
.emp .emp-acc-fields #billing_address_1_field,
.emp .emp-acc-fields #billing_address_2_field,
.emp .emp-acc-fields #shipping_address_1_field,
.emp .emp-acc-fields #shipping_address_2_field {
  grid-column: 1 / -1;
}

.emp .emp-acc-field label,
.emp .emp-acc-fields .form-row label {
  font-size: 12px;
  font-weight: 700;
  color: var(--emp-black);
}

.emp .emp-acc-field .required,
.emp .emp-acc-fields .required {
  color: var(--emp-wine);
  text-decoration: none;
  border: 0;
}

.emp .emp-acc-input,
.emp .emp-acc-fields .input-text,
.emp .emp-acc-fields select {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--emp-black);
  transition: border-color .16s ease, box-shadow .16s ease;
}

.emp .emp-acc-input:focus,
.emp .emp-acc-fields .input-text:focus,
.emp .emp-acc-fields select:focus {
  outline: none;
  border-color: var(--emp-wine);
  box-shadow: 0 0 0 3px rgba(226, 35, 26, .12);
}

.emp .emp-acc-fields .woocommerce-input-wrapper {
  width: 100%;
}

.emp .emp-acc-form__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 15px 0 0;
}

.emp .emp-acc-form__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 4px 0 0;
}

.emp-acc-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}

.emp-acc-check input {
  width: 17px;
  height: 17px;
  accent-color: var(--emp-wine);
  cursor: pointer;
}

/* ---- Comunicaciones ------------------------------------------------------ */

.emp-acc-prefs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-acc-pref {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 2px;
  cursor: pointer;
  border-bottom: 1px solid rgba(17, 17, 17, .07);
}

.emp-acc-pref:last-child {
  border-bottom: 0;
}

.emp-acc-pref input {
  width: 19px;
  height: 19px;
  flex-shrink: 0;
  accent-color: var(--emp-wine);
  cursor: pointer;
}

.emp-acc-pref__txt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.emp-acc-pref__label {
  font-size: 13px;
  font-weight: 700;
}

.emp-acc-pref__note {
  font-size: 11.5px;
  line-height: 1.45;
  color: rgba(17, 17, 17, .55);
}

/* ---- Contraseña ----------------------------------------------------------
   El bloque "Método de pago habitual" (`.emp-acc-pay*`) se quitó a pedido del
   usuario el 2026-07-31: la tienda cobra contra entrega y la pestaña de métodos
   de pago ya se esconde sola (`emp_acc_show_payment_methods()`), así que era una
   tarjeta que solo repetía algo que el cliente ya sabe del checkout. */

.emp-acc-pass {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.emp-acc-pass__txt {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.emp-acc-pass__title {
  font-size: 13.5px;
  font-weight: 800;
}

.emp-acc-pass__note {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .58);
  margin: 0;
  text-wrap: pretty;
}

.emp-acc-pass__form {
  margin: 0;
}

/* ---- Favoritos ------------------------------------------------------------ */

.emp-acc-grid {
  /* La tarjeta es la del catálogo; aquí solo cambia el número de columnas,
     porque el panel es más estrecho que una página completa. */
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
}

.emp-acc-fav {
  position: relative;
}

.emp .emp-fav {
  margin: 0;
}

/* ⚠️ El corazón va abajo a la derecha de la FOTO, no arriba: arriba están los dos
   badges de la tarjeta del tema (`-50%` a la izquierda, `100% Original` a la
   derecha) y el círculo tapaba el segundo — medido en el staging, 36px pisando
   un badge de 91px. Como el form es hermano de la tarjeta (no puede ir dentro,
   `emp_product_card()` devuelve el HTML cerrado), se ancla imitando la zona de
   imagen: cuadrada y a todo el ancho, igual que `.emp-card__img`. Si algún día
   esa zona deja de ser 1:1, esto se descoloca con ella. */
.emp .emp-fav--card {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 8px;
  z-index: 3;
  /* El form cubre toda la foto: sin esto se comería el clic que lleva a la
     ficha. Solo el botón vuelve a ser clicable. */
  pointer-events: none;
}

.emp .emp-fav--card .emp-fav__btn {
  pointer-events: auto;
}

.emp .emp-fav__btn,
.emp a.emp-fav--card,
.emp a.emp-fav--pdp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(17, 17, 17, .12);
  background: rgba(255, 255, 255, .92);
  color: rgba(17, 17, 17, .45);
  cursor: pointer;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}

.emp .emp-fav__btn:hover,
.emp a.emp-fav--card:hover,
.emp a.emp-fav--pdp:hover {
  color: var(--emp-wine);
  border-color: var(--emp-wine);
  transform: scale(1.06);
}

.emp .emp-fav.is-fav .emp-fav__btn {
  color: var(--emp-wine);
  border-color: var(--emp-wine);
}

.emp .emp-fav.is-fav .emp-fav__btn svg {
  fill: var(--emp-wine);
}

/* En la ficha el corazón va en la misma línea que el título. */
.emp-pdp-titlerow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.emp-pdp-titlerow .emp-pdp-title {
  min-width: 0;
}

.emp .emp-fav--pdp {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---- Notas del pedido y paginación --------------------------------------- */

.emp-acc-notes {
  padding: 17px 18px 19px;
}

.emp .emp-acc-notes__list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.emp .emp-acc-note {
  list-style: none;
  margin: 0;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(17, 17, 17, .07);
}

.emp .emp-acc-note:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.emp-acc-note__date {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(17, 17, 17, .5);
  margin-bottom: 3px;
}

.emp-acc-note__txt p {
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
}

.emp-acc-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 4px;
}

.emp-acc-pager__count {
  font-size: 12px;
  color: rgba(17, 17, 17, .55);
  font-variant-numeric: tabular-nums;
}

/* ---- Entrar / crear cuenta ------------------------------------------------ */

.emp-acc-auth {
  display: flex;
  flex-direction: column;
}

.emp-acc-auth .emp-acc-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
  margin-top: 14px;
  /* Que el formulario ocupe el alto de la tarjeta: con las dos columnas
     estiradas a la misma altura, el de "Ya tengo cuenta" —que tiene un campo
     menos— dejaba un hueco muerto de más de 100px debajo del botón. Con esto y
     el `margin-top:auto` de las acciones, ENTRAR y CREAR CUENTA quedan a la
     misma altura. */
  flex: 1;
}

.emp-acc-auth__perk {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  padding: 11px 13px;
  background: rgba(226, 35, 26, .06);
  border-radius: 3px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
  color: rgba(17, 17, 17, .75);
}

.emp-acc-auth__perk svg {
  flex-shrink: 0;
  color: var(--emp-wine);
  margin-top: 1px;
}

/* ⚠️ El aviso de privacidad lo imprime WooCommerce (`woocommerce_register_form`)
   con el tamaño de texto del sitio: salía a 16px en negro pleno, más grande y más
   oscuro que los propios campos, y se comía la columna de registro. Se baja al
   tamaño de las demás notas de la pantalla. No se quita: es un texto legal y
   además configurable desde Ajustes → Privacidad. */
body.emp-acc-page .woocommerce-privacy-policy-text p {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(17, 17, 17, .55);
  margin: 0;
}

body.emp-acc-page .woocommerce-privacy-policy-text a {
  color: var(--emp-wine);
}

.emp-acc-auth__note {
  font-size: 12px;
  color: rgba(17, 17, 17, .55);
  margin: 0;
}

.emp-acc-auth .emp-acc-form__actions {
  margin-top: auto;
  padding-top: 4px;
}

/* ---- Avisos de WooCommerce dentro de la cuenta ---------------------------
   Los imprime su shortcode ANTES de la plantilla, o sea encima del hero. Sin
   estos márgenes quedan pegados al header. */

body.emp-acc-page .woocommerce-notices-wrapper:not(:empty) {
  max-width: var(--emp-maxw);
  margin: 18px auto 0;
  padding: 0 20px;
}

/* ---- Adaptación a pantallas pequeñas ------------------------------------- */

@media (max-width: 900px) {
  .emp-acc-hero {
    padding: 20px 18px;
  }

  .emp-acc-hero__in {
    align-items: flex-start;
  }

  .emp-acc__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding: 14px 16px 80px;
  }

  /* El menú pasa a tira de pestañas con desplazamiento horizontal. Es el MISMO
     markup: con dos menús, el ítem nuevo se olvida siempre en uno. */
  .emp .emp-acc-nav {
    position: static;
    padding: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .emp .emp-acc-nav__list {
    flex-direction: row;
    gap: 6px;
  }

  .emp .emp-acc-nav__item {
    flex-shrink: 0;
  }

  .emp .emp-acc-nav__link {
    border-left: 0;
    border-radius: 100px;
  }

  .emp .emp-acc-nav__item.is-active > .emp-acc-nav__link {
    border-left: 0;
  }

  /* El contador se cae en celular: la tira ya va justa de ancho y el número
     empuja la etiqueta fuera de la pastilla. */
  .emp-acc-nav__badge {
    display: none;
  }
}

@media (max-width: 560px) {
  .emp-acc-hero__stats,
  .emp-acc-hero__side {
    gap: 18px;
  }

  .emp-acc-quick,
  .emp-acc-tiers,
  .emp-acc-fields {
    grid-template-columns: 1fr;
  }

  .emp-acc-empty {
    padding: 30px 20px;
  }

  .emp-acc-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  /* Los tres selectores hacen falta: el de la tarjeta compacta tiene una clase
     MÁS que el general, así que sin nombrarlo aquí seguiría en fila y a 360px
     "Volver a pedir los 2" no cabe al lado de "Seguir envío". */
  .emp .emp-acc-order__actions .emp-acc-btn,
  .emp .emp-acc-order--compact .emp-acc-order__actions .emp-acc-btn,
  .emp .emp-acc-empty__actions .emp-acc-btn {
    flex: 1 1 100%;
    min-width: 0;
  }
}

/* ---- Neutralizar el maquetado propio de WooCommerce ----------------------
   ⚠️ Su hoja pone `float:left; width:30%` a `.woocommerce-MyAccount-navigation`
   y `float:right; width:68%` a `.woocommerce-MyAccount-content`, y esos dos
   selectores tienen la MISMA especificidad (0,2,0) que las reglas del tema: cuál
   gana depende del orden en que se encolen las hojas, o sea de la suerte. Con el
   grid los `float` ya no hacen nada —un elemento de rejilla no flota— pero el
   `width` SÍ: la barra lateral se quedaba en el 30% de su columna (unos 70px) y
   el panel en el 68% del suyo.
   Por eso estas dos van con `body.emp-acc-page` delante (0,2,1): así ganan
   siempre, se encole como se encole. */

body.emp-acc-page .emp-acc__grid > .woocommerce-MyAccount-navigation,
body.emp-acc-page .emp-acc__grid > .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  margin: 0;
}

/* ---- Libreta de direcciones --------------------------------------------- */

.emp-acc-addr__body span {
  display: block;
}

.emp-acc-addr__form {
  margin: 0;
}

.emp .emp-acc-btn--outline {
  border-color: var(--emp-wine);
  color: var(--emp-wine);
}

.emp .emp-acc-btn--outline:hover {
  background: var(--emp-wine);
  color: var(--emp-cream);
}

/* El "¿Seguro?" del borrado en dos pasos (initAccount): sin diálogo del
   navegador, que bloquea la página y no se puede estilar. */
.emp .emp-acc-btn--danger {
  border-color: var(--emp-wine);
  background: var(--emp-wine);
  color: var(--emp-cream);
}

.emp-acc-field__hint {
  font-size: 11.5px;
  color: rgba(17, 17, 17, .5);
}

/* Los campos del checkout dentro del formulario de dirección: la dirección y las
   indicaciones ocupan las dos columnas, como en el pago. */
.emp .emp-acc-fields #billing_address_1_field,
.emp .emp-acc-fields #billing_address_2_field,
.emp .emp-acc-fields .form-row-wide {
  grid-column: 1 / -1;
}

/* select2 del departamento: que no rompa la altura de la fila si WooCommerce lo
   aplica aquí (en el checkout se deshace con su API, ver initCityCascade). */
.emp .emp-acc-fields .select2-container .select2-selection--single {
  height: 48px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
}

.emp .emp-acc-fields .select2-container .select2-selection__rendered {
  line-height: 46px;
  padding-left: 12px;
}

/* ---- Avisos de WooCommerce dentro de la cuenta ---------------------------
   ⚠️ Los imprime WooCommerce con SU aspecto: caja gris, franja verde oliva
   (#8fae1b) arriba y un check en un pseudo-elemento. En medio de esta pantalla
   se leía como un mensaje de otro sitio — lo reportó el usuario al marcar una
   dirección predeterminada (2026-07-31).

   Se visten como una tarjeta del tema: fondo blanco, el mismo borde y radio que
   `.emp-acc-card`, y una franja IZQUIERDA del color del estado (verde para
   confirmar, rojo de marca para error). La franja se hace con `box-shadow: inset`
   y no subiendo el `border-left`: así el texto no se desplaza 3px según el tipo
   de aviso.

   Van con `body.emp-acc-page` delante (0,2,1) porque los selectores de
   WooCommerce (`.woocommerce-message`, y en algunos temas `.woocommerce
   .woocommerce-message`) empatan en especificidad y ganaría el que se encole
   después. Scopeado a la cuenta a propósito: el checkout tiene su propio
   tratamiento y no se toca. */

body.emp-acc-page .woocommerce-message,
body.emp-acc-page .woocommerce-error,
body.emp-acc-page .woocommerce-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, .11);
  border-top: 1px solid rgba(17, 17, 17, .11);
  border-radius: 4px;
  box-shadow: inset 3px 0 0 var(--emp-green);
  font-family: var(--emp-sans);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--emp-black);
  list-style: none;
}

body.emp-acc-page .woocommerce-error {
  box-shadow: inset 3px 0 0 var(--emp-wine);
  flex-direction: column;
  gap: 6px;
}

body.emp-acc-page .woocommerce-info {
  box-shadow: inset 3px 0 0 rgba(17, 17, 17, .3);
}

/* El error de WooCommerce es un <ul> con un <li> por fallo. */
body.emp-acc-page .woocommerce-error li {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Fuera el icono de WooCommerce: viene con `content` y posición absoluta, y
   sobre el fondo nuevo quedaba flotando sobre el texto. El check del tema se
   dibuja con `::before` propio. */
body.emp-acc-page .woocommerce-message::before,
body.emp-acc-page .woocommerce-error::before,
body.emp-acc-page .woocommerce-info::before {
  content: '';
  position: static;
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  padding: 0;
  border-radius: 50%;
  background: var(--emp-green);
  color: transparent;
  font-size: 0;
  /* El check, dibujado como máscara para heredar el color del estado. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 12px 12px;
  background-repeat: no-repeat;
  background-position: center;
}

body.emp-acc-page .woocommerce-error::before {
  background-color: var(--emp-wine);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M12 7v6'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

body.emp-acc-page .woocommerce-info::before {
  background-color: rgba(17, 17, 17, .45);
}

/* ⚠️ Sin el anillo de foco del navegador. WooCommerce le pone `tabindex="-1"` al
   aviso y le DA EL FOCO al pintarlo, para que los lectores de pantalla lo
   anuncien; Chrome responde dibujando su contorno negro de 3px alrededor de una
   caja que no es interactiva, y se veía como un borde grueso mal puesto. Quitarlo
   no le quita accesibilidad a nada: el foco sigue yendo ahí y el aviso sigue
   siendo su propia señal visual — lo que se quita es el anillo de "esto se
   maneja con el teclado" en algo que no se maneja. */
body.emp-acc-page .woocommerce-message:focus,
body.emp-acc-page .woocommerce-error:focus,
body.emp-acc-page .woocommerce-info:focus {
  outline: none;
}

/* El botón que WooCommerce cuela en algunos avisos ("Ver carrito"…). */
body.emp-acc-page .woocommerce-message .button,
body.emp-acc-page .woocommerce-error .button {
  margin-left: auto;
  padding: 0 14px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(17, 17, 17, .22);
  border-radius: 3px;
  background: transparent;
  color: var(--emp-black);
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ---- Anchos del formulario de dirección, los MISMOS del checkout ---------
   Los campos ya llegan con `emp-co-f--half` / `emp-co-f--full` puestas por
   `emp_co_checkout_fields()`: reusarlas aquí hace que las filas se partan igual
   que en el pago en vez de quedar a medias columnas sueltas. */

.emp .emp-acc-fields .emp-co-f--half {
  grid-column: span 1;
}

/* El nombre de la dirección ("Casa", "Trabajo") va a lo ancho: es un campo del
   tema que no existe en el checkout, y en media columna empujaba a "Nombre y
   apellido" a compartir fila con él, dejando "Teléfono" solo con un hueco al
   lado. A todo el ancho, las filas de abajo quedan repartidas igual que en el
   pago (nombre + teléfono, cédula, departamento + ciudad…). */
.emp .emp-acc-field--label {
  grid-column: 1 / -1;
}

.emp .emp-acc-fields .emp-co-f--full {
  grid-column: 1 / -1;
}

/* =========================================================================
   PÁGINA 404
   =========================================================================
   Ver la cabecera de `404.php`: la regla es que no sea un callejón sin salida.
   El bloque va centrado y con ancho de lectura; debajo, una fila de perfumes con
   la MISMA tarjeta del catálogo (`emp_product_card()` en `.emp-plp-grid--light`),
   que es la que se usa en todas las rejillas sobre fondo claro. */

.emp-404 {
  padding-top: 48px;
  padding-bottom: 64px;
}

.emp-404__box {
  max-width: 620px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.emp-404__code {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--emp-wine);
  margin-bottom: 10px;
}

.emp-404__title {
  font-family: var(--emp-serif);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.1;
  margin: 0 0 12px;
}

.emp-404__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(17, 17, 17, .62);
  margin: 0 0 22px;
  text-wrap: pretty;
}

.emp-404__search {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}

.emp-404__input {
  flex: 1;
  min-width: 200px;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid rgba(17, 17, 17, .2);
  border-radius: 3px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  color: var(--emp-black);
}

.emp-404__input:focus {
  outline: none;
  border-color: var(--emp-wine);
  box-shadow: 0 0 0 3px rgba(226, 35, 26, .12);
}

.emp .emp-404__go {
  min-height: 50px;
  flex-shrink: 0;
}

.emp-404__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* ⚠️ Botón secundario PROPIO, no `.emp-btn--ghost`. El "ghost" del tema está
   hecho para fondos OSCUROS (texto crema y borde crema al 30%) y sobre el crema
   de esta pantalla desaparecía: se veían dos textos casi invisibles donde tenían
   que estar las dos salidas. Mismo tamaño y radio que el resto de `.emp-btn`,
   solo cambian los colores. */
.emp .emp-404__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 26px;
  background: transparent;
  border: 1.5px solid rgba(17, 17, 17, .25);
  color: var(--emp-black);
  font-weight: 600;
  font-size: 15.5px;
}

.emp .emp-404__btn:hover {
  border-color: var(--emp-black);
  background: rgba(17, 17, 17, .04);
  color: var(--emp-black);
}

.emp-404__sugg {
  margin-top: 52px;
}

.emp-404__sugg-title {
  font-family: var(--emp-serif);
  font-size: 22px;
  font-weight: 600;
  text-align: center;
  margin: 0 0 18px;
}

@media (max-width: 560px) {
  .emp-404 {
    padding-top: 32px;
    padding-bottom: 44px;
  }

  .emp .emp-404__actions .emp-btn,
  .emp .emp-404__go {
    flex: 1 1 100%;
  }
}