/* ============================================================
   EYUB' - sellos.css
   ============================================================ */

/* ---------- Tipos de sello ---------- */
.sello-tipo { text-align: center; }

.sello-tipo__marca {
  position: relative;
  display: grid;
  place-items: center;
  width: 92px; height: 92px;
  margin: 0 auto 1.3rem;
  border-radius: 50%;
  color: var(--acento);
  background: radial-gradient(circle at 36% 30%, rgba(18,107,255,.24), rgba(11,61,145,.08));
  border: 2px dashed rgba(11, 61, 145, .26);
  transition: all var(--normal) var(--ease-out);
}
.sello-tipo:hover .sello-tipo__marca {
  color: #fff;
  border-style: solid;
  border-color: var(--azul-interactivo);
  transform: rotate(-8deg) scale(1.05);
  box-shadow: 0 0 0 1px rgba(1, 28, 89, .18);
}

/* ---------- Diseñador ---------- */
.disenador {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.6rem, 3.5vw, 2.8rem);
  border-radius: var(--radio-lg);
  border: 1px solid var(--borde-fuerte);
  background:
    radial-gradient(660px 340px at 10% 0%, rgba(1, 28, 89, .14), transparent 64%),
    var(--superficie);
  backdrop-filter: blur(14px);
}
@media (max-width: 880px) { .disenador { grid-template-columns: 1fr; } }

.opciones-linea { display: flex; flex-wrap: wrap; gap: .5rem; }
.opciones-linea .chip { cursor: pointer; }

/* ---------- Resumen / vista previa ---------- */
.disenador__resumen {
  position: sticky;
  top: calc(var(--nav-alto) + 1.5rem);
  padding: 1.5rem 1.4rem;
  border-radius: var(--radio);
  border: 1px solid var(--borde);
  background: color-mix(in srgb, var(--fondo-alt) 82%, transparent);
}
@media (max-width: 880px) { .disenador__resumen { position: static; } }

.disenador__resumen h4 { margin-bottom: 1.2rem; text-align: center; }

/* Vista previa circular tipo sello */
.sello-vista {
  display: grid;
  place-items: center;
  padding: 1rem 0 1.6rem;
}
.sello-vista__anillo {
  display: grid;
  place-items: center;
  width: 190px; height: 190px;
  padding: 1.6rem;
  border-radius: 50%;
  text-align: center;
  color: var(--marca);
  background: var(--blanco);
  border: 3px solid var(--marca);
  box-shadow: 0 0 0 4px var(--blanco), 0 0 0 6px var(--marca), 0 14px 34px rgba(3, 11, 29, .32);
  transition: transform var(--normal) var(--ease-out);
}
.sello-vista__anillo:hover { transform: rotate(-4deg) scale(1.03); }

.sello-linea {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.sello-linea--principal { font-size: .84rem; font-weight: 800; margin-bottom: .18rem; }

.vacio-texto {
  font-family: var(--fuente-texto);
  font-size: .78rem;
  font-weight: 500;
  color: rgba(224, 27, 36, .45);
}

.disenador__lista { margin-bottom: 1.4rem; }
.disenador__lista li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .6rem 0;
  border-bottom: 1px solid var(--borde);
  font-size: .87rem;
}
.disenador__lista span { color: var(--texto-ter); }
.disenador__lista strong { font-weight: 650; text-align: right; }

/* ---------- Profesiones ---------- */
.profesiones {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .65rem;
}
.profesion {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .78rem 1.3rem;
  font-size: .92rem;
  font-weight: 600;
  color: var(--texto-sec);
  border-radius: var(--radio-full);
  border: 1px solid var(--borde);
  background: var(--superficie);
  transition: all var(--normal) var(--ease);
}
.profesion .ico { color: var(--acento); }
.profesion:hover {
  color: var(--texto);
  border-color: var(--azul-interactivo);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(1, 28, 89, .18);
}