/* Paleta tomada de las tarjetas del canal, para que la web y los videos se
   reconozcan como la misma marca. */
:root{
  --fondo:#0F1722;
  --fondo-2:#16202E;
  --superficie:#1B2635;
  --borde:#2A3849;
  --sepia:#C49A60;
  --crema:#F0E9DC;
  --tenue:#8FA0B4;
  --rojo:#D0302D;
  --blob:#B9CBB4;
  --blob-linea:#5A6B57;
  --radio:18px;
  --ancho:1120px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--fondo); color:var(--crema);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px; line-height:1.65; overflow-x:hidden;
}
h1,h2,h3{font-family:Fraunces,Georgia,serif; line-height:1.12; margin:0 0 .5em}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem); font-weight:700; letter-spacing:-.02em}
h1 em{color:var(--sepia); font-style:italic}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem)}
a{color:var(--sepia); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%; display:block}

.saltar{position:absolute; left:-9999px}
.saltar:focus{left:1rem; top:1rem; background:var(--sepia); color:#101820; padding:.6rem 1rem; border-radius:10px; z-index:99}

#estrellas{position:fixed; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.55}
main,.barra,footer{position:relative; z-index:1}

/* ---------------------------------------------------------------- barra */
.barra{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  max-width:var(--ancho); margin:0 auto; padding:1.1rem 1.25rem;
}
.marca{display:flex; align-items:center; gap:.6rem; color:var(--crema); font-size:1.15rem; letter-spacing:-.01em}
.marca:hover{text-decoration:none}
.marca strong{color:var(--sepia); font-weight:600}
.marca-blob{
  width:22px; height:26px; background:var(--blob);
  border:2px solid var(--blob-linea); border-radius:50% 50% 46% 46%/58% 58% 42% 42%;
}
.barra nav{display:flex; align-items:center; gap:1.4rem; font-size:.95rem}
.barra nav a{color:var(--tenue)}
.barra nav a:hover{color:var(--crema); text-decoration:none}
.boton-nav{border:1px solid var(--borde); padding:.4rem .9rem; border-radius:999px; color:var(--crema)!important}
.boton-nav:hover{border-color:var(--sepia)}

/* ---------------------------------------------------------------- hero */
.hero{
  max-width:var(--ancho); margin:0 auto; padding:3.5rem 1.25rem 4rem;
  display:grid; grid-template-columns:1.25fr .75fr; gap:3rem; align-items:center;
}
.sobretitulo{
  text-transform:uppercase; letter-spacing:.16em; font-size:.76rem;
  color:var(--sepia); margin:0 0 1rem; font-weight:600;
}
.entradilla{color:var(--tenue); font-size:1.05rem; max-width:56ch}
.hero-botones{display:flex; flex-wrap:wrap; gap:.8rem; margin:1.8rem 0 1.2rem}
.boton{
  display:inline-block; background:var(--sepia); color:#121A25; font-weight:600;
  padding:.75rem 1.4rem; border-radius:999px; border:1px solid var(--sepia);
  cursor:pointer; font-size:.98rem; font-family:inherit; transition:transform .12s ease, filter .12s ease;
}
.boton:hover{text-decoration:none; filter:brightness(1.08); transform:translateY(-2px)}
.boton.fantasma{background:transparent; color:var(--crema); border-color:var(--borde)}
.boton.fantasma:hover{border-color:var(--sepia)}
.cifras{color:var(--tenue); font-size:.9rem; margin:0}
.cifras b{color:var(--crema); font-weight:600}

.hero-blob{text-align:center}
.blob-caja{position:relative; display:inline-block; padding-bottom:22px}
#blob{
  width:min(230px,58vw); height:auto; cursor:pointer; user-select:none;
  transform-origin:50% 92%;               /* pivota sobre los pies, no sobre el centro */
  animation:flota 4.6s ease-in-out infinite;
  will-change:transform;
}
.blob-sombra{
  position:absolute; left:50%; bottom:6px; translate:-50% 0;
  width:46%; height:14px; border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 70%);
  animation:sombra 4.6s ease-in-out infinite;
}
@keyframes flota{
  0%,100%{translate:0 0}
  50%{translate:0 -12px}
}
@keyframes sombra{
  0%,100%{opacity:.5; scale:1}
  50%{opacity:.3; scale:.86}
}
#blob.salta{animation:salta .7s cubic-bezier(.28,.84,.42,1)}
@keyframes salta{
  0%  {translate:0 0;     scale:1 1}
  12% {translate:0 4px;   scale:1.09 .9}    /* se agacha antes de saltar */
  38% {translate:0 -62px; scale:.93 1.08}
  62% {translate:0 0;     scale:1.07 .93}
  80% {translate:0 -14px; scale:.98 1.02}
  100%{translate:0 0;     scale:1 1}
}

/* ---------------------------------------------------------------- secciones */
section{max-width:var(--ancho); margin:0 auto; padding:3.5rem 1.25rem}
.seccion-nota{color:var(--tenue); margin:-.2rem 0 2rem; max-width:60ch}

