* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Arial', sans-serif;
    /* outline: 1px solid red; */

}

:root {
    --e-global-color-primario: #024059;
    --e-global-color-secundario: #9b4f29;
    --e-global-color-Terceario: #4c5b6c;
    --e-global-color-Cuartiario: #4c5b6c;
    --e-global-color-light: #3c728c;
    --e-global-color-primario-light: #87ccee;
    --e-global-color-text: #7A7A7A;
    --e-global-color-e88c6d4: #A3A3A3;
    --e-global-color-04ef38f: #494949;
    --e-global-color-neutral-light: #dcdcdc;
    --e-global-color-fff: #ffffff;
    --e-global-color-btn: #c36334;
    --e-global-color-btn-hover: #c36334;

    --e-global-gradient: linear-gradient(to bottom right,
            #2c485e 30%,
            #4c5b6c 60%,
            #6c7594 100%);

    --e-global-gradient-footer: linear-gradient(to bottom,
            #2c485e 0%,
            #4c5b6c 30%,
            #6c7594 100%);
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    text-align: left;
    background-color: #fff;
}

.container-section {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.container {
    padding: 0.5rem 1rem !important;
    margin-left: 160px !important;
    margin-right: 159px !important;
}

.nav-with-background {
    background-image: url('../img/cabecera-sya.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
    padding-top: 0px;
}

.nav-with-background::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.navbar-collapse,
.navbar-brand {
    z-index: 2;
}

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 35px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.nav-menu {
    display: flex;
    gap: 15px;
    align-items: center;
}

.nav-link.active {
    color: var(--e-global-color-primario-light) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--e-global-color-primario-light);
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 17px;
    color: var(--e-global-color-neutral-light);
}

.navbar-dark .navbar-nav .nav-link:not(.btn):hover {
    color: var(--e-global-color-primario-light);
}

.navbar-dark .navbar-toggler {
    border-color: none !important;
    border: none;
    font-size: 17px;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.nav__logo {
    width: 140px;
}

.button-base {
    background-color: var(--e-global-color-primario);
    color: var(--e-global-color-fff);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 5px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 210px;
}

.button-base:hover {
    color: var(--e-global-color-e88c6d4);
    background-color: var(--e-global-color-primario);
}

.parallax {
    background-image: url("../img/bg-syalegal.jpg");
    height: 100vh;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
    /* Prefijos para navegadores antiguos */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    /* Solución para navegadores modernos */
    background-attachment: fixed;
}


.parallax-optiones {
    height: 100vh;
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    
    /* Prefijos para navegadores antiguos */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;

    /* Solución para navegadores modernos */
    background-attachment: fixed;
}

/* Solución específica para Safari en iPad/iPhone */
@supports (-webkit-touch-callout: none) {
    .parallax,
    .parallax-optiones {
        background-attachment: scroll;
    }
}

.parallax-optiones.bg-nosotros {
    background-image: url("../img/bg-nosotros.jpg");
}

.parallax-optiones.bg-especialidad {
    background-image: url("../img/bg-especialidades.jpg");
}

.parallax-optiones.bg-actualidad {
    background-image: url("../img/bg-noticia.jpg");
}

.parallax-optiones.bg-actualidad-detalle {
    background-image: url("../img/bg-noticia-detalle.jpg");
}


.parallax::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.parallax-optiones::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.parallax-content,
.header-content {
    position: relative;
    z-index: 2;
    padding-top: 106.5px;
}

.parallax-container {
    max-width: 51%;
}

.parallax-content-text {
    display: flex;
    align-items: center;
    height: calc(100vh - 106.5px);
}

.parallax-content-text-optiones {
    display: flex;
    align-items: center;
    height: 84.5vh;
}

.parallax-title-optiones h1 {
    font-family: "Poppins", sans-serif;
    color: var(--e-global-color-neutral-light);
    font-weight: 700;
    font-size: 3.2rem;
    line-height: 1.40;
    letter-spacing: 0.01em;
    text-align: center;
}

.parallax-separador-line {
    width: 180px;
    height: 3px;
    margin-left: auto;
    margin-bottom: 40px;
    margin-right: auto;
    background: var(--e-global-color-btn-hover);
}

.parallax-lema-optiones h2 {
    text-align: center;
    font-size: 15px;
    color: var(--e-global-color-neutral-light);
    font-weight: 400;
    letter-spacing: 1px;
}

.parallax-color-text {
    color: var(--e-global-color-secundario);
}

.subheading {
    font-size: 22px;
    font-weight: 400;
    font-style: normal;
}

.subheading-text-dinamic {
    font-size: 35px;
    font-weight: 700;
    color: var(--e-global-color-neutral-light);
}

.subtitle {
    text-align: center;
    font-size: 2.5rem;
    font-family: 'BakerMcKenzieBernini';
    font-weight: 700;
    font-style: normal;
    color: var(--e-global-color-neutral-light);
}

.parallax-parrafo {
    font-size: 19px;
    color: var(--e-global-color-neutral-light);
    text-align: justify;
}


/* secction-noticias */
.noticias-section {
    min-height: 100vh;
    background-color: var(--e-global-color-neutral-light);
}

.noticias-title {
    text-align: center;
    margin-bottom: 50px;
}

.noticias-title h2 {
    font-size: 25px;
    color: var(--e-global-color-primario);
    margin-bottom: 15px;
}

.noticias-destalle {
    width: 100%;
    display: flex;
    justify-content: center;
}

.noticias-destalle p {
    width: 660px;
    color: var(--e-global-color-text);
    font-size: 14px;
    line-height: 1.6;
}

.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 30px;
    margin-top: 30px;
    margin-bottom: 80px;
}

.article-news {
    height: 300px;
    position: relative;
}

.news_full {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
}

.container_news {
    width: 100%;
    height: 100%;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
}

.article_title_news {
    width: calc(100% - 30px);
    max-height: 350px;
    background-color: var(--e-global-color-neutral-light);
    position: absolute;
    bottom: -69px;
    padding: 20px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    -moz-transition: color .2s ease-in;
    -o-transition: color .2s ease-in;
    -webkit-transition: color .2s ease-in;
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
    overflow: hidden;
    border-top: 5px solid var(--e-global-color-primario);
}

.article_label_news {
    font-weight: 400;
    font-size: 12px;
    line-height: 20px;
    color: #475467;
    position: relative;
    z-index: 2;
    padding-bottom: 10px;
}

.article_title_news_title {
    /* font-family: 'Inter'; */
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 22px;
    color: #475467;
    position: relative;
    z-index: 2;
    height: 80px;
}

.article_subtitle_news_title {
    font-weight: 100;
    font-size: 14px;
    line-height: 20px;
    color: var(--e-global-color-neutral-light);
    background-color: var(--e-global-color-secundario);
    padding-left: 10px;
    padding-right: 10px;
    width: fit-content;
    border-radius: 16px;
    padding-top: 3px;
    padding-bottom: 3px;
    margin-top: 16px;
    margin-bottom: 16px;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}


.article_title_news::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--e-global-color-primario);
    transition: top 0.5s ease;
    z-index: 1;
}

.article_title_news:hover::before {
    top: 0;
    cursor: pointer;
}

.article-news:hover {
    cursor: pointer;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
}

.article-news:hover .article_title_news::before {
    top: 0;
}

.article-news:hover .article_label_news {
    color: white;
    transition: color 0.3s ease;
}

.article-news:hover .article_title_news_title {
    color: white;
    transition: color 0.3s ease;
}

.buton-leer-mas {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

/* sobre-nosotros */
.background-overlay {
    background-image: url("../img/fondo-sya2.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.sobre-nosotros {
    display: flex;
    gap: 20px;
    height: 590px;
}

.descripcion_socio_fundador {
    width: 740px;
    padding-left: 35px;
    text-align: center;
    /* padding: 30px; */
}

.text-socio-firma {
    margin-top: -5px;
    font-size: 15px;
}

.firma-fundador {
    color: var(--e-global-color-neutral-light);
}

.title-nosotros {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    color: var(--e-global-color-neutral-light);
}

.subtitle-nosotros {
    font-size: 35px;
    font-weight: 700;
    line-height: 37px;
    letter-spacing: -1px;
    color: var(--e-global-color-secundario);
    padding-bottom: 18px;
}

.descripcion-parrafo {
    font-size: 20px;
    color: var(--e-global-color-neutral-light);
    text-align: justify;
    line-height: 28px;
}

.imagen_socio_fundador {
    max-width: 950px;
    overflow: hidden;
    padding-bottom: 55px;
}

.imagen_socio_fundador img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
}

.button-base-secondary {
    background-color: var(--e-global-color-secundario);
    color: var(--e-global-color-neutral-light);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 5px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 210px;
}

.button-referencia {
    background-color: var(--e-global-color-btn);
    color: var(--e-global-color-fff);
    border: none;
    padding: 0.5rem 1rem;
    cursor: pointer;
    border-radius: 5px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* max-width: 210px; */
}

.button-base-secondary:hover,
.button-referencia:hover {
    box-shadow: 0 4px 11px rgba(255, 105, 0, .35);
    border-color: transparent;
    color: var(--e-global-color-neutral-light);
    background-color: var(--e-global-color-btn-hover);
}


/* area-especializacion */
.especilidades-section {
    background-color: var(--e-global-color-neutral-light);
}

.area-especializacion {
    display: flex;
    gap: 20px;
}

.area-informativo {
    width: 100%;
    padding: 10px;
}

.area-informativo .title-especializacion {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    color: var(--e-global-color-btn);
}

.area-informativo .subtitle-especializacion {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1px;
    color: var(--e-global-color-primario);
}

.area-informativo .descripcion-parrafo-especializacion {
    font-size: 20px;
    color: var(--e-global-color-Terceario);
    text-align: justify;
}

.especializacion-button {
    width: 30%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.card-especializacion {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card {
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    border-radius: 10px;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    border-radius: 10px;
}

.card:hover {
    cursor: pointer;
    /* transition: all 0.2s ease-in-out; */
    transition: transform 0.2s ease-in-out;
    transform: translateY(-5px);
}

.card h2 {
    color: var(--e-global-color-neutral-light);
    z-index: 1;
    font-size: 25px;
    text-align: center;
    font-weight: 500;
}


/* paticipacion-tv */
.tv-section {
    padding-top: 30px;
    padding-bottom: 70px;
    background-image: url("../img/fondo-sya2.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}


.title-tv {
    font-size: 15px;
    font-weight: 500;
    font-style: normal;
    color: var(--e-global-color-neutral-light);
}

.subtitle-tv {
    font-size: 45px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1px;
    color: var(--e-global-color-btn);
}

.tv-videos {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.video-item:hover {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    transform: translateY(-5px);
}


.video-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.video-responsive iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-thumbnail {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.video-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

.video-thumbnail .play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-thumbnail .play-icon::before {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 15px solid white;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    transform: translateX(3px);
}

.video-thumbnail:hover .play-icon {
    background-color: rgba(0, 0, 0, 0.7);
}


/* confianza */
.confianza-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 15px;
}

.confianza-img {
    max-width: 70px;
}

.confianza-img img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
}

.confianza-container h2 {
    text-align: center;
    font-size: 52px;
    font-weight: 700;
    line-height: 1.2em;
    letter-spacing: -1px;
    color: var(--e-global-color-secundario);
}

.confianza-container p {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    color: var(--e-global-color-Terceario);
}

.confianza-numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 10px;
    margin-top: 30px;
}

.confianza-numeros div {
    text-align: center;
}

.confianza-numeros div h2 {
    font-size: 60px;
    color: var(--e-global-color-primario);
    margin-bottom: 0;
}

.confianza-numeros div span {
    font-size: 14px;
    color: var(--e-global-color-Cuartiario);
}



/* footer */
.contactanos {
    width: 100%;
    padding-top: 80px;
    padding-bottom: 40px;

    background-image: url("../img/fondo-sya2.jpg");
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.container-contactanos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    width: 100%;
}

.logo-contactos,
.hora-atencion-contactos,
.dudas-contactos {
    padding-left: 45px;
    padding-right: 45px;
}

.logo-contactos,
/* .hora-atencion-contactos, */
.dudas-contactos {
    display: flex;
    flex-direction: column;
    gap: 25px;
    color: var(--e-global-color-neutral-light);
}

.logo-contactos p {
    text-align: justify;
}

/* .hora-atencion-contactos div {
    padding-left: 25px;
} */

.hora-atencion-contactos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--e-global-color-neutral-light);
}


.container-title {
    height: 65px;
    display: flex;
    align-items: end;
}

.title-atencion-footer {
    font-size: 22px;
    color: var(--e-global-color-btn-hover);
    /* margin-bottom: 26px; */
}


/* .hora-atencion-contactos h2,
.dudas-contactos h2 {
    font-size: 22px;
    color: var(--e-global-color-btn-hover);
} */

/* .dias-abierto-contactos {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
} */

/* .dias-abierto-contactos h2 {
    font-size: 18px;
} */

.dias-abierto-contactos p {
    margin: 0;
    /* padding-left: 15px; */
}

.dudas-container-contactos {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.item-container-contactos {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.item-container-contactos a {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
    gap: 25px;
}

.item-container-contactos>a>i {
    margin: 0;
}

.item-container-contactos>a>i,
.item-redes-sociales-contactos>a>i {
    font-size: 20px;
    color: var(--e-global-color-neutral-light);
}

.item-redes-sociales-contactos {
    display: flex;
    width: 100%;
    gap: 10px;
    height: 50px;
}

.item-redes-sociales-contactos a i {
    color: var(--e-global-color-neutral-light);
    font-size: 26px;
}

.footer {
    width: 100%;
    color: #c7c7c7;
}

.footer__container {
    margin: 0 auto;
    overflow: hidden;
    padding-top: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__container h2 {
    text-align: center;
    font-size: 0.9rem;
}



/* pages-nosotros */
.container-spacing {
    padding-top: 80px;
    padding-bottom: 80px;
}

.nosotros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.imagen-equipo-sya img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
}

.descripcion-equip-sya {
    display: flex;
    align-items: center;
}

.descripcion-equip-sya h2 {
    font-family: "Poppins", sans-serif;
    ;
    font-weight: 300;
    font-size: 2rem;
    line-height: 1.40;
    letter-spacing: 0.02em;
    margin-bottom: 1.5rem;
    color: var(--e-global-color-btn);
}

.descripcion-equip-sya p {
    font-size: 15px;
    line-height: 23px;
    color: var(--e-global-color-Terceario);
}

.listo-atencion {
    /* background: var(--e-global-gradient),
        url("../img/justice-bg.png"); */
    background-image: url("../img/fondo-sya2.jpg");
    background-size: cover;
    background-position: center;
    background-blend-mode: overlay;
}

.atencion-content-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 40px 20px;
    text-align: center;
}

.atencion-content-section h2 {
    font-size: 2.5rem;
    color: var(--e-global-color-btn);
    margin-bottom: 20px;
}

.atencion-content-section p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--e-global-color-neutral-light);
    max-width: 900px;
    margin: 0 auto;
}


.consultation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background-color: #f5f5f5;

    background-image: url("../img/justice-bg.png");
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;

    border-radius: 16px;
    padding: 30px 20px;
    position: relative;
    overflow: hidden;
    height: 250px;
    justify-content: center;
    align-items: center;
}

.consultation-title h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1em;
    color: var(--e-global-color-primario);
    padding-left: 40px;
}

