/* ==========================================================================
   sections/social.css
   Sección REDES SOCIALES (#redes): celular tipo Instagram, tarjetas por red,
   caja de compartir y barra lateral fija de redes (escritorio).
   ========================================================================== */
.social { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 70px); align-items: center; max-width: 1080px; margin: 0 auto; }

/* ---------- Celular ---------- */
.sphone { position: relative; justify-self: center; width: min(340px, 100%); }
.sphone__frame { position: relative; border-radius: 44px; padding: 12px; background: linear-gradient(160deg, #2a2a33, #0c0c10); border: 1px solid var(--line-2);
  box-shadow: 0 50px 100px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04) inset, 0 0 80px -20px rgba(227,38,43,.55); }
.sphone__notch { position: absolute; z-index: 2; top: 20px; left: 50%; width: 90px; height: 22px; margin-left: -45px; border-radius: 20px; background: #050507; }
.sphone__screen { border-radius: 34px; overflow: hidden; background: #0b0b0f; padding: 54px 14px 14px; height: 600px; overflow-y: auto; scrollbar-width: none; }
.sphone__screen::-webkit-scrollbar { display: none; }

.sprof { display: flex; align-items: center; gap: 16px; }
.sprof__avatar { flex: none; width: 74px; height: 74px; border-radius: 50%; padding: 3px; background: conic-gradient(from 200deg, #f9ce34, #ee2a7b, #6228d7, #e3262b, #f9ce34); animation: ringspin 6s linear infinite; }
.sprof__avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: contain; background: #fff; border: 3px solid #0b0b0f; animation: ringspin 6s linear infinite reverse; }
@keyframes ringspin { to { transform: rotate(360deg); } }
.sprof__stats { flex: 1; display: flex; justify-content: space-around; text-align: center; }
.sprof__stats b { display: block; font-family: var(--font-d); font-size: 1.05rem; }
.sprof__stats small { color: var(--muted); font-size: .7rem; }
.sprof__name { margin: 10px 0 10px; line-height: 1.3; }
.sprof__name b { display: block; font-size: .92rem; }
.sprof__name small { color: var(--muted); font-size: .76rem; }
.sprof__btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.sprof__btns a { display: grid; place-items: center; height: 34px; border-radius: 10px; font-weight: 700; font-size: .82rem; transition: transform .3s var(--ease), filter .3s; }
.sprof__follow { background: linear-gradient(90deg, #e3262b, #ff4d52); box-shadow: 0 8px 20px -6px rgba(227,38,43,.7); animation: followPulse 2.6s ease-in-out infinite; }
.sprof__msg { background: rgba(255,255,255,.1); }
.sprof__btns a:hover { transform: translateY(-2px); filter: brightness(1.15); }
@keyframes followPulse { 50% { box-shadow: 0 8px 28px -2px rgba(227,38,43,.95); } }

.sstories { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; margin: 0 -14px 10px; padding-left: 14px; padding-right: 14px; scrollbar-width: none; }
.sstories::-webkit-scrollbar { display: none; }
.sstory { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 62px; }
.sstory__ring { width: 58px; height: 58px; border-radius: 50%; padding: 2.5px; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #e3262b); transition: transform .3s var(--ease); }
.sstory__ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 40%; border: 2.5px solid #0b0b0f; }
.sstory small { font-size: .66rem; color: var(--text); white-space: nowrap; }
.sstory:hover .sstory__ring { transform: scale(1.08) rotate(-4deg); }

.sposts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; margin: 0 -14px; }
.spost { position: relative; aspect-ratio: 1; overflow: hidden; background: #15151b; }
.spost img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--ease); }
.spost__tag { position: absolute; left: 4px; top: 4px; font-size: .56rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: var(--red); padding: 2px 6px; border-radius: 4px; }
.spost__over { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .3s; }
.spost__over .ico { width: 30px; height: 30px; color: #fff; fill: #fff; }
.spost:hover img { transform: scale(1.08); }
.spost:hover .spost__over { opacity: 1; }
.spost.liked .spost__over { opacity: 1; }
.spost.liked .spost__over .ico { color: var(--red-2); fill: var(--red-2); animation: likePop .5s var(--ease); }
@keyframes likePop { 0% { transform: scale(.2); } 60% { transform: scale(1.4); } 100% { transform: scale(1); } }

.sphone__float { position: absolute; display: grid; place-items: center; border-radius: 50%; color: #fff; box-shadow: 0 16px 30px -8px rgba(0,0,0,.8); animation: floaty 4s ease-in-out infinite; pointer-events: none; }
.sphone__float .ico { width: 55%; height: 55%; }
.sphone__float--1 { width: 56px; height: 56px; right: -22px; top: 22%; background: linear-gradient(135deg, #ff4d52, #a50f16); }
.sphone__float--1 .ico { fill: #fff; }
.sphone__float--2 { width: 48px; height: 48px; left: -24px; top: 48%; background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); animation-delay: -1.3s; }
.sphone__float--3 { width: 44px; height: 44px; right: -14px; bottom: 14%; background: #000; border: 1px solid rgba(255,255,255,.2); animation-delay: -2.4s; }
.sphone__float--3 .ico { filter: drop-shadow(-2px 0 0 #25f4ee) drop-shadow(2px 0 0 #fe2c55); }
@keyframes floaty { 50% { transform: translateY(-12px) rotate(-6deg); } }

/* ---------- Tarjetas por red ---------- */
.social__side { display: grid; gap: 16px; }
.snets { display: grid; gap: 14px; }
.snet { position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 20px 22px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line-2);
  transition: border-color .4s, box-shadow .4s, transform .4s var(--ease); --brand: var(--red); --brand-bg: var(--red); }
.snet--instagram { --brand: #ee2a7b; --brand-bg: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.snet--facebook { --brand: #1877f2; --brand-bg: linear-gradient(135deg, #3b8dff, #1159c9); }
.snet--tiktok { --brand: #fe2c55; --brand-bg: linear-gradient(135deg, #111, #000); }
.snet__glow { position: absolute; inset: 0; background: var(--brand-bg); opacity: 0; transition: opacity .45s var(--ease); }
.snet > :not(.snet__glow) { position: relative; }
.snet__ico { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; background: var(--brand-bg); box-shadow: 0 12px 26px -10px var(--brand); transition: transform .5s var(--ease); }
.snet__ico .ico { width: 32px; height: 32px; color: #fff; }
.snet--tiktok .snet__ico { border: 1px solid rgba(255,255,255,.2); }
.snet--tiktok .snet__ico .ico { filter: drop-shadow(-2px 0 0 #25f4ee) drop-shadow(2px 0 0 #fe2c55); }
.snet__body b { display: block; font-family: var(--font-d); font-size: 1.15rem; }
.snet__body small { color: var(--red-2); font-weight: 700; font-size: .82rem; }
.snet__txt { display: block; color: var(--muted); font-size: .9rem; margin-top: 4px; transition: color .4s; }
.snet__cta { display: inline-flex; align-items: center; gap: .45em; padding: .7em 1.1em; border-radius: 999px; font-weight: 800; font-size: .84rem; background: rgba(255,255,255,.08); border: 1px solid var(--line-2); white-space: nowrap; transition: all .4s var(--ease); }
.snet__cta .ico { width: 16px; height: 16px; transition: transform .4s var(--ease); }
.snet:hover { border-color: var(--brand); box-shadow: 0 24px 60px -24px var(--brand); }
.snet:hover .snet__glow { opacity: .92; }
.snet:hover .snet__ico { transform: rotate(-10deg) scale(1.08); background: rgba(255,255,255,.18); box-shadow: none; }
.snet:hover .snet__body small, .snet:hover .snet__txt { color: #fff; }
.snet:hover .snet__cta { background: #fff; color: #111; border-color: #fff; }
.snet:hover .snet__cta .ico { transform: translateX(4px); }

/* ---------- Compartir ---------- */
.sshare { padding: 20px 22px; border-radius: var(--radius); border: 1px dashed rgba(227,38,43,.5); background: radial-gradient(circle at 100% 0%, rgba(227,38,43,.18), transparent 60%), var(--card); }
.sshare__head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sshare__head > .ico { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--red); color: #fff; }
.sshare__head b { display: block; }
.sshare__head small { color: var(--muted); }
.sshare__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.sshare__btn { display: inline-flex; align-items: center; gap: .45em; padding: .65em 1em; border-radius: 999px; font-weight: 700; font-size: .84rem; background: rgba(255,255,255,.07); border: 1px solid var(--line-2); transition: all .3s var(--ease); }
.sshare__btn .ico { width: 17px; height: 17px; }
.sshare__btn:hover { transform: translateY(-3px); background: var(--red); border-color: var(--red); }
.sshare__btn--wa:hover { background: var(--wa); border-color: var(--wa); color: #06210f; }
.sshare__btn--fb:hover { background: #1877f2; border-color: #1877f2; }

/* ---------- Íconos de redes en menú móvil y pie ---------- */
.socials--menu { justify-content: center; margin-top: 18px; }
.footer .socials { margin-top: 6px; }
.footer .socials a, .socials--menu a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line-2); transition: all .3s var(--ease); }
.footer .socials a:hover, .socials--menu a:hover { background: var(--red); border-color: var(--red); transform: translateY(-4px) rotate(-8deg); }

/* ---------- Botones de redes en el inicio ---------- */
.hero__social { display: flex; align-items: center; gap: 14px; margin: -14px 0 34px; }
.hero__social > span { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.socials--hero a { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; box-shadow: 0 12px 26px -10px rgba(0,0,0,.9); transition: transform .35s var(--ease), box-shadow .35s; }
.socials--hero a .ico { width: 22px; height: 22px; }
.socials--hero a[data-net="instagram"] { background: linear-gradient(45deg, #f9ce34, #ee2a7b 50%, #6228d7); }
.socials--hero a[data-net="facebook"] { background: #1877f2; }
.socials--hero a[data-net="tiktok"] { background: #000; border: 1px solid rgba(255,255,255,.2); }
.socials--hero a[data-net="tiktok"] .ico { filter: drop-shadow(-2px 0 0 #25f4ee) drop-shadow(2px 0 0 #fe2c55); }
.socials--hero a:hover { transform: translateY(-5px) rotate(-8deg) scale(1.08); box-shadow: 0 16px 30px -8px rgba(227,38,43,.7); }

/* ---------- Barra lateral fija (escritorio) ---------- */
.srail { position: fixed; z-index: 40; left: 18px; top: 50%; transform: translate(-120%, -50%); display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform .8s var(--ease) .4s; }
body.ready .srail { transform: translate(0, -50%); }
.srail__label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: .68rem; font-weight: 800; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); }
.srail__line { width: 1px; height: 46px; background: linear-gradient(var(--red), transparent); }
.srail__a { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(15,15,20,.75); border: 1px solid var(--line-2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .35s var(--ease); }
.srail__a .ico { width: 19px; height: 19px; }
.srail__a[data-net="instagram"]:hover { background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7); }
.srail__a[data-net="facebook"]:hover { background: #1877f2; }
.srail__a[data-net="tiktok"]:hover { background: #000; box-shadow: -3px 0 0 #25f4ee, 3px 0 0 #fe2c55; }
.srail__a:hover { transform: translateX(6px) scale(1.1); border-color: transparent; }
/* Solo cuando hay margen libre a los lados del contenido */
@media (max-width: 1320px) { .srail { display: none; } }