@import "https://fonts.googleapis.com/css?family=Sora:300,400";
@font-face {
    font-family: 'Valen Valentine Script';
    src: url('../font1/ValenValentineScript.woff2') format('woff2'),
    url('../font1/ValenValentineScript.woff') format('woff');
}


:root{
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --white: #E9E3D3;
  --ink: #040814;
  --panel: rgba(3,8,20,0.82);
  --panel-2: rgba(3,8,20,0.94);
  --shadow: rgba(0,0,0,.45);
  --accent: #d889c8; /* rosa */
}

.inicioico{
margin-bottom: 10px;
}

.social-rail__btn svg{
  width: 18px;
  height: 18px;
  display: block;
}

@media (max-width: 480px){
  .social-rail__btn svg{
    width: 16px;
    height: 16px;
  }
}

/* =============================
   Animations
   ============================= */
@keyframes AuxScaleDown {
  0%   { transform: translate3d(0,12px,0) scale(1.04); opacity: 0; filter: blur(2px); }
  100% { transform: translate3d(0,0,0)   scale(1);    opacity: 1; filter: blur(0); }
}

.aux-scale-down{
  animation-name: AuxScaleDown;
  animation-duration: 700ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}

/* Run animations only after JS toggles body.run-aux (prevents "no animation" due to initial paint) */
body.is-secondary .aux-scale-down{
  opacity: 0;
  transform: translate3d(0,12px,0) scale(1.04);
  filter: blur(2px);
}
body.is-secondary.run-aux .aux-scale-down{
  animation-name: AuxScaleDown;
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: both;
  will-change: transform, opacity, filter;
}


hr {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #dbdbdb2e, rgba(0, 0, 0, 0));
}

/* Drawer: animate menu items on open (AuxScaleDown) */
body.menu-open.menu-animate #drawer .drawer__list li{
  opacity: 0;
  transform: translate3d(0,12px,0) scale(1.02);
  filter: blur(1px);
  animation-name: AuxScaleDown;
  animation-duration: 520ms;
  animation-timing-function: cubic-bezier(.2,.8,.2,1);
  animation-fill-mode: both;
}
body.menu-open.menu-animate #drawer .drawer__list li:nth-child(1){ animation-delay: 60ms; }
body.menu-open.menu-animate #drawer .drawer__list li:nth-child(2){ animation-delay: 120ms; }
body.menu-open.menu-animate #drawer .drawer__list li:nth-child(3){ animation-delay: 180ms; }
body.menu-open.menu-animate #drawer .drawer__list li:nth-child(4){ animation-delay: 240ms; }


@media (prefers-reduced-motion: reduce){
  .aux-scale-down{ animation: none !important; transform:none !important; opacity:1 !important; filter:none !important; }
}


*{ box-sizing:border-box; }
html,body{
  margin:0;
  padding:0;
}
body{
  min-height:100svh;
  display:flex;
  flex-direction:column;
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#000;
  color:var(--white);
}

main{ flex: 1 0 auto; display:block; }
.site-footer{ margin-top:auto; }

/* Blur only the background image on secondary pages */
body.is-secondary .hero__bg{
  filter: blur(14px);
  transform: scale(1.10);
}
body.is-secondary .hero__overlay{
  background: radial-gradient(1200px 800px at 65% 35%, rgba(0,0,0,.08), rgba(0,0,0,.45) 60%, rgba(0,0,0,.62));
}

/* Glass blocks: transparent without blur (keep background visible) */
body.is-secondary .glass-block{
  background: rgba(8, 10, 20, 0.22);
}


/* ===== HERO / BG ===== */
.hero{
  position:relative;
  min-height:100svh;
  flex: 1 0 auto;
  overflow:hidden;
}

/* Video blur de fondo (solo Inicio) */
.hero__bg-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position: 50% 50%;
  filter: blur(18px) brightness(.75) saturate(1.1);
  transform: scale(1.08);
  opacity: 1;
  pointer-events:none;
}

/* En Inicio, la imagen funciona solo como fallback */
body.is-home .hero__bg--fallback{ opacity: 0; }

@media (prefers-reduced-motion: reduce){
  .hero__bg-video{ display:none; }
  body.is-home .hero__bg--fallback{ opacity: 1; }
}

/* Soften the transition between the hero background and the footer (no hard edge) */
.hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 220px;
  pointer-events:none;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,.18) 35%,
    rgba(0,0,0,.68) 75%,
    rgba(0,0,0,.92) 100%
  );
}

.hero__bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  /* En móvil: anclamos hacia la izquierda para no recortar a la artista */
  object-position: 18% 52%;
  transform: scale(1.02);
}

@media (max-width: 420px){
  .hero__bg{ object-position: 12% 52%; }
}

