@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Jost:wght@300;400;500;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Jost', sans-serif;
    background-color: #0d0d0d;
}

:root {
    --dorado: #9b793a;
    --dorado-claro: #d9bc66;
    --fondo-oscuro: #111214;
    --texto-claro: #f5f5f5;
}

/* Encabezado */
.encabezado {
    background-color: var(--fondo-oscuro);
    border-bottom: 1px solid rgba(201, 169, 110, 0.25);
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
    position: sticky;
    top: 0;
    z-index: 1000;
    animation: slideDown 0.6s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CONTENEDOR DEL MENÚ */
.menu.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;            
    height: 120px;
}

/* ===== LOGO (IZQUIERDA, CENTRADO) ===== */
.logo {
    display: flex;
    align-items: center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.logo img {
    height: 100px;
    width: auto;
    display: block;
}

/* ===== NAVBAR (DERECHA) ===== */
.navbar ul {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 35px;
}

.navbar ul li a {
    position: relative;
    color: var(--texto-claro);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 0;
    transition: color 0.3s ease;
}

/* Subrayado dorado animado desde el centro */
.navbar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: var(--dorado);
    transition: width 0.35s ease;
}

.navbar ul li a:hover {
    color: var(--dorado-claro);
}

.navbar ul li a:hover::after {
    width: 100%;
}

/* ===== ICONO HAMBURGUESA (OCULTO EN ESCRITORIO) ===== */
#menu {
    display: none;
}

label[for="menu"] {
    display: none;
    cursor: pointer;
}

.menu-icono {
    width: 40px;
    height: auto;
}

/* Diseño Presentación */
.presentacion {
    min-height: 90vh;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    background-image: url("Imagenes/presentacion.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    padding: 40px 80px;
}

.presentacion::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

/* Texto Presentacion */
.presen-txt {
    position: relative;
    color: white;
    z-index: 1;
    max-width: 1000px;
    text-align: center;
    ion-icon{
    color: var(--dorado-claro);
}
}

.presen-txt h1 {
    font-size: 50px;
    margin-bottom: 15px;
}

.presen-txt h1 span {
    color: var(--dorado);
}

.presen-txt p {
    font-size: 22px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.presen-txt p span {
    font-weight: bold;
    color: var(--dorado-claro);
}


/* Botón */
.btn-1 {
    display: inline-block;
    padding: 14px 35px;
    background-color: var(--dorado);
    color: var(--texto-claro);
    text-decoration: none;
    border-radius: 30px;

    font-size: 18px;
    font-weight: bold;

    transition: 0.3s;
}

.btn-1:hover {
    background-color: var(--dorado-claro);
    color: var(--texto-claro);
    transform: scale(1.05);
}

/*Diseño Objetivo, Visión*/
.comparativo {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 40px;
}

.cuadro {
    width: 650px;
    padding: 25px;
    background-color: var(--dorado-claro);
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    text-align: center;
}

.cuadro h2 {
    color: black;
    margin-bottom: 15px;
    ion-icon {
        color: var(--dorado);
    }
    font-size: 35px;
}

.cuadro h2 span {
    color: var(--dorado);
}

.cuadro p {
    font-size: 22px;
    line-height: 1.5;
    color: black;
}

/*Diseño Planificacion Financiera*/
.cuadro-1 {
    width: 90%;
    padding: 40px;
    background-color: whitesmoke;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    gap: 40px;
    margin: auto;
}


/* Imagen izquierda */

.imagen-cuadro {
    width: 40%;
}


.imagen-cuadro img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 15px;
}


/* Contenido derecha */

.contenido-cuadro {
    width: 60%;
    text-align: center;
}

.cuadro-1 h2 {
    color: black;
    font-size: 50px;
}

.cuadro-1 h2 span {
    color: var(--dorado);
}

.cuadro-1 p {
    font-size: 30px;
    line-height: 1.5;
    color: var(--dorado-claro);
}

.cuadro-1 ul {
    font-size: 25px;
    line-height: 2;
    color: black;
    text-align: left;
    ion-icon {
        color: var(--dorado);
    }
}

.cuadro-1 ul span {
    color: var(--dorado);
}

/* Diseño de Titulo de Servicios */
.cuadro-2 {
    width: 100%;
    padding: 40px;
    background-color: #111214;
    border-radius: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    align-items: center;
    gap: 40px;
    margin: auto;
    margin-top: 30px;
}

.cuadro-2 h2 {
    color: var(--dorado);
    font-size: 65px;
    text-align: center;
}




/* Diseño de Carrusel de Servicios*/
.seccion-carrusel {
    padding: 60px 20px;
    background-color: #0d0d0d;
}

.contenedor-carrusel {
    max-width: 1000px;
    margin: auto;
    position: relative;
    overflow: hidden;
}

/* CONTENEDOR DE TARJETAS */
.carrusel {
    display: flex;
    transition: 0.5s;
}

/* TARJETAS */
.tarjeta {
    min-width: 100%;
    background:var(--dorado);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 5px 15px rgba(0,0,0,0.15);
    display:none;
}

.tarjeta.activo {
    display:block;
    ion-icon {
        color: var(--dorado-claro);
    }
}


/* IMAGEN */
.tarjeta img {
    width:100%;
    height:400px;
    object-fit:cover;
}

/* INFORMACIÓN */
.informacion {
    padding:30px;
    text-align:center;
}

.informacion h2 {
    font-size:35px;
    color:var(--dorado-claro);
}

.informacion p {
    font-size:20px;
    line-height:1.5;
    color: var(--texto-claro);
}

/* BOTONES */
.boton-anterior,
.boton-siguiente {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    background:white;
    color: var(--dorado);
    border:none;
    width:45px;
    height:45px;
    border-radius:50%;
    cursor:pointer;
    font-size:25px;
}

.boton-anterior {
    left:15px;
}

.boton-siguiente {
    right:15px;
}

.boton-anterior:hover,
.boton-siguiente:hover {
    background:#d4af37;
    color: white;
}


/* Diseño de Requisitos */
.seccion-requisitos {
    min-height: 70vh;
    padding: 70px 30px;
    background-image:
    linear-gradient(
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.75)
    ),
    url("Imagenes/fondoreq.jpg");
    background-size: cover;
    background-position:center;
}

