/* ═══════════════════════════════════════════════════════════
   PORTADA.CSS — Hero de la portada: el muro de proyectos
   WebClicStudio

   Diseño "cine oscuro" en todos los anchos:
   · Escritorio: el muro de webs y sistemas ocupa todo el fondo, inclinado
     y en movimiento, apagado hacia la izquierda donde va el texto en
     blanco. La cabecera va transparente encima.
   · Hasta 980 px: el muro abre la página justo bajo la barra y se funde
     en negro; el título sube y se monta sobre ese fundido. (La barra del
     móvil es la de app, pero eso es la cabecera, no el hero.)
   El marcado está en index.php y las tarjetas salen de partials/muro.php.
   ═══════════════════════════════════════════════════════════ */

/* El fondo de la página, por si asoma (en el móvil, el hueco que se
   reserva bajo el pie para la barra de pestañas se veía blanco). */
body { background: #050608; }

.pt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* Ocupa justo la pantalla; ver "Que el hero quepa en la pantalla". */
    min-height: 100svh;
    padding-top: calc(var(--topbar-h) + var(--nav-h));
    background: #07080C;
    color: #fff;
}
/* Grano muy suave: evita que el negro se vea plano y "digital". */
.pt-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url('/img/bg/noise.svg');
    opacity: .07;
    mix-blend-mode: overlay;
}

/* ─ El muro (escritorio) ─ */
.pt-wall { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 1500px; }
.pt-plane {
    position: absolute;
    left: 32%;
    top: -36%;
    height: 175%;
    display: flex;
    gap: 24px;
    transform-origin: 30% 50%;
    transform:
        rotateX(calc(20deg + var(--my, 0) * -3deg))
        rotateY(calc(-16deg + var(--mx, 0) * 4deg))
        rotateZ(-9deg);
    opacity: 0;
    transition: opacity 1.4s ease .2s;
}
.pt-hero.is-on .pt-plane { opacity: 1; }
.pt-plane .mw-col { --col-w: 310px; }
.pt-wall .mw-card { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -20px rgba(0,0,0,.9); }
/* La sombra: negro sólido donde va el texto y el muro se enciende hacia la
   derecha; arriba se oscurece para que el menú blanco se lea, y abajo se
   funde con el azul noche de la franja siguiente. */
.pt-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(760px 520px at 16% 72%, rgba(224,18,27,.22), transparent 70%),
        linear-gradient(90deg, #07080C 0%, rgba(7,8,12,.97) 30%, rgba(7,8,12,.72) 47%, rgba(7,8,12,.22) 68%, rgba(7,8,12,.38) 100%),
        linear-gradient(180deg, rgba(7,8,12,.96) 0%, rgba(7,8,12,.88) 10%, rgba(7,8,12,0) 27%),
        linear-gradient(0deg, #0A0C13 0%, rgba(10,12,19,0) 26%);
}

.pt-wrap { position: relative; z-index: 2; width: 100%; max-width: 1340px; margin: 0 auto; padding: 50px 32px 90px; }
.pt-copy, .pt-trust { max-width: 610px; }

/* Las tarjetas, columnas y cintas del muro están en css/cine.css: las usan
   también los heros de las páginas internas. */

/* ─ Texto ─ */
/* La entrada del texto es SOLO CSS y arranca con el primer pintado.
   Antes esperaba a que js/portada.js pusiera .is-on, y en un móvil lento
   el título —el elemento más grande de la pantalla, el que Google mide como
   LCP— seguía invisible hasta 2 s después de pintarse la página.
   El título además no se desvanece: solo sube. Así se ve desde el primer
   instante y el LCP es el primer pintado. */
.pt-copy > *, .pt-trust { animation: pt-entra .7s cubic-bezier(.2,.8,.2,1) both; }
.pt-copy > .mw-title { animation-name: pt-sube; }
.pt-copy > :nth-child(3) { animation-delay: .12s; }
.pt-copy > :nth-child(4) { animation-delay: .2s; }
.pt-trust { animation-delay: .3s; }
@keyframes pt-entra { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes pt-sube  { from { translate: 0 16px; } to { translate: 0 0; } }

.mw-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 34px;
    padding: 0 16px 0 12px;
    border-radius: 999px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 22px;
}
.mw-pill b { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #22C55E; }
/* El latido es un anillo que crece y se apaga con transform y opacity (los
   mueve la tarjeta gráfica); animar box-shadow repintaba cada fotograma. */
.mw-pill b::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: rgba(34,197,94,.55); animation: mw-ping 1.8s ease-out infinite; }
@keyframes mw-ping { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(3); opacity: 0; } }

.mw-title {
    font-size: clamp(38px, 4.3vw, 64px);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 22px;
    text-wrap: balance;
}
.mw-title__mark { position: relative; color: #FF3B44; white-space: nowrap; text-shadow: 0 0 30px rgba(224,18,27,.45); }
.mw-title__mark svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .3em; overflow: visible; }
.mw-title__mark path { fill: none; stroke: #FF3B44; stroke-width: 5; stroke-linecap: round; opacity: .55; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.pt-hero.is-on .mw-title__mark path { animation: mw-draw 1s cubic-bezier(.4,0,.2,1) .8s forwards; }
@keyframes mw-draw { to { stroke-dashoffset: 0; } }

.mw-desc { font-size: 18px; line-height: 1.6; color: rgba(255,255,255,.72); margin-bottom: 30px; max-width: 560px; }
.mw-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 36px; }

