/* =========================================
   PROPIEDADES GENERALES
========================================= */

:root {
    --oscuro: #070707;
    --reedOscuro: #440d0d;
    --reedClaro: #e60000;
    --blanco: #FEFCFB;
}

html {
    box-sizing: border-box;
    font-size: 62.5%;
    scroll-behavior: smooth;
}

body {
    font-size: 1.6rem;
}

*,
*::before,
*::after {
    font-family: Arial, Helvetica, sans-serif;
    box-sizing: inherit;
}


/* Ocultar barra navegación móvil */

.ocultar {
    display: none;
}


/* Contenedor general */

.contenedor {
    margin: 0 auto;
    max-width: 120rem;
    width: 95%;
}


/* =========================================
   BOTONES GENERALES
========================================= */

.btn {
    padding: 1rem 4rem;
    font-weight: bold;
    font-size: 2rem;
    border: none;
    color: var(--blanco);
}

.btn:hover {
    cursor: pointer;
}

.reed {
    background-color: var(--reedClaro);
}


/* =========================================
   ANIMACIÓN MENÚ
========================================= */

@keyframes desplazamiento {

    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}


/* =========================================
   ENCABEZADO
========================================= */

.encabezado {
    background-image: url('../img/555.jpg');
    background-repeat: no-repeat;
    min-height: 70rem;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 1;
}

@media(min-width: 768px) {

    .encabezado {
        background-attachment: fixed;
        background-image: url('../img/2.jpg');
    }
}


/* Oscurecer imagen */

.encabezado::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.72) 0%,
            rgba(0,0,0,.50) 45%,
            rgba(0,0,0,.30) 100%
        );

    z-index: -1;
}


/* Cuba azul */

#cuba {
    color: rgb(4, 188, 250);
    text-decoration: none;
}


/* =========================================
   LOGOTIPO
========================================= */

.logo {
    width: 42%;
    height: 100%;
    margin-left: 5%;
}

#logotipo {
    height: 100%;
    width: 22%;
}

@media(max-width: 768px) {

    .logo {
        height: 100%;
        width: 40%;
    }

    #logotipo {
        height: 100%;
        width: 80%;
    }
}


/* =========================================
   BARRA DE NAVEGACIÓN
========================================= */

.contenido-navegacion {
    display: flex;
    align-items: center;
    justify-content: space-around;

    background-color: var(--blanco);

    box-shadow:
        10px 10px 16px -6px rgba(189, 4, 4, .45);

    position: fixed;

    top: 0;

    width: 100%;
    height: 10%;

    z-index: 2;
}


.navegacion {

    background-color: var(--blanco);

    position: absolute;

    left: 0;
    top: 70px;

    width: 100%;

    animation: desplazamiento .5s ease-in-out;
}


@media(min-width: 768px) {

    .ocultar {
        display: inline;
    }
}


.navegacion a {

    display: block;

    font-size: 2rem;

    padding: 1.1rem;

    color: var(--reedClaro);

    text-decoration: none;

    transition:
        background-color .3s ease-in-out,
        color .3s ease-in-out;
}


.navegacion a:hover {

    background-color: var(--reedClaro);

    color: var(--blanco);
}


@media(min-width: 768px) {

    .navegacion a {
        display: inline;
    }


    .navegacion {

        position: relative;

        top: unset;

        width: auto;

        background-color: unset;

        animation: unset;
    }
}


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

@media(min-width: 768px) {

    .menu {
        display: none;
    }
}


.menu span {

    width: 5rem;

    height: 1rem;

    border: 3px solid white;

    background-color: var(--reedClaro);

    display: block;

    transition:
        background-color .3s ease-in-out;
}


/* =========================================
   CONTENIDO DEL ENCABEZADO
========================================= */

.contenido-encabezado {

    padding-top: 25%;

    position: relative;
}


.texto-encabezado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 60px;
}


/* =========================================
   DIVISIÓN DEL HERO
========================================= */

.divide {

    width: 100%;

    height: auto;

    display: grid;

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

    margin-bottom: 2rem;
}


/* =========================================
   TÍTULO PRINCIPAL
========================================= */

.rojo {

    color: var(--reedClaro);

    margin: 0;

    font-size: 4.2rem;

    line-height: .95;

    text-align: center;

    font-weight: 800;

    letter-spacing: -1px;

    text-shadow:
        0 4px 15px rgba(0,0,0,.55);
}


.rojo span {
    color: var(--blanco);
}


/* =========================================
   CUBA & CANADÁ
========================================= */

