/*
    Theme Name: GT Expedition
    Theme URI: 
    Author: Josué Berdúo
    Author URI: http:
    Description: Theme Diseñado para GT Expedition
    Version: 1.0
    License: GNU General Public License v2 or later
    License URI: http://www.gnu.org/licenses/gpl-2.0.html
    Tags: aventura, tours, guatemala, volcanes
    Text Domain: gtexpedition
*/
    
    @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Staatliches&display=swap');
     :root {
        /** FUENTES **/
        --fuente-principal: "Raleway", sans-serif;
        --fuente-headings: "Staatliches", sans-serif;
        --primario: #0AD7EA;
        --secundario: #ACF809;
        --negro: #000;
        --gris: #2f2e2e;
        --blanco: #fff;
        --gris-claro: #cbcbcb;
        --gris-mas-claro: #f1f1f1;
        --naranja: #f89409;
    }
    
    html {
        box-sizing: border-box;
        /* 10px = 1rem */
        font-size: 62.5%;
    }
    
    *,
    *:before,
    *:after {
        box-sizing: inherit;
    }
    
    body {
        font-family: var(--fuente-principal);
        font-size: 18px;
        font-size: 1.8rem;
        line-height: 2;
    }
    /** HEADINGS **/
    
    h1,
    h2,
    h3,
    h4 {
        font-family: var(--fuente-principal);
        margin: 0 0 5rem 0;
        line-height: 1.2;
    }
    
    h1 {
        font-size: 6rem;
    }
    
    h2 {
        font-size: 4.8rem;
    }
    
    h3 {
        font-size: 3.6rem;
    }
    
    h4 {
        font-size: 2.4rem;
    }
    /** GLOBALES **/
    
    p {
        margin: 0;
    }
    
    a {
        text-decoration: none;
    }
    
    ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    
    img {
        display: block;
        max-width: 100%;
        height: auto;
    }
    
    .imagen-destacada {
        margin-bottom: 3rem;
    }
    
    hr {
        border: 1px solid var(--gris);
    }
    
    .contenedor {
        width: min(95%, 120rem);
        margin: 0 auto;
    }
    
    .contenido-centrado {
        width: min(95%, 80rem);
    }
    
    .contenedor-boton {
        display: flex;
        justify-content: flex-end;
    }
    /** BOTONES **/
    
    .boton {
        background-color: var(--blanco);
        color: var(--negro);
        padding: 1rem 3rem;
        display: block;
        flex: 1;
        text-align: center;
        font-weight: 700;
        text-transform: uppercase;
        border-radius: .5rem;
        margin: 1rem 1.2rem;
    }
    
    .boton:hover {
        opacity: .55;
        transition: opacity .1s ease-out;
        text-decoration: underline;
    }
    
    @media (min-width:768px) {
        .boton {
            display: inline-block;
            flex: 0 0 auto;
            margin: 1rem 2.8rem;
        }
    }
    
    .boton-primario {
        background-color: var(--primario);
        color: var(--blanco);
    }
    
    .boton-secundario {
        background-color: var(--secundario);
        color: var(--negro);
    }
    
    .boton-naranja {
        background-color: var(--naranja);
        color: var(--blanco);
    }
    /** UTILIDADES **/
    
    .text-center {
        text-align: center;
    }
    
    .text-primary {
        color: var(--primario);
    }
    
    .text-blanco {
        color: var(--blanco);
    }
    
    .fondo {
        background-color: var(--gris-mas-claro);
        padding: 2rem;
        color: var(--primario);
        text-transform: uppercase;
    }
    
    .seccion {
        padding: 5rem 0;
    }
    /** HEADER **/
    
    body.home .header {
        padding-top: 2rem;
        height: auto;
        min-height: 70rem;
        background-size: cover;
        background-position: center center;
    }
    
    @media(min-width: 768px) {
        body.home .header {
            height: 100vh;
            max-height: 90rem;
        }
    }
    
    .tagline {
        color: var(--blanco);
        margin-top: 5rem;
    }
    
    @media(min-width:768px) {
        .tagline {
            margin-top: 15rem;
        }
        .tagline p {
            font-size: 2rem;
        }
    }
    
    .header {
        background-color: var(--negro);
        padding: 2rem 0;
    }
    
    .barra-navegacion {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    @media (min-width: 768px) {
        .barra-navegacion {
            flex-direction: row;
            justify-content: space-between;
        }
        .logo img {
            width: 60%;
        }
    }
    
    @media(min-width: 992px) {
        .fixed-top {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            background-color: var(--negro);
            padding: 1rem 5rem;
            height: 10rem;
            z-index: 1000;
            transition: background-color 500ms ease-in-out;
        }
    }
    
    .hamburguer-menu:hover {
        cursor: pointer;
    }
    
    .contenedor-menu {
        opacity: 0;
        height: 0;
        transition-delay: 100ms, 300ms;
        transition-property: opacity, height;
        transition-timing-function: ease-in-out;
        transition-duration: 300ms;
    }
    
    .mostrar {
        opacity: 1;
        height: 35rem;
        transition-delay: 100ms, 300ms;
        transition-property: height, opacity;
        transition-timing-function: ease-in-out;
        transition-duration: 300ms;
    }
    
    @media (min-width: 768px) {
        .hamburguer-menu {
            display: none;
        }
        .contenedor-menu {
            all: unset;
        }
    }
    
    @media (min-width: 768px) {
        .menu-principal {
            display: block;
        }
        .menu-principal .menu {
            display: flex;
        }
    }
    
    .menu-principal a {
        font-family: var(--fuente-headings);
        color: var(--blanco);
        display: block;
        text-align: center;
        font-size: 2.2rem;
        padding: 0.5rem 2rem;
    }
    
    @media (min-width:768px) {
        .menu-principal .current_page_item {
            border-bottom: 3px solid var(--primario);
        }
    }
    
    @media (min-width:768px) {
        .menu-principal a {
            position: relative;
            z-index: 1;
        }
        .menu-principal a::before,
        .menu-principal a::after {
            position: absolute;
            left: 0;
            content: '';
            display: block;
            width: 100%;
            height: 50%;
            background-color: var(--primario);
            z-index: -1;
            transform: scaleX(0);
            transition: transform .6s;
        }
        .menu-principal a::before {
            top: 0;
            transform-origin: left;
        }
        .menu-principal a::after {
            top: 50%;
            transform-origin: right;
        }
        .menu-principal a:hover::before {
            transform: scaleX(1);
        }
        .menu-principal a:hover::after {
            transform: scaleX(1);
        }
    }
    /** HERO **/
    
    .ml2 {
        font-weight: 900;
        font-size: 3.5em;
    }
    
    .ml2 .letter {
        display: inline-block;
        line-height: 1em;
    }
    /** FOOTER **/
    
    .footer .menu-principal a {
        color: var(--negro);
        text-align: center;
        font-size: 2.4rem;
        padding: 0 1rem;
    }
    
    .copyright {
        text-align: center;
        font-family: var(--fuente-principal);
    }
    
    @media (min-width: 768px) {
        .contenido_footer {
            display: flex;
            justify-content: space-between;
        }
    }
    /** para que no se muestre el hover en el menú del footer **/
    
    .footer .menu-principal a::before,
    .footer .menu-principal a::after {
        display: none;
    }
    /** FRONT PAGE **/
    
    .bienvenida p {
        max-width: 80rem;
        margin: 0 auto;
    }
    
    .servicios {
        display: grid;
        grid-template-columns: 1fr;
    }
    
    @media (min-width:480px) {
        .servicios {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    @media (min-width:768px) {
        .servicios {
            grid-template-columns: repeat(4, 1fr);
        }
    }
    
    .servicio {
        height: 25rem;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .servicio img {
        height: 25rem;
        object-fit: cover;
    }
    
    @media (min-width:768px) {
        .servicio,
        .servicio img {
            height: 28rem;
        }
    }
    
    .servicio::after {
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        content: '';
        background-image: linear-gradient(rgb(0 0 0 / .60), rgb(0 0 0 / .60));
    }
    
    .servicio p {
        position: absolute;
        color: var(--blanco);
        z-index: 100;
        font-weight: 900;
        padding: 1rem 2rem;
        /* border: 3px solid var(--blanco);*/
        text-transform: uppercase;
    }
    
    @media(min-width:768px) {
        .servicio p {
            opacity: 0;
            transition: opacity .5s ease-out;
        }
        .servicio:hover p {
            opacity: 1;
        }
    }
    /* GALERIA */
    
    .galeria-imagenes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(6, 300px);
        gap: 2rem;
    }
    
    @media (min-width: 768px) {
        .galeria-imagenes {
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: auto;
        }
    }
    
    .galeria-imagenes img {
        height: 300px;
        object-fit: cover;
    }
    
    @media (min-width: 768px) {
        .galeria-imagenes li:nth-child(4) {
            grid-column: 4/5;
            grid-row: 1/3;
        }
        .galeria-imagenes li:nth-child(6) {
            grid-column: 2/3;
            grid-row: 2/4;
        }
    }
    
    .galeria-imagenes li:nth-child(4) img,
    .galeria-imagenes li:nth-child(6) img {
        height: 620px;
    }
    /** CARDS **/
    
    .listado-grid {
        margin-top: 4rem;
        display: grid;
        gap: 2rem;
    }
    
    @media(min-width: 768px) {
        .listado-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }
    
    .card {
        background-image: linear-gradient(to bottom, transparent 0, rgba(0 0 0/.75));
        position: relative;
        overflow: hidden;
    }
    /** CATEGORIAS EN CARDS **/
    
    .card .post-categories {
        position: absolute;
        top: 2rem;
        left: 2rem;
        display: flex;
        gap: 1rem;
        z-index: 100;
    }
    
    .card .post-categories li {
        background-color: var(--secundario);
        padding: 0 1rem;
        border-radius: .5rem;
    }
    
    .card .post-categories a {
        color: var(--negro);
        font-size: 1.2rem;
        text-transform: uppercase;
        font-weight: 700;
    }
    
    .card img {
        display: block;
        position: relative;
        z-index: -1;
        height: 40rem;
        object-fit: cover;
    }
    
    .card .contenido h3 {
        color: var(--blanco);
        margin: 0;
    }
    
    .card .contenido {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 2rem;
    }
    
    .card .contenido p,
    .card .contenido a {
        color: var(--blanco);
        margin: 0;
    }
    
    .card .meta {
        font-size: 1.4rem;
    }
    
    .card .meta span {
        color: var(--secundario);
    }
    
    .card:hover img {
        transform: scale(1.1);
    }
    
    .card img {
        transition: transform 300ms ease;
    }
    /* FORMULARIO DE CONTACTO */
    
    .wpcf7-form label {
        font-weight: 700;
    }
    
    .wpcf7-form .wpcf7-form-control {
        width: 100%;
        border: 1px solid var(--gris-claro);
        padding: 1.2rem;
    }
    
    .wpcf7-form .wpcf7-submit {
        background-color: var(--secundario);
        padding: 2rem 0;
        font-family: var(--fuente-headings);
        color: var(--negro);
        font-size: 2rem;
    }
    
    .wpcf7-form .wpcf7-submit:hover {
        cursor: pointer;
    }
    /** TOURS **/
    
    .tours {
        background-image: linear-gradient(to bottom, transparent 0, rgba(0 0 0/.75));
        position: relative;
        overflow: hidden;
    }
    
    .tours img {
        display: block;
        position: relative;
        height: 40rem;
        object-fit: cover;
        transition: transform 300ms ease;
    }
    
    .tours .contenido {
        position: absolute;
        top: 70%;
        width: 100%;
        height: 30%;
        background-image: linear-gradient(rgb(0 0 0 /.75), rgb(0 0 0 /.75));
        /*z-index: 1;*/
    }
    
    .tours:hover img {
        transform: scale(1.1);
        /* opacity: .75;
        transition: opacity .5s ease-out;*/
    }
    
    .tours h3 {
        color: var(--blanco);
        font-size: 2.2rem;
        padding: 1rem;
        margin-bottom: 0;
    }
    
    .tours p {
        color: var(--blanco);
        margin: 0 auto;
        padding: 0 2rem;
    }
    
    @media (min-width: 768px) {
        .tours {
            position: relative;
        }
        .tours h3 {
            color: var(--blanco);
            font-size: 2.2rem;
            padding: 1rem;
            margin-bottom: 0;
        }
    }
    
    @media (min-width: 768px) {
        .tours .contenido {
            position: absolute;
            top: 70%;
            width: 100%;
            height: 30%;
            background-image: linear-gradient(rgb(0 0 0 /.75), rgb(0 0 0 /.75));
            z-index: 1;
        }
        .tours .etiqueta {
            position: relative;
            top: -2%;
            z-index: 1;
        }
    }
    
    .tours .etiqueta {
        position: relative;
        background-color: var(--primario);
        color: var(--blanco);
        text-transform: uppercase;
        font-family: var(--fuente-headings);
        /*margin-right: 2rem;*/
        font-size: 3.2rem;
        /* border-radius: .5rem;*/
        padding: .5rem 0;
        z-index: 1;
        display: block;
        text-align: center;
    }
    
    .tours .etiqueta:last-of-type {
        margin-right: 0;
    }
    /** SIDEBAR **/
    
    @media(min-width: 768px) {
        .con_sidebar {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 4rem;
        }
    }
    
    .sidebar {
        background-color: var(--gris-mas-claro);
        /*border-radius: 5rem;*/
        padding: 4rem;
        height: 80%;
        box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, .12);
        padding: 2rem;
        position: relative;
        width: calc(100% - 2rem);
        border-top: 5px solid var(--color-primary-green);
        max-width: unset;
        background-color: #fff;
        margin: 0 auto;
    }
    
    .sidebar h3 {
        color: var(--primario);
    }
    
    .sidebar .etiqueta {
        display: block;
        background-color: var(--secundario);
        border-radius: .5rem;
        padding: .2rem 0;
        width: 40%;
        font-family: var(--fuente-headings);
        font-size: 3rem;
        text-align: center;
    }
    
    .sidebar .reserva {
        display: block;
        background-color: var(--primario);
        /*  border-radius: .5rem;*/
        padding: .2rem 0;
        width: auto;
        font-family: var(--fuente-headings);
        font-size: 2rem;
        text-align: center;
        margin-top: 2rem;
        color: var(--negro);
    }
    /** .sidebar .reserva:hover {
         opacity: .5;
        cursor: default;
    }**/
    /** presentación de TOURS **/
    
    .seccion_tours {
        background-color: var(--gris-mas-claro);
        /* border-radius: 5rem;*/
        padding: 4rem;
        box-shadow: 10px 10px 20px 10px rgba(0, 0, 0, .12);
        padding: 2rem;
        position: relative;
        width: calc(100% - 2rem);
        border-top: 5px solid var(--color-primary-green);
        max-width: unset;
        background-color: #fff;
        margin: 0 auto;
        margin-bottom: 2rem;
    }
    
    .meta-info {
        background-color: var(--gris-mas-claro);
        padding: 2rem;
    }
    
    .meta-info p,
    .meta-info a {
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--negro);
    }
    
    .meta-info span {
        color: var(--primario);
    }
    
    @media(min-width: 992px) {
        .meta-info {
            display: flex;
            justify-content: space-between;
        }
    }
    
    .meta-info .categorias {
        display: flex;
        align-items: end;
        gap: .5rem;
    }
    
    .meta-info .categorias .post-categories {
        display: flex;
        gap: .5rem;
    }
    
    .pagination .screen-reader-text {
        visibility: hidden;
        margin: 0;
    }
    
    .nav-links {
        display: flex;
        justify-content: center;
        gap: 5rem;
    }
    
    .nav-links a,
    .nav-links .current {
        font-size: 1.6rem;
        color: var(--blanco);
        font-weight: 700;
        background-color: var(--primario);
        padding: .5rem 1rem;
        border-radius: .5rem;
    }
    
    .nav-links .current {
        opacity: 30%;
    }