/* ============================================================
   home.css — B1 hero · B2 quote · B3 preview
   ============================================================ */

/* B1 — hero with fillable background image ----------------- */
.hero{
  position:relative;min-height:calc(100svh - var(--nav-h));
  display:flex;align-items:center;overflow:hidden;
  background:#13110b;
}
.hero .hero-bg{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(15,13,8,.36) 0%,rgba(15,13,8,.32) 42%,rgba(15,13,8,.66) 100%);
}
/* let drag-drop / click reach the image-slot underneath, except on controls */
.hero .hero-in{position:relative;z-index:2;padding:80px 0;width:100%;pointer-events:none}
.hero .hero-in a,.hero .hero-in button{pointer-events:auto}
.hero .eyebrow{color:rgba(255,255,255,.78)}
.hero .eyebrow.line::before{background:rgba(255,255,255,.6)}
.hero h1{
  font-family:var(--serif);font-weight:300;color:#fdfdfb;
  font-size:clamp(46px,8vw,104px);line-height:1.0;letter-spacing:-.02em;
  margin:28px 0 22px;text-shadow:0 2px 40px rgba(0,0,0,.25);max-width:16ch;
}
.hero h1 em{font-style:italic;color:#fff}
.hero .role{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(18px,2.6vw,27px);color:rgba(255,255,255,.82);
  min-height:1.4em;margin-bottom:38px;
}
.hero .cursor{display:inline-block;width:2px;height:.95em;background:#fff;margin-left:3px;vertical-align:-2px;animation:hblink 1.05s step-end infinite}
@keyframes hblink{50%{opacity:0}}
.hero .lede{color:rgba(255,255,255,.8);font-size:18px;max-width:54ch;line-height:1.7;margin-bottom:38px}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero .avail{color:rgba(255,255,255,.75)}
.hero .scroll-hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2;pointer-events:none;
  color:rgba(255,255,255,.6);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero .scroll-hint .bar{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%,100%{opacity:.3;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
.hero-img-hint{
  position:absolute;right:var(--pad);bottom:24px;z-index:2;pointer-events:none;
  color:rgba(255,255,255,.55);font-size:11px;letter-spacing:.06em;
}
@media(max-width:600px){.hero .scroll-hint{display:none}.hero-img-hint{display:none}}

/* B2 — random philosophical quote -------------------------- */
.quote{padding:120px 0;text-align:center}
.quote .eyebrow{margin-bottom:34px;justify-content:center}
.quote blockquote{
  font-family:var(--serif);font-weight:300;font-style:normal;
  font-size:clamp(28px,4.6vw,52px);line-height:1.18;letter-spacing:-.015em;
  max-width:18ch;margin:0 auto;color:var(--fg);text-wrap:balance;
  transition:opacity .25s;
}
.quote .who{
  margin-top:30px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);transition:opacity .25s;
}
.quote .who cite{font-style:normal;color:inherit}
.quote .who::before{content:"— "}
.quote .new-quote{
  margin-top:40px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--fg3);background:none;border:1px solid var(--line2);border-radius:99px;
  padding:11px 20px;cursor:pointer;transition:border-color .2s,color .2s;
  display:inline-flex;gap:9px;align-items:center;
}
.quote .new-quote:hover{border-color:var(--accent);color:var(--accent)}
.quote .new-quote .ic{transition:transform .5s}
.quote .new-quote:hover .ic{transform:rotate(180deg)}
@media(max-width:600px){.quote{padding:80px 0}}

/* B3 — preview wrapper -------------------------------------- */
.preview .more-row{display:flex;justify-content:center;margin-top:58px}

/* B4 — offer: servicios + trabajemos juntos ----------------- */
.offer-lede{font-size:16.5px;color:var(--fg2);line-height:1.72;max-width:62ch;margin:-28px 0 42px}

.svc-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;list-style:none}
.svc-card{
  border:1px solid var(--line);border-radius:14px;padding:34px 32px;
  background:var(--card);display:flex;flex-direction:column;gap:14px;
  transition:border-color .25s,transform .3s,box-shadow .3s;
}
.svc-card:hover{transform:translateY(-3px);border-color:var(--line2);box-shadow:var(--shadow)}
.svc-card .svc-k{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.svc-card h3{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:-.01em;line-height:1.15;color:var(--fg)}
.svc-card .svc-line{font-family:var(--serif);font-style:italic;font-size:16.5px;color:var(--fg);margin-top:-4px}
.svc-card p{font-size:14.5px;color:var(--fg2);line-height:1.66}
.svc-card .incl{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.svc-card .incl li{
  font-size:11.5px;color:var(--fg2);border:1px solid var(--line);border-radius:99px;
  padding:6px 12px;display:inline-flex;gap:7px;align-items:center;
}
.svc-card .incl li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}

.offer-paths{margin-top:66px;padding-top:56px;border-top:1px solid var(--line)}
.paths-head{margin-bottom:34px}
.paths-title{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.6vw,40px);letter-spacing:-.015em;line-height:1.05;margin:14px 0 12px}
.paths-title em{font-style:italic;color:var(--accent)}
.paths-lede{font-size:15.5px;color:var(--fg2)}
.paths{display:grid;grid-template-columns:1fr 1fr;gap:26px;list-style:none}
.path{
  position:relative;border:1px solid var(--line);border-radius:14px;
  padding:36px 34px 34px;background:var(--card);
  display:flex;flex-direction:column;gap:14px;overflow:hidden;
  transition:border-color .25s,transform .3s,box-shadow .3s;
}
.path:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.path .ptab{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3)}
.path h4{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,28px);letter-spacing:-.01em;line-height:1.12;color:var(--fg)}
.path p{font-size:14.5px;color:var(--fg2);line-height:1.68}
.path .pacts{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
.path.alt{border-color:transparent;background:var(--accent-soft)}
.path .corner{
  position:absolute;top:0;right:0;width:54px;height:54px;
  border-left:1px solid var(--line);border-bottom:1px solid var(--line);
  border-bottom-left-radius:14px;display:grid;place-items:center;color:var(--accent);font-size:17px;
}

@media(max-width:760px){
  .svc-grid,.paths{grid-template-columns:1fr}
  .offer-lede{margin-top:-16px}
}