/* ==========================================================================
   VillaTarjeta — Motor de tarjetas virtuales (temas por profesión)
   ========================================================================== */

:root{
  --ff-head:'Sora',ui-sans-serif,system-ui,sans-serif;
  --ff-body:'Inter',ui-sans-serif,system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body.card-body{
  font-family:var(--ff-body);
  min-height:100vh;
  color:#fff;
  background:linear-gradient(150deg, var(--t-grad-1), var(--t-grad-2) 75%);
  position:relative;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* Fondo vivo para plantillas Premium: el degradado respira/se desplaza muy lento */
body.card-body.is-premium{
  background:linear-gradient(150deg, var(--t-grad-1), var(--t-grad-2) 45%, var(--t-grad-1) 85%);
  background-size:220% 220%;
  animation:premiumBgDrift 18s ease-in-out infinite;
}
@keyframes premiumBgDrift{
  0%,100%{background-position:0% 0%}
  50%{background-position:100% 60%}
}

/* Foto de perfil ampliada y difuminada de fondo (si existe) */
.card-bg-photo{
  position:fixed;inset:-30px;z-index:0;pointer-events:none;
  background-size:cover;background-position:center;
  filter:blur(38px) saturate(1.15) brightness(.62);
  transform:scale(1.15);
}
.card-bg-photo::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(165deg, var(--t-grad-1) 0%, transparent 45%, var(--t-grad-2) 120%);
  opacity:.62;
}

/* Escena ilustrada temática por profesión */
.card-bg-scene{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:#fff;opacity:.5;animation:sceneIn 1.4s var(--ease) both}
.card-bg-scene svg{position:absolute;bottom:-4%;left:50%;transform:translateX(-50%);width:min(720px,150vw);height:auto;max-height:78%}
body.card-body:not(.has-photo) .card-bg-scene{opacity:.4}
@keyframes sceneIn{from{opacity:0;transform:scale(.96)}to{opacity:.5}}

@keyframes cardFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-18px) rotate(8deg)}}

.card-bg-mesh{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(60% 50% at 85% 0%, rgba(255,255,255,.18), transparent 60%),
             radial-gradient(50% 40% at 0% 100%, rgba(255,255,255,.12), transparent 60%);
}

/* Halos de color flotando muy despacio, solo en Premium: le da profundidad al fondo */
.is-premium .card-bg-mesh{
  background:
    radial-gradient(45% 40% at 80% 10%, color-mix(in srgb, var(--t-accent) 55%, transparent), transparent 65%),
    radial-gradient(50% 45% at 12% 88%, color-mix(in srgb, var(--t-accent) 35%, transparent), transparent 65%),
    radial-gradient(55% 45% at 50% 45%, rgba(255,255,255,.10), transparent 70%);
  background-size:160% 160%;
  animation:premiumMeshFloat 14s ease-in-out infinite;
}
@keyframes premiumMeshFloat{
  0%,100%{background-position:0% 0%, 100% 100%, 50% 40%}
  50%{background-position:20% 30%, 80% 70%, 55% 55%}
}

.card-wrap{position:relative;z-index:1;max-width:480px;margin:0 auto;padding:36px 20px 60px;min-height:100vh;display:flex;flex-direction:column}

.card-top{display:flex;justify-content:center;margin-bottom:6px}
.card-top img{height:26px;opacity:.9}

/* ---------- Hero con foto grande + onda (cuando hay foto) ---------- */
/* Ancho fijo tipo "tarjeta" para que se vea igual en celular y en escritorio */
.card-photo-hero{
  position:relative;z-index:1;max-width:480px;margin:0 auto;
  /* Proporción fija (no depende de la altura de la ventana) para que el
     encuadre que se ve en el panel admin sea IGUAL al de la tarjeta real en
     cualquier pantalla — antes usaba height:44vh, que en la PC cambia mucho
     según si el navegador está maximizado, con barra de marcadores, etc. */
  aspect-ratio:440/400;
  overflow:hidden;
  animation:cardIn .8s var(--ease) both;
}
.card-photo-crop{position:absolute;inset:0;overflow:hidden;z-index:1}
.card-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.card-top-overlay{
  position:absolute;top:18px;left:0;right:0;display:flex;justify-content:center;z-index:2;
}
.card-top-overlay img{height:24px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.card-photo-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1}
.card-photo-wave svg{display:block;width:100%;height:auto}

