/* ==========================================================================
   Another Litoral Classic
   ========================================================================== */

:root{
  --bg:#0a0a0a;
  --bg-2:#0f0f0f;
  --surface:#141414;
  --surface-2:#1c1c1c;
  --text:#ffffff;
  --muted:#8a8a8a;
  --muted-2:#a8a29a;
  --accent:#e8dcc4;
  --accent-ink:#0a0a0a;
  --border:rgba(255,255,255,.12);
  --border-soft:rgba(255,255,255,.07);

  --max:1440px;
  --gut:clamp(16px, 4vw, 56px);

  --sans:'Helvetica Neue', Helvetica, Arial, sans-serif;
  --cond:'Helvetica Neue', 'Arial Narrow', Arial, sans-serif;

  /* sección de productos: valores tomados de alcrecords.com */
  --shop-bg:#ececec;
  --shop-ink:#151515;
  --shop-title:#616161;
  --shop-price:#545252;
  --shop-bar:rgba(97,97,97,.9);
  --arimo:'Arimo', Arial, sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img,video,iframe{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5;
     stroke-linecap:round; stroke-linejoin:round; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }

/* ---------- buttons ---------------------------------------------------- */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 26px;
  font-family:var(--cond);
  font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  border:1px solid transparent;
  border-radius:2px;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .15s var(--ease);
}
.btn:active{ transform:translateY(1px); }
.btn--solid{ background:var(--accent); color:var(--accent-ink); }
.btn--solid:hover{ background:#fff; }
.btn--ghost{ border-color:var(--border); color:var(--text); }
.btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.06); }
.btn--block{ width:100%; }
.btn svg{ width:14px; height:14px; fill:currentColor; stroke:none; }

/* ---------- header: banderas + logo ------------------------------------ */

/* banda angosta (≈30% de la altura original): el video de abajo es el protagonista */
.header{
  position:relative;
  height:clamp(120px, 22vh, 230px);
  display:grid; place-items:center;
  padding:0 var(--gut);
  overflow:hidden;
  background:#000;
}

/* desfile de banderas, en loop infinito, cubriendo todo el header.
   El inset deja ver el fondo negro como dos líneas, arriba y abajo. */
.flagstrip{
  position:absolute; z-index:0; inset:6px 0;
  overflow:hidden;
}
.flagstrip__track{
  display:flex; height:100%;
  width:max-content;
  animation:desfile 46s linear infinite;
  will-change:transform;
}
@keyframes desfile{ to{ transform:translateX(-50%); } }

/* cada bandera ocupa el alto completo; el ancho sale de su proporción real,
   así van una pegada a la otra sin dejar ver el fondo */
.flag{
  flex:none;
  height:100%; width:auto; max-width:none;
  display:block;
}

.header__brand{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:clamp(14px, 2vw, 26px);
  text-align:center;
}
.header__logo{
  /* se dimensiona por alto para que siempre entre en la banda */
  height:clamp(118px, 21.5vh, 224px); width:auto;
  filter:drop-shadow(0 8px 26px rgba(0,0,0,.75));
}

/* ---------- video: hero a ancho completo con título encima ------------- */

.video{ padding:0; }

/* proporción 16:9 exacta: el video se ve entero, sin recortes */
.video__frame{
  position:relative; width:100%;
  aspect-ratio:16/9;
  background:#0a0a0a;
  overflow:hidden;
}

.video__media{ position:absolute; inset:0; }
.video__media iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  pointer-events:none;              /* de fondo: no se interactúa hasta tocar play */
}
.video__frame.is-playing .video__media iframe{ pointer-events:auto; }

.video__thumb{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* velo suave para que el texto se lea sobre cualquier fotograma */
.video__overlay::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(0,0,0,.35), transparent 100%),
    linear-gradient(to bottom, rgba(0,0,0,.25), rgba(0,0,0,0) 40%, rgba(0,0,0,.35));
  pointer-events:none;
}

.video__overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding:0 var(--gut);
  text-align:center; color:#fff;
  pointer-events:none;              /* deja pasar los clics al video, salvo en el play */
  transition:opacity .35s var(--ease);
}
.video__overlay > *{ position:relative; }
.video__frame.is-playing .video__overlay{ opacity:0; pointer-events:none; }

