/* ==========================================================================
   Portada 2028 · capa del 29/10/26 (body.ma-home-c) — leer antes de tocar. PHP: inc/home-c.php.
   1. Titulares y grandes bloques centrados. Jacinto (29/10, 08:03): como en Servicios, los titulares y los
      grandes grupos de lo que hacemos, y los clientes, en el eje; se ve mejor en el teléfono y en el escritorio.
      · Centrado: Disciplinas (.hn), las hojas de Branding y Eventos (.hq), Clientes (.hk), el cierre (.hz) y, en
        el móvil, las tres puertas tras el collage (.hc-tres). Ya lo estaban: Lo que somos (.hs) y «De la pantalla
        a las personas» (.hp).
      · Sin tocar: la entrada (.hv, las palabras rodean la tarjeta) y el collage de trabajos (.hc), que son
        composiciones y no titulares.
   2. Jacinto (29/10, 08:19):
      · Más aire entre las hojas de Branding y Eventos: el bloque de texto de cada hoja sube y deja ver la pieza
        debajo antes de que monte la hoja siguiente.
      · Las cuatro disciplinas, en bloque y con animación (en filas, la portada se hacía larga): una fila de
        cuatro (dos por dos en el móvil) con un dibujo de línea por disciplina que se traza al entrar.
      · Clientes sube por encima de la pantalla y la pantalla abre con su titular (ma-home-pantalla.css).
   Sin JavaScript o con movimiento reducido, todo se ve acabado y quieto.
   ========================================================================== */

/* ---------- Disciplinas: cabecera ---------- */
.ma-home-c .hn-h{display:flex;flex-direction:column;align-items:center;text-align:center}
.ma-home-c .hn-t{font-size:clamp(44px,6.4vw,96px)}
.ma-home-c .hn-p{justify-self:auto;max-width:46ch;margin:clamp(18px,2.4vw,28px) auto 0;padding-bottom:0}

/* ---------- Disciplinas: el bloque ----------
   Cuatro columnas en rejilla compartida (subgrid): dibujo, palabra, frase y flecha alineados entre columnas.
   La línea de arriba se dibuja desde el centro y las de separación, de arriba abajo. */
.ma-home-c .hn-g{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,auto);
  margin-top:clamp(52px,6vw,92px)}
.ma-home-c .hn-g::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(31,35,34,.16);transform-origin:50% 50%}
.ma-home-c .hn-c{--b:calc(.25s + var(--i,0) * .2s);position:relative;grid-row:span 4;display:grid;grid-template-rows:subgrid;
  justify-items:center;padding:clamp(30px,3.2vw,48px) clamp(12px,1.6vw,26px) clamp(4px,1vw,10px);text-align:center;color:var(--ink);text-decoration:none}
.ma-home-c .hn-c+.hn-c::before{content:"";position:absolute;left:0;top:clamp(30px,3.2vw,48px);bottom:0;width:1px;background:rgba(31,35,34,.12);transform-origin:50% 0}
.ma-home-c .hn-c:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:10px}
.ma-home-c .hn-v{display:block;width:100%;max-width:220px;height:auto;margin-bottom:clamp(20px,2.2vw,30px);overflow:visible;color:var(--ink);
  transition:transform .9s cubic-bezier(.16,1,.3,1)}
.ma-home-c .hn-c:hover .hn-v{transform:translateY(-5px)}
.ma-home-c .hn-w{align-self:end;margin-bottom:12px;font-family:'nh-ultralight',var(--f-light);font-weight:200;font-size:clamp(30px,2.9vw,46px);
  line-height:1.02;letter-spacing:-.035em;color:var(--ink);text-wrap:balance;transition:color .35s ease}
.ma-home-c .hn-s{align-self:start;max-width:23ch;margin-bottom:22px;font-family:var(--f-light);font-weight:300;font-size:clamp(15px,1.12vw,17px);
  line-height:1.45;color:rgba(31,35,34,.64);text-wrap:balance}
.ma-home-c .hn-a{align-self:end;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid rgba(31,35,34,.22);
  font-size:15px;line-height:1;color:var(--ink);transition:background-color .35s ease,border-color .35s ease,color .35s ease}
