/* Plantillas de la landing. El color base sale de las variables; aquí va el ambiente. */

.ld-hero__fx {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.ld-hero > .ld-wrap { z-index: 3; }

.ld-benefits {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(0, 0, 0, .06);
  background: var(--ld-navy);
  color: #fff;
}
.ld-benefits__track {
  display: flex;
  gap: 28px;
  width: max-content;
  padding: 10px 0;
  animation: ldMarquee 28s linear infinite;
}
.ld-benefits__track span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ld-benefits__track i { color: var(--ld-accent); }

.ld-cat { animation: ldChipIn .45s ease both; }
.ld-cats .ld-cat:nth-child(2) { animation-delay: .04s; }
.ld-cats .ld-cat:nth-child(3) { animation-delay: .08s; }
.ld-cats .ld-cat:nth-child(4) { animation-delay: .12s; }
.ld-cats .ld-cat:nth-child(5) { animation-delay: .16s; }
.ld-cats .ld-cat:nth-child(6) { animation-delay: .2s; }
.ld-cats .ld-cat:nth-child(7) { animation-delay: .24s; }
.ld-cats .ld-cat:nth-child(8) { animation-delay: .28s; }

.ld-grid .ld-card { animation: ldCardIn .55s ease both; }
.ld-grid .ld-card:nth-child(1) { animation-delay: .02s; }
.ld-grid .ld-card:nth-child(2) { animation-delay: .07s; }
.ld-grid .ld-card:nth-child(3) { animation-delay: .12s; }
.ld-grid .ld-card:nth-child(4) { animation-delay: .17s; }
.ld-grid .ld-card:nth-child(5) { animation-delay: .22s; }
.ld-grid .ld-card:nth-child(6) { animation-delay: .27s; }
.ld-grid .ld-card:nth-child(7) { animation-delay: .32s; }
.ld-grid .ld-card:nth-child(8) { animation-delay: .37s; }

.ld-reveal {
  opacity: 0;
  transform: translateY(18px);
  animation: none;
}
.ld-reveal.is-in {
  animation: ldFadeUp .6s ease both;
}

.ld-noprice .ld-card__price,
.ld-noprice .pc-modal__price,
.ld-noprice .ld-line__info small,
.ld-noprice .ld-sum { display: none; }
.ld-nodesc .ld-card__body p { display: none; }

@keyframes ldMarquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ldChipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes ldCardIn {
  from { opacity: 0; transform: translateY(14px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes ldFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes ldShimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* Tostado: cafetería */
body.ld-mood-roast .ld-hero::after {
  background: linear-gradient(100deg, rgba(28, 16, 8, .78), rgba(28, 16, 8, .28) 70%);
}
body.ld-mood-roast .ld-hero__fx::before,
body.ld-mood-roast .ld-hero__fx::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .35;
  background: radial-gradient(circle, rgba(255,255,255,.55), transparent 70%);
  animation: ldFloat 7s ease-in-out infinite;
}
body.ld-mood-roast .ld-hero__fx::before { left: 18%; bottom: 18%; }
body.ld-mood-roast .ld-hero__fx::after { left: 28%; bottom: 28%; animation-delay: 1.4s; width: 120px; height: 120px; }

/* Heladería, papelería, mascotas */
body.ld-mood-playful .ld-hero::after {
  background: linear-gradient(115deg, rgba(226, 62, 120, .42), rgba(62, 198, 224, .18) 55%, rgba(255,255,255,.05));
}
body.ld-mood-playful .ld-hero__fx::before,
body.ld-mood-playful .ld-hero__fx::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  animation: ldFloat 6s ease-in-out infinite;
}
body.ld-mood-playful .ld-hero__fx::before {
  width: 220px; height: 220px; right: 8%; top: -40px;
  background: rgba(255, 255, 255, .28);
}
body.ld-mood-playful .ld-hero__fx::after {
  width: 120px; height: 120px; right: 22%; bottom: 10%;
  background: rgba(255, 255, 255, .22);
  animation-delay: 1s;
}
body.ld-mood-playful .ld-card { border-radius: 26px; }
body.ld-mood-playful .ld-cat:hover { transform: translateY(-4px) rotate(-1deg); }

/* Restaurante, calzado, ropa, muebles */
body.ld-mood-editorial .ld-hero { min-height: clamp(380px, 58vw, 620px); }
body.ld-mood-editorial .ld-hero::after {
  background: linear-gradient(90deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.05));
}
body.ld-mood-editorial .ld-hero h1 { letter-spacing: -.03em; }
body.ld-mood-editorial .ld-card__img { aspect-ratio: 4 / 5; }
body.ld-mood-editorial .ld-card { border-radius: 2px; }

/* Comidas y deportes */
body.ld-mood-bold .ld-hero::after {
  background: linear-gradient(100deg, rgba(0,0,0,.72), rgba(0,0,0,.15));
}
body.ld-mood-bold .ld-hero__fx {
  background: repeating-linear-gradient(-18deg, transparent, transparent 18px, rgba(255,255,255,.04) 18px, rgba(255,255,255,.04) 20px);
}
body.ld-mood-bold .ld-card__badge {
  transform: rotate(-2deg);
}
body.ld-mood-bold .ld-btn { border-radius: 4px; }

/* Licorera y joyería: el fondo ya viene oscuro del preset */
body.ld-mood-night .ld-header {
  background: rgba(12, 10, 8, .9);
  border-bottom-color: rgba(212, 175, 55, .28);
}
body.ld-mood-night .ld-brand,
body.ld-mood-night .ld-nav a,
body.ld-mood-night .ld-hours,
body.ld-mood-night .ld-status-strip { color: #f6f1e7; }
body.ld-mood-night .ld-iconbtn { background: #241c14; color: #f6f1e7; }
body.ld-mood-night .ld-search {
  background: #1c1612;
  border-color: rgba(212, 175, 55, .28);
  color: #f6f1e7;
}
body.ld-mood-night .ld-search input { color: #f6f1e7; }
body.ld-mood-night .ld-footer { background: #100e0c; border-top-color: rgba(212, 175, 55, .2); }
body.ld-mood-night .ld-hero::after {
  background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25));
}
body.ld-mood-night .ld-hero__fx::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #d4af37, transparent);
  background-size: 200% 100%;
  animation: ldShimmer 4.5s linear infinite;
}
body.ld-mood-night .ld-cat {
  background: #2a2118;
  color: #f6f1e7;
  border-color: rgba(212, 175, 55, .35);
}
body.ld-mood-night .ld-cat.is-on,
body.ld-mood-night .ld-cat:hover {
  background: #c6a15b;
  color: #1a120c;
  border-color: #c6a15b;
}
body.ld-mood-night .ld-hero h1,
body.ld-mood-night .ld-hero p,
body.ld-mood-neon .ld-hero h1,
body.ld-mood-neon .ld-hero p {
  text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}
body.ld-mood-night .ld-nav.is-open { background: #16130f; }

/* Ferretería */
body.ld-mood-industrial { --ld-radius: 8px; }
body.ld-mood-industrial .ld-cat,
body.ld-mood-industrial .ld-btn,
body.ld-mood-industrial .ld-search { border-radius: 6px; }
body.ld-mood-industrial .ld-hero__fx {
  background: repeating-linear-gradient(90deg, transparent, transparent 46px, rgba(249, 115, 22, .14) 46px, rgba(249, 115, 22, .14) 48px);
}
body.ld-mood-industrial .ld-hero::after {
  background: linear-gradient(90deg, rgba(15, 23, 32, .8), rgba(15, 23, 32, .25));
}

/* Repuestos */
body.ld-mood-racing .ld-hero::after {
  background: linear-gradient(105deg, rgba(0,0,0,.78), rgba(180, 10, 0, .28));
}
body.ld-mood-racing .ld-hero__fx {
  background: repeating-linear-gradient(-28deg, transparent 0 22px, rgba(225, 6, 0, .16) 22px 24px);
}
body.ld-mood-racing .ld-card { border-radius: 8px; }
body.ld-mood-racing .ld-card__badge { background: #e10600; }

/* Belleza y accesorios */
body.ld-mood-blush .ld-hero::after {
  background: linear-gradient(100deg, rgba(90, 40, 55, .55), rgba(255, 220, 220, .12));
}
body.ld-mood-blush .ld-hero__fx::before {
  content: "";
  position: absolute;
  width: 280px; height: 280px; right: -40px; top: -60px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.45), transparent 68%);
  animation: ldFloat 8s ease-in-out infinite;
}
body.ld-mood-blush .ld-card { border-radius: 24px; }

/* Droguería */
body.ld-mood-clinic .ld-hero::after {
  background: linear-gradient(90deg, rgba(15, 80, 74, .72), rgba(15, 80, 74, .12));
}
body.ld-mood-clinic .ld-card { border-radius: 16px; box-shadow: 0 8px 24px rgba(15, 118, 110, .06); }
body.ld-mood-clinic .ld-hero__fx::after {
  content: "";
  position: absolute;
  inset: auto 8% 16% auto;
  width: 90px; height: 90px;
  border: 2px solid rgba(255,255,255,.35);
  border-radius: 50%;
  animation: ldFloat 5s ease-in-out infinite;
}

/* Tecnología */
body.ld-mood-neon .ld-header {
  background: rgba(2, 6, 23, .9);
  border-bottom-color: rgba(56, 189, 248, .25);
}
body.ld-mood-neon .ld-brand,
body.ld-mood-neon .ld-nav a,
body.ld-mood-neon .ld-hours,
body.ld-mood-neon .ld-status-strip { color: #e2e8f0; }
body.ld-mood-neon .ld-iconbtn { background: #0f172a; color: #e2e8f0; }
body.ld-mood-neon .ld-search,
body.ld-mood-neon .ld-footer { background: #0b1224; color: #e2e8f0; border-color: rgba(56, 189, 248, .25); }
body.ld-mood-neon .ld-search input { color: #e2e8f0; }
body.ld-mood-neon .ld-nav.is-open { background: #0b1224; }
body.ld-mood-neon .ld-hero::after {
  background: linear-gradient(100deg, rgba(2, 6, 23, .82), rgba(2, 6, 23, .2));
}
body.ld-mood-neon .ld-hero__fx {
  background:
    linear-gradient(rgba(56, 189, 248, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(56, 189, 248, .08) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}
body.ld-mood-neon .ld-btn {
  box-shadow: 0 0 0 1px rgba(56, 189, 248, .35), 0 8px 24px rgba(34, 211, 238, .15);
}
body.ld-mood-neon .ld-card { border-radius: 12px; }

/* Floristería */
body.ld-mood-botanical .ld-hero::after {
  background: linear-gradient(100deg, rgba(30, 50, 12, .62), rgba(219, 39, 119, .12));
}
body.ld-mood-botanical .ld-hero__fx::before,
body.ld-mood-botanical .ld-hero__fx::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50% 0 50% 50%;
  background: rgba(255, 255, 255, .45);
  animation: ldFloat 5.5s ease-in-out infinite;
}
body.ld-mood-botanical .ld-hero__fx::before { right: 16%; top: 22%; }
body.ld-mood-botanical .ld-hero__fx::after { right: 24%; top: 40%; animation-delay: .8s; transform: rotate(40deg); }

/* Mercado: ola bajo el hero */
body.ld-mood-fresh .ld-hero::after {
  background: linear-gradient(90deg, rgba(10, 50, 24, .7), rgba(10, 50, 24, .15));
}
body.ld-mood-fresh .ld-benefits { background: #14532d; }

/* Pescadería: hielo, una ola lenta y burbujas muy pocas */
body.ld-mood-tide .ld-hero::after {
  background:
    linear-gradient(180deg, rgba(8, 22, 38, .18), transparent 30%),
    linear-gradient(100deg, rgba(8, 22, 38, .78) 0%, rgba(8, 22, 38, .4) 54%, rgba(8, 22, 38, .16) 100%);
}
body.ld-mood-tide .ld-hero h1 {
  letter-spacing: -.03em;
  font-weight: 600;
}
body.ld-mood-tide .ld-hero__fx::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 64px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 64' preserveAspectRatio='none'%3E%3Cpath d='M0 32c60 16 120 16 180 0s120-16 180 0 120 16 180 0 120-16 180 0v32H0z' fill='%23ffffff' fill-opacity='.2'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 720px 64px;
  background-position: 0 100%;
  animation: ldTide 16s linear infinite;
}
body.ld-mood-tide .ld-hero__fx::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 68%, rgba(255,255,255,.5) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 36%, rgba(255,255,255,.35) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 58%, rgba(255,255,255,.28) 0 3px, transparent 4px);
  animation: ldTideBubbles 8s ease-in-out infinite;
}
body.ld-mood-tide .ld-card {
  border-radius: 14px;
  box-shadow: 0 10px 28px rgba(12, 35, 64, .06);
}
body.ld-mood-tide .ld-cat.is-on {
  box-shadow: inset 0 -2px 0 var(--ld-accent);
}
@keyframes ldTide {
  from { background-position: 0 100%; }
  to { background-position: -720px 100%; }
}
@keyframes ldTideBubbles {
  0%, 100% { transform: translateY(0); opacity: .45; }
  50% { transform: translateY(-8px); opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .ld-benefits__track,
  .ld-cat,
  .ld-grid .ld-card,
  .ld-hero__fx::before,
  .ld-hero__fx::after,
  .ld-reveal.is-in { animation: none !important; }
  .ld-reveal { opacity: 1; transform: none; }
}