:root{
  --bg:#f2e0a9; /* amarillo suave */
  --accent:#a7ddf6; /* azul claro del logo */
  --brown:#c78f54; /* marrón */
  --dark:#33414a; /* gris oscuro/azulado */
  --glass: rgba(255,255,255,0.08);
  --radius: 28px;
  --icon-size: 72px; /* default desktop icon circle (reducido) */
  --icon-size-mobile: 56px; /* móvil reducido */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Helvetica Neue", Arial;
  /* layered background to emulate the banner artwork (left brown blob, right dark blob) */
  background-color: var(--bg);
  background-image:
    radial-gradient(600px 420px at 8% 14%, var(--brown) 0 22%, rgba(199,143,84,0) 42%),
    radial-gradient(520px 420px at 92% 74%, var(--dark) 0 22%, rgba(51,65,74,0) 44%),
    radial-gradient(700px 220px at 22% 86%, rgba(199,143,84,0.38) 0 18%, rgba(199,143,84,0) 46%),
    linear-gradient(180deg, var(--bg), var(--bg));
  background-repeat: no-repeat;
  color:var(--dark);
  -webkit-font-smoothing:antialiased;
}
.container{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:28px;
  width:100%;
  max-width:1200px;
  margin:0 auto;
}

/* Remove image background and paint a CSS-only artwork inspired by the uploaded image */
/* The body has multiple layered gradients and pseudo-elements to emulate organic blobs, highlights and depth. */
body{
  /* base color still controlled by --bg */
  background-color: var(--bg);
  background-image:
    radial-gradient(600px 420px at 8% 14%, var(--brown) 0 22%, rgba(199,143,84,0) 42%),
    radial-gradient(520px 420px at 92% 74%, var(--dark) 0 22%, rgba(51,65,74,0) 44%),
    radial-gradient(700px 220px at 22% 86%, rgba(199,143,84,0.38) 0 18%, rgba(199,143,84,0) 46%),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 85%, #ffffff 15%));
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  position:relative;
}

/* Decorative layers using pseudo-elements to add texture and subtle strokes */
body::before, body::after{
  content:"";
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:0;
}

/* soft vignette + grain-like noise using repeating-linear-gradient */
body::before{
  background: radial-gradient(60% 60% at 50% 40%, rgba(255,255,255,0.06), rgba(255,255,255,0) 40%),
              linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.04));
  mix-blend-mode:overlay;
  opacity:0.95;
}

/* larger organic shapes and painterly strokes (placed above base but behind content) */
body::after{
  background-image:
    radial-gradient(420px 380px at 12% 18%, rgba(199,143,84,0.95) 0 28%, rgba(199,143,84,0) 48%),
    radial-gradient(420px 360px at 88% 72%, rgba(51,65,74,0.95) 0 28%, rgba(51,65,74,0) 48%),
    conic-gradient(from 200deg at 30% 70%, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
  opacity:1;
  filter: blur(10px) saturate(1.05);
}

/* Ensure page content sits above decorative layers */
.container{position:relative;z-index:2}
.brand{display:flex;flex-direction:column;align-items:center;margin-bottom:18px}
.logo{width:160px;height:auto;border-radius:20px;box-shadow:8px 8px 0 rgba(51,65,74,0.25),-6px -6px 0 rgba(255,255,255,0.6);padding:12px;display:inline-block;position:relative;overflow:visible}
/* Background painted in ::before so we can desaturate it without affecting the inner image */
.logo::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  background-image: radial-gradient(circle at 30% 28%, rgba(255,255,255,0.06), rgba(255,255,255,0) 22%), linear-gradient(180deg,#7fbfe9 0%, #4e95c8 45%, #2f5f8f 100%);
  background-size:cover;
  background-position:center;
  z-index:0;
  filter: saturate(0.45) blur(0.5px);
}
.logo::after{content:"";position:absolute;inset:6px;background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(0,0,0,0.045));border-radius:14px;pointer-events:none;z-index:1}
.logo-image{display:block;width:100%;height:auto;border-radius:12px;position:relative;z-index:2;filter:contrast(1.06) saturate(1.02) drop-shadow(0 6px 0 rgba(0,0,0,0.12))}
.subtitle{margin:8px 0 0;color:var(--dark);font-weight:600}

