/* ==================================================
   RESET
================================================== */

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

/* ==================================================
   VARIABLES
================================================== */

:root{

    /* Colores */

    --color-primario: #123A63;
    --color-secundario: #2B6E8A;
    --color-acento: #5FA8D3;

    --color-fondo: #FFFFFF;
    --color-fondo-claro: #F7F9FB;

    --color-texto: #2F3A45;
    --color-texto-claro: #6B7280;

    /* Tipografías */

    --fuente-titulos: "Montserrat", sans-serif;
    --fuente-texto: "Source Sans 3", sans-serif;

    /* Espaciados */

    --espaciado-seccion: 100px;

    /* Contenedor */

    --ancho-maximo: 1280px;

}

/* ==================================================
   ESTILOS GENERALES
================================================== */

body{

    font-family: var(--fuente-texto);

    color: var(--color-texto);

    background: var(--color-fondo);

    line-height: 1.6;

}

h1,
h2,
h3,
h4,
h5,
h6{

    font-family: var(--fuente-titulos);

    color: var(--color-primario);

    font-weight: 700;

}

a{

    text-decoration: none;

    color: inherit;

}

img{

    display: block;

    max-width: 100%;

}

.container{

    width:90%;
    max-width: var(--ancho-maximo);
    margin:0 auto;

}

/*==================================================
HEADER
==================================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    height:95px;

    z-index:1000;

    transition:.35s ease;

}

/* degradado superior */

.header::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.45),
        rgba(0,0,0,.15),
        transparent
    );

    z-index:-1;

    transition:.35s;

}

/* al hacer scroll */

.header.scrolled{

    background:rgba(255,255,255,.96);

    backdrop-filter:blur(14px);

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.header.scrolled::before{

    opacity:0;

}

.header-container{

    height:95px;

    display:flex;

    align-items:center;

}

/* logo */
.logo{

    flex: 0 0 18%;

    display: flex;

    align-items: center;

    margin-top: 22px;

}

.logo img{

    height: 95px;

}

/* navegación */

.main-nav{

    flex:1;

    display:flex;

    justify-content:center;

    margin-top:3px;

}

.nav-menu{

    display:flex;

    list-style:none;

    gap:42px;

}

.nav-menu a{

    color:white;

    font-family:var(--fuente-titulos);

    font-size:.95rem;

    font-weight:600;

    transition:.3s;

}

.nav-menu a:hover{

    color:#D7F2FF;

}

/* acciones */

.header-actions{

    display:flex;

    align-items:center;

    gap:28px;

}

.header-actions a{

    color:white;

    font-family:var(--fuente-titulos);

    font-size:.92rem;

    transition:.3s;

    display:flex;

    align-items:center;

    gap:8px;

}

.header-actions i{

    font-size:.85rem;

    opacity:.9;

}

.language-selector{

    display:flex;

    gap:8px;

    align-items:center;

}

.language-selector span{

    color:rgba(255,255,255,.5);

}

/* cuando hacemos scroll */

.header.scrolled .nav-menu a,

.header.scrolled .header-actions a{

    color:var(--color-primario);

}

.header.scrolled .language-selector span{

    color:#B5BBC2;

}

.current{

    position:relative;

}

.current::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

    height:2px;

    background:white;

    border-radius:50px;

}

.header.scrolled .current::after{

    background:var(--color-secundario);

}

/* ==================================================
   HERO
================================================== */

.hero{

    background-image:url("../images/hero/dofi.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    min-height:100vh;

}

   
.hero-overlay{

    min-height:100vh;

    display:flex;

    align-items:center;

    background:rgba(0,0,0,.35);

}

.hero-content{
    max-width:650px;
    color:white;
}

.hero-content h1{
    color:white;
    font-size:4rem;
    line-height:1.1;
    margin-bottom:25px;
}

.hero-content p{
    font-size:1.3rem;
    margin-bottom:40px;
}

.btn{
    display:inline-block;
    background:var(--color-secundario);
    color:white;
    padding:15px 35px;
    border-radius:50px;
    font-family:var(--fuente-titulos);
    font-weight:600;
    transition:.3s;
}

.btn:hover{
    background:var(--color-primario);
}

/*==================================================
QUI SOM
==================================================*/

.about{

    padding:120px 0;

    background:#ffffff;

}

.about-container{

    display:grid;

    grid-template-columns:48% 52%;

    gap:90px;

    align-items:center;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 20px 50px rgba(0,0,0,.12);

}

.section-subtitle{

    display:inline-block;

    margin-bottom:15px;

    font-family:var(--fuente-titulos);

    font-size:.9rem;

    font-weight:700;

    color:var(--color-secundario);

    letter-spacing:2px;

    text-transform:uppercase;

}

.about h2{

    font-size:2.6rem;

    margin-bottom:25px;

}

.about p{

    font-size:1.15rem;

    color:var(--color-texto);

    margin-bottom:22px;

    line-height:1.8;

}

/*==================================================
ANIMACIONES AL HACER SCROLL
==================================================*/

.fade-left,
.fade-right{

    opacity:0;

    transition:all .8s ease;

}

.fade-left{

    transform:translateX(-60px);

}

.fade-right{

    transform:translateX(60px);

}

/* Estado visible */

.fade-left.show,
.fade-right.show{

    opacity:1;

    transform:translateX(0);

}

/*==================================================
PROJECTES
==================================================*/

.projects{

    padding:70px 0 120px;

    background:var(--color-fondo-claro);

    text-align:center;

}

.section-intro{

    max-width:720px;

    margin:25px auto 70px;

    font-size:1.15rem;

}

.projects-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}

