/* maumunoz.com — brand tokens from projects/brand/maumunoz-brand.md (reference CSS: Clínica Bíblica deck). */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Archivo-400.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/Archivo-500.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Archivo-600.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/Archivo-700.woff2) format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/Archivo-800.woff2) format('woff2')}
@font-face{font-family:'Bodoni Moda';font-style:italic;font-weight:500;font-display:swap;src:url(../fonts/BodoniModa-500i.woff2) format('woff2')}

:root{
  --sans:'Archivo',Helvetica,Arial,sans-serif; --serif:'Bodoni Moda',Georgia,serif;
  --grain:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --gutter:clamp(1rem,5vw,4.5rem); --max:1180px; --r:18px;
}
/* Light only (Mau, 2026-10-18): the brand's off-white "paper" base, espresso ink, bronze details.
   Graphite returns in one dark band (.band) so the three colours play together. */
:root{
  color-scheme:light;
  --bg:#F6F1E9; --ink:#211F1C; --muted:#4A4033; --accent:#55452B; --dot:#AB8D5D;
  --card:rgba(255,253,248,.72); --cardedge:rgba(171,141,93,.22);
  --btn-bg:#211F1C; --btn-ink:#F6F1E9; --ghost:rgba(255,253,248,.7); --ghostedge:rgba(85,69,43,.28);
  --rule:rgba(33,31,28,.14); --bar:rgba(250,246,239,.78);
  --haze:
   radial-gradient(80% 70% at 0% 0%,#FFFDF8 0%,rgba(255,253,248,0) 70%),
   radial-gradient(90% 80% at 100% 100%,rgba(208,178,133,.22) 0%,rgba(208,178,133,0) 75%),
   linear-gradient(160deg,#F8F3EA 0%,#F1E8D9 100%);
  --grain-op:.2; --grain-blend:multiply;
  --photo-filter:saturate(.85) sepia(.06) contrast(1.03);
}
.band{
  --ink:#F4F1EC; --muted:#BDB8B0; --accent:#E8D3AC; --dot:#AB8D5D;
  --btn-bg:#F4F1EC; --btn-ink:#211F1C; --ghost:rgba(244,241,236,.07); --ghostedge:rgba(244,241,236,.24); --rule:rgba(244,241,236,.14);
  color:var(--ink);position:relative;isolation:isolate;
  background:
   radial-gradient(90% 75% at 5% 0%,rgba(118,115,109,.55) 0%,rgba(118,115,109,.22) 40%,rgba(118,115,109,0) 80%),
   radial-gradient(85% 70% at 100% 70%,rgba(92,89,84,.42) 0%,rgba(92,89,84,.16) 45%,rgba(92,89,84,0) 85%),
   radial-gradient(160% 130% at 50% 50%,#222220 0%,#0D0D0D 100%);
}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:300px 300px;opacity:.34;mix-blend-mode:overlay;pointer-events:none}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden;position:relative;isolation:isolate}
body::before{content:"";position:fixed;inset:0;z-index:-2;background:var(--haze)}
body::after{content:"";position:fixed;inset:0;z-index:-1;background-image:var(--grain);background-size:300px 300px;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend);pointer-events:none}
img{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-9999px;top:0;background:var(--btn-bg);color:var(--btn-ink);padding:.6rem 1rem;border-radius:999px;z-index:50}
.skip:focus{left:1rem;top:1rem}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}

/* Type */
.s{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--accent);letter-spacing:-.01em}
.kicker{font-size:.8rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:1.1rem}
h1,h2,h3{font-weight:800;letter-spacing:-.035em;line-height:1}
h1 .s,h2 .s{font-size:1.04em}
.impact{font-size:clamp(2.7rem,6.4vw,5.6rem);line-height:.97}
h2{font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.02}
h3{font-size:1.5rem;letter-spacing:-.02em}
p{max-width:62ch}
.lede{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;margin-top:1.6rem;max-width:34ch}

