/**************** General ********************/

:root {
    --azul-boton: #1F7DEF;
    --azul-boton-hover: #3288F1;
    --azul-fondo: #308DFF;
    --beige-fondo: #F5F0E7;
    --beige-oscuro: #E9DDC9;
    --negro: #393939;
    --blanco: white;
    --verde: #3DAE2B;
    --naranja-claro: #FF9015;
    --naranja-oscuro: #FF6E00;
    --rosa: #E50695;

    --section-spacing-medium: 104px;
    --section-spacing-large: 156px;
    --rounded-corner: 24px;
    --rounded-corner-large: 50px;
    --content-to-btn-spacing: 32px;
    --paragraph-max-width: 584px;
    --paragraph-max-width-large: 700px;
    --paragraph-spacing: 8px;
}

::-webkit-scrollbar {
    width: 16px;
}
  
::-webkit-scrollbar-track {
    background:rgb(233, 221, 201);
    border-style:none;
}

::-webkit-scrollbar-thumb {
    background:rgb(229, 6, 149);
    border-radius:100px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: myriad-pro, sans-serif;
}

body {
    background-color: var(--beige-fondo);
    font-size: 18px;
    color: var(--negro);
    overflow-x: hidden;
}

h1 {
    font-size: 104px;
    letter-spacing: -0.04em;
    line-height: 85%;
}

h2 {
    font-size: 56px;
    margin-bottom: 8px;
    letter-spacing: -0.01em;
    line-height: 1;
}

h3, .subtitulo {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
}

h4 {
    font-size: 20px;
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    padding-left: 1em;
}

.main-btn {
    display: flex;
    font-size: 18px;
    padding: 12px 24px;
    background-color: var(--azul-boton);
    color: var(--blanco);
    font-weight: 600;
    border-radius: 100px;
    transition: background-color 0.2s;
}

.main-btn:hover {
    background-color: var(--azul-boton-hover);
}

.secondary-btn {
    display: flex;
    align-items: center;
}

.secondary-btn-text {
    margin-right: 8px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1;
}

.cursive {
    font-family: 'Leckerli One', cursive;;
}

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

.container {
    width: 90%;
    max-width: 1600px;
	margin: 0 auto;
}

.sticker {
    width: 200px;
}

.swiper-slide {
    height: auto;
}

.portada h1 {
    font-size: 104px;
    letter-spacing: -0.04em;
    line-height: 85%;
}

/**************** Barra de navegación ********************/

