/* General */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    color: white;
    background-color: #002b5c;
    /*171a44 colo azul oscuro */
}
/* Menú */
.menu {
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegura que quede encima de otros elementos */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu ul {
    display: flex;
    list-style: none;
    justify-content: center;
    background-color: #333;
    margin: 0;
    padding: 10px 0;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

.menu ul li a:hover {
    color: #0078d7;
}

/* Main */
main {
    padding: 20px;
}
h1 i {
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    color:white;     /* Color del ícono */
    font-size: 2em;   /* Tamaño del ícono */

}
.icono-empresa{
    margin-right: 10px; /* Espacio entre el ícono y el texto */
    color:#000000;     /* Color del ícono */
    font-size: 2em;   /* Tamaño del ícono */
}
.details-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las cajas se organicen en varias filas si es necesario */
    justify-content: center; /* Centra las cajas horizontalmente dentro del contenedor */
    align-items: center; /* Centra las cajas verticalmente (si es necesario) */
    gap: 150px; /* Espaciado uniforme entre las cajas */
    margin: 0 auto; /* Asegura que el contenedor esté centrado en la pantalla */
    padding: 20px;
    text-align: center;
    
}
.centrado {
    text-align: center;
}

.detail-item {
    display: flex;
    flex-direction: column; /* Elementos organizados en una columna */
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco de la caja */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombras para profundidad */
    text-align: center; /* Centra el texto dentro de la caja */
    box-sizing: border-box;

}
.pyme{
    display: flex;
    flex-direction: column; /* Elementos organizados en una columna */
    padding: 20px;
    background-color: #ffffff; /* Fondo blanco de la caja */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombras para profundidad */
    text-align: center; /* Centra el texto dentro de la caja */
    box-sizing: border-box;
}


.detail-item p {
   /* font-size: 2em; /* Tamaño estándar para párrafos */
    color: #000000; /* Cambia a un gris oscuro para el texto descriptivo */
}
.detail-item h3  {
    font-size: 3em; /* Tamaño estándar para párrafos */
    color: #000000; /* Cambia a un gris oscuro para el texto descriptivo */
}
.detail-item h4  {
    font-size: 1em; /* Tamaño estándar para párrafos */
    color: #000000; /* Cambia a un gris oscuro para el texto descriptivo */
}

.detail-item button, .pyme button{
    margin-top: 10px;
    background: #0078d7;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}

.detail-item button:hover, .pyme button:hover{
    background: #005bb5;
    transition: 0.3s;
}
.detail-item h1 {
    border-bottom: 1px solid #0078d7; /* Línea debajo del título */
    padding-bottom: 10px; /* Espacio entre el texto y la línea */
    margin-bottom: 15px; /* Espacio después de la línea */
    font-size: 1.5em; /* Tamaño más grande para el título */
    color: #000000; /* Cambia el color del título (ejemplo: naranja vibrante) */
}

.detail-item p:first-of-type {
    border-bottom: 1px solid #0078d7; /* era antes descontinuar párrafo */
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color:#002b5c;
    color: #ffffff;
    font-size: 14px;
    border-top: 1px solid #ccc;
      
      
}
/* Hero (encabezado llamativo) */
.hero {
    background: url('../img/prueba.jpg') no-repeat center center/cover;
  
    text-align: right; /* Alinea el texto a la izquierda */
    padding: 170px 20px;
    position: relative;
}

.hero h1 {
    font-size: 2.8em; /* Fuente más grande para que sea más llamativa */
    font-family: 'Poppins', sans-serif; /* Una fuente moderna y llamativa */
    margin-left: 40px; /* Desplaza las letras a la derecha */
    color: #000000; /* Un tono dorado para resaltar */
}

.hero p {
    font-size: 1.5em;
    font-family: 'Poppins', sans-serif;
    margin-left: 40px; /* Alineación con el título */
    color: #000000; /* Contraste con el fondo */
}

/* boton de contrata ahora */
.btn-plan {
    display: inline-block;
    
    text-align: center;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #0078d7;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
}
.btn-plan:hover {
    background-color: #007BFF;
    color: white;
    transition: 0.3s;
}
#television {
    text-align: center; /* Centra el contenido de la sección */
    padding: 40px 20px;
   /* background-color: #f4f4f4; /* Fondo de la sección (ajustable) */
}
.contact-form {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 20px auto; /* Centra el formulario */
    padding: 20px;
    background-color: #f9f9f9; /* Fondo claro */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombras suaves */
}

.contact-form input,
.contact-form textarea {
    margin-bottom: 15px; /* Espacio entre campos */
    padding: 10px;
    border: 1px solid #ccc; /* Bordes simples */
    border-radius: 5px;
    font-size: 16px;
}

.contact-form button {
    background-color: #0078d7;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.contact-form button:hover {
    background-color: #00e676; /* Cambio de color al pasar el cursor */
}

#empresas-pymes {
    background-color: #ffffff; /* Fondo blanco para un diseño profesional */
    padding: 40px 20px;
    margin-top: 30px; /* Separación adicional de la sección anterior */
    /*border-top: 5px solid #0078d7; /* Línea superior para delimitar la sección */
}

