/** VARIABLES **/
:root{
    --blanco: #fff;
    --color-h1: #fff4;
    --color-h2-h3: #fffa;
    --color-h2-h3-recorte: #000a;
    --color-logo-azul: #0065FD;
    --color-logo-azul-oscuro-1tono: #0054D1;
    --color-logo-azul-oscuro-2tono: #0041A3;
    --color-logo-azul-oscuro-3tono: #002F75;
    --color-logo-verde: #65FF00;
    --color-logo-verde-oscuro-1tono: #54D100;
    --color-logo-verde-oscuro-2tono: #41A300;
    --color-logo-verde-oscuro-3tono: #2F7500;
    --fondo-cabecera-transparente:#fff8;
    --fondo-cabecera-transparente2: #0000;
    --fondo-blanco: #fff;
    --fondo-blanco-transparente-plus: #fffd;
    --fondo-legal-transparente: #fffa;
    --fuente-titulos: "Noto Sans";
    --fuente-h1:'Verdana';
    --sombreadro-gris: #a1a1a1;
    --sombreadro-gris-transparente: #a1a1a1bb;
}
/** ESTILOS COMUNES **/
body{
    font-family: Arial, Helvetica, sans-serif;
    color: var(--blanco);

    background-image: url(/img/bg-hero.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    /* content-visibility: auto; */
    animation: entradaBody .8s ease-in;
}
section{
    padding: 2rem;
}
@keyframes entradaBody {
    0%{opacity: 0.6;}
    100%{opacity: 1;}
}
#bodyInfo{
    background-image: url(/img/bg-infoutil.webp);
}
#bodyContacto{
    background-image: url(/img/bg-contacto.webp);
}
#bodyConocenos{
    background-image: url(/img/bg-conocenos.webp);
}
#bodyParticipa{
    background-image: url(/img/bg-participa.webp);
}
#bodyVoluntariado{
    background-image: url(/img/bg-voluntariado.webp);
}
/** CABECERA **/
header{
    display: flex;
    justify-content: space-between;
    background: linear-gradient(var(--fondo-cabecera-transparente) 40%, var(--fondo-cabecera-transparente2));
}
.logo{
    margin: 0.5rem 3rem;
    width: 6rem;
    height: 6rem;
    overflow: hidden;
    border-radius: 50%;
    box-shadow: 5px 5px 7px var(--sombreadro-gris-transparente);
}
.logo img{
    width: 100%;
}

nav{
    font-size: 1.5rem;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    margin: 0.5rem 3rem 0 0;
}
nav ul{
    display: flex;
}
nav li{
    padding: 0 0.7rem;
    list-style: none;
}
nav a{
    text-decoration: none;
    color: var(--color-logo-azul-oscuro-1tono);
    transition: 0.5s;
}

nav a:hover{
    color: var(--color-logo-verde);
    text-shadow: 1px 1px 2px var(--color-logo-azul);
}

/**********************/
/** PÁGINA PRINCIPAL **/
/**********************/

/*main{
    //height: 80vh; /* provisional mientras no tenga contenido*/
    /* background-image: url(/img/bg-hero.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat; */
/*}*/

/** Section hero**/
#hero{
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
    height: 85vh;
}
#hero h3{
    margin:0 2rem;
    font-family: var(--fuente-h1);
    font-weight: 900;
    font-size: 6rem;
    color: var(--color-h1);
}
#hero h2{
    display: flex;
    justify-content: flex-end;
    margin: 1.5rem 1rem;
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    color: var(--color-h2-h3);
    text-shadow: 2px 2px 5px var(--color-h2-h3-recorte);
}
#hero div{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    margin: 3rem 3rem ;
}

/* section qué es Aizkorri */
#queesaizkorri{
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    height: 60vh;
    background-color: var(--fondo-blanco);
}
#queesaizkorri h1{
    color: var(--color-logo-verde-oscuro-1tono);
}
#queesaizkorri p{
    font-size: 1.8rem;
    align-self: center;
    /* width: 70%; */
    padding: 0 10rem;
    text-align: center;
    color: var(--color-logo-azul-oscuro-1tono);
}