.rejilla-canales{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.2rem}
.tarjeta-canal{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.6rem; transition:border-color .15s ease, transform .15s ease;
}
.tarjeta-canal:hover{border-color:var(--sepia); transform:translateY(-3px)}
.tarjeta-canal h3{font-size:1.35rem; margin-bottom:.35rem}
.tarjeta-canal .handle{color:var(--sepia); font-size:.9rem}
.tarjeta-canal p{color:var(--tenue); margin:.8rem 0 1.2rem}
.tarjeta-canal .datos{display:flex; gap:1.6rem; margin-bottom:1.2rem}
.tarjeta-canal .datos div{font-size:.85rem; color:var(--tenue)}
.tarjeta-canal .datos b{display:block; font-size:1.4rem; color:var(--crema); font-family:Fraunces,serif}

/* ---------------------------------------------------------------- dato */
.dato-caja{
  background:linear-gradient(160deg,var(--fondo-2),var(--superficie));
  border:1px solid var(--borde); border-radius:26px; padding:2.4rem;
}
blockquote{
  margin:1.2rem 0 .6rem; font-family:Fraunces,Georgia,serif;
  font-size:clamp(1.2rem,2.6vw,1.7rem); line-height:1.4; border-left:3px solid var(--sepia);
  padding-left:1.2rem; min-height:3.2em;
}
blockquote.cambia{animation:aparece .45s ease}
@keyframes aparece{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.dato-fuente{color:var(--tenue); font-size:.9rem; margin:0 0 1.6rem; padding-left:1.2rem; min-height:1.4em}

/* ---------------------------------------------------------------- videos */
.pestanas{display:flex; gap:.6rem; margin-bottom:1.8rem; flex-wrap:wrap}
.pestana{
  background:transparent; border:1px solid var(--borde); color:var(--tenue);
  padding:.5rem 1.1rem; border-radius:999px; cursor:pointer; font:inherit; font-size:.92rem;
}
.pestana[aria-selected="true"]{background:var(--sepia); border-color:var(--sepia); color:#121A25; font-weight:600}
.rejilla{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.4rem}
.video{background:none; border:0; padding:0; text-align:left; cursor:pointer; color:inherit; font:inherit}
.video .marco{
  position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--borde);
  aspect-ratio:16/9; background:var(--superficie);
}
.video img{width:100%; height:100%; object-fit:cover; transition:transform .35s ease}
.video:hover img{transform:scale(1.05)}
.video .duracion{
  position:absolute; right:.55rem; bottom:.55rem; background:rgba(8,12,18,.86);
  padding:.1rem .45rem; border-radius:6px; font-size:.78rem; color:var(--crema);
}
.video .play{
  position:absolute; inset:0; display:grid; place-items:center; opacity:0; transition:opacity .2s ease;
  background:rgba(8,12,18,.35);
}
.video:hover .play,.video:focus-visible .play{opacity:1}
.video .play span{
  width:54px; height:54px; border-radius:50%; background:var(--rojo); display:grid; place-items:center;
  color:#fff; font-size:1.1rem; padding-left:4px;
}
.video h3{font-size:1rem; margin:.8rem 0 .3rem; font-family:Inter,sans-serif; font-weight:600; line-height:1.35}
.video .meta{color:var(--tenue); font-size:.83rem}

/* ---------------------------------------------------------------- tienda */
.tienda-rejilla{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.2rem}
.tienda-pieza{
  background:var(--superficie); border:1px solid var(--borde); border-radius:var(--radio);
  padding:1.4rem; text-align:center; color:inherit;
  transition:border-color .15s ease, transform .15s ease;
}
.tienda-pieza:hover{border-color:var(--sepia); transform:translateY(-3px); text-decoration:none}
.tienda-pieza img{width:100%; max-width:250px; margin:0 auto .8rem; height:auto}
.tienda-pieza h3{font-size:1.2rem; margin:0 0 .2rem}
.tienda-pieza p{color:var(--tenue); font-size:.88rem; margin:0}
.tienda-pie{text-align:center; margin-top:1.8rem}

/* ---------------------------------------------------------------- marcas */
.marcas-caja{
  background:var(--superficie); border:1px solid var(--borde); border-radius:26px;
  padding:2.6rem; text-align:center;
}
.marcas-caja p{color:var(--tenue); max-width:60ch; margin:0 auto 1.6rem}

footer{
  border-top:1px solid var(--borde); margin-top:2rem; padding:2rem 1.25rem 3rem;
  text-align:center; color:var(--tenue); font-size:.9rem;
}
footer p{margin:.3rem 0}
.tenue{opacity:.7}

/* ---------------------------------------------------------------- modal */
.modal{position:fixed; inset:0; background:rgba(6,9,14,.94); z-index:50; display:grid; place-items:center; padding:1.5rem}
/* Sin esto el modal se ve siempre: el display:grid de la clase gana al
   display:none que el navegador aplica por el atributo hidden. */
.modal[hidden]{display:none}
.modal-marco{width:min(1000px,100%); aspect-ratio:16/9; border-radius:14px; overflow:hidden; border:1px solid var(--borde)}
.modal iframe{width:100%; height:100%; border:0}
.modal-cerrar{
  position:absolute; top:1rem; right:1.3rem; background:none; border:0; color:var(--crema);
  font-size:2.4rem; line-height:1; cursor:pointer;
}

@media (max-width:860px){
  .hero{grid-template-columns:1fr; padding-top:1.5rem; gap:2rem}
  .hero-blob{order:-1}
  #blob{width:min(200px,52vw)}
  .barra nav a:not(.boton-nav){display:none}
  .dato-caja,.marcas-caja{padding:1.6rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}