@charset "UTF-8";
/* CSS Document */

/* =====================================================
HOJA DE ESTILOS UNIFICADA Y CONSOLIDADA (UJAT)
====================================================== */

/* =====================================================

VARIABLES DE ENTORNO / ROOT
====================================================== */
   :root {
            --ujat-green: #38484f;
            --ujat-green-dark: #5a7681;
            --ujat-green-light: #b4cfd9;
            --ujat-white: #ffffff;
            --text-dark: #243024;
        }


/* =====================================================
2. ESTILOS BASE Y RESETS
====================================================== */
html {
scroll-behavior: smooth;
}

body {
margin: 0;
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
color: var(--text-dark);
background-color: #ffffff;
}

.fade-up {
animation: fadeUp .8s ease both;
}

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(25px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

/* =====================================================
3. NAVEGACIÓN (NAVBAR)
====================================================== */
.navbar-ujat {
background: linear-gradient(
135deg,
var(--ujat-green-dark),
var(--ujat-green)
);
box-shadow: 0 4px 18px rgba(0, 0, 0, .18);
position: sticky;
top: 0;
z-index: 1000;
}

.navbar-brand {
font-weight: 700;
color: #ffffff !important;
letter-spacing: .5px;
}

.navbar-brand small {
display: block;
font-size: .70rem;
font-weight: 400;
opacity: .85;
}

.navbar-brand i {
margin-right: 8px;
}

.navbar-ujat .nav-link,
.nav-link {
color: rgba(255, 255, 255, .90) !important;
font-weight: 500;
margin-left: 12px;
transition: .3s;
}

.navbar-ujat .nav-link:hover,
.nav-link:hover {
color: #ffffff !important;
transform: translateY(-2px);
}

/* =====================================================
4. SECCIONES DE ENCABEZADO (HERO)
====================================================== */
.hero {
background: linear-gradient(
135deg,
rgba(90, 118, 129, .97),
rgba(56, 72, 79, .93)
);
color: var(--ujat-white);
padding: 90px 20px;
position: relative;
overflow: hidden;
}

.hero::before {
content: "";
position: absolute;
width: 480px;
height: 480px;
border: 1px solid rgba(255, 255, 255, .10);
border-radius: 50%;
top: -260px;
right: -100px;
}

.hero::after {
content: "";
position: absolute;
width: 330px;
height: 330px;
border: 1px solid rgba(255, 255, 255, .08);
border-radius: 50%;
bottom: -220px;
left: -100px;
}

.hero-content {
position: relative;
z-index: 2;
}

.hero-icon {
width: 85px;
height: 85px;
margin: 0 auto 25px;
border-radius: 22px;
background: rgba(255, 255, 255, .12);
border: 1px solid rgba(255, 255, 255, .25);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.8rem;
}

.hero-icon::before {
content: "\F4F9";
font-family: "bootstrap-icons";
}

.hero h1 {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 800;
margin-bottom: 20px;
}

.hero h1 i {
margin-right: 15px;
}

.hero p {
max-width: 850px;
margin: 0 auto;
font-size: 1.15rem;
line-height: 1.8;
opacity: .95;
}

.hero-badge {
display: inline-block;
margin-top: 25px;
padding: 10px 24px;
border-radius: 50px;
background: #ffffff;
color: var(--ujat-green);
font-weight: 700;
box-shadow: 0 8px 25px rgba(0, 0, 0, .18);
}

.hero-historia,
.hero-bandera {
min-height: 560px;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
background: linear-gradient(
135deg,
rgba(90, 118, 129, .97),
rgba(56, 72, 79, .93)
);
color: #ffffff;
}

.hero-historia::before,
.hero-bandera::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
background: rgba(255, 255, 255, .03);
top: -200px;
right: -100px;
}

.hero-title {
font-size: clamp(2.5rem, 5vw, 4.8rem);
font-weight: 800;
line-height: 1.05;
}