.consultation-description {
    font-size: 1.1rem;
    line-height: 1.5;
    color: #333;
    position: relative;
}


/* pages-especialidades */
.intro-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 20px;
    margin: 0 auto;
    text-align: center;
}

.blue-line {
    width: 100px;
    height: 4px;
    background-color: var(--e-global-color-btn);
    margin: 0 auto 30px;
}

.main-title {
    font-size: 2.2rem;
    font-weight: bold;
    color: var(--e-global-color-primario);
    line-height: 1.3;
    margin-bottom: 25px;
}

.description {
    font-size: 1.05rem;
    color: #555;
    max-width: 900px;
    margin: 0 auto;
}


.grid-container {
    margin-top: 60px;
    margin-bottom: 60px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    justify-content: center;
}

.card-container {
    perspective: 1000px;
}

.card {
    width: 100%;
    height: 300px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease-in-out;
}

.card.flipped {
    transform: rotateY(180deg);
}

.card-container:hover .card {
    transform: rotateY(180deg);
    transition: transform 0.9s ease-in-out;
}

.card-front,
.card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px;
    padding: 20px;
    font-size: 18px;
    font-weight: bold;
}

.card-front {
    background-size: cover;
    background-position: center;
    color: white;
}

.card-front h2 {
    z-index: 1;
}