#empresas-pymes h1 {
    font-size: 2em;
    color: #000000; /* Azul corporativo */
}

#empresas-pymes p {
    color: #333333; /* Gris oscuro */
}
@media (max-width: 768px) {
    .details-container {
        flex-direction: column;
        gap: 20px;
    }

    .hero {
        text-align: center;
        padding: 100px 20px;
    }

    .hero h1,
    .hero p,
    .hero .btn-hero {
        margin-left: 0;
    }
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #aaa;
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #0078d7;
    box-shadow: 0 0 5px rgba(0,120,215,0.5);
}

/* Otras reglas de estilo... */

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .details-container {
        flex-direction: column;
        gap: 20px;
        padding: 10px;
    }

    .detail-item,
    .pyme {
        width: 100%;
        box-sizing: border-box;
    }

    .menu ul {
        flex-direction: column;
        padding: 0;
    }

    .menu ul li {
        margin: 10px 0;
    }

    .hero {
        padding: 80px 10px;
        background-position: center;
        background-size: cover;
    }

    .hero h1 {
        font-size: 2em;
    }

    .hero p {
        font-size: 1.2em;
    }

  

    .contact-form {
        width: 95%;
        padding: 15px;
    }

    footer {
        font-size: 12px;
    }
}

/* Asegúrate de agregar las reglas de imagen para evitar desbordamientos */
img {
    max-width: 100%;
    height: auto;
}
/* Menú */
.menu {
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    width: 100%;
}

/* Menú en pantallas grandes */
.menu ul {
    display: flex;
    list-style: none;
    justify-content: center;
    background-color: #333;
    margin: 0;
    padding: 10px 0;
    width: 100%;
    
}

.menu ul li a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
}

.menu ul li a:hover {
    color: #0078d7;
}



/* Muestra el menú cuando se active */
.menu ul.active {
    display: flex;
}

/* Botón de menú hamburguesa */
.menu-button {
    display: none; /* Inicialmente oculto */
    font-size: 30px;
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 15px;
    right: 15px;
}

/* Responsividad - Mostrar el botón de menú en pantallas pequeñas */
@media (max-width: 768px) {
    .menu ul {
        display: none; /* Menu oculto por defecto en pantallas pequenias */
    }
    .menu-button {
        display: block; /* Muestra el botón hamburguesa */
    }

    .menu ul li {
        margin: 10px 0;
        width: 100%;  /* Los elementos ocupan todo el ancho */
        text-align: center;
    }

    .menu ul li a {
        font-size: 1.5em;
        padding: 10px 15px;
    }
}.menu {
  background-color: #333;
  color: white;
  width: 100%;
}

.menu-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
}

.menu-items {
  display: flex;
  list-style: none;
  gap: 20px;
  margin: 0;
  padding: 0;
}

.menu-items li a {
  color: white;
  text-decoration: none;
  font-weight: bold;
}

.menu-toggle {
  display: none;
  font-size: 26px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

/* Responsive styles */
@media (max-width: 768px) {
  .menu-items {
    display: none;
    flex-direction: column;
    background-color: #333;
    width: 100%;
    text-align: center;
    position: absolute;
    top: 60px;
    left: 0;
    z-index: 1000;
  }

  .menu-items.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .menu-container {
    flex-direction: row;
    position: relative;
  }
}
.menu {
    background-color: #333;
    color: white;
    width: 100%;
  }
  
  .menu-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: relative;
  }
  
  .logo {
    font-size: 20px;
    font-weight: bold;
  }
  
  .menu-items {
    display: flex;
    list-style: none;
    gap: 20px;
    margin: 0;
    padding: 0;
  }
  
  .menu-items li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
  
  .menu-toggle {
    display: none;
    font-size: 26px;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .menu-items {
      display: none;
      flex-direction: column;
      background-color: #333;
      position: absolute;
      top: 60px;
      left: 0;
      width: 100%;
      padding: 10px 0;
    }
  
    .menu-items.show {
      display: flex;
    }
  
    .menu-toggle {
      display: block;
    }
  }
  .menu-items.show {
    display: flex !important;
    flex-direction: column;
  }