.hero-subtitle {
font-size: 1.15rem;
line-height: 1.8;
opacity: .90;
}

.hero-image-container {
position: relative;
z-index: 2;
}

.hero-image {
width: 100%;
max-width: 620px;
height: auto;
border-radius: 18px;
border: 5px solid rgba(255, 255, 255, .12);
box-shadow: 0 25px 60px rgba(0, 0, 0, .35);
cursor: pointer;
transition: .4s;
}

.hero-historia .hero-image {
max-width: 520px;
height: 430px;
object-fit: cover;
object-position: center;
}

.hero-image:hover {
transform: scale(1.02);
box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}

.btn-ujat {
background: #ffffff;
color: var(--ujat-green);
border: none;
font-weight: 700;
padding: 12px 25px;
border-radius: 50px;
transition: .3s;
}

.btn-ujat:hover {
background: #e8f1e7;
color: var(--ujat-green-dark);
transform: translateY(-2px);
}

/* =====================================================
5. ESTRUCTURA DE SECCIONES Y GENERALES
====================================================== */
.section {
padding: 60px 0;
}

.section-title {
color: var(--ujat-green);
font-size: 2.3rem;
font-weight: 800;
margin-bottom: 15px;
}

.section-line,
.section-title-line {
width: 70px;
height: 5px;
background: var(--ujat-green);
border-radius: 20px;
margin: 15px auto 35px;
border: 0;
}

.section-description,
.section-subtitle,
.section-intro {
max-width: 850px;
margin: 0 auto 45px;
color: #647064;
font-size: 1.08rem;
line-height: 1.8;
text-align: center;
}

/* Sección con fondo Verde */
.green-section {
background: linear-gradient(
135deg,
var(--ujat-green-dark),
var(--ujat-green)
);
color: #ffffff;
}

.green-section .section-title {
color: #ffffff;
}

.green-section .section-line,
.green-section .section-title-line {
background: #ffffff;
}

.green-section .section-description,
.green-section .section-subtitle {
color: rgba(255, 255, 255, .86);
}

/* Cajas de Introducción */
.intro-box {
background: var(--ujat-green-light);
border-left: 6px solid var(--ujat-green);
border-radius: 25px;
padding: 45px;
box-shadow: 0 12px 35px rgba(0, 0, 0, .07);
}

.intro-icon {
width: 75px;
height: 75px;
background: var(--ujat-green);
color: var(--ujat-white);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 25px;
}

.intro-icon::before {
content: "\F4FE";
font-family: "bootstrap-icons";
}

.intro-box p {
font-size: 1.08rem;
line-height: 1.9;
margin-bottom: 0;
}

/* =====================================================
6. COMPONENTES Y TARJETAS (CARDS)
====================================================== */
.info-card {
background: #ffffff;
border-radius: 22px;
padding: 35px;
height: 100%;
border: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
transition: transform .35s ease, box-shadow .35s ease;
}

.info-card:hover {
transform: translateY(-8px);
box-shadow: 0 18px 40px rgba(0, 0, 0, .13);
}

.icon-box {
width: 70px;
height: 70px;
background: var(--ujat-green-light);
color: var(--ujat-green);
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
margin-bottom: 22px;
}

.info-card h4 {
color: var(--ujat-green);
font-weight: 700;
margin-bottom: 15px;
}

.info-card p {
line-height: 1.8;
color: #596359;
margin-bottom: 0;
}

/* Tarjeta Misión / Visión */
.philosophy-card {
background: #ffffff;
border-radius: 24px;
padding: 42px;
height: 100%;
border-top: 5px solid var(--ujat-green);
box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
transition: all .35s ease;
}

.philosophy-card:hover {
transform: translateY(-7px);
box-shadow: 0 20px 45px rgba(0, 0, 0, .13);
}

.card-icon {
width: 75px;
height: 75px;
background: var(--ujat-green-light);
color: var(--ujat-green);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.3rem;
margin-bottom: 22px;
}

