/* ============================================================
   Camilo · Para Cuando Sean Mayores Tour — Landing Tuboleta
   ============================================================ */

:root{
  --crema:#FCFDE1;
  --papel:#F3E7D1;
  --vino:#8F1119;
  --vino-2:#A81622;
  --tinta:#2A241E;
  --tinta-2:#1E1915;
  --rosa:#E9A7B4;

  /* Ancho del lettering en escritorio. Tope duro: 649px, el ancho real del archivo. */
  --lettering-ancho:360px;
  /* Alto del hero en apaisado. En retrato se queda en 100svh. */
  --hero-alto:124svh;

  --max:1200px;
  --calle:clamp(18px,5vw,40px);
  --sec-y:clamp(56px,8vw,110px);
  --barra:88px;

  --serif:"gryphius-mvb","EB Garamond","Sorts Mill Goudy",Garamond,"Times New Roman",serif;
  --script:"Pinyon Script","gryphius-mvb","EB Garamond",cursive;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

body{
  margin:0;
  background:var(--tinta);
  color:var(--crema);
  font:400 18px/1.55 var(--serif);
  font-feature-settings:"onum" 1,"liga" 1;
  font-synthesis:none;                 /* el kit no trae negrita: que no la falsifique */
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                     /* "clip" y no "hidden": hidden vuelve el body contenedor de scroll */
}

img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

:focus-visible{outline:2px solid var(--crema);outline-offset:4px}
.papel :focus-visible{outline-color:var(--vino)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sr-only:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;padding:10px 18px;background:var(--vino);color:var(--crema);z-index:99}

.contenedor{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--calle)}

/* ============================================================
   HEADER
   ============================================================ */
#header{
  position:absolute;
  inset:0 0 auto 0;
  z-index:20;
  padding-block:clamp(16px,2.6vw,28px);
}
.logo-tuboleta{display:inline-block}
.logo-tuboleta img{
  width:clamp(118px,13vw,166px);
  height:auto;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.65));
  transition:opacity .2s ease;
}
.logo-tuboleta:hover img{opacity:.82}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:radial-gradient(120% 90% at 50% 40%,#5A1013 0%,#2B0709 55%,#150406 100%);
  overflow:hidden;
}

/* Más alto que la pantalla solo tiene sentido apaisado: en retrato obligaría
   a hacer scroll únicamente para pasar la portada. */
@media (min-width:761px) and (orientation:landscape){
  .hero{min-height:var(--hero-alto)}
}

.hero picture{position:absolute;inset:0}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}

@media (orientation:portrait){
  /* La vertical recorta a lo ancho: se corre para dejar la cara a la vista */
  .hero .hero-bg{object-position:40% center}
}

.hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:58%;
  background:linear-gradient(to bottom,rgba(20,4,5,0) 0%,rgba(20,4,5,.3) 45%,rgba(20,4,5,.78) 100%);
  pointer-events:none;
}

/* Lettering arriba, foto en medio, artista abajo */
.hero-grupo{
  position:relative;
  z-index:2;
  width:100%;
  padding:clamp(84px,11vw,140px) var(--calle) clamp(30px,5vw,64px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
  gap:clamp(24px,5vw,48px);
  text-align:center;
}

/* Va después de la regla base a propósito: puesto antes, el shorthand "padding"
   lo pisa por orden de aparición. En apaisado la cabeza queda alta en el encuadre,
   así que el bloque de arriba sube para caer sobre el cabello y no sobre el rostro. */
@media (min-width:761px) and (orientation:landscape){
  .hero-grupo{padding-top:clamp(70px,6vw,88px)}
}

.hero-arriba,
.hero-abajo{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(10px,1.6vw,18px);
  width:100%;
}

.hero-lettering{
  width:min(640px,70vw);
  height:auto;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.55));
}

/* El tope chico es para escritorio. En retrato manda el 70vw de arriba, porque
   ahí la pieza necesita más peso frente a la foto vertical. */
@media (min-width:761px) and (orientation:landscape){
  .hero-lettering{width:min(var(--lettering-ancho),46vw)}
}

