/* Estilos para pozadent */

:root 
{
  --ColorSuperior:#14a6b0;
  --ColorInferior:#14a6b0;
  --ColorOscuro:#1598A1;
  --ColorClaro:#CEECED;
  --ColorFondo:#ffffff;
}


* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 body, html {
      height: 100%;
    }

.contenedor {
    display: flex;
    flex-direction: column;
    height: 100%;
	position: relative;  /* Hace que los elementos hijos se posicionen en relación a este contenedor */
	overflow-y: auto; /* Habilita el scroll cuando el contenido sea mayor */
    }
.arriba, .abajo
{
	height: 50px; /* Fija la altura */
	background-color: var(--ColorSuperior); /* Puedes cambiar el color */
	color: white;
	text-align: center;
	line-height: 50px; /* Centra el texto verticalmente */
	position: fixed; /* Fija la zona arriba */
	width: 100%;
	z-index: 1000;
}
.arriba
{
    top: 0;
    left: 0;
    right: 0;
}
.abajo
{
    bottom: 0;
    left: 0;
    right: 0;
}
	    /* Utilizamos una imagen SVG para crear el zigzag */
/*.arriba::after, .abajo::after
{
      content: '';
      position: absolute;
      width: 100%;
      height: 20px;
      background: url('../img/Fondozigzag.png') no-repeat center top;
      background-size: 100% 20px;
}
	
.arriba::after
{
	bottom: -10px;
    left: 0;
}*/
	   /* Utilizamos una imagen SVG para crear el zigzag */
.abajo::after
{
	top: 0; /* Posición del zigzag */
	left: 0;
	transform: rotate(180deg); /* Invierte el zigzag para que se vea hacia arriba en la parte inferior */
}

    

    /* El div central ocupa el espacio restante */
.central
{
	  background-color: var(--ColorFondo, #ffffff); /* Fondo de la zona central */
	  margin-top: 70px;  /* Deja espacio para la zona superior fija */
	  margin-bottom: 50px;  /* Deja espacio para la zona inferior fija */
	  padding: 0px 0px; /* Padding lateral */
	  display: flex;
	  flex-direction: column;
	  justify-content: center;
      align-items: center;
	  height: 100%;  /* Asegura que la zona central ocupe todo el espacio disponible */
}	

.logo-container {
    text-align: center;
}
.Logo
{
		 width: 400px;  /* Define el ancho */
         height: auto;  /* El alto se ajusta automáticamente para mantener la proporción */
}
.Logoicono
{
		 width: 40px;  /* Define el ancho */
         height: auto;  /* El alto se ajusta automáticamente para mantener la proporción */
		 border: none;
			padding: 5px;
			position: fixed;
			top: 10px;
			left: 10px; /* Lo posiciona en el borde izdo */
			z-index: 1200;
}
.EnlaceContacto
{
	display: flex;
	align-items: center;
	text-decoration: none;
	padding:20px;
}
.EnlaceNav
{
	text-decoration: none;
	color: var(--ColorFondo);
}
.ImgContacto
{
		 width: 80px;  /* Define el ancho */
         height: auto;  /* El alto se ajusta automáticamente para mantener la proporción */
}

.ImgContacto2 {
    width: 60%;  /* Ajustable según el diseño */
    height: auto;
}

.TextoCentral
{
	background-color: var(--ColorClaro);	
    color: #333333; /* Color del texto (gris oscuro) */
    font-family: Arial, sans-serif; /* Fuente sin serifas */
    padding: 20px; /* Espaciado interno */
	/*margin-top:40px;
	margin-bottom:20px;*/
    margin: 10px auto; /* Margen superior e inferior de 20px, centrado */
    max-width: 600px; /* Ancho máximo de 600px */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil alrededor */
    text-align: center; /* Alineación centrada del texto */
	font-size: 1.6em; /* Título grande */
}

.TxtNavCentral
{
	 font-family: Arial, sans-serif; /* Fuente sin serifas */
	 font-size: 1em; /* Normal */
}

.TextoCuadro
{
	background-color: var(--ColorFondo);
    color: #333333; /* Color del texto (gris oscuro) */
    font-family: Arial, sans-serif; /* Fuente sin serifas */
    padding: 20px; /* Espaciado interno */
    /*margin: 20px auto;  Margen superior e inferior de 20px, centrado */
    max-width: 600px;  /*Ancho máximo de 600px */
	height: auto; /* Asigna una altura mínima para ver si es visible */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil alrededor */
    text-align: center; /* Alineación centrada del texto */
	font-size: 1.2em; /* Título grande */
}


.TextoCuadro p {
      margin-bottom: 10px;
    }

.TextoPie
{
    text-align: center; /* Alineación centrada del texto */
	font-size: 0.6em; /* Título grande */
	color: var(--ColorOscuro);
}
.Columna-Contacto {

	display: flex; /* Usamos Flexbox para alinear los elementos internos */
	flex-direction: column;
    /*justify-content: space-around;  Distribuye los elementos con espacio alrededor */
	justify-content: space-between; /* Distribuye los elementos con espacio entre ellos */
    align-items: center; /* Centra los elementos verticalmente dentro del contenedor */
	padding: 0 20px; /* Espacio a los lados para que no toquen los bordes de la página */
    }
.Columna-Contacto a
{
	background-color: var(--ColorFondo);
	color: var(--ColorSuperior);
}	

.Linea-Contacto {
    display: flex;
    justify-content: center;   /* Centra el grupo de íconos */
    align-items: center;
    gap: 40px;                 /* Espacio entre los íconos */
    
    max-width: 600px;
    margin: 0 auto;
    padding: 10px 0;

    border-top: 3px solid;
    border-image: linear-gradient(to right, transparent, var(--ColorOscuro), transparent) 1 0 0 0;
}
.Linea-Contacto a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
}
img {
    max-width: 60%;
    height: auto;
}


/* --------------------------------------------------------- Menu Flotante -------------------------------------------------------*/

        /* Estilos del botón (ícono de hamburguesa) */
        .menu-icon {
            font-size: 30px;
            cursor: pointer;
            background-color: transparent;
            border: none;
            padding: 5px;
            position: fixed;
            top: 0px;
            right: 10px; /* Lo posiciona en el borde derecho */
            z-index: 1200;
			color: var(--ColorFondo);
        }

        /* Estilos del menú */
        .menu {
            list-style: none;
            padding: 0;
            margin: 0;
            position: fixed;
            top: 40px;
            right: -150px;  /* Inicialmente, el menú está oculto */
            width: 150px;
            background-color: var(--ColorSuperior);
            transition: right 0.3s ease; /* Animación para el deslizamiento */
            z-index: 1000;
            box-sizing: border-box;
        }

        .menu li {
            border-bottom: 1px solid #444;
        }

        .menu a {
            display: block;
            padding: 15px;
            color: white;
            text-decoration: none;
            background-color: var(--ColorSuperior);
            border: 1px solid var(--ColorFondo);
        }

        /* Mostrar el menú cuando tenga la clase 'active' */
        .menu.active {
            right: 0; /* Mover el menú hacia la izquierda */
        }

        /* Estilos para los enlaces al pasar el mouse */
        .menu a:hover {
            background-color: var(--ColorFondo);
			color: var(--ColorSuperior);
        }

        /* Estilos para que el menú se ajuste al alto necesario */
        .menu li {
            height: auto;  /* Ajuste automático de altura */
        }