/* Estilo general del cuerpo */
body {
    margin: 10px;
    font-family: 'Cormorant Garamond', serif;
    line-height: 1.6;
    background: #F9F9F9;
    color: #333;
	overflow-x: hidden; /* Evita scroll horizontal */
}

p {
    font-family: Arial, sans-serif;
    font-size: 14px; /* Cambia el tamaño a algo más legible */
    line-height: 1.8; /* Ajusta el espacio entre líneas */
}

/* Encabezado */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #E2DFDF;
    padding: 10px 180px;
    gap: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header .logo img {
    max-height: 150px;
	width: auto;
}

header nav a {
    margin: 0 15px;
    text-decoration: none;
    color: #333;
    font-weight: bold;
    font-size: 1.2em; /* Aumenta el tamaño de la fuente */
	border-bottom: 2px solid #333;
	padding-bottom: 5px;
    white-space: nowrap;
}

header nav a:hover {
    color: #007bff;
	/*border-bottom: 2px solid #333; /* Línea de 2px de grosor, color oscuro */
    /*padding-bottom: 10px; /* Espaciado entre la línea y el contenido del menú */
}

/* Footer */
footer {
    background-color: #333; /* Color de fondo oscuro */
    color: #fff; /* Texto blanco */
    text-align: center; /* Centrar todo el contenido del footer */
    padding: 15px 10px; /* Espaciado interno */
    font-size: 0.9em; /* Tamaño de letra */
}

footer p {
    margin: 5px 0; /* Espaciado entre párrafos */
    text-align: center; /* Centrar texto */
}

/* Secciones principales */
main {
    padding: 20px;
}

/* Centrado de texto e imágenes */
h1 {
    text-align: center;
    color: #444;
    font-size: 2.5em; /* Cambia el tamaño según necesites */
}

h2 {
    text-align: center;
    color: #444;
    font-size: 2em; /* Cambia el tamaño según necesites */
	font-family: 'playfair', serif;
}

h3 {
    text-align: center;
    color: #444;
    font-size: 1.5em; /* Cambia el tamaño según necesites */
}

.texto-centrado {
    text-align: center; /* Centra el texto */
    font-size: 1em; /* Tamaño estándar */
    margin: 0; /* Sin márgenes adicionales */
}

p.texto-centrado {
    text-align: center; /* Sobrescribe el estilo global */
}

.espaciado-superior {
    margin-top: 20px; /* Agrega el espacio superior al contenedor */
}

p, div.texto {
    text-align: justify;
}

img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
	height: auto;
}

.imagen-reducida {
    display: block;
    margin: 0 auto;
    max-width: 20%; /* Solo esta imagen se reducirá al 20% */
}

/* Estilo de columnas */
.columnas1, .columnas, .informacion {
    display: flex;
    gap: 80px;
    justify-content: center;
    margin: 20px 0;
	flex-wrap: wrap;
}

.columna1, .columna {
    flex: 1;
    text-align: left;
	 min-width: 250px;
}

/*.columna img {
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
}*/

.columna1 .texto {
    margin-top: 10px;
    font-size: 0.95em;
}

/* Botones */
button, .big-button {
    display: block;
    margin: 20px auto;
    padding: 15px 30px; /* Incrementa el relleno interno */
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1.5em; /* Incrementa el tamaño del texto */
    width: 300px; /* Ajusta el ancho automáticamente */
	max-width: 90%;
    /*height: 60px; /* Deja que la altura dependa del contenido */
	text-align: center;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.2;
}

button:hover, .big-button:hover {
    background-color: #0056b3;
}