.ma-home-c .hn-c:hover .hn-w,.ma-home-c .hn-c:focus-visible .hn-w{color:var(--orange)}
.ma-home-c .hn-c:hover .hn-a,.ma-home-c .hn-c:focus-visible .hn-a{background:var(--orange);border-color:var(--orange);color:#fff}

/* Los dibujos, acabados (así se ven sin JavaScript o con movimiento reducido) */
.ma-home-c .hn-v .nl{fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.ma-home-c .hn-v .nf{stroke-opacity:.3}
.ma-home-c .hn-v .nff{stroke-opacity:.14}
.ma-home-c .nb-c,.ma-home-c .nb-s,.ma-home-c .nb-t{transform-box:fill-box;transform-origin:center}
.ma-home-c .hn-v .nb-c{fill:var(--orange);fill-opacity:.92;stroke:var(--orange)}
.ma-home-c .ne-f{fill:var(--orange);opacity:.9}
.ma-home-c .ne-d circle{fill:currentColor;opacity:.5}
.ma-home-c .nc-n{fill:currentColor}
.ma-home-c .nc-o{fill:var(--orange)}
.ma-home-c .hn-v .ni-l{stroke-opacity:.55}
.ma-home-c .ni-c{fill:var(--orange);transform-box:fill-box;transform-origin:center}
.ma-home-c .ni-r{fill:none;stroke:var(--orange);stroke-width:1.2;opacity:0;transform-box:fill-box;transform-origin:center}
.ma-home-c .hn-v .ni-n{fill:var(--bone);transform-box:fill-box;transform-origin:center}
.ma-home-c .ni-s{fill:currentColor;opacity:.45}
.ma-home-c .ni-p{fill:var(--orange);opacity:0}

/* Con JavaScript: estado de partida (.is-js) y llegada (.is-in, una vez, al entrar el bloque) */
.ma-home-c .hn-g.is-js::before{transform:scaleX(0)}
.ma-home-c .hn-g.is-in::before{transform:scaleX(1);transition:transform 1.8s cubic-bezier(.19,1,.22,1) .05s}
.ma-home-c .hn-g.is-js .hn-c+.hn-c::before{transform:scaleY(0)}
.ma-home-c .hn-g.is-in .hn-c+.hn-c::before{transform:scaleY(1);transition:transform 1.4s cubic-bezier(.19,1,.22,1) var(--b)}
.ma-home-c .hn-g.is-js .hn-w,.ma-home-c .hn-g.is-js .hn-s,.ma-home-c .hn-g.is-js .hn-a{opacity:0;transform:translate3d(0,18px,0);filter:blur(5px)}
.ma-home-c .hn-g.is-in .hn-w,.ma-home-c .hn-g.is-in .hn-s,.ma-home-c .hn-g.is-in .hn-a{opacity:1;transform:none;filter:none;--e:cubic-bezier(.19,1,.22,1);
  transition:opacity .9s var(--e) calc(var(--b) + var(--dd,.15s)),transform 1.2s var(--e) calc(var(--b) + var(--dd,.15s)),filter .9s var(--e) calc(var(--b) + var(--dd,.15s)),
    color .35s ease,background-color .35s ease,border-color .35s ease}
.ma-home-c .hn-g .hn-s{--dd:.25s}
.ma-home-c .hn-g .hn-a{--dd:.35s}
/* trazos que se dibujan */
.ma-home-c .hn-g.is-js .nd{stroke-dasharray:1 1;stroke-dashoffset:1;opacity:0}
.ma-home-c .hn-g.is-in .nd{stroke-dashoffset:0;opacity:1;
  transition:stroke-dashoffset 1.2s cubic-bezier(.65,0,.35,1) calc(var(--b) + var(--t,0s) + var(--j,0) * .09s),opacity .01s linear calc(var(--b) + var(--t,0s) + var(--j,0) * .09s)}
/* Branding: las tres formas llegan sueltas y se ordenan; el círculo se queda el color */
.ma-home-c .hn-g.is-js .nb-c{transform:translate(-26px,-30px) scale(.6);opacity:0;fill-opacity:0;stroke:currentColor}
.ma-home-c .hn-g.is-js .nb-s{transform:translate(26px,-34px) rotate(-30deg);opacity:0}
.ma-home-c .hn-g.is-js .nb-t{transform:translate(22px,26px) rotate(46deg);opacity:0}
.ma-home-c .hn-g.is-in .nb-s,.ma-home-c .hn-g.is-in .nb-t{transform:none;opacity:1;
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) calc(var(--b) + .5s + var(--j) * .12s),opacity .7s ease calc(var(--b) + .35s + var(--j) * .12s)}
.ma-home-c .hn-g.is-in .nb-c{transform:none;opacity:1;fill-opacity:.92;stroke:var(--orange);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1) calc(var(--b) + .5s),opacity .7s ease calc(var(--b) + .35s),
    fill-opacity .9s ease calc(var(--b) + 1.75s),stroke .9s ease calc(var(--b) + 1.75s)}
