/* Ajustes propios de /aliados sobre la plantilla Drex.
   Este archivo carga DESPUES de style.css y de css/joik-components.css,
   asi que lo de aca gana sobre los dos.

   Lo que NO va aca: los componentes que comparte con el home. El boton
   pastilla vive en css/joik-components.css, una sola vez. Aca solo lo que
   es especifico de esta pagina o lo que corrige a la plantilla. */

.logo {
    width: 106px;
    height: 48px;
    background-size: contain;
}

/* El h1 original de la plantilla tiene un margen negativo que permite
   letras grandes sin desborde en el split del hero. Con tres líneas
   necesita volver a un bloque normal, sin tirar el texto a la izquierda. */
.al-hero-title {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.al-hero-title__line {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: #000;
}

/* Tres líneas de mayor a menor: la primera es la más grande, la última
   la más chica. Calibrado a ojo para que cada renglón ocupe un ancho
   parecido dentro del bloque. */
.al-hero-title__line--big {
    font-size: clamp(80px, 11vw, 170px);
}

.al-hero-title__line--mid {
    font-size: clamp(48px, 6.5vw, 100px);
}

.al-hero-title__line--small {
    font-size: clamp(38px, 5vw, 78px);
}

.al-hero-title__line--accent {
    color: #00909e;
}

/* La plantilla empuja el bloque del hero 55px hacia adentro con
   .introduction, pero la barra de scroll de Windows y las imágenes del
   panel derecho hacen que la izquierda pese visualmente más. Reducir
   ese margen compensa el desequilibrio sin tocar el split 50/50. */
.introduction {
    margin-left: 32px;
}

@media only screen and (max-width: 880px) {
    .logo {
        background-size: contain;
    }
}

/* ── Corregir contenedores de la plantilla que aprietan el boton ─────
   Drex mide sus contenedores de boton con un ancho fijo, pensado para SU
   boton. Al meter la pastilla de Joik adentro, quedaba apretada -- eso
   era el "fondo blanco" que se veia en el hero. */

/* Reemplaza a .the-button-wrapper (width:165px) donde va el boton de Joik:
   no impone medida, la pastilla se mide sola por su contenido. */
.al-btn-wrap {
    position: relative;
    z-index: 10;
    display: inline-block;
}

/* El carrusel de Proceso usa un wrapper propio de 165/205px. La pastilla
   compartida debe poder medirse por su contenido, igual que los CTA. */
.the-button-wrapper-news {
    width: auto !important;
}

/* Mismo caso en el cierre: width:205px porque ahi iba UN boton suyo. Con
   los dos CTA de Joik al lado, ese ancho los apretaba.
   Va con !important porque la regla original no esta anidada y gana por
   orden de aparicion dentro de style.css. */
.contact-form-submit-wrapper {
    width: auto !important;
}

/* Los dos CTA del cierre van uno al lado del otro y bajan en columna
   cuando no entran. La plantilla los apilaba sin separacion.
   align-items:flex-end para que las pastillas queden alineadas entre si
   aunque una tenga leyenda arriba y la otra no. */
.al-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-end;
}

/* Sobre este fondo NO hace falta la variante --dark del boton: el body de
   la plantilla es blanco (background:#fff; color:#000), asi que el cierre
   es una seccion clara y los valores por defecto son los que corresponden.
   Queda escrito para no volver a dudarlo. */

/* ── Color del menu lateral ──────────────────────────────────────────
   La estructura viene de css/joik-components.css; el color va aca porque
   depende del fondo de cada pagina.

   El home usa blanco al 50% porque es oscuro de punta a punta. Aca el
   menu cae sobre el panel derecho (imagenes con overlay oscuro al 60%),
   asi que repetir el mismo tono blanco semitransparente del home es lo
   que funciona. #00909e en el activo por contraste. */
.side-menu a {
    color: rgba(255, 255, 255, 0.5);
}

.side-menu a:hover,
.side-menu a.active {
    color: #00909e;
}

/* ── Numeros de paso en los circulos del recorrido ──────────────────
   Los circulos blancos de la plantilla llevaban una foto adentro. Como
   solo habia 4 fotos para toda la pagina, quedaban repetidas y sin
   relacion con el paso que acompañaban. Ahora llevan el numero del paso,
   que es lo que de verdad aporta: marcar el orden del recorrido.

   El circulo (.timeline-image) ya existe en style.css: 80x80, blanco, con
   borde blanco de 5px. Aca solo se centra el numero y se le da vida al
   pasar por encima. */

.timeline > li .timeline-image {
    display: flex;
    align-items: center;
    justify-content: center;
    /* El color de fondo y el borde los pone style.css; se agrega la
       transicion para que el relleno del hover entre suave. */
    transition: background-color .35s ease, border-color .35s ease;
}