/* section qué aporta */
#queaporta{
    background-image: url(/img/bg-qaporta.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
.tarjetasSobreFoto{
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    min-height: 70vh;
    /* padding: auto; */
}
.tarjetasSobreFoto h2{
    margin: 0 0 2rem 0;
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    color: var(--color-h2-h3);
    text-shadow: 2px 2px 5px var(--color-h2-h3-recorte);
}
.tarjetasSobreFoto div{
    padding: 2rem;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.tarjetasSobreFoto div div{
    padding: 0 2rem;
    background-color: var(--fondo-cabecera-transparente);
    flex-basis: 20%;
}

.tarjetasSobreFoto div div h3{
    font-size: 2rem;
    color: var(--color-logo-azul-oscuro-3tono);
}
.tarjetasSobreFoto div div h3::before {
  content: "✔";
  color: var(--color-logo-verde-oscuro-2tono);
  font-size: 1.2em;
}
.tarjetasSobreFoto div div p{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-logo-verde-oscuro-3tono);
}

.fotito{
    transition: all .5s;
    scale: 1;
}
.fotito:hover{
    scale: 1.2;
}
/* section vive Aizkorri */
#viveaizkorri{
    padding: 3rem;
    background-color: var(--blanco);
    /* height: 100vh; */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}
#viveaizkorri h2{
    color: var(--color-logo-verde-oscuro-1tono);
    font-size: 3rem;
}
#viveaizkorri p{
    margin: 0.8rem auto;
    max-width: 80%;
    color: var(--color-logo-azul-oscuro-1tono);
    font-size: 1.4rem;
    text-align: center;
}
#fotosvive{
    margin-bottom: 1.5rem;
    width: 80vw;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
#fotosvive div{
    overflow: hidden;
    margin: 1rem;
    width: 20vw;
    height: auto;
    transition: 0.8s;
    scale: 1;
}
#fotosvive div:hover{
    scale: 1.2;
    z-index: 3;
}
#fotosvive div img{
    width: 100%;
    height: 100%;
}

/** section testimonio**/
#testimonios{
    background-image: url(/img/bg-testimonios.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: flex-end;
    margin: 0;
    height: 100vh;;
    text-shadow: 2px 2px 3px var(--color-h2-h3-recorte);
}
#testimonios p{
    width: 30%;
    font-family: var(--fuente-titulos);
    font-style: italic;
    font-size: 2rem;
    margin-right: 10rem;
    text-align: right;
}
#testimonios cite{
    margin-right: 10rem;
}
#testimonios a{
    margin-top: 4rem;
    margin-right: 10rem;
    text-shadow: none;
}

/** section participa **/
.tarjetasSobreBlanco{
    background-color: var(--blanco);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    min-height: 50vh;
}

.tarjetasSobreBlanco h2{
    margin: 0.5 0;
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    color: var(--color-logo-azul);
}
.tarjetasSobreBlanco div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
}
.tarjetasSobreBlanco div div{
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    padding: .5rem;
    margin: 0.2rem 0.5rem;
    flex-basis: 50%;
}
.tarjetasSobreBlanco h3{
    font-size: 2rem;
    color: var(--color-logo-verde-oscuro-1tono);
}
.tarjetasSobreBlanco p,
.tarjetasSobreBlanco ul{
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--color-logo-azul-oscuro-3tono);
    margin-bottom: 1.5rem;
}
.tarjetasSobreBlanco a{
    margin: 1rem;
}

/** section datos **/
#datos{
    background-image: url(/img/bg-datos.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    height: 70vh;;
}

/**section final**/
#final{
    background-color: var(--blanco);
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: space-evenly;
    margin: 0;
    height: 100vh;
}
#final h2{
    margin: 0;
    font-family: var(--fuente-titulos);
    font-size: 3rem;
    color: var(--color-logo-verde);
}
/** PAG PARTICIPA **/

