:root{
  --bg:#07080B;
  --text:#F4F6FA;
  --dim:rgba(233,238,250,.56);
  --faint:rgba(233,238,250,.52);
  --chev:rgba(233,238,250,.34);
  --edge:rgba(255,255,255,.12);
  --edge-hi:rgba(255,255,255,.22);
  --blue:#0A84FF;

  --tg:#38B0E8;
  --sheets:#42C173;
  --gift:#E07B00;

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",
         "Segoe UI Variable Display","Segoe UI",Roboto,"Noto Sans",
         system-ui,"Helvetica Neue",sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,"Roboto Mono",Menlo,Consolas,monospace;
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  background:var(--bg);
}

body{
  margin:0;
  min-height:100vh;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:34px 20px calc(34px + env(safe-area-inset-bottom));
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:17px;
  line-height:1.45;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:contain;
  overflow-x:hidden;
}

/* ---------- fondo ---------- */
.bg{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(78% 52% at 50% -8%,rgba(203,224,255,.30) 0%,rgba(203,224,255,.13) 34%,transparent 68%),
    radial-gradient(70% 46% at 50% 108%,rgba(10,132,255,.30) 0%,rgba(10,132,255,.11) 40%,transparent 72%),
    radial-gradient(58% 40% at 104% 44%,rgba(0,168,190,.16) 0%,transparent 66%),
    radial-gradient(120% 90% at 50% 0%,#111a2b 0%,#0a0d15 44%,var(--bg) 78%);
}

.bg::before,
.bg::after{
  content:"";
  position:absolute;
  left:50%;
  width:120vmax;
  height:120vmax;
  margin-left:-60vmax;
  border-radius:50%;
  will-change:transform;
}
.bg::before{
  top:-78vmax;
  background:radial-gradient(circle,rgba(180,210,255,.13) 0%,transparent 58%);
  animation:breathe 13s ease-in-out infinite;
}
.bg::after{
  bottom:-80vmax;
  background:radial-gradient(circle,rgba(10,132,255,.14) 0%,transparent 58%);
  animation:breathe 17s ease-in-out infinite reverse;
}

/* grano fino: evita el bandeado de los degradados en pantallas OLED */
.grain{
  position:fixed;
  inset:0;
  z-index:4;
  pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- columna ---------- */
.wrap{
  position:relative;
  z-index:1;
  width:100%;
  max-width:396px;
  display:flex;
  flex-direction:column;
  align-items:center;
}

/* ---------- cabecera ---------- */
.mark{
  width:72px;
  height:72px;
  display:grid;
  place-items:center;
  border-radius:23px;
  background:linear-gradient(180deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.05) 100%);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  box-shadow:
    0 0 44px rgba(150,190,255,.20),
    0 8px 22px -10px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.22);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.02em;
  user-select:none;
  animation:fade .6s ease backwards;
}

h1{
  margin:20px 0 0;
  font-size:32px;
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.1;
  animation:fade .6s ease .06s backwards;
}

.bio{
  margin:7px 0 0;
  font-size:15px;
  color:var(--dim);
  text-align:center;
  text-wrap:balance;
  animation:fade .6s ease .1s backwards;
}

/* ---------- selector de idioma ---------- */
.langbar{
  width:100%;
  margin-top:24px;
  display:flex;
  justify-content:flex-end;
  animation:fade .6s ease .14s backwards;
}

.lang{
  position:relative;
  display:grid;
  place-items:center;
  width:52px;
  height:38px;
  padding:0;
  border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 100%);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-touch-callout:none;
  transition:transform .16s cubic-bezier(.3,.8,.4,1),border-color .16s ease,filter .16s ease;
}
/* amplía el área táctil a 48px sin engordar el botón */
.lang::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:56px;
  height:48px;
  transform:translate(-50%,-50%);
}
.lang:active{transform:scale(.93);filter:brightness(1.2)}
.lang:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}

.flag{
  width:26px;
  height:17.5px;
  border-radius:3px;
  display:block;
  box-shadow:0 0 0 1px rgba(255,255,255,.16);
}
/* se muestra la bandera del idioma AL QUE se cambia */
html[lang="en"] .flag--en{display:none}
html[lang="es"] .flag--es{display:none}

/* ---------- cupon de descuento ---------- */
.promo{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  animation:fade .6s ease .18s backwards;
}
.promo--top{margin-top:12px}

.promo__main{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:46px;
  padding:9px 14px;
  border-radius:15px;
  background:rgba(10,132,255,.10);
  border:1px dashed rgba(10,132,255,.45);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.012em;
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
  -webkit-touch-callout:none;
  transition:transform .16s cubic-bezier(.3,.8,.4,1),background .16s ease,border-color .16s ease;
}
.promo__main:active{transform:scale(.975);background:rgba(10,132,255,.17)}
.promo__main:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}
.promo__main svg{width:14px;height:14px;color:var(--faint);flex:none}

.promo__code{
  padding:2px 9px 3px;
  border-radius:8px;
  background:rgba(10,132,255,.20);
  color:#7CBEFF;
  font-family:var(--mono);
  font-size:13.5px;
  font-weight:700;
  letter-spacing:.07em;
  white-space:nowrap;
}

