/* ===========================================================
   Jopoi PY - estilos
   Paleta: bandera paraguaya sobre crema calida.
   Sin fuentes externas: carga instantanea en 2G.
   =========================================================== */
:root{
  --rojo:#D52B1E;
  --azul:#0038A8;
  --crema:#FFFBF4;
  --crema2:#FFF4E6;
  --tinta:#2A1D14;
  --tinta2:#5C4836;
  --linea:#E8D9C4;
  --verde:#1C7C54;
  --radio:18px;
  --sombra:0 2px 4px rgba(42,29,20,.05), 0 10px 26px rgba(42,29,20,.07);
  --max:760px;
  --ff: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--crema); color:var(--tinta);
  font-family:var(--ff); font-size:18px; line-height:1.65;
  overflow-x:hidden;
}
img,svg{max-width:100%}
a{color:var(--azul); text-underline-offset:3px; text-decoration-thickness:2px}
a:hover{color:var(--rojo)}
.wrap{max-width:var(--max); margin:0 auto; padding:0 18px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- rosetas nanduti ---------- */
.nd{display:block; color:var(--rojo); opacity:.5}
.nd-band{
  display:flex; justify-content:center; gap:14px; align-items:center;
  padding:22px 0; color:var(--rojo); opacity:.38;
}
.nd-band svg{width:30px;height:30px;flex:none}
.nd-band svg.big{width:46px;height:46px}
.nd-band .ln{height:1px;background:currentColor;flex:1;max-width:120px;opacity:.6}

/* ---------- cabecera ---------- */
header.hero{
  position:relative; overflow:hidden;
  background:linear-gradient(180deg,#fff 0%,#FFF6EA 100%);
  border-bottom:1px solid var(--linea);
  padding:34px 0 30px; text-align:center;
}
header.hero .deco{position:absolute; color:var(--azul); opacity:.09; pointer-events:none}
header.hero .deco.a{width:230px;height:230px;top:-80px;left:-70px}
header.hero .deco.b{width:180px;height:180px;bottom:-70px;right:-55px;color:var(--rojo);opacity:.1}

.flag{
  width:86px;height:56px;margin:0 auto 16px;border-radius:7px;overflow:hidden;
  box-shadow:0 2px 10px rgba(42,29,20,.18); position:relative; z-index:1;
}
.flag i{display:block;height:33.34%}
.flag i.r{background:var(--rojo)}
.flag i.w{background:#fff}
.flag i.b{background:var(--azul)}
.flag .seal{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:16px;height:16px;border-radius:50%;
  border:1.7px solid var(--rojo); background:#fff;
}
.flag .seal:after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:5px;height:5px;border-radius:50%; background:var(--azul);
}
h1{
  position:relative; z-index:1;
  margin:0; font-size:2.05rem; line-height:1.18; letter-spacing:-.02em;
}
h1 .gn{color:var(--rojo)}
h1 .es{color:var(--azul)}
.hero .lead{
  position:relative; z-index:1;
  margin:14px auto 0; max-width:30em; font-size:1.08rem; color:var(--tinta2);
}
.hero .lead b{color:var(--tinta)}

/* ---------- aviso de confianza ---------- */
.shield{
  position:relative; z-index:1;
  margin:22px auto 0; max-width:33em;
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:15px 18px; font-size:.95rem; color:var(--tinta2); text-align:left;
  box-shadow:var(--sombra);
}
.shield b{color:var(--tinta)}
.shield ul{margin:8px 0 0; padding-left:1.15em}
.shield li{margin:4px 0}

/* ---------- indice ---------- */
nav.idx{padding:26px 0 6px}
nav.idx ol{list-style:none;margin:0;padding:0;display:grid;gap:10px}
nav.idx a{
  display:flex; gap:13px; align-items:center;
  background:#fff; border:1px solid var(--linea); border-radius:14px;
  padding:13px 15px; text-decoration:none; color:var(--tinta);
  box-shadow:0 1px 2px rgba(42,29,20,.04);
}
nav.idx a:hover{border-color:var(--rojo)}
nav.idx .ico{font-size:1.5rem; line-height:1; flex:none}
nav.idx .t1{font-weight:700; color:var(--rojo)}
nav.idx .t2{font-weight:700; color:var(--azul)}
nav.idx .t3{display:block;font-size:.86rem;color:var(--tinta2);font-weight:400}

/* ---------- secciones ---------- */
section{padding:34px 0 8px; scroll-margin-top:12px}
h2{
  margin:0 0 4px; font-size:1.58rem; line-height:1.2; letter-spacing:-.015em;
  display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;
}
h2 .gn{color:var(--rojo)}
h2 .es{color:var(--azul)}
h2 .dot{width:16px;height:16px;color:var(--tinta2);opacity:.55;flex:none}
h2 + .sub{margin:0 0 18px; color:var(--tinta2); font-size:1rem}
h3{font-size:1.12rem; margin:26px 0 8px}

.card{
  background:#fff; border:1px solid var(--linea); border-radius:var(--radio);
  padding:18px 18px 16px; box-shadow:var(--sombra); margin:0 0 14px;
}
.card.quiet{background:var(--crema2); box-shadow:none}
.card h4{margin:0 0 6px;font-size:1.04rem}
.card p:last-child{margin-bottom:0}
.card ul{margin:8px 0 0;padding-left:1.15em}
.card li{margin:5px 0}

.step{display:flex;gap:14px;margin:0 0 16px}
.step .n{
  flex:none;width:33px;height:33px;border-radius:50%;
  background:var(--azul);color:#fff;font-weight:700;
  display:grid;place-items:center;font-size:.95rem;
}
.step .bd{flex:1}
.step .bd p{margin:0 0 6px}
.step .bd p:last-child{margin-bottom:0}

.btn{
  display:inline-block;background:var(--azul);color:#fff!important;
  text-decoration:none;font-weight:700;padding:13px 22px;border-radius:12px;
  box-shadow:0 2px 0 #002a7d; margin:6px 8px 6px 0;
}
.btn:hover{background:#002f8f;color:#fff!important}
.btn.rojo{background:var(--rojo);box-shadow:0 2px 0 #a21a10}
.btn.rojo:hover{background:#b8241a}
.btn.ghost{background:#fff;color:var(--azul)!important;border:2px solid var(--azul);box-shadow:none}

/* ---------- alerta ---------- */
.alert{
  border-left:5px solid var(--rojo); background:#FFF1EF;
  border-radius:0 14px 14px 0; padding:14px 16px; margin:0 0 16px;
}
.alert b{color:#9e1a10}
.alert.ok{border-color:var(--verde);background:#EDF7F2}
.alert.ok b{color:#14603f}

/* ---------- aliento ---------- */
.aliento{
  position:relative; text-align:center; margin:32px 0 6px; padding:32px 20px;
  background:var(--crema2); border-radius:var(--radio); overflow:hidden;
}
.aliento .deco{position:absolute;width:150px;height:150px;color:var(--rojo);opacity:.08}
.aliento .deco.l{top:-45px;left:-45px}
.aliento .deco.r{bottom:-45px;right:-45px;color:var(--azul);opacity:.09}
.aliento p{position:relative;margin:0;line-height:1.4;font-weight:700}
.aliento .gn{display:block;color:var(--rojo);font-size:1.4rem}
.aliento .es{display:block;color:var(--azul);font-size:1.18rem;margin-top:2px}

/* ---------- listas ---------- */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.filtros button{
  font:inherit;font-size:.92rem;font-weight:700;cursor:pointer;
  background:#fff;border:1.6px solid var(--linea);color:var(--tinta2);
  padding:8px 14px;border-radius:999px;
}
.filtros button[aria-pressed="true"]{background:var(--azul);border-color:var(--azul);color:#fff}
.lista{display:grid;gap:12px}
.item{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:15px 16px;box-shadow:0 1px 2px rgba(42,29,20,.04);
}
.item .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.item .nm{font-weight:700;font-size:1.05rem;margin:0}
.item .ciu{
  flex:none;font-size:.76rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--azul);background:#EAF0FF;
  padding:4px 9px;border-radius:999px;
}
.item .qu{margin:4px 0 10px;color:var(--tinta2);font-size:.96rem}
.item .vias{display:flex;flex-wrap:wrap;gap:8px}
.item .vias a{
  display:inline-block;font-size:.92rem;font-weight:700;text-decoration:none;
  background:var(--crema2);border:1px solid var(--linea);border-radius:10px;
  padding:7px 12px;color:var(--azul);
}
.item .vias a:hover{border-color:var(--rojo);color:var(--rojo)}
.item .ver{margin:10px 0 0;font-size:.8rem;color:var(--tinta2)}
.item .ver a{color:var(--tinta2)}
.vacio{
  text-align:center;padding:30px 20px;background:var(--crema2);
  border:1px dashed var(--linea);border-radius:var(--radio);color:var(--tinta2);
}
.vacio b{display:block;color:var(--tinta);font-size:1.05rem;margin-bottom:6px}

/* ---------- pie ---------- */
footer{
  margin-top:40px;padding:32px 0 46px;
  background:#fff;border-top:1px solid var(--linea);
  text-align:center;color:var(--tinta2);font-size:.92rem;
}
footer .ndf{margin:0 auto 16px;width:44px;height:44px;color:var(--rojo);opacity:.4}
footer p{margin:0 auto 10px;max-width:34em}
footer .mini{font-size:.82rem;opacity:.85}

/* ---------- formulario CV ---------- */
.fld{margin:0 0 14px}
.fld label{display:block;font-weight:700;font-size:.95rem;margin:0 0 5px}
.fld .hint{display:block;font-weight:400;font-size:.85rem;color:var(--tinta2);margin:2px 0 6px}
.fld input,.fld textarea{
  font:inherit;font-size:1rem;width:100%;padding:12px 13px;
  border:1.6px solid var(--linea);border-radius:11px;background:#fff;color:var(--tinta);
}
.fld input:focus,.fld textarea:focus{outline:3px solid #cfe0ff;border-color:var(--azul)}
.fld textarea{min-height:92px;resize:vertical}
.row2{display:grid;gap:14px}
@media (min-width:560px){.row2{grid-template-columns:1fr 1fr}}

/* ---------- vista previa del CV ---------- */
.cvprev{
  background:#fff;border:1px solid var(--linea);border-radius:var(--radio);
  padding:30px 28px;box-shadow:var(--sombra);color:#111;
  font-size:15.5px;line-height:1.5;
}
.cvprev h2.nombre{display:block;font-size:1.6rem;margin:0 0 2px;color:#111;letter-spacing:-.01em}
.cvprev .cargo{color:#444;font-size:1.02rem;margin:0 0 10px}
.cvprev .contacto{font-size:.92rem;color:#333;margin:0 0 18px;padding:0 0 14px;border-bottom:2px solid var(--azul)}
.cvprev h3.sec{
  font-size:.88rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--azul);margin:18px 0 7px;
}
.cvprev p.blk{margin:0 0 9px;white-space:pre-line}
.cvprev .empty{color:#999;font-style:italic}

@media print{
  body{background:#fff;font-size:13px}
  .noprint{display:none!important}
  .cvprev{border:0;box-shadow:none;padding:0;font-size:12.5px}
  .wrap{max-width:none;padding:0}
  @page{margin:16mm 15mm}
}

@media (min-width:640px){
  h1{font-size:2.55rem}
  h2{font-size:1.8rem}
  nav.idx ol{grid-template-columns:1fr 1fr}
}