/*****INICIO CSS CUERPO CABLEADO*****/

/* Color de fondo Sección 1 UTP */
#utp {
    background-color: rgba(230, 230, 230, 1);                  /* Puedes ajustar este color */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
}

/* Color de fondo Sección 2 Fibra Óptica */
#fo {
    background-color: rgba(230, 230, 230, 1);                 /* Puedes ajustar este color */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
}

.container-v {
  display: flex;
  width: 95%;
  margin: 0 auto;                                              /* Esto centra horizontalmente */
  border-radius: 24px;
  margin-top: 10px;
  margin-bottom: 5px;
}

.container-fo {
  display: flex;
  flex-direction: row-reverse;                                 /* ← Esto invierte el orden */
  width: 95%;
  margin: 0 auto;                                              /* Esto centra horizontalmente */
  border-radius: 24px;
  margin-top: 10px;
  margin-bottom: 5px;
}


/* Estilo básico para el contenido dentro de las secciones para una mejor visibilidad */
.content-section-fo h2 {
    font-family: 'Nunito Sans', sans-serif;                 /* Fuente del slider */
    color: #004e89;                                         /* Color del encabezado */
    margin-bottom: 5px;
    text-align: center;
}

.section-content-wrapper-fo {
    max-width: 1000px;                                       /* Ajusta el ancho máximo del contenido para centrarlo */
    margin: 0 auto;
    padding: 5px 0;
}

/*utp panel*/
.left-panel {
  width: 33%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-shadow: 0 0 10px rgba(46, 111, 64, 1);
  border-radius: 24px;
}

.left-panel img {
  width: 90%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.left-panel img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}


/*fibra izq-panel*/
.izq-panel {
  width: 33%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  box-shadow: 0 0 10px rgba(46, 111, 64, 1);
  border-radius: 24px;
}

.izq-panel img {
  width: 83%;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 15px;
  box-shadow: 0 0 10px rgba(0,0,0,0.6);
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}

.izq-panel img:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
}


/* separador de utp */
.separator {
  width: 2px;
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: rgba(85, 49, 107, 0.5);                        /* azul */
  border-radius: 10px;                                             /* bordes redondeados */
}

/* panel derecho de utp-texto */
.right-panel {
  width: 67%;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(85, 49, 107, 1);
  border-radius: 24px;
  display: flex;
  flex-direction: column;                                    /* asegura disposición vertical */
  align-items: flex-start;                                   /* alinea los textos a la izquierda */
  gap: 20px;                                                 /* espacio entre bloques */
}

/*fibra der-panel texto*/
.der-panel {
  width: 67%;
  padding: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 10px rgba(85, 49, 107, 1);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

/* Estilo para títulos en azul + línea amarilla */
.titulo {
  color: #004e89;
  font-size: 1.2em;
  margin-bottom: 10px;                                      /* Aumenté el margen para separar la línea del texto */
  position: relative;                                       /* Necesario para el pseudo-elemento */
  display: inline-block;                                    /* Limita el ancho del título al texto */
}

.titulo::after {
  content: "";
  display: block;
  width: 33%;                                               /* Ancho de la línea (33% del título) */
  height: 3px;                                              /* Grosor de la línea */
  background-color: #FFD700;                                /* Amarillo (cambia el color si lo prefieres) */
  margin: 5px auto 0;                                       /* Centra la línea y añade espacio arriba */
}

/* Sangría y texto justificado para descripción */
.descripcion {
  text-indent: -20px;                                           /* Esto hará que la primera línea sobresalga a la izquierda */
  padding-left: 20px;                                           /* Esto empujará el resto del párrafo a la derecha */
  text-align: justify;
  color: #333;
  line-height: 1.6;
}

/* Estilo para lista (quita puntos y mejora separación) */
.info-list {
  list-style-type: none;                                    /* Descomentado para quitar los puntos */
  padding: 0;
  margin: 0;
}

.info-list li {
  margin-bottom: 8px;
  margin-top: 5px;
}

.hanging {
  padding-left: 20px;                                                     /* Espacio desde el borde */
  text-indent: -10px;                                                     /* Sangría negativa solo a la primera línea */
  text-align: justify;
  line-height: 1.6;
  margin-bottom: 5px;
  padding-right: 5px;
}

.hanging .blue-text {
    color: #004e89;                          /* Color azul de letra */
}

.hanging .red-text {
    color: #FF0000;                          /* Color red de letra */
}

.hanging .orange-text {
    color: #FF4500;                          /* Color naranja de letra */
}

.hanging .lila-text {
    color: #A349A4;                          /* Color lila de letra */
}

.hanging .verde-text {
    color: #2E6F40;                          /* Color verde de letra */
}

.hanging .amarillo-text {
    color: #FFD700;                          /* Color amarillo de letra */
}