.nav-bar {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.nav-bar-container {
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-bar-logo-img {
    height: 72px;
}

.nav-link {
    padding: 12px 24px;
    font-weight: 600;
    border-radius: 100px;
    transition: background-color 0.2s;
}

.nav-link:hover {
    background-color: var(--beige-oscuro);
}

/**************** Acerca de ********************/

.portada {
    width: 100%;
    height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.portada-circle-and-text {
    position: relative;
    align-items: center;
}

.portada-circle-and-text.is-centered {
    display: flex;
    justify-content: center;
}

.portada img {
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    top: 0;
    left: 0;
}

.portada-circulo {
    position: absolute;
    opacity: 0.85;
    width: 90vw;
    height: 90vw;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
}

.portada-circulo.is-centered {
    align-items: center;
    justify-content: center;
}

.portada-circulo.is-blue {
    background-color: var(--azul-fondo);
}

.portada-circulo.is-pink {
    background-color: var(--rosa);
}

.portada-texto {
    position: relative;
    color: var(--blanco);
    display: flex;
    flex-direction: column;
}

.portada-texto.is-centered {
    align-items: center;
    text-align: center;
}

.portada-texto h1 {
    margin-bottom: 20px;
    color: var(--negro);
}

.portada-texto h1 span {
    color: var(--blanco);
    font-weight: 400;
}

.portada.is-centered p {
    max-width: 470px;
}

.portada-texto p {
    font-size: 20px;
}

/*** Por qué Needed ***/

.por-que-needed {
    padding: var(--section-spacing-medium) 0;
}

.por-que-needed-content {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.por-que-needed-text {
    max-width: 80ch;
    margin-right: 120px;
}

.three-layer-title {
    margin-bottom: 52px;
}

.por-que-needed .subtitulo {
    margin-bottom: 4px;
}

.three-layer-paragraph {
    margin-top: 20px;
}

.por-que-needed-parrafo {
    margin-bottom: 4px;
}

.por-que-needed-referencia {
    font-size: 14px;
}

.por-que-needed-img-container {
    position: relative;
    width: 30%;
    flex: 0 0 auto;
}

.por-que-needed-img-wrapper {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
}

.por-que-needed-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.por-que-needed-sticker {
    position: absolute;
    top: 0;
    left: -114px;
}

/*** Por qué Needed ***/

.acerca-de-strip {
    background-color: #6EC557;
    color: var(--blanco);
    position: relative;
    overflow: hidden;
    padding: 72px 0;
}

.acerca-de-strip-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.acerca-de-strip-circulo {
    background-color: var(--verde);
    width: 100vw;
    height: 100vw;
    position: absolute;
    left: 30vw;
    z-index: 0;
    border-radius: 50%;
}

.acerca-de-strip p {
    max-width: 700px;
    position: relative;
    z-index: 1;
}

.acerca-de-strip-logo {
    z-index: 1;
    margin-right: 120px;
}

/*** Filosofia ***/

.filosofia {
    padding: var(--section-spacing-medium) 0;
}

.filosofia h2 {
    margin-bottom: 16px;
}

.filosofia-descripcion-general {
    display: flex;
    width: 100%;
    margin-bottom: 56px;
}

.filosofia-descripcion-general p:first-child {
    margin-right: 56px;
}

.filosofia-cuadritos {
    position: relative;
    display: grid;
    grid: auto auto / 1fr 1fr 1fr;
    gap: 12px;
    color: var(--blanco);
}

.filosofia-cuadritos div {
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    padding: 64px;
}

.filosofia-cuadritos h2 {
    margin-bottom: 12px;
}

.filosofia-mision {
    background-color: var(--naranja-claro);
}

.filosofia-vision {
    background-color: var(--naranja-oscuro);
}

.filosofia-valores {
    background-color: var(--azul-fondo);
    grid-area: 1 / 3 / 3 / 4;
}

.filosofia-objetivos {
    background-color: var(--rosa);
    grid-area: 2 / 1 / 3 / 3;
}

.filosofia-cuadritos h3 {
    margin-bottom: 12px;
}

.filosofia-globos {
    position: absolute;
    right: 20px;
    bottom: -72px;
}

/*** Nuestra fundadora ***/

.fundadora {
    padding-bottom: var(--section-spacing-medium);
}

.fundadora h2 {
    margin-bottom: 56px;
}

.fundadora h3 {
    margin-bottom: 4px;
}

.fundadora-content {
    display: flex;
    /* align-items: center; */
}

.fundadora-img {
    width: 25vw;
    height: 25vw;
    margin-right: 120px;
    object-fit: cover;
    border-radius: 50%;
    flex: 0 0 auto;
    max-width: 658px;
    max-height: 658px;
}

.fundadora-img-name-and-quote {
    margin-bottom: 40px;
}

.fundadora-img.tablet {
    display: none;
}

.fundadora-quote {
    font-size: 24px;
    opacity: 0.8;
}

.secondary-btn.is-fundadora {
    display: none;
}

.fundadora-description-wrapper {
    padding-right: 40px;
    max-height: 60vh;
    overflow-y: scroll;
}

.fundadora-description-wrapper::-webkit-scrollbar {
    width: 12px;
}
  
.fundadora-description-wrapper::-webkit-scrollbar-track {
    border-style:none;
    border-radius: 100px;
}

/*** Nuestros directivos ***/

.directivos {
    padding-bottom: var(--section-spacing-medium);
}

.directivos-container {
    display: flex;
    justify-content: space-between;
}

/* .directivos h2 {
    margin-bottom: 8px;
} */

.directivos-texto-general p {
    margin-bottom: 48px;
}

.directivos-texto-general {
    margin-right: 120px;
}

.directivos-personas {
    display: flex;
    text-align: center;
}

.directivos-persona {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 20vw;
}

.directivos-persona h3 {
    font-size: 24px;
    margin-bottom: 4px;
}

.directivos-persona {
    margin-right: 56px;
}

.directivos-persona:last-child {
    margin-right: 0;
}

.directivos-persona-img-wrapper {
    width: 100%;
    height: 0;
    padding-top: 100%;
    position: relative;
    margin-bottom: 24px;

}

.directivos-persona img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.directivos-sticker.tablet {
    display: none;
}

/*** Instalaciones ***/

.instalaciones-section {
    padding-bottom: var(--section-spacing-medium);
    overflow: hidden;
}

.instalaciones-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}

.instalaciones-parrafo-general {
    max-width: 584px;
}

.slider-buttons-wrapper {
    display: flex;
}

.slider-btn {
    position: relative;
    width: 48px;
    height: 48px;
    background-color: var(--azul-boton);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    overflow: hidden;
}

.slider-btn.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.slider-buttons-wrapper .slider-btn:first-child {
    margin-right: 8px;
}

.swiper.instalaciones {
    overflow: visible;
}

.swiper-wrapper.instalaciones {
    display: flex;
    align-items: stretch;    
}

.swiper-slide.instalaciones {
    height: 20vw;
    max-height: 305px;
}

.swiper-slide.instalaciones img {
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    height: 100%;
    width: 100%;
    object-fit: cover;
    margin-bottom: 4px;
}

.swiper-slide.instalaciones p {
    font-size: 16px;
    font-weight: 600;
}


/**************** Como ayudar ********************/

.como-ayudar-opcion {
    width: 168px;
    margin-bottom: 8px;
}

/* Portada */

.container.is-portada {
    display: flex;
}

.portada-circulo.is-orange {
    background-color: var(--naranja-oscuro);
}

.portada-circle-and-text.is-left {
    display: flex;
}

.portada-circulo.is-left {
    right: -6vw;
}

.portada-texto.is-left p, .portada-texto.is-right p {
    max-width: 520px;
}

/* Donación monetaria */

.donacion-monetaria-section {
    padding-top: var(--section-spacing-medium);
    overflow: hidden;
}

.donacion-monetaria-container {
    display: flex;
    justify-content: space-between;
}

.donacion-monetaria-left {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: start;
    margin-right: 7%;
}

.donacion-monetaria-titulo-y-parrafo {
    max-width: 546px;
    margin-bottom: var(--content-to-btn-spacing);
}

.donacion-monetaria-sticker {
    margin-top: 20px;
    margin-left: 40%;
}

.donacion-monetaria-right {
    max-width: 740px;
}

.donacion-monetaria-right h3 {
    margin-bottom: 24px;
}

.donacion-monetaria-pill {
    display: flex;
    align-items: center;
    position: relative;
    margin-bottom: 8px;
    color: var(--blanco);
    padding-left: 56px;
}

.donacion-monetaria-pill:nth-child(even) {
    margin-left: 32px;
}

.donacion-monetaria-pill h4 {
    margin-bottom: 4px;
}

.donacion-monetaria-pill:last-child {
    margin-bottom: 0;
}

.donacion-monetaria-pill-shape {
    position: absolute;
    border-radius: 100px 0 0 100px;
    left: 0;
    width: 100vw;
    z-index: -1;
}

.donacion-monetaria-pill:first-child .donacion-monetaria-pill-shape {
    background-color: #C2057E;
}

.donacion-monetaria-pill:nth-child(2) .donacion-monetaria-pill-shape {
    background-color: var(--rosa);
}

.donacion-monetaria-pill:nth-child(3) .donacion-monetaria-pill-shape {
    background-color: #F940B6;
}

.donacion-monetaria-pill:nth-child(4) .donacion-monetaria-pill-shape {
    background-color: #F86FC7;
}

/* Donación en especie */

.especie-section {
    padding-top: 80px;
    overflow: hidden;
}

.especie-titulo-y-parrafo {
    margin-bottom: var(--content-to-btn-spacing);
}

.especie-top {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 40px;
}

.especie-parrafo {
    max-width: var(--paragraph-max-width);
}

.slider-buttons-wrapper.is-especie {
    margin-bottom: -12px;
}

.swiper-slide.is-especie {
    display: flex;
    padding: 48px;
    border-radius: 0 var(--rounded-corner-large) 0 var(--rounded-corner-large);
    color: var(--blanco);
}

.swiper-slide.is-especie ul {
    margin-right: 48px;
} 

.swiper-slide.is-especie h3 {
    color: var(--blanco);
    order: 3;
    writing-mode: vertical-rl;
    margin-left: auto;
    font-size: 40px;
}

.swiper-slide.is-especie img {
    width: 50%;
    align-self: stretch;
    object-fit: cover;
    margin-right: 48px;
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
}

.swiper-slide.is-especie:nth-child(4n+1) {
    background-color: var(--azul-fondo);
}

.swiper-slide.is-especie:nth-child(4n+2) {
    background-color: var(--verde);
}

.swiper-slide.is-especie:nth-child(4n+3) {
    background-color: var(--naranja-claro);
}

.swiper-slide.is-especie:nth-child(4n+4) {
    background-color: var(--rosa);
}

/* Obtén una obra de arte */

.arte-section {
    padding-top: var(--section-spacing-medium);
}

.arte-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.arte-left {
    margin-right: 7%;
    max-width: 700px;
}

.arte-paragraph {
    margin-bottom: var(--content-to-btn-spacing);
}

.arte-paragraph ul {
    margin: var(--paragraph-spacing) 0;
}

.arte-imgs-wrapper {
    flex: 0 0 auto;
    display: flex;
    position: relative;
    top: 56px;
    width: 40%;
}

.arte-img-size {
    position: relative;
    flex: 1 1 auto;
    height: 100%;
    margin-right: 3%;
}

.arte-img-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 220%;
}

.arte-img {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    object-fit: cover;
    border-radius: 100px;
}

.arte-img:last-child {
    margin-right: 0;
}

.arte-img-size:nth-child(even) {
    bottom: 56px;
}

/* Servicio social y voluntariado */

.voluntariado-section {
    padding: var(--section-spacing-large) 0;
}

.voluntariado-container {
    display: flex;
    align-items: center;
}

.voluntariado-left {
    max-width: 770px;
    margin-right: 7%;
}

.voluntariado-paragraphs p {
    margin-bottom: var(--paragraph-spacing);
}

.voluntariado-paragraphs {
    margin-bottom: var(--content-to-btn-spacing);
}

.voluntariado-imgs-wrapper {
    display: flex;
    align-items: start;
    width: 40%;
    flex: 0 0 auto;
}

.voluntariado-img-size {
    position: relative;
}

.voluntariado-img-size:first-child {
    top: 40px;
    width: 60%;
    margin-right: 2%;
}

.voluntariado-img-size:last-child {
    width: 40%;
}

.voluntariado-img-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 100%;
}

.voluntariado-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Ayudar beneficios */

.ayudar-beneficios-section {
    padding-bottom: var(--section-spacing-medium);
}

.ayudar-beneficios-container {
    display: flex;
    align-items: center;
}

.ayudar-beneficios-left {
    margin-right: 7%;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.ayudar-beneficios-title {
    margin-bottom: 32px;
}

.ayudar-beneficios-list {
    margin-bottom: var(--content-to-btn-spacing);
    margin-left: 0;
    padding-left: 0;
}

.ayudar-beneficios-list li {
    padding-left: 32px;
    list-style-type: none;
    background-image: url("imagenes/logos-y-stickers/checklist-icon.svg");
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0 3px;
    margin-bottom: 8px;
}

.ayudar-beneficios-right {
    width: 50%;
    position: relative;
}

.ayudar-beneficios-img-ratio {
    width: 100%;
    height: 0;
    position: relative;
    padding-top: 70%;
}

.ayudar-beneficios-img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    object-fit: cover;
}

.ayudar-beneficios-sticker {
    position: absolute;
    right: -9%;
    top: -64px;
}


/**************** Logros ********************/

/* Portada logros */

.container.is-portada.is-right {
    justify-content: flex-end;
}

.portada-circulo.is-green {
    background-color: var(--verde);
}

.portada-circle-and-text.is-right {
    display: flex;
}

.portada-circulo.is-right {
    left: -6vw;
}

.portada-texto.is-right {
    align-items: flex-end;
    text-align: right;
}

/* Informes anuales */

.logros-carousel-section {
    padding-top: var(--section-spacing-medium);
}

.logros-carousel-container {
    display: flex;
    align-items: start;
}

.logros-carousel-tag {
    position: relative;
    color: var(--blanco);
    margin-right: 56px;
    max-width: 24%;
    padding: 64px 0;
}

.logros-carousel-tag-shape {
    position: absolute;
    right: -70%;
    top: 0;
    height: 100%;
    width: 100vw;
    z-index: -1;
    border-radius: 0 96px 0 96px;
}

.logros-carousel-tag-shape.is-rosa {
    background-color: var(--rosa);
}

.swiper.is-logros {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-end;
}

.swiper-wrapper.is-logros {
    display: flex;
}

.swiper-slide.is-logros {
    padding: 48px;
    background-color: var(--blanco);
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    transition: transform 0.2s, background-color 0.2s;
}

.swiper-slide.is-logros:hover {
    transform: translateY(-12px);
}

.logros-carousel-img-container {
    position: relative;
    height: 0;
    padding-top: 130%;
    margin-bottom: 20px;
    filter: drop-shadow(4px 4px 16px rgba(0, 0, 0, 0.2));
}

.logros-carousel-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.logros-carousel-slide-text {
    display: flex;
    align-items: start;
    width: 100%;
    justify-content: space-between;
    font-weight: 700;
}

.logros-carousel-slide-text p {
    margin-right: 16px;
}

.slider-buttons-wrapper.is-logros {
    margin-bottom: 24px;
}

/* Informes de psicología */

.logros-carousel-tag-shape.is-naranja {
    background-color: var(--naranja-oscuro);
}


.swiper-slide.is-logros.is-placeholder {
    cursor: default;
    pointer-events: none;
    visibility: hidden;
}

/* Medios */

.logros-carousel-tag-shape.is-azul {
    background-color: var(--azul-fondo);
}

/* Reconocimientos */

.reconocimientos-section {
    padding: var(--section-spacing-medium) 0;
    text-align: center;
}

.reconocimientos-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.reconocimientos-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 64px;
}