/* Contorno de luz girando alrededor de la foto (solo plantillas Premium) */
.is-premium .card-photo-crop{inset:4px;border-radius:2px}
.is-premium .card-photo-hero::before{
  content:'';position:absolute;inset:0;z-index:0;
  background:conic-gradient(from 0deg, var(--t-accent), rgba(0,0,0,.4) 35%, rgba(0,0,0,.4) 65%, var(--t-accent));
  animation:spin 5s linear infinite;
}

.card-name-band{
  position:relative;z-index:1;max-width:480px;margin:-2px auto 0;background:var(--t-grad-2);
  padding:0 24px 26px;text-align:center;
}
@media (min-width:560px){
  .card-photo-hero,.card-name-band{max-width:520px}
  .card-photo-hero{aspect-ratio:520/400}
}
@media (min-width:640px){
  body.card-body{padding-top:28px}
  .card-photo-hero{border-radius:28px 28px 0 0;box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
}
.card-badge-icon-big{
  width:64px;height:64px;border-radius:50%;background:var(--t-accent);color:#111;
  display:flex;align-items:center;justify-content:center;margin:-32px auto 14px;
  border:4px solid var(--t-grad-2);box-shadow:0 10px 24px -8px rgba(0,0,0,.5);
}
.card-badge-icon-big svg{width:30px;height:30px}
.card-name-band h1{font-family:var(--ff-head);font-size:1.6rem;margin:0 0 4px;font-weight:700;color:#fff}
.card-name-band .card-cargo{font-size:.96rem;opacity:.9;margin-bottom:2px;color:#fff}
.card-name-band .card-empresa{font-size:.88rem;font-weight:600;color:var(--t-accent)}

.card-hero{text-align:center;padding:34px 0 18px;animation:cardIn .8s var(--ease) both}
@keyframes cardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.card-avatar-wrap{position:relative;width:132px;height:132px;margin:0 auto 20px}
.card-avatar-ring{position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(from 0deg, var(--t-accent), transparent 70%);animation:spin 6s linear infinite;opacity:.9}
@keyframes spin{to{transform:rotate(360deg)}}
.card-avatar{position:relative;width:132px;height:132px;border-radius:50%;overflow:hidden;border:4px solid rgba(255,255,255,.9);background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-size:2.4rem;font-weight:700;box-shadow:0 20px 50px -12px rgba(0,0,0,.45)}
.card-avatar img{width:100%;height:100%;object-fit:cover}

.card-badge-icon{
  position:absolute;bottom:2px;right:2px;width:38px;height:38px;border-radius:50%;
  background:var(--t-accent);display:flex;align-items:center;justify-content:center;
  border:3px solid var(--t-grad-2);color:#111;
}
.card-badge-icon svg{width:18px;height:18px}

.card-hero h1{font-family:var(--ff-head);font-size:1.7rem;margin:0 0 4px;font-weight:700}
.card-hero .card-cargo{font-size:.98rem;opacity:.85;margin-bottom:2px}

/* Nombre con brillo animado: solo en Premium, un haz de luz que va y viene (el texto nunca deja de ser blanco sólido) */
.is-premium .card-name-band h1,
.is-premium .card-hero h1{
  color:#fff;
  animation:premiumNameGlow 2.8s ease-in-out infinite;
}
@keyframes premiumNameGlow{
  0%,100%{text-shadow:0 0 0 transparent, 0 0 0 transparent}
  50%{text-shadow:0 0 16px color-mix(in srgb, var(--t-accent) 85%, #fff), 0 0 32px color-mix(in srgb, var(--t-accent) 55%, transparent)}
}
.card-hero .card-empresa{font-size:.9rem;font-weight:600;color:var(--t-accent)}
.card-bio{text-align:center;font-size:.92rem;line-height:1.6;opacity:.9;max-width:380px;margin:14px auto 28px}

.card-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:28px 0}
.card-action{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:18px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);
  transition:transform .3s var(--ease),background .3s;color:#fff;text-align:center;
}
.card-action:hover{transform:translateY(-4px);background:rgba(255,255,255,.2)}
.card-action svg{width:20px;height:20px}
.card-action span{font-size:.68rem;font-weight:600;letter-spacing:.01em}

.card-primary-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:16px;border-radius:16px;
  background:var(--t-accent);color:#111;font-family:var(--ff-head);font-weight:700;font-size:.98rem;
  box-shadow:0 20px 40px -14px rgba(0,0,0,.4);margin-bottom:14px;transition:transform .3s var(--ease);border:0;cursor:pointer;
}
.card-primary-btn:hover{transform:translateY(-3px)}
.card-primary-btn.whatsapp{background:#25D366;color:#fff}

.card-panel{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  border-radius:22px;padding:22px;margin-bottom:18px;
}
.card-panel h2{font-family:var(--ff-head);font-size:1.02rem;margin:0 0 12px;display:flex;align-items:center;gap:8px}
.card-panel h2 svg{width:18px;height:18px;color:var(--t-accent)}

.card-social{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.card-social-icon{
  width:46px;height:46px;border-radius:50%;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 18px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.25);
  transition:transform .3s var(--ease),box-shadow .3s;
}
.card-social-icon:hover{transform:translateY(-4px) scale(1.08);box-shadow:0 14px 24px -8px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.4)}
.card-social-icon svg{width:20px;height:20px}
.card-social-ig{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%)}
.card-social-fb{background:#1877F2}
.card-social-tiktok{background:#111}
.card-social-linkedin{background:#0A66C2}
.card-social-twitter{background:#0B0B0F}
.card-social-youtube{background:#FF0000}

.card-video{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;margin-top:12px}
.card-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.card-map{position:relative;height:150px;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08)}
.card-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.15) contrast(1.05)}

.card-qr-box{display:flex;align-items:center;gap:16px}
.card-qr-box img{width:96px;height:96px;border-radius:12px;background:#fff;padding:6px}
.card-qr-box .btn-mini{
  display:inline-flex;align-items:center;gap:6px;padding:10px 16px;border-radius:999px;
  background:rgba(255,255,255,.16);font-size:.8rem;font-weight:600;margin-top:8px;
}

.card-footer{text-align:center;margin-top:auto;padding-top:26px;font-size:.75rem;opacity:.7}
.card-footer a{font-weight:700;color:var(--t-accent)}
.card-footer .copyright{display:block;margin-top:8px;opacity:.6}

.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:#111;color:#fff;padding:12px 22px;border-radius:999px;font-size:.85rem;
  opacity:0;transition:opacity .3s,transform .3s;z-index:20;pointer-events:none;
}
.toast.is-show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:560px){
  .card-wrap{max-width:520px}
}

/* ==========================================================================
   Plantillas Premium — mismo hero "wave" que las Estándar, con acentos propios
   ========================================================================== */

/* Caja "Sobre mí" (solo plantillas Premium) */
.ph-aboutme{background:#fff;border-radius:20px;padding:22px;margin:22px 0;box-shadow:0 16px 34px -16px rgba(0,0,0,.35);text-align:center}
.ph-aboutme h3{font-family:var(--ff-head);color:var(--t-grad-1);margin:0 0 8px;font-size:1.02rem}
.ph-aboutme p{margin:0;font-size:.9rem;line-height:1.6;color:#4B5065}

/* Iconos y botón principal con el color de acento de cada plantilla Premium */
.is-premium .card-action{background:var(--t-accent);border:0;color:#111}
.is-premium .card-action svg{color:#111}
.is-premium .card-primary-btn{background:var(--t-accent);color:#111}
.is-premium .card-primary-btn.whatsapp{background:#25D366;color:#fff}

/* Anillo de luz girando alrededor del ícono insignia: el toque "premium" dinámico */
.is-premium .card-badge-icon-big{position:relative}
.is-premium .card-badge-icon-big::before{
  content:'';position:absolute;inset:-7px;border-radius:50%;z-index:-1;
  background:conic-gradient(from 0deg, var(--t-accent), transparent 70%);
  animation:spin 3.5s linear infinite;
}