/* servicios-hilo.css — Página de Servicios: "The golden thread" (EN / ES / FR).
 * Dos modos con el MISMO HTML:
 *  - Base (sin .vivo): página normal — la entrada con los seis servicios, las seis tarjetas una
 *    debajo de la otra y el cierre. Es lo que ven Google, quien no tiene WebGL y quien pidió
 *    "reducir movimiento".
 *  - .vivo (lo pone servicios-hilo.js): el hilo queda fijo detrás, a la derecha, y las tarjetas
 *    pasan por la izquierda. Maqueta y herramientas: pruebas/servicios-3d/. */
.hi { --hi-bg: #0a0a0a; --hi-texto: #e8e4de; --hi-suave: rgba(232,228,222,.66); --hi-tenue: rgba(232,228,222,.42);
      --hi-oro: #c4a469; --hi-borde: rgba(196,164,105,.22); --hi-tarjeta: rgba(12,11,10,.8);
      position: relative; background: var(--hi-bg); color: var(--hi-texto); }
.hi-escena, .hi:not(.vivo) .hi-bajar { display: none; }
.hi-ceja { display: flex; }
.hi-flujo { max-width: 820px; margin: 0 auto; padding: 96px clamp(20px, 6vw, 60px); }
.hi-intro { padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hi-parada { padding: 64px 0; border-bottom: 1px solid rgba(255,255,255,.08); scroll-margin-top: 100px; }
.hi-fin { padding-top: 72px; }

/* OJO: el margen negativo va en .hi-flujo y no en la escena. Con margin-bottom negativo en
   la escena fija, el navegador la dejaba salirse 100vh por debajo de la sección y el hilo se
   dibujaba encima del bloque de contacto y del pie de página. */
.hi.vivo .hi-escena { display: block; position: sticky; top: 0; height: 100vh; height: 100svh;
                      overflow: hidden; z-index: 0;
                      background: radial-gradient(ellipse 50% 60% at 66% 50%, rgba(196,164,105,.06), transparent 70%), var(--hi-bg); }
.hi-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hi.vivo .hi-flujo { position: relative; z-index: 2; max-width: none; margin: -100vh 0 0; margin-top: -100svh; padding: 0; }
.hi.vivo .hi-intro { display: flex; flex-direction: column; justify-content: flex-start; min-height: 88vh; min-height: 88svh; border: 0;
                     padding: clamp(72px, 13vh, 130px) clamp(24px, 7vw, 120px) 60px; max-width: 700px; }
.hi.vivo .hi-fin { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; min-height: 100svh;
                   padding: 0 clamp(24px, 7vw, 120px); max-width: 720px; }

.hi-ceja { font: 500 11px/1.5 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--hi-oro);
           gap: 12px; align-items: center; margin: 0 0 var(--space-5); }
.hi-ceja::before { content: ''; width: 30px; height: 1px; background: var(--hi-oro); flex: none; }
.hi-grande { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.6rem, 1.2rem + 3.8vw, 5rem); line-height: 1.02;
             letter-spacing: -.02em; margin: 0 0 var(--space-6); max-width: 13ch; }
.hi-grande em { font-style: italic; color: var(--hi-oro); }
.hi-intro > p:not([class]), .hi-fin > p:not([class]) { font: 300 var(--text-lg, 1.15rem)/1.65 var(--font-body); color: var(--hi-suave); max-width: 42ch; margin: 0 0 var(--space-8); }
.hi-bajar { font: 500 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hi-tenue);
            display: inline-flex; align-items: center; gap: 12px; margin: 0; }
.hi-bajar::after { content: ''; width: 1px; height: 38px; background: linear-gradient(var(--hi-oro), transparent);
                   animation: hi-gota 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hi-gota { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
.hi-cta { align-self: flex-start; font: 500 12px/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--hi-oro);
          text-decoration: none; border-bottom: 1px solid var(--hi-oro); padding-bottom: 4px; }

.hi.vivo .hi-parada { width: min(470px, 37vw); margin: 0 auto 50vh clamp(24px, 6vw, 100px); margin-bottom: 50svh;
                      padding: 40px 40px 30px; background: var(--hi-tarjeta); border: 1px solid var(--hi-borde);
                      box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hi.vivo .hi-parada:first-of-type { margin-top: 38vh; }
.hi.vivo .hi-parada:last-of-type { margin-bottom: 50vh; }
.hi-parada .hi-ceja { padding-bottom: var(--space-4); border-bottom: 1px solid var(--hi-borde); }

/* La frase que dice qué le está pasando al hilo, junto al dibujo. Dos renglones encimados: al
   cambiar de paso, uno se va y el otro llega (fundido cruzado). servicios-hilo.js la apaga
   mientras la cámara viaja entre dos servicios. */
.hi-nota { position: absolute; z-index: 3; left: 62%; bottom: 9vh; translate: -50% 0; margin: 0; white-space: nowrap;
           display: grid; grid-template-columns: 28px minmax(0, max-content) 28px; align-items: center; column-gap: 14px;
           font: 500 11px/1.4 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hi-texto); opacity: 0; transition: opacity .25s linear; }
.hi-nota::before, .hi-nota::after { content: ''; height: 1px; background: var(--hi-oro); grid-row: 1; }
.hi-nota::before { grid-column: 1; } .hi-nota::after { grid-column: 3; }
.hi-nota > span { grid-column: 2; grid-row: 1; text-align: center; opacity: 0; transform: translateY(7px);
                  transition: opacity .32s ease, transform .32s ease; }
.hi-nota > span.visible { opacity: 1; transform: none; }
/* "Your company": marca la punta del hilo al comienzo. */
.hi-tuya { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap;
           font: 500 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hi-oro); }