.reconocimientos-top p {
    max-width: 530px;
}

.reconocimientos-bottom {
    display: flex;
    justify-content: center;
}

.reconocimientos-badge {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 80px;
}

.reconocimientos-badge img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: 24px;
    border-radius: 50%;
}

.reconocimientos-badge h3 {
    font-size: 20px;
    margin-bottom: 4px;
}

.reconocimientos-badge:last-child {
    margin-right: 0;
}

/* Logros strip */

.strip {
    padding: 72px 0;
    color: var(--blanco);
    overflow: hidden;
}

.strip.is-azul {
    background-color: var(--azul-fondo);
}

.strip-container {
    display: flex;
}

.strip-left {
    padding-right: 5%;
}

.strip-left.is-logros h2 {
    max-width: 300px;
}

.strip-right {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.strip-right-content-wrapper {
    width: 100%;
    display: flex;
    padding-left: 8%;
}

.strip-right-item {
    display: flex;
    align-items: start;
    position: relative;
    z-index: 1;
    margin-right: 8%;
}

.strip-right-item:last-child {
    margin-right: 0;
}

.strip-circulo {
    position: relative;
    width: 100vw;
    height: 100vw;
    border-radius: 50%;
    align-self: center;
}

.strip-circulo.is-azul {
    background-color: #4397FE;
    position: absolute;
    left: 0;
    z-index: 0;
}

.strip-right-item-bullet-shape {
    background-color: var(--naranja-claro);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin-right: 16px;
    margin-top: 7px;
    flex: 0 0 auto;
}

.strip-right-item-text-wrapper h3 {
    margin-bottom: 8px;
}

.strip-right-item-text-wrapper ul {
    padding-left: 0;
}

.strip-right-item-text-wrapper ul li {
    margin-bottom: 4px;
    list-style-type: none;
}

.strip-right-item-text-wrapper ul li span {
    font-weight: 700;
}

/* Needed ha beneficiado */

.needed-beneficiado-section {
    padding: var(--section-spacing-medium) 0;
}

.needed-beneficiado-content-wrapper {
    padding: 56px 88px;
    background-color: var(--blanco);
    border-radius: 1000px;
    text-align: center;
}

.needed-beneficiado-text span {
    color: var(--rosa);
}

/* Modelo Needed */

.modelo-needed-container {
    max-width: 1170px;
}

.modelo-needed-img {
    width: 100%;
    mix-blend-mode: multiply;
}

/* Conferencias */

.conferencias-section {
    padding: var(--section-spacing-medium) 0;
}

.conferencias-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.conferencias-img-wrapper {
    position: relative;
}

.conferencias-img-wrapper {
    width: 50%;
    margin-right: 7%;
}

.conferencias-img {
    width: 100%;
    border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
}

.conferencias-sticker {
    position: absolute;
}

.conferencias-sticker-flores {
    top: -40px;
    left: -40px;
}

.conferencias-sticker-fuerza {
    bottom: -24px;
    right: -24px;
}

.conferencias-text-wrapper p {
    max-width: 470px;
}

/**************** Donar ahora ********************/

.donar-ahora-container {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

/* Donar ahora left */

.donar-ahora-left {
    padding-top: 10vh;
    margin-right: 120px;
    flex: 0 0 auto;
}

.donar-ahora-left h1 {
    margin-bottom: 72px;
}

.donar-ahora-left h2 {
    font-size: 32px;
    letter-spacing: 0;
    margin-bottom: 40px;
}

.donar-ahora-form {
    margin-bottom: 72px;
}

.frecuencia-donacion-wrapper {
    overflow: hidden;
    border-radius: 100px;
    display: flex;
    margin-bottom: 20px;
}

.frecuencia-donacion-option, .cantidad-a-donar-option {
    display: none;
} 

.frecuencia-donacion-option-label {
    font-weight: 600;
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background-color: var(--blanco);
    cursor: pointer;
    transition: background-color 0.1s;
}

.frecuencia-donacion-option:checked + .frecuencia-donacion-option-label {
    background-color: var(--rosa);
    color: var(--blanco);
}

.cantidad-a-donar-wrapper {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
}

.cantidad-a-donar-option-wrapper:nth-child(-n+4) {
    grid-column: span 1;
}

.cantidad-a-donar-option-wrapper:last-child {
    grid-column: span 2;
}

.cantidad-a-donar-option-wrapper {
    border-radius: 100px;
    overflow: hidden;
    position: relative;
}

.cantidad-a-donar-option-label {
    width: 100%;
    font-weight: 600;
    background-color: var(--blanco);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.1s;
    padding: 16px 24px;
    color: var(--negro);
}

.cantidad-a-donar-option:checked + .cantidad-a-donar-option-label {
    background-color: var(--rosa);
    color: var(--blanco);
}

.cantidad-a-donar-option-label.is-otro-monto {
    padding: 0;
    height: 100%;
}

.cantidad-a-donar-option-label.is-otro-monto span {
    position: absolute;
    left: 24px;
    display: none;
}

.cantidad-a-donar-option-label.is-otro-monto {
    padding: 0;
}

.cantidad-a-donar-option-otro-monto {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    padding: 0 36px;
    cursor: pointer;
    background: none;
    color: inherit;
}

.cantidad-a-donar-option-otro-monto::placeholder {
    color: inherit;
}

.cantidad-a-donar-option-otro-monto:focus::placeholder {
    visibility: hidden;
}

/* Donar ahora right */

.donar-ahora-right {
    position: relative;
    top: 4vh;
    width: 100%;
}

.donar-ahora-img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    border-radius: var(--rounded-corner);
}

.donar-ahora-img-sticker {
    position: absolute;
    left: -72px;
    top: -32px;
}


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

    .strip-right-content-wrapper.is-logros {
        flex-direction: column;
    }

    .strip-right-item.is-logros {
        margin-right: 0;
        margin-bottom: 24px;
    }

    .strip-right.is-logros {
        width: auto;
    }

    .strip-container.is-logros {
        justify-content: center;
    }

    .strip-right-content-wrapper.is-logros {
        padding-left: 0;
    }

    .strip-right.is-logros {
        padding-left: 7%;
    }

}