.card-container:nth-child(1) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_penal.webp');
}

.card-container:nth-child(2) .card-front {
    background-image: url('../img/especialidades/area_esp_litigio_arbitraje.webp');
}

.card-container:nth-child(3) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_extincio_dominio.webp');
}

.card-container:nth-child(4) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_corporativo.webp');
}

.card-container:nth-child(5) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_laboral.webp');
}

.card-container:nth-child(6) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_tributario.webp');
}

.card-container:nth-child(7) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_publico.webp');
}

.card-container:nth-child(8) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_ambiental.webp');
}

.card-container:nth-child(9) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_compliance.webp');
}

.card-container:nth-child(10) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_migratorio.webp');
}

.card-container:nth-child(11) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_minero.webp');
}

.card-container:nth-child(12) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_familiar.webp');
}

.card-container:nth-child(13) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_administrativo.webp');
}

.card-container:nth-child(14) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_politicas_pub.webp');
}

.card-container:nth-child(15) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_prevencion_gestion.webp');
}

.card-container:nth-child(16) .card-front {
    background-image: url('../img/especialidades/area_esp_derecho_diagnostico_proyectos.webp');
}

.card-back {
    background: var(--e-global-gradient);
    color: var(--e-global-color-neutral-light);
    transform: rotateY(180deg);
    z-index: 1;
}

