:root{
  --ink:#0B1A2E;
  --navy:#173366;
  --mint:#A9E8D8;
  --mint-deep:#1F7D68;
  --paper:#FFFFFF;
  --wash:#EDF1F6;
  --wash-2:#F6F8FB;
  --rule:#D3DBE6;
  --muted:#5C6B80;
  --grey-deep:#7C879A;
  --display:"Bricolage Grotesque","Trebuchet MS",system-ui,sans-serif;
  --body:"IBM Plex Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --maxw:1180px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--body);font-size:16px;line-height:1.55;
}
a{color:var(--navy);text-decoration:none;border-bottom:1px solid rgba(23,51,102,.28)}
a:hover{border-bottom-color:var(--navy)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;background:var(--navy);color:#fff;padding:8px 14px;border-radius:6px;z-index:60}

/* ---------- Encabezado ---------- */
.masthead{background:linear-gradient(180deg,var(--wash-2) 0%,var(--paper) 100%);
  border-bottom:1px solid var(--rule);padding:52px 0 40px}
.lang{display:flex;justify-content:flex-end;gap:8px;margin-bottom:26px;font-size:.88rem}
.lang a,.lang span{border:1px solid var(--rule);border-radius:6px;padding:4px 11px;color:var(--muted)}
.lang span[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff}
.identity{display:flex;flex-wrap:wrap;gap:40px;align-items:flex-end;justify-content:space-between}
.identity h1{font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,7vw,4.9rem);line-height:.94;letter-spacing:-.035em;margin:0;max-width:9ch}
.identity h1 span{display:block}
.standfirst{max-width:46ch;margin:0;color:var(--muted);font-size:1.06rem}
.standfirst strong{color:var(--ink);font-weight:600}
.mint-rule{height:6px;width:96px;background:var(--mint);margin:0 0 22px;border-radius:3px}
.live-strip{margin-top:34px;border-top:1px solid var(--rule);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px 26px;align-items:baseline}
.live-strip p{margin:0;color:var(--muted);font-size:.9rem;max-width:24ch}
.live-strip ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0}
.live-strip a{border:1px solid var(--rule);border-radius:999px;padding:6px 14px;
  font-size:.9rem;font-weight:500;background:var(--paper);display:inline-flex;align-items:center;gap:8px}