.project-card{

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.project-card img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.project-card:hover img{

    transform:scale(1.08);

}

.project-content{

    padding:35px;

    text-align:left;

}

.project-content h3{

    margin-bottom:15px;

}

.project-content p{

    margin-bottom:25px;

}

.project-content a{

    display:inline-flex;
    align-items:center;
    gap:8px;

    color:var(--color-secundario);

    font-family:var(--fuente-titulos);
    font-weight:700;

    transition:all .3s ease;

}

.project-content a:hover{

    color:var(--color-primario);

    transform:translateX(8px);

}

.project-content a::after{

    content:"→";

    transition:.3s;

}

.project-content a:hover::after{

    transform:translateX(5px);

}

/*==================================================
ESPÈCIES
==================================================*/

.species{

    padding:60px 0 100px;

    background:#ffffff;

    text-align:center;

}

.species-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:25px;

    margin-top:70px;

}

.species-large{

    grid-column:1 / 3;

}

.species-card{

    position:relative;

    overflow:hidden;

    border-radius:20px;

    min-height:320px;

}

.species-large{

    min-height:430px;

}

.species-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s ease;

}



.species-card:hover .species-overlay{

    transform:translateY(0);

}
.species-category{

    display:inline-block;

    padding:6px 14px;

    margin-bottom:15px;

    border-radius:30px;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(8px);

    font-size:.8rem;

    letter-spacing:1px;

    text-transform:uppercase;

}

.species-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;

    padding:35px;

    color:white;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.25),
        transparent
    );

    transform:translateY(100%);

    transition:all .45s ease;

}

.species-overlay h3{

    color:white;

    font-size:2rem;

    margin-bottom:10px;

}

.species-overlay p{

    font-size:1rem;

    opacity:.9;

}

.species-card:hover img{

    transform:scale(1.08);

}

.species-card:hover .species-overlay{

    transform:translateY(0);

    background:linear-gradient(
        to top,
        rgba(0,0,0,.82),
        rgba(0,0,0,.35),
        transparent
    );

}


.species-overlay h3,
.species-overlay p{

    opacity:0;

    transform:translateY(20px);

    transition:all .4s ease;

}

.species-card:hover .species-overlay h3,
.species-card:hover .species-overlay p{

    opacity:1;

    transform:translateY(0);

}

.species-more{

    max-width:750px;

    margin:55px auto 30px;

    font-size:1.15rem;

    line-height:1.8;

    color:var(--color-texto);

}

.species-link{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-family:var(--fuente-titulos);

    font-size:1.05rem;

    font-weight:700;

    color:var(--color-secundario);

    transition:all .35s ease;

}

.species-link::after{

    content:"→";

    transition:transform .35s ease;

}

.species-link:hover{

    color:var(--color-primario);

}

.species-link:hover::after{

    transform:translateX(8px);

}

/*==================================================
VIU EL MAR
==================================================*/

.experience{

    background-image:url("../images/sortides/sortida.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}

.experience-overlay{

    padding:100px 0 140px;

    background:linear-gradient(
        rgba(8,34,56,.70),
        rgba(8,34,56,.70)
    );

    text-align:center;

}

.experience .container{

    max-width:850px;

}

.experience h2{

    color:white;

    font-size:3rem;

    margin:20px 0 30px;

}

.experience p{

    color:white;

    font-size:1.2rem;

    line-height:1.9;

    margin-bottom:45px;

}

.experience .section-subtitle{

    color:#BEE8F6;

}

.experience-features{

    display:flex;

    justify-content:center;

    gap:50px;

    margin-bottom:50px;

    flex-wrap:wrap;

}

.feature{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:white;

}

.feature i{

    font-size:1.8rem;

    color:#BEE8F6;

}

.feature span{

    font-size:.95rem;

    font-weight:600;

    letter-spacing:.5px;

}

/*==================================================
COL·LABORA
==================================================*/

.collabora{

    padding:90px 0;

    background:#F7F9FB;

    text-align:center;

}

.section-intro{

    max-width:720px;

    margin:25px auto 70px;

    font-size:1.15rem;

    line-height:1.8;

}

/*=========================
FILAS
=========================*/

.collabora-row{

    display:flex;

    justify-content:center;

    align-items:stretch;

    gap:30px;

    flex-wrap:wrap;

    margin-bottom:30px;

}

/*=========================
TARJETAS GENERALES
=========================*/

.collabora-card{

    width:350px;

    background:white;

    padding:45px 35px;

    border-radius:20px;

    box-shadow:0 12px 35px rgba(0,0,0,.07);

    transition:.35s ease;

    overflow:hidden;

}

.collabora-card:hover{

    transform:translateY(-10px);

    box-shadow:0 22px 50px rgba(0,0,0,.12);

}

/*=========================
ICONOS
=========================*/

.collabora-card i{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#EAF6FB;

    color:var(--color-secundario);

    font-size:1.8rem;

    transition:.35s;

}

.collabora-card:hover i{

    transform:scale(1.1);

    background:var(--color-secundario);

    color:white;

}

/*=========================
TEXTOS
=========================*/

.collabora-card h3{

    margin-bottom:18px;

    font-size:1.45rem;

}

.collabora-card p{

    color:var(--color-texto);

    line-height:1.8;

    margin-bottom:28px;

}

.collabora-card a{

    font-family:var(--fuente-titulos);

    font-weight:700;

    color:var(--color-secundario);

    transition:.3s;

}

.collabora-card a:hover{

    color:var(--color-primario);

}

/*==================================================
TARJETAS DESTACADAS
==================================================*/

.featured-row{

    margin-top:10px;

}

.featured-card{

    position:relative;

    width:540px;

    min-height:340px;

    padding:55px 45px;

    color:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.featured-card h3{

    color:white;

    font-size:2rem;

    margin-bottom:20px;

}

.featured-card p{

    color:white;

    max-width:420px;

    margin:0 auto 30px;

}

.featured-card a{

    color:white;

}

.featured-card a:hover{

    color:#D7F2FF;

}

/*==================================================
IMAGEN DE FONDO
==================================================*/

.gift-card::before,
.shop-card::before{

    content:"";

    position:absolute;

    inset:0;

    background-size:cover;

    background-position:center;

    opacity:.65;

    transition:.5s ease;

}

.gift-card::before{

    background-image:url("../images/collabora/regala.jpg");

}

.shop-card::before{

    background-image:url("../images/collabora/botiga.jpg");

}

/*==================================================
CAPA OSCURA
==================================================*/

.featured-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
        rgba(18,58,99,.35),
        rgba(18,58,99,.45)
    );

}

/*==================================================
CONTENIDO SOBRE LA IMAGEN
==================================================*/

.featured-card>*{

    position:relative;

    z-index:2;

}

/*==================================================
HOVER
==================================================*/

.featured-card:hover::before{

    transform:scale(1.05);

    opacity:.85;

}

/*==================================================
FOOTER
==================================================*/

.footer{

    position:relative;

    overflow:hidden;

    background:var(--color-primario);

    color:white;

}


/*==================================================
IMAGEN DEL TIBURÓN
==================================================*/

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:url("../images/footer/tiburon.jpg");

    background-size:cover;

    background-position:center;

    opacity:.18;

    z-index:0;

    transition:opacity .5s ease;

}