.links{width:100%;max-width:420px;display:grid;grid-template-columns:1fr;gap:14px}
.btn{
  display:flex;
  align-items:center;
  text-decoration:none;
  border-radius:999px;
  padding:12px 20px; /* compact vertical padding; horizontal spacing handled by flex */
  color:var(--dark);
  font-weight:700;
  box-shadow:8px 8px 0 rgba(51,65,74,0.12);
  transition:transform .14s ease,box-shadow .14s ease;
  background: rgba(0,0,0,0.06); /* base neutral, overridden per-network */
  border: 2px solid rgba(0,0,0,0.06);
  overflow:visible;
  position:relative;
}
.btn .icon{display:inline-flex;width:var(--icon-size);height:var(--icon-size);align-items:center;justify-content:center;border-radius:50%;box-shadow:0 6px 0 rgba(0,0,0,0.08);flex:0 0 var(--icon-size);margin-left:6px;margin-right:10px;padding:0;overflow:hidden}
.btn .icon svg{width:calc(var(--icon-size) * 0.6);height:calc(var(--icon-size) * 0.6);display:block}
/* center the text: allow flex-grow and use a right spacer (::after) matching icon width to balance */
.btn .text{flex:1 1 auto;text-align:center;font-size:20px}
.btn::after{content:"";flex:0 0 calc(var(--icon-size) + 8px)}
.btn:hover{transform:translateY(-6px);box-shadow:14px 14px 0 rgba(51,65,74,0.2)}

