One Hat Cyber Team

Edit File: estilos.css

/** globales **/

* {
    margin: 0px;
    padding: 0px;
}

html {
    max-width: 100%;
    box-sizing: border-box;
    font-size: 62.5%;
  scroll-padding-top: var(--site-header-offset);

}

:root {
  --site-header-offset: 185px;
  --site-header-mobile-offset: 96px;
}

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

body {

margin: 0px auto;
    padding: 0px;
  padding-top: var(--site-header-offset);
    background-image: url(../imagen/4931029.jpg);
    background-size: 100%;
    background-position: center;

}

.contenedor {

align-items: center;
    max-width: 100%;
    margin: 0;
}

section {
    display: flex;
    flex-direction: column;
}
p {
    
    line-height: normal !important;
}

/** Header **/

header {
    background-color: rgb(255, 255, 255);
}

header.contenedor {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

footer {
    background-color: rgb(255, 255, 255);
}

.contenedor .logos-cabeza {

align-items: center;
}

.contenedor .logos-pie {
    align-items: center;
}

.logos-cabeza {
    border-top: 6px solid #861c9b;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center center;
    text-align: center;
  margin-bottom: 0;
  padding: 0 36px;
}

.logos-pie {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 10px;
    padding: 0 60px 0 60px;
}

.logos-cabeza .logo-izquierdo {
  width: 390px;
  margin: 18px;

}

.logos-cabeza .logo-derecho {
  width: 240px;

}

.logos-pie .logo-derecho {
    margin: 15px;
    width: 120px;

}

.logos-pie .logo-izquierdo {
    width: 350px;
    margin: 30px;
}

@media screen and (max-width: 750px) {
  html {
    scroll-padding-top: var(--site-header-mobile-offset);
  }

body {
    padding-top: var(--site-header-mobile-offset);
  }

.logos-cabeza {

display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 6px solid #861c9b;
        justify-content: center;
        align-items: center;
        text-align: center;
    margin-bottom: 0;
    padding: 6px 12px 4px 12px;

}

.logos-cabeza .logo-izquierdo {
    width: min(72vw, 220px);
    max-width: 100%;
    margin: 6px 0 4px 0;
        align-items: center;
        justify-content: center;
    }

.logos-cabeza .logo-derecho {
        display: none;

}

.logos-pie {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        margin-bottom: 10px;
        padding: 0 5px 0 5px;
    }

.logos-pie .logo-derecho {
        display: none;

}

.logos-pie .logo-izquierdo {
        display: none;

}

.navegador {
    background: linear-gradient(#9b1fb4, #481153);
  margin-top: 0;
    max-width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    text-transform: uppercase;
}

.navegador a {
    background-color: #b82ad4;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin: 10px;
    margin-left: 3px;
    margin-right: 3px;
    margin-bottom: 5px;
    padding: 15px;
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    color: white;
    font-size: 1.3rem;
    text-align: center;
    align-items: center;
    border: #160301;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center center;
    transition: ease-in-out .3s;
}

.navegador .ini {
    background-color: rgb(24, 137, 230);
}

.navegador .guia {
    background-color: rgb(94, 36, 230);
}

.navegador .observatorio {
    background-color: #b82ad4;
}

.navegador .datos {
    background-color: #e714d6;
}

.navegador .capa {
    background-color: #f14b8b;
}

.navegador .mate {
    background-color: #f72956;
}

.navegador .noti {
    background-color: #f82b46;
}

.navegador a:hover {
    transition: ease-in-out .5s;
    border: none;
    background-color: #160301;
}

.navegador a:last-child:hover {
    color: white;
}

@media screen and (max-width: 750px) {

.navegador {
        background: linear-gradient(#9b1fb4, #481153);
      margin-top: 0;
        max-width: 100%;
        display: flex;
        flex-direction: column;

}

.navegador a {

margin: 5px;
        margin-left: 3px;
        margin-right: 3px;
        margin-bottom: 5px;
        padding: 15px;
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        color: white;
        font-size: 1rem;

}

/** Principal **/

.principal {

width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 10px;
    justify-content: space-between;
align-items: flex-start;
}

.principal h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    padding: 10px;
    font-size: 19px;
}

.principal p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 12px;
}

.principal .somos {
    width: 45%;
    border: 4px solid rgb(154, 85, 174);
    justify-content: center left;
    box-shadow: 0px 0px 40px #666;
    background-color: rgb(255, 255, 255);
    text-align: justify;
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;

}

@media screen and (max-width: 750px) {
    .principal {
        display: block;
    }

.principal h2 {

font-size: 15px;
    }

.principal p {
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 12px;
    }

.principal .somos {
        border: 2px solid rgb(154, 85, 174);
        justify-content: center left;
        box-shadow: 0px 0px 5px #666;
        background-color: rgb(255, 255, 255);
        text-align: justify;
        border-radius: 5px;
        padding: 1rem;
        margin: 5px;
        margin-bottom: 20px;
    }

}

.somos h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 19px;
    text-align: left;
    border-radius: 5px;
}

.somos p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-transform: initial;
    text-align: justify;
    font-size: 17px;
    padding: 10px;
    color: black;
}

@media screen and (max-width: 750px) {

.somos h2 {

font-size: 14px;
        text-align: left;
        border-radius: 5px;
    }

.somos p {

text-transform: initial;
        text-align: justify;
        font-size: 12px;
        padding: 10px;

}

.principal .objetivos {
    width: 45%;
    border: 4px solid rgb(154, 85, 174);
    background-color: rgb(255, 255, 255);
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    box-shadow: 0px 0px 40px #666;
}

.principal .objetivos div {
    display: flex;
    flex-direction: row;
}

.principal .objetivos p {

font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-transform: initial;
    text-align: justify;
    padding: 5px;
    color: black;
    font-size: 17px;
}

.principal .objetivos h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    text-align: left;
    font-size: 19px;
    padding: 10px;
    color: white;
    border-radius: 5px;
}

.principal .objetivos:hover {
    border: 3px solid rgb(154, 85, 174);
}

@media screen and (max-width: 750px) {

.principal .objetivos {

align-items: center;
        border: 2px solid rgb(154, 85, 174);
        background-color: rgb(255, 255, 255);
        border-radius: 5px;
        padding: 1rem;
        margin: 5px;
        margin-bottom: 20px;
        box-shadow: 0px 0px 20px #666;
    }

.principal .objetivos div {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.principal .objetivos p {

font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        text-transform: initial;
        text-align: justify;
        padding: 5px;
        color: black;
        font-size: 12px;
    }

.principal .objetivos h2 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        background-color: rgb(154, 85, 174);
        text-align: left;
        font-size: 14px;
        padding: 10px;
        color: white;
        border-radius: 5px;
    }

}

.principal .equipo {
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background: linear-gradient(#ffffff, #e7e5e5);
  
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    box-shadow: 0px 0px 40px #666;
    border: 3px solid rgb(154, 85, 174);
}

.principal .equipo div {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: baseline;
    border-bottom: 3px solid rgb(154, 85, 174);
}

.principal .equipo h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    font-size: 19px;
    text-align: left;
    text-transform: uppercase;
    border-radius: 5px;
}

.equipo div img {
    margin: 5px;
    margin-right: 30px;
    padding: 10px;
    width: 200px;
}

.equipo div p {
    text-transform: initial;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: black;
    font-weight: 500;
    text-align: center left;
    font-size: 18px;
}

.equipo div p span {
    font-weight: 800;
    font-size: 18px;
}

.equipo h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 25px;
    text-align: left;
    margin: 10px;
}

@media screen and (max-width: 750px) {

.principal .equipo {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        background: linear-gradient(#ffffff, #e7e5e5);
        max-width: 100%;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        box-shadow: 0px 0px 20px #666;
        border: 2px solid rgb(154, 85, 174);
    }

.principal .equipo div {

border-bottom: 2px solid rgb(154, 85, 174);
    }

.principal .equipo h2 {

font-size: 15px;

}

.equipo div img {
        margin: 5px;
        margin-right: 5px;
        padding: 5px;
        width: 100px;
    }

.equipo div p {

font-size: 12px;
    }

.equipo div p span {

font-size: 13px;
    }

.equipo h2 {
        font-size: 15px;
        text-align: left;
        margin: 5px;
    }

}

.importante {
    width: 45%;
    border: 3px solid #f2d8f7;
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    margin-bottom: 40px;
}

.importante h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 20px;
    text-align: left;
    border-radius: 5px;
}

.principal .importante {
    border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 0px 40px #666;
    background-color: rgb(253, 250, 255);
}

.principal .importante:hover {
    border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 0px 0px #666;
}

.importante p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-transform: initial;
    color: black;
    text-align: justify;
    font-size: 17px;
    padding: 2px;
    font-weight: 400;
}

@media screen and (max-width: 750px) {

.importante {
        border: 2px solid #f2d8f7;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        margin-bottom: 20px;
    }

.importante h2 {

font-size: 15px;

}

.principal .importante {
        border: 2px solid rgb(154, 85, 174);
        box-shadow: 0px 0px 20px #666;

}

.importante p {

font-size: 12px;

}

.principal .hacemos {
    width: 45%;
    border: 3px solid rgb(154, 85, 174);
    background-color: rgb(255, 255, 255);
    text-align: left;
    box-shadow: 0px 0px 40px #666;
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
    
}

.principal .hacemos:hover {
    border: 3px solid rgb(154, 85, 174);
    transition: 0.3s ease-in-out;
}

.hacemos p img {
    margin: 5px;

}

.principal .hacemos h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    font-size: 19px;
    color: white;
}

.hacemos p {
    border: 2px solid rgb(61, 129, 66);
    border-radius: 5px;
    padding: 5px;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 17px;
    margin: 20px;
    text-align: justify;
    text-transform: initial;
}

@media screen and (max-width: 750px) {
    .principal .hacemos {
        border: 2px solid rgb(154, 85, 174);

box-shadow: 0px 0px 20px #666;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        margin-bottom: 20px;
    }

.hacemos p img {
        margin: 0px;
    }

.principal .hacemos h2 {

font-size: 15px;

}

.hacemos p {
        line-height: 0, 5;
        font-size: 12px;
        margin: 5px;

}

.principal .encontrar {
    width: 45%;
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-rows: auto;
    text-align: left;
    box-shadow: 0px 0px 40px #666;
    border: 3px solid rgb(154, 85, 174);
    border-radius: 10px;
    padding: 1rem;
    margin: 2rem;
}

.principal .encontrar h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 30px;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 20px;
    padding: 10px;
    text-transform: uppercase;
    border-radius: 5px;
    border: 2px solid rgb(154, 85, 174);
}

.principal .encontrar p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 15px;
    color: black;
    padding: 5px;
    margin: 5px;
}

@media screen and (max-width: 750px) {

.principal .encontrar {
        background-color: rgb(255, 255, 255);
        display: grid;
        grid-template-rows: auto;
        text-align: left;
        box-shadow: 0px 0px 20px #666;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        margin-bottom: 30px;
    }

.principal .encontrar h2 {
        margin-top: 5px;
        margin-bottom: 5px;
        background-color: rgb(154, 85, 174);
        color: white;
        font-size: 15px;
        padding: 5px;

}

.principal .encontrar p {

font-size: 12px;

}

.hacemos .check {
    border-bottom: none;
    border-left: none;
    border-right: none;
}

/** CAPACITACIONES**/

.talleres {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    margin-top: 30px;
    text-transform: uppercase;
    background: rgb(154, 85, 174);
    text-align: left;
    color: rgb(255, 255, 255);
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;

}

.talleres span {
    font-size: 16px;
}

.capacitacion-bloques {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: baseline;
}

.talleres-cont {
    text-decoration: none;
    text-align: justify;
    padding: 30px;
    margin: 30px;
    border-right: 4px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.talleres-cont2 {
    text-decoration: none;
    text-align: justify;
    padding: 30px;
    margin: 30px;
    border-radius: 5px;
}

.talleres-objetivos {
    display: block;
    text-align: left;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 18px;
    color: black;
    padding: 5px;
}

.talleres-cont .talleres-objetivos {
    color: rgb(0, 0, 0);
}

.conferencias-titulo {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    text-transform: uppercase;
    line-height: 1.5;
    margin-top: 30px;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;

}

.conferencias-titulo span {
    font-size: 16px;
}

.talleres-cont p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 18px;
    color: black;
    padding: 5px;
}

.talleres-cont2 p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 18px;
    color: black;
    padding: 5px;
}

.talleres-cont a {
    display: flex;
    width: max-content;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    align-items: center;
    font-size: 15px;
 
    margin-top: 15px;
    color: rgb(192, 121, 211);

}

.talleres-cont a:hover {
    font-size: 16px;
    color: rgb(172, 109, 189);
    transition: ease-in-out 0.1s;
}

.talleres-cont2 a {
    display: flex;
    width: max-content;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(192, 121, 211);
    text-align: center;
    align-items: center;
    font-size: 15px;
    padding: 8px 15px;
    margin-top: 40px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.talleres-cont2 a:hover {
    box-shadow: 0 0 20px #666;
    border: 2px solid rgb(154, 85, 174);
 
    transition: ease-in-out 0.1s;
}

.capacita-imagen {
    display: flex
    ;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: 10px;
}

.capacita-imagen img{
    width: 100%;
    padding: 10px;
    border-radius: 10px;
}

.otras-capa {
    height: 240px;
    width: 500px;
    display: grid;
    grid-template-columns: 60% 50%;
    justify-content: space-between;
    text-decoration: none;
    background-color: #71b100;
    text-align: start;
    padding: 5px;
    margin: 50px;
    margin-left: 50px;
    border: 4px solid #5c8811;
    border-radius: 5px;
}

.otras-capa:hover {
    box-shadow: 0 0 50px #666;
    transition: 0.3s ease-in-out;
}

.otras-capa h1 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    padding: 10px;
}

.otras-capa img {
    border: 4px solid #578605;
    border-radius: 20px;
}

@media screen and (max-width: 750px) {

.talleres {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        margin-top: 5px;
        text-transform: uppercase;
        background: rgb(154, 85, 174);
        text-align: left;
        color: rgb(255, 255, 255);
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;

margin: 5px;
        margin-top: 20px;
    }

.talleres span {
        font-size: 16px;
    }

.capacitacion-bloques {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

.talleres-cont {
        text-decoration: none;
        text-align: justify;
        padding: 5px;
        margin: 5px;
        border-right: none;
        border-radius: 5px;
    }

.talleres-cont2 {
        text-decoration: none;
        text-align: justify;
        padding: 5px;
        margin: 5px;
        border-radius: 5px;
    }

.talleres-objetivos {
        display: flex;
        text-align: justify;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 13px;
        color: black;
        padding: 5px;
    }

.talleres-cont .talleres-objetivos {
        color: rgb(0, 0, 0);
    }

.conferencias-titulo {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        text-transform: uppercase;
        line-height: 1.5;
        margin-top: 30px;
        background-color: rgb(154, 85, 174);
        color: white;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;

}

.conferencias-titulo span {
        font-size: 16px;
    }

.talleres-cont p {
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 13px;
        color: black;
        padding: 5px;
    }

.talleres-cont2 p {
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 13px;
        color: black;
        padding: 5px;
    }

.talleres-cont a {
        display: flex;
        justify-content: center;
        width: auto;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background: rgb(192, 121, 211);
        text-align: center;
        align-items: center;
        font-size: 13px;
        padding: 5px;
        margin: 10px;
        margin-top: 20px;
        color: white;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
    }

.talleres-cont a:hover {
        box-shadow: 0 0 20px #666;
        border: 3px solid rgb(154, 85, 174);
        font-size: 13px;
        transition: ease-in-out 0.3s;
    }

.talleres-cont2 a {
        display: flex;
        justify-content: center;
        width: auto;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background: rgb(192, 121, 211);
        text-align: center;
        align-items: center;
        font-size: 13px;
        padding: 5px;
        margin: 10px;
        margin-top: 40px;
        color: white;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
    }

.talleres-cont2 a:hover {
        box-shadow: 0 0 20px #666;
        border: 3px solid rgb(154, 85, 174);
        font-size: 15px;
        transition: ease-in-out 0.3s;
    }

.otras-capa {
        height: auto;
        width: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-decoration: none;
        background-color: #71b100;
        text-align: center;
        padding: 5px;
        margin: 5px;

border: 3px solid #5c8811;
        border-radius: 5px;
    }

.otras-capa:hover {
        box-shadow: 0 0 20px #666;
        transition: 0.3s ease-in-out;
    }

.otras-capa h1 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        justify-content: center;
        color: white;
        font-size: 15px;
        padding: 5px;
    }

.otras-capa img {
        border: 3px solid #578605;
        border-radius: 20px;
    }

}