/*==================================================
CAPA AZUL SOBRE LA FOTOGRAFÍA
==================================================*/

.footer::after{

    content:"";

    position:absolute;

    inset:0;

    background:rgba(18,58,99,.60);

    z-index:1;

}


/*==================================================
CONTENEDOR PRINCIPAL
==================================================*/

.footer-container{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1280px;

    margin:0 auto;

    padding:80px 0 70px;

    display:grid;

    grid-template-columns:1.4fr 1fr 1.2fr 1.2fr;

    gap:60px;

}


/*==================================================
IDENTIDAD
==================================================*/

.footer-brand{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-logo{

    display:inline-block;

    margin-bottom:0px;

}

.footer-logo img{

    width:127px;

     margin:0 auto 20px;

}

.footer-brand p{

    max-width:280px;

    font-size:1.15rem;

    line-height:1.7;

    color:rgba(255,255,255,.9);

    margin:0;

}


/*==================================================
REDES SOCIALES
==================================================*/
.footer-social{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:16px;

    margin-top:25px;

}

.footer-social a{

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid rgba(255,255,255,.35);

    border-radius:50%;

    font-size:1.15rem;

    transition:.3s ease;

}

.footer-social a:hover{

    background:var(--color-acento);

    border-color:var(--color-acento);

    transform:translateY(-3px);

}


/*==================================================
COLUMNAS
==================================================*/

.footer-column h3{

    color:white;

    font-size:1.1rem;

    margin-bottom:25px;

    font-weight:700;

}

.footer-column ul{

    list-style:none;

    padding:0;

    margin:0;

}

.footer-column li{

    margin-bottom:12px;

}

.footer-column li a{

    color:rgba(255,255,255,.78);

    font-size:1rem;

    transition:all .25s ease;

}

.footer-column li a:hover{

    color:white;

    padding-left:5px;

}


/*==================================================
CONTACTE
==================================================*/

.footer-contact li{

    display:flex;

    align-items:flex-start;

    gap:12px;

    color:rgba(255,255,255,.78);

}

.footer-contact li i{

    width:18px;

    margin-top:5px;

    color:var(--color-acento);

}

.footer-contact li a{

    color:rgba(255,255,255,.78);

}

.footer-contact-link{

    display:inline-block;

    margin-top:15px;

    color:white;

    font-family:var(--fuente-titulos);

    font-weight:600;

    transition:.3s ease;

}

.footer-contact-link:hover{

    color:var(--color-acento);

    transform:translateX(5px);

}


/*==================================================
PARTE INFERIOR
==================================================*/

.footer-bottom{

    position:relative;

    z-index:2;

    width:90%;

    max-width:1280px;

    margin:0 auto;

    padding:25px 0;

    border-top:1px solid rgba(255,255,255,.18);

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

}

.footer-bottom p{

    margin:0;

    color:rgba(255,255,255,.6);

    font-size:.9rem;

}

.footer-legal{

    display:flex;

    align-items:center;

    gap:25px;

}

.footer-legal a{

    color:rgba(255,255,255,.65);

    font-size:.9rem;

    transition:.25s ease;

}

.footer-legal a:hover{

    color:white;

}


/*==================================================
IDIOMAS
==================================================*/

.footer-language{

    display:flex;

    align-items:center;

    gap:8px;

}

.footer-language a{

    font-family:var(--fuente-titulos);

    font-weight:600;

}

.footer-language span{

    color:rgba(255,255,255,.4);

}







/*==================================================
     QUI SOM
==================================================*/


/*==================================================
     HERO - QUI SOM
==================================================*/

.page-hero{

    position:relative;

    min-height:65vh;

    background-image:url("../images/qui-som/hero.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    display:flex;

    align-items:center;

}


.page-hero-overlay{

    width:100%;

    min-height:65vh;

    display:flex;

    align-items:center;

    background:linear-gradient(
        rgba(8,34,56,.55),
        rgba(8,34,56,.45)
    );

}


.page-hero .container{

    max-width:1000px;

}


.page-hero .section-subtitle{

    color:#BEE8F6;

}


.page-hero h1{

    color:white;

    font-size:3.8rem;

    line-height:1.1;

    margin:20px 0;

}


.page-hero p{

    max-width:650px;

    color:white;

    font-size:1.25rem;

    line-height:1.7;

    margin:0;

}


/*==================================================
     ELS NOSTRES ORÍGENS
==================================================*/

.origins{

    padding:110px 0;

    background:#ffffff;

}


.origins-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


.origins-image{

    width:100%;

    overflow:hidden;

    border-radius:20px;

}


.origins-image img{

    width:100%;

    display:block;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:transform .6s ease;

}


.origins-image:hover img{

    transform:scale(1.04);

}


.origins-content{

    max-width:600px;

}


.origins-content .section-subtitle{

    display:block;

    margin-bottom:15px;

}


.origins-content h2{

    font-size:2.7rem;

    line-height:1.2;

    margin-bottom:30px;

}


.origins-content p{

    font-size:1.05rem;

    line-height:1.85;

    margin-bottom:20px;

    color:var(--color-texto);

}


.origins-content strong{

    color:var(--color-primario);

    font-weight:700;

}


/*==================================================
     VALORS
==================================================*/

.values{

    padding:100px 0 110px;

    background:var(--color-fondo-claro);

    text-align:center;

}


.values-intro{

    max-width:750px;

    margin:0 auto 65px;

}


.values-intro h2{

    font-size:2.8rem;

    margin:20px 0;

}


.values-intro p{

    font-size:1.15rem;

    line-height:1.8;

    margin:0;

}


.values-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}


.value-card{

    background:white;

    padding:45px 35px;

    border-radius:20px;

    box-shadow:0 12px 35px rgba(0,0,0,.07);

    transition:all .35s ease;

}


.value-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}