#edades{
    background-image: url(/img/bg-edades.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.5rem 3rem;
    color: var(--color-logo-azul-oscuro-3tono);
}
#qAprenden, #cicloAnual, #kraalBreve{
    background-image: url(/img/bg-aurilla-scout.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.5rem 4rem;
}
/** PAG VOLUNTARIADO **/
#heroVoluntariado{
    min-height: 85vh;
}
#xqSerScouter{
    background-image: url(/img/bg-xqSerScouter.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
}
#skillsYrequisitos{
    background-image: url(/img/bg-qAprenderas.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
    /* align-items: center; */
}
#qAprenderas,
#requisitos{
    flex-basis: 40%;
}
/* #testimoniosKraal, */
#formacionYempezar{
    background-image: url(/img/bg-formacionYempezar.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-evenly;
}
/* #faqVoluntarios{
    background-image: url(/img/bg-vol-faq.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 2rem;
} */
th, td{
    padding: 0.5rem;
}


/** PAG CONOCENOS **/
#hero-conocenos{
    min-height: 85vh;
}
#qHacenScouts{
    background-image: url(/img/bg-qhacenscouts.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.5rem 3rem;
    color: var(--color-logo-azul-oscuro-3tono);
}
#beneficios{
    background-image: url(/img/bg-beneficios.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    margin: auto;
}
#beneficios h2{
    margin: 0 2rem 2rem 2rem;
    padding-top: 2rem;
}
#beneficios div div{
    margin: 2rem;
}
#seccionesEducativas{
    min-height: 55vh;
    /* background-color: #0054D1; */
}
#kraal,
#historia{
    background-image: url(/img/bg-kraal.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    /* min-height: 100vh; */
}
#historia{
    padding: 2rem;
}
/** PAG INFO ÚTIL**/
#heroInfo{
    min-height: 55vh;
}
#hero-participa{
    min-height: 85vh;
}
.hero{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
}
.hero h1,
.hero h2,
.hero h3{
    text-shadow: 5px 5px 7px var(--sombreadro-gris-transparente);
}
.hero h1{
    font-family: var(--fuente-h1);
    font-size: 3rem;
}
.hero h2{
    font-family: var(--fuente-titulos);
    font-size: 2rem;
}
.hero h3{
    font-size: 1.6rem;
    text-align: center;
    /* color: var(--color-logo-verde-oscuro-2tono); */
}
.sobreBlanco{
    background-color: var(--blanco);
    padding: 1.5rem 4rem;
    color: var(--color-logo-azul-oscuro-3tono)
}
.sobreBlanco h2,
.sobreBlanco h3{
    color: var(--color-logo-verde-oscuro-3tono);
}


.galeria{
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    width: 80vw;
    height: auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
    align-items: center;
}
.galeria div{
    overflow: hidden;
    margin: 1rem;
    width: 20vw;
    height: auto;
    transition: 0.8s;
    scale: 1;
}
.galeria div:hover{
    scale: 1.2;
    z-index: 3;
}
.galeria div img{
    width: 100%;
    height: 100%;
}

#horariosYLugar{
    background-image: url(/img/bg-etxarriene.webp);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 1.5rem 3rem;
    color: var(--color-logo-azul-oscuro-3tono);
}
#horariosYLugar{
    color: var(--color-logo-azul-oscuro-1tono);
}
#horariosYLugar h4{
    margin: 1rem 0 0 0;
    color: var(--color-logo-verde-oscuro-2tono);
}
#horariosYLugar div{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
}
#horariosYLugar div div{
    display: flex;
    flex-flow: column nowrap;
    margin: 0 1.5rem;
}
#horariosYLugar div div div{
    padding: 0 1rem;
    margin: .2rem 0;
    background-color: var(--fondo-blanco-transparente-plus);
}
.containerSobreFoto{
    margin: 2rem auto;
    padding: 1rem 3rem;
    max-width: 80%;
    background-color: var(--fondo-blanco-transparente-plus);
    color: var(--color-logo-azul-oscuro-3tono);
}
.containerSobreFoto>div{
    display: flex;
    justify-content: space-evenly;
}
.containerSobreFoto div div{
    flex-basis: 50%;
}
.containerSobreFoto h3{
    color: var(--color-logo-verde-oscuro-1tono);
}
.containerSobreFoto h4{
    color: var(--color-logo-verde-oscuro-3tono)
}
.containerSobreFoto img{
    width: 100%;
    height: auto;
}
.dameflexcolumcenter{
    display: flex;
    flex-flow: column nowrap;
    justify-self: auto;
    align-items: center;
}