.titulo-requisitos {
    text-align:center;
    color:white;
    margin-bottom:50px;
}

.titulo-requisitos h1 {
    font-size:45px;
}

.titulo-requisitos span {
    color:var(--dorado-claro);
}

.titulo-requisitos p {
    font-size:20px;
    color:#ddd;
}


/* CONTENEDOR */
.contenedor-requisitos {
    display:grid;
    grid-template-columns:
    repeat(5,1fr);
    gap:30px;
    max-width:1400px;
    margin:auto;
}


/* TARJETAS */
.tarjeta-requisito {
    background:rgba(255,255,255,0.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(212,175,55,0.4);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    color:white;
    transition:.4s;
}


.tarjeta-requisito:hover {
    transform:translateY(-15px);
    background:white;
    color:black;
}


/* ICONOS */
.icono {
    font-size:55px;
    color: var(--dorado-claro);
    margin-bottom:20px;
}

.tarjeta-requisito h2 {
    font-size:24px;
}

.tarjeta-requisito h2 span {
    color: var(--dorado-claro);
}

.tarjeta-requisito p {
    color: var(--dorado-claro);
    line-height:1.5;
}

.tarjeta-requisito:hover p {
    color:#333;
}


/* Diseño de Contacto */
.seccion-contacto {
    padding:70px 30px;
    background-color: #111214;
}


/* TITULO */
.titulo-contacto {
    text-align:center;
    color:var(--texto-claro);
    margin-bottom:50px;
}

.titulo-contacto h1 {
    font-size:60px;
    color:var(--texto-claro);
}

.titulo-contacto h1::after {
    content:"";
    display:block;
    width:90px;
    height:3px;
    background:var(--dorado);
    margin:15px auto;
}

.titulo-contacto p {
    color:var(--dorado-claro);
    font-size:20px;
}


/* CONTENEDOR GENERAL */
.contenedor-contacto {
    max-width:1300px;
    margin:auto;
    display:flex;
    gap:40px;
    align-items:center;
}


/* MAPA */
.mapa-contacto {
    width:100%;
    overflow: hidden;
    border-radius: 20px;
}

.mapa-contacto iframe {
    width: 100%;
    max-width: 100%;
    height: 450px;
    border: 0;
    border-radius: 20px;
}


/* INFORMACION */
.informacion-contacto {
    width:40%;
    display:flex;
    flex-direction:column;
    gap:30px;
}


/* TARJETAS */
.tarjeta-contacto {
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
    border:1px solid rgba(212,175,55,.5);
    padding:30px;
    border-radius:20px;
    text-align:center;
    color:var(--texto-claro);
    transition:.4s;
}


/* ICONOS */
.icono-contacto {
    font-size:50px;
    color:var(--dorado);
}

.tarjeta-contacto h2 {
    font-size:28px;
}

.tarjeta-contacto p {
    font-size:18px;
    line-height:1.6;
}


/* Diseño de Nuestro Compromiso */
.seccion-principal {
    height:90vh;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background-image:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.55)
    ),
    url("Imagenes/comprom1.jpg");
    background-size:cover;
    background-position:center;
    position:relative;
}


.contenido-principal {
    max-width:850px;
    color:white;
    padding:20px;
}


.etiqueta {
    display:inline-block;
    border:1px solid var(--dorado);
    color:white;
    padding:10px 45px;
    letter-spacing:4px;
    font-size:12px;
    margin-bottom:25px;
}

.contenido-principal h1 {
    font-size:65px;
    line-height:1.2;
    margin-bottom:20px;
    font-weight:bold;
}

.contenido-principal h1 span {
    color:var(--dorado);
}

.contenido-principal p {
    font-size:30px;
    letter-spacing:1px;
    margin-bottom:35px;
    color:var(--texto-claro);
}