.value-card i{

    width:75px;

    height:75px;

    margin:0 auto 25px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:#EAF6FB;

    color:var(--color-secundario);

    font-size:1.8rem;

    transition:all .35s ease;

}


.value-card:hover i{

    background:var(--color-secundario);

    color:white;

    transform:scale(1.08);

}


.value-card h3{

    font-size:1.4rem;

    margin-bottom:18px;

}


.value-card p{

    font-size:1rem;

    line-height:1.75;

    color:var(--color-texto);

    margin:0;

}


/*==================================================
     LA NOSTRA EXPERIÈNCIA
==================================================*/

.experience-about{

    padding:110px 0;

    background:white;

}


.experience-about-container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}


.experience-about-content{

    max-width:600px;

}


.experience-about-content h2{

    font-size:2.7rem;

    line-height:1.2;

    margin:20px 0 30px;

}


.experience-about-content p{

    font-size:1.05rem;

    line-height:1.85;

    margin-bottom:22px;

    color:var(--color-texto);

}


.experience-about-image{

    width:100%;

    overflow:hidden;

    border-radius:20px;

}


.experience-about-image img{

    width:100%;

    display:block;

    aspect-ratio:4 / 3;

    object-fit:cover;

    transition:transform .6s ease;

}


.experience-about-image:hover img{

    transform:scale(1.04);

}


/*==================================================
     EL NOSTRE PROPÒSIT
==================================================*/

.mission{

    position:relative;

    background-image:url("../images/qui-som/missio.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

}


.mission-overlay{

    padding:120px 0;

    background:linear-gradient(
        rgba(8,34,56,.72),
        rgba(8,34,56,.72)
    );

    text-align:center;

}


.mission .container{

    max-width:850px;

}


.mission .section-subtitle{

    color:#BEE8F6;

}


.mission h2{

    color:white;

    font-size:3rem;

    margin:20px 0 30px;

}


.mission > .mission-overlay > .container > p{

    color:white;

    font-size:1.15rem;

    line-height:1.9;

    margin-bottom:45px;

}


/*==================================================
     FRASE DESTACADA
==================================================*/

.mission-quote{

    max-width:750px;

    margin:0 auto;

    padding:35px 40px;

    border-top:1px solid rgba(255,255,255,.25);

    border-bottom:1px solid rgba(255,255,255,.25);

}


.mission-quote i{

    color:#BEE8F6;

    font-size:1.5rem;

    margin-bottom:18px;

}


.mission-quote blockquote{

    margin:0;

    color:white;

    font-family:var(--fuente-titulos);

    font-size:1.2rem;

    line-height:1.8;

    font-weight:500;

}


/*==================================================
     EQUIP
==================================================*/

.team{

    padding:110px 0 120px;

    background:var(--color-fondo-claro);

    text-align:center;

}


.team-intro{

    max-width:750px;

    margin:0 auto 65px;

}


.team-intro h2{

    font-size:2.8rem;

    margin:20px 0;

}


.team-intro p{

    font-size:1.15rem;

    line-height:1.8;

    margin:0;

}


.team-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:35px;

}


.team-card{

    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 12px 35px rgba(0,0,0,.07);

    text-align:left;

    transition:all .35s ease;

}


.team-card:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

}


.team-image{

    width:100%;

    overflow:hidden;

}


.team-image img{

    width:100%;

    display:block;

    aspect-ratio:4 / 4.5;

    object-fit:cover;

    transition:transform .6s ease;

}


.team-card:hover .team-image img{

    transform:scale(1.05);

}


.team-content{

    padding:30px 30px 35px;

}


.team-content h3{

    font-size:1.45rem;

    margin-bottom:8px;

}


.team-role{

    display:block;

    margin-bottom:18px;

    color:var(--color-secundario);

    font-family:var(--fuente-titulos);

    font-size:.9rem;

    font-weight:700;

}


.team-content p{

    font-size:1rem;

    line-height:1.75;

    color:var(--color-texto);

    margin:0;

}


/*==================================================
     RESPONSIVE - QUI SOM
==================================================*/


@media (max-width:1100px){

    .page-hero h1{

        font-size:3.2rem;

    }


    .origins-container{

        gap:50px;

    }


    .experience-about-container{

        gap:50px;

    }


    .values-grid{

        gap:20px;

    }


    .team-grid{

        gap:25px;

    }

}


/*==================================================
     QUI SOM - MÓVIL
==================================================*/