/** TALLERES**/

.capacitaciones {
    margin: 50px;
}

.perspectiva {
    display: grid;
    grid-template-columns: 190px 750px;
    border: 4px solid rgb(0, 102, 0);
}

.titulo-capacitacion {
    border-radius: 5px;
    margin-bottom: 30px;
}

.titulo-capacitacion h1 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    padding: 10px;
    margin-bottom: 0;
    margin-top: 0;
    color: white;
    background-color: rgb(0, 102, 0);
}

.titulo-capacitacion:hover {
    box-shadow: 0px 0px 50px #666;
    transition: 0.3s ease-in-out;
}

.perspectiva div h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 5px;
    margin-top: 5px;
    font-size: 17px;
    background-color: #cfcfcf;
    padding: 5px;
}

.perspectiva p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 16px;
}

.violencia h1 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(255, 51, 0);
}

.violencia-perspectiva {
    border: 4px solid rgb(255, 51, 0);
}

.debida h1 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(252, 201, 54);
}

.debida-diligencia {
    border: 4px solid rgb(252, 201, 54);
}

@media screen and (max-width: 750px) {

.capacitaciones {
        margin: 10px;
    }

.perspectiva {
        display: flex;
        flex-direction: column;
        border: 4px solid rgb(0, 102, 0);
    }

.titulo-capacitacion {
        border-radius: 5px;
        margin-bottom: 30px;
    }

.imagen-capacitacion {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.imagen-capacitacion img {
        width: 50%;
        justify-content: center;
        align-items: center;
    }

.titulo-capacitacion h1 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        padding: 10px;
        margin-bottom: 0;
        margin-top: 0;
        color: white;
        background-color: rgb(0, 102, 0);
    }

.titulo-capacitacion:hover {
        box-shadow: 0px 0px 50px #666;
        transition: 0.3s ease-in-out;
    }

.perspectiva div h2 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        margin-bottom: 5px;
        margin-top: 5px;
        font-size: 17px;
        background-color: #cfcfcf;
        padding: 5px;
    }

.perspectiva p {
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 16px;
    }

.violencia h1 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        background-color: rgb(255, 51, 0);
    }

.violencia-perspectiva {
        border: 4px solid rgb(255, 51, 0);
    }

.debida h1 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        background-color: rgb(252, 201, 54);
    }

.debida-diligencia {
        border: 4px solid rgb(252, 201, 54);
    }

}

/** footer **/

footer {
    border-top: 5px solid #861c9b;
}

.logos-pie .footer-enlace {
    border-radius: 10px;
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    margin-left: 10px;
    color: black;
    text-decoration: none;
    text-align: center;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    padding: 5px;

}

.logos-pie .footer-enlace img {
    width: 50px;
    border: 0px;
}

.logos-pie .footer-enlace .pin {
    width: 30px;
    border: 0px;
}

@media screen and (max-width: 750px) {

footer {
        border-top: 2px solid #861c9b;

}

.logos-pie {
        width: 100%;
        display: flex;
        flex-direction: row;
    }

.logos-pie .footer-enlace {
        border-radius: 5px;
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        margin-left: px;
        color: black;
        text-decoration: none;
        text-align: center;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        padding: 5px;

}

.logos-pie .footer-enlace img {

width: 35px;
    }

.logos-pie .footer-enlace .pin {
        width: 12px;
        border: 0px;
    }

}

.logos-pie .footer-enlace:hover {
    transition: ease-in-out .1s;
    border-bottom: 4px solid #9b1fb4;

}

.copyright {
    background: linear-gradient(#9b1fb4, #481153);
    padding: 5px;
    margin-top: 10px;
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
}

.copyright p {
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    font-size: 1.5rem;
}

@media screen and (max-width: 750px) {
    .copyright {
        background: linear-gradient(#9b1fb4, #481153);
        padding: 5px;
        margin-top: 5px;
        text-align: center;
        justify-content: center center;
    }

.copyright p {
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        color: white;
        font-size: 12px;
    }
}

/** otras capacticaciones**/

.videosconferencias {
    width: 100%;
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    align-items: center;
    text-align: center;
    grid-template-columns: 50% 50%;
}

.videoconferencia {
    width: 40%;
    display: block;

justify-content: center;
    align-items: center;
    height: 500px;
    margin: 40px;
    border: 4px solid rgb(154, 85, 174);
    background-color: rgb(225, 178, 238);
    border-radius: 5px;
    box-shadow: 0 0 50px #666;
}

.videoconferencia h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background: rgb(154, 85, 174);
    text-align: center;
    font-size: 15px;
    padding: 15px;
    margin: 20px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.videoconferencia p {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    font-size: 19px;
    color: rgb(0, 0, 0);
    padding: 20px 30px 20px 30px;
}

.videoconferencia iframe {
    border: 4px solid rgb(6, 42, 71);
}

.videoconferencia video {
    width: 100%;
}

.otrascapacitaciones {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
    margin-top: 50px;
}

.otrascapacitaciones h1 {
    background-color: #f051e2;
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-weight: 400;
    box-shadow: 0 0 20px #666;
    line-height: 1.5;
}

.otrascapacitaciones h2 {
    background-color: rgb(154, 85, 174);
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-weight: 400;
    box-shadow: 0 0 20px #666;
    line-height: 1.5;
}

@media screen and (max-width: 750px) {

.videosconferencias {
        display: flex;
        flex-direction: column;
    }

.videoconferencia {
        width: 98%;
        display: block;
        justify-content: center;
        align-items: center;
        height: auto;
        margin: 5px;
        border: 2px solid rgb(154, 85, 174);
        background-color: rgb(225, 178, 238);
        border-radius: 5px;
        box-shadow: 0 0 20px #666;
        margin-bottom: 20px;
        margin-top: 20px;
    }

.videoconferencia h2 {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        background: rgb(154, 85, 174);
        text-align: center;
        font-size: 13px;
        padding: 5px;
        margin: 5px;
        color: white;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
        text-transform: uppercase;
    }

.videoconferencia p {
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;
        font-size: 13px;
        color: rgb(0, 0, 0);
        padding: 10px;
    }

.videoconferencia iframe {
        border: 2px solid rgb(6, 42, 71);
    }

.otrascapacitaciones {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 5px;
        margin-top: 30px;
    }

.otrascapacitaciones h1 {
        background-color: #f051e2;
        font-family: 'Kameron', sans-serif;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        color: white;
        font-weight: 400;
        box-shadow: 0 0 20px #666;
        line-height: 1.5;
    }

.otrascapacitaciones h2 {
        background-color: rgb(154, 85, 174);
        font-family: 'Kameron', sans-serif;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        color: white;
        font-weight: 400;
        box-shadow: 0 0 20px #666;
        line-height: 1.5;
    }

}

/**materiales**/

.material-todos {
    max-width: 100%;
    display: grid;
   grid-template-columns: 45% 45%;
    justify-content: space-around;
    align-items: center;
}

.material4 div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 30px;
}

.materiales {
    display: block;
    height: auto;
    border: 4px solid rgb(154, 85, 174);
    background: rgb(245, 245, 245);
    box-shadow: 0 0 50px #666;
    border-radius: 5px;
    margin: 30px 0px;
    text-align: center;
    padding-bottom: 20px;
    text-decoration: none;
}

.materiales6 {
    display: flex;
   flex-direction: column;
    align-items: center;
 justify-content: center;
gap: 30px;
}

.boton-verde-mat {
    display: flex;
    width: 500px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Kameron', sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
        background-color: #45a049;
}

.boton-verde-rosa {
    width: 500px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px;
    font-family: 'Kameron', sans-serif;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
        background-color: #FF33CC;
}

.materiales6:hover {
    /* transform: translateY(-5px); */
}

.image-container {
    flex-shrink: 0;
}

.image-container img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
}

.button-container {
    flex-grow: 1;
}

.styled-button {
    display: inline-block;
    font-family: 'Kameron', sans-serif;
    line-height: 20px;
    padding: 10px 20px;
    /* background-color: #45a049; */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.materiales6:hover {
    /* background-color: #45a049; */
    /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}

.materiales h2 {
    text-align: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(101, 56, 114);
    border-radius: 5px;
    color: rgb(255, 255, 255);
    font-size: 17px;
    padding: 10px;
    margin: 5px;
    margin-bottom: 20px;
}

.material-todos .material4 a {
    height: auto;
    background: rgb(149, 87, 167);
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    font-size: 15px;
    margin: 10px;
    padding: 10px;
    align-items: center;
    text-align: center;
}

.material-todos .material4 a:hover {
    background: none;
    box-shadow: 0 0 20px #666;
    background-color: rgb(153, 74, 175);
    transition: 0.3s ease-in-out;
}

.material4 .normativa {
    display: grid;
    grid-template-columns: 95%;
}

.material4 .normativa a {
    margin: 10px 0px 10px 0px;
    text-transform: uppercase !important;
}

.obser4545 {
width: 50%;
display: flex
;
/* padding: 20px; */

}

.obser4545 img {
    width: 600px;
    height: max-content;
    box-shadow: 0px 0px 6px #666;
    border-radius: 10px;
}

@media screen and (max-width: 750px) {

.materiales6 {
        display: flex;
        flex-direction: column;
  
    }

.styled-button {
    display: inline-block;
    padding: 10px 20px;
    /* background-color: #45a049; */
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.material-todos {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

.material4 div {
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-top: 5px;
    }

.materiales {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        border: 3px solid rgb(154, 85, 174);
        background: rgb(245, 245, 245);
        box-shadow: 0 0 20px #666;
        border-radius: 5px;
        margin: 5px;
        margin-bottom: 20px;
        padding-bottom: 5px;
        text-decoration: none;
    }

.materiales h2 {
        text-align: center;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        text-transform: uppercase;
        font-weight: 400;
        line-height: 1.5;
        background: rgb(101, 56, 114);
        border-radius: 5px;
        color: rgb(255, 255, 255);
        font-size: 14px;
        padding: 5px;
        margin: 5px;
        margin-bottom: 5px;
    }

.material-todos .material4 a {
        height: auto;
        background: rgb(149, 87, 167);
        border-radius: 5px;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        color: white;
        font-size: 13px;
        margin: 5px;
        padding: 5px;
        align-items: center;
        text-align: center;
    }

.material-todos .material4 a:hover {
        background: none;
        box-shadow: 0 0 20px #666;
        background-color: rgb(153, 74, 175);
        transition: 0.3s ease-in-out;
    }

.material4 .normativa {
        display: flex;
        flex-direction: column;
    }

.material4 .normativa a {
        margin: 10px;
    }

}

/**libros**/

#input-search {
    width: 300px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    margin: 30px;
}

.content-search {
    display: block !important;
    width: 100%;
    top: 60px;
    left: 0;
    background: #f8f6f6;
    margin-bottom: 50px;
}

.content-table {
    width: 100%;
    max-height: 500px;
    height: auto;
    background: rgb(138, 160, 83);
    margin-left: 10px;
    overflow-y: visible;
    overflow-x: hidden;
}

.content-table table {
    width: 100%;
}

#input-search2 {
    width: 300px;
    height: 40px;
    font-size: 20px;
    text-indent: 10px;
    margin: 30px;
}

.content-search2 {
    display: block !important;
    width: 100%;
    top: 60px;
    left: 0;
    background: #f8f6f6;
    margin-bottom: 50px;
}

.content-table2 {
    width: 100%;
    max-height: 500px;
    height: auto;
    background: rgb(138, 160, 83);
    margin-left: 10px;
    overflow-y: visible;
    overflow-x: hidden;

}

.content-table2 table {
    width: 100%;
}

tbody tr td a {
    display: block;
    padding: 10px;
    color: rgb(255, 255, 255);
    text-decoration: none;
    text-transform: uppercase;
    font-size: 15px;
    border-bottom: 2px solid black;
}

tbody tr td a:hover {
    background: rgba(0, 0, 0, 0.3);
}

#table_length,
#table_filter,
#table_info,
#table_paginate {
    display: none;
}

#table2_length,
#table2_filter,
#table2_info,
#table2_paginate {
    display: none;
}

.tabla-normativa {
    width: 100%;
    margin: 60px 10px;
    background-color: rgb(255, 255, 255);
    ;
    border: 3px solid rgb(209, 207, 207);
}

.tabla-normativa th {
    font-size: 20px;
    border-bottom: 3px solid rgb(209, 207, 207);
}

.tabla-normativa tbody tr {
    border: 3px solid rgb(209, 207, 207);
}

.tabla-normativa td {
    color: #160301;
    border: 3px solid rgb(209, 207, 207);
    font-size: 15px;
    margin: 5px;
    padding: 5px;
}

.tabla-normativa td a {
    color: #160301;
    font-size: 15px;
}

.tabla-normativa thead {
    color: white;
    background-color: rgb(154, 85, 174);
    padding: 5px;
}

.tabla-normativa thead th {
    padding: 5px;
}

@media screen and (max-width: 750px) {
    .tabla-normativa {
        width: 100%;
        margin: 5px;
        background-color: rgb(255, 255, 255);
        ;
        border: 3px solid rgb(209, 207, 207);
        margin-top: 20px;
        margin-bottom: 20px;
    }

#div1 {
        overflow: scroll;
        height: 40%;
        width: 100%;
    }

#div1 table {
        width: auto;
        background-color: lightgray;
    }

.tabla-normativa th {
        font-size: 15px;
        border-bottom: 3px solid rgb(209, 207, 207);
    }

.tabla-normativa tbody tr {
        border: 3px solid rgb(209, 207, 207);
    }

.tabla-normativa td {
        color: #160301;
        border: 3px solid rgb(209, 207, 207);
        font-size: 13px;
        margin: 5px;
        padding: 5px;
    }

.tabla-normativa td a {
        color: #160301;
        font-size: 13px;
    }

.tabla-normativa thead {
        color: white;
        background-color: rgb(154, 85, 174);
        padding: 5px;
    }

.tabla-normativa thead th {
        padding: 5px;
    }

tbody tr td a {
        display: block;
        padding: 8px;
        color: rgb(255, 255, 255);
        text-decoration: none;
        text-transform: uppercase;
        font-size: 13px;
        border-bottom: 2px solid black;
    }

}

/* SLIDER */

* {
    box-sizing: border-box
}

/* Slideshow container */
.slideshow-container {

width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 30px;

}

/* Hide the images by default */

/* Next & previous buttons */
.prev,
.next {
    cursor: pointer;
    background-color: rgb(255, 255, 255);
    align-items: center;
    width: auto;
    margin-right: 10px;
    padding: 16px;
    color: rgb(27, 27, 27);
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 5px 5px 0;
    user-select: none;
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
    color: rgb(228, 228, 228);
    background-color: rgb(154, 85, 174);
}

/* Caption text */

/* Number text (1/3 etc) */

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 25px;
    width: 25px;
    margin: 0 2px;
    background-color: rgb(154, 85, 174);
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active,
.dot:hover {
    background-color: #717171;
}

/* Fading animation */

.fade {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: auto;
    
    background-color: rgb(255, 255, 255);
    border: 4px solid rgb(154, 85, 174);
    border-radius: 5px;
    box-shadow: 0 0 40px #666;
}

.fade img {
    width: 100%;
    height: 600px;
}

.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 1.5s;
    animation-name: fade;
    animation-duration: 1.5s;
}

@-webkit-keyframes fade {
    from {
        opacity: .4
    }

to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .4
    }

to {
        opacity: 1
    }
}

/* guia de recursos */

.ASESORAMIENTO {
    display: flex;
    font-family: 'Kameron', sans-serif;
    flex-direction: row;
    justify-content: center;
    width: max-content;
    border: 3px solid #5e9203;
    border-radius: 4px;
    background-color: rgb(250, 250, 250);
    box-shadow: 0 0 40px #666;
    margin: 70px auto;
}

.ASESORAMIENTO div {
    margin: 20px 100px;

}

