/* ============================================================
   LOWKEY PARFUMS — DISCOVERY LAB
   Identidad propia: acento frío "vidrio de laboratorio".
   ============================================================ */
.dl { --accent:#9fc2cf; --accent-soft:#c8e0e8; --accent-glow:rgba(159,194,207,0.32); }

/* ---------- Hero ---------- */
.dl-hero { position: relative; min-height: 100svh; display: flex; align-items: center; text-align: center; overflow: hidden; }
.dl-hero .wrap { position: relative; z-index: 2; }
.dl-kicker { margin-bottom: 1.4rem; }
.dl-hero h1 { font-size: clamp(3.2rem, 2rem + 7vw, 9rem); line-height: 0.9; letter-spacing: -0.01em; }
.dl-hero h1 em { font-style: italic; color: var(--accent); }
.dl-hero .sub { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--ivory-dim); margin-top: 1rem; }
.dl-hero p.lead2 { max-width: 50ch; margin: 1.8rem auto 2.4rem; color: var(--ivory-dim); }
.dl-vial { height: clamp(160px, 26vh, 280px); margin: 0 auto 1.5rem; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.55)); animation: floaty 5s var(--ease-soft) infinite; }
@keyframes floaty { 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce){ .dl-vial { animation: none; } }

/* ---------- ¿Qué es un decant? ---------- */
.dl-explain { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,2vw,1.6rem); }
.dl-ex { padding: clamp(1.4rem,2.5vw,2rem); border: 1px solid var(--line); background: linear-gradient(160deg, var(--bg-2), var(--bg)); position: relative; }
.dl-ex .n { font-family: var(--display); font-size: var(--step-2); color: var(--accent); line-height: 1; }
.dl-ex h3 { font-family: var(--sans); font-size: var(--step--1); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory); margin: 1rem 0 0.6rem; font-weight: 400; }
.dl-ex p { color: var(--ivory-dim); font-size: var(--step--1); }

/* ---------- Comparación Botella vs Decant ---------- */
.dl-compare { position: relative; }
.dl-compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(1.5rem,4vw,4rem); }
.dl-col { text-align: center; padding: clamp(1.5rem,3vw,2.5rem); border: 1px solid var(--line); position: relative; }
.dl-col.is-decant { border-color: var(--accent); }
.dl-col img { height: clamp(180px, 30vh, 320px); width: auto; margin-inline: auto; filter: drop-shadow(0 30px 40px rgba(0,0,0,0.5)); }
.dl-col .tag { font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ivory-mute); }
.dl-col h3 { font-family: var(--display); font-size: var(--step-2); margin: 0.4rem 0 0.8rem; }
.dl-col ul { display: inline-block; text-align: left; color: var(--ivory-dim); font-size: var(--step--1); }
.dl-col li { padding: 0.35rem 0 0.35rem 1.5rem; position: relative; }
.dl-col li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
.dl-vs { font-family: var(--display); font-style: italic; font-size: var(--step-2); color: var(--ivory-mute); }
.dl-compare .quote { text-align: center; font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--ivory); margin-top: clamp(2rem,4vw,3rem); }

/* ---------- Cómo funciona (pasos) ---------- */
.dl-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem,3vw,3rem); counter-reset: step; }
.dl-step { text-align: center; }
.dl-step .ico { font-size: 2rem; }
.dl-step h4 { font-family: var(--display); font-size: var(--step-1); margin: 0.8rem 0 0.4rem; }
.dl-step p { color: var(--ivory-dim); font-size: var(--step--1); max-width: 30ch; margin-inline: auto; }

