/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* --------------------   ESTILOS GLOBALES    ----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

:root {/* LLAMADAS DE LA WEB */
/* Paleta de colores de esta web */
    --Lima: #b5c95d;
    --LimaSuave: #f1f5d7;;
    --Azul: #0072bf;;
    --secundario: #486578;
    --blanco: #FFF;
    --negro: #000;
/* Tipografias de esta web */
    --fuenteTitulos: "PT Sans", sans-serif;
    --fuenteParrafos: "Open Sans", sans-serif;
}


body {/*DECORACIÓN BASE*/
    background-color: white;/*color de fondo*/
    font-family: var(--fuenteParrafos);/*tipografia de los textos de base*/
    line-height: 1.5;/*gran interlineado de los textos en general*/
    }


/* COLOR DE LETRA Y FONDO PA CUANDO SE SEÑALE EL TEXTO*/
::-moz-selection {background: #b5c95d; color: #0072bf; text-shadow: none}
::selection {background: #b5c95d; color: #0072bf; text-shadow: none}


/*DECORACIÓN BÁSICA DE TEXTOS*/
h1, h2, h3, h4 {/*Decoracion Títulos*/
    font-family: var(--fuenteTitulos);
    color: var(--Azul);
    line-height: 1.2;/*pequeño interlineado en títulos (x si caen de renglon)*/
}

h1 {font-size: 4rem; /*40px*/}

h2 {font-size: 3.2rem;/*32px*/}

h3 {font-size: 2.4rem;/*24px*/}

p {/*Decoracion Párrafos*/
    font-family: var(--fuenteParrafos);
    font-size: 1.8rem;
    color: var(--Azul);
    }


/*CLASES PARA RECURRIR EL HTML*/
.contenedor {/*Contenedor de esta web*/
    max-width: 120rem;/*1.200px de ancho*/
    margin: 0 auto;/*centrada*/
    padding: 0 2rem; /*y con padding a los lados pal movil*/
    /*background-color: rgba(0, 111, 255, 0.4);*/
}

.contenedor-color {padding: 8rem 0}/*Si va un color al 100%, qe tenga pading*/

.top {margin-top: 4rem }/*Margen de arriba para poner en cada Section de la web*/

.titular {text-align: center; padding-bottom: 4rem}







/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ------------------------   CABECERA    --------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.cabecera a {color: var(--Lima); font-size: 1.8rem; font-weight: 500}
.cabecera a:hover {color: var(--Azul)}
.cabecera a.active {color: var(--Azul); font-weight: 600;}

.cabecera img {max-width: 33rem}


.contenido-header {padding: 2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
}

.navegacion-principal {display: flex; gap: 2rem;}

/*Responsive*/
@media (max-width: 950px) {
    .contenido-header {flex-direction: column; text-align: center;}
    .navegacion-principal {display: none}
}






/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* -----------------  Calculadora interactiva   --------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.calculadora {display: grid; grid-template-columns: 1fr 1fr; gap: 3rem}
@media (max-width: 950px) {.calculadora {grid-template-columns: 1fr}}

.calculo {background: var(--LimaSuave); border-radius: 10px; padding: 3rem}

.calculo h1 {font-size: 2.8rem;}
.calculadora h2 {font-size: 2rem; color: var(--secundario); font-weight: 400;}
.calculadora h3 {font-size: 2rem; color: var(--secundario); font-weight: 800;}
.resultado p {font-size: 1.8rem; color: var(--secundario); font-weight: 600;padding-left: 2px;}
.derecha {display: flex; align-items: baseline; margin-left: 10px;}
.datos h2, .totales h2 {font-weight: bold;}

.dato {display: grid; margin: 3rem 0;}
.dato label {margin-bottom: 0.7rem}
.dato input, .dato select {padding: 0.5rem}

.dato p {font-size: 1.3rem; color: gray; margin-top: 4px; font-style: italic}
.calculadora img {border: 2px solid gray}
.fotokw {width: 80%;}
.fototermico {width: 100%; margin-top: 6px;}

.calculo .dato:last-child {margin-bottom: 0}

.resultado {display: flex; justify-content: space-between; align-items: center;
margin: 2rem 0; border-bottom: 2px dotted #48657878}

@media (max-width: 500px) {/*RESPONSIVE*/
    .calculadora h3 {margin-top: 3.5px;}
    .calculo h1 {font-size: 2.6rem;}
    .calculadora h2 {font-size: 1.8rem}
    .calculadora h3 {font-size: 1.8rem}
    .calculadora p {font-size: 1.7rem}
    .dato p {font-size: 1.25rem}
}

.resultado.final {margin-bottom: 3rem;}
.totales div:nth-child(1) {border-top: 2px solid var(--secundario); padding-top: 2rem}
.caja-totales {display: grid; grid-template-columns: 20% 80%}

.decimal {font-size: 1.4rem;}


.letrapeqe {margin-top: 4.5rem}
.letrapeqe p {margin-top: 1rem; font-size: 1.6rem; text-align: justify; color: var(--secundario)}
.letrapeqe a {font-weight: bold; text-decoration: underline; color: var(--Lima)}
.letrapeqe a:hover {color: var(--Azul)}


.dato.uno {margin-top: 2rem;}







/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/
/* ----------------------   PIE DE PÁGINA    -----------------------*/
/* -----------------------------------------------------------------*/
/* -----------------------------------------------------------------*/

.pie {background-color: var(--Azul); padding: 3rem 0; margin-top: 8rem}
.pie p {color: var(--blanco); font-weight: 200; font-size: 1.7rem; text-align: center}
.pie a {color: var(--blanco); font-weight: 400; text-decoration: underline}
.pie a:hover {color: var(--Lima)}


/*----- Botón Flecha para subir arriba*/
.subir {position: fixed; bottom: 0; right: 0; z-index:100; margin: 10px;
    padding: 10px; padding-left: 9px; cursor: pointer;
    border-radius: 100px; background: var(--LimaSuave); display: none}

.subir:hover .flechas span {background: var(--Azul)}

.flechas {display: inline-block; width: 22px}

.flechas span {display: block; width: 20px; height: 3px; background: white; transition: all 0.4s ease}

.flechas span:nth-child(1) {transform: rotate(-45deg); position: absolute;
                        margin-top: -9px; margin-left: -5px;}

.flechas span:nth-child(2) {transform: rotate(45deg);
                        margin-top: -9px; margin-left: 8px}