/* =========================================================
   Tarjeta de Presentación (estilo "Imporferri" - Mobile First)
   - Fondo vertical + tinte rojo
   - Botones circulares blancos con icono + texto dentro
   - Avatar centrado + nombre grande
========================================================= */

.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,.08), rgba(0,0,0,0) 65%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.25));
}

.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);
}

/* Tinte rojo sobre la imagen */
.cucrd-card-tint{
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      180deg,
      rgba(140, 0, 0, var(--cucrd-overlay, .55)) 0%,
      rgba(120, 0, 0, var(--cucrd-overlay, .55)) 40%,
      rgba(90, 0, 0, var(--cucrd-overlay, .55)) 100%
    );
}

.cucrd-card-inner{
  position: relative;
  z-index: 2;
  min-height: 100svh;
  padding: 46px 18px calc(26px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
}

/* ===== Brand ===== */
.cucrd-brand{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.cucrd-brand-logo{
  width: 220px;
  max-height: 140px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.cucrd-brand-name{
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-style: italic;
  transform: skewX(-8deg);
  font-size: clamp(30px, 6.5vw, 44px);
  line-height: 1;
  text-shadow: 0 10px 22px rgba(0,0,0,.35);
}

.cucrd-brand-tagline{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .95;
  margin-top: -6px;
}

/* ===== Botones circulares ===== */
.cucrd-bubble{
  width: 92px;
  height: 92px;
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  color: #111;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 16px 34px rgba(0,0,0,.30);
  user-select: none;
}

.cucrd-bubble i{
  font-size: 20px;
}

.cucrd-bubble span{
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
}

.cucrd-row{
  width: min(360px, 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}

.cucrd-row-mid{
  margin-top: 4px;
}

.cucrd-row-bottom{
  margin-top: 10px;
}

/* ===== Perfil ===== */
.cucrd-profile{
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cucrd-avatar-wrap{
  width: 180px;
  height: 180px;
  border-radius: 999px;
  padding: 3px;
  background: rgba(255,255,255,.0);
  border: 3px solid rgba(255,255,255,.85);
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}

.cucrd-avatar{
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.cucrd-name{
  font-weight: 800;
  font-size: clamp(26px, 6vw, 40px);
  line-height: 1.05;
  text-shadow: 0 14px 28px rgba(0,0,0,.35);
}

.cucrd-role{
  font-size: 14px;
  font-weight: 600;
  opacity: .95;
}

/* Hover (desktop) */
@media (hover:hover){
  .cucrd-bubble{
    transition: transform .16s ease, filter .16s ease;
  }
  .cucrd-bubble:hover{
    transform: translateY(-2px);
    filter: brightness(.98);
  }
}

/* Ajustes escritorio */
@media (min-width: 992px){
  .cucrd-card-wrap:not(.is-preview){
    min-height: 720px;
  }
}


/* ============================
   Órbita de accesos (íconos girando)
   ============================ */
.cucrd-orbit{
  --radius: 132px;
  --btn: 64px;
  width: 320px;
  height: 320px;
  margin: 12px auto 6px;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

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

.cucrd-orbit-ring{
  position:absolute;
  inset:0;
  animation: cucrd-orbit-rot 12s 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: rgba(0,0,0,.72);
  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, background .18s ease, box-shadow .18s ease;
}

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

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

/* Más compacto en móviles */
@media (max-width: 380px){
  .cucrd-orbit{
    width: 280px;
    height: 280px;
    --radius: 112px;
    --btn: 58px;
  }
  .cucrd-avatar-wrap{ width: 160px; height: 160px; }
  .cucrd-brand-logo{ width: 210px; }
}

/* ============================
   Footer redes sociales
   ============================ */
.cucrd-social-footer{
  margin-top: auto; /* queda abajo (reemplaza el botón inferior) */
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
}

.cucrd-social{
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #000;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform .18s ease, opacity .18s ease;
  opacity: .95;
}

.cucrd-social i{ font-size: 18px; line-height: 1; }

.cucrd-social:hover{
  transform: translateY(-1px) scale(1.06);
  opacity: 1;
}


.cucrd-card-wrap.is-preview .cucrd-card-inner{
  min-height: auto;
  padding-top: 34px;
}