/* Melilla Titans — paginas.css · socios, noticias, legal
   Generado en la modularización 2.0.0 a partir de main.css. */

/* ===== SOCIOS page (v2: carnet 3D + embedded checkout) ===== */
.soc-page{max-width:1360px;margin:0 auto;padding:150px 32px 5vh}
.soc-checkout[hidden]{display:none!important}

/* head split: copy + carnet */
.soc-head{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;margin-bottom:44px;position:relative}
.soc-head > *{position:relative;z-index:1}
.soc-echo{position:absolute;z-index:0;left:-3%;bottom:-14%;pointer-events:none;
  font-family:'Big Shoulders Display';font-weight:900;text-transform:uppercase;line-height:.8;
  font-size:clamp(9rem,24vw,22rem);letter-spacing:-.02em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:2px rgba(10,26,62,.06);
  animation:echoDrift 14s ease-in-out infinite alternate}
@keyframes echoDrift{from{transform:translateX(0)}to{transform:translateX(-3%)}}
.soc-head .tag{font-family:'Inter';font-size:.7rem;font-weight:700;letter-spacing:.24em;
  color:var(--gold-deep);text-transform:uppercase}
.soc-head h1{font-family:'Big Shoulders Display';font-size:clamp(2.8rem,6vw,5.4rem);text-transform:uppercase;
  line-height:.86;color:var(--navy);font-weight:900;letter-spacing:-.015em;margin-top:16px}
.soc-head h1 em{font-style:normal;color:var(--gold);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill}
.soc-head .lead{margin-top:26px;font-size:1.02rem;line-height:1.75;color:var(--ink-soft);max-width:56ch}
.head-cta{display:flex;align-items:center;gap:20px;margin-top:30px;flex-wrap:wrap}
.price-mini{font-family:'Big Shoulders Display';font-size:1.3rem;font-weight:900;text-transform:uppercase;
  color:var(--gold);-webkit-text-stroke:1.5px var(--navy);paint-order:stroke fill}

/* ---- carnet 3D ---- */
.carnet-zone{perspective:1400px;display:grid;place-items:center}
.carnet-float{width:min(460px,100%);animation:carnetFloat 5.5s ease-in-out infinite alternate;will-change:transform}
@keyframes carnetFloat{from{transform:translateY(0) rotate(-.4deg)}to{transform:translateY(-10px) rotate(.4deg)}}
.carnet{position:relative;width:100%;aspect-ratio:1.586;
  cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:manipulation;
  transform:rotateY(calc(var(--mx,0)*10deg)) rotateX(calc(var(--my,0)*-8deg));
  transition:transform .25s ease-out;will-change:transform;transform-style:preserve-3d}
.cflip{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .75s cubic-bezier(.2,.75,.25,1)}
.carnet.flipped .cflip{transform:rotateY(180deg)}
.cface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;border:1px solid rgba(212,183,106,.55);border-bottom:4px solid var(--gold);
  box-shadow:0 34px 80px rgba(10,26,62,.35);background:var(--navy)}
.cface img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.cface.back{transform:rotateY(180deg)}
.cface::after{content:"";position:absolute;top:-20%;bottom:-20%;width:70px;left:-120px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.3),transparent);
  transform:skewX(-14deg);animation:carnetGlint 4.6s ease-in-out infinite;pointer-events:none}
@keyframes carnetGlint{0%,58%{left:-120px}88%,100%{left:120%}}
.cface .shine{position:absolute;inset:-40%;pointer-events:none;opacity:.85;
  background:radial-gradient(circle at calc(50% + var(--mx,0)*45%) calc(50% + var(--my,0)*45%),
    rgba(255,255,255,.30) 0%,rgba(228,203,127,.10) 24%,transparent 48%)}

/* ---- entrance: masked letter lines + staggered rises ---- */
.soc-title .line{display:block;overflow:hidden;
  padding:.14em .06em .09em;margin:-.14em -.06em -.09em}
.soc-title .li{display:inline-block;transform:translateY(115%);
  animation:anLineUp .7s cubic-bezier(.19,.8,.22,1) .12s forwards}
.soc-title .li.d2{animation-delay:.26s}
.soc-page .rise{opacity:0;transform:translateY(16px);
  animation:anRise .6s cubic-bezier(.19,.8,.22,1) forwards}
