/*
Theme Name: IDPP - Defensa con rostro (linea 1)
Theme URI: https://idpp01.nube4.cloud
Author: Proyecto hosting IDPP
Description: Maqueta de demostracion de la linea grafica "Defensa con rostro" (dossiers/03-defensa-con-rostro-fusion.html) para el nuevo sitio del Instituto de la Defensa Publica Penal de Guatemala.
Version: 0.1.0
Requires PHP: 8.0
Text Domain: idpp01
*/

/* ══════════════════════════════════════════════════════════════
   PALETA IDPP - documento Pantone Institucional 2026
   Los dos primeros son oficiales. Los tres siguientes son
   colores de INTERFAZ, no de marca.
   ══════════════════════════════════════════════════════════════ */
:root{
  --idpp-principal:#1B365D;
  --idpp-marino:#10243F;
  --idpp-profundo:#0D2745;
  --idpp-ambar:#F7A426;
  --idpp-tierra:#B23A2E;
  --idpp-verde:#1F6F63;

  --ground:#FDFAF4;
  --surface:#FFFFFF;
  --surface-2:#F7F2E8;
  --ink:#1A1730;
  --ink-2:#4A4560;
  --ink-3:#79738F;
  --line:#E4DCCC;
  --line-2:#D2C7B2;
  --brand:var(--idpp-principal);
  --accent:var(--idpp-ambar);
  --accent-ink:#2A1A00;
  --tierra-ink:#FFFFFF;
  --shadow:0 1px 2px rgba(26,23,48,.05), 0 10px 28px -16px rgba(26,23,48,.22);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  font-family:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:18px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-underline-offset:3px}
