/* Estilos para pozadent */

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


* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 body, html {
      height: 100%;
      font-family: Arial, sans-serif;
    }

.contenedor {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
.arriba {
      height: 50px; /* Fija la altura */
      background-color: var(--ColorSuperior); /* Puedes cambiar el color */
      color: white;
      text-align: center;
      line-height: 50px;
	  position: relative; /* Necesario para el pseudo-elemento */
	  display: flex; /* Usamos Flexbox para alinear los elementos internos */
    /*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 */
    }
	

	    /* Utilizamos una imagen SVG para crear el zigzag */
    .arriba::after {
      content: '';
      position: absolute;
      bottom: -10px; /* Posición del zigzag */
      left: 0;
      width: 100%;
      height: 20px;
      background: url('../img/Fondozigzag.png') no-repeat center top;
      background-size: 100% 100%;
    }
	
	   /* Utilizamos una imagen SVG para crear el zigzag */
    .abajo::after {
      content: '';
      position: absolute;
      bottom: 40px; /* Posición del zigzag */
      left: 0;
      width: 100%;
      height: 20px;
      background: url('../img/Fondozigzag.png') no-repeat center top;
      background-size: 100% 100%;
	  transform: rotate(180deg);
    }

    /* El div inferior también tiene un ancho fijo */
    .abajo {
      height: 50px; /* Fija la altura */
      background-color: var(--ColorInferior); /* Puedes cambiar el color */
      text-align: center;
      line-height: 50px;  
    }

    /* El div central ocupa el espacio restante */
    .central {
      flex-grow: 1;
      background-color: var(--ColorFondo); /* Puedes cambiar el color */
      color: white;
      text-align: center;
      display: flex;
	  flex-direction: column;
      justify-content: center;
      align-items: center;
    }
.logo-container {
    text-align: center;
}
.Logo
{
		 width: 90%;  /* 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 derecho */
			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 */
}
.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: 20px 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 */
}

.TextoSomos
{
	background-color: var(--ColorSuperior);
    color: var(--ColorFondo);
    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 */
    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: 1em; /* Título grande */
}

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

.Linea {

	display: flex; /* Usamos Flexbox para alinear los elementos internos */
    /*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 */
    }


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: -250px;  /* Inicialmente, el menú está oculto */
            width: 250px;
            background-color: var(--ColorSuperior);
            transition: right 0.3s ease; /* Animación para el deslizamiento */
            z-index: 999;
            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 */
        }
		
@media only screen and (max-width: 900px)
 {
	.Logo
{
		 width: 90%;  /* Define el ancho */
         height: auto;  /* El alto se ajusta automáticamente para mantener la proporción */
} 
 }