/* /assets/css/event.css
   Movistar Arena — Evento (Ficha)
   Requiere: config.css + shell.css + icons.css
   Mobile-first · Responsive real · Sin resets globales
*/

/* =========================================================
   1) Header overlay (solo variante evento)
   ========================================================= */
.site-header--overlay{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 90; /* por encima del contenido; por debajo de sheets/modals si aplica */
  background: rgba(6,10,24,.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
@supports not ((backdrop-filter: blur(1px))){
  .site-header--overlay{ background: rgba(6,10,24,.78); }
}


/* =========================================================
   2) Hero (full-bleed, estable, sin overflow raro)
   ========================================================= */
.event-hero{
  position: relative;

  /* full bleed sin left:50% + margin-left (menos propenso a cortes) */
  width: 100%;
  margin-inline: calc(50% - 50vw);
  /*padding-top: var(--header-h, 72px);*/

  overflow: hidden;
  z-index: 0;
}

.event-hero__bg{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
	max-height: 50vh;
  object-fit: cover;        /* normalmente queda mejor en hero */
  object-position: center;
  filter: saturate(1.05);
}

.event-hero__bg.vcenter {
    object-position: bottom !important;
}

.event-hero__wash{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(64,0,64,.55) 0%,
      rgba(0,64,128,.55) 45%,
      rgba(0,32,32,.65) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.15) 0%,
      rgba(0,0,0,.45) 100%
    );
}

.event-hero__wash_dark{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(64,0,64,.8) 0%,
      rgba(0,64,128,.8) 45%,
      rgba(0,32,32,.8) 100%
    ),
    linear-gradient(180deg,
      rgba(0,0,0,.2) 0%,
      rgba(0,0,0,.2) 100%
    );
}

/* =========================================================
   3) Event sheet (card sobre el hero)
   ========================================================= */
.event-sheet{
  position: absolute;
  inset: 0;
  top: var(--header-h, 72px);
  z-index: 2;

  display: flex;
  align-items: flex-end;
	align-items: center;

  /* gutters del hero */
  padding: 0;
}

