/*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;
    box-sizing: inherit;
}

/*Ocultar la barra de navegacion en el modo cell*/
.ocultar {
    display: none;
}

/*Para centrar todos los textos de la web*/
.contenedor {
    margin: 0 auto;
    max-width: 120rem;
    width: 95%;
}

/*Boton*/
.btn {
    padding: 1rem 4rem;
    font-weight: bold;
    font-family: var(--parrafos);
    font-size: 2rem;
    border: none;
    color: var(--blanco);
}
.btn:hover {
    cursor: pointer;
}
.reed {
    background-color: var(--reedClaro);
}

/*Efecto de la borra de navegacion en modo celular*/
@keyframes desplazamiento {
    /*Inicial*/
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/*Encabezado*/
.encabezado {
    background-image: url('../img/555.jpg');
    background-repeat: no-repeat;
    height: auto;
    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');
    }
}
.encabezado::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: -1;
}

/*Cuba en azul*/
#cuba{
    color: rgb(4, 188, 250);
}

/*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 NAVEGACION*/

.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, 0.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;
}
.navegacion a:hover {
    background-color: var(--reedClaro);
    color: var(--blanco);
}
@media(min-width: 768px) {
    .navegacion a {
        display: inline;
    }
}
@media(min-width: 768px) {
    .navegacion {
        position: relative;
        top: unset;
        width: auto;
        background-color: unset;
        animation: unset;
    }
}
/*Ocultar las 3 rayitas en el modo PC*/
@media(min-width: 768px) {
    .menu {
        display: none;
    }
}

/*Menu*/
.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%;
}
.texto-encabezado {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;  
}

/*Para que el titulo del encabezado se quede en un costado*/
.divide{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2rem;
}

.rojo {
    color: var(--reedClaro);
    margin-bottom: 0;
    font-size: 3rem;
    margin-top: 0;
    text-align: center;
}
.rojo span{
    color: var(--blanco);
}

/*TITULOS*/
.h2{
    color: var(--blanco);
    margin: 0;
    padding: 0;
    padding-bottom: 1rem;
    text-align: center;
    font-size: 1.2rem;
}
.h2 span{
    color: var(--reedClaro);
}
.blanco {
    color: var(--blanco);
    margin-top: 0;
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0;
}

/*Parrafo del Encabezado*/
.impacto{
    width: 80%;
    height: auto;
    position: absolute;
    bottom: 5%;
    text-align: center;
    border-radius: 1rem;
    backdrop-filter: blur(30px);
    background-color: transparent;
    border: 1px solid white;

}
.impacto h3{
    font-size: 1.7rem;
    margin: 0;
    padding: 1rem;
    text-align: center;
    color: gainsboro;
}
@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: 6rem;
    }
    .h2{
        padding-bottom: 1rem; 
        font-size: 2rem;
    }
    .blanco {
        font-size: 5rem;
    }
    .uno{
        margin-bottom: 2rem;
    }
    .dos{
        margin-top: 4rem;
    }
    .impacto{
        right: 11%;
    }
    .impacto h3{
        font-size: 2.5rem;
    }
}

/*Atencion, Supervision, Agilizacion
Los textos y los iconos correspondientes*/
@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, 
FOTO, Todo lo que usted necesita */

.nosotros h2 {
    text-align: center;
    font-size: 4rem;
    color: var(--reedClaro);
}
@media(min-width: 768px) {
    .nosostros h2 {
        font-size: 5rem;
    }
}
/*Propiedades generales de 
sobre nosotros*/
.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');

    }
}
/*Parrafo de sobre nosotros,
propiedades generales*/
.texto-nosotros {
    padding: 1.5rem;
    grid-row: 2/3;
    background-color: var(--blanco);
}
@media(min-width: 768px) {
    .texto-nosotros {
        padding: 5rem;
    }
}
/*Titulo "Todo lo que usted necesita"*/
.texto-nosotros h3 {
    font-size: 4rem;
    color: var(--reedClaro);
    text-align: center;
}
/*Parrafo*/
.texto-nosotros p {
    font-size: 1.8rem;
    text-align: center;
}
@media(min-width: 768px) {
    .texto-nosotros p {
        text-align: left;
    }
}
/*Titulo de SOMOS CANADA*/
.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;
    }
}