.al-step-num {
    font-family: 'Oswald', sans-serif;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    /* #00909e y no el celeste puro: sobre el circulo blanco, #01d1fe da
       1.8:1 de contraste y el numero no se leeria. Este llega a 3.8:1,
       que es el mismo que tenia el acento original de la plantilla. */
    color: #00909e;
    letter-spacing: 1px;
    transition: color .35s ease, transform .35s ease;
}

/* Al pasar por encima el circulo se pinta del celeste de marca y el numero
   pasa a blanco. Ahi si se usa el celeste puro: sobre el, el blanco da
   contraste de sobra. */
.timeline > li .timeline-image:hover {
    background-color: #01d1fe;
    border-color: #01d1fe;
}

.timeline > li .timeline-image:hover .al-step-num {
    color: #ffffff;
    transform: scale(1.12);
}

/* Perfil de aliados: lista de categorías en el lenguaje tipográfico de Drex,
   sin crear una tarjeta nueva ni agregar otro componente compartido. */
.al-profile-list {
    margin: 0;
    padding: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    list-style: none;
}

.al-profile-list li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    color: #000;
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.al-profile-list li::before {
    color: #00909e;
    content: "—";
    font-size: 14px;
}

/* Pantalla completa para las secciones de contenido. Oportunidad queda fuera
   a propósito: su timeline conectado necesita crecer según sus cinco pasos. */
@media only screen and (min-width: 881px) {
    #services,
    #works,
    #news,
    #profile,
    #contact {
        min-height: 100vh;
    }
}

/* La plantilla no trae una séptima imagen de sección. Perfil usa el mismo
   movimiento de sus fondos, con una clase propia para no mezclarlo con
   Contacto. */
.profile-img-container,
.profile-img-container.mobile {
    position: absolute !important;
    display: block;
    width: 0;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden;
    background: #fff;
    z-index: 99;
    transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97);
}

.profile-img-container .slide-img {
    position: absolute;
    left: -30vw;
    transition: 1s cubic-bezier(0.67, 0.02, 0.2, 0.97);
}

.page-loaded .profile-img-container .slide-img {
    left: -30vw;
}

.profile-img-container.img-poster {
    width: 100vw;
}

.page-loaded .profile-img-container.img-poster .slide-img {
    left: 0;
}

@media only screen and (max-width: 880px) {
    .profile-img-container.mobile {
        display: none;
    }

    .profile-img-container,
    .profile-img-container.img-poster {
        width: 100%;
    }

    .page-loaded .profile-img-container .slide-img,
    .page-loaded .profile-img-container.img-poster .slide-img {
        left: 0;
    }
}

@media only screen and (max-width: 640px) {
    .al-profile-list li {
        font-size: 16px;
    }
}

/* Quien tenga desactivadas las animaciones ve el cambio de color, que es
   la informacion, pero sin el movimiento. */
@media (prefers-reduced-motion: reduce) {
    .timeline > li .timeline-image,
    .al-step-num {
        transition: none;
    }
    .timeline > li .timeline-image:hover .al-step-num {
        transform: none;
    }
}

/* ── "Qué aporta cada lado": el gráfico de la sección Oportunidad ─────

   DONDE VIVE Y POR QUE.
   Este bloque es un elemento normal de la columna de contenido, no un
   fondo. Vale la pena dejar escrito por qué, porque el camino contrario
   se intentó a fondo y no funciona:

   el panel derecho de esta plantilla no es una columna, es un contenedor
   de fondo. Mide 100vw aunque solo se vea su franja derecha, crece desde
   la izquierda con una animación, y lleva encima una capa oscura a
   pantalla completa (.overlay:before, z-index 1). Un gráfico ahí adentro
   tiene que pelear contra las tres cosas a la vez, y cada arreglo
   dependía del ancho de pantalla: andaba a 1020px y desaparecía a
   pantalla completa.

   Acá no hay nada que pelear. El bloque ocupa el ancho de su columna y
   se ve siempre, en cualquier pantalla.

   QUE MUESTRA.
   La sección dice dos cosas. Una es la secuencia de cinco pasos, y de
   esa ya se encarga el timeline de más abajo. La otra es que cada parte
   aporta lo suyo y que de ahí sale una respuesta más completa para el
   cliente -- eso es lo que dibuja este gráfico: dos columnas que se
   juntan en una sola línea. */

.al-aporte {
    background: #09090b;
    border: 1px solid #27272a;
    border-radius: 16px;
    padding: clamp(24px, 3.5vw, 44px);
    color: #a1a1aa;
}

