/* Variables globales de color y tema */
:root {
    --color-primario: #1F6F5F; /* verde oscuro principal */
    --color-secundario: #2fa084; /* verde medio para botones y acentos */
    --color-terciario: #6FCF97; /* verde claro para detalles */
    --color-blanco: #EEEEEE; /* blanco suave para texto y fondos */
    --texto-claro: #f1f9ed; /* tono claro para la mayoría del texto */
    --fondo-oscuro: rgba(13, 50, 38, 0.72); /* tono oscuro semitransparente */
}

/* Ajusta el modelo de caja de todos los elementos */
* {
    box-sizing: border-box;
}

/* Asegura que la página pueda ocupar al menos toda la altura de la ventana */
html {
    min-height: 100%;
}

body {
    margin: 0; /* elimina margen por defecto del navegador */
    min-height: 100vh; /* fuerza altura mínima para cubrir la pantalla */
    position: relative; /* permite posicionar elementos internos si es necesario */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* tipografía principal */
    color: var(--texto-claro); /* color de texto principal */
    background:
        linear-gradient(to right, rgba(111, 207, 151, 0.62), transparent 42%), /* degrade lateral izquierdo */
        linear-gradient(to left, rgba(47, 160, 132, 0.58), transparent 42%), /* degrade lateral derecho */
        radial-gradient(circle at left center, rgba(111, 207, 151, 0.46), transparent 26%), /* brillo suave a la izquierda */
        radial-gradient(circle at right center, rgba(47, 160, 132, 0.44), transparent 26%), /* brillo suave a la derecha */
        linear-gradient(180deg, rgba(26, 84, 70, 0.98), rgba(39, 128, 99, 0.96) 28%, rgba(90, 184, 136, 0.86) 72%, rgba(111, 207, 151, 0.78)); /* fondo base vertical */
    background-blend-mode: normal, normal, screen, screen, normal, normal; /* mezcla de fondos */
}

body::before {
    content: ''; /* pseudo-elemento para sombra suave sobre el fondo */
    position: fixed;
    inset: 0;
    background: rgba(10, 33, 24, 0.18); /* capa oscura ligera */
    pointer-events: none; /* no interfiere con clics */
    z-index: 1;
}

.titulo {
    position: relative; /* coloca el título por encima del sombreado */
    z-index: 2;
}

/* Barra de navegación fija en la parte superior */
#NAVEGACION {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    background: rgba(16, 65, 50, 0.84); /* fondo translúcido oscuro */
    backdrop-filter: blur(10px); /* desenfoque detrás de la barra */
    position: sticky;
    top: 0;
    z-index: 10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Estilo del logo en la barra superior */
.Logo h1 {
    margin: 0;
    font-size: 2rem;
    letter-spacing: 0.06em;
    color: #c4f2d0;
}

/* Contenedor de los enlaces del menú */
.Menu {
    display: flex;
    gap: 14px;
}

/* Estilos para un bloque de texto hero opcional */
.hero-text {
    text-align: center;
    max-width: 900px;
    margin: 36px auto 0;
    padding: 0 20px;
    color: #edf8ef;
}

.hero-pretitle {
    margin: 0 0 12px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-size: 0.82rem;
    color: rgba(232, 249, 235, 0.88);
}

.hero-text h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 18px rgba(11, 37, 26, 0.35);
}

.hero-desc {
    margin: 18px auto 0;
    max-width: 670px;
    color: rgba(239, 250, 238, 0.9);
    font-size: 1rem;
    line-height: 1.8;
}

.titulo {
    max-width: 980px;
    margin: 36px auto 0;
    padding: 0 20px;
    text-align: center;
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    line-height: 1.5;
    letter-spacing: 0.02em;
    color: #eff8ee;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
}

.titulo br {
    display: block;
    margin: 0.45rem 0;
}

/* Estilo de los botones del menú y de las tarjetas */
.boton {
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #ffffff;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    transition: transform 0.2s ease, background 0.2s ease;
}

/* Efecto hover suave sobre los botones */
.boton:hover {
    background: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}

/* Contenedor que agrupa las tarjetas principales */
.contenedor {
    padding: 140px 20px 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    max-width: 1160px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Estilo base de cada tarjeta/box en la sección */
.caja {
    width: 280px;
    min-height: 500px;
    border-radius: 36px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 32px 18px 40px;
    background-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 24px 42px rgba(0, 0, 0, 0.24), 0 12px 26px rgba(18, 82, 61, 0.18);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border: 6px solid rgba(255, 255, 255, 0.08);
    background-size: cover;
    background-position: center;
    gap: 20px;
}

/* Efecto hover que eleva cada tarjeta ligeramente */
.caja:hover {
    transform: translateY(-10px);
    box-shadow: 0 34px 68px rgba(0, 0, 0, 0.28), 0 16px 42px rgba(18, 95, 70, 0.26);
}

/* Encabezado interno de cada tarjeta */
.texto-tarjeta {
    z-index: 1;
    color: #f6fffa;
    text-align: center;
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding-top: 8px;
    text-shadow: 0 1px 14px rgba(0, 0, 0, 0.18);
    margin-bottom: 0;
}

/* Capa oscura sobre la tarjeta para mejorar contraste */
.caja::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(6, 28, 21, 0.65), rgba(6, 28, 21, 0) 42%);
}

/* Estilo del enlace dentro de cada tarjeta */
.caja a {
    position: relative;
    z-index: 1;
    margin-bottom: 32px;
    padding: 14px 26px;
    border-radius: 999px;
    background: rgba(39, 117, 83, 0.96);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    transition: background 0.2s ease, transform 0.2s ease;
}

.caja a:hover {
    background: rgba(111, 207, 151, 0.96);
    transform: translateY(-2px);
}

#caja1 {
    background-image: url('imagenes/tarjetaterrestre.png');
}

#caja2 {
    background-image: url('imagenes/tarjetamarina.png');
}

#caja3 {
    background-image: url('imagenes/tarjetaprehistorica.png');
}

@media (max-width: 860px) {
    .caja {
        width: 100%;
        max-width: 360px;
    }
}

@media (max-width: 560px) {
    #NAVEGACION {
        flex-direction: column;
        align-items: stretch;
    }

    .Menu {
        justify-content: center;
        width: 100%;
    }

    .contenedor {
        padding-top: 120px;
    }
}

@media (max-width: 900px) {
    /* en pantallas pequeñas quitamos efectos opcionales si los tuviéramos */
}