/* ============================================================
   M.AI.C — hoja de estilos del sitio
   ------------------------------------------------------------
   Escrita a mano en vez de Tailwind por CDN a proposito. El CDN
   de Tailwind es un script que bloquea el render y genera las
   clases en el navegador de cada visitante; este archivo pesa
   unos pocos KB y no ejecuta nada. El diseno usa pocas piezas
   repetidas, asi que un framework de utilidades no compensaba.

   Todo el sitio se apoya en dos fondos que se alternan: tinta y
   papel. No hay tarjetas, ni sombras, ni degradados. Lo que
   separa una seccion de otra es el cambio de fondo y una linea
   de un pixel.
   ============================================================ */

:root {
    /* Los dos fondos y el radio de 4px estan medidos sobre fluxitsoft.com,
       no elegidos a ojo: su tinta es 22,22,29 (mas azulada que un negro puro)
       y su papel es 250,250,250 (mas frio que un blanco roto). */
    --tinta:        #16161d;
    --papel:        #fafafa;
    --papel-puro:   #ffffff;

    /* Texto secundario. Ambos pasan 4.5:1 sobre su fondo. */
    --apagado-tinta: rgba(250, 250, 250, .62);
    --apagado-papel: #63636e;

    --linea-tinta:  rgba(250, 250, 250, .16);
    --linea-papel:  #e2e2e2;

    /* Casi a sangre, como Flux: contenedor de 1920 y margenes de 24px. Eso
       hace que las fotos sean bastante mas grandes que en una grilla centrada
       de 1280. Los bloques de texto se frenan solos por su medida en ch. */
    --ancho:  1920px;
    --margen: clamp(20px, 2vw, 24px);
    --hueco:  24px;

    /* Radio chico: 4px. Es lo que separa una foto "apoyada en la pagina" de
       una tarjeta con esquinas redondeadas. */
    --radio:  4px;

    /* Ritmo vertical. El aire generoso es la mitad del estilo. */
    --banda:  clamp(88px, 12vw, 184px);

    --curva:  cubic-bezier(.22, 1, .36, 1);
    --paso:   .45s;   /* la duracion que usa Flux en sus transiciones */
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    /* Zalando Sans es la misma que usa fluxitsoft.com. Es de licencia
       abierta y esta en Google Fonts con los cuatro pesos que usamos. */
    font-family: "Zalando Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
    border-radius: 2px;
}

/* Salto al contenido, para quien navega con teclado o lector. */
.saltar {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--tinta); color: var(--papel);
    padding: 12px 20px; border-radius: 0 0 8px 0;
}
.saltar:focus { left: 0; }

/* ------------------------------------------------------------
   Bandas: la unidad de composicion del sitio
   ------------------------------------------------------------ */

.banda {
    background: var(--fondo, var(--papel));
    color: var(--frente, var(--tinta));
    padding: var(--banda) 0;
    position: relative;
}
.banda--tinta { --fondo: var(--tinta); --frente: var(--papel); --apagado: var(--apagado-tinta); --linea: var(--linea-tinta); }
.banda--papel { --fondo: var(--papel); --frente: var(--tinta); --apagado: var(--apagado-papel); --linea: var(--linea-papel); }
.banda--ceñida { padding-top: clamp(48px, 6vw, 88px); }

.limite {
    width: 100%;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 0 var(--margen);
}

.regla { border: 0; border-top: 1px solid var(--linea, var(--linea-papel)); margin: 0; }

/* ------------------------------------------------------------
   Tipografia
   ------------------------------------------------------------ */

/* Medido sobre el hero de fluxitsoft.com: su titular da 77,4 px en una
   ventana de 1548 px, peso 300, interlinea 1,08 y sin tracking: 5vw redondo.
   Ojo con la cuenta, `vw` mide la ventana entera con la barra de scroll
   incluida, no el clientWidth; con clientWidth daba 5,05 y quedaba un uno por
   ciento mas grande. El clamp solo pone piso en el celular y techo en
   pantallas muy anchas. Yo tenia 7,2vw, peso 400 y -0,035em de tracking: mas
   grande, mas pesado y mas apretado que el original. */
.titular {
    font-size: clamp(2.35rem, 5vw, 6rem);
    line-height: 1.08;
    letter-spacing: normal;
    font-weight: 300;
    /* El eje de ancho de la fuente variable, al 110%. Es lo que hace que las
       letras se vean mas abiertas y redondas. Flux lo usa exactamente asi, y
       solo en los titulares grandes: el resto del sitio va al 100%. */
    font-stretch: 110%;
    margin: 0;
    /* Reparte las palabras entre los renglones en vez de llenar el primero
       y dejar una sola palabra colgando en el segundo. Donde el navegador no
       lo soporte, simplemente corta como siempre. */
    text-wrap: balance;
}
/* La mitad destacada en negrita es nuestra, no de Flux: ellos usan un solo
   peso en todo el titular. Para copiarlos al pie de la letra, 300 aca. */
.titular strong { font-weight: 700; }

.titulo-seccion {
    font-size: clamp(2rem, 4.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -.03em;
    font-weight: 400;
    margin: 0 0 .6em;
    text-wrap: balance;
}

/* Etiqueta chica en versalitas que anuncia cada seccion. */
.rotulo {
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--apagado, var(--apagado-papel));
    margin: 0 0 clamp(28px, 4vw, 56px);
    font-weight: 500;
}

