/* Perfil · Moxen — los estilos del efecto y de la demostración. */
:root {
  --pf-fondo: #0a0a0a;
  --pf-tarjeta: #121212;
  --pf-tarjeta-luz: #1a1a1a;     /* la tarjeta, un poco más clara arriba */
  --pf-texto: #f4f4f4;
  --pf-suave: rgba(255, 255, 255, .5);
  --pf-linea: rgba(255, 255, 255, .1);
  --pf-borde: #242424;           /* opaco: el fondo va en trozos que se solapan */
  --pf-avatar-a: #ffffff;        /* el avatar, con su volumen */
  --pf-avatar-b: #b9b9b9;
  --pf-avatar-texto: #0a0a0a;
  --pf-sombra: rgba(0, 0, 0, .85);
  --pf-verde: #3ccf7a;           /* disponible: el único color */
  --pf-curva: cubic-bezier(.22, 1, .36, 1);
  --pf-radio: 26px;
}
:root[data-tema="claro"] {
  --pf-fondo: #eeeeee;
  --pf-tarjeta: #fafafa;
  --pf-tarjeta-luz: #ffffff;
  --pf-texto: #0a0a0a;
  --pf-suave: rgba(0, 0, 0, .5);
  --pf-linea: rgba(0, 0, 0, .09);
  --pf-borde: #dedede;
  --pf-avatar-a: #3a3a3a;
  --pf-avatar-b: #050505;
  --pf-avatar-texto: #f4f4f4;
  --pf-sombra: rgba(0, 0, 0, .25);
  --pf-verde: #1fa35a;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--pf-fondo); color: var(--pf-texto); }
body { font-family: "General Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* ── el efecto ─────────────────────────────────────────────────────── */
/* Dos formas de la misma tarjeta. Las piezas no se animan con CSS: el
   JS mide dónde estaban y dónde quedan, y las lleva de una a otra. */
.pf-tarjeta { position: relative; }
/* El fondo va en tres trozos (perfil.js los crea): la tapa y el pie se
   desplazan y el centro se estira con scaleY. Así la tarjeta cambia de
   alto sin animar la altura y sin deformar las esquinas. */
.pf-capa { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pf-capa i { position: absolute; left: 0; right: 0; transform-origin: 50% 0; will-change: transform; }
.pf-capa i::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--pf-borde); border-radius: inherit; }
.pf-c1 { top: 0; height: var(--pf-radio); border-radius: var(--pf-radio) var(--pf-radio) 0 0; background: var(--pf-tarjeta-luz); }
.pf-c2 { top: calc(var(--pf-radio) - 1px); bottom: calc(var(--pf-radio) - 1px); background: linear-gradient(var(--pf-tarjeta-luz), var(--pf-tarjeta) 240px); }
.pf-c3 {
  bottom: 0; height: var(--pf-radio); border-radius: 0 0 var(--pf-radio) var(--pf-radio); background: var(--pf-tarjeta);
  box-shadow: 0 50px 70px -40px var(--pf-sombra);
}
.pf-c1::before { border-bottom: 0 !important; }
.pf-c2::before { border-top: 0 !important; border-bottom: 0 !important; }
.pf-c3::before { border-top: 0 !important; }
/* La ventana: dos marcos con overflow hidden que se desplazan en sentidos
   contrarios; uno recorta por arriba y el otro por abajo. */
.pf-ventana, .pf-ventana2 { overflow: hidden; will-change: transform; }
.pf-ventana { border-radius: var(--pf-radio) var(--pf-radio) 0 0; }
.pf-ventana2 { border-radius: 0 0 var(--pf-radio) var(--pf-radio); }

.pf-contenido { position: relative; padding: 16px 18px; }
.pf-cabeza { position: relative; display: flex; align-items: center; gap: 16px; }
.pf-avatar { width: 64px; height: 64px; }
.pf-nombre { font-size: 1.12rem; }
.pf-extra, .pf-portada { display: none; }

.pf-tarjeta[data-abierta] .pf-contenido { padding: 56px 32px 30px; }
.pf-tarjeta[data-abierta] .pf-cabeza { flex-direction: column; gap: 18px; }
/* cada pieza mide lo que su texto: así la escala del FLIP es la de la letra */
.pf-nombre, .pf-rol { width: fit-content; }
.pf-tarjeta[data-abierta] .pf-quien { display: flex; flex-direction: column; align-items: center; }
.pf-tarjeta[data-abierta] .pf-avatar { width: 128px; height: 128px; }
.pf-tarjeta[data-abierta] .pf-nombre { font-size: 1.9rem; }
.pf-tarjeta[data-abierta] .pf-extra, .pf-tarjeta[data-abierta] .pf-portada { display: block; }

/* los datos entran escalonados al abrir, y se van juntos al cerrar */
.pf-tarjeta[data-abierta] .pf-extra > * { animation: pf-entra .8s var(--pf-curva) backwards; }
.pf-tarjeta[data-abierta] .pf-extra > :nth-child(1) { animation-delay: .18s; }
.pf-tarjeta[data-abierta] .pf-extra > :nth-child(2) { animation-delay: .26s; }
.pf-tarjeta[data-abierta] .pf-extra > :nth-child(3) { animation-delay: .34s; }
.pf-tarjeta[data-abierta] .pf-portada { animation: pf-portada 1s var(--pf-curva) backwards; }
.pf-tarjeta[data-cerrando] .pf-extra > *, .pf-tarjeta[data-cerrando] .pf-portada { animation: pf-sale .22s ease forwards; }
@keyframes pf-entra { from { opacity: 0; transform: translateY(18px); } }
@keyframes pf-portada { from { opacity: 0; transform: scale(1.12); } }
@keyframes pf-sale { to { opacity: 0; transform: translateY(6px); } }

/* el anillo del avatar llega girando y se asienta */
.pf-anillo { position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--pf-texto); border-right-color: transparent; opacity: 0; }
.pf-tarjeta[data-abierta] .pf-anillo { opacity: .45; animation: pf-anillo 1.2s var(--pf-curva) .1s backwards; }
.pf-tarjeta[data-cerrando] .pf-anillo { opacity: 0; transition: opacity .2s ease; }
@keyframes pf-anillo { from { opacity: 0; transform: rotate(-200deg) scale(.86); } }

