/* ===================================================================
   EL ABRAZO DEL ÁNGEL — sistema de diseño
   marfil + verde bosque + dorado · motivo octogonal (núcleo del edificio)
   =================================================================== */

:root{
  --ivory:#F6F1E7;
  --paper:#FBF8F2;
  --forest:#20362C;
  --forest-soft:#33503F;
  --forest-line:#3F5B4C;
  --sage:#8FA48F;
  --lagoon:#4F7C79;
  --gold:#B08D46;
  --gold-soft:#D8C48F;
  --gold-bright:#E4C878;
  --clay:#AD6248;
  --ink:#26302A;
  --max:1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--ivory); color:var(--ink);
  font-family:'Work Sans', sans-serif; font-weight:400; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.display{
  font-family:'Fraunces', serif; font-weight:500; letter-spacing:-0.01em;
  color:var(--forest); margin:0;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 28px;}
.oct{clip-path:polygon(30% 0%,70% 0%,100% 30%,100% 70%,70% 100%,30% 100%,0% 70%,0% 30%);}

/* ---------- header ---------- */
header{
  position:sticky; top:0; z-index:30;
  background:rgba(246,241,231,0.94); backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(43,68,56,0.12);
}
.headbar{display:flex; align-items:center; justify-content:space-between; padding:12px 0;}
.brand{display:flex; align-items:center; gap:12px;}
.brand img{width:42px; height:42px; object-fit:cover; border-radius:50%; border:1px solid var(--gold-soft);}
.brand .name{font-family:'Fraunces',serif; font-size:1rem; color:var(--forest); line-height:1.15;}
.brand .name small{display:block; font-family:'Work Sans',sans-serif; font-size:0.64rem; letter-spacing:0.13em; text-transform:uppercase; color:var(--gold); font-weight:600;}
nav.links{display:flex; gap:24px; font-size:0.84rem; color:var(--forest-soft);}
nav.links a{padding:4px 0; border-bottom:1px solid transparent;}
nav.links a:hover,nav.links a.active{border-color:var(--gold); color:var(--forest);}
.langs{display:flex; gap:6px;}
.langs button,.langs a{
  font-family:'Work Sans',sans-serif; font-size:0.7rem; letter-spacing:0.05em;
  border:1px solid rgba(43,68,56,0.25); background:transparent; color:var(--forest-soft);
  padding:5px 9px; border-radius:20px; cursor:pointer;
}
.langs .active{background:var(--forest); color:var(--ivory); border-color:var(--forest);}
.langs .disabled{opacity:0.4; cursor:default; pointer-events:none;}

/* ---------- page hero (interior pages) ---------- */
.page-hero{background:var(--forest); color:var(--ivory); padding:56px 0 44px; position:relative; overflow:hidden;}
.page-hero .eyebrow{color:var(--gold-bright);}
.page-hero h1{color:var(--ivory); font-size:clamp(1.9rem,4vw,2.7rem); line-height:1.12; max-width:22ch;}
.page-hero p.lead{color:var(--gold-soft); max-width:56ch; margin-top:16px; font-size:1.02rem; line-height:1.6;}
.page-hero .breadcrumb{font-size:0.78rem; color:var(--sage); margin-bottom:14px;}
.page-hero .breadcrumb a{border-bottom:1px solid rgba(216,196,143,0.4);}

/* ---------- eyebrow / labels ---------- */
.eyebrow{font-size:0.72rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold); font-weight:600; display:block; margin-bottom:10px;}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:2px; font-size:0.86rem; letter-spacing:0.02em; border:1px solid var(--forest); transition:all .2s ease;}
.btn-solid{background:var(--forest); color:var(--ivory);}
.btn-solid:hover{background:var(--forest-soft);}
.btn-line{border-color:var(--gold); color:var(--forest);}
.btn-line:hover{background:var(--gold-soft);}
.btn-on-dark{border-color:var(--gold-soft); color:var(--ivory);}
.btn-on-dark:hover{background:rgba(216,196,143,0.15);}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- sections ---------- */
section{padding:64px 0;}
.section-head{max-width:64ch; margin-bottom:40px;}
.section-head h2{font-size:clamp(1.5rem,3vw,2rem);}
.section-head p{color:var(--forest-soft); margin-top:12px; line-height:1.6;}
.tight{padding-top:0;}

/* ---------- folder grid (home) ---------- */
.folders{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.folder{background:var(--paper); border:1px solid rgba(43,68,56,0.14); padding:26px 22px 24px; position:relative; transition:transform .25s ease, box-shadow .25s ease;}
.folder:hover{transform:translateY(-4px); box-shadow:0 18px 32px -18px rgba(43,68,56,0.35);}
.folder .icon{width:42px; height:42px; background:var(--forest); margin-bottom:18px; display:flex; align-items:center; justify-content:center; color:var(--gold-soft); font-family:'Fraunces',serif;}
.folder h3{font-size:1.04rem; margin-bottom:6px;}
.folder p{font-size:0.85rem; color:var(--forest-soft); line-height:1.5; margin:0 0 14px;}
.folder .open{font-size:0.74rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--gold); font-weight:600;}

/* ---------- article / long text content ---------- */
.article{max-width:70ch;}
.article p{margin:0 0 20px; font-size:1.02rem; line-height:1.75; color:var(--ink);}
.article h2{font-size:1.4rem; margin:44px 0 16px;}
.article h3{font-size:1.1rem; margin:28px 0 10px; color:var(--forest-soft);}
.article blockquote{
  border-left:2px solid var(--gold); margin:32px 0; padding:4px 0 4px 22px;
  font-family:'Fraunces',serif; font-style:italic; font-size:1.15rem; color:var(--forest);
}
.pull-signature{font-family:'Fraunces',serif; color:var(--forest); text-align:right; margin-top:6px;}
.pull-signature small{display:block; color:var(--forest-soft); font-family:'Work Sans',sans-serif; font-size:0.8rem;}

/* ---------- tag toggle for dual narrative (donantes/evaluadores) ---------- */
.narrative-toggle{display:inline-flex; border:1px solid rgba(43,68,56,0.25); border-radius:20px; overflow:hidden; margin-bottom:30px;}
.narrative-toggle button{
  border:none; background:transparent; padding:9px 18px; font-family:'Work Sans',sans-serif;
  font-size:0.78rem; letter-spacing:0.03em; color:var(--forest-soft); cursor:pointer;
}
.narrative-toggle button.active{background:var(--forest); color:var(--ivory);}
.narrative-panel{display:none;}
.narrative-panel.active{display:block;}

/* ---------- credential list ---------- */
.cred-list{list-style:none; margin:0; padding:0;}
.cred-list li{
  padding:16px 0; border-bottom:1px dashed rgba(43,68,56,0.18);
  display:grid; grid-template-columns:1fr; gap:4px;
}
.cred-list b{font-family:'Fraunces',serif; color:var(--forest); font-size:1rem; font-weight:500;}
.cred-list span{font-size:0.86rem; color:var(--forest-soft);}

/* ---------- pill list (therapies) ---------- */
.pills{display:flex; flex-wrap:wrap; gap:10px;}
.pill{border:1px solid var(--gold-soft); background:var(--paper); color:var(--forest); font-size:0.82rem; padding:8px 14px; border-radius:20px;}

