.headBox {
    position: fixed;  /* Fija el menú en su posición */
    top: 0;  /* Coloca el menú en la parte superior de la página */
    left: 0; /* Alinea el menú al borde izquierdo de la página */
    width: 100%;  /* Ocupa todo el ancho de la pantalla */
    height: 80px;  /* Fija el alto del menú */
    background-color: #FFF;  /* Color de fondo (puedes ajustarlo) */
    color: white;  /* Color del texto */
    z-index: 1000;  /* Asegura que el menú esté por encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Añade una ligera sombra para dar profundidad */
    display: grid;
	grid-template-columns:  1fr  auto 1fr auto     30px;
    grid-template-areas: "  .    logo .   menuBox  menuIcon";
    place-items:center center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}
/*------------------------------------------------------------------------------- ICONO MENU */
.menuIcon {
    grid-area: menuIcon;
    display:none;
    grid-template-columns: 30px;
    grid-template-rows: 16px 10px 10px 10px 10px;
    grid-template-areas: 
      "." 
      "lineaMenu1" 
      "lineaMenu2" 
      "lineaMenu3" 
      ".";
  }
.linea1 {  grid-area: lineaMenu1; }
.linea2 {  grid-area: lineaMenu2; }
.linea3 {  grid-area: lineaMenu3; }
.linea1,.linea2,.linea3 {
    display:grid;
    width:100%;
    height:4px;
    background-color:#558F81;
    border-radius:2px;
}
/*---------------------------------------------------------------------------------- LOGO */
.logo {
    grid-area: logo;
    padding-top:5px;
}
.logo img {
    width: 240px;
}
/*---------------------------------------------------------------------------------- MENUBOX */
.menuBox {
    grid-area: menuBox;
    width:100%;
    height:80px;
}
.iconMenu {

}
nav ul {
    list-style-type: none;
}
nav ul li {
    display: inline-block;
    margin-right: 20px;
    position: relative;
    height:80px;
    padding-top:29px;
    
}
nav ul li a {
    text-decoration: none;
    font-size: 18px;
}
.menuOpc, .menuOpc:hover {
    width: 100%;
    height:80px;
    padding-left: 10px;
    padding-right: 10px;
    color:#558F81;
    font-family: Helvetica;
    place-items:center center;
    letter-spacing:3px;
    font-size:16px;
}
/*--------------------------------------------------------------------------------------- CAJAS FLOTANTES */
.menu-item:hover .links {
    display: block;
}
.links {
    display: none;
    position: absolute;
    text-decoration: none;
    top: 80px;
    width: 250px;
    padding: 10px;
    background-color: rgba(204, 255, 255, 0.9); 
    border-top: 4px solid green;
}
.links a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color:#558F81;
    font-family: Helvetica;
    place-items:center center;
    letter-spacing:1px;
    font-size:16px;
}

.links a:hover {
    text-decoration: none;
    font-weight:bold;
}
.menuIcon:hover .linksMovil {
    display:block;
}
.linksMovil {
    display: none;
    position: absolute;
    top: 55px;
    right:0;
    width: 200px;
    background-color: rgba(255, 255, 255, 0.9); 
    padding: 12px;
    border-top: 4px solid green;
}
.linksMovil a {
    text-decoration: none;
    display: block;
    color:#558F81;
    font-family: Helvetica;
    letter-spacing:2px;
    font-size:18px;
    place-items:end start;
}
.subLinks {
    padding-left:20px;
}
.subLinks a {
    text-decoration: none;
    display: block;
    color:#266;
    font-family: Helvetica;
    place-items:end start;
    letter-spacing:1px;
    line-height: 1.3;
    font-size:18px;
}
@media screen and (max-width:1015px) {
    .headBox {
        height: 55px;
        grid-template-columns:  10px  auto  1fr  30px      10px;
        grid-template-areas: "  .     logo  .    menuIcon  .";
    }
    .logo {
        padding-top:5;
    }
    .logo img {
        width: 180px;
    }
    .menuBox {
        display:none;
    }
    .menuIcon {
        display:grid;
    }
}

