/*  1. Variables corporativas
---------------------------------------------------------- */
:root {
    --color-primary: #393F38;
    --color-secondary: #847732;
    --color-light-1: #eae5cc;
    --color-light-2: #bfc9bb;
    --color-text: #333333;
    --color-white: #FFFFFF;
    --color-gray-bg: #f9f9f9;
    --font-title: 'Poiret One', cursive;
    --font-body: 'Quicksand', sans-serif;
    --shadow-sm: 0 8px 25px rgba(0, 0, 0, .05);
    --shadow-hover: 0 22px 38px rgba(132, 119, 50, .15);
    --radius-card: 24px;
    --radius-btn: 40px;
}

/*  2. Base y accesibilidad
---------------------------------------------------------- */
.pagina-voluntariado {
    font-family: var(--font-body);
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
}

.pagina-voluntariado .breadcrumbs {
	margin-top: 1em;
}

.pagina-voluntariado h1,
.pagina-voluntariado h2,
.pagina-voluntariado h3,
.pagina-voluntariado h4 {
    font-family: var(--font-title);
    font-weight: 400;
    letter-spacing: .5px;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 1rem 2rem;
    background-color: var(--color-primary);
    color: var(--color-white);
    border-radius: 0 0 var(--radius-btn) 0;
}

.skip-link:focus {
    left: 0;
    color: var(--color-white);
}

.pagina-voluntariado a:focus-visible,
.pagina-voluntariado button:focus-visible {
    outline: 3px solid var(--color-secondary);
    outline-offset: 3px;
    border-radius: 4px;
}

/*  3. Enlaces de contenido (color corporativo + subrayado propio)
---------------------------------------------------------- */
.pagina-voluntariado .texto-contenido a,
.pagina-voluntariado a.enlace-vol,
.pagina-voluntariado a.enlace-vol:link,
.pagina-voluntariado a.enlace-vol:visited {
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--color-secondary);
    outline-style: none;
    transition: all .3s ease;
}

.pagina-voluntariado a.enlace-vol:hover,
.pagina-voluntariado a.enlace-vol:focus,
.pagina-voluntariado a.enlace-vol:active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    text-decoration: none;
}

/*  4. Botones (mantiene el estilo de la web)
---------------------------------------------------------- */
.pagina-voluntariado .btn-vol {
    display: inline-block;
    padding: 1.2rem 3rem;
    margin: .5rem .5rem 0 0;
    border: 2px solid transparent;
    border-radius: var(--radius-btn);
    background-color: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .4px;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(57, 63, 56, .2);
    transition: all .25s ease;
}
.pagina-voluntariado .btn-vol.gold {
    background-color: var(--color-secondary);
}

.pagina-voluntariado .btn-vol:hover,
.pagina-voluntariado .btn-vol:focus {
    background-color: var(--color-secondary);
    border-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
}

.pagina-voluntariado .btn-vol i {
    margin-right: .8rem;
}

.pagina-voluntariado .btn-vol-outline {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: none;
}

.pagina-voluntariado .btn-vol-outline:hover,
.pagina-voluntariado .btn-vol-outline:focus {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.pagina-voluntariado .btn-vol-blanco {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-secondary);
}

.pagina-voluntariado .btn-vol-blanco:hover,
.pagina-voluntariado .btn-vol-blanco:focus {
    background-color: var(--color-light-1);
    border-color: var(--color-light-1);
    color: var(--color-primary);
}

.pagina-voluntariado .texto-contenido a {
    color: var(--color-white);
}

/*  5. Cabecera / Hero
---------------------------------------------------------- */
.hero-voluntariado {
    position: relative;
    padding: 20rem 0 8rem;
    text-align: center;
    /* background-color: var(--color-primary); */
    background-image: url('../img/voluntariado/fondo-cabecera-landing-voluntariado-horizonte-animal-min.webp');
    background-size: cover;
    background-position: center 40%;
    background-repeat: no-repeat;
}

.hero-voluntariado::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(180deg, rgba(57, 63, 56, .82) 0%, rgba(57, 63, 56, .70) 100%); */
}

.hero-voluntariado .container {
    position: relative;
    z-index: 2;
}

.hero-voluntariado .antetitulo {
    display: block;
    margin-bottom: 1.5rem;
    color: var(--color-light-1);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.hero-voluntariado h1 {
    max-width: 20em;
    margin: 0 auto;
    color: var(--color-white);
    font-size: 3.3rem;
    line-height: 1.15;
}

.hero-voluntariado .sep-vol {
    max-width: 70px;
    margin: 2.5rem auto;
    border: 0;
    border-top: 3px solid var(--color-light-1);
}

.hero-voluntariado p {
    max-width: 46em;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, .92);
    font-size: 1.7rem;
}

.hero-voluntariado .grupo-botones {
    margin-top: 2rem;
}

/*  6. Migas de pan
---------------------------------------------------------- */
.migas-voluntariado {
    padding: 1.5rem 0;
    background-color: var(--color-gray-bg);
    border-bottom: 1px solid #ededed;
}

