/* ============================== estilo.css =================================NO CERRAR AQUÍ
PARTIENDO DE 'estilo20220627.1259.css'
ZTE Blade A6 LITE :720x1280px
    
        
        
AHORA CONSIGO QUE PINTE BIEN EL <header> y que NO PINTE EL <footer>
OjOOOOOOOOOOOOOOOOOOOOOOO: tienes que CORTAR lo de a continuacion de:
/*@media all and ( min-width: 700px ){{*
...HASTA EL FINAL
Y PEGARLO bajo:
@media all and ( orientation: landscape ){       
        
        
·He cambiado: (AL FINAL QUEDAN:) ·He cambiado:
@media . . .
·por:
@media all and ( orientation: portrait ) {
@media all and ( max-width: 524px ){
@media all and ( min-width: 525px ) and ( max-width: 1279px ){
@media all and ( orientation: landscape ){
@media all and (min-width: 1280px){
        
        
        
Cambios que PRETENDO YO, que afectan al <header> y al <footer> en orientación 'landscape':
·h1 de 'Peñalva Consulting' (<header>) ha de comenzar PEGADO AL LOGO.
·El <footer> que NO SE VEA        
SE APLICA EN '@media all and ( orientation: landscape ){'
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
DONDE:
@media all and ( min-width: 700px ){
ES LA CSS DE 'landscape'
        
        
          
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
      
        
        
        
        
        
·He cambiado: (en '@media all and ( orientation: landscape ){') ·He cambiado
        header h1{ 
                        padding-top:        2.6vh;
                        padding-bottom:     1.73vh;
        }
·por:
        header h1{ 
                        padding-top:        2.6vh;
                        padding-bottom:     1.73vh;
                        position:           absolute;
                        top:                0.35vh;
                        left:               16.73vw;
        }
·He cambiado: (en '@media all and ( orientation: landscape ){') ·He cambiado
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
        }
·por:
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
                        display:            block;
                        position:           absolute;
                        bottom:             0.07vh;
                        right:              46vw;
        }
·He cambiado: (en '@media all and ( orientation: landscape ){') ·He cambiado
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          1.5vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              100%;
                        position:           relative;
        }            
·por:
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          1.5vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              100%;
                        position:           relative;
                        display:            none;
        }            
        
        
        
==============================================================================CERRAR AQUÍ */
        /* -------------------------- GOOGLE - ICONOS y FUENTES ----------------------- */
        
        
        
        
/*Lo que era
        @import url('https://fonts.googleapis.com/icon?family=Material+Icons');
se ha convertido en:
--------------------------------------------------------------------------------------- */
/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(assets/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}
/* ------------------------------------------------------------------------------------- */
        
        
        
        
        
        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap');
        
        
        
        
        
        
        
        

        /* ----------------------------- RESET ----------------------------- */
        *{              margin:                0;
                        padding:               0;
         }
        :root{ 
                        --fondo:              rgb( 225,230,255 );
                        --fondoMeGusta:       rgb( 225,230,255 );
                        --fondoFuerte:        rgb(105,193,231);
                        --fondoClaro:         rgb(130,227,255);
                        --fondoSobre:         #FFA200;
                        --colorAlternativo:   white;
                        --colorBlanco:        white;
                        --colorMenuEnCuerpo:  #FFA200;
                        --letra:              black;
        }

        
        body{
                        font-family:         'Manrope',
                                             'Segoe UI',
                                             Tahoma,
                                             Geneva,
                                             Verdana,
                                             sans-serif; 
                        background-color:    var(--fondo);
                        width:               99vw;
        }
        