.event-sheet__inner{
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.event-sheet__content{
  width: 100%;
  max-width: 72ch;
  padding: 0 0 16px;
}

.event-kicker{
  margin: 0 0 10px;
  color: var(--muted);
  font-size: var(--fs-element-badge);
  line-height: var(--lh-element-badge);
  font-weight: var(--fw-element-badge);
}

.event-title{
  margin: 0;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.05;
  font-weight: var(--fw-section-title);
  letter-spacing: -0.6px;
}

.event-title-sub{
  margin: 10px 0 0;
  color: rgba(var(--ma-cream-rgb), .82);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.35;
  font-weight: var(--fw-section-subtitle);
}

.event-cta{ margin-top: 14px; }
.event-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

/* Desktop: “sheet” más ancho, pisa visualmente */
@media (min-width: 980px){
  .event-sheet__content{
    width: 65%;
    max-width: none;
    padding-bottom: 22px;
  }
}


/* =========================================================
   4) Main layout (1 col -> 8/4)
   ========================================================= */
.page-event{
  position: relative;
  z-index: 5;
  padding-top: clamp(16px, 2.6vw, 24px);
  padding-bottom: clamp(28px, 5vw, 60px);
}

.event-layout{
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(14px, 2.4vw, 26px);
}

/* columnas */
@media (min-width: 980px){
  .event-layout{
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
    align-items: start;
  }
}

/* =========================================================
   5) Section head
   ========================================================= */
.event-section-head{ margin: 6px 0 14px; }

.event-section-title{
  margin: 20px 0;
  font-size: var(--fs-section-title);
  line-height: var(--lh-section-title);
  font-weight: var(--fw-section-title);
  letter-spacing: -0.3px;
}

.event-section-subtitle{
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 70ch;
}


/* =========================================================
   6) Sidebar: sticky solo desktop
   ========================================================= */
.event-col--side{
  position: relative;
  z-index: 20;
  align-self: start;
  min-width: 0;
}

@media (min-width: 980px){
  .event-col--side{
    position: relative;
    
	top: calc(var(--header-h) - var(--pad) - var(--lift));
    height: fit-content;
  }
}

/* Side cards */
.side-stack{ display: grid; gap: 12px; }

.side-card{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(var(--ma-cream-rgb), 0.06);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

.side-card__media{
  width: 100%;
  aspect-ratio: 16 / 9;
  background: rgba(var(--ma-cream-rgb), 0.06);
}
.side-card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.side-card__body{ padding: 14px; }

.side-card__title{
  margin: 0 0 8px;
  font-size: var(--fs-element-title);
  line-height: var(--lh-element-title);
  font-weight: var(--fw-element-title);
}

.side-card__text{
  margin: 0 0 12px;
  color: var(--muted);
}

.side-card__actions{
  display: grid;
  gap: 10px;
}
/*
.side-divider{
  height: 1px;
  background: rgba(255,255,255,.10);
  margin: 12px 0;
}
*/

/* =========================================================
   7) Sessions list
   ========================================================= */
.sessions{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.session-row{
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: rgba(var(--ma-cream-rgb), 0.06);
  box-shadow: var(--shadow-1);

  display: grid;
  grid-template-columns: 74px 1fr;
  grid-template-areas:
    "date info"
    "cta  cta";
  gap: 12px;

  padding: 0;
  min-width: 0;
}

.session-row > :not(.session-alert){
  padding: 12px;
}

.session-date{ grid-area: date; }
.session-info{
  grid-area: info;
  min-width: 0;
  position: relative; /* para overlay badges */
}
.session-cta{
  grid-area: cta;
  display: grid;
  gap: 10px;
  justify-items: stretch;
}

/* >= 720px: 3 columnas */
@media (min-width: 720px){
  .session-row{
    grid-template-columns: 90px 1fr 240px;
    grid-template-areas: "date info cta";
    align-items: center;
  }
  .session-cta{ justify-items: end; }
}

/* =====================================
   Sesión — variante INFO (3 filas)
   ===================================== */

.session-row-info{
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "date   info"
    "btns   btns";
  gap: 12px;

  padding: 14px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: rgba(var(--ma-cream-rgb), 0.06);
  box-shadow: var(--shadow-1);
}

/* Áreas */
.session-row-info .session-tit-header{ grid-area: header; }
.session-row-info .session-date{ grid-area: date; }
.session-row-info .session-info{ grid-area: info; min-width: 0; }
.session-row-info .sesion-btns{ grid-area: btns; }

/* =========================
   Header (línea 1)
   ========================= */

.session-tit-header{
  display: grid;
  gap: 4px;
}

.session-tit-header .session-title{
  margin: 0;
  font-size: var(--fs-element-title);
  font-weight: 800;
  letter-spacing: -0.2px;
}

.session-tit-header .session-human{
  margin: 0;
  font-size: var(--fs-element-badge);
  
}

/* =========================
   Date + Info (línea 2)
   ========================= */

.session-row-info .session-info{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* =========================
   Botones (línea 3)
   ========================= */
/*.session-row-info .sesion-btns{
  display: grid;
}*/

.session-row-info .session-cta{
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr;
}

.session-row-info .session-meta{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.session-row-info .session-meta__item{
  width: fit-content; /* evita que estire a lo ancho */
}

.session-row-info .session-cta{
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.session-row-info .session-cta a{
  width: 100%;
}

/* Tablet+ → botones en fila */
/*@media (min-width: 640px){
  .session-row-info .session-cta{
    grid-template-columns: 1fr 1fr;
  }
}*/

/* Datecard más grande en pantallas medias */
@media (min-width: 720px){
  .session-row-info{
    grid-template-columns: 90px minmax(0, 1fr);
  }
}

/* Datecard */
.datecard{
  width: 74px;
  border-radius: var(--r-lg);
  overflow: hidden;
  text-align: center;

  background: rgba(255,255,255,.08);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);

  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 8px 24px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.25);
}
@media (min-width: 720px){
  .datecard{ width: 90px; border-radius: var(--r-lg); }
}

.datecard__mon{
  padding: 10px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: rgba(var(--ma-cream-rgb), 0.10);
  border-bottom: 1px solid rgba(var(--ma-cream-rgb), 0.10);
}
.datecard__day{
  padding: 0;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}
.datecard__yr{
  padding: 0 0 10px;
  font-size: 16px;
  color: var(--muted);
}

/* Session text */
.session-topline{
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-width: 0;
}

.session-title{
  margin: 0;
  font-size: var(--fs-element-body);
  font-weight: 700;
  letter-spacing: -0.2px;

  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.session-human{
  margin: 0 0 8px;
  color: var(--muted);
  font-size: var(--fs-element-badge);
}

.session-meta{
  margin: 0 0 10px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: var(--fs-element-badge);
}

.session-meta__item{
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  /*border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  padding: 2px 10px;
  border-radius: var(--r-lg);
  */
}
.session-meta dt{ opacity: .85; }
.session-meta dd{ margin: 0; color: var(--text); font-weight: 700; }

/* Session CTAs */
.session-buy,
.session-more{ width: 100%; }

@media (min-width: 720px){
  .session-buy{ width: auto; min-width: 160px; }
  .session-more{ width: auto; }
}

/* Alert header (si existe) */
.session-alert{
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;

  border-top: 1px solid rgba(255,255,255,.12);
}
.session-alert--important{
  background: rgba(var(--ma-danger-rgb), 0.30);
  color: #fff;
  font-size: var(--fs-element-badge);
  font-weight: 600;
}

/* Badge overlay: SOLDOUT/CANCELLED */
.session-badge--soldout,
.session-badge--cancelled{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) rotate(-15deg);
  z-index: 5;

  padding: 10px 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-width: 2px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);

  pointer-events: none;
  user-select: none;
  white-space: nowrap;

  font-size: var(--fs-element-body);
  font-weight: var(--font-weight-extrabold);
  width: max-content;
}

.session-badge--soldout{
  border-color: var(--warning);
  background: var(--ma-danger);
  color: #fff;
}
.session-badge--cancelled{
  border-color: rgba(239, 68, 68, .28);
  background: rgba(239, 68, 68, .10);
  color: #fff;
  opacity: .95;
}

@media (max-width: 420px){
  .session-badge--soldout,
  .session-badge--cancelled{
    padding: 8px 12px;
    font-size: 12px;
  }
}


/* =========================================================
   8) Promotor (sidebar)
   ========================================================= */
.side-promoter__event-image{
  margin: 12px 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(var(--ma-cream-rgb), 0.06);
}
.side-promoter__event-image img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
}

.side-promoter{
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 25px;
}

.side-promoter__logo{
  width: 90px;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
}
.side-promoter__logo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #fff;
  padding: 10px;
}

.side-promoter__kicker{
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}
.side-promoter__name{
  margin: 4px 0 10px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.side-promoter__actions{
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.side-promoter__muted{
  color: var(--muted);
  font-size: 12px;
}


/* =========================================================
   9) Richtext
   ========================================================= */
.richtext p{ margin: 0 0 10px; }
.richtext ul,
.richtext ol{ margin: 0 0 12px 18px; padding: 0; }
.richtext li{ margin: 0 0 6px; }
.richtext a{ text-decoration: underline; }


/* =========================================================
   10) Expander (descripción)
   ========================================================= */
.expander{ margin-top: 10px; }

.expander__content{
  --lines: 5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
  position: relative;
}

.expander.is-open .expander__content{
  -webkit-line-clamp: unset;
  display: block;
}

/* Chip toggle */
.expander__chip{
  margin-top: 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--r-lg);

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: var(--text);

  font: inherit;
  cursor: pointer;
  user-select: none;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

.expander__chip:hover{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}

.expander__chip:active{ transform: translateY(0); }

.expander__chip:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(11,92,255,.35);
}

.expander__chip-ico{ transition: transform 200ms ease; }
.expander.is-open .expander__chip-ico{ transform: rotate(180deg); }

/* Animación por height (cuando JS la activa) */
.expander__content[data-animating]{
  display: block !important;
  -webkit-line-clamp: unset !important;
  overflow: hidden;
  transition: height 260ms ease;
  will-change: height;
}


/* =========================================================
   11) Event note (si aparece)
   ========================================================= */
.event-note{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 14px;
  padding: 12px;

  border-radius: var(--r-lg);
  background: rgba(var(--ma-danger-rgb), 0.30);
  color: #fff;
  font-size: var(--fs-element-body);
  font-weight: 600;
}
.event-note a{ color: inherit; text-decoration: underline; }


/* =========================================================
   12) Servicios / Prohibidos (por si la ficha los incluye)
   ========================================================= */
.services-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 12px;
}

.service-card{
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: start;

  padding: 14px;
  border-radius: var(--r-lg);
    border: 1px solid var(--border);
}

.service-card__icon{
  width: 46px;
  height: 46px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}

.service-card__icon img{
  width: 45px;
  height: 45px;
  object-fit: contain;
  display: block;
}

.service-card__title{
  margin: 0;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
}

.service-card__desc{
  margin: 6px 0 0;
  opacity: .85;
  font-size: 14px;
  line-height: 1.35;
}

.service-card__more{ margin-top: 10px; }
.service-card__morebtn{
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 13px;
  opacity: .9;
}
.service-card__morebtn::-webkit-details-marker{ display:none; }

.service-card__long{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
  white-space: normal;
}

/* Prohibidos */
.forbidden-items{ margin-top: 24px; }
.forbidden-items__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}

