:root{
  --green:#1ef003;
  --page-max:1920px;
  --page-side:clamp(28px, 4vw, 72px);
}
*{box-sizing:border-box}
html,body{
  margin:0;
  padding:0;
  background-image:url("assets/animacion_fondo.gif");
  background-repeat:repeat;
  background-size:auto;
}
html{scroll-behavior:smooth}

/* ─── HEADER / FOOTER ─── */
.site-header,
.site-footer{
  background:var(--green) url('assets/allenrargifbanner.gif') repeat-x center center;
  background-size:auto 100%;
  min-height:clamp(88px, 8vw, 138px);
  border-bottom:8px solid rgba(0,0,0,0.08);
}
.site-footer{
  border-top:8px solid rgba(0,0,0,0.08);
  border-bottom:0;
}

/* ─── PAGE WRAPPER ─── */
.page{
  width:min(var(--page-max), 100%);
  margin:0 auto;
  padding:clamp(18px, 2vw, 34px) var(--page-side) 0;
  position:relative;
}

/* ─── NAV ─── */
.top-nav{
  display:flex;
  align-items:center;
  gap:clamp(18px, 2vw, 34px);
  padding:8px 0 clamp(26px, 2.5vw, 42px);
}
.home-icon{
  display:block;
  width:clamp(66px, 5vw, 96px);
  flex:0 0 auto;
}
.home-icon img{display:block;width:100%;height:auto;image-rendering:pixelated}
.nav-links{
  display:flex;
  gap:clamp(16px, 1.8vw, 30px);
  flex-wrap:wrap;
}
.pixel-btn{
  display:block;
  width:clamp(180px, 13vw, 239px);
  aspect-ratio:239 / 56;
  height:auto;
  background-size:100% 100%;
  background-repeat:no-repeat;
  text-indent:-9999px;
}
.btn-sobremi{background-image:url('assets/boton_sobremi.png')}
.btn-sobremi:hover,.btn-sobremi:active{background-image:url('assets/boton_sobremihover.png')}
.btn-animaciones{background-image:url('assets/botonanimaciones.png')}
.btn-animaciones:hover,.btn-animaciones:active{background-image:url('assets/botonanimacioneshover.png')}
.btn-trabajos{background-image:url('assets/botontrabajos.png')}
.btn-trabajos:hover,.btn-trabajos:active{background-image:url('assets/botontrabajoshover.png')}
.btn-redes{background-image:url('assets/botonredes.png')}
.btn-redes:hover,.btn-redes:active{background-image:url('assets/botonredeshover.png')}

/* ─── HERO (index) ─── */
.hero{
  position:relative;
  min-height:calc(100vh - clamp(176px, 16vw, 276px));
  display:grid;
  grid-template-columns:minmax(520px, 1fr) minmax(420px, 0.95fr);
  grid-template-areas:
    "logo character"
    "text character"
    "pdf character";
  align-items:start;
  column-gap:clamp(24px, 3vw, 72px);
  row-gap:clamp(18px, 2vw, 34px);
  padding:clamp(6px, 1vw, 18px) 0 clamp(36px, 4vw, 72px);
}
.logo-box{grid-area:logo;width:min(100%, clamp(420px, 34vw, 700px));margin:0}
.logo-box img{display:block;width:100%;height:auto;image-rendering:pixelated}
.presentation{grid-area:text;width:min(100%, clamp(560px, 42vw, 980px));margin:0}
.presentation img{display:block;width:100%;height:auto;image-rendering:pixelated}
.pdf-link{
  grid-area:pdf;
  display:block;
  width:min(100%, clamp(330px, 28vw, 600px));
  margin:clamp(6px, 1vw, 12px) 0 0 clamp(10px, 1vw, 24px);
  position:relative;
  z-index:2;
}
.pdf-link img{display:block;width:100%;height:auto;image-rendering:pixelated}
.pdf-link .hover{display:none}
.pdf-link:hover .default,.pdf-link:active .default{display:none}
.pdf-link:hover .hover,.pdf-link:active .hover{display:block}
.character{
  grid-area:character;
  justify-self:end;
  align-self:end;
  width:clamp(460px, 42vw, 860px);
  margin-right:max(-4vw, -60px);
  margin-top:clamp(0px, 3vw, 40px);
  z-index:3;
}
.character img{display:block;width:100%;height:auto;image-rendering:pixelated}

/* ─── PLACEHOLDER ─── */
.placeholder-panel{
  width:min(900px, 100%);
  margin:40px 0 60px 18px;
  padding:34px 38px;
  border:5px solid #000;
  background:rgba(255,255,255,0.72);
  box-shadow:8px 8px 0 rgba(0,0,0,0.15);
}
.placeholder-panel h1{margin:0 0 14px;font-size:38px;font-weight:700}
.placeholder-panel p{margin:0;font-size:26px;line-height:1.4}