.ASESORAMIENTO div .vacioo {
    padding: 15px;

}

.ASESORAMIENTO div h2 {
    font-size: 22px;
    padding: 5px 0px;
}

.ASESORAMIENTO div h3 {
    font-size: 20px;
    padding: 5px 0px;
}

.ASESORAMIENTO div p {
    font-size: 18px;
    padding: 5px 0px;
}

.ASESORAMIENTO div span {
    font-weight: 700;
    padding: 5px 0px;
}

.RECEPCION {
    padding-top: 70px;
}

.volver-atras {
    display: flex;
    justify-content: flex-end;
    margin: 10px;
}

.volver-atras a {
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(154, 85, 174);
    text-align: center;
    font-size: 22px;
    padding: 15px;
    margin: 20px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.volver-atras a:hover {
    box-shadow: 0 0 20px #666;
    border: 4px solid rgb(154, 85, 174);
    font-size: 24px;
    transition: ease-in-out 0.3s;
}

@media screen and (max-width: 750px) {

.volver-atras {
        display: flex;
        justify-content: center;
        margin: 10px;
    }

.volver-atras a {
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background: rgb(154, 85, 174);
        text-align: center;
        font-size: 15px;
        color: white;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
    }

.volver-atras a:hover {
        box-shadow: 0 0 20px #666;
        border: 2px solid rgb(154, 85, 174);

transition: ease-in-out 0.3s;
    }

}

.imagenrecur {
    width: 100%;
    align-items: center;

}

.recurbody {
    background-image: none;
}

.recurheader {
    background-color: white;
}

.recurfooter {
    background-color: white;
}

.titlerecur {

background-color: rgb(61, 129, 66);
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-weight: 400;

line-height: 1.5;
}

.titlerecur2 {
    background-color: rgb(140, 10, 216);
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-weight: 400;

line-height: 1.5;
}

.titlerecur3 {
    background-color: rgb(236, 166, 34);
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    padding: 20px;
    border-radius: 5px;
    color: white;
    font-weight: 400;

line-height: 1.5;
}

.text {
    display: flex;
    background-color: rgb(255, 255, 255);
    font-family: 'Kameron', sans-serif;
    text-align: center;
    align-items: center;
    color: #160301;
    padding: 10px;
    margin: 10px;
    font-size: 18px;

}

.slide-description {

display: flex;
    flex-direction: column;
}

@media screen and (max-width: 750px) {

.fade {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        width: 90%;
        
        background-color: rgb(255, 255, 255);
        border: 4px solid rgb(154, 85, 174);
        border-radius: 5px;
        box-shadow: 0 0 40px #666;
    }
    
    .fade img {
        width: 100%;
        height: auto;
    }

.titlerecur {

font-size: 15px;
        padding: 5px;
        line-height: 1.5;
    }

.titlerecur2 {

font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        color: white;
        font-weight: 400;

line-height: 1.5;
    }

.titlerecur3 {
        background-color: rgb(236, 166, 34);
        font-family: 'Kameron', sans-serif;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        color: white;
        font-weight: 400;

line-height: 1.5;
    }

}

/** Micaela **/

.micaela {
    margin: 20px 200px 20px 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.micaela h1 {
    font-family: 'Kameron', sans-serif;
    font-size: 40px;
    padding: 5px;
    color: rgb(0, 0, 0);
    font-weight: 700;
    line-height: 1.5;
    margin: 30px 20px 10px 20px;
}

.micaela p {
    font-family: 'Kameron', sans-serif;
    font-size: 18px;
    color: rgb(0, 0, 0);
    line-height: 1.5;
    text-align: justify;
    margin: 20px;
}

.micaela a {
    text-align: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(140, 10, 216);
    font-size: 18px;
    padding: 15px;
    margin: 5px;
    color: white;
    border: 2px solid rgb(140, 10, 216);
    border-radius: 10px;
}

.micaela a:hover {
    background: rgb(159, 55, 219);
    border: 3px solid rgb(140, 10, 216);
    box-shadow: 0 0 20px #666;
    transition: all 0.3s;

}

.micaela div {
    margin: 50px;
    display: flex;
    flex-direction: column;
}

.micaela div a {
    width: 500px;
    margin: 0px;
    border-radius: 0px;
}

.micaela .micaela-enlace {
    background: none;
    border: none;
    font-size: 20px;
    color: rgb(128, 39, 180);
    margin: none !important;
    padding: none !important;
    line-height: none;
    border-radius: none;
    text-decoration: underline;
}

.micaela .micaela-enlace:hover {
    background: none;
    border: none;
    color: #bc22db;
    box-shadow: none;
    transition: all 0.3s;
}

.micaela2 {
    width: 100%;
    display: flex;
    flex-direction: row !important;
}

.micaela2 div{
    width: 40%;
    display: flex;
    flex-direction: column;
}

.micaela2 .cualca{
   background: none !important;
   color: rgb(8, 83, 1);
   border: none !important;
   font-weight: bold;
}

.micaela2 .cualca:hover{
    background: none !important;
    color: rgb(12, 141, 0);
    border: none !important;
    box-shadow: none !important;
 }

.micaela3 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;

}

.micaela3 div{
    width: 20%;
    display: flex;
    flex-wrap: wrap;
    margin: 10px;
    border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 7px 20px #666;
    background-color: rgb(253, 250, 255);
    border-radius: 10px;

}

.micaela3 div img{
  
    width: 100%;
/* height: 1000px; */
 }

.boton-vernoti {
    height: auto;
    background: rgb(149, 87, 167);
    border-radius: 5px;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    color: white;
    font-size: 15px;
    margin: 5px;
    padding: 10px;
    align-items: center;
    text-align: center;
}

.boton-vernoti:hover {
    background: none;
    box-shadow: 0 0 20px #666;
    background-color: rgb(153, 74, 175);
    transition: 0.3s ease-in-out;
    cursor: pointer;
}

@media screen and (max-width: 750px) {

.micaela3 div{
        width: 100%; 
     }

.micaela2{
        width: 100%;
        flex-direction: column !important; 
        justify-content: center;
        align-items: center;
     }

.micaela2 div {
width: 90%;
     }

.micaela3 div img{
  
        width: 100%;
    height: auto;
     }
    
    .micaela {
        margin: 5px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

.micaela h1 {
        font-family: 'Kameron', sans-serif;
        font-size: 16px;
        padding: 5px;
        color: rgb(0, 0, 0);
        font-weight: 700;
        line-height: 1.5;
        margin: 5px;
        margin-top: 20px;
    }

.micaela p {
        font-family: 'Kameron', sans-serif;
        font-size: 14px;
        color: rgb(0, 0, 0);
        line-height: 1.5;
        text-align: justify;
        margin: 5px;
    }

.micaela a {
        text-align: center;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background: rgb(140, 10, 216);
        font-size: 13px;
        padding: 5px;
        margin: 5px;
        color: white;
        border: 2px solid rgb(140, 10, 216);
        border-radius: 10px;
    }

.micaela a:hover {
        background: rgb(159, 55, 219);
        border: 3px solid rgb(140, 10, 216);
        box-shadow: 0 0 20px #666;
        transition: all 0.3s;

}

.micaela div {
        margin: 10px;
        display: flex;
        flex-direction: column;
    }

.micaela div a {
        width: 100%;
        margin: 0px;
        border-radius: 0px;
    }

.micaela div img {
        width: 100%;
        margin: 0px;
        border-radius: 0px;
    }

.micaela .micaela-enlace {
        background: none;
        border: none;
        font-size: 15px;
        color: rgb(128, 39, 180);
        margin: none !important;
        padding: none !important;
        line-height: none;
        border-radius: none;
        text-decoration: underline;
    }

.micaela .micaela-enlace:hover {
        background: none;
        border: none;
        color: #bc22db;
        box-shadow: none;
        transition: all 0.3s;
    }

}

.noticias {
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.noticias1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    margin: 30px;

background-color: #f7f7f7;
    border-radius: 10px;
    border: 4px solid rgb(140, 10, 216);
    box-shadow: 0 0 20px #666;
}

.noticias1 img {
    width: 70%;
}

.noticias1 p img {
    width: 400px;
    align-items: center;

}

.noticias1 iframe {
    margin: 20px !important;
}

.noticias1 h2 {
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    margin: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.noticias1 h3 {
    font-family: 'Kameron', sans-serif;
    font-size: 16px;
    margin: 5px 20px 20px 20px;
    text-align: center;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    text-decoration: none;
}

.noticias1 p {
    font-family: 'Kameron', sans-serif;
    font-size: 17px;
    margin: 10px;
    text-align: left;
    line-height: normal;
    padding: 10px;
}

.noticias1 p span {
    font-size: 20px;
    padding: 20px 0px 20px 0px;
    font-weight: 700;
    margin: 20px 0px 20px 0px;
}

@media screen and (max-width: 750px) {

.noticias {
    
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 5px;
        margin-top: 30px;
        margin-bottom: 20px;
    }

.noticias1 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 95%;
        margin: 0px;
        margin-bottom: 40px;
        background-color: #f7f7f7;
        border-radius: 10px;
        border: 2px solid rgb(140, 10, 216);
        box-shadow: 0 0 20px #666;
    }

.noticias1 img {
        width: 100%;
    }

.noticias1 p img {
        width: 100%;
        align-items: center;

}

.noticias1 iframe {
        margin: 2px;
        width: 100%;
    }

.noticias1 h2 {
        font-family: 'Kameron', sans-serif;
        font-size: 15px;
        margin: 5px;
    }

.noticias1 h3 {
        font-family: 'Kameron', sans-serif;
        font-size: 13px;
        margin: 5px ;
        text-align: center;
        align-items: center;
        font-weight: 400;
        justify-content: center;
        text-decoration: none;
    }

.noticias1 p {
        font-family: 'Kameron', sans-serif;
        font-size: 13px;
        margin: 5px;
        text-align: left;
    line-height: normal;
        padding: 5px;
    }

.noticias1 p span {
        font-size: 15px;
        padding: 5px 0px 5px 0px;
        font-weight: 700;
        margin: 5px 0px 5px 0px;
    }

}

.guiainteractiva {
    display: flex;
    border: 2px solid rgb(140, 10, 216);
    width: auto;
    border-radius: 5px;
    padding: 10px;
    background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
    text-align: center;
    align-items: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-size: 15px;
    color: #ffffff;

}

.guiainteractiva:hover {
    border: 3px solid rgb(140, 10, 216);
    box-shadow: 0px 0px 40px #666;
    transition: all 0.2s;
}

.guiainteractiva2 {
    display: flex;
    border: 2px solid rgb(140, 10, 216);
    border-radius: 5px;
    padding: 10px;
    width: auto;
    background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
    text-align: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-size: 15px;
    color: #ffffff;

}

.guiainteractiva2:hover {
    border: 3px solid rgb(140, 10, 216);
    box-shadow: 0px 0px 40px #666;
    transition: all 0.2s;
}

@media screen and (max-width: 750px) {

.guiainteractiva {
        display: flex;
        border: 2px solid rgb(140, 10, 216);
        width: 80%;
        border-radius: 5px;
        padding: 5px;
        background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
        text-align: center;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-size: 12px;
        color: #ffffff;

}

.guiainteractiva:hover {
        border: 2px solid rgb(140, 10, 216);
        box-shadow: 0px 0px 20px #666;
        transition: all 0.2s;
    }

.guiainteractiva2 {
        display: flex;
        border: 2px solid rgb(140, 10, 216);
        border-radius: 5px;
        padding: 8px;
        margin: 10px;
        width: 80%;
        background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
        text-align: center;
        text-decoration: none;
        justify-content: center;
        font-family: 'Kameron', sans-serif;
        font-size: 12px;
        color: #ffffff;
    }

.guiainteractiva2:hover {
        border: 2px solid rgb(140, 10, 216);
        box-shadow: 0px 0px 20px #666;
        transition: all 0.2s;
    }

}

.observatoriodesen {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}

.imagen-obser img {
    width: 600px;
    margin: 30px;
    box-shadow: 0px 0px 40px #666;
    border-radius: 5px;

}

.enlace-obser {
    position: relative;
    bottom: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

.enlace-obser a {
    display: flex;
    border: 2px solid rgb(140, 10, 216);
    border-radius: 5px;
    padding: 10px;
    background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
    text-align: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-size: 18px;
    color: #ffffff;
    margin: 5px;
}

.enlace-obser a:hover {
    border: 3px solid rgb(140, 10, 216);
    box-shadow: 0px 0px 40px #666;
    transition: all 0.2s;
}

@media screen and (max-width: 750px) {

.observatoriodesen {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

}

.imagen-obser img {
        width: auto;
        margin: 5px;
        margin-top: 30px;
    }

.enlace-obser {
        position: relative;
        bottom: 100px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }

.enlace-obser a {
        display: flex;
        border: 2px solid rgb(140, 10, 216);
        border-radius: 5px;
        padding: 5px;
        background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
        text-align: center;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-size: 13px;
        color: #ffffff;
        margin: 5px;
    }

.enlace-obser a:hover {
        border: 3px solid rgb(140, 10, 216);
        box-shadow: 0px 0px 40px #666;
        transition: all 0.2s;
    }

}

.mapa {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mapa .mapa-google {
    margin-top: 20px;
    border: 3px solid rgb(140, 10, 216);
    box-shadow: 0px 0px 40px #666;
    border-radius: 5px;
}

.mapa .mapa-datos {
    background-color: rgb(255, 255, 255);
    display: grid;
    grid-template-rows: auto;
    text-align: left;
    box-shadow: 0px 0px 40px #666;
    border: 3px solid rgb(154, 85, 174);
    border-radius: 5px;
    margin-top: 50px;
}

.mapa .mapa-datos h2 {

font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 30px;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 17px;
    padding: 10px;
    border-radius: 5px;
    border: 2px solid rgb(154, 85, 174);
}

.mapa .mapa-datos p {

font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 15px;
    color: black;
    padding: 5px;
    margin: 5px;

}

@media screen and (max-width: 750px) {

.mapa {
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

.mapa .mapa-google {
        width: 80%;
        margin: 10px;
        margin-top: 20px;
        border: 3px solid rgb(140, 10, 216);
        box-shadow: 0px 0px 40px #666;
        border-radius: 5px;
    }

.mapa .mapa-google iframe {
        width: 100%;

}

.mapa .mapa-datos {
        background-color: rgb(255, 255, 255);
        display: flex;
        flex-direction: column;
        text-align: left;
        box-shadow: 0px 0px 20px #666;
        border: 3px solid rgb(154, 85, 174);
        border-radius: 5px;
        margin-top: 30px;
    }

.mapa .mapa-datos h2 {

font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        margin-top: 20px;
        background-color: rgb(154, 85, 174);
        color: white;
        font-size: 15px;
        padding: 5px;
        border-radius: 5px;
        border: 2px solid rgb(154, 85, 174);
    }

.mapa .mapa-datos p {

font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        font-size: 13px;
        color: black;
        padding: 5px;
        margin: 5px;

}

.flechitas {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
}

.agenda {
   width: 45%;
    display: flex;
    flex-direction: column;
    border: 3px solid rgb(154, 85, 174);
    background-color: rgb(255, 255, 255);
    text-align: left;
    box-shadow: 0px 0px 40px #666;
    border-radius: 10px;
    padding: 1rem;
   margin: 2rem;

}

.agenda div {
   display: flex;
   flex-direction: column;

background-color: rgb(233, 233, 233);
    margin: 10px 0px 10px 0px;
    padding: 5px;
    border-radius: 5px;

}

.agenda div div {

background-color: rgb(233, 233, 233);
    margin: 10px 5px 10px 5px;

}

.agenda div .fecha-hora {
    display: flex;
    flex-direction: column;

}

.agenda .agendapordia div iframe {
    width: 100%;
    height: 250px !important;

}

.agenda div p img {
    width: 20px;
}

.agenda h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background-color: rgb(154, 85, 174);
    color: white;
    font-size: 20px;
    text-align: left;
    margin: 10px;
    border-radius: 5px;
}

.agenda div div p {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
width: auto;
    color: black;
    text-align: justify;
    word-wrap: break-word;
overflow-wrap: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
    font-size: 16px;
    padding: 5px;

}

.agenda div p span {
    font-weight: 700;
    font-family: 'Kameron', sans-serif;
    font-size: 18px;
}

@media screen and (max-width: 750px) {

.agenda {
        display: flex;
        flex-direction: column;
        border: 2px solid rgb(154, 85, 174);
        background-color: rgb(255, 255, 255);
        text-align: left;
        box-shadow: 0px 0px 20px #666;
        border-radius: 5px;
        padding: 5px;
        margin: 5px;
        margin-bottom: 20px;

}

.agenda div .fecha-hora {
        display: flex;
        flex-direction: column;
        width: 100%;

}

.agenda div {
        display: flex;
        flex-direction: column;

background-color: rgb(233, 233, 233);
        margin: 5px 0px 5px 0px;
        padding: 5px;
        border-radius: 5px;

}

.agenda div div {

background-color: rgb(233, 233, 233);
        margin: 5px;

}

.agenda div div iframe {
        width: 100%;

}

.agenda div p img {
        width: 15px;
    }

.agenda h2 {
        font-size: 15px;
        margin: 5px;
        border-radius: 5px;
    }

.agenda div div p {

font-size: 12px;

}

.agenda div p span {

font-size: 12px;
    }

}

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

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

@media screen and (max-width: 750px) {

.float {
        position: fixed;
        width: 45px;
        height: 45px;
        bottom: 20px;
        right: 18px;
        background-color: #25d366;
        color: #FFF;
        border-radius: 50px;
        text-align: center;
        font-size: 31px;
        box-shadow: 2px 2px 3px #999;
        z-index: 50;
    }

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

}

.telefonos {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.telefonos div {
    width: 80%;
    align-items: center;
    justify-content: center;
    margin: 20px;
    box-shadow: 0px 0px 20px #666;
}

@media screen and (max-width: 750px) {

.telefonos div {
        width: 95%;
        align-items: center;
        justify-content: center;
        margin: 5px;
        margin-bottom: 15px;
        margin-top: 15px;
        box-shadow: 0px 0px 20px #666;
    }

}

.menu-line {
  width: 100%;
  height: 4px;
    background-color: #fff;
  border-radius: 999px;
    transition: all 250ms cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.menu-line:first-child {
    animation: firstLinetoClose 240ms cubic-bezier(0.23, 0.95, 0.58, 1.37);
}

.open .menu-line:first-child {
    animation: firstLinetoOpen 240ms cubic-bezier(0.23, 0.95, 0.58, 1.37);
    animation-fill-mode: forwards;
}

@keyframes firstLinetoOpen {
    0% {
        transform: translateY(0);
    }

50% {
  transform: translateY(7px);
    }

100% {
  transform: translateY(9px) rotate(45deg);
    }
}

@keyframes firstLinetoClose {
    0% {
  transform: translateY(9px) rotate(0);
    }

100% {
        transform: translateY(0);
    }
}

.open .menu-line:nth-child(2) {
    opacity: 0;
}

.menu-line:last-child {
    animation: lastLinetoClose 240ms cubic-bezier(0.23, 0.95, 0.58, 1.37);
}

.open .menu-line:last-child {
    animation: lastLinetoOpen 240ms cubic-bezier(0.23, 0.95, 0.58, 1.37);
    animation-fill-mode: forwards;
}

@keyframes lastLinetoOpen {
    0% {
        transform: translateY(0);
    }

50% {
  transform: translateY(-7px);
    }

100% {
  transform: translateY(-9px) rotate(-45deg);
    }
}

@keyframes lastLinetoClose {
    0% {
  transform: translateY(-9px);
    }

100% {
        transform: translateY(0);
    }
}

.menu-burguer {
    display: none;
}

.menu-burguer2 div h1 {
    display: none;
}

.logos-pie div {
    display: flex;
    flex-direction: row;
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 10px;

}

.logos-pie div a {
    margin-right: 20px;
    width: 150px;
    text-align: center;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width: 750px) {

.footer-enlace {
        display: none;
    }

.logos-pie {
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: center;
    }

.logos-pie div {
        display: flex;
        width: 100%;
        flex-direction: column;
        text-align: center;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

.logos-pie div a {
        margin-right: 0px;
        margin: 10px;
        padding: 10px;
        width: 80%;
    }

.menu-burguer2 {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
      padding: 6px 10px;
        width: 100%;
        background: linear-gradient(#9b1fb4, #481153);

}

.menu-burguer2 div h1 {
        display: flex;
        font-family: 'Kameron', sans-serif;
        font-weight: 500;
        line-height: 1.5;

color: white;
        font-size: 16px;
        margin-left: 5px;
        margin-top: 0;
        border-radius: 5px;
    }

.menu-burguer {

width: 34px;
        height: 26px;
        display: flex;
        flex-direction: column;
      justify-content: center;
      gap: 5px;
        cursor: pointer;
        cursor: pointer;
    }

.menu-line {
      margin: 2px 0;
    }

.navegador {

position: fixed;
      top: var(--site-header-mobile-offset);
      bottom: auto;
      left: -320px;
        /* Escondemos nuestro menú con un valor negativo */
      width: min(82vw, 320px);
      height: calc(100vh - var(--site-header-mobile-offset));
      z-index: 1001;
      padding: 18px 16px 24px;
        background: linear-gradient(#9b1fb4, #481153);
        opacity: 0;
        transition: all 0.75s ease;
        font-size: 1.2em;
        overflow-y: auto;

}

.navegador a {
        display: block;
        text-decoration: none;
        padding: 10px;
        color: rgba(255, 255, 255, 0.75);
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transition: all ease 0.25s;
    }

.navegador a:hover {
        color: rgba(255, 255, 255, 1);
        border-bottom-color: rgba(255, 255, 255, 0.4);
    }

#menu_on {
        display: inline-block;
        position: relative;

z-index: 2;

}

#menu_on span {
        width: 100%;
        height: 4px;
        border-radius: 4px;
        display: block;
        position: absolute;
        background: #fff;
        transition: all 0.25s ease;
        /* Propiedades a animar | Tiempo | Tipo animación*/
        transform-origin: 0px 100%;
    }

#menu_on span:nth-child(2) {
        top: calc(50% - 2px);
    }

#menu_on span:nth-child(3) {
        bottom: 0;

}

.visible_menu span:nth-child(1) {
        transform: rotate(45deg) translate(-2px, 1px);
    }

.visible_menu span:nth-child(2) {
        opacity: 0;
    }

.visible_menu span:nth-child(3) {
        transform: rotate(-45deg) translate(-3px, 3px);
    }

.visible_menu .navegador {
        left: 0;
        opacity: 1;
    }

.visible_menu #content {
        transform: translateX(260px);
    }

}

/** Login **/

.logeo {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: center;
    margin-top: 50px;

}

.logeo .logeo2 {
    border: 4px solid rgb(154, 85, 174);
    border-radius: 10px;
    box-shadow: 0px 0px 20px #666;
}

.logeo form {
    display: flex;
    width: 20%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fafafa;

}

.logeo form div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 10px;

}

.logeo .logeo2 div label {
    text-transform: uppercase;
    border-radius: 5px;
    color: rgb(0, 0, 0);

font-family: 'Kameron', sans-serif;
    font-weight: 500;
    font-size: 15px;
    margin-top: 10px;
}

.logeo .logeo2 div input {
    font-family: 'Kameron', sans-serif;
    padding: 5px;
    font-size: 16px;
    margin-top: 0px;
    margin-bottom: 10px;
    border-radius: 5px;

}

.boton-logeo {
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(120, 58, 137);
    text-align: center;
    font-size: 20px;
    padding: 10px !important;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.boton-logeo:hover {
    text-align: center;
    background: rgb(159, 81, 180);
    box-shadow: 0px 0px 20px #666;
    transition: all 0.3s;
}

@media screen and (max-width: 750px) {

.logeo form {
        display: flex;
        width: 95%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #fafafa;

}

/* administrador */

.administrador {
    display: flex;
    align-items: center;
    width: 100%;
}

#accordion {
    width: 50%;
    margin-top: 50px;
    margin-bottom: 50px;
    box-shadow: 0px 0px 20px #666;
}

#accordion div {
    height: auto !important;
    text-align: center;
}

#accordion h3 {
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    font-size: 20px;
    justify-content: center;

}

#accordion img {
    width: 80%;
    margin: 10px;
}

#accordion input {

text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(120, 58, 137);
    text-align: center;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

#accordion input:hover {
    text-align: center;
    background: rgb(159, 81, 180);
    box-shadow: 0px 0px 20px #666;
    transition: all 0.3s;
}

.fecha-hora-admin p img {
    width: 20px !important;
}

.agenda-admin {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
   
}

.agendapordia-admin {
    display: flex;
    flex-direction: column;
    background-color: rgb(233, 233, 233);
    margin-top: 30px;
    text-align: left !important;
    align-items: left;
    justify-content: left;
    margin-bottom: 50px;
    box-shadow: 0px 0px 10px #666;
    padding: 5px;
    border-radius: 5px;
}

.agendapordia-admin h2 {
    font-size: 25px;
}

.agendapordia-admin p span {
    font-size: 13px;
    margin: 5px 0px 15px 0px;
    font-weight: 700;
    text-transform: uppercase;
}

.agendapordia-admin-titulo {
    margin-bottom: 15px;
}

.agendapordia-admin p {
    font-size: 13px;
}

.agendapordia-admin input {
    width: 100%;
}

.videoconferencia2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    border: 4px solid rgb(154, 85, 174);
    background-color: rgb(225, 178, 238);
    border-radius: 5px;
    box-shadow: 0 0 50px #666;
}