.bajada {
    font-size: clamp(1.02rem, 1.5vw, 1.5rem);
    font-weight: 300;
    color: var(--apagado, var(--apagado-papel));
    max-width: 46ch;
    margin: 0;
}

.parrafo { max-width: 62ch; margin: 0 0 1.2em; }
.parrafo:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------
   Botones y enlaces con flecha
   ------------------------------------------------------------ */

.pastilla {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 30px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 15px; font-weight: 500;
    transition: background .35s var(--curva), color .35s var(--curva);
}
.pastilla:hover { background: currentColor; }
.pastilla:hover span { color: var(--fondo, var(--papel)); }
.pastilla--solida {
    background: var(--frente, var(--tinta));
    color: var(--fondo, var(--papel));
    border-color: transparent;
}
.pastilla--solida:hover { opacity: .85; background: var(--frente, var(--tinta)); }
.pastilla--solida:hover span { color: var(--fondo, var(--papel)); }

.flecha {
    display: inline-flex; align-items: baseline; gap: .5em;
    font-size: clamp(1.15rem, 1.8vw, 1.5rem);
    letter-spacing: -.02em;
}
.flecha svg { width: .8em; height: .8em; transition: transform .4s var(--curva); align-self: center; }
a:hover .flecha svg, .flecha:hover svg { transform: translateX(6px); }

/* ------------------------------------------------------------
   Barra de navegacion
   ------------------------------------------------------------ */

.barra {
    position: fixed; inset: 0 0 auto 0; z-index: 100;
    background: transparent;
    transition: background .4s var(--curva), border-color .4s var(--curva), transform .4s var(--curva);
    border-bottom: 1px solid transparent;
}
.barra.posada {
    background: rgba(22, 22, 29, .88);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom-color: var(--linea-tinta);
}
.barra.oculta { transform: translateY(-100%); }

.barra__caja {
    max-width: var(--ancho); margin: 0 auto;
    padding: 0 var(--margen);
    height: 92px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px;
}
/* Se usa el lockup, no el wordmark suelto: asi "AI SOLUTIONS" viaja siempre
   debajo de MAIC y el conjunto ocupa el doble de alto que antes. */
.barra__logo img { height: 46px; width: auto; }
@media (max-width: 860px) {
    .barra__caja { height: 76px; }
    .barra__logo img { height: 38px; }
}
.barra__menu { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 38px); }
.barra__menu a { color: var(--papel); font-size: 15px; opacity: .82; transition: opacity .3s ease; }
.barra__menu a:hover { opacity: 1; }
.barra__cta {
    background: var(--papel); color: var(--tinta) !important;
    padding: 11px 24px; border-radius: 999px;
    font-weight: 500; opacity: 1 !important;
    transition: transform .3s var(--curva);
}
.barra__cta:hover { transform: translateY(-1px); }

.hamburguesa {
    display: none;
    background: none; border: 0; padding: 8px; cursor: pointer;
    color: var(--papel);
}
.hamburguesa svg { width: 26px; height: 26px; }

.panel {
    display: none;
    background: var(--tinta);
    border-top: 1px solid var(--linea-tinta);
    padding: 12px var(--margen) 28px;
    /* Con los servicios desplegados son once renglones: en un telefono bajo
       no entran de una y hay que poder llegar al ultimo. */
    max-height: calc(100vh - 76px);
    overflow-y: auto;
}
.panel.abierto { display: block; }
.panel a {
    display: block; color: var(--papel);
    padding: 14px 0; font-size: 19px;
    border-bottom: 1px solid var(--linea-tinta);
}
.panel a:last-child { border-bottom: 0; }

@media (max-width: 860px) {
    .barra__menu { display: none; }
    .hamburguesa { display: block; }
}

/* ------------------------------------------------------------
   Servicios: el desplegable del menu
   ------------------------------------------------------------
   El item "Servicios" pasa a ser un boton, no un enlace: abre la
   lista de los cinco servicios y desde ahi se entra derecho a la
   pagina de cada uno. Como boton y no como enlace con href="#"
   porque eso es lo que es: no lleva a ningun lado por si mismo.
   Quien igual quiera la seccion de la home la tiene en el ultimo
   renglon, "Ver todos los servicios". */

.barra__grupo { position: relative; display: flex; align-items: center; }

.barra__boton {
    display: inline-flex; align-items: center; gap: 5px;
    background: none; border: 0; padding: 0; cursor: pointer;
    font: inherit; font-size: 15px; line-height: 1;
    color: var(--papel); opacity: .82;
    transition: opacity .3s ease;
}
.barra__boton:hover,
.barra__grupo:hover .barra__boton,
.barra__grupo[data-abierto="true"] .barra__boton { opacity: 1; }

.barra__punta { width: 13px; height: 13px; transition: transform .3s var(--curva); }
.barra__grupo:hover .barra__punta,
.barra__grupo[data-abierto="true"] .barra__punta { transform: rotate(180deg); }

