@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');

:root{
  --sky:#ffd7ef;
  --text:#1a0f1c;
  --line:#ff4fb6;
  --shadow: rgba(0,0,0,.14);
  --dot: rgba(255,255,255,.65);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:"Comic Neue", system-ui, Arial, sans-serif;
  color:var(--text);
}

/* background */
.enterBody{ background: var(--sky); overflow-x:hidden; }
.enterBg{
  position: fixed; inset: 0; z-index: -3;
  background:
    radial-gradient(90px 60px at 14% 18%, rgba(255,255,255,.85), transparent 70%),
    radial-gradient(120px 70px at 82% 22%, rgba(255,255,255,.80), transparent 72%),
    radial-gradient(90px 55px at 64% 72%, rgba(255,255,255,.65), transparent 72%),
    linear-gradient(180deg, #ffe0f3 0%, #ffd3ee 40%, #ffd7ef 100%);
}
.enterBg::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle, var(--dot) 0 2px, transparent 3px) 0 0/28px 28px,
    radial-gradient(circle, rgba(255,255,255,.35) 0 1px, transparent 2px) 10px 12px/36px 36px;
  opacity:.75;
}
.enterFx{
  position: fixed; inset: 0; z-index: -2; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 6px);
  opacity:.08;
}

/* center card */
.enterWrap{
  min-height:100%;
  display:grid;
  place-items:center;
  padding: 22px 14px;
}
.enterCard{
  width: min(1100px, 96vw);
  border-radius: 18px;
  background: rgba(255,255,255,.35);
  border: 3px solid rgba(255,255,255,.65);
  box-shadow: 0 18px 0 var(--shadow);
  position: relative;
  overflow:hidden;
}
.laceTop,.laceBottom{
  height: 34px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.25), rgba(255,255,255,.25)),
    repeating-linear-gradient(90deg, rgba(255,79,182,.35) 0 10px, transparent 10px 18px);
  opacity:.9;
}
.laceTop{ border-bottom: 2px dotted rgba(255,79,182,.35); }
.laceBottom{ border-top: 2px dotted rgba(255,79,182,.35); }

/* header */
.enterHeader{
  padding: 16px 16px 6px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
.enterTitle{ padding: 10px 12px; }
.enterTitleBig{
  display:block;
  font-weight:700;
  font-size: 54px;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: rgba(255,255,255,.22);
  -webkit-text-stroke: 2px rgba(255,255,255,.25);
  text-shadow: 0 8px 24px rgba(255,79,182,.18);
}
.enterTitleSmall{
  display:block;
  margin-top: -10px;
  font-weight:700;
  font-size: 42px;
  color: rgba(255,79,182,.22);
  -webkit-text-stroke: 1px rgba(255,255,255,.35);
  text-shadow: 0 10px 30px rgba(0,0,0,.08);
}
.enterBeads{
  width: 260px; height: 44px; border-radius: 999px;
  background:
    radial-gradient(circle at 14px 22px, rgba(255,255,255,.95) 0 10px, transparent 11px) 0 0/26px 44px,
    radial-gradient(circle at 14px 22px, rgba(0,0,0,.08) 0 10px, transparent 12px) 2px 2px/26px 44px;
  opacity:.75;
}

/* grid */
.enterGrid{
  display:grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 16px;
  padding: 10px 16px 12px;
  align-items:center;
}

/* warning */
.warningBox{
  border-radius: 12px;
  background: rgba(255,255,255,.65);
  border: 2px solid rgba(255,79,182,.25);
  box-shadow: 0 12px 0 rgba(0,0,0,.08);
  padding: 14px;
}
.warningInner{
  border-radius: 10px;
  background: rgba(255,255,255,.78);
  border: 2px dashed rgba(255,79,182,.35);
  padding: 16px 14px;
}
.warningTitle{
  margin:0 0 10px;
  text-align:center;
  font-size: 44px;
  letter-spacing: 1px;
  color: rgba(255,79,182,.85);
}
.rainbowLine{
  height: 10px;
  border-radius: 999px;
  margin: 0 auto 12px;
  width: min(320px, 92%);
  background: linear-gradient(90deg,#ff4fb6,#ffd36a,#b8ff5a,#6ff7ff,#a98bff,#ff4fb6);
  opacity:.65;
}
.warningText{
  margin: 10px 0;
  font-size: 14px;
  line-height: 1.45;
  color: rgba(26,15,28,.75);
  font-weight:700;
}
.warningText.subtle{ color: rgba(26,15,28,.55); }
.enterHint{
  margin-top: 14px;
  text-align:center;
  font-weight:700;
  color: rgba(255,79,182,.78);
}
.enterBtn{
  display:block;
  width: min(320px, 92%);
  margin: 12px auto 8px;
  text-align:center;
  font-weight:700;
  font-size: 44px;
  letter-spacing: 1px;
  text-transform: lowercase;
  color: rgba(255,79,182,.85);
  text-decoration:none;
  padding: 14px 10px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.40));
  border: 2px solid rgba(255,79,182,.25);
  box-shadow: 0 12px 0 rgba(0,0,0,.10), 0 0 0 6px rgba(255,79,182,.10) inset;
  position:relative;
  overflow:hidden;
  transition: transform .12s ease;
}
.enterBtn::before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    radial-gradient(circle at 30% 40%, rgba(255,79,182,.18), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(111,247,255,.14), transparent 60%),
    repeating-radial-gradient(circle at 10% 20%, rgba(255,255,255,.25) 0 1px, transparent 2px 7px);
  opacity:.65;
  transform: rotate(10deg);
}
.enterBtn:hover{ transform: translateY(-1px); }
.miniLinks{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  font-weight:700;
  flex-wrap:wrap;
}
.miniLinks a{ color:#0b35ff; text-decoration: underline; }
.miniLinks span{ opacity:.55; }

/* hero */
.heroStage{
  position: relative;
  min-height: 520px;
  border-radius: 14px;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.35);
  overflow:hidden;
}
.heroGlow{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 55% 55%, rgba(255,79,182,.22), transparent 55%),
    radial-gradient(circle at 40% 50%, rgba(111,247,255,.16), transparent 55%),
    radial-gradient(circle at 70% 70%, rgba(184,255,90,.12), transparent 60%);
  opacity:.75;
}
.heroGirl{
  position:absolute;
  right: -6%;
  bottom: -10%;
  width: min(640px, 56vw);
  height:auto;
  transform: rotate(-2deg);
  filter: saturate(1.12) contrast(1.06) brightness(.98) hue-rotate(-8deg);
  border-radius: 18px;
  box-shadow:
    0 0 0 4px rgba(255,255,255,.75),
    0 0 0 10px rgba(255,79,182,.16),
    0 18px 70px rgba(10,0,20,.22);
}
.heroSparkles{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.55) 0 2px, transparent 4px),
    radial-gradient(circle at 26% 62%, rgba(255,255,255,.45) 0 2px, transparent 4px),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.50) 0 2px, transparent 4px),
    radial-gradient(circle at 86% 66%, rgba(255,255,255,.40) 0 2px, transparent 4px);
  opacity:.65;
  mix-blend-mode: screen;
}