.videoconferencia2 h2 {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    background: rgb(154, 85, 174);
    text-align: center;
    font-size: 15px;
    padding: 15px;
    margin: 20px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.videoconferencia2 p {
    font-family: 'Kameron', sans-serif;
    font-weight: 500;
    line-height: 1.5;
    font-size: 15px;
    color: rgb(0, 0, 0);
    padding: 20px 30px 20px 30px;
}

.videoconferencia iframe {
    width: 100% !important;
    height: 250px;
}

.videoconferencia2 iframe {
    width: 100% !important;
    height: 250px;
    border: 4px solid rgb(6, 42, 71);
}

.videoconferencia2 .videoconferencia2-id {
   margin: 0px;
   background-color:rgb(140, 10, 216) ;
   width: 100%;
   font-size: 25px;
   padding: 5px;
   border-radius: none;
   border: none;
}

.youtube-admin {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.youtube-admin .youtube2 {
    display: flex;
    width: 90%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.noticias {
    display: flex;
    flex-flow: row wrap-reverse;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.noticias-admin {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.noticias-admin input {
   
    margin: 10px;
}

.noticias2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80%;
    margin: 30px 0px 0px 0px;
    background-color: #f7f7f7;

border: 4px solid rgb(140, 10, 216);
    box-shadow: 0 0 20px #666;
}

.noticias2 img {
    width: 100% !important;
}

.noticias2 p img {
    width: 50%;
    align-items: center;

}

.noticias2 iframe {
    width: 100%;
    margin: 20px !important;
}

.noticias2 h2 {
    font-family: 'Kameron', sans-serif;
    font-size: 20px;
    margin: 20px;
    text-transform: uppercase;
}

.noticias2 h3 {
    font-family: 'Kameron', sans-serif;
    font-size: 16px;
    margin: 5px 20px 20px 20px;
    text-align: center;
    align-items: center;
    font-weight: 400;
    justify-content: center;
    text-decoration: none;
}
.noticias2 p {
    font-family: 'Kameron', sans-serif;
    font-size: 14px;
    margin: 10px;
    text-align: justify;
    padding: 10px;
}

.noticias2 p span {
    font-size: 15px;
    padding: 20px 0px 20px 0px;
    font-weight: 700;
    margin: 20px 0px 20px 0px;
}

.agregar-noti {
    margin-top: 50px;
    margin-bottom: 50px;
}

.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
    border: 1px solid rgb(190, 99, 243) !important;
    background: rgb(140, 10, 216) !important;
    font-weight: normal;
    color: #ffffff;
}

.bad {
    position: relative;
    top: 50%;
}

#error {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#error h1 {
    font-family: 'Kameron', sans-serif;
    font-size: 18px;

text-transform: uppercase;
}

#aportada7 {
    background-image: url(../imagen/4931029.jpg);
    margin-top: 20px;
    border: 5px solid #e714d6;
    box-shadow: 0px 0px 20px #666;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    display: none;
}

#aportada7 label {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(24, 137, 230);
    text-align: center;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

#aportada7 input {

width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background: rgb(94, 36, 230);
    text-align: center;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid rgb(77, 30, 187);
    border-radius: 5px;
}

#aportada7 input:hover {
    background: rgb(112, 58, 239);
}

#aportada7 button {
    background-color: #b82ad4;
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

#aportada7 button:hover {
    background-color: #9823b0;
}

#aportada7 input {

#aportada7 input:hover {
    background: rgb(112, 58, 239);
}

#aportada7 button:hover {
    background-color: #9823b0;
}

#aagenda {
    display: none;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}

#aagenda label {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: none;
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);

}

#aagenda input {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;

}

#aagenda input:hover {
    background-color: white;
}

#aagenda textarea {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
    height: 250px !important;
}

#aagenda .botonagenda {
    background-color: #b82ad4;
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

#aagenda .botonagenda:hover {
    background-color: #cb2deb;
}

.linkagenda iframe {
    width: 100%;
    height: 200px !important;
}

#avideosyt {
    display: none;
    flex-direction: column;
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
}

#avideosyt label {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: none;
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);

}

#avideosyt input {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;

}

#avideosyt input:hover {
    background-color: white;
}

#avideosyt textarea {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
    height: 250px !important;
}

.admin-portada {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center;
}

.admin-portada div {
    
   
    margin-top: 20px;
}

.admin-portada div h2 {
    background-color: rgb(228, 228, 228);
    font-size: 25px;
}

.admin-portada input {
    align-items: center;
    width: 50%;
}

.admin-portada img {
    width: 50% !important;
}

#agregar {
    width: 100%;
    background-color: rgb(140, 10, 216) !important;
    ;
}

#agregar7 {
    width: 100%;
    background-color: rgb(140, 10, 216) !important;
    ;
}

#agregar2 {
    
    background-color: rgb(140, 10, 216) !important;
    ;
}

#agregar3 {
    
    background-color: rgb(140, 10, 216) !important;
    ;
}

.youtubeboton {

align-items: center;
    text-align: center;
    background-color: #b82ad4 !important;
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center !important;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white !important;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

@media screen and (max-width: 750px) {
    #accordion {
        width: 90%;
        margin-top: 50px;
        margin-bottom: 50px;
        box-shadow: 0px 0px 20px #666;
    }

.admin-portada img {
        width: 90% !important;
    }

.linkagenda iframe {
        width: 90%;
    }

.youtube-admin .youtube2 {
        display: flex;
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.videoconferencia2 {
        display: block;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 10px;
margin-bottom: 0px;
    }

.noticias2 {
        width: 90%;
    }

.noticias2 h2 {
        font-family: 'Kameron', sans-serif;
        font-size: 15px;
        margin: 20px;
        text-transform: uppercase;
    }

.noticias2 h3 {
        font-family: 'Kameron', sans-serif;
        font-size: 13px;
        margin: 5px ;
        text-align: center;
        align-items: center;
        font-weight: 400;
        justify-content: center;
        text-decoration: none;
    }

.youtube2 input {
       margin-top: 0px !important;
margin-bottom: 25px !important;
    }

#avideosyt {
        display: none;
        flex-direction: column;
        width: 100%;
    }

#avideosyt input {
        width: 100%;
        margin: 0px !important;
    }

#avideosyt label {
        width: 100%;
    }

#avideosyt textarea {
        width: 100%;
    }
}

#noticiasform {
    width: 100%;
    display: none;
    flex-direction: column;
    text-align: center;
    align-items: center;
    justify-content: center;
}

#accordion2 {
    display: flex;
    flex-direction: column;
    width: 80%;
}

#accordion2 div {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

}

#accordion2 h3 {
    background-color: rgb(154, 85, 174);
    color: white;
}

#accordion2 div input {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

#accordion2 div button {

#noticiasform input {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

#noticiasform input:hover {
    background-color: white;
}

#noticiasform label {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: none;
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);
}

.BOTON_NOTICIASSUBIR {
    align-items: center;
    text-align: center;
    background-color: #b82ad4 !important;
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center !important;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: white !important;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

#noticiasform textarea {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
    height: 250px !important;
}