.live-strip a:hover{border-color:var(--mint-deep);background:#F2FBF8}
.dot{width:7px;height:7px;border-radius:50%;background:var(--mint-deep);flex:none}
.contact-row{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:26px;font-size:.92rem;color:var(--muted)}

/* ---------- Barra del índice ---------- */
.ledger-bar{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.ledger-bar .wrap{display:flex;flex-wrap:wrap;gap:14px;align-items:center;padding-top:12px;padding-bottom:12px}
#count{font-weight:600;font-size:.95rem;white-space:nowrap}
#count b{font-family:var(--display);font-weight:700;font-size:1.15rem}
.search{flex:1 1 240px;min-width:200px}
.search input{width:100%;font:inherit;font-size:.95rem;padding:9px 14px;
  border:1px solid var(--rule);border-radius:8px;background:var(--paper);color:var(--ink)}
.search input::placeholder{color:var(--grey-deep)}
.search input:focus{border-color:var(--navy)}
.btn-reset{font:inherit;font-size:.9rem;background:none;border:1px solid var(--rule);
  border-radius:8px;padding:9px 14px;cursor:pointer;color:var(--muted)}
.btn-reset:hover{border-color:var(--navy);color:var(--navy)}
.btn-facets{display:none}

/* ---------- Cuerpo ---------- */
.body-grid{display:grid;grid-template-columns:224px 1fr;gap:48px;padding-top:36px;padding-bottom:80px}
.facets{align-self:start;position:sticky;top:76px}
.facet-group{margin-bottom:26px}
.facet-group h2{font-family:var(--body);font-size:.82rem;font-weight:600;color:var(--grey-deep);margin:0 0 10px}
.facet-group ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:.87rem;background:var(--paper);border:1px solid var(--rule);
  border-radius:7px;padding:5px 11px;cursor:pointer;color:var(--ink);line-height:1.3;text-align:left}
.chip:hover{border-color:var(--navy)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip .n{color:var(--grey-deep);font-size:.8em;margin-left:5px}
.chip[aria-pressed="true"] .n{color:rgba(255,255,255,.65)}

/* ---------- Filas ---------- */
.rows{min-width:0}
.section-head{display:flex;align-items:baseline;gap:12px;margin:0 0 4px;padding-top:10px}
.section-head h2{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.02em;margin:0}
.section-head span{color:var(--grey-deep);font-size:.88rem}
.section + .section{margin-top:40px}
.entry{border-bottom:1px solid var(--rule)}
.entry > summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:4px 1fr auto;gap:0 18px;align-items:start;padding:16px 0}
.entry > summary::-webkit-details-marker{display:none}
.stripe{width:4px;border-radius:2px;align-self:stretch;min-height:38px}
.st-vivo .stripe{background:var(--mint-deep)}
.st-publico .stripe{background:var(--navy)}
.st-privado .stripe{background:var(--rule)}
.entry-main{min-width:0}
.entry-title{font-family:var(--display);font-weight:700;font-size:1.08rem;letter-spacing:-.012em;margin:0 0 3px}
.entry-role{margin:0;color:var(--muted);font-size:.93rem}
.entry-meta{margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:.76rem;color:var(--muted);background:var(--wash);border-radius:5px;padding:2px 8px;white-space:nowrap}
.tag.state-vivo{background:#E4F6F0;color:var(--mint-deep);font-weight:500}
.tag.state-privado{color:var(--grey-deep)}
.chev{align-self:center;width:22px;height:22px;flex:none;border:1px solid var(--rule);
  border-radius:50%;display:grid;place-items:center;color:var(--muted);transition:transform .18s ease}
.entry[open] .chev{transform:rotate(180deg);border-color:var(--navy);color:var(--navy)}
.chev svg{width:11px;height:11px}
.entry-body{padding:2px 0 22px 22px;max-width:68ch}
.entry-body ul{margin:0 0 14px;padding-left:18px}
.entry-body li{margin-bottom:5px;color:#22304a}
.evidence{border-left:2px solid var(--mint);padding:2px 0 2px 14px;font-size:.93rem;color:var(--muted)}
.evidence a{font-weight:500}
.pending{margin-top:12px;font-size:.88rem;color:#8A6A1F;background:#FDF7E7;
  border:1px dashed #E3CE94;border-radius:7px;padding:8px 12px}
.empty{padding:60px 0;text-align:center;color:var(--muted)}
.empty button{margin-top:12px}

/* ---------- Formación ---------- */
.cred{display:grid;grid-template-columns:1fr auto;gap:6px 20px;padding:15px 0;
  border-bottom:1px solid var(--rule);align-items:baseline}
.cred h3{font-family:var(--display);font-weight:700;font-size:1rem;margin:0}
.cred p{margin:2px 0 0;color:var(--muted);font-size:.93rem}
.cred .yr{color:var(--grey-deep);font-size:.9rem;white-space:nowrap}

/* ---------- Cierre ---------- */
.closing{background:var(--navy);color:#fff;padding:64px 0}
.closing h2{font-family:var(--display);font-weight:800;font-size:clamp(1.8rem,4.2vw,2.7rem);
  letter-spacing:-.03em;margin:0 0 14px;max-width:18ch;line-height:1.05}
.closing p{max-width:52ch;color:#C6D2E6;margin:0 0 26px}
.closing a.cta{display:inline-block;background:var(--mint);color:var(--ink);
  border-radius:9px;padding:13px 26px;font-weight:600;font-size:1rem;border:none}
.closing a.cta:hover{background:#8FDCC8}
.closing .alt{display:block;margin-top:18px;color:#9FB4D4;font-size:.93rem}
.closing .alt a{color:#fff;border-bottom-color:rgba(255,255,255,.4)}
footer{padding:26px 0;font-size:.85rem;color:var(--grey-deep)}

@media (max-width:860px){
  .body-grid{grid-template-columns:1fr;gap:0;padding-top:20px}
  .facets{position:static;display:none;padding:18px 0 4px;border-bottom:1px solid var(--rule);margin-bottom:16px}
  .facets.open{display:block}
  .btn-facets{display:inline-block;font:inherit;font-size:.9rem;background:none;
    border:1px solid var(--rule);border-radius:8px;padding:9px 14px;cursor:pointer;color:var(--muted)}
  .btn-facets[aria-expanded="true"]{background:var(--navy);color:#fff;border-color:var(--navy)}
  .identity{gap:22px}
  .masthead{padding:30px 0 30px}
  .entry-body{padding-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ==========================================================
   Capa gráfica: mosaico de portada, fichas, monogramas y rejilla
   ========================================================== */

/* --- mosaico del encabezado --- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center}
.hero-copy{min-width:0}
.mosaic{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-width:0}
.hero-photo{display:block;width:100%;max-width:440px;height:auto;justify-self:end;align-self:end;min-width:0}
.mosaic img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;display:block;
  background:var(--wash);border:1px solid var(--rule)}
.identity{display:block}
.identity h1{max-width:none}
.standfirst{margin-top:20px}

/* --- ficha ancha de producto --- */
.feature{border-bottom:1px solid var(--rule)}
.feature > summary{list-style:none;cursor:pointer;display:grid;
  grid-template-columns:212px 1fr auto;gap:0 22px;align-items:center;padding:18px 0}
.feature > summary::-webkit-details-marker{display:none}
.feature-shot{border-radius:11px;overflow:hidden;background:var(--wash);
  aspect-ratio:3/2;display:block;border:1px solid var(--rule)}
.feature-shot img{width:100%;height:100%;object-fit:cover;display:block}
.feature-main{min-width:0}
.feature-body{padding-left:234px}
.feature .entry-title{font-size:1.22rem}

/* --- monograma para trabajo de cliente --- */
.entry > summary{grid-template-columns:4px 46px 1fr auto;gap:0 16px;align-items:center}
.mono{width:46px;height:46px;border-radius:10px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  color:var(--navy);background:var(--wash);border:1px solid var(--rule)}
.st-privado .mono{color:var(--grey-deep)}
.entry-body{padding-left:66px}

/* --- rejilla de marca y diseño --- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:14px}
.tile{display:block;border:none;border-radius:12px;overflow:hidden;background:var(--paper);
  border:1px solid var(--rule);transition:border-color .16s ease}
.tile:hover{border-color:var(--navy)}
.tile-shot{display:block;aspect-ratio:3/2;background:var(--wash);overflow:hidden}
.tile-shot img{width:100%;height:100%;object-fit:cover;display:block}
.tile-mono{display:grid;place-items:center;width:100%;height:100%;
  font-family:var(--display);font-weight:700;font-size:2rem;color:var(--grey-deep)}
.tile-text{display:block;padding:12px 14px 14px}
.tile-title{display:block;font-family:var(--display);font-weight:700;font-size:1rem;
  letter-spacing:-.012em;color:var(--ink);margin-bottom:2px}
.tile-role{display:block;color:var(--muted);font-size:.88rem;line-height:1.4}

@media (max-width:1080px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;gap:30px}
  .hero-photo{max-width:300px;margin:0 auto;justify-self:center}
  .mosaic{gap:6px}
  .feature > summary{grid-template-columns:128px 1fr auto;gap:0 16px}
  .feature-body{padding-left:0}
  .feature .entry-title{font-size:1.08rem}
  .entry > summary{grid-template-columns:4px 40px 1fr auto;gap:0 12px}
  .mono{width:40px;height:40px;font-size:1rem}
  .entry-body{padding-left:0}
}
@media (max-width:520px){
  .grid{grid-template-columns:1fr}
}

/* En teléfono las fichas de producto se apilan: portada arriba, texto debajo. */
@media (max-width:640px){
  .feature > summary{grid-template-columns:1fr auto;gap:14px 14px;align-items:start;padding:20px 0}
  .feature-shot{grid-column:1 / -1;width:100%}
  .feature .chev{align-self:start;margin-top:2px}
  .entry-meta .tag:nth-child(n+5){display:none}
  .mosaic{grid-template-columns:repeat(3,1fr)}
}

/* Enlace de regreso al portal cuando la pagina vive dentro de thezaoeffect.com */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:26px}
.back{font-size:.88rem;color:var(--muted);border:none;display:inline-flex;align-items:center;gap:7px}
.back:hover{color:var(--navy)}
.back::before{content:"";width:9px;height:9px;border-left:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);display:inline-block}
.lang{margin-bottom:0}

/* guard: decorative overflow must never widen the page canvas on phones */
html,body{overflow-x:clip}