.hero__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(1200px 800px at 65% 35%, rgba(0,0,0,.15), rgba(0,0,0,.55) 60%, rgba(0,0,0,.7));
  pointer-events:none;
}

/* ===== LOGO ===== */
.logo{
  position:absolute;
  /* Mobile: keep the face clear by pinning the logo to the top-right */
  top: calc(var(--safe-top) + 40px);
  right: calc(var(--safe-right) + 40px);
  left: auto;
  transform: none;
  width: min(220px, 60vw);
  height:auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
  z-index: 2;
}

.site-footer__decor2 {
    top: -100px;
    position: absolute;
    left: 52px;
}

@media (max-width: 420px){
  .logo{ width: min(230px, 70vw); }
}

/* Desktop / tablet: logo arriba a la derecha (más pequeño y elegante) */
@media (min-width: 768px){
  .hero__bg{ object-position: 50% 55%; }

  .logo{
    left: auto;
    transform: none;
    top: calc(var(--safe-top) + 7vh);
    right: calc(var(--safe-right) + max(6vw, 96px));
    width: clamp(220px, 26vw, 520px);
  }
}

@media (min-width: 1400px){
  .logo{ width: clamp(260px, 22vw, 560px); }
}

/* ===== SOCIAL RAIL ===== */
.social-rail{
  position: fixed;
  left: calc(var(--safe-left) + 18px);
  top: 50%;
  transform: translateY(-50%);
  display:flex;
  flex-direction: column;
  gap: 18px;
  z-index: 5;
}

.social-rail__btn{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  color: #d889c8;
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
  opacity: .95;
}

.social-rail__btn:hover{
  transform: translateY(-2px);
  background: rgba(0,0,0,.28);
  border-color: rgba(255,255,255,.35);
}

/* ===== HAMBURGER ===== */
.hamburger{
  position: fixed;
  top: calc(var(--safe-top) + 18px);
  right: calc(var(--safe-right) + 25px);
  width: 42px;
  height: 42px;
  display:grid;
  place-items:center;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 6;
}

.hamburger span{
  display:block;
  width: 25px;
  height: 5px;
  background: rgba(255,255,255,.92);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.hamburger span + span{ margin-top: 5px; }

/* ===== DRAWER MENU ===== */
.drawer-overlay{
  position: fixed;
  inset: 0;
  /* Glass overlay (blur) */
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 9;
}

.drawer{
  position: fixed;
  top: 0;
  right: 0;
  font-family: 'Sora';
  height: 100vh;
  width: min(500px, 100vw);
  padding: calc(var(--safe-top) + 40px) 32px calc(var(--safe-bottom) + 28px);
  /* Solid black drawer */
  background: #000;
  transform: translateX(102%);
  transition: transform .22s ease;
  z-index: 10;
  box-shadow: -18px 0 40px rgba(0,0,0,.55);
}

.drawer__close{
  position:absolute;
  top: calc(var(--safe-top) + 14px);
  right: calc(var(--safe-right) + 18px);
  width: 44px;
  height: 44px;
  border:0;
  background: transparent;
  color: rgba(255,255,255,.92);
  font-size: 34px;
  line-height: 1;
  cursor: pointer;
}

.drawer__list{
  list-style: none;
  margin: 0;
  padding: 0;
  min-height: calc(100vh - 140px);
  display:flex;
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}

.drawer__list a{
  font-family: Sora;
  display:inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: clamp(18px, 2.2vw, 26px);
  opacity: .55;
  transition: opacity .18s ease, transform .18s ease;
}

.drawer__list a:hover{ opacity: .95; transform: translateX(-2px); }
.drawer__list a.is-active{ opacity: .98; }

.badge{
  font-size: 9px;
  padding: 6px 10px;
  border-radius: 999px;
  color: #d889c8;
  border: 1px solid rgba(255,255,255,.18);
  opacity: .9;
  letter-spacing: .06em;
}

/* menu open state */
body.menu-open{ overflow: hidden; }
body.menu-open .drawer{ transform: translateX(0); }
body.menu-open .drawer-overlay{ opacity: 1; pointer-events: auto; }

/* ===== PAGE CONTENT PANEL (independent pages) ===== */
.page-panel{
  position: relative;
  z-index: 3;
  min-height: 100svh;
  display:flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--safe-top) + 120px) 22px calc(var(--safe-bottom) + 40px);
}

.page-panel--empty{
  pointer-events:none;
}

.page-panel--empty > *{
  display:none;
}

.card{
  width: min(860px, 92vw);
  background: var(--panel);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
}

.card h1{
  margin: 0 0 10px;
  font-size: clamp(26px, 3.2vw, 40px);
  letter-spacing: .02em;
}

.card h2{
  margin: 0 0 6px;
  font-size: 18px;
}

.card p{ margin: 10px 0; color: rgba(255,255,255,.88); line-height: 1.6; }