/* page-actualidad */
.page-actualidad {
    margin-bottom: 80px;
}


/* Whatsapp */
.float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 60px;
    right: 30px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 100;
}

.float:hover {
    text-decoration: none;
    color: #25d366;
    background-color: #fff;
}

.my-float {
    margin-top: 16px;
}


/* page-actualidad-detalles */
.actualidad-detalles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.imagen-actualidad-detalle {
    display: flex;
    justify-content: center;
}

.imagen-actualidad-detalle figure {
    max-width: 550px;
    max-height: 550px;
}

.imagen-actualidad-detalle figure img {
    width: 100%;
    height: 100%;
    object-fit: fill;
    border-radius: 10px;
}

.actualidad-detalles .descripcion-actualidad-detalle h1 {
    color: var(--e-global-color-btn);
}

.actualidad-detalles .descripcion-actualidad-detalle p {
    color: var(--e-global-color-04ef38f);
}

@media (max-width: 768px) {
    .container {
        padding: 0.5rem 1rem !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .parallax {
        background-position: right -420px center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .parallax-content, .header-content{
        padding-top: 0px;
    }

    .navbar {
        background-image: url("../img/cabecera-sya.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        padding-top: 0px;
    }

    .nav__logo {
        width: 128px;
    }

    .navbar-toggler-icon {
        font-size: 20px;
    }

    /* parallax */
    .parallax-container {
        max-width: 100%;
    }

    .subheading {
        font-size: 20px;
    }

    .subheading-text-dinamic {
        font-size: 40px;
    }

    .subtitle {
        font-size: 2.3rem;
    }

    .parallax-parrafo {
        font-size: 15px;
    }

    /* section-actualidad */
    .noticias-grid {
        gap: 90px;
    }

    /* sobre-nosotros */
    .background-overlay {
        background-position: center top;
    }

    .imagen_socio_fundador {
        order: 2;
    }

    .sobre-nosotros {
        flex-direction: column;
        height: 100%;
    }

    .descripcion_socio_fundador {
        width: auto;
        padding-left: 0px;
    }

    /* especializacion */
    .area-especializacion {
        flex-direction: column;
    }

    .area-informativo {
        width: 100%;
    }

    .area-informativo .subtitle-especializacion {
        font-size: 40px;
        font-weight: 700;
    }

    .especializacion-button {
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
    }

    .area-informativo .descripcion-parrafo-especializacion {
        font-size: 17px;
    }

    /* confianza */
    .confianza-container h2 {
        font-size: 38px;
    }

    .confianza-container p {
        font-size: 18px;
    }

    /* footer */
    .container-contactanos {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .logo-contactos{
        padding-left: 0px;
        padding-right: 0px;
    }

    .item-redes-sociales-contactos {
        padding-top: 40px;
        justify-content: center;
    }

    .item-redes-sociales-contactos a i {
        font-size: 40px;
    }

    /* pages-nosotros */
    .nosotros-grid,
    .consultation-container {
        width: 100%;
        height: auto;
        grid-template-columns: 1fr;
    }

    .imagen-equipo-sya {
        order: 2;
    }

    .consultation-title h2 {
        padding-left: 0px;
        text-align: center;
    }

    .consultation-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .card-container:active .card {
        transform: rotateY(180deg);
    }

    /* page-actualidad */
    .page-actualidad {
        margin-bottom: 20px;
    }

    /* page-actualidad-detalles */
    .actualidad-detalles {
        grid-template-columns: 1fr;
    }
}

@media screen and (min-width: 430px) and (max-width: 481px) {
    .container {
        /* max-width: 500px; */
        padding: 0.5rem 1rem !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media screen and (min-width: 769px) and (max-width: 820px) {
    .container {
        max-width: 900px;
        padding: 0.5rem 1rem !important;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }

    .navbar {
        background: var(--e-global-gradient) !important;
        padding-top: 0px;
    }

    .nav__logo {
        width: 128px;
    }

    .navbar-toggler-icon {
        font-size: 20px;
    }

    .parallax {
        height: 80vh;
    }

    .parallax-container {
        max-width: 80%;
    }

    .parallax-content-text {
        height: 75vh;
    }

    /* sobre-nosotros */
    .sobre-nosotros {
        flex-direction: column;
    }

    .imagen_socio_fundador {
        max-width: 900px;
        justify-content: center;
    }

    .descripcion_socio_fundador {
        order: -1;
        margin-bottom: 25px;
    }

    /* footer */
    .hora-atencion-contactos div {
        padding-left: 15px;
    }

    .dias-abierto-contactos h2 {
        font-size: 15px;
    }

    .dias-abierto-contactos p {
        font-size: 14px;
    }

    .item-container-contactos span {
        font-size: 12px;
    }

    .item-container-contactos a {
        gap: 10px;
    }

    /* page-nosotros */
    .nosotros-grid,
    .consultation-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    .consultation-title h2 {
        padding-left: 0px;
        text-align: center;
    }

    .consultation-right {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    /* page-actualidad-detalles */
    .actualidad-detalles {
        grid-template-columns: 1fr;
    }
}