/* =========================================================
   JOBAVENUE PWA 3.0 — MOTOR DE ENTRADAS LIMPIO
   NO reestructura el HTML interno del artículo.
   ========================================================= */

html.ja3-app-mode,
html.ja3-app-mode body{
  background:#f4f7fb!important;
}

html.ja3-app-mode body{
  padding-top:72px!important;
  padding-bottom:96px!important;
}

/* Solo modo PWA */
html.ja3-app-mode .site-header,
html.ja3-app-mode header#masthead,
html.ja3-app-mode .site-footer,
html.ja3-app-mode footer#colophon{
  display:none!important;
}

/* Eliminar navegación nativa duplicada */
html.ja3-app-mode .ja3-native-nav-hidden,
html.ja3-app-mode .ja3-original-official-hidden{
  display:none!important;
}

/* Topbar */
.ja3-topbar{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:99990;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 22px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid #e5eaf2;
  backdrop-filter:blur(12px);
}

.ja3-top-home{
  display:flex;
  align-items:center;
  gap:10px;
  color:#18233f!important;
  text-decoration:none!important;
}

.ja3-logo{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:linear-gradient(135deg,#5e2bd1,#7b46ea);
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.ja3-top-home b{
  display:block;
  font-size:14px;
  line-height:1.1;
}

.ja3-top-home small{
  display:block;
  margin-top:3px;
  color:#7b849a;
  font-size:10px;
}

.ja3-top-back{
  border:1px solid #dde3ee;
  background:#fff;
  color:#283550;
  border-radius:11px;
  padding:9px 13px;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
}

/* Layout exterior: el artículo entero es una pieza, no tocamos su interior */
.ja3-layout{
  width:min(1280px,calc(100% - 32px));
  margin:24px auto 0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:22px;
  align-items:start;
}

html.ja3-app-mode .ja3-article{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  background:#fff!important;
  border:1px solid #e5eaf2!important;
  border-radius:22px!important;
  box-shadow:0 10px 34px rgba(38,51,77,.07)!important;
  overflow:hidden!important;
}

/* Header/título original del post */
html.ja3-app-mode .ja3-article .entry-header,
html.ja3-app-mode .ja3-article .post-header{
  padding:24px 28px 0!important;
}

html.ja3-app-mode .ja3-article .entry-title{
  color:#14213d!important;
  font-size:clamp(26px,3vw,40px)!important;
  line-height:1.12!important;
  margin:0 0 12px!important;
}

/* Cuerpo original: NO se mueve, no se convierte en columnas */
html.ja3-app-mode .ja3-content{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  padding:26px 30px 34px!important;
  color:#24324d!important;
  font-size:16px!important;
  line-height:1.72!important;
  text-align:left!important;
  overflow:visible!important;
}

html.ja3-app-mode .ja3-content > *{
  max-width:100%!important;
}

html.ja3-app-mode .ja3-content p{
  color:#24324d!important;
  font-size:16px!important;
  line-height:1.72!important;
  margin:0 0 17px!important;
  text-align:left!important;
}

html.ja3-app-mode .ja3-content h2{
  margin:30px 0 12px!important;
  color:#10254b!important;
  font-size:24px!important;
  line-height:1.28!important;
}

html.ja3-app-mode .ja3-content h3{
  margin:24px 0 10px!important;
  color:#173765!important;
  font-size:20px!important;
  line-height:1.3!important;
}

html.ja3-app-mode .ja3-content ul,
html.ja3-app-mode .ja3-content ol{
  margin:10px 0 20px 22px!important;
  padding:0!important;
}

html.ja3-app-mode .ja3-content li{
  margin:6px 0!important;
  line-height:1.6!important;
}

/* =========================================================
   MEDIOS — REGLA SIMPLE Y SEGURA
   ========================================================= */

/* Base: ninguna imagen puede deformarse */
html.ja3-app-mode .ja3-content img{
  height:auto!important;
  object-fit:contain!important;
}

/* Ilustraciones, logos, camiones, banderas, paquetes, campanas, etc. */
html.ja3-app-mode .ja3-content img.ja3-art{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:48px!important;
  max-height:48px!important;
  min-width:0!important;
  min-height:0!important;
  margin:12px auto 16px!important;
  padding:0!important;
  border:0!important;
  border-radius:8px!important;
  box-shadow:none!important;
  transform:none!important;
}

/* Fotografías reales */
html.ja3-app-mode .ja3-content img.ja3-photo{
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:520px!important;
  margin:18px auto!important;
  border-radius:14px!important;
  box-shadow:none!important;
}

/* Antes de clasificar, ninguna imagen puede convertirse en una pared enorme */
html.ja3-app-mode .ja3-content img:not(.ja3-photo):not(.ja3-art){
  max-width:160px!important;
  max-height:160px!important;
}

/* Figuras */
html.ja3-app-mode .ja3-content figure{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  margin:14px auto!important;
}

html.ja3-app-mode .ja3-content figure.ja3-art-wrap{
  width:100%!important;
  max-width:100%!important;
  padding:0!important;
  text-align:center!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}

html.ja3-app-mode .ja3-content figure.ja3-art-wrap img{
  max-width:48px!important;
  max-height:48px!important;
}

/* SVG inline */
html.ja3-app-mode .ja3-content svg.ja3-inline-svg{
  display:block!important;
  width:38px!important;
  height:38px!important;
  max-width:38px!important;
  max-height:38px!important;
  margin:10px auto 14px!important;
}

/* Enlaces externos: visibles sin tocar sus padres */
html.ja3-app-mode .ja3-content a.ja3-external-link{
  color:#5f32ca!important;
  font-weight:800!important;
  text-decoration:underline!important;
  text-underline-offset:3px!important;
}

/* Aviso existente, solo estilizado */
html.ja3-app-mode .ja3-important-box{
  margin:22px 0!important;
  padding:18px 20px!important;
  background:#eef7ff!important;
  border:1px solid #a9d5ff!important;
  border-radius:15px!important;
  box-shadow:none!important;
}

html.ja3-app-mode .ja3-important-box h2,
html.ja3-app-mode .ja3-important-box h3,
html.ja3-app-mode .ja3-important-box h4{
  margin:0 0 7px!important;
  color:#0c407e!important;
}

html.ja3-app-mode .ja3-important-title{
  margin-top:24px!important;
  padding:14px 18px 6px!important;
  color:#0c407e!important;
  background:#eef7ff!important;
  border:1px solid #a9d5ff!important;
  border-bottom:0!important;
  border-radius:15px 15px 0 0!important;
}

html.ja3-app-mode .ja3-important-text{
  margin-top:0!important;
  padding:0 18px 15px!important;
  background:#eef7ff!important;
  border:1px solid #a9d5ff!important;
  border-top:0!important;
  border-radius:0 0 15px 15px!important;
}

/* Sidebar */
.ja3-sidebar{
  position:sticky;
  top:94px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.ja3-side-card{
  padding:18px;
  background:#0e2035;
  border:1px solid #183854;
  border-radius:18px;
  box-shadow:0 10px 28px rgba(14,32,53,.14);
  color:#fff;
}

.ja3-side-kicker{
  display:block;
  margin-bottom:6px;
  color:#42c7ff;
  font-size:9px;
  letter-spacing:.12em;
  font-weight:900;
}

.ja3-side-card h3{
  margin:0 0 14px;
  color:#fff;
  font-size:18px;
}

.ja3-facts{
  display:grid;
  gap:8px;
}

.ja3-facts > div{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:3px 8px;
  align-items:center;
  padding:10px;
  background:#15304d;
  border-radius:12px;
}

.ja3-facts > div > span{
  grid-row:1/3;
  width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:#1f8ee6;
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.ja3-facts b{
  color:#fff;
  font-size:11px;
}

.ja3-facts small{
  color:#bed0e1;
  font-size:10px;
  line-height:1.35;
}

.ja3-official{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  margin-top:14px;
  padding:11px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,#ff7a18,#ff9f43);
  color:#fff!important;
  text-decoration:none!important;
  font-size:12px;
  font-weight:900;
}

.ja3-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.ja3-tags span{
  padding:7px 9px;
  border-radius:999px;
  background:#173653;
  color:#cfe7f8;
  font-size:10px;
}

.ja3-side-note p{
  margin:0;
  color:#c7d7e7;
  font-size:11px;
  line-height:1.55;
}

/* Relacionados */
.ja3-related{
  margin:26px 0 0;
  padding:22px 0 0;
  border-top:1px solid #e5eaf2;
}

.ja3-related-head{
  margin-bottom:12px;
  color:#13264b;
  font-size:17px;
  font-weight:900;
}

.ja3-related-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}

.ja3-related-card{
  display:grid;
  grid-template-columns:72px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:10px;
  background:#f8faff;
  border:1px solid #e2e8f2;
  border-radius:13px;
  text-decoration:none!important;
}

.ja3-related-card img,
.ja3-related-ph{
  width:72px!important;
  height:58px!important;
  max-width:72px!important;
  max-height:58px!important;
  object-fit:contain!important;
  border-radius:10px;
  background:#fff;
}

.ja3-related-card small{
  display:block;
  margin-bottom:3px;
  color:#6d3bd7;
  font-size:9px;
  font-weight:900;
}

.ja3-related-card b{
  display:block;
  color:#1c2943;
  font-size:11px;
  line-height:1.3;
}

/* Bottom nav */
.ja3-bottom-nav{
  position:fixed;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  z-index:99995;
  width:min(620px,calc(100% - 28px));
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:6px;
  padding:7px;
  background:#102033;
  border:1px solid #1c3854;
  border-radius:19px;
  box-shadow:0 14px 34px rgba(11,28,45,.3);
}

.ja3-bottom-nav a,
.ja3-bottom-nav button{
  min-height:54px;
  border:0;
  border-radius:13px;
  background:transparent;
  color:#a9bbcc!important;
  text-decoration:none!important;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  cursor:pointer;
}

.ja3-bottom-nav a:first-child{
  background:#0d4d70;
  color:#fff!important;
}

.ja3-bottom-nav .active{
  color:#ff8c2b!important;
}

.ja3-bottom-nav span{
  font-size:17px;
  line-height:1;
}

.ja3-bottom-nav small{
  font-size:9px;
  font-weight:800;
}

/* Tablet */
@media(max-width:980px){
  .ja3-layout{
    grid-template-columns:1fr;
  }

  .ja3-sidebar{
    position:static;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* Mobile */
@media(max-width:650px){
  html.ja3-app-mode body{
    padding-top:64px!important;
    padding-bottom:90px!important;
  }

  .ja3-topbar{
    height:64px;
    padding:8px 12px;
  }

  .ja3-layout{
    width:calc(100% - 16px);
    margin-top:10px;
    gap:12px;
  }

  html.ja3-app-mode .ja3-article{
    border-radius:16px!important;
  }

  html.ja3-app-mode .ja3-article .entry-header,
  html.ja3-app-mode .ja3-article .post-header{
    padding:18px 17px 0!important;
  }

  html.ja3-app-mode .ja3-content{
    padding:18px 17px 24px!important;
    font-size:15px!important;
  }

  html.ja3-app-mode .ja3-content p{
    font-size:15px!important;
  }

  html.ja3-app-mode .ja3-content h2{
    font-size:21px!important;
  }

  html.ja3-app-mode .ja3-content h3{
    font-size:18px!important;
  }

  html.ja3-app-mode .ja3-content img.ja3-art,
  html.ja3-app-mode .ja3-content figure.ja3-art-wrap img{
    max-width:42px!important;
    max-height:42px!important;
  }

  html.ja3-app-mode .ja3-content svg.ja3-inline-svg{
    width:34px!important;
    height:34px!important;
    max-width:34px!important;
    max-height:34px!important;
  }

  .ja3-sidebar{
    grid-template-columns:1fr;
  }

  .ja3-related-grid{
    grid-template-columns:1fr;
  }

  .ja3-bottom-nav{
    bottom:8px;
    width:calc(100% - 16px);
  }
}


/* =========================================================
   JOBAVENUE 3.1 — ESTILO 5 MODERNO
   ========================================================= */

html.ja3-app-mode .ja31-hide-native-header{display:none!important}

/* Hero */
.ja31-modern-hero{margin:0!important;background:#fff}
.ja31-hero-media{
  position:relative;min-height:300px;display:flex;align-items:flex-end;
  background:linear-gradient(135deg,#142b50,#253e6d);
  background-size:cover!important;background-position:center!important;overflow:hidden
}
.ja31-hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(8,22,45,.18),rgba(7,22,45,.9))
}
.ja31-hero-copy{position:relative;z-index:2;padding:38px 34px 30px;width:min(820px,100%)}
.ja31-kicker{
  display:inline-flex;padding:6px 10px;border-radius:999px;background:#ffb51f;
  color:#17233a;font-size:9px;font-weight:950;letter-spacing:.08em;text-transform:uppercase
}
.ja31-hero-copy h1{
  margin:12px 0 7px!important;color:#fff!important;
  font-size:clamp(30px,4vw,48px)!important;line-height:1.07!important;letter-spacing:-.03em!important
}
.ja31-hero-copy p{margin:0!important;color:#dce7f4!important;font-size:14px!important;font-weight:700!important}

.ja31-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e5eaf2}
.ja31-chips>div{
  display:grid;grid-template-columns:38px 1fr;gap:2px 9px;align-items:center;
  padding:15px 18px;background:#fff;min-width:0
}
.ja31-chips span{
  grid-row:1/3;width:36px;height:36px;display:grid;place-items:center;
  border-radius:11px;background:#edf5ff;color:#1f83e5;font-size:17px;font-weight:900
}
.ja31-chips small{color:#8993a7;font-size:9px;font-weight:800}
.ja31-chips b{color:#17233a;font-size:11px;line-height:1.3;overflow-wrap:anywhere}

/* Sections */
html.ja3-app-mode .ja3-content .ja31-title{
  position:relative;margin-top:34px!important;padding:0 0 10px 46px!important;
  border-bottom:1px solid #e7edf4!important
}
html.ja3-app-mode .ja3-content .ja31-title::before{
  content:attr(data-ja-num);position:absolute;left:0;top:-2px;width:34px;height:34px;
  display:grid;place-items:center;border-radius:11px;
  background:linear-gradient(135deg,#1f83e5,#38a6ff);color:#fff;
  font-size:11px;font-weight:950;box-shadow:0 7px 14px rgba(31,131,229,.18)
}

/* Lists as modern cards */
html.ja3-app-mode .ja3-content ul.ja31-list{
  list-style:none!important;margin:16px 0 22px!important;padding:0!important;
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important
}
html.ja3-app-mode .ja3-content ul.ja31-list li{
  position:relative;margin:0!important;padding:14px 14px 14px 42px!important;
  background:#f7faff!important;border:1px solid #e4ebf5!important;border-radius:14px!important;
  color:#253553!important;font-size:13px!important;line-height:1.45!important
}
html.ja3-app-mode .ja3-content ul.ja31-list li::before{
  content:"✓";position:absolute;left:13px;top:13px;width:20px;height:20px;
  display:grid;place-items:center;border-radius:50%;background:#18aa78;color:#fff;
  font-size:10px;font-weight:950
}

/* Quote */
html.ja3-app-mode .ja3-content .ja31-quote{
  margin:24px 0!important;padding:20px 22px!important;
  border:0!important;border-left:4px solid #ffb51f!important;
  border-radius:14px!important;background:#fff8e8!important;color:#253553!important
}

/* Notice */
html.ja3-app-mode .ja3-important-box{
  position:relative!important;margin:24px 0!important;padding:20px 20px 20px 64px!important;
  background:linear-gradient(135deg,#edf7ff,#f8fbff)!important;
  border:1px solid #a9d6ff!important;border-radius:16px!important
}
html.ja3-app-mode .ja3-important-box::before{
  content:"!";position:absolute;left:18px;top:18px;width:32px;height:32px;
  display:grid;place-items:center;border-radius:10px;background:#1f8ee6;color:#fff;
  font-size:18px;font-weight:950
}

/* Footer CTA */
.ja31-footer-cta{
  margin:0 30px 30px;padding:22px 24px;
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;
  background:linear-gradient(135deg,#0d1f37,#15365c);
  border:1px solid #183f69;border-radius:18px;box-shadow:0 12px 28px rgba(11,31,55,.16);color:#fff
}
.ja31-footer-cta>div>span{display:block;margin-bottom:5px;color:#53c9ff;font-size:9px;letter-spacing:.12em;font-weight:950}
.ja31-footer-cta h3{margin:0 0 5px!important;color:#fff!important;font-size:20px!important}
.ja31-footer-cta p{margin:0!important;color:#bed2e8!important;font-size:12px!important;line-height:1.5!important}
.ja31-footer-cta>a{
  min-width:210px;min-height:48px;display:flex;align-items:center;justify-content:center;
  padding:11px 17px;border-radius:12px;background:linear-gradient(135deg,#ff7a18,#ffb51f);
  color:#fff!important;text-decoration:none!important;font-size:12px;font-weight:950
}

/* Sidebar aligned to Style 5 */
.ja3-side-card{
  background:linear-gradient(180deg,#0b1f36,#0e2a47)!important;
  border-color:#163d62!important
}
.ja3-side-kicker{color:#49d0ff!important}
.ja3-official{background:linear-gradient(135deg,#ff7a18,#ffb51f)!important}

/* Small safe icons */
html.ja3-app-mode .ja3-content img.ja3-art{max-width:44px!important;max-height:44px!important}
html.ja3-app-mode .ja3-content svg.ja3-inline-svg{
  width:34px!important;height:34px!important;max-width:34px!important;max-height:34px!important
}

@media(max-width:760px){
  .ja31-hero-media{min-height:230px}
  .ja31-hero-copy{padding:28px 20px 22px}
  .ja31-hero-copy h1{font-size:29px!important}
  .ja31-chips{grid-template-columns:1fr}
  html.ja3-app-mode .ja3-content ul.ja31-list{grid-template-columns:1fr!important}
  .ja31-footer-cta{grid-template-columns:1fr;margin:0 17px 22px;padding:18px}
  .ja31-footer-cta>a{width:100%;min-width:0}
}


/* =========================================================
   JOBAVENUE 3.2 — ICONOS NUEVOS PEQUEÑOS Y UNIFORMES
   ========================================================= */

/* Ocultar por completo los dibujos/iconos originales del cuerpo */
html.ja3-app-mode .ja3-content .ja32-original-icon-hidden,
html.ja3-app-mode .ja3-content img.ja3-art.ja32-original-icon-hidden,
html.ja3-app-mode .ja3-content svg.ja3-inline-svg.ja32-original-icon-hidden{
  display:none!important;
  width:0!important;
  height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
}

html.ja3-app-mode .ja3-content .ja32-original-icon-wrap-hidden{
  display:none!important;
  width:0!important;
  height:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
}

/* Rehacer títulos de sección: sin badge gigante */
html.ja3-app-mode .ja3-content .ja31-title.ja32-title-with-icon{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  padding:0 0 10px 0!important;
  min-height:36px!important;
}

/* Ocultar el número azul anterior solo en estos títulos */
html.ja3-app-mode .ja3-content .ja31-title.ja32-title-with-icon::before{
  display:none!important;
  content:none!important;
}

/* Icono nuevo, pequeño y perfectamente controlado */
html.ja3-app-mode .ja3-content .ja32-section-icon{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#edf6ff!important;
  color:#1d82df!important;
  border:1px solid #d4e9fb!important;
  box-shadow:none!important;
  overflow:hidden!important;
}

html.ja3-app-mode .ja3-content .ja32-section-icon svg{
  display:block!important;
  width:16px!important;
  height:16px!important;
  max-width:16px!important;
  max-height:16px!important;
  min-width:16px!important;
  min-height:16px!important;
  margin:0!important;
  padding:0!important;
  stroke:currentColor!important;
}

/* Checks pequeños para listas, sin imágenes externas */
html.ja3-app-mode .ja3-content ul.ja31-list li::before{
  width:18px!important;
  height:18px!important;
  left:13px!important;
  top:14px!important;
  font-size:9px!important;
}

/* Aviso importante también con icono discreto */
html.ja3-app-mode .ja3-important-box::before{
  width:28px!important;
  height:28px!important;
  left:18px!important;
  top:18px!important;
  border-radius:8px!important;
  font-size:15px!important;
}

/* Protección extra:
   cualquier ilustración original no clasificada jamás supera 42px */
html.ja3-app-mode .ja3-content img:not(.ja3-photo){
  max-width:42px!important;
  max-height:42px!important;
}

/* Fotografías reales conservan el tamaño correcto */
html.ja3-app-mode .ja3-content img.ja3-photo{
  max-width:100%!important;
  max-height:520px!important;
}

/* Móvil: aún más pequeños */
@media(max-width:650px){
  html.ja3-app-mode .ja3-content .ja32-section-icon{
    flex-basis:28px!important;
    width:28px!important;
    height:28px!important;
    max-width:28px!important;
    max-height:28px!important;
  }

  html.ja3-app-mode .ja3-content .ja32-section-icon svg{
    width:15px!important;
    height:15px!important;
    max-width:15px!important;
    max-height:15px!important;
  }
}


/* =========================================================
   JOBAVENUE 3.3 — ESTILO 5 REAL, LIMPIO Y ORDENADO
   ========================================================= */

/* Quitar por completo emojis decorativos sueltos */
html.ja3-app-mode .ja3-content .ja33-decorative-emoji-hidden{
  display:none!important;
  width:0!important;
  height:0!important;
  max-width:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
}

/* Ya no usar el aspecto de lista original */
html.ja3-app-mode .ja3-content ul,
html.ja3-app-mode .ja3-content ol{
  list-style:none!important;
  margin-left:0!important;
  padding-left:0!important;
}

/* Tarjetas grandes por sección */
html.ja3-app-mode .ja3-content .ja33-section-card{
  position:relative!important;
  width:100%!important;
  max-width:100%!important;
  margin:18px 0!important;
  padding:22px!important;
  border:1px solid #e2eaf3!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 8px 24px rgba(29,52,83,.055)!important;
  overflow:hidden!important;
}

html.ja3-app-mode .ja3-content .ja33-card-blue{
  background:linear-gradient(135deg,#f7fbff,#edf6ff)!important;
  border-color:#d6e9fb!important;
}

html.ja3-app-mode .ja3-content .ja33-card-green{
  background:linear-gradient(135deg,#f7fffb,#ecf9f3)!important;
  border-color:#d4eee2!important;
}

html.ja3-app-mode .ja3-content .ja33-card-yellow{
  background:linear-gradient(135deg,#fffdf6,#fff6dd)!important;
  border-color:#f4e2ad!important;
}

html.ja3-app-mode .ja3-content .ja33-card-purple{
  background:linear-gradient(135deg,#fbf9ff,#f1edff)!important;
  border-color:#e1d8ff!important;
}

html.ja3-app-mode .ja3-content .ja33-card-neutral{
  background:linear-gradient(135deg,#fff,#f9fbfe)!important;
}

/* Títulos de cada tarjeta */
html.ja3-app-mode .ja3-content .ja33-section-card > h2{
  margin:0 0 16px!important;
  padding:0 0 12px!important;
  border-bottom:1px solid rgba(36,57,88,.11)!important;
  color:#10254b!important;
  font-size:22px!important;
}

/* Desactivar número/badge antiguo para no saturar */
html.ja3-app-mode .ja3-content .ja33-section-card > h2::before{
  display:none!important;
  content:none!important;
}

/* Mantener SOLO el icono nuevo pequeño del plugin */
html.ja3-app-mode .ja3-content .ja33-section-card .ja32-section-icon{
  flex:0 0 28px!important;
  width:28px!important;
  height:28px!important;
  max-width:28px!important;
  max-height:28px!important;
  border-radius:8px!important;
}

html.ja3-app-mode .ja3-content .ja33-section-card .ja32-section-icon svg{
  width:14px!important;
  height:14px!important;
  max-width:14px!important;
  max-height:14px!important;
}

/* Listas como filas compactas, no emojis separados */
html.ja3-app-mode .ja3-content .ja33-card-list{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:10px!important;
  margin:10px 0 0!important;
  padding:0!important;
}

html.ja3-app-mode .ja3-content .ja33-card-list > li,
html.ja3-app-mode .ja3-content li.ja33-clean-li{
  position:relative!important;
  min-height:46px!important;
  margin:0!important;
  padding:12px 14px 12px 42px!important;
  display:flex!important;
  align-items:center!important;
  background:rgba(255,255,255,.78)!important;
  border:1px solid rgba(35,67,103,.09)!important;
  border-radius:12px!important;
  color:#263956!important;
  font-size:13px!important;
  line-height:1.45!important;
}

/* Check propio: reemplaza fábrica, llave, lupa, caja, escoba, etc. */
html.ja3-app-mode .ja3-content .ja33-card-list > li::before,
html.ja3-app-mode .ja3-content li.ja33-clean-li::before{
  content:"✓"!important;
  position:absolute!important;
  left:13px!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  width:20px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#178bdc!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:950!important;
}

/* Nada dentro de un LI puede convertirse en icono gráfico gigante */
html.ja3-app-mode .ja3-content li img,
html.ja3-app-mode .ja3-content li svg:not(.ja32-section-icon svg){
  display:none!important;
}

/* Párrafos dentro de tarjetas */
html.ja3-app-mode .ja3-content .ja33-section-card > p{
  margin:0 0 14px!important;
  color:#40506a!important;
  font-size:14px!important;
  line-height:1.65!important;
}

/* Facts modernos entre hero y cuerpo */
.ja33-quick-facts{
  margin:20px 30px 4px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.ja33-quick-facts>div{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:2px 9px;
  align-items:center;
  min-height:74px;
  padding:13px 15px;
  background:#f5faff;
  border:1px solid #dcecf9;
  border-radius:14px;
}

.ja33-quick-facts span{
  grid-row:1/3;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#e4f2ff;
  color:#178bdc;
  font-size:16px;
  font-weight:900;
}

.ja33-quick-facts small{
  color:#7c8a9e;
  font-size:9px;
  font-weight:800;
}

.ja33-quick-facts b{
  color:#142747;
  font-size:12px;
  line-height:1.3;
}

/* Evitar espacios grandes entre elementos */
html.ja3-app-mode .ja3-content .ja33-section-card > *:last-child{
  margin-bottom:0!important;
}

/* Mobile */
@media(max-width:700px){
  html.ja3-app-mode .ja3-content .ja33-section-card{
    padding:17px!important;
    margin:14px 0!important;
    border-radius:15px!important;
  }

  html.ja3-app-mode .ja3-content .ja33-section-card > h2{
    font-size:19px!important;
  }

  html.ja3-app-mode .ja3-content .ja33-card-list{
    grid-template-columns:1fr!important;
  }

  .ja33-quick-facts{
    margin:14px 17px 2px;
    grid-template-columns:1fr!important;
  }

  .ja33-quick-facts>div{
    min-height:62px;
  }
}


/* =========================================================
   JOBAVENUE 3.6 — SIDEBAR DERECHO ESTILO REFERENCIA
   ========================================================= */

.ja36-sidebar{
  position:sticky!important;
  top:94px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  min-width:0!important;
}

/* ---------------------------------
   En este artículo
   --------------------------------- */
.ja36-toc-card{
  padding:16px 16px 12px!important;
  background:linear-gradient(180deg,#0f3154 0%,#0b2845 100%)!important;
  border:1px solid #173f67!important;
  border-radius:10px!important;
  box-shadow:0 8px 22px rgba(10,37,65,.14)!important;
  color:#fff!important;
}

.ja36-toc-card h3{
  margin:0 0 8px!important;
  padding-bottom:10px!important;
  border-bottom:1px solid rgba(255,255,255,.18)!important;
  color:#fff!important;
  font-size:15px!important;
  line-height:1.2!important;
}

.ja36-toc-list{
  display:flex!important;
  flex-direction:column!important;
}

.ja36-toc-list a{
  display:grid!important;
  grid-template-columns:26px minmax(0,1fr)!important;
  gap:8px!important;
  align-items:center!important;
  min-height:39px!important;
  padding:7px 0!important;
  border-bottom:1px solid rgba(255,255,255,.10)!important;
  color:#fff!important;
  text-decoration:none!important;
}

.ja36-toc-list a:last-child{
  border-bottom:0!important;
}

.ja36-toc-list a>span{
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#1ea1ff!important;
  color:#fff!important;
  font-size:10px!important;
  font-weight:900!important;
}

.ja36-toc-list a>b{
  color:#f7fbff!important;
  font-size:10px!important;
  font-weight:600!important;
  line-height:1.25!important;
}

/* ---------------------------------
   Postulación oficial
   --------------------------------- */
.ja36-apply-card{
  padding:14px!important;
  background:linear-gradient(135deg,#ffe8a1,#ffd46a)!important;
  border:1px solid #f4d06b!important;
  border-radius:10px!important;
  box-shadow:0 8px 20px rgba(211,153,32,.10)!important;
}

.ja36-apply-head{
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr)!important;
  gap:9px!important;
  align-items:start!important;
}

.ja36-globe{
  width:34px!important;
  height:34px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#ff5b0c!important;
  color:#fff!important;
  font-size:18px!important;
  font-weight:900!important;
}

.ja36-apply-card h3{
  margin:0 0 4px!important;
  color:#112a53!important;
  font-size:12px!important;
  line-height:1.2!important;
}

.ja36-apply-card p{
  margin:0!important;
  color:#264066!important;
  font-size:9px!important;
  line-height:1.35!important;
}

.ja36-apply-card>a{
  width:100%!important;
  min-height:38px!important;
  margin-top:10px!important;
  padding:9px 12px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  border-radius:7px!important;
  background:linear-gradient(135deg,#ff620d,#f5480a)!important;
  color:#fff!important;
  text-decoration:none!important;
  font-size:10px!important;
  font-weight:900!important;
  box-shadow:0 6px 14px rgba(237,78,11,.14)!important;
}

.ja36-apply-card>small{
  display:block!important;
  margin-top:7px!important;
  text-align:center!important;
  color:#7f673a!important;
  font-size:7.5px!important;
}

/* ---------------------------------
   Vacantes relacionadas
   --------------------------------- */
.ja36-related-card{
  padding:14px!important;
  background:#fff!important;
  border:1px solid #e3eaf2!important;
  border-radius:10px!important;
  box-shadow:0 8px 22px rgba(36,58,89,.07)!important;
}

.ja36-related-card>h3{
  margin:0 0 8px!important;
  color:#102c56!important;
  font-size:14px!important;
}

.ja36-related-list{
  display:flex!important;
  flex-direction:column!important;
}

.ja36-related-list>a{
  display:grid!important;
  grid-template-columns:46px minmax(0,1fr) 12px!important;
  gap:8px!important;
  align-items:center!important;
  min-height:58px!important;
  padding:7px 0!important;
  border-bottom:1px solid #edf1f5!important;
  color:inherit!important;
  text-decoration:none!important;
}

.ja36-related-list>a:last-child{
  border-bottom:0!important;
}

.ja36-related-list img,
.ja36-related-ph{
  width:46px!important;
  height:40px!important;
  max-width:46px!important;
  max-height:40px!important;
  object-fit:cover!important;
  border-radius:6px!important;
  background:#f0f4f8!important;
}

.ja36-related-ph{
  display:grid!important;
  place-items:center!important;
  color:#6a38d1!important;
  font-size:10px!important;
  font-weight:900!important;
}

.ja36-related-list b{
  display:block!important;
  margin-bottom:2px!important;
  color:#16345d!important;
  font-size:9px!important;
  line-height:1.25!important;
}

.ja36-related-list small{
  display:block!important;
  color:#708099!important;
  font-size:8px!important;
  line-height:1.25!important;
}

.ja36-arrow{
  color:#196fbc!important;
  font-size:20px!important;
  line-height:1!important;
}

/* ---------------------------------
   Consejo rápido
   --------------------------------- */
.ja36-tip-card{
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr)!important;
  gap:9px!important;
  padding:14px!important;
  background:linear-gradient(135deg,#eef8ff,#dcefff)!important;
  border:1px solid #d1e9fb!important;
  border-radius:10px!important;
  box-shadow:0 8px 20px rgba(51,130,190,.06)!important;
}

.ja36-tip-icon{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  background:#fff6bf!important;
  color:#ffb300!important;
  font-size:15px!important;
}

.ja36-tip-card h3{
  margin:0 0 4px!important;
  color:#12345d!important;
  font-size:11px!important;
}

.ja36-tip-card p{
  margin:0!important;
  color:#315275!important;
  font-size:9px!important;
  line-height:1.45!important;
}

/* Desactivar visual del sidebar viejo si queda algún nodo heredado */
.ja36-sidebar .ja3-side-card{
  display:none!important;
}

/* Layout */
@media(min-width:981px){
  .ja36-layout{
    grid-template-columns:minmax(0,1fr) 260px!important;
    gap:18px!important;
    align-items:start!important;
  }
}

@media(max-width:980px){
  .ja36-sidebar{
    position:static!important;
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:12px!important;
  }

  .ja36-toc-card{
    grid-column:1/-1!important;
  }
}

@media(max-width:650px){
  .ja36-sidebar{
    grid-template-columns:1fr!important;
  }

  .ja36-toc-card,
  .ja36-apply-card,
  .ja36-related-card,
  .ja36-tip-card{
    border-radius:12px!important;
  }
}


/* =========================================================
   JOBAVENUE PWA 4.8 — ENTRADAS MÓVILES
   Imagen completa + controles con paleta JobAvenue
   ========================================================= */

/* Paleta unificada */
:root{
  --ja48-purple:#6b35db;
  --ja48-purple-2:#7b46ea;
  --ja48-orange:#ff8124;
  --ja48-navy:#102033;
  --ja48-soft:#f5f1ff;
}

/* Top bar */
.ja3-logo{
  background:linear-gradient(135deg,var(--ja48-purple),var(--ja48-purple-2) 62%,var(--ja48-orange))!important;
}

.ja3-top-back{
  color:#4f27b8!important;
  border-color:#ddd4f5!important;
  background:#fff!important;
}

.ja3-top-back:hover{
  background:#f7f3ff!important;
  border-color:#cfc0f2!important;
}

/* =========================================================
   HERO DE CADA ENTRADA — NO RECORTAR IMAGEN
   ========================================================= */
.ja31-hero-media{
  background-color:#eef1f7!important;
  background-repeat:no-repeat!important;
  background-position:center top!important;
}

/* Los chips pasan de azul genérico a morado JobAvenue */
.ja31-chips span{
  background:#f0eaff!important;
  color:var(--ja48-purple)!important;
}

html.ja3-app-mode .ja3-important-box::before{
  background:linear-gradient(135deg,var(--ja48-purple),var(--ja48-purple-2))!important;
}

/* CTA oficial */
.ja31-footer-cta>a,
.ja3-official{
  background:linear-gradient(135deg,var(--ja48-purple),var(--ja48-purple-2) 68%,var(--ja48-orange))!important;
  color:#fff!important;
}

/* =========================================================
   BARRA INFERIOR — ALINEADA CON COLORES DE LA WEB
   ========================================================= */
.ja3-bottom-nav{
  background:rgba(16,32,51,.97)!important;
  border-color:rgba(107,53,219,.34)!important;
  box-shadow:0 14px 34px rgba(26,18,61,.30)!important;
}

.ja3-bottom-nav a,
.ja3-bottom-nav button{
  color:#c6c3d4!important;
  transition:background .18s ease,color .18s ease,transform .18s ease!important;
}

.ja3-bottom-nav a:first-child{
  background:linear-gradient(135deg,#5626c8,var(--ja48-purple-2))!important;
  color:#fff!important;
  box-shadow:0 6px 14px rgba(107,53,219,.25)!important;
}

/* Guardar activo */
.ja3-bottom-nav button.active{
  color:#fff!important;
  background:linear-gradient(135deg,#6b35db,#7b46ea)!important;
}

/* Volver y compartir: mismos tonos de marca */
.ja3-bottom-nav button:hover,
.ja3-bottom-nav a:hover{
  color:#fff!important;
}

.ja3-bottom-nav button[data-ja3-back] span,
.ja3-bottom-nav button[data-ja3-share] span{
  color:#bda9f4!important;
}

.ja3-bottom-nav button[data-ja3-save] span{
  color:#ff9a4f!important;
}

/* =========================================================
   MÓVIL / TABLET
   ========================================================= */
@media(max-width:760px){

  /* Mostrar la imagen destacada completa.
     Las destacadas del proyecto son 700x400, por eso usamos 7/4. */
  .ja31-hero-media{
    min-height:0!important;
    height:auto!important;
    aspect-ratio:7 / 4!important;
    display:flex!important;
    align-items:flex-end!important;
    background-size:contain!important;
    background-position:center top!important;
    background-color:#eef1f7!important;
    overflow:hidden!important;
  }

  /* El degradado solo ayuda a leer el texto, no tapa la imagen completa */
  .ja31-hero-overlay{
    background:
      linear-gradient(
        180deg,
        rgba(8,16,35,0) 0%,
        rgba(8,16,35,.05) 40%,
        rgba(14,19,47,.52) 72%,
        rgba(22,18,55,.84) 100%
      )!important;
  }

  .ja31-hero-copy{
    padding:18px 20px 18px!important;
    width:100%!important;
  }

  .ja31-hero-copy h1{
    font-size:clamp(23px,6.8vw,30px)!important;
    line-height:1.08!important;
    text-shadow:0 2px 10px rgba(0,0,0,.34)!important;
  }

  .ja31-kicker{
    background:linear-gradient(135deg,#ff9c32,var(--ja48-orange))!important;
    color:#fff!important;
  }

  /* Tarjeta principal un poco más compacta */
  html.ja3-app-mode .ja3-article{
    border-radius:20px!important;
  }

  /* Barra inferior más uniforme */
  .ja3-bottom-nav{
    width:calc(100% - 24px)!important;
    bottom:8px!important;
    gap:5px!important;
    padding:6px!important;
    border-radius:20px!important;
  }

  .ja3-bottom-nav a,
  .ja3-bottom-nav button{
    min-height:58px!important;
    border-radius:14px!important;
  }

  .ja3-bottom-nav span{
    font-size:19px!important;
  }

  .ja3-bottom-nav small{
    font-size:9px!important;
  }
}

@media(max-width:520px){
  .ja31-hero-copy{
    padding:14px 16px 15px!important;
  }

  .ja31-hero-copy h1{
    margin:8px 0 5px!important;
    font-size:clamp(20px,6.6vw,27px)!important;
  }

  .ja31-hero-copy p{
    font-size:12px!important;
  }

  .ja31-kicker{
    padding:5px 9px!important;
    font-size:8px!important;
  }
}


/* =========================================================
   JOBAVENUE 4.9 — RELACIONADOS REDISEÑADOS
   Reemplaza el bloque grande y plano por tarjetas premium.
   ========================================================= */

.ja49-native-related-hidden{
  display:none!important;
}

.ja49-related{
  width:100%!important;
  margin:30px 0 10px!important;
  padding:24px!important;
  border:1px solid #e6e0f7!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 8%,rgba(255,129,36,.10),transparent 27%),
    linear-gradient(145deg,#faf8ff 0%,#f4f0ff 48%,#fffaf5 100%)!important;
  box-shadow:0 12px 32px rgba(71,47,137,.08)!important;
}

.ja49-related-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin-bottom:18px!important;
}

.ja49-related-title{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}

.ja49-related-icon{
  width:46px!important;
  height:46px!important;
  flex:0 0 46px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,#6630d9,#7d46eb)!important;
  color:#fff!important;
  font-size:20px!important;
  box-shadow:0 8px 18px rgba(102,48,217,.20)!important;
}

.ja49-related-title small{
  display:block!important;
  margin:0 0 2px!important;
  color:#ff8124!important;
  font-size:9px!important;
  font-weight:950!important;
  letter-spacing:.13em!important;
}

.ja49-related-title h2{
  margin:0!important;
  color:#152544!important;
  font-size:22px!important;
  line-height:1.12!important;
}

.ja49-related-title p{
  margin:5px 0 0!important;
  color:#758097!important;
  font-size:11px!important;
  line-height:1.45!important;
}

/* 3 tarjetas compactas; ya no imágenes gigantes */
.ja49-related-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:14px!important;
}

.ja49-related-item{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  background:#fff!important;
  border:1px solid #e8e8f1!important;
  border-radius:17px!important;
  text-decoration:none!important;
  box-shadow:0 7px 18px rgba(32,39,66,.06)!important;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}

.ja49-related-item:hover{
  transform:translateY(-3px)!important;
  border-color:#d8c9f7!important;
  box-shadow:0 12px 26px rgba(77,51,143,.11)!important;
}

.ja49-related-media{
  position:relative!important;
  width:100%!important;
  aspect-ratio:16/9!important;
  overflow:hidden!important;
  background:#eef1f6!important;
}

.ja49-related-media img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
}

.ja49-related-ph{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  background:linear-gradient(135deg,#5f2bd1,#834cef 65%,#ff8124)!important;
  color:#fff!important;
  font-size:28px!important;
  font-weight:950!important;
}

.ja49-related-country{
  position:absolute!important;
  left:9px!important;
  bottom:9px!important;
  display:inline-flex!important;
  align-items:center!important;
  min-height:25px!important;
  padding:0 9px!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.95)!important;
  color:#263552!important;
  font-size:8.5px!important;
  font-weight:900!important;
  box-shadow:0 5px 12px rgba(20,32,52,.10)!important;
}

.ja49-related-body{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  padding:13px 14px 14px!important;
}

.ja49-related-meta{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-bottom:7px!important;
}

.ja49-related-meta span{
  display:inline-flex!important;
  align-items:center!important;
  min-height:22px!important;
  padding:0 8px!important;
  border-radius:999px!important;
  background:#f0eaff!important;
  color:#6530cf!important;
  font-size:8px!important;
  font-weight:950!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}

.ja49-related-meta b{
  color:#d9d2e9!important;
  font-size:18px!important;
  line-height:1!important;
}

.ja49-related-item h3{
  margin:0!important;
  color:#172645!important;
  font-size:13.5px!important;
  line-height:1.28!important;
}

.ja49-related-item p{
  display:-webkit-box!important;
  -webkit-line-clamp:2!important;
  -webkit-box-orient:vertical!important;
  overflow:hidden!important;
  margin:7px 0 12px!important;
  color:#7a8497!important;
  font-size:9.5px!important;
  line-height:1.48!important;
}

.ja49-related-link{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  margin-top:auto!important;
  padding-top:10px!important;
  border-top:1px solid #eef0f4!important;
  color:#6630d9!important;
  font-size:10px!important;
  font-weight:950!important;
}

.ja49-related-link i{
  width:26px!important;
  height:26px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:9px!important;
  background:#fff0e4!important;
  color:#ff8124!important;
  font-style:normal!important;
  font-size:14px!important;
}

/* Tablet */
@media(max-width:980px){
  .ja49-related-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .ja49-related-grid .ja49-related-item:last-child:nth-child(3){
    grid-column:1/-1!important;
    display:grid!important;
    grid-template-columns:180px minmax(0,1fr)!important;
  }

  .ja49-related-grid .ja49-related-item:last-child:nth-child(3) .ja49-related-media{
    height:100%!important;
    aspect-ratio:auto!important;
  }
}

/* Móvil */
@media(max-width:650px){
  .ja49-related{
    margin:22px 0 8px!important;
    padding:16px!important;
    border-radius:18px!important;
  }

  .ja49-related-title{
    gap:10px!important;
  }

  .ja49-related-icon{
    width:40px!important;
    height:40px!important;
    flex-basis:40px!important;
    border-radius:13px!important;
    font-size:17px!important;
  }

  .ja49-related-title h2{
    font-size:18px!important;
  }

  .ja49-related-title p{
    font-size:9.5px!important;
  }

  .ja49-related-grid{
    grid-template-columns:1fr!important;
    gap:11px!important;
  }

  .ja49-related-item,
  .ja49-related-grid .ja49-related-item:last-child:nth-child(3){
    display:grid!important;
    grid-template-columns:112px minmax(0,1fr)!important;
    min-height:112px!important;
  }

  .ja49-related-media,
  .ja49-related-grid .ja49-related-item:last-child:nth-child(3) .ja49-related-media{
    width:112px!important;
    height:100%!important;
    min-height:112px!important;
    aspect-ratio:auto!important;
  }

  .ja49-related-country{
    left:6px!important;
    bottom:6px!important;
    max-width:100px!important;
    padding:0 6px!important;
    font-size:7px!important;
  }

  .ja49-related-body{
    padding:10px 11px!important;
  }

  .ja49-related-meta{
    margin-bottom:5px!important;
  }

  .ja49-related-meta b{
    display:none!important;
  }

  .ja49-related-item h3{
    font-size:11.5px!important;
  }

  .ja49-related-item p{
    display:none!important;
  }

  .ja49-related-link{
    padding-top:7px!important;
    font-size:9px!important;
  }

  .ja49-related-link i{
    width:23px!important;
    height:23px!important;
    border-radius:8px!important;
  }
}