.h2 {

    color: var(--blanco);

    margin: 0;

    padding: .7rem 0;

    text-align: center;

    font-size: 1.8rem;

    font-weight: 600;
}


.h2 span {

    color: var(--reedClaro);
}


/* Su viaje comienza aquí */

.frase-viaje {

    margin-top: .5rem;

    margin-bottom: 2rem;

    color: #f1f1f1;

    font-weight: 400;

    letter-spacing: .5px;
}


/* =========================================
   TÍTULOS BLANCOS
========================================= */

.blanco {

    color: var(--blanco);

    margin-top: 0;

    font-size: 2.5rem;

    text-align: center;

    margin-bottom: 0;
}


/* =========================================
   BOTONES DEL ENCABEZADO
========================================= */

#div_ul {

    width: 100%;

    display: flex;

    justify-content: center;
}


#ul_boton {

    list-style-type: none;

    padding: 0;

    margin: 1rem 0 0 0;

    width: 100%;

    max-width: 42rem;

    display: flex;

    flex-direction: column;

    gap: 1.3rem;

    color: var(--blanco);
}


/* Botón principal */

.boton_modal {

    width: 100%;

    min-height: 6.5rem;

    display: flex;

    align-items: center;

    gap: 1.4rem;

    padding: 1.2rem 1.7rem;

    border:

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

    border-radius: 1.2rem;

    background:

        linear-gradient(
            135deg,
            rgba(230,0,0,.96),
            rgba(150,0,0,.96)
        );

    color: var(--blanco);

    text-align: left;

    cursor: pointer;

    box-shadow:

        0 8px 25px rgba(0,0,0,.30),

        inset 0 1px 0 rgba(255,255,255,.15);

    transition:

        transform .25s ease,

        box-shadow .25s ease,

        background .25s ease,

        border-color .25s ease;
}


/* Texto principal */

.boton_modal strong {

    display: block;

    font-size: 1.6rem;

    font-weight: 700;
}


/* Texto secundario */

.boton_modal small {

    display: block;

    margin-top: .3rem;

    font-size: 1.25rem;

    color: rgba(255,255,255,.82);
}


/* Icono */

.icono-boton {

    width: 4rem;

    height: 4rem;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background-color:

        rgba(255,255,255,.17);

    font-size: 1.8rem;
}


/* Flecha */

.flecha {

    margin-left: auto;

    font-size: 2.3rem;

    transition:
        transform .25s ease;
}


/* Segundo botón */

.boton-secundario {

    background:

        rgba(0,0,0,.45);

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    border:

        1px solid rgba(255,255,255,.5);
}


/* =========================================
   ENCABEZADO PC
========================================= */

@media(min-width: 768px) {

    .contenido-encabezado {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding-top: 7%;

        height: 75%;

        margin-left: 5rem;

        margin-right: 5rem;
    }


    .contenido-encabezado,
    .formulario-encabezado {

        flex: 0 0 calc(50% - 1rem);
    }


    .divide {

        display: flex;

        flex-direction: column;
    }


    .rojo {

        font-size: 7rem;

        letter-spacing: -2px;
    }


    .h2 {

        padding-bottom: 1rem;

        font-size: 2.5rem;
    }


    .frase-viaje {

        font-size: 2rem;

        margin-top: 0;

        margin-bottom: 2rem;
    }


    .blanco {

        font-size: 5rem;
    }


    .uno {

        margin-bottom: 2rem;
    }


    .dos {

        margin-top: 4rem;
    }


    /* Hover botones */

    .boton_modal:hover {

        transform:
            translateY(-4px);

        box-shadow:

            0 12px 30px rgba(0,0,0,.40),

            0 0 20px rgba(230,0,0,.20);
    }


    .boton_modal:hover .flecha {

        transform:
            translateX(6px);
    }


    .boton-secundario:hover {

        background:

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

        border-color:

            rgba(255,255,255,.8);
    }
}


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

@media(max-width: 767px) {

    .contenido-encabezado {

        padding-top: 15rem;
    }


    .divide {

        display: block;
    }


    .uno {

        width: 100%;
    }


    .rojo {

        font-size: 4.2rem;
    }


    .h2 {

        font-size: 1.8rem;
    }


    #ul_boton {

        width: 90%;

        max-width: 38rem;
    }


    .boton_modal {

        min-height: 6rem;
    }
}


/* =========================================
   PÁRRAFO IMPACTO ENCABEZADO
========================================= */

