/* ═══════════════════════════════════════════════════════════
   MISUNET · Estilos por sección
   ═══════════════════════════════════════════════════════════ */

/* ══ HERO ══════════════════════════════════════════════════ */
.hero{
  position:relative;
  isolation:isolate;
  display:flex; align-items:center;
  min-height:min(100vh,900px);
  min-height:min(100svh,900px);   /* barra de navegación móvil */
  padding-block:calc(var(--header-h) + clamp(4rem,8vw,7rem)) clamp(5rem,9vw,8rem);
  overflow:hidden;
}
.hero::after{ /* grano */
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:var(--noise); opacity:.028; mix-blend-mode:overlay;
}
.hero__canvas{ position:absolute; inset:0; z-index:0; width:100%; height:100%; }

/* Halos de luz: profundidad sin peso de imagen */
.hero__aura{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(60% 55% at 78% 18%, rgb(var(--brand-rgb) / .30), transparent 68%),
    radial-gradient(45% 45% at 12% 82%, rgb(30 116 214 / .18), transparent 70%),
    radial-gradient(90% 70% at 50% 120%, rgb(90 209 240 / .10), transparent 65%);
}
.hero__rule{
  position:absolute; inset-inline:0; bottom:0; z-index:3; height:1px;
  background:linear-gradient(90deg,transparent,var(--line-dark-2) 30%,var(--brand-500) 50%,var(--line-dark-2) 70%,transparent);
  opacity:.6;
}
.hero__inner{ position:relative; z-index:4; max-width:960px; }

.hero__title{
  margin-top:var(--space-5);
  font-size:var(--fs-hero);
  line-height:var(--lh-tight);
  letter-spacing:-.042em;
  color:#fff;
  max-width:17ch;
}
/* El degradado se aplica también a cada palabra: tras el split del JS
   los <span> transformados pintan su propio texto y heredar el recorte
   del <em> no es fiable en todos los motores. */
.hero__title em,
.hero__title em .word>span{
  background:linear-gradient(100deg,var(--brand-300),var(--accent-400));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
/* En modo alto contraste el recorte a texto se descarta y el titular
   quedaría invisible: se restituye el color sólido. */
@media (forced-colors:active){
  .hero__title em,
  .hero__title em .word>span,
  .philosophy__line--accent{
    background:none;
    -webkit-text-fill-color:currentColor;
    color:CanvasText;
  }
}
.hero__lead{
  margin-top:clamp(1.25rem,2vw,1.75rem);
  font-size:var(--fs-lg);
  color:var(--on-dark-2);
  max-width:56ch;
}
.hero__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-4);
  margin-top:clamp(2rem,3.5vw,2.75rem);
}
@media (max-width:479px){
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn{ width:100%; }
}
.hero__trust{
  display:flex; flex-wrap:wrap; gap:.75rem 1.75rem;
  margin-top:clamp(2.25rem,4vw,3.25rem);
  padding-top:var(--space-5);
  border-top:1px solid var(--line-dark);
  font-size:var(--fs-sm);
  color:var(--on-dark-3);
}
.hero__trust li{ display:flex; align-items:center; gap:.5rem; }
.hero__trust span{ color:var(--brand-400); font-weight:700; }

.hero__cue{
  position:absolute; left:50%; bottom:clamp(1.25rem,3vw,2.25rem); z-index:5;
  translate:-50% 0;
  display:grid; place-items:center;
  width:28px; height:46px;
}
.hero__cue-line{
  width:1px; height:100%;
  background:linear-gradient(var(--line-dark-2),transparent);
  position:relative; overflow:hidden;
}
.hero__cue-line::after{
  content:''; position:absolute; inset-inline:0; top:0; height:40%;
  background:linear-gradient(var(--brand-400),transparent);
  animation:cue 2.4s var(--ease-in-out) infinite;
}
@keyframes cue{ 0%{ transform:translateY(-100%); } 60%,100%{ transform:translateY(260%); } }
@media (max-height:680px){ .hero__cue{ display:none; } }

/* ══ Franja de capacidades ═════════════════════════════════ */
.strip{
  padding-block:clamp(2.5rem,4vw,3.75rem);
  border-top:1px solid var(--line-dark);
  overflow:hidden;
}
.strip__label{
  max-width:var(--container); margin:0 auto clamp(1.25rem,2vw,1.75rem);
  padding-inline:var(--gutter);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--on-dark-3);
}