.forbidden-card{
  overflow: hidden;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
    
}

.forbidden-card__media{
  width: 100%;
  display: block;
  padding: 14px;
}

.forbidden-card__media img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.forbidden-card__text{
  margin: 0;
  padding: 12px 16px 16px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text);
}

/* Layout 2 columnas de servicios (si lo usas) */
.services-grid__cols{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

@media (min-width: 992px){
  .services-grid__cols{
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
  .services-grid__right{
    position: sticky;
    top: calc(var(--header-h, 72px) + 16px);
  }
}

.services-grid__list{
  display: grid;
  gap: 14px;
}

.visit__card{
	padding: 12px;
    border-radius: var(--r-lg);
    border: 1px solid var(--border);
	margin: 12px 0 12px 0;
}

.visit__card-title{
	margin-top: 0px;
}
/* La Previa — v2 (consolidado) */
.previa2{
  padding: clamp(14px, 2.2vw, 22px);
}

/* Header: logo + línea */
.previa2__top{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}

.previa2__logo{
  display:block;
  width:auto;
  height:40px;
  max-width:220px;
}

.previa2__line{
  height:2px;
  flex:1;
  background: rgba(255,255,255,.4);
  margin-top:15px;
}

.visit__card-title{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

.previa-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: var(--fs-element-badge);
  font-weight: var(--fw-element-badge);
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
}


.previa-badge svg{
  flex: 0 0 auto;
}

.previa-badge.is-open{ background: var(--ma-green-100); color: #081018; }
.previa-badge.is-closed{ background: var(--ma-coral-100); color: #081018; }