reestructuración total. V2.1

styles.css

@@ -47,6 +47,260 @@ header nav ul li a:hover {
   text-align: center;
 }
 
+.evento {
+  background-color: #fafafa;
+  border-left: 4px solid #A10F2B;
+  padding: 1rem;
+  margin-top: 1.5rem;
+  border-radius: 5px;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05);
+}
+
+.evento h3 {
+  color: #A10F2B;
+  margin-bottom: 0.5rem;
+}
+
+.evento p {
+  margin: 0.3rem 0;
+}
+
+/* Estilo para la sección "ÚNETE" */
+#unete {
+  padding: 2rem 3rem;
+  background-color: #f9f9f9;
+  color: #333;
+}
+
+#unete h2 {
+  color: #A10F2B;
+  font-size: 2rem;
+  margin-bottom: 1rem;
+}
+
+#unete p {
+  font-size: 1rem;
+  line-height: 1.6;
+  margin-bottom: 1.5rem;
+}
+
+.form-container {
+  background-color: #fff;
+  border: 1px solid #ccc;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+}
+
+.form-container h3 {
+  color: #A10F2B;
+  font-size: 1.6rem;
+  margin-bottom: 1rem;
+}
+
+.form-wrapper {
+  margin-top: 1.5rem;
+  position: relative;
+  height: 500px;
+  overflow: hidden;
+}
+
+iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+  border-radius: 8px;
+}
+
+/* Estilo para la sección de contacto */
+#contacto {
+  padding: 2rem 3rem;
+  background-color: #fff;
+  color: #333;
+  margin-top: 3rem;
+}
+
+#contacto h2 {
+  color: #A10F2B;
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+}
+
+#contacto p {
+  font-size: 1rem;
+  line-height: 1.6;
+}
+
+
+
+
+/* Estilo para el botón de contacto */
+
+.button {
+  display: inline-block; /* Asegúrate de que el botón sea un bloque en línea */
+  padding: 12px 25px;
+  background-color: #0056b3;
+  color: #fff;
+  text-align: center;
+  text-decoration: none;
+  border-radius: 5px;
+  font-weight: bold;
+  margin-top: 20px;
+  margin-left: auto; /* Esto coloca el botón a la izquierda */
+  margin-right: auto; /* Y lo alinea a la derecha, efectivamente centrando */
+  transition: background-color 0.3s ease;
+}
+
+.button:hover {
+  background-color: #003d7a;
+}
+
+.cta {
+  background-color: #f7f7f7;
+  padding: 30px;
+  text-align: center;
+}
+
+.cta-button {
+  background-color: #e60000;
+}
+
+
+
+/* Contenedor de las propuestas */
+.proposal-container {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: 20px;
+  padding: 20px;
+}
+
+.proposal {
+  background-color: #f4f4f4;
+  padding: 20px;
+  border-radius: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+.proposal h2 {
+  color: #333;
+  font-size: 1.5rem;
+  margin-top: 10px;
+}
+
+.proposal i {
+  font-size: 3rem;
+  color: #0056b3;
+}
+
+.proposal p {
+  color: #555;
+  font-size: 1rem;
+  margin-top: 15px;
+}
+
+/* Adaptación para pantallas pequeñas */
+@media (max-width: 768px) {
+  .proposal-container {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+@media (max-width: 480px) {
+  .proposal-container {
+    grid-template-columns: 1fr;
+  }
+}
+
+
+/* General layout of the Ideology section */
+#ideologia {
+  background-color: #f4f1ec; /* Tono pergamino claro */
+  padding: 3rem 2rem;
+  color: #2e2e2e;
+  border-top: 5px solid #8b0000;
+  border-bottom: 5px solid #8b0000;
+}
+
+/* Título principal */
+#ideologia h2 {
+  text-align: center;
+  font-size: 3rem;
+  color: #4b0000;
+  margin-bottom: 2rem;
+  border-bottom: 2px solid #4b0000;
+  display: inline-block;
+  padding-bottom: 0.5rem;
+}
+
+/* Cada bloque ideológico */
+.ideology-item {
+  background-color: #ffffff;
+  border-left: 6px solid #8b0000;
+  padding: 2rem;
+  margin-bottom: 2.5rem;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 12px;
+  transition: all 0.3s ease;
+}
+
+/* Animación al pasar el ratón */
+.ideology-item:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+}
+
+/* Título de cada ítem */
+.ideology-item h3 {
+  font-size: 2rem;
+  margin-bottom: 1rem;
+  color: #4b0000;
+  position: relative;
+}
+
+/* Línea decorativa debajo de los títulos */
+.ideology-item h3::after {
+  content: "";
+  position: absolute;
+  width: 60px;
+  height: 3px;
+  background-color: #8b0000;
+  left: 0;
+  bottom: -6px;
+}
+
+/* Cuerpo del texto */
+.ideology-item div {
+  font-size: 1.15rem;
+  line-height: 1.8;
+  text-align: justify;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #ideologia {
+    padding: 2rem 1rem;
+  }
+
+  .ideology-item {
+    padding: 1.5rem;
+  }
+
+  #ideologia h2 {
+    font-size: 2.2rem;
+  }
+
+  .ideology-item h3 {
+    font-size: 1.5rem;
+  }
+
+  .ideology-item div {
+    font-size: 1rem;
+  }
+}
+
+
 .banner .button {
   display: inline-block;
   padding: 0.5rem 1.5rem;
@@ -160,3 +414,5 @@ footer a:hover {
     padding: 0.4rem 1rem;
   }
 }
+
+