/* footer */
.enterFooter{
  padding: 10px 16px 16px;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* Si por error todavía existiera un "WEB14", lo escondemos */
.webBadge{ display:none !important; }

.portals{
  width: 100%;
  display:grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items:center;
}
.portalsLabel{
  grid-column: 1 / -1;
  font-weight:700;
  color: rgba(26,15,28,.65);
  margin: 0 0 2px;
}

/* Botones portal (ahora con icon + texto) */
.portalThumb{
  height: 54px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(255,79,182,.20), rgba(111,247,255,.16)), rgba(255,255,255,.65);
  border: 2px solid rgba(255,79,182,.22);
  box-shadow: 0 10px 0 rgba(0,0,0,.08);
  text-decoration:none;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 8px;

  padding: 10px 10px;
  transition: transform .12s ease, filter .12s ease;
}
.portalThumb.t2{ background: linear-gradient(135deg, rgba(184,255,90,.18), rgba(255,226,90,.14)), rgba(255,255,255,.65); }
.portalThumb.t3{ background: linear-gradient(135deg, rgba(169,139,255,.20), rgba(255,79,182,.14)), rgba(255,255,255,.65); }
.portalThumb.t4{ background: linear-gradient(135deg, rgba(255,226,90,.18), rgba(255,154,215,.14)), rgba(255,255,255,.65); }
.portalThumb.t5{ background: linear-gradient(135deg, rgba(111,247,255,.18), rgba(255,79,182,.12)), rgba(255,255,255,.65); }
.portalThumb.t6{ background: linear-gradient(135deg, rgba(184,255,90,.16), rgba(169,139,255,.14)), rgba(255,255,255,.65); }

.portalThumb:hover{ transform: translateY(-1px); filter: brightness(1.03); }

/* Icono + texto dentro */
.pIcon{
  font-size: 18px;
  line-height: 1;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.10));
}
.pTxt{
  font-weight:700;
  font-size: 13px;
  color: rgba(26,15,28,.78);
  text-transform: lowercase;
  letter-spacing: .2px;
}

/* responsive */
@media (max-width: 980px){
  .enterGrid{ grid-template-columns: 1fr; }
  .heroStage{ min-height: 420px; }
  .heroGirl{ width: min(560px, 92vw); right: -2%; }
  .enterBeads{ display:none; }

  .portals{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 520px){
  .enterTitleBig{ font-size: 44px; }
  .enterTitleSmall{ font-size: 32px; margin-top:-6px; }

  .portals{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portalThumb{ height: 56px; }
}