:root {
  --bg: #f0da13; /* fondo amarillo sólido */
  --bg-1: #ffeb3b; /* alias */
  --bg-2: #fff8e1; /* degradado secundario suave */
  --accent: #ffd600; /* acento amarillo intenso */
  --accent-dark: #f2b705;
  --text: #ffffff; /* Texto blanco para contraste */
  --muted: #cccccc;
  --card: #070707; /* tarjetas negras */
  --insta-card-bg: #1a1a1a; /* recuadros de Instagram oscuros */
}

*{box-sizing:border-box}
html{min-height:100%;-webkit-text-size-adjust:100%}
body{
  min-height:100vh;
  min-height:100dvh; /* Modern mobile browsers */
  margin:0;
  font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background:var(--bg) !important;
  color:var(--text);
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding:28px
}

.container{width:100%;max-width:920px;margin:auto}
/* ensure content sits above animated background */
.container, .card{position:relative;z-index:2}

/* Animated background layer */
.bg-anim{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background: linear-gradient(120deg, rgba(255,235,59,0.95) 0%, rgba(255,243,129,0.9) 25%, rgba(255,213,79,0.92) 50%, rgba(255,248,225,0.9) 75%);
  background-size:300% 300%;
  filter: blur(36px);
  opacity:0.95;
  animation: gradientShift 12s ease infinite;
}

.bg-anim::before, .bg-anim::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(30px);
  opacity:0.28;
}
.bg-anim::before{
  width:60vmax; height:60vmax; left:-10%; top:-25%;
  background: radial-gradient(circle at 30% 30%, rgba(255,193,7,0.32), transparent 35%);
  animation: float1 18s ease-in-out infinite;
}
.bg-anim::after{
  width:50vmax; height:50vmax; right:-8%; bottom:-20%;
  background: radial-gradient(circle at 70% 70%, rgba(255,214,0,0.28), transparent 30%);
  animation: float2 20s ease-in-out infinite;
}

@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

@keyframes float1{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(6%,8%) scale(1.05)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes float2{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(-6%,-8%) scale(1.02)}
  100%{transform:translate(0,0) scale(1)}
}
.card{background:var(--card);border-radius:16px;padding:28px;text-align:center;box-shadow:0 10px 36px rgba(34,34,34,0.12);border:1px solid rgba(0,0,0,0.06)}
.logo{margin:0 auto 12px;width:72px;height:72px;display:flex;align-items:center;justify-content:center}
h1{margin:8px 0 6px;font-size:1.6rem}
.subtitle{margin:0 0 18px;color:var(--muted)}

.center-image{display:flex;align-items:center;justify-content:center;margin:12px 0 18px}
.center-image img{max-width:260px;width:44%;height:auto;border-radius:6px;box-shadow:0 10px 28px rgba(0,0,0,0.10)}

/* Grid para alinear las tarjetas de Instagram */
.instagram-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px;align-items:start}
.insta-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:var(--insta-card-bg);padding:12px;border-radius:12px;text-decoration:none;color:var(--text);border:2px solid rgba(0,0,0,0.06);box-shadow:0 8px 22px rgba(0,0,0,0.06);transition:transform .14s ease,box-shadow .14s ease}
.insta-card img{width:84px;height:84px;object-fit:cover;border-radius:10px}
.insta-card .insta-info{display:flex;flex-direction:column;align-items:center}
.insta-card strong{font-size:1rem}
.insta-card span{font-size:0.88rem;color:var(--muted)}
.insta-card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,0.10)}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;font-weight:700;text-decoration:none;cursor:pointer;border:none;background:var(--accent);color:#111;box-shadow:0 8px 22px rgba(242,183,5,0.18)}
.btn.redirect{background:transparent;color:var(--accent-dark);border:2px solid var(--accent-dark);margin-top:14px}
.btn.redirect:hover{background:var(--accent);color:#111}

.small{margin:18px 0 8px;color:var(--muted)}
.note{margin-top:18px;font-size:0.9rem;color:#6b5b00}

code{background:#fff7cc;padding:3px 8px;border-radius:6px;font-size:0.95em}

@media (max-width:880px){
  .instagram-grid{grid-template-columns:repeat(2,1fr)}
  .center-image img{width:48%}
}
@media (max-width:520px){
  .instagram-grid{grid-template-columns:1fr}
  .center-image img{width:68%}
  .container{padding:0}
  body{padding:16px}
  .card{padding:20px}
}