/* ============================================================
   HOME — hero, ops bar (elemento firma), servicios, trabajo,
   proceso, reviews teaser, faq teaser, cta
   ============================================================ */

.hero{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  padding:160px 0 60px;position:relative;
}
.hero-inner{max-width:900px;}
.hero .eyebrow{margin-bottom:22px;opacity:0;animation:rise .8s var(--ease) forwards;}
.hero h1{
  font-size:clamp(40px,6.4vw,84px);
  opacity:0;animation:rise .8s var(--ease) .08s forwards;
}
.hero h1 .line2{display:block;color:var(--text-dim);}
.hero p{
  font-size:18px;color:var(--text-soft);line-height:1.65;max-width:560px;margin-top:26px;
  opacity:0;animation:rise .8s var(--ease) .16s forwards;
}
.hero-actions{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap;opacity:0;animation:rise .8s var(--ease) .24s forwards;}
@keyframes rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}

/* ---------- signature: ops status bar ---------- */
.ops-bar{
  margin-top:64px;border-radius:var(--radius-lg);padding:4px;
  opacity:0;animation:rise .9s var(--ease) .34s forwards;
}
.ops-bar-inner{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-radius:calc(var(--radius-lg) - 4px);overflow:hidden;
}
.ops-cell{
  padding:22px 24px;border-right:1px solid var(--border-hair);
  display:flex;flex-direction:column;gap:8px;
}
.ops-cell:last-child{border-right:none;}
.ops-label{
  font-family:var(--f-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:0.1em;
  color:var(--text-dim);display:flex;align-items:center;gap:7px;
}
.ops-value{font-family:var(--f-display);font-size:16px;font-weight:600;}
.ops-value.ok{color:var(--ok);}
.ops-value.live{color:var(--live);}
@media (max-width:820px){
  .ops-bar-inner{grid-template-columns:repeat(2,1fr);}
  .ops-cell:nth-child(2){border-right:none;}
  .ops-cell:nth-child(1),.ops-cell:nth-child(2){border-bottom:1px solid var(--border-hair);}
}

/* ---------- section shared ---------- */
.sec{padding:130px 0;}
.sec-head{max-width:620px;margin-bottom:56px;}
.sec-head h2{font-size:clamp(30px,3.6vw,42px);margin-top:16px;}
.sec-head p{color:var(--text-soft);font-size:16px;line-height:1.7;margin-top:16px;}
.sec-top-row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:56px;}

/* ---------- services (pillars) ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border-hair);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--border-hair);}
.pillar{background:var(--bg-alt);padding:40px 32px;transition:background .35s ease;}
.pillar:hover{background:var(--surface);}
.pillar-index{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);}
.pillar h3{font-size:21px;margin:18px 0 12px;}
.pillar p{color:var(--text-soft);font-size:14.5px;line-height:1.65;}
.pillar-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;}
.pillar-tags span{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);border:1px solid var(--border);padding:4px 10px;border-radius:6px;}
@media (max-width:820px){.pillars{grid-template-columns:1fr;}}

/* ---------- featured work ---------- */
.work-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
.work-card{
  border-radius:var(--radius-md);border:1px solid var(--border);overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .3s ease, transform .3s ease;
  text-decoration:none;color:var(--text);background:var(--surface);
}
.work-card:hover{border-color:var(--border-strong);transform:translateY(-4px);}
.work-card.lg{grid-row:span 2;}
.work-media{aspect-ratio:16/10;background:linear-gradient(145deg,var(--surface-2),var(--bg-alt));position:relative;overflow:hidden;}
.work-card.lg .work-media{aspect-ratio:16/12;}
.work-media::after{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.06), transparent 60%);
}
.work-tag-row{position:absolute;top:16px;left:16px;display:flex;gap:8px;z-index:2;}
.chip{font-family:var(--f-mono);font-size:10.5px;letter-spacing:0.04em;padding:5px 10px;border-radius:20px;background:rgba(10,10,11,0.6);border:1px solid var(--border-strong);backdrop-filter:blur(6px);}
.chip.own{color:var(--ok);border-color:rgba(62,207,126,0.35);}
.work-body{padding:22px 24px 26px;}
.work-body h3{font-size:19px;margin-bottom:8px;}
.work-body p{font-size:13.5px;color:var(--text-soft);line-height:1.6;}
@media (max-width:820px){.work-grid{grid-template-columns:1fr;}.work-card.lg{grid-row:auto;}}

/* ---------- process teaser ---------- */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.process-step{padding:26px 0;border-top:1px solid var(--border-hair);}
.process-num{font-family:var(--f-mono);font-size:12px;color:var(--text-faint);}
.process-step h4{font-size:16px;margin:14px 0 8px;}
.process-step p{font-size:13.5px;color:var(--text-soft);line-height:1.6;}
@media (max-width:820px){.process-row{grid-template-columns:1fr 1fr;}}

/* ---------- reviews teaser ---------- */
.review-rail{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.review-card{border:1px solid var(--border);border-radius:var(--radius-md);padding:26px;background:var(--surface);}
.review-stars{display:flex;gap:3px;margin-bottom:16px;}
.review-stars svg{width:14px;height:14px;fill:var(--text);}
.review-card p.quote{font-size:14.5px;line-height:1.65;color:var(--text-soft);margin-bottom:20px;min-height:80px;}
.review-who{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--border-hair);padding-top:16px;}
.review-name{font-size:13.5px;font-weight:600;}
.review-project{font-family:var(--f-mono);font-size:11px;color:var(--text-dim);}
@media (max-width:820px){.review-rail{grid-template-columns:1fr;}}

/* ---------- faq teaser ---------- */
.faq-list{border-top:1px solid var(--border-hair);}
.faq-item{border-bottom:1px solid var(--border-hair);}
.faq-q{
  width:100%;text-align:left;background:none;border:none;color:var(--text);
  display:flex;justify-content:space-between;align-items:center;padding:24px 4px;cursor:pointer;
  font-family:var(--f-display);font-size:16.5px;font-weight:600;
}
.faq-icon{width:18px;height:18px;flex-shrink:0;position:relative;}
.faq-icon::before,.faq-icon::after{content:'';position:absolute;background:var(--text-soft);top:50%;left:50%;transform:translate(-50%,-50%);transition:transform .3s ease;}
.faq-icon::before{width:14px;height:1.4px;}
.faq-icon::after{width:1.4px;height:14px;}
.faq-item.open .faq-icon::after{transform:translate(-50%,-50%) rotate(90deg) scale(0);}
.faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.faq-a p{font-size:14.5px;color:var(--text-soft);line-height:1.7;padding:0 4px 24px;max-width:640px;}

/* ---------- cta banner ---------- */
.cta-banner{
  border-radius:var(--radius-lg);padding:70px 50px;text-align:center;position:relative;overflow:hidden;
  border:1px solid var(--border);background:var(--surface);
}
.cta-banner::before{
  content:'';position:absolute;top:-60%;left:50%;transform:translateX(-50%);width:700px;height:700px;
  background:radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);pointer-events:none;
}
.cta-banner h2{font-size:clamp(28px,4vw,40px);}
.cta-banner p{color:var(--text-soft);margin:16px auto 30px;max-width:480px;}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}