@media (max-width:768px){


    /*----------------------------------------------
    HERO
    ----------------------------------------------*/

    .page-hero{

        min-height:65svh;

        background-position:center center;

    }


    .page-hero-overlay{

        min-height:65svh;

        padding:100px 20px 70px;

        align-items:flex-end;

    }


    .page-hero .container{

        width:100%;

    }


    .page-hero h1{

        font-size:2.45rem;

        line-height:1.1;

        margin:15px 0;

    }


    .page-hero p{

        font-size:1rem;

        line-height:1.6;

        max-width:100%;

    }


    /*----------------------------------------------
    ORÍGENS
    ----------------------------------------------*/

    .origins{

        padding:70px 0 80px;

    }


    .origins-container{

        display:flex;

        flex-direction:column;

        gap:40px;

    }


    .origins-image{

        width:100%;

        border-radius:18px;

    }


    .origins-image img{

        aspect-ratio:4 / 3;

    }


    .origins-content{

        width:100%;

        max-width:100%;

    }


    .origins-content h2{

        font-size:2rem;

        line-height:1.2;

        margin-bottom:25px;

    }


    .origins-content p{

        font-size:1rem;

        line-height:1.75;

        margin-bottom:18px;

    }


    /*----------------------------------------------
    VALORS
    ----------------------------------------------*/

    .values{

        padding:70px 0 80px;

    }


    .values-intro{

        margin-bottom:45px;

    }


    .values-intro h2{

        font-size:2rem;

        line-height:1.2;

        margin:15px 0 20px;

    }


    .values-intro p{

        font-size:1rem;

        line-height:1.7;

    }


    .values-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }


    .value-card{

        padding:35px 25px;

    }


    .value-card i{

        width:65px;

        height:65px;

        font-size:1.6rem;

        margin-bottom:20px;

    }


    .value-card h3{

        font-size:1.3rem;

    }


    /*----------------------------------------------
    EXPERIÈNCIA
    ----------------------------------------------*/

    .experience-about{

        padding:70px 0 80px;

    }


    .experience-about-container{

        display:flex;

        flex-direction:column;

        gap:40px;

    }


    .experience-about-content{

        width:100%;

        max-width:100%;

    }


    .experience-about-content h2{

        font-size:2rem;

        line-height:1.2;

        margin:15px 0 25px;

    }


    .experience-about-content p{

        font-size:1rem;

        line-height:1.75;

    }


    .experience-about-image{

        width:100%;

        border-radius:18px;

        order:2;

    }


    /*----------------------------------------------
    MISSIÓ
    ----------------------------------------------*/

    .mission{

        background-position:center center;

    }


    .mission-overlay{

        padding:80px 20px 90px;

    }


    .mission h2{

        font-size:2.2rem;

        line-height:1.2;

        margin:15px 0 25px;

    }


    .mission > .mission-overlay > .container > p{

        font-size:1rem;

        line-height:1.75;

        margin-bottom:35px;

    }


    .mission-quote{

        padding:25px 15px;

    }


    .mission-quote blockquote{

        font-size:1rem;

        line-height:1.7;

    }


    /*----------------------------------------------
    EQUIP
    ----------------------------------------------*/

    .team{

        padding:70px 0 80px;

    }


    .team-intro{

        margin-bottom:45px;

    }


    .team-intro h2{

        font-size:2rem;

        line-height:1.2;

        margin:15px 0 20px;

    }


    .team-intro p{

        font-size:1rem;

        line-height:1.7;

    }


    .team-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:25px;

    }


    .team-card{

        border-radius:18px;

    }


    .team-image img{

        aspect-ratio:4 / 4.5;

    }


    .team-content{

        padding:25px 25px 30px;

    }


    .team-content h3{

        font-size:1.35rem;

    }


    .team-content p{

        font-size:1rem;

        line-height:1.7;

    }

}












/*==================================================
RESPONSIVE - TABLET Y MÓVIL
==================================================*/


/*==================================================
EVITAR DESPLAZAMIENTO HORIZONTAL
==================================================*/

html,
body{

    width:100%;

    max-width:100%;

    overflow-x:hidden;

}


/*==================================================
BOTÓN MENÚ MÓVIL
==================================================*/

.menu-toggle{

    display:none;

    background:none;

    border:none;

    color:var(--color-primario);

    font-size:1.5rem;

    cursor:pointer;

    padding:8px;

    position:relative;

    z-index:1100;

}


/*==================================================
OPCIONES EXTRAS MÓVIL
==================================================*/

.mobile-extra{

    display:none;

}


/*==================================================
TABLET
==================================================*/

@media (max-width:1100px){

    .nav-menu{

        gap:22px;

    }

    .nav-menu a{

        font-size:.85rem;

    }

    .header-actions{

        gap:15px;

    }

    .header-actions a{

        font-size:.82rem;

    }

    .logo{

        flex:0 0 15%;

    }

}


/*==================================================
MÓVIL
==================================================*/