.cargaexitosa {
    width: 100%;
    display: flex;
margin-top: 50px;
margin-bottom: 50px;
align-items: center;
justify-content: center;
text-align: center;
}

.cargaexitosa div {
    width: 50%;
    display: flex;
    background-color: white;
    flex-direction: column;
    border: 5px solid #cb2deb;
    box-shadow: 0px 0px 20px #665;
    border-radius: 10px;
    justify-content: center;
text-align: center;
align-items: center;
}

.cargaexitosa div h2 {
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 600;
    line-height: 1.5;
    background-color: none;
    text-align: left;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);
}

.cargaexitosa div a {
    align-items: center;
    text-align: center;
    background-color: #b82ad4 !important;
    width: 50%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center !important;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: white !important;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

.cargaexitosa div a:hover {
    border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 0px 20px #666;
    transition: all 0,3s;
}

.borrar {
    display: flex;
    flex-direction: column;

width: 50%;
    border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 0px 20px #666;
    align-items: center;
    border-radius: 10px;
    background-color: white;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

.borrar label {
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    padding: 10px;
    background-color: none;
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);
}

.prefooter {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    padding: 20px 0px;
    background-color: white;
    border-top:  5px solid #861c9b;
}
.prefooter a img {
    width: 160px;
}

.borrar .borrarnum {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white !important;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0) !important;
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.noticia_id {
    margin: 0px !important;
    padding: 10px;
    width: 100%;
    background-color: rgb(154, 85, 174);
    color: white;
}

@media screen and (max-width: 750px)  {
    .borrar {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: 3px solid rgb(154, 85, 174);
        box-shadow: 0px 0px 20px #666;
        align-items: center;
        border-radius: 10px;
        background-color: white;
        text-align: center;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

.prefooter {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 40px 0px;
    background-color: white;
    border-top:  5px solid #861c9b;
}

.prefooter a {
    margin: 20px 0px;
}
    
    
    .borrar label {
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        padding: 10px;
        background-color: none;
        text-align: center;
        font-size: 15px;
        margin-top: 10px;
        margin-bottom: none;
        color: rgb(0, 0, 0);
    }
    
    
    .borrar .borrarnum {
        width: 80%;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-weight: 400;
        line-height: 1.5;
        background-color: white !important;
        text-align: left;
        font-size: 13px;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 20px;
        color: rgb(0, 0, 0) !important;
        border: 2px solid rgb(154, 85, 174);
        border-radius: 5px;
    }

.cargaexitosa div {
       width: 90%;
margin: 0px;
margin-top: 40px;
margin-bottom: 40px;

}

.cargaexitosa div h2 {
        font-size: 16px;
        text-align: center;
        justify-content: center;
        align-items: center;
    }

.cargaexitosa div a {
        font-size: 15px;
    }
}

.actualizarrnoti {
    width: 100%;
    align-items: center;
}

.actualizarnoticia {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.actualizarnoticia input {
    width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 20px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
}

.actualizarnoticia textarea {

width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: white;
    text-align: left;
    font-size: 17px;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
    color: rgb(0, 0, 0);
    border: 2px solid rgb(154, 85, 174);
    border-radius: 5px;
    height: 250px !important;
}

.actualizarnoticia label {

width: 80%;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    background-color: none;
    text-align: left;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: none;
    color: rgb(0, 0, 0);
}

.actualizarnoticia  .botonactulizar {

.actualizarnoticia  .botonactulizar:hover {

border: 3px solid rgb(154, 85, 174);
    box-shadow: 0px 0px 20px #666;
    
    cursor: pointer;
    transition: all 0,3s;
}

.usuarioclase {
    align-items: center;
    text-align: center;
    background-color: #94478e !important;
    width: auto;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    text-align: center !important;
    font-size: 20px;
    padding: 10px;
    margin-top: 30px;
    margin-bottom: 5px;
    color: white !important;
    border: 2px solid #cb2deb;
    border-radius: 5px;
}

.imagen-de-encontrar {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 35%;
}

.imagen-de-encontrar img {
    width: 100%;
}

.implement {

}

.implement img{
    width: 500px;
  
    }

.obser2 {
        margin: 0px;
        padding: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
   align-items: center;
    flex-direction: row;
    }
    
   
    
    .observatoriodesen {
        width: 50%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0px;
        padding: 0px;
    
    }

@media screen and (max-width: 1000px) {

.principal {
        display: flex;
        flex-direction: column;

}

.principal div {
        width: 90% !important;
        margin: 1rem !important;
    }

.obser2 {
        margin: 0px;
        padding: 0px;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    flex-direction: column;
    }

.observatoriodesen {
        width: 90%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 20px 0px;
        padding: 0px;
    
    }
}

.lamica {
    width: 100%;
    display: flex;
    justify-content: center;
    align-content: center;
}

.compendio {
    position: relative;
    top: 105px;
    left: 175px;
}

.compendio a {
    display: flex;
    border: 2px solid rgb(140, 10, 216);
    border-radius: 20px;
    padding: 10px;
    background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
    text-align: center;
    text-decoration: none;
    font-family: 'Kameron', sans-serif;
    font-size: 16px;
    color: #ffffff;
    margin: 5px;
}

.boton-verde-contacto {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 50px 0px;
}

.boton-verde-contacto a{
  padding: 8px 30px;
  font-size: 25px;
  text-decoration: none;
  color: white;
  background-color: #3d8142;
  border-radius: 10px;
  font-weight: 700
}

.boton-verde-contacto a:hover{
box-shadow: 0px 0px 7px #666;
background-color: #3d8142;
  }

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

.img-alejan {
    border-radius: 110px;
}

.micaela5 img {
    width: 60%;
    box-shadow: 0px 0px 7px #666;
    border-radius: 10px;
}

.compendio a:hover {
    box-shadow: 0px 0px 10px #666;
    transition: all 0.3s;
}

@media screen and (max-width: 750px)  {

.compendio {
        position: relative;
        top: 100px;
        left: 0px;
    }
    
    .compendio a {
        display: flex;
        border: 2px solid rgb(140, 10, 216);
        border-radius: 20px;
        padding: 10px;
        background: linear-gradient(rgb(193, 136, 226), rgb(140, 10, 216));
        text-align: center;
        text-decoration: none;
        font-family: 'Kameron', sans-serif;
        font-size: 13px;
        color: #ffffff;
        margin: 5px;
    }

.boton-verde-rosa {
        width: 90%;
        margin-bottom: 20px;
    }

.boton-verde-mat {
        width: 90%;
    }

}

.image-container45 {
    background-color: white;
    border-radius: 50px;
    padding: 5px;
}

/* =========================
   Ley Micaela (lm-*) UI
   Clases nuevas para evitar pisadas
========================= */

.lm-wrap{
  padding: 34px 16px;
}

.lm-hero{
  max-width: 1100px;
  margin: 0 auto 18px auto;
  text-align: center;
}

.lm-title{
  font-family: 'Oswald', 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .6px;
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
}

.lm-law{
  font-weight: 700;
  opacity: .92;
}

.lm-subtitle{
  max-width: 820px;
  margin: 10px auto 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

.lm-grid{
  max-width: 1100px;
  margin: 22px auto 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 22px;
  align-items: start;
}

.lm-banner-side{
  position: sticky;
  top: 20px;
}

.lm-banner-side__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
}

@media (max-width: 760px){
  .lm-grid{
    grid-template-columns: 1fr;
  }
  .lm-banner-side{
    position: static;
  }
}

.lm-card{
  border-radius: 18px;
  padding: 18px;
  background: rgba(255,255,255,.70);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.06);
}

.lm-card--media{
  padding: 16px;
  display: grid;
  gap: 12px;
}

.lm-img{
  width: 100%;
  height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

/* Botón sin definir colores -> toma los tuyos por defecto */
.lm-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  padding: 12px 14px;
  border-radius: 12px;
  font-size: 15px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lm-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,.16);
}

.lm-card--text{
  padding: 20px;
}

.lm-text{
  margin: 0 0 14px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.78;
  opacity: .92;
}

.lm-section-title{
  margin: 10px 0 10px 0;
  font-family: 'Oswald', 'Open Sans', sans-serif;
  font-size: 18px;
  letter-spacing: .4px;
}

.lm-links{
  display: grid;
  gap: 10px;
}

.lm-link{
  display: flex;
  gap: 10px;
  align-items: center;
  text-decoration: none;
  padding: 12px 12px;
  color: rgb(8, 83, 1);
  font-size: 15px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lm-link i{
  font-size: 18px;
}

.lm-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(0,0,0,.12);
}

/* Banner inferior */
.lm-banner{
  max-width: 1100px;
  margin: 26px auto 0 auto;
  padding: 0 16px;
}

.lm-banner__img{
  width: 70%;
  margin: auto;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
}

/* Volver atrás */
.lm-back{
  max-width: 1100px;
  margin: 24px auto 0 auto;
  padding: 0 16px 24px 16px;
  display: flex;
  justify-content: flex-end;
}

.lm-back__btn{
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  box-shadow: 0 10px 18px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease;
}

.lm-back__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,.16);
}

@media (max-width: 980px){
  .lm-grid{
    grid-template-columns: 1fr;
  }
  .lm-back{
    justify-content: center;
  }
}

/* =========================
   Header Ley Micaela – ESTILO
========================= */

/* ===========================
   HERO CARD COMBINADA
   Título + Imagen lado a lado
=========================== */
.lm-hero-card{
  max-width: 1100px;
  margin: 0 auto 24px auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 0;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(6px);
  box-shadow: 0 10px 34px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
}

.lm-hero-card::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  background: var(--idx-acento, #9a55ae);
}

.lm-hero-card__text{
  padding: 36px 32px 32px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
}

.lm-hero-card__text .lm-title-main{
  font-size: clamp(26px, 3vw, 40px);
  margin: 0;
}

.lm-hero-card__text .lm-title-sub{
  margin: 0;
  max-width: 100%;
  font-size: 15px;
  line-height: 1.75;
  opacity: .87;
}

.lm-hero-card__media{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 24px;
  background: rgba(154,85,174,.06);
  border-left: 1px solid rgba(154,85,174,.12);
}