/* el + de la esquina gira hasta ser una × (giran las barras: la caja
   ya la mueve el JS) */
.pf-mas { position: absolute; z-index: 2; top: 18px; right: 18px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--pf-linea); }
.pf-mas::before, .pf-mas::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; margin: -.75px 0 0 -5.5px;
  background: var(--pf-texto); border-radius: 2px; transition: transform .7s var(--pf-curva);
}
.pf-mas::after { transform: rotate(90deg); }
.pf-tarjeta[data-abierta] .pf-mas::before { transform: rotate(135deg); }
.pf-tarjeta[data-abierta] .pf-mas::after { transform: rotate(225deg); }
.pf-tarjeta[data-cerrando] .pf-mas::before { transform: none; }
.pf-tarjeta[data-cerrando] .pf-mas::after { transform: rotate(90deg); }

/* ── la demostración ───────────────────────────────────────────────── */
.pf-escena { position: relative; min-height: 100%; display: grid; place-items: center; padding: 2rem 1rem; }
.pf-tarjeta {
  width: min(100%, 410px); border-radius: var(--pf-radio); isolation: isolate; cursor: pointer; outline: none;
}
.pf-tarjeta:focus-visible { outline: 2px solid var(--pf-texto); outline-offset: 4px; }
/* La portada: una foto (material de demostración, cámbiala por la tuya) que
   se funde con la tarjeta por abajo. */
.pf-portada {
  position: absolute; left: 0; right: 0; top: 0; height: 128px; overflow: hidden; pointer-events: none;
  -webkit-mask: linear-gradient(#000 35%, transparent); mask: linear-gradient(#000 35%, transparent);
}
.pf-portada img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; opacity: .8; filter: saturate(.85) contrast(1.05); }
.pf-cabeza p { margin: 0; }
.pf-avatar {
  position: relative; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, var(--pf-avatar-a), var(--pf-avatar-b) 85%);
  color: var(--pf-avatar-texto); font-weight: 600; letter-spacing: -.03em;
  box-shadow: inset 0 -6px 14px rgba(0, 0, 0, .18), 0 10px 24px -10px rgba(0, 0, 0, .6);
}
.pf-glifo { width: 52%; height: 52%; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.pf-nombre { font-weight: 600; letter-spacing: -.035em; line-height: 1.15; }
.pf-rol { margin-top: 3px !important; font-size: .9rem; color: var(--pf-suave); }
.pf-estado {
  display: flex; align-items: center; justify-content: center; gap: 9px; margin: 14px 0 0; font-size: .85rem; color: var(--pf-suave);
}
/* el punto de disponible late con una onda que crece y se apaga */
.pf-estado i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--pf-verde); }
.pf-estado i::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pf-verde);
  animation: pf-late 2.4s ease-out infinite;
}
@keyframes pf-late { 0% { opacity: .6; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(3); } }
.pf-cifras { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px 0 0; padding: 20px 0; border-block: 1px solid var(--pf-linea); text-align: center; }
.pf-cifras div + div { border-left: 1px solid var(--pf-linea); }
.pf-cifras dd { margin: 0; font-size: 1.85rem; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.pf-cifras dt { margin-top: 2px; font-size: .8rem; color: var(--pf-suave); }
.pf-botones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.pf-boton {
  padding: .82rem 1rem; border-radius: 99px; border: 1px solid var(--pf-linea); text-align: center;
  color: inherit; text-decoration: none; font-size: .92rem; font-weight: 500;
  transition: transform .5s var(--pf-curva), border-color .3s ease;
}
.pf-boton:hover { transform: translateY(-2px); border-color: var(--pf-suave); }
.pf-boton:focus-visible { outline: 2px solid var(--pf-texto); outline-offset: 3px; }
.pf-boton--lleno { background: var(--pf-texto); color: var(--pf-fondo); border-color: var(--pf-texto); }
.pf-pista { position: absolute; left: 0; right: 0; bottom: 2.4rem; margin: 0; text-align: center; font-size: .9rem; color: var(--pf-suave); }
.pf-con-dedo { display: none; }
@media (hover: none) { .pf-con-cursor { display: none; } .pf-con-dedo { display: inline; } }

@media (prefers-reduced-motion: reduce) {
  .pf-tarjeta * { animation: none !important; transition: none !important; }
  .pf-tarjeta[data-abierta] .pf-anillo { opacity: .45; }
}