@media (max-width:768px){


    /*----------------------------------------------
    HEADER
    ----------------------------------------------*/

    .header{

        height:80px;

    }


    .header-container{

        width:100%;

        height:80px;

        display:flex;

        align-items:center;

        justify-content:space-between;

        padding:0 20px;

    }


    /*----------------------------------------------
    LOGO
    ----------------------------------------------*/

    .logo{

        flex:0 0 auto;

    }


    .logo img{

        height:70px;

        margin-top:8px;

    }


    /*----------------------------------------------
    BOTÓN HAMBURGUESA
    ----------------------------------------------*/

    .menu-toggle{

        display:block;

        margin-left:auto;

        padding:8px;

        background:transparent;

        border:none;

        color:var(--color-primario);

        font-size:1.6rem;

        cursor:pointer;

        position:relative;

        z-index:1100;

    }


    /*----------------------------------------------
    NAVEGACIÓN CERRADA
    ----------------------------------------------*/

    .main-nav{

        display:none;

    }


    /*----------------------------------------------
    MENÚ ABIERTO
    ----------------------------------------------*/

    .main-nav.mobile-open{

        display:block;

        position:absolute;

        top:80px;

        left:0;

        width:100%;

        padding:25px 0 30px;

        background:rgba(18,58,99,.97);

        backdrop-filter:blur(12px);

        box-shadow:0 15px 30px rgba(0,0,0,.15);

        z-index:1000;

    }


    /*----------------------------------------------
    LISTA DEL MENÚ
    ----------------------------------------------*/

    .main-nav.mobile-open .nav-menu{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        gap:20px;

        list-style:none;

        margin:0;

        padding:0;

    }


    /*----------------------------------------------
    ENLACES PRINCIPALES
    ----------------------------------------------*/

    .main-nav.mobile-open .nav-menu > li:not(.mobile-extra) a{

        color:white;

        font-family:var(--fuente-titulos);

        font-size:1rem;

        font-weight:600;

    }


    /*----------------------------------------------
    OPCIONES EXTRA
    ----------------------------------------------*/

    .main-nav.mobile-open .mobile-extra{

        display:flex;

    }


    .main-nav.mobile-open .mobile-extra a{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        color:white;

        font-family:var(--fuente-titulos);

        font-size:1rem;

        font-weight:600;

    }


    /*----------------------------------------------
    SEPARACIÓN ANTES DE BOTIGA
    ----------------------------------------------*/

    .main-nav.mobile-open .mobile-extra:first-of-type{

        margin-top:8px;

        padding-top:20px;

        border-top:1px solid rgba(255,255,255,.18);

        width:150px;

        justify-content:center;

    }


    /*----------------------------------------------
    ICONOS
    ----------------------------------------------*/

    .main-nav.mobile-open .mobile-extra i{

        font-size:.9rem;

    }


    /*----------------------------------------------
    IDIOMAS
    ----------------------------------------------*/

    .main-nav.mobile-open .mobile-language{

        display:flex;

        align-items:center;

        justify-content:center;

        gap:8px;

        margin-top:2px;

    }


    .main-nav.mobile-open .mobile-language span{

        color:rgba(255,255,255,.45);

    }


    /*----------------------------------------------
    OCULTAR ACCIONES DE ESCRITORIO
    ----------------------------------------------*/

    .header-actions{

        display:none;

    }

/*----------------------------------------------
HERO - MÓVIL
----------------------------------------------*/

.hero{

    min-height:100svh;

    background-position:center center;

}


.hero-overlay{

    position:relative;

    min-height:100svh;

    display:flex;

    align-items:flex-start;

    padding:130px 0 100px;

}


.hero-content{

    max-width:100%;

    width:100%;

}


.hero-content h1{

    font-size:2.45rem;

    line-height:1.1;

    margin-bottom:20px;

    max-width:100%;

}


.hero-content p{

    font-size:1.05rem;

    line-height:1.6;

    margin-bottom:0;

    max-width:500px;

}


/*----------------------------------------------
BOTÓN - PARTE INFERIOR DEL HERO
----------------------------------------------*/

.hero-content .btn{

    position:absolute;

    left:20px;

    bottom:80px;

    padding:14px 28px;

    font-size:.95rem;

}

/*----------------------------------------------
QUI SOM - MÓVIL
----------------------------------------------*/

.about{

    padding:70px 0;

}


.about-container{

    display:flex;

    flex-direction:column;

    gap:45px;

}


.about-image{

    width:100%;

}


.about-image img{

    width:100%;

    border-radius:18px;

}


.about-content{

    width:100%;

}


.about h2{

    font-size:2rem;

    line-height:1.2;

    margin-bottom:20px;

}


.about p{

    font-size:1rem;

    line-height:1.7;

    margin-bottom:18px;

}


.section-subtitle{

    font-size:.85rem;

    margin-bottom:12px;

}


.about-content .btn{

    margin-top:5px;

}


/*----------------------------------------------
ANIMACIONES
----------------------------------------------*/

.fade-left{

    transform:translateX(-30px);

}


.fade-right{

    transform:translateX(30px);

}

/*----------------------------------------------
ELS NOSTRES PROJECTES - MÓVIL
----------------------------------------------*/

.projects{

    padding:70px 0 80px;

}


/*----------------------------------------------
INTRODUCCIÓN
----------------------------------------------*/

.projects .section-intro{

    max-width:100%;

    margin:20px auto 45px;

    padding:0 10px;

    font-size:1rem;

    line-height:1.7;

}


/*----------------------------------------------
GRID DE PROJECTES
----------------------------------------------*/

.projects-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:30px;

    margin-top:40px;

}


/*----------------------------------------------
TARJETAS
----------------------------------------------*/

.project-card{

    width:100%;

    border-radius:18px;

}


/*----------------------------------------------
IMAGEN
----------------------------------------------*/

.project-card img{

    width:100%;

    height:230px;

    object-fit:cover;

}


/*----------------------------------------------
CONTENIDO
----------------------------------------------*/

.project-content{

    padding:25px;

    text-align:left;

}


.project-content h3{

    font-size:1.35rem;

    line-height:1.3;

    margin-bottom:12px;

}


.project-content p{

    font-size:1rem;

    line-height:1.7;

    margin-bottom:20px;

}


/*----------------------------------------------
ENLACE
----------------------------------------------*/

.project-content a{

    font-size:.95rem;

}


/*----------------------------------------------
EFECTOS
----------------------------------------------*/

/* En móvil no necesitamos que la tarjeta
   se desplace al pasar el dedo */

.project-card:hover{

    transform:none;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

}


/* Evitamos el zoom de la imagen en móvil */