/* ══ Problemas ═════════════════════════════════════════════ */
.pains{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.pain{
  position:relative;
  padding:clamp(1.5rem,1.2rem + 1vw,2.125rem);
  background:var(--paper);
  transition:background-color var(--t-base) var(--ease-out);
}
.pain::after{ /* barra de acento que crece al pasar el cursor */
  content:''; position:absolute; left:0; top:0; bottom:0; width:2px;
  background:var(--brand-600);
  transform:scaleY(0); transform-origin:top;
  transition:transform var(--t-base) var(--ease-out);
}
.pain:hover{ background:var(--paper-2); }
.pain:hover::after{ transform:scaleY(1); }
.pain__i{
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:.1em; color:var(--brand-400);
}
.pain h3{ font-size:var(--fs-md); margin:var(--space-3) 0 .5rem; }
.pain p{ font-size:var(--fs-sm); color:var(--ink-3); }

.pains__close{
  margin-top:clamp(2.5rem,4vw,3.5rem);
  font-family:var(--font-display);
  font-size:var(--fs-xl); font-weight:500;
  line-height:1.4; letter-spacing:-.02em;
  color:var(--ink);
  max-width:52ch;
}
.pains__close strong{ color:var(--brand-600); font-weight:600; }

/* ══ Enfoque · diagrama Problema → Solución ════════════════ */
.quote-inline{
  margin-top:var(--space-6);
  padding-left:var(--space-5);
  border-left:2px solid var(--brand-600);
  font-family:var(--font-display);
  font-size:var(--fs-lg); line-height:1.45; letter-spacing:-.02em;
  color:var(--ink);
}

.flow{
  display:grid; gap:0;
  padding:clamp(1.5rem,1.2rem + 1.5vw,2.5rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
}
.flow__node{
  padding:var(--space-5);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--paper-2);
}
.flow__node--to{ border-color:rgb(var(--brand-rgb) / .28); background:rgb(var(--brand-rgb) / .05); }
.flow__tag{
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3);
}
.flow__node strong{
  display:block; margin-top:.35rem;
  font-family:var(--font-display); font-size:var(--fs-md);
  letter-spacing:-.02em; color:var(--ink);
}
.flow__node--to strong{ color:var(--brand-700); }
.flow__node p{ margin-top:.3rem; font-size:var(--fs-sm); color:var(--ink-3); }

.flow__wire{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  padding-block:14px;
}
.flow__wire i{
  width:4px; height:4px; border-radius:50%;
  background:var(--brand-300);
  animation:flowDot 1.9s var(--ease-in-out) infinite;
}
.flow__wire i:nth-child(2){ animation-delay:.18s; }
.flow__wire i:nth-child(3){ animation-delay:.36s; }
@keyframes flowDot{
  0%,100%{ opacity:.25; transform:scale(.8); }
  50%{ opacity:1; transform:scale(1.15); background:var(--brand-600); }
}

.flow__core{
  display:flex; align-items:center; justify-content:center; gap:.75rem;
  padding:var(--space-4) var(--space-5);
  border-radius:var(--r-md);
  background:var(--brand-900);
  color:#fff;
  box-shadow:var(--sh-brand);
}
.flow__core img{ height:26px; width:auto; filter:brightness(0) invert(1); }
.flow__core span{
  font-family:var(--font-mono); font-size:.75rem;
  letter-spacing:.1em; text-transform:uppercase;
}

/* ══ Proceso ═══════════════════════════════════════════════ */
.steps{
  position:relative;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));
  gap:clamp(2rem,3vw,2.5rem);
}
/* Línea guía que se rellena con el scroll (--fill lo actualiza el JS) */
.steps::before,.steps::after{
  content:''; position:absolute; left:0; right:0; top:17px; height:1px;
}
.steps::before{ background:var(--line-dark); }
.steps::after{
  background:linear-gradient(90deg,var(--brand-600),var(--accent-400));
  transform:scaleX(var(--fill,0)); transform-origin:left;
  transition:transform .35s var(--ease-out);
}
@media (max-width:719px){
  .steps::before,.steps::after{ display:none; }
}
/* Sin JS de scroll (movimiento reducido) la línea nunca se rellenaría:
   se muestra completa para no dejar el elemento a medias. */