.muted{ color: rgba(255,255,255,.68); }
.tiny{ font-size: 12px; }

.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

.tile{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  padding: 14px 14px;
  background: rgba(255,255,255,.03);
}

@media (min-width: 820px){
  .grid{ grid-template-columns: repeat(3, 1fr); }
}

.callout{
  margin-top: 14px;
  padding: 14px 14px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.18);
  background: rgba(255,255,255,.03);
}

/* ===== FORM ===== */
.form{
  display:grid;
  gap: 12px;
  margin-top: 16px;
}

label span{
  display:block;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  margin-bottom: 6px;
}

input, textarea{
  width:100%;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  padding: 12px 12px;
  outline: none;
}

input:focus, textarea:focus{
  border-color: rgba(216,137,200,.55);
  box-shadow: 0 0 0 4px rgba(216,137,200,.12);
}

.btn{
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(216,137,200,.9);
  color: #140711;
  cursor: pointer;
}

.btn[disabled]{ opacity:.55; cursor:not-allowed; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .hero__bg{ transform:none; }
  .drawer, .drawer-overlay, .social-rail__btn{ transition:none; }
}


/* ===== FOOTER ===== */
.site-footer{
  position: relative; /* estático (NO fixed) */
  width: 100%;
  padding: 10px 22px 22px;
  z-index: 2;
  font-size: 12px;
  pointer-events: auto;
}

.site-footer__inner{
  position: relative;
  min-height: 110px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 14px;
}

.site-footer__decor{
  position: absolute;
  left: 0;
  top: -10px;
  width: min(46vw, 560px);
  opacity: .9;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
  pointer-events: none;
}

.site-footer__decor svg{
  width: 100%;
  height: auto;
  display: block;
}

.site-footer__center{
  grid-column: 2;
  text-align: center;
  pointer-events: none;
}

Jpx;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  line-height: 1.25;
  margin-bottom: 10px;
}

.site-footer__kicker span{
  color: rgba(255,255,255,.78);
}

.site-footer__brand{
  display: grid;
  place-items: center;
}

.site-footer__brand img{
    max-width: 200px;
    height: auto;
    opacity: .95;
    padding: 20px;
}

.site-footer__brandText{
  font-weight: 800;
  letter-spacing: .02em;
  font-size: 22px;
  line-height: 1.02;
  color: rgba(255,255,255,.92);
}
.site-footer__brandText .wm{ font-size: 20px; letter-spacing: .08em; }
.site-footer__brandText .mx{ letter-spacing: .08em; }

.site-footer__right{
  grid-column: 3;
  justify-self: end;
  display: flex;
  gap: 18px;
  align-items: center;
  pointer-events: auto;
}

.footer-social{
  height: 34px;
  display: grid;
  font-size: 10px;
  text-transform: uppercase;
  padding-bottom: 25px;
  padding-top: 50px;
  place-items: center;
  color: rgba(255,255,255,.92);
  text-decoration: none;
  opacity: .92;
  transition: transform .18s ease, opacity .18s ease;
}

.footer-social:hover{ transform: translateY(-2px); opacity: 1; }

.site-footer__copy{
  grid-column: 1 / -1;
  justify-self: center;
  margin-top: 10px;
  font-size: 16px;
  color: rgba(255,255,255,.62);
  letter-spacing: .01em;
  pointer-events: none;
}

/* Evita que el contenido quede debajo del footer */
.page-panel{
  padding-bottom: 140px;
}

@media (max-width: 640px){
  .site-footer__inner{
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .site-footer__right{
    grid-column: 1;
    justify-self: center;
    order: 3;
    margin-top: 10px;
  }
  .site-footer__center{ grid-column: 1; }
  .site-footer__copy{ font-size: 14px; }
  .site-footer__decor{ width: min(78vw, 520px); top: -16px; }
}


/* ===== SECONDARY PAGES (Fan Club / Registro / Contacto) ===== */
.page-panel--secondary{
  pointer-events:auto;
  align-items: flex-start;
  justify-content: center;
  padding: calc(var(--safe-top) + 120px) 22px calc(var(--safe-bottom) + 160px);
}

.secondary-wrap{
  width: min(1180px, 92vw);
}

.secondary-hero{
  display:grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(260px, .9fr);
  gap: 44px;
  align-items: center;
  margin-bottom: 54px;
}

.secondary-photo{
  border-radius: 18px;
  overflow:hidden;
  box-shadow: 0 28px 90px rgba(0,0,0,.45);
  border: 1px solid rgba(255,255,255,.08);
}
.secondary-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}