/* Estilos por red: color de borde y del icono de la izquierda */
.btn.whatsapp{border-color: rgba(37,211,102,0.25);background:#EAFBF1}
.btn.whatsapp .icon{background:#25D366}
.btn.instagram{border-color: rgba(225,48,108,0.20);background:#F6E9F6}
.btn.instagram .icon{background: linear-gradient(45deg,#f58529,#dd2a7b,#8134af)}
.btn.facebook{border-color: rgba(24,119,242,0.18);background:#EAF4FF}
.btn.facebook .icon{background:#1877F2}
.btn.youtube{border-color: rgba(255,0,0,0.16);background:#FFF3F3}
.btn.youtube .icon{background:#FF0000}
.btn.x{border-color: rgba(0,0,0,0.12);background:#F5F5F7}
.btn.x .icon{background:#000000}
.btn.threads{border-color: rgba(0,0,0,0.12);background:#F5F5F7}
.btn.threads .icon{background:#000000}
.btn.pinterest{border-color: rgba(230,0,35,0.16);background:#FFF5F6}
.btn.pinterest .icon{background:#E60023}
.btn.tiktok{border-color: rgba(0,0,0,0.12);background:#F5F5F7}
.btn.tiktok .icon{background:#000}
/* TikTok layered icon: crisp chroma using three stacked <i> layers */
.btn.tiktok .icon{position:relative;display:inline-flex;align-items:center;justify-content:center}

.btn.tiktok .icon .layer{position:absolute;left:50%;top:50%;width:calc(var(--icon-size));height:calc(var(--icon-size));display:inline-flex;align-items:center;justify-content:center;line-height:1;transform:translate(-50%,-50%) translateX(2px);font-size:calc(var(--icon-size) * 0.62)}
.btn.tiktok .icon .layer.cyan{color:#69C9D0;transform:translate(calc(-50% - 4px),calc(-50% - 3px)) translateX(2px)}
.btn.tiktok .icon .layer.magenta{color:#EE1D52;transform:translate(calc(-50% + 4px),calc(-50% + 3px)) translateX(2px)}
.btn.tiktok .icon .layer.top{color:#ffffff;transform:translate(-50%,-50%) translateX(2px)}

.btn.tiktok.variant-a1 .icon .layer{font-size:calc(var(--icon-size) * 0.66); transform:translate(-50%,-50%) translateX(2px)}
.btn.tiktok.variant-a1 .icon .layer.cyan{color:#69C9D0;transform:translate(calc(-50% - 2px),calc(-50% - 2px)) translateX(2px)}
.btn.tiktok.variant-a1 .icon .layer.magenta{color:#EE1D52;transform:translate(calc(-50% + 2px),calc(-50% + 2px)) translateX(2px)}
.btn.tiktok.variant-a1 .icon .layer.top{color:#ffffff;transform:translate(-50%,-50%) translateX(2px)}
.btn.twitch{border-color: rgba(145,70,255,0.14);background:#FAF6FF}
.btn.twitch .icon{background:#9146FF}

/* Ajustes para Font Awesome: escala proporcional al círculo (no aplica a layers de TikTok) */
.btn .icon i{color:white;font-size:calc(var(--icon-size) * 0.7);line-height:1;display:block}


.footer{margin-top:20px;color:rgba(51,65,74,0.8);text-align:center}

/* Estilos para escritorio: muestra logo y texto al lado */
@media(min-width:900px){
  .container{padding:60px}
  .brand{flex-direction:row;gap:28px;align-items:center;justify-content:center}
  .logo{width:220px}
  .links{max-width:760px}
  :root{--icon-size:72px}
  .btn{padding:16px 28px}
  .btn .icon{width:var(--icon-size);height:var(--icon-size);margin-left:10px;margin-right:14px}
  .btn .icon svg{width:calc(var(--icon-size) * 0.5);height:calc(var(--icon-size) * 0.5)}
  .btn .text{font-size:22px}
  
}

/* Desktop-only: enlarge and diversify the decorative blobs */
@media(min-width:900px){
  body{
    background-image:
      radial-gradient(820px 700px at 6% 10%, rgba(199,143,84,0.98) 0 28%, rgba(199,143,84,0) 48%),
      radial-gradient(740px 640px at 94% 76%, rgba(51,65,74,0.98) 0 28%, rgba(51,65,74,0) 48%),
      radial-gradient(520px 300px at 22% 86%, rgba(199,143,84,0.48) 0 18%, rgba(199,143,84,0) 46%),
      radial-gradient(260px 200px at 42% 32%, rgba(245,220,180,0.6) 0 30%, rgba(245,220,180,0) 52%),
      linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 85%, #ffffff 15%));
    background-position:center;
    background-size:cover;
  }

  body::after{
    background-image:
      radial-gradient(560px 520px at 10% 18%, rgba(199,143,84,0.95) 0 28%, rgba(199,143,84,0) 48%),
      radial-gradient(520px 480px at 88% 72%, rgba(51,65,74,0.95) 0 28%, rgba(51,65,74,0) 48%),
      radial-gradient(320px 260px at 70% 40%, rgba(90,120,150,0.12) 0 28%, rgba(90,120,150,0) 52%),
      radial-gradient(180px 120px at 30% 60%, rgba(255,240,210,0.4) 0 30%, rgba(255,240,210,0) 56%),
      /* small decorative spots */
      radial-gradient(160px 120px at 18% 46%, rgba(220,180,150,0.45) 0 30%, rgba(220,180,150,0) 60%),
      radial-gradient(120px 90px at 58% 22%, rgba(70,90,110,0.14) 0 30%, rgba(70,90,110,0) 62%),
      radial-gradient(100px 80px at 78% 58%, rgba(200,160,140,0.24) 0 30%, rgba(200,160,140,0) 62%),
      radial-gradient(80px 60px at 40% 78%, rgba(240,230,200,0.28) 0 30%, rgba(240,230,200,0) 62%),
      conic-gradient(from 200deg at 30% 70%, rgba(255,255,255,0.04), rgba(0,0,0,0.02));
    filter: blur(12px) saturate(1.06);
    opacity:1;
  }
}

/* Mobile adjustments: larger logo, taller buttons, bigger icon circles */
@media(max-width:899px){
  .logo{width:220px;max-width:60vw}
  .brand{margin-bottom:22px}
  .links{width:100%;padding:0 18px}
  /* en móvil: usar variable de icono más pequeña */
  :root{--icon-size:var(--icon-size-mobile)}
  .logo{width:140px}
  .btn{padding:10px 14px;border-radius:26px}
  .btn .icon{width:var(--icon-size);height:var(--icon-size);margin-left:6px;margin-right:10px}
  .btn .icon svg{width:calc(var(--icon-size) * 0.55);height:calc(var(--icon-size) * 0.55)}
  .btn .icon i{font-size:calc(var(--icon-size) * 0.72)}
  .btn .text{font-size:16px}
  .links{gap:12px}
}

/* Mobile tweaks for very small screens */
@media(max-width:420px){
  body::before{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.18);pointer-events:none}
  /* Ajuste de fondo para móviles: mostrar más de la imagen (encaja por altura) */
  body{background-position: center 20%; background-size: auto 100%;}
  .container{padding:18px}
  .links{padding:0 12px}
  .btn{padding:10px 12px}
  .logo{width:120px}
  .btn .text{font-size:15px}
}

/* accesibilidad */
.sr-only{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap}