:root{
  --app-gold:#b78833;
  --app-gold-dark:#8d6424;
  --app-gold-light:#e8c979;
  --app-navy:#071929;
  --app-bg:#f3eee5;
}

body{
  background:
    radial-gradient(circle at 8% 2%,rgba(190,146,60,.24),transparent 22rem),
    radial-gradient(circle at 94% 0%,rgba(7,25,41,.17),transparent 25rem),
    linear-gradient(180deg,#f6f0e7 0,#fbfaf7 42rem);
}
.demo-rail{display:none}
.topbar{
  top:0;
  height:84px;
  max-width:1480px;
  margin:auto;
  padding:0 max(3.4vw,24px);
  border-bottom:0;
  background:transparent;
  backdrop-filter:none;
}
.brand{
  display:flex;
  align-items:center;
  line-height:1;
  gap:0;
}
.brand-word,.brand-x{
  font-family:Arial Black,Inter,sans-serif;
  font-size:42px;
  font-weight:900;
  letter-spacing:-.085em;
  color:var(--app-navy);
}
.brand-x{
  margin-left:4px;
  padding-right:27px;
  color:transparent;
  background:linear-gradient(135deg,#8b5f1d 3%,#f5d379 30%,#ad7523 53%,#ffe199 74%,#9e6b23 100%);
  -webkit-background-clip:text;
  background-clip:text;
  filter:drop-shadow(0 3px 5px rgba(137,90,20,.22));
}
.brand small{
  display:block;
  grid-column:auto;
  margin:0;
  padding:7px 0 7px 23px;
  border-left:1px solid rgba(7,25,41,.35);
  font-size:10px;
  font-weight:800;
  letter-spacing:.25em;
  color:#394857;
  white-space:nowrap;
}
.top-actions{gap:10px}.profile-btn{padding:5px 9px 5px 5px;border-radius:999px}.profile-btn:hover{background:rgba(255,255,255,.55)}
.profile-btn .avatar{order:2;background:rgba(255,255,255,.72);border:1px solid #fff;color:var(--app-navy)}
.profile-btn>span:nth-child(2){text-align:right}.profile-btn>span:last-child{display:none}
.icon-btn{background:rgba(255,255,255,.6);border-color:rgba(255,255,255,.8);border-radius:50%}
.hamburger{
  width:48px;height:48px;border:1px solid rgba(255,255,255,.82);border-radius:50%;
  background:rgba(255,255,255,.65);display:grid;place-content:center;gap:5px;
  transition:.25s;box-shadow:0 9px 25px rgba(7,25,41,.08);
}
.hamburger span{display:block;width:20px;height:2px;background:var(--app-navy);border-radius:3px;transition:.25s}
.hamburger:hover,.hamburger.active{background:var(--app-gold);border-color:var(--app-gold);transform:translateY(-1px)}
.hamburger.active span{background:#fff}.hamburger.active span:first-child{transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}.hamburger.active span:last-child{transform:translateY(-7px) rotate(-45deg)}

.app-view{max-width:1500px;padding:0 max(2.2vw,22px) 90px}
.project-hero{
  min-height:auto;margin-top:0;padding:26px 37px 22px;border:1px solid rgba(255,255,255,.95);
  border-radius:18px;background:rgba(255,255,255,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.project-hero:after{display:none}
.project-hero h1{font-family:Inter,ui-sans-serif,sans-serif;font-size:clamp(34px,4vw,53px);font-weight:900;letter-spacing:-.055em}
.project-hero h1 br{display:none}.project-hero h1 span{color:var(--app-navy)}
.project-address{font-size:16px;color:#26333c;margin-top:10px}.project-address:before{content:"⌖";font-size:22px;margin-right:8px;color:#000}
.status-pill{background:linear-gradient(120deg,var(--app-gold-dark),#c59a4b);padding:13px 20px;font-size:12px;box-shadow:0 10px 24px rgba(142,100,36,.17)}

.stage-section{padding:21px 0 12px}.stage-section>.section-heading,.stage-detail{display:none}
.stage-flow{
  position:relative;border:0;background:transparent;padding:0 25px;gap:0;
}
.stage-flow:before{
  content:"";position:absolute;left:11%;right:11%;top:23px;height:3px;background:linear-gradient(90deg,var(--app-gold) 0 62%,rgba(183,136,51,.36) 62%);
}
.stage{
  position:relative;border:0!important;background:transparent!important;padding:0 5px;display:flex;flex-direction:column;
  justify-content:flex-start;gap:8px;text-align:center;box-shadow:none!important;color:#151515;
}
.stage:before{
  content:"";width:34px;height:34px;border:3px solid #c2a364;border-radius:50%;background:var(--app-bg);z-index:1;
  transition:.25s;box-shadow:0 0 0 5px rgba(246,241,233,.86);
}
.stage.done:before{background:var(--app-gold);border-color:var(--app-gold)}
.stage.current:before,.stage.selected:before{width:40px;height:40px;margin-top:-3px;background:var(--app-gold);border-color:#fff;box-shadow:0 0 0 3px var(--app-gold),0 0 0 8px rgba(246,241,233,.9)}
.stage-number,.stage i,.stage small{display:none}.stage b{font-size:16px;font-weight:500}.stage.current b,.stage.selected b{font-weight:900;color:#080f15}
.stage.done span:nth-child(2):before{content:"✓";position:absolute;top:7px;left:50%;transform:translateX(-50%);z-index:3;color:#fff;font-weight:900}

.climate-banner{
  margin:8px 0 13px;border:0;border-radius:15px;
  background:linear-gradient(100deg,#bd8730,#efd182 55%,#c28f39);box-shadow:0 12px 25px rgba(146,102,36,.15);
}
.climate-banner .eyebrow{color:#3d2910}.climate-banner h2{font-family:Inter,sans-serif;font-size:22px;font-weight:900}

.content-grid{grid-template-columns:minmax(0,2.15fr) minmax(315px,.95fr);gap:17px;padding-bottom:28px}
.section-heading.compact{margin:0 0 11px;padding:0 8px}.section-heading.compact .eyebrow{display:none}
.section-heading h2{font-family:Inter,sans-serif;font-size:34px;font-weight:900;letter-spacing:-.04em}.count-badge{background:rgba(255,255,255,.67)}
.update-card,.side-card,.participants-link{
  border:1px solid rgba(255,255,255,.95);border-radius:16px;background:rgba(255,255,255,.78);
  box-shadow:0 15px 40px rgba(20,29,35,.07);overflow:hidden;backdrop-filter:blur(12px);
}
.post-header{padding:16px 24px;background:rgba(239,232,221,.45)}.post-body{padding:21px 24px}
.post-body h3{font-family:Inter,sans-serif;font-size:25px;font-weight:900;letter-spacing:-.025em}.post-body>p:not(.eyebrow){font-size:15px;line-height:1.6}
.media-grid{border-radius:13px;overflow:hidden}.media-grid button{border-radius:8px}.post-footer{padding:9px 22px;min-height:72px}
.reaction-trigger{display:none}.reaction-picker{
  display:flex;position:static;border:0;box-shadow:none;background:transparent;padding:0;gap:8px;
}
.reaction-picker button{
  width:50px;height:42px;border:1px solid #d5cec3!important;border-radius:12px!important;background:#fff!important;font-size:22px!important;
  box-shadow:0 4px 10px rgba(17,24,32,.04);transition:.2s!important;
}
.reaction-picker button:hover{transform:translateY(-3px)!important;border-color:var(--app-gold)!important}
.reaction-picker button.active{background:linear-gradient(135deg,#d5a74c,#f0cf7d)!important;border-color:var(--app-gold)!important;box-shadow:0 8px 18px rgba(183,136,51,.28);transform:translateY(-2px)}
.reaction-total{background:#eee6da;font-size:12px}.comment-toggle{border:1px solid #d8d0c5;border-radius:11px;padding:11px 14px;background:#fff}
.comment-form input{border-radius:11px;font-size:14px}.comment-form button{border-radius:11px;background:linear-gradient(135deg,#071929,#151515);color:#e9bd62}

.sidebar{gap:12px}.side-card{padding:18px 20px;transition:.2s}.side-card:hover{transform:translateY(-2px);border-color:rgba(183,136,51,.42)}
.side-card-head{margin-bottom:12px}.side-card-head h3{font-family:Inter,sans-serif;font-size:20px;font-weight:900}.side-icon{border:0;border-radius:11px;background:#e7dccb;font-size:18px}
.document-row{border-radius:9px;padding:9px 7px;margin:3px 0;transition:.2s}.document-row:hover,.document-row:focus{background:#e7dccb;transform:translateX(3px)}
.gallery-preview{border-radius:11px;overflow:hidden}.contact-card{background:linear-gradient(135deg,#efe5d6,#fff)}
.primary-btn,.secondary-btn{border-radius:10px}.primary-btn{background:linear-gradient(135deg,#071929,#171717)}
.participants-link{border-radius:14px}.mobile-nav{
  position:fixed;display:grid;grid-template-columns:repeat(4,1fr);left:50%;right:auto;bottom:0;transform:translateX(-50%);
  width:min(900px,92vw);height:68px;background:rgba(255,255,255,.9);backdrop-filter:blur(16px);z-index:45;
  border:1px solid rgba(255,255,255,.92);border-bottom:0;border-radius:18px 18px 0 0;box-shadow:0 -10px 30px rgba(7,25,41,.1);
}
.mobile-nav button{border:0;background:transparent;color:#687178;display:grid;place-content:center;gap:4px;font-size:18px}
.mobile-nav span{font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.mobile-nav button{position:relative;transition:.2s}.mobile-nav button.active{color:var(--app-gold-dark);background:linear-gradient(180deg,#f3e8d4,#fff)}
.mobile-nav button.active:after{content:"";position:absolute;top:0;left:25%;right:25%;height:3px;border-radius:0 0 3px 3px;background:var(--app-gold)}

.drawer-backdrop{position:fixed;inset:0;background:rgba(5,14,21,.45);backdrop-filter:blur(3px);z-index:70;opacity:0;pointer-events:none;transition:.25s}
.drawer-backdrop.open{opacity:1;pointer-events:auto}
.app-drawer{
  position:fixed;right:0;top:0;bottom:0;width:min(390px,88vw);z-index:75;background:#fbf8f2;padding:26px;
  box-shadow:-25px 0 70px rgba(7,25,41,.22);transform:translateX(105%);transition:.32s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;
}
.app-drawer.open{transform:none}.drawer-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid #dfd5c6}
.drawer-xfel-logo{width:154px;height:56px;object-fit:contain;object-position:left center}
.drawer-close{width:42px;height:42px;border:1px solid #ddd3c4;border-radius:50%;background:#fff;font-size:24px}
.drawer-project{font-size:14px;color:#6c6a65;line-height:1.55;padding:16px 6px 8px}.drawer-project b{color:var(--app-navy)}
.drawer-nav{display:grid;gap:6px}.drawer-nav button{
  border:0;background:transparent;border-radius:12px;padding:13px 14px;display:flex;align-items:center;gap:13px;text-align:left;font-weight:750;color:#39434b;transition:.2s;
}
.drawer-nav button span{width:32px;height:32px;border-radius:9px;background:#eee5d8;display:grid;place-items:center}
.drawer-nav button:hover,.drawer-nav button.active{background:var(--app-navy);color:#fff;transform:translateX(-4px)}
.drawer-nav button.active span,.drawer-nav button:hover span{background:var(--app-gold);color:#fff}
.drawer-role{margin-top:auto;padding:18px 0;border-top:1px solid #dfd5c6}.drawer-role small{font-size:9px;letter-spacing:.15em;color:#777}
.drawer-role .view-switch{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;background:#eee5d8;padding:4px;border-radius:12px}
.drawer-role .switch-btn{color:#565b5d;padding:10px}.drawer-role .switch-btn.active{background:var(--app-gold);color:#fff;border-radius:9px}
.drawer-contact{display:flex;justify-content:space-between;align-items:center;background:var(--app-gold);color:#fff;text-decoration:none;padding:15px;border-radius:12px;font-weight:800}

.xfel-post-logo{width:116px;height:45px;object-fit:contain;object-position:left center;flex:0 0 auto}
.brand-author{gap:15px}.brand-author>div{padding-left:14px;border-left:1px solid #ddd2c2}
.xfel-side-logo{width:62px;height:48px;object-fit:contain;object-position:left center;flex:0 0 auto}
.admin-xfel-logo{width:170px;height:62px;object-fit:contain;object-position:left center;margin-bottom:8px}
.post-date{
  font-size:12px;font-weight:750;color:#736e66;background:#eee7dc;padding:9px 12px;border-radius:10px;
  white-space:nowrap;
}

.evolution-timeline{
  margin:0 0 24px;padding:24px;border:1px solid rgba(255,255,255,.95);border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.84),rgba(240,231,216,.78));
  box-shadow:0 15px 40px rgba(20,29,35,.06);overflow:hidden;
}
.timeline-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:23px}
.timeline-heading h3{font-size:24px;letter-spacing:-.03em;margin:0}.timeline-heading>span{font-size:12px;color:#77736c}
.evolution-track{display:grid;grid-template-columns:repeat(3,1fr);position:relative;gap:0}
.evolution-track:before{content:"";position:absolute;left:8%;right:8%;top:17px;height:3px;background:linear-gradient(90deg,var(--app-gold) 0 50%,#ddd2c1 50%)}
.evolution-step{position:relative;padding:47px 18px 12px 0;min-width:0}
.evolution-step+.evolution-step{padding-left:18px}.evolution-dot{
  position:absolute;top:0;left:0;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  background:#f9f6f0;border:2px solid #cbb486;color:#806027;font-size:11px;font-weight:900;z-index:2;
}
.evolution-step.complete .evolution-dot,.evolution-step.current .evolution-dot{background:var(--app-gold);border-color:var(--app-gold);color:#fff}
.evolution-step.current .evolution-dot{box-shadow:0 0 0 6px rgba(183,136,51,.16)}
.evolution-step time{display:block;font-size:11px;font-weight:900;letter-spacing:.12em;color:var(--app-gold-dark);margin-bottom:6px}
.evolution-step b{display:block;font-size:15px;margin-bottom:7px}.evolution-step p{font-size:12px;line-height:1.5;color:#68645f;margin:0 0 11px}
.evolution-step em{font-style:normal;font-size:10px;font-weight:800;background:#eee5d8;padding:5px 8px;border-radius:999px}

.gantt-admin-panel{background:linear-gradient(145deg,#fff,#f4ecdf)}
.gantt-upload{
  min-height:104px;border:1px dashed #c5ae87;border-radius:12px;background:#faf6ef;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:4px;text-align:center;cursor:pointer;padding:15px;margin:16px 0;
}
.gantt-upload:hover{background:#f1e5d3;border-color:var(--app-gold)}.gantt-upload>span{font-size:25px;color:var(--app-gold-dark)}
.gantt-upload b{font-size:13px}.gantt-upload small{font-size:10px;color:#777}
.gantt-file{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;padding:11px;border:1px solid #ddd2c2;border-radius:10px;background:#fff;margin-bottom:12px}
.gantt-file>span{height:42px;border-radius:8px;background:#eee3d3;color:var(--app-gold-dark);font-size:9px;font-weight:900;display:grid;place-items:center}
.gantt-file>div{display:grid;min-width:0}.gantt-file b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gantt-file small{font-size:9px;color:#777;margin-top:3px}
.gantt-file button{border:0;background:transparent;font-size:20px}.gantt-release{margin:10px 0 15px}
.gantt-preview{border:1px solid #ded5c8;border-radius:12px;background:#fff;padding:16px;margin:20px 0;overflow-x:auto}
.gantt-axis{display:grid;grid-template-columns:repeat(5,1fr);padding-left:120px;margin-bottom:8px;min-width:560px}.gantt-axis span{font-size:9px;color:#777;text-align:center}
.gantt-row{display:grid;grid-template-columns:120px minmax(440px,1fr);align-items:center;min-width:560px;min-height:37px;border-top:1px solid #eee8df}
.gantt-row b{font-size:11px}.gantt-row>span{grid-column:2;grid-row:1;width:var(--size);height:14px;margin-left:var(--start);border-radius:999px;background:#66727b}
.gantt-row>span.active{background:linear-gradient(90deg,var(--app-gold-dark),var(--app-gold-light));box-shadow:0 4px 10px rgba(183,136,51,.2)}
.gantt-row>span.future{background:#ddd2c1;border:1px dashed #bca67f}
.gantt-client-file{display:flex;gap:11px;align-items:center;background:#f0e7da;padding:12px;border-radius:10px;margin:0 0 15px}
.gantt-client-file>span{font-size:20px;color:var(--app-gold-dark)}.gantt-client-file>div{display:grid}.gantt-client-file b{font-size:12px}.gantt-client-file small{font-size:9px;color:#777}

@media(max-width:700px){
  body{background:linear-gradient(180deg,#eee4d4 0,#fbfaf7 31rem)}
  .topbar{height:75px;padding:0 15px;background:rgba(246,240,232,.72);backdrop-filter:blur(14px)}
  .brand-word,.brand-x{font-size:31px}.brand-x{padding-right:0}.brand small{display:none}
  .profile-btn{display:none}.hamburger{width:43px;height:43px}.app-view{padding:12px 12px 88px}
  .project-hero{padding:20px 18px 16px;border-radius:15px;gap:14px}.project-hero h1{font-size:31px}.project-address{font-size:13px}
  .stage-flow{padding:0 2px}.stage-flow:before{left:12%;right:12%;top:19px}.stage:before{width:29px;height:29px}.stage.current:before,.stage.selected:before{width:34px;height:34px}.stage b{font-size:12px}
  .stage.done span:nth-child(2):before{top:5px}.climate-banner{grid-template-columns:1fr;padding:18px}.climate-icon{display:none}.climate-banner .text-btn{grid-column:1}
  .section-heading h2{font-size:27px}.update-card{border-radius:15px}.post-header{padding:14px 16px}.post-body{padding:18px 16px}
  .post-body h3{font-size:22px}.media-grid{height:330px}.post-footer{padding:10px 12px}.reaction-picker{gap:5px}
  .reaction-picker button{width:42px;height:40px}.reaction-total{display:none}.comment-toggle{padding:10px;font-size:0}.comment-toggle:before{content:"Comentar";font-size:11px}
  .sidebar{display:grid}.side-card{border-radius:14px}.mobile-nav{display:grid}.notification-btn{display:grid}
  .mobile-nav{left:0;right:0;transform:none;width:100%;max-width:none}
  .xfel-post-logo{width:88px;height:38px}.brand-author>div{padding-left:10px}.brand-author b{font-size:12px}.brand-author small{font-size:9px}
  .post-footer{display:grid;grid-template-columns:1fr auto;gap:10px}.post-date{grid-column:1/-1;grid-row:2;text-align:center;font-size:11px}.comment-toggle{grid-column:2}
  .evolution-timeline{padding:19px 16px;border-radius:14px}.timeline-heading{align-items:start}.timeline-heading>span{display:none}
  .evolution-track{display:flex;overflow-x:auto;gap:11px;padding:4px 2px 10px;scroll-snap-type:x mandatory}
  .evolution-track:before{left:20px;right:0;top:21px}
  .evolution-step{flex:0 0 78%;padding:54px 15px 15px;border:1px solid #e1d6c6;border-radius:12px;background:rgba(255,255,255,.75);scroll-snap-align:start}
  .evolution-step+.evolution-step{padding-left:15px}.evolution-dot{top:4px;left:14px}
  .admin-xfel-logo{width:128px;height:48px}.gantt-axis{padding-left:90px}.gantt-row{grid-template-columns:90px minmax(440px,1fr)}
}