/* Up To Marketing · Radar de recomendacion en IA (landing e informe).
   Se apoya en home.css (tokens --fondo, --violeta, --lima... y las clases
   hero, wrap, rotulo, h2, dek, filas, obs, barras). Aqui solo lo propio del
   radar, acotado a #utm-home y con prefijo rd-. Fuente: radar-ia/web/assets. */

/* ---------- landing: ejemplo ---------- */
#utm-home .rd-ejemplo{padding-top:58px}
#utm-home .rd-sello{
  position:absolute; top:18px; left:44px; margin:0; z-index:2;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--coral); border:1px dashed var(--coral); border-radius:6px; padding:4px 10px;
}
#utm-home .rd-mini{font-size:13px; display:flex; flex-direction:column; gap:6px}
#utm-home .rd-mini-cab, #utm-home .rd-mini-fila{display:grid; grid-template-columns:minmax(70px,1.1fr) repeat(3,minmax(0,1fr)); gap:6px; align-items:center}
#utm-home .rd-mini-cab span{font-family:var(--mono); font-size:10px; color:var(--texto-3); text-align:center; overflow:hidden; text-overflow:ellipsis}
#utm-home .rd-mini-fila span{color:var(--texto-2)}
#utm-home .rd-mini-fila i{font-style:normal; text-align:center}
#utm-home .rd-accion-ej{margin:24px 0 0; font-size:14px; color:var(--texto); border-left:2px solid var(--lima); padding-left:14px}
#utm-home .rd-accion-ej span{display:block; margin-top:6px; font-family:var(--mono); font-size:11.5px; color:var(--texto-3)}

/* casillas de apariciones (landing e informe) */
#utm-home .rd-n0, #utm-home .rd-n1, #utm-home .rd-n2, #utm-home .rd-n3{
  font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums;
  border-radius:6px; padding:7px 4px; text-align:center; font-style:normal;
}
#utm-home .rd-n0{background:rgba(255,255,255,.04); color:var(--texto-3)}
#utm-home .rd-n1{background:rgba(124,77,255,.22); color:var(--texto)}
#utm-home .rd-n2{background:rgba(124,77,255,.5); color:#fff}
#utm-home .rd-n3{background:var(--lima); color:var(--lima-ink); font-weight:700}

/* ---------- landing: formulario ---------- */
#utm-home .rd-pedir{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:52px; align-items:start}
#utm-home .rd-pedir .dek{margin-bottom:22px}
#utm-home .rd-lista{margin:0; padding:0; list-style:none; color:var(--texto-2); font-size:15px}
#utm-home .rd-lista li{padding:8px 0 8px 26px; position:relative}
#utm-home .rd-lista li::before{content:""; position:absolute; left:0; top:17px; width:12px; height:2px; background:var(--lima)}
#utm-home .rd-form{border-radius:16px}
#utm-home .rd-form a{color:var(--lima)}
@media(max-width:900px){ #utm-home .rd-pedir{grid-template-columns:1fr; gap:30px} }

/* ---------- landing: FAQ ---------- */
#utm-home .rd-faq{border-top:1px solid var(--borde); max-width:860px}
#utm-home .rd-faq details{border-bottom:1px solid var(--borde)}
#utm-home .rd-faq summary{
  cursor:pointer; list-style:none; padding:22px 40px 22px 0; position:relative;
  font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--texto);
}
#utm-home .rd-faq summary::-webkit-details-marker{display:none}
#utm-home .rd-faq summary::after{content:"+"; position:absolute; right:6px; top:18px; font-family:var(--mono); font-size:20px; color:var(--violeta)}
#utm-home .rd-faq details[open] summary::after{content:"–"}
#utm-home .rd-faq details p{margin:0 0 24px; color:var(--texto-2); font-size:15.5px; max-width:70ch}