/*PREGUNTAS, TEXTOS E ICONOS*/

.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;
    }
}
/*Alinear los iconos*/
.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%;
}
/*Propiedades de los iconos*/
.icon-service {
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--blanco);
}
/*Propiedades de las preguntas*/
.servicio h3 {
    font-size: 2.2rem;
    color: var(--reedOscuro);
    text-align: center;
}
/*Propiedades de las respuestas*/
.servicio p {
    font-size: 1.8rem;
    text-align: center;
}
@media(min-width: 768px) {
    .servico p {
        text-align: left;
    }
}
@media(min-width: 768px) {
    .serv{
        cursor: pointer;
    }
    .serv:hover{
        background-color: var(--blanco);
    }
    .icon-service:hover{
        color: var(--reedClaro);
    }
}

/*CONTACTENOS*/
.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);
    }
}

/*Todas las propiedades de la
Izquierda de Contactenos */
.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 {
        background-image: url('../img/foto1.jpg');
        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, 0.5);
    z-index: -1;
}
.informacion-contacto h3 {
    font-size: 3rem;
    text-align: center;
}
.informacion-contacto h3 {
    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;
    font-family: var(--titulos);
    border-radius: 1rem;
    box-shadow: 10px 10pSx 16px -6px rgba(0, 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);
}
@media(min-width: 768px) {
    .info-contacto a:hover {
        background-color: var(--blanco);
        color: var(--reedClaro);
    }
    .malanga{
        width: 100%;
        display: flex;
        gap: 1rem;
    }
    .dir:hover{
        cursor: pointer;
        background-color: var(--blanco);
    }
    .dir svg:hover{
        color:  var(--reedClaro);
    }
}
/*Todas las propiedades de la
Formulario de la derecha */
.formulario-contacto {
    padding: 5rem;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #000000;
}
.formulario-contacto a {
    text-decoration: none;
    text-align: center;
}
.input-contacto label {
    color: var(--blanco);
    font-family: var(--parrafos);
    display: block;
    margin: 1rem 0;
    font-weight: bold;
}
.input-contacto input {
    padding: 1.2rem 1rem;
    font-family: var(--parrafos);
}
.input-contacto input,
.input-contacto textarea {
    width: 100%;
    outline: none;
}
.send{
    margin-top: 1.5rem;
}
@media(min-width: 768px) {
    .input-contacto input,
    .input-contacto textarea {
        width: 100%;
        outline: none;
    }
}
.input-contacto textarea {
    resize: none;
}
.input-contacto input[type="submit"] {
    width: auto;
    padding: 1rem 3rem;
}

/*Pie de Pagina*/
.footer .logo h2,
.footer p {
    text-align: center;
}
/*Horario*/
#horario{
    color: #FEFCFB;
}
ul{
    color: #FEFCFB;
}
.info-contacto{
    margin-left: 2%;
    margin-right: 4%;
}
@media(max-width: 768px){
    .info-contacto{
        margin-left: 5%;
        margin-right: 8%;
    }
}

/*Iconos de las redes sociales*/
.social{
    display: grid;
    width: 25%;
    margin: 0 auto;
    justify-items: center;      /* centra horizontalmente */
    align-items: center;        /* centra verticalmente */
}
#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;
    }
}

/*Contenido de los botones modales*/

#boton_modal{
    border-radius: 5%;
    border: double 5px black;
}
#ul_boton{
    list-style-type: none;
}


/* Estilos para los modales */
.modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);    
  }
  
  .modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    width: 80%;
  }
  
  /* Estilos para la cruz de cierre */
  .close-btn {
    float: right;
    color: #aaa;
    font-size: 20px;
    cursor: pointer;
  }

 #ull{
    color: black;
 }  
 #ul_boton{
    margin-right: 15%;
    font-size: small;
 }

@media (max-width: 767px) {
  #foti{
    width: 100%;
}
}

ol{
    margin-left: 50px;
    color: black;
}
@media (max-width: 767px) {
    #oll{
      margin-left: 35px;
  }
}