.fotoKraal{
    /* max-width: 50%; */
    padding: 1rem;
    flex-basis: 30%;
    scale: 1;
    transition: 0.5s;
}
.fotoKraal:hover{
    scale: 1.3;
    rotate: -5deg;
}

summary{
    cursor: pointer;
}


/** PAG CONTACTO**/
#sitio-formulario{
    display: flex;
    flex-flow: row nowrap;
}
#sitio-formulario div:first-child{
    display: flex;
    flex-flow: column nowrap;
}
#proceso-contacto{
    display: flex;
    flex-flow: row nowrap;
}
#proceso-contacto div{
    display: flex;
    flex-flow: column nowrap;
}
#proceso-contacto div:first-child{
    flex-basis: 60%;
}
#proceso-contacto div:last-child{
    flex-basis: 30%;
}

#CTA-contacto{
    display: flex;
    flex-flow: column nowrap;
    justify-content: space-evenly;
    align-items: center;
    font-size: 2rem;
}
#CTA-contacto p{
    text-align: center;
    font-size: 1.5rem;
    max-width: 80%;
}


/** CTAs **/
.CTA{
    margin-bottom: 1.8rem;
    padding: 1rem 3rem;
    background: linear-gradient(0deg, var(--color-logo-verde-oscuro-2tono),var(--color-logo-verde) 90%);
    color: var(--color-logo-azul-oscuro-3tono);
    text-decoration: none;
    font-size: 1.3rem;
    font-weight: 600;
    border-radius: .5rem;
    box-shadow: 5px 5px 7px var(--sombreadro-gris-transparente);
}

.CTA:hover{
    animation: wobble-horizontal-bottom .8s linear both;
}

/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */
.wobble-horizontal-bottom{
    animation:wobble-horizontal-bottom .8s linear both;
}
@keyframes wobble-horizontal-bottom{
    0%,100%{transform:translateX(0);transform-origin:50% 50%}
    15%{transform:translateX(-30px) rotate(-6deg)}
    30%{transform:translateX(15px) rotate(6deg)}
    45%{transform:translateX(-15px) rotate(-3.6deg)}
    60%{transform:translateX(9px) rotate(2.4deg)}
    75%{transform:translateX(-6px) rotate(-1.2deg)}
}

.CTA2{
    margin-bottom: 1.8rem;
    padding: 1rem 3rem;
    background: linear-gradient(0deg, var(--color-logo-azul-oscuro-2tono),var(--color-logo-azul) 90%);
    border-radius: .5rem;
    box-shadow: 5px 5px 7px var(--sombreadro-gris-transparente);
    text-decoration: none;
    color: var(--color-logo-verde);
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.CTA2:hover{
    animation: jello-horizontal .9s linear both;
}

/* ----------------------------------------------
  Generated by AnimatiSS
  Licensed under FreeBSD License
  URL: https://xsgames.co/animatiss
  Twitter: @xsgames_
---------------------------------------------- */
.jello-horizontal{
    animation:jello-horizontal .9s linear both
}
@keyframes jello-horizontal{
    0%{transform:scale3d(1,1,1)}
    30%{transform:scale3d(1.25,.75,1)}
    40%{transform:scale3d(.75,1.25,1)}
    50%{transform:scale3d(1.15,.85,1)}
    65%{transform:scale3d(.95,1.05,1)}
    75%{transform:scale3d(1.05,.95,1)}
    100%{transform:scale3d(1,1,1)}
}

/** FOOTER **/
footer{
    background-color: white;
    padding-bottom: 1rem;
    font-family: var(--fuente-h1);
}
address{
    display: flex;
    justify-content: space-evenly;
    padding: 1rem 0;
}
address a{
    margin: 0 0.5rem;
    text-decoration: none;
}

address a:hover{
    color: var(--color-logo-verde);
    text-shadow: 3px 3px 3px var(--sombreadro-gris);
}
footer p{
    background-color: white;
    color: var(--color-logo-azul-oscuro-3tono);
    text-align: center;
    font-size: .75rem;
    margin: 0;
    margin-bottom: .5rem;
}
/** 404 **/
#pag404{
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    height: 60vh;
}