.mission-icon::before {
content: "\F13C";
font-family: "bootstrap-icons";
}

.vision-icon::before {
content: "\F341";
font-family: "bootstrap-icons";
}

.philosophy-card h3 {
color: var(--ujat-green);
font-size: 2rem;
font-weight: 800;
margin-bottom: 22px;
}

.philosophy-card p {
color: #4f594f;
font-size: 1.05rem;
line-height: 1.9;
text-align: justify;
margin-bottom: 0;
}

/* Tarjetas Principios / Identidad */
.identity-card {
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 22px;
padding: 32px;
height: 100%;
transition: all .3s ease;
}

.identity-card:hover {
transform: translateY(-6px);
background: rgba(255, 255, 255, .15);
}

.identity-card-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, .15);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.7rem;
margin-bottom: 20px;
}

.identity-card h4 {
color: #ffffff;
font-size: 1.35rem;
font-weight: 700;
margin-bottom: 15px;
}

.identity-card p {
color: rgba(255, 255, 255, .88);
line-height: 1.75;
margin: 0;
}

/* Tarjeta Autor */
.author-section {
background: var(--ujat-green-light);
}

.author-card {
background: rgba(255, 255, 255, .10);
border: 1px solid rgba(255, 255, 255, .18);
border-radius: 25px;
padding: 40px;
height: 100%;
backdrop-filter: blur(5px);
}

.author-section .author-card {
background: #ffffff;
border: none;
box-shadow: 0 10px 35px rgba(0, 0, 0, .07);
}

.author-icon {
width: 80px;
height: 80px;
background: #ffffff;
color: var(--ujat-green);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.2rem;
margin-bottom: 25px;
}

.author-section .author-icon {
width: 90px;
height: 90px;
background: var(--ujat-green);
color: #ffffff;
font-size: 40px;
}

.author-card h3,
.author-name {
color: var(--ujat-green);
font-weight: 800;
margin-bottom: 12px;
}

.author-card p {
margin: 0;
opacity: .9;
line-height: 1.7;
}

/* Simbología y Ficha Técnica */
.symbol-card {
border: 0;
border-radius: 20px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 8px 25px rgba(0, 0, 0, .07);
height: 100%;
}

.symbol-header,
.technical-header {
background: var(--ujat-green);
color: #ffffff;
padding: 25px;
}

.symbol-body {
padding: 30px;
}

.symbol-body p {
color: #687168;
line-height: 1.8;
}

.color-card {
height: 100%;
border-radius: 18px;
overflow: hidden;
background: #ffffff;
box-shadow: 0 8px 25px rgba(0, 0, 0, .07);
}

.color-preview {
height: 150px;
}

.green-preview {
background: var(--ujat-green);
}

.white-preview {
background: #ffffff;
border-bottom: 1px solid #dddddd;
}

.color-content {
padding: 25px;
}

.color-content h5 {
color: var(--ujat-green);
font-weight: 700;
}

.color-content p {
color: #687168;
line-height: 1.7;
}

