/* PILOKO · editorial rojo/blanco. Load after the existing shared site styles.
   Photo overlays, gallery captions and the lightbox keep a local dark palette.
   This stylesheet is never attached to the independent live-scene home. */
:root{
  color-scheme:light;
  --bg:#fff;--s1:#fff;--s2:#faf8f5;--s3:#f5f1ed;--s4:#ede7df;
  --line:#e6e0d8;--line-soft:#f0ece6;--ctrl:#b1aaa0;
  --ink:#141210;--ink2:#302c28;--body:#4a4642;
  /* The proposal's #7d786f is reserved for non-text decoration. */
  --mut:#706a63;--mut2:#706a63;--mut3:#706a63;--off:#706a63;
  --acc:#d8232f;--acc-h:#b51c27;--acc-b:#a91823;--hero-accent:#ff6b74;
  --ph:repeating-linear-gradient(135deg,#f5f1ed 0 8px,#eee8e0 8px 16px);
  --ph-hero:repeating-linear-gradient(135deg,#1a1917 0 8px,#141312 8px 16px);
  --sans:Archivo,Helvetica,Arial,sans-serif;--mono:"IBM Plex Mono",monospace;
}
body{background:#fff;color:var(--ink)}
::selection{background:#d8232f;color:#fff}
a,button,input,textarea,select{touch-action:manipulation}
:focus-visible{outline:2px solid var(--acc);outline-offset:4px}
header.top{background:rgba(255,255,255,.96);border-bottom-color:var(--line);gap:18px 30px;padding:20px var(--pad)}
header.top .brand{font-family:var(--sans);font-size:31px;line-height:1;font-weight:700;letter-spacing:-.055em;color:var(--acc);flex:0 0 auto}
header.top .brand:hover{color:var(--acc-h)}
nav.n{min-width:0;justify-content:flex-end;gap:4px;font-size:10px;letter-spacing:.08em;line-height:1.6}
nav.n a{color:var(--body);padding:10px 11px}
nav.n a:hover,nav.n a[aria-current]{color:var(--acc)}
nav.n .sep{background:var(--line);margin:8px 6px}
nav.n a.soc,nav.n a.priv{color:var(--mut)}
nav.n a.cta-nav{background:var(--acc);color:#fff;margin-left:8px;padding:10px 15px}
nav.n a.cta-nav:hover{background:var(--acc-h);color:#fff}
.page{padding-top:clamp(36px,6vw,76px)}
main :is(h2[id],h3[id],section[id]){scroll-margin-top:110px}
.h1,article.post h1{font-weight:500;letter-spacing:-.045em}
.landing h2,article.post .body h2{font-weight:500;letter-spacing:-.035em}
.k.acc,.acc{color:var(--acc)}
.btn{line-height:1.5;min-height:44px;max-width:100%;text-align:center;letter-spacing:.1em}
.btn.claro,.btn.acento{background:var(--acc);color:#fff}
.btn.claro:hover,.btn.acento:hover{background:var(--acc-h);color:#fff}
.btn.negro{background:var(--ink);color:#fff}
.btn.negro:hover{background:#302c28;color:#fff}
.btn.linea{color:var(--ink);border-color:var(--line);background:#fff}
.btn.linea:hover{color:var(--acc);border-color:var(--acc)}
.banda{background:var(--acc);color:#fff}
.banda a:hover{color:#fff}
.banda .btn.negro{background:#fff;color:#141210}
.banda .btn.negro:hover{background:#141210;color:#fff}
.tarjetas,.bases{gap:12px}
.tarjetas a,.tarjetas .bloque,.bases .bloque{background:#fff;border:1px solid var(--line)}
.tarjetas a:hover{background:#fff;border-color:var(--acc);color:var(--ink)}
.destacada .txt{background:#fff;border:1px solid var(--line)}
.destacada:hover{opacity:1}
.destacada:hover .txt{border-color:var(--acc)}
.fila:hover{background:#faf8f5}
.chips a,.chips button{background:#fff;border-color:var(--line);color:var(--body)}
.chips a:hover,.chips button:hover{border-color:var(--acc);color:var(--acc)}
.chips button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
.blog-filtros button[aria-pressed="true"] span{color:#fff}
.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px}
.blog-card{background:#fff;border-color:var(--line)}
.blog-card h2{font-weight:500}
.blog-card-label{background:#fff;color:#141210}
.blog-card-read{color:var(--body)}
.blog-filtros button span{color:var(--mut)}
form.f input,form.f textarea,form.f select{background:#fff;border-color:var(--ctrl);color:var(--ink);border-radius:0}
form.f input::placeholder,form.f textarea::placeholder{color:var(--mut);opacity:1}
form.f input:focus,form.f textarea:focus,form.f select:focus{border-color:var(--acc);outline:2px solid #d8232f26;outline-offset:2px}
form.f input[type="checkbox"],form.f input[type="radio"]{accent-color:var(--acc)}
form.f .nota a,article.post .body a:not(.btn),.landing p>a:not(.btn){text-decoration-thickness:1px;text-underline-offset:4px}
form.f .nota a{text-decoration:underline}
article.post .body a:not(.btn):hover,.landing p>a:not(.btn):hover{color:var(--acc)}
.mes .d.hay{background:#fff5f4}.mes .d.fuera{background:#f5f1ed}
footer.pie{background:#fff;border-color:var(--line);padding-bottom:110px}
footer.pie .grande:hover{color:var(--acc)}
/* These elements sit over photography or an intentionally dark viewer. */
.hero,.mosaico a,.piezas a,.piezas figure,.lb,.destacada .foto,.mt-galeria .cap{
  --ink:#f2f0eb;--ink2:#e4e1da;--body:#d8d3ca;--mut:#c6c1b8;--mut2:#c6c1b8;--mut3:#c6c1b8;--off:#b5afa5;
  --acc:#ff6b74;--acc-h:#ff939a;--ctrl:#77716a;color:#f2f0eb;color-scheme:dark;
}
.hero .btn.claro,.hero .btn.acento{background:#d8232f;color:#fff}
.hero .btn.claro:hover,.hero .btn.acento:hover{background:#b51c27;color:#fff}
.hero .btn.linea{background:#14121080;border-color:#ffffff70;color:#fff}
.hero .btn.linea:hover{border-color:#ff6b74;color:#fff}
.mosaico a:hover{color:#fff}
.piezas figcaption,.piezas .cap,.mt-galeria .cap{color:#f2f0eb}
.lb .cerrar,.lb .paso{color:#f2f0eb}
.lb .cerrar:hover,.lb .paso:hover{color:#ff6b74}
/* Older project articles contain their own dark color literals. Keep their
   established layout, video backgrounds and interactive controls. */
.gen-doc{--gen-accent:#d8232f}
.cloud-guide{--guide-gold:#d8232f;--guide-green:#a91823}
.pj{--pj-accent:#d8232f}
.erc-report{--accent:#d8232f}
.gen-doc .intro,.cloud-guide .intro,.pj .pj-deck{color:var(--body)}
.gen-doc .caption,.gen-doc figure figcaption,.gen-doc .facts,
.cloud-guide .caption,.erc-report figcaption,.erc-report .caption,
.pj .pj-caption,.pj #pj-count,.pj .pj-status{color:var(--mut)}
.gen-doc .media-card,.gen-doc .related,.cloud-guide figure,.cloud-guide .related,
.pj .pj-card,.pj .pj-search{background:#fff;border-color:var(--line)}
.gen-doc .note,.gen-doc blockquote,.cloud-guide .note,.cloud-guide blockquote,
.cloud-guide .calc,.erc-report .note,.pj .pj-note,.pj blockquote{background:#faf8f5;color:var(--body);border-color:var(--line);border-left-color:var(--acc)}
.gen-doc .toc,.gen-doc details,.gen-doc th,.gen-doc td,.gen-doc .download,
.cloud-guide .toc,.cloud-guide th,.cloud-guide td,.cloud-guide details,.cloud-guide .download,
.erc-report nav,.erc-report details,.erc-report th,.erc-report td,
.pj .pj-toc,.pj .pj-gallery img,.pj th,.pj td,.pj details,.pj details:last-of-type,.pj .pj-foot{border-color:var(--line)}
.gen-doc th,.gen-doc summary,.cloud-guide summary,.pj th,.pj td:first-child,.pj summary{color:var(--ink)}
.cloud-guide .steps strong,.cloud-guide figcaption strong,.pj .pj-entry h3{color:var(--acc)}
.cloud-guide label{color:var(--body)}
.cloud-guide input,.pj input{background:#fff;color:var(--ink);border-color:var(--ctrl)}
.cloud-guide .calc-output{color:var(--acc);border-color:var(--line)}
.pj .pj-secondary,.pj button,.erc-report .actions a{color:var(--ink);background:#fff;border-color:var(--ctrl)}
.pj .pj-play,.erc-report .actions a:first-child{background:var(--acc);color:#fff;border-color:var(--acc)}
.pj .pj-play:hover,.erc-report .actions a:first-child:hover{background:var(--acc-h);color:#fff}
.erc-report blockquote{border-color:var(--acc)}
.mt-hero-txt,.mt-sellos div,.mt-card,.mt-pasos div,.mt-info{background:#fff;border:1px solid var(--line)}
.mt-card:hover{background:#fff;border-color:var(--acc);color:var(--ink)}
.mt-error{color:#b51c27}.mt-form [aria-invalid="true"]{border-color:#b51c27}
.mt-preview{background:#fff1f0;color:#a91823}
/* Existing fixed contact links have inline colors. Override only this known
   public contact component; destinations and interaction remain untouched. */
aside[aria-label="Contactar a Piloko"]{flex-wrap:wrap;justify-content:flex-end}
aside[aria-label="Contactar a Piloko"]>a{border-radius:0!important;line-height:1.4}
aside[aria-label="Contactar a Piloko"]>a:first-child{background:#d8232f!important;color:#fff!important;border-color:#d8232f!important}
aside[aria-label="Contactar a Piloko"]>a:last-child{background:#fff!important;color:#141210!important;border:1px solid #e6e0d8!important}
/* The same real PROCA / PROCA Ed cases are embedded by the build step. */
.piloko-product-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:24px 0}
.piloko-product-case{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:22px 20px;border:1px solid #e6e0d8;border-top:3px solid #d8232f;color:#141210;min-width:0;background:#fff}
.piloko-product-case:hover{border-color:#d8232f;color:#141210}
.piloko-product-type,.piloko-product-visit{font:9px/1.7 var(--mono);color:#d8232f}
.piloko-product-case strong{font-size:28px;font-weight:600;letter-spacing:-.04em;line-height:1;color:#141210}
.landing .piloko-product-case p,.piloko-product-case p{font-size:14px;line-height:1.7;margin:0;color:#4a4642}
.piloko-product-visit{margin-top:auto;padding-top:8px}
@media(max-width:1000px){
  .blog-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 20px}
  header.top{gap:18px}nav.n{gap:3px}nav.n a{padding-inline:9px}
}
@media(max-width:800px){
  header.top{align-items:flex-start;position:relative;padding-block:22px}
  header.top .brand{font-size:30px}
  nav.n{flex:1 1 100%;justify-content:flex-start}
  nav.n a.cta-nav{margin-left:0}
  main :is(h2[id],h3[id],section[id]){scroll-margin-top:24px}
}
@media(max-width:620px){
  header.top{padding-block:16px;gap:12px}
  header.top .brand{font-size:28px}
  nav.n{display:flex;flex-wrap:wrap;width:100%;gap:0 12px;font-size:9px;letter-spacing:.05em}
  nav.n a{min-width:0;padding:10px 0;overflow-wrap:anywhere}
  nav.n a.soc{display:none}
  nav.n .sep{display:none}
  nav.n a.cta-nav{position:absolute;top:16px;right:var(--pad);padding:8px 10px;min-height:30px;font-size:8px;text-align:center;letter-spacing:.04em}
  .blog-grid{grid-template-columns:minmax(0,1fr)}
  .blog-page .blog-card{display:grid;grid-template-columns:minmax(0,1fr) 96px;align-items:start;gap:16px;padding:22px 0;border:0;border-bottom:1px solid var(--line)}
  .blog-page .blog-card:hover{border-bottom-color:var(--acc)}
  .blog-page .blog-card-image{grid-column:2;grid-row:1;aspect-ratio:1;margin-top:22px}
  .blog-page .blog-card-copy{grid-column:1;grid-row:1;padding:0;min-width:0}
  .blog-page .blog-card h2{font-size:19px;line-height:1.22;letter-spacing:-.02em}
  .blog-page .blog-card-meta{font-size:9px;gap:5px 10px;margin-bottom:9px}
  .blog-page .blog-card-copy>p{font-size:13px;line-height:1.55;margin-bottom:16px}
  .blog-page .blog-card-label{left:5px;bottom:5px;font-size:8px;padding:3px 5px;max-width:calc(100% - 10px);overflow-wrap:anywhere}
  .blog-page .blog-card-read{font-size:10px;padding-top:10px}
  .dos{grid-template-columns:minmax(0,1fr)}
  .tarjetas,.bases{grid-template-columns:minmax(0,1fr)}
  .piloko-product-cases{grid-template-columns:minmax(0,1fr)}
  footer.pie{grid-template-columns:minmax(0,1fr)}
  aside[aria-label="Contactar a Piloko"]>a{padding:10px 12px!important;font-size:12px}
  .mt-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:359px){.blog-page .blog-card{grid-template-columns:minmax(0,1fr) 72px;gap:14px}}

/* Bitácoras hechas a mano: traían paleta oscura propia y sobre blanco quedaban ilegibles. */
.pj,.gen-doc,.cloud-guide,.erc-report{--pj-accent:var(--acc);--gen-accent:var(--acc);--guide-gold:var(--acc);--guide-green:var(--acc);--accent:var(--acc)}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(div,section,aside,article,details,summary,table,thead,tbody,tr,th,td,input,textarea,pre,code,blockquote,figure,figcaption,nav,ul,ol,li,p,span){background:transparent!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(p,li,td,span,div,small,code,pre,blockquote,dd,dt,label,input,textarea,.intro,.pj-deck){color:var(--body)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(h2,h3,h4,th,summary,strong,b){color:var(--ink)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(.caption,figcaption,.facts,.pj-caption,.pj-status,#pj-count){color:var(--mut)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(.eyebrow,.pj-kicker){color:var(--acc-b)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) a:not(.btn):not(.pj-play):not(.pj-secondary):not(.download){color:var(--acc-b)}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) :is(.media-card,.note,.related,.pj-card,.pj-note,.pj-search,blockquote,details,th,td,input,textarea,.toc,.pj-toc,nav){border-color:var(--line)!important}
:is(.gen-doc,.cloud-guide,.pj) :is(.note,.pj-note){border-left-color:var(--acc)!important}
.pj .pj-play,.erc-report .actions a:first-child,:is(.gen-doc,.cloud-guide) .download{background:var(--acc)!important;border-color:var(--acc)!important;color:#fff!important}
.pj .pj-secondary,.erc-report .actions a:not(:first-child){background:transparent!important;border-color:var(--ink)!important;color:var(--ink)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) video{background:#090a0c!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) button{background:transparent!important;border-color:var(--ink)!important;color:var(--ink)!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) a:not(.btn):not(.pj-play):not(.pj-secondary):not(.download):not(.actions a:first-child){background:transparent!important}
:is(.pj,.gen-doc,.cloud-guide,.erc-report) output{color:var(--ink)!important}

/* Shared minimal footer and editorial figure layouts. */
footer.pie{grid-template-columns:minmax(0,1fr) auto;align-items:center}footer.pie .lead{font-size:16px;line-height:1.6;margin:0 0 10px}footer.pie .m{margin:0}footer.pie>.btn{min-width:150px}article.post .body img{max-width:100%;height:auto}.ai-business{padding-left:0;padding-right:0}.ai-business>p{max-width:65ch}@media(max-width:560px){footer.pie{grid-template-columns:1fr}footer.pie>.btn{justify-self:start}}