.impacto {
    width: 80%;
    height: auto;

    /* IMPORTANTE: quitar position:absolute y bottom:5% */
    position: relative;

    margin: 3rem auto 0;

    text-align: center;

    border-radius: 1rem;

    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);

    background-color: transparent;

    border: 1px solid white;

    padding: 1rem 2rem;
}


.impacto h3 {

    font-size: 1.7rem;

    margin: 0;

    padding: 1rem;

    text-align: center;

    color: gainsboro;
}


@media(min-width: 768px) {

    .impacto {

        right: 11%;
    }


    .impacto h3 {

        font-size: 2.5rem;
    }
}


/* =========================================
   VENTAJAS
========================================= */

@media(min-width: 768px) {

    .contenido-ventaja {

        display: grid;

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

        column-gap: 1rem;
    }
}


.ventajas {

    padding: 5rem;

    background-color:
        rgb(165, 42, 42);
}


.ventaja {

    color: var(--blanco);

    text-align: center;
}


.icon {

    width: 30%;
}


.ventaja h3 {

    font-size: 2.5rem;
}


#recorte p {

    font-size: 1.825rem;
}


.ventaja p {

    font-size: 2rem;
}


/* =========================================
   SOBRE NOSOTROS
========================================= */

.nosotros h2 {

    text-align: center;

    font-size: 4rem;

    color: var(--reedClaro);
}


@media(min-width: 768px) {

    .nosostros h2 {

        font-size: 5rem;
    }
}


.contenido-nosotros {

    background-image:
        url('../img/paes.jpg');

    display: grid;

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

    background-size: cover;

    background-position: center;
}


@media(min-width: 768px) {

    .contenido-nosotros {

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

        background-attachment: fixed;

        background-image:
            url('../img/pae.jpg');
    }
}


.texto-nosotros {

    padding: 1.5rem;

    grid-row: 2/3;

    background-color:
        var(--blanco);
}


@media(min-width: 768px) {

    .texto-nosotros {

        padding: 5rem;
    }
}


.texto-nosotros h3 {

    font-size: 4rem;

    color: var(--reedClaro);

    text-align: center;
}


.texto-nosotros p {

    font-size: 1.8rem;

    text-align: center;
}


@media(min-width: 768px) {

    .texto-nosotros p {

        text-align: left;
    }
}


.texto-nosotros h1 {

    color: var(--reedClaro);
}


#sca {

    text-align: right;

    font-size: 2.4rem;
}


.texto-nosotros span {

    color: var(--oscuro);
}


@media(max-width: 768px) {

    #sca {

        font-size: 2.5rem;
    }
}


/* =========================================
   SERVICIOS / PREGUNTAS
========================================= */

.servicios {

    padding-top: 5rem;
}


.servicios h2 {

    font-size: 5rem;

    text-align: center;

    color: var(--reedClaro);
}


@media(min-width: 768px) {

    .contenido-servicio {

        display: grid;

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

        gap: 4rem;
    }
}


.servicio {

    display: flex;

    flex-direction: column;

    align-items: center;
}


.serv {

    width: 10rem;

    height: 10rem;

    font-size: 1rem;

    background-color:
        var(--reedClaro);

    box-shadow:
        10px 10px 16px -6px
        rgba(0,0,0,.45);

    transition:
        all .3s ease-in-out;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 100%;
}


.icon-service {

    width: 80%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--blanco);
}


.servicio h3 {

    font-size: 2.2rem;

    color: var(--reedOscuro);

    text-align: center;
}


.servicio p {

    font-size: 1.8rem;

    text-align: center;
}


@media(min-width: 768px) {

    .serv:hover {

        cursor: pointer;

        background-color:
            var(--blanco);
    }


    .icon-service:hover {

        color: var(--reedClaro);
    }
}


/* =========================================
   CONTACTO
========================================= */

.contacto h2 {

    text-align: center;

    color: var(--reedClaro);

    font-size: 5rem;

    margin: 1rem;
}


