/* ============================================================
   SORA — PORTADA
   ============================================================ */

/* ---------- HÉROE ---------- */
.hero{
  min-height:100svh; padding-top:calc(var(--nav-h) + 40px); padding-bottom:60px;
  display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden;
}
.hero__grid{
  display:grid; grid-template-columns:repeat(12,1fr);
  gap:clamp(14px,2vw,26px); align-items:center; position:relative; z-index:2;
}
.hero__kicker{ grid-column:1/-1; display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:20px }
.hero__kicker .dot{ width:13px; height:13px; background:var(--magenta); border:2px solid var(--ink); border-radius:50%; animation:blink 1.4s steps(2) infinite }
@keyframes blink{ 50%{ opacity:.15 } }

.hero__title{ grid-column:1/-1 }
.hero__title .line{ display:block; overflow:hidden }
.hero__title .line > span{ display:block; animation:riseIn .95s var(--ease) both }
.hero__title .line:nth-child(2) > span{ animation-delay:.1s }
.hero__title .line:nth-child(3) > span{ animation-delay:.2s }
@keyframes riseIn{ from{ transform:translateY(105%) rotate(4deg) } to{ transform:none } }

.hero__title em{ font-style:normal; position:relative; display:inline-block; padding-inline:.1em }
.hero__title em::before{
  content:''; position:absolute; inset:8% -.04em 12%; background:var(--cyan);
  border:3px solid var(--ink); z-index:-1; transform:rotate(-1.4deg);
}
.hero__title .mg::before{ background:var(--magenta) }
.hero__title .yl::before{ background:var(--yellow) }

.hero__bottom{
  grid-column:1/-1; display:grid; grid-template-columns:1.2fr 1fr;
  gap:36px; margin-top:clamp(24px,3.4vh,44px); align-items:end;
}
.hero__lead{ font-size:clamp(1.05rem,1.5vw,1.35rem); max-width:52ch; font-weight:500 }
.hero__lead strong{ background:var(--yellow); padding:1px 5px; border:2px solid var(--ink) }
.hero__cta{ display:flex; gap:14px; flex-wrap:wrap; margin-top:26px }
.hero__stats{ display:grid; grid-template-columns:repeat(3,1fr); border:var(--bd); background:var(--white); box-shadow:var(--sh) }
.hero__stats div{ padding:18px 14px; border-right:3px solid var(--ink) }
.hero__stats div:last-child{ border-right:0 }
.hero__stats b{ font-family:var(--f-display); font-size:clamp(1.5rem,2.6vw,2.4rem); display:block; line-height:1 }
.hero__stats div > span{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.11em; text-transform:uppercase; opacity:.7 }

/* Bloques de color flotantes del héroe */
.blob{ position:absolute; border:var(--bd); z-index:1; pointer-events:none }
.blob--1{ width:170px; height:170px; background:var(--yellow); top:16%; right:5%; animation:float1 9s ease-in-out infinite }
.blob--2{ width:110px; height:110px; background:var(--magenta); border-radius:50%; bottom:26%; right:11%; animation:float2 7s ease-in-out infinite }
.blob--3{ width:0; height:0; border:none; border-left:70px solid transparent; border-right:70px solid transparent; border-bottom:120px solid var(--orange); top:22%; left:-3%; animation:float1 11s ease-in-out infinite reverse; filter:drop-shadow(4px 4px 0 var(--ink)) }
.blob--4{ width:190px; height:52px; background:var(--cyan); bottom:2%; left:-4%; animation:float2 8.5s ease-in-out infinite reverse }
@keyframes float1{ 50%{ transform:translateY(-34px) rotate(13deg) } }
@keyframes float2{ 50%{ transform:translate(-26px,22px) rotate(-11deg) } }
@media (max-width:900px){ .blob{ opacity:.5 } .blob--1,.blob--3{ display:none } }

.scroll-hint{ position:absolute; bottom:22px; left:50%; transform:translateX(-50%); z-index:3; font-family:var(--f-mono); font-size:.62rem; letter-spacing:.2em; display:flex; flex-direction:column; align-items:center; gap:8px }
.scroll-hint i{ width:2px; height:34px; background:var(--ink); animation:drop 1.7s var(--ease) infinite }
@keyframes drop{ 0%{ transform:scaleY(0); transform-origin:top } 45%{ transform:scaleY(1); transform-origin:top } 55%{ transform:scaleY(1); transform-origin:bottom } 100%{ transform:scaleY(0); transform-origin:bottom } }
@media (max-width:640px){ .scroll-hint{ display:none } }