.project-card:hover img{

    transform:none;

}

/*----------------------------------------------
ESPÈCIES - MÓVIL
----------------------------------------------*/

.species{

    padding:70px 0 80px;

}


/*----------------------------------------------
INTRODUCCIÓN
----------------------------------------------*/

.species .section-intro{

    max-width:100%;

    margin:20px auto 40px;

    padding:0 10px;

    font-size:1rem;

    line-height:1.7;

}


/*----------------------------------------------
GRID
----------------------------------------------*/

.species-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:25px;

    margin-top:40px;

}


/*----------------------------------------------
TARJETAS
----------------------------------------------*/

.species-card{

    position:relative;

    width:100%;

    min-height:350px;

    border-radius:18px;

}


/*----------------------------------------------
TARJETA GRANDE
----------------------------------------------*/

.species-large{

    grid-column:auto;

    min-height:350px;

}


/*----------------------------------------------
IMÁGENES
----------------------------------------------*/

.species-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:none;

}


/*----------------------------------------------
OVERLAY - MÓVIL
----------------------------------------------*/

.species-overlay{

    position:absolute;

    inset:0;

    padding:22px 25px;

    display:block;

    transform:none;

    background:linear-gradient(
        to bottom,
        rgba(0,0,0,.28),
        transparent 25%,
        transparent 65%,
        rgba(0,0,0,.65)
    );

}


/*----------------------------------------------
CATEGORÍA - ARRIBA IZQUIERDA
----------------------------------------------*/

.species-category{

    position:absolute;

    top:22px;

    left:25px;

    padding:5px 12px;

    margin:0;

    font-size:.75rem;

}


/*----------------------------------------------
TÍTULO - DEBAJO DE LA CATEGORÍA
----------------------------------------------*/

.species-overlay h3{

    position:absolute;

    top:58px;

    left:25px;

    margin:0;

    font-size:1.6rem;

    line-height:1.2;

}


/*----------------------------------------------
DESCRIPCIÓN - ABAJO IZQUIERDA
----------------------------------------------*/

.species-overlay p{

    position:absolute;

    left:25px;

    bottom:22px;

    margin:0;

    font-size:.95rem;

}


/*----------------------------------------------
MOSTRAR TEXTO DIRECTAMENTE
----------------------------------------------*/

.species-overlay h3,
.species-overlay p{

    opacity:1;

    transform:none;

}


/*----------------------------------------------
DESACTIVAR EFECTOS HOVER
----------------------------------------------*/

.species-card:hover img{

    transform:none;

}

.species-card:hover .species-overlay{

    transform:none;

}


/*----------------------------------------------
TEXTO FINAL
----------------------------------------------*/

.species-more{

    max-width:100%;

    margin:45px auto 30px;

    padding:0 10px;

    font-size:1rem;

    line-height:1.7;

}


/*----------------------------------------------
ENLACE FINAL
----------------------------------------------*/

.species-link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    margin-top:5px;

    font-size:1rem;

    line-height:1.5;

    text-align:center;

}


.species-link::after{

    transition:transform .35s ease;

}


.species-link:hover::after{

    transform:translateX(6px);

}

/*----------------------------------------------
VIU EL MAR - MÓVIL
----------------------------------------------*/

.experience{

    background-attachment:scroll;

    background-position:center center;

}


/*----------------------------------------------
CAPA DE CONTENIDO
----------------------------------------------*/

.experience-overlay{

    padding:80px 0 90px;

    background:linear-gradient(
        rgba(8,34,56,.72),
        rgba(8,34,56,.72)
    );

}


/*----------------------------------------------
CONTENEDOR
----------------------------------------------*/

.experience .container{

    max-width:100%;

}


/*----------------------------------------------
TÍTULO
----------------------------------------------*/

.experience h2{

    font-size:2.2rem;

    line-height:1.2;

    margin:18px 0 25px;

}


/*----------------------------------------------
TEXTO
----------------------------------------------*/

.experience p{

    font-size:1rem;

    line-height:1.7;

    margin-bottom:40px;

}


/*----------------------------------------------
ICONOS / CARACTERÍSTICAS
----------------------------------------------*/

.experience-features{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:28px;

    margin-bottom:40px;

}


/*----------------------------------------------
CADA CARACTERÍSTICA
----------------------------------------------*/

.feature{

    gap:8px;

}


.feature i{

    font-size:1.7rem;

}


.feature span{

    font-size:.95rem;

}


/*----------------------------------------------
BOTÓN
----------------------------------------------*/

.experience .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    max-width:100%;

    padding:14px 24px;

    font-size:.95rem;

    line-height:1.4;

}

/*----------------------------------------------
COL·LABORA - MÓVIL
----------------------------------------------*/

.collabora{

    padding:70px 0 80px;

}


/*----------------------------------------------
INTRODUCCIÓN
----------------------------------------------*/

.collabora .section-intro{

    max-width:100%;

    margin:20px auto 45px;

    padding:0 10px;

    font-size:1rem;

    line-height:1.7;

}


/*----------------------------------------------
FILAS
----------------------------------------------*/

.collabora-row{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:25px;

    margin-bottom:25px;

}


/*----------------------------------------------
TARJETAS GENERALES
----------------------------------------------*/

.collabora-card{

    width:100%;

    max-width:420px;

    padding:35px 25px;

    border-radius:18px;

}


/*----------------------------------------------
ICONOS
----------------------------------------------*/

.collabora-card i{

    width:65px;

    height:65px;

    margin:0 auto 20px;

    font-size:1.6rem;

}


/*----------------------------------------------
TÍTULOS
----------------------------------------------*/

.collabora-card h3{

    margin-bottom:15px;

    font-size:1.35rem;

}


/*----------------------------------------------
TEXTOS
----------------------------------------------*/

