:root{
  --black: #0a0a0a;
  --ink: #f4f1ea;
  --ink-dim: rgba(244,241,234,0.55);
  --ink-faint: rgba(244,241,234,0.28);
  --line: rgba(244,241,234,0.16);
  --ember: #b5652f;
  --font-gothic: 'Century Gothic', 'Questrial', 'Avenir Next', sans-serif;
  --ease: cubic-bezier(.19,1,.22,1);
  --dur-s: 480ms;
  --dur-m: 820ms;
  --dur-l: 1200ms;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}

html,body{
  height:100%;
  background:var(--black);
  color:var(--ink);
  overflow:hidden;
}

body{
  font-family:'Inter',sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

button{
  font-family:inherit;
  background:none;
  border:none;
  color:inherit;
  cursor:pointer;
}

a{color:inherit; text-decoration:none;}

.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  opacity:.035; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------- stage system ---------- */
.stage{
  position:fixed; inset:0;
  height:100dvh; width:100vw;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:scale(1.02);
  filter:blur(6px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-l) var(--ease), filter var(--dur-m) var(--ease), visibility 0s linear var(--dur-m);
}
.stage.is-active{
  opacity:1; visibility:visible; pointer-events:auto;
  transform:scale(1);
  filter:blur(0px);
  transition:opacity var(--dur-m) var(--ease), transform var(--dur-l) var(--ease), filter var(--dur-m) var(--ease), visibility 0s linear 0s;
}

/* curtain wipe used during navigation */
.curtain{
  position:fixed; inset:0; background:var(--black); z-index:80;
  opacity:0; pointer-events:none;
  transition:opacity var(--dur-s) var(--ease);
}
.curtain.is-on{ opacity:1; }

/* ---------- HOME ---------- */
.stage--home{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(48px,9vh,88px);
  padding:6vh 6vw;
  text-align:center;
  position:relative;
}

.home__media{ position:absolute; inset:0; z-index:0; }
.home__img{
  width:100%; height:100%; object-fit:cover; object-position:center 22%;
  display:block;
  filter:grayscale(0.15) contrast(1.02);
}
.home__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(120% 90% at 50% 42%, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.88) 55%, rgba(10,10,10,0.96) 100%),
    linear-gradient(to top, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.25) 40%, rgba(10,10,10,0.55) 100%);
}
.home__nav, .home__signature{ position:relative; z-index:1; }

.home__nav{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(14px,3vh,26px);
}

.home__link{
  font-family:var(--font-gothic);
  font-weight:400;
  font-size:clamp(28px,6.4vw,58px);
  letter-spacing:0.03em;
  color:var(--ink);
  position:relative;
  padding:2px 4px;
  transition:letter-spacing var(--dur-s) var(--ease), color var(--dur-s) var(--ease), opacity var(--dur-s) var(--ease);
}
.home__link::after{
  content:"";
  position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:0%; height:1px; background:var(--ink-dim);
  transition:width var(--dur-s) var(--ease);
}
.home__link:hover, .home__link:focus-visible{
  letter-spacing:0.09em;
  color:#fff;
}
.home__link:hover::after, .home__link:focus-visible::after{ width:38%; }

.home__signature{
  position:relative;
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.home__mark{
  font-family:var(--font-gothic);
  font-weight:400;
  font-size:11px;
  letter-spacing:0.28em;
  white-space:nowrap;
  color:var(--ink-faint);
}
@media (max-width:480px){
  .home__mark{ font-size:10px; letter-spacing:0.18em; }
}
.home__pulse{
  position:absolute; top:50%; left:50%;
  width:220px; height:220px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle, rgba(181,101,47,0.16) 0%, rgba(181,101,47,0) 68%);
  animation:pulse 7s ease-in-out infinite;
  z-index:-1;
}
@keyframes pulse{
  0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(0.9);}
  50%{ opacity:1; transform:translate(-50%,-50%) scale(1.15);}
}

/* ---------- language switch ---------- */
.lang{
  position:fixed; top:clamp(20px,4vh,40px); right:clamp(20px,4vw,48px);
  z-index:70;
  display:flex; align-items:center; gap:8px;
  font-family:var(--font-gothic);
  font-size:11px; letter-spacing:0.14em;
}
.lang__item{ color:var(--ink-faint); padding:4px; transition:color var(--dur-s) var(--ease), text-shadow var(--dur-s) var(--ease); }
.lang__item.is-active, .lang__item:hover{ color:var(--ink); }
.lang__div{ color:var(--line); }

/* toque de luz amarilla, tono de la camisa */
.lang--warm .lang__item.is-active{
  color:#ffe9ae;
  text-shadow:0 0 10px rgba(255,199,74,0.65), 0 0 22px rgba(255,199,74,0.28);
}
.lang--warm .lang__item:hover{
  color:#ffe9ae;
  text-shadow:0 0 8px rgba(255,199,74,0.5);
}
.lang--warm .lang__div{ color:rgba(255,199,74,0.22); }

/* ---------- room shell ---------- */
.stage--room{ background:var(--black); }
.stage--room.stage--dark{ }