.secondary-brand{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.secondary-brand__logo{
  width: min(420px, 62vw);
  height:auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}
.secondary-brand__meta{
  font-size: 12px;
  letter-spacing: .28em;
  color: rgba(216,137,200,.95);
  text-transform: uppercase;
}
.secondary-brand__desc{
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(255,255,255,.78);
  max-width: 46ch;
}

/* glass blocks */
.glass-block{
  background: rgba(8, 10, 20, 0.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  padding: 44px 46px;
  box-shadow: 0 22px 70px rgba(0,0,0,.35);
}

.section-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
}

.huge-title{
  margin: 0 0 10px;
  font-size: clamp(50px, 5vw, 96px);
  line-height: .95;
  letter-spacing: -0.02em;
  font-family: 'Valen Valentine Script';
  font-weight: 500;
  color: #d889c8;
}
.lead{
  margin: 0;
  color: rgba(255,255,255,.78);
  line-height: 1.7;
  font-size: 14px;
}

.block-stack{ display:flex; flex-direction: column; gap: 26px; }

.values-list{
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display:flex;
  flex-direction: column;
  gap: 12px;
}
.values-list li{
  color: rgba(255,255,255,.82);
  line-height: 1.7;
  font-size: 14px;
}
.values-list strong{
    color: #d889c8;
    font-family: 'Sora';
    font-size: 16px;
	text-decoration: none;
}

@media (max-width: 920px){
  .secondary-hero{
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .secondary-brand{
    align-items: center;
    text-align:center;
  }
  .secondary-brand__desc{ margin-left:auto; margin-right:auto; }
  .section-grid{ grid-template-columns: 1fr; }
  .glass-block{ padding: 34px 26px; }
}

main.main{ flex:1 0 auto; }

/* ===== FOOTER FIX: static, not tall, decor overlapped ===== */
.site-footer{
  position: relative;
  padding: 34px 6% 26px;
  background: transparent; /* no blur, no solid overlay */
}

.site-footer__decor{
  position: absolute;
  left: -6vw;
  bottom: 18px;
  top: auto;
  width: min(48vw, 640px);
  opacity: .9;
  pointer-events: none;
}

.site-footer__inner{
  min-height: 0;
  align-items: center;
  padding-bottom: 6px;
}

.site-footer__center{
  pointer-events: auto;
}

.site-footer__copy{
    font-size: 12px;
    text-transform: uppercase;
}

/* on small screens keep it compact */
@media (max-width: 700px){
  .site-footer{ padding: 26px 5% 22px; }
  .site-footer__decor{ left: -18vw; bottom: 10px; width: min(80vw, 520px); opacity: .75; }
  .site-footer__brand img{ max-width: 180px; }
}

/* Auto-apply AuxScaleDown on secondary pages */
.is-secondary .secondary-photo,
.is-secondary .secondary-brand__logo,
.is-secondary .glass-block{
  opacity: 0;
}

.is-secondary .secondary-photo.aux-scale-down,
.is-secondary .secondary-brand__logo.aux-scale-down,
.is-secondary .glass-block.aux-scale-down{
  opacity: 1;
}

.is-secondary .secondary-photo{ --aux-delay: 0ms; }
.is-secondary .secondary-brand__logo{ --aux-delay: 80ms; }
.is-secondary .glass-block{ --aux-delay: 120ms; }
.is-secondary .glass-block:nth-of-type(2){ --aux-delay: 200ms; }
.is-secondary .glass-block:nth-of-type(3){ --aux-delay: 280ms; }
.is-secondary .glass-block:nth-of-type(4){ --aux-delay: 360ms; }

.is-secondary .aux-scale-down{
  animation-delay: var(--aux-delay, 0ms);
}
/* =========================
   Fullscreen Video Modal
   ========================= */
.video-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  padding: 0;
  overflow: hidden;
}
.video-modal.is-open{ display: flex; }

.video-modal__bg{
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  filter: blur(32px) brightness(.55) saturate(1.15);
  transform: scale(1.15);
  opacity: 1;
}

 .video-modal__video{
  position: relative;
  z-index: 2;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  object-fit: contain; /* no distorsiona */
  background: transparent;
}


.video-modal__close{
  z-index: 2147483647;

  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
padding: 3px 10px 5px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.35);
  color: #fff;
  font-size: 28px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-modal__close:hover{ background: rgba(0,0,0,.55); }

.video-modal__sound{
  z-index: 3;
  z-index: 2147483647;

  position: absolute;
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.video-modal__sound:hover{ background: rgba(0,0,0,.65); }

.video-modal__sound.is-hidden{ display:none; }

body.video-modal-open{ overflow: hidden; }

/* Mientras el modal está abierto, ocultamos UI fija (evita que se encime con el botón de cerrar) */
body.video-modal-open .hamburger,
body.video-modal-open .social-rail{
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 700px){
  .video-modal__close{ top: 10px; right: 10px; }
  .video-modal__sound{ left: 10px; bottom: 10px; }
}