/*botones de mayor tamaño */
/*.big-button {
    font-size: 1.5em;
    padding: 15px 30px;
    width: 300px;
    height: auto;
    white-space: normal;
    text-align: center;
    word-wrap: break-word;
    line-height: 1.2;
    border: none;
    border-radius: 8px;
    background-color: #007BFF;
    color: white;
    cursor: pointer;
}

/* Líneas separadoras */
hr {
    border: 0;
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

/* Mapas */
.mapa iframe {
    border: none;
    border-radius: 8px;
    width: 100%;
    height: 500px;
}

/* Gradientes de fondo */
.matriculas, .contacto {
    background: linear-gradient(135deg, #f3f3f3, #e6e6e6);
    padding: 20px;
    border-radius: 8px;
}

/* Estilo para la imagen de fondo */
.imagen-fondo {
    background-image: url('imagenes/portada.jpg');
    background-size: cover;
    background-position: center;
    min-height: 650px;
    text-align: center;
    padding: 50px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.imagen-fondo h1 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 4em;
    font-weight: bold;
    color: #000;
    margin: 0;
    background-color: rgba(255, 255, 255, 0.7);
    padding: 20px;
    border-radius: 10px;
}

/* Estilo para las columnas en la sección institucional */
.columnas img {
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.columna .texto {
    margin-top: 10px;
    font-size: 0.95em;
    padding: 0 10px;
}

/* Estilo para el PEI */
.pei {
    margin-top: 30px;
    text-align: center;
    padding: 0 20px;
}

/* =============================================== */
/* MEDIA QUERIES MEJORADAS PARA RESPONSIVIDAD */
/* =============================================== */

/* Tablets grandes (≤1024px) */
@media (max-width: 1024px) {
    header {
        padding: 10px 50px !important;
    }
    
    header .logo img {
        max-height: 120px;
    }
    
    .columnas1, .columnas, .informacion {
        gap: 50px;
    }
    
    .imagen-fondo h1 {
        font-size: 3em;
    }
}

/* Tablets (≤768px) */
@media (max-width: 768px) {
    /* HEADER - Lo más importante */
    header {
        flex-direction: column;
        padding: 10px 20px !important;
        gap: 15px;
    }
    
    header .logo img {
        max-height: 100px;
    }
    
    header nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    header nav a {
        margin: 8px 0;
        font-size: 1.1em;
        width: 100%;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
        white-space: normal;
    }
    
    /* TÍTULOS */
    h1 {
        font-size: 2em !important;
        padding: 0 10px;
    }
    
    h2 {
        font-size: 1.7em !important;
        padding: 0 10px;
    }
    
    h3 {
        font-size: 1.4em !important;
        padding: 0 10px;
    }
    
    /* COLUMNAS - Sección crítica */
    .columnas1, .columnas, .informacion {
        flex-direction: column;
        gap: 30px !important;
        align-items: center;
    }
    
    .columna1, .columna {
        width: 90% !important;
        max-width: 500px;
        margin-bottom: 20px;
    }
    
    /* IMAGEN de fondo */
    .imagen-fondo {
        min-height: 400px !important;
        padding: 30px 15px !important;
    }
    
    .imagen-fondo h1 {
        font-size: 2.2em !important;
        padding: 15px;
    }
    
    /* IMÁGENES generales */
    .imagen-reducida {
        max-width: 50% !important;
    }
    
    img[width="50%"], img[width="70%"] {
        width: 80% !important;
        height: auto !important;
    }
    
    /* BOTONES */
    button, .big-button {
        width: 90% !important;
        font-size: 1.3em;
        padding: 12px 20px;
    }
    
    /* MAPA */
    .mapa iframe {
        height: 300px;
    }
    
    /* TEXTOS */
    p {
        font-size: 13px;
        line-height: 1.6;
        padding: 0 10px;
    }
    
    .texto-centrado {
        padding: 0 15px;
    }
    
    /* ESPACIOS */
    main {
        padding: 15px;
    }
    
    .matriculas, .contacto {
        padding: 15px;
    }
}

/* Móviles pequeños (≤480px) */
@media (max-width: 480px) {
    header .logo img {
        max-height: 80px;
    }
    
    header nav a {
        font-size: 1em;
        padding: 8px;
    }
    
    h1 {
        font-size: 1.8em !important;
    }
    
    h2 {
        font-size: 1.5em !important;
    }
    
    h3 {
        font-size: 1.2em !important;
    }
    
    .imagen-fondo {
        min-height: 300px !important;
    }
    
    .imagen-fondo h1 {
        font-size: 1.8em !important;
        padding: 10px;
    }
    
    .imagen-reducida {
        max-width: 70% !important;
    }
    
    button, .big-button {
        font-size: 1.1em;
        padding: 10px 15px;
    }
    
    .mapa iframe {
        height: 250px;
    }
    
    footer {
        font-size: 0.8em;
        padding: 10px 5px;
    }
    
    footer p {
        margin: 3px 0;
    }
}

/* Para pantallas muy anchas */
@media (min-width: 1400px) {
    .columna1, .columna {
        max-width: 400px;
    }
}

/* ===== AJUSTES ESPECÍFICOS SOLICITADOS - VERSIÓN FINAL ===== */

/* 1. Título más arriba en la imagen de fondo */
.imagen-fondo {
    align-items: flex-start !important;  /* Cambia de center a flex-start */
    padding-top: 20px !important;        /* 50px desde el borde superior */
    justify-content: center !important;  /* Mantiene centrado horizontal */
}

/* 2. Reducir imágenes específicas - matrículas.html */
img[src*="primaria.jpg"],
img[src*="bachillerato.jpg"] {
    max-width: 55% !important;
    height: auto !important;
}

img[src*="zepa.png"],
img[src*="jacel.png"] {
    max-width: 70% !important;
    height: auto !important;
}

img[src*="requisitos.png"] {
    max-width: 60% !important;
    height: auto !important;
}

/* 3. Asegurar que botones del manual no tengan subrayado Y estén centrados */
a[href*="adopcionymanual.pdf"] {
    text-decoration: none !important;
    display: block !important;
    text-align: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
}

/* 4. Asegurar que TODOS los botones estén bien centrados */
button, .big-button {
    /* Estas propiedades YA están en tu línea 133, se mantienen: */
    display: block !important;
    margin: 20px auto !important;
    text-align: center !important;
}

/* 5. Corrección específica para el botón del manual */
/* Esto anula cualquier conflicto que pudiera tener */
a[href*="adopcionymanual.pdf"] .big-button {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* 6. Ajustes para móviles de estas imágenes */
@media (max-width: 768px) {
    img[src*="primaria.jpg"],
    img[src*="bachillerato.jpg"] {
        max-width: 60% !important;
    }
    
    img[src*="zepa.png"],
    img[src*="jacel.png"] {
        max-width: 70% !important;
    }
    
    img[src*="requisitos.png"] {
        max-width: 80% !important;
    }
    
    /* Ajuste adicional para título en móviles */
    .imagen-fondo {
        padding-top: 30px !important;
    }
    
    .imagen-fondo h1 {
        margin-top: 20px !important;
        font-size: 2em !important;
        padding: 15px;
    }
    
    /* Botones más ajustados en móviles */
    button, .big-button {
        width: 90% !important;
    }
}

@media (max-width: 480px) {
    img[src*="primaria.jpg"],
    img[src*="bachillerato.jpg"] {
        max-width: 80% !important;
    }
    
    img[src*="zepa.png"],
    img[src*="jacel.png"] {
        max-width: 90% !important;
    }
    
    .imagen-fondo {
        padding-top: 20px !important;
    }
    
    .imagen-fondo h1 {
        margin-top: 15px !important;
        font-size: 1.8em !important;
        padding: 10px;
    }
    
    /* Botones aún más pequeños en móviles muy pequeños */
    button, .big-button {
        font-size: 1.2em !important;
        padding: 12px 20px !important;
    }
}

/* Responsive: se adapta a pantallas menores a 480px */
/*@media (max-width: 480px) {
    .big-button {
        width: 90%;
        font-size: 1.2em;
        padding: 12px 20px;
    }
}

/* Párrafo sin cambios en el navegador */

/*a {
  text-decoration: none;
  color: inherit;
}

/* Líneas separadoras */
/*hr {
    border: 0;
    border-top: 2px solid #ddd;
    margin: 20px 0;
}

/* Mapas */
/*.mapa iframe {
    border: none;
    border-radius: 8px;
}

/* Gradientes de fondo */
/*.matriculas, .contacto {
    background: linear-gradient(135deg, #f3f3f3, #e6e6e6);
    padding: 20px;
    border-radius: 8px;
}

/* Estilo para la parte con la imagen de fondo en la sección Institucional */
/* Estilo para la imagen de fondo y el texto */
/*.imagen-fondo {
    /*background-image: url('imagenes/portada.jpg'); /* Cambia esto por la ruta de tu imagen */
	/*background-image: url('imagenes/portada.jpg');
    background-size: cover; /* Ajusta la imagen para que cubra todo el espacio */
    /*background-position: center; /* Centra la imagen */
	/*min-height: 650px; /* Ajusta la altura mínima de la sección */
    /*text-align: center; /* Centra el texto en el contenedor */
    /*padding: 50px 20px; /* Espaciado dentro del contenedor */
}

/*.imagen-fondo h1 {
    font-family: 'Cormorant Garamond', serif; /* Usa una fuente elegante para el nombre */
    /*font-size: 4em; /* Aumenta el tamaño del nombre */
    /*font-weight: bold; /* Pone el nombre en negrita */
    /*color: #000; /* El color del texto será blanco para que destaque sobre el fondo */
    /*margin: 0; /* Elimina el margen alrededor */
}

/* Estilo para el resto del contenido de la sección institucional */
/*.contenido-institucional {
    padding: 20px;
}

/* Estilo para las columnas en la sección institucional */
/*.columnas {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 20px 0;
}

.columna {
    flex: 1;
    text-align: center;
}

.columna img {
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.columna .texto {
    margin-top: 10px;
    font-size: 0.95em;
}

/* Estilo para el PEI */
/*.pei {
    margin-top: 30px; /* Separación adicional entre el contenido */
    /*text-align: center;
}

/* Adaptabilidad móvil */
/*@media (max-width: 768px) {
    /* Cambios para mejorar la experiencia en dispositivos móviles */
    /* Estilo de las columnas */
    /*.columnas {
        flex-direction: column; /* Cambia la disposición de las columnas a columna */
        /*gap: 10px; /* Reduce el espacio entre las columnas */
    }

    /*.columna {
        margin-bottom: 20px; /* Agrega espacio entre las columnas cuando están en columna */
    }

    /* Encabezado: Cambiar la alineación de los elementos */
    /*header {
        flex-direction: column; /* Cambia la dirección de los elementos a columna */
        /*padding: 10px 30px; /* Ajusta el padding para que no quede demasiado grande */
    }

    /*header .logo img {
        max-height: 80px; /* Ajusta la altura del logo para que no ocupe demasiado espacio */
    }

    /*header nav {
        display: flex;
        flex-direction: column; /* Cambia la disposición de los enlaces a columna */
        /*align-items: center;
        gap: 10px; /* Separa un poco más los elementos de navegación */
    }

    /*header nav a {
        margin: 5px 0; /* Ajusta el espacio entre los enlaces */
        /*font-size: 1em; /* Reduce un poco el tamaño de la fuente */
    }

    /* Imagen de fondo en la sección Institucional */
    /*.imagen-fondo {
        min-height: 400px; /* Reduce la altura para pantallas más pequeñas */
        /*padding: 30px 20px; /* Reduce el padding */
    }

    /*.imagen-fondo h1 {
        font-size: 2.5em; /* Reduce el tamaño del texto */
    }

    /* Mejoras para las secciones con imágenes */
    /*img {
        max-width: 90%; /* Permite que las imágenes se ajusten mejor en pantallas más pequeñas */
    }

    /*.texto-centrado {
        font-size: 0.9em; /* Ajusta el tamaño del texto para mejor legibilidad */
    }

    /* Mejora en el diseño del footer */
    /*footer {
        font-size: 0.8em; /* Reduce el tamaño de la fuente en el footer */
        /*padding: 15px 0; /* Ajusta el padding */
    }

    /*footer p {
        margin: 3px 0; /* Reduce el margen */
    }
}