html {
font-size: px;
/* Cambiar el tamaño base aquí */
}
body {
font-family: "Poppins", Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
background-size: cover;
background-attachment: fixed;
}
h1,
h2 {
font-size: 1.6em;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
/* Sombra sutil */
margin-bottom: 30px;
margin-top: 30px;
line-height: 1.3;
font-family: "Poppins", sans-serif;
font-weight: 600;
color: #E76F51;
text-align: center;
}
h3 {
font-family: "Poppins", sans-serif;
color: #6CA6CD;
/* Verde brillante, cambiado a azul */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
/* Sombra suave */
font-size: 1.2em;
/* Ajusta según lo necesario */
margin-bottom: 10px;
line-height: 1.4;
/* Mejora la legibilidad */
font-weight: 500;
/* Ligero pero destacado */
}
nav {
animation: slideIn 0.5s ease-out;
backdrop-filter: blur(10px);
width: 250px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
/* Azul oscuro */
color: #264653;
/* Texto blanco */
height: 100vh;
position: fixed;
top: 0;
left: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3);
z-index: 1000;
/* Asegura que esté encima */
background-color: #003366;
}
nav a {
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
/* Sombra negra suave */
/* Texto claro */
text-decoration: none;
/* padding: 15px; */
padding: 20px 15px;
/* Más espacio alrededor */
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
/* Líneas divisorias */
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1em;
}
nav a:hover {
background-color: rgb(33, 167, 250);
/* Verde brillante */
/* transform: translateX(10px); */
/* Efecto de salto */
/* border-radius: 5px; */
/* Bordes suaves */
color: #E76F51;
/* transform: translateX(8px); */
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(5px);
border-radius: 10px;
}
nav .logo {
text-align: center;
padding: 20px;
/* padding-left: 40px; */
border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}
nav .logo img {
max-width: 110px;
border-radius: 50%;
transition: transform 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Agregar íconos */
nav a span {
font-size: 1.4em;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
/* Sombra para los íconos */
color:#6CA6CD
}
nav a {
padding: 20px; /* Mantiene el espacio alrededor */
display: flex;
align-items: center;
gap: 10px; /* Espacio entre el ícono y el texto */
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
transition: background-color 0.3s ease, transform 0.3s ease;
font-size: 1em;
text-indent: 5px; /* Ajusta la posición horizontal del texto */
}
nav a span {
flex-shrink: 0; /* Evita que los íconos cambien de tamaño */
width: 30px; /* Asigna un ancho fijo a los íconos */
text-align: center; /* Asegura que el ícono esté centrado */
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
transform: scale(1.1); /* Aumenta el texto un 10% */
}
nav {
display: flex;
flex-direction: column; /* Los elementos se apilan verticalmente */
/*justify-content: space-between; /* Distribuye los elementos de manera uniforme si hay espacio extra */
height: 100vh; /* Ocupa el 100% del alto de la ventana */
width: 250px; /* Ancho fijo del navbar */
background-color: #003366; /* Fondo del navbar */
position: fixed; /* Fija el navbar al lado izquierdo */
top: 0;
left: 0;
}
nav a {
display: flex;
align-items: center;
justify-content: flex-start; /* Alinea ícono y texto al inicio */
gap: 10px; /* Espacio entre ícono y texto */
color: white;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
text-decoration: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 1em;
transition: background-color 0.3s ease, transform 0.3s ease;
}
nav a:hover {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border-radius: 10px;
}
nav a span {
display: flex;
align-items: center;
justify-content: center;
width: 15px; /* Ancho consistente para los íconos */
}
nav a p {
margin: 0; /* Quita márgenes del texto */
flex: 1; /* Permite que el texto ocupe el espacio restante */
text-align: center; /* Asegura que el texto esté alineado a la izquierda */
}
@keyframes slideIn {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
nav .logo img:hover {
transform: scale(1.05);
}
/*******************/
/************/
.menu-toggle {
display: none;
position: fixed;
top: 5px;
left: 10px;
background-color: rgba(51, 51, 51, 0.5);
color: white;
border: none;
padding: 15px 20px;
font-size: 2em;
border-radius: 5px;
cursor: pointer;
z-index: 1001;
backdrop-filter: blur(1px);
}
.contact-summary {
font-weight: 600;
margin-left: 250px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
background-color: #eaf6ff; /* Azul claro */
padding: 15px 60px;
/*border-top: 2px solid #6CA6CD;*/
}
.contact-summary div {
display: flex;
align-items: center;
gap: 10px;
font: size 1em;
color: #003366;
}
.contact-summary div a {
text-decoration: none;
color: #003366;
transition: color 0.3s ease;
}
.contact-summary div a:hover {
color: #007acc; /* Azul más oscuro al pasar el cursor */
}
.contact-summary .social-links {
display: flex;
gap: 15px;
}
/* Colores específicos para los íconos */
.contact-item .fa-map-marker-alt {
color: red; /* rrrrojo */
}
.contact-item .fa-phone-alt {
color: #4caf50; /* Verde */
}
.contact-item .fab.fa-instagram {
color: #e1306c; /* Rosa (Instagram) */
}
.contact-item .fab.fa-tiktok {
color: #00f2ea; /* Azul claro (TikTok) */
}
/* ======================================================================== */
header {
background: linear-gradient(135deg, #c3e6f7 0%, #6CA6CD 100%);
padding: 25px 20px;
text-align: center;
margin-left: 250px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
background: linear-gradient(90deg, #c3e6f7, #6CA6CD);
/* Fondo Montessori */
padding: 15px 20px;
text-align: center;
margin-left: 250px;
/* Ajuste por el menú fijo */
height:60%;
}
header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-40 5c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM39 92c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.08)' fill-rule='evenodd'/%3E%3C/svg%3E");
opacity: 0.3;
z-index: 0;
}
header h1 {
position: relative;
z-index: 1;
font-size: 2.8em;
margin: 0;
padding: 10px 0;
/* color: #264653; */
color: #003366;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.3));
}
header .anida-svg {
width: 180px;
height: auto;
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
transition: transform 0.3s ease;
}
header .anida-svg:hover {
transform: scale(1.05);
}
header p {
position: relative;
z-index: 1;
font-size: 1em;
font-style: italic;
margin-top: 5px;
margin-bottom: 5px;
font-weight: 900;
font-family: "Poppins", sans-serif;
/* margin: 10px 0 0; */
color: #12262e;
font-weight: 600;
}
header h1 .anida-svg {
width: 240px;
/* Ajusta el tamaño según sea necesario */
height: auto;
vertical-align: middle;
/* Alinea verticalmente con el texto */
fill: #E76F51;
/* Cambia el color del SVG */
margin-bottom: 10px;
}
.hero-banner {
margin-left: 250px;
margin-top: 10px;
margin-bottom: 10px;
width: calc(100% - 250px);
/* height: 800px; */
/* background: linear-gradient, (to right, rgba(95, 191, 250), rgba(255, 255, 255, 0),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0),rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) url("./img/hero-banner.jpg") no-repeat center center/cover); */
background: url("./img/hero-banner2.jpg") no-repeat center center;
position: relative;
filter: brightness(1.1);
aspect-ratio: 16 / 9;
/* Incrementa la luminosidad de la imagen */
/* padding: 0px; */
background-size: contain;
height: 70vh;
}
main {
margin-left: 250px;
padding: 60px;
padding-top: 20px;
padding-bottom: 10px;
}
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.gallery img {
width: 100%;
height: auto;
border-radius: 15px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.gallery img:hover {
transform: scale(1.02);
}
/* .gallery div:nth-child(2) {
margin-top: 165px;
} */
/* TABLA */
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
background-color: #f9f9f9;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
th,
td {
padding: 15px;
text-align: center;
}
th {
background-color: #c3e4cd;
/* Verde pastel */
color: #333;
font-size: 1.2em;
font-weight: bold;
}
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 1em;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
border-radius: 15px;
overflow: hidden;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.07);
}
th,
td {
padding: 15px;
text-align: center;
}
th {
background-color: #c3e4cd;
/* Verde pastel */
color: #333;
font-size: 1.2em;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #f1f8f6;
/* Alternar filas */
}
tr:hover {
background-color: #e3f3ec;
/* Efecto hover */
}
td {
color: #555;
}
caption {
font-size: 1.5em;
margin-bottom: 10px;
color: #4caf50;
/* Título de la tabla */
font-weight: bold;
}
/* FIN TABLA */
.form-container {
max-width: 600px;
margin: 0 auto;
padding: 20px 30px;
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border-radius: 15px;
box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;}
form label {
font-size: 1em;
color: #333;
display: block;
margin-bottom: 8px;
}
form input,
form textarea {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1em;
font-family: Arial, sans-serif;
resize: none;
}
form input:focus,
form textarea:focus {
border-color: #4caf50;
outline: none;
box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
}
button {
background-color: #c3e4cd;
/* Verde suave */
color: #333;
/* Texto oscuro */
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #a7d8f0;
/* Azul pastel */
}
form button {
width: 100%;
padding: 10px;
background-color: #6CA6CD;
color: white;
border: none;
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: rgb(1, 85, 164);
}
.contact-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 20px;
margin-bottom: 30px;
}
.contact-info {
flex: 1;
max-width: 48%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 300px;
background-color: #f4f4f9;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.contact-info p {
margin: 5px 0;
margin-bottom: 15px;
color: #333;
font-size: 1em;
}
.contact-info h3 {
margin-bottom: 5px;
color: #003366;
}
.map {
flex: 1;
min-width: 300px;
aspect-ratio: 16 / 9;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden;
}
.map iframe {
width: 100%;
height: 100%;
border: none;
}
.contact-container .map,
.contact-container .contact-info {
flex: 1;
min-width: 300px;
}
/* Estilo base del carrusel */
.carousel {
position: relative;
overflow: hidden;
max-width: 800px;
margin: auto;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.carousel-inner {
display: flex;
transition: transform 0.5s ease-in-out;
}
.carousel-inner img {
width: 100%;
flex-shrink: 0;
object-fit: cover;
max-height: 600px;
}
#carrusel-yoga h3,
#carrusel-huerto h3,
#carrusel-educacion-fisica h3,
#carrusel-salidas-pedagogicas h3,
#carrusel-varios h3 {
text-align: center;
/* Centra el texto */
font-size: 1.5rem;
/* Aumenta el tamaño */
font-weight: bold;
/* Hace el texto más destacado */
color: #6CA6CD;
/* Color del texto */
margin-bottom: 20px;
/* Espaciado debajo */
}
button.prev,
button.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: none;
padding: 10px 20px;
cursor: pointer;
z-index: 2;
border-radius: 50%;
}
button.prev {
left: 10px;
}
button.next {
right: 10px;
}
button:hover {
background-color: rgba(0, 0, 0, 0.8);
}
section#documentos {
margin-bottom: 1px;
/* Margin específico para la sección con id "documentos" */
}
/* Estilo base para todas las secciones */
section {
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border-radius: 20px;
padding: 30px;
margin-bottom: 40px;
padding-top: 7px;
box-shadow:
20px 20px 60px #d1d1d1,
-20px -20px 60px #ffffff;
position: relative;
overflow: hidden;
}
/* Efecto hover suave para las secciones */
section:hover {
transform: translateY(-5px);
transition: transform 0.3s ease;
}
/* Estilos específicos para diferentes secciones */
#quienes-somos {
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#niveles-educativos {
background: linear-gradient(145deg, #e8f4f8, #d9e9ef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#mision-vision {
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#carrusel {
background: linear-gradient(145deg, #e8f4f8, #d9e9ef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#admision {
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#aranceles {
background: linear-gradient(145deg, #e8f4f8, #d9e9ef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
#contacto {
background: linear-gradient(145deg, #f8f9fa, #e9ecef);
border: 1px solid rgba(108, 166, 205, 0.1);
}
/* Efecto de decoración sutil para las esquinas de las secciones */
section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, #add8f5, #aecaf7);
opacity: 0.5;
border-radius: 20px 20px 0 0;
}
footer {
text-align: center;
padding: 10px;
background-color: #6CA6CD;
color: white;
margin-top: 40px;
margin-left: 250px;
}
@media (max-width: 1080px) {
.hero-banner {
margin-left: 250px;
width: auto;
/* height: 250px; */
height: auto;
}
}
@media (max-width: 768px) {
header {
margin-left: 0;
padding: 15px;
background: linear-gradient(135deg, #c3e6f7 0%, #6CA6CD 100%);
padding: 25px 20px;
text-align: center;
margin-left: 0px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
position: relative;
overflow: hidden;
}
.contact-summary {
margin-left: 0px;
padding: 20px 40px;
background: linear-gradient(145deg, #ffffff, #f0f0f0);
border-bottom: 1px solid rgba(108, 166, 205, 0.2);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 20px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
header h1 {
font-size: 2em;
}
header .anida-svg {
width: 120px;
}
nav {
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
z-index: 1000;
}
nav a{
font-size: 0.9em;
}
.menu-toggle {
background: rgba(108, 166, 205, 0.9);
backdrop-filter: blur(10px);
border-radius: 8px;
padding: 10px 15px;
display: block;
}
nav.active {
transform: translateX(0);
}
nav .logo img {
max-width: 120px;
border-radius: 50%;
/* Volvemos al estilo circular */
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-banner {
margin-left: 0;
width: 100%;
/* height: 250px; */
height: auto;
}
main {
margin-left: 0;
padding: 0px;
padding-top: 20px;
}
section {
padding: 10px;
}
footer {
margin-left: 0px;
margin-top: 0px;
background-color: #6CA6CD;
}
}