/* ---------- Filtros + catálogo ---------- */
.dl-filters { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: clamp(2rem,4vw,3rem); }
.dl-filter { font-size: var(--step--1); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.7em 1.3em; border: 1px solid var(--line); color: var(--ivory-dim); transition: 0.4s var(--ease); }
.dl-filter:hover { color: var(--ivory); border-color: var(--ivory-mute); }
.dl-filter.is-active { background: var(--accent); color: #0a0a0b; border-color: var(--accent); }

.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,1.6vw,1.4rem); }
.dl-card { border: 1px solid var(--line-soft); background: linear-gradient(170deg, var(--bg-2), var(--bg)); display: flex; flex-direction: column; transition: border-color 0.45s, transform 0.5s var(--ease); }
.dl-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.dl-thumb { position: relative; aspect-ratio: 1; }
.dl-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.2rem;
  -webkit-mask-image: radial-gradient(ellipse 60% 66% at 50% 46%, #000 42%, transparent 76%);
          mask-image: radial-gradient(ellipse 60% 66% at 50% 46%, #000 42%, transparent 76%); }
.dl-body { padding: clamp(1rem,1.6vw,1.4rem) clamp(1rem,1.6vw,1.4rem) clamp(1.2rem,2vw,1.6rem); display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--line-soft); margin-top: auto; }
.dl-brand { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.dl-card h3 { font-family: var(--display); font-size: var(--step-1); line-height: 1; }
.dl-sizes { display: flex; gap: 0.4rem; margin-top: 0.2rem; }
.dl-size { flex: 1; font-size: var(--step--1); padding: 0.5em 0; border: 1px solid var(--line); color: var(--ivory-dim); transition: 0.3s; }
.dl-size:hover { border-color: var(--ivory-mute); color: var(--ivory); }
.dl-size.is-active { background: var(--accent); color: #0a0a0b; border-color: var(--accent); }
.dl-price { font-family: var(--display); }
.dl-price .amt { font-size: var(--step-1); color: var(--ivory); }
.dl-price .per { font-family: var(--sans); font-size: var(--step--1); color: var(--ivory-mute); letter-spacing: 0.06em; }
.dl-buy { padding: 0.9em 1.2em; margin-top: 0.2rem; }
.dl-full { font-size: var(--step--1); color: var(--ivory-mute); text-align: center; }

/* ---------- Packs ---------- */
.dl-packs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem,1.6vw,1.4rem); }
.dl-pack { border: 1px solid var(--line); background: linear-gradient(170deg, var(--bg-2), var(--bg)); overflow: hidden; display: flex; flex-direction: column; transition: border-color 0.45s, transform 0.5s var(--ease); }
.dl-pack:hover { border-color: var(--accent); transform: translateY(-4px); }
.dl-pack-thumbs { display: flex; justify-content: center; gap: 0.2rem; padding: 1.6rem 1rem 0.6rem; background: radial-gradient(80% 80% at 50% 0%, var(--accent-glow), transparent 70%); }
.dl-pack-thumbs img { height: clamp(56px, 9vw, 86px); width: auto; object-fit: contain; filter: drop-shadow(0 12px 16px rgba(0,0,0,0.5)); }
.dl-pack-thumbs img:nth-child(even){ transform: translateY(6px); }
.dl-pack-body { padding: clamp(1.2rem,2vw,1.6rem); display: flex; flex-direction: column; gap: 0.5rem; flex: 1; border-top: 1px solid var(--line-soft); }
.dl-pack-count { font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); }
.dl-pack h3 { font-family: var(--display); font-size: var(--step-1); }
.dl-pack p { color: var(--ivory-dim); font-size: var(--step--1); flex: 1; }
.dl-pack-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.5rem; }
.dl-pack-price { font-family: var(--display); font-size: var(--step-1); color: var(--ivory); }

/* ---------- Discovery Club (teaser) ---------- */
.dl-club { text-align: center; position: relative; overflow: hidden; border: 1px solid var(--line); padding: clamp(3rem,6vw,5rem) var(--pad); background: linear-gradient(160deg, var(--bg-2), var(--bg)); }
.dl-club .soon { display: inline-block; font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 0.4em 1em; margin-bottom: 1.5rem; }
.dl-club h2 { font-size: var(--step-3); max-width: 18ch; margin: 0 auto 1.2rem; }
.dl-club p { max-width: 46ch; margin: 0 auto; color: var(--ivory-dim); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .dl-explain { grid-template-columns: 1fr 1fr; }
  .dl-grid, .dl-packs { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 880px){
  .dl-grid, .dl-packs { grid-template-columns: repeat(2, 1fr); }
  .dl-steps { grid-template-columns: 1fr; gap: 2rem; }
  .dl-compare-grid { grid-template-columns: 1fr; }
  .dl-vs { padding: 1rem 0; }
}
@media (max-width: 560px){
  .dl-explain { grid-template-columns: 1fr; }
  .dl-grid, .dl-packs { grid-template-columns: 1fr; }
}