.technical-card {
border-radius: 20px;
overflow: hidden;
border: 0;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.technical-row {
padding: 18px 25px;
border-bottom: 1px solid #edf0ed;
}

.technical-row:last-child {
border-bottom: 0;
}

.technical-label {
font-weight: 700;
color: var(--ujat-green);
}

/* =====================================================
7. LÍNEA DEL TIEMPO, ETAPAS Y ESTADÍSTICAS
====================================================== */
.timeline {
position: relative;
max-width: 1000px;
margin: auto;
}

.timeline::before {
content: "";
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: var(--ujat-green);
transform: translateX(-50%);
border-radius: 10px;
}

.timeline-item {
width: 50%;
padding: 15px 40px;
position: relative;
}

.timeline-item:nth-child(odd) {
left: 0;
text-align: right;
}

.timeline-item:nth-child(even) {
left: 50%;
}

.timeline-dot {
position: absolute;
width: 20px;
height: 20px;
background: var(--ujat-green);
border: 4px solid #dcebd9;
border-radius: 50%;
top: 30px;
z-index: 3;
}

.timeline-item:nth-child(odd) .timeline-dot {
right: -10px;
}

.timeline-item:nth-child(even) .timeline-dot {
left: -10px;
}

.timeline-card {
background: #ffffff;
padding: 25px;
border-radius: 18px;
box-shadow: 0 8px 25px rgba(0, 0, 0, .07);
}

.timeline-year {
color: var(--ujat-green);
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 10px;
}

.timeline-card p {
color: #687168;
line-height: 1.7;
margin: 0;
}

.history-card {
height: 100%;
background: #ffffff;
border: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 25px rgba(0, 0, 0, .07);
transition: .3s;
}

.history-card:hover {
transform: translateY(-7px);
box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.history-card-header {
background: var(--ujat-green);
color: #ffffff;
padding: 25px;
}

.history-card-body {
padding: 30px;
}

.history-card-body p {
color: #687168;
line-height: 1.8;
}

.stats-section {
background: var(--ujat-green-light);
}

.stat-card {
background: #ffffff;
border-radius: 18px;
padding: 30px 20px;
text-align: center;
height: 100%;
box-shadow: 0 8px 25px rgba(0, 0, 0, .06);
}

.stat-number {
color: var(--ujat-green);
font-size: 2.7rem;
font-weight: 800;
}

.stat-label {
color: #687168;
font-weight: 600;
}

/* =====================================================
8. GALERÍA E IMÁGENES HISTÓRICAS
====================================================== */
.historical-image-card {
background: #ffffff;
border: 0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
}

.historical-image {
width: 100%;
height: 430px;
object-fit: cover;
cursor: pointer;
transition: transform .4s;
}

.historical-image:hover {
transform: scale(1.025);
}

.historical-caption {
padding: 25px;
}

.historical-caption h4 {
color: var(--ujat-green);
font-weight: 700;
}

.historical-caption p {
color: #687168;
line-height: 1.7;
margin: 0;
}

/* =====================================================
9. SECCIÓN DE HIMNO Y REPRODUCTOR AUDIO
====================================================== */
.date-box {
text-align: center;
background: #ffffff;
color: var(--ujat-green);
border-radius: 25px;
padding: 45px 25px;
box-shadow: 0 15px 35px rgba(0, 0, 0, .15);
}

.date-box .year {
font-size: 4rem;
line-height: 1;
font-weight: 800;
}

.date-box .date {
font-size: 1.2rem;
margin-top: 15px;
font-weight: 600;
}

.hymn-section {
background: #f7faf6;
}

.hymn-card {
background: #ffffff;
border-radius: 25px;
padding: 50px;
box-shadow: 0 12px 35px rgba(0, 0, 0, .08);
position: relative;
overflow: hidden;
}

.hymn-card::before {
content: "♪";
position: absolute;
right: 30px;
top: 10px;
font-size: 10rem;
line-height: 1;
color: rgba(11, 79, 5, .045);
font-weight: 900;
}

.hymn-header {
text-align: center;
margin-bottom: 40px;
position: relative;
z-index: 1;
}

.hymn-header i {
font-size: 3.5rem;
color: var(--ujat-green);
}

.hymn-header h3 {
color: var(--ujat-green);
font-size: 2rem;
font-weight: 800;
margin-top: 15px;
}

.hymn-part {
margin-bottom: 35px;
position: relative;
z-index: 1;
}

.hymn-part-title {
color: var(--ujat-green);
font-size: 1.15rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
border-left: 5px solid var(--ujat-green);
padding-left: 15px;
margin-bottom: 18px;
}

.hymn-text {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.1rem;
line-height: 2;
color: #394439;
white-space: pre-line;
}

.copyright-note {
background: var(--ujat-green-light);
border-radius: 15px;
padding: 20px;
color: #506050;
font-size: .95rem;
margin-top: 30px;
}

.audio-box {
background: var(--ujat-green);
border-radius: 25px;
padding: 40px;
color: #ffffff;
text-align: center;
box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.audio-icon {
font-size: 4rem;
margin-bottom: 15px;
}

.audio-box h3 {
font-weight: 800;
margin-bottom: 12px;
}

.audio-box p {
opacity: .9;
margin-bottom: 25px;
}

.audio-button {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ffffff;
color: var(--ujat-green);
text-decoration: none;
padding: 13px 25px;
border-radius: 50px;
font-weight: 700;
transition: .3s;
}

.audio-button:hover {
background: var(--ujat-green-light);
color: var(--ujat-green-dark);
transform: translateY(-3px);
}

/* =====================================================
10. FRASES Y CITAS (QUOTES)
====================================================== */
.quote-section {
background: linear-gradient(
135deg,
var(--ujat-green-dark),
var(--ujat-green)
);
color: #ffffff;
text-align: center;
padding: 90px 20px;
}

.quote-section.light-variant {
background: var(--ujat-green-light);
color: inherit;
}

.quote-icon {
color: var(--ujat-green);
font-size: 3.5rem;
opacity: .7;
margin-bottom: 15px;
}

.quote-section h2 {
color: var(--ujat-green);
font-weight: 800;
font-size: clamp(1.8rem, 3vw, 2.5rem);
}

.quote-section p,
.quote-text {
max-width: 900px;
margin: 20px auto 0;
color: #ffffff;
font-size: clamp(1.4rem, 3vw, 2rem);
line-height: 1.6;
font-weight: 500;
}

.quote-section blockquote {
max-width: 900px;
margin: 25px auto;
font-size: clamp(1.4rem, 3vw, 2.2rem);
line-height: 1.6;
font-weight: 500;
font-style: italic;
}

/* =====================================================
11. FOOTER Y BOTONES FLOTANTES
====================================================== */
footer {
background: #042600;
color: rgba(255, 255, 255, .85);
padding: 45px 0;
text-align: center;
}

footer strong,
.footer-title {
color: #ffffff;
font-weight: 700;
}

.footer-text {
opacity: .75;
font-size: .9rem;
}

.back-top {
position: fixed;
bottom: 25px;
right: 25px;
width: 50px;
height: 50px;
background: var(--ujat-green);
color: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 8px 20px rgba(0, 0, 0, .2);
z-index: 999;
transition: .3s;
}

.back-top:hover {
background: var(--ujat-green-dark);
color: #ffffff;
transform: translateY(-4px);
}

/* =====================================================
12. VENTANAS MODALES
====================================================== */
.modal-content {
border: 0;
border-radius: 18px;
overflow: hidden;
}

.modal-body {
background: #061f03;
padding: 15px;
text-align: center;
}

.modal-history-image,
.modal-bandera {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 10px;
}

/* =====================================================
13. ADAPTABILIDAD (RESPONSIVE)
====================================================== */
@media (max-width: 991px) {
.hero-bandera {
padding: 80px 0;
}

.hero-image-container {
    margin-top: 40px;
}


}

@media (max-width: 768px) {
.section {
padding: 60px 0;
}

.hero,
.hero-historia {
    padding: 70px 20px;
}

.hero h1 {
    font-size: 2.6rem;
}

.hero p {
    font-size: 1rem;
}

.hero-image,
.historical-image {
    height: 350px;
}

.intro-box,
.philosophy-card,
.hymn-card,
.author-card {
    padding: 30px;
}

.philosophy-card p {
    text-align: left;
}

.date-box {
    margin-bottom: 25px;
}

.hymn-text {
    font-size: 1rem;
    line-height: 1.8;
}

.timeline::before {
    left: 20px;
}

.timeline-item {
    width: 100%;
    left: 0 !important;
    text-align: left !important;
    padding: 15px 15px 15px 55px;
}

.timeline-item .timeline-dot {
    left: 10px !important;
    right: auto !important;
}


}