/* desplegable nativo: sin JS, accesible con teclado */
.promo__more{width:100%}
.promo__more summary{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:34px;
  list-style:none;
  font-size:12.5px;
  color:var(--faint);
  cursor:pointer;
  touch-action:manipulation;
  user-select:none;
}
.promo__more summary::-webkit-details-marker{display:none}
.promo__more summary::after{
  content:"";
  width:6px;
  height:6px;
  border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease;
}
.promo__more[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.promo__more summary:focus-visible{outline:2.5px solid var(--blue);outline-offset:2px;border-radius:9px}

.promo__info{
  margin:0;
  padding:11px 14px;
  border-radius:13px;
  background:rgba(255,255,255,.05);
  border:1px solid var(--edge);
  font-size:12.5px;
  line-height:1.45;
  color:var(--dim);
  text-align:center;
  text-wrap:balance;
}

/* ---------- botones ---------- */
.links{
  width:100%;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.link{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:13px;
  padding:13px 15px;
  min-height:68px;
  border-radius:21px;
  background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.045) 100%);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(18px) saturate(170%);
  backdrop-filter:blur(18px) saturate(170%);
  box-shadow:
    0 10px 26px -14px rgba(0,0,0,.9),
    inset 0 1px 0 rgba(255,255,255,.13);
  color:inherit;
  text-decoration:none;
  touch-action:manipulation;
  user-select:none;
  -webkit-touch-callout:none;
  transition:transform .16s cubic-bezier(.3,.8,.4,1),
             filter .16s ease,
             border-color .16s ease;
  animation:rise .55s cubic-bezier(.25,.8,.35,1) backwards;
  animation-delay:calc(var(--i) * 60ms + 160ms);
}
.link:active{transform:scale(.968);filter:brightness(1.22)}
.link:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px}

/* escalonado de entrada (sin atributos style en el HTML, para que la CSP
   no necesite style-src 'unsafe-inline') */
.links .link:nth-child(1){--i:0}
.links .link:nth-child(2){--i:1}
.links .link:nth-child(3){--i:2}
.links .link:nth-child(4){--i:3}
.links .link:nth-child(5){--i:4}
.links .link:nth-child(6){--i:5}

.link__icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}
.link__icon svg{width:21px;height:21px;display:block}

.link__label{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}
.link__title{
  font-size:17px;
  font-weight:600;
  letter-spacing:-.022em;
  line-height:1.25;
}
.link__meta{
  font-size:13px;
  font-weight:400;
  letter-spacing:-.005em;
  line-height:1.3;
  color:var(--faint);
}

.chev{
  width:19px;
  height:19px;
  color:var(--chev);
  flex:none;
}

/* color por servicio */
.link--tg .link__icon{
  color:var(--tg);
  background:rgba(56,176,232,.15);
  border-color:rgba(56,176,232,.26);
}
.link--sheets .link__icon{
  color:var(--sheets);
  background:rgba(66,193,115,.14);
  border-color:rgba(66,193,115,.24);
}

/* botón principal */
.link--primary{
  background:linear-gradient(180deg,#FFFFFF 0%,#E9ECF3 100%);
  border-color:rgba(255,255,255,.6);
  color:#0A0B0F;
  box-shadow:
    0 14px 38px -12px rgba(120,170,255,.45),
    0 4px 14px -4px rgba(0,0,0,.5),
    inset 0 1px 0 #fff;
}
.link--primary .link__meta{color:rgba(10,11,15,.52)}

/* icono naranja del registro, ahora sobre cristal oscuro */
.link--gift .link__icon{
  color:#FFA033;
  background:rgba(255,160,51,.13);
  border-color:rgba(255,160,51,.24);
}

/* fila destacada: la primera, mas alta y con tipografia mayor */
.link--hero{
  min-height:86px;
  padding:15px 16px;
  gap:14px;
  border-radius:24px;
}
.link--hero .link__icon{width:47px;height:47px;border-radius:15px}
.link--hero .link__icon svg{width:23px;height:23px}
.link--hero .link__title{font-size:19.5px;letter-spacing:-.028em}
.link--hero .link__meta{font-size:13.5px}
.link--hero .chev{width:21px;height:21px}

/* la flecha sobre el boton blanco necesita tinta oscura, si no desaparece */
.link--primary .chev{color:rgba(10,11,15,.42)}

/* azul Telegram mas profundo para que contraste sobre blanco
   (mas especifico que .link--tg, no depende del orden del fichero) */
.link--hero.link--tg .link__icon{
  color:#0B8DD6;
  background:rgba(11,141,214,.12);
  border-color:rgba(11,141,214,.22);
}

.badge{
  padding:4px 11px 5px;
  border-radius:999px;
  background:var(--blue);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;
  box-shadow:0 3px 10px -2px rgba(10,132,255,.6);
}

/* ---------- aviso ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(30px + env(safe-area-inset-bottom));
  transform:translate(-50%,14px);
  padding:11px 20px;
  border-radius:999px;
  background:rgba(30,33,42,.86);
  border:1px solid var(--edge);
  -webkit-backdrop-filter:blur(22px) saturate(170%);
  backdrop-filter:blur(22px) saturate(170%);
  color:var(--text);
  font-size:14px;
  font-weight:500;
  letter-spacing:-.01em;
  opacity:0;
  pointer-events:none;
  transition:opacity .22s ease,transform .22s cubic-bezier(.3,.8,.4,1);
  z-index:5;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}

@keyframes rise{from{opacity:0;transform:translateY(14px)}}
@keyframes fade{from{opacity:0;transform:translateY(8px)}}
@keyframes breathe{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(0,2.5%,0) scale(1.07)}
}

/* WebView antiguo de Android: sin backdrop-filter, fondo sólido */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .link,.mark,.toast{background:rgba(26,30,40,.92)}
  .link--primary{background:linear-gradient(180deg,#FFFFFF 0%,#E9ECF3 100%)}
}

@media (hover:hover) and (pointer:fine){
  .link:hover{transform:translateY(-2px);border-color:var(--edge-hi);filter:brightness(1.1)}
}

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