.migas-voluntariado ol {
    display: flex;
    flex-wrap: wrap;
    gap: .8rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 1.3rem;
}

.migas-voluntariado li + li::before {
    content: "\003E";
    margin-right: .8rem;
    color: #9b9b9b;
}

.migas-voluntariado [aria-current="page"] {
    color: #6d6d6d;
}

/*  7. Secciones
---------------------------------------------------------- */
.seccion-vol {
    padding: 7rem 0;
}

.seccion-vol-gris {
    background-color: var(--color-gray-bg);
}

.seccion-vol-crema {
    background-color: var(--color-light-1);
}

.titulo-seccion-vol {
    max-width: 900px;
    margin: 0 auto 4.5rem;
    text-align: center;
}

.titulo-seccion-vol h2 {
    margin: 0;
    color: var(--color-secondary);
    font-size: 2.9rem;
    line-height: 1.2;
}

.titulo-seccion-vol .sep-vol {
    max-width: 50px;
    margin: 2rem auto;
    border: 0;
    border-top: 2px solid var(--color-secondary);
}

.titulo-seccion-vol p {
    margin: 0;
    color: #5a5a5a;
    font-size: 1.7rem;
}

.texto-contenido p {
    font-size: 1.6rem;
}

/*  8. Tarjetas (sistema de columnas Bootstrap de style.css)
---------------------------------------------------------- */
.fila-vol {
    display: flex;
    flex-wrap: wrap;
}

.tarjeta-vol {
	text-align: center;
    height: auto;
    padding: 3rem 2.5rem;
    margin-bottom: 3rem;
    background-color: var(--color-white);
    border: 1px solid #ececec;
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease;
}

.tarjeta-vol:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
}

.tarjeta-vol .icono-vol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    margin-bottom: 2rem;
    background-color: var(--color-light-1);
    border-radius: 50%;
    color: var(--color-secondary);
    font-size: 2.4rem;
}

.tarjeta-vol h3 {
    margin: 0 0 1rem;
    color: var(--color-primary);
    font-size: 2.2rem;
}

.tarjeta-vol p {
    margin: 0;
    font-size: 1.5rem;
}

/*  9. Listas con iconos
---------------------------------------------------------- */
.lista-vol {
    margin: 0;
    padding: 0;
    list-style: none;
}

.lista-vol li {
    position: relative;
    padding: 0 2rem 2rem 3.5rem;
    font-size: 1.6rem;
}

.lista-vol li i {
    position: absolute;
    left: 0;
    top: .4rem;
    color: var(--color-secondary);
    font-size: 1.7rem; 
}

/*  10. Acordeón de tareas (jQuery)
---------------------------------------------------------- */
.acordeon-vol {
    max-width: 940px;
    margin: 0 auto;
}

.acordeon-vol .item-acordeon {
    margin-bottom: 1.5rem;
    background-color: var(--color-white);
    border: 1px solid #e6e6e6;
    border-radius: 16px;
    overflow: hidden;
}

.acordeon-vol .cabecera-acordeon {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    background-color: transparent;
    border: 0;
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1.7rem;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background-color .25s ease;
}

.acordeon-vol .cabecera-acordeon .fa-chevron-down {
    margin-left: auto;
    color: var(--color-secondary);
    font-size: 1.5rem;
    transition: transform .3s ease;
}

.acordeon-vol .cabecera-acordeon[aria-expanded="true"] {
    background-color: var(--color-light-1);
}

.acordeon-vol .cabecera-acordeon[aria-expanded="true"] .fa-chevron-down {
    transform: rotate(180deg);
}

.acordeon-vol .icono-acordeon {
    color: var(--color-secondary);
    font-size: 2rem;
    min-width: 2.4rem;
    text-align: center;
}

.acordeon-vol .cuerpo-acordeon {
    display: none;
    padding: 0 2.5rem 2.5rem;
}

.acordeon-vol .cuerpo-acordeon p {
    font-size: 1.55rem;
}

/*  11. Aviso de honestidad
---------------------------------------------------------- */
.aviso-vol.certificado {
    padding: 3rem;
    background-color: var(--color-white);
	border: 1px solid var(--color-secondary);
    border-left: 6px solid var(--color-secondary);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
	margin-top: 2em;
	
}
.aviso-vol.certificado h3 {
    margin: 0 0 1.2rem;
    color: var(--color-secondary);
    font-size: 2.2rem;
	font-family: var(--font-body);
}

.aviso-vol {
    padding: 3rem;
    background-color: var(--color-white);
    border-left: 6px solid var(--color-primary);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
    margin-bottom: 3rem;
	margin-top: 2em;
	
}

.aviso-vol h3 {
    margin: 0 0 1.2rem;
    color: var(--color-primary);
    font-size: 2.2rem;
}

.aviso-vol p:last-child {
    margin-bottom: 0;
}

