/* ==================================================================
   instalador.cl — ajustes-97.css
   Ajustes de tamaño y espacio en COMPUTADOR (sobre 760 px de ancho).
   El celular no se toca: sus reglas siguen en movil-75.css.
   - La franja bajo el banner del perfil queda más baja.
   - Los textos de esa franja ya no se parten en varias líneas.
   - Tarjetas de instaladores: 15% más chicas en la búsqueda y en
     "Instaladores"; 10% más chicas en la portada.
   - Marcas de la "nota inicial por trayectoria" (entrega 81).
   ================================================================== */

@media (min-width:760px){

  /* ---------- franja bajo el banner del perfil: más baja ---------- */
  .pf-banner-abajo{padding:8px 26px 9px;gap:12px}
  .pf-nota{padding:6px 13px;gap:9px}
  .pf-nota > b,
  .pf-nota-badge b{font-size:24px}
  .pf-nota-der em{font-size:11px;margin-top:2px}
  /* Los botones de contacto eran los que estiraban la franja: ahora son
     algo más bajos y van más juntos. */
  .pf-contacto{gap:6px;min-width:270px}
  .pf-btn{padding:10px 16px;font-size:14px}
  .pf-btn-wsp{padding:10px 20px;font-size:14.5px}
  .pf-btn-wsp svg{width:21px;height:21px}
  .pf-btn-correo{padding:8px 16px;font-size:13.5px}
  .pf-btn-correo svg{width:18px;height:18px}
  .pf-btn-fav{padding:9px 16px;font-size:13.5px}
  .pf-wsp-cerrado{margin:2px 0 0;font-size:11.5px;line-height:1.3}

  /* Los datos de la franja se apretaban porque se armaban en 4 columnas
     dentro de un espacio angosto. Ahora son 3 datos (la cobertura ya está
     en la tarjeta "Zona de trabajo") en una sola fila, con íconos y letras
     algo más chicos. Bajo 1280 px pasan a dos columnas. */
  .pf-banner-abajo{grid-template-columns:auto minmax(0,1fr) auto}
  .pf-sellos{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px;align-content:center}
  .pf-sellos li:nth-child(n+4){display:none}
  .pf-sellos li{gap:10px;min-width:0}
  .pf-sello-ico{width:34px;height:34px}
  .pf-sello-ico svg{width:19px;height:19px}
  .pf-sellos b{font-size:14.5px}
  .pf-sellos em{font-size:11.5px;line-height:1.25}

  /* ---------- tarjetas 15% más chicas en búsqueda e "Instaladores" ---------- */
  .rejilla-fichas{grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
  .rejilla-fichas .ficha-foto{height:119px}
  .rejilla-fichas .ficha-datos{padding:9px 10px 10px}
  .rejilla-fichas .ficha-datos h3{font-size:14px}
  .rejilla-fichas .ficha-lugar,
  .rejilla-fichas .ficha-nota,
  .rejilla-fichas .ficha-estado{font-size:11.5px}
  .rejilla-fichas .etiquetas li{font-size:11px;padding:3px 7px}
  .rejilla-fichas .marcas li{font-size:11px}
  .rejilla-fichas .ficha-avatar{width:44px;height:44px}

  /* ---------- tarjetas 10% más chicas en la portada ---------- */
  .pista .ficha{width:178px}
  .pista .ficha-foto{height:126px}
  .pista .ficha-datos{padding:10px 11px 11px}
  .pista .ficha-datos h3{font-size:14.5px}
  .pista .ficha-lugar,
  .pista .ficha-nota,
  .pista .ficha-estado{font-size:12px}
  .pista .etiquetas li{font-size:11px}
  .pista .ficha-avatar{width:46px;height:46px}
}

/* ==================================================================
   ENTREGA 82
   - "Condiciones de trabajo": recuadros de color en vez de texto plano.
   - "Dónde instala": las comunas como etiquetas, sin el recuadro vacío.
   - Tarjeta destacada: cinta naranja y, en la portada, queda fija a la
     izquierda mientras el resto avanza.
   ================================================================== */
.pf-cond-bajada{margin:0 0 12px;font-size:12.5px;color:#6A7686}
.pf-cond-grid{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pf-cond{display:flex;align-items:flex-start;gap:11px;padding:11px 12px;border-radius:4px;background:#F5F7FA}
.pf-cond > div{min-width:0}
.pf-cond em{display:block;font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#6A7686}
.pf-cond b{display:block;font-size:14.5px;line-height:1.3;color:#16263D;margin-top:2px}
.pf-cond > div > span{display:block;font-size:12.5px;line-height:1.35;color:#5C6B7E;margin-top:3px}
.pf-cond-ico{width:36px;height:36px;border-radius:4px;flex:none;display:grid;place-items:center}
.pf-cond-ico svg{width:19px;height:19px}
.pf-cond.t-naranja{background:#FFF3EA} .pf-cond.t-naranja .pf-cond-ico{background:#FCE0CB;color:#C4551A}
.pf-cond.t-verde{background:#EDF9F1}   .pf-cond.t-verde .pf-cond-ico{background:#D2EFDD;color:#177A43}
.pf-cond.t-azul{background:#EDF3FD}    .pf-cond.t-azul .pf-cond-ico{background:#D6E4FA;color:#1D5FC0}
.pf-cond.t-morado{background:#F4EFFD}  .pf-cond.t-morado .pf-cond-ico{background:#E5DAFA;color:#6B34C4}
.pf-cond.t-cian{background:#EAF7FA}    .pf-cond.t-cian .pf-cond-ico{background:#CDEAF2;color:#10697F}
.pf-cond.t-rosa{background:#FDEFF4}    .pf-cond.t-rosa .pf-cond-ico{background:#F8D8E4;color:#B12A5B}
@media (min-width:760px){ .pf-cond-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){ .pf-lado .pf-cond-grid{grid-template-columns:1fr} }

/* aviso de la foto en el registro */
.paso-aviso-foto{margin:0 0 14px;padding:10px 12px;background:#FFF3EA;border-left:3px solid #F26A1B;
  border-radius:0 4px 4px 0;font-size:13px;line-height:1.45;color:#5A3416}

/* Dónde instala */
.pf-zona-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pf-zona-chips li{display:inline-flex;align-items:center;gap:5px;background:#F3F5F8;border:1px solid #E2E7EE;
  border-radius:4px;padding:6px 10px;font-size:13px;font-weight:600;color:#33455C}
.pf-zona-chips li svg{width:14px;height:14px;color:#F26A1B}
.pf-zona-viaja{margin:11px 0 0;display:flex;align-items:center;gap:7px;font-size:13px;color:#33455C;
  background:#EDF3FD;border-radius:4px;padding:9px 11px}
.pf-zona-viaja svg{width:17px;height:17px;color:#1D5FC0;flex:none}

/* tarjeta destacada */
.ficha-destacada{box-shadow:0 0 0 2px #F26A1B, 0 8px 22px rgba(18,41,74,.12)}
.ficha-cinta{position:absolute;top:0;left:0;z-index:3;background:#F26A1B;color:#fff;font-size:10.5px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 9px;border-radius:4px 0 4px 0}
.ficha{position:relative}
.home-destacados{display:grid;gap:14px}
@media (min-width:760px){
  .home-destacados{grid-template-columns:auto minmax(0,1fr);align-items:start}
  .destacado-fijo .ficha{width:198px}
  .destacado-fijo .ficha-foto{height:140px}
}

/* ---------- nota inicial por trayectoria (computador y celular) ----------
   Siempre va marcada como "inicial" para que no se confunda con las
   valoraciones reales de clientes. */
.ficha-nota-inicial b{color:#44546A}
.ficha-nota-inicial span{font-size:11px;color:#6A7686;font-style:italic}
.pf-nota-ini .pf-nota-der em{letter-spacing:.04em;font-size:10.5px;color:#C9D4E2}
.pf-marca-inicial{font-size:11.5px;font-style:italic;color:#6A7686;margin-left:6px}
.pf-estrellas-inicial{opacity:.9}

/* pantallas medianas (760 a 1279 px): la fila de datos pasa a ocupar todo
   el ancho bajo la nota, así no queda espachurrada en una columna angosta */
@media (min-width:760px) and (max-width:1279px){
  .pf-banner-abajo{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .pf-nota{grid-column:1;grid-row:1}
  .pf-sellos{grid-column:1;grid-row:2;grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-contacto{grid-column:2;grid-row:1 / span 2}
}
/* pantallas anchas: los tres datos caben en una sola fila */
@media (min-width:1280px){
  .pf-sellos{grid-template-columns:repeat(3,minmax(0,1fr))}
}


/* ==================================================================
   ENTREGA 86 — "Condiciones de trabajo" y "Donde instala"
   - Sin emoji: solo rotulo, dato y detalle.
   - Recuadros mas bajos: menos relleno y fondo blanco con filo.
   - Las especialidades principales viven dentro de este mismo bloque.
   - Cobertura: comunas del instalador + referencia del Gran Santiago.
   ================================================================== */

.pf-cnd{border:1px solid var(--pf-borde);border-radius:4px;overflow:hidden;background:#fff;
  box-shadow:0 3px 14px rgba(18,41,74,.10);margin-bottom:18px;border-top:3px solid #F26A1B}
.pf-cnd-cab{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 18px;background:#12294A}
.pf-cnd-cab h2{display:flex;align-items:center;gap:9px;margin:0;
  font-size:17px;font-weight:800;letter-spacing:-.02em;color:#fff}
.pf-cnd-cab h2 svg{width:20px;height:20px;color:#F2A93B}
.pf-cnd-cab em{font-style:normal;font-size:12px;color:#A9BCD2;text-align:right}
.pf-cnd-cuerpo{padding:14px}

/* --- llamado a las especialidades (entrega 87) --- */
.pf-cnd-esp-btn{display:flex;align-items:center;gap:11px;width:100%;margin:0 0 14px;
  padding:11px 13px;border:1px solid var(--pf-borde);border-radius:4px;background:#F8FAFC;
  text-align:left;cursor:pointer;color:inherit}
.pf-cnd-esp-btn:hover{background:#EFF4FA;border-color:#C9D8EA}
.pf-cnd-esp-btn > svg{width:22px;height:22px;flex:none;color:#12294A}
.pf-cnd-esp-btn span{flex:1 1 auto;min-width:0}
.pf-cnd-esp-btn b{display:block;font-size:14px;font-weight:700;color:#16263D}
.pf-cnd-esp-btn em{display:block;font-style:normal;margin-top:2px;font-size:12.5px;color:#5C6B7E}
.pf-cnd-esp-flecha{flex:none;font-style:normal;font-size:22px;line-height:1;color:#8A95A1}

/* --- recuadros de condiciones --- */
.pf-cnd-grid{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr}
.pf-cnd-item{min-width:0;padding:9px 11px;border-radius:4px;
  border:1px solid var(--pf-borde);border-left:3px solid #C9D3DF;background:#fff}
.pf-cnd-item em{display:block;font-style:normal;
  font-family:'Barlow Condensed','Archivo',system-ui,sans-serif;
  font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6A7686}
.pf-cnd-item b{display:block;margin-top:1px;font-size:13.5px;font-weight:700;line-height:1.25;color:#16263D}
.pf-cnd-item > span{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:#5C6B7E}
.pf-cnd-item.t-naranja{border-left-color:#E8853F} .pf-cnd-item.t-naranja em{color:#C4551A}
.pf-cnd-item.t-verde{border-left-color:#39A96B}   .pf-cnd-item.t-verde em{color:#177A43}
.pf-cnd-item.t-azul{border-left-color:#4E86D8}    .pf-cnd-item.t-azul em{color:#1D5FC0}
.pf-cnd-item.t-morado{border-left-color:#8A63CE}  .pf-cnd-item.t-morado em{color:#6B34C4}
.pf-cnd-item.t-cian{border-left-color:#3FA7A2}    .pf-cnd-item.t-cian em{color:#10697F}
.pf-cnd-item.t-rosa{border-left-color:#CE6690}    .pf-cnd-item.t-rosa em{color:#B12A5B}

@media (min-width:480px){
  .pf-cnd-grid{grid-template-columns:1fr 1fr}
  .pf-cnd-esps{grid-template-columns:1fr 1fr}
}
@media (min-width:1000px){
  .pf-cnd-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pf-cnd-esps{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pf-cnd-cab{padding:13px 20px}
  .pf-cnd-cuerpo{padding:16px}
}
@media (max-width:479px){
  .pf-cnd-cab{flex-direction:column;align-items:flex-start;gap:3px}
  .pf-cnd-cab em{text-align:left}
}

/* --- nota por trayectoria: mismo ancho, bastante menos alto (entrega 87) --- */
@media (min-width:1000px){
  .pf-desempeno .pf-desem-top{grid-template-columns:190px 1fr 260px;gap:20px;padding:18px}
  .pf-desem-medio{padding-right:20px}
  .pf-aro-svg{width:150px;height:150px}
  .pf-aro-centro > b{font-size:38px}
  .pf-aro-centro > em{font-size:12px}
  .pf-aro-nivel{margin-top:6px;font-size:12px}
  .pf-aro-pie{margin:-8px 0 0;font-size:12px}
  .pf-desem-medio h3{font-size:23px}
  .pf-desem-medio > p{margin-top:7px;font-size:13.5px;line-height:1.4}
  .pf-desem-estrellas{gap:10px;margin-top:10px}
  .pf-desem-estrellas .estrella{width:22px;height:22px}
  .pf-desem-estrellas b{font-size:20px}
  .pf-desem-cita{margin-top:10px;padding:9px 11px}
  .pf-desem-cita svg{width:22px;height:22px}
  .pf-desem-cita span{font-size:13px;line-height:1.35}
  .pf-desem-lado{gap:8px}
  .pf-desem-caja{padding:10px 12px;gap:10px}
  .pf-desem-caja > svg{width:26px;height:26px}
  .pf-desem-caja b{font-size:22px}
  .pf-desem-caja .pf-caja-t{font-size:14px}
  .pf-desem-caja span{font-size:13px}
  .pf-desem-caja em{font-size:12.5px;line-height:1.3}
  .pf-btn-evaluar{padding:10px 14px;font-size:13.5px}
}


/* ==================================================================
   ENTREGA 88 — perfil con mas vida
   ================================================================== */

/* ---------- 1. tarjetas con mas profundidad (todo el perfil) ----------
   Antes todas eran blancas y planas, con el mismo gris arriba. Ahora cada
   tarjeta tiene una sombra suave y el icono del titulo va en un cuadro
   naranja claro, que le da un punto de color a cada bloque. */
.pf .pf-tarjeta{box-shadow:0 1px 2px rgba(18,41,74,.05),0 6px 18px rgba(18,41,74,.06);
  transition:box-shadow .2s ease, transform .2s ease}
.pf .pf-tarjeta:hover{box-shadow:0 2px 4px rgba(18,41,74,.06),0 12px 28px rgba(18,41,74,.10)}
.pf .pf-tarjeta-cab{background:linear-gradient(180deg,#FBFCFE 0%,#F4F7FB 100%)}
.pf .pf-tarjeta-cab h2 svg{box-sizing:content-box;width:17px;height:17px;padding:6px;border-radius:4px;
  background:#FFF1E6;color:#E0600F}
.pf .pf-tarjeta-cab h2{font-size:16.5px;letter-spacing:-.01em}

/* ---------- 2. franja bajo el banner: 15% menos alta ---------- */
@media (min-width:1000px){
  .pf-banner-abajo{padding:5px 26px 6px}
  .pf-nota{padding:4px 12px}
  .pf-nota-badge b{font-size:22px}
  .pf-contacto{gap:6px;padding-top:2px;padding-bottom:2px}
  .pf-contacto a,.pf-contacto button{padding-top:7px;padding-bottom:7px;min-height:0}
  .pf-sellos{padding-top:2px;padding-bottom:2px}
}

/* ---------- 3. panel de nota: igual con y sin evaluaciones ---------- */
.pf-desem-etiqueta{display:inline-flex;align-items:center;gap:6px;margin:0 0 7px;padding:4px 10px;
  border-radius:3px;font-size:12px;font-weight:800;letter-spacing:.02em}
.pf-desem-etiqueta svg{width:15px;height:15px}
.pf-et-destacado{background:#FFF1E6;color:#C4551A}
.pf-et-evaluado{background:#EAF7EF;color:#177A43}
.pf-et-inicial{background:#EDF3FD;color:#1D5FC0}
.pf-et-nuevo{background:#F1F3F6;color:#5C6B7E}
.pf-destacado{display:none}
.pf-desem-estrellas{flex-wrap:nowrap}
.pf-desem-estrellas b{white-space:nowrap}
.pf-desem-estrellas b i{font-style:normal;font-weight:700;color:#8A95A1;font-size:.72em}
.pf-desem-estrellas .pf-marca-inicial{white-space:nowrap}
.pf-desem-caja.pf-caja-gris{background:#F4F6F9}
.pf-desem-caja.pf-caja-gris > svg{color:#8A95A1}
@media (min-width:1000px){ .pf-desem-medio h3{white-space:nowrap} }

/* ---------- 4. Donde instala: mapa, colores y orden ---------- */
.pf-tarjeta-zona .pf-tarjeta-cuerpo{padding:0 0 14px}
.pf-mapa{position:relative;height:190px;background:#E8EEF5;border-bottom:1px solid var(--pf-borde)}
.pf-mapa-frame{display:block;width:100%;height:100%;border:0}
.pf-mapa-pie{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:12px 14px 0;padding:9px 9px 9px 12px;border-radius:4px;text-decoration:none;color:inherit;
  background:#12294A;box-shadow:0 4px 14px rgba(18,41,74,.16)}
.pf-mapa-lugar{display:flex;align-items:center;gap:9px;min-width:0}
.pf-mapa-lugar > svg{width:20px;height:20px;flex:none;color:#F2A93B}
.pf-mapa-lugar b{display:block;font-size:14.5px;font-weight:800;color:#fff;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-mapa-lugar em{display:block;font-style:normal;font-size:11.5px;color:#A9BCD2}
.pf-mapa-btn{flex:none;padding:8px 14px;border-radius:4px;background:#F26A1B;color:#fff;
  font-size:13px;font-weight:800;transition:background .15s ease}
.pf-mapa-pie:hover .pf-mapa-btn{background:#D9570A}

.pf-zona-grupo{margin:14px 14px 0}
.pf-zona-grupo h4{margin:0 0 8px;font-family:'Barlow Condensed','Archivo',system-ui,sans-serif;
  font-size:14px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6A7686}
.pf-zona-grupo ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px}
.pf-zona-propias li{display:inline-flex;align-items:center;gap:5px;padding:6px 11px 6px 8px;border-radius:3px;
  background:#FFF1E6;border:1px solid #F7D2B5;color:#8A3A0B;font-size:13px;font-weight:700}
.pf-zona-propias li svg{width:14px;height:14px;color:#F26A1B}

.pf-zona-ref{padding:11px 12px 12px;border-radius:4px;background:#EEF4FD;border:1px solid #D2E0F4}
.pf-zona-ref h4{color:#1D5FC0}
.pf-zona-ref li{padding:5px 10px;border-radius:3px;background:#fff;border:1px solid #D2E0F4;
  color:#16263D;font-size:12.5px;font-weight:600}
.pf-zona-ref .pf-zona-mas{background:transparent;border-style:dashed;color:#5C6B7E;font-weight:500}

.pf-zona-viaje{display:flex;align-items:center;gap:12px;margin:12px 14px 0;padding:11px 12px;
  border-radius:4px;background:linear-gradient(90deg,#E3F5F4 0%,#F2FAFA 100%);border:1px solid #BFE3E1}
.pf-zona-viaje-ico{flex:none;width:38px;height:38px;border-radius:4px;display:grid;place-items:center;
  background:#3FA7A2;color:#fff}
.pf-zona-viaje-ico svg{width:22px;height:22px}
.pf-zona-viaje b{display:block;font-family:'Barlow Condensed','Archivo',system-ui,sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0E6B67}
.pf-zona-viaje em{display:block;font-style:normal;margin-top:2px;font-size:12.5px;line-height:1.35;color:#2F4553}

/* ---------- 6. aro de nota: igual con y sin opiniones (entrega 89) ---------- */
.pf-aro-corona{display:none}
.pf-aro2-anillo{position:relative;display:grid;place-items:center;line-height:0}
.pf-aro2-num{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);text-align:center;line-height:1}
.pf-aro2-num b{display:block;font-size:52px;font-weight:800;color:var(--pf-azul2);letter-spacing:-.03em}
.pf-aro2-num em{display:block;margin-top:3px;font-style:normal;font-size:13px;color:var(--gris)}
.pf-aro2-nivel{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1;margin-top:-4px;
  padding:4px 11px;border-radius:3px;background:#fff;border:1px solid #D5DEE9;
  box-shadow:0 2px 6px rgba(18,41,74,.08);
  color:#12294A;font-size:11.5px;font-weight:800;letter-spacing:.08em}
.pf-aro2-nivel::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--nv,#1DAA5C)}
.pf-aro .pf-aro-pie{margin:8px 0 0}
@media (min-width:1000px){
  .pf-aro2-num b{font-size:38px}
  .pf-aro2-num em{font-size:12px}
}
@media (max-width:759px){
  .pf-aro2-num b{font-size:24px}
  .pf-aro2-num em{font-size:10px;margin-top:1px}
  .pf-aro2-nivel{margin-top:2px;padding:2px 7px;font-size:8.5px;gap:4px}
  .pf-aro2-nivel::before{width:6px;height:6px}
}

/* ---------- 7. ruta arriba del perfil (reemplaza al "Volver al inicio") ---------- */
.pf-migas{max-width:var(--ancho-max);width:calc(100% - 40px);margin:0 auto;padding:12px 0 10px;display:flex;align-items:center;
  flex-wrap:wrap;gap:7px;font-size:13px;color:#5C6B7E}
.pf-migas a{display:inline-flex;align-items:center;gap:5px;color:#12294A;font-weight:600;text-decoration:none}
.pf-migas a:hover{color:#E0600F;text-decoration:underline}
.pf-migas a svg{width:15px;height:15px}
.pf-migas i{font-style:normal;color:#A3AEBB}
.pf-migas span{color:#5C6B7E;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60vw}
@media (max-width:759px){ .pf-migas{width:calc(100% - 24px);padding:9px 0 8px;font-size:12px} }

/* ---------- 8. logo de arriba: late como boton de inicio ---------- */
.marca{cursor:pointer;-webkit-tap-highlight-color:transparent}
.marca-nombre{display:inline-block;transform-origin:left center;transition:transform .15s ease}
@media (hover:hover){
  .marca:hover .marca-nombre{animation:marcaLatido 1.2s ease-in-out infinite}
}
.marca:active .marca-nombre{transform:scale(.94)}
.marca.latiendo .marca-nombre{animation:marcaLatidoFuerte .7s ease-out}
@keyframes marcaLatido{0%,60%,100%{transform:scale(1)}15%{transform:scale(1.06)}30%{transform:scale(1)}45%{transform:scale(1.04)}}
@keyframes marcaLatidoFuerte{0%{transform:scale(.94)}35%{transform:scale(1.1)}60%{transform:scale(.98)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .marca:hover .marca-nombre,.marca.latiendo .marca-nombre{animation:none}
}


/* ==================================================================
   ENTREGA 90
   ================================================================== */

/* ---------- 1. estado del instalador: habla de instalar, con color amable ----------
   "Instala hoy desde las 08:00" (turquesa) y "Escríbele para coordinar"
   (azul) reemplazan al cafe/gris, que se leia como "no se puede contactar". */
.pf-disponible-hoy.pf-luego{background:#2E9A95}
.pf-disponible-hoy.pf-coordina{background:#2B6CB0}
.pf-disponible-hoy.pf-no-hoy{background:#7A8898}
.pf-avatar-caja.est-luego::after{background:#3FA7A2!important}
.pf-avatar-caja.est-coordina::after{background:#4A8AD4!important}
.est-luego{color:#137A75}
.est-coordina{color:#2B6CB0}

/* ---------- 2. categorias en rejilla ---------- */
.cat-rejilla{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.cat-rejilla .cat-tarjeta{width:auto;min-width:0;display:flex;flex-direction:column;border-radius:4px;
  background:#fff;border:1px solid #E3E8EF;box-shadow:0 2px 10px rgba(18,41,74,.06);overflow:hidden;
  text-decoration:none;transition:transform .2s ease, box-shadow .2s ease}
.cat-rejilla .cat-tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(18,41,74,.13)}
.cat-rejilla .cat-foto{display:block;height:92px;background-size:cover;background-position:center}
.cat-rejilla .cat-pie{display:flex;align-items:flex-start;gap:9px;padding:10px 11px 12px}
.cat-rejilla .cat-icono{width:30px;height:30px;flex:none}
.cat-rejilla .cat-icono svg{width:16px;height:16px}
.cat-rejilla .cat-nombres{min-width:0}
.cat-rejilla .cat-nombres b{display:block;font-size:13.5px;line-height:1.25;color:#12294A}
.cat-rejilla .cat-nombres span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:2px;font-size:12px;line-height:1.3;color:#5F6B78}
.cat-rejilla .cat-todas{align-items:center;justify-content:center;gap:10px;flex-direction:row;padding:16px;
  background:linear-gradient(135deg,#FFF4EC 0%,#FFE6D3 100%);border-color:#F7CFB0;text-align:left}
.cat-todas-txt b{display:block;font-size:14.5px;font-weight:800;color:#12294A;line-height:1.25}
.cat-todas-txt span{display:block;margin-top:3px;font-size:12.5px;color:#8A3A0B}
.cat-todas i{font-style:normal;font-size:22px;font-weight:800;color:#F26A1B}
@media (min-width:640px){ .cat-rejilla{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (min-width:1000px){
  .cat-rejilla{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .cat-rejilla .cat-foto{height:118px}
  .cat-rejilla .cat-nombres b{font-size:14.5px}
  .cat-rejilla .cat-icono{width:34px;height:34px}
}

/* ---------- 3. tarjeta destacada: seria y reconocible ---------- */
.ficha.ficha-destacada{box-shadow:0 0 0 1px #F4C4A0, 0 8px 22px rgba(242,106,27,.14)}
.ficha.ficha-destacada::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;z-index:4;background:#F26A1B}
.ficha-cinta{top:10px!important;left:10px!important;display:inline-flex!important;align-items:center;gap:5px;
  background:#fff!important;color:#12294A!important;border-radius:3px!important;padding:5px 9px 5px 7px!important;
  font-size:11px!important;font-weight:800!important;letter-spacing:.04em!important;
  box-shadow:0 3px 10px rgba(18,41,74,.22)}
.ficha-cinta svg{width:13px;height:13px;color:#F26A1B;fill:#F26A1B}

/* ---------- 4. menos negro, mas claridad ---------- */
/* menu de arriba */
.cabecera .cabecera-baja{background:#1D4F91!important}
/* pie de pagina */
.pie-pro{background:#1D4F91!important}
/* banner del perfil (color azul, el que viene por defecto) */
.pf-banner.pf-color-azul{--pf-banner-1:linear-gradient(100deg,#1A4580 0%,#1F5299 55%,#2A64B0 100%)}
/* franja bajo el banner */
.pf{--pf-panel:#173E73}
/* cabeceras que eran casi negras */
.pf-cnd-cab{background:#1D4F91}
.pf-mapa-pie{background:#1D4F91}
/* recuadro de la nota en la franja bajo el banner: azul, no casi negro */
.pf-banner-abajo .pf-nota{background:linear-gradient(100deg,#1A4580 0%,#1F5299 100%)!important}
/* en celular las categorias van mas compactas para verlas casi todas de una vez */
@media (max-width:639px){
  .cat-rejilla{gap:10px}
  .cat-rejilla .cat-foto{height:74px}
  .cat-rejilla .cat-pie{padding:8px 9px 10px;gap:7px}
  .cat-rejilla .cat-icono{width:26px;height:26px}
  .cat-rejilla .cat-icono svg{width:14px;height:14px}
  .cat-rejilla .cat-nombres b{font-size:12.5px}
  .cat-rejilla .cat-nombres span{display:none}
  .cat-rejilla .cat-todas{padding:12px}
  .cat-todas-txt b{font-size:13px}
  .cat-todas-txt span{display:none}
}


/* ==================================================================
   ENTREGA 91
   ================================================================== */

/* ---------- 1. naranjo de los botones ----------
   El naranjo anterior (#F26A1B) se veia chillon junto al azul nuevo. Los
   botones pasan a un naranjo un poco mas profundo, que combina mejor y se
   lee mejor con letra blanca. El logo y los detalles siguen igual. */
.boton:not(.boton-borde):not(.boton-oscuro):not(.boton-wsp),
.menu-roles .rol-instalador,
.barra-publica-btn,
.buscador-alto button{box-shadow:0 2px 0 rgba(150,50,0,.18),0 4px 12px rgba(234,88,12,.22)!important}

/* ---------- 2. franja "¿Eres instalador?": azul y delgada ---------- */
.barra-publica{background:#1D4F91!important;border:0!important;
  box-shadow:0 6px 18px rgba(29,79,145,.22)!important}
@media (min-width:760px){
  .barra-publica{padding:11px 0!important;margin-top:14px!important}
  .barra-publica-int{padding:0 22px!important;gap:16px!important}
}
.barra-publica .barra-publica-ico{width:38px!important;height:38px!important;box-shadow:none!important}
.barra-publica .barra-publica-ico svg{width:20px!important;height:20px!important}
.barra-publica .barra-publica-txt b{font-size:16px!important;color:#fff!important}
.barra-publica .barra-publica-txt b i{color:#FFB36B!important}
.barra-publica .barra-publica-txt em{font-size:13px!important;margin-top:1px!important;color:#D4E2F4!important}
.barra-publica .barra-publica-sellos span{font-size:12.5px!important;color:#fff!important}
.barra-publica .barra-publica-sellos svg{width:15px!important;height:15px!important;color:#fff!important;
  background:rgba(255,255,255,.16)!important;box-shadow:none!important}
.barra-publica .barra-publica-btn{padding:9px 16px!important;font-size:14px!important;min-height:0!important}

/* ==================================================================
   ENTREGA 92
   ================================================================== */

/* ---------- 1. etiqueta bajo la foto del perfil ----------
   Antes era un bloque verde macizo con reloj, que pesaba y chocaba con el
   circulo de la foto. Ahora es una etiqueta blanca, compacta, con un punto
   de color que indica el estado (verde: trabaja hoy; gris: hoy no). */
.pf-disponible-hoy,
.pf-disponible-hoy.pf-luego,.pf-disponible-hoy.pf-coordina,
.pf-disponible-hoy.pf-no-hoy,.pf-disponible-hoy.pf-247{
  background:#fff!important;color:#12294A!important;border:1px solid rgba(18,41,74,.10);
  border-radius:4px;padding:5px 12px 5px 10px;gap:7px;
  font-size:12.5px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 4px 14px rgba(8,24,48,.28)}
.pf-disponible-hoy svg{display:none!important}
.pf-disponible-hoy::before{content:'';flex:none;width:8px;height:8px;border-radius:50%;
  background:#16A34A;box-shadow:0 0 0 3px rgba(22,163,74,.20);animation:pfPulso 2.4s ease-in-out infinite}
.pf-disponible-hoy.pf-no-hoy{color:#5C6B7E!important}
.pf-disponible-hoy.pf-no-hoy::before{background:#A3AEBB;box-shadow:0 0 0 3px rgba(163,174,187,.22);animation:none}
@keyframes pfPulso{0%,100%{box-shadow:0 0 0 3px rgba(22,163,74,.20)}50%{box-shadow:0 0 0 5px rgba(22,163,74,.08)}}
@media (prefers-reduced-motion:reduce){ .pf-disponible-hoy::before{animation:none} }

/* ---------- 2. destacado dentro del carrusel ----------
   Borde naranjo completo y filo arriba, para que se reconozca al pasar. */
.ficha.ficha-destacada{box-shadow:0 0 0 2px #EA580C, 0 10px 24px rgba(234,88,12,.18)!important}
.ficha.ficha-destacada::before{height:4px!important;background:#EA580C!important}
.pista .ficha.ficha-destacada{margin-top:2px;margin-bottom:2px}

/* ---------- 3. los otros dos colores de banner, tambien mas claros ---------- */
.pf-banner.pf-color-petroleo{--pf-banner-1:linear-gradient(100deg,#0F4F4B 0%,#146660 55%,#1C8076 100%)}
.pf-banner.pf-color-ciruela{--pf-banner-1:linear-gradient(100deg,#4E2156 0%,#6B2B73 55%,#8A3B92 100%)}


/* ==================================================================
   ENTREGA 93
   ================================================================== */

/* ---------- 1. aro de la nota: se llena al aparecer ---------- */
.pf-aro:not(.pf-aro-vivo) .pf-aro-arco{stroke-dasharray:0 999!important}
.pf-aro-vivo .pf-aro-arco{animation:pfAroLlena 1.3s cubic-bezier(.22,.61,.36,1) both}
.pf-aro-vivo .pf-aro-svg{animation:pfAroPop .5s ease-out 1.25s 1}
.pf-aro:not(.pf-aro-vivo) .pf-aro2-nivel{opacity:0;transform:translateY(5px)}
.pf-aro .pf-aro2-nivel{transition:opacity .4s ease 1.05s, transform .4s ease 1.05s}
@keyframes pfAroLlena{from{stroke-dasharray:0 999}}
@keyframes pfAroPop{0%{transform:scale(1)}45%{transform:scale(1.035)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  .pf-aro-vivo .pf-aro-arco,.pf-aro-vivo .pf-aro-svg{animation:none}
  .pf-aro .pf-aro2-nivel{transition:none}
}

/* ---------- 2. botones: azul en vez de naranjo ----------
   Los botones de accion pasan al azul de la marca, un poco mas vivo que el
   del menu para que se noten. Sobre fondos azules (menu, franja, mapa) el
   boton va blanco con letra azul. El naranjo queda solo para detalles
   (el ".cl" del logo, subrayados, iconos). */
:root{--btn:#1F5AA6;--btn-osc:#184A8A}
.boton:not(.boton-borde):not(.boton-oscuro):not(.boton-wsp):not(.boton-blanco),
.buscador-alto button,
.buscador button,
.lamina .boton,
.franja-foto-boton{background:var(--btn)!important;color:#fff!important;
  box-shadow:0 2px 0 rgba(10,30,70,.18),0 4px 12px rgba(31,90,166,.22)!important}
.boton:not(.boton-borde):not(.boton-oscuro):not(.boton-wsp):not(.boton-blanco):hover,
.buscador-alto button:hover,
.buscador button:hover,
.lamina .boton:hover{background:var(--btn-osc)!important}
.boton:disabled,.boton[aria-disabled="true"]{background:#C9D0D8!important;box-shadow:none!important}
/* sobre fondo azul: blanco con letra azul */
.menu-roles .rol-instalador{background:#fff!important;color:#1D4F91!important;box-shadow:none!important}
.menu-roles .rol-instalador:hover{background:#EAF1FB!important;color:#163F75!important}
.barra-publica .barra-publica-btn{background:#fff!important;color:#1D4F91!important;box-shadow:none!important}
.barra-publica:hover .barra-publica-btn{background:#EAF1FB!important}
.pf-mapa-btn{background:#fff!important;color:#1D4F91!important}
.pf-mapa-pie:hover .pf-mapa-btn{background:#EAF1FB!important}
/* "Ver mas trabajos" va sobre una foto: blanco para que no se pierda */
.franja-foto-boton{background:#fff!important;color:#1D4F91!important}

/* ---------- 3. tarjeta destacada dentro del carrusel ---------- */
.dest-sello{display:inline-flex;align-items:center;gap:3px;align-self:flex-start;margin:0 0 4px}
.dest-sello .laurel{width:12px;height:21px;fill:#D29B16;color:#D29B16;flex:none}
.dest-sello .laurel-der{transform:scaleX(-1)}
.dest-sello-txt{display:flex;flex-direction:column;align-items:center;line-height:1;padding:0 1px}
.dest-sello-txt b{font-size:12px;font-weight:800;color:#12294A;letter-spacing:.03em}
.dest-sello-txt em{font-style:normal;font-size:9px;color:#6A7686;margin-top:2px;letter-spacing:.05em}

.ficha.ficha-destacada{border:0!important;
  box-shadow:0 0 0 2px #1F5AA6, 0 12px 26px rgba(31,90,166,.20)!important}
.ficha.ficha-destacada::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;z-index:4;
  background:linear-gradient(90deg,#1F5AA6 0%,#3FA7A2 100%)!important}
.ficha.ficha-destacada .ficha-datos{background:linear-gradient(180deg,#EEF4FC 0%,#F7FAFE 100%)}
.ficha.ficha-destacada .ficha-datos .dest-sello{display:flex;width:max-content}
.pista .ficha.ficha-destacada{margin-top:2px;margin-bottom:2px}
.ficha-cinta{display:none!important}
/* el sello del destacado un poco mas grande que en la tarjeta comun */
.ficha.ficha-destacada .dest-sello .laurel{width:14px;height:24px}
.ficha.ficha-destacada .dest-sello-txt b{font-size:13px}
.ficha.ficha-destacada .dest-sello-txt em{font-size:9.5px}


/* ==================================================================
   ENTREGA 95
   ================================================================== */

/* ---------- 1. nota de la franja bajo el banner ---------- */
.pf-banner-abajo .pf-nota.pf-nota2{display:flex;flex-direction:row;align-items:center;gap:16px;
  padding:8px 30px 8px 24px;
  background:radial-gradient(120% 140% at 0% 0%,#2A66B3 0%,#1F5299 45%,#1A4580 100%)!important}
.pf-nota2-num{display:flex;flex-direction:column;align-items:center;line-height:1;
  padding-right:16px;border-right:1px solid rgba(255,255,255,.20)}
.pf-nota2-num b{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.pf-nota2-num i{font-style:normal;font-size:11px;font-weight:600;color:#B9D0EE;margin-top:4px;letter-spacing:.05em}
.pf-nota2-der{display:flex;flex-direction:column;align-items:flex-start;gap:6px;min-width:0}
.pf-nota2-est{position:relative;display:block;width:var(--ancho);height:20px;flex:none}
.pf-nota2-base,.pf-nota2-oro{position:absolute;left:0;top:0;height:20px;display:flex;gap:4px;white-space:nowrap}
.pf-nota2-base svg,.pf-nota2-oro svg{flex:none;display:block}
.pf-nota2-base svg{fill:rgba(255,255,255,.20)}
.pf-nota2-oro{overflow:hidden;width:var(--oro);transition:width 1.1s cubic-bezier(.22,.61,.36,1) .1s}
.pf-nota2:not(.pf-nota2-viva) .pf-nota2-oro{width:0}
.pf-nota2-oro svg{fill:#FFC53D;filter:drop-shadow(0 1px 3px rgba(255,190,50,.45));
  animation:pfEstBrilla 8s ease-in-out infinite}
.pf-nota2-oro svg:nth-child(1){animation-delay:1.6s}
.pf-nota2-oro svg:nth-child(2){animation-delay:1.72s}
.pf-nota2-oro svg:nth-child(3){animation-delay:1.84s}
.pf-nota2-oro svg:nth-child(4){animation-delay:1.96s}
.pf-nota2-oro svg:nth-child(5){animation-delay:2.08s}
@keyframes pfEstBrilla{
  0%,84%,100%{filter:drop-shadow(0 1px 3px rgba(255,190,50,.45)) brightness(1);transform:none}
  90%{filter:drop-shadow(0 0 7px rgba(255,214,102,.95)) brightness(1.22);transform:scale(1.08)}}
.pf-nota2-der em{display:flex;align-items:center;gap:7px;margin:0;font-style:normal;font-size:12px;
  color:#D3E1F3;letter-spacing:.01em;white-space:nowrap}
.pf-nota2-marca{padding:2px 6px;border-radius:3px;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.28);color:#fff;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.pf-nota2-nuevo-ico{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.12);color:#FFC53D}
.pf-nota2-nuevo-ico svg{width:22px;height:22px}
.pf-nota2-tit{display:block;font-size:15px;font-weight:800;color:#fff;line-height:1.2}
@media (prefers-reduced-motion:reduce){
  .pf-nota2-oro{transition:none}
  .pf-nota2-oro svg{animation:none}
}
/* celular: la nota va en el recuadro chico junto a "Dias de trabajo" */
@media (max-width:759px){
  html body .pf-nota.pf-nota2{flex-direction:row!important;align-items:center!important;gap:10px!important;
    padding:10px 11px!important}
  html body .pf-nota2-num{padding-right:10px}
  html body .pf-nota2-num b{font-size:24px}
  html body .pf-nota2-num i{font-size:9.5px;margin-top:2px}
  html body .pf-nota2-est{zoom:.7}
  html body .pf-nota2-der{gap:4px}
  html body .pf-nota2-der em{font-size:10px;white-space:normal;flex-wrap:wrap;gap:4px}
  html body .pf-nota2-marca{font-size:8.5px;padding:1px 5px}
}

/* ---------- 2. condiciones de trabajo: con color ---------- */
.pf-cnd{border-top:0!important}
.pf-cnd-cab{background:linear-gradient(100deg,#1A4580 0%,#1F5AA6 60%,#2A6FC4 100%)!important;
  border-bottom:3px solid #F26A1B}
.pf-cnd-cab h2 svg{box-sizing:content-box;padding:5px;border-radius:4px;background:rgba(255,255,255,.14);color:#FFC53D!important}
.pf-cnd-esp-btn{background:linear-gradient(90deg,#EEF4FC 0%,#F7FAFE 100%)!important;border-color:#D4E2F4!important}
.pf-cnd-esp-btn > svg{box-sizing:content-box;padding:6px;border-radius:4px;background:#1F5AA6;color:#fff!important}
.pf-cnd-esp-btn:hover{background:#E6EFFB!important}

.pf-cnd-item.pf-cnd2{display:flex;align-items:flex-start;gap:11px;padding:10px 12px;border-radius:4px;
  border:1px solid var(--c-borde,#E3E8EF);border-left:1px solid var(--c-borde,#E3E8EF)!important;
  background:linear-gradient(135deg,var(--c-tinte,#F5F7FA) 0%,#FFFFFF 78%);
  transition:transform .2s ease, box-shadow .2s ease}
.pf-cnd-item.pf-cnd2:hover{transform:translateY(-2px);box-shadow:0 8px 18px var(--c-sombra,rgba(18,41,74,.10))}
.pf-cnd2-ico{flex:none;width:30px;height:30px;border-radius:4px;display:grid;place-items:center;
  background:var(--c-fuerte,#1F5AA6);color:#fff;box-shadow:0 3px 8px var(--c-sombra,rgba(18,41,74,.15))}
.pf-cnd2-ico svg{width:17px;height:17px}
.pf-cnd2-txt{display:block;min-width:0}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt em{display:block;font-style:normal;
  font-family:'Barlow Condensed','Archivo',system-ui,sans-serif;font-size:12.5px;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--c-texto,#5C6B7E)}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt b{display:block;margin-top:1px;font-size:13.5px;font-weight:800;line-height:1.25;color:#16263D}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt small{display:block;margin-top:2px;font-size:12px;line-height:1.3;color:#5C6B7E}
.pf-cnd2.t-naranja{--c-fuerte:#EA580C;--c-tinte:#FFF1E6;--c-borde:#F8D4B8;--c-texto:#C2410C;--c-sombra:rgba(234,88,12,.18)}
.pf-cnd2.t-verde  {--c-fuerte:#16A34A;--c-tinte:#EAF8EF;--c-borde:#C6E9D3;--c-texto:#15803D;--c-sombra:rgba(22,163,74,.16)}
.pf-cnd2.t-azul   {--c-fuerte:#1F5AA6;--c-tinte:#EAF1FB;--c-borde:#CCDDF2;--c-texto:#1D4F91;--c-sombra:rgba(31,90,166,.16)}
.pf-cnd2.t-morado {--c-fuerte:#7C3AED;--c-tinte:#F3EEFE;--c-borde:#DCCFFA;--c-texto:#6D28D9;--c-sombra:rgba(124,58,237,.16)}
.pf-cnd2.t-cian   {--c-fuerte:#0E9488;--c-tinte:#E7F7F5;--c-borde:#BFE7E2;--c-texto:#0F766E;--c-sombra:rgba(14,148,136,.16)}
.pf-cnd2.t-rosa   {--c-fuerte:#DB2777;--c-tinte:#FDEEF5;--c-borde:#F6CFE0;--c-texto:#BE185D;--c-sombra:rgba(219,39,119,.15)}
/* aparecen de a uno la primera vez que se ven */
.pf-cnd:not(.pf-cnd-vivo) .pf-cnd2{opacity:0;transform:translateY(8px)}
.pf-cnd-vivo .pf-cnd2{transition:opacity .45s ease, transform .45s ease, box-shadow .2s ease}
.pf-cnd-vivo .pf-cnd2:nth-child(2){transition-delay:.06s}
.pf-cnd-vivo .pf-cnd2:nth-child(3){transition-delay:.12s}
.pf-cnd-vivo .pf-cnd2:nth-child(4){transition-delay:.18s}
.pf-cnd-vivo .pf-cnd2:nth-child(5){transition-delay:.24s}
.pf-cnd-vivo .pf-cnd2:nth-child(6){transition-delay:.30s}
.pf-cnd-vivo .pf-cnd2:hover{transition-delay:0s}
@media (prefers-reduced-motion:reduce){
  .pf-cnd:not(.pf-cnd-vivo) .pf-cnd2{opacity:1;transform:none}
}
/* el icono va centrado y en blanco dentro de su cuadro de color */
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico{display:grid;place-items:center;margin:0;color:#fff;font-size:0;line-height:0}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico svg{width:16px;height:16px;color:#fff;stroke:#fff}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico svg path,
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico svg circle{stroke:#fff}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-txt{display:block;margin:0;color:inherit;font-size:inherit}
/* mismo alto que antes: un poco menos de relleno y el icono algo mas chico */
.pf-cnd-item.pf-cnd2{padding:9px 11px;gap:10px}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico{width:28px;height:28px}
/* el icono va en la misma linea del rotulo: asi el texto usa todo el ancho
   y el recuadro no crece de alto respecto de antes */
.pf-cnd-item.pf-cnd2{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:8px;row-gap:0;align-items:center}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-txt{display:contents}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico{grid-column:1;grid-row:1;width:22px;height:22px;box-shadow:0 2px 6px var(--c-sombra)}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico svg{width:13px;height:13px}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt em{grid-column:2;grid-row:1}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt b{grid-column:1 / -1;grid-row:2;margin-top:4px}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt small{grid-column:1 / -1;grid-row:3}
.pf-cnd-item.pf-cnd2{grid-template-columns:18px minmax(0,1fr);column-gap:7px}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico{width:18px;height:18px;border-radius:3px}
.pf-cnd-item.pf-cnd2 > .pf-cnd2-ico svg{width:12px;height:12px}
.pf-cnd-item.pf-cnd2 .pf-cnd2-txt b{margin-top:2px}


/* ==================================================================
   ENTREGA 96 — solo celular (hasta 639 px). El computador no cambia.
   ================================================================== */
@media (max-width:639px){

  /* ---------- 1. categorias: lista ordenada de 2 columnas ----------
     Una regla vieja fijaba cada tarjeta en 148 px aunque la columna mide
     180: quedaban angostas, separadas y con hueco a la derecha. Ahora cada
     categoria es una fila compacta: foto chica a la izquierda y nombre. */
  html body .cat-rejilla{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  html body .cat-rejilla .cat-tarjeta{width:auto!important;min-width:0!important;flex:none!important;
    flex-direction:row!important;align-items:stretch!important;min-height:60px;
    box-shadow:0 1px 4px rgba(18,41,74,.07)!important;transform:none!important}
  html body .cat-rejilla .cat-foto{flex:none;width:60px!important;height:auto!important;min-height:60px}
  html body .cat-rejilla .cat-pie{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:6px 9px!important}
  html body .cat-rejilla .cat-icono{display:none!important}
  html body .cat-rejilla .cat-nombres b{font-size:12px!important;line-height:1.25!important;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  html body .cat-rejilla .cat-nombres span{display:none!important}
  html body .cat-rejilla .cat-todas{flex-direction:row!important;align-items:center!important;
    justify-content:space-between!important;padding:8px 11px!important;min-height:60px}
  html body .cat-rejilla .cat-todas-txt b{font-size:12px!important}
  html body .cat-rejilla .cat-todas i{font-size:18px}

  /* ---------- 2. tarjetas de instaladores mas compactas ----------
     Foto mas baja, una sola especialidad (la principal) y todo mas junto.
     Asi todas las tarjetas quedan del mismo alto, sin espacio vacio. */
  html body .ficha-foto{height:92px!important}
  html body .ficha-datos{padding:7px 9px 9px!important}
  html body .ficha-datos h3{font-size:13px!important}
  html body .ficha-lugar,html body .ficha-nota,html body .ficha-estado{margin-top:2px!important}
  html body .ficha .etiquetas{margin-top:5px!important}
  html body .ficha .etiquetas li:nth-child(n+2){display:none!important}
  html body .ficha .etiquetas li{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .ficha .marcas{margin-top:5px!important;padding-top:0!important}
  html body .ficha .dest-sello{margin-bottom:2px}
  html body .ficha .dest-sello .laurel{width:11px;height:19px}
  html body .ficha .dest-sello-txt b{font-size:11px}
  html body .ficha .dest-sello-txt em{display:none}
}


/* ==================================================================
   ENTREGA 97 — solo celular: tres instaladores a la vista en los
   carruseles de la portada. El computador no cambia. El buscador y
   favoritos siguen con la tarjeta de la entrega 96.
   ================================================================== */
@media (max-width:639px){
  html body .carrusel .pista{gap:8px!important}
  html body .carrusel .pista > .ficha{width:calc((100% - 16px) / 3.15)!important;min-width:0!important}

  html body .carrusel .pista > .ficha .ficha-foto{height:78px!important}
  html body .carrusel .pista > .ficha .ficha-fav{width:24px!important;height:24px!important;top:4px!important;right:4px!important}
  html body .carrusel .pista > .ficha .ficha-fav svg{width:12px!important;height:12px!important}
  html body .carrusel .pista > .ficha .ficha-datos{padding:6px 7px 8px!important}
  html body .carrusel .pista > .ficha .ficha-datos h3{font-size:11.5px!important;line-height:1.2!important;
    display:flex;align-items:center;gap:3px;white-space:nowrap}
  html body .carrusel .pista > .ficha .ficha-datos h3 a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  html body .carrusel .pista > .ficha .ficha-verif svg{width:11px!important;height:11px!important}
  html body .carrusel .pista > .ficha .ficha-lugar{font-size:9.5px!important;margin-top:2px!important;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  html body .carrusel .pista > .ficha .ficha-lugar .bandera{font-size:10px;margin-right:3px}
  html body .carrusel .pista > .ficha .ficha-lugar svg:not(.bandera svg){display:none}
  html body .carrusel .pista > .ficha .ficha-nota{font-size:10px!important;margin-top:2px!important;white-space:nowrap}
  html body .carrusel .pista > .ficha .ficha-nota svg,
  html body .carrusel .pista > .ficha .ficha-nota .estrella{width:9px!important;height:9px!important}
  html body .carrusel .pista > .ficha .ficha-estado{font-size:9.5px!important;margin-top:2px!important;white-space:nowrap}
  html body .carrusel .pista > .ficha .etiquetas,
  html body .carrusel .pista > .ficha .marcas{display:none!important}
  html body .carrusel .pista > .ficha .dest-sello{margin-bottom:1px}
  html body .carrusel .pista > .ficha .dest-sello .laurel{width:9px!important;height:15px!important}
  html body .carrusel .pista > .ficha .dest-sello-txt b{font-size:10px!important}
  html body .carrusel .pista > .ficha .dest-sello-txt em{display:none}
  html body .carrusel .pista > .ficha.ficha-destacada{box-shadow:0 0 0 2px #1F5AA6, 0 6px 14px rgba(31,90,166,.18)!important}
  html body .carrusel .car-flecha{display:none!important}
}
@media (max-width:639px){
  html body .carrusel .pista > .ficha .ficha-nota{overflow:hidden;text-overflow:ellipsis}
  html body .carrusel .pista > .ficha .ficha-nota span{font-size:9.5px}
}