.soc-page .rise.r1{animation-delay:.05s}
.soc-page .rise.r2{animation-delay:.42s}
.soc-page .rise.r3{animation-delay:.55s}
.carnet-in{animation:carnetIn .8s cubic-bezier(.2,.8,.2,1) .3s backwards}
@keyframes carnetIn{from{opacity:0;transform:translateY(30px) rotateY(-14deg) scale(.96)}
  to{opacity:1;transform:translateY(0) rotateY(0) scale(1)}}

/* ---- carnet: modo super saiyan (easter egg, hover mantenido) ---- */
.carnet-zone{position:relative}
.carnet-zone::after{content:"";position:absolute;inset:-8% -4%;pointer-events:none;opacity:0;
  background-image:
    radial-gradient(circle 3px at 12% 90%, var(--gold-bright) 40%, transparent 41%),
    radial-gradient(circle 2px at 30% 95%, var(--gold) 40%, transparent 41%),
    radial-gradient(circle 3px at 52% 92%, var(--gold-bright) 40%, transparent 41%),
    radial-gradient(circle 2px at 70% 97%, var(--gold) 40%, transparent 41%),
    radial-gradient(circle 3px at 88% 91%, var(--gold-bright) 40%, transparent 41%);
  background-repeat:no-repeat;background-size:100% 100%;
  transition:opacity .3s}
.carnet-zone.ssj::after{opacity:1;animation:ssjParticles 1.1s linear infinite}
@keyframes ssjParticles{
  0%{transform:translateY(0);opacity:0}
  15%{opacity:.9}
  100%{transform:translateY(-115%);opacity:0}}

.carnet-float.ssj{animation:ssjShake .16s linear infinite}
@keyframes ssjShake{
  0%,100%{transform:translate(0,0) rotate(0)}
  25%{transform:translate(1.5px,-1px) rotate(.25deg)}
  50%{transform:translate(-1.5px,1px) rotate(-.25deg)}
  75%{transform:translate(1px,1.5px) rotate(.2deg)}}

.carnet:active{cursor:grabbing}
.carnet.ssj{filter:brightness(1.12) saturate(1.15)}
.carnet.ssj .cface{animation:ssjAura .9s ease-in-out infinite alternate;border-color:var(--gold-bright)}
@keyframes ssjAura{
  from{box-shadow:0 34px 80px rgba(10,26,62,.35),0 0 26px rgba(228,203,127,.45),0 0 70px rgba(212,183,106,.25)}
  to{box-shadow:0 34px 80px rgba(10,26,62,.35),0 0 44px rgba(228,203,127,.75),0 0 120px rgba(212,183,106,.45)}}
.carnet.ssj .shine{opacity:1}
.carnet.ssj .cface::after{animation-duration:1.3s}