/* ============================== LAS @mediaQUERIES ============================NO CERRAR AQUÍ
PARTIENDO DE 'estilo20220626.1635.css'
    Contiene los estilos apropiados para visualizar en el móvil que, a su vez, estan ya
        incorporados en 'estilo.css', englobados en la @media all and (max-width: 767px) {}
        
·Lo que NO CAMBIA respecto al 'estilo.css' NO SE INCLUYE AQUI.        
        
@media all and ( min-width: 523px ) and ( max-width: 1279px ){
OjO:
min-width es 'como preguntar por MAYOR o IGUAL'
MAX-width es 'COMO PREGUNTAR POR menor O igual'        
        
        
        
·He cambiado ( y HE AÑADIDO) ·He cambiado:
@media all and (max-width: 320px) {
·por:
@media all and (orientation: portrait) {
@media all and ( max-width: 524px ){
@media all and ( min-width: 523px ) and ( max-width: 1279px ){
@media all and ( min-width: 1280px ) and ( max-width: 1279px ){
        
        
·He cambiado:
@media all and (min-width: 992px) {
·por:
@media all and ( min-width: 1600px ){
        
        
·He cambiado: (AL FINAL QUEDAN:) ·He cambiado:
@media . . .
·por:
@media all and ( orientation: portrait ) {
@media all and ( max-width: 524px ){
@media all and ( min-width: 523px ) and ( max-width: 1599px ){
@media all and ( min-width: 1280px ){
        
        
        
        
        
        
==============================================================================CERRAR AQUÍ */
        
        
        