/* Eventos: la pantalla se enciende y la sala se llena de delante atrás */
.ma-home-c .hn-g.is-js .ne-f{opacity:0}
.ma-home-c .hn-g.is-in .ne-f{opacity:.9;transition:opacity 1s ease calc(var(--b) + .8s)}
.ma-home-c .hn-g.is-js .ne-d circle{opacity:0;transform:translateY(5px)}
.ma-home-c .hn-g.is-in .ne-d circle{opacity:.5;transform:none;
  transition:opacity .5s ease calc(var(--b) + 1s + var(--k) * .16s + var(--q) * .03s),transform .9s cubic-bezier(.16,1,.3,1) calc(var(--b) + 1s + var(--k) * .16s + var(--q) * .03s)}
/* Consultoría: el punto aparece donde los caminos se juntan */
.ma-home-c .hn-g.is-js .nc-n,.ma-home-c .hn-g.is-js .nc-o{opacity:0}
.ma-home-c .hn-g.is-in .nc-n{opacity:1;transition:opacity .4s ease calc(var(--b) + .9s)}
/* Inteligencia artificial: la idea, después la red */
.ma-home-c .hn-g.is-js .ni-c{transform:scale(.2);opacity:0}
.ma-home-c .hn-g.is-in .ni-c{transform:none;opacity:1;transition:transform .9s cubic-bezier(.34,1.56,.64,1) calc(var(--b) + .1s),opacity .4s ease calc(var(--b) + .1s)}
.ma-home-c .hn-g.is-js .ni-n{transform:scale(0)}
.ma-home-c .hn-g.is-in .ni-n{transform:none;transition:transform .7s cubic-bezier(.34,1.56,.64,1) calc(var(--b) + .75s + var(--j) * .07s)}
.ma-home-c .hn-g.is-js .ni-s{opacity:0}
.ma-home-c .hn-g.is-in .ni-s{opacity:.45;transition:opacity .6s ease calc(var(--b) + 1.9s + var(--j) * .06s)}

/* Lo que sigue vivo mientras el bloque se ve (se para fuera de pantalla: .is-off) */
@media (prefers-reduced-motion:no-preference){
  .ma-home-c .hn-g.is-in .ne-d circle{animation:hn-ola 5.6s ease-in-out calc(var(--b) + 3s + var(--k) * .18s + var(--q) * .05s) infinite}
  .ma-home-c .hn-g.is-in .ne-f{animation:hn-pant 5.6s ease-in-out calc(var(--b) + 3s) infinite}
  .ma-home-c .hn-g.is-in .nc-o{animation:hn-ruta 3.8s cubic-bezier(.65,0,.35,1) calc(var(--b) + 1.6s) infinite both}
  .ma-home-c .hn-g.is-in .ni-p{animation:hn-pulso 3s ease-in-out calc(var(--b) + 2.3s + var(--j) * .5s) infinite both}
  .ma-home-c .hn-g.is-in .ni-r{animation:hn-onda 3s ease-out calc(var(--b) + 2.3s) infinite both}
  .ma-home-c .hn-g.is-off *{animation-play-state:paused}
}
@keyframes hn-ola{0%,26%,100%{fill:currentColor;opacity:.5}10%{fill:var(--orange);opacity:1}}
@keyframes hn-pant{0%,100%{opacity:.9}9%{opacity:.6}}
@keyframes hn-ruta{0%{transform:translateX(0);opacity:0}10%{opacity:1}70%{transform:translateX(66px);opacity:1}84%,100%{transform:translateX(66px);opacity:0}}
@keyframes hn-pulso{0%{transform:translate(0,0);opacity:0}14%{opacity:1}72%{transform:translate(var(--x),var(--y));opacity:.95}100%{transform:translate(var(--x),var(--y));opacity:0}}
@keyframes hn-onda{0%{transform:scale(1);opacity:0}6%{opacity:.55}100%{transform:scale(3);opacity:0}}

