/* ==========================================================================
   Giro 360 — Portfolio de colaboraciones
   Hoja de estilos principal
   ========================================================================== */

:root{
  --ink:#0e0d0c;
  --ink-soft:#171512;
  --paper:#f5f1e8;
  --violet:#a63bff;
  --violet-bright:#b968ff;
  --violet-dim:#7a2bd4;
  --yellow:#ffbe1a;
  --yellow-dim:#c9930f;
  --onair:#e0402a;
  --slate:#a49c8e;
  --line:rgba(245,241,232,0.14);
  --maxw:1180px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Baloo 2', system-ui, sans-serif;
  letter-spacing:0;
  font-weight:800;
  line-height:1.02;
}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 32px;}

/* Utilidades de aparición al hacer scroll ----------------------------------- */
/* Sin JS el contenido siempre se ve; el efecto sólo se activa con .js */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s ease;}
.js .reveal.is-visible{opacity:1; transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  html{scroll-behavior:auto;}
}

/* NAV --------------------------------------------------------------------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(14,13,12,0.88);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .2s;
}
header.scrolled{box-shadow:0 10px 30px rgba(0,0,0,0.35);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:72px; gap:20px;}
.logo-link{display:flex; align-items:center;}
.logo-img{height:60px; width:auto;}
.navlinks{display:flex; gap:24px; font-size:0.92rem;}
.navlinks a{position:relative; padding:4px 0; color:var(--slate); transition:color .2s; white-space:nowrap;}
.navlinks a:hover,
.navlinks a.active{color:var(--paper);}
.navlinks a::after{content:''; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--violet); transition:width .25s;}
.navlinks a:hover::after,
.navlinks a.active::after{width:100%;}
.nav-cta{
  background:var(--violet); color:#fff; padding:11px 24px;
  font-weight:700; font-size:0.92rem; border-radius:40px;
  white-space:nowrap; box-shadow:0 0 0 0 rgba(166,59,255,0.55);
  transition:background .2s, transform .15s, box-shadow .3s;
  animation:ctaGlow 2.8s ease-in-out infinite;
}
.nav-cta:hover{background:var(--violet-bright); transform:translateY(-1px);}
@keyframes ctaGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(166,59,255,0.45);}
  50%{box-shadow:0 0 22px 2px rgba(166,59,255,0.55);}
}
.nav-live{display:inline-flex; align-items:center; gap:7px;}
.nav-live::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--onair); box-shadow:0 0 0 3px rgba(224,64,42,0.25); animation:pulse 2s infinite;}
@media (prefers-reduced-motion:reduce){ .nav-cta{animation:none;} }
.nav-toggle{display:none; background:none; border:0; color:var(--paper); cursor:pointer; padding:8px; line-height:0;}
.nav-toggle svg{width:26px; height:26px;}

/* HERO ------------------------------------------------------------------- */
.hero{
  position:relative; min-height:88vh; display:flex; align-items:flex-end;
  overflow:hidden;
  clip-path:polygon(0 0, 100% 0, 100% 92%, 0 100%);
}
.hero-bg{
  position:absolute; inset:0;
  background-image:
    linear-gradient(180deg, rgba(14,13,12,0.45) 0%, rgba(14,13,12,0.62) 50%, rgba(14,13,12,0.97) 100%),
    url('../img/hero-estudio.jpg');
  background-size:cover;
  background-position:center 35%;
}
.blob{position:absolute; z-index:1; pointer-events:none; filter:blur(8px);}
.blob-y{
  width:min(520px,60vw); aspect-ratio:1; right:-110px; top:-150px;
  background:var(--yellow); opacity:0.13;
  border-radius:47% 53% 68% 32% / 42% 38% 62% 58%;
  animation:morph 26s ease-in-out infinite;
}
.blob-v{
  width:min(420px,52vw); aspect-ratio:1; left:-160px; bottom:60px;
  background:var(--violet); opacity:0.16;
  border-radius:63% 37% 41% 59% / 44% 56% 44% 56%;
  animation:morph 32s ease-in-out infinite reverse;
}
@keyframes morph{
  0%,100%{border-radius:47% 53% 68% 32% / 42% 38% 62% 58%; transform:rotate(0deg);}
  50%{border-radius:38% 62% 45% 55% / 58% 42% 63% 37%; transform:rotate(18deg);}
}
@media (prefers-reduced-motion:reduce){
  .blob{animation:none !important;}
}
.hero-content{position:relative; z-index:2; padding:0 32px 84px; max-width:var(--maxw); margin:0 auto; width:100%;}
.onair-tag{
  display:inline-flex; align-items:center; gap:8px;
  font-size:0.78rem; font-weight:600; letter-spacing:0.04em;
  color:var(--paper); background:rgba(14,13,12,0.5);
  border:1px solid var(--line); padding:6px 12px; margin-bottom:22px;
  border-radius:40px;
}
.onair-dot{width:8px; height:8px; border-radius:50%; background:var(--onair); box-shadow:0 0 0 3px rgba(224,64,42,0.25); animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
.hero h1{font-size:clamp(2.6rem, 6vw, 5rem); max-width:15ch; color:var(--paper);}
.hero h1 em{font-style:normal; color:var(--yellow);}
.hero p{font-size:1.15rem; color:var(--slate); max-width:46ch; margin-top:22px;}
.hero-actions{display:flex; gap:16px; margin-top:36px; flex-wrap:wrap;}

/* Botones -------------------------------------------------------------- */
.btn{
  display:inline-block; padding:15px 28px; font-weight:600; font-size:0.95rem;
  border-radius:40px; transition:transform .15s, background .2s, border-color .2s;
}
.btn-primary{background:var(--violet); color:#fff;}
.btn-primary:hover{background:var(--violet-bright); transform:translateY(-2px);}
.btn-ghost{border:1px solid var(--line); color:var(--paper);}
.btn-ghost:hover{border-color:var(--paper); transform:translateY(-2px);}

/* STAT STRIP --------------------------------------------------------------- */
.stats{background:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:34px 0;}
.stats .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.stat{
  background:var(--ink); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px; display:flex; flex-direction:column; gap:6px;
}
.stat::before{content:''; width:26px; height:3px; border-radius:3px; background:var(--violet); margin-bottom:8px;}
.stat .num{font-family:'Baloo 2'; font-weight:800; font-size:clamp(1.7rem, 3vw, 2.3rem); color:var(--yellow); line-height:1; word-break:break-word;}
.stat .num.num--word{font-size:clamp(1.3rem, 2.3vw, 1.8rem);}
.stat .lbl{font-size:0.82rem; color:var(--slate); line-height:1.35;}

/* SECCIONES GENÉRICAS --------------------------------------------------- */
section{padding:110px 0;}
:where(section[id], main[id]){scroll-margin-top:88px;}
.kicker{font-size:0.9rem; color:var(--violet); font-weight:700; margin-bottom:14px; letter-spacing:0.02em;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(2rem,4vw,3.2rem); color:var(--paper); max-width:16ch;}
.section-head p{color:var(--slate); max-width:38ch; font-size:1.02rem;}
.band{background:var(--ink-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

/* AUDIENCIA ---------------------------------------------------------------- */
.aud-figures{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:14px;
  overflow:hidden; margin-bottom:44px;
}
.aud-fig{background:var(--ink-soft); padding:28px 22px;}
.aud-fig .n{font-family:'Baloo 2'; font-weight:800; font-size:clamp(1.7rem,2.8vw,2.5rem); color:var(--yellow); line-height:1;}
.aud-fig .l{font-size:0.83rem; color:var(--slate); margin-top:8px; max-width:24ch;}
.aud-demo{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
.aud-block h3{font-family:'IBM Plex Sans'; font-weight:600; font-size:1rem; color:var(--paper); margin-bottom:18px;}
.aud-hint{color:var(--slate); font-weight:400; font-size:0.85rem;}
.bar-row{display:grid; grid-template-columns:58px 1fr 40px; align-items:center; gap:12px; margin-bottom:11px; font-size:0.85rem;}
.bar-row .bl{color:var(--slate);}
.bar-row .bt{height:10px; background:rgba(245,241,232,0.10); border-radius:6px; overflow:hidden;}
.bar-row .bf{display:block; height:100%; min-width:3px; background:linear-gradient(90deg,var(--violet),var(--violet-bright)); border-radius:6px;}
.bar-row .bv{color:var(--paper); font-weight:600; text-align:right;}
@media (max-width:860px){
  .aud-figures{grid-template-columns:repeat(2,1fr);}
  .aud-demo{grid-template-columns:1fr; gap:30px;}
}
@media (max-width:520px){ .aud-figures{grid-template-columns:1fr;} }

/* SOBRE ---------------------------------------------------------------- */
.sobre-grid{display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:start;}
.sobre-grid p{color:var(--slate); margin-bottom:18px; max-width:52ch;}
.sobre-grid strong{color:var(--paper); font-weight:600;}
.fact-list{border-top:1px solid var(--line);}
.fact{display:flex; justify-content:space-between; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); font-size:0.95rem;}
.fact .k{color:var(--slate);}
.fact .v{color:var(--paper); font-weight:600; text-align:right;}

/* SEGMENTOS ---------------------------------------------------------------- */
.segments{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.segment{
  border:1px solid var(--line); border-radius:16px; padding:34px 30px;
  position:relative; overflow:hidden; background:var(--ink);
  transition:transform .18s, border-color .2s;
}
.segment:hover{transform:translateY(-4px); border-color:rgba(245,241,232,0.28);}
.segment::before{content:''; position:absolute; left:0; top:0; height:4px; width:100%; background:var(--seg, var(--violet));}
.segment .badge{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  color:var(--seg, var(--violet)); border:1px solid currentColor; border-radius:40px;
  padding:3px 10px; margin-bottom:16px; text-transform:uppercase;
}
.segment h3{font-size:1.5rem; color:var(--paper); margin-bottom:10px;}
.segment h3 .g{color:var(--seg, var(--violet));}
.segment p{color:var(--slate); font-size:0.95rem;}
.segment.tec{--seg:var(--violet);}
.segment.pol{--seg:var(--onair);}
.segment.mus{--seg:var(--yellow);}

/* FORMATOS --------------------------------------------------------------- */
.formats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.format{
  border:1px solid var(--line); border-radius:16px; padding:28px 26px;
  background:var(--ink); transition:transform .18s, border-color .2s;
}
.format:hover{transform:translateY(-4px); border-color:rgba(245,241,232,0.28);}
.format-tag{
  display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--violet);
  border:1px solid var(--violet-dim); border-radius:40px; padding:3px 10px; margin-bottom:14px;
}
.format h3{font-size:1.15rem; color:var(--paper); font-weight:700; margin-bottom:8px;}
.format p{color:var(--slate); font-size:0.93rem;}
.plan{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
.plan-head{display:flex; gap:14px; align-items:center; margin-bottom:14px;}
.plan-n{flex:none; width:38px; height:38px; border-radius:50%; background:var(--violet); color:#fff; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2'; font-weight:800; font-size:1.1rem;}
.plan-head h3{font-size:1.2rem; color:var(--paper); font-weight:800; line-height:1.1;}
.plan-head p{color:var(--slate); font-size:0.85rem; margin-top:2px;}
.plan-cards{display:grid; gap:12px;}
@media (max-width:980px){ .plan{grid-template-columns:1fr;} }

/* LÍNEA DE TIEMPO (horizontal) --------------------------------------- */
.tl-h{position:relative; margin-top:12px;}
.tl-track{
  position:relative; display:flex; overflow-x:auto; scroll-snap-type:x proximity;
  padding:0 0 10px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.tl-track::-webkit-scrollbar{display:none;}
.tl-track:focus-visible{outline:2px solid var(--violet); outline-offset:4px; border-radius:12px;}
.tl-line{position:absolute; top:46px; left:0; height:2px; background:var(--line); pointer-events:none;}
.tl-line-fill{position:absolute; top:0; left:0; height:100%; width:0; background:linear-gradient(90deg,var(--violet),var(--yellow));}
.tl-card{
  flex:0 0 clamp(228px, 76vw, 286px); scroll-snap-align:center;
  padding:62px 26px 0 0; position:relative;
}
.tl-dot{
  position:absolute; top:39px; left:0; width:15px; height:15px; border-radius:50%;
  background:var(--violet); box-shadow:0 0 0 4px var(--ink); z-index:1;
}
.tl-card:last-child .tl-dot{background:var(--yellow);}
.tl-year{display:block; font-family:'Baloo 2'; font-weight:800; color:var(--yellow); font-size:1rem; margin-bottom:4px;}
.tl-card h3{font-size:1.12rem; color:var(--paper); font-weight:700; margin-bottom:6px;}
.tl-card p{color:var(--slate); font-size:0.92rem;}
.tl-arrow{
  position:absolute; top:46px; transform:translateY(-50%); z-index:4;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:var(--ink-soft); color:var(--paper); font-size:1.3rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,0.4);
  transition:background .2s, border-color .2s, opacity .2s;
}
.tl-arrow:hover{background:var(--violet); border-color:var(--violet);}
.tl-prev{left:-6px;}
.tl-next{right:-6px;}
.tl-arrow[disabled]{opacity:0; pointer-events:none;}
@media (max-width:640px){ .tl-arrow{display:none;} }

/* GALERÍA / EL PROGRAMA ------------------------------------------------- */
.gallery{display:grid; gap:12px; grid-template-columns:repeat(4,1fr);}
.gallery figure{
  margin:0; overflow:hidden; border-radius:14px; border:1px solid var(--line);
  aspect-ratio:1/1; background:var(--ink-soft);
}
.gallery figure:first-child{grid-column:span 2; grid-row:span 2;}
.gallery img{width:100%; height:100%; object-fit:cover; display:block; transition:filter .4s ease;}
.gallery figure:hover img{filter:brightness(1.1);}
@media (max-width:900px){
  .gallery{grid-template-columns:repeat(2,1fr);}
  .gallery figure:first-child{grid-column:span 2; grid-row:auto; aspect-ratio:16/10;}
}
@media (max-width:520px){
  .gallery{grid-template-columns:1fr;}
  .gallery figure:first-child{grid-column:auto; grid-row:auto;}
  .gallery figure, .gallery figure:first-child{aspect-ratio:4/3;}
}

/* CÓMO TRABAJAMOS ---------------------------------------------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line);}
.step{padding:40px 34px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative;}
.step .n{font-family:'Baloo 2'; font-weight:800; font-size:3rem; color:var(--violet); margin-bottom:14px; line-height:1;}
.step h3{font-size:1.3rem; color:var(--paper); font-weight:700; margin-bottom:12px;}
.step p{color:var(--slate); font-size:0.95rem;}

/* MARCAS QUE CONFÍAN (muro de logos en monocromo) ------------------------- */
.brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:36px 20px; align-items:center; justify-items:center;}
.brand-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6px; background:none; border:0; border-radius:12px; text-align:center; color:var(--slate);
}
button.brand-tile{font:inherit; width:100%; cursor:pointer; -webkit-appearance:none; appearance:none;}
.brand-tile.has-reels:focus-visible{outline:2px solid var(--violet); outline-offset:4px;}
.brand-logo-wrap{display:none;}
.brand-tile.has-logo .brand-logo-wrap{display:block;}
/* El fondo propio de cada logo desaparece mezclándolo con el de la sección (screen);
   los logos sobre fondo claro se invierten primero (data-tone="light"). */
.brand-logo{
  display:block; width:100%; max-width:112px; aspect-ratio:1; object-fit:contain;
  filter:grayscale(1) contrast(1.25); mix-blend-mode:screen; opacity:0.78;
  transition:opacity .2s, transform .2s;
}
.brand-tile[data-tone="light"] .brand-logo{filter:grayscale(1) invert(1) contrast(2.3) brightness(0.9);}
.brand-tile[data-shape="round"] .brand-logo{border-radius:50%;}
.brand-tile:hover .brand-logo,
.brand-tile:focus-visible .brand-logo{opacity:1; transform:scale(1.05);}
/* nombre y tipo: sólo para lectores de pantalla cuando ya hay logo (el logo ya dice el nombre) */
.brand-tile.has-logo .name, .brand-tile .kind{
  position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.brand-tile .name{font-family:'Baloo 2'; font-weight:800; font-size:1.2rem; line-height:1.1; color:var(--slate);}
.brand-play{
  position:absolute; top:-2px; right:6px; background:var(--violet); color:#fff;
  font-size:0.66rem; font-weight:700; padding:3px 8px; border-radius:40px;
}
.brand-tile:not(.has-logo) .brand-play{position:static; margin-top:8px;}
.brand-tile.has-reels:hover .brand-play{background:var(--violet-bright);}
@media (max-width:520px){ .brands{grid-template-columns:repeat(3,1fr); gap:26px 10px;} }
.brands-note{margin-top:22px; font-size:0.9rem; color:var(--slate);}
.brands-note a{color:var(--violet); font-weight:600; border-bottom:1px solid currentColor; padding-bottom:1px;}
.brands-note a:hover{color:var(--violet-bright);}

/* MODAL DE REEL ------------------------------------------------------ */
.reel-modal{position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:24px;}
.reel-modal[hidden]{display:none;}
.reel-modal-backdrop{position:absolute; inset:0; background:rgba(6,6,8,0.86);}
.reel-modal-box{position:relative; z-index:1; width:min(380px,92vw); height:min(90vh,740px); display:flex; flex-direction:column; gap:10px;}
.reel-modal-frame{flex:1; min-height:0; width:100%; border-radius:16px; overflow:hidden; background:#000;}
.reel-modal-bar{display:flex; align-items:center; justify-content:space-between; gap:12px; color:var(--paper); font-size:0.9rem;}
.reel-modal-bar[data-single]{justify-content:center;}
.reel-modal-bar[data-single] .reel-nav{display:none;}
.reel-modal-cap{flex:1; text-align:center; font-weight:600;}
.reel-nav{width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--ink-soft); color:var(--paper); font-size:1.3rem; line-height:1; cursor:pointer;}
.reel-nav:hover{background:var(--violet); border-color:var(--violet);}
.reel-modal-frame iframe{width:100%; height:100%; border:0; display:block;}
.reel-modal-close{
  position:absolute; top:-16px; right:-16px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:0; cursor:pointer;
  background:var(--paper); color:var(--ink); font-size:1.6rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
@media (max-width:460px){ .reel-modal-close{top:8px; right:8px;} }

/* TESTIMONIOS (carrusel) ------------------------------------------------- */
.qcarousel{position:relative;}
.qc-track{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 2px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.qc-track::-webkit-scrollbar{display:none;}
.qc-track:focus-visible{outline:2px solid var(--violet); outline-offset:2px; border-radius:12px;}
.qc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; border-radius:50%;
  border:1px solid var(--line); background:var(--ink-soft); color:var(--paper);
  font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
  transition:background .2s, border-color .2s, opacity .2s;
}
.qc-arrow:hover{background:var(--violet); border-color:var(--violet);}
.qc-prev{left:-6px;}
.qc-next{right:-6px;}
.qc-arrow[disabled]{opacity:0; pointer-events:none;}
@media (max-width:640px){ .qc-arrow{display:none;} }
.quote{
  flex:0 0 clamp(258px, 82vw, 384px); scroll-snap-align:start;
  background:var(--ink-soft); border:1px solid var(--line);
  border-radius:18px 18px 18px 6px;
  padding:22px 24px;
}
.quote > p{color:var(--paper); font-size:0.98rem; line-height:1.5;}
.quote-meta{display:flex; align-items:center; gap:10px; margin-top:16px;}
.quote-avatar{
  flex:none; width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,var(--violet),var(--violet-dim));
  font-family:'Baloo 2'; font-weight:800; font-size:0.9rem; color:#fff;
}
.quote-who{display:flex; flex-direction:column; line-height:1.25; min-width:0;}
.quote-who .h{font-weight:600; font-size:0.9rem; color:var(--paper);}
.quote-who .t{font-size:0.78rem; color:var(--slate);}
.quote-who a.t:hover{color:var(--violet-bright);}
.quote-check{margin-left:auto; color:var(--violet); font-size:0.85rem; letter-spacing:-2px;}

/* EQUIPO ------------------------------------------------------------------- */
.team{display:flex; flex-wrap:wrap; justify-content:center; gap:28px;}
.member{
  flex:0 1 calc((100% - 56px) / 3); min-width:0;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--ink); display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .2s ease;
}
.member:hover{transform:translateY(-4px); border-color:rgba(245,241,232,0.28);}
.member-media{position:relative; aspect-ratio:4/5; background:linear-gradient(135deg,var(--violet),var(--violet-dim));}
.member-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 18%;
}
.member-initial{
  position:absolute; inset:0; z-index:1; display:flex; align-items:center; justify-content:center;
  font-family:'Baloo 2'; font-weight:800; font-size:3.6rem; color:#fff;
  background:linear-gradient(135deg,var(--violet),var(--violet-dim));
}
.member.has-photo .member-initial{display:none;}
.member-body{padding:22px 24px 26px;}
.member-body h3{font-family:'IBM Plex Sans'; font-weight:600; font-size:1.15rem; color:var(--paper); margin-bottom:4px;}
.member-body .role{color:var(--violet); font-size:0.85rem; margin-bottom:12px;}
.member-ig{
  display:inline-flex; align-items:center; gap:6px; font-size:0.9rem; color:var(--slate);
  border-bottom:1px solid var(--line); padding-bottom:2px; transition:color .2s, border-color .2s;
}
.member-ig::before{content:'↗'; font-size:0.8em;}
.member-ig:hover{color:var(--paper); border-color:var(--violet);}

/* CONTACTO / FOOTER ------------------------------------------------------ */
.contact{
  position:relative; overflow:hidden;
  background:var(--paper); color:var(--ink);
  clip-path:polygon(0 8%, 100% 0, 100% 100%, 0 100%);
  padding:130px 0 90px;
}
.contact::after{
  content:''; position:absolute; right:-130px; top:-70px;
  width:360px; height:360px; z-index:0;
  background:var(--violet); opacity:0.10;
  border-radius:47% 53% 68% 32% / 42% 38% 62% 58%;
}
.contact .wrap{position:relative; z-index:1;}
.contact h2{color:var(--ink); font-size:clamp(2.2rem,5vw,4rem); max-width:16ch; margin-bottom:22px;}
.contact h2 em{font-style:normal; color:var(--violet-dim);}
.contact p{color:#57524a; max-width:48ch; font-size:1.05rem; margin-bottom:32px;}
.contact .btn-primary{background:var(--ink); color:var(--paper);}
.contact .btn-primary:hover{background:#000;}
.btn-dark-outline{border:1.5px solid var(--ink); color:var(--ink);}
.btn-dark-outline:hover{background:var(--ink); color:var(--paper); transform:translateY(-2px);}
.cta-actions{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:26px;}
.cta-meta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; font-size:0.92rem; color:#6b665d;}
.cta-meta a{color:#57524a; border-bottom:1px solid rgba(14,13,12,0.28); padding-bottom:1px;}
.cta-meta a:hover{border-color:var(--violet-dim); color:var(--ink);}
footer{padding:30px 0; text-align:center; font-size:0.82rem; color:#8a857b; background:var(--paper);}

/* EN VIVO ------------------------------------------------------------------ */
.live-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  border:1px solid var(--line); border-radius:18px; overflow:hidden; background:#000;
}
.live-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block;}
.live-placeholder{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:18px; text-align:center; padding:24px;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(166,59,255,0.22), transparent 60%),
    linear-gradient(180deg, var(--ink-soft), #100e18);
}
.live-badge{
  font-size:0.85rem; font-weight:600; letter-spacing:0.03em; color:var(--paper);
  border:1px solid var(--line); border-radius:40px; padding:8px 16px;
}
.live-frame.is-live::before{
  content:'● EN VIVO'; position:absolute; top:14px; left:14px; z-index:2;
  background:var(--onair); color:#fff; font-size:0.72rem; font-weight:700; letter-spacing:0.06em;
  padding:5px 11px; border-radius:40px;
}
.live-meta{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 20px;
  margin-top:14px; font-size:0.9rem; color:var(--slate);
}
.live-meta a{color:var(--slate); border-bottom:1px solid var(--line); padding-bottom:1px;}
.live-meta a:hover{color:var(--paper); border-color:var(--violet);}
.live-status.on{color:var(--onair); font-weight:700;}

/* SEGUINOS -------------------------------------------------------------- */
#seguinos{background:var(--paper); color:var(--ink); padding:64px 0;}
.follow{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px 30px;}
.follow-title{font-family:'Baloo 2'; font-weight:800; font-size:1.4rem; color:var(--ink);}
.follow-links{display:flex; flex-wrap:wrap; gap:10px;}
.follow-links a{
  border:1.5px solid var(--ink); border-radius:40px; padding:9px 18px;
  font-weight:600; font-size:0.9rem; color:var(--ink); transition:background .2s, color .2s;
}
.follow-links a:hover{background:var(--ink); color:var(--paper);}

/* BOTÓN FLOTANTE DE CONTACTO (mobile) --------------------------------- */
.fab{
  position:fixed; right:16px; bottom:16px; z-index:60;
  background:var(--violet); color:#fff; font-weight:700; font-size:0.92rem;
  padding:13px 22px; border-radius:40px;
  box-shadow:0 10px 30px rgba(166,59,255,0.5);
  opacity:0; transform:translateY(20px); pointer-events:none;
  transition:opacity .25s, transform .25s;
}
.fab.show{opacity:1; transform:translateY(0); pointer-events:auto;}
@media (min-width:861px){ .fab{display:none;} }

/* RESPONSIVE ------------------------------------------------------------- */
@media (max-width:1120px){
  .nav-toggle{display:block;}
  .navlinks{
    position:fixed; left:0; right:0; top:72px;
    flex-direction:column; gap:0;
    background:var(--ink); border-bottom:1px solid var(--line);
    padding:12px 32px 24px;
    transform:translateY(-130%); transition:transform .3s ease;
  }
  .navlinks.open{transform:none;}
  .navlinks a{padding:16px 0; font-size:1.05rem; border-bottom:1px solid var(--line);}
}
@media (max-width:980px){
  .segments{grid-template-columns:1fr;}
}
@media (max-width:860px){
  .sobre-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:1fr;}
  .member{flex-basis:calc((100% - 28px) / 2);}
  .stats .wrap{grid-template-columns:repeat(2,1fr);}
  section{padding:84px 0;}
}
@media (max-width:520px){
  .wrap{padding:0 22px;}
  .member{flex-basis:100%;}
  .stats .wrap{grid-template-columns:1fr;}
}


/* ==========================================================================
   ANIMACIONES UX/UI  (todo respeta prefers-reduced-motion)
   ========================================================================== */

/* barra de progreso de lectura */
.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:70; pointer-events:none;
  background:linear-gradient(90deg,var(--violet),var(--yellow));
  transform-origin:0 50%; transform:scaleX(var(--p,0));
}

/* detalle bajo los títulos de sección */
.section-head h2::after{
  content:''; display:block; width:56px; height:4px; margin-top:16px; border-radius:4px;
  background:linear-gradient(90deg,var(--violet),var(--yellow));
}

@media (prefers-reduced-motion:no-preference){
  /* hero: zoom lento y entrada escalonada */
  .hero-bg{animation:kenburns 28s ease-in-out infinite alternate; transform-origin:60% 40%;}
  @keyframes kenburns{from{transform:scale(1);} to{transform:scale(1.1);}}
  .js .hero-content > *{opacity:0; animation:riseIn .85s cubic-bezier(.2,.7,.2,1) forwards;}
  .hero-content > *:nth-child(1){animation-delay:.10s;}
  .hero-content > *:nth-child(2){animation-delay:.25s;}
  .hero-content > *:nth-child(3){animation-delay:.42s;}
  .hero-content > *:nth-child(4){animation-delay:.58s;}
  @keyframes riseIn{from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;}}

  /* subrayado de los títulos que "se dibuja" al aparecer */
  .js .section-head.reveal h2::after{width:0; transition:width .9s .25s cubic-bezier(.2,.7,.2,1);}
  .js .section-head.reveal.is-visible h2::after{width:56px;}

  /* aparición escalonada de grillas (la activa main.js) */
  .js .stagger-item{
    opacity:0; transform:translateY(22px);
    transition:opacity .6s ease var(--d,0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
  }
  .js .stagger-in .stagger-item{opacity:1; transform:none;}

  /* muro de logos: sólo el logo (animar la tarjeta rompería el mezclado con el fondo) */
  .js .brands.pre .brand-logo{opacity:0; transform:translateY(12px) scale(0.94);}
  .js .brands.pre .brand-tile:not(.has-logo) .name{opacity:0;}
  .brands.anim .brand-logo, .brands.anim .brand-tile .name{
    transition:opacity .7s ease var(--d,0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d,0ms);
  }

  /* botones: brillo al pasar y feedback al apretar */
  .btn, .nav-cta{position:relative; overflow:hidden;}
  .btn-primary::after, .nav-cta::after{
    content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);
    transform:skewX(-20deg); transition:left .7s ease;
  }
  .btn-primary:hover::after, .nav-cta:hover::after{left:150%;}
  .btn:active, .nav-cta:active{transform:scale(0.97);}

  /* modal de reels: entra con un pop */
  .reel-modal:not([hidden]) .reel-modal-backdrop{animation:fadeIn .25s ease;}
  .reel-modal:not([hidden]) .reel-modal-box{animation:popIn .32s cubic-bezier(.2,.8,.2,1);}
  @keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes popIn{from{opacity:0; transform:translateY(18px) scale(0.96);} to{opacity:1; transform:none;}}
}

/* inclinación 3D + brillo que sigue al mouse en las tarjetas (la activa main.js) */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .segment[data-tilt], .format[data-tilt], .member[data-tilt]{
    position:relative;
    transform:perspective(800px) translateY(var(--ty,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition:transform .25s ease-out, border-color .2s;
  }
  .segment[data-tilt]:hover, .format[data-tilt]:hover, .member[data-tilt]:hover{--ty:-4px;}
  .segment[data-tilt]::after, .format[data-tilt]::after, .member[data-tilt]::after{
    content:''; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
    background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%), rgba(166,59,255,0.16), transparent 62%);
  }
  .segment[data-tilt]:hover::after, .format[data-tilt]:hover::after, .member[data-tilt]:hover::after{opacity:1;}
}