/* ===========================================================
   SECCIÓN DE ENLACES
   Los cuadros son tus propios diseños en PNG, con su render y su
   botón dibujados dentro.

   Cada PNG sobresale una cantidad distinta (el teléfono y los
   cubos se salen del borde), así que la caja de maquetación NO es
   la imagen: es el cuerpo de la tarjeta, medido dentro de cada
   PNG. La imagen se coloca encima desplazada, de modo que los
   bordes de las cuatro tarjetas queden alineados entre sí y lo
   que sobresale lo haga por fuera, como en tu boceto.
   =========================================================== */
.enlaces{
  position:relative; z-index:2;
  width:100%; max-width:var(--ancho); margin-inline:auto;
  /* El telefono del primer cuadro sobresale 293 px por encima de su tarjeta,
     el 80 % de su altura. El hueco superior se calcula para que nunca llegue
     a tocar al robot. */
  padding:clamp(160px,22vw,330px) var(--lado) clamp(60px,10vh,130px);
  display:flex; flex-direction:column; gap:clamp(64px,9.5vw,128px);
}

.cuadros-par{
  display:grid; gap:clamp(26px,3.4vw,52px); grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){
  .cuadros-par{
    grid-template-columns:1fr 1fr;
    /* El cubo de Behance vuela un 8.19 % del ancho de su tarjeta por
       la derecha. Con un hueco fijo llegaba a rozar la tarjeta de
       Instagram en cuanto la pantalla se estrechaba. Con un hueco
       proporcional (7 % del contenedor) el vuelo siempre cabe, sea
       cual sea el ancho. */
    column-gap:max(clamp(26px,3.4vw,52px), 7%);
  }
}


/* ---------- teléfono ---------- */
@media (max-width:760px){
  .enlaces{
    padding-top:clamp(96px,26vw,150px);
    padding-bottom:clamp(38px,9vw,70px);
    gap:34px;                 /* el cuadro siguiente vuela 4 px  -> 30 limpios */
  }
  .cuadros-par{ gap:58px }    /* el cubo de Instagram vuela 29 px -> 29 limpios */
}

/* ---------- la tarjeta ----------
   La caja mide exactamente el cuerpo de la tarjeta. */
.cuadro{
  position:relative;
  aspect-ratio:var(--cw) / var(--ch);
  transition:transform .55s var(--suave);
  will-change:transform;
}
/* cada tarjeta por encima de la anterior, para que lo que sobresale
   nunca quede tapado por la siguiente */
.enlaces > *:nth-child(1){ z-index:1 }
.enlaces > *:nth-child(2){ z-index:2 }
.enlaces > *:nth-child(3){ z-index:3 }

/* la imagen se escala y desplaza para que su cuerpo cubra la caja */
.cuadro__img{
  position:absolute; max-width:none; height:auto;
  width:calc(100% * var(--iw) / var(--cw));
  left:calc(-100% * var(--cx) / var(--cw));
  top:calc(-100% * var(--cy) / var(--ch));
  /* Las imágenes traen mucho margen transparente por encima, donde sobresale
     el render. Si capturan el ratón, tapan el botón del cuadro de al lado. */
  pointer-events:none;
  filter:drop-shadow(0 18px 40px rgba(0,0,0,.55));
  transition:filter .55s var(--suave);
}

/* al pasar el cursor por encima del cuadro */
.cuadro:hover{ transform:translateY(-5px) }
.cuadro:hover .cuadro__img{
  filter:drop-shadow(0 26px 54px rgba(0,0,0,.7))
         drop-shadow(0 0 34px rgba(48,150,255,.42));
}

/* ---------- render 3D flotante ----------
   El cubo venía pegado dentro del PNG del cuadro. Se ha separado en
   su propia imagen y el PNG de la tarjeta lleva el fondo reconstruido
   debajo, así el render puede moverse sin arrastrar la tarjeta.
   Va colocado en porcentajes del cuerpo del cuadro, igual que las
   piezas del robot, para que acompañe a la tarjeta al escalar. */
.cuadro__flota{
  /* por encima del filo neón (::before va en 5): las líneas de luz
     recorren el borde del cuadro y pasan por DETRÁS del render */
  position:absolute; z-index:6;
  left:var(--x); top:var(--y);
  width:var(--w); height:auto; max-width:none;
  pointer-events:none;
  will-change:transform;
  animation:flotar-cubo var(--ritmo,7.4s) ease-in-out var(--espera,0s) infinite;
}
/* se anima translate y rotate por separado, no transform, para no pisar
   ningún otro desplazamiento de la tarjeta */
@keyframes flotar-cubo{
  0%   { translate:0 0;      rotate:0deg }
  50%  { translate:0 -3.4%;  rotate:.85deg }
  100% { translate:0 0;      rotate:0deg }
}