@media (prefers-reduced-motion:reduce){
  .steps{ --fill:1; }
}
.step{ position:relative; }
.step__n{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:36px; height:36px;
  border-radius:50%;
  background:var(--void);
  border:1px solid var(--line-dark-2);
  font-family:var(--font-mono); font-size:.75rem;
  color:var(--on-dark-2);
  transition:border-color var(--t-base) var(--ease-out),
             color var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out);
}
.step.is-in .step__n{
  border-color:var(--brand-500); color:#fff;
  box-shadow:0 0 0 6px rgb(var(--brand-rgb) / .12);
}
.step h3{ margin:var(--space-5) 0 .5rem; font-size:var(--fs-md); color:var(--on-dark); }
.step p{ font-size:var(--fs-sm); color:var(--on-dark-2); }
.step__out{
  display:inline-flex; align-items:center; gap:.45em;
  margin-top:var(--space-4);
  padding:.3rem .7rem;
  border:1px solid var(--line-dark);
  border-radius:var(--r-full);
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:var(--brand-300);
}
.step__out::before{ content:''; width:4px; height:4px; background:var(--brand-500); transform:rotate(45deg); }

/* ══ Principios ════════════════════════════════════════════ */
.principles{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:clamp(1.75rem,1rem + 2vw,2.75rem);
}
.principle{ padding-top:var(--space-5); border-top:1px solid var(--line); }
.principle svg{
  width:24px; height:24px; margin-bottom:var(--space-4);
  fill:none; stroke:var(--brand-600); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.principle h3{ font-size:var(--fs-md); margin-bottom:.4rem; }
.principle p{ font-size:var(--fs-sm); color:var(--ink-3); }

.statement{
  margin:clamp(3.5rem,6vw,5.5rem) 0 0;
  padding:0;
  max-width:22ch;
}
.statement p{
  font-family:var(--font-display);
  font-size:var(--fs-2xl); font-weight:600;
  line-height:1.22; letter-spacing:-.03em;
  color:var(--ink);
}
.statement em{ color:var(--brand-600); }

/* ══ Panel CTA ═════════════════════════════════════════════ */
.cta-panel{
  position:relative; isolation:isolate; overflow:hidden;
  padding:clamp(2.5rem,2rem + 4vw,5rem);
  border-radius:var(--r-xl);
  background:linear-gradient(135deg,var(--brand-900) 0%,var(--brand-700) 55%,var(--brand-600) 130%);
  color:#fff;
  box-shadow:var(--sh-4);
}
.cta-panel::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background-image:var(--noise); opacity:.05;
}
.cta-panel__glow{
  position:absolute; z-index:-1;
  width:min(560px,80%); aspect-ratio:1; right:-8%; top:-45%;
  background:radial-gradient(circle,rgb(90 209 240 / .28),transparent 62%);
}
.cta-panel__body{ position:relative; max-width:62ch; }
.cta-panel h2{
  font-size:var(--fs-2xl); color:#fff;
}
.cta-panel p{
  margin-top:var(--space-4);
  font-size:var(--fs-md); color:rgb(255 255 255 / .82);
}
.cta-panel__actions{
  display:flex; flex-wrap:wrap; gap:var(--space-4);
  margin-top:clamp(1.75rem,3vw,2.5rem);
}
@media (max-width:479px){
  .cta-panel__actions{ flex-direction:column; align-items:stretch; }
  .cta-panel__actions .btn{ width:100%; }
}

/* ══ Nosotros ══════════════════════════════════════════════ */
.founder__card{
  padding:clamp(1.75rem,1.4rem + 1.4vw,2.5rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  box-shadow:var(--sh-2);
}
.founder__mark{
  display:grid; place-items:center;
  width:56px; height:56px;
  border-radius:var(--r-md);
  background:linear-gradient(140deg,var(--brand-900),var(--brand-600));
  color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:1.0625rem;
  letter-spacing:.04em;
  box-shadow:var(--sh-brand);
}
.founder__name{
  margin-top:var(--space-5);
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-md);
  letter-spacing:-.02em; color:var(--ink);
}
.founder__role{
  margin-top:.15rem;
  font-family:var(--font-mono); font-size:.6875rem;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3);
}
.founder__card hr{ margin:var(--space-5) 0; }
.founder__quote{ font-size:var(--fs-sm); line-height:1.6; color:var(--ink-3); font-style:italic; }