/*----------------------------------------------------------------------------------------------- VIDEO */
.tituloKat {
    display:grid;
    width:100%;
    height:80px;
    margin-top:80px;
    place-items: center center;
    font-size: 22px;
    letter-spacing:3px;
    word-spacing:8px;
    color:#558F81;
}
videoBox {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
video {
    max-width: 100%;
    max-height: 80vh;
}
@media screen and (max-width:1015px) {
    .tituloKat {
        height:60px;
        margin-top:60px;
        font-size: 17px;
        letter-spacing:3px;
        word-spacing:7px;
        color:#558F81;
    }
}
/*------------------------------------------------------------------------------------------------ FOOTER */
footer {
    width:100%;
    background-color:#616771;
}
.contactoFooter {
    display:grid;
    width:100%;
    background-color:#616771;
    grid-template-columns:  1fr  200px    100px  200px    1fr;
    grid-template-areas: "  .    column1  .      column2  .";
}
.column1 {  grid-area: column1;  }
.column2 {  grid-area: column2;  }
.column1,.column2 {
    color:#EEE;
    padding-top:20px;
}
.logoBN img {
    width: 200px;
}
.lineaFooter {
    border-bottom: 2px solid white;
    width:100%;
}
.textA {
    padding-top: 9px;
    padding-bottom: 3px;
    font-size: 15px;
    font-weight:bold;
}
.textB {
    padding-top: 9px;
    padding-bottom: 1px;
    font-size: 12px;
}
.textC {
    padding-top: 3px;
    padding-bottom: 1px;
    font-size: 12px;
}
@media screen and (max-width:1015px) {
    .contactoFooter {
        grid-template-columns:  1fr  200px    1fr;
        grid-template-areas: "  .    column1  ."
                             "  .    column2  .";
    }
    .textB {
        padding-top: 11px;
        padding-bottom: 1px;
        font-size: 15px;
    }
    .textC {
        padding-top: 3px;
        padding-bottom: 1px;
        font-size: 15px;
    }
}
/*------------------------------------------------------------------------------------ Servicios */
.serviciosFooter {
    display:grid;
    width:100%;
    background-color:#616771;
    grid-template-columns:  1fr  auto   100px  auto   100px  auto   100px  auto   1fr;
    grid-template-areas: "  .    serv1  .      serv2  .      serv3  .      serv4  .";
    padding-top:20px;
}
.serv1 {  grid-area: serv1;  }
.serv2 {  grid-area: serv2;  }
.serv3 {  grid-area: serv3;  }
.serv4 {  grid-area: serv4;  }
.serv1,.serv2,.serv3,.serv4 {
    color:#EEE;
    padding-top:5px;
    font-size: 13px;
}
.serv1:hover,.serv2:hover,.serv3:hover,.serv4:hover {
    color:#AFA;
    padding-top:5px;
    font-size: 13px;
}
.textD {
    color:#DDD; 
    font-size:12px;
    text-align:center;
}
.textE {
    color:#DDD; 
    font-size:11px;
    text-align:center;
}

@media screen and (max-width:900px) {
    .serviciosFooter {
        grid-template-columns:  1fr  auto   40px  auto   1fr;
        grid-template-areas: "  .    serv1  .      serv2  ."
                             "  .    serv3  .      serv4  .";
    }
    .serv1,.serv2,.serv3,.serv4 {
        font-size: 15px;
    }
    .serv1:hover,.serv2:hover,.serv3:hover,.serv4:hover {
        font-size: 15px;
    }
}
@media screen and (max-width:500px) {
    .serviciosFooter {
        grid-template-columns:  1fr  auto   1fr;
        grid-template-areas: "  .    serv1  ."
                             "  .    serv2  ."
                             "  .    serv3  ."
                             "  .    serv4  .";
    }
}
/*------------------------------------------------------------------------------------------------- IMAGENES */
.image-container {
    display:grid;
    width: 100%;
    height: auto;
    grid-template-columns:  1fr  850px   1fr;
    grid-template-areas: "  .    imageA   .";
    place-items:center;
    margin-top:50px;
}
.imageA {
    grid-area: imageA;
    width: 100%;
    height: auto;
}
@media screen and (max-width:850px) {
    .image-container {
        grid-template-columns:  100%;
        grid-template-areas: "  imageA";
        margin-top:30px;
    }
}
/*----------------------------------------------------------------------------------------------------------------- DIVISOR 1 */
.divisorABox {
    display:grid;
    width:100%;
    height:auto;
    grid-template-columns:  50%       50%;
    grid-template-areas: "  mensajeA  imagenA";
    background-color:#E2DFDF;
    align-items: center;
}
.imagenA {
    grid-area:imagenA;
    height:auto;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
}
.mensajeA {
    grid-area:mensajeA;
    padding-top:25px;
    padding-left:90px;
    padding-right:90px;
    color:#666;
    font-size:2.5vw;
    font-family:Helvetica;
    line-height:1.5;
}
.mensaje {
    color: #558f81;
    font-size:inherit;
    font-family:Helvetica;
}
.contactoCab {
    width:100%;
    height: 100px;
    background-color:#558F81;
    color:#CFF;
    font-size:30px;
    display:grid;
    place-items:center;
}
.contactoText {
    display:grid;
    width:100%;
    height:200px;
    grid-template-columns:  100px  1fr       50px  1fr       100px;
    grid-template-areas: "  .      columnaA  .     columnaB  .";
}
.columnaA { grid-area:columnaA; }
.columnaB { grid-area:columnaB; }
.textM {
    font-size:27px;
    color:#666;
}
.textN {
    font-size:16px;
    line-height: 1.4;
    color:#666;
}
@media screen and (max-width:980px) {
    .mensajeA {
        padding-top:17px;
        padding-left:85px;
        padding-right:85px;
        font-size:2.0vw;
    }
    .contactoCab {
        height: 90px;
        font-size:26px;
    }
}
@media screen and (max-width:700px) {
    .mensajeA {
        padding-top:10px;
        padding-left:70px;
        padding-right:70px;
    }
    .contactoCab {
        height: 80px;
        font-size:22px;
    }
}
@media screen and (max-width:580px) {
    .mensajeA {
        padding-top:5px;
        padding-left:50px;
        padding-right:50px;
        font-size:1.5vw;
    }
    .contactoCab {
        height: 75px;
        font-size:18px;
    }
}