/* ============================================================
   THE CARD — firma visual propia de la landing de Véloris, no una carta
   interactiva de Tarot. Referencia de proporción tomada de .fan-card
   (css/pages/tarot.css) pero sin su lógica de flip ni acoplamiento al
   mazo: aquí es un objeto simbólico estático, con markup y clases
   exclusivas de esta home.
   Proporción 2/3, fondo casi transparente, borde muy sutil, símbolo
   centrado + nombre del arcano + número romano. Solo .vcard--lg respira.
   ============================================================ */
.vcard{
  --vcard-border:var(--s4, rgba(237,237,235,0.15));
  position:relative;
  aspect-ratio:2 / 3;
  border:1px solid var(--vcard-border);
  border-radius:6px;
  background:var(--s7, rgba(237,237,235,0.02));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  padding:20px 14px;
  text-align:center;
}
.vcard--lg{width:260px;}
.vcard--md{width:160px;}
.vcard--sm{width:64px;gap:6px;padding:8px 6px;}

.vcard-symbol{
  width:34%;max-width:64px;
  color:var(--s3, rgba(237,237,235,0.4));
  display:block;
}
.vcard-symbol svg{width:100%;height:auto;display:block;}
.vcard--sm .vcard-symbol{width:44%;}

.vcard-name{
  font-family:'Fraunces','Georgia',serif;font-optical-sizing:auto;font-weight:400;font-style:italic;
  font-size:14px;color:var(--s1, #EDEDEB);
  letter-spacing:0.01em;
}
.vcard--sm .vcard-name{display:none;}

.vcard-num{
  font-family:'Space Grotesk',sans-serif;
  font-size:10px;letter-spacing:2px;
  color:var(--mu, #7A7A80);
  text-transform:uppercase;
}
.vcard--sm .vcard-num{display:none;}

/* Solo la versión grande del hero respira — el resto queda quieto. */
.vcard--lg{
  animation:card-breathe 6s ease-in-out infinite;
}
@keyframes card-breathe{
  0%,100%{border-color:rgba(237,237,235,0.06);}
  50%{border-color:rgba(237,237,235,0.11);}
}

@media (prefers-reduced-motion: reduce){
  .vcard--lg{animation:none;}
}

/* Paso intermedio (Fase 6.1, P3): el hero pasa a una columna en 980px
   (ver .hero-grid, css/pages/home.css), pero antes The Card conservaba
   260px hasta los 720px — un salto brusco de tamaño sin relación con el
   cambio de layout. Este paso acompaña el colapso del hero sin llegar
   todavía al tamaño móvil. Debe ir ANTES del breakpoint de 720px en el
   archivo: ambas reglas coinciden por debajo de 720px y la cascada debe
   resolverse a favor de la de 720px (200px), no de esta. */
@media (max-width:980px){
  .vcard--lg{width:225px;}
}

@media (max-width:720px){
  .vcard--lg{width:200px;}
  .vcard--md{width:130px;}
}