/* ---------- pantalla de aprobar / descartar ---------- */
#utm-home .rd-accion .hero-in{padding-bottom:70px; max-width:760px}
#utm-home .rd-ficha{margin:8px 0 30px; border:1px solid var(--borde-luz); border-radius:12px; padding:8px 22px; background:var(--superficie)}
#utm-home .rd-ficha p{margin:0; padding:10px 0; border-bottom:1px solid var(--borde); color:var(--texto); display:grid; grid-template-columns:90px 1fr; gap:12px; overflow-wrap:anywhere}
#utm-home .rd-ficha p:last-child{border-bottom:none}
#utm-home .rd-ficha span{font-family:var(--mono); font-size:11px; color:var(--texto-3); text-transform:uppercase; letter-spacing:.1em; padding-top:3px}
#utm-home .rd-ficha a{color:var(--lima)}
#utm-home button.btn{border:0; cursor:pointer}

/* ---------- informe: acceso ---------- */
#utm-home .rd-clave-hero{padding-bottom:90px; max-width:720px}
#utm-home .rd-clave{margin:0 0 8px; max-width:520px}
#utm-home .rd-clave label{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--texto-3); margin:0 0 10px}
#utm-home .rd-clave-fila{display:flex; gap:10px; flex-wrap:wrap}
#utm-home .rd-clave input[type=password]{
  flex:1 1 220px; min-width:0; background:var(--superficie); color:var(--texto);
  border:1px solid var(--borde-luz); border-radius:9px; padding:13px 16px; font-size:16px; font-family:var(--cuerpo);
}
#utm-home .rd-clave input[type=password]:focus{outline:2px solid var(--violeta); outline-offset:1px}
#utm-home .rd-clave input[type=submit]{
  background:var(--lima); color:var(--lima-ink); border:0; border-radius:9px;
  padding:13px 22px; font-weight:700; font-size:15px; cursor:pointer; font-family:var(--cuerpo);
}
#utm-home .nota a{color:var(--texto-2)}

/* ---------- informe ---------- */
.rd-demo{
  background:var(--coral); color:#1A0A06; text-align:center;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; padding:9px 16px;
}
#utm-home .rd-resumen .gran{margin-top:4px}
#utm-home .nota a{text-decoration:underline}

#utm-home .rd-indice{
  display:flex; flex-wrap:wrap; gap:8px 10px; padding-top:22px; padding-bottom:22px;
  border-top:1px solid var(--borde);
}
#utm-home .rd-indice a{
  font-family:var(--mono); font-size:11.5px; color:var(--texto-2); text-decoration:none;
  border:1px solid var(--borde-luz); border-radius:99px; padding:6px 12px;
}
#utm-home .rd-indice a:hover{color:var(--texto); border-color:var(--violeta)}
#utm-home.rd-informe section.wrap{padding-top:76px; padding-bottom:76px}
#utm-home .rd-servicio .dek strong{color:var(--lima)}

#utm-home .rd-h3{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cian); margin:40px 0 14px; font-weight:400;
}
#utm-home .rd-leyenda{margin:-6px 0 16px; font-size:13.5px; color:var(--texto-3)}
#utm-home .rd-texto{color:var(--texto-2); margin:0; font-size:15.5px}