.lm-hero-card__media .lm-img{
  width: 100%;
  max-width: 260px;
  height: auto;
  border-radius: 14px;
  display: block;
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

.lm-hero-card__media .lm-btn{
  width: 100%;
  max-width: 260px;
}

@media (max-width: 760px){
  .lm-hero-card{
    grid-template-columns: 1fr;
  }
  .lm-hero-card__media{
    border-left: none;
    border-top: 1px solid rgba(154,85,174,.12);
    padding: 20px;
  }
  .lm-hero-card__text{
    padding: 24px 20px 20px 20px;
  }
}

/* card full-width dentro del grid */
.lm-card--full{
  grid-column: 1 / -1;
}

.lm-title-box{
  max-width: 1100px;
  margin: 0 auto 28px auto;
  padding: 26px 20px 22px 20px;
  text-align: center;
  position: relative;
}

/* Línea institucional arriba */
.lm-title-box::before{
  content: "";
  display: block;
  width: 90px;
  height: 4px;
  margin: 0 auto 14px auto;
  border-radius: 4px;
  opacity: .9;
  background: currentColor; /* usa tu color actual */
}

/* Título principal */
.lm-title-main{
  font-family: 'Oswald', 'Open Sans', sans-serif;
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 700;
  letter-spacing: 1.2px;
  margin: 0;
  line-height: 1.1;
  text-transform: uppercase;
}

/* Número de ley con jerarquía secundaria */
.lm-title-main span{
  font-weight: 600;
  letter-spacing: .6px;
  opacity: .85;
}

/* Subtítulo */
.lm-title-sub{
  max-width: 820px;
  margin: 10px auto 0 auto;
  font-family: 'Open Sans', sans-serif;
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

/* Línea inferior sutil */
.lm-title-box::after{
  content: "";
  display: block;
  width: 140px;
  height: 1px;
  margin: 18px auto 0 auto;
  background: currentColor;
  opacity: .25;
}

/* Responsive */
@media (max-width: 600px){
  .lm-title-box{
    padding: 22px 14px 18px 14px;
  }
}

/* =========================
   CAPACITACIONES (cap-*)
   Clases nuevas - no se pisan
   Mantiene paleta (sin definir colores fuertes)
========================= */

.cap-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 8px 16px;
}

/* Hero institucional */
.cap-hero{
  text-align: center;
  padding: 22px 16px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

.cap-hero__title{
  margin: 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
}

.cap-hero__subtitle{
  margin: 10px auto 0 auto;
  max-width: 820px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

/* Grid principal */
.cap-grid{
  margin-top: 18px;
  display: grid;
  gap: 18px;
}

.cap-grid--2{
  grid-template-columns: 1fr 1fr;
}

/* Card talleres */
.cap-card{
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  overflow: hidden;
  display: grid;
  gap: 12px;
}

.cap-card__head{
  padding: 18px 18px 0 18px;
}

.cap-card__title{
  margin: 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 18px;
  line-height: 1.25;
}

.cap-card__text{
  margin: 10px 0 0 0;
  font-family: 'Open Sans',sans-serif;
  font-size: 14.5px;
  line-height: 1.75;
  opacity: .92;
}

/* Botones / links */
.cap-actions{
  padding: 0 18px 6px 18px;
  display: grid;
  gap: 10px;
  height: max-content;
}

.cap-btn{
  text-decoration: none;
  padding: 12px 12px;
  border-radius: 12px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 700;
  color: #5c8811;
  font-size: 15px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cap-btn3  {
      color: #03417F;
      
}

.cap-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,.14);
}

.cap-btn--ghost{
  /* sin color fijo, mantiene tu paleta actual */
}

/* Imagen */
.cap-media{
  padding: 12px 18px 18px 18px;
}

.cap-media__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
}

/* Sección título videos */
.cap-section-title{
  max-width: 1100px;
  margin: 26px auto 10px auto;
  padding: 0 16px;
  text-align: center;
}

.cap-section-title__h{
  margin: 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-size: 20px;
  letter-spacing: .9px;
  text-transform: uppercase;
}

.cap-section-title__p{
  margin: 8px auto 0 auto;
  max-width: 760px;
  font-family: 'Open Sans',sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  opacity: .85;
}

/* Videos grid */
.cap-videos{
  max-width: 1100px;
  margin: 12px auto 0 auto;
  padding: 0 16px 20px 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cap-video-card{
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  overflow: hidden;
  padding: 14px;
}

.cap-video-card__title{
  margin: 2px 0 10px 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-size: 16px;
  letter-spacing: .4px;
  line-height: 1.25;
}

/* Embed responsive */
.cap-video-embed{
  position: relative;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.14);
  background: rgba(255,255,255,.9);
}

/* Si tu DB guarda iframe de YouTube */
.cap-video-embed iframe,
.cap-video-embed video,
.cap-video-embed embed,
.cap-video-embed object{
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  display: block;
  border: 0;
}

.cap-video-card__desc{
  margin: 10px 0 0 0;
  font-family: 'Open Sans',sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  opacity: .9;
}

/* Volver */
.cap-back{
  max-width: 1100px;
  margin: 8px auto 22px auto;
  padding: 0 16px;
  display: flex;
  justify-content: flex-end;
}

.cap-back__btn{
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.cap-back__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(0,0,0,.14);
}

/* Responsive */
@media (max-width: 980px){
  .cap-grid--2{
    grid-template-columns: 1fr;
  }
  .cap-videos{
    grid-template-columns: 1fr;
  }
  .cap-back{
    justify-content: center;
  }
}

/* =========================
   PATCH ACENTO OFICIAL
   Rosa institucional: #9a55ae
========================= */

:root{
  --cap-acento: #9a55ae;
}

/* Línea institucional en el hero */
.cap-hero{
  position: relative;
}

.cap-hero::before{
  content: "";
  display: block;
  width: 96px;
  height: 4px;
  margin: 0 auto 12px auto;
  border-radius: 4px;
  background: var(--cap-acento);
}

/* Acento superior en cards (talleres y videos) */
.cap-card,
.cap-video-card{
  position: relative;
}

.cap-card::before,
.cap-video-card::before{
  content:"";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 6px;
  background: var(--cap-acento);
  opacity: .95;
}

/* Botones/links con acento */
.cap-btn{
  border: 1px solid rgba(154, 85, 174, .22);
}

.cap-btn:hover{
  border-color: rgba(154, 85, 174, .55);
  box-shadow: 0 14px 24px rgba(154, 85, 174, .18);
}

/* Focus accesible (teclado) */
.cap-btn:focus,
.cap-btn:focus-visible,
.cap-link:focus,
.cap-link:focus-visible{
  outline: 3px solid rgba(154, 85, 174, .35);
  outline-offset: 2px;
}

/* Títulos: un detalle de subrayado suave */
.cap-card__title,
.cap-video-card__title{
  display: inline-block;
  position: relative;
  padding-bottom: 6px;
}

.cap-card__title::after,
.cap-video-card__title::after{
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 42%;
  height: 3px;
  border-radius: 3px;
  background: var(--cap-acento);
  opacity: .30;
}

/* Botón volver con acento */
.cap-back__btn{
  border: 1px solid rgba(154, 85, 174, .28);
}

.cap-back__btn:hover{
  border-color: rgba(154, 85, 174, .60);
  box-shadow: 0 14px 24px rgba(154, 85, 174, .18);
}

/* =========================
   MATERIALES (mat-*)
   Acento oficial: #9a55ae
   Clases nuevas - no pisa CSS viejo
========================= */

:root{
  --mat-acento: #9a55ae;
}

.mat-wrap{
  max-width: 1100px;
  margin: 0 auto;
  padding: 28px 16px 18px 16px;
}

/* HERO */
.mat-hero{
  text-align: center;
  padding: 22px 16px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  position: relative;
 
}

.mat-hero::before{
  content:"";
  display:block;
  width: 96px;
  height: 4px;
  margin: 0 auto 12px auto;
  border-radius: 6px;
  background: var(--mat-acento);
}

.mat-hero__title{
  margin: 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
}

.mat-hero__subtitle{
  margin: 10px auto 0 auto;
  max-width: 820px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

/* GRID */
.mat-grid{
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1.3fr 1fr;
}

/* CARD */
.mat-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.mat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:6px;
  background: var(--mat-acento);
  opacity: .95;
}

.mat-card__title{
  margin: 6px 0 12px 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: .5px;
  font-size: 18px;
  line-height: 1.2;
}

/* LISTA DE LINKS */
.mat-list{
  display: grid;
  gap: 10px;
}

.mat-list--compact{
  gap: 12px;
}

.mat-item{
  display: flex;
  gap: 10px;
  color: #5e24e6;
  font-size: 15px;
  align-items: center;
  text-decoration: none;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(154, 85, 174, .18);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mat-item:hover{
  transform: translateY(-1px);
  border-color: rgba(154, 85, 174, .55);
  box-shadow: 0 14px 24px rgba(154, 85, 174, .16);
}

.mat-mini-ico{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* CTA GRID */
.mat-card--cta{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
}

.mat-cta-grid{
  display: grid;
  gap: 12px;
}

.mat-cta{
  display: flex;
  gap: 12px;
  align-items: center;
  text-decoration: none;
  padding: 14px;font-size: 15px;
  border-radius: 14px;
  border: 1px solid rgba(154, 85, 174, .18);
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mat-cta:hover{
  transform: translateY(-1px);
  border-color: rgba(154, 85, 174, .55);
  box-shadow: 0 14px 24px rgba(154, 85, 174, .16);
}

.mat-cta__icon{
  width: 54px;
  height: 54px;
  border-radius: 14px;
  background: rgba(154, 85, 174, .10);
  display: grid;
  place-items: center;
  flex: 0 0 54px;
  border: 1px solid rgba(154, 85, 174, .18);
}

.mat-cta__icon img{
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.mat-cta__content{
  display: grid;
  gap: 2px;
}

.mat-cta__title{
  font-family: 'Open Sans',sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
}

.mat-cta__desc{
  font-family: 'Open Sans',sans-serif;
  font-size: 13.5px;
  opacity: .85;
}

/* VOLVER */
.mat-back{
  max-width: 1100px;
  margin: 8px auto 22px auto;
  padding: 0 16px;
  display: flex;
  justify-content: flex-end;
}

.mat-back__btn{
  text-decoration: none;
  padding: 10px 14px;
  border-radius: 12px;
  font-family: 'Open Sans',sans-serif;
  font-weight: 700;
  border: 1px solid rgba(154, 85, 174, .28);
  background: rgba(255,255,255,.85);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mat-back__btn:hover{
  transform: translateY(-1px);
  border-color: rgba(154, 85, 174, .60);
  box-shadow: 0 14px 24px rgba(154, 85, 174, .18);
}

/* RESPONSIVE */
@media (max-width: 980px){
  .mat-grid{
    grid-template-columns: 1fr;
  }
  .mat-card--cta{
    grid-column: auto;
    grid-row: auto;
  }
  .mat-back{
    justify-content: center;
  }
}

/* =========================
   INDEX (idx-*) - 2x2
   Acento oficial: #9a55ae
========================= */
:root{
  --idx-acento: #9a55ae;
}

.idx-wrap{
  max-width: 90%;
  margin: 0 auto;
  padding: 18px 16px 24px 16px;
}

/* HERO */
.idx-hero{
  text-align: center;
  padding: 22px 16px 18px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  position: relative;
  margin-top: 18px;
}

.idx-hero::before{
  content:"";
  display:block;
  width: 96px;
  height: 4px;
  margin: 0 auto 12px auto;
  border-radius: 6px;
  background: var(--idx-acento);
}

.idx-hero__title{
  margin: 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
}

.idx-hero__subtitle{
  margin: 10px auto 0 auto;
  max-width: 820px;
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  line-height: 1.7;
  opacity: .85;
}

/* GRID 2x2 */
.idx-grid{
  margin-top: 18px;
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  grid-template-areas:
    "quees equipo"
    "datos .";
}

/* asignación de áreas */
#card-que-es{ grid-area: quees; }
#card-equipo{ grid-area: equipo; }
#card-datos{ grid-area: datos; }

/* Imagen principal: sin padding, imagen completa sin recorte */
#card-que-es{
  padding: 0;
  overflow: hidden;
}

#card-que-es img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
}

/* Equipo: se estira al mismo alto que la imagen gracias a align-items:stretch en el grid */
#card-equipo{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#card-equipo .idx-team{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}

#card-equipo .idx-person{
  flex: 1;
  align-content: center;
}

/* Responsive 1 columna (orden lógico) */
@media (max-width: 980px){
  .idx-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "quees"
      "equipo"
      "datos";
  }

#card-que-es img{
    height: auto;
  }

#card-equipo{
    height: auto;
  }

#card-equipo .idx-team{
    flex: none;
  }

#card-equipo .idx-person{
    flex: none;
  }
}

/* CARD */
/* CARD */
.idx-card{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 16px;
  position: relative;
  overflow: hidden;

/* 🔥 CLAVE: eliminar esto */
  /* height: 100%; */
  /* display: flex; */
  /* flex-direction: column; */
}
.idx-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:6px;
  background: var(--idx-acento);
  opacity: .95;
}

.idx-card__title{
  margin: 6px 0 10px 0;
  font-family: 'Oswald','Open Sans',sans-serif;
  font-weight: 700;
  letter-spacing: .6px;
  font-size: 25px;
  line-height: 1.2;
  text-transform: uppercase;
}

.idx-card__text{
  margin: 0;
  font-family: 'Open Sans',sans-serif;
  font-size: 16px;
  line-height: 1.75;
  opacity: .92;
}

/* Split texto + imagen */
.idx-split{
  display: grid;
  grid-template-columns: 1fr 140px;
  gap: 14px;
  align-items: center;
}

.idx-illus{
  width: 140px;
  height: auto;
  display: block;
  justify-self: end;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  background: rgba(255,255,255,.6);
}

/* Lista con íconos */
.idx-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.idx-list__item{
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  font-size: 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(154, 85, 174, .18);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.idx-ico{
  width: 18px;
  height: 18px;
  display: inline-block;
}

/* Equipo */
.idx-team{
  display: grid;
  gap: 12px;
}

.idx-person{
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(154, 85, 174, .18);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.idx-person__img{
  width: 58px;
  height: 58px;
  object-fit: cover;
  border-radius: 14px;
  border: 2px solid rgba(154, 85, 174, .35);
  background: rgba(255,255,255,.9);
}

.idx-person__name{
  font-family: 'Open Sans',sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
}

.idx-person__role{
  font-family: 'Open Sans',sans-serif;
  font-size: 15px;
  line-height: 1.5;
  opacity: .85;
  margin-top: 2px;
}

/* Checks */
.idx-checks{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.idx-checks li{
  position: relative;
  padding: 12px 12px 12px 44px;
  border-radius: 12px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(154, 85, 174, .18);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
  font-family: 'Open Sans',sans-serif;
  font-size: 14.5px;
  line-height: 1.7;
  opacity: .92;
}

.idx-checks li::before{
  content:"✓";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(154, 85, 174, .14);
  border: 1px solid rgba(154, 85, 174, .28);
  color: var(--idx-acento);
  font-weight: 900;
}

/* Agenda */
.idx-agenda{
  display: grid;
  gap: 14px;
  max-height: 520px;   /* 🔒 límite visual */
  overflow-y: auto;    /* scroll interno */
  padding-right: 6px;
}

.idx-agenda__item{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
  padding: 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(154, 85, 174, .18);
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.idx-agenda__media{
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  background: rgba(255,255,255,.9);
}

.idx-agenda__media iframe,
.idx-agenda__media video,
.idx-agenda__media embed,
.idx-agenda__media object{
  width: 100% !important;
  aspect-ratio: 16 / 9;
  height: auto !important;
  display: block;
  border: 0;
}

.idx-meta{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idx-meta__chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(154, 85, 174, .10);
  border: 1px solid rgba(154, 85, 174, .22);
  font-family: 'Open Sans',sans-serif;
  font-weight: 700;
  font-size: 13px;
}

.idx-agenda__title{
  font-family: 'Open Sans',sans-serif;
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 6px;
}

.idx-agenda__desc{
  font-family: 'Open Sans',sans-serif;
  font-size: 14px;
  line-height: 1.65;
  opacity: .88;
  margin-top: 4px;
}

/* Flyer */
.idx-card--flyer{
  padding-bottom: 18px;
}

.idx-flyer{
  width: 100%;
  height: auto;
  display: block;
  margin-top: 10px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

/* Responsive */
@media (max-width: 980px){
  .idx-grid{
    grid-template-columns: 1fr;
  }
  .idx-split{
    grid-template-columns: 1fr;
  }
  .idx-illus{
    justify-self: center;
    width: 120px;
  }
  .idx-agenda{
    max-height: none;
    overflow: visible;
  }
}

/* AGENDA: no puede estirarse infinito */
.idx-card:has(.idx-agenda){
  max-height: 640px;
}

/* =========================
   AJUSTE EQUIPO DE TRABAJO
   Más presencia visual
========================= */

/* Card completa */
.idx-card .idx-team{
  gap: 16px;
}

/* Cada persona */
.idx-person{
  grid-template-columns: 104px 1fr; /* antes 58px */
  padding: 16px;
}

/* Imagen */
.idx-person__img{
  width: 104px;
  height: 104px;
  border-radius: 18px;
  border-width: 3px;
}

/* Nombre */
.idx-person__name{
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* Rol */
.idx-person__role{
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 4px;
}

/* En desktop grande, todavía mejor */
@media (min-width: 1200px){
  .idx-person{
    grid-template-columns: 124px 1fr;
  }

.idx-person__img{
    width: 124px;
    height: 124px;
  }

.idx-person__name{
    font-size: 17.5px;
  }

.idx-person__role{
    font-size: 15px;
  }
}

/* =========================
   FIX ICONOS "¿CÓMO LO HACEMOS?"
   Evita que se mezclen estilos viejos
========================= */

/* reseteo total del item */
.idx-checks li{
  background-image: none !important;
}

/* si por accidente quedó algún <img> dentro, lo ocultamos */
.idx-checks li img{
  display: none !important;
}

/* el circulito check perfecto (pisamos lo anterior por las dudas) */
.idx-checks li::before{
  content: "✓" !important;
  position: absolute !important;
  left: 14px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;

width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;

display: grid !important;
  place-items: center !important;

background: rgba(154, 85, 174, .14) !important;
  border: 1px solid rgba(154, 85, 174, .28) !important;
  color: #9a55ae !important;

font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

/* por si un CSS viejo mete otro pseudo-elemento */
.idx-checks li::after{
  content: "" !important;
  display: none !important;
}

/* =========================
   SLIDER DE NOVEDADES
   Una sola card – rotación automática
========================= */

.idx-flyer-slider{
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 16px;
  margin-top: 10px;
}

/* cada imagen */
.idx-flyer-slide{
  width: 100%;
  height: auto;
  display: none;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

/* visible */
.idx-flyer-slide.is-active{
  display: block;
}

/* transición suave */
.idx-flyer-slide{
  animation: idxFade .6s ease;
}

@keyframes idxFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

/* =========================
   NOVEDADES: carrusel + fechas + navegación
========================= */

.idx-flyer-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.idx-flyer-actions{
  display: flex;
  gap: 10px;
}

.idx-flyer-btn{
  width: 38px;
  height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(154, 85, 174, .28);
  background: rgba(255,255,255,.85);
  color: #9a55ae;
  font-weight: 900;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.08);
}

.idx-flyer-btn:hover{
  background: rgba(154, 85, 174, .10);
}

.idx-flyer-slider{
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 16px;
  margin-top: 10px;
  outline: none;
}

.idx-flyer-slide{
  display: none;
  margin: 0;
  position: relative;
}

.idx-flyer-slide.is-active{
  display: block;
  animation: idxFade .6s ease;
}

@keyframes idxFade{
  from{ opacity: 0; }
  to{ opacity: 1; }
}

.idx-flyer-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
}

.idx-flyer-caption{
  position: absolute;
  left: 14px;
  bottom: 12px;
  display: flex;
  gap: 10px;
}

.idx-flyer-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  border: 1px solid rgba(154, 85, 174, .25);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  font-family: 'Open Sans',sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #222;
}

/* Nav de fechas (chips) */
.idx-flyer-nav{
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.idx-flyer-chip{
  border: 1px solid rgba(154, 85, 174, .22);
  background: rgba(255,255,255,.85);
  color: #222;
  padding: 8px 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Open Sans',sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.idx-flyer-chip:hover{
  background: rgba(154, 85, 174, .10);
}

.idx-flyer-chip.is-active{
  background: rgba(154, 85, 174, .18);
  border-color: rgba(154, 85, 174, .35);
  color: #111;
}

/* =========================
   SLIDER PORTADA (nuevo)
   Imágenes vertical/horizontal normalizadas
========================= */

.idx-hero-slider{
  max-width: 1100px;
  margin: 18px auto 0 auto;
  padding: 0 16px;
  position: relative;
}

.idx-hero-track{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.65);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 30px rgba(0,0,0,.16);

/* 🔥 altura “institucional”: no ocupa toda la pantalla */
  height: clamp(260px, 42vw, 420px);
}

/* cada slide */
.idx-hero-slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s ease;
}

.idx-hero-slide.is-active{
  opacity: 1;
  pointer-events: auto;
}

/* imagen normalizada: vertical/horizontal => se recorta lindo */
.idx-hero-slide img{
  width: 100%;
  height: 100%;
  display: block;

object-fit: contain;       /* ✅ muestra la imagen completa */
  object-position: center;
  background: rgba(255,255,255,.85); /* relleno prolijo */
}

/* Flechas */
.idx-hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(154, 85, 174, .30);
  background: rgba(255,255,255,.88);
  color: #9a55ae;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  display: grid;
  place-items: center;
}

.idx-hero-arrow:hover{
  background: rgba(154, 85, 174, .12);
}

.idx-hero-prev{ left: 26px; }
.idx-hero-next{ right: 26px; }

/* Dots */
.idx-hero-dots{
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
}

.idx-hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(154, 85, 174, .35);
  background: rgba(154, 85, 174, .18);
  cursor: pointer;
}

.idx-hero-dot.is-active{
  background: #9a55ae;
}

/* Mobile: flechas más chicas */
@media (max-width: 600px){
  .idx-hero-arrow{
    width: 38px;
    height: 38px;
    font-size: 20px;
  }
  .idx-hero-prev{ left: 18px; }
  .idx-hero-next{ right: 18px; }
}

.idx-hero-track{
  background: rgba(255,255,255,.75);
}

/* opcional: un borde interno suave para que el "relleno" no quede vacío */
.idx-hero-track::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 14px;
  border: 1px solid rgba(154, 85, 174, .14);
  pointer-events:none;
}

/* =========================
   NOTICIAS (nuevo layout)
   No pisa CSS viejo
========================= */

.news-wrap{
  max-width: 1120px;
  margin: 18px auto 40px auto;
  padding: 0 16px;
}

.news-hero{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  padding: 18px 18px 16px 18px;
  position: relative;
  overflow: hidden;
}

.news-hero::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 8px;
  background: #9a55ae;
}