/* ─── REDES ─── */
.redes-layout{
  position:relative;
  min-height:calc(100vh - clamp(176px, 16vw, 276px));
  display:grid;
  grid-template-columns:minmax(360px, 0.9fr) minmax(620px, 1fr);
  grid-template-areas:"character content";
  align-items:end;
  column-gap:clamp(12px, 2vw, 28px);
  padding:clamp(12px, 1vw, 24px) 0 clamp(36px, 4vw, 72px);
}
.redes-character{
  grid-area:character;
  align-self:end;
  width:clamp(360px, 35vw, 760px);
  margin-left:max(-2vw, -22px);
  z-index:3;
}
.redes-content{
  grid-area:content;
  align-self:center;
  width:min(100%, 980px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(24px, 3vw, 46px);
  padding:clamp(20px, 5vw, 70px) 0 0;
  position:relative;
  z-index:2;
}
.redes-character img,.follow-box img,.social-title img,.social-icon img{
  display:block;width:100%;height:auto;image-rendering:pixelated;
}
.follow-box{width:min(100%, clamp(520px, 58vw, 900px))}
.social-title{width:min(100%, clamp(520px, 60vw, 920px))}
.social-icons{
  display:flex;
  gap:clamp(40px, 10vw, 160px);
  justify-content:center;
  align-items:center;
  width:100%;
  padding-top:clamp(8px, 1vw, 18px);
}
.social-icon{
  display:block;
  width:clamp(120px, 11vw, 220px);
  transition:transform .12s ease;
}
.social-icon:hover,.social-icon:active{transform:translateY(2px) scale(0.98)}

/* ─── RESPONSIVE general ─── */
@media (max-width:1280px){
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:"logo" "text" "character" "pdf";
    min-height:auto;
  }
  .character{justify-self:center;width:min(82vw, 720px);margin:14px auto 0}
  .pdf-link{margin:0 auto}
  .redes-layout{
    min-height:auto;
    grid-template-columns:1fr;
    grid-template-areas:"content" "character";
    row-gap:16px;
  }
  .redes-content{width:min(100%, 920px);padding-top:0}
  .redes-character{justify-self:center;width:min(78vw, 620px);margin:0 auto}
}
@media (max-width:760px){
  .page{padding:18px 12px 0}
  .top-nav{gap:16px}
  .nav-links{gap:12px}
  .home-icon{width:66px}
  .pixel-btn{width:calc(50vw - 22px)}
  .hero,.redes-layout{row-gap:18px;padding-bottom:28px}
  .logo-box,.presentation,.pdf-link,.follow-box,.social-title{width:100%}
  .character,.redes-character{width:min(94vw, 520px)}
  .social-icons{gap:24px}
  .social-icon{width:min(140px, 32vw)}
  .placeholder-panel{margin-left:0;padding:24px}
  .placeholder-panel h1{font-size:30px}
  .placeholder-panel p{font-size:21px}
}


/* ══════════════════════════════════════════
   PÁGINA DE ANIMACIONES
   ══════════════════════════════════════════ */

body.animaciones-page .page{
  padding-bottom:0;
}

/* Sección raíz: ancho completo, sin márgenes */
.anim-page{
  display:block;
  width:100%;
  padding-bottom:clamp(48px, 5vw, 90px);
}

/* Banner: pantalla completa */
.anim-banner{
  display:block;
  width:100%;
  height:100vh;
  margin:0;
  padding:0;
  overflow:hidden;
}
.anim-banner img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
}

/* Wrapper centrado del grid */
.anim-grid-wrapper{
  width:100%;
  max-width:1260px;
  margin:0 auto;
  padding:clamp(32px, 4vw, 64px) clamp(20px, 3vw, 48px) 0;
}

/* Grid: 3 columnas en escritorio */
.anim-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 2.5vw, 36px);
  align-items:start;
}

/* Tarjeta: remarco negro sobre blanco */
.video-card{
  background:#ffffff;
  border:4px solid #000000;
  box-shadow:7px 7px 0 #000000;
  padding:8px;
  width:100%;
}

/* TikTok iframe */
.tiktok-frame iframe{
  display:block;
  width:100%;
  height:600px;
  border:0;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* YouTube: fila completa al final */
.youtube-frame{
  grid-column:1 / -1;
}
.youtube-frame iframe{
  display:block;
  width:100%;
  height:clamp(280px, 38vw, 540px);
  border:0;
  -webkit-transform:translateZ(0);
  transform:translateZ(0);
}

/* Mediano: 2 columnas */
@media (max-width:1000px){
  .anim-grid{
    grid-template-columns:repeat(2, 1fr);
  }
  .tiktok-frame iframe{
    height:520px;
  }
}

/* Móvil: 1 columna */
@media (max-width:600px){
  .anim-grid{
    grid-template-columns:1fr;
  }
  .video-card{
    box-shadow:5px 5px 0 #000000;
  }
  .tiktok-frame iframe{
    height:460px;
  }
  .youtube-frame iframe{
    height:220px;
  }
}

/* ───────────────────────────── */
/* FIX GENERAL ANIMACIONES PAGE */
/* ───────────────────────────── */

.anim-page{
  width:100%;
  margin:0;
  padding:0;
}

.anim-banner{
  width:100%;
  margin:0;
}

.anim-banner img{
  width:100vw;
  max-width:100%;
  display:block;
}

.anim-grid-wrapper{
  width:100%;
  padding:40px clamp(20px, 5vw, 80px);
}

.anim-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:40px;
  width:100%;
}

.video-card{
  width:100%;
  position:relative;
}

.tiktok-frame{
  aspect-ratio: 9 / 16;
  width:100%;
}

.video-card iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}