/* entidad */
#utm-home .rd-entidad{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
#utm-home .rd-ent{background:var(--superficie); border:1px solid var(--borde); border-radius:12px; padding:20px}
#utm-home .rd-ent-motor{font-family:var(--display); font-weight:600; color:var(--texto); margin:0 0 10px}
#utm-home .rd-ent-det{margin:12px 0 0; color:var(--texto-2); font-size:14px; line-height:1.5}
#utm-home .rd-chip{
  display:inline-block; margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; border-radius:99px; padding:4px 10px; font-weight:400;
  background:rgba(255,255,255,.06); color:var(--texto-2);
}
#utm-home .rd-ent-conoce{border-color:rgba(205,242,60,.35)}
#utm-home .rd-ent-conoce .rd-chip{background:rgba(205,242,60,.14); color:var(--lima)}
#utm-home .rd-ent-conoce_mal{border-color:rgba(255,196,77,.4)}
#utm-home .rd-ent-conoce_mal .rd-chip{background:rgba(255,196,77,.14); color:#FFC44D}
#utm-home .rd-ent-no_conoce{border-color:rgba(255,106,85,.4)}
#utm-home .rd-ent-no_conoce .rd-chip{background:rgba(255,106,85,.14); color:var(--coral)}
@media(max-width:520px){ #utm-home .rd-entidad{grid-template-columns:1fr} }

/* matriz pregunta x motor */
#utm-home .rd-matriz{border-top:1px solid var(--borde)}
#utm-home .rd-mfila{
  display:grid; grid-template-columns:minmax(0,1fr) repeat(var(--rd-n,4),92px); gap:8px; align-items:center;
  padding:12px 0; border-bottom:1px solid var(--borde);
}
#utm-home .rd-mcab span{font-family:var(--mono); font-size:10.5px; color:var(--texto-3); text-align:center; letter-spacing:.06em}
#utm-home .rd-mcab span:first-child{text-align:left}
#utm-home .rd-preg{color:var(--texto); font-size:14.5px; line-height:1.45; padding-right:12px}
#utm-home .rd-preg em{
  display:block; font-style:normal; font-family:var(--mono); font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--texto-3); margin-bottom:4px;
}
@media(max-width:760px){
  #utm-home .rd-mcab{display:none}
  #utm-home .rd-mfila{grid-template-columns:repeat(var(--rd-n,4),minmax(0,1fr)); gap:6px; padding:16px 0}
  #utm-home .rd-preg{grid-column:1 / -1; padding:0 0 6px}
  #utm-home .rd-celda::before{
    content:attr(data-motor); display:block; font-size:9.5px; letter-spacing:.02em;
    opacity:.75; margin-bottom:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}

/* dos columnas: quien gana / por que */
#utm-home .rd-dos{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px}
@media(max-width:860px){ #utm-home .rd-dos{grid-template-columns:1fr; gap:0} }
#utm-home .rd-informe .barra, #utm-home.rd-informe .barra{grid-template-columns:minmax(0,170px) 1fr 74px}
#utm-home .barra .q a{color:var(--texto-2); text-decoration:none}
#utm-home .barra .q a:hover{color:var(--texto); text-decoration:underline}
#utm-home .barra .q b{font-family:var(--mono); color:var(--texto-3); font-weight:400; margin-right:4px}
#utm-home .barra.rd-yo .q, #utm-home .barra.rd-yo .q a{color:var(--lima); font-weight:700}
#utm-home .barra.rd-yo .t i{background:var(--lima); box-shadow:0 0 16px -2px rgba(205,242,60,.6)}
#utm-home .rd-ranking{max-width:860px}
@media(max-width:520px){
  #utm-home.rd-informe .barra{grid-template-columns:1fr auto; row-gap:6px}
  #utm-home.rd-informe .barra .v{white-space:nowrap}
  #utm-home.rd-informe .barra .q{grid-column:1 / -1; white-space:normal}
  #utm-home.rd-informe .barra .t{grid-column:1}
}

#utm-home .rd-fuentes{list-style:none; margin:0; padding:0; border-top:1px solid var(--borde)}
#utm-home .rd-fuentes li{padding:12px 0; border-bottom:1px solid var(--borde); font-size:14.5px; overflow-wrap:anywhere}
#utm-home .rd-fuentes b{display:block; font-family:var(--mono); font-size:10.5px; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--texto-3); margin-bottom:3px}
#utm-home .rd-fuentes a{color:var(--texto)}
#utm-home .rd-fuentes span{display:block; font-family:var(--mono); font-size:11px; color:var(--texto-3); margin-top:3px}

/* acciones */
#utm-home .rd-acciones{list-style:none; counter-reset:acc; margin:0; padding:0; display:flex; flex-direction:column; gap:12px}
#utm-home .rd-acciones li{
  counter-increment:acc; position:relative; padding:20px 22px 20px 70px;
  background:linear-gradient(150deg, rgba(124,77,255,.12) 0%, rgba(12,9,24,0) 70%);
  border:1px solid var(--borde-luz); border-radius:12px;
}
#utm-home .rd-acciones li::before{
  content:counter(acc); position:absolute; left:22px; top:18px;
  font-family:var(--display); font-weight:700; font-size:1.6rem; line-height:1; color:var(--lima);
}
#utm-home .rd-que{margin:0 0 10px; color:var(--texto); font-weight:600}
#utm-home .rd-evid{margin:0; color:var(--texto-2); font-size:14px}
#utm-home .rd-evid span{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--cian); margin-right:8px}
#utm-home .rd-esf{margin:8px 0 0; font-family:var(--mono); font-size:11px; color:var(--texto-3)}
@media(max-width:520px){
  #utm-home .rd-acciones li{padding:52px 18px 18px}
  #utm-home .rd-acciones li::before{left:18px; top:16px}
}
#utm-home .rd-noharia{margin-top:22px; border-left:2px solid var(--coral); padding:4px 0 4px 18px}
#utm-home .rd-noharia .rd-h3{margin:0 0 6px; color:var(--coral)}
#utm-home .rd-noharia p:last-child{margin:0; color:var(--texto-2); font-size:15px}

