/* =====================================================================
   Hero del iceberg: parte como un plano dibujado sobre blanco ("testeo",
   línea de agua, lo sumergido y sus seis capas) y termina en la foto real
   del iceberg con el logo de TConsulting. El panel pasa de blanco a negro
   cuando entra la foto, así encaja en una página clara.
   Secuencia (s): 0.2 testeo y punta · 1.2 agua · 1.9 lo sumergido y capas
   · 5.4 panel a negro y entra la foto · 6.2 se va el dibujo · 6.8 logo.
   ===================================================================== */
.hi2{padding:8px;border-bottom:1px solid #e6e8ec}
.hi2-panel{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:16px;
  min-height:640px;padding:40px 24px 40px 56px;border-radius:18px;background:#fff;border:1px solid #e6e8ec;
  font-family:"Geist","Helvetica Neue",Arial,sans-serif}

/* introducción */
.hi2-txt{position:relative;z-index:2;max-width:560px}
.hi2-eti{font-family:"Geist Mono",ui-monospace,monospace;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:#5f6b7a;margin-bottom:18px}
.hi2-txt h1{font-size:clamp(2.1rem,3.6vw,3.3rem);font-weight:400;line-height:1.06;letter-spacing:-.035em;color:#0b1220;max-width:15ch}
.hi2-bajada{font-size:16.5px;line-height:1.6;color:#5f6b7a;max-width:44ch;margin-top:20px}
.hi2-datos{display:flex;gap:28px;margin:26px 0 30px;list-style:none;padding:0}
.hi2-datos li{border-left:1px solid #d5d9df;padding-left:14px}
.hi2-datos b{display:block;font-size:1.55rem;font-weight:500;color:#0b1220;letter-spacing:-.03em}
.hi2-datos span{font-size:12.5px;color:#5f6b7a}
.hi2-bot{display:flex;gap:10px;flex-wrap:wrap}
.hi2-bot a{display:inline-flex;align-items:center;height:44px;padding:0 20px;border-radius:999px;font-size:14.5px;text-decoration:none;
  color:#fff;background:#0b1220;border:1px solid #0b1220;transition:transform .25s}
.hi2-bot a + a{color:#0b1220;background:transparent;border-color:#cfd5dc}
.hi2-bot a:hover{transform:translateY(-1px)}

/* escena: lienzo de 1000×800; la foto ocupa el centro (600×800) */
.hi2-escena{position:relative;z-index:1;width:100%;aspect-ratio:10/8}
/* la foto se funde con el panel por los cuatro lados (las dos máscaras se intersectan) */
.hi2-foto{position:absolute;left:20%;top:0;width:60%;height:100%;object-fit:cover;opacity:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent),linear-gradient(180deg,transparent,#000 10%,#000 88%,transparent);
  mask-composite:intersect}
.hi2-escena svg{position:absolute;inset:0;width:100%;height:100%}
.hi2 .tr{fill:none;stroke:#0b3e78;stroke-width:2;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.hi2 .tr.fino{stroke-width:1.4}
.hi2 .agua{fill:none;stroke:#1198d4;stroke-width:2;stroke-dasharray:10 9;clip-path:inset(0 100% 0 0)}
.hi2 .cota{stroke:#8b95a3;stroke-width:1.2;stroke-dasharray:1;stroke-dashoffset:1}
.hi2 svg text{font-family:"Geist Mono",ui-monospace,monospace;font-size:15px;letter-spacing:.08em;fill:#2b3442;opacity:0}
.hi2 .test{font-size:22px;font-weight:600;letter-spacing:.24em;fill:#0b1220}
.hi2 .rot-test{font-size:13px;fill:#5f6b7a}
.hi2-logo{position:absolute;left:50%;top:3%;height:9%;width:auto;transform:translate(-50%,8px);opacity:0}

/* ---- la secuencia ---- */
.anda .test{animation:hiAparece .6s ease-out .2s forwards,hiSeVa .6s ease-in 6s forwards}
.anda .rot-test{animation:hiAparece .6s ease-out .5s forwards,hiSeVa .6s ease-in 6s forwards}
.anda .punta{animation:hiTraza 1s cubic-bezier(.6,.05,.3,1) .3s forwards}
.anda .agua{animation:hiAbre .8s ease-out 1.2s forwards}
.anda .t-agua{animation:hiAparece .5s ease-out 1.3s forwards}
.anda .hundido{animation:hiTraza 2.6s cubic-bezier(.45,.05,.35,1) 1.9s forwards}
.anda .faceta{animation:hiTraza 1.6s ease-in-out 2.9s forwards}
.anda .c1{animation:hiTraza .4s ease-out 2.2s forwards}.anda .l1{animation:hiAparece .4s ease-out 2.4s forwards}
.anda .c2{animation:hiTraza .4s ease-out 2.6s forwards}.anda .l2{animation:hiAparece .4s ease-out 2.8s forwards}
.anda .c3{animation:hiTraza .4s ease-out 3.0s forwards}.anda .l3{animation:hiAparece .4s ease-out 3.2s forwards}
.anda .c4{animation:hiTraza .4s ease-out 3.4s forwards}.anda .l4{animation:hiAparece .4s ease-out 3.6s forwards}
.anda .c5{animation:hiTraza .4s ease-out 3.8s forwards}.anda .l5{animation:hiAparece .4s ease-out 4.0s forwards}
.anda .c6{animation:hiTraza .4s ease-out 4.2s forwards}.anda .l6{animation:hiAparece .4s ease-out 4.4s forwards}
/* de plano a realidad: el panel se oscurece, entra la foto, se va el dibujo, aparece el logo */
.hi2-panel.anda{animation:hiPanel 1.4s ease-in-out 5.4s forwards}
.anda .hi2-foto{animation:hiFoto 1.8s ease-in-out 5.5s forwards}
.anda .hi2-escena svg{animation:hiDibujo 1.4s ease-in-out 5.6s forwards}
.anda .hi2-logo{animation:hiLogo 1s cubic-bezier(.2,.8,.3,1) 6.8s forwards}
.anda .hi2-txt h1,.anda .hi2-datos b{animation:hiBlanco 1.4s ease-in-out 5.4s forwards}
.anda .hi2-eti,.anda .hi2-bajada,.anda .hi2-datos span{animation:hiGris 1.4s ease-in-out 5.4s forwards}
.anda .hi2-datos li{animation:hiBorde 1.4s ease-in-out 5.4s forwards}
.anda .hi2-bot a:first-child{animation:hiBotUno 1.4s ease-in-out 5.4s forwards}
.anda .hi2-bot a + a{animation:hiBotDos 1.4s ease-in-out 5.4s forwards}

@keyframes hiTraza{to{stroke-dashoffset:0}}
@keyframes hiAbre{to{clip-path:inset(0 0 0 0)}}
@keyframes hiAparece{to{opacity:1}}
@keyframes hiSeVa{from{opacity:1}to{opacity:0}}
@keyframes hiPanel{to{background:#101318;border-color:#101318}}
@keyframes hiFoto{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
/* el dibujo pasa a blanco y se desvanece: al final queda solo la foto */
@keyframes hiDibujo{50%{filter:brightness(0) invert(1);opacity:.5}to{filter:brightness(0) invert(1);opacity:0}}
@keyframes hiLogo{to{opacity:1;transform:translate(-50%,0)}}
@keyframes hiBlanco{to{color:#fff}}
@keyframes hiGris{to{color:#a3acb7}}
@keyframes hiBorde{to{border-color:#2c3036}}
@keyframes hiBotUno{to{background:#fff;color:#0b1220;border-color:#fff}}
@keyframes hiBotDos{to{color:#fff;border-color:#3a3f46}}

/* sin animaciones: se muestra directamente el final */
@media (prefers-reduced-motion:reduce){
  .hi2-panel.anda *,.hi2-panel.anda{animation-duration:.01s!important;animation-delay:0s!important}
}

@media (max-width:900px){
  .hi2-panel{grid-template-columns:1fr;padding:36px 22px 22px;gap:28px}
  .hi2-escena{aspect-ratio:3/4}
  .hi2-foto{left:0;width:100%;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent),linear-gradient(180deg,transparent,#000 8%,#000 90%,transparent)}
  .hi2 .cota,.hi2 .l1,.hi2 .l2,.hi2 .l3,.hi2 .l4,.hi2 .l5,.hi2 .l6,.hi2 .t-agua{display:none}
  .hi2-datos{gap:16px}
}