.video__title{
  margin:0;
  font-family:var(--arimo);
  font-size:clamp(30px, 5vw, 56px); font-weight:700; line-height:1.05;
  text-transform:uppercase;
  text-shadow:0 2px 24px rgba(0,0,0,.6);
}
.video__sub{
  margin:0;
  font-family:var(--arimo);
  font-size:clamp(12px, 1.3vw, 15px); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase;
  text-shadow:0 2px 16px rgba(0,0,0,.6);
}

/* círculo con borde blanco y play adentro, como la referencia */
.video__play{
  pointer-events:auto;
  margin-top:10px;
  width:64px; height:64px; display:grid; place-items:center;
  border:2px solid rgba(255,255,255,.9); border-radius:50%;
  background:rgba(255,255,255,.12); color:#fff;
  backdrop-filter:blur(4px);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.video__play svg{ width:24px; height:24px; fill:currentColor; stroke:none; margin-left:3px; }
.video__play:hover{ transform:scale(1.08); background:rgba(255,255,255,.28); }
.video__play:disabled{ opacity:.45; cursor:default; }
.video__play:disabled:hover{ transform:none; background:rgba(255,255,255,.12); }

.video__label{
  font-family:var(--arimo); font-size:11px; font-weight:600;
  letter-spacing:1.1px; text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.video__label a{ color:#fff; text-decoration:underline; }

/* ---------- merch: el póster armado en código -------------------------- */

/* fondo negro, el mismo del botón del quick view, con un margen chico alrededor */
.merch{ background:var(--shop-ink); padding:clamp(14px, 2vw, 28px); }
.merch__img{ width:100%; height:auto; display:block; }
.merch[hidden]{ display:none; }

/* El póster: misma proporción que MERCHFINAL.png, con la pared roja de fondo.
   container-type habilita cqw (1cqw = 1% del ancho del póster), así el texto
   escala junto con las piezas. */
.collage{
  position:relative;
  aspect-ratio:2157 / 1440;
  overflow:hidden;
  container-type:inline-size;
  background:#7a1f1f center / cover no-repeat;
  font-family:var(--arimo); color:#fff;
  line-height:1.25;
}
.collage__item{ display:contents; margin:0; }

/* En escritorio cada parte se posiciona contra el póster, en porcentajes.
   left/width son % del ancho; top es % del alto. La caja de cada pieza es el
   PNG completo (1200×1200, con aire transparente alrededor del objeto). */
.collage__piece,
.collage__label,
.collage__caption,
.collage__frame,
.collage__watermark,
.collage__logo,
.collage__banner{ position:absolute; }

.collage__piece img{
  width:100%; height:auto;
  filter:drop-shadow(0 1cqw 1.6cqw rgba(0,0,0,.5));
  transition:scale .35s var(--ease), rotate .35s var(--ease), filter .35s var(--ease);
}
.collage__piece:hover img{ filter:drop-shadow(0 1.6cqw 2.2cqw rgba(0,0,0,.55)); }

/* piezas: de abajo hacia arriba según cómo se pisan en el póster */
[data-piece="cd"]           { left:-1%;   top:2.5%;  width:31.5%; z-index:2; }
[data-piece="disco"]        { left:21%;   top:17.5%; width:33%;   z-index:3; }
[data-piece="librito"]      { left:46%;   top:.5%;   width:27.5%; z-index:2; }
[data-piece="remera-blanca"]{ left:70%;   top:1.5%;  width:33.5%; z-index:2; }
[data-piece="remera-negra"] { left:70.5%; top:29%;   width:33%;   z-index:3; }
[data-piece="sticker-cxs"]  { left:43.5%; top:59%;   width:25%;   z-index:3; }
[data-piece="sticker-dedo"] { left:31.5%; top:52%;   width:24%;   z-index:4; }

/* marco blanco alrededor del CD (el plato lo tapa en parte, como en el póster) */
.collage__frame{
  left:1.25%; top:4.9%; width:34.5%; height:43.5%;
  border:2px solid #fff;
  z-index:1;
}

/* marca de agua gigante, apenas visible */
.collage__watermark{
  left:-6%; top:22%; width:48%;
  opacity:.07; rotate:-10deg;
  pointer-events:none; user-select:none;
  z-index:0;
}

/* etiquetas 1.a, 1.b... : chip blanco con número negro */
.collage__label{
  z-index:6;
  min-width:2.6cqw; padding:.15cqw .55cqw;
  background:#fff; color:#000;
  font-size:1.4cqw; font-weight:700; line-height:1.35; text-align:center;
}
[data-label="1a"]{ left:12.5%; top:47.5%; }
[data-label="1b"]{ left:42%;   top:23%;   }
[data-label="1c"]{ left:71%;   top:7.5%;  }
[data-label="2"] { left:61.5%; top:64.5%; }
[data-label="3"] { left:75%;   top:34.5%; }

/* textos de cada ítem */
.collage__caption{
  z-index:5;
  font-size:clamp(10px, 1cqw, 17px);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}
.collage__caption p{ margin:0; }
.collage__caption i{ font-style:italic; }
.collage__meta{
  display:flex; justify-content:space-between; gap:1cqw;
  margin-top:.4em !important;
  font-weight:700;
}
.collage__meta b:last-child{ text-align:right; }
[data-caption="1a"]{ left:1.5%;  top:57%; width:31%; }
[data-caption="1b"]{ left:5.25%; top:71%; width:31%; }
[data-caption="1c"]{ left:51%;   top:40%; width:25%; }
[data-caption="2"] { left:63.5%; top:71%; width:30%; }
[data-caption="3"] { left:68.5%; top:84%; width:31%; }

/* las dos líneas blancas del póster: arriba de 1.b y arriba de 3 */
[data-caption="1b"]::before,
[data-caption="3"]::before{
  content:""; position:absolute;
  left:-1.5cqw; right:-.5cqw; top:-1.6cqw; height:2px;
  background:#fff;
}
[data-caption="3"]::before{ left:-2.25cqw; right:0; }

/* logo amarillo, abajo a la izquierda */
.collage__logo{
  left:15.5%; top:78%; width:9.5%;
  z-index:5;
  rotate:-8deg;
  filter:drop-shadow(0 .6cqw 1cqw rgba(0,0,0,.4));
  transition:scale .35s var(--ease), rotate .35s var(--ease);
}
.collage__logo:hover{ rotate:0deg; scale:1.08; }

/* banda final */
.collage__banner{
  left:24.75%; top:93.5%; width:50.5%;
  z-index:5;
  margin:0; padding:.3cqw 1cqw;
  border:2px solid #fff;
  box-shadow:.25cqw .25cqw 0 rgba(0,0,0,.6);
  font-size:1.55cqw; font-weight:400; letter-spacing:.02em; text-transform:uppercase;
  text-align:center; white-space:nowrap;
}

/* --- movimiento en reposo (propiedades individuales rotate/translate: no
       pisan al scale del hover) --- */
@keyframes collage-spin { to{ rotate:360deg; } }
@keyframes collage-float{ 50%{ translate:0 -3%; } }
@keyframes collage-sway { 0%,100%{ rotate:-1.2deg; } 50%{ rotate:1.2deg; } }

[data-piece="disco"] img        { animation:collage-spin 36s linear infinite; }
[data-piece="sticker-dedo"] img { animation:collage-float 5s ease-in-out infinite; }
[data-piece="sticker-cxs"] img  { animation:collage-float 6s ease-in-out infinite; animation-delay:-2s; }
[data-piece="remera-blanca"] img{ animation:collage-sway 7s ease-in-out infinite; }
[data-piece="remera-negra"] img { animation:collage-sway 7s ease-in-out infinite; animation-delay:-3.5s; }

/* --- hover: cada pieza se levanta un poco --- */
[data-piece="cd"]:hover img           { rotate:-2deg; scale:1.03; }
[data-piece="disco"]:hover img        { scale:1.04; }
[data-piece="librito"]:hover img      { rotate:3deg;  scale:1.04; }
[data-piece="remera-blanca"]:hover img,
[data-piece="remera-negra"]:hover img { scale:1.04; }
[data-piece="sticker-dedo"]:hover img { rotate:-8deg; scale:1.06; }
[data-piece="sticker-cxs"]:hover img  { rotate:6deg;  scale:1.06; }

/* --- mobile y tablet: el póster se apila, legible --- */
@media (max-width:1023px){
  .collage{
    aspect-ratio:auto; container-type:normal;
    display:flex; flex-direction:column; gap:32px;
    padding:24px 16px 28px;
  }
  .collage__frame, .collage__watermark{ display:none; }

  .collage__item{
    display:grid; grid-template-columns:1fr;
    justify-items:center; align-items:end; gap:10px;
    position:relative;
    padding-top:8px;
  }
  /* stickers y remeras van de a dos por fila */
  .collage__item[data-item="2"],
  .collage__item[data-item="3"]{ grid-template-columns:1fr 1fr; }

  .collage__piece, .collage__label, .collage__caption, .collage__logo, .collage__banner{
    position:static; left:auto; top:auto;
  }
  .collage__piece{ width:min(85%, 340px); z-index:auto; }
  .collage__item[data-item="2"] .collage__piece,
  .collage__item[data-item="3"] .collage__piece{ width:100%; }
  .collage__piece img{ filter:drop-shadow(0 10px 18px rgba(0,0,0,.5)); }

  .collage__label{
    position:absolute; left:0; top:0;
    min-width:auto; padding:2px 9px;
    font-size:14px;
  }
  .collage__caption{
    grid-column:1 / -1;
    width:100%; max-width:420px;
    font-size:14px;
  }
  .collage__caption::before{ display:none; }
  .collage__meta{ gap:16px; }

  .collage__logo{ width:110px; margin:8px auto 0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
  .collage__banner{
    width:100%;
    padding:8px 12px;
    font-size:13px; white-space:normal;
    box-shadow:3px 3px 0 rgba(0,0,0,.6);
  }
}

/* ---------- productos (fondo claro, tarjetas estilo alcrecords) -------- */

.shop{
  background:var(--shop-bg); color:var(--shop-ink);
  font-family:var(--arimo);
  padding:clamp(40px, 6vw, 70px) var(--gut);
}

.grid{
  max-width:1200px; margin-inline:auto;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.card{ position:relative; text-align:left; cursor:pointer; }
.card:focus-visible{ outline:2px solid var(--shop-ink); outline-offset:4px; }

/* el "recuadro blanco" de la referencia: fondo blanco bajo la foto */
.card__frame{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:#fff;
  margin-bottom:20px;
}
/* la foto entra entera; el color de fondo (bg en data.js) rellena lo que sobra */
.card__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* sin foto: nombre en gris claro sobre el blanco */
.card__placeholder{
  position:absolute; inset:0;
  display:grid; place-items:center; padding:20px;
  color:#c4c4c4;
  font-size:13px; font-weight:600; letter-spacing:1.1px;
  text-transform:uppercase; text-align:center;
}

/* barra que sube al pasar el mouse */
.card__quick{
  position:absolute; left:0; right:0; bottom:0; height:40px;
  display:grid; place-items:center;
  background:var(--shop-bar); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  transform:translateY(40px);
  transition:transform .25s linear;
}
.card:hover .card__quick,
.card:focus-within .card__quick{ transform:none; }
@media (hover:none){ .card__quick{ transform:none; } }   /* táctil: siempre visible */

.card__title{
  margin:0 0 5px;
  font-size:15px; font-weight:500; line-height:22.5px;
  text-transform:uppercase; color:var(--shop-title);
}
.card__price{
  margin:0;
  font-size:15px; font-weight:400; line-height:15px; letter-spacing:.3px;
  color:var(--shop-price);
}

/* ---------- quick view: panel lateral --------------------------------- */

.scrim{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.5);
  opacity:0; transition:opacity .3s var(--ease);
}
.scrim.is-on{ opacity:1; }

.drawer{
  position:fixed; top:0; right:0; bottom:0; z-index:80;
  width:min(92vw, 480px);
  background:#fff; color:var(--shop-ink);
  font-family:var(--arimo);
  overflow-y:auto;
  transform:translateX(100%);
  transition:transform .35s var(--ease);
}
.drawer.is-on{ transform:none; }

.drawer__close{
  position:absolute; z-index:2; top:12px; right:14px;
  width:40px; height:40px; display:grid; place-items:center;
  font-size:30px; line-height:1; color:var(--shop-ink);
  background:rgba(255,255,255,.85); border-radius:50%;
}
.drawer__close:hover{ background:#fff; }

.drawer__media{
  position:relative; aspect-ratio:1/1; overflow:hidden;
  background:#fff; border-bottom:1px solid #e6e6e6;
}
.drawer__media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.drawer__media .card__placeholder{ font-size:15px; }

.drawer__info{ padding:26px 28px 36px; display:flex; flex-direction:column; gap:12px; }
.drawer__title{
  margin:0;
  font-size:20px; font-weight:500; line-height:1.3;
  text-transform:uppercase; color:var(--shop-ink);
}
.drawer__price{ margin:0; font-size:17px; letter-spacing:.3px; color:var(--shop-price); }
.drawer__desc{ margin:0; font-size:15px; line-height:1.6; color:var(--shop-title); }
.drawer__desc:empty{ display:none; }

/* lista "Incluye", con sub-ítems anidados */
.drawer__includes:empty{ display:none; }
.drawer__label{
  margin:6px 0 0;
  font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
  color:var(--shop-ink);
}
.drawer__includes ul{ margin:8px 0 0; padding-left:18px; font-size:14px; line-height:1.55; color:var(--shop-title); }
.drawer__includes li{ margin:0 0 6px; }
.drawer__includes li ul{ margin-top:4px; font-size:13px; color:#7a7a7a; }

/* tracklist numerado */
.drawer__tracklist:empty{ display:none; }
.drawer__tracklist ol{
  margin:8px 0 0; padding-left:26px;
  font-size:14px; line-height:1.55; color:var(--shop-title);
}
.drawer__tracklist li{ margin:0 0 4px; padding-left:4px; }
.drawer__tracklist li::marker{ font-weight:700; color:var(--shop-ink); }
.drawer__cta{
  margin-top:10px;
  display:block; padding:16px 20px; text-align:center;
  background:var(--shop-ink); color:#fff;
  font-size:12px; font-weight:600; letter-spacing:1.1px; text-transform:uppercase;
  transition:background .2s var(--ease);
}
.drawer__cta:hover{ background:#000; }

body.is-locked{ overflow:hidden; }

/* ---------- footer ---------------------------------------------------- */

.footer{
  margin-top:clamp(70px,10vw,130px);
  padding:clamp(50px,7vw,90px) var(--gut) 40px;
  text-align:center;
  border-top:1px solid var(--border-soft);
  background:var(--bg-2);
}
.footer__brand{
  margin:0 0 6px;
  font-family:var(--cond); font-size:clamp(20px,3vw,32px); font-weight:800;
  letter-spacing:.06em; text-transform:uppercase;
}
.footer__tagline{
  margin:0 0 26px;
  font-family:var(--cond); font-size:clamp(11px,1.2vw,13px);
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--muted);
}
.footer__tagline:empty{ display:none; }

/* lista vertical: ícono + nombre de la red */
.footer__links{
  display:inline-flex; flex-direction:column; align-items:flex-start; gap:12px;
  margin-bottom:26px;
}
.footer__links a{
  display:inline-flex; align-items:center; gap:12px;
  font-size:14px; font-weight:600;
  color:var(--muted); transition:color .2s var(--ease);
}
.footer__links a svg{ width:18px; height:18px; flex:none; }
.footer__links a:hover{ color:#fff; }
.footer__dev,.footer__copy{ margin:0; font-size:12px; color:var(--muted); }
.footer__dev{ margin-bottom:6px; }

/* ---------- aparición al scrollear ------------------------------------ */

/* .reveal la pone el JS; .is-visible cuando el bloque entra en pantalla */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--delay, 0ms);
  will-change:opacity, transform;
}
.reveal.is-visible{
  opacity:1;
  transform:none;
  will-change:auto;
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width:768px){
  .header{ height:clamp(100px, 16vh, 150px); }
  .header__logo{ height:clamp(80px, 13vh, 120px); }
  .grid{ grid-template-columns:repeat(2, 1fr); gap:20px; }   /* la referencia sostiene 2 columnas en mobile */
}

@media (max-width:480px){
  :root{ --gut:16px; }
  .grid{ gap:16px; }
  .card__frame{ margin-bottom:12px; }
  .video__play{ width:54px; height:54px; }
  .video__play svg{ width:20px; height:20px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .flagstrip__track{ animation:none; }
}