.contenido-principal p span {
    color: var(--dorado-claro);
}

.boton-principal {
    display:inline-block;
    padding:15px 40px;
    background-color:var(--dorado-claro);
    color:black;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}

.boton-principal:hover {
    background:var(--dorado);
    color:black;
    transform:scale(1.05);
}


/* Efecto Inferior */
.seccion-principal::after {
    content:"";
    position:absolute;
    bottom:-1px;
    left:50%;
    transform:translateX(-50%);
    width:0;
    height:0;
    border-left:35px solid transparent;
    border-right:35px solid transparent;
    border-bottom:35px solid #111214;
}


/* Diseño del Footer */
.pie-pagina {
    background:#111214;
    color:white;
    padding:30px 20px 15px;
    text-align:center;
    border-top:1px solid rgba(212,175,55,.4);
}

.contenido-footer h2 {
    font-size:30px;
    margin-bottom:10px;
}

.contenido-footer h2 span {
    color:var(--dorado);
}

.contenido-footer p {
    color:#ccc;
    font-size:16px;
}

.redes-footer {
    margin-top:20px;
}

.redes-footer a {
    color:white;
    font-size:25px;
    margin:0 12px;
    transition:.3s;
}

.redes-footer a:hover {
    color:var(--dorado);
}

.derechos-footer {
    margin-top:25px;
    border-top:1px solid #333;
    padding-top:15px;
}

.derechos-footer p {
    font-size:14px;
    color:#aaa;
}




/* Vista Movil */
@media (max-width: 768px) {

    /* Mostrar el icono hamburguesa */
    label[for="menu"] {
        display: block;
        z-index: 1100;
    }

    /* Menú vertical oculto por defecto */
    .navbar {
        position: absolute;
        top: 120px;
        left: 0;
        width: 100%;
        background-color: var(--fondo-oscuro);
        border-top: 1px solid rgba(201, 169, 110, 0.25);
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.4s ease;
    }

    .navbar ul {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }

    .navbar ul li {
        width: 100%;
        text-align: center;
    }

    .navbar ul li a {
        display: block;
        padding: 15px 0;
        width: 100%;
    }

    .navbar ul li a::after {
        bottom: 8px;
    }

    /* Checkbox hack: al marcar, se despliega el menú */
    #menu:checked ~ .navbar {
        max-height: 400px;
        opacity: 1;
        transform: translateY(0);
    }

    /*Diseño movil de Presentacion*/
    .presentacion {
        justify-content: center;
        padding: 30px 20px;
        text-align: center;
    }


    .presen-txt {
        max-width: 100%;
        text-align: center;
    }


    .presen-txt h1 {
        font-size: 32px;
    }


    .presen-txt p {
        font-size: 16px;
        line-height: 1.5;
    }


    .btn-1 {
        padding: 12px 28px;
        font-size: 16px;
    }

    /*Diseño Movil de Objetivo, Vision */
    .comparativo {
        flex-direction: column;
        align-items: center;
    }


    .cuadro {
        width: 90%;
    }

    /*Diseño Movil de Planeación Financiera*/
    .cuadro-1 {
        flex-direction: column;
        width: 90%;
        padding: 20px;
    }

    .imagen-cuadro,
    .contenido-cuadro {
        width: 100%;
    }

    .imagen-cuadro img {
        height: 250px;
    }

    .cuadro-1 h2 {
        font-size: 30px;
    }

    .cuadro-1 p {
        font-size: 18px;
    }

    .cuadro-1 ul {
        font-size: 18px;
    }

    /* Diseño movil de Servicios */
    .tarjeta img {
        height:250px;
    }

    .informacion h2 {
        font-size:25px;
    }

    .informacion p {
        font-size:16px;
    }

    /* Diseño Movil de Nuestro Compromiso */
    .seccion-principal {
        height:100vh;
    }

    .etiqueta {
        padding:8px 20px;
        font-size:10px;
        letter-spacing:2px;
    }

    .contenido-principal h1 {
        font-size:35px;
    }

    .contenido-principal p {
        font-size:16px;
    }

    .boton-principal {
        padding:13px 25px;
    }
}


/* Responsivo Movil de Requisitos */
@media(max-width:1000px){
    .contenedor-requisitos{
        grid-template-columns:
        repeat(2,1fr);
    }
}


@media(max-width:600px){
    .contenedor-requisitos{
        grid-template-columns:1fr;
    }

    .titulo-requisitos h1{
        font-size:32px;
    }

    /* Diseño Movil del Footer */
    .contenido-footer h2 {
        font-size:25px;
    }
}


/* Responsivo Movil de Contacto */
@media(max-width:900px){
    .contenedor-contacto {
        flex-direction:column;
        width: 100%;
    }

    .mapa-contacto,
    .informacion-contacto {
        width:100%;
    }

    .mapa-contacto iframe {
        width:100%;
        height:300px;
    }

    .titulo-contacto h1 {
        font-size:35px;
    }
}