/** Estilos páginas legales **/
.legal{
    background-color: var(--fondo-legal-transparente);
    box-shadow: 3px 3px 3px var(--sombreadro-gris-transparente);
    border-radius: 1rem;
    margin: auto;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.2rem 3rem;
    /* display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap; */
    width: 80%;
    color: var(--color-logo-azul-oscuro-3tono);
}
.legal h2{
    color: var(--color-logo-verde-oscuro-2tono);
    text-shadow: 3px 3px 3px var(--sombreadro-gris);
    font-family: var(--fuente-h1);
}
.legal h3{
    color: var(--color-logo-verde-oscuro-2tono);
    font-family: var(--fuente-titulos);
}
.legal h4{
    color: var(--color-logo-azul-oscuro-2tono);
    font-family: var(--fuente-titulos);
}
.legal table{
    margin: auto;
}
.legal th, .legal td{
    padding: .5rem;
}


#CTA-InfoUtil div{
    display: flex;
    justify-content: space-evenly;
}

blockquote{
    border-left: 4px solid var(--color-logo-verde);
    color: var(--color-logo-verde-oscuro-3tono);
    padding: 0.8rem 1rem;
    transition: .6s ease-in;
}
blockquote:hover{
    border-left: 4px solid var(--color-logo-azul);
    color: var(--color-logo-azul-oscuro-2tono);
}
cite{
    color: var(--color-logo-azul-oscuro-3tono);
}
/* ══════════════════════════════
     EL BOTÓN
  ══════════════════════════════ */
  .hamburger {
    /* Tamaño del área clicable */
    width: 48px;
    height: 48px;

    /* Centrar las barras dentro */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;          /* espacio entre barras */

    /* Interacción */
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 0;

    /* Para la animación de rotación del botón completo */
    transition: transform 0.3s ease;
  }

  .hamburger:hover {
    transform: scale(1.1);
  }

  /* ══════════════════════════════
     LAS 3 BARRAS
  ══════════════════════════════ */
  .bar {
    display: block;
    width: 28px;
    height: 2.5px;
    background: #1a1a1a;
    border-radius: 2px;

    /* Cada barra puede moverse y rotar de forma independiente */
    transform-origin: center;
    transition:
      transform  0.35s cubic-bezier(0.23, 1, 0.32, 1),
      opacity    0.25s ease,
      width      0.3s  ease;
  }

  /* ══════════════════════════════
     ESTADO ACTIVO (X)
  ══════════════════════════════ */
  .hamburger.is-active .bar:nth-child(1) {
    transform: translateY(8.5px) rotate(45deg);
    /* 8.5px = altura de la barra + gap */
  }

  .hamburger.is-active .bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }

  .hamburger.is-active .bar:nth-child(3) {
    transform: translateY(-8.5px) rotate(-45deg);
  }

  @media screen and (min-width: 1024px) {
    .hamburger{
        display: none;
    }
  }

  .boton-subir {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background-color: var(--color-logo-azul-oscuro-3tono);
    color: var(--color-logo-verde);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    display: none; /* Oculto por defecto */
    /* opacity: 0; */
    transition: opacity 0.3s ease;
    z-index: 1000;
}

.boton-subir:hover {
    /* opacity: 1; */
    background-color: var(--color-logo-azul);
}