/* ---------- SERVICIOS (bento) ---------- */
.bento{ display:grid; grid-template-columns:repeat(6,1fr); gap:18px }
.svc{ position:relative; overflow:hidden; padding:30px; display:flex; flex-direction:column; min-height:250px; cursor:pointer }
.svc--wide{ grid-column:span 4 } .svc--half{ grid-column:span 3 } .svc--third{ grid-column:span 2 }
.svc__num{ font-family:var(--f-mono); font-size:.65rem; letter-spacing:.16em; opacity:.5 }
.svc h3{ margin:14px 0 12px; position:relative; z-index:2 }
.svc p{ font-size:.94rem; opacity:.82; position:relative; z-index:2; max-width:46ch }
.svc__list{ margin-top:auto; padding-top:20px; display:flex; flex-wrap:wrap; gap:7px; position:relative; z-index:2 }
.svc__fill{ position:absolute; inset:0; background:var(--c,var(--cyan)); transform:translateY(101%); transition:transform .42s var(--ease); z-index:0 }
.svc:hover .svc__fill{ transform:none }
.svc:hover .tag{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.svc__icon{ width:52px; height:52px; border:var(--bd); display:grid; place-items:center; background:var(--white); position:relative; z-index:2; font-size:1.4rem }
@media (max-width:1000px){ .svc--wide,.svc--half{ grid-column:span 6 } .svc--third{ grid-column:span 3 } }
@media (max-width:640px){ .bento > *{ grid-column:1/-1 !important } }

/* ---------- CATÁLOGO DESTACADO ---------- */
.cat-strip{ display:grid; gap:0; border:var(--bd); background:var(--ink); box-shadow:var(--sh-lg) }
.cat-row{
  display:grid; grid-template-columns:90px 1fr auto; align-items:center; gap:24px;
  padding:26px 28px; background:var(--paper); border-bottom:3px solid var(--ink);
  position:relative; overflow:hidden; transition:background .3s var(--ease), color .3s;
}
.cat-row:last-child{ border-bottom:0 }
.cat-row:hover{ background:var(--c); color:var(--white) }
.cat-row[data-light]:hover{ color:var(--ink) }
.cat-row__n{ font-family:var(--f-display); font-size:2.5rem; opacity:.3; transition:.3s }
.cat-row:hover .cat-row__n{ opacity:1; transform:translateX(6px) }
.cat-row h3{ font-family:var(--f-display); text-transform:uppercase; font-size:clamp(1.25rem,3.1vw,2.5rem); line-height:.95 }
.cat-row p{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; margin-top:7px; opacity:.65 }
.cat-row__go{ display:flex; align-items:center; gap:10px; font-weight:700; text-transform:uppercase; font-size:.8rem; white-space:nowrap; border:3px solid currentColor; padding:10px 16px }
.cat-row:hover .cat-row__go{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
@media (max-width:720px){
  .cat-row{ grid-template-columns:60px 1fr; padding:18px }
  .cat-row__go{ grid-column:2; justify-self:start }
}

/* ---------- PROCESO (scroll horizontal) ---------- */
.proc{ position:relative; height:340vh }
.proc__sticky{ position:sticky; top:0; height:100svh; display:flex; align-items:center; overflow:hidden }
.proc__track{ display:flex; gap:26px; padding-inline:6vw; will-change:transform }
.proc__step{
  flex:0 0 min(430px,80vw); border:var(--bd); background:var(--white);
  box-shadow:var(--sh); padding:34px; min-height:390px; display:flex; flex-direction:column;
}
.proc__step b{ font-family:var(--f-display); font-size:4.6rem; line-height:.8; -webkit-text-stroke:2px var(--ink); color:transparent }
.proc__step h3{ margin:18px 0 12px; font-family:var(--f-display); text-transform:uppercase; font-size:1.55rem; line-height:1 }
.proc__step p{ opacity:.82; font-size:.95rem }
.proc__step .bar{ margin-top:auto; height:14px; background:var(--c); border:3px solid var(--ink) }
.proc__intro{ flex:0 0 min(430px,80vw); display:flex; flex-direction:column; justify-content:center }
@media (max-width:760px){ .proc{ height:auto } .proc__sticky{ position:static; height:auto; padding:0 } .proc__track{ flex-direction:column; padding:0; transform:none !important } .proc__step{ flex:auto; min-height:auto } }

/* ---------- NÚMEROS ---------- */
.nums{ display:grid; grid-template-columns:repeat(4,1fr); border:var(--bd); background:var(--ink); gap:var(--bw) }
.nums div{ background:var(--paper); padding:38px 24px; text-align:center }
.nums b{ font-family:var(--f-display); font-size:clamp(2.4rem,5.5vw,4.6rem); line-height:1; display:block }
.nums div > span{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; opacity:.7 }
@media (max-width:700px){ .nums{ grid-template-columns:1fr 1fr } }

/* ---------- CONTACTO ---------- */
.contact{ background:var(--ink); color:var(--paper); border-block:var(--bd) }
.contact .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }
.contact h2{ color:var(--paper) }
.contact .lead{ opacity:.75; margin-top:18px; max-width:44ch }
.contact__ways{ margin-top:30px; display:grid; gap:12px }
.contact__ways a{ display:flex; align-items:center; gap:14px; border:3px solid var(--paper); padding:15px 18px; transition:.18s; font-weight:700 }
.contact__ways a:hover{ background:var(--yellow); color:var(--ink); border-color:var(--yellow); transform:translateX(8px) }
.form{ display:grid; gap:14px; background:var(--paper); color:var(--ink); border:var(--bd); box-shadow:8px 8px 0 var(--cyan); padding:30px }
.form label{ font-family:var(--f-mono); font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:6px; font-weight:700 }
.form input,.form textarea,.form select{ width:100%; border:3px solid var(--ink); background:var(--white); padding:13px; outline:0; transition:.15s }
.form input:focus,.form textarea:focus,.form select:focus{ box-shadow:4px 4px 0 var(--magenta); transform:translate(-2px,-2px) }
.form textarea{ min-height:110px; resize:vertical }
.chips{ display:flex; flex-wrap:wrap; gap:8px }
.chips input{ display:none }
.chips label{ margin:0; cursor:pointer; border:3px solid var(--ink); padding:8px 13px; background:var(--white); transition:.15s; letter-spacing:.1em }
.chips input:checked + label{ background:var(--magenta); color:var(--white) }
@media (max-width:900px){ .contact .wrap{ grid-template-columns:1fr } }
@media (max-width:820px){ .hero__bottom{ grid-template-columns:1fr } }