:root{
  --bg:#090909;
  --ink:#eeeae2;
  --muted:#a39f97;
  --line:#5a5750;
  --line-soft:#2a2926;
  --accent:#d5d0c6;
  --accent-2:#b8b2a7;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,Arial,sans-serif}
body{overflow-x:hidden}

.hero{
  height:100svh;
  min-height:680px;
  position:relative;
  display:grid;
  grid-template-rows:auto auto auto auto auto;
  justify-items:center;
  align-content:start;
  padding:14px 28px 12px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.035), transparent 28%),
    linear-gradient(rgba(255,255,255,.01),rgba(255,255,255,0));
  isolation:isolate;
}

.hero::before{
  content:"";
  position:absolute;inset:0;
  pointer-events:none;
  opacity:.22;
  z-index:-1;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.008) 0 1px, transparent 1px 4px);
  mix-blend-mode:screen;
}

.frame{position:absolute;top:42px;bottom:150px;width:1px;background:linear-gradient(to bottom,transparent 0 4%,var(--line-soft) 8% 86%,transparent 94%)}
.frame::before,.frame::after{content:"";position:absolute;width:16px;height:1px;background:var(--line)}
.frame::before{top:0;left:-7px}.frame::after{bottom:0;left:-7px}
.frame-left{left:8%}.frame-right{right:8%}

.intro{margin-top:0;text-align:center}
.intro h1{
  margin:0;
  font-size:clamp(18px,1.8vw,30px);
  line-height:1.28;
  letter-spacing:.32em;
  font-weight:300;
  color:var(--ink);
}
.intro h1 span{font-weight:300}

.hive-wrap{width:min(930px,84vw);height:300px;margin-top:4px;display:flex;justify-content:center;align-items:flex-start}
.hive{position:relative;width:820px;height:365px;transform:scale(.82);transform-origin:top center}

.hex{
  position:absolute;
  width:150px;
  height:130px;
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
}
.hex::before{
  content:"";position:absolute;inset:0;background:var(--line);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
}
.hex::after{
  content:"";position:absolute;inset:1px;background:rgba(9,9,9,.98);
  clip-path:polygon(25% 6.7%,75% 6.7%,100% 50%,75% 93.3%,25% 93.3%,0 50%);
}
.hex span{
  position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;letter-spacing:.18em;font-weight:400;color:var(--ink);
}
.item{transition:transform .4s ease, filter .4s ease}
.item:hover{transform:translateY(-3px);filter:brightness(1.18)}

