/* ===== Proyecto D'Litro · colores de sus videos: verde selva, lima, amarillo mango ===== */
:root {
  --bg: #06240f;
  --bg-2: #0a3317;
  --line: rgba(255, 255, 255, .14);
  --text: #fffbe8;
  --muted: #b9d4a8;
  --accent: #ffd21a;         /* amarillo mango */
  --accent-2: #9be22d;       /* lima */
  --accent-ink: #2a1600;
  --brown: #3b1f05;
  --font: 'Nunito Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Lilita One', 'Nunito Sans', sans-serif;
  --radius: 22px;
}
body { background: radial-gradient(1200px 700px at 80% -10%, #1d6b1e 0%, transparent 60%), radial-gradient(900px 600px at -10% 40%, #0e4a1b 0%, transparent 60%), var(--bg); background-attachment: fixed; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: 0; line-height: .95; }
.btn { font-weight: 800; }
.btn.accent { box-shadow: 0 5px 0 #b88700; }
.btn.accent:hover { --glow: rgba(255, 210, 26, .5); box-shadow: 0 7px 0 #b88700, 0 18px 40px -12px rgba(255,210,26,.6); }
.nav-in { background: rgba(6, 36, 15, .6); }
.dl-navword { font-family: var(--font-display); font-size: 24px; color: var(--accent); -webkit-text-stroke: 1px var(--brown); text-shadow: 0 2px 0 var(--brown); }
.v-play { font-weight: 800; }
.v:hover .v-play { background: var(--accent); color: var(--accent-ink); }
.v:hover .v-play i { background: var(--accent-ink); }
.v:hover .v-play i::before { border-left-color: var(--accent); }

/* ---------- Hero ---------- */
.dl-hero { position: relative; padding: clamp(120px, 16vh, 170px) 0 clamp(60px, 8vw, 100px); overflow: hidden; isolation: isolate; }
.dl-rays { position: absolute; z-index: -1; left: 72%; top: 50%; width: 1600px; height: 1600px; transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(155,226,45,.08) 0 8deg, transparent 8deg 20deg);
  mask: radial-gradient(closest-side, #000 20%, transparent 75%); -webkit-mask: radial-gradient(closest-side, #000 20%, transparent 75%);
  animation: spin 80s linear infinite; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .dl-rays { animation: none; } }
.dl-hero-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; }
.dl-hero-copy { display: grid; gap: 22px; justify-items: start; }
.dl-chip { padding: 8px 16px; border-radius: 99px; background: var(--accent-2); color: #0d2a06; font-weight: 800; font-size: 13.5px; transform: rotate(-2deg); }
.dl-title {
  font-size: clamp(96px, 15vw, 210px); color: var(--accent); line-height: .85;
  -webkit-text-stroke: clamp(3px, .5vw, 7px) var(--brown); paint-order: stroke fill;
  text-shadow: 0 clamp(6px, .9vw, 12px) 0 var(--brown), 0 30px 60px rgba(0,0,0,.4);
  transform: rotate(-3deg); transform-origin: left;
}
.dl-lead { color: var(--muted); font-size: 17px; max-width: 520px; }
.dl-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.dl-cta .btn svg { width: 14px; height: 14px; }

.dl-stack { position: relative; height: clamp(440px, 46vw, 600px); }
.dl-stack .v { position: absolute; width: 42%; top: 50%; left: 50%; border: 5px solid #fffbe8; border-radius: 28px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.6); }
.dl-stack .s1 { transform: translate(-125%, -46%) rotate(-10deg) scale(.88); }
.dl-stack .s2 { transform: translate(-50%, -50%) rotate(2deg); z-index: 2; }
.dl-stack .s3 { transform: translate(25%, -44%) rotate(11deg) scale(.88); }
.dl-burst { position: absolute; z-index: 3; right: 4%; top: 2%; width: 110px; height: 110px; display: grid; place-items: center; font-family: var(--font-display); font-size: 24px; color: var(--accent-ink); background: var(--accent);
  clip-path: polygon(50% 0, 61% 14%, 79% 9%, 80% 27%, 97% 33%, 87% 50%, 97% 67%, 80% 73%, 79% 91%, 61% 86%, 50% 100%, 39% 86%, 21% 91%, 20% 73%, 3% 67%, 13% 50%, 3% 33%, 20% 27%, 21% 9%, 39% 14%);
  transform: rotate(12deg); animation: pop 3s ease-in-out infinite; }
@keyframes pop { 50% { transform: rotate(4deg) scale(1.08); } }
@media (max-width: 880px) {
  .dl-hero-in { grid-template-columns: 1fr; }
  .dl-stack { height: 112vw; max-height: 560px; }
  .dl-stack .v { width: 46%; }
  .dl-burst { width: 84px; height: 84px; font-size: 19px; }
}

/* Cinta de sabores */
.dl-ticker { overflow: hidden; background: var(--accent); color: var(--accent-ink); transform: rotate(-1.5deg); margin: 0 -20px; border-block: 4px solid var(--brown); }
.dl-ticker-track { display: flex; align-items: center; gap: 28px; width: max-content; padding: 14px 0; animation: marq 30s linear infinite; }
.dl-ticker span { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 34px); white-space: nowrap; }
.dl-ticker b { font-size: 20px; }
@keyframes marq { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .dl-ticker-track { animation: none; } }

/* ---------- Grilla de videos ---------- */
.dl-head { text-align: center; display: grid; gap: 14px; justify-items: center; margin-bottom: clamp(36px, 5vw, 60px); }
.dl-head h2 { font-size: clamp(44px, 7vw, 92px); }
.dl-head h2 span, .dl-what h2 span, .dl-end h2 span { color: var(--accent); }
.dl-head p { color: var(--muted); max-width: 480px; }
.dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 24px); }
.dl-grid figure { margin: 0; display: grid; gap: 12px; }
.dl-grid figure:nth-child(even) { transform: translateY(30px); }
.dl-grid figure:nth-child(even).reveal:not(.in) { transform: translateY(56px); }
.dl-grid .v { border: 4px solid rgba(255,251,232,.9); box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.dl-grid figcaption { display: grid; gap: 2px; padding-left: 4px; }
.dl-grid figcaption b { font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.dl-grid figcaption span { color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } }

/* Qué incluye */
.dl-what { padding: clamp(80px, 10vw, 130px) 0; }
.dl-what-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; background: linear-gradient(135deg, #0f4a1c, #0a3315); border: 1px solid var(--line); border-radius: 36px; padding: clamp(30px, 5vw, 64px); max-width: calc(var(--wrap) - 2 * var(--gutter)); width: calc(100% - 2 * var(--gutter)); }
.dl-what h2 { font-size: clamp(38px, 5vw, 64px); margin-bottom: 16px; }
.dl-what p { color: var(--muted); }
.dl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-list li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.05); font-weight: 600; }
.dl-list b { font-family: var(--font-display); font-weight: 400; color: var(--accent-ink); background: var(--accent-2); border-radius: 10px; padding: 4px 9px; font-size: 16px; }
@media (max-width: 820px) { .dl-what-in { grid-template-columns: 1fr; } }

/* Cierre */
.dl-end-in { display: grid; justify-items: center; text-align: center; gap: 26px; padding-block: clamp(40px, 6vw, 80px) clamp(80px, 10vw, 120px); }
.dl-end h2 { font-size: clamp(42px, 6.4vw, 84px); max-width: 14ch; }