/* Ajustes propios sobre el diseño original de Elementor.
   Van en un archivo aparte para que sobrevivan a un re-clon del WordPress:
   tools/clean.py los inyecta en todas las páginas. */

/* 1. Switcher de idiomas: ahora son links reales a /es/ /it/ /pt/ /fr/ (ver
      tools/i18n.py). Estos estilos los inyectaba el JS de GTranslate, que se
      eliminó junto con el widget; el original los dejaba con gap:4px, casi
      pegados, y acá van con 16px. */
.gtranslate_wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.gtranslate_wrapper .glink {
    background: none;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px;
    text-decoration: none;
    transition: color .3s ease;
}

.gtranslate_wrapper .glink:hover {
    color: #fff;
}

/* el idioma en el que estás */
.gtranslate_wrapper .glink.gt-current-lang {
    color: #fff;
    font-weight: 700;
}

/* 2. Separar los botones de audiencia (For anyone / Recruiters / …)
      del párrafo que muestran debajo. */
.categories {
    margin-bottom: 24px;
}

/* 3. El texto de "Learn a little about me" queda siempre visible,
      sin depender del clic en el título. */
.hidden-text {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* 3b. Con el texto siempre visible, el alto fijo de la sección About me
      (min-height 90vh en el contenedor y 72vh en el interno, pensados para el
      estado colapsado) dejaba mucho aire de sobra: que tome el alto real. */
.elementor-8843 .elementor-element.elementor-element-15e6f79,
.elementor-8843 .elementor-element.elementor-element-86e4a5b {
    --min-height: auto;
}

/* 4. Aparición unificada (ver custom/overrides.js).
      El estado oculto vive detrás de .rv-armed, que agrega el JS: sin JS no hay
      nada invisible. La transición va solo en .rv-in para no animar el primer
      pintado. */
.rv-armed [data-rv] {
    opacity: 0;
    transform: translateY(18px);
}

/* Las secciones cuyo fondo hace parallax (background-attachment: fixed) aparecen
   sólo con opacidad: cualquier transform en el elemento —o un will-change, que
   también crea containing block— cancela ese parallax. Por eso acá no hay
   will-change en ninguna parte. */
.rv-armed [data-rv].rv-op {
    transform: none;
}

.rv-armed [data-rv].rv-in {
    opacity: 1;
    transform: none;
    transition: opacity .62s cubic-bezier(.22, 1, .36, 1),
                transform .62s cubic-bezier(.22, 1, .36, 1);
}

/* 5. Páginas de proyecto: el título y el subtítulo estaban en position:fixed de
      forma permanente, así que el resto de la página les pasaba por encima y el
      subtítulo quedaba tapado. Vuelven al flujo normal.

      Va en static y no en relative a propósito: Elementor les había dejado
      offsets del modo fijo (top:-210px en el título, top:-110px en el subtítulo)
      que con relative seguían corriendo los bloques hacia arriba, abriendo 100px
      de hueco entre el año y el subtítulo y despegando todo de la imagen.

      Los selectores repiten .e-con para empatar la especificidad de Elementor
      (.elementor-NNNN .elementor-element.elementor-element-XXX) y ganar por orden. */
.elementor-element.elementor-element-05af3b9.e-con,
.elementor-element.elementor-element-b08c4de.e-con,
.elementor-element.elementor-element-d798f1c.e-con,
.elementor-element.elementor-element-e7a61aa.e-con,
.elementor-element.elementor-element-6b9b366.e-con,
.elementor-element.elementor-element-d180a22.e-con,
.elementor-element.elementor-element-8a7f5d2.e-con,
.elementor-element.elementor-element-fb7bd5d.e-con,
.elementor-element.elementor-element-3201b1c.e-con,
.elementor-element.elementor-element-410e14d1.e-con,
.elementor-element.elementor-element-2e8bd88.e-con,
.elementor-element.elementor-element-dadc164.e-con {
    --position: static;
}

/* 6. La flecha animada de "Learn a little about me" indicaba que el texto se
      desplegaba al hacer clic. Ahora está siempre visible, así que sobra. */
.elementor-8843 .elementor-element.elementor-element-7c502b5 {
    display: none;
}

/* 7. Sidebar: medida real en vez de proporcional.
      Estaba en 20vw, así que en pantallas grandes ocupaba 300 o 400px para un nav
      que necesita 160. Eso forzaba un margen derecho enorme en el contenido para
      esquivarlo, y lo dejaba muy asimétrico contra el izquierdo. */
#sidebar {
    width: 200px;
    /* la caja del sidebar se apoyaba sobre el contenido y se comía los clics:
       sólo los links reciben el puntero */
    pointer-events: none;
}

#sidebar a {
    pointer-events: auto;
}

/* este id quedó puesto sobre el contenedor del nav (no sobre el contenido de la
   página) y arrastraba un margin-right de 20vw */
#sidebar #main-content {
    margin-right: 0;
}

/* los <a> medían todo el ancho del sidebar aunque el texto estuviera pegado a la
   derecha: por eso había una franja invisible clickeable sobre el contenido */
#sidebar .elementor-nav-menu > li {
    display: flex;
    justify-content: flex-end;
}

/* 8. El nav de los proyectos venía en 16px y el de la home en 20px: se igualan. */
#sidebar .elementor-nav-menu .elementor-item {
    width: auto;
    font-size: 20px;
}

/* 9. Contraste del nav lateral según el fondo (ver custom/overrides.js).
      Los valores cumplen el mínimo AA de 4,5:1 para texto de 20px en los dos casos:
      antes era blanco al 35% sobre #131313, que daba 3,2:1 y no llegaba. */
