/* =========================================================
   Tarjeta de Presentación (Tema: Mechanics)
   - Fondo vertical (imagen configurable)
   - Círculo superior: muestra LOGO y en hover/tap muestra FOTO
   - Órbita de accesos girando alrededor del botón central (web)
========================================================= */

.cucrd-card-wrap{
  position: relative;
  width: 100%;
  min-height: 100svh;
  overflow: hidden;
  background: var(--cucrd-bg-color, #ad0000);
  color: #fff;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.cucrd-card-wrap.is-preview{
  min-height: auto;
  max-width: 420px;
  margin: 0 auto;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(0,0,0,.35);
}

.cucrd-card-bg{
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(900px 600px at 50% 25%, rgba(255,255,255,.10), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.35));
}

.cucrd-card-wrap[style*="--cucrd-bg-image"] .cucrd-card-bg{
  background-image: var(--cucrd-bg-image);
  background-size: cover;
  background-position: center;
  filter: saturate(1.05) contrast(1.06);
}

.cucrd-card-tint{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(0,0,0, var(--cucrd-overlay, .35)) 0%,
    rgba(0,0,0, var(--cucrd-overlay, .35)) 100%
  );
}

.cucrd-card-inner{
  position: relative;
  z-index: 2;
  min-height: 100svh;
  width: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

/* ============================
   Círculo superior (logo -> foto)
   ============================ */
.cucrd-top{ width: 100%; display:flex; justify-content:center; padding-top: 220px; }

.cucrd-top-avatar{
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.95);
  box-shadow: 0 18px 44px rgba(0,0,0,.38);
  overflow: hidden;
  position: relative;
  background: rgba(0,0,0,.45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.cucrd-top-avatar img{
  position:absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display:block;
  transition: opacity .25s ease;
}

.cucrd-top-logo{
  object-fit: contain;
  padding: 18px;
  opacity: 1;
}

.cucrd-top-photo{
  object-fit: cover;
  opacity: 0;
}

@media (hover:hover){
  .cucrd-top-avatar:hover .cucrd-top-photo{ opacity: 1; }
  .cucrd-top-avatar:hover .cucrd-top-logo{ opacity: 0; }
}

.cucrd-top-avatar.show-photo .cucrd-top-photo{ opacity: 1; }
.cucrd-top-avatar.show-photo .cucrd-top-logo{ opacity: 0; }

/* ============================
   Barra de nombre / cargo
   ============================ */
.cucrd-namebar{
  width: 100%;
  min-width: 420px;
  background: var(--cucrd-bg-color, #ad0000);
  padding: 5px;
  margin-top: 20px;
}

.cucrd-name{
  font-weight: 800;
  font-size: 20px;
  line-height: 1.05;
}

.cucrd-role{
  font-size: 12px;
  font-weight: 700;
  opacity: .95;
  margin-top: 2px;
}

/* ============================
   Órbita de accesos (íconos girando)
   ============================ */
.cucrd-orbit{
  --radius: 98px;
  --btn: 56px;
  width: 280px;
  height: 280px;
  margin: 10px auto 6px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-top: -20px;
}

.cucrd-orbit-center{ position: relative; z-index: 2; }

.cucrd-orbit-home{
  width: 74px;
  height: 74px;
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--cucrd-bg-color, #ad0000);
  color:#fff;
  text-decoration:none;
  box-shadow: 0 18px 44px rgba(0,0,0,.30);
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, filter .18s ease;
}

.cucrd-orbit-home i{ font-size: 28px; line-height: 1; }

.cucrd-orbit-home:hover{ transform: translateY(-1px) scale(1.03); filter: brightness(.98); }

.cucrd-orbit-ring{
  position:absolute;
  inset:0;
  animation: cucrd-orbit-rot 11s linear infinite;
  transform-origin: center;
}

.cucrd-orbit:hover .cucrd-orbit-ring{
  animation-play-state: paused;
}

@keyframes cucrd-orbit-rot{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

.cucrd-orbit-item{
  position:absolute;
  top:50%;
  left:50%;
  width: var(--btn);
  height: var(--btn);
  margin-left: calc(var(--btn)/-2);
  margin-top:  calc(var(--btn)/-2);
  border-radius: 999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--cucrd-bg-color, #ad0000);
  color:#fff;
  text-decoration:none;
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.14);
  transform:
    rotate(calc(360deg/var(--n) * var(--i)))
    translate(var(--radius))
    rotate(calc(-360deg/var(--n) * var(--i)));
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.cucrd-orbit-item i{ font-size: 20px; line-height: 1; }

.cucrd-orbit-item:hover{
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
  filter: brightness(.98);
  transform:
    rotate(calc(360deg/var(--n) * var(--i)))
    translate(calc(var(--radius) + 4px))
    rotate(calc(-360deg/var(--n) * var(--i)))
    scale(1.05);
}

/* ============================
   Texto inferior (website)
   ============================ */
.cucrd-website{
  margin-top: auto;
  padding-top: 16px;
  padding-bottom: 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .96;
  text-shadow: 0 16px 34px rgba(0,0,0,.45);
}

/* Ajustes en móviles muy pequeños */
@media (max-width: 380px){
  .cucrd-top{ padding-top: 70px; }
  .cucrd-top-avatar{ width: 190px; height: 190px; border-width: 7px; }
  .cucrd-orbit{ width: 260px; height: 260px; --radius: 90px; --btn: 54px; }
  .cucrd-orbit-home{ width: 70px; height: 70px; }
  .cucrd-website{ font-size: 18px; }
}

.cucrd-card-wrap.is-preview .cucrd-card-inner{
  min-height: auto;
}