a:focus-visible,button:focus-visible,.idpp-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3,h4{font-family:Barlow,"Helvetica Neue",Arial,sans-serif;margin:0 0 .5em;text-wrap:balance;letter-spacing:-.02em;line-height:1.12;color:var(--idpp-principal)}
p{margin:0 0 1.1em}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.idpp-wrap{max-width:1180px;margin:0 auto;padding:0 28px}
.screen-reader-text{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ── franja de idiomas ── */
.idpp-langs{background:var(--idpp-marino);color:#D5DFEC;padding:9px 0}
.idpp-langs .idpp-wrap{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.idpp-langs em{font-style:normal;font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.12em;color:#93A9C4;margin-right:6px}
.idpp-langs .pill{font-size:12.5px;color:#D5DFEC;border:1px solid rgba(255,255,255,.3);border-radius:99px;padding:3px 12px;line-height:1.4;text-decoration:none;background:transparent}
.idpp-langs .pill.on{background:var(--idpp-ambar);border-color:var(--idpp-ambar);color:var(--accent-ink);font-weight:700}

/* ── barra superior ── */
.idpp-top{background:#fff;border-bottom:1px solid var(--line)}
.idpp-top .idpp-wrap{display:flex;align-items:center;gap:24px;padding:14px 28px;flex-wrap:wrap}
.idpp-brand{display:flex;flex-direction:column;line-height:1;text-decoration:none;margin-right:auto}
.idpp-brand b{font-family:Barlow,sans-serif;font-weight:800;font-size:28px;letter-spacing:-.03em;color:var(--idpp-principal)}
.idpp-brand small{font-size:10.5px;letter-spacing:.08em;color:var(--ink-3);margin-top:3px}
.idpp-nav{display:flex;gap:26px;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.idpp-nav a{font-family:Barlow,sans-serif;font-weight:600;font-size:15.5px;color:var(--ink-2);text-decoration:none}
.idpp-nav a:hover{color:var(--idpp-principal)}
.idpp-exit{font-family:Barlow,sans-serif;font-size:13px;font-weight:700;color:var(--idpp-tierra);border:1.5px solid var(--idpp-tierra);border-radius:99px;padding:6px 16px;text-decoration:none;white-space:nowrap}
.idpp-exit:hover{background:var(--idpp-tierra);color:#fff}

/* ── hero ── */
.idpp-hero{position:relative;overflow:hidden;min-height:min(72vh,560px);display:flex;align-items:flex-end}
.idpp-hero .photo{position:absolute;inset:0;background:linear-gradient(118deg,#0D2745 0%,#1B365D 46%,#496A8C 100%)}
.idpp-hero .photo::after{content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 80% at 74% 32%, rgba(247,164,38,.35), transparent 62%),
             linear-gradient(0deg, rgba(8,18,34,.86) 10%, rgba(8,18,34,.18) 75%)}
.idpp-hero .cap{position:absolute;top:14px;right:20px;z-index:3;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:rgba(255,255,255,.55);letter-spacing:.06em;text-align:right}
.idpp-hero .idpp-wrap{position:relative;z-index:2;padding:64px 28px 56px}
.idpp-hero h1{color:#fff;font-weight:800;font-size:clamp(32px,5.4vw,58px);max-width:20ch;letter-spacing:-.03em;line-height:1.06}
.idpp-hero .lede{color:rgba(255,255,255,.88);font-size:clamp(16.5px,1.8vw,19px);max-width:52ch;margin-top:16px}
.idpp-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.idpp-btn{font-family:Barlow,sans-serif;font-weight:700;font-size:15.5px;padding:13px 24px;border-radius:6px;text-decoration:none;display:inline-block;line-height:1}
.idpp-btn.solid{background:var(--idpp-ambar);color:var(--accent-ink)}
.idpp-btn.solid:hover{background:#ffb84d}
.idpp-btn.ghost{background:transparent;border:1.5px solid rgba(255,255,255,.8);color:#fff}
.idpp-btn.ghost:hover{background:rgba(255,255,255,.12)}

/* ── tareas ── */
.idpp-tasks{background:var(--surface-2)}
.idpp-tasks .idpp-wrap{padding:36px 28px}
.idpp-tasks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.idpp-task{background:#fff;border:1px solid var(--line);border-top:3px solid var(--idpp-ambar);border-radius:7px;padding:20px 20px 22px;box-shadow:var(--shadow);text-decoration:none;display:block}
.idpp-task b{display:block;font-family:Barlow,sans-serif;font-weight:700;font-size:17px;color:var(--idpp-principal);line-height:1.25;margin-bottom:8px}
.idpp-task span{font-size:15px;color:var(--ink-2);line-height:1.4}

/* ── franja de datos ── */
.idpp-data{background:var(--ground);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.idpp-data .idpp-wrap{display:flex;flex-wrap:wrap;padding:0 28px}
.idpp-stat{flex:1 1 220px;padding:26px 24px;border-right:1px solid var(--line)}
.idpp-stat:last-child{border-right:0}
.idpp-stat b{display:block;font-family:"IBM Plex Mono",monospace;font-weight:500;font-size:30px;color:var(--idpp-principal);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.idpp-stat span{display:block;font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);margin-top:8px}

/* ── franja intercultural ── */
.idpp-inter{background:var(--idpp-tierra);color:#fff}
.idpp-inter .idpp-wrap{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:30px 28px}
.idpp-inter b{font-family:Barlow,sans-serif;font-weight:800;font-size:clamp(19px,2.6vw,25px);line-height:1.2;max-width:26ch;margin:0}
.idpp-inter p{font-size:15px;color:rgba(255,255,255,.85);max-width:42ch;margin:8px 0 0}
.idpp-inter .idpp-btn{margin-left:auto;flex:none}

/* ── contenido de paginas internas ── */
.idpp-page{padding:56px 0 72px}
.idpp-page .idpp-wrap{max-width:840px}
.idpp-page h1{font-size:clamp(28px,4vw,40px);margin-bottom:22px}
.idpp-page .entry-content{font-size:17.5px;color:var(--ink-2)}
.idpp-page .entry-content > *:first-child{margin-top:0}

/* ── pie ── */
.idpp-footer{background:var(--idpp-marino);color:#C7CEDB}
.idpp-footer .idpp-wrap{padding:44px 28px 30px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:32px}
.idpp-footer h4{font-family:Barlow,sans-serif;font-weight:700;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.idpp-footer p,.idpp-footer li{font-size:14.5px;color:#B6BFD1;line-height:1.6}
.idpp-footer ul{list-style:none;margin:0;padding:0}
.idpp-footer a{color:#D5DFEC;text-decoration:none}
.idpp-footer a:hover{color:var(--idpp-ambar)}
.idpp-footer .idpp-brand b{color:#fff}
.idpp-footer .idpp-brand small{color:#93A9C4}
.idpp-footer-note{border-top:1px solid rgba(255,255,255,.12);padding:16px 28px;font-size:12.5px;color:#8494AC;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;max-width:1180px;margin:0 auto}

@media (max-width:960px){
  .idpp-tasks-grid{grid-template-columns:1fr 1fr}
  .idpp-footer .idpp-wrap{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .idpp-top .idpp-wrap{gap:12px 20px}
  .idpp-nav{gap:16px;order:3;width:100%}
  .idpp-tasks-grid{grid-template-columns:1fr}
  .idpp-stat{flex:1 1 45%;border-right:0;border-bottom:1px solid var(--line)}
  .idpp-inter .idpp-btn{margin-left:0}
  .idpp-footer .idpp-wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}