@media(min-width: 768px) {

    .contenido-contacto {

        display: grid;

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


/* =========================================
   INFORMACIÓN CONTACTO
========================================= */

.informacion-contacto {

    background-image:
        url('../img/foto1.jpg');

    background-size: cover;

    background-repeat: no-repeat;

    position: relative;

    z-index: 0;

    height: auto;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;
}


@media(min-width: 768px) {

    .informacion-contacto {

        justify-content:
            space-between;

        height: auto;
    }
}


.informacion-contacto::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    bottom: 0;

    right: 0;

    background-color:
        rgba(0,0,0,.5);

    z-index: -1;
}


.informacion-contacto h3 {

    font-size: 3rem;

    text-align: center;

    color: var(--blanco);
}


.malanga {

    width: 100%;

    display: flex;

    gap: 1rem;
}


.kaka a {

    background-color:
        var(--reedClaro);

    display: flex;

    text-decoration: none;

    cursor: pointer;

    color: var(--blanco);

    font-size: 2.5rem;

    border-radius: 1rem;

    box-shadow:
        10px 10px 16px -6px
        rgba(0,0,0,.5);

    justify-content: center;

    align-items: center;

    transition:
        all .3s ease-in-out;

    padding: 1rem;
}


#masinformacion {

    color: rgb(4,188,250);

    border-bottom:
        1px outset rgb(4,188,250);
}


.info-contacto {

    margin-left: 2%;

    margin-right: 4%;
}


@media(max-width: 768px) {

    .info-contacto {

        margin-left: 5%;

        margin-right: 8%;
    }
}


/* =========================================
   FORMULARIO CONTACTO
========================================= */

.formulario-contacto {

    padding: 5rem;

    gap: 1rem;

    display: flex;

    flex-direction: column;

    justify-content: center;

    background-color: #000;
}


.formulario-contacto a {

    text-decoration: none;

    text-align: center;
}


.input-contacto label {

    color: var(--blanco);

    display: block;

    margin: 1rem 0;

    font-weight: bold;
}


.input-contacto input {

    padding: 1.2rem 1rem;
}


.input-contacto input,
.input-contacto textarea {

    width: 100%;

    outline: none;
}


.send {

    margin-top: 1.5rem;
}


.input-contacto textarea {

    resize: none;
}


.input-contacto input[type="submit"] {

    width: auto;

    padding: 1rem 3rem;
}


/* =========================================
   PIE DE PÁGINA
========================================= */

.footer .logo h2,
.footer p {

    text-align: center;
}


#horario {

    color: #FEFCFB;
}


ul {

    color: #FEFCFB;
}


/* Redes sociales */

.social {

    display: grid;

    width: 25%;

    margin: 0 auto;

    justify-items: center;

    align-items: center;
}


#canada_pie_pagina {

    color: #e60000;

    font-size: x-large;
}


@media(min-width: 768px) {

    .footer {

        display: flex;

        align-items: center;

        justify-content:
            space-around;
    }


    .footer a {

        text-decoration: none;

        font-size: 1.2rem;
    }


    .logo {

        display: flex;

        gap: 2rem;
    }


    .social {

        width: auto;

        padding: 2rem;
    }


    .media {

        border-radius: 100%;

        transition:
            all .3s ease-in-out;
    }


    .media:hover {

        cursor: pointer;

        scale: 1.3;
    }
}


/* =========================================
   MODALES
========================================= */

.modal {

    display: none;

    position: fixed;

    z-index: 1000;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    overflow: auto;

    background-color:
        rgba(0,0,0,.55);
}


.modal-content {

    background-color: #fefefe;

    margin: 15% auto;

    padding: 20px;

    width: 80%;

    max-width: 70rem;

    border-radius: 1rem;

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


/* Cruz cerrar modal */

.close-btn {

    float: right;

    color: #777;

    font-size: 2.5rem;

    cursor: pointer;
}


.close-btn:hover {

    color: var(--reedClaro);
}


#ull {

    color: black;
}


ol {

    margin-left: 50px;

    color: black;
}


@media(max-width: 767px) {

    #foti {

        width: 100%;
    }


    #oll {

        margin-left: 35px;
    }


    .modal-content {

        width: 92%;

        margin: 25% auto;

        padding: 2rem;
    }
}
/* =====================================================
   HERO NUEVO - TRÁMITES CUBA & CANADÁ
   ===================================================== */

.contenido-encabezado {
    min-height: 70rem;
    padding: 14rem 6% 10rem;
    display: flex;
    align-items: center;
}

