/* =========================================================
   EMY 40 · TARJETA PREMIUM
   Inspirada en la interfaz original: negro, rosa editorial,
   tipografía serif + sans, ruido, líneas y composición de revista.
   ========================================================= */

:root{
  --black:#070507;
  --black2:#0e090d;
  --pink:#ee5a91;
  --pink-light:#f6a4be;
  --pink-soft:#d994ab;
  --text:#f7dbe5;
  --muted:#9e7181;
  --line:rgba(238,90,145,.28);
  --card:rgba(255,255,255,.025);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--black);
  color:var(--text);
  font-family:"Montserrat",Arial,sans-serif;
  overflow-x:hidden;
}
body:before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:100;
  opacity:.12;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E");
}
button,a{font:inherit}
a{text-decoration:none}

.cover{
  position:fixed; inset:0; z-index:50;
  display:grid; place-items:center;
  background:
    radial-gradient(circle at 50% 35%,rgba(238,90,145,.12),transparent 30%),
    linear-gradient(135deg,#050405,#0c070a 55%,#050405);
  transition:transform 1.15s cubic-bezier(.76,0,.18,1),opacity .9s ease;
  overflow:hidden;
}
.cover.opened{transform:translateY(-105%);opacity:0;pointer-events:none}
.cover-noise,.cover-grid{position:absolute;inset:0;pointer-events:none}
.cover-grid{
  opacity:.18;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:linear-gradient(to bottom,transparent,#000 25%,#000 75%,transparent);
}
.cover-content{
  width:min(1050px,92vw);height:min(92svh,850px);
  border:1px solid var(--line);
  padding:28px 34px;
  display:flex;flex-direction:column;justify-content:space-between;
  position:relative;
  box-shadow:0 0 100px rgba(238,90,145,.06);
}
.cover-content:before,.cover-content:after{
  content:"";position:absolute;width:75px;height:75px;border-color:var(--pink);opacity:.7;
}
.cover-content:before{left:-1px;top:-1px;border-left:2px solid;border-top:2px solid}
.cover-content:after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px solid}

.cover-top,.cover-bottom{display:flex;justify-content:space-between;align-items:center}
.cover-top{font-size:9px;letter-spacing:.34em;color:var(--muted)}
.cover-center{text-align:center;margin:auto 0}
.cover-kicker{font-size:10px;letter-spacing:.5em;color:var(--pink);margin-bottom:28px}
.magazine-title{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(100px,19vw,220px);line-height:.65;
  font-weight:500;letter-spacing:-.07em;color:var(--pink);
}
.magazine-title em{font-style:normal}
.magazine-name{
  font-family:"Cormorant Garamond",serif;
  font-size:clamp(44px,7vw,78px);
  letter-spacing:.48em;margin-left:.48em;color:var(--pink-light);
}
.cover-rule{height:1px;background:var(--line);width:min(390px,60%);margin:25px auto}
.cover-phrase{font-family:"Cormorant Garamond",serif;font-size:clamp(16px,2vw,24px);line-height:1.35;color:var(--pink-soft)}
.cover-phrase strong{font-weight:500;letter-spacing:.12em}
.mini-countdown{display:flex;align-items:flex-start;gap:10px}
.mini-countdown div{display:flex;flex-direction:column;align-items:center;min-width:45px}
.mini-countdown b{font-family:"Cormorant Garamond",serif;font-size:28px;font-weight:500;color:var(--pink)}
.mini-countdown small{font-size:6px;letter-spacing:.2em;color:var(--muted);margin-top:3px}
.mini-countdown i{font-style:normal;color:var(--muted);font-family:"Cormorant Garamond",serif;font-size:22px}
.open-button,.outline-button{
  border:1px solid var(--pink);background:transparent;color:var(--pink);
  padding:15px 23px;cursor:pointer;letter-spacing:.25em;font-size:9px;
  transition:.3s ease;
}
.open-button:hover,.outline-button:hover{background:var(--pink);color:#080508}
.open-button span{margin-left:10px}
.cover-bottom>p{font-size:7px;letter-spacing:.3em;color:#775363}

main.is-locked{height:100svh;overflow:hidden}
.section{position:relative;min-height:100svh;padding:90px 24px;display:flex;align-items:center;justify-content:center}
.hero{
  overflow:hidden;
  background:
    radial-gradient(circle at 75% 42%,rgba(238,90,145,.10),transparent 18%),
    radial-gradient(circle at 20% 80%,rgba(238,90,145,.07),transparent 22%);
}
.hero:before{
  content:"40";position:absolute;right:-2vw;top:10%;font-family:"Cormorant Garamond",serif;
  font-size:42vw;color:transparent;-webkit-text-stroke:1px rgba(238,90,145,.08);
  line-height:1;pointer-events:none;
}
.hero-copy{width:min(760px,100%);position:relative;z-index:2;text-align:center}
.eyebrow{display:flex;align-items:center;gap:14px;justify-content:center;color:var(--pink);font-size:9px;letter-spacing:.42em}
.eyebrow span{width:70px;height:1px;background:var(--pink);opacity:.6}
.hero-phrase{font-family:"Cormorant Garamond",serif;font-size:clamp(26px,4vw,48px);line-height:1.18;max-width:700px;margin:34px auto 0;color:#edb2c4}
.hero-number{font-family:"Cormorant Garamond",serif;font-size:clamp(180px,31vw,360px);line-height:.68;color:var(--pink);font-weight:500;letter-spacing:-.08em;margin:25px 0 4px;text-shadow:0 0 70px rgba(238,90,145,.08)}
.hero-name{font-family:"Cormorant Garamond",serif;font-size:clamp(52px,8vw,92px);letter-spacing:.4em;margin-left:.4em;color:var(--pink-light)}
.hero-sub{font-family:"Cormorant Garamond",serif;font-size:19px;line-height:1.4;color:var(--muted);max-width:500px;margin:28px auto}
.hero-badge{
  position:absolute;right:9%;top:19%;width:115px;height:115px;
  display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  animation:spin 22s linear infinite;
}
.badge-ring{border:1px solid rgba(238,90,145,.3);border-radius:50%;width:88px;height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Cormorant Garamond",serif;color:var(--pink)}
.badge-ring strong{font-size:25px;font-weight:500}
.badge-ring span{font-size:7px;letter-spacing:.2em}
.scroll-hint{position:absolute;bottom:28px;font-size:8px;letter-spacing:.32em;color:var(--muted)}
.scroll-hint span{display:block;text-align:center;color:var(--pink);font-size:16px;margin-top:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.count-section{background:radial-gradient(circle at 50% 15%,#1c0d14,#070507 50%)}
.section-inner{width:min(900px,100%);margin:auto}
.section-heading{text-align:center}
.section-heading>span,.magazine-label,.payment-title>span,.price-label,.confirm-eyebrow{
  font-size:9px;letter-spacing:.4em;text-transform:uppercase;color:var(--pink)
}
.section-heading h2,.payment-title h2,.confirm-card h2{
  font-family:"Cormorant Garamond",serif;font-size:clamp(52px,8vw,84px);font-weight:500;color:var(--pink-light);margin:15px 0 35px;line-height:.95
}
.countdown-card{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 10px;text-align:center;
  position:relative;
}
.count-top{font-size:8px;letter-spacing:.4em;color:var(--muted);margin-bottom:20px}
.count-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.count-grid div{border-right:1px solid rgba(238,90,145,.16)}
.count-grid div:last-child{border:0}
.count-grid strong{display:block;font-family:"Cormorant Garamond",serif;font-size:clamp(50px,8vw,82px);font-weight:500;color:var(--pink);line-height:1}
.count-grid span{display:block;font-size:7px;letter-spacing:.24em;color:var(--muted);margin-top:9px}
.event-date{font-family:"Cormorant Garamond",serif;color:#c991a4;font-size:18px;margin-top:27px}
.arrived{display:none;color:var(--pink);font-family:"Cormorant Garamond",serif;font-size:28px;margin-top:10px}
.countdown-card.is-arrived .count-grid,.countdown-card.is-arrived .count-top{display:none}
.countdown-card.is-arrived .arrived{display:block}

.details-section{background:#080508}
.magazine-label{text-align:center;margin-bottom:32px}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.info-card{
  min-height:300px;padding:32px;border:1px solid rgba(238,90,145,.24);
  background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;
  overflow:hidden;
}
.info-card:before{content:"";position:absolute;width:180px;height:180px;border:1px solid rgba(238,90,145,.12);border-radius:50%;right:-70px;top:-70px}
.card-number{position:absolute;top:25px;right:28px;font-family:"Cormorant Garamond",serif;font-size:18px;color:var(--pink)}
.card-label{font-size:8px;letter-spacing:.3em;color:var(--muted)}
.info-card h3{font-family:"Cormorant Garamond",serif;font-size:35px;font-weight:500;color:#f2a0b9;margin:12px 0 0}
.info-card p{font-family:"Cormorant Garamond",serif;font-size:20px;color:#c998aa;margin:4px 0 0}
.info-card .outline-button{margin-top:22px}
.drink-note{text-align:center;font-family:"Cormorant Garamond",serif;font-size:24px;color:#d794ab;margin-top:65px}

.payment-section{background:radial-gradient(circle at 50% 50%,#1a0b12,#070507 58%)}
.payment-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;align-items:center}
.payment-title h2{font-size:clamp(65px,9vw,105px);margin:18px 0}
.payment-title h2 em{color:var(--pink);font-style:normal}
.payment-card{border:1px solid var(--line);padding:35px;background:rgba(255,255,255,.025)}
.price{font-family:"Cormorant Garamond",serif;font-size:clamp(70px,9vw,110px);line-height:1;color:var(--pink);font-weight:500;margin:15px 0 30px}
.alias-box{display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(238,90,145,.18);border-bottom:1px solid rgba(238,90,145,.18);padding:19px 0;gap:15px}
.alias-box>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.alias-box span{font-size:7px;letter-spacing:.3em;color:var(--muted)}
.alias-box strong{font-size:clamp(15px,2.5vw,22px);letter-spacing:.08em;color:#f2bdce;overflow-wrap:anywhere}
.copy-button{border:1px solid var(--pink);background:transparent;color:var(--pink);padding:11px 15px;font-size:8px;letter-spacing:.18em;cursor:pointer;flex:none}
.copy-button:hover{background:var(--pink);color:#070507}
.copy-status{font-size:8px;color:var(--muted);margin-top:12px;letter-spacing:.12em}

.confirm-section{background:#070507}
.confirm-card{text-align:center;width:min(680px,100%);padding:50px 25px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(255,255,255,.035),transparent)}
.confirm-card h2{font-size:clamp(64px,9vw,100px);margin:20px 0}
.confirm-card h2 em{font-style:normal;color:var(--pink)}
.confirm-card p{font-family:"Cormorant Garamond",serif;font-size:20px;color:#bb899b;max-width:430px;margin:0 auto 28px;line-height:1.35}
.whatsapp-button{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  width:min(460px,100%);margin:auto;padding:19px 22px;
  background:var(--pink);color:#070507;font-size:10px;letter-spacing:.25em;font-weight:600;
  transition:.3s;
}
.whatsapp-button:hover{transform:translateY(-2px);box-shadow:0 15px 40px rgba(238,90,145,.18)}
.whatsapp-button b{font-size:17px}
footer{padding:70px 20px 85px;text-align:center;border-top:1px solid #21121a}
.footer-mark{font-family:"Cormorant Garamond",serif;font-size:58px;color:var(--pink)}
footer p{font-size:8px;letter-spacing:.28em;color:#765363;margin:10px 0 20px}
footer>span{font-size:7px;letter-spacing:.3em;color:#5f414c}

.toast{
  position:fixed;left:50%;bottom:28px;z-index:120;
  transform:translate(-50%,20px);opacity:0;pointer-events:none;
  padding:12px 18px;background:var(--pink);color:#070507;font-size:9px;letter-spacing:.14em;
  transition:.35s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:760px){
  .cover-content{width:calc(100vw - 28px);height:calc(100svh - 28px);padding:22px 17px}
  .cover-top{font-size:7px}
  .cover-kicker{font-size:7px;letter-spacing:.35em;margin-bottom:22px}
  .magazine-title{font-size:clamp(105px,32vw,170px)}
  .magazine-name{font-size:48px;letter-spacing:.32em;margin-left:.32em}
  .cover-phrase{font-size:17px}
  .cover-bottom{flex-direction:column;gap:18px}
  .cover-bottom>p{display:none}
  .mini-countdown{order:1}
  .open-button{order:2;width:100%}

  .section{min-height:auto;padding:95px 18px}
  .hero{min-height:100svh;padding-top:70px}
  .hero-number{font-size:160px;margin-top:30px}
  .hero-name{font-size:52px}
  .hero-phrase{font-size:28px}
  .hero-badge{right:6%;top:9%;width:82px;height:82px}
  .badge-ring{width:62px;height:62px}
  .badge-ring strong{font-size:17px}
  .badge-ring span{font-size:5px}
  .hero-sub{font-size:18px}
  .scroll-hint{bottom:20px}

  .count-section{min-height:100svh}
  .count-grid strong{font-size:47px}
  .count-grid span{font-size:6px;letter-spacing:.12em}
  .event-date{font-size:16px}

  .info-grid{grid-template-columns:1fr}
  .info-card{min-height:245px;padding:26px}
  .info-card h3{font-size:31px}
  .drink-note{font-size:21px;margin-top:45px}

  .payment-layout{grid-template-columns:1fr;gap:28px}
  .payment-title h2{font-size:68px}
  .payment-card{padding:25px 20px}
  .price{font-size:75px}
  .alias-box{align-items:flex-end}
  .alias-box strong{font-size:15px}
  .copy-button{padding:10px 11px}

  .confirm-card{padding:42px 18px}
  .confirm-card h2{font-size:70px}
  .whatsapp-button{font-size:8px;letter-spacing:.16em}

  footer{padding:60px 15px 75px}
  .footer-mark{font-size:48px}
  footer p{font-size:7px;line-height:1.5}
}