.center{left:335px;top:116px;z-index:7;width:150px;height:130px;filter:drop-shadow(0 0 11px rgba(231,225,215,.28))}
.center::before{background:#ddd6ca}.center::after{background:#161513;inset:1.5px}
.center-core{position:absolute;inset:18%;z-index:3;clip-path:inherit;background:radial-gradient(circle at 45% 40%,#d8d1c4 0,#aaa398 28%,#6d6860 54%,#2a2927 78%,#151412 100%);opacity:.7;filter:contrast(1.08)}

.teatro{left:165px;top:0}.musica{left:335px;top:0}.cine{left:505px;top:0}
.gastronomia{left:85px;top:95px}.eventos{left:250px;top:95px;z-index:2}.streaming{left:420px;top:95px;z-index:2}.ideas{left:585px;top:95px}
.literatura{left:165px;top:190px}.encuentros{left:335px;top:190px}.arte{left:505px;top:190px}
.ghost{opacity:.45;transform:scale(.86)}
.g1{left:10px;top:45px}.g2{left:20px;top:146px}.g3{left:90px;top:247px}.g4{left:660px;top:45px}.g5{left:650px;top:146px}.g6{left:580px;top:247px}

.brand{text-align:center;margin-top:-10px}
.wordmark{font-size:clamp(38px,3.6vw,58px);letter-spacing:.28em;font-weight:300;line-height:1;color:var(--ink);text-indent:.28em}
.city{margin-top:6px;font-size:clamp(12px,1vw,16px);letter-spacing:.42em;text-indent:.42em;color:var(--accent-2)}
.rule{width:42px;height:1px;background:var(--line);margin:9px auto}
.tagline,.coming{margin:0;font-family:"IBM Plex Mono",monospace;letter-spacing:.24em;font-weight:300;color:var(--ink);font-size:12px}
.coming{margin-top:9px;font-size:10px;color:#cbc7bf}

.signup{width:min(560px,80vw);margin-top:10px}
.signup label{display:block;text-align:center;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.22em;margin-bottom:8px;color:#d5d1c9}
.email-row{display:flex;height:42px;border:1px solid var(--line);background:#0b0b0b}
.email-row input{flex:1;border:0;background:transparent;color:var(--ink);padding:0 14px;font-size:13px;outline:none;font-family:"IBM Plex Mono",monospace}
.email-row input::placeholder{color:#6e6a63}
.email-row button{width:168px;border:0;border-left:1px solid var(--line);background:var(--accent);color:#111;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.18em;cursor:pointer;transition:background .2s ease}
.email-row button:hover{background:#e7e2d8}.email-row button span{margin-left:10px}
.form-msg{min-height:16px;margin:6px 0 0;text-align:center;font-size:11px;color:#aaa59d}

.progress{text-align:center;margin-top:2px;font-family:"IBM Plex Mono",monospace}
.counter{font-size:14px;letter-spacing:.22em}.counter strong{font-weight:500;color:#f0ece4}
.counter-label{margin-top:5px;font-size:9px;letter-spacing:.23em;color:#a7a198}

.more{margin-top:3px;background:none;border:0;color:#9f9a92;font-family:"IBM Plex Mono",monospace;letter-spacing:.24em;font-size:9px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px}
.more i{font-style:normal;font-size:17px;color:#706d67}
.footer-meta{position:absolute;left:7.5%;right:7.5%;bottom:10px;display:flex;justify-content:space-between;font-family:"IBM Plex Mono",monospace;font-size:8px;letter-spacing:.16em;color:#6f6b65}

@media (max-width: 900px){
  .hero{padding:24px 18px 28px}
  .frame{display:none}
  .intro h1{font-size:18px;letter-spacing:.22em}
  .hive-wrap{width:100%;margin-top:12px;overflow:visible}
  .hive{transform:scale(.78);margin:-36px 0 -44px;width:820px;flex:none}
  .wordmark{font-size:46px}
  .signup{width:min(560px,92vw)}
  .footer-meta{display:none}
}

@media (max-width: 620px){
  .hero{height:auto;min-height:100svh;overflow:visible;align-content:start}
  .intro{margin-top:2px}
  .intro h1{font-size:15px;line-height:1.55;letter-spacing:.17em}
  .hive{transform:scale(.56);margin:-77px 0 -82px}
  .wordmark{font-size:34px;letter-spacing:.23em;text-indent:.23em}
  .city{font-size:10px}
  .tagline,.coming{font-size:9px;line-height:1.7;padding:0 12px}
  .email-row{height:40px}
  .email-row button{width:128px;font-size:9px}
  .signup{margin-top:14px}
}

@media (prefers-reduced-motion: no-preference){
  .intro,.hive-wrap,.brand,.signup,.progress{opacity:0;transform:translateY(8px);animation:reveal .9s ease forwards}
  .hive-wrap{animation-delay:.15s}.brand{animation-delay:.3s}.signup{animation-delay:.45s}.progress{animation-delay:.6s}
  .center{animation:pulse 4s ease-in-out infinite}
  @keyframes reveal{to{opacity:1;transform:none}}
  @keyframes pulse{0%,100%{filter:drop-shadow(0 0 8px rgba(231,225,215,.18))}50%{filter:drop-shadow(0 0 17px rgba(231,225,215,.36))}}
}

/* Keep the two middle labels readable while their hexagons stay behind the center hex. */
.eventos span{place-items:center start;padding-left:24px;}
.streaming span{place-items:center end;padding-right:18px;}

@media (min-width: 1100px) and (max-height: 820px){
  .hero{min-height:0;padding-top:10px;}
  .intro h1{font-size:22px;line-height:1.22;}
  .hive-wrap{height:266px;}
  .hive{transform:scale(.72);}
  .brand{margin-top:-4px;}
  .wordmark{font-size:46px;}
  .city{margin-top:4px;font-size:12px;}
  .rule{margin:7px auto;}
  .tagline{font-size:10px;}
  .coming{margin-top:7px;font-size:9px;}
  .signup{margin-top:7px;}
  .email-row{height:38px;}
  .progress{margin-top:0;}
}

/* V3 — refinamiento geométrico */
.hive-wrap{margin-top:10px;}
.center{filter:none;}
.center::before{background:#c9c4ba;}
.center::after{background:#0b0b0b;inset:1.5px;}
.center-core{
  inset:27%;
  background:#bcb6aa;
  opacity:1;
  filter:none;
  box-shadow:none;
}
/* Los laterales permanecen detrás del central, pero con geometría y rótulos limpios. */
.eventos,.streaming{z-index:2;}
.eventos span{place-items:center start;padding-left:22px;}
.streaming span{place-items:center end;padding-right:10px;}
.brand{margin-top:-16px;}

@media (prefers-reduced-motion: no-preference){
  .center{animation:centerBreath 5.5s ease-in-out infinite;}
  @keyframes centerBreath{0%,100%{opacity:.9}50%{opacity:1}}
}

@media (min-width:1100px) and (max-height:820px){
  .hive-wrap{margin-top:6px;}
  .brand{margin-top:-10px;}
}

/* V5 — estado del formulario conectado */
.email-row button:disabled{
  cursor:wait;
  opacity:.72;
}

/* V7 — responsive real para móviles
   Mantiene escritorio intacto y recompone el hero en pantallas angostas. */
html, body { max-width: 100%; }

@media (max-width: 620px){
  html, body{
    width:100%;
    max-width:100vw;
    overflow-x:clip;
  }

  .hero{
    width:100%;
    max-width:100vw;
    min-height:100svh;
    height:auto;
    overflow-x:clip;
    overflow-y:visible;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:22px 16px 24px;
  }

  .intro{
    width:100%;
    margin:0;
    position:relative;
    z-index:10;
  }

  .intro h1{
    margin:0 auto;
    max-width:340px;
    font-size:14px;
    line-height:1.55;
    letter-spacing:.16em;
    white-space:normal;
  }

  .hive-wrap{
    position:relative;
    width:100%;
    max-width:100%;
    height:188px;
    margin:12px 0 2px;
    overflow:hidden;
    flex:none;
  }

  .hive{
    position:absolute;
    left:50%;
    top:0;
    width:820px;
    height:365px;
    margin:0;
    transform:translateX(-50%) scale(.50);
    transform-origin:top center;
    flex:none;
  }

  /* Los hexágonos fantasma aportaban ancho pero no información en móvil. */
  .ghost{display:none;}

  .hex span{
    font-size:12px;
    letter-spacing:.16em;
  }

  .brand{
    width:100%;
    margin:2px 0 0;
    position:relative;
    z-index:5;
  }

  .wordmark{
    font-size:34px;
    line-height:1.05;
    letter-spacing:.22em;
    text-indent:.22em;
    white-space:nowrap;
  }

  .city{
    margin-top:7px;
    font-size:10px;
    letter-spacing:.38em;
    text-indent:.38em;
  }

  .rule{margin:10px auto;}

  .tagline,
  .coming{
    width:100%;
    padding:0;
    font-size:9px;
    line-height:1.65;
    letter-spacing:.18em;
  }

  .coming{margin-top:8px;}

  .signup{
    width:100%;
    max-width:420px;
    margin:17px 0 0;
  }

  .signup label{
    font-size:9px;
    line-height:1.35;
    letter-spacing:.18em;
    margin-bottom:8px;
  }

  .email-row{
    width:100%;
    height:44px;
  }

  .email-row input{
    min-width:0;
    width:1%;
    padding:0 12px;
    font-size:12px;
  }

  .email-row button{
    flex:0 0 124px;
    width:124px;
    padding:0 8px;
    font-size:9px;
    letter-spacing:.14em;
  }

  .form-msg{
    min-height:17px;
    margin-top:6px;
    font-size:10px;
  }

  .progress{
    width:100%;
    margin-top:10px;
  }

  .counter-label{
    font-size:9px;
    line-height:1.4;
    letter-spacing:.19em;
  }

  .more{
    margin-top:5px;
    font-size:9px;
    letter-spacing:.2em;
  }

  .more i{font-size:16px;}
}

@media (max-width: 380px){
  .hero{padding-left:12px;padding-right:12px;}
  .intro h1{font-size:13px;letter-spacing:.13em;}
  .hive-wrap{height:174px;margin-top:10px;}
  .hive{transform:translateX(-50%) scale(.46);}
  .wordmark{font-size:30px;}
  .email-row button{flex-basis:112px;width:112px;font-size:8px;}
}


/* V8 — Turnstile */
.turnstile-wrap {
  width: 100%;
  margin-top: 8px;
  min-height: 0;
}
.turnstile-wrap .cf-turnstile {
  max-width: 100%;
}
@media (max-width: 700px) {
  .turnstile-wrap { margin-top: 7px; }
}