.submenu {
    position: absolute; top: calc(100% + 18px); left: 50%;
    min-width: 240px;
    background: rgba(22, 22, 29, .96);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border: 1px solid var(--linea-tinta);
    border-radius: var(--radio);
    padding: 6px 0;
    opacity: 0; visibility: hidden;
    transform: translate(-50%, -8px);
    transition: opacity .28s var(--curva), transform .28s var(--curva), visibility .28s;
}
/* Puente invisible sobre el hueco que queda entre el boton y el desplegable.
   Sin el, el menu se cierra a mitad de camino cuando uno baja el mouse. */
.submenu::before {
    content: ""; position: absolute;
    left: 0; right: 0; top: -18px; height: 18px;
}
.barra__grupo:hover .submenu,
.barra__grupo[data-abierto="true"] .submenu {
    opacity: 1; visibility: visible;
    transform: translate(-50%, 0);
}
.submenu a {
    display: block; padding: 11px 20px;
    font-size: 15px; white-space: nowrap;
    color: var(--papel); opacity: .74;
    transition: opacity .25s ease, background .25s ease;
}
.submenu a:hover, .submenu a:focus-visible { opacity: 1; background: rgba(250, 250, 250, .07); }
.submenu__todos {
    margin-top: 6px; border-top: 1px solid var(--linea-tinta);
    font-size: 13px !important; letter-spacing: .04em;
}

/* El mismo desplegable, dentro del menu de pantallas chicas. Ahi no hay
   hover que valga: se abre y se cierra tocando el renglon. */
.panel__boton {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; background: none; border: 0;
    border-bottom: 1px solid var(--linea-tinta);
    padding: 14px 0; cursor: pointer;
    font: inherit; font-size: 19px; text-align: left;
    color: var(--papel);
}
.panel__punta { width: 18px; height: 18px; transition: transform .3s var(--curva); }
.panel__grupo[data-abierto="true"] .panel__punta { transform: rotate(180deg); }

.panel__sub a {
    padding: 12px 0 12px 18px;
    font-size: 16px;
    opacity: .78;
}
.panel__sub a:last-child { border-bottom: 1px solid var(--linea-tinta); }

/* ------------------------------------------------------------
   Portada
   ------------------------------------------------------------ */

.portada {
    /* --fondo y --frente tienen que estar declarados aca, no solo el color
       literal: la pastilla solida los usa para invertirse. Sin ellos caia al
       valor por defecto y quedaba tinta sobre tinta, es decir invisible. */
    --fondo: var(--tinta); --frente: var(--papel);
    background: var(--fondo); color: var(--frente);
    --apagado: var(--apagado-tinta); --linea: var(--linea-tinta);
    padding: clamp(150px, 20vh, 240px) 0 clamp(60px, 8vw, 110px);
}
/* El titular ocupa el ancho completo. Cuando compartia fila con la bajada le
   quedaban 700 px y una frase de seis palabras se partia en cuatro renglones.
   La bajada baja a la fila de abajo, alineada a la derecha, y el bloque sigue
   leyendose como una sola unidad. */