.hi-tuya::before { content: ''; display: inline-block; vertical-align: middle; width: 26px; height: 1px; background: var(--hi-oro); margin: 0 10px 0 14px; }
/* El cierre: los seis servicios junto a sus nudos. */
.hi-res { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap; translate: 0 -50%;
          font: 400 13px/1 var(--font-body); letter-spacing: .06em; color: var(--hi-texto); }
.hi-res b { font-family: var(--font-display); font-weight: 400; font-size: 15px; color: var(--hi-oro); margin-right: 12px; }
/* Los meses del calendario: letra pequeña, sin caja; dorados cuando ya cerraron. */
.hi-etq.hi-mes { border: 0; background: none; padding: 0; translate: -50% -50%; font-size: 10.5px; letter-spacing: .16em; color: rgba(232,228,222,.55); }
.hi-etq.hi-mes.en-regla { background: none; color: var(--hi-oro); }
/* La portada se funde en el negro de la sección: la entrada al hilo no tiene corte. */
.hero-inner .hero-overlay { background: linear-gradient(180deg, rgba(10,10,10,.3) 0%, rgba(10,10,10,.1) 34%, rgba(10,10,10,.62) 66%, #0a0a0a 100%); }
/* Los seis servicios de entrada: la lista (para buscadores y teclado) y, en la escena, los nombres junto a sus nudos. */
.hi-indice ol { list-style: none; margin: 0 0 var(--space-8); padding: 0; display: grid; gap: 10px; }
.hi-indice a { color: var(--hi-texto); text-decoration: none; font: 400 15px/1.4 var(--font-body); }
.hi-indice b { font-family: var(--font-display); font-weight: 400; color: var(--hi-oro); margin-right: 10px; }
.hi.vivo .hi-indice { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hi-res { cursor: pointer; text-decoration: none; transition: color .25s; }
.hi-res:hover { color: var(--hi-oro); }
/* Los nombres de los cubos en transacciones. */
.hi-emp { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap; translate: -50% -100%;
          font: 500 10px/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; color: var(--hi-texto);
          padding-bottom: 8px; border-bottom: 1px solid var(--hi-oro); }
/* "More about…": el segundo párrafo, plegado. */
.hi-mas { margin-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.08); padding-top: var(--space-4); }
.hi-mas summary { cursor: pointer; list-style: none; font: 500 11px/1.4 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--hi-oro); }
.hi-mas summary::-webkit-details-marker { display: none; }
.hi-mas summary::after { content: ' +'; }
.hi-mas[open] summary::after { content: ' −'; }
.hi-mas p { margin: var(--space-4) 0 0; }
.hi-etq.en-regla { color: #0a0a0a; background: var(--hi-oro); border-color: var(--hi-oro); transition: background .4s, color .4s; }
.hi-etq { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; white-space: nowrap;
          font: 500 10px/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--hi-texto);
          padding: 6px 9px; border: 1px solid var(--hi-borde); background: rgba(10,10,10,.6); translate: 0 -100%; }

@media (max-width: 900px) {
  .hi.vivo .hi-intro, .hi.vivo .hi-fin { justify-content: flex-end; padding: 0 20px 10vh; max-width: none; }
  .hi.vivo .hi-intro .hi-grande { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .hi.vivo .hi-intro, .hi.vivo .hi-fin { background: linear-gradient(transparent 35%, rgba(10,10,10,.85) 60%); }
  .hi-grande { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .hi.vivo .hi-parada { width: auto; margin: 0 12px 78vh; margin-bottom: 78svh; padding: 28px 22px 20px; }
  .hi.vivo .hi-parada:first-of-type { margin-top: 80vh; }
  .hi-res { font-size: 11px; } .hi-res b { font-size: 13px; margin-right: 8px; }
  .hi-etq { font-size: 8px; letter-spacing: .12em; padding: 5px 6px; }
  .hi-nota { left: 16px; right: 16px; top: calc(var(--nav-alto, 64px) + 16px); bottom: auto; translate: none; white-space: normal;
              grid-template-columns: 20px minmax(0, max-content) 20px; justify-content: center; column-gap: 10px; letter-spacing: .16em; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) { .hi-bajar::after { animation: none; } .hi-nota > span { transition: none; } }

/* Un servicio: número, título, párrafos y lista de siempre, con su tipografía. */
.sv-num { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); margin: 0 0 var(--space-3); }
.sv h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.9rem); line-height: 1.05;
         letter-spacing: -.015em; color: #f2eee8; margin: 0 0 var(--space-5); }
.sv p { font: 300 var(--text-base)/1.75 var(--font-body); color: rgba(232,228,222,.72); margin: 0 0 var(--space-4); }
.sv .service-list li { color: rgba(232,228,222,.62); border-color: rgba(255,255,255,.08); }