/* ---------- todo el cuadro lleva al mismo sitio ----------
   Cubre el cuerpo entero por debajo del botón dibujado (z-index 2
   frente a 4), así que pulsar en cualquier parte del cuadro vale,
   pero el botón sigue siendo quien se enciende al apuntarlo.
   Va fuera del recorrido del tabulador y oculto a los lectores de
   pantalla: el enlace de verdad, con su texto, es el otro. */
.cuadro__todo{
  position:absolute; inset:0; z-index:2;
  display:block; border-radius:16px;
  cursor:pointer;
}

/* ---------- zona pulsable sobre el botón dibujado ---------- */
.cuadro__accion{
  position:absolute; z-index:4;
  left:var(--bx); top:var(--by);
  width:var(--bw); height:var(--bh);
  border-radius:10px; display:block; cursor:pointer;
  background:transparent;
  transition:background .3s var(--suave), box-shadow .35s var(--suave), transform .3s var(--suave);
}
.cuadro__accion:hover{
  background:rgba(130,205,255,.20);
  box-shadow:0 0 0 1.5px rgba(140,225,255,.85),
             0 0 18px -2px rgba(90,190,255,.75),
             0 10px 26px -8px rgba(48,150,255,.7);
  transform:translateY(-2px);
}
.cuadro__accion:active{ transform:scale(.985); background:rgba(120,190,255,.22) }
.cuadro__accion:focus-visible{
  outline:2px solid var(--cian); outline-offset:2px;
  background:rgba(120,190,255,.12);
}

/* texto solo para lectores de pantalla */
.solo-lectores{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.cuadro--pronto{ cursor:default }
.cuadro--pronto:hover{ transform:none }

@media (prefers-reduced-motion:reduce){
  .cuadro,.cuadro__img{ transition:none }
  .cuadro:hover{ transform:none }
  .cuadro__flota{ animation:none }
}

/* ===========================================================
   BORDES NEÓN EN MOVIMIENTO
   Dos trazos de luz azul recorren el contorno de cada cuadro sin
   parar. Se dibujan como un anillo: un degradado cónico que gira
   al que se le vacía el centro con una máscara, así solo queda el
   filo. El resplandor lo da un drop-shadow sobre ese anillo.
   =========================================================== */
@property --giro{ syntax:'<angle>'; initial-value:0deg; inherits:false }

/* filo fijo, tenue: el contorno siempre se intuye */
.cuadro::after{
  content:''; position:absolute; inset:-2px; z-index:4;
  border-radius:18px; padding:2px; pointer-events:none;
  background:rgba(70,150,255,.22);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}

/* los dos trazos que viajan */
.cuadro::before{
  content:''; position:absolute; inset:-2px; z-index:5;
  border-radius:18px; padding:2px; pointer-events:none;
  background:conic-gradient(from var(--giro),
    transparent 0deg,
    rgba(47,139,255,0)   14deg,
    rgba(47,139,255,.85) 34deg,
    rgba(150,240,255,1)  46deg,
    rgba(47,139,255,.85) 58deg,
    rgba(47,139,255,0)   78deg,
    transparent 180deg,
    rgba(47,139,255,0)   194deg,
    rgba(47,139,255,.85) 214deg,
    rgba(150,240,255,1)  226deg,
    rgba(47,139,255,.85) 238deg,
    rgba(47,139,255,0)   258deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  filter:drop-shadow(0 0 5px rgba(90,190,255,.95)) drop-shadow(0 0 12px rgba(47,139,255,.6));
  animation:girar-filo 6s linear infinite;
}
@keyframes girar-filo{ to{ --giro:360deg } }

/* cada cuadro entra en un punto distinto del recorrido */
.cuadros-par .cuadro:nth-child(1)::before{ animation-delay:-2s }
.cuadros-par .cuadro:nth-child(2)::before{ animation-delay:-4s }
.cuadro--pronto::before{ animation-delay:-1s }

.cuadro:hover::before{
  filter:drop-shadow(0 0 8px rgba(120,215,255,1)) drop-shadow(0 0 20px rgba(47,139,255,.8));
}

/* Sin @property el degradado no gira: se deja un filo azul fijo
   en lugar de un anillo detenido. */
@supports not (background:conic-gradient(from var(--giro),red,blue)){
  .cuadro::before{
    background:linear-gradient(120deg, rgba(90,190,255,.7), rgba(31,87,255,.3) 50%, rgba(90,190,255,.7));
    animation:none;
  }
}
@media (prefers-reduced-motion:reduce){
  .cuadro::before{ animation:none }
}


/* En táctil el filo late en vez de girar: girar el degradado cónico
   obliga a repintar los cuatro cuadros en cada fotograma, latir no. */
@media (pointer:coarse){
  .cuadro::before{ animation:latir-filo 3.6s ease-in-out infinite }

  /* sombra más corta: el coste sube con el cuadrado del radio */
  .cuadro__img{ filter:drop-shadow(0 10px 20px rgba(0,0,0,.55)) }
  @keyframes latir-filo{
    0%,100%{ opacity:.40 }
    50%    { opacity:1 }
  }
}