@media all and (orientation: portrait) {
        
        
        
        
        header{         
                        display:            block;
                        height:             auto;
                        width:              95vw;
        }
        
        header img{
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              50%;
        }
        header h1{ 
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        header address{
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        header address a{
                        font-size:          3rem;
                        color:              var(--letra);
                        text-decoration:    none;
        }
        /* --------------------------- HEADER - MENU------------------------ */
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }

        header nav ul{
                        list-style-type:    none;
                        background-color:   var(--fondo);
        }
        header nav ul li{
                        display:            inline-block;
        }
        header nav a{  
                        text-decoration:    none;
                        text-transform:     uppercase;
                        color:              var(--letra); 
                        padding-left:       1.46vw;
                        padding-right:      1.46vw;
        }
        header nav li:hover{
                        background-color:   var(--fondoSobre);
        }
        
        
        
        
        
        
        
        
        
        
        
        
        




        /* =============================== AHORA EL FOOTER  ============================ */
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          6vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              95vw;
                        position:           relative;
        }            
        footer img:nth-of-type(1){
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              60%;
         }
        footer img:nth-of-type(2){
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              60%;
        }
        footer address{
                        color:              var(--letra);
                        text-decoration:    none;
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        footer address a{
                        color:              var(--letra);
                        text-decoration:    none;
        }
        .noSepares{
                        white-space:        nowrap;
        }
}
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
@media all and ( max-width: 524px ){
        
        
        
        
        header{         
                        display:            block;
                        height:             auto;
                        width:              95vw;
        }
        
        header img{
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              50%;
        }
        header h1{ 
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        header address{
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        header address a{
                        font-size:          3rem;
                        color:              var(--letra);
                        text-decoration:    none;
        }
        /* --------------------------- HEADER - MENU------------------------ */
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }

        header nav ul{
                        list-style-type:    none;
                        background-color:   var(--fondo);
        }
        header nav ul li{
                        display:            inline-block;
        }
        header nav a{  
                        text-decoration:    none;
                        text-transform:     uppercase;
                        color:              var(--letra); 
                        padding-left:       1.46vw;
                        padding-right:      1.46vw;
        }
        header nav li:hover{
                        background-color:   var(--fondoSobre);
        }
        
        
        
        
        
        
        
        
        
        
        
        
        




        /* =============================== AHORA EL FOOTER  ============================ */
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          6vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              95vw;
                        position:           relative;
        }            
        footer img:nth-of-type(1){
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              60%;
         }
        footer img:nth-of-type(2){
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        margin-left:        auto;
                        margin-right:       auto;
                        width:              60%;
        }
        footer address{
                        color:              var(--letra);
                        text-decoration:    none;
                        vertical-align:     top;
                        position:           center;
                        display:            block;
                        text-align:         center;
                        margin-left:        auto;
                        margin-right:       auto;
        }
        footer address a{
                        color:              var(--letra);
                        text-decoration:    none;
        }
        .noSepares{
                        white-space:        nowrap;
        }
}

        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


        
/**/
@media all and ( min-width: 525px ) and ( max-width: 1279px ){

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

        /* --------------------------- FLEX BOX ACTUANDO COMO DISPLAY:INLINE-BLOCK */
        /* ------------ Así es como conseguiré que se VEA ('display: block;') o se OCULTE ('display: none;')
/*
        main div {
            flex-basis: 200px;
            flex-grow: auto;
            flex-shrink: auto;
        }
*/
        header{         
                        text-align:         center;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        position:           fixed;
                        width:              100%;
                        height:             17vh;
                        overflow:           hidden; 
                        vertical-align:     middle;
                        z-index:            99;
                        opacity:            0.9;
         }

        /* ------------------------ HEADER LOGOTIPO, TELEFONO Y NOMBRE ---------------- */
        header h1{ 
                        padding-top:        2.6vh;
                        padding-bottom:     1.73vh;
        }
        header img{
                        display:            block;
                        position:           absolute;
                        top:                0.35vh;
                        left:               0.73vw;
                        width:              15%;
        }
        header address{
                        display:            block;
                        position:           absolute;
                        bottom:             0.87vh;
                        right:              0.73vw;
        }
        header address a{
                        font-size:          3rem;
                        color:              var(--letra);
                        text-decoration:    none;
        }


        /* --------------------------- HEADER - MENU------------------------ */
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
        }

        header nav ul{
                        list-style-type:    none;
                        background-color:   var(--fondo);
        }
        header nav ul li{
                        display:            inline-block;
        }
        header nav a{  
                        text-decoration:    none;
                        text-transform:     uppercase;
                        color:              var(--letra); 
                        padding-left:       1.46vw;
                        padding-right:      1.46vw;
        }
        header nav li:hover{
                        background-color:   var(--fondoSobre);
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* =============================== AHORA EL FOOTER  ============================ */
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          1.5vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              100%;
                        position:           relative;
        }            
        footer img:nth-of-type(1){
                        vertical-align:     top;
                        display:            block;
                        margin-left:        0.73vw;
                        margin-top:         1.73vh;
                        padding-right:      7vw;
                        width:              15%;
                        float:              left;
         }
        footer img:nth-of-type(2){
                        vertical-align:     top;
                        display:            block;
                        margin-right:       0.73vw;
                        margin-top:         1.73vh;
                        height:             21vh;
                        float: right;
        }
        footer address{
                        color:              var(--letra);
                        text-decoration:    none;
                        vertical-align:     top;
                        float:              left;
        }
        footer address a{
                        color:              var(--letra);
                        text-decoration:    none;
        }
        .noSepares{
                        white-space:        nowrap;
        }
}
/**/
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


        
/**/
@media all and ( orientation: landscape ){

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

        /* --------------------------- FLEX BOX ACTUANDO COMO DISPLAY:INLINE-BLOCK */
        /* ------------ Así es como conseguiré que se VEA ('display: block;') o se OCULTE ('display: none;')
/*
        main div {
            flex-basis: 200px;
            flex-grow: auto;
            flex-shrink: auto;
        }
*/
        header{         
                        text-align:         center;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        position:           fixed;
                        width:              100%;
                        height:             17vh;
                        overflow:           hidden; 
                        vertical-align:     middle;
                        z-index:            99;
                        opacity:            0.9;
         }

        /* ------------------------ HEADER LOGOTIPO, TELEFONO Y NOMBRE ---------------- */
        header h1{ 
                        padding-top:        2.6vh;
                        padding-bottom:     1.73vh;
                        position:           absolute;
                        top:                0.35vh;
                        left:               16.73vw;
        }
        header img{
                        display:            block;
                        position:           absolute;
                        top:                0.35vh;
                        left:               0.73vw;
                        width:              15%;
        }
        header address{
                        display:            block;
                        position:           absolute;
                        bottom:             0.87vh;
                        right:              0.73vw;
        }
        header address a{
                        font-size:          3rem;
                        color:              var(--letra);
                        text-decoration:    none;
        }


        /* --------------------------- HEADER - MENU------------------------ */
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
                        display:            block;
                        position:           absolute;
                        bottom:             0.07vh;
                        right:              46vw;
        }

        header nav ul{
                        list-style-type:    none;
                        background-color:   var(--fondo);
        }
        header nav ul li{
                        display:            inline-block;
        }
        header nav a{  
                        text-decoration:    none;
                        text-transform:     uppercase;
                        color:              var(--letra); 
                        padding-left:       1.46vw;
                        padding-right:      1.46vw;
        }
        header nav li:hover{
                        background-color:   var(--fondoSobre);
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* =============================== AHORA EL FOOTER  ============================ */
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          1.5vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              100%;
                        position:           relative;
                        display:            none;
        }            
        footer img:nth-of-type(1){
                        vertical-align:     top;
                        display:            block;
                        margin-left:        0.73vw;
                        margin-top:         1.73vh;
                        padding-right:      7vw;
                        width:              15%;
                        float:              left;
         }
        footer img:nth-of-type(2){
                        vertical-align:     top;
                        display:            block;
                        margin-right:       0.73vw;
                        margin-top:         1.73vh;
                        height:             21vh;
                        float: right;
        }
        footer address{
                        color:              var(--letra);
                        text-decoration:    none;
                        vertical-align:     top;
                        float:              left;
        }
        footer address a{
                        color:              var(--letra);
                        text-decoration:    none;
        }
        .noSepares{
                        white-space:        nowrap;
        }
}
/**/
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        


        
/**/
@media all and (min-width: 1280px){

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

        /* --------------------------- FLEX BOX ACTUANDO COMO DISPLAY:INLINE-BLOCK */
        /* ------------ Así es como conseguiré que se VEA ('display: block;') o se OCULTE ('display: none;')
/*
        main div {
            flex-basis: 200px;
            flex-grow: auto;
            flex-shrink: auto;
        }
*/
        header{         
                        text-align:         center;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        position:           fixed;
                        width:              100%;
                        height:             17vh;
                        overflow:           hidden; 
                        vertical-align:     middle;
                        z-index:            99;
                        opacity:            0.9;
         }

        /* ------------------------ HEADER LOGOTIPO, TELEFONO Y NOMBRE ---------------- */
        header h1{ 
                        padding-top:        2.6vh;
                        padding-bottom:     1.73vh;
        }
        header img{
                        display:            block;
                        position:           absolute;
                        top:                0.35vh;
                        left:               0.73vw;
                        width:              15%;
        }
        header address{
                        display:            block;
                        position:           absolute;
                        bottom:             0.87vh;
                        right:              0.73vw;
        }
        header address a{
                        font-size:          3rem;
                        color:              var(--letra);
                        text-decoration:    none;
        }


        /* --------------------------- HEADER - MENU------------------------ */
        header nav{
                        line-height:        5.19vh;
                        height:             5.19vh;
        }

        header nav ul{
                        list-style-type:    none;
                        background-color:   var(--fondo);
        }
        header nav ul li{
                        display:            inline-block;
        }
        header nav a{  
                        text-decoration:    none;
                        text-transform:     uppercase;
                        color:              var(--letra); 
                        padding-left:       1.46vw;
                        padding-right:      1.46vw;
        }
        header nav li:hover{
                        background-color:   var(--fondoSobre);
        }
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        /* =============================== AHORA EL FOOTER  ============================ */
        footer{
                        text-align:         left;
                        background-color:   var(--fondo);
                        color:              var(--letra);
                        vertical-align:     top; 
                        font-size:          1.5vw;
                        overflow:           auto; 
                        padding:            0px; 
                        width:              100%;
                        position:           relative;
                        display:            block;
        }            
        footer img:nth-of-type(1){
                        vertical-align:     top;
                        display:            block;
                        margin-left:        0.73vw;
                        margin-top:         1.73vh;
                        padding-right:      7vw;
                        width:              15%;
                        float:              left;
         }
        footer img:nth-of-type(2){
                        vertical-align:     top;
                        display:            block;
                        margin-right:       0.73vw;
                        margin-top:         1.73vh;
                        height:             21vh;
                        float: right;
        }
        footer address{
                        color:              var(--letra);
                        text-decoration:    none;
                        vertical-align:     top;
                        float:              left;
        }
        footer address a{
                        color:              var(--letra);
                        text-decoration:    none;
        }
        .noSepares{
                        white-space:        nowrap;
        }
}
/**/