/* Respaldo si la imagen del lettering no carga */
.hero-lettering-txt{
  margin:0;
  font-family:var(--script);
  font-size:clamp(44px,10vw,116px);
  line-height:.95;
  color:var(--crema);
  text-shadow:0 4px 24px rgba(0,0,0,.6);
}

.hero-ciudad-img{
  width:min(470px,68vw);
  height:auto;
  margin-inline:auto;
  filter:drop-shadow(0 4px 24px rgba(0,0,0,.55));
}
.hero-ciudad-txt{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4px,.8vw,10px);
  color:var(--crema);
  text-shadow:0 4px 22px rgba(0,0,0,.6);
}
.hero-artista{
  font-size:clamp(39px,7.5vw,86px);
  line-height:.95;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.hero-tour{
  font-size:clamp(13px,2vw,25px);
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-tour em{font-style:normal;color:var(--rosa)}
.hero-tour .hero-anio{letter-spacing:.06em}

/* Entrada escalonada del lettering y del bloque de abajo */
.anima{animation:entra 1s cubic-bezier(.22,.68,.36,1) both}
.anima-1{animation-delay:.25s}
.anima-2{animation-delay:.65s}

@keyframes entra{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .anima{animation:none;opacity:1;transform:none}
}

/* ============================================================
   SECCIONES OSCURAS
   ============================================================ */
.seccion-oscura{
  position:relative;
  background-color:var(--tinta);
  background-image:url("https://eventos.tuboleta.com/hubfs/Piezas/textura-marron.webp");
  background-size:cover;
  background-position:center;
  padding-block:var(--sec-y);
  scroll-margin-top:var(--barra);
}
.seccion-oscura>*{position:relative;z-index:1}

.titulo-seccion{
  text-align:center;
  font-size:clamp(32px,5vw,58px);
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:400;
  margin:0 0 clamp(28px,5vw,56px);
}
.titulo-seccion .anios{text-transform:none;letter-spacing:.06em}

/* ============================================================
   PANEL DE PAPEL
   ============================================================ */
.papel{
  position:relative;
  color:var(--vino);
  padding:clamp(24px,4vw,46px) clamp(16px,4vw,48px);
  max-width:920px;
  margin-inline:auto;
}
.papel__fondo{
  position:absolute;
  inset:-12px;
  background:var(--papel);
  z-index:0;
}

/* El filtro va sobre la capa de fondo, no sobre el texto, para que las letras
   queden nítidas */
@supports (filter:url(#borde-rasgado)){
  .papel__fondo{filter:url(#borde-rasgado)}
}
.papel>*:not(.papel__fondo){position:relative;z-index:1}

/* ============================================================
   LISTADO DE FECHAS (scroll interno)
   ============================================================ */
.fechas-wrap{position:relative}

/* Difuminado que insinúa que hay más fechas abajo */
.fechas-wrap::after{
  content:"";
  position:absolute;
  left:0;
  right:12px;
  bottom:0;
  height:58px;
  background:linear-gradient(to bottom,rgba(243,231,209,0) 0%,var(--papel) 88%);
  pointer-events:none;
  transition:opacity .25s ease;
}
.fechas-wrap.al-final::after,
.fechas-wrap.sin-scroll::after{opacity:0}

.fechas{
  display:flex;
  flex-direction:column;
  max-height:clamp(300px,50vh,470px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:16px;
  scrollbar-width:thin;
  scrollbar-color:var(--vino) rgba(143,17,25,.14);
}
.fechas::-webkit-scrollbar{width:7px}
.fechas::-webkit-scrollbar-track{background:rgba(143,17,25,.14)}
.fechas::-webkit-scrollbar-thumb{background:var(--vino)}
.fechas::-webkit-scrollbar-thumb:hover{background:var(--vino-2)}

.fecha{
  display:grid;
  grid-template-columns:minmax(118px,.8fr) minmax(150px,1.5fr) minmax(140px,1.3fr) auto;
  align-items:center;
  gap:clamp(12px,2.5vw,32px);
  padding-block:clamp(15px,2.4vw,26px);
  border-bottom:1px solid rgba(143,17,25,.18);
}
.fecha:last-child{border-bottom:0}
.fecha .dia,
.fecha .recinto,
.fecha .ciudad{
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:clamp(14px,1.5vw,19px);
  line-height:1.3;
}
.fecha .dia{white-space:nowrap}
.fecha .accion{justify-self:end;text-align:right}

.btn-ticket{
  display:inline-block;
  /* Necesario: adentro va un span.sr-only absoluto. Sin este "relative" su bloque
     contenedor sería .papel, se saldría del área con scroll (que no lo recorta por
     ser absoluto) y estiraría la página, dejando un hueco bajo el footer. */
  position:relative;
  background:var(--vino);
  color:var(--papel);
  border:1px solid var(--vino);
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:clamp(13px,1.4vw,17px);
  padding:.55em 1.7em;
  white-space:nowrap;
  transition:background .2s ease,transform .2s ease;
}
.btn-ticket:hover,
.btn-ticket:focus-visible{
  background:var(--papel);
  color:var(--vino);
  transform:translateY(-2px);
}
.btn-ticket.inactivo{
  background:transparent;
  color:var(--vino);
  opacity:.6;
  cursor:default;
  pointer-events:none;
}

.aviso-pocas{
  display:block;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-top:7px;
  opacity:.8;
}

.sin-resultados{
  text-align:center;
  padding:44px 0;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-size:15px;
}

@media (max-width:820px){
  .fecha{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "dia     accion"
      "recinto accion"
      "ciudad  accion";
    row-gap:3px;
    column-gap:14px;
  }
  .fecha .dia{grid-area:dia;font-size:14px;opacity:.9}
  .fecha .recinto{grid-area:recinto;font-size:17px}
  .fecha .ciudad{grid-area:ciudad;font-size:14px;opacity:.85}
  .fecha .accion{grid-area:accion;align-self:center}
  .btn-ticket{padding:.5em 1.2em;font-size:12px;letter-spacing:.12em}
}

/* En móvil se apila y se centra, y el área con scroll baja de alto para que
   la tarjeta no quede larguísima */
@media (max-width:640px){
  .fechas{max-height:min(48vh,330px);padding-right:12px}
  .fechas-wrap::after{right:10px;height:46px}
  .fecha{
    grid-template-columns:1fr;
    grid-template-areas:"dia" "recinto" "ciudad" "accion";
    justify-items:center;
    text-align:center;
    row-gap:5px;
    padding-block:20px;
  }
  .fecha .dia{font-size:14px}
  .fecha .recinto{font-size:16px}
  .fecha .ciudad{font-size:14px}
  .fecha .accion{justify-self:center;text-align:center;margin-top:8px}
  .aviso-pocas{text-align:center}
}

/* ============================================================
   FOOTER
   ============================================================ */
#footer{background:var(--tinta-2);padding-block:clamp(34px,5vw,56px)}

.logos-aliados{
  display:block;
  width:100%;
  max-width:940px;                     /* a 940px la tira mide ~50px de alto */
  height:auto;
  margin:0 auto clamp(26px,3.6vw,42px);
}

/* Aquí entra el arte de dos filas. Ojo: a 375px el contenedor ya solo deja
   ~339px, así que este tope sí manda. */
@media (max-width:900px){
  .logos-aliados{max-width:300px;margin-bottom:clamp(24px,5vw,34px)}
}

.datos-legales{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(26px,6vw,80px);
  margin:0;
  text-align:center;
}
.datos-legales>div{min-width:0}
.datos-legales dt{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:12px;
  opacity:.6;
  margin-bottom:4px;
}
.datos-legales dd{
  margin:0;
  font-size:clamp(15px,1.6vw,18px);
  letter-spacing:.03em;
}

@media (max-width:640px){
  .datos-legales{flex-direction:column;align-items:center;gap:20px}
}

/* ============================================================
   APARICIÓN AL HACER SCROLL
   ============================================================ */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
}