/* ===== Fotos reales del grupo ===== */

/* Portada centrada y más fuerte */
.hero-inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:900px}
.hero-inner>*{max-width:100%}
.hero h1{font-size:clamp(2.7rem,9.5vw,5.6rem);line-height:1.04;letter-spacing:-.01em;text-shadow:0 6px 0 rgba(27,17,10,.55),0 10px 36px rgba(0,0,0,.7);margin-bottom:22px}
.hero h1 span{display:inline-block;filter:drop-shadow(0 4px 0 rgba(27,17,10,.6))}
.hero-sub{font-size:clamp(1.05rem,2.4vw,1.35rem);max-width:640px;margin-inline:auto;margin-bottom:32px}
.hero-cta{justify-content:center;margin-bottom:24px}
.hero-cta .btn{padding:18px 38px;font-size:1.12rem}
.hero-social,.hero-badges{justify-content:center}
.hero-badges{margin-inline:auto}
.hero-shade{background:radial-gradient(ellipse 75% 70% at 50% 52%,rgba(27,17,10,.55) 0,rgba(27,17,10,.82) 100%)}
.kicker{font-size:.85rem;padding:8px 18px}

/* Fotos enmarcadas a los lados (solo pantallas amplias) */
.hero-photo{display:none}
@media (min-width:1200px){
  .hero-inner{max-width:640px}
  .hero h1{font-size:min(4.4rem,4.6vw)}
  .hero-photo{display:block;position:absolute;z-index:2;top:52%;background:#fff;padding:10px 10px 38px;border-radius:6px;box-shadow:0 26px 54px rgba(0,0,0,.6);animation:photoin 1.2s .9s cubic-bezier(.2,.8,.2,1) both,sway-photo 7s 2.2s ease-in-out infinite}
  .hero-photo img{width:100%;height:auto;border-radius:3px;display:block}
  .hero-photo figcaption{position:absolute;left:0;right:0;bottom:9px;text-align:center;font-family:var(--title);color:var(--earth);font-size:.95rem}
  .hero-photo::before{content:"";position:absolute;top:-12px;left:50%;width:80px;height:24px;margin-left:-40px;background:rgba(240,162,26,.88);transform:rotate(-3deg);border-radius:2px}
  .hp-left{--r:-5deg;left:max(2.5%,calc((100vw - 1320px)/2));width:min(15vw,210px)}
  .hp-left img{aspect-ratio:3/4;object-fit:cover;object-position:center 20%}
  .hp-right{--r:4deg;right:max(3%,calc((100vw - 1320px)/2));width:min(20vw,290px)}
  .hp-right img{aspect-ratio:4/3;object-fit:cover}
}
@keyframes photoin{from{opacity:0;transform:translateY(-35%) rotate(calc(var(--r) * 3)) scale(.88)}to{opacity:1;transform:translateY(-50%) rotate(var(--r))}}
@keyframes sway-photo{0%,100%{transform:translateY(-50%) rotate(var(--r))}50%{transform:translateY(-53%) rotate(calc(var(--r) * .5))}}

/* Sección del grupo */
.group-shot{margin:0 0 28px;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);border:4px solid #fff;position:relative}
.group-shot img{width:100%;height:auto;max-height:560px;object-fit:cover;object-position:center 30%;transition:transform 1.2s ease}
.group-shot:hover img{transform:scale(1.04)}
.members{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.member{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:3/4;background:var(--night);box-shadow:var(--shadow);cursor:zoom-in}
.member img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;transition:transform .8s ease,filter .4s}
.member::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(27,17,10,.92))}
.member:hover img{transform:scale(1.08)}
.m-info{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:14px 16px;color:#fff;transform:translateY(0);transition:transform .35s}
.m-info h3{font-family:var(--title);font-weight:400;font-size:1.25rem;color:var(--sun)}
.m-info p{font-size:.88rem;opacity:.92;line-height:1.35}
@media (max-width:900px){.members{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.m-info h3{font-size:1.05rem}.m-info p{font-size:.78rem}}

/* Galería en columnas (respeta fotos verticales y horizontales) */
.gallery{display:block;columns:3 240px;column-gap:14px}
.gallery img{width:100%;aspect-ratio:auto;height:auto;margin-bottom:14px;break-inside:avoid;cursor:zoom-in;transition:transform .35s,box-shadow .35s,filter .35s}
.gallery img:hover{transform:scale(1.03) rotate(-.6deg);box-shadow:0 18px 40px rgba(27,17,10,.4)}

/* Video vertical de joropo */
.joropo{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:36px;align-items:center;margin-top:48px;background:var(--earth);color:var(--cream);border-radius:var(--r);padding:28px;box-shadow:var(--shadow);overflow:hidden;position:relative}
.joropo::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(240,162,26,.2),transparent 45%)}
.joropo>*{position:relative}
.joropo-video{border-radius:14px;overflow:hidden;background:#000;box-shadow:0 14px 34px rgba(0,0,0,.5);border:3px solid var(--sun);aspect-ratio:478/850}
.joropo-video video{width:100%;height:100%;object-fit:cover;display:block}
.joropo-text .eyebrow{color:var(--sun)}
.joropo-text h3{font-family:var(--title);font-weight:400;font-size:clamp(1.4rem,3.6vw,2.1rem);line-height:1.2;margin-bottom:12px}
.joropo-text p{margin-bottom:20px;opacity:.9}
@media (max-width:700px){.joropo{grid-template-columns:1fr;padding:20px}.joropo-video{max-width:280px;margin-inline:auto}}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(10,6,3,.92);display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:20px}
.lb.open{opacity:1;pointer-events:auto}
.lb img{max-width:min(94vw,1200px);max-height:88vh;border-radius:10px;box-shadow:0 20px 60px rgba(0,0,0,.6);transform:scale(.92);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.lb.open img{transform:none}
.lb button{position:absolute;top:16px;right:18px;width:46px;height:46px;border-radius:50%;border:0;background:var(--sun);color:var(--night);font-size:1.6rem;font-weight:900;cursor:pointer}
.lb .prev,.lb .next{top:50%;right:auto;left:14px;transform:translateY(-50%);font-size:1.4rem}
.lb .next{left:auto;right:14px}

/* ===== Botones de redes sociales ===== */
.soc{display:inline-flex;align-items:center;justify-content:center;gap:10px;text-decoration:none;color:#fff;font-weight:900;border-radius:999px;transition:transform .3s cubic-bezier(.3,1.6,.5,1),box-shadow .3s,filter .3s;position:relative;overflow:hidden}
.soc:hover{transform:translateY(-5px) scale(1.08);box-shadow:0 14px 28px rgba(0,0,0,.4);filter:brightness(1.1)}
.soc:active{transform:scale(.94)}
.soc-instagram{background:linear-gradient(45deg,#f9a63a,#e1306c 50%,#833ab4)}
.soc-facebook{background:#1877f2}
.soc-youtube{background:#e62117}
.soc-tiktok{background:#111;box-shadow:inset 2px 2px 0 #25f4ee,inset -2px -2px 0 #fe2c55}

/* en la portada */
.hero-social{display:flex;gap:12px;margin:-6px 0 22px}
.hero-social .soc{width:48px;height:48px;border:2px solid rgba(255,255,255,.35)}
.hero-inner>.hero-social{animation-delay:.95s}
.hero-inner>.hero-badges{animation-delay:1.1s}

/* sección Síguenos */
.follow{padding:70px 0;background:var(--night);color:var(--cream);text-align:center;background-image:radial-gradient(circle at 50% 0,rgba(240,162,26,.22),transparent 60%)}
.follow .eyebrow{color:var(--sun)}
.follow h2{color:#fff}
.follow h2::after{margin-inline:auto;width:84px}
.follow .lead{margin-inline:auto;color:rgba(247,236,214,.85);margin-bottom:30px}
.follow-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.follow-btns .soc{padding:16px 30px;font-size:1.05rem;min-width:170px;animation:float 4s ease-in-out infinite}
.follow-btns .soc:nth-child(2){animation-delay:.5s}.follow-btns .soc:nth-child(3){animation-delay:1s}.follow-btns .soc:nth-child(4){animation-delay:1.5s}
.follow-btns .soc::before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:sweep 3.6s ease-in-out infinite}
.follow-btns .soc:hover{animation-play-state:paused}
@media (max-width:480px){.follow-btns .soc{width:100%;max-width:300px}}

/* pie de página: íconos redondos */
.footer .social a.soc{width:46px;height:46px;padding:0;border:0}
.footer .social a.soc:hover{background:inherit;color:#fff}
.footer .social a:not(.soc){border:1px solid var(--sun);padding:9px 16px;border-radius:999px;text-decoration:none;font-weight:700}
.footer .social{align-items:center}

/* Cobertura nacional */
.cover-map{width:92px;height:62px;border-radius:8px;background:linear-gradient(#fcd116 0 50%,#003893 50% 75%,#ce1126 75%);box-shadow:0 8px 18px rgba(0,0,0,.35);animation:float 3.5s ease-in-out infinite}
.dark .lead b{color:var(--sun)}

/* ===== Escenario de instrumentos en la portada ===== */
.hero{padding-bottom:calc(min(100vw,600px) * .52)}
.hero-stage{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,600px);height:auto;z-index:1;pointer-events:none;overflow:visible}
.hero-inner{position:relative;z-index:3}
.hero-photo{z-index:2}
@media (min-width:1200px){
  .hero{padding-bottom:90px}
  .hero-stage{width:560px}
}
@media (max-width:560px){
  .hero{padding-top:92px}
  .hero-badges{gap:6px 16px;font-size:.88rem}
  .hero-sub{margin-bottom:24px}
}

/* Móvil: que la primera pantalla muestre los instrumentos */
@media (max-width:560px){
  .hero{padding-bottom:calc(min(100vw,600px) * .47);min-height:100svh}
  .hero-badges{display:none}
  .hero h1{font-size:clamp(2.1rem,9.4vw,2.7rem);margin-bottom:14px}
  .hero-sub{font-size:1rem;margin-bottom:20px}
  .hero-cta{gap:10px;margin-bottom:16px}
  .hero-cta .btn{padding:14px 24px;font-size:1.02rem}
  .hero-social{margin:0 0 6px}
  .kicker{margin-bottom:12px;font-size:.74rem;padding:6px 14px}
}

/* más luz detrás de los instrumentos */
.hero-shade{background:radial-gradient(ellipse 85% 62% at 50% 32%,rgba(27,17,10,.6) 0,rgba(27,17,10,.55) 55%,rgba(27,17,10,.18) 100%)}

@media (min-width:1200px){
  .hero{padding-bottom:200px}
  .hero-stage{width:470px}
}

/* ===== Botón de llamada ===== */
.btn-call{background:var(--sun);color:var(--night);box-shadow:0 8px 22px rgba(240,162,26,.45)}
.btn-call:hover{background:#ffb938;box-shadow:0 12px 30px rgba(240,162,26,.65)}
.btn-call svg{animation:ring 3.6s 1.2s ease-in-out infinite;transform-origin:50% 50%}
.final-btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}
.final .btn-call{box-shadow:0 8px 22px rgba(0,0,0,.3)}
.cover-card .btn-call{width:100%;max-width:300px}
.call-float{display:none;position:fixed;right:22px;bottom:88px;z-index:60;width:52px;height:52px;border-radius:50%;background:var(--sun);color:var(--night);place-items:center;box-shadow:0 8px 22px rgba(0,0,0,.35);transition:transform .25s}
.call-float:hover{transform:scale(1.1) rotate(8deg)}
@media (max-width:860px){.call-float{display:grid}}
@media (max-width:560px){
  .hero-cta{display:grid;grid-template-columns:1fr 1fr;width:100%;max-width:420px}
  .hero-cta .btn-wa{grid-column:1 / -1}
  .hero-cta .btn{padding:13px 12px;font-size:.98rem;width:100%}
  .final-btns .btn{width:100%;max-width:340px}
}

/* ===== Botón de llamar: color más llamativo ===== */
.btn-call{background:linear-gradient(135deg,#ff8a1f,#e4410f);color:#fff;border-color:rgba(255,214,120,.9);box-shadow:0 8px 22px rgba(228,65,15,.5),inset 0 1px 0 rgba(255,255,255,.35)}
.btn-call:hover{background:linear-gradient(135deg,#ff9a3a,#f04e18);box-shadow:0 12px 30px rgba(228,65,15,.7)}
.final .btn-call{background:#fff;color:#c2410c;border-color:#fff;box-shadow:0 8px 22px rgba(0,0,0,.3)}
.final .btn-call:hover{background:#fff4e0}
.call-float{background:linear-gradient(135deg,#ff8a1f,#e4410f);color:#fff;border:2px solid rgba(255,214,120,.9)}

/* Aviso al copiar el número (computador) */
.toast{position:fixed;left:50%;bottom:28px;z-index:120;transform:translate(-50%,30px);background:var(--night);color:var(--cream);border:2px solid var(--sun);border-radius:16px;padding:14px 20px;max-width:min(92vw,420px);text-align:center;box-shadow:0 18px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.toast.show{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.toast b{display:block;font-family:var(--title);font-weight:400;font-size:1.5rem;color:var(--sun);letter-spacing:.04em}
.toast span{display:block;font-size:.92rem;opacity:.9;margin-top:2px}
.toast a{display:inline-block;margin-top:10px;color:#fff;background:var(--wa);padding:8px 16px;border-radius:999px;text-decoration:none;font-weight:900;font-size:.92rem}