@media only screen and (max-width: 1024px) {
    body {
        font-size: 16px;
    }

    .ayudar-beneficios-list li {
        background-size: 18px 18px;
        background-position: 0 2px;
    }

}

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

    :root {
        --section-spacing-medium: 72px;
    }
    
    h1 {
        font-size: 88px;
        letter-spacing: -0.04em;
    }

    h2 {
        font-size: 48px;
    }

    h3, .subtitulo {
        font-size: 28px;
    }
	
	.portada h1 {
    font-size: 88px;
    letter-spacing: -0.04em;
    line-height: 88px;
}

    .sticker {
        width: 136px;
    }

    .three-layer-title {
        margin-bottom: 32px;
    }

    /* Portada */

    .portada-texto.is-left p, .portada-texto.is-right p {
        max-width: 460px;
    }

    /************ Acerca de ************/

    /* Por qué Needed */

    .por-que-needed-content {
        flex-direction: column;
        width: auto;
    }

    .por-que-needed-text {
        margin-right: 0;
        margin-bottom: 32px;
    }

    .por-que-needed-img-container {
        width: 100%;
    }

    .por-que-needed-img-wrapper {
        padding-top: 60%;
    } 
    
    .por-que-needed-img {
        border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    }

    .por-que-needed-sticker {
        left: auto;
        right: -32px;
        top: 32px;
    }

    /* Acerca de strip */

    .acerca-de-strip-logo {
        width: 160px;
        margin-right: 16vw;
    }

    .acerca-de-strip-circulo {
        left: 30vw;
    }

    /* Creando nuevos futuros */

    .filosofia-cuadritos {
        grid: auto auto / 1fr 1fr 1fr 1fr 1fr 1fr;
    }

    .filosofia-cuadritos div {
        padding: 48px;
    }

    .filosofia-mision {
        grid-area: 1 / 1 / 2 / 4;
    }

    .filosofia-vision {
        grid-area: 1 / 4 / 2 / 7;
    }

    .filosofia-valores {
        grid-area: 2 / 1 / 3 / 3;
    }

    .filosofia-objetivos {
        grid-area: 2 / 3 / 3 / 7;
    }

    .filosofia-globos {
        width: 152px;
        right: auto;
        bottom: -64px;
        left: 24px;
    }

    /* Nuestra fundadora */

    .fundadora-content {
        flex-direction: column;
    }

    .fundadora-img {
        display: none;
    }

    .fundadora-img.tablet {
        display: inline;
        order: -1;
        width: 32vw;
        height: 32vw;
        margin-right: 40px;
    }

    .fundadora-img-name-and-quote {
        display: flex;
        align-items: center;
        margin-bottom: 0;
    }

    .fundadora h2 {
        margin-bottom: 32px;
    }

    .secondary-btn.is-fundadora {
        display: flex;
        margin-top: 16px;
    }

    .fundadora-description-wrapper {
        padding-right: 0;
        max-height: none;
        overflow-y: visible;
        margin-top: 24px;
        display: none;
    }

    .fundadora-description-wrapper.is-shown {
        display: block;
    }

    /* Nuestros directivos */

    .directivos-container {
        flex-direction: column;
    }

    .directivos-personas {
        align-items: start;
    }

    .directivos-persona {
        width: 100%;
    }

    .directivos-persona img {
        width: 100%;
    }

    .directivos-sticker {
        display: none;
    }

    .directivos-sticker.tablet {
        display: inline-block;
        width: 100%;
    }

    /* Instalaciones */

    .swiper-slide.instalaciones {
        height: 270px;
    }


    /************ Cómo ayudar ************/

    /* Donación monetaria */

    .donacion-monetaria-sticker {
        margin-top: 40px;
    }

    /* Donación en especie */

    .especie-section {
        padding-top: var(--section-spacing-medium);
    }

    .swiper-slide.is-especie img, .swiper-slide.is-especie ul {
        margin-right: 32px;
    }

    .swiper-slide.is-especie {
        padding: 32px;
    }

    /* Obtén una obra de arte */

    .arte-section {
        overflow: visible;
    }

    .arte-imgs-wrapper {
        flex-direction: column;
        top: 32px;
        width: 28%;
    }

    .arte-img-size {
        margin-right: 0;
        margin-bottom: 12px;
    }

    .arte-img-container {
        padding-top: 60%;
    }

    .arte-img-size:nth-child(even) {
        bottom: 0;
    }

    .arte-img {
        border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
    }

    /* Voluntariado */

    .voluntariado-section {
        padding: var(--section-spacing-medium) 0;
    }

    .voluntariado-left {
        margin-right: 12%;
    }

    .voluntariado-imgs-wrapper {
        flex-direction: column-reverse;
        width: 24%;
    }

    .voluntariado-img-size:first-child {
        top: 0;
        width: 100%;
    }

    .voluntariado-img-size:last-child {
        width: 64%;
        top: 12px;
        right: 30%;
    }

    /************ Logros *************/

    /* Logros Carousel */

    .logros-carousel-container {
        flex-direction: column;
    }

    .swiper.is-logros {
        width: 100%;
        margin-top: -140px;
    }

    .logros-carousel-tag {
        margin-right: 0;
        max-width: none;
        width: 72%;
        padding-bottom: 100px;
        padding-top: 48px;
    }

    .logros-carousel-tag-shape {
        right: -48px;
    }

    /* Reconocimientos */

    .reconocimientos-badge h3 {
        font-size: 18px;
    }

    .reconocimientos-badge {
        margin-right: 6%;
        width: 24%;
    }

    /* Needed ha beneficiado */

    .strip-left.is-logros {
        flex: 0 1 0;
    }

    .strip-left {
        padding-right: 7%;
    }

    /* Conferencias */

    .conferencias-sticker-flores {
        left: -24px;
    }
	
	/**************** Donar ahora ********************/

	.donar-ahora-container {
		display: flex;
		align-items: start;
		justify-content: space-between;
		flex-direction: column;
	}

}

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

    :root {
        --section-spacing-medium: 56px;
        --content-to-btn-spacing: 20px;
    }
    
    h1 {
        font-size: 64px;
    }
	
		.portada h1 {
    font-size: 64px;
    letter-spacing: -0.04em;
    line-height: 64px;
}

    h2 {
        font-size: 40px;
        /* margin-bottom: 4px; */
    }

    .three-layer-paragraph {
        margin-top: 12px;
    }

    .three-layer-title {
        margin-bottom: 20px;
    }

    /* Portada */

    .portada-texto p {
        font-size: 16px;
    }

    .portada-texto.is-centered {
        padding: 0 64px;
    }

    .portada-texto.is-left p, .portada-texto.is-right p {
        max-width: 380px;
    }

    /* Por qué Needed */

    .por-que-needed-content {
        width: 90%;
    }

    .por-que-needed-text {
        margin-bottom: 24px;
    }

    .por-que-needed-sticker {
        right: 13px;
        top: -33px;
    }

    /* Filosofia */

    .filosofia h2 {
        margin-bottom: 8px;
    }

    /* Acerca de strip */

    .acerca-de-strip-logo {
        display: none;
    }

    .acerca-de-strip-circulo {
        border-radius: 0 50% 50% 0;
        right: 8vw;
        left: auto;
    }

    .acerca-de-strip-content {
        padding-right: 48px;
    }

    /* Creando nuevos futuros */

    .filosofia-descripcion-general {
        flex-direction: column;
        margin-bottom: 32px;
    }

    .filosofia-descripcion-general p:first-child {
        margin-right: 0;
        margin-bottom: 4px;
    }

    .filosofia-cuadritos {
        grid: auto auto auto auto / 1fr;
    }

    .filosofia-cuadritos div {
        grid-area: auto;
        padding: 40px;
    }

    .filosofia-globos {
        display: none;
    }

    /* Nuestra fundadora */

    .fundadora h2 {
        margin-bottom: 20px;
    }

    .fundadora-img-name-and-quote {
        flex-direction: column;
        align-items: start;
    }

    .fundadora-img.tablet {
        margin-right: 0;
        margin-bottom: 20px;
        width: 100%;
        height: 56vw;
        border-radius: 0 var(--rounded-corner) 0 var(--rounded-corner);
        object-position: 50% 24%;
    }

    /* Nuestros directivos */

    .directivos-sticker.tablet {
        display: none;
    }

    .directivos-persona {
        margin-right: 6%;
    }

    .directivos-persona:nth-child(2) {
        margin-right: 0;
    }

    .directivos-texto-general p {
        margin-bottom: 24px;
    }

    /* Instalaciones */

    .swiper-slide.instalaciones {
        height: 60vw;
    }

    .instalaciones-top {
        flex-direction: column;
        align-items: start;
        margin-bottom: 16px;
    }

    .instalaciones-texto-general {
        margin-bottom: 24px;
    }

    /************ Cómo ayudar *************/

    /* Portada */

    .portada-circulo.is-left, .portada-circulo.is-right {
        width: 200vw;
        height: 200vw;
    }

    .portada-circulo.is-left {
        right: 0;
    }

    .portada-circulo.is-right {
        left: 0;
    }

    .portada-circle-and-text.is-left {
        padding-right: 11vw;
    }

    .portada-circle-and-text.is-right {
        padding-left: 11vw;
    }

    /* Donación monetaria */

    .donacion-monetaria-container {
        flex-direction: column;
    }

    .donacion-monetaria-left {
        margin-right: 0;
        margin-bottom: 36px;
    }

    .donacion-monetaria-sticker {
        display: none;
    }

    .donacion-monetaria-pill-shape {
        border-radius: 0 100px 100px 0;
        left: auto;
        right: 0;
    }

    .donacion-monetaria-pill {
        padding-left: 0;
        padding-right: 56px;
    }

    .donacion-monetaria-pill:nth-child(even) {
        margin-left: 0;
        margin-right: 32px;
    }

    /* Donación en especie */

    .especie-top {
        flex-direction: column;
        align-items: start;
        margin-bottom: 16px;
    }

    .especie-top-main {
        margin-bottom: 24px;
    }

    .slider-buttons-wrapper.is-especie {
        margin-bottom: 0;
    }

    .swiper-slide.is-especie {
        flex-direction: column;
    }

    .swiper-slide.is-especie h3 {
        writing-mode: horizontal-tb;
    }

    .swiper-slide.is-especie h3 {
        order: 0;
        margin-left: 0;
        margin-bottom: 8px;
        font-size: 32px;
    }

    .swiper-slide.is-especie img {
        display: none;
    }

    /* Obtén una obra de arte */

    .arte-container {
        flex-direction: column;
    }

    .arte-left {
        margin-right: 0;
        margin-bottom: 80px;
    }

    .arte-imgs-wrapper {
        flex-direction: row;
        top: 0;
        width: 100%;
    }

    .arte-img-size {
        margin-right: 12px;
        margin-bottom: 0;
    }

    .arte-img-size:nth-child(even) {
        bottom: 48px;
    }

    .arte-img-container {
        padding-top: 200%;
    }

    .arte-img {
        border-radius: 100px;
    }

    /* Servicio social y voluntariado */

    .voluntariado-section {
        padding-bottom: 72px;
    }

    .voluntariado-container {
        flex-direction: column;
    }

    .voluntariado-left {
        margin-right: 0;
        margin-bottom: 32px;
    }

    .voluntariado-imgs-wrapper {
        flex-direction: row;
        width: 100%;
    }

    .voluntariado-img-size:first-child {
        margin-right: 5%;
    }

    .voluntariado-img-size:last-child {
        top: 20px;
        right: 0;
    }

    /* Beneficios de ayudar */

    .ayudar-beneficios-sticker {
        display: none;
    }

    .ayudar-beneficios-left {
        margin-right: 0;
        margin-bottom: 32px;
    }

    .ayudar-beneficios-title {
        margin-bottom: 16px;
    }

    .ayudar-beneficios-list {
        margin-bottom: var(--content-to-btn-spacing);
    }

    .ayudar-beneficios-container {
        align-items: start;
        flex-direction: column;
    }

    .ayudar-beneficios-right {
        width: 100%;
    }

    .ayudar-beneficios-img-ratio {
        padding-top: 50%;
    }

    /************ Cómo ayudar *************/

    /* Logros carousel */

    .swiper.is-logros {
        align-items: start;
        margin-top: 0;
    }

    .logros-carousel-tag-shape {
        display: none;
    }

    .logros-carousel-tag {
        padding: 0;
        color: var(--negro);
        margin-bottom: 32px;
    }

    .slider-buttons-wrapper.is-logros {
        margin-bottom: 20px;
    }

    /* Reconocimientos */

    .reconocimientos-bottom {
        flex-wrap: wrap;
    }

    .reconocimientos-badge {
        width: 36%;
    }

    .reconocimientos-badge:nth-child(2) {
        margin-right: 0;
    }

    .reconocimientos-badge:first-child {
        margin-right: 8%;
    }

    .reconocimientos-badge:last-child {
        margin-top: 5%;
    }

    /* Logros strip */

    .strip-container.is-logros {
        flex-direction: column;
    }

    .strip-left {
        padding-right: 0;
    }

    .strip-left.is-logros h2 {
        position: relative;
        z-index: 1;
        max-width: none;
    }

    .strip-right.is-logros {
        padding-left: 0;
    }

    .strip-right-item.is-logros {
        margin-bottom: 16px;
    }

    .strip-container.is-logros {
        width: auto;
    }

    .strip-left.is-logros {
        flex: 0 1 auto;
    }

    .strip-left.is-logros {
        margin-bottom: 24px;
    }

    .strip-right-item-bullet-shape {
        width: 20px;
        height: 20px;
        margin-top: 6px;
    }

    .strip-circulo.is-logros {
        display: none;
    }

    /* Needed beneficiado */

    .needed-beneficiado-content-wrapper {
        border-radius: 0 var(--rounded-corner-large);
        padding: 56px;
    }

    /* Conferencias */

    .conferencias-container {
        flex-direction: column-reverse;
    }

    .conferencias-img-wrapper {
        width: 100%;
        margin-right: 0;
    }

    .conferencias-sticker-flores {
        display: none;
    }

    .conferencias-container {
        align-items: start;
    }

    .conferencias-text-wrapper p {
        max-width: none;
    }

    .conferencias-text-wrapper {
        margin-bottom: 32px;
    }

}

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

    :root {
        --content-to-btn-spacing: 16px;
    }

    h2 {
        font-size: 32px;
    }

    h3, .subtitulo {
        font-size: 22px;
    }

    h4 {
        font-size: 18px;
    }

    .sticker {
        width: 112px;
    }

    .three-layer-title {
        margin-bottom: 16px;
    }

    .como-ayudar-opcion {
        width: 144px;
        margin-bottom: 6px;
    }

    /* Portada */

    .portada-circulo.is-centered {
        width: 112vw;
        height: 112vw;
    }

    .portada-texto.is-centered {
        padding: 0;
        max-width: 90%;
    }

    /* Por qué Needed */

    .por-que-needed-parrafo {
        margin-top: 8px;
    }

    /* Acerca de strip */

    .acerca-de-strip {
        padding: 56px 0;
    }

    .fundadora-img.tablet {
        height: auto;
    }

    /* Nuestros directivos */

    .directivos-persona h3 {
        font-size: 20px;
    }

    /* Fundadora */

    .fundadora-quote {
        font-size: 20px;
    }

    /* Instalaciones */

    .instalaciones-top {
        margin-bottom: 14px;
    }

    /************ ¿Cómo ayudar? *************/

    .donacion-monetaria-right h3 {
        margin-bottom: 20px;
    }

    .donacion-monetaria-left {
        margin-bottom: 32px;
    }

    .especie-top {
        margin-bottom: 14px;
    }
    
    .swiper-slide.is-especie h3 {
        font-size: 24px;
        margin-bottom: 4px;
    }

    .ayudar-beneficios-img-ratio {
        padding-top: 70%;
    }

    /************ Logros *************/

    /* Logros carousel */

    .logros-carousel-slide-text p {
        font-size: 18px;
    }

    .logros-carousel-tag {
        margin-bottom: 24px;
    }

    .slider-buttons-wrapper.is-logros {
        margin-bottom: 16px;
    }

    .reconocimientos-bottom {
        flex-direction: column;
        align-items: center;
    }

    .reconocimientos-badge:first-child {
        margin-right: 0;
    }

    .reconocimientos-badge:last-child {
        margin-top: 0;
    }

    .reconocimientos-badge {
        width: 58%;
        margin-bottom: 36px;
    }

    .reconocimientos-badge img {
        margin-bottom: 16px;
    }

    /* Logros strip */

    .strip-container.is-logros {
        max-width: 90%;
    }

    /* Conferencias */

    .conferencias-sticker-fuerza {
        right: 3%;
    }

}