/* Import de fuentes */
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');

/* Fuentes personalizadas */
@font-face {
    font-family: Avenir;
    src: url(./../assets/fonts/FontsFree-Net-Avenir-Light.woff);
}

/* Variables de colores */
:root {
    --verde-1: #00a130dc;
    --verde-2: #00a1303d;
    --amarillo-1: #F3AB18;
    --amarillo-2: #f3aa183a;
}

/* Estilos generales */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    overflow-x: hidden;
}

.green-text {
    color: var(--verde-1);
}

.text-justify{
    text-align: justify;
}

.btn{
    background-color: var(--verde-1);
    color: #fff;
    font-weight: 800;
}

.navbar {
    transition: all 0.7s cubic-bezier(0.075, 0.82, 0.165, 1);
}

/* Sección de Parallax */
.parallax {
    height: 40vh;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: all 0.6s ease-out;
}

#parallax-1 {
    background-image: url('./../assets/images/logotipo.png');
}

/* Clases para estilos de texto */
.verde,
.amarillo {
    text-shadow: 1px 1px 2px black;
    font-size: 2rem;
    text-align: center;
    font-family: Avenir;
    padding: 10px;
    font-weight: bolder;
    border-block-style: ridge;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.788);
    border-radius: 30%;
}

.verde {
    background: var(--verde-2);
    border-block-color: var(--verde-1);
}

.amarillo {
    background: var(--amarillo-2);
    border-block-color: var(--amarillo-1);
}

/* Espacio entre secciones */
.espacio div {
    border-top: 5px solid var(--amarillo-1);
    border-bottom: 5px solid var(--amarillo-1);
    height: 30vh;
}

/* Título */
.titulo {
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.titulo h1 {
    color: var(--verde-1);
}

/* Sección "Acerca de" */
#acerca {
    overflow: hidden;
    background: var(--verde-1);
    color: #fff;
    text-align: center;
}

#acerca h1 {
    font-weight: 600;
    font-size: 40px;
    font-family: Avenir;
    padding: 20px;
    text-align: center;
}

#acerca-txt {
    padding: 40px;
}

#acerca-txt p {
    font-size: 20px;
    font-family: Avenir;
    padding: 45px 20px;
}

#acerca-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Sección de Principios */
#principios div {
    display: flex;
    padding: 0;
    justify-content: center;
    min-height: 20rem;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
}

#principios div #c1 {
    background-image: url('./../assets/images/principios/1.jpg');
}

#principios div #c2 {
    background-image: url('./../assets/images/principios/2.jpg');
}

#principios div #c3 {
    background-image: url('./../assets/images/principios/3.jpg');
}

/* Estilos de tarjeta */
#principios .card {
    width: 100vw;
    transform-style: preserve-3d;
    transition: transform 1s;
    transform-origin: center center;
}

#principios .card:hover {
    transform: rotateY(180deg);
}

#principios .card .front,
.card .back {
    width: 100%;
    position: absolute;
    backface-visibility: hidden;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#principios .card .front h3 {
    background: var(--verde-2);
    position: absolute;
    top: 0;
    width: 100%;
    text-shadow: 0.1px 0.1px 4px black;
    padding: 10px 15px;
    font-family: Avenir;
    font-size: 1.5em;
    font-weight: bolder;
    color: white;
}

#principios .card .front p {
    background: var(--amarillo-2);
    position: absolute;
    bottom: 0;
    width: 100%;
    text-shadow: 1px 1px 2px black;
    padding: 0 0 10px 0;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0;
}

#principios .card .back {
    background: var(--verde-2);
    transform: rotateY(180deg);
}

#principios .card .back span {
    min-height: 210px;
    background: var(--amarillo-2);
    padding: 15px;
    font-weight: bolder;
    text-shadow: 1px 1px 2px black;
    font-size: clamp(14px, 4vw, 18px);
    white-space: wrap;
    box-sizing: border-box;
}

/* Sección de Proyectos */
#proyectos {
    color: white;
    font-family: Avenir;
    padding-left: 0;
}

#proyectos div {
    padding: 0;
}

#proyectos .proyect>div {
    display: flex;
    align-items: end;
    background-position: center;
    background-size: cover;
    min-height: 25rem;
    padding: 10px;
}

.proyect,
#c1,
#c2,
#c3 {
    height: 100%;
}

.proyect .intro {
    background-color: var(--amarillo-2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    min-height: 60%;
}

.proyect #c2 .intro {
    background-color: var(--verde-2);
}

.intro h3 p {
    font-weight: bolder;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.788);
}

.intro a {
    padding: 7px;
    border: 1.5px solid var(--verde-1);
    color: var(--verde-1);
    background: #ffffff9f;
    margin-bottom: 5px;
}

.intro a:hover {
    background: var(--verde-2);
}

.proyect #c1 {
    background-image: url('./../assets/images/proyectos/1.jpg');
}

.proyect #c2 {
    background-image: url('./../assets/images/proyectos/2.jpg');
}

.proyect #c3 {
    background-image: url('./../assets/images/proyectos/3.jpg');
}

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

#ayuda {
    background: var(--verde-1);
    color: #fff;
    text-align: center;
}

#separata {
    vertical-align: bottom;
    background-color: #fff;
    border-bottom: 2px solid var(--amarillo-1);
}

#separata-abajo {
    vertical-align: bottom;
    background-color: #fff;
    border-bottom: 2px solid var(--amarillo-1);
    transform: rotate(180deg);
}

