/* "Descubrir": feed vertical (emprecenter-discover.js). Pantalla completa en mobile, columna tipo
   celular centrada en desktop. Usa los tokens de emprecenter.css (:root --ec-*). */

html.ec-dfeed-open { overflow: hidden; }

.ec-dfeed {
  width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh;
  margin: 0; padding: 0; border: 0; background: #0b1424; color: #fff; overflow: hidden;
}
.ec-dfeed::backdrop { background: rgba(5, 12, 24, .85); }
.ec-dfeed__bar {
  position: absolute; z-index: 3; top: 0; right: 0; left: 0; display: flex; align-items: center; gap: 8px;
  padding: max(10px, env(safe-area-inset-top)) 12px 10px;
  background: linear-gradient(rgba(5, 12, 24, .7), rgba(5, 12, 24, 0)); pointer-events: none;
}
.ec-dfeed__bar > * { pointer-events: auto; }
.ec-dfeed__brand { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: 17px; font-weight: 800; }
.ec-dfeed__brand .material-icons { color: var(--ec-secondary); font-size: 20px; }
.ec-dfeed__tab, .ec-dfeed__close {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border: 0;
  border-radius: 999px; background: rgba(255, 255, 255, .14); color: #fff; font-size: 13px; font-weight: 700;
}
.ec-dfeed__close, .ec-dfeed__icon { width: 40px; padding: 0; justify-content: center; }
.ec-dfeed__icon {
  display: inline-flex; align-items: center; min-height: 40px; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .14); color: #fff;
}
.ec-dfeed__icon .material-icons { font-size: 20px; }
.ec-dfeed__tab .material-icons { font-size: 18px; color: #ff6b81; }

.ec-dfeed__track {
  height: 100%; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; scrollbar-width: none; outline: none;
}
.ec-dfeed__track::-webkit-scrollbar { display: none; }

.ec-dfeed-card {
  position: relative; height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; overflow: hidden;
  background: #0b1424;
}
.ec-dfeed-card__media { position: absolute; inset: 0; width: 100%; height: 100%; }
.ec-dfeed-card__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Galería: fotos lado a lado, se deslizan a los costados dentro de la carta (el feed va en vertical). */
.ec-dfeed-gallery {
  display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none;
}
.ec-dfeed-gallery::-webkit-scrollbar { display: none; }
/* Cada foto entera (contain) sobre ella misma desenfocada: una foto cuadrada o apaisada no se
   recorta. Corrida un poco hacia arriba para que la info de abajo no la tape. `is-fill` (lo pone el
   JS) = la foto ya tiene casi la forma de la pantalla: cover, sin fondo. */
.ec-dfeed-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; scroll-snap-align: center; background: #0b1424; }
.ec-dfeed-slide img { user-select: none; -webkit-user-drag: none; }
.ec-dfeed-slide__bg {
  position: absolute; top: -8%; left: -8%; width: 116%; height: 116%; object-fit: cover;
  filter: blur(28px) brightness(.5) saturate(1.15);
}
.ec-dfeed-slide__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 36%; }
.ec-dfeed-slide.is-fill .ec-dfeed-slide__photo { object-fit: cover; object-position: center; }
.ec-dfeed-slide.is-fill .ec-dfeed-slide__bg { display: none; }
.ec-dfeed-dots {
  position: absolute; z-index: 2; top: calc(max(10px, env(safe-area-inset-top)) + 56px); left: 50%; display: flex; gap: 5px;
  transform: translateX(-50%); pointer-events: none;
}
.ec-dfeed-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: width .2s ease, background .2s ease; }
.ec-dfeed-dots span.is-active { width: 16px; border-radius: 3px; background: #fff; }
.ec-dfeed-heart {
  position: absolute; z-index: 3; top: 42%; left: 50%; color: #fff; opacity: 0; pointer-events: none;
  transform: translate(-50%, -50%) scale(.4); filter: drop-shadow(0 4px 18px rgba(0, 0, 0, .45));
}
.ec-dfeed-heart .material-icons { font-size: 110px; color: #ff6b81; }
.ec-dfeed-heart.is-beating { animation: ec-dfeed-heart .8s ease-out both; }
@keyframes ec-dfeed-heart {
  15% { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30% { transform: translate(-50%, -50%) scale(.95); }
  45%, 70% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -70%) scale(.9); }
}
.ec-dfeed-card--product::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 12, 24, 0) 45%, rgba(5, 12, 24, .92) 100%);
}
.ec-dfeed-card__labels { position: absolute; z-index: 2; top: calc(max(10px, env(safe-area-inset-top)) + 52px); left: 14px; pointer-events: none; }
.ec-dfeed-card__labels:empty { display: none; }
.ec-dfeed-card__new {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px; background: var(--ec-secondary); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
}
.ec-dfeed-card__info {
  position: absolute; z-index: 2; right: 84px; bottom: 0; left: 0;
  padding: 0 16px max(18px, env(safe-area-inset-bottom));
}
.ec-dfeed-card__business { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.ec-dfeed-card__business:hover { color: #fff; }
.ec-dfeed-card__business strong { display: block; font-size: 15px; line-height: 1.2; }
.ec-dfeed-card__business small { display: block; color: rgba(255, 255, 255, .75); font-size: 12px; }
.ec-dfeed-avatar {
  display: grid; flex: 0 0 38px; width: 38px; height: 38px; place-items: center; overflow: hidden;
  border: 2px solid #fff; border-radius: 50%; background: var(--ec-accent-light); color: var(--ec-primary); font-weight: 800;
}
.ec-dfeed-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ec-dfeed-avatar--lg { flex-basis: 64px; width: 64px; height: 64px; font-size: 24px; }
.ec-dfeed-verified { color: var(--ec-secondary); font-size: 16px; vertical-align: -3px; }
.ec-dfeed-card__title {
  display: -webkit-box; margin: 10px 0 6px; overflow: hidden; color: #fff; font-size: 20px; font-weight: 800; line-height: 1.25;
  text-decoration: none; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ec-dfeed-card__title:hover { color: #fff; }
.ec-dfeed-card__excerpt {
  display: -webkit-box; margin: -2px 0 8px; overflow: hidden; color: rgba(255, 255, 255, .86); font-size: 14px; line-height: 1.35;
  -webkit-box-orient: vertical; -webkit-line-clamp: 2;
}
.ec-dfeed-card__meta { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ec-dfeed-chip { padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; }
.ec-dfeed-card__price { font-weight: 800; }
.ec-dfeed-card__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ec-dfeed-card__contact { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; font-weight: 800; }
.ec-dfeed-card__more { color: #fff; font-weight: 700; text-decoration: underline; }
.ec-dfeed-card__more:hover { color: var(--ec-accent-light); }

.ec-dfeed-card__side {
  position: absolute; z-index: 2; right: 10px; bottom: max(24px, env(safe-area-inset-bottom)); display: grid; gap: 16px;
}
.ec-dfeed-action {
  display: grid; justify-items: center; gap: 3px; width: 66px; padding: 0; border: 0; background: none; color: #fff;
  font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}
.ec-dfeed-action .material-icons {
  display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; background: rgba(5, 12, 24, .45);
  font-size: 26px; transition: transform .15s ease;
}
.ec-dfeed-action[aria-pressed="true"] .material-icons { color: #ff6b81; transform: scale(1.08); }
.ec-dfeed-action:active .material-icons { transform: scale(.9); }

/* "Conocé a…" */
.ec-dfeed-card--business { display: grid; place-items: center; background: linear-gradient(160deg, var(--ec-primary) 0%, #0a3b6b 55%, var(--ec-secondary-dark) 100%); }
.ec-dfeed-spot { width: min(420px, 100%); padding: 72px 22px 32px; }
.ec-dfeed-spot__eyebrow { display: inline-flex; align-items: center; gap: 6px; color: var(--ec-accent-light); font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ec-dfeed-spot__head { display: flex; align-items: center; gap: 14px; margin: 14px 0; color: #fff; text-decoration: none; }
.ec-dfeed-spot__head:hover { color: #fff; }
.ec-dfeed-spot__head strong { display: block; font-size: 22px; line-height: 1.2; }
.ec-dfeed-spot__head small { color: rgba(255, 255, 255, .8); font-size: 14px; }
.ec-dfeed-spot__story { margin: 0 0 18px; color: rgba(255, 255, 255, .92); font-size: 16px; line-height: 1.55; }
.ec-dfeed-spot__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 20px; }
.ec-dfeed-spot__thumbs img { width: 100%; aspect-ratio: 4 / 5; border-radius: var(--ec-radius-md); object-fit: cover; }

/* Intereses, cierre y guardados */
.ec-dfeed-intro, .ec-dfeed-end { display: grid; place-items: center; height: 100dvh; background: linear-gradient(160deg, #0b1424, var(--ec-primary)); }
.ec-dfeed-intro__inner, .ec-dfeed-end__inner { width: min(440px, 100%); padding: 72px 22px 32px; text-align: center; }
.ec-dfeed-intro h2, .ec-dfeed-end h2 { margin: 8px 0; color: #fff; font-size: 24px; font-weight: 800; }
.ec-dfeed-intro p, .ec-dfeed-end p { color: rgba(255, 255, 255, .82); }
.ec-dfeed-end p a, .ec-dfeed-end__inner a { color: var(--ec-accent-light); }
.ec-dfeed-end .material-icons { color: var(--ec-secondary); font-size: 52px; }
.ec-dfeed-intro__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px 0; }
.ec-dfeed-chip-toggle {
  min-height: 40px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px;
  background: transparent; color: #fff; font-size: 14px; font-weight: 700;
}
.ec-dfeed-chip-toggle[aria-pressed="true"] { border-color: var(--ec-secondary); background: var(--ec-secondary); }
.ec-dfeed-skeleton-chip { width: 110px; height: 40px; border-radius: 999px; background: rgba(255, 255, 255, .12); }
.ec-dfeed-intro__actions, .ec-dfeed-end__actions { display: grid; gap: 10px; justify-items: center; }
.ec-dfeed-intro .btn-link { color: rgba(255, 255, 255, .85); }
.ec-dfeed-end .btn-outline-primary { border-color: #fff; color: #fff; }

.ec-dfeed-skeleton { background: linear-gradient(110deg, #0b1424 30%, #16243a 50%, #0b1424 70%); background-size: 200% 100%; animation: ec-dfeed-shimmer 1.2s linear infinite; }
@keyframes ec-dfeed-shimmer { to { background-position: -200% 0; } }

.ec-dfeed-toast {
  position: absolute; z-index: 4; right: 16px; bottom: max(96px, env(safe-area-inset-bottom)); left: 16px;
  padding: 12px 14px; border-radius: var(--ec-radius-md); background: #fff; color: var(--ec-text); box-shadow: var(--ec-shadow); font-size: 14px;
}
.ec-dfeed-toast a { color: var(--ec-primary); font-weight: 800; }

/* Badge "N nuevos" sobre los botones que abren Descubrir */
[data-ec-discover] { position: relative; }
.ec-discover-count, .ec-mobile-nav__item .ec-discover-count {
  position: absolute; top: -2px; right: calc(50% - 26px); width: auto; min-width: 18px; height: 18px; padding: 0 5px;
  border: 2px solid #fff; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10px; font-weight: 800; line-height: 14px;
  text-align: center; overflow: visible;
}
.ec-header-discover .ec-discover-count { top: -4px; right: -8px; }
/* Barra mobile: el contador vive dentro del círculo ✨ (emprecenter-discover.js) y se ancla a su
   esquina. Le gana a `.ec-mobile-nav__item span:not(...) { width: 100% }` y al margin-top de la
   etiqueta (emprecenter.css), que lo estiraban sobre todo el botón. */
.ec-mobile-nav__item .ec-mobile-nav__discover-badge > .ec-discover-count {
  z-index: 1; top: -5px; right: -9px; left: auto; width: auto; max-width: none; margin: 0;
  box-shadow: 0 2px 6px rgba(8, 38, 92, .25);
}
body.page-product .ec-mobile-nav__item .ec-mobile-nav__discover-badge > .ec-discover-count { top: -7px; right: -14px; }
.ec-header-discover .header-block__action-btn { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; color: inherit; }
.ec-market-discover-more { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px; width: auto; min-width: max-content; border: 0; background: none; cursor: pointer; white-space: nowrap; }
.ec-market-discover-more .material-icons { font-size: 18px; }

@media (min-width: 768px) {
  .ec-dfeed { width: min(440px, 100vw); height: min(860px, 94dvh); margin: auto; border-radius: var(--ec-radius-xl); box-shadow: 0 24px 80px rgba(0, 0, 0, .5); }
  .ec-dfeed-card, .ec-dfeed-intro, .ec-dfeed-end { height: min(860px, 94dvh); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-dfeed-skeleton { animation: none; }
  .ec-dfeed-action .material-icons { transition: none; }
}

/* Sobre los fondos navy del feed, el btn-primary (navy) no contrasta: acento teal. */
.ec-dfeed .btn-primary { border-color: var(--ec-secondary); background: var(--ec-secondary); color: #fff; font-weight: 800; }
.ec-dfeed .btn-primary:hover, .ec-dfeed .btn-primary:focus { border-color: var(--ec-secondary-dark); background: var(--ec-secondary-dark); color: #fff; }
/* .ec-slider-actions button fuerza 44x44 a todo botón de esa barra (flechas del slider). */
.ec-slider-actions .ec-market-discover-more {
  display: inline-flex; width: auto; height: 44px; padding: 0 14px; gap: 6px; place-items: initial; align-items: center; justify-content: center;
  border: 1px solid var(--ec-secondary); border-radius: 999px; background: var(--ec-accent-light); color: var(--ec-primary);
  font-size: 14px; font-weight: 800;
}
.ec-slider-actions .ec-market-discover-more:hover { border-color: var(--ec-secondary-dark); background: var(--ec-secondary); color: #fff; }
.ec-slider-actions .ec-market-discover-more .material-icons { color: var(--ec-secondary-dark); font-size: 18px; line-height: 1; }
.ec-slider-actions .ec-market-discover-more:hover .material-icons { color: #fff; }
@media (max-width: 575.98px) {
  .ec-slider-actions .ec-market-discover-more { height: 38px; padding: 0 10px; font-size: 13px; }
}

/* Pista de "deslizá" (primera vez) */
.ec-dfeed-hint {
  position: absolute; z-index: 4; top: 46%; left: 50%; display: grid; justify-items: center; gap: 10px;
  width: max-content; max-width: calc(100% - 48px); padding: 16px 20px; border-radius: var(--ec-radius-lg);
  background: rgba(5, 12, 24, .78); color: #fff; font-size: 15px; font-weight: 800; text-align: center;
  transform: translate(-50%, -50%); pointer-events: none; backdrop-filter: blur(4px);
  animation: ec-dfeed-hint-in .35s ease-out both;
}
.ec-dfeed-hint__icon .material-icons { font-size: 42px; animation: ec-dfeed-hint-swipe 1.4s ease-in-out infinite; }
.ec-dfeed-hint.is-leaving { opacity: 0; transition: opacity .3s ease; }
@keyframes ec-dfeed-hint-in { from { opacity: 0; transform: translate(-50%, -40%); } }
@keyframes ec-dfeed-hint-swipe {
  0% { transform: translateY(14px); opacity: 0; }
  25% { opacity: 1; }
  70% { transform: translateY(-14px); opacity: 1; }
  100% { transform: translateY(-18px); opacity: 0; }
}

/* Flechas ↑↓: solo con mouse (en touch el gesto es el dedo) */
.ec-dfeed__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ec-dfeed-hint { max-width: min(260px, calc(100% - 120px)); }
  .ec-dfeed__nav { position: absolute; z-index: 3; top: 50%; right: 12px; display: grid; gap: 10px; transform: translateY(-50%); }
  .ec-dfeed__nav button {
    display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .16); color: #fff; transition: background .15s ease;
  }
  .ec-dfeed__nav button:hover { background: rgba(255, 255, 255, .3); }
  /* Las acciones laterales de la carta quedan abajo; las flechas arriba de ellas no se pisan. */
  .ec-dfeed-card__side { bottom: max(24px, env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .ec-dfeed-hint, .ec-dfeed-hint__icon .material-icons { animation: none; }
}

.ec-dfeed-card__new--interest { background: rgba(5, 12, 24, .62); text-transform: none; letter-spacing: 0; }
.ec-dfeed-card__new--interest .material-icons { color: var(--ec-secondary); font-size: 15px; }
.ec-dfeed-card__proof { display: inline-flex; align-items: center; gap: 3px; color: rgba(255, 255, 255, .9); font-size: 12px; font-weight: 700; }
.ec-dfeed-card__proof .material-icons { color: #ff6b81; font-size: 15px; }

/* Novedad del día */
.ec-dfeed-card--story { display: grid; place-items: center; background: linear-gradient(160deg, #3b1f5e 0%, var(--ec-primary) 55%, var(--ec-secondary-dark) 100%); }
.ec-dfeed-card__media--blur img { filter: blur(18px) brightness(.55); transform: scale(1.15); }
.ec-dfeed-story { position: relative; z-index: 2; width: min(420px, 100%); padding: 72px 22px 32px; }
.ec-dfeed-story__head { display: flex; align-items: center; gap: 14px; color: #fff; text-decoration: none; }
.ec-dfeed-story__head:hover { color: #fff; }
.ec-dfeed-story__head strong { display: block; font-size: 19px; line-height: 1.2; }
.ec-dfeed-story__head small { display: inline-flex; align-items: center; gap: 4px; color: rgba(255, 255, 255, .8); font-size: 13px; }
.ec-dfeed-story__head small .material-icons { font-size: 16px; color: var(--ec-secondary); }
.ec-dfeed-story__ring { display: grid; flex: 0 0 72px; width: 72px; height: 72px; place-items: center; border-radius: 50%; background: conic-gradient(var(--ec-secondary), #ff6b81, var(--ec-warning), var(--ec-secondary)); }
.ec-dfeed-story__ring .ec-dfeed-avatar { border-width: 3px; border-color: #0b1424; }
.ec-dfeed-story__text { margin: 26px 0; color: #fff; font-size: clamp(22px, 6vw, 28px); font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.ec-dfeed-story__product {
  display: flex; align-items: center; gap: 12px; margin-bottom: 22px; padding: 8px 10px; border-radius: var(--ec-radius-md);
  background: rgba(255, 255, 255, .12); color: #fff; font-weight: 700; text-decoration: none;
}
.ec-dfeed-story__product:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.ec-dfeed-story__product img { width: 48px; height: 48px; border-radius: var(--ec-radius-sm); object-fit: cover; }
.ec-dfeed-story__product .material-icons { margin-left: auto; }

@media (prefers-reduced-motion: reduce) {
  .ec-dfeed-heart.is-beating { animation-duration: .01s; }
}