#sidebar .elementor-nav-menu .elementor-item {
    color: rgba(255, 255, 255, 0.5);        /* 5,2:1 sobre el fondo oscuro */
    transition: color .25s ease;
}

#sidebar .elementor-nav-menu .elementor-item:hover,
#sidebar .elementor-nav-menu .elementor-item.elementor-item-active {
    color: #ffffff;
}

/* sobre secciones claras */
#sidebar .elementor-nav-menu .elementor-item.sobre-claro {
    color: rgba(0, 0, 0, 0.55);             /* 5,7:1 sobre #FAFAFA */
}

#sidebar .elementor-nav-menu .elementor-item.sobre-claro:hover,
#sidebar .elementor-nav-menu .elementor-item.sobre-claro.elementor-item-active {
    color: #111111;
}

/* 10. El header (logo y switcher de idiomas) tiene el mismo problema que el nav:
       es fijo y sobre las secciones claras quedaba blanco sobre blanco.
       Usa el mismo mecanismo y la misma clase. */
.gtranslate_wrapper .glink.sobre-claro {
    color: rgba(0, 0, 0, 0.65);             /* 6,9:1 sobre #FAFAFA */
}

.gtranslate_wrapper .glink.sobre-claro:hover,
.gtranslate_wrapper .glink.gt-current-lang.sobre-claro {
    color: #111111;
}

/* El logo es un PNG blanco puro y no existe una versión negra, así que se invierte:
   blanco → negro exacto, conservando la forma y la transparencia. */
.elementor-location-header img.sobre-claro {
    filter: invert(1);
}

.elementor-location-header .elementor-menu-toggle.sobre-claro {
    color: #111111;
}

.elementor-location-header img,
.elementor-location-header .elementor-menu-toggle {
    transition: filter .25s ease, color .25s ease;
}

/* 11. El switcher venía precedido por un <a> vacío de 60px que empujaba las siglas
       fuera de la pantalla. No está en el HTML: lo crea el navegador. Elementor
       envuelve ese bloque del header en un contenedor-link (<a href="#home">) y
       adentro están las siglas, que también son <a>. Como los links no se pueden
       anidar, el parser parte el anchor y deja un clon vacío.

       Además de descolocar el header, ese clon era una franja invisible de 60px que
       al tocarla saltaba a #home. */
.gtranslate_wrapper > a:empty {
    display: none;
}

/* 12. Arreglos de mobile.

      El switcher de idiomas se encogía a 71px por el flex del header, pero sus cinco
      siglas necesitan ~150px: se desbordaban hasta la posición 497 en una pantalla de
      375 y se montaban sobre el ícono de menú. Se le impide encogerse y se ajusta el
      gap para que entre cómodo junto al logo y al menú. */
@media (max-width: 768px) {
    .elementor-location-header .elementor-widget-shortcode {
        flex: 0 0 auto;
        width: auto;
    }

    .gtranslate_wrapper {
        flex: 0 0 auto;
        gap: 10px;
    }

    .gtranslate_wrapper .glink {
        font-size: 15px;
    }

    /* El ícono de menú quedaba con 8px de ancho y se salía 5px de la pantalla: el
       contenedor-link vacío del header se quedaba con el espacio. Se le da al menú su
       ancho real y se separa de las siglas. */
    .elementor-location-header .elementor-widget-nav-menu {
        flex: 0 0 auto;
    }

    .elementor-location-header .elementor-widget-shortcode {
        margin-right: 14px;
    }

    /* El hero de los proyectos venía con padding 0 en mobile: el título, el año y el
       subtítulo quedaban pegados al borde, desalineados del resto del contenido, que
       usa 20px. */
    .elementor-element.elementor-element-05af3b9.e-con,
    .elementor-element.elementor-element-b08c4de.e-con,
    .elementor-element.elementor-element-d798f1c.e-con,
    .elementor-element.elementor-element-e7a61aa.e-con,
    .elementor-element.elementor-element-6b9b366.e-con,
    .elementor-element.elementor-element-d180a22.e-con,
    .elementor-element.elementor-element-8a7f5d2.e-con,
    .elementor-element.elementor-element-fb7bd5d.e-con,
    .elementor-element.elementor-element-3201b1c.e-con,
    .elementor-element.elementor-element-410e14d1.e-con,
    .elementor-element.elementor-element-2e8bd88.e-con,
    .elementor-element.elementor-element-dadc164.e-con {
        --padding-left: 20px;
        --padding-right: 20px;
    }

    /* Los botones de audiencia quedaban a 3px entre sí: en mobile el CSS original les
       saca el padding lateral y sólo los separaba el espacio entre palabras. */
    .categories {
        display: flex;
        flex-wrap: wrap;
        gap: 6px 18px;
    }
}

/* 13. About me: el texto se apoya sobre el collage de fotos y en las zonas claras de
       la imagen quedaba con 1,84:1 de contraste, ilegible. La sección declara
       --overlay-opacity: 0.6 pero Elementor nunca generó el elemento de overlay, así
       que no oscurecía nada: se agrega la capa por CSS.

       Con 70% de negro las zonas más claras de la foto pasan de 1,84:1 a 10:1 y el
       collage se sigue viendo, más apagado. El mínimo AA es 4,5:1. */
.elementor-8843 .elementor-element.elementor-element-15e6f79::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    pointer-events: none;
}

/* el contenido por encima de la capa */
.elementor-8843 .elementor-element.elementor-element-15e6f79 > * {
    position: relative;
    z-index: 1;
}

/* 14. BYMA: mientras no estén las imágenes definitivas, se ocultan las dos secciones
       de imagen que venían de la plantilla (eran capturas de otro proyecto). */
body.page-byma .elementor-element-7abe076,
body.page-byma .elementor-element-31683b8 {
    display: none;
}