/* ---------- team grid ---------- */
.team{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.team .member{background:var(--paper); border:1px solid rgba(43,68,56,0.14); padding:20px; text-align:center;}
.team .avatar{width:52px; height:52px; margin:0 auto 12px; background:var(--forest); color:var(--gold-soft); font-family:'Fraunces',serif; display:flex; align-items:center; justify-content:center; font-size:1.2rem;}
.team .member b{display:block; font-family:'Fraunces',serif; color:var(--forest); font-size:1rem;}
.team .member span{font-size:0.8rem; color:var(--forest-soft);}

/* ---------- image gallery ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.gallery figure{margin:0; overflow:hidden; border:1px solid rgba(43,68,56,0.14);}
.gallery img{width:100%; height:220px; object-fit:cover; transition:transform .4s ease;}
.gallery figure:hover img{transform:scale(1.04);}
.gallery figcaption{font-size:0.76rem; color:var(--forest-soft); padding:8px 10px;}

/* ---------- full image w/ frame (hero art) ---------- */
.framed{position:relative; clip-path:polygon(16% 0%,84% 0%,100% 16%,100% 84%,84% 100%,16% 100%,0% 84%,0% 16%); border:1px solid var(--gold-soft); overflow:hidden; box-shadow:0 24px 48px -20px rgba(0,0,0,0.35);}

/* ---------- mission strip ---------- */
.mission{background:var(--forest); color:var(--ivory);}
.mission .wrap{display:flex; gap:36px; align-items:center; flex-wrap:wrap;}
.mission p{font-family:'Fraunces',serif; font-weight:400; font-size:1.22rem; line-height:1.45; max-width:62ch; color:var(--ivory); margin:0;}
.mission .mark{font-size:2rem; color:var(--gold-soft); font-family:'Fraunces',serif;}

/* ---------- info / data blocks ---------- */
.info-grid{display:grid; grid-template-columns:1fr 1fr; gap:44px;}
.acct{border-left:2px solid var(--gold); padding:10px 0 10px 16px; margin-bottom:16px; font-size:0.9rem; background:var(--paper);}
.acct b{display:block; color:var(--forest); font-family:'Fraunces',serif; font-size:0.98rem; margin-bottom:2px;}
.acct.pending{opacity:0.6; border-left-color:var(--sage);}
.acct .status{display:inline-block; font-size:0.68rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--gold); border:1px solid var(--gold-soft); border-radius:12px; padding:2px 9px; margin-left:8px;}
.contact-list{list-style:none; padding:0; margin:0; font-size:0.92rem;}
.contact-list li{padding:10px 0; border-bottom:1px dashed rgba(43,68,56,0.18); display:flex; justify-content:space-between; gap:14px;}
.contact-list li span:first-child{color:var(--forest-soft);}
.contact-list li span:last-child{text-align:right;}

/* ---------- callout / note ---------- */
.note{background:var(--gold-soft); color:var(--forest); font-size:0.82rem; text-align:center; padding:10px 16px;}
.callout{background:var(--paper); border:1px solid var(--gold-soft); padding:20px 22px; font-size:0.92rem; color:var(--forest-soft); margin:28px 0;}
.callout b{color:var(--forest);}

/* ---------- support / donation cards ---------- */
.donate-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.donate-card{background:var(--paper); border:1px solid rgba(43,68,56,0.14); padding:26px; text-align:left;}
.donate-card h3{font-size:1.05rem; margin-bottom:8px;}
.donate-card p{font-size:0.86rem; color:var(--forest-soft); margin:0 0 16px; line-height:1.55;}
.badge-soon{display:inline-block; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--clay); border:1px solid var(--clay); border-radius:12px; padding:2px 9px; margin-bottom:10px;}

/* ---------- footer ---------- */
footer{background:var(--forest); color:var(--gold-soft);}
.foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:40px; padding:52px 0 30px;}
.foot-grid h4{color:var(--gold-bright); font-family:'Fraunces',serif; font-size:1rem; margin-bottom:14px;}
.foot-grid p,.foot-grid a{font-size:0.86rem; color:var(--gold-soft); line-height:1.7;}
.foot-grid ul{list-style:none; padding:0; margin:0;}
.foot-grid li{margin-bottom:8px;}
.foot-brand{display:flex; align-items:center; gap:10px; margin-bottom:14px;}
.foot-brand img{width:38px; height:38px; border-radius:50%;}
.foot-brand span{font-family:'Fraunces',serif; color:var(--ivory); font-size:1rem;}
.foot-bottom{border-top:1px solid rgba(216,196,143,0.2); padding:18px 0; font-size:0.76rem; text-align:center; color:var(--sage);}

@media (max-width:860px){
  .hero-inner{grid-template-columns:1fr;}
  .folders,.team,.gallery,.donate-grid{grid-template-columns:1fr;}
  .info-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr; padding:40px 0 20px;}
  nav.links{display:none;}
}