/* Duditopia · «En construcción» (una por sección) y 404. Va después de cabecera.css y sitio.css. */
.px-main{padding:0 clamp(16px,5vw,72px)}
.px-hero{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:40px;align-items:center;padding:clamp(8px,3vw,40px) 0 30px}
.px-kicker{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a5462f;margin:0 0 16px}
.px-kicker::before{content:"";width:28px;height:1.5px;background:currentColor}
.px-hero h1{font:650 clamp(2.4rem,5vw,4.2rem)/1.02 var(--dt-disp);letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance}
.px-teaser{font-size:clamp(1.08rem,1.4vw,1.25rem);color:var(--cq-ink);max-width:40ch;margin:0 0 10px;font-weight:500}
.px-nota{color:var(--cq-ink2);max-width:44ch;margin:0 0 28px}
.px-btns{display:flex;flex-wrap:wrap;gap:12px}
.px-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  font:650 17px/1 var(--dt-disp);text-decoration:none;transition:transform .25s ease}
.px-btn:hover{transform:translateY(-2px)}
.px-btn svg{width:18px;height:18px;flex:none}
body.dt-sitio .px-btn.pri{background:#a5462f;color:#fff9f2;box-shadow:0 0 0 1.2px rgba(80,24,12,.55) inset,1.5px 2px 0 -.4px rgba(80,24,12,.3),0 10px 24px -12px rgba(120,40,20,.6)}
body.dt-sitio .px-btn.sec{background:rgba(247,242,231,.9);color:#1f2b25;box-shadow:0 0 0 1.4px rgba(31,43,37,.6) inset,1.5px 2px 0 -.4px rgba(31,43,37,.28)}
.px-arte{position:relative;margin:0;padding:0 0 30px 0}
.px-lamina{position:relative;background:#f8f4ea;padding:12px;border-radius:6px 9px 7px 10px;transform:rotate(1.2deg);
  box-shadow:0 0 0 1px rgba(60,50,30,.12),0 26px 40px -26px rgba(50,40,20,.6)}
.px-lamina img{display:block;width:100%;height:auto;border-radius:3px}
.px-sello{position:absolute;right:22px;top:22px;padding:8px 14px 7px;border-radius:999px;transform:rotate(-7deg);
  font:700 13px/1 var(--dt-disp);letter-spacing:.12em;text-transform:uppercase;color:#9a3f2a;background:rgba(250,246,236,.92);
  box-shadow:0 0 0 1.6px #9a3f2a inset,0 0 0 4px rgba(250,246,236,.92),0 0 0 5.2px rgba(154,63,42,.55)}
.px-dudi{position:absolute;left:-46px;bottom:-8px;width:clamp(130px,15vw,200px);height:auto;transform-origin:50% 90%;animation:px-hola 3.6s ease-in-out infinite alternate;
  filter:drop-shadow(0 6px 8px rgba(50,40,20,.18))}
@keyframes px-hola{from{transform:rotate(-2deg)}to{transform:rotate(2.4deg) translateY(-4px)}}

.px-ya{max-width:1180px;margin:34px auto 0;padding-top:30px;background:url(/assets/linea.webp) repeat-x left top/160px 4px}
.px-ya h2{font:650 clamp(1.5rem,2.4vw,2rem)/1.1 var(--dt-disp);letter-spacing:-.02em;margin:0 0 20px}
.px-ya h2 em{font-style:normal;position:relative;z-index:0;white-space:nowrap}
.px-ya h2 em::after{content:"";position:absolute;z-index:-1;left:-.1em;right:-.12em;bottom:.02em;height:.42em;background:url(/assets/marcador-amarillo.webp) center/100% 100% no-repeat;opacity:.8}
.px-ya ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.px-ya a{display:flex;align-items:center;gap:12px;height:100%;padding:10px 16px 10px 10px;text-decoration:none;color:#1f2b25;background:#f8f4ea;
  border-radius:6px 9px 7px 10px;box-shadow:0 0 0 1px rgba(60,50,30,.10),0 18px 30px -24px rgba(50,40,20,.55);transition:transform .3s}
.px-ya a:hover{transform:translateY(-3px) rotate(-.3deg)}
.px-ya img{width:84px;height:auto;flex:none;border-radius:4px;background:radial-gradient(closest-side,#efe3c6,rgba(239,227,198,0))}
.px-ya span{display:flex;flex-direction:column;font:650 1.08rem/1.15 var(--dt-disp)}
.px-ya small{font:700 11.5px/1.3 var(--dt-letra);letter-spacing:.08em;text-transform:uppercase;color:#6b5a2e;margin-bottom:3px}

/* 404 */
.dt-404 .px-kicker{color:#2f4a3a}
.dt-404 .px-dudi{left:-30px}

@media (max-width:1100px){.px-ya ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .px-hero{grid-template-columns:1fr;gap:26px;padding-top:4px}
  .px-arte{max-width:520px;margin:0 auto;width:100%;padding-left:60px}
  .px-dudi{left:-6px;width:120px}
}
@media (max-width:560px){
  .px-hero h1{font-size:2.3rem}
  .px-btn{flex:1 1 auto}
  .px-ya ul{grid-template-columns:1fr;gap:12px}
  .px-arte{padding-left:44px}
  .px-dudi{width:104px;left:-8px}
  .px-sello{right:14px;top:14px;font-size:11px;padding:6px 10px 5px}
}
@media (prefers-reduced-motion:reduce){.px-dudi{animation:none}.px-btn,.px-ya a{transition:none}}