:root{
  --font: 'Montserrat', sans-serif;
  --bold: 700;
  --medium: 500;

  /* tamaños (+2 px) */
  --fz-nombre: 14.7px;
  --fz-cargo: 10px;
  --fz-det: 9.3px;

  --color-nombre: #ffffff;
  --color-det: #eaf6ff;

  /* colores de círculos por marca */
  --ico-circle-gi: #6b0dff; /* Insurex / Garantía */
  --ico-circle-ms: #04137f; /* Mueve Seguro */
}

/* layout general */
*{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:#f3f7fb;color:#1b1b1b}
.wrap{max-width:1100px;margin:20px auto;padding:0 16px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{background:#fff;border-radius:12px;box-shadow:0 4px 18px rgba(0,0,0,.08);padding:16px}
h1,h2{margin:8px 0 16px}

/* formulario */
.form{display:grid;gap:10px}
.form input,.form select{padding:10px;border:1px solid #cfe0f6;border-radius:8px;font-size:14px}
.fila{display:flex;gap:8px;align-items:center}
.fila-email select{min-width:180px}
.prefijo,.sufijo{background:#eef5ff;border:1px solid #cfe0f6;border-radius:8px;padding:8px 10px;font-size:13px;color:#0b3d91}
.grupo.oculto{display:none}
.acciones{display:flex;gap:10px;margin-top:8px}
button{background:#1b89ff;color:#fff;border:none;border-radius:8px;padding:10px 14px;font-weight:700;cursor:pointer}

/* lienzo 500x239 transparente */
.lienzo{ position:relative; width:500px; height:239px; margin:auto; background:transparent; overflow:hidden; }
.plantilla{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }

/* offsets ajustados por el usuario */
.grupo-datos{
  position:absolute;
  top:25px;
  left:25px;
  bottom:100px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:6px;             /* Nombre ↔ Cargo = 6px */
  max-width:300px;
}

/* espacio extra después del cargo */
.grupo-datos .cargo{ margin-bottom:8px; }

/* Tipografías */
.t{ color:var(--color-det); font-family:var(--font); line-height:1.12; }
.nombre{ font-weight:var(--bold); font-size:var(--fz-nombre); color:var(--color-nombre); text-transform:uppercase; }
.cargo{  font-weight:var(--medium); font-size:var(--fz-cargo); }
.linea{  display:flex; align-items:center; gap:6px; font-weight:var(--medium); font-size:var(--fz-det); }
.direccion{ font-weight:var(--medium); font-size:var(--fz-det); }
.fila-dir{ display:flex; align-items:center; gap:6px; }
.fila-dir.seg{ margin-left:18px; } /* alinea L2 */

/* Wrapper del icono */
.ico-circ{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px; height:18px;
  border-radius:50%;
  background: transparent;
}

/* APLICAR círculo por empresa sobre el MISMO #lienzo */
#lienzo.emp-circ-ms .ico-circ{ background:#04137f; } /* Mueve Seguro */
#lienzo.emp-circ-gi .ico-circ{ background:#6b0dff; } /* Grupo Insurex */
#lienzo.emp-circ-ga .ico-circ{ background:#6b0dff; } /* Garantía Segura */

/* Icono blanco encima del círculo */
.ico{ width:12px; height:12px; stroke:#ffffff; stroke-width:2; }



.site-footer{
  position:fixed;
  left:0;
  bottom:0;
  width:100%;
  background:#f3f7fa;
  text-align:center;
  font-size:16px;
  color:#263066;
  padding:18px 0 12px 0;
  font-family:'Montserrat', Arial, sans-serif;
  border-radius:0 0 12px 12px;
  z-index:50;
}
.site-footer a{
  color:#4153a3;
  text-decoration:none;
  font-weight:500;
}