.pillars{
  display:grid; gap:var(--space-5);
  margin-top:clamp(3rem,5vw,4.5rem);
}
@media (min-width:760px){ .pillars{ grid-template-columns:1fr 1fr; } }
.pillar{
  position:relative;
  padding:clamp(1.75rem,1.4rem + 1.2vw,2.25rem);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  transition:border-color var(--t-base) var(--ease-out), box-shadow var(--t-base) var(--ease-out);
}
.pillar:hover{ border-color:var(--brand-200); box-shadow:var(--sh-2); }
.pillar__label{
  display:inline-block; margin-bottom:var(--space-4);
  font-family:var(--font-mono); font-size:var(--fs-xs);
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--brand-600);
}
.pillar p{ font-size:var(--fs-sm); color:var(--ink-2); line-height:1.7; }

/* ══ FAQ ═══════════════════════════════════════════════════ */
.faq__intro{ position:sticky; top:calc(var(--header-h) + 2rem); }
@media (max-width:899px){ .faq__intro{ position:static; } }

/* ══ Filosofía ═════════════════════════════════════════════ */
.philosophy{
  position:relative; overflow:hidden;
  padding-block:clamp(6rem,12vw,11rem);
  text-align:center;
}
.philosophy__grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--line-dark) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-dark) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,#000,transparent 75%);
  opacity:.55;
}
.philosophy .container{ position:relative; }
.philosophy__line{
  font-family:var(--font-display);
  font-size:var(--fs-4xl); font-weight:700;
  line-height:1.12; letter-spacing:-.04em;
  color:rgb(255 255 255 / .34);
}
.philosophy__line--accent{
  color:#fff;
  background:linear-gradient(100deg,#fff 30%,var(--brand-300) 70%,var(--accent-400) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ══ Contacto ══════════════════════════════════════════════ */
.contact{ position:relative; }
.channels{ display:grid; gap:var(--space-3); margin-top:clamp(2rem,3.5vw,2.75rem); }
.channel{
  display:flex; align-items:center; gap:var(--space-4);
  padding:1rem 1.125rem;
  border:1px solid var(--line-dark);
  border-radius:var(--r-md);
  background:rgb(255 255 255 / .04);
  color:var(--on-dark);
  transition:background-color var(--t-base) var(--ease-out),
             border-color var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out);
}
.channel:hover{ background:rgb(255 255 255 / .08); border-color:var(--brand-500); transform:translateX(4px); }
.channel__icon{
  display:grid; place-items:center; flex:none;
  width:40px; height:40px; border-radius:var(--r-sm);
  background:rgb(var(--brand-rgb) / .18);
  color:var(--brand-300);
}
.channel__icon svg{ width:20px; height:20px; }
.channel__text{ display:grid; }
.channel__text b{
  font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:var(--on-dark-3);
}
.channel__text i{ font-style:normal; font-weight:600; font-size:var(--fs-sm); }
.channel__go{
  width:18px; height:18px; margin-left:auto; flex:none;
  fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--on-dark-3);
  transition:transform var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out);
}
.channel:hover .channel__go{ transform:translateX(3px); color:var(--brand-300); }
.channels__note{
  margin-top:var(--space-5);
  font-size:var(--fs-sm); color:var(--on-dark-3);
}

/* ══ Footer ════════════════════════════════════════════════ */
.footer{ padding-top:clamp(3.5rem,6vw,5.5rem); border-top:1px solid var(--line-dark); }
.footer__top{
  display:grid; gap:clamp(2.25rem,4vw,3rem);
  padding-bottom:clamp(2.5rem,4vw,3.5rem);
}
@media (min-width:640px){ .footer__top{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .footer__top{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; } }
.footer__brand img{ height:44px; width:auto; }
.footer__brand p{
  margin-top:var(--space-5);
  font-size:var(--fs-sm); line-height:1.7; color:var(--on-dark-3);
  max-width:30ch;
}
.footer__col h2{
  font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--on-dark-3);
  margin-bottom:var(--space-5);
}
.footer__col ul{ display:grid; gap:.75rem; }
.footer__col a,.footer__col span{ font-size:var(--fs-sm); color:var(--on-dark-2); }
.footer__col a{ transition:color var(--t-fast) var(--ease-out); }
.footer__col a:hover{ color:#fff; }
.footer__cta{ margin-top:var(--space-5); }

.footer__bottom{
  display:flex; flex-wrap:wrap; gap:var(--space-3) var(--space-5);
  justify-content:space-between;
  padding-block:var(--space-5);
  border-top:1px solid var(--line-dark);
}
.footer__bottom p{ font-size:.8125rem; color:var(--on-dark-3); }