/* ---------- Branding y Eventos: el texto de la hoja en el eje ---------- */
.ma-home-c .hq-x{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;bottom:clamp(64px,11svh,128px)}
.ma-home-c .hq-cap{order:0;align-self:center;margin-bottom:auto}
/* align-self: en la rejilla de antes era «abajo»; en la columna sería «a la derecha» */
.ma-home-c .hq-w{order:1;align-self:center;margin:0;padding-bottom:.1em;font-size:min(var(--hqfs,200px),21svh)}
.ma-home-c .hq-d{order:2;align-self:center;width:min(46ch,100%);margin:clamp(6px,1.2svh,14px) 0 0}
.ma-home-c .hq-p{text-wrap:balance}
.ma-home-c .hq-s{justify-content:center}
.ma-home-c .hq-act{justify-content:center}
.ma-home-c .hq-more{order:3;width:100%;justify-content:center;margin-top:clamp(18px,3svh,30px)}
.ma-home-c .hq-m::after{background:linear-gradient(180deg,rgba(12,14,13,.62) 0%,rgba(12,14,13,.18) 15%,rgba(12,14,13,0) 26%,rgba(12,14,13,0) 32%,rgba(12,14,13,.5) 50%,rgba(12,14,13,.86) 70%,rgba(12,14,13,.93) 100%)}
.ma-home-c .hq-b .hq-m::after{background:linear-gradient(180deg,rgba(12,14,13,.68) 0%,rgba(12,14,13,.36) 13%,rgba(12,14,13,0) 26%,rgba(12,14,13,0) 30%,rgba(12,14,13,.56) 46%,rgba(12,14,13,.88) 66%,rgba(12,14,13,.94) 100%)}

/* ---------- Clientes ---------- */
.ma-home-c .hk-h{display:flex;flex-direction:column;align-items:center;text-align:center}
.ma-home-c .hk-r{justify-self:auto;max-width:52ch;margin-top:clamp(20px,2.6vw,32px)}
.ma-home-c .hk-r p{text-wrap:balance}

/* ---------- Cierre ---------- */
.ma-home-c .hz-x{text-align:center}
.ma-home-c .hz-t{margin-left:0}

/* ---------- Móvil ---------- */
@media (max-width:760px){
  .ma-home-c .hc-tres{justify-content:center}
  .ma-home-c .hn-p{margin-top:18px}
  /* disciplinas, dos por dos y sin flecha (toda la celda es el enlace) */
  .ma-home-c .hn-g{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:40px}
  /* sin rejilla compartida: «Inteligencia artificial» va en dos líneas y dejaría hueco bajo los dibujos de al lado */
  .ma-home-c .hn-g{grid-template-rows:none}
  .ma-home-c .hn-c{grid-row:auto;display:flex;flex-direction:column;align-items:center;padding:26px 8px 24px}
  .ma-home-c .hn-w,.ma-home-c .hn-s{align-self:center} /* en la columna, «end» sería a la derecha */
  .ma-home-c .hn-c+.hn-c::before{top:26px;bottom:24px}
  .ma-home-c .hn-c:nth-child(3)::before{display:none}
  .ma-home-c .hn-c:nth-child(n+3)::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:rgba(31,35,34,.12);transform-origin:50% 50%}
  .ma-home-c .hn-g.is-js .hn-c:nth-child(n+3)::after{transform:scaleX(0)}
  .ma-home-c .hn-g.is-in .hn-c:nth-child(n+3)::after{transform:scaleX(1);transition:transform 1.4s cubic-bezier(.19,1,.22,1) var(--b)}
  .ma-home-c .hn-v{max-width:142px;margin-bottom:14px}
  .ma-home-c .hn-v .nl{stroke-width:1.7}
  .ma-home-c .hn-w{margin-bottom:8px;font-size:clamp(24px,7vw,30px)}
  .ma-home-c .hn-s{margin-bottom:0;max-width:17ch;font-size:14px;line-height:1.42}
  .ma-home-c .hn-a{display:none}

  .ma-home-c .hq{padding-bottom:clamp(92px,26vw,124px)}
  .ma-home-c .hq-x{align-items:center;text-align:center;bottom:auto}
  .ma-home-c .hq-w{font-size:var(--hqfs,21vw)}
  .ma-home-c .hq-d{width:auto;margin:6px 0 0}
  .ma-home-c .hq-more{justify-content:center;margin-top:34px}
  .ma-home-c .hk-r{margin-top:6px}
}