.redes-sociales {
  padding:clamp(64px,6vw,88px) 0 clamp(78px,6vw,90px);
  overflow:hidden;
  background:var(--papel,#fffefa);
  color:#171717;
  font-family:'Mona Sans',Arial,Helvetica,sans-serif
}
.redes-escenario {
  position:relative;
  isolation:isolate;
  overflow:visible;
  clip-path:inset(-120px 0 -90px 0);
  width:min(100%,1100px);
  aspect-ratio:663 / 515;
  margin-inline:auto;
  color:#171717
}
.redes-encabezado {
  position:absolute;
  top:8%;
  right:0;
  left:0;
  z-index:2;
  max-width:970px;
  margin:auto;
  padding:0 24px;
  text-align:center
}
.redes-encabezado .etiqueta {
  color:#ad2630;
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em
}
.redes-encabezado h2 {
  margin-top:13px;
  font-size:clamp(42px,6.5vw,85px);
  font-weight:900;
  line-height:.87;
  letter-spacing:-.085em
}
.redes-encabezado h2 em {
  display:block;
  margin-top:.04em;
  color:#c82932;
  font-family:'Instrument Serif',Georgia,serif;
  font-size:1.14em;
  font-weight:400;
  letter-spacing:-.045em
}
.redes-encabezado>p:last-child {
  max-width:42ch;
  margin:14px auto 0;
  color:#625b56;
  font-size:clamp(14px,1.3vw,17px);
  line-height:1.5
}
.redes-abanico {
  position:absolute;
  inset:0;
  z-index:1;
  margin:0;
  isolation:isolate;
  perspective:1050px;
  perspective-origin:50% 65%;
  touch-action:pan-y;
  user-select:none;
  cursor:grab
}
.redes-abanico::before {
  content:'';
  position:absolute;
  bottom:8%;
  left:50%;
  width:56%;
  height:6%;
  z-index:0;
  border-radius:50%;
  background:#503a3833;
  filter:blur(23px);
  transform:translateX(-50%);
  pointer-events:none
}
.redes-abanico.redes-arrastrando {
  cursor:grabbing
}
.redes-abanico.redes-arrastrando .redes-tarjeta {
  transition:none
}
.redes-tarjeta {
  --escala-x:1;
  position:absolute;
  top:var(--arriba);
  left:var(--izquierda);
  z-index:var(--nivel);
  width:var(--ancho);
  height:var(--alto);
  color:#fff;
  transform:translateX(calc(-50% + var(--arrastre,0px))) translateZ(var(--profundidad)) rotateY(var(--giro-y)) rotateZ(var(--giro-z)) scaleX(var(--escala-x));
  transform-style:preserve-3d;
  backface-visibility:hidden;
  transition:transform .65s cubic-bezier(.2,.8,.2,1),left .65s cubic-bezier(.2,.8,.2,1),top .65s cubic-bezier(.2,.8,.2,1),width .65s cubic-bezier(.2,.8,.2,1),height .65s cubic-bezier(.2,.8,.2,1);
  -webkit-tap-highlight-color:transparent;
  cursor:pointer
}
.redes-tarjeta:is(:hover,:focus-visible) {
  z-index:10;
  transform:translateX(-50%) translateY(-11px) translateZ(calc(var(--profundidad) + 35px)) rotateY(var(--giro-y)) rotateZ(var(--giro-z)) scaleX(var(--escala-x)) scale(1.025)
}
.redes-tarjeta:focus-visible {
  outline:3px solid #e2444b;
  outline-offset:6px;
  border-radius:17px
}
.redes-tarjeta[data-pos="0"] { --izquierda:50%; --arriba:44%; --ancho:30.4%; --alto:49.4%; --giro-y:0deg; --giro-z:0deg; --profundidad:0px; --nivel:5 }
.redes-tarjeta[data-pos="-1"] { --izquierda:27.1%; --arriba:57%; --ancho:21%; --alto:32%; --giro-y:35deg; --giro-z:2deg; --profundidad:-100px; --escala-x:.97; --nivel:4 }
.redes-tarjeta[data-pos="1"] { --izquierda:72.9%; --arriba:57%; --ancho:21%; --alto:32%; --giro-y:-35deg; --giro-z:-2deg; --profundidad:-100px; --escala-x:.97; --nivel:4 }
.redes-tarjeta[data-pos="-2"] { --izquierda:12.9%; --arriba:57%; --ancho:25%; --alto:32%; --giro-y:45deg; --giro-z:3deg; --profundidad:-150px; --escala-x:1.06; --nivel:3 }
.redes-tarjeta[data-pos="2"] { --izquierda:87.1%; --arriba:57%; --ancho:25%; --alto:32%; --giro-y:-45deg; --giro-z:-3deg; --profundidad:-150px; --escala-x:1.06; --nivel:3 }
.redes-cara {
  display:block;
  position:relative;
  width:100%;
  height:100%;
  overflow:hidden;
  border:1px solid #ffffff70;
  border-radius:clamp(15px,1.7vw,22px);
  background:#171717;
  box-shadow:0 26px 45px #43302e52,0 3px 12px #43302e3b,inset 0 1px #ffffff66;
  transition:box-shadow .4s
}
.redes-tarjeta:is(:hover,:focus-visible) .redes-cara {
  box-shadow:0 38px 58px #43302e70,0 7px 17px #43302e42
}
.redes-foto {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.8,.2,1)
}
.redes-tarjeta:is(:hover,:focus-visible) .redes-foto {
  transform:scale(1.075)
}
.redes-cara::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  background:linear-gradient(180deg,#0006,transparent 27%,transparent 40%,#0a0809d9 100%);
  pointer-events:none
}
.redes-superior,
.redes-pie {
  position:absolute;
  z-index:3;
  left:20px;
  right:20px
}
.redes-superior {
  top:20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.17em;
  white-space:nowrap
}
.redes-instagram {
  display:grid;
  place-items:center;
  flex:none;
  width:33px;
  height:33px;
  border:1px solid #ffffff9c;
  border-radius:11px;
  background:#ffffff12
}
.redes-instagram svg {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6
}
.redes-instagram .redes-flash {
  fill:currentColor;
  stroke:none
}
.redes-pie {
  bottom:21px
}
.redes-pie strong {
  display:block;
  font-size:clamp(25px,2.9vw,39px);
  font-weight:850;
  line-height:.94;
  letter-spacing:-.065em
}
.redes-pie>span {
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:19px;
  padding-top:10px;
  border-top:1px solid #ffffffa0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.015em
}
.redes-pie .icono-svg {
  width:17px;
  height:17px;
  margin-left:auto
}
.redes-tarjeta:not([data-pos="0"]) .redes-superior,
.redes-tarjeta:not([data-pos="0"]) .redes-pie>span {
  display:none
}
.redes-tarjeta:not([data-pos="0"]) .redes-pie {
  right:12px;
  bottom:14px;
  left:12px
}
.redes-tarjeta:not([data-pos="0"]) .redes-pie strong {
  font-size:clamp(16px,1.8vw,23px)
}
.redes-central .redes-cara::after {
  background:linear-gradient(180deg,#160a0a66,transparent 30%,#8e1d274a 54%,#140b0be8 100%)
}
.redes-central .redes-foto {
  object-position:52% 40%
}
.redes-jovenes .redes-cara {
  background:#241a27
}
.redes-jovenes .redes-foto {
  object-position:50% 60%
}
.redes-music .redes-foto {
  object-position:55% 35%
}
.redes-dance .redes-cara {
  background:#462329
}
.redes-dance .redes-foto {
  object-position:56% center
}
.redes-coffee .redes-cara {
  background:#15342c url('../imagenes/coffee/patron-hojas.svg') center/190px repeat
}
.redes-coffee .redes-foto {
  object-fit:cover;
  object-position:center 45%
}
.redes-coffee .redes-cara::after {
  background:linear-gradient(180deg,#0a1e175e,transparent 37%,#0c211bb5 73%,#091610f2 100%)
}
.redes-music .redes-pie strong,
.redes-coffee .redes-pie strong {
  text-align:right
}
.redes-music .redes-pie>span,
.redes-coffee .redes-pie>span {
  flex-direction:row-reverse
}
.redes-music .redes-pie .icono-svg,
.redes-coffee .redes-pie .icono-svg {
  margin-left:0;
  margin-right:auto
}
.redes-tarjeta[data-pos="0"] .redes-pie strong {
  text-align:left
}
.redes-tarjeta[data-pos="0"] .redes-pie>span {
  flex-direction:row
}
.redes-tarjeta[data-pos="0"] .redes-pie .icono-svg {
  margin-left:auto;
  margin-right:0
}
.redes-controles {
  position:absolute;
  right:3.5%;
  bottom:0;
  left:3.5%;
  z-index:11;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none
}
.redes-control {
  display:grid;
  place-items:center;
  width:clamp(32px,3.4vw,42px);
  height:clamp(32px,3.4vw,42px);
  padding:0;
  border:1px solid #9d8981;
  border-radius:50%;
  background:#fffefaad;
  color:#322522;
  pointer-events:auto;
  transition:background .2s,transform .2s
}
.redes-control:is(:hover,:focus-visible) {
  background:#c82932;
  border-color:#c82932;
  color:#fff;
  transform:translateY(-2px)
}
.redes-control svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}
.redes-control[data-redes-anterior] svg {
  transform:rotate(180deg)
}
.redes-indice {
  color:#685a55;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em
}
@media(min-width:768px) and (max-width:950px) {
  .redes-encabezado {
    top:7%
  }
}
@media(max-width:767px) {
  .redes-sociales {
    padding:56px 0 76px
  }
  .redes-escenario {
    height:clamp(546px,140vw,660px);
    aspect-ratio:auto
  }
  .redes-encabezado {
    top:8%;
    padding:0 12px
  }
  .redes-encabezado .etiqueta {
    font-size:9px
  }
  .redes-encabezado h2 {
    margin-top:11px;
    font-size:clamp(41px,9vw,58px)
  }
  .redes-encabezado>p:last-child {
    max-width:30ch;
    margin-top:11px;
    font-size:12px
  }
  .redes-abanico {
    bottom:40px;
    perspective:650px
  }
  .redes-tarjeta {
    z-index:var(--nivel)
  }
  .redes-tarjeta:is(:hover,:focus-visible) {
    z-index:var(--nivel);
    transform:translateX(calc(-50% + var(--arrastre,0px))) translateZ(var(--profundidad)) rotateY(var(--giro-y)) rotateZ(var(--giro-z)) scaleX(var(--escala-x))
  }
  .redes-tarjeta:focus-visible {
    z-index:10
  }
  .redes-tarjeta[data-pos="-2"] {
    --izquierda:0%;--arriba:58%;--ancho:43%;--alto:30%;--giro-y:43deg;--giro-z:3deg;--profundidad:-100px;--escala-x:1.13;--nivel:1
  }
  .redes-tarjeta[data-pos="-1"] {
    --izquierda:22.5%;--arriba:58%;--ancho:35%;--alto:30%;--giro-y:31deg;--giro-z:2deg;--profundidad:-50px;--escala-x:1.02;--nivel:3
  }
  .redes-tarjeta[data-pos="0"] {
    --izquierda:50%;--arriba:44%;--ancho:46%;--alto:49%;--giro-y:0deg;--giro-z:0deg;--profundidad:0px;--nivel:5
  }
  .redes-tarjeta[data-pos="1"] {
    --izquierda:77.5%;--arriba:58%;--ancho:35%;--alto:30%;--giro-y:-31deg;--giro-z:-2deg;--profundidad:-50px;--escala-x:1.02;--nivel:3
  }
  .redes-tarjeta[data-pos="2"] {
    --izquierda:100%;--arriba:58%;--ancho:43%;--alto:30%;--giro-y:-43deg;--giro-z:-3deg;--profundidad:-100px;--escala-x:1.13;--nivel:1
  }
  .redes-cara {
    border-radius:13px;
    box-shadow:0 19px 30px #43302e55
  }
  .redes-superior,
  .redes-pie {
    left:12px;
    right:12px
  }
  .redes-superior {
    top:13px;
    font-size:8px;
    letter-spacing:.08em
  }
  .redes-instagram {
    width:28px;
    height:28px;
    border-radius:9px
  }
  .redes-instagram svg {
    width:16px;
    height:16px
  }
  .redes-pie {
    bottom:15px
  }
  .redes-pie strong {
    font-size:clamp(23px,5.5vw,29px)
  }
  .redes-tarjeta:not([data-pos="0"]) .redes-pie {
    right:6px;
    bottom:9px;
    left:6px
  }
  .redes-tarjeta:not([data-pos="0"]) .redes-pie strong {
    font-size:clamp(12px,3vw,17px)
  }
  .redes-pie>span {
    gap:4px;
    margin-top:9px;
    padding-top:7px;
    font-size:10px
  }
  .redes-pie .icono-svg {
    width:14px;
    height:14px
  }
  .redes-music .redes-pie strong,
  .redes-coffee .redes-pie strong {
    text-align:left
  }
  .redes-music .redes-pie>span,
  .redes-coffee .redes-pie>span {
    flex-direction:row
  }
  .redes-music .redes-pie .icono-svg,
  .redes-coffee .redes-pie .icono-svg {
    margin-left:auto;
    margin-right:0
  }
  .redes-controles {
    right:4%;
    bottom:2%;
    left:4%
  }
  .redes-control {
    width:44px;
    height:44px
  }
  .redes-indice {
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  .redes-tarjeta,
  .redes-cara,
  .redes-foto {
    transition:none
  }
}