/* ============================================================
   ÉGIDA — aplicaciones.css
   ============================================================ */

/* ---------- Aplicaciones ---------- */
.aplicaciones{ background:var(--grey); }
.app-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}
.app-card{
  border-radius:var(--radius); overflow:hidden;
  background:var(--white);
  box-shadow:0 16px 44px -22px rgba(17,17,36,.35);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .4s;
}
.app-card:hover{ box-shadow:0 30px 60px -24px rgba(17,17,36,.5); }
.app-card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
  display:block;
}
.app-card figcaption{
  display:flex; justify-content:space-between; align-items:center;
  padding:.9rem 1.1rem; font-size:.8rem; font-weight:500;
  letter-spacing:.06em;
}
.app-card__color{
  width:14px; height:14px; border-radius:50%;
  background:var(--dot); border:1px solid rgba(17,17,36,.15);
}

/* ---------- Mockups (nuevo) ---------- */
.mock-grid{ gap:2rem; }
.mock-card{ transition:transform .5s var(--ease), box-shadow .4s; }
.mock-card:hover{ transform:translateY(-10px) scale(1.015); }
.mock-card > a{ display:block; }
.mock-card img{
  aspect-ratio:3/4; object-fit:cover; object-position:top;
}
.mock-card--wide img{ aspect-ratio:16/9; object-position:center; }
.mock-card--wide{
  grid-column:1/-1;
}

/* ---------- Tarjeta 3D interactiva ---------- */
.card3d{
  padding:1.6rem 0 .6rem;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(90% 120% at 50% 0%, rgba(36,36,78,.55) 0%, transparent 60%),
    radial-gradient(80% 90% at 50% 110%, rgba(235,117,27,.12) 0%, transparent 55%);
}
.mock-card--wide{ background:#0c0c18; }
.mock-card--wide figcaption{ background:#0c0c18; color:var(--grey); }
.card3d__viewport{
  width:min(680px,94%); margin-inline:auto;
  perspective:1200px;
  cursor:grab; user-select:none; touch-action:none;
  min-height:460px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.card3d__viewport:active{ cursor:grabbing; }
.card3d__obj{
  position:relative; width:100%; aspect-ratio:1.75/1;
  transform-style:preserve-3d; will-change:transform;
}
/* neutraliza el recorte de .mock-card aplicado a los SVG */
.card3d__obj img{ aspect-ratio:auto; object-fit:contain; }
.card3d__face{
  position:absolute; inset:0; border-radius:14px; overflow:hidden;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  box-shadow:0 40px 90px -24px rgba(0,0,0,.7),
             inset 0 0 0 1px rgba(235,235,242,.16);
}
.card3d__face--front{
  display:flex; align-items:center; justify-content:center;
  background:
    url('../../assets/isotipos/EGIDA_Isotipo_RGB_Azul_Oscuro.svg') no-repeat bottom -14% right -6% / 46% auto,
    linear-gradient(90deg,#EB751B 0,#EB751B 9px,transparent 9px),
    linear-gradient(160deg,#2b2b5e 0%,#24244E 35%,#1a1a38 70%,#111124 100%);
}
.card3d__face--front img{
  position:relative; z-index:2;
  width:58%;
  margin-top:0;
  filter:drop-shadow(0 22px 40px rgba(0,0,0,.5));
}
.card3d__face--back{
  transform:rotateY(180deg);
  background:
    radial-gradient(110% 110% at 100% 0%, rgba(36,36,78,.07) 0%, transparent 55%),
    var(--grey);
  color:var(--blue);
  padding:44px 46px; text-align:left;
}
.card3d__brand{
  display:flex; align-items:center; gap:.5rem; margin-bottom:14px;
}
.card3d__brand img{ width:30px; height:30px; }
.card3d__brand span{
  font-family:var(--font-display); font-weight:700; font-size:.9rem;
  letter-spacing:.14em; color:var(--blue);
  transform:translateY(-2px);
}
.card3d__face--back h4{
  font-family:var(--font-display); font-weight:700; font-size:1.55rem; letter-spacing:.03em;
}
.card3d__role{
  font-size:.74rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--orange); font-weight:500; margin-top:.15rem;
}
.card3d__line{ height:4px; width:52px; border-radius:2px; background:var(--grad-brand); margin:14px 0 12px; }
.card3d__info{ font-size:.86rem; color:rgba(17,17,36,.78); font-weight:400; }
.card3d__info b{ font-weight:600; color:var(--blue); }
.card3d__edge{
  position:absolute; left:0; right:0; height:5px;
  background:linear-gradient(90deg,#0d0d20,#34345e);
}
.card3d__edge--top{ top:0; transform:rotateX(90deg) translateZ(2.5px); }
.card3d__edge--bottom{ bottom:0; transform:rotateX(-90deg) translateZ(2.5px); }
.card3d__edge--left,.card3d__edge--right{
  width:5px; height:100%; top:0; left:auto;
  background:linear-gradient(180deg,#0d0d20,#34345e);
}
.card3d__edge--left{ left:0; transform:rotateY(-90deg) translateZ(2.5px); }
.card3d__edge--right{ right:0; transform:rotateY(90deg) translateZ(2.5px); }
.card3d__floor{
  width:70%; height:34px; margin:3rem auto 0; border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.65) 0%, transparent 70%);
  filter:blur(9px);
  transition:opacity .3s, transform .3s var(--ease);
}
.card3d__hint{
  text-align:center; margin-top:1.4rem;
  font-size:.72rem; color:rgba(235,235,242,.65); letter-spacing:.1em;
}
.mock-card figcaption{ display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:.95rem 1.2rem; }
.mock-link{
  font-size:.72rem; font-weight:500; letter-spacing:.08em;
  color:var(--orange); text-transform:uppercase;
  transition:opacity .3s;
}
.mock-link:hover{ opacity:.7; }
.mock-wallpapers{ margin-top:clamp(3rem,6vw,4.5rem); }
.mock-wallpapers__title{
  font-family:var(--font-display); font-weight:600; font-size:1.25rem;
  letter-spacing:.04em; margin-bottom:1.5rem;
}
.mock-wallpapers__title::after{
  content:""; display:inline-block; vertical-align:middle;
  width:64px; height:3px; margin-left:1rem; margin-top:2px; border-radius:2px;
  background:var(--grad-brand);
}