/* ============================================================
   NOSOTROS · nosotros.html, versión 3 (oct 2026)
   La tesis del estudio en una escena: el cliente que compra y el
   equipo que la opera, unidos por la web. Manifiesto que se enciende
   palabra por palabra con el scroll, principios como "lo que dejamos
   afuera → lo que hacemos", fundador y mapa.
   La base (hero en 2 columnas, entradas GSAP, FAQ, cierre) viene de
   diseno-web.css. Sin JS o con movimiento reducido se ve el cuadro
   final de la escena y el texto completo.
   ============================================================ */

/* ---------- HERO · escena ---------- */
.noh{--d:11s}
.noh-hilo{fill:none;stroke:rgba(169,164,248,.32);stroke-width:1.5;stroke-dasharray:3 6}
.noh-pulso{fill:none;stroke:var(--mint);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:.06 1;stroke-dashoffset:.06;opacity:0;filter:drop-shadow(0 0 4px rgba(62,230,168,.8))}
.noh-tap{fill:none;stroke:#fff;stroke-width:1.6;opacity:0}
.noh-rol{font-weight:600}
/* cuadro final: oferta publicada, pedido hecho y avisado en el panel */
.noh .noh-web-v,.noh .noh-tel-v,.noh .noh-pin-v,.noh .noh-st-v{opacity:0}
.noh .noh-knob{transform:translateX(14px)}

.en-vista .noh .noh-knob{animation:noh-knob var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes noh-knob{0%,6%{transform:none}10%,95%{transform:translateX(14px)}98%,100%{transform:none}}
.en-vista .noh .noh-track{animation:noh-track var(--d) linear infinite}
@keyframes noh-track{0%,6%{opacity:0}9%,95%{opacity:1}98%,100%{opacity:0}}
.en-vista .noh .noh-pin-v{animation:noh-v1 var(--d) linear infinite}
.en-vista .noh .noh-pin-n{animation:noh-n1 var(--d) linear infinite}
@keyframes noh-v1{0%,12%{opacity:1}14%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes noh-n1{0%,12%{opacity:0}14%,95%{opacity:1}98%,100%{opacity:0}}
.en-vista .noh .noh-pub{animation:noh-pub var(--d) linear infinite}
@keyframes noh-pub{0%,18%{fill:var(--mint)}20%{fill:#fff}24%,100%{fill:var(--mint)}}
.en-vista .noh .noh-p2{animation:noh-p2 var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes noh-p2{0%,22%{opacity:0;stroke-dashoffset:.06}23%{opacity:1}39%{opacity:1;stroke-dashoffset:-1}40%,100%{opacity:0;stroke-dashoffset:-1}}
.en-vista .noh .noh-web-v{animation:noh-v2 var(--d) linear infinite}
.en-vista .noh .noh-web-n{animation:noh-n2 var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes noh-v2{0%,30%{opacity:1}32%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes noh-n2{0%,30%{opacity:0;transform:translateY(5px)}33%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .noh .noh-tel-v{animation:noh-v3 var(--d) linear infinite}
.en-vista .noh .noh-tel-n{animation:noh-n3 var(--d) linear infinite}
@keyframes noh-v3{0%,38%{opacity:1}40%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes noh-n3{0%,38%{opacity:0}40%,95%{opacity:1}98%,100%{opacity:0}}
.en-vista .noh .noh-tap{animation:noh-tap var(--d) ease-out infinite}
@keyframes noh-tap{0%,46%{opacity:0;transform:scale(.4)}48%{opacity:1}55%,100%{opacity:0;transform:scale(1.9)}}
.en-vista .noh .noh-tel-btn{animation:noh-btn var(--d) linear infinite}
@keyframes noh-btn{0%,47%{fill:var(--mint)}49%{fill:#fff}52%,100%{fill:var(--mint)}}
.en-vista .noh .noh-tel-ok{animation:noh-ok var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes noh-ok{0%,50%{opacity:0;transform:translateY(8px)}54%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .noh .noh-p1{animation:noh-p1 var(--d) cubic-bezier(.45,0,.3,1) infinite}
@keyframes noh-p1{0%,54%{opacity:0;stroke-dashoffset:.06}55%{opacity:1}71%{opacity:1;stroke-dashoffset:-1}72%,100%{opacity:0;stroke-dashoffset:-1}}
.en-vista .noh .noh-st-v{animation:noh-v4 var(--d) linear infinite}
.en-vista .noh .noh-st-n{animation:noh-n4 var(--d) cubic-bezier(.34,1.56,.64,1) infinite}
@keyframes noh-v4{0%,62%{opacity:1}64%,95%{opacity:0}98%,100%{opacity:1}}
@keyframes noh-n4{0%,62%{opacity:0;transform:scale(.6)}66%,95%{opacity:1;transform:none}98%,100%{opacity:0}}
.en-vista .noh .noh-pan-ok{animation:noh-pan var(--d) cubic-bezier(.16,1,.3,1) infinite}
@keyframes noh-pan{0%,70%{opacity:0;transform:translateY(-8px)}75%,95%{opacity:1;transform:none}98%,100%{opacity:0}}

/* ---------- MANIFIESTO · la frase se enciende con el scroll ---------- */
.nos-frase{
  margin-top:var(--sp-md);max-width:34ch;
  font-family:var(--font-display);font-weight:500;letter-spacing:-.015em;
  font-size:clamp(1.45rem,.9rem + 2.1vw,2.7rem);line-height:1.22;color:var(--text);text-wrap:pretty;
}
.nos-frase__m{color:var(--mint)}
.nos-manif__cols{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-sm) var(--sp-lg);
  max-width:980px;margin-top:var(--sp-md);padding-top:var(--sp-md);border-top:1px solid var(--line);
}
.nos-manif__cols p{color:var(--muted);font-size:var(--fs-base);line-height:1.7}
.nos-manif__cols strong{color:var(--text);font-weight:600}
@media (max-width:760px){.nos-manif__cols{grid-template-columns:1fr}}

/* ---------- PRINCIPIOS · lo que dejamos afuera → lo que hacemos ---------- */
.nos-reglas{list-style:none;padding:0;margin-top:var(--sp-md);border-top:1px solid var(--line)}
.nos-regla{
  display:grid;grid-template-columns:minmax(0,.95fr) 44px minmax(0,1.2fr);align-items:center;
  gap:.75rem var(--sp-md);padding:clamp(1.4rem,2.6vw,2.3rem) 0;border-bottom:1px solid var(--line);
}
.nos-regla__antes{font-family:var(--font-display);font-weight:500;font-size:clamp(1.05rem,.85rem + .8vw,1.55rem);line-height:1.3;color:var(--muted)}
/* la tachadura es un fondo del texto: sigue a la palabra aunque cambie de renglón */
.nos-regla__antes span{
  background-image:linear-gradient(var(--danger),var(--danger));background-repeat:no-repeat;
  background-size:100% 2px;background-position:0 58%;-webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.nos-regla__flecha{width:40px;height:16px;fill:none;stroke:var(--mint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.nos-regla__ahora h3{font-size:clamp(1.25rem,.95rem + 1.1vw,1.95rem);line-height:1.15;color:var(--text)}
.nos-regla__ahora p{margin-top:.45rem;color:var(--muted);font-size:var(--fs-base);line-height:1.6;max-width:46ch}
@media (prefers-reduced-motion:no-preference){
  .js-anim .nos-regla__antes span{transition:background-size .9s cubic-bezier(.16,1,.3,1) .25s,color .6s ease .25s}
  .js-anim .nos-regla:not(.en-vista) .nos-regla__antes span{background-size:0 2px;color:var(--text)}
  .js-anim .nos-regla__flecha path{stroke-dasharray:60;stroke-dashoffset:0;transition:stroke-dashoffset .8s cubic-bezier(.16,1,.3,1) .55s}
  .js-anim .nos-regla:not(.en-vista) .nos-regla__flecha path{stroke-dashoffset:60}
}
@media (max-width:760px){
  .nos-regla{grid-template-columns:1fr;gap:.6rem}
  .nos-regla__flecha{transform:rotate(90deg);width:26px;margin-left:.2rem}
}

/* ---------- FUNDADOR ---------- */
.nos-fund__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--sp-lg);align-items:center}
.nos-fund__retrato,.nos-fund__foto{width:100%;max-width:420px;aspect-ratio:4 / 5;border-radius:28px}
.nos-fund__foto{display:block;object-fit:cover;border:1px solid var(--line-strong)}
.nos-fund__retrato{
  position:relative;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-strong);
  background:radial-gradient(110% 80% at 15% 8%,rgba(108,99,255,.38),transparent 60%),
             radial-gradient(90% 70% at 95% 100%,rgba(62,230,168,.22),transparent 62%),var(--surface);
}
.nos-fund__anillo{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;border:1px dashed rgba(169,164,248,.4)}
.nos-fund__anillo::after{content:'';position:absolute;top:-5px;left:50%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:var(--mint)}
.nos-fund__mono{
  position:relative;font-family:var(--font-display);font-weight:700;letter-spacing:-.05em;line-height:1;
  font-size:clamp(5rem,4rem + 5vw,9rem);color:transparent;-webkit-text-stroke:1.5px var(--lavender);
}
@media (prefers-reduced-motion:no-preference){
  .nos-fund__anillo{animation:nos-girar 28s linear infinite}
}
@keyframes nos-girar{to{transform:rotate(360deg)}}
.nos-fund__nombre{display:flex;flex-direction:column;gap:.15rem;margin-top:var(--sp-sm)}
.nos-fund__nombre strong{font-family:var(--font-display);font-size:clamp(1.4rem,1.1rem + 1vw,1.9rem);color:var(--text);line-height:1.1}
.nos-fund__nombre span{color:var(--lavender);font-size:var(--fs-sm)}
.nos-fund__bio{margin-top:1rem;max-width:56ch;color:var(--muted);font-size:var(--fs-base);line-height:1.7}
.nos-fund__firma{margin-top:1.3rem;padding-left:1rem;border-left:2px solid var(--mint);font-family:var(--font-display);font-size:clamp(1.05rem,.95rem + .4vw,1.3rem);color:var(--text);line-height:1.35}
.nos-fund__datos{list-style:none;padding:0;margin-top:var(--sp-md);border-top:1px solid var(--line)}
.nos-fund__datos li{display:grid;grid-template-columns:9.5rem minmax(0,1fr);gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line);color:var(--text);font-size:var(--fs-sm)}
.nos-fund__datos li>span{color:var(--muted)}
.nos-fund__datos a{color:var(--mint);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.nos-fund__datos a:hover{opacity:.8}
@media (max-width:860px){
  .nos-fund__grid{grid-template-columns:1fr;gap:var(--sp-md)}
  .nos-fund__retrato,.nos-fund__foto{max-width:300px;aspect-ratio:1}
}
@media (max-width:480px){.nos-fund__datos li{grid-template-columns:1fr;gap:.15rem}}

/* ---------- DÓNDE · mapa ---------- */
.nos-mapa__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-lg);align-items:center}
.nos-mapa .mapa{max-width:460px}
.nos-mapa .mapa__pin text{stroke:var(--bg-alt)}
.nos-mapa__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:var(--sp-sm);padding-bottom:.2rem;color:var(--mint);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(62,230,168,.4);transition:gap .25s,border-color .25s}
.nos-mapa__link:hover{gap:.75rem;border-color:var(--mint)}
@media (max-width:860px){
  .nos-mapa__grid{grid-template-columns:1fr;gap:var(--sp-md)}
  .nos-mapa .mapa{max-width:380px}
}

@media (prefers-reduced-motion:reduce){.noh *{animation:none !important}}

/* títulos de las secciones a dos columnas: máximo 3 renglones en la columna */
.nos-mapa__texto .section-title,.nos-fund__texto .section-title{font-size:clamp(1.9rem,1rem + 2.4vw,3.2rem)}

/* ---------- QUÉ HACEMOS · tres servicios en tarjetas (.inc-cards de v2.css) ---------- */
.nos-serv .inc-card{min-height:0}
.inc-card__links{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:auto;padding-top:.2rem}
.inc-card__links a{color:var(--mint);font-family:var(--font-display);font-weight:600;font-size:var(--fs-sm);text-decoration:none;border-bottom:1px solid rgba(62,230,168,.4);padding-bottom:.1rem}
.inc-card__links a::after{content:' →'}
.inc-card__links a:hover{border-color:var(--mint)}

/* título del hero en 2 líneas en cualquier ancho ("Soporte tecnológico para PYMEs:" mide 15,3 em) */
.page-hero--v2 .page-hero__title{font-size:min(clamp(1.3rem,.35rem + 4.3vw,4.4rem),calc((100vw - 40px) / 15.8))}