.al-aporte__eyebrow {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #01d1fe;
    margin-bottom: clamp(20px, 3vw, 32px);
}

.al-aporte__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(24px, 4vw, 48px);
}

/* La línea que separa los dos lados. No es un borde del contenedor: va
   sobre la columna de Joik para que el espacio del gap quede repartido
   parejo a los dos lados de la línea. */
.al-aporte__side--joik {
    border-left: 1px solid #27272a;
    padding-left: clamp(24px, 4vw, 48px);
}

/* Estado de reposo de la entrada: cada lado llega desde su borde. El
   movimiento no es adorno, dice de dónde viene cada aporte. */
.al-aporte__side {
    opacity: 0;
    transition:
        opacity 0.55s ease var(--al-delay, 0s),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--al-delay, 0s);
}

.al-aporte__side--vos {
    transform: translateX(-16px);
}

.al-aporte__side--joik {
    transform: translateX(16px);
    --al-delay: 0.1s;
}

.al-aporte.is-visible .al-aporte__side {
    opacity: 1;
    transform: none;
}

.al-aporte__side-title {
    font-family: 'Oswald', sans-serif;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 600;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #fff;
    margin: 0 0 18px;
}

.al-aporte__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.al-aporte__item {
    padding: 12px 0;
    border-top: 1px solid rgba(39, 39, 42, 0.8);
}

.al-aporte__item:first-child {
    border-top: 0;
    padding-top: 0;
}

.al-aporte__label {
    display: block;
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.03em;
    color: #01d1fe;
    margin-bottom: 4px;
}

.al-aporte__text {
    display: block;
    font-size: 14px;
    line-height: 1.6;
    color: #a1a1aa;
}

/* Las dos ramas que se juntan. Las líneas crecen desde los bordes hacia
   adentro y se encuentran en el punto del medio; el punto aparece
   después, cuando ya llegaron las dos. */
.al-aporte__merge {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: clamp(26px, 4vw, 40px) 0 clamp(18px, 2.5vw, 26px);
}

.al-aporte__merge-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(1, 209, 254, 0.45));
    transform: scaleX(0);
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

.al-aporte__merge-line:first-child {
    transform-origin: left center;
}

/* La segunda va espejada: crece desde el borde derecho hacia el centro,
   y el degradé también se da vuelta para que lo claro quede del lado del
   punto en los dos casos. */
.al-aporte__merge-line:last-child {
    transform-origin: right center;
    background: linear-gradient(270deg, transparent, rgba(1, 209, 254, 0.45));
}

.al-aporte.is-visible .al-aporte__merge-line {
    transform: scaleX(1);
}

.al-aporte__merge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #01d1fe;
    transform: scale(0);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1s;
}

.al-aporte.is-visible .al-aporte__merge-dot {
    transform: scale(1);
    animation: alAporteLatido 3.2s ease-in-out 1.4s infinite;
}

@keyframes alAporteLatido {
    0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(1, 209, 254, 0); }
    18% { box-shadow: 0 0 0 6px rgba(1, 209, 254, 0.18); }
}

.al-aporte__resultado {
    margin: 0;
    font-size: clamp(15px, 1.6vw, 17px);
    line-height: 1.6;
    color: #e4e4e7;
    text-align: center;
    max-width: 62ch;
    margin-inline: auto;
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 0.6s ease 1.1s,
        transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.1s;
}

.al-aporte.is-visible .al-aporte__resultado {
    opacity: 1;
    transform: none;
}

/* En pantalla angosta los dos lados no entran uno al lado del otro. Se
   apilan, y la línea divisoria pasa de vertical a horizontal para seguir
   marcando que son dos aportes distintos. */
@media only screen and (max-width: 880px) {
    .al-aporte__cols {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .al-aporte__side--joik {
        border-left: 0;
        border-top: 1px solid #27272a;
        padding-left: 0;
        padding-top: 28px;
    }

    /* Apiladas, entrar cada una desde su costado se lee raro: quedan
       cruzándose. Suben las dos. */
    .al-aporte__side--vos,
    .al-aporte__side--joik {
        transform: translateY(14px);
    }
}

/* Sin animación para quien la tenga desactivada: el gráfico aparece
   directamente en su estado final, que es la información. El movimiento
   es decoración. */
@media (prefers-reduced-motion: reduce) {
    .al-aporte__side,
    .al-aporte__resultado {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .al-aporte__merge-line {
        transform: scaleX(1);
        transition: none;
    }

    .al-aporte__merge-dot,
    .al-aporte.is-visible .al-aporte__merge-dot {
        transform: scale(1);
        transition: none;
        animation: none;
    }
}