.pt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 28px;
    border-radius: 999px;
    font: 700 15px/1 var(--font);
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.pt-btn svg { flex-shrink: 0; }
.pt-btn--wa { background: #22C55E; color: #fff; box-shadow: 0 10px 26px rgba(34,197,94,.34), inset 0 -2px 0 rgba(0,0,0,.08); }
.pt-btn--wa:hover { background: #16A34A; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(34,197,94,.44); }
.pt-btn--glass { background: rgba(255,255,255,.07); color: #fff; border: 1px solid rgba(255,255,255,.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.pt-btn--glass:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.34); transform: translateY(-2px); }

.mw-trust p { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45); margin-bottom: 14px; }
/* La cinta de logos: todos los clientes, en blanco, corriendo sola de
   derecha a izquierda (no se arrastra con el dedo). Los bordes se funden;
   con el cursor encima se detiene; fuera de pantalla, también (.is-paused). */
.mw-trust__cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mw-trust__pista { display: flex; width: max-content; animation: mw-cinta 42s linear infinite; }
.mw-trust__cinta:hover .mw-trust__pista { animation-play-state: paused; }
.mw-trust ul { list-style: none; display: flex; flex-shrink: 0; align-items: center; gap: 34px; padding-right: 34px; }
.mw-trust img { display: block; width: auto; height: calc(var(--h, 40) * 1px); opacity: .72; transition: opacity .25s; }
.mw-trust li:hover img { opacity: 1; }
@keyframes mw-cinta { to { transform: translateX(-50%); } }

/* ─ Cliente destacado (vidrio oscuro, abajo a la derecha) ─ */
.mw-feature {
    position: absolute;
    z-index: 3;
    right: max(40px, calc((100% - 1340px) / 2 + 40px));
    bottom: 84px;
    width: 376px;
    height: 92px;
    border-radius: 18px;
    background: rgba(18,21,34,.82);
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 30px 60px -24px rgba(0,0,0,.8);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    translate: 0 20px;
    transition: opacity .7s ease .9s, translate .8s cubic-bezier(.2,.8,.2,1) .9s;
}
.pt-hero.is-on .mw-feature { opacity: 1; translate: 0 0; }
.mw-feature__item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    color: rgba(255,255,255,.45);
    opacity: 0;
    translate: 12px 0;
    transition: opacity .45s ease, translate .5s ease;
    pointer-events: none;
}
.mw-feature__item.is-on { opacity: 1; translate: 0 0; pointer-events: auto; transition-delay: .3s; }
.mw-feature__item > svg { flex-shrink: 0; transition: color .2s, translate .2s; }
.mw-feature__item:hover > svg { color: #FF3B44; translate: 2px -2px; }
.mw-feature__logo { width: 54px; height: 54px; flex-shrink: 0; border-radius: 14px; display: grid; place-items: center; background: #fff; }
.mw-feature__logo.is-dark { background: #0F172A; box-shadow: 0 0 0 1px rgba(255,255,255,.2); }
.mw-feature__logo img { width: 40px; height: 40px; object-fit: contain; }
.mw-feature__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mw-feature__txt b { font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-feature__txt small { font-size: 12px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mw-feature__txt em { font-style: normal; font-size: 12px; font-weight: 700; color: #4ADE80; display: inline-flex; align-items: center; gap: 6px; }
.mw-feature__txt em i { width: 6px; height: 6px; border-radius: 50%; background: #22C55E; }
/* Los puntos van abajo: arriba pisaban nombres largos ("Vinces Fight Training Center"). */
.mw-feature__dots { position: absolute; right: 18px; bottom: 12px; display: flex; gap: 4px; }
.mw-feature__dots i { width: 5px; height: 5px; border-radius: 3px; background: rgba(255,255,255,.2); transition: width .3s, background .3s; }
.mw-feature__dots i.is-on { width: 14px; background: #FF3B44; }

/* ─ Que el hero quepa en la pantalla (escritorio) ─
   El hero ocupa justo el alto de la ventana y todo (título, botones, logos
   y la tarjeta del cliente) tiene que verse sin bajar. Por eso los tamaños
   crecen y encogen con el ALTO de la ventana (svh), no solo con el ancho:
   en un portátil de 1366×768, o en uno de 1920×1080 con Windows al 125 %,
   al navegador le quedan entre 650 y 730 px de alto, y con tamaños fijos
   el título empujaba los logos y la tarjeta del cliente fuera de la
   pantalla. En pantallas altas todo llega a su tamaño máximo y queda
   centrado. */
@media (min-width: 981px) {
    .pt-wrap { padding: clamp(14px, 3svh, 44px) 32px clamp(22px, 5.6svh, 84px); }
    .mw-pill { height: clamp(30px, 4.2svh, 36px); margin-bottom: clamp(12px, 2.6svh, 24px); }
    /* 9.6em: las cuatro líneas de siempre ("Webs y sistemas / que hacen
       crecer / a empresas / como la tuya.") a cualquier tamaño. */
    .mw-title { font-size: clamp(34px, min(4.4vw, 7.4svh), 68px); margin-bottom: clamp(12px, 2.4svh, 24px); max-width: 9.6em; }
    .mw-desc { font-size: clamp(15px, min(1.25vw, 2.35svh), 19px); margin-bottom: clamp(16px, 3.6svh, 32px); }
    .mw-ctas { margin-bottom: clamp(18px, 4.2svh, 38px); }
    .pt-btn { min-height: clamp(46px, 6.6svh, 56px); }
    .mw-trust p { margin-bottom: clamp(8px, 1.6svh, 14px); }
    /* Del 72 % al 100 % de su tamaño según el alto: a 900 px ya está entero. */
    .mw-trust img { height: clamp(calc(var(--h, 40) * .72px), calc(var(--h, 40) * .112svh), calc(var(--h, 40) * 1px)); }
    .mw-feature { bottom: clamp(20px, 7svh, 84px); }
}
/* En inglés el título tiene palabras más largas ("businesses") y, en el
   ancho pensado para el español, se partía en cinco líneas apretadas contra
   la izquierda. Con un poco más de ancho y la letra apenas menor queda en
   tres: "Websites and systems / that help grow / businesses like yours." */
@media (min-width: 981px) {
    html[lang="en"] .pt-copy { max-width: 740px; }
    html[lang="en"] .mw-title { max-width: 12.2em; font-size: clamp(32px, min(3.9vw, 6.6svh), 60px); }
}

/* Ventanas muy bajas (portátil de 1366×768 o de 1280×720 con la barra del
   navegador): se aprieta un poco más para que no se corte la fila de logos. */
@media (min-width: 981px) and (max-height: 700px) {
    .pt-wrap { padding-top: 10px; padding-bottom: 14px; }
    .mw-pill { height: 28px; }
    .mw-title { font-size: clamp(32px, min(4.4vw, 6.8svh), 68px); }
    .mw-desc { line-height: 1.5; }
    .pt-btn { min-height: 44px; }
    .mw-trust img { height: calc(var(--h, 40) * .64px); }
}

/* ─ Responsive ─ */
@media (max-width: 1280px) {
    .pt-plane { left: 36%; }
    .pt-plane .mw-col { --col-w: 280px; }
}
@media (max-width: 1100px) {
    .mw-feature { display: none; }
}

/* Móvil: el muro abre la página y se funde en negro bajo el título. Va en
   2D: una capa 3D con treinta imágenes es demasiado para la GPU de un
   teléfono (en las pruebas dejaba de pintar otras imágenes de la página). */
@media (max-width: 980px) {
    .pt-hero {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding-top: var(--nav-h);
        /* El muro se ajusta al alto del teléfono: en uno bajo, más alto
           empujaba los botones del título contra las pestañas de abajo. */
        --wall-h: clamp(210px, 34svh, 360px);
    }
    .pt-wall { order: 1; position: relative; inset: auto; height: var(--wall-h); perspective: none; }
    .pt-plane { left: 50%; translate: -50% 0; top: -40%; height: 190%; transform: rotate(-10deg); gap: 14px; }
    .pt-plane .mw-col { --col-w: 200px; --gap: 14px; }
    /* Sombra corta en el móvil: la de 60 px de desenfoque, por cuarenta
       tarjetas, era de lo más caro de pintar en un teléfono. */
    .pt-plane .mw-card { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 12px 22px -10px rgba(0,0,0,.85); }
    /* El fundido va con el muro (así sigue su alto): se ve arriba y se
       hace negro abajo, donde se monta el título. */
    .pt-wall::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(180deg, rgba(7,8,12,.42) 0%, rgba(7,8,12,.06) 26%, rgba(7,8,12,.5) 64%, #07080C 97%);
    }
    .pt-shade { background: radial-gradient(500px 400px at 20% 60%, rgba(224,18,27,.2), transparent 70%); }
    .pt-wrap { order: 2; margin-top: calc(var(--wall-h) * -.36); padding: 0 20px 40px; }
    .pt-copy { max-width: 640px; }
    .mw-feature { display: none; }
}
@media (max-width: 560px) {
    /* En un teléfono se ven las columnas 3 y 4 (y un borde de la 2 y la 5):
       la 1 y la 6 quedan siempre fuera. Sin ellas el muro sigue centrado
       igual y son 20 tarjetas menos que dibujar y descargar. */
    .pt-plane .mw-col:first-child, .pt-plane .mw-col:last-child { display: none; }
    .pt-wrap { padding: 0 16px 36px; }
    .mw-pill { font-size: 12px; height: 30px; margin-bottom: 16px; }
    .mw-title { font-size: clamp(31px, 8.8vw, 40px); margin-bottom: 14px; }
    .mw-desc { font-size: 15.5px; margin-bottom: 22px; }
    .mw-ctas { flex-direction: column; margin-bottom: 28px; }
    .mw-ctas .pt-btn { width: 100%; }
    .mw-card__bar { height: 16px; }
    .mw-card figcaption { font-size: 9px; padding: 3px 8px 3px 7px; }
    .mw-trust ul { gap: 26px; padding-right: 26px; }
    .mw-trust img { height: calc(var(--h, 40) * .85px); }
}

/* ─ Rendimiento ─
   Lo que está debajo del primer pantallazo no se maqueta ni se pinta hasta
   que se acerca: el navegador se salta ese trabajo durante la carga (en un
   móvil lento era más de un segundo de dibujo). El alto de reserva evita que
   la barra de desplazamiento salte. */
.hsol-sec, .hsec, .cn-ctaband, .footer { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
/* El grano de los fondos se mezcla con mix-blend-mode, que obliga a repintar
   todo lo que tiene debajo; en un teléfono no se aprecia y cuesta caro. */
@media (max-width: 980px) {
    .pt-hero::after, .hsec::after { display: none; }
}

/* Fuera de pantalla todo se para (js/portada.js pone .is-paused): no se
   gasta batería animando algo que nadie ve. */
.pt-hero.is-paused *,
.pt-hero.is-paused *::before,
.pt-hero.is-paused *::after { animation-play-state: paused !important; }

/* main.css acorta las animaciones a 0.01ms con "reducir movimiento", pero
   no corta las infinitas: un latido infinito de 0.01ms tiembla. Aquí cada
   una corre una vez y el muro se queda quieto. */
@media (prefers-reduced-motion: reduce) {
    .pt-hero *, .pt-hero *::before, .pt-hero *::after { animation-iteration-count: 1 !important; }
    .mw-track { animation: none !important; }
    /* La cinta quieta: los logos en filas, sin la copia. */
    .mw-trust__pista { width: auto; animation: none !important; }
    .mw-trust__pista ul[aria-hidden] { display: none; }
    .mw-trust ul { flex-wrap: wrap; gap: 14px 22px; padding-right: 0; }
    .mw-trust__cinta { -webkit-mask-image: none; mask-image: none; }
}

/* ═══════════════════════════════════════════════════════════
   DEBAJO DEL HERO
   Las piezas genéricas (secciones, encabezados, el cierre) son las de
   css/cine.css; aquí va solo lo propio de la portada: el mosaico de
   soluciones y la franja clara de clientes.
   ═══════════════════════════════════════════════════════════ */

/* ─ Lo que hacemos: mosaico de las seis soluciones ─
   Escritorio, en 12 columnas:   web (8)        | sistemas (4)
                                 dash (4) | ads (4) | auto (4)
                                 contenido con IA (12)            */
.hsol {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: 440px 410px 330px;
    gap: 18px;
}
.hsol-t--web  { grid-column: span 8; }
.hsol-t--sis  { grid-column: span 4; }
.hsol-t--dash, .hsol-t--ads, .hsol-t--auto { grid-column: span 4; }
.hsol-t--ia   { grid-column: span 12; }

.hsol-t {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 28px;
    border-radius: 28px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--c) 16%, #10131C) 0%, #0B0D14 58%);
    border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(255,255,255,.06));
    color: #fff;
    /* La opacidad va en la lista: es la que usa la aparición (data-fx). */
    transition: opacity .7s ease, transform .5s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease;
}
.hsol-t:hover {
    border-color: color-mix(in srgb, var(--c) 62%, transparent);
    box-shadow: 0 50px 100px -50px color-mix(in srgb, var(--c) 85%, transparent);
    transform: translateY(-5px);
}
/* Luz del color de la solución en la esquina; se enciende al pasar. */
.hsol-t__luz {
    position: absolute;
    z-index: -1;
    right: -18%; top: -38%;
    width: 78%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 48%, transparent), transparent);
    opacity: .55;
    transition: opacity .45s ease, transform .8s ease;
}
.hsol-t:hover .hsol-t__luz { opacity: .95; transform: scale(1.12); }

/* El número va junto al icono: a la derecha lo tapaban las maquetas grandes. */
.hsol-t__top { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; }
.hsol-t__ico {
    width: 52px; height: 52px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--c), color-mix(in srgb, var(--c) 42%, #000));
    box-shadow: 0 14px 30px -10px var(--c);
    transition: transform .35s ease;
}
.hsol-t:hover .hsol-t__ico { transform: rotate(-8deg) scale(1.06); }
.hsol-t__num { font-size: 14px; font-weight: 900; letter-spacing: .1em; color: color-mix(in srgb, var(--c) 55%, #fff); }

/* flex-shrink: 0 en texto y maqueta: si no, el texto se encogía y la
   maqueta se le montaba encima en vez de salirse por abajo. */
.hsol-t__txt { position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; max-width: 34ch; }
.hsol-t__tit { font-size: clamp(24px, 2.1vw, 31px); font-weight: 900; line-height: 1.05; letter-spacing: -0.035em; }
.hsol-t__desc { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.72); }
.hsol-t__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.hsol-t__chips em {
    font-style: normal;
    padding: 6px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--c) 18%, rgba(255,255,255,.04));
    border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.hsol-t__go { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 14.5px; font-weight: 800; }
.hsol-t__go svg { color: color-mix(in srgb, var(--c) 60%, #fff); transition: transform .25s ease; }
.hsol-t:hover .hsol-t__go svg { transform: translateX(4px); }

/* La maqueta: debajo del texto en las piezas chicas, a la derecha en las
   anchas. Siempre se sale un poco por el borde: parece que asoma. */
.hsol-t__vis { position: relative; z-index: 1; flex-shrink: 0; display: block; margin: auto -54px -84px 34px; padding-top: 22px; }
.hsol-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -30px rgba(0,0,0,.95), 0 0 60px -20px color-mix(in srgb, var(--c) 60%, transparent);
    transform: perspective(1200px) rotateX(10deg) rotateY(-10deg) rotate(-3deg);
    transform-origin: 40% 0;
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hsol-t:hover .hsol-img { transform: perspective(1200px) rotateX(4deg) rotateY(-4deg) rotate(-1deg) translateY(-12px); }

/* Anchas (web y contenido): texto a la izquierda, maqueta a la derecha. */
.hsol-t--web .hsol-t__txt, .hsol-t--ia .hsol-t__txt { max-width: 40%; }
.hsol-t--web .hsol-t__vis, .hsol-t--ia .hsol-t__vis { position: absolute; margin: 0; padding: 0; }
.hsol-t--web .hsol-t__vis { right: 28px; top: 28px; bottom: -36px; width: 52%; }
.hsol-t--ia .hsol-t__vis { right: 5%; top: 30px; width: 44%; }
.hsol-t--ia .hsol-img { transform: perspective(1400px) rotateX(8deg) rotateY(-14deg) rotate(-2deg); }

/* Sitios web: tres webs reales en abanico, cada una en su navegador con
   la barra negra y su dominio; se abren al pasar el ratón. */
.hsol-webs { position: absolute; inset: 0; display: block; }
.hsol-webs__win {
    position: absolute;
    width: 76%;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    background: #0B0D13;
    box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 34px 70px -28px rgba(0,0,0,.95);
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hsol-webs__win .wbar { height: 26px; padding: 0 10px; gap: 5px; }
.hsol-webs__win .wbar > i { width: 7px; height: 7px; }
.hsol-webs__win .wbar__url { padding: 3px 10px; font-size: 10px; gap: 5px; }
.hsol-webs__win img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.hsol-webs__win:nth-child(1) { left: 0;   top: 2%;  transform: rotate(-7deg); }
.hsol-webs__win:nth-child(2) { left: 13%; top: 19%; transform: rotate(-1.5deg); z-index: 1; }
.hsol-webs__win:nth-child(3) { left: 25%; top: 37%; transform: rotate(5deg); z-index: 2; box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 40px 80px -28px rgba(0,0,0,.95), 0 0 60px -24px color-mix(in srgb, var(--c) 70%, transparent); }
.hsol-t:hover .hsol-webs__win:nth-child(1) { transform: rotate(-11deg) translate(-16px, -8px); }
.hsol-t:hover .hsol-webs__win:nth-child(2) { transform: rotate(-1.5deg) translateY(-14px); }
.hsol-t:hover .hsol-webs__win:nth-child(3) { transform: rotate(8deg) translate(16px, -4px); }

/* La web que se recorre sola (la usa la escena de Sectores). */
@keyframes hsol-recorre { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }

/* Sistemas: tres maquetas en abanico que se abren al pasar. */
.hsol-t--sis .hsol-t__vis { margin: auto -28px -28px; padding: 0; height: 190px; }
.hsol-pila { position: absolute; inset: 0; display: block; }
.hsol-pila img {
    position: absolute;
    width: 74%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 30px 60px -24px rgba(0,0,0,.95);
    transition: transform .6s cubic-bezier(.2,.8,.2,1);
}
.hsol-pila img:nth-child(1) { left: 2%;  bottom: -22%; transform: rotate(-9deg); }
.hsol-pila img:nth-child(2) { left: 15%; bottom: -8%;  transform: rotate(-2deg); z-index: 2; }
.hsol-pila img:nth-child(3) { left: 30%; bottom: -30%; transform: rotate(6deg); z-index: 1; }
.hsol-t:hover .hsol-pila img:nth-child(1) { transform: rotate(-14deg) translate(-14px, -10px); }
.hsol-t:hover .hsol-pila img:nth-child(2) { transform: rotate(-2deg) translateY(-22px); }
.hsol-t:hover .hsol-pila img:nth-child(3) { transform: rotate(11deg) translate(18px, -6px); }

/* ─ Barra de navegador en NEGRO, con el enlace de la web ─
   La de las webs reales (mosaico y Sectores): la clara de siempre se veía
   como un parche blanco encima de una página oscura. */
.wbar { flex: none; display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; background: #0B0D13; border-bottom: 1px solid rgba(255,255,255,.08); }
.wbar > i { width: 9px; height: 9px; flex-shrink: 0; border-radius: 50%; }
.wbar > i:nth-child(1) { background: #FF5F57; }
.wbar > i:nth-child(2) { background: #FEBC2E; }
.wbar > i:nth-child(3) { background: #28C840; }
.wbar__url {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 72%;
    margin: 0 auto;
    padding: 5px 16px;
    border-radius: 8px;
    background: #1A1E29;
    border: 1px solid rgba(255,255,255,.09);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .01em;
    color: rgba(255,255,255,.88);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wbar__url svg { flex-shrink: 0; color: #4ADE80; }

/* ─ Sectores: escenario a todo el ancho ─
   Foto del rubro de fondo (se cruzan al cambiar), un velo que la funde a
   negro hacia el texto, la luz del color del rubro, y encima el texto y
   la web real flotando. El color del rubro activo (--c) lo pone el JS en
   la sección, así que el subrayado del título también cambia de color. */
/* "Lo que hacemos" termina más pegada a Sectores: con el margen normal de
   sección más el de arriba de Sectores, el corte entre las dos parecía un
   hueco. */
.cn-sec.hsol-sec { padding-bottom: clamp(56px, 6vw, 88px); }

.hsec {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Mide lo que pide su contenido, con un margen normal arriba. Antes
       ocupaba una pantalla entera, reservaba arriba el alto de la barra y
       centraba lo de dentro: sumado al margen de la sección anterior, el
       título quedaba a unos 320 px de lo de arriba ("mucho espacio arriba",
       dijo el dueño). Igual entra entera en una pantalla de 900 px. */
    padding: clamp(56px, 5.4vw, 84px) 0 clamp(48px, 5vw, 72px);
    scroll-margin-top: var(--nav-h);
    background: #07080C;
    color: #fff;
}
.hsec__fondos { position: absolute; inset: 0; z-index: -3; }
.hsec__fondo { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity 1.1s ease; }
.hsec__fondo.is-on { opacity: 1; }
.hsec__fondo img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.6); transform: scale(1.12); transition: transform 9s cubic-bezier(.2,.6,.2,1); }
.hsec__fondo.is-on img { transform: scale(1.02); }
.hsec__fondo::after { content: ''; position: absolute; inset: 0; background: radial-gradient(55% 65% at 78% 46%, color-mix(in srgb, var(--c) 32%, transparent), transparent 70%); }
.hsec__velo {
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(90deg, rgba(7,8,12,.97) 0%, rgba(7,8,12,.86) 30%, rgba(7,8,12,.4) 62%, rgba(7,8,12,.55) 100%),
        linear-gradient(180deg, #07080C 0%, rgba(7,8,12,.15) 22%, rgba(7,8,12,.1) 62%, #07080C 100%);
}
.hsec::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url('/img/bg/noise.svg'); opacity: .08; mix-blend-mode: overlay; }

.hsec__in { display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 30px); }
.hsec__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 16px 40px; }
.hsec__head .cn-kicker { color: rgba(255,255,255,.62); }
.hsec__head .cn-lead { margin-bottom: 14px; color: rgba(255,255,255,.78); }
.hsec .cn-h2 { font-size: clamp(30px, 3.1vw, 46px); }
.hsec__head .cn-kicker { margin-bottom: 12px; }
.hsec__head .cn-link { margin-bottom: 6px; }
.hsec .cn-h2 mark { color: var(--c); transition: color .6s ease; }
.hsec .cn-link svg { color: var(--c); }

/* Los cinco paneles en la misma celda: la escena mide lo que el más alto. */
.hsec__escena { display: grid; }
.hsec__panel {
    grid-area: 1 / 1;
    display: grid;
    grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
    align-items: center;
    gap: clamp(30px, 5vw, 72px);
    min-height: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}
.hsec__panel.is-on { opacity: 1; visibility: visible; transition: opacity .6s ease; }
/* Al entrar, el texto sube en cascada. */
.hsec__txt { position: relative; }
.hsec__foto { display: none; }
.hsec__txt > * { opacity: 0; translate: 0 22px; transition: opacity .6s ease, translate .75s cubic-bezier(.2,.8,.2,1); }
.hsec__panel.is-on .hsec__txt > * { opacity: 1; translate: 0 0; }
.hsec__panel.is-on .hsec__txt > :nth-child(2) { transition-delay: .06s; }
.hsec__panel.is-on .hsec__txt > :nth-child(3) { transition-delay: .12s; }
.hsec__panel.is-on .hsec__txt > :nth-child(4) { transition-delay: .18s; }
.hsec__panel.is-on .hsec__txt > :nth-child(5) { transition-delay: .24s; }
.hsec__panel.is-on .hsec__txt > :nth-child(6) { transition-delay: .3s; }
.hsec__ico { width: 56px; height: 56px; flex-shrink: 0; border-radius: 17px; display: grid; place-items: center; color: #07080C; background: var(--c); box-shadow: 0 14px 30px -10px var(--c); }
/* El nombre del rubro manda: grande, con su icono y en su color al lado. */
.hsec__t { display: flex; align-items: center; gap: 16px; font-size: clamp(36px, 3.9vw, 58px); font-weight: 900; line-height: 1; letter-spacing: -0.045em; }
.hsec__d { margin-top: 14px; max-width: 46ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6; color: rgba(255,255,255,.8); }
.hsec__cli { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.hsec__cli small { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
.hsec__cli em { font-style: normal; padding: 6px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; background: rgba(255,255,255,.1); border: 1px solid color-mix(in srgb, var(--c) 45%, rgba(255,255,255,.2)); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hsec__go { margin-top: 24px; }

/* La web flotando, girada hacia el texto; se endereza al entrar. */
.hsec__vis { position: relative; perspective: 1800px; }
.hsec-nav {
    display: flex;
    flex-direction: column;
    aspect-ratio: 16 / 10.2;
    border-radius: 16px;
    overflow: hidden;
    background: #0B0D13;
    box-shadow: 0 0 0 1px rgba(255,255,255,.14), 0 60px 120px -40px rgba(0,0,0,.95), 0 0 120px -30px color-mix(in srgb, var(--c) 80%, transparent);
    transform: rotateY(-16deg) rotateX(5deg) translateX(40px);
    transform-origin: 70% 50%;
    transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.hsec__panel.is-on .hsec-nav { transform: rotateY(-8deg) rotateX(3deg); }
.hsec-nav__screen { position: relative; flex: 1; overflow: hidden; background: #fff; container-type: size; }
.hsec-nav--web .hsec-nav__screen img { position: absolute; left: 0; top: 0; width: 100%; height: auto; }
/* La web se ve desde arriba, por su portada. Antes bajaba y subía sola
   todo el rato, y casi siempre se la pillaba a media página, con la
   portada del cliente cortada bajo la barra. Ahora baja solo con el ratón
   encima, como las tarjetas de webs del resto del sitio. */
.hsec-nav--web .hsec-nav__screen img { transition: transform 7s cubic-bezier(.45,.05,.25,1); }
@media (hover: hover) {
    .hsec__panel.is-on .hsec-nav--web:hover .hsec-nav__screen img { transform: translateY(calc(-100% + 100cqh)); }
}
.hsec-nav__screen--img { background: #0F1220; }
.hsec-nav__screen--img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }

/* Las pestañas, con la foto de cada rubro en miniatura. */
.hsec__rail { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.hsec__tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 10px 14px 14px 10px;
    border-radius: 18px;
    background: rgba(12,14,22,.62);
    border: 1px solid rgba(255,255,255,.12);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #fff;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.hsec__tab:hover { background: rgba(12,14,22,.78); transform: translateY(-3px); }
.hsec__tab.is-on { background: rgba(12,14,22,.9); border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--c) 80%, transparent); }
.hsec__tab:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.hsec__tab-img { width: 64px; height: 50px; flex-shrink: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
.hsec__tab-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.75) brightness(.8); transition: filter .3s ease, transform .5s ease; }
.hsec__tab.is-on .hsec__tab-img img, .hsec__tab:hover .hsec__tab-img img { filter: none; transform: scale(1.08); }
.hsec__tab-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hsec__tab-txt small { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--c); }
.hsec__tab-txt b { font-size: 16px; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsec__tab-bar { position: absolute; left: 14px; right: 14px; bottom: 7px; height: 2px; border-radius: 2px; background: rgba(255,255,255,.1); overflow: hidden; }
.hsec__tab-bar i { display: block; width: 0; height: 100%; background: var(--c); }
.hsec.is-auto .hsec__tab.is-on .hsec__tab-bar i { animation: hsec-avanza 7s linear forwards; }
.hsec.is-paused .hsec__tab.is-on .hsec__tab-bar i { animation-play-state: paused; }
.hsec.is-quieto .hsec__tab-bar { display: none; }
@keyframes hsec-avanza { to { width: 100%; } }

/* ─ Responsive de la parte de abajo ─ */
@media (max-width: 1100px) {
    .hsec__panel { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
    .hsec__tab-img { width: 52px; height: 42px; }
    .hsol { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(380px, auto); }
    .hsol-t--web, .hsol-t--ia { grid-column: span 2; }
    .hsol-t--sis, .hsol-t--dash, .hsol-t--ads, .hsol-t--auto { grid-column: span 1; }
    .hsol-t--web { min-height: 440px; }
}
/* Portátiles chicos y tablets apaisadas (981–1180 px): con la miniatura de
   siempre el nombre de cada pestaña salía cortado ("Acero e in…") y la web,
   girada y corrida 40 px, se veía chica: la escena parecía aplastada. Aquí
   la miniatura es cuadrada y más chica, el nombre puede ir en dos líneas y
   la web gana ancho y se gira menos. */
@media (min-width: 981px) and (max-width: 1180px) {
    .hsec__panel { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; }
    .hsec__rail { gap: 10px; }
    .hsec__tab { gap: 10px; padding: 8px 10px 12px 8px; }
    .hsec__tab-img { width: 40px; height: 40px; border-radius: 10px; }
    .hsec__tab-txt b { font-size: 15px; white-space: normal; overflow: visible; }
    .hsec-nav { transform: rotateY(-10deg) rotateX(4deg); }
    .hsec__panel.is-on .hsec-nav { transform: rotateY(-5deg) rotateX(2deg); }
}

/* Pantallas grandes: la escena crece con la pantalla. Con el ancho fijo
   del resto del sitio quedaba una franja estrecha en medio de mucho negro. */
@media (min-width: 1600px) and (min-height: 900px) {
    .hsec .hsec__in { max-width: min(1560px, 88vw); }
    .hsec .cn-h2 { font-size: clamp(40px, 2.6vw, 54px); }
    .hsec__t { font-size: clamp(52px, 3.4vw, 68px); }
    .hsec__d { font-size: 19px; }
    .hsec__tab-img { width: 76px; height: 56px; }
    .hsec__tab-txt b { font-size: 18px; }
}

/* Pantallas bajas (portátiles de 768 px de alto): todo un poco más
   compacto para que la escena siga entrando entera en la pantalla. */
@media (min-width: 981px) and (max-height: 820px) {
    .hsec { padding-top: 44px; padding-bottom: 32px; }
    .hsec__in { gap: 16px; }
    .hsec .cn-h2 { font-size: clamp(28px, 2.6vw, 38px); }
    .hsec__head .cn-kicker { margin-bottom: 8px; }
    .hsec__tab { padding: 8px 12px 12px 8px; }
    .hsec__tab-img { width: 52px; height: 40px; }
    .hsec__t { font-size: clamp(32px, 3.2vw, 46px); }
    .hsec__ico { width: 48px; height: 48px; border-radius: 15px; }
    .hsec__d { margin-top: 10px; font-size: 16px; }
    .hsec__cli { margin-top: 12px; }
    .hsec__go { margin-top: 16px; min-height: 48px; }
    .hsec-nav { aspect-ratio: 16 / 9.6; }
}

/* Hasta 980 px Sectores es una LISTA de tarjetas, no un escenario: sin
   pestañas, sin el número gigante y sin la web flotando. Cada tarjeta lleva
   la foto de su rubro, el nombre en grande, una línea, con quién trabajamos
   y entera es el enlace. En un teléfono se lee de un vistazo. */
@media (max-width: 980px) {
    .hsec { min-height: 0; display: block; padding: 64px 0 56px; }
    .hsec__fondos, .hsec__velo, .hsec__rail, .hsec__vis { display: none; }
    .hsec__in { gap: 26px; }
    .hsec__head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .hsec__escena { gap: 12px; }
    .hsec__panel {
        grid-area: auto;
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: block;
        min-height: 0;
        padding: 20px 20px 18px;
        border-radius: 22px;
        border: 1px solid color-mix(in srgb, var(--c) 38%, rgba(255,255,255,.08));
        opacity: 1;
        visibility: visible;
        transition: none;
    }
    .hsec__foto { display: block; position: absolute; inset: 0; z-index: -2; }
    .hsec__foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85) brightness(.5); }
    .hsec__panel::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background:
            radial-gradient(90% 70% at 100% 0%, color-mix(in srgb, var(--c) 28%, transparent), transparent 70%),
            linear-gradient(180deg, rgba(7,8,12,.15) 0%, rgba(7,8,12,.86) 72%);
    }
    .hsec__txt { position: static; }
    .hsec__txt > * { opacity: 1; translate: none; transition: none; }
    .hsec__t { margin: 0; font-size: clamp(26px, 7.4vw, 34px); gap: 12px; padding-right: 40px; }
    .hsec__ico { width: 42px; height: 42px; border-radius: 13px; }
    .hsec__ico svg { width: 19px; height: 19px; }
    .hsec__d { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); }
    .hsec__cli { gap: 6px; margin-top: 12px; }
    .hsec__cli small { display: none; }
    .hsec__cli em { padding: 5px 11px; font-size: 12px; }
    /* El botón pasa a ser una flecha en la esquina y la tarjeta entera
       es el enlace (el ::after cubre la tarjeta). */
    .hsec__go {
        position: absolute;
        top: 20px; right: 18px;
        width: 38px; min-height: 38px; height: 38px;
        margin: 0;
        padding: 0;
        border-radius: 50%;
        background: rgba(255,255,255,.12);
        border: 1px solid rgba(255,255,255,.22);
        color: #fff;
        box-shadow: none;
    }
    .hsec__go > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .hsec__go::after { content: ''; position: absolute; inset: -100vmax; }
    .hsec__panel { cursor: pointer; }
    .hsec__panel:active { border-color: var(--c); }
}
@media (max-width: 760px) {
    .hsol { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; gap: 14px; }
    .hsol-t--web, .hsol-t--ia, .hsol-t--sis, .hsol-t--dash, .hsol-t--ads, .hsol-t--auto { grid-column: auto; }
    .hsol-t { padding: 22px; border-radius: 24px; min-height: 0; }
    .hsol-t__txt, .hsol-t--web .hsol-t__txt, .hsol-t--ia .hsol-t__txt { max-width: none; margin-top: 18px; }
    .hsol-t__vis { margin: 4px -40px -70px 24px; }
    .hsol-t--web .hsol-t__vis, .hsol-t--ia .hsol-t__vis { position: relative; inset: auto; width: auto; margin: 22px -22px -22px 0; padding: 0; }
    .hsol-t--web .hsol-t__vis { height: 290px; }
    .hsol-t--ia .hsol-t__vis { margin: 18px -40px -60px 24px; }
    .hsol-t--sis .hsol-t__vis { margin: 18px -22px -22px; height: 180px; }

}
@media (prefers-reduced-motion: reduce) {
    .hsec__fondo img { transition: none; transform: none; }
    .hsec__panel.is-on .hsec-nav--web .hsec-nav__screen img { animation: none; }
    .hsec__txt > * { transition: none; }
}