.news-hero__title{
  margin: 6px 0 6px 0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .6px;
  font-weight: 700;
  font-size: 30px;
  color:#111;
  text-transform: uppercase;
}

.news-hero__subtitle{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(0,0,0,.68);
}

.news-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

@media (max-width: 920px){
  .news-grid{
    grid-template-columns: 1fr;
  }
}

/* Card */
.news-card{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
}

.news-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 6px;
  background: #9a55ae;
}

.news-head{
  padding: 16px 16px 10px 16px;
}

.news-title{
  margin: 8px 0 6px 0;
  font-family: 'Oswald', sans-serif;
  font-size: 18px;
  letter-spacing: .4px;
  text-transform: uppercase;
  color:#111;
}

.news-subtitle{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  color: rgba(0,0,0,.72);
}

.news-meta{
  margin-top: 10px;
}

.news-date{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(154, 85, 174, .12);
  border: 1px solid rgba(154, 85, 174, .22);
  font-family: 'Open Sans', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(0,0,0,.78);
}

/* Media: imagen completa sin cortar */
.news-media{
  padding: 0 16px 14px 16px;
}

.news-media img{
  width: 100%;
  max-height: 320px;
  object-fit: contain;        /* ✅ no recorta */
  background: rgba(255,255,255,.65);
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  display: block;
}

/* Video embed prolijo */
.news-video{
  padding: 0 16px 14px 16px;
}

.news-video iframe,
.news-video video{
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 14px;
}

/* Texto colapsable */
.news-body{
  padding: 0 16px 14px 16px;
}

.news-text{
  font-family: 'Open Sans', sans-serif;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(0,0,0,.80);
}

/* modo colapsado (corta altura, no recorta imágenes porque texto es html) */
.news-text[data-collapsed="1"]{
  max-height: 120px;
  overflow: hidden;
  position: relative;
}

.news-text[data-collapsed="1"]::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 42px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.92));
}

/* Ver más */
.news-more{
  margin-top: 10px;
  border: 1px solid rgba(154, 85, 174, .25);
  background: rgba(255,255,255,.86);
  color: #9a55ae;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 12.5px;
  padding: 9px 12px;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.news-more:hover{
  background: rgba(154, 85, 174, .12);
}

/* Acciones */
.news-actions{
  padding: 0 16px 16px 16px;
}

.news-btn{
  width: 100%;
  border: none;
  background: #9a55ae;
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  padding: 12px 14px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 14px 26px rgba(0,0,0,.14);
}

.news-btn:hover{
  filter: brightness(0.95);
}

.news-empty{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  font-family: 'Open Sans', sans-serif;
}

/* =========================
   OBSERVATORIO (nuevo)
   No pisa CSS viejo
========================= */

.obsx-wrap{
  max-width: 1120px;
  margin: 18px auto 40px auto;
  padding: 0 16px;
}

.obsx-hero{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  padding: 18px;
  position: relative;
  overflow: hidden;
}

.obsx-hero::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 8px;
  background: #9a55ae;
}

.obsx-hero__title{
  margin: 6px 0 6px 0;
  font-family: 'Oswald', sans-serif;
  letter-spacing: .6px;
  font-weight: 700;
  font-size: 30px;
  color:#111;
  text-transform: uppercase;
}

.obsx-hero__subtitle{
  margin: 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(0,0,0,.68);
}

.obsx-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 960px){
  .obsx-grid{ grid-template-columns: 1fr; }
}

/* Card base */
.obsx-card{
  background: rgba(255,255,255,.80);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
  overflow: hidden;
  position: relative;
}

.obsx-card::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 6px;
  background: #9a55ae;
}

.obsx-card--main{
  padding: 16px;
}

.obsx-top{
  padding-top: 8px;
}

.obsx-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Oswald', sans-serif;
  font-weight: 800;
  letter-spacing: .8px;
  color: #fff;
  background: #9a55ae;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
}

.obsx-title{
  margin: 10px 0 6px 0;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #111;
}

.obsx-text{
  margin: 0 0 12px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 14px;
  color: rgba(0,0,0,.72);
  line-height: 1.55;
}

/* Botones */
.obsx-actions{
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.obsx-btn{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .25px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(154,85,174,.25);
  color: #111;
  background: rgba(255,255,255,.86);
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
}

.obsx-btn:hover{
  background: rgba(154,85,174,.12);
}

.obsx-btn--primary{
  background: #9a55ae;
  border-color: rgba(154,85,174,.45);
  color: #fff;
}
.obsx-btn--primary:hover{
  filter: brightness(.25);
}

/* Imagen dentro de main */
.obsx-thumb{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  background: rgba(255,255,255,.65);
}

.obsx-thumb img{
  width: 100%;
  height: 320px;
  object-fit: contain; /* ✅ completa, sin cortar */
  display: block;
}

/* Preview derecha */
.obsx-card--preview{
  padding: 16px;
}

.obsx-previewHead{
  margin-top: 6px;
}

.obsx-previewTitle{
  margin: 0 0 4px 0;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 16px;
  color: #111;
}

.obsx-previewSub{
  margin: 0 0 12px 0;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  color: rgba(0,0,0,.65);
}

.obsx-previewMedia{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  background: rgba(255,255,255,.65);
}

.obsx-previewMedia img{
  width: 100%;
  height: 420px;
  object-fit: contain; /* ✅ sin cortar */
  display: block;
}

/* Bloque inferior */
.obsx-bottom{
  margin-top: 18px;
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 18px;
  box-shadow: 0 14px 30px rgba(0,0,0,.10);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.obsx-bottom::before{
  content:"";
  position:absolute;
  left:0; top:0; right:0;
  height: 6px;
  background: #9a55ae;
}

.obsx-bottomTitle{
  margin: 10px 0 12px 0;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 16px;
  color: #111;
}

.obsx-bottomGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 820px){
  .obsx-bottomGrid{ grid-template-columns: 1fr; }
}

.obsx-bottomCard{
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  overflow: hidden;
  background: rgba(255,255,255,.65);
}

.obsx-bottomCard img{
  width: 100%;
  height: 360px;
  object-fit: contain; /* ✅ completa, sin cortar */
  display: block;
}

/* =========================
   OBSERVATORIO (ajuste final)
   (para tu HTML actual)
========================= */

/* 1 sola columna porque sacaste el preview */
.obsx-grid{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* Card principal más prolija */
.obsx-card--main{
  padding: 18px;
}

/* Portada principal: más grande y sin cortar */
.obsx-thumb img{
  width: 100%;
  height: 360px;          /* subilo/bajalo si querés */
  object-fit: contain;    /* ✅ muestra completa */
  display: block;
}

/* Abajo: dos imágenes con mismo criterio, sin cortar */
.obsx-bottomGrid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 820px){
  .obsx-bottomGrid{ grid-template-columns: 1fr; }
}

.obsx-bottomCard img{
  width: 100%;
  height: 420px;          /* tamaño estético */
  object-fit: contain;    /* ✅ muestra completa */
  display: block;
}

/* =========================
   HEADER NUEVO (sin cambiar colores)
========================= */

.hdrx-wrap{
  width:100%;
  position:relative;
  z-index:100;
}

/* ---------- TOP ---------- */
.hdrx-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 10px;
}

.hdrx-logos{
  display:flex;
  align-items:center;
  gap:18px;
}

.hdrx-logo-left,
.hdrx-logo-right{
  height:52px;
  width:auto;
}

/* ---------- BURGER ---------- */
.hdrx-burger{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  padding:8px;
}

.hdrx-burger span{
  display:block;
  width:26px;
  height:3px;
  background:#5b2c83; /* mismo violeta base */
  margin:5px 0;
  border-radius:2px;
}

/* ---------- NAV ---------- */
.hdrx-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  padding:10px 8px;
}

/* Mejor aire en botones SIN tocar colores */
.hdrx-nav a{
  padding:8px 14px;
  border-radius:8px;
  font-weight:600;
  letter-spacing:.2px;
  transition:transform .15s ease, box-shadow .15s ease;
}

.hdrx-nav a:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

/* ---------- MOBILE ---------- */
@media (max-width: 900px){

.hdrx-burger{
    display:block;
  }

.hdrx-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    flex-direction:column;
    gap:10px;
    padding:18px 14px;
    background:linear-gradient(to right, #6a1b9a, #8e24aa, #ab47bc);
    display:none;
  }

body.visible_menu .hdrx-nav{
    display:flex;
  }

.hdrx-nav a{
    width:100%;
    text-align:center;
    padding:12px;
    font-size:15px;
  }
}

/* =========================
   FOOTER NUEVO (ftx-*)
   No rompe CSS viejo
========================= */

/* Partners / Prefooter */
.ftx-partners{
  margin-top: 18px;
  padding: 18px 0;
}

.ftx-partners__inner{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
}

.ftx-partners__item{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,.72);
  box-shadow: 0 10px 26px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ftx-partners__item:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0,0,0,.14);
}

.ftx-partners__item img{
  width: 190px;
  height: 70px;
  object-fit: contain; /* no corta */
  display:block;
}

/* Footer base */
.ftx-footer{
  margin-top: 18px;
  padding: 22px 0;
  background: rgba(255,255,255,.78);
  box-shadow: 0 -8px 26px rgba(0,0,0,.08);
  border-top: 4px solid #9a55ae; /* tu rosa */
}

.ftx-inner{
  display:grid;
  grid-template-columns: 1.2fr 1.5fr 1fr;
  gap: 18px;
  align-items:start;
}

/* Branding */
.ftx-brand{
  display:flex;
  align-items:center;
  gap: 12px;
}

.ftx-brand__logo{
  height: 56px;
  width:auto;
}

.ftx-brand__title{
  font-weight: 800;
  letter-spacing: .3px;
  text-transform: uppercase;
  font-size: 13.5px;
  color: #222;
}

.ftx-brand__sub{
  font-size: 12.5px;
  color: #555;
  margin-top: 2px;
}

/* Links */
.ftx-links__title,
.ftx-social__title{
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .25px;
  font-size: 12.5px;
  color: #222;
  margin-bottom: 10px;
}

.ftx-links__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
}

.ftx-link{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 13px;

/* NO cambiamos tus colores: usamos el rosa y violeta de tu web */
  background: #9a55ae;
  color: #fff;
  text-decoration:none;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.ftx-link:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
  filter: brightness(1.03);
}

.ftx-pin{
  width: 18px;
  height: 18px;
  margin-left: 8px;
}

/* Social */
.ftx-social__row{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-bottom: 12px;
}

.ftx-social__btn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .15s ease;
}

.ftx-social__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.14);
}

.ftx-social__btn img{
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.ftx-pj{
  width: 74px;
  height: 74px;
  object-fit: contain;
  opacity: .92;
}

/* Copy */
.ftx-copy{
  padding: 12px 0;
  background: rgba(0,0,0,.08);
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 12.5px;
  color: #222;
  text-align:center;
  font-weight: 700;
}

/* Responsive */
@media (max-width: 980px){
  .ftx-inner{
    grid-template-columns: 1fr;
  }
  .ftx-links__grid{
    grid-template-columns: 1fr;
  }
  .ftx-pj{
    width: 64px;
    height: 64px;
  }
}

/* =========================
   FOOTER NUEVO (FTX)
   Clases nuevas para no pisar el CSS viejo
========================= */

.ftx-pre{
  width: 100%;
  margin-top: 24px;
}

.ftx-pre__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  align-items: center;
}

.ftx-pre__logo{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(6px);
}

.ftx-pre__logo img{
  width: 100%;
  max-width: 210px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.ftx{
  width: 100%;
  margin-top: 10px;
  border-top: 3px solid #9a55ae; /* tu rosa */
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
}

.ftx__inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
  display: grid;
  grid-template-columns: 1.1fr 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}

.ftx-colTitle{
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .85;
  margin-bottom: 10px;
}

.ftx-brand{
  display: flex;
  align-items: center;
  gap: 12px;
}

.ftx-brand__logo{
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
}

.ftx-brand__title{
  font-size: 16px;
  font-weight: 800;
  line-height: 1.1;
}

.ftx-brand__sub{
  font-size: 12px;
  opacity: .8;
  margin-top: 2px;
}

.ftx-links__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

/* NO CAMBIA COLORES: solo corrige tamaño / alineación */
.ftx-btnFix{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  text-align: center;
  white-space: nowrap;
}

.ftx-social__row{
  display: flex;
  gap: 10px;
  align-items: center;
}

.ftx-social__icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(0,0,0,.06);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.06);
}

.ftx-social__icon img{
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}

.ftx-social__seal{
  margin-top: 12px;
  width: 90px;
  height: 90px;
  object-fit: contain;
  display: block;
  opacity: .95;
}

.ftx-copy{
  text-align: center;
  padding: 12px 16px 16px;
  font-size: 12px;
  opacity: .85;
  border-top: 1px solid rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 980px){
  .ftx__inner{
    grid-template-columns: 1fr;
  }
  .ftx-links__grid{
    grid-template-columns: 1fr;
  }
  .ftx-pre__inner{
    grid-template-columns: 1fr;
  }
  .ftx-pre__logo img{
    max-width: 240px;
  }
}

/* =========================
   RECURSERO / CONTACTOS (RCX)
   Clases nuevas (no pisan el CSS viejo)
========================= */

.rcx-cta{
  max-width: 1200px;
  margin: 16px auto 0;
  padding: 0 16px;
  display: flex;
  justify-content: center;
}

.rcx-cta__btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border-radius: 12px;
  font-size: 20px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  background: #2f7d32; /* verde del botón */
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  border: 1px solid rgba(0,0,0,.08);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.rcx-cta__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 26px rgba(0,0,0,.16);
  filter: brightness(1.02);
}

.rcx-wrap{
  max-width: 90%;
  margin: 14px auto 28px;
  padding: 0 16px;
}

.rcx-hero{
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  margin-bottom: 14px;
}

.rcx-hero::before{
  content:"";
  position:absolute;
  inset: 0;
  border-top: 4px solid #9a55ae; /* tu rosa */
  pointer-events:none;
}

.rcx-hero__title{
  margin: 0;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
}

.rcx-hero__subtitle{
  margin: 6px 0 0;
  font-size: 13px;
  opacity: .85;
  line-height: 1.4;
}

.rcx-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

.rcx-card{
  border-radius: 18px;
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 14px 34px rgba(0,0,0,.08);
  overflow: hidden;
  position: relative;
}

.rcx-card::before{
  content:"";
  position:absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 6px;
  background: #9a55ae; /* tu rosa */
}

.rcx-card__img{
  padding: 14px;
}

.rcx-card__img img{
  width: 100%;
  height: auto;          /* clave: NO se corta */
  display: block;
  object-fit: contain;   /* por si algún navegador fuerza */
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0,0,0,.10);
  background: #fff;
}

/* 5ta imagen un poco más protagonista */
.rcx-card--wide{
  grid-column: 1 / -1;
}

/* Responsive */
@media (max-width: 920px){
  .rcx-grid{
    grid-template-columns: 1fr;
  }
  .rcx-card--wide{
    grid-column: auto;
  }
}

/* ===== RCX Modal Zoom ===== */
.rcx-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}
.rcx-modal.is-open{ display:block; }

.rcx-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

.rcx-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%);
  width: min(1100px, 92vw);
  height: min(82vh, 760px);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  overflow: hidden;
  border: 3px solid rgba(154,85,174,.35);
}

.rcx-modal__close{
  position:absolute;
  top:10px;
  right:12px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  font-size: 18px;
}