/* ---- flashes ---- */
.soc-flash{padding:16px 20px;margin-bottom:34px;font-size:.92rem;border:1px solid;font-weight:500}
.soc-flash.warn{border-color:var(--hair-strong);background:rgba(10,26,62,.04);color:var(--ink-soft)}
.soc-flash.err{border-color:#b3564f;background:rgba(179,86,79,.08);color:#7c2f29}
.soc-flash a{font-weight:700;color:var(--gold-deep);border-bottom:1px solid var(--gold-deep)}

/* ---- marquee ---- */
.soc-marquee{overflow:hidden;background:var(--navy);border-top:3px solid var(--gold);
  border-bottom:3px solid var(--gold);margin:0 0 56px;padding:13px 0}
.soc-marquee .track{display:flex;width:max-content;align-items:center;
  animation:socMarquee 36s linear infinite}
.soc-marquee .seq{display:flex;gap:34px;align-items:center;padding-right:34px;flex:none}
.soc-marquee span{font-family:'Big Shoulders Display';font-size:1.15rem;font-weight:900;
  text-transform:uppercase;letter-spacing:.14em;color:#fff;white-space:nowrap}
.soc-marquee i{color:var(--gold);font-style:normal;font-size:.7rem}
@keyframes socMarquee{to{transform:translateX(-50%)}}

/* ---- pack photo ---- */
.soc-photo{margin:0 0 56px}
.soc-photo .frame{position:relative;overflow:hidden;border:1px solid var(--hair-strong);
  border-bottom:4px solid var(--gold);box-shadow:0 26px 64px rgba(10,26,62,.14);background:var(--navy)}
.soc-photo img{display:block;width:100%;aspect-ratio:21/9;object-fit:cover}
.soc-photo .ptag{position:absolute;left:18px;bottom:16px;font-family:'Inter';font-size:.62rem;
  font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
  background:rgba(6,15,42,.78);border:1px solid rgba(212,183,106,.5);padding:8px 14px;backdrop-filter:blur(4px)}
.soc-photo figcaption{margin-top:12px;font-family:'Inter';font-size:.78rem;letter-spacing:.06em;
  color:var(--ink-mute);font-weight:500}
@media(max-width:640px){.soc-photo img{aspect-ratio:4/3}}

/* ---- benefits ---- */
.soc-benefits{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:44px}
.soc-benefit{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:26px;
  background:#fff;border:1px solid var(--hair);box-shadow:0 10px 30px rgba(10,26,62,.05);
  position:relative;overflow:hidden;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),border-color .25s,box-shadow .25s}
.soc-benefit::after{content:"";position:absolute;top:0;right:0;width:0;height:3px;background:var(--gold);
  transition:width .35s cubic-bezier(.2,.8,.2,1)}
.soc-benefit:hover{border-color:var(--gold);transform:translateY(-4px) scale(1.01);
  box-shadow:0 22px 46px rgba(10,26,62,.12)}
.soc-benefit:hover::after{width:100%}
.soc-benefit .num{font-family:'Big Shoulders Display';font-size:2.2rem;font-weight:900;line-height:.9;
  color:var(--gold);-webkit-text-stroke:1.8px var(--navy);paint-order:stroke fill}
.soc-benefit p{font-size:.96rem;line-height:1.6;color:var(--ink-soft);padding-top:4px}
.soc-benefits .reveal:nth-child(2){transition-delay:.09s}
.soc-benefits .reveal:nth-child(3){transition-delay:.18s}
.soc-benefits .reveal:nth-child(4){transition-delay:.27s}
.soc-benefits .reveal:nth-child(5){transition-delay:.36s}
.soc-benefits .reveal:nth-child(6){transition-delay:.45s}
.soc-intro-2{max-width:72ch;font-size:1.02rem;line-height:1.75;color:var(--ink-soft);margin-bottom:56px}

/* ---- camiseta ---- */
.soc-shirt{display:grid;grid-template-columns:1.2fr .8fr;background:var(--navy);color:#fff;
  border-top:3px solid var(--gold);border-bottom:3px solid var(--gold);margin-bottom:56px;
  position:relative;overflow:hidden}
.soc-shirt::after{content:"";position:absolute;top:0;bottom:0;width:80px;left:-120px;
  background:linear-gradient(100deg,transparent,rgba(212,183,106,.2),transparent);
  transform:skewX(-12deg);animation:mdSweep 8s ease-in-out infinite}
.soc-shirt .body{padding:56px 48px;position:relative;z-index:1}
.soc-shirt .kicker{font-family:'Inter';font-size:.68rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold)}
.soc-shirt h2{font-family:'Big Shoulders Display';font-size:clamp(1.9rem,3.6vw,3rem);text-transform:uppercase;
  line-height:.92;margin:16px 0 18px;font-weight:800}
.soc-shirt p{font-size:1rem;line-height:1.7;color:var(--on-navy);max-width:52ch}
.soc-shirt .vis{display:grid;place-items:center;border-left:1px solid var(--hair-on-navy);padding:30px;position:relative;z-index:1}
.soc-shirt .vis svg{width:52%;color:var(--gold);opacity:.5}
.soc-shirt .vis.has-img{padding:0;min-height:340px}
.soc-shirt .vis.has-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---- CTA + embedded checkout ---- */
.soc-cta{display:grid;grid-template-columns:1fr auto;gap:44px;align-items:center;padding:38px 40px;
  background:#fff;border:1px solid var(--hair-strong);border-bottom:3px solid var(--gold);
  box-shadow:0 20px 50px rgba(10,26,62,.08);scroll-margin-top:110px}
.soc-cta .price{font-family:'Big Shoulders Display';font-size:2.8rem;font-weight:900;line-height:.95;
  color:var(--gold);-webkit-text-stroke:2px var(--navy);paint-order:stroke fill;
  text-transform:uppercase;margin-bottom:10px}
