/* Visuales propios de la guía «IA en selección de personal» (ACBSEC × USOARIT).
   El formulario, la retícula y la tipografía se heredan de guia.css.
   Regla de marca: el acento nunca es un filete lateral dorado; se usa el
   triángulo de marca o un halo. */

/* ---------- etiquetas de tipo de obligación ---------- */
.ia-tag{display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.09em;
  text-transform:uppercase;padding:3px 8px;border:1px solid currentColor;border-radius:2px;
  white-space:nowrap;vertical-align:middle}
.ia-tag[data-kind=actual]{color:#6d5416}
.ia-tag[data-kind=futura]{color:#4a5560}
.ia-tag[data-kind=practica]{color:#4D4F38}
.ia-tag[data-kind=propuesta]{color:#7a3f2e}
.ia-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:0 0 26px;padding:0;list-style:none;
  font-size:.86rem;line-height:1.5}
.ia-legend li{display:flex;gap:8px;align-items:baseline}

/* ---------- nota con triángulo de marca ---------- */
.ia-note{position:relative;background:#ece7db;padding:20px 24px 20px 46px;margin:26px 0;font-size:.96rem;line-height:1.7}
.ia-note::before{content:'';position:absolute;left:20px;top:25px;width:0;height:0;
  border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent}
.ia-note p:last-child{margin-bottom:0}
.ia-note b{display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6d5416;margin-bottom:6px}

/* ---------- CTA conjunto ----------
   Mismo tratamiento que .policy-download en guia.css: filete tintado y
   destello de esquina, sin barra de color. */
.ia-cta{position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(182,143,64,.34)}
.ia-cta::after{content:"";position:absolute;top:0;right:0;width:280px;height:280px;
  pointer-events:none;background:radial-gradient(circle at 100% 0%,rgba(182,143,64,.17),transparent 68%)}
.ia-cta>*{position:relative;z-index:1}

/* ---------- respuesta rápida (GEO) ---------- */
.ia-answer{background:#faf8f1;padding:30px 32px;margin:0 0 30px;box-shadow:0 0 0 1px rgba(26,28,27,.09),0 0 0 7px rgba(182,143,64,.11)}
.ia-answer h2{margin:8px 0 16px!important;font-size:clamp(1.5rem,2.7vw,2rem)!important}
.ia-answer .eyebrow{color:#66501b}
.ia-answer p:last-child{margin-bottom:0}

/* ---------- escala de influencia ---------- */
.ia-scale{margin:28px 0;display:grid;gap:3px}
.ia-scale-cap{display:flex;justify-content:space-between;gap:16px;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:#5c5547;margin-bottom:10px}
.ia-scale-row{display:grid;grid-template-columns:34px minmax(0,1.05fr) minmax(0,1fr);gap:0;
  align-items:stretch;background:#f2eee3}
.ia-scale-row>*{padding:13px 16px;min-width:0}
.ia-scale-n{font-family:var(--mono);font-size:.78rem;color:#fff;display:flex;align-items:center;
  justify-content:center;padding:13px 0}
.ia-scale-row b{display:block;font-size:.97rem;line-height:1.45}
.ia-scale-row span{font-size:.87rem;line-height:1.55;color:#4a4638}
.ia-scale-risk{border-left:1px solid rgba(26,28,27,.1);background:#eae5d8}
.ia-scale-row[data-level="1"] .ia-scale-n{background:#6f7a55}
.ia-scale-row[data-level="2"] .ia-scale-n{background:#7d8352}
.ia-scale-row[data-level="3"] .ia-scale-n{background:#8d874d}
.ia-scale-row[data-level="4"] .ia-scale-n{background:#9c8745}
.ia-scale-row[data-level="5"] .ia-scale-n{background:#a8803c}
.ia-scale-row[data-level="6"] .ia-scale-n{background:#a97232}
.ia-scale-row[data-level="7"] .ia-scale-n{background:#a35c2c}
.ia-scale-row[data-level="8"] .ia-scale-n{background:#8f4230}

/* ---------- mapa de datos ---------- */
.ia-data{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:26px 0}
.ia-data>div{background:#e9e5d9;padding:22px}
.ia-data h3{font-size:1.05rem;margin:0 0 4px!important}
.ia-data>div>span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;color:#6d5416;margin-bottom:14px}
.ia-data ul{margin:0;padding-left:18px;font-size:.89rem;line-height:1.75}
.ia-data>div:last-child{background:#dfe0d2}

/* ---------- supervisión: formal frente a efectiva ---------- */
.ia-oversight{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:28px 0}
.ia-oversight>div{padding:24px;background:#f2eee3}
.ia-oversight>div:last-child{background:#e6ebdd}
.ia-oversight h3{font-size:1.1rem;margin:0 0 4px!important}
.ia-oversight>div>span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;
  text-transform:uppercase;margin-bottom:16px;color:#6d5416}
.ia-oversight>div:last-child>span{color:#46552f}
.ia-oversight ol{list-style:none;padding:0;margin:0;counter-reset:ov;font-size:.9rem;line-height:1.55}
.ia-oversight li{counter-increment:ov;position:relative;padding:9px 0 9px 26px;border-top:1px solid rgba(26,28,27,.09)}
.ia-oversight li:first-child{border-top:0}
.ia-oversight li::before{content:'';position:absolute;left:4px;top:15px;width:0;height:0;
  border-left:7px solid #b0a690;border-top:5px solid transparent;border-bottom:5px solid transparent}
.ia-oversight>div:last-child li::before{border-left-color:#7a8a58}
.ia-oversight-foot{font-size:.87rem;margin:14px 0 0;padding-top:12px;border-top:1px solid rgba(26,28,27,.12);color:#4a4638}

/* ---------- matriz de marcos ---------- */
.ia-frameworks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:26px 0}
.ia-frameworks>div{background:#f2eee3;padding:20px}
.ia-frameworks b{display:block;font-size:1rem;margin-bottom:8px}
.ia-frameworks p{font-size:.88rem;line-height:1.6;margin:8px 0 0}

/* ---------- revisión en 6 pasos ---------- */
.ia-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:28px 0;
  counter-reset:paso;list-style:none;padding:0}
.ia-steps li{counter-increment:paso;background:#faf8f1;padding:22px;box-shadow:0 0 0 1px rgba(26,28,27,.08)}
.ia-steps li::before{content:'0' counter(paso);display:block;font-family:var(--mono);font-size:.78rem;
  color:#886b2a;margin-bottom:10px}
.ia-steps b{display:block;font-size:1rem;margin-bottom:6px}
.ia-steps span{font-size:.88rem;line-height:1.6;color:#4a4638}
.ia-steps-owner{display:block;margin-top:12px;font-family:var(--mono);font-size:.66rem;
  letter-spacing:.07em;text-transform:uppercase;color:#6d5416}

/* ---------- caso práctico ---------- */
.ia-case{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:26px 0}
.ia-case>div{padding:24px;background:#eeeae0}
.ia-case>div:last-child{background:#1a1c1b;color:#f5f2ec}
.ia-case>div:last-child h3{color:#f5f2ec}
.ia-case h3{font-size:1.05rem;margin:0 0 14px!important}
.ia-case ul{margin:0;padding-left:18px;font-size:.9rem;line-height:1.7}
.ia-case>div:last-child li::marker{color:#c8a75e}

/* ---------- dos disciplinas + CTA conjunto ---------- */
.ia-duo{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin:28px 0}
.ia-duo>div{background:#f2eee3;padding:26px}
.ia-duo .ia-logo-acb b{display:inline}
.ia-duo>div>span{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:#6d5416;margin-bottom:16px}
.ia-duo ul{margin:0;padding-left:18px;font-size:.88rem;line-height:1.7}
.ia-duo-x{display:flex;align-items:center;font-family:var(--serif);font-size:1.6rem;color:#886b2a}
.ia-duo-centre{text-align:center;font-family:var(--serif);font-size:1.15rem;margin:0 0 8px}

.ia-cta{background:#1a1c1b;color:#f5f2ec;padding:40px;margin:44px 0}
.ia-cta h2{color:#f5f2ec;margin:0 0 14px!important;font-size:clamp(1.6rem,3vw,2.1rem)!important}
.ia-cta p{color:#ddd9ce}
.ia-cta-actions{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:22px}
/* .btn lleva white-space:nowrap: en móvil una etiqueta larga desbordaba la página. */
.ia-cta-actions .btn{white-space:normal;text-align:center;max-width:100%}
.ia-cta a:not(.btn){color:#e3c37b}

/* ---------- emparejamiento de marcas ----------
   Logotipos oficiales: el de Usoarit en SVG (blanco sobre oscuro, violeta
   sobre claro) y el símbolo de ACBSEC desde el sprite #acb-logo con su
   marca denominativa. Mismo criterio que la página /usoarit/. */
.ia-logo-uso{display:block;width:auto;height:34px}
.ia-logo-acb{display:flex;align-items:center;gap:14px}
.ia-logo-acb svg{width:36px;height:36px;flex:none}
.ia-logo-acb b{font-family:var(--serif);font-size:1.3rem;letter-spacing:.04em;font-weight:700}

/* Sobre el CTA oscuro */
.ia-cta-brands{display:flex;flex-wrap:wrap;align-items:center;gap:20px 26px;margin:26px 0}
.ia-cta-brand{display:flex;flex-direction:column;gap:9px}
.ia-cta-brand>span:last-child{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:#b9b3a5}
.ia-cta .ia-logo-acb{color:var(--gold)}
.ia-cta .ia-logo-acb b{color:#e3c37b}
.ia-cta-x{font-family:var(--serif);font-size:1.6rem;color:#886b2a;align-self:center}

/* Sobre el bloque claro de las dos disciplinas */
.ia-duo .ia-logo-uso{height:30px;margin-bottom:4px}
.ia-duo .ia-logo-acb{color:var(--gold-dark);margin-bottom:4px}
.ia-duo .ia-logo-acb b{color:#1a1c1b}
@media(max-width:700px){
  .ia-logo-uso{height:28px}
  .ia-logo-acb svg{width:30px;height:30px}
  .ia-logo-acb b{font-size:1.1rem}
}

/* ---------- fuentes ---------- */
.ia-sources h3{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:#6d5416;margin:26px 0 10px!important}
.ia-sources ul{margin:0;padding-left:18px;font-size:.9rem;line-height:1.8}

/* ---------- línea temporal ----------
   blog.css restringe la retícula, el contador y la supresión del marcador
   nativo de .road-track al contexto .post-body. Esta guía vive en
   .policy-body, así que esas reglas hay que repetirlas aquí o el componente
   se apila y la lista muestra su numeración propia. */
.policy-body .road-track{list-style:none;margin:0;padding:0;counter-reset:fase;
  display:grid;gap:1.9rem var(--road-gap)}
@media(min-width:880px){.policy-body .road-track{grid-template-columns:repeat(5,minmax(0,1fr))}}
.policy-body .road-track>li{position:relative;margin:0;padding:0}
.policy-body .road-track>li::before{content:none}
.policy-body .road-track h3{font-size:1.02rem;line-height:1.3;margin:0 0 .5rem}
.policy-body .road-track p{font-size:.88rem}

/* ---------- diagrama principal ---------- */
.ia-journey-figure{margin:28px 0;padding:0}
.ia-journey{display:block;width:100%;height:auto;background:#F5F2EC}
.ia-journey-figure figcaption{font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;
  color:#5c5547;margin-top:10px}

/* ---------- pregunta opcional del formulario ---------- */
/* guia.css sólo da formato a input[type=email]; el campo de empresa
   necesita la misma caja. */
.policy-form input[type=text]{width:100%;min-height:50px;padding:12px;color:#1a1c1b;background:#fff;
  border:2px solid #bbb3a1;border-radius:4px;font:inherit}
.policy-guide-stage{border:0;padding:0;margin:22px 0 0;min-width:0}
.policy-guide-stage legend{padding:0;font-weight:600;margin-bottom:10px}
.policy-guide-stage legend span{font-weight:400;color:#d7d0bf}
.policy-guide-stage label{display:flex;gap:11px;align-items:center;font-weight:400;
  font-size:.93rem;margin-bottom:9px;cursor:pointer}
.policy-guide-stage input{width:20px;height:20px;flex:none;margin:0;accent-color:#c8a75e}
.policy-form label>span:not([data-guide-email-flag]){font-weight:400;color:#d7d0bf}

/* ---------- móvil ---------- */
@media(max-width:860px){
  .ia-data,.ia-frameworks,.ia-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .ia-answer{padding:24px 22px}
  .ia-data,.ia-frameworks,.ia-steps,.ia-oversight,.ia-case{grid-template-columns:1fr}
  .ia-duo{grid-template-columns:1fr}
  .ia-duo-x{justify-content:center}
  .ia-scale-row{grid-template-columns:30px minmax(0,1fr)}
  .ia-scale-risk{grid-column:2;border-left:0;border-top:1px solid rgba(26,28,27,.1)}
  .ia-cta{padding:28px 22px}
  .ia-note{padding:18px 20px 18px 42px}
  .ia-journey-figure{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ia-journey{min-width:560px}
}
@media print{
  .ia-cta,.ia-answer{box-shadow:none}
  .ia-scale-row,.ia-steps li{break-inside:avoid}
}