.rcx-modal__toolbar{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(154,85,174,.16), rgba(154,85,174,.06));
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.rcx-modal__btn{
  width: 44px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(154,85,174,.35);
  background:#fff;
  cursor:pointer;
  font-size: 18px;
}

.rcx-modal__hint{
  margin-left:auto;
  font-size: 12px;
  opacity: .75;
}

.rcx-modal__stage{
  width: 100%;
  height: calc(100% - 56px);
  overflow: hidden;
  position: relative;
  cursor: grab;
  background: #f7f7fb;
}
.rcx-modal__stage:active{ cursor: grabbing; }

.rcx-modal__img{
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  max-width: none;  /* clave para zoom real */
  user-select: none;
  -webkit-user-drag: none;
}

/* Opcional: cursor de zoom en tus cards */
.rcx-card__img .rcx-zoomable{
  cursor: zoom-in;
}

/* 1) La card NO debe recortar */
.rcx-card__img{
  overflow: visible; /* si tenías hidden, esto es clave */
}

/* 2) La imagen se muestra COMPLETA */
.rcx-card__img img{
  width: 100%;
  height: auto;          /* clave: no forzar altura */
  object-fit: contain;   /* clave: no cortar */
  display: block;
}

/* 3) Si vos tenías una altura fija en el contenedor o la img,
      mejor controlar el tamaño con max-height para que no se haga gigante */
.rcx-card__img{
  max-height: 520px;     /* ajustalo a gusto (ej: 450 / 600) */
}

.rcx-card__img img{
  max-height: 520px;     /* mismo valor que arriba */
  margin: 0 auto;
}

/* ============================
   RCX GRID - mostrar imagen ENTERA
   (sin recorte antes del click)
============================ */

/* la card NO recorta */
.rcx-card{
  overflow: visible !important;
}

/* este es tu contenedor real */
.rcx-card .rcx-zoomable{
  overflow: visible !important;
  border-radius: 18px; /* si ya tenías rounded, ok */
}

/* la imagen: completa, sin cortar */
.rcx-card img.rcx-zoomable{
  width: 100% !important;
  height: auto !important;         /* NO altura fija */
  display: block !important;
  object-fit: contain !important;  /* clave: NO cortar */
  object-position: center !important;
}

/* opcional: limitar tamaño para que no se haga gigante,
   pero sin recortar */
.rcx-card .rcx-zoomable{
  max-height: 520px;
}

.rcx-card img.rcx-zoomable{
  max-height: 520px;
}

/* =========================
   NOTICIA (obtenernoticia.php)
   ========================= */

.ntx-wrap{
  max-width: 1100px;
  margin: 24px auto 60px;
  padding: 0 16px;
}

.ntx-hero{
  background: rgba(255,255,255,0.86);
  border: 2px solid rgba(132, 60, 165, 0.25);
  border-radius: 18px;
  padding: 18px 18px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
  backdrop-filter: blur(6px);
}

.ntx-back{
  display: inline-block;
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 10px;
  color: #6b2f8e;
}

.ntx-title{
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
  margin: 6px 0 8px;
  text-transform: uppercase;
}

.ntx-subtitle{
  margin: 0 0 10px;
  opacity: 0.9;
  font-size: 16px;
}

.ntx-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.ntx-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(132, 60, 165, 0.10);
  border: 1px solid rgba(132, 60, 165, 0.25);
  font-weight: 700;
  font-size: 13px;
}

.ntx-card{
  margin-top: 18px;
  background: rgba(255,255,255,0.88);
  border: 2px solid rgba(132, 60, 165, 0.25);
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.07);
}

.ntx-gallery{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
  margin-bottom: 16px;

justify-items: center; /* ✅ centra los items dentro del grid */
}

.ntx-thumb{
  grid-column: span 6;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}

@media (max-width: 860px){
  .ntx-thumb{ grid-column: span 12; }
}

.ntx-thumb__img{
  width: auto;            /* ✅ ya NO ocupa 100% */
  max-width: 520px;       /* ✅ tope de tamaño (ajustalo a gusto) */
  height: auto;
  display: block;
  margin: 0 auto;         /* ✅ centra dentro del botón */
  border-radius: 14px;
  border: 2px solid rgba(132, 60, 165, 0.25);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

.ntx-thumb:hover .ntx-thumb__img{
  transform: translateY(-2px);
  transition: transform .18s ease;
}

.ntx-video{
  margin: 14px 0 18px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid rgba(132, 60, 165, 0.25);
  box-shadow: 0 8px 18px rgba(0,0,0,0.08);
}

/* si el iframe viene sin responsive */
.ntx-video iframe, .ntx-video video{
  width: 100% !important;
  max-width: 100% !important;
  display: block;
}

.ntx-content{
  font-size: 16px;
  line-height: 1.8;
  color: #222;
  white-space: normal;
}

/* =========================
   MODAL (zoom imágenes noticia)
   ========================= */
.ntx-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.ntx-modal.is-open{ display: block; }

.ntx-modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
}

.ntx-modal__panel{
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(1100px, 92vw);
  height: min(80vh, 720px);
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(132, 60, 165, 0.35);
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
}

.ntx-modal__close{
  position: absolute;
  top: 10px;
  right: 10px;
  border: 0;
  background: rgba(132, 60, 165, 0.12);
  border: 1px solid rgba(132, 60, 165, 0.25);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  font-weight: 800;
  z-index: 2;
}

.ntx-modal__toolbar{
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  background: #faf8fc;
}

.ntx-modal__btn{
  border: 0;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(132, 60, 165, 0.12);
  border: 1px solid rgba(132, 60, 165, 0.25);
  font-weight: 800;
}

.ntx-modal__hint{
  margin-left: auto;
  font-size: 12px;
  opacity: .75;
}

.ntx-modal__stage{
  position: relative;
  flex: 1;
  overflow: hidden;
  background: #111;
  cursor: grab;
}

.ntx-modal__stage:active{ cursor: grabbing; }

.ntx-modal__img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.footer-redes-buttones a{

width: max-content !important;
}

.obsx-thumb--hotspot{
  position: relative;
  display: inline-block;
}

.obsx-thumb--hotspot img{
  display: block;
  max-width: 100%;
  height: auto;
}

.obsx-hotspot{
  position: absolute;
  left: 18%;
  top: 70%;
  width: 64%;
  height: 18%;
  z-index: 2;
  cursor: pointer;
  border-radius: 10px;

/* Base visual */
  background: rgba(132, 60, 165, 0.12);
  border: 2px solid rgba(132, 60, 165, 0.45);
  transition: all .25s ease;
}

/* Efecto hover */
.obsx-hotspot:hover{
  background: rgba(132, 60, 165, 0.25);
  border-color: rgba(132, 60, 165, 0.85);
  box-shadow: 0 0 0 4px rgba(132, 60, 165, 0.15),
              0 10px 25px rgba(0,0,0,0.15);
  transform: scale(1.02);
}

/* Efecto click */
.obsx-hotspot:active{
  transform: scale(0.98);
}

/* =========================
   Layout imagen izquierda + botones derecha
   ========================= */
.obsx-mainRow{
  display: grid;
  grid-template-columns: 460px 1fr;
  gap: 18px;
  align-items: start;
  margin-top: 14px;
}

@media (max-width: 980px){
  .obsx-mainRow{
    grid-template-columns: 1fr;
  }
}

/* =========================
   Imagen + overlay + hotspot
   ========================= */
.obsx-thumb--hotspot{
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 2px solid rgba(132, 60, 165, 0.18);
  box-shadow: 0 12px 26px rgba(0,0,0,0.12);
  background: #fff;
}

.obsx-thumb--hotspot img{
  width: 100%;
  height: auto;
  display: block;
}

/* Botón arriba de la imagen (overlay) */
.obsx-overlayBtn{
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 3;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
  color: #2b1637;
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(132, 60, 165, 0.25);
  box-shadow: 0 10px 22px rgba(0,0,0,0.12);
}

.obsx-overlayBtn:hover{
  transform: translateY(-1px);
}

/* Hotspot sobre el texto (ajustar si hace falta) */
.obsx-hotspot{
  position: absolute;
  left: 18%;
  top: 63%;
  width: 64%;
  height: 18%;
  z-index: 2;
  cursor: pointer;
  border-radius: 10px;
  background: rgba(255,255,255,0);
}

.obsx-hotspot:hover{
  background: rgba(255,255,255,0.08);
  outline: 2px solid rgba(255,255,255,0.25);
}

/* =========================
   Botones a la derecha
   ========================= */
.obsx-actions--side{
  margin: 0;            /* saca margen extra */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Si tus botones venían 100% ancho, esto los deja prolijos */
.obsx-actions--side .obsx-btn{
  width: 100%;
}

/* =========================
   HARDENING RESPONSIVE GLOBAL
   Cubre páginas legacy en mobile
========================= */

/* Evita cálculos inconsistentes de ancho en componentes viejos */
*, *::before, *::after{
  box-sizing: border-box;
}

/* Medios fluidos por defecto */
img,
video,
canvas,
svg,
iframe,
embed,
object{
  max-width: 100%;
}

iframe{
  width: 100%;
}

@media (max-width: 980px){
  html,
  body{
    max-width: 100%;
    overflow-x: hidden;
  }

.contenedor{
    width: min(100%, 1120px);
    padding-left: 12px;
    padding-right: 12px;
  }

.logos-cabeza,
  .logos-pie{
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    text-align: center;
  }

.logos-cabeza .logo-izquierdo,
  .logos-cabeza .logo-derecho,
  .logos-pie .logo-izquierdo,
  .logos-pie .logo-derecho{
    max-width: 44vw;
    height: auto;
  }

.navegador{
    max-width: 100vw;
  }

.navegador a{
    word-break: break-word;
    white-space: normal;
  }

/* Tablas legacy: scroll horizontal controlado en celular */
  table{
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

pre,
  code{
    overflow-x: auto;
  }
}

/* =========================
   REFINAMIENTOS MOBILE GRANULARES
   Páginas específicas en celular
========================= */

/* Tablets pequeños / Celulares grandes (max 768px) */
@media (max-width: 768px){
  /* Index/Home */
  .idx-wrap{
    padding: 12px;
  }

.idx-grid{
    gap: 12px;
  }

.idx-card{
    padding: 14px;
    border-radius: 14px;
  }

.idx-person{
    padding: 14px;
    grid-template-columns: 80px 1fr;
  }

.idx-person__img{
    width: 80px;
    height: 80px;
    border-radius: 14px;
  }

.idx-person__name{
    font-size: 15px;
  }

.idx-person__role{
    font-size: 13px;
  }

/* Ley Micaela */
  .lm-wrap{
    padding: 12px;
  }

.lm-title-main{
    font-size: 26px;
  }

.lm-title-sub{
    font-size: 14px;
  }

.lm-card{
    padding: 14px;
    border-radius: 14px;
  }

.lm-grid{
    gap: 12px;
  }

.lm-link{
    padding: 10px;
    font-size: 14px;
  }

/* Capacitaciones */
  .cap-wrap{
    padding: 12px;
  }

.cap-hero__title{
    font-size: 22px;
  }

.cap-media{
    gap: 12px;
  }

/* Materiales */
  .mat-wrap{
    padding: 12px;
  }

.mat-grid{
    gap: 12px;
  }

.mat-cta{
    padding: 14px;
  }

/* Noticias */
  .news-grid{
    gap: 12px;
  }

.news-card{
    padding: 12px;
  }

.news-media{
    border-radius: 12px;
  }

.news-title{
    font-size: 18px;
  }

/* Observatorio */
  .obsx-wrap{
    padding: 12px;
  }

.obsx-grid{
    gap: 12px;
  }

.obsx-card{
    padding: 12px;
  }

/* Recursero/Contactos */
  .rcx-wrap{
    padding: 12px;
  }

.rcx-hero__title{
    font-size: 26px;
  }

.rcx-grid{
    gap: 10px;
  }

.rcx-card{
    border-radius: 10px;
  }
}

/* Celulares medianos (max 600px) */
@media (max-width: 600px){
  html,
  body{
    font-size: 14px;
  }

/* Index */
  .idx-card__title{
    font-size: 20px;
  }

.idx-person__name{
    font-size: 14px;
  }

.idx-person__role{
    font-size: 12px;
    line-height: 1.4;
  }

.idx-flyer-chip{
    font-size: 12px;
    padding: 6px 10px;
  }

/* Ley Micaela */
  .lm-title-box{
    padding: 18px 12px 14px 12px;
  }

.lm-title-main{
    font-size: 22px;
    letter-spacing: .8px;
  }

.lm-title-sub{
    font-size: 13px;
    line-height: 1.6;
  }

.lm-section-title{
    font-size: 16px;
  }

.lm-text{
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 10px 0;
  }

/* Capacitaciones */
  .cap-hero__title{
    font-size: 20px;
    letter-spacing: .8px;
  }

.cap-hero__subtitle{
    font-size: 13px;
  }

.cap-grid{
    grid-template-columns: 1fr;
  }

/* Materiales */
  .mat-grid{
    grid-template-columns: 1fr;
  }

.mat-cta__title{
    font-size: 18px;
  }

.mat-cta__desc{
    font-size: 13px;
  }

/* Noticias */
  .ntx-grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

.ntx-thumb__title{
    font-size: 16px;
  }

.news-title{
    font-size: 20px;
  }

.news-desc{
    font-size: 13px;
  }

/* Observatorio */
  .obsx-title{
    font-size: 22px;
  }

.obsx-grid{
    grid-template-columns: 1fr;
  }

.obsx-card__title{
    font-size: 15px;
  }

/* Recursero */
  .rcx-hero__title{
    font-size: 24px;
  }

.rcx-hero__subtitle{
    font-size: 13px;
  }

.rcx-grid{
    grid-template-columns: 1fr;
    gap: 10px;
  }

/* Botones */
  .primary-btn,
  .lm-btn,
  .cap-btn,
  .mat-btn,
  .obsx-btn{
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
  }
}

/* Celulares pequeños (max 480px) */
@media (max-width: 480px){
  html,
  body{
    font-size: 13px;
  }

.contenedor{
    padding-left: 8px;
    padding-right: 8px;
  }

/* Headers */
  .idx-card__title,
  .cap-hero__title,
  .mat-grid__title,
  .ntx-grid__title,
  .obsx-title,
  .rcx-hero__title{
    font-size: 18px;
  }

/* Wrap padding agresivo */
  .idx-wrap,
  .lm-wrap,
  .cap-wrap,
  .mat-wrap,
  .news-wrap,
  .obsx-wrap,
  .rcx-wrap{
    padding: 8px;
  }

/* Cards y elementos */
  .idx-card,
  .lm-card,
  .cap-card,
  .mat-card,
  .obsx-card,
  .rcx-card{
    padding: 10px;
    border-radius: 10px;
  }

.idx-person{
    grid-template-columns: 70px 1fr;
    gap: 8px;
    padding: 10px;
  }

.idx-person__img{
    width: 70px;
    height: 70px;
  }

.idx-person__name{
    font-size: 13px;
  }

.idx-person__role{
    font-size: 11px;
  }

/* Títulos principales */
  .lm-title-box,
  .cap-hero,
  .mat-heading{
    padding: 14px 8px 12px 8px;
  }

.lm-title-main,
  .lm-hero-card__text .lm-title-main{
    font-size: 18px;
    letter-spacing: .4px;
  }

.lm-title-sub{
    font-size: 12px;
  }

.lm-section-title{
    font-size: 14px;
  }

.lm-text{
    font-size: 13px;
    margin: 0 0 8px 0;
  }

/* Gaps pequeños */
  .idx-grid,
  .lm-grid,
  .cap-grid,
  .mat-grid,
  .ntx-grid,
  .obsx-grid,
  .rcx-grid{
    gap: 8px;
  }

/* Botones a ancho completo */
  .idx-btn,
  .lm-btn,
  .lm-link,
  .cap-btn,
  .mat-btn,
  .obsx-btn,
  .rcx-btn{
    width: 100%;
    padding: 10px 12px;
    font-size: 13px;
  }

/* Modales en celular pequeño */
  .rcx-modal__img,
  .ntx-modal__img{
    max-height: 70vh;
  }

.rcx-modal__toolbar{
    gap: 6px;
  }

.rcx-modal__hint{
    font-size: 11px;
  }
}