/*  12. Pasos del proceso
---------------------------------------------------------- */
.paso-vol {
    position: relative;
    padding: 3rem 2.5rem 3rem 8rem;
    margin-bottom: 2.5rem;
    background-color: var(--color-white);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
}

.paso-vol .numero-paso {
    position: absolute;
    left: 2.5rem;
    top: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background-color: var(--color-primary);
    border-radius: 50%;
    color: var(--color-white);
    font-size: 1.8rem;
    font-weight: 700;
}

.paso-vol h3 {
    margin: 0 0 .8rem;
    color: var(--color-secondary);
    font-size: 2.1rem;
}

.paso-vol p {
    margin: 0;
    font-size: 1.55rem;
}

/*  13. Bloque imagen + texto
---------------------------------------------------------- */
.pagina-voluntariado h2#titulo-esencia {
	margin-bottom: 1em;
	font-size: 2.9rem;
}

.bloque-imagen-vol img {
    max-width: 80%;
    height: auto;
}

.bloque-texto-vol {
    padding: 2rem 0 0;
}

.bloque-texto-vol h2 {
    margin-top: 0;
    color: var(--color-secondary);
    font-size: 3.4rem;
}

/*  14. Galería
---------------------------------------------------------- */
.galeria-vol img {
    width: 100%;
    height: 240px;
    margin-bottom: 3rem;
    object-fit: cover;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition: transform .35s ease;
}

.galeria-vol img:hover {
    transform: scale(1.03);
}

/*  15. Franja de llamada a la acción
---------------------------------------------------------- */
.franja-vol {
    padding: 6rem 0;
    background-color: var(--color-secondary);
    text-align: center;
}

.franja-vol h2 {
    margin-top: 0;
    color: var(--color-white);
    font-size: 3.6rem;
}

.franja-vol p {
    max-width: 42em;
    margin: 0 auto 2.5rem;
    color: rgba(255, 255, 255, .95);
    font-size: 1.7rem;
}

/*  16. Bloque empresas
---------------------------------------------------------- */
.bloque-empresas-vol {
    padding: 4rem;
    background-color: var(--color-primary);
    border-radius: var(--radius-card);
    text-align: center;
    background-image: url(../img/voluntariado/fondo-voluntariado-corporativo-min.webp);
    background-position: center;
    background-size: cover;
}

.bloque-empresas-vol h2 {
    margin-top: 0;
    color: var(--color-white);
    font-size: 3.2rem;
}

.bloque-empresas-vol p {
    max-width: 44em;
    margin: 0 auto 2.5rem;
    color: rgba(255, 255, 255, .9);
    font-size: 1.6rem;
}

/* 18. Galería fotos magnific 
-----------------------------------------------------*/
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.8rem;
	margin-top: 3rem;
	/* margin-bottom: 3em; */
}
.gallery-item {
	border-radius: 16px;
	overflow: hidden;
	cursor: pointer;
	aspect-ratio: 1/0.8;
}
.gallery-item img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: 0.4s;
}
.gallery-item:hover img { transform: scale(1.06); }
.box-info.box-light-green {
	margin-bottom: 4em !important;
}
@media (max-width: 768px) {
	.gallery-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.8rem;
	}
}


/*  19. Responsive
---------------------------------------------------------- */
@media (max-width: 991px) {
    .hero-voluntariado {
        padding: 14rem 0 6rem;
    }

    .hero-voluntariado h1 {
        font-size: 3rem;
    }

    .titulo-seccion-vol h2 {
        font-size: 3.2rem;
    }
}

@media (max-width: 767px) {
    .seccion-vol {
        padding: 5rem 0;
    }

    .hero-voluntariado {
        padding: 14rem 0 5rem;
    }

    .hero-voluntariado h1 {
        font-size: 2.9rem;
    }

    .hero-voluntariado p,
    .titulo-seccion-vol p {
        font-size: 1.55rem;
    }

    .titulo-seccion-vol h2,
    .franja-vol h2,
    .bloque-empresas-vol h2 {
        font-size: 2.6rem;
    }

    .acordeon-vol .cabecera-acordeon {
        font-size: 1.6rem;
    }

    .acordeon-vol .cuerpo-acordeon {
        padding: 0 1.8rem 2rem;
    }

    .paso-vol {
        padding: 2.5rem 2rem 2.5rem 2rem;
    }

    .paso-vol .numero-paso {
        position: static;
        margin-bottom: 1.5rem;
    }

    .bloque-empresas-vol {
        padding: 3rem 2rem;
    }

    .btn-vol {
        display: block;
        margin-right: 0;
        text-align: center;
    }
}

@media (min-width: 1600px) {
    .pagina-voluntariado .container {
        max-width: 1440px;
    }

    .hero-voluntariado h1 {
        font-size: 5.4rem;
    }
}

@media (min-width: 1920px) {
    .pagina-voluntariado .container {
        max-width: 1650px;
    }

    .texto-contenido p,
    .lista-vol li {
        font-size: 1.6rem;
    }
}