/* Header */
.bar{position:fixed;top:0;left:0;right:0;z-index:30;transition:background .3s ease,box-shadow .3s ease}
.bar.solid{background:var(--bar);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 .5px 0 var(--rule)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.wm{font-weight:800;font-size:1.45rem;letter-spacing:-.045em;line-height:1;text-decoration:none}
.wm .p{color:var(--dot)}
.ctrls{display:flex;gap:.5rem;align-items:center}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:.35rem;height:38px;min-width:38px;padding:0 .8rem;border-radius:999px;border:1px solid var(--ghostedge);background:var(--ghost);color:var(--ink);font:600 .78rem/1 var(--sans);letter-spacing:.12em;text-decoration:none;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.chip svg{width:17px;height:17px}
.chip.icon{padding:0}

/* Buttons */
.btns{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;min-height:52px;padding:0 1.6rem;border-radius:999px;font:700 1rem/1 var(--sans);letter-spacing:-.005em;text-decoration:none;transition:transform .15s ease,background .2s ease}
.btn svg{width:19px;height:19px;flex:none}
.btn.primary{background:var(--btn-bg);color:var(--btn-ink)}
.btn.ghost{background:var(--ghost);color:var(--ink);border:1px solid var(--ghostedge);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn:hover{transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}html{scroll-behavior:auto}}

/* Hero */
.hero{min-height:min(100svh,980px);display:flex;align-items:flex-end;padding:72px 0 0;position:relative}
.hero .wrap{display:grid;grid-template-columns:1fr;gap:0;align-items:end}
.hero-txt{padding-bottom:clamp(2.5rem,8vh,6rem);position:relative;z-index:1}
.bio{margin-top:1.4rem;font-size:.92rem;font-weight:500;letter-spacing:.04em;color:var(--muted)}
.portrait{position:relative;justify-self:center;width:min(86vw,400px);order:-1;margin-bottom:-2.5rem;
  -webkit-mask-image:linear-gradient(to bottom,#000 62%,transparent 98%);mask-image:linear-gradient(to bottom,#000 62%,transparent 98%)}
.portrait img{width:100%;height:auto;filter:saturate(.85) sepia(.06) contrast(1.02)}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.5rem;align-items:end}
  .portrait{order:0;justify-self:center;align-self:end;width:auto;margin-bottom:0}
  /* The photo leads: it rises above the first line of text and runs past the buttons into the fade. */
  .portrait img{height:clamp(560px,90vh,880px);width:auto;max-width:none}
  .hero-txt{padding-bottom:clamp(5rem,16vh,10rem);align-self:end}
}
.hero .kicker{text-transform:none;letter-spacing:.06em;font-size:.95rem;font-weight:500}

/* Sections */
section{position:relative}
.sec{padding:clamp(4.5rem,11vw,8.5rem) 0}
.frost{background:var(--card);border:.5px solid var(--cardedge);border-radius:var(--r);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}

/* Story */
.story-grid{display:grid;gap:2.4rem}
.story-body p+p{margin-top:1.15rem}
.story-body p{font-size:clamp(1.08rem,1.35vw,1.2rem);line-height:1.65}
@media (min-width:980px){
  .story-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:5rem}
  .story-grid h2{position:sticky;top:110px}
}

/* Roles */
.roles-head{margin-bottom:2.6rem}
.roles{display:grid;grid-template-columns:1fr;gap:1rem}
.role{overflow:hidden;display:flex;flex-direction:column}
.role .ph{position:relative;aspect-ratio:4/3;overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom,#000 70%,transparent 100%);mask-image:linear-gradient(to bottom,#000 70%,transparent 100%)}
.role .ph img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 30%);filter:var(--photo-filter)}
.role .ph::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:300px 300px;opacity:var(--grain-op);mix-blend-mode:var(--grain-blend)}
.role .tx{padding:0 1.6rem 1.8rem;margin-top:-1.4rem;position:relative}
.role h3{display:flex;align-items:baseline;gap:.6rem}
.role h3 .n{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1rem;color:var(--accent);letter-spacing:0}
.role p{margin-top:.7rem;font-size:1rem;line-height:1.6}
@media (min-width:760px){.roles{grid-template-columns:1fr 1fr;gap:1.25rem}}