/* senales */
#utm-home .rd-senal h3{min-width:0}
#utm-home .rd-g-alta{background:rgba(255,106,85,.16); color:var(--coral)}
#utm-home .rd-g-media{background:rgba(255,196,77,.14); color:#FFC44D}
#utm-home .rd-g-baja{background:rgba(255,255,255,.06); color:var(--texto-2)}
#utm-home .rd-firma{margin:40px 0 0; font-family:var(--mono); font-size:11.5px; color:var(--texto-3)}

@media(max-width:520px){
  #utm-home .wrap{padding-left:18px; padding-right:18px}
  #utm-home section.wrap{padding-left:18px; padding-right:18px}
  #utm-home .rd-sello{left:22px}
  #utm-home .obs{padding:52px 22px 30px}
}

/* accion unica por servicio (formato 14-sep) */
#utm-home .rd-accion{
  margin-top:34px; padding:22px 24px; border:1px solid var(--borde-luz); border-radius:12px;
  background:linear-gradient(150deg, rgba(205,242,60,.07) 0%, rgba(12,9,24,0) 70%);
  border-left:3px solid var(--lima);
}
#utm-home .rd-accion .rd-h3{margin:0 0 10px}
#utm-home .rd-prioridades li::before{color:var(--violeta)}

/* ---------- copy 14-sep: garantias legibles y hero compacto en movil ---------- */
#utm-home .rd-garantias{
  list-style:none; margin:20px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:6px 18px;
  font-family:var(--cuerpo); font-size:15px; line-height:1.5; color:var(--texto);
}
#utm-home .rd-garantias li{position:relative; padding-left:22px}
#utm-home .rd-garantias li::before{
  content:""; position:absolute; left:2px; top:5px; width:10px; height:6px;
  border-left:2px solid var(--lima); border-bottom:2px solid var(--lima); transform:rotate(-45deg);
}
#utm-home .rd-pedir .rd-garantias{margin-top:0}
#utm-home #que-recibes .rd-ejemplo{margin-top:44px}
@media(max-width:760px){
  /* El panel va despues del CTA; en movil se queda solo con la pregunta del
     cliente para no empujar el resto de la pagina. */
  #utm-home .hero-grid{gap:26px}
  #utm-home .rd-turno-2, #utm-home .hero .panel-top{display:none}
  #utm-home .hero .panel{padding-bottom:20px}
  #utm-home .hero .turno{padding-top:18px}
  #utm-home section.wrap{padding-top:64px; padding-bottom:64px}
  #utm-home .dek{margin-bottom:28px}
}
@media(max-width:520px){
  /* el sello ocupa dos lineas en movil: fuera del posicionado absoluto para que no pise el rotulo */
  #utm-home .rd-sello{position:relative; top:auto; left:auto; display:inline-block; margin:0 0 20px}
  #utm-home .obs.rd-ejemplo{padding-top:26px}
}