/* Caja semitransparente para separar texto del fondo */
/* Caja semitransparente para separar texto del fondo */
.texto-encabezado {
    width: 100%;
    max-width: 68rem;
    padding: 4rem 4.5rem;

    background: rgba(0, 15, 30, 0.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    border: 1px solid rgba(255,255,255,.18);
    border-radius: 2rem;

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

    align-items: flex-start;

    /* Separación con la sección siguiente */
    margin-bottom: 3rem;
}

.divide {
    width: 100%;
    display: block;
    margin: 0;
}

.uno {
    width: 100%;
}


/* =====================================
   ETIQUETA SUPERIOR
===================================== */

.etiqueta-superior {
    display: inline-flex;
    align-items: center;

    padding: .8rem 1.5rem;
    margin-bottom: 2rem;

    color: #fff;

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

    border: 1px solid rgba(255,255,255,.25);
    border-radius: 5rem;

    font-size: 1.5rem;
    font-weight: 600;

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


/* =====================================
   TRÁMITES
===================================== */

.titulo-principal {
    margin: 0;

    color: #fff;

    font-size: 7rem;
    font-weight: 800;

    line-height: 1;

    letter-spacing: -2px;

    text-shadow: 0 4px 15px rgba(0,0,0,.5);
}


/* =====================================
   CUBA & CANADÁ
===================================== */

.titulo-paises {
    margin: 1rem 0 1.5rem;

    font-size: 4.2rem;
    font-weight: 800;

    line-height: 1.1;

    text-shadow: 0 3px 10px rgba(0,0,0,.5);
}

.titulo-paises .cuba {
    color: #38bdf8;
}

.titulo-paises .ampersand {
    color: #fff;
    margin: 0 .8rem;
    font-weight: 400;
}

.titulo-paises .canada {
    color: #ff3030;
}


/* =====================================
   SUBTÍTULO
===================================== */

.subtitulo {
    margin: 0 0 1rem;

    color: #fff;

    font-size: 2.5rem;
    font-weight: 600;
}


/* =====================================
   DESCRIPCIÓN
===================================== */

.descripcion-encabezado {
    max-width: 57rem;

    margin: 0 0 2.5rem;

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

    font-size: 1.7rem;
    line-height: 1.6;
}


/* =====================================
   BOTONES
===================================== */

.botones-encabezado {
    display: flex;
    gap: 1.3rem;
    flex-wrap: wrap;

    margin-top: 1rem;
}

.boton-aplicar {
    min-height: 5.8rem;

    padding: 0 2rem;

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

    gap: 2rem;

    border-radius: 1rem;

    font-size: 1.5rem;
    font-weight: 700;

    cursor: pointer;

    transition: all .25s ease;
}


/* BOTÓN ROJO */

.boton-aplicar.principal {
    color: #fff;

    background: linear-gradient(
        135deg,
        #ef1b1b,
        #b90000
    );

    border: 1px solid #ff4d4d;

    box-shadow: 0 8px 22px rgba(230,0,0,.35);
}


/* BOTÓN TRANSPARENTE */

.boton-aplicar.secundario {
    color: #fff;

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

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

    backdrop-filter: blur(5px);
}


/* FLECHAS */

.boton-aplicar span {
    font-size: 2rem;

    transition: transform .25s ease;
}


/* HOVER */

.boton-aplicar:hover {
    transform: translateY(-3px);
}

.boton-aplicar:hover span {
    transform: translateX(5px);
}

.boton-aplicar.principal:hover {
    background: linear-gradient(
        135deg,
        #ff3030,
        #d00000
    );

    box-shadow: 0 12px 30px rgba(230,0,0,.45);
}

.boton-aplicar.secundario:hover {
    background: rgba(255,255,255,.20);
}


/* =====================================
   TEXTO DE CONFIANZA
===================================== */

.confianza {
    margin-top: 2rem;
    
    color: rgba(255,255,255,.85);

    font-size: 1.35rem;

    display: flex;
    flex-wrap: wrap;

    gap: .8rem 2rem;
}


/* =====================================
   OSCURECER MEJOR EL FONDO
===================================== */

.encabezado::before {
    background: linear-gradient(
        90deg,
        rgba(0, 10, 25, .80) 0%,
        rgba(0, 15, 30, .65) 42%,
        rgba(0, 15, 30, .30) 75%,
        rgba(0, 0, 0, .20) 100%
    );
}


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

@media (max-width: 767px) {

    .contenido-encabezado {
        min-height: auto;

        padding:
            12rem 1.8rem
            8rem;
    }

    .texto-encabezado {
        padding: 3rem 2.2rem;

        border-radius: 1.5rem;
    }

    .titulo-principal {
        font-size: 4.8rem;
        letter-spacing: -1px;
    }

    .titulo-paises {
        font-size: 3rem;
    }

    .subtitulo {
        font-size: 2rem;
    }

    .descripcion-encabezado {
        font-size: 1.5rem;
    }

    .botones-encabezado {
        flex-direction: column;
    }

    .boton-aplicar {
        width: 100%;
    }

    .confianza {
        flex-direction: column;
    }

    .etiqueta-superior {
        font-size: 1.3rem;
    }
}