.room__home{
  position:fixed; top:clamp(20px,4vh,40px); left:clamp(20px,4vw,48px);
  z-index:70;
  font-family:var(--font-gothic);
  font-size:10px; letter-spacing:0.2em;
  white-space:nowrap;
  color:var(--ink);
  text-shadow:0 0 8px rgba(214,255,120,0.55), 0 0 18px rgba(200,255,100,0.28);
  transition:color var(--dur-s) var(--ease), text-shadow var(--dur-s) var(--ease);
}
.room__home:hover{
  color:#fff;
  text-shadow:0 0 10px rgba(214,255,120,0.85), 0 0 26px rgba(200,255,100,0.45);
}
@media (max-width:480px){
  .room__home{ font-size:9px; letter-spacing:0.12em; }
}


.room__media{ position:absolute; inset:0; }
.room__img{ width:100%; height:100%; object-fit:cover; display:block; }
.room__img{ object-position:center 32%; }
#musica .room__img{ object-position:center 22%; }

.room__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.94) 0%, rgba(10,10,10,0.55) 30%, rgba(10,10,10,0.05) 58%, rgba(10,10,10,0) 75%);
}
.room__scrim--full{
  background:linear-gradient(to top, rgba(10,10,10,0.96) 0%, rgba(10,10,10,0.62) 34%, rgba(10,10,10,0.18) 60%, rgba(10,10,10,0.08) 100%);
}

.room__content{
  position:absolute; left:0; right:0; bottom:0;
  padding:0 6vw clamp(64px,11vh,120px);
  max-width:840px;
}
.room__content--music{ max-width:640px; }

.eyebrow{
  font-size:11px; letter-spacing:0.34em; color:var(--ink-dim);
  margin-bottom:18px;
}

.room__title{
  font-family:'Fraunces',serif;
  font-weight:300;
  font-size:clamp(40px,7vw,84px);
  letter-spacing:0.02em;
  line-height:1.02;
  margin-bottom:22px;
}
.room__title--music{
  font-style:italic;
  font-weight:340;
}

.room__text{
  font-size:clamp(15px,1.6vw,18px);
  line-height:1.65;
  color:var(--ink-dim);
  font-weight:300;
  max-width:520px;
  margin-bottom:clamp(32px,5vh,52px);
}

.room__cta{
  display:inline-flex; align-items:center; gap:12px;
  font-size:13px; letter-spacing:0.2em;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
  transition:border-color var(--dur-s) var(--ease), gap var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.room__cta i{ font-style:normal; transition:transform var(--dur-s) var(--ease); }
.room__cta:hover{ border-color:var(--ink); gap:18px; }
.room__cta:hover i{ transform:translateX(4px); }
.room__cta--form{ border:none; background:none; padding-bottom:0; margin-top:8px; }
.room__cta--form{ border-bottom:1px solid var(--line); width:fit-content; padding-bottom:10px; }

/* ---------- CONVERSEMOS ---------- */
.stage--dark{
  display:flex; align-items:center; justify-content:center;
  padding:8vh 6vw;
}
.contact{
  width:100%; max-width:520px;
  display:flex; flex-direction:column; align-items:flex-start;
  text-align:left;
}
.contact .room__title{ font-size:clamp(34px,5.4vw,52px); }
.contact .room__text{ margin-bottom:clamp(40px,6vh,64px); }

.form{ width:100%; display:flex; flex-direction:column; gap:34px; margin-bottom:56px; }

.field{ position:relative; }
.field input{
  width:100%;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  font-size:16px; font-weight:300;
  padding:6px 0 12px;
  outline:none;
  transition:border-color var(--dur-s) var(--ease);
}
.field input:focus{ border-color:var(--ink); }
.field label{
  position:absolute; left:0; top:6px;
  font-size:16px; color:var(--ink-faint);
  pointer-events:none;
  transition:transform var(--dur-s) var(--ease), font-size var(--dur-s) var(--ease), color var(--dur-s) var(--ease);
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label,
.field input.has-value + label{
  transform:translateY(-22px);
  font-size:11px; letter-spacing:0.12em;
  color:var(--ink-dim);
}

.ig{
  font-family:'Inter',sans-serif;
  font-size:12px; font-weight:400; letter-spacing:0.3em;
  color:#fff;
  text-shadow:
    0 0 6px rgba(255,90,150,0.85),
    0 0 16px rgba(255,90,150,0.55),
    0 0 32px rgba(255,90,150,0.32);
  border-bottom:1px solid transparent;
  animation:neonFlicker 5.5s ease-in-out infinite;
  transition:text-shadow var(--dur-s) var(--ease), transform var(--dur-s) var(--ease);
}
.ig:hover{
  text-shadow:
    0 0 8px rgba(255,120,170,1),
    0 0 22px rgba(255,120,170,0.75),
    0 0 44px rgba(255,120,170,0.45);
  transform:translateY(-1px);
}
@keyframes neonFlicker{
  0%, 92%, 100%{ opacity:1; }
  94%{ opacity:0.78; }
  96%{ opacity:1; }
  97%{ opacity:0.65; }
  98%{ opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .ig{ animation:none; }
}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .home__nav{ gap:20px; }
  .home__link{ font-size:8.6vw; }
  .room__content{ padding-bottom:56px; }
  .form{ gap:28px; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; }
}

:focus-visible{ outline:1px solid var(--ink-dim); outline-offset:4px; }