.portada__pie {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
    gap: clamp(28px, 5vw, 64px);
    align-items: end;
    margin-top: clamp(44px, 6vw, 80px);
}
@media (max-width: 900px) {
    .portada__pie { grid-template-columns: 1fr; align-items: start; gap: 32px; }
}
.portada__acciones { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Imagen ancha bajo la portada, como una ventana al trabajo real. */
.ventana {
    margin-top: clamp(48px, 7vw, 96px);
    border-radius: var(--radio); overflow: hidden;
    aspect-ratio: 21 / 8;
    background: #1b1b21;
}
.ventana img { width: 100%; height: 100%; object-fit: cover; opacity: .9; }
@media (max-width: 700px) { .ventana { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------
   Servicios
   ------------------------------------------------------------ */

.servicios {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(56px, 6vw, 88px) var(--hueco);
}
@media (max-width: 780px) { .servicios { grid-template-columns: 1fr; } }

/* El quinto servicio ocupa el ancho completo: cierra la grilla sin
   dejar un hueco y de paso destaca la incorporacion mas nueva. */
.servicio--ancho { grid-column: 1 / -1; }

.servicio__foto {
    border-radius: var(--radio); overflow: hidden;
    /* 4:3, la misma proporcion que usan las tarjetas de industria de Flux. */
    aspect-ratio: 4 / 3;
    background: #1f1f27;
}
.servicio--ancho .servicio__foto { aspect-ratio: 8 / 3; }
@media (max-width: 780px) { .servicio--ancho .servicio__foto { aspect-ratio: 4 / 3; } }

.servicio__foto img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform var(--paso) ease-in-out, opacity var(--paso) ease;
    opacity: .92;
}
.servicio:hover .servicio__foto img { transform: scale(1.04); opacity: 1; }

.servicio__nombre { margin: 22px 0 8px; }
.servicio__texto { color: var(--apagado, var(--apagado-papel)); max-width: 52ch; margin: 0; font-size: 16px; }

/* ------------------------------------------------------------
   Nosotros
   ------------------------------------------------------------ */

.nosotros {
    display: grid;
    grid-template-columns: minmax(0, 340px) minmax(0, 62ch);
    gap: clamp(32px, 5vw, 96px);
    align-items: start;
}
@media (max-width: 860px) { .nosotros { grid-template-columns: 1fr; } }
.nosotros__foto { border-radius: var(--radio); overflow: hidden; aspect-ratio: 4 / 5; background: #ececec; }
.nosotros__foto img { width: 100%; height: 100%; object-fit: cover; }
.nosotros__dato { color: var(--apagado-papel); font-size: 15px; margin: 18px 0 0; text-align: center; line-height: 1.5; }
.nosotros__dato strong { color: var(--tinta); font-weight: 500; display: block; }

/* ------------------------------------------------------------
   Casos
   ------------------------------------------------------------ */

.casos { border-top: 1px solid var(--linea, var(--linea-papel)); }

.caso {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 60ch) auto;
    gap: clamp(16px, 3vw, 56px);
    align-items: start;
    padding: clamp(30px, 3.4vw, 44px) 0;
    padding-inline: 0;
    border-bottom: 1px solid var(--linea, var(--linea-papel));
    transition: padding-inline var(--paso) var(--curva), border-color var(--paso) ease;
}
/* Al pasar el mouse la fila se corre unos pixeles y la flecha acompana. Es el
   unico movimiento: no hay fondo de color ni sombra, que romperian el tono. */
.caso:hover { padding-inline-start: 14px; border-bottom-color: currentColor; }

@media (max-width: 820px) {
    .caso { grid-template-columns: 1fr auto; gap: 10px 16px; }
    .caso__que { grid-column: 1 / -1; }
}

/* El nombre y el rubro van juntos: separados por media pantalla, el rubro
   quedaba huerfano en el borde derecho y costaba saber a quien pertenecia. */
.caso__quien { display: flex; flex-direction: column; gap: 8px; }
.caso__cliente { font-size: clamp(1.3rem, 2.1vw, 1.75rem); letter-spacing: -.02em; line-height: 1.15; }
.caso__rubro {
    color: var(--apagado, var(--apagado-papel));
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
}
.caso__que { color: var(--apagado, var(--apagado-papel)); margin: 0; font-size: 16px; }
.caso__ir { align-self: center; color: var(--apagado, var(--apagado-papel)); transition: color var(--paso) ease; }
.caso__ir svg { width: 22px; height: 22px; transition: transform var(--paso) var(--curva); display: block; }
.caso:hover .caso__ir { color: inherit; }
.caso:hover .caso__ir svg { transform: translateX(8px); }

/* ------------------------------------------------------------
   Tecnologias
   ------------------------------------------------------------
   Antes era una cinta que se desplazaba sola. Se cambio por una
   grilla quieta por dos razones: la cinta cortaba los logos de
   los bordes y nunca se veian todos, y el movimiento competia
   con las apariciones del resto de la pagina. Quieta, se leen
   los once de una sola mirada.

   (La animacion `desfile` que usaba esa cinta tampoco existia:
   el HTML llamaba a una clase que no estaba definida en ningun
   lado, por eso la fila estaba congelada.)                      */

.tecnologias {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Alineados a la izquierda, contra el mismo borde que el rotulo de la
       seccion y que todo el resto de la pagina. Centrados quedaban flotando
       en medio del ancho y se leia como un error de maquetado. */
    justify-content: flex-start;
    gap: clamp(34px, 4.4vw, 56px) clamp(44px, 5.2vw, 80px);
}
.tecnologias img {
    height: clamp(34px, 3.4vw, 46px);
    width: auto;
    opacity: .72;
    transition: opacity var(--paso) ease, transform var(--paso) var(--curva);
}
.tecnologias img:hover { opacity: 1; transform: translateY(-4px); }

/* En la banda oscura los logos son negros, asi que hay que invertirlos. */
.banda--tinta .tecnologias img { filter: invert(1); }

/* ------------------------------------------------------------
   Cierre y pie
   ------------------------------------------------------------ */

.cierre { text-align: center; }
/* Mismo tratamiento de despliegue que la portada: en Flux el titular del
   cierre tambien va expandido, mientras que los h2 dentro del contenido no. */
.cierre .titulo-seccion { font-stretch: 110%; font-weight: 300; }
.cierre .titulo-seccion { max-width: 18ch; margin-inline: auto; }

.pie { background: var(--papel); color: var(--tinta); padding: clamp(48px, 6vw, 80px) 0 40px; border-top: 1px solid var(--linea-papel); }
.pie__reja {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 780px) { .pie__reja { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pie h3 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--apagado-papel); font-weight: 500; margin: 0 0 16px; }
.pie a, .pie p { display: block; margin: 0 0 10px; font-size: 15px; }
.pie a:hover { text-decoration: underline; text-underline-offset: 4px; }
.pie__final {
    display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    margin-top: clamp(40px, 5vw, 64px); padding-top: 24px;
    border-top: 1px solid var(--linea-papel);
    color: var(--apagado-papel); font-size: 14px;
}
.pie__final img { height: 16px; opacity: .55; }

/* ------------------------------------------------------------
   Aparicion suave al entrar en pantalla
   ------------------------------------------------------------
   Reemplaza a la libreria AOS. Son doce lineas de CSS y un
   IntersectionObserver, contra 15 KB de JavaScript externo.     */

/* Dos gestos, como en Flux: los titulos y los bloques suben unos pixeles
   mientras aparecen; los parrafos solo se funden, sin moverse. Mezclar los
   dos hace que el texto largo no "salte" al leerlo. */

.surge,
.surge-texto {
    opacity: 0;
    transition: opacity var(--paso) ease, transform var(--paso) var(--curva);
    transition-delay: var(--retraso, 0ms);
}
.surge { transform: translateY(20px); }

.surge.visible,
.surge-texto.visible { opacity: 1; transform: none; }

/* El titular de la portada no espera al scroll: ya esta en pantalla al
   cargar, asi que se anima solo una vez y sin observador. */
.entra { animation: sube .6s var(--curva) both; }
.entra-2 { animation: sube .6s var(--curva) .1s both; }
.entra-3 { animation: funde .6s ease .22s both; }

@keyframes sube  { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes funde { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
    .surge, .surge-texto { opacity: 1; transform: none; }
    .entra, .entra-2, .entra-3 { animation: none; opacity: 1; }
}

/* Si el JavaScript no corre, nada queda invisible. */
.sin-js .surge,
.sin-js .surge-texto { opacity: 1; transform: none; }

/* ------------------------------------------------------------
   Paginas de servicio
   ------------------------------------------------------------
   Comparten la plantilla y las piezas de la home. Lo unico
   propio es el split editorial y la lista de otros servicios. */

/* La portada interna es mas baja: no compite con la de la home
   y deja ver antes el contenido, que es a lo que vino el lector. */
.portada--interna { padding-top: clamp(128px, 15vh, 176px); padding-bottom: clamp(44px, 5vw, 76px); }
.portada--interna .rotulo { margin-bottom: clamp(20px, 2.4vw, 32px); }

/* Titulo grande a la izquierda, prosa a la derecha. La prosa se
   frena en 62ch: a ancho completo una linea de texto larga se
   vuelve incomoda de seguir. */
.parte {
    display: grid;
    grid-template-columns: minmax(0, 30rem) minmax(0, 62ch);
    gap: clamp(24px, 5vw, 96px);
    align-items: start;
}
@media (max-width: 980px) { .parte { grid-template-columns: 1fr; gap: 20px; } }

/* Filas de capacidades: mismo dibujo que los casos de la home,
   pero sin enlace, asi que tampoco tienen el gesto de hover. */
.caso--fijo { cursor: default; }
.caso--fijo:hover { padding-inline-start: 0; border-bottom-color: var(--linea, var(--linea-papel)); }

/* Los otros cuatro servicios, al pie de cada pagina. Sin fotos
   a proposito: repetir la grilla de la home aca restaria foco al
   servicio que la persona vino a leer. */
.otros { border-top: 1px solid var(--linea, var(--linea-papel)); }
.otro {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    padding: clamp(20px, 2.4vw, 32px) 0;
    border-bottom: 1px solid var(--linea, var(--linea-papel));
    font-size: clamp(1.25rem, 2.2vw, 1.9rem);
    letter-spacing: -.02em; font-weight: 300; line-height: 1.2;
    transition: padding-inline var(--paso) var(--curva), border-color var(--paso) ease;
}
.otro:hover { padding-inline-start: 14px; border-bottom-color: currentColor; }
.otro svg { width: 22px; height: 22px; flex: none; transition: transform var(--paso) var(--curva); }
.otro:hover svg { transform: translateX(8px); }

/* Bloque destacado dentro de una pagina de servicio: el "Objetivo" de
   AI Advisor y el "¿Por que capacitarse ahora?" de AI Trainer. Sin fondo
   de color, solo una linea gruesa al costado, para no romper la sobriedad. */
.destacado {
    border-left: 2px solid currentColor;
    padding: 4px 0 4px clamp(18px, 2vw, 28px);
    margin-top: clamp(28px, 3.4vw, 44px);
    max-width: 62ch;
}
.destacado h3 {
    font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
    font-weight: 500; margin: 0 0 10px;
    color: var(--apagado, var(--apagado-papel));
}
.destacado p { margin: 0; font-size: clamp(1.05rem, 1.4vw, 1.25rem); font-weight: 300; }

/* ------------------------------------------------------------
   Asistente
   ------------------------------------------------------------
   Vive en la plantilla, asi que aparece en las seis paginas.
   Rehecho en el lenguaje del sitio nuevo: monocromo, esquinas
   chicas y una sola linea de contorno en vez del vidrio
   esmerilado y el degradado azul de la version anterior.      */

.asistente { position: fixed; right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 120; }

.asistente__boton {
    width: 56px; height: 56px; border-radius: 999px;
    background: var(--tinta); color: var(--papel);
    border: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 24px rgba(16, 16, 22, .22);
    transition: transform var(--paso) var(--curva), opacity var(--paso) ease;
}
.asistente__boton:hover { transform: translateY(-2px); }
.asistente__boton svg { width: 24px; height: 24px; }
.asistente[data-abierto="true"] .asistente__boton { opacity: 0; pointer-events: none; }

.asistente__panel {
    position: absolute; right: 0; bottom: 0;
    width: min(370px, calc(100vw - 32px));
    height: min(520px, calc(100vh - 120px));
    background: var(--papel-puro);
    color: var(--tinta);
    border: 1px solid var(--linea-papel);
    border-radius: 10px;
    box-shadow: 0 18px 50px rgba(16, 16, 22, .18);
    display: flex; flex-direction: column; overflow: hidden;
    transform-origin: bottom right;
    opacity: 0; transform: scale(.96) translateY(10px); pointer-events: none;
    transition: opacity var(--paso) ease, transform var(--paso) var(--curva);
}
.asistente[data-abierto="true"] .asistente__panel { opacity: 1; transform: none; pointer-events: auto; }

.asistente__cabeza {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px;
    background: var(--tinta); color: var(--papel);
}
.asistente__nombre { font-size: 15px; font-weight: 500; line-height: 1.3; }
.asistente__estado { display: flex; align-items: center; gap: 7px; font-size: 12px; color: rgba(250, 250, 245, .66); }
.asistente__punto { width: 7px; height: 7px; border-radius: 999px; background: #4ade80; flex: none; }
.asistente__cerrar {
    background: none; border: 0; color: inherit; cursor: pointer; padding: 4px;
    opacity: .7; transition: opacity .3s ease;
}
.asistente__cerrar:hover { opacity: 1; }
.asistente__cerrar svg { width: 18px; height: 18px; display: block; }

.asistente__mensajes {
    flex: 1; overflow-y: auto; padding: 18px;
    display: flex; flex-direction: column; gap: 12px;
    font-size: 15px; line-height: 1.5;
}
.msj { max-width: 86%; padding: 11px 14px; border-radius: 12px; white-space: pre-wrap; overflow-wrap: anywhere; }
.msj--bot { background: #f0f0ee; align-self: flex-start; border-bottom-left-radius: 3px; }
.msj--yo  { background: var(--tinta); color: var(--papel); align-self: flex-end; border-bottom-right-radius: 3px; }
.msj--error { background: #fdeceb; color: #8c2f26; align-self: flex-start; }
.asistente__aviso { margin: -4px 0 0; font-size: 12px; line-height: 1.4; color: #8a8a86; align-self: flex-start; }

.asistente__escribiendo { display: flex; gap: 4px; align-self: flex-start; padding: 14px; }
.asistente__escribiendo i { width: 6px; height: 6px; border-radius: 999px; background: #b4b4b0; animation: latido 1s infinite; }
.asistente__escribiendo i:nth-child(2) { animation-delay: .18s; }
.asistente__escribiendo i:nth-child(3) { animation-delay: .36s; }
@keyframes latido { 0%, 100% { transform: translateY(0); opacity: .5; } 50% { transform: translateY(-4px); opacity: 1; } }

.asistente__pie { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-top: 1px solid var(--linea-papel); }
.asistente__pie input {
    flex: 1; border: 0; background: none; font: inherit; font-size: 15px; color: inherit;
    padding: 8px 4px;
}
.asistente__pie input:focus { outline: none; }
.asistente__enviar {
    background: var(--tinta); color: var(--papel); border: 0; cursor: pointer;
    width: 36px; height: 36px; border-radius: 999px; flex: none;
    display: flex; align-items: center; justify-content: center;
    transition: opacity var(--paso) ease;
}
.asistente__enviar:disabled { opacity: .35; cursor: default; }
.asistente__enviar svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) { .asistente__escribiendo i { animation: none; } }

/* ------------------------------------------------------------
   Formulario de contacto
   ------------------------------------------------------------
   Campos con linea al pie en vez de cajas: en una banda oscura
   una caja con borde completo se lee como un agujero. Va en la
   plantilla, asi que aparece en las seis paginas.              */

.contacto {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
    gap: clamp(40px, 6vw, 104px);
    align-items: start;
}
@media (max-width: 900px) { .contacto { grid-template-columns: 1fr; gap: 44px; } }

.contacto__datos { display: grid; gap: 14px; margin-top: clamp(28px, 3.4vw, 44px); }
.contacto__dato {
    display: flex; align-items: center; gap: 12px;
    color: var(--apagado, var(--apagado-papel));
    font-size: 16px;
}
.contacto__dato svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.contacto__dato a:hover { text-decoration: underline; text-underline-offset: 4px; }

.formulario { display: grid; gap: clamp(20px, 2.4vw, 28px); }

.campo label {
    display: block;
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
    color: var(--apagado, var(--apagado-papel));
    margin-bottom: 10px;
}
.campo input,
.campo textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--linea, var(--linea-papel));
    color: inherit;
    font: inherit;
    font-size: 17px;
    padding: 8px 0 12px;
    border-radius: 0;               /* Safari en iOS redondea los campos solo */
    transition: border-color var(--paso) ease;
}
.campo input::placeholder,
.campo textarea::placeholder { color: var(--apagado, var(--apagado-papel)); opacity: .7; }
.campo input:focus,
.campo textarea:focus { outline: none; border-bottom-color: currentColor; }
.campo textarea { resize: vertical; min-height: 92px; line-height: 1.55; }

/* El navegador marca en rojo solo despues del primer intento de envio, no
   mientras la persona todavia esta tipeando. */
.formulario.intentado .campo input:invalid,
.formulario.intentado .campo textarea:invalid { border-bottom-color: #ef8b80; }

.formulario button { justify-self: start; margin-top: 4px; }
.formulario button[disabled] { opacity: .55; cursor: default; }

.aviso { font-size: 15px; margin: 0; min-height: 1.4em; }
.aviso--ok { color: #7ee2a8; }
.aviso--mal { color: #ef8b80; }

/* Otros caminos debajo del formulario (/diagnostico): WhatsApp o el asistente */
.alternativa { font-size: 15px; line-height: 1.6; margin: 0; color: var(--apagado, var(--apagado-papel)); }
.alternativa a,
.formulario .alternativa .enlace {
    color: inherit; text-decoration: underline; text-underline-offset: 4px;
    background: none; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer;
}
.alternativa a:hover,
.alternativa .enlace:hover { color: currentColor; opacity: 1; filter: brightness(1.3); }
.campo .opcional { text-transform: none; letter-spacing: 0; }

/* Trampa para robots: invisible para una persona, tentadora para un script
   que completa todo lo que encuentra. Si viene llena, no se envia. */
.miel { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------
   Entrevistas en medios
   ------------------------------------------------------------
   La miniatura esta alojada acá y el reproductor de YouTube se
   carga recien cuando alguien hace clic. Un iframe de YouTube
   incrustado de entrada trae mas de un megabyte y sus
   rastreadores en cada visita, incluso para quien nunca le da
   play. Asi, para ese visitante cuesta cero.                  */

.entrevistas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(32px, 3.6vw, 48px) var(--hueco);
}
@media (max-width: 780px) { .entrevistas { grid-template-columns: 1fr; } }

.entrevista__marco {
    position: relative; display: block; width: 100%; padding: 0;
    border: 0; background: #1f1f27; cursor: pointer;
    border-radius: var(--radio); overflow: hidden;
    aspect-ratio: 16 / 9;
}
.entrevista__marco img {
    width: 100%; height: 100%; object-fit: cover; opacity: .92;
    transition: transform var(--paso) ease-in-out, opacity var(--paso) ease;
}
.entrevista__marco:hover img { transform: scale(1.03); opacity: 1; }
.entrevista__marco iframe { width: 100%; height: 100%; border: 0; display: block; }

.entrevista__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.entrevista__play span {
    width: 62px; height: 62px; border-radius: 999px;
    background: rgba(250, 250, 250, .92); color: var(--tinta);
    display: flex; align-items: center; justify-content: center;
    transition: transform var(--paso) var(--curva);
}
.entrevista__marco:hover .entrevista__play span { transform: scale(1.08); }
.entrevista__play svg { width: 20px; height: 20px; margin-left: 3px; }

.entrevista__titulo {
    font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 400;
    letter-spacing: -.02em; line-height: 1.32; margin: 18px 0 8px;
}
.entrevista__fuente {
    color: var(--apagado, var(--apagado-papel));
    font-size: 12px; letter-spacing: .16em; text-transform: uppercase; margin: 0;
}

/* ------------------------------------------------------------
   Newsletter
   ------------------------------------------------------------ */

.boletin { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); gap: clamp(36px, 5vw, 88px); align-items: start; }
@media (max-width: 900px) { .boletin { grid-template-columns: 1fr; gap: 36px; } }

/* Nombre y apellido comparten renglon en pantallas comodas. */
.boletin__par { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 24px); }
@media (max-width: 560px) { .boletin__par { grid-template-columns: 1fr; } }

/* Selector de idioma en la barra. Discreto: es una herramienta, no una
   llamada a la accion, asi que no compite con el boton de contacto. */
.barra__idioma {
    color: var(--papel);
    font-size: 13px;
    letter-spacing: .12em;
    opacity: .62;
    transition: opacity .3s ease;
}
.barra__idioma:hover { opacity: 1; }

/* El video de la portada ocupa la ventana igual que ocupaba la foto. */
.ventana video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Listado de novedades. Igual que las tarjetas de la home, pero con la linea
   de fuente y fecha arriba del titulo, como en un listado de prensa. */
.entrevista--nota .entrevista__fuente { margin: 18px 0 6px; }
.entrevista--nota .entrevista__titulo { margin: 0; }


/* ------------------------------------------------------------
   Volver arriba
   ------------------------------------------------------------
   Abajo a la IZQUIERDA a proposito: el asistente ya ocupa la
   esquina derecha y dos botones flotantes en el mismo rincon se
   tapan en pantallas chicas.

   Aparece recien despues de bajar una pantalla y media. Antes de
   eso no hace falta y solo seria un estorbo sobre el contenido. */

.subir {
    position: fixed;
    left: clamp(16px, 2vw, 28px);
    bottom: clamp(16px, 2vw, 28px);
    z-index: 110;
    width: 46px; height: 46px;
    border-radius: 999px;
    border: 1px solid var(--linea-papel);
    background: var(--papel-puro);
    color: var(--tinta);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 18px rgba(16, 16, 22, .12);
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity var(--paso) ease, transform var(--paso) var(--curva);
}
.subir.visible { opacity: 1; transform: none; pointer-events: auto; }
.subir:hover { transform: translateY(-2px); }
.subir svg { width: 20px; height: 20px; }

/* Sobre banda oscura se invierte, para no ser una mancha blanca. */
.subir.en-tinta {
    background: var(--tinta);
    color: var(--papel);
    border-color: rgba(250, 250, 250, .22);
}

@media (max-width: 520px) { .subir { width: 42px; height: 42px; } }

/* ------------------------------------------------------------
   Productos (borrador): /productos.html y una pagina por producto.
   Las obras se muestran enteras (contain), nunca recortadas: son
   obras de arte y el recorte les cambia el diseño.
   ------------------------------------------------------------ */

.sello-borrador {
    display: inline-block; margin-bottom: 18px;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    border: 1px solid currentColor; border-radius: 999px; padding: 4px 12px; opacity: .65;
}
.producto-visual {
    margin-top: clamp(48px, 7vw, 96px);
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco);
}
.producto-visual--uno { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 780px) { .producto-visual { grid-template-columns: minmax(0, 1fr); } }
.producto-visual figure { margin: 0; }
.producto-visual__marco {
    border-radius: var(--radio); overflow: hidden; background: #0e0e12;
    aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
}
.producto-visual__marco--alto { aspect-ratio: 4 / 5; }
.producto-visual__marco img,
.producto-visual__marco video { width: 100%; height: 100%; object-fit: contain; display: block; }
.producto-visual__marco iframe { width: 100%; height: 100%; border: 0; display: block; }
.producto-visual figcaption { margin-top: 10px; font-size: 14px; color: var(--apagado-tinta); }

.servicio__foto--entera { background: #0e0e12; }
.servicio__foto--entera img { object-fit: contain; }

.paso__numero { font-size: 13px; letter-spacing: .14em; opacity: .55; display: block; margin-bottom: 6px; }
.nota-legal { font-size: 15px; color: var(--apagado, var(--apagado-papel)); max-width: 70ch; }
/* La demo del avatar necesita su alto entero: el botón queda abajo de la cara. */
.producto-visual__marco--demo { aspect-ratio: auto; height: 640px; }
@media (max-width: 780px) { .producto-visual__solo-compu { display: none; } }

/* Las demos para probar ahí mismo (Aumentado y Vitrina). */
.probar {
    margin-top: clamp(48px, 7vw, 96px);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
    gap: clamp(24px, 4vw, 56px); align-items: start;
}
.probar--vitrina { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.probar__obra {
    border-radius: var(--radio); overflow: hidden; background: #0e0e12;
    height: min(78vh, 720px); display: flex; align-items: center; justify-content: center;
}
.probar__obra img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.probar--horizontal .probar__obra { height: auto; aspect-ratio: 16 / 9; }
.probar__cartela { margin: 10px 0 0; font-size: 14px; color: var(--apagado-tinta); }
.probar__paso { margin: 0 0 12px; font-size: 16px; }
.probar__paso b { display: inline-block; width: 1.6em; height: 1.6em; line-height: 1.6em; text-align: center;
                  border-radius: 50%; background: var(--papel); color: var(--tinta); font-size: 13px; margin-right: 8px; }
.probar__qr { display: block; background: #fff; padding: 12px; border-radius: var(--radio); width: 200px; max-width: 100%; margin-bottom: 22px; }
.probar__qr svg { display: block; width: 100%; height: auto; }
.probar__otras { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.probar__otras button {
    font: inherit; font-size: 14px; color: inherit; background: none; cursor: pointer;
    border: 1px solid var(--linea-tinta, rgba(255,255,255,.25)); border-radius: 999px; padding: 6px 14px;
}
.probar__otras button[aria-pressed="true"] { background: var(--papel); color: var(--tinta); border-color: var(--papel); }
.probar__links { font-size: 14px; color: var(--apagado-tinta); }
.probar__links a { color: var(--papel); }
.probar__pantalla { border-radius: var(--radio); overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.probar__pantalla iframe { width: 100%; height: 100%; border: 0; display: block; }
.probar__totem { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.probar__totem li {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) 92px; gap: 12px; align-items: center;
    background: rgba(255,255,255,.05); border-radius: var(--radio); padding: 10px;
}
.probar__totem img { width: 56px; height: 56px; object-fit: contain; background: #0e0e12; border-radius: 3px; }
.probar__totem strong { display: block; font-weight: 500; font-size: 15px; }
.probar__totem small { color: var(--apagado-tinta); font-size: 13px; }
.probar__totem .probar__qr { width: 92px; padding: 6px; margin: 0; }
.solo-cel { display: none; }
@media (max-width: 860px) {
    .probar, .probar--vitrina { grid-template-columns: minmax(0, 1fr); }
    .probar__obra { height: min(60vh, 520px); }
    .solo-compu { display: none; }
    .solo-cel { display: block; }
    .probar__totem li { grid-template-columns: 56px minmax(0, 1fr); }
}


/* Caso Claudito: una charla de ejemplo llena la columna izquierda de la portada,
   donde los productos tienen su demo. Se lee como la app: vos a la derecha, él a la izquierda. */
.portada__izq { display: grid; gap: clamp(28px, 3vw, 40px); }
.charla-demo {
    list-style: none; margin: 0; padding: 0; display: grid; gap: 10px;
    max-width: 34rem; font-size: clamp(.95rem, 1.1vw, 1.05rem); line-height: 1.45;
}
.charla-demo li { padding: 10px 14px; border-radius: 14px; max-width: 85%; }
.charla-demo__yo { justify-self: end; background: #3a2a22; color: var(--papel); border-bottom-right-radius: 4px; }
.charla-demo__el { justify-self: start; background: rgba(250, 250, 250, .07); color: var(--papel); border-bottom-left-radius: 4px; }
.charla-demo__accion { justify-self: start; padding: 0 4px; color: var(--apagado-tinta); font-size: .85em; }
.charla-demo__accion::before { content: "⚙ "; }