.ayuda {
    font-family: Avenir;
    padding: 10%;
}

.ayuda h1 {
    font-weight: bolder;
}

.ayuda p {
    padding-top: 10px;
    font-size: 20px;
}

.ayuda a {
    transition: 0.2s all cubic-bezier(0.075, 0.82, 0.165, 1);
    color: #fff;
    border: 1 solid var(--amarillo-1);
    background: var(--amarillo-1);
    font-weight: bold;
    padding: 10px;
}

.ayuda a:hover {
    background-color: var(--amarillo-2);
    text-decoration: wavy;
}

footer {
    color: #fff;
    font-family: Avenir;
    padding: 40px 20px 0;
    background-color: #363435;
    text-align: center;
}

footer>div {
    padding: 15px 15px 0;
}

footer p {
    margin: 0;
}

footer .enlaces a {
    padding: 5px;
    color: #ccc;
    text-decoration: none;
    transition: 0.8s all cubic-bezier(0.075, 0.82, 0.165, 1);
    font-size: 18px;
    font-weight: 700;
    display: flex;
    justify-content: center;
}

.enlaces a i {
    margin-right: 5px;
    font-size: 20px;
    color: #fff;
}

.enlaces a:hover {
    color: var(--amarillo-1);
    text-decoration: underline;
    text-decoration-color: var(--verde-1);
    font-size: 20px;
}

.enlaces #redes {
    display: flex;
    justify-content: center;
    align-items: center;
}

.lema {
    font-family: 'Dancing Script', cursive;
}

hr {
    overflow: visible;
    /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #333;
    text-align: center;
    height: 10px;
    width: 50%;
}

hr:after {
    content: "§";
    display: inline-block;
    position: relative;
    top: -0.9em;
    font-size: 1.5em;
}

#derechos {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* -- quienes somos -- */
#portada-quienes-somos {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/quieres.jpg');
}

#portada-quienes-somos h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--verde-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

#historia {
    margin: 20px 10px;
}

#historia p {
    text-align: justify;
}

.bg-verde {
    background-color: var(--verde-2);
    font-weight: 500;
}

.text-verde {
    color: var(--verde-1);
    font-weight: 700;
}

.text-amarillo {
    color: var(--amarillo-1);
    font-weight: 700;
}

#horizonte div {
    background-position: center;
    background-size: cover;
    text-align: justify;
}

.mision {
    background-image: url('./../assets/images/mision.jpg');
    color: #fff;
}

#mision {
    background-image: url('./../assets/images/mision1.jpg');
    min-height: 20vh;
}

.vision {
    background-image: url('./../assets/images/vision.jpg');
    color: #fff;
    text-shadow: 1px 1px 5px black;
}

#vision {
    background-image: url('./../assets/images/vision1.jpg');
    min-height: 20vh;
}

.principios-corp {
    font-weight: 700;
    text-align: justify;
    color: var(--verde-1);
    padding: 20px 20px;
}

.principios-corp p,
ul {
    color: #777;
}

/* -- obras -- */
#portada-obras {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/obras.jpg');
}

#portada-obras h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--amarillo-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

/* -- Donaciones -- */
#portada-donaciones {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/donaciones.jpg');
}

#portada-donaciones h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--amarillo-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

#donaciones p {
    text-align: justify;
}

#formas h1 {
    text-align: center;
}
.white-text {
   color: white;
    font-weight: 700;
}

#formas p {
    text-align: justify;
    margin: 10%;

}

.dona {
    display: flex;
    flex-direction: column;
    justify-content: top;
    align-items: center;
    padding: 4rem;
    background-color: var(--amarillo-1);
}

.dona h4 {
    text-align: center;
}

.dona hr {
    width: 100%;
    background-color: var(--verde-1);
}

.dona form {
    width: 100%;
}

.dona-verde {
    background-color: var(--verde-1);
}

label {
    font-weight: 500;
}

input[type="submit"] {
    font-weight: 700;
    background-color: var(--verde-1);
}

.enlaces .redes-a * {
    color: var(--verde-1);
    font-size: 40px;
}
.enlaces .redes-a a {
    color: var(--amarillo-1);
    font-size: 1.7rem;
    width: 100%;
}

#ayuda-legal a{
color: var(--verde-1);
}

/* -- aydua-legal -- */
#portada-ayuda-legal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/ayuda-legal.jpg');
}

#portada-ayuda-legal h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--amarillo-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

#ayuda-legal p {
    text-align: justify;
}

/* -- aydua-legal -- */
#portada-mercados {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/mercado.jpg');
}

#portada-mercados h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--amarillo-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}


/* -- Dias de esperanza -- */
#portada-dias {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/proyectos/dias1.jpg');
}
#portada-dias h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--verde-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

/* -- almuerzos solidarios -- */
#portada-dias {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    background-size: cover;
    background-position: center;
    color: white;
    font-family: Avenir;
    background-image: url('./../assets/images/proyectos/almuerzos.jpg');
}

#portada-dias h1 {
    text-shadow: 1px 1px 5px black;
    display: inline-block;
    font-family: 'Dancing Script', cursive;
    font-size: 5rem;
    color: #ccc;
    background: var(--verde-2);
    width: 100%;
    padding: 10px;
    border-radius: 20%;
    text-align: center;
}

#politicas a{
    margin: 20px;
    text-decoration: none;
    align-items: center;
    display: flex;
    flex-direction: column;
    color: var(--verde-1);
    font-size: 20px;
    font-weight: 700;
}