.soc-cta p{font-size:.96rem;line-height:1.65;color:var(--ink-soft);max-width:56ch}
.soc-cta .pay-note{margin-top:12px;font-size:.72rem;color:var(--ink-mute);max-width:32ch;line-height:1.55}
.soc-cta .price .digit{display:inline-block;height:1em;overflow:hidden;vertical-align:bottom}
.soc-cta .price .col{display:flex;flex-direction:column;
  transition:transform 1.1s cubic-bezier(.22,.85,.28,1)}
.soc-cta .price .col span{height:1em;display:block;line-height:1}
.btn-pay{position:relative;overflow:hidden}
.btn-pay::after{content:"";position:absolute;top:0;bottom:0;width:40px;left:-70px;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
  transform:skewX(-15deg);animation:paySweep 2.6s ease-in-out infinite}
@keyframes paySweep{0%,55%{left:-70px}100%{left:130%}}

.soc-checkout{margin-top:22px}
.soc-checkout .frame{border:1px solid var(--hair-strong);border-top:3px solid var(--gold);
  background:#fff;box-shadow:0 26px 60px rgba(10,26,62,.14);overflow:hidden;
  animation:coIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes coIn{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:translateY(0)}}
.soc-checkout .frame-head{display:flex;justify-content:space-between;align-items:center;
  padding:16px 22px;background:var(--navy);color:#fff}
.soc-checkout .frame-head span{font-family:'Inter';font-size:.66rem;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.soc-checkout .frame-close{background:none;border:1px solid var(--hair-on-navy-strong);color:var(--on-navy);
  width:32px;height:32px;cursor:pointer;line-height:1;transition:.2s}
.soc-checkout .frame-close:hover{border-color:var(--gold);color:var(--gold)}
#socCheckoutMount{min-height:560px;padding:10px}

/* ---- welcome (estado=ok) ---- */
.soc-welcome{position:relative;text-align:center;padding:8vh 20px 6vh;overflow:hidden}
.soc-welcome .wl-sweep{position:absolute;top:0;bottom:0;width:120px;left:-160px;
  background:linear-gradient(100deg,transparent,rgba(212,183,106,.25),transparent);
  transform:skewX(-12deg);animation:mdSweep 3.2s ease-in-out infinite}
.soc-welcome .tag{font-family:'Inter';font-size:.7rem;font-weight:800;letter-spacing:.26em;
  text-transform:uppercase;color:var(--gold-deep)}
.soc-welcome h1{font-family:'Big Shoulders Display';font-size:clamp(3.4rem,10vw,8.5rem);
  text-transform:uppercase;line-height:.85;color:var(--navy);font-weight:900;margin:22px 0 26px}
.soc-welcome h1 em{font-style:normal;color:var(--gold);-webkit-text-stroke:3px var(--navy);paint-order:stroke fill}
.soc-welcome p{max-width:56ch;margin:0 auto 34px;font-size:1.04rem;line-height:1.75;color:var(--ink-soft)}

@media(max-width:980px){
  .soc-page{padding:130px 20px 4vh}
  .soc-echo{display:none}
  .soc-head{grid-template-columns:1fr;gap:40px}
  .carnet-zone{order:-1}
  .soc-benefits{grid-template-columns:1fr}
  .soc-shirt{grid-template-columns:1fr}
  .soc-shirt .vis{border-left:none;border-top:1px solid var(--hair-on-navy);min-height:180px}
  .soc-cta{grid-template-columns:1fr;gap:22px;padding:28px 22px}
  #socCheckoutMount{min-height:620px;padding:4px}
}

/* ===== Detalle de noticia ===== */
.news-show{display:grid;grid-template-columns:minmax(280px,440px) 1fr;gap:54px;align-items:start}
.news-show.no-cover{grid-template-columns:1fr;max-width:70ch}
.ns-cover{position:sticky;top:110px}
.ns-cover img{display:block;width:100%;border:1px solid var(--hair-strong);
  border-bottom:4px solid var(--gold);box-shadow:0 24px 60px rgba(10,26,62,.14)}
.ns-cover figcaption{margin-top:12px;font-family:'Inter';font-size:.7rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)}
.ns-body{max-width:66ch}
.ns-body .lead{font-size:1.16rem;line-height:1.6;color:var(--navy);font-weight:600;
  border-left:3px solid var(--gold);padding-left:20px;margin-bottom:30px}
.ns-body .txt{font-size:1.02rem;line-height:1.8;color:var(--ink-soft)}
.ns-body .back{margin-top:50px}
@media(max-width:900px){
  .news-show{grid-template-columns:1fr;gap:30px}
  .ns-cover{position:static}
}