/* Timeline */
.tl{list-style:none;margin-top:2.6rem;border-top:.5px solid var(--rule)}
.tl li{display:grid;grid-template-columns:1fr;gap:.2rem;padding:1.25rem 0;border-bottom:.5px solid var(--rule)}
.tl .y{font-size:.85rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.tl .t{font-weight:700;font-size:1.15rem;letter-spacing:-.015em}
.tl .d{color:var(--muted);font-size:1rem}
.tl li.now .y{color:var(--accent)}
@media (min-width:760px){.tl li{grid-template-columns:10rem minmax(0,1fr) minmax(0,1.2fr);gap:1.5rem;align-items:baseline}}

/* Contact */
.contact{text-align:center}
.contact h2{max-width:20ch;margin:0 auto}
.contact p{margin:1.4rem auto 0}
.contact .btns{justify-content:center}
.sig{display:block;width:clamp(130px,18vw,190px);height:auto;margin:2.6rem auto 0;fill:var(--accent);opacity:.9}
.mail{display:block;width:max-content;margin:1.6rem auto 0;font-weight:600;text-underline-offset:4px;text-decoration-thickness:1px}

/* Social icons */
.social{display:flex;gap:.6rem;justify-content:center;list-style:none}
.social a{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:999px;color:var(--ink);background:var(--ghost);border:1px solid var(--ghostedge)}
.social svg{width:20px;height:20px;fill:currentColor}

/* Footer */
footer{padding:3rem 0 2.6rem}
.contact{padding-bottom:3rem}
footer .wrap{display:flex;flex-direction:column;gap:1.4rem;align-items:center;text-align:center}
footer small{color:var(--muted);font-size:.85rem}

/* Utility pages: /connect and /book */
.u-main{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:88px var(--gutter) 2.5rem}
.card-u{width:100%;max-width:440px;padding:2.2rem 1.6rem 2rem;text-align:center}
.avatar{width:120px;height:120px;margin:0 auto 1.3rem;border-radius:999px;overflow:hidden;background:#fff;border:1px solid var(--cardedge);position:relative}
/* Head-and-shoulders crop of the cutout portrait. */
.avatar img{position:absolute;width:165%;max-width:none;height:auto;left:50%;top:7%;transform:translateX(-50%)}
.card-u h1{font-size:clamp(2.1rem,9vw,2.6rem);line-height:1.02}
.card-u .line{margin:.8rem auto 0;color:var(--muted);font-size:1rem}
.stack{display:flex;flex-direction:column;gap:.65rem;margin-top:1.8rem}
.stack .btn{width:100%}
.card-u .social{margin-top:1.8rem}
.book{width:100%;max-width:820px}
.book h1{font-size:clamp(2.3rem,6vw,3.6rem);line-height:1}
.book p{margin-top:1rem}
.cal{margin-top:2rem;padding:.6rem;border-radius:var(--r);background:#FFFDF8;border:.5px solid var(--cardedge);overflow:hidden}
.cal iframe{display:block;width:100%;height:640px;border:0;border-radius:12px;background:#fff}
.fallback{margin-top:1rem;font-size:.95rem;color:var(--muted)}
.fallback a{font-weight:600;color:var(--ink)}
.back{display:inline-block;margin-top:1.8rem;font-weight:600;font-size:.95rem;text-underline-offset:4px}
@media (min-width:700px){.cal iframe{height:700px}}

/* Language blocks on single-URL pages */
html[lang="en"] [data-l="es"],html[lang="es"] [data-l="en"]{display:none !important}