.collabora-card p{

    font-size:1rem;

    line-height:1.7;

    margin-bottom:22px;

}


/*----------------------------------------------
ENLACES
----------------------------------------------*/

.collabora-card a{

    font-size:.95rem;

}


/*----------------------------------------------
TARJETAS DESTACADAS
----------------------------------------------*/

.featured-row{

    margin-top:10px;

}


.featured-card{

    width:100%;

    max-width:420px;

    min-height:330px;

    padding:40px 25px;

}


/*----------------------------------------------
TÍTULOS DESTACADOS
----------------------------------------------*/

.featured-card h3{

    font-size:1.7rem;

    line-height:1.2;

    margin-bottom:15px;

}


/*----------------------------------------------
TEXTOS DESTACADOS
----------------------------------------------*/

.featured-card p{

    max-width:100%;

    font-size:1rem;

    line-height:1.7;

    margin:0 auto 25px;

}


/*----------------------------------------------
IMÁGENES DE FONDO
----------------------------------------------*/

.gift-card::before,
.shop-card::before{

    opacity:.70;

}


/*----------------------------------------------
CAPA SOBRE LAS IMÁGENES
----------------------------------------------*/

.featured-card::after{

    background:linear-gradient(
        rgba(18,58,99,.30),
        rgba(18,58,99,.40)
    );

}


/*----------------------------------------------
HOVER DE LAS TARJETAS DESTACADAS
----------------------------------------------*/

.featured-card:hover::before{

    transform:none;

    opacity:.70;

}

/*----------------------------------------------
FOOTER - MÓVIL
----------------------------------------------*/

.footer{

    width:100%;

}


/*----------------------------------------------
CONTENEDOR PRINCIPAL
----------------------------------------------*/

.footer-container{

    width:100%;

    max-width:100%;

    padding:65px 25px 50px;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:45px;

    text-align:center;

}


/*----------------------------------------------
IDENTIDAD
----------------------------------------------*/

.footer-brand{

    width:100%;

    align-items:center;

    text-align:center;

}


/*----------------------------------------------
LOGO
----------------------------------------------*/

.footer-logo{

    margin-bottom:0;

}

.footer-logo img{

    width:125px;

    margin:0 auto 15px;

}


/*----------------------------------------------
FRASE
----------------------------------------------*/

.footer-brand p{

    max-width:280px;

    font-size:1.1rem;

    line-height:1.6;

}


/*----------------------------------------------
REDES SOCIALES
----------------------------------------------*/

.footer-social{

    gap:14px;

    margin-top:20px;

}


.footer-social a{

    width:52px;

    height:52px;

    font-size:1.1rem;

}


/*----------------------------------------------
COLUMNAS
----------------------------------------------*/

.footer-column{

    width:100%;

    max-width:320px;

    text-align:center;

}


.footer-column h3{

    font-size:1.15rem;

    margin-bottom:20px;

}


.footer-column ul{

    display:flex;

    flex-direction:column;

    align-items:center;

}


.footer-column li{

    margin-bottom:11px;

}


.footer-column li a{

    font-size:.95rem;

}


/*----------------------------------------------
CONTACTE
----------------------------------------------*/

.footer-contact{

    text-align:center;

}


.footer-contact ul{

    align-items:center;

}


.footer-contact li{

    justify-content:center;

    align-items:center;

    gap:10px;

    text-align:left;

}


.footer-contact li i{

    margin-top:0;

    flex-shrink:0;

}


.footer-contact-link{

    margin-top:18px;

    font-size:.95rem;

}


/*----------------------------------------------
PARTE INFERIOR
----------------------------------------------*/

.footer-bottom{

    width:100%;

    max-width:100%;

    padding:25px 25px 30px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:18px;

    text-align:center;

}


/*----------------------------------------------
COPYRIGHT
----------------------------------------------*/

.footer-bottom p{

    font-size:.8rem;

    line-height:1.5;

    text-align:center;

}


/*----------------------------------------------
ENLACES LEGALES
----------------------------------------------*/

.footer-legal{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:12px;

}


.footer-legal a{

    font-size:.85rem;

}


/*----------------------------------------------
IDIOMAS
----------------------------------------------*/

.footer-language{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    margin-top:3px;

}

.footer::before{

        background-image:url("../images/footer/tiburon-vertical.jpg");

        background-size:cover;

        background-position:center center;

    }
}
/* Inici: il·lustracions completes i quatre cantonades arrodonides en mòbil. */
@media(max-width:768px){
    #especies.species .species-card{
        display:block;
        min-height:0;
        height:auto;
        aspect-ratio:1280 / 905;
        background:#fff;
        border-radius:16px;
        overflow:hidden;
        clip-path:inset(0 round 16px);
        border:1px solid #ddeaf0;
    }
    #especies.species .species-card img{
        display:block;
        width:100%;
        height:100%;
        object-fit:contain;
        object-position:center;
        transform:none;
    }
    #especies.species .species-card:hover img{transform:none}
}

/* Inici: categoria a dalt i nom i enllaç a baix, com al catàleg d'espècies. */
#especies.species .species-overlay{
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:flex-start;
    padding:24px;
    transform:none;
    background:linear-gradient(to bottom,rgba(8,34,56,.30),transparent 25%,transparent 50%,rgba(8,34,56,.82));
}
#especies.species .species-category{
    position:absolute;
    top:24px;
    left:24px;
    margin:0;
}
#especies.species .species-overlay h3,
#especies.species .species-overlay p{
    position:static;
    margin:0;
    opacity:1;
    transform:none;
}
#especies.species .species-overlay h3{margin-bottom:6px}
@media(max-width:768px){
    #especies.species .species-overlay{padding:18px}
    #especies.species .species-category{top:18px;left:18px}
    #especies.species .species-overlay h3{font-size:1.35rem}
}