/* =====================================================
   TIPOGRAFÍA DEL TÍTULO PORTAFOLIO
===================================================== */

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

.portafolio-encabezado h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(70px, 9vw, 135px);
    font-weight: 300;
    letter-spacing: -3px;
    line-height: 0.85;
    color: #ffffff;
    margin: 0;
}
/* =====================================================
   CONFIGURACIÓN GENERAL
===================================================== */

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


html,
body {
    width: 100%;
    height: 100%;
}


body {
    background: #000;
    color: #ffffff;

    font-family: "Courier New", Courier, monospace;
}


/* =====================================================
   PÁGINA PRINCIPAL
===================================================== */

.pagina-inicio {
    width: 100%;
    min-height: 100vh;
}


/* =====================================================
   NAVBAR
===================================================== */

.navbar {

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 155px;

    display: flex;

    align-items: center;

    padding: 0 60px;

    z-index: 100;

    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
}


/* =====================================================
   LOGO DE LA ESQUINA SUPERIOR IZQUIERDA
===================================================== */

.logo-navbar {

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.logo-placeholder {

    width: 78px;
    height: 78px;

    display: flex;

    align-items: center;
    justify-content: center;

    background: rgba(120, 120, 120, 0.85);

    color: #ffffff;

    font-family: Georgia, serif;

    font-size: 27px;

    font-weight: bold;
}


.logo-placeholder span {
    font-size: 20px;
}


/* =====================================================
   MENÚ
===================================================== */

.menu {

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    display: grid;

    grid-template-columns: auto auto;

    column-gap: 38px;
    row-gap: 8px;

    text-align: center;
}


.menu a {

    color: #ffffff;

    text-decoration: none;

    font-size: 16px;

    letter-spacing: 1px;

    transition: opacity 0.3s ease;
}


.menu a:hover {

    opacity: 0.65;
}


.menu a.activo {

    border-bottom: 1px solid #ffffff;

    padding-bottom: 5px;
}


/* =====================================================
   REDES SOCIALES
===================================================== */

.redes {

    margin-left: auto;

    display: flex;

    align-items: center;

    gap: 32px;
}


/* Iconos */

.icono-red {

    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* SVG */

.icono-red svg {

    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* Facebook */

.icono-red:last-child svg {

    fill: currentColor;

    stroke: none;
}


/* Hover */

.icono-red:hover {

    opacity: 0.65;

    transform: translateY(-2px);
}


/* =====================================================
   HERO / IMAGEN DE FONDO
===================================================== */

.hero {

    position: relative;

    width: 100%;

    min-height: 100vh;

    /*
    IMPORTANTE:

    style.css está directamente dentro de AP.

    Por eso NO necesitamos ../

    La imagen está en:

    AP
    └── Imagenes
        └── 2010-2020
            └── index.jpg
    */

    background-image:

        linear-gradient(
            rgba(0, 15, 35, 0.38),
            rgba(0, 0, 0, 0.48)
        ),

        url("Imagenes/2010-2020/index.jpg");


    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;


    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;
}


/* =====================================================
   LOGOS CENTRALES
===================================================== */

.logos-centrales {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap: 120px;

    margin-top: -69px;
}


.empresa {

    min-width: 240px;

    text-align: center;
}


/* =====================================================
   LOGO CENTRAL
===================================================== */

.logo-central {

    color: #f4f1df;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 100px;

    font-weight: bold;

    line-height: 0.9;

    letter-spacing: -15px;
}


.logo-central span {

    letter-spacing: -15px;
}


.empresa p {

    margin-top: 0px;


    color: #f4f1df;

    font-family: Georgia, "Times New Roman", serif;

    font-size: 20px;

    line-height: 1.2;
}


/* =====================================================
   BOTONES PRINCIPALES
===================================================== */

.botones-inicio {

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 135px;

    margin-top: 65px;
}


.boton-inicio {

    width: 200px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    text-decoration: none;

    background: rgba(65, 65, 65, 0.78);

    font-family:
        Impact,
        Haettenschweiler,
        "Arial Narrow Bold",
        sans-serif;

    font-size: 20px;

    letter-spacing: 1px;

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.boton-inicio:hover {

    background: rgba(90, 90, 90, 0.90);

    transform: translateY(-5px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1200px) {

    .botones-inicio {

        gap: 50px;
    }


    .boton-inicio {

        width: 300px;

        height: 170px;

        font-size: 45px;
    }


    .logos-centrales {

        gap: 70px;
    }
}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 850px) {

    .navbar {

        height: 110px;

        padding: 0 25px;
    }


    .logo-navbar {

        width: 60px;
        height: 60px;
    }


    .logo-placeholder {

        width: 60px;
        height: 60px;

        font-size: 20px;
    }


    .menu {

        display: none;
    }


    .hero {

        padding: 140px 25px 50px;
    }


    .logos-centrales {

        gap: 30px;

        margin-top: 20px;
    }


    .logo-central {

        font-size: 70px;
    }


    .empresa p {

        font-size: 15px;
    }


    .botones-inicio {

        flex-direction: column;

        gap: 20px;

        margin-top: 40px;
    }


    .boton-inicio {

        width: 85%;

        max-width: 400px;

        height: 110px;

        font-size: 38px;
    }
}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media (max-width: 500px) {

    .logos-centrales {

        flex-direction: column;

        align-items: center;

        gap: 25px;
    }


    .logo-central {

        font-size: 60px;
    }


    .empresa p {
        margin-top: 15px !important;
        padding: 0;
        text-align: center;
        line-height: 1.2;
    }


    .redes {

        gap: 15px;
    }


    .boton-inicio {

        height: 95px;

        font-size: 32px;
    }
}
/* =====================================================
   =====================================================
   PÁGINA CLIENTES
   =====================================================
===================================================== */


/* =====================================================
   CONTENEDOR PRINCIPAL
===================================================== */

.pagina-clientes {

    width: 100%;

    min-height: 100vh;

    background: #5d5d5d;

    color: #ffffff;

}


/* =====================================================
   CONTENIDO DE CLIENTES
===================================================== */

.clientes-contenido {

    width: 100%;

    min-height: 100vh;

    padding-top: 150px;

    padding-left: 22px;

    padding-right: 22px;

    padding-bottom: 30px;

}


/* =====================================================
   GALERÍA
===================================================== */

.galeria-cartas {

    width: 100%;

    display: grid;

    /*
    En computadora grande:
    5 cartas por fila
    */

    grid-template-columns:
        repeat(5, 1fr);

    gap: 14px;

    align-items: start;

}


/* =====================================================
   CARTA
===================================================== */

.carta {

    width: 100%;

    display: block;

    background: #ffffff;

    text-decoration: none;

    overflow: hidden;

}


/* =====================================================
   IMAGEN DE LA CARTA
===================================================== */

.carta img {

    display: block;

    width: 100%;

    height: auto;

    /*
    Mantiene la proporción original
    del documento.
    */

    object-fit: contain;

}


/* =====================================================
   PEQUEÑO EFECTO AL PASAR EL CURSOR
===================================================== */

.carta {

    transition:
        opacity 0.25s ease;
}


.carta:hover {

    opacity: 0.88;

}


/* =====================================================
   PANTALLAS GRANDES
===================================================== */

@media (min-width: 1500px) {

    .clientes-contenido {

        padding-left: 22px;

        padding-right: 22px;

    }


    .galeria-cartas {

        grid-template-columns:
            repeat(5, 1fr);

        gap: 14px;

    }

}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1300px) {

    .galeria-cartas {

        grid-template-columns:
            repeat(4, 1fr);

        gap: 14px;

    }

}


/* =====================================================
   TABLET HORIZONTAL
===================================================== */

@media (max-width: 1024px) {

    .clientes-contenido {

        padding-top: 125px;

        padding-left: 20px;

        padding-right: 20px;

    }


    .galeria-cartas {

        grid-template-columns:
            repeat(3, 1fr);

        gap: 15px;

    }

}


/* =====================================================
   TABLET / CELULAR GRANDE
===================================================== */

@media (max-width: 768px) {

    .clientes-contenido {

        padding-top: 120px;

        padding-left: 18px;

        padding-right: 18px;

    }


    .galeria-cartas {

        grid-template-columns:
            repeat(2, 1fr);

        gap: 14px;

    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 500px) {

    .clientes-contenido {

        padding-top: 110px;

        padding-left: 15px;

        padding-right: 15px;

        padding-bottom: 20px;

    }


    .galeria-cartas {

        grid-template-columns:
            1fr;

        gap: 18px;

    }


    .carta {

        width: 100%;

    }

}
/* =====================================================
   =====================================================
   VISOR DE CARTAS
   =====================================================
===================================================== */


/* =====================================================
   FONDO DEL VISOR
===================================================== */

.visor-carta {

    position: fixed;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    /*
    Fondo negro elegante y ligeramente transparente.
    */

    background: rgba(0, 0, 0, 0.90);

    /*
    No aparece inicialmente.
    */

    display: none;

    /*
    Centrar documento.
    */

    align-items: center;

    justify-content: center;

    /*
    Espacio para que la carta
    nunca toque los bordes.
    */

    padding: 40px;

    /*
    Encima de todo el sitio.
    */

    z-index: 9999;

}


/* =====================================================
   VISOR ACTIVO
===================================================== */

.visor-carta.mostrar {

    display: flex;

}


/* =====================================================
   IMAGEN GRANDE
===================================================== */

.visor-carta img {

    display: block;

    /*
    Nunca será más grande
    que la pantalla.
    */

    max-width: 90vw;

    max-height: 90vh;

    width: auto;

    height: auto;

    /*
    Mantiene la proporción
    original del documento.
    */

    object-fit: contain;

    /*
    Pequeña sombra para
    separarla del fondo.
    */

    box-shadow:
        0 10px 50px rgba(0, 0, 0, 0.50);

}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.cerrar-visor {

    position: absolute;

    top: 20px;

    right: 30px;

    width: 50px;

    height: 50px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    border: none;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 42px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10000;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;

}


.cerrar-visor:hover {

    opacity: 0.60;

    transform: scale(1.08);

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .visor-carta {

        padding: 25px;

    }


    .visor-carta img {

        max-width: 94vw;

        max-height: 88vh;

    }


    .cerrar-visor {

        top: 15px;

        right: 18px;

        width: 45px;

        height: 45px;

        font-size: 38px;

    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 500px) {

    .visor-carta {

        padding: 15px;

    }


    .visor-carta img {

        max-width: 96vw;

        max-height: 85vh;

    }


    .cerrar-visor {

        top: 10px;

        right: 12px;

        font-size: 35px;

    }

}
/* =====================================================
   VISOR DE CARTAS
===================================================== */

.visor-carta {
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.92);

    display: none;

    align-items: center;
    justify-content: center;

    padding: 40px;

    z-index: 9999;
}

.visor-carta.mostrar {
    display: flex;
}


/* =====================================================
   CONTENEDOR DE LA IMAGEN
===================================================== */

.contenedor-imagen-carta {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;
}

.contenedor-imagen-carta img {
    display: block;

    max-width: 88vw;
    max-height: 90vh;

    width: auto;
    height: auto;

    object-fit: contain;

    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);

    transition: opacity 0.2s ease;
}


/* =====================================================
   BOTÓN CERRAR
===================================================== */

.cerrar-visor {
    position: absolute;

    top: 20px;
    right: 30px;

    width: 50px;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    color: white;

    font-family: Arial, sans-serif;
    font-size: 42px;
    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10001;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.cerrar-visor:hover {
    opacity: 0.6;
    transform: scale(1.08);
}


/* =====================================================
   BOTONES ANTERIOR / SIGUIENTE
===================================================== */

.navegacion-carta {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    width: 60px;
    height: 80px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: transparent;
    border: none;

    color: white;

    font-family: Arial, sans-serif;
    font-size: 70px;
    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10001;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.navegacion-carta:hover {
    opacity: 0.65;
}

.navegacion-carta.anterior {
    left: 25px;
}

.navegacion-carta.siguiente {
    right: 25px;
}


/* =====================================================
   BOTONES DESACTIVADOS
===================================================== */

.navegacion-carta:disabled {
    opacity: 0.15;

    cursor: default;

    pointer-events: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 768px) {

    .visor-carta {
        padding: 25px;
    }

    .contenedor-imagen-carta img {
        max-width: 88vw;
        max-height: 86vh;
    }

    .cerrar-visor {
        top: 15px;
        right: 18px;

        width: 45px;
        height: 45px;

        font-size: 38px;
    }

    .navegacion-carta {
        width: 50px;
        height: 65px;

        font-size: 55px;
    }

    .navegacion-carta.anterior {
        left: 5px;
    }

    .navegacion-carta.siguiente {
        right: 5px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 500px) {

    .visor-carta {
        padding: 15px;
    }

    .contenedor-imagen-carta img {
        max-width: 90vw;
        max-height: 82vh;
    }

    .cerrar-visor {
        top: 10px;
        right: 12px;

        width: 40px;
        height: 40px;

        font-size: 35px;
    }

    .navegacion-carta {
        width: 42px;
        height: 55px;

        font-size: 48px;
    }

    .navegacion-carta.anterior {
        left: 0;
    }

    .navegacion-carta.siguiente {
        right: 0;
    }

}
/* =====================================================
   AJUSTE NAVBAR - PÁGINA CLIENTES
===================================================== */

.pagina-clientes .navbar {
    height: 110px;
}
/* =====================================================
   PÁGINA CONTACTO
===================================================== */

.pagina-contacto {
    background: #5d5d5d;
    color: #ffffff;
    min-height: 100vh;
}


/* =====================================================
   CONTENIDO PRINCIPAL
===================================================== */

.contacto-contenido {
    min-height: 100vh;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    position: relative;

    padding: 150px 7vw 80px;
}


/* =====================================================
   BLOQUE IZQUIERDO
===================================================== */

.contacto-marca {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    padding-left: 5vw;
}

.contacto-marca h1 {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(48px, 4vw, 72px);

    font-weight: 300;

    line-height: 1.18;

    letter-spacing: -2px;

    color: #ffffff;
}


/* =====================================================
   BLOQUE DERECHO
===================================================== */

.contacto-informacion {
    max-width: 780px;

    padding-right: 3vw;
}


/* =====================================================
   TEXTO PRINCIPAL
===================================================== */

.texto-contacto {
    margin: 0 0 28px;

    font-family: monospace;

    font-size: clamp(15px, 1.15vw, 20px);

    line-height: 1.7;

    letter-spacing: 0.5px;

    color: #e0e0e0;
}

.texto-contacto strong {
    color: #ffffff;

    font-weight: 700;
}


/* =====================================================
   CORREO
===================================================== */

.correo-contacto {
    display: inline-block;

    color: #ffffff;

    font-family: monospace;

    font-size: 17px;

    text-decoration: underline;

    text-underline-offset: 4px;

    margin-bottom: 18px;

    transition: color 0.25s ease;
}

.correo-contacto:hover {
    color: #d0d0d0;
}


/* =====================================================
   REDES SOCIALES
===================================================== */

.redes-contacto {
    display: flex;

    align-items: center;

    gap: 18px;
}

.redes-contacto a {
    width: 25px;
    height: 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #ffffff;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.redes-contacto a:hover {
    opacity: 0.55;

    transform: translateY(-2px);
}

.redes-contacto svg {
    width: 22px;
    height: 22px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;
}

.redes-contacto svg path {
    fill: currentColor;

    stroke: none;
}

.redes-contacto svg .punto {
    fill: currentColor;

    stroke: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .contacto-contenido {
        grid-template-columns: 1fr 1fr;

        padding: 140px 8vw 70px;
    }

    .contacto-marca {
        padding-left: 2vw;
    }

    .contacto-marca h1 {
        font-size: clamp(42px, 5vw, 60px);
    }

    .texto-contacto {
        font-size: 15px;

        line-height: 1.65;
    }

}


/* =====================================================
   CELULAR / TABLET PEQUEÑA
===================================================== */

@media (max-width: 768px) {

    .contacto-contenido {
        min-height: auto;

        grid-template-columns: 1fr;

        gap: 50px;

        padding:
            150px
            12vw
            80px;
    }

    .contacto-marca {
        padding-left: 0;

        justify-content: center;

        text-align: center;
    }

    .contacto-marca h1 {
        font-size: clamp(42px, 11vw, 58px);

        letter-spacing: -1.5px;
    }

    .contacto-informacion {
        padding-right: 0;

        max-width: none;
    }

    .texto-contacto {
        font-size: 14px;

        line-height: 1.7;
    }

    .correo-contacto {
        font-size: 14px;
    }

}


/* =====================================================
   CELULAR PEQUEÑO
===================================================== */

@media (max-width: 500px) {

    .contacto-contenido {
        padding:
            135px
            10vw
            60px;

        gap: 40px;
    }

    .contacto-marca h1 {
        font-size: 40px;
    }

    .texto-contacto {
        font-size: 13px;
    }

    .correo-contacto {
        font-size: 13px;
    }

    .redes-contacto {
        gap: 14px;
    }

}
/* =====================================================
   LOGO REAL DEL NAVBAR
===================================================== */

.logo-real {
    display: block;

    width: 75px;
    height: auto;

    object-fit: contain;
}
/* =====================================================
   PORTAFOLIO - NUEVO DISEÑO
===================================================== */

.pagina-portafolio {
    background: #5d5d5d;
    color: #ffffff;
    min-height: 100vh;
}


/* =====================================================
   CONTENIDO GENERAL
===================================================== */

.portafolio-contenido {
    width: 100%;
    min-height: 100vh;

    box-sizing: border-box;
}


/* =====================================================
   PORTADA
===================================================== */

.portafolio-inicio {

    min-height: calc(100vh - 155px);

    padding:
        190px
        10vw
        80px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    justify-content: center;

}


/* =====================================================
   ENCABEZADO
===================================================== */

.portafolio-encabezado {

    max-width: 750px;

    margin-bottom: 70px;
}


.portafolio-subtitulo {

    margin: 0 0 14px;

    font-family: Arial, Helvetica, sans-serif;

    font-size: 14px;

    letter-spacing: 4px;

    color: #d0d0d0;
}


/* =====================================================
   TIPOGRAFÍA DEL TÍTULO PORTAFOLIO
===================================================== */

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

.portafolio-encabezado h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(70px, 9vw, 135px);
    font-weight: 300;
    letter-spacing: -3px;
    line-height: 0.85;
    color: #ffffff;
    margin: 0;
}

.portafolio-descripcion {

    max-width: 560px;

    margin:
        28px
        0
        0;

    font-family: monospace;

    font-size: 15px;

    line-height: 1.7;

    color: #d2d2d2;
}


/* =====================================================
   PERIODOS
===================================================== */

.periodos-portafolio {

    width: 100%;

    max-width: 1050px;

    display: flex;

    flex-direction: column;

    border-top: 1px solid rgba(255,255,255,0.3);
}


/* =====================================================
   BOTÓN DE PERIODO
===================================================== */

.periodo-boton {

    width: 100%;

    min-height: 105px;

    padding:
        0
        20px;

    display: grid;

    grid-template-columns: 70px 1fr 50px;

    align-items: center;

    gap: 20px;

    background: transparent;

    border: none;

    border-bottom:
        1px solid
        rgba(255,255,255,0.3);

    color: #ffffff;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.3s ease,
        padding 0.3s ease;
}


.periodo-boton:hover {

    background:
        rgba(255,255,255,0.07);

    padding-left: 30px;

    padding-right: 30px;
}


.periodo-numero {

    font-family: monospace;

    font-size: 13px;

    color: #bdbdbd;

    letter-spacing: 1px;
}


.periodo-titulo {

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(28px, 3vw, 43px);

    font-weight: 300;

    letter-spacing: -1px;
}


.periodo-flecha {

    font-family: Arial, Helvetica, sans-serif;

    font-size: 30px;

    font-weight: 300;

    text-align: right;

    transition:
        transform 0.3s ease;
}


.periodo-boton:hover .periodo-flecha {

    transform: translateX(8px);
}


/* =====================================================
   GALERÍA DE PERIODO
===================================================== */

.galeria-periodo {

    display: none;

    min-height: calc(100vh - 155px);

    padding:
        185px
        5vw
        80px;

    box-sizing: border-box;
}


.galeria-periodo.mostrar {

    display: block;
}


/* =====================================================
   ENCABEZADO DE GALERÍA
===================================================== */

.galeria-encabezado {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 30px;

    margin-bottom: 55px;

    border-bottom:
        1px solid
        rgba(255,255,255,0.3);

    padding-bottom: 30px;
}


/* =====================================================
   BOTÓN VOLVER
===================================================== */

.volver-portafolio {

    padding: 0;

    background: transparent;

    border: none;

    color: #d0d0d0;

    font-family: monospace;

    font-size: 13px;

    letter-spacing: 1px;

    cursor: pointer;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}


.volver-portafolio:hover {

    color: #ffffff;

    transform: translateX(-5px);
}


/* =====================================================
   TÍTULO DE GALERÍA
===================================================== */

.galeria-etiqueta {

    margin:
        0
        0
        8px;

    font-family: monospace;

    font-size: 12px;

    letter-spacing: 3px;

    color: #c6c6c6;

    text-align: right;
}


.galeria-encabezado h2 {

    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    font-size: clamp(40px, 5vw, 72px);

    font-weight: 300;

    line-height: 1;

    letter-spacing: -2px;

    text-align: right;

    color: #ffffff;
}


/* =====================================================
   GALERÍA DE IMÁGENES
===================================================== */

.galeria-imagenes {

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;

    width: 100%;
}


/* =====================================================
   TARJETA DE PROYECTO
===================================================== */

.proyecto-portafolio {

    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #505050;

    cursor: pointer;

    position: relative;
}


.proyecto-portafolio img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 0.5s ease,
        opacity 0.4s ease;
}


.proyecto-portafolio:hover img {

    transform: scale(1.04);

    opacity: 0.88;
}


/* =====================================================
   VISOR DE IMAGEN
===================================================== */

.visor-portafolio {

    position: fixed;

    inset: 0;

    display: none;

    align-items: center;

    justify-content: center;

    padding: 40px;

    background:
        rgba(0,0,0,0.94);

    z-index: 9999;

    box-sizing: border-box;
}


.visor-portafolio.mostrar {

    display: flex;
}


/* =====================================================
   IMAGEN GRANDE
===================================================== */

.visor-imagen-contenedor {

    width: 100%;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    pointer-events: none;
}


.visor-imagen-contenedor img {

    display: block;

    max-width: 88vw;

    max-height: 88vh;

    width: auto;

    height: auto;

    object-fit: contain;

    box-shadow:
        0 10px 60px
        rgba(0,0,0,0.5);
}


/* =====================================================
   CERRAR
===================================================== */

.cerrar-portafolio {

    position: absolute;

    top: 18px;

    right: 25px;

    width: 55px;

    height: 55px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    background: transparent;

    border: none;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 43px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10001;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.cerrar-portafolio:hover {

    opacity: 0.6;

    transform: scale(1.08);
}


/* =====================================================
   NAVEGACIÓN DEL VISOR
===================================================== */

.navegacion-portafolio {

    position: absolute;

    top: 50%;

    transform:
        translateY(-50%);

    width: 60px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 0;

    background: transparent;

    border: none;

    color: #ffffff;

    font-family: Arial, sans-serif;

    font-size: 70px;

    font-weight: 200;

    line-height: 1;

    cursor: pointer;

    z-index: 10001;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}


.navegacion-portafolio:hover {

    opacity: 0.6;
}


.navegacion-portafolio.anterior {

    left: 20px;
}


.navegacion-portafolio.siguiente {

    right: 20px;
}


.navegacion-portafolio:disabled {

    opacity: 0.15;

    pointer-events: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .portafolio-inicio {

        padding:
            175px
            8vw
            70px;
    }


    .galeria-periodo {

        padding:
            175px
            4vw
            70px;
    }


    .galeria-imagenes {

        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap: 18px;
    }

}


/* =====================================================
   TABLET PEQUEÑA
===================================================== */

@media (max-width: 768px) {

    .portafolio-inicio {

        min-height: auto;

        padding:
            145px
            8vw
            60px;
    }


    .portafolio-encabezado {

        margin-bottom: 50px;
    }


    .portafolio-encabezado h1 {

        font-size:
            clamp(48px, 12vw, 75px);

        letter-spacing: -3px;
    }


    .portafolio-descripcion {

        font-size: 14px;
    }


    .periodo-boton {

        min-height: 85px;

        grid-template-columns:
            45px 1fr 35px;

        gap: 10px;

        padding:
            0
            8px;
    }


    .periodo-boton:hover {

        padding-left: 8px;

        padding-right: 8px;
    }


    .periodo-titulo {

        font-size: 25px;
    }


    .galeria-periodo {

        min-height: auto;

        padding:
            145px
            5vw
            60px;
    }


    .galeria-encabezado {

        align-items: flex-start;

        flex-direction: column-reverse;

        margin-bottom: 35px;
    }


    .galeria-etiqueta,
    .galeria-encabezado h2 {

        text-align: left;
    }


    .galeria-imagenes {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 14px;
    }

}


/* =====================================================
   CELULAR
===================================================== */

@media (max-width: 500px) {

    .portafolio-inicio {

        padding:
            130px
            7vw
            50px;
    }


    .portafolio-subtitulo {

        font-size: 11px;

        letter-spacing: 3px;
    }


    .portafolio-encabezado h1 {

        font-size: 48px;

        letter-spacing: -2px;
    }


    .portafolio-descripcion {

        font-size: 13px;

        line-height: 1.65;
    }


    .periodo-boton {

        min-height: 78px;

        grid-template-columns:
            35px 1fr 30px;
    }


    .periodo-numero {

        font-size: 11px;
    }


    .periodo-titulo {

        font-size: 20px;

        letter-spacing: -0.5px;
    }


    .periodo-flecha {

        font-size: 24px;
    }


    .galeria-periodo {

        padding:
            130px
            5vw
            50px;
    }


    .galeria-encabezado {

        padding-bottom: 22px;

        gap: 25px;
    }


    .galeria-encabezado h2 {

        font-size: 42px;

        letter-spacing: -1.5px;
    }


    .galeria-imagenes {

        grid-template-columns: 1fr;

        gap: 16px;
    }


    .proyecto-portafolio {

        aspect-ratio: 16 / 10;
    }


    .visor-portafolio {

        padding: 15px;
    }


    .visor-imagen-contenedor img {

        max-width: 94vw;

        max-height: 84vh;
    }


    .cerrar-portafolio {

        top: 8px;

        right: 10px;

        width: 45px;

        height: 45px;

        font-size: 36px;
    }


    .navegacion-portafolio {

        width: 42px;

        height: 60px;

        font-size: 48px;
    }


    .navegacion-portafolio.anterior {

        left: 0;
    }


    .navegacion-portafolio.siguiente {

        right: 0;
    }

}
/* ======================================
   LOGO CENTRAL REAL
======================================= */

.logos-centrales {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.empresa {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.logo-central-imagen {
    display: block;
    width: 300px;
    height: auto;
    object-fit: contain;
}

.empresa p {
    margin-top: -100px;
    text-align: center;
}
@media (max-width: 768px) {

    .logo-central-imagen {
        width: 240px;
    }

}

@media (max-width: 500px) {

    .logo-central-imagen {
        width: 200px;
    }

}
/* =====================================================
   AJUSTE DE DISTRIBUCIÓN - INDEX
===================================================== */

/* Logo central */
.logos-centrales {
    transform: translateY(-20px);
}

/* Tarjetas principales */
.tarjetas {
    transform: translateY(-1000px);
}


/* ==========================================
   INDEX - AJUSTES PARA CELULAR
========================================== */

@media (max-width: 500px) {

    /* Distribución general de la portada */
    .hero {
        min-height: 100svh;
        height: auto;
        box-sizing: border-box;
        justify-content: flex-start;
        padding: 145px 16px 35px;
    }

    /* Logo y nombre centrados */
    .logos-centrales {
        width: 100%;
        margin-top: 5px;
        gap: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transform: none;
    }

    .empresa {
        min-width: 0;
        width: 100%;
        text-align: center;
    }

    /* Tamaño del logo real */
    .logo-central-imagen {
        display: block;
        width: 170px;
        max-width: 55vw;
        height: auto;
        margin: 0 auto;
        object-fit: contain;
    }

    /* Texto cercano al logo */
    .empresa p {
        margin: 0% 0 0;
        padding: 0;
        font-size: 15px;
        line-height: 1.15;
        text-align: center;
    }

    /* Tarjetas principales */
    .botones-inicio {
        width: 100%;
        margin-top: 380px;
        flex-direction: column;
        align-items: center;
        gap: 14px;
        transform: none;
    }

    .boton-inicio {
        width: 100%;
        max-width: 430px;
        height: 95px;
        box-sizing: border-box;
        padding: 10px;
        font-size: clamp(29px, 7vw, 36px);
        letter-spacing: 0.5px;
    }
}

/* ==========================================
   ICONO DE WHATSAPP - CONTACTO
========================================== */

.icono-whatsapp-contacto {
    display: block;
    width: 22px;
    height: 22px;
    object-fit: contain;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.redes-contacto a:hover .icono-whatsapp-contacto {
    transform: translateY(-3px);
    opacity: 0.75;
}


/* ==========================================
   INDEX - BAJAR TARJETAS EN COMPUTADORA
========================================== */

@media (min-width: 501px) {
    .botones-inicio {
        transform: translateY(70px);
    }
}

/* Imagen principal de la página Contacto */
.imagen-marca-contacto {
    display: block;
    width: min(420px, 80%);
    height: auto;
    object-fit: contain;
    margin: 0 auto;
}

/* Adaptación para celulares */
@media (max-width: 768px) {
    .imagen-marca-contacto {
        width: min(280px, 75%);
        margin: 0 auto 25px;
    }
}


/* ==========================================
   INDEX - TARJETAS OPTIMIZADAS PARA CELULAR
========================================== */

@media screen and (max-width: 500px) {

    body.pagina-inicio .botones-inicio,
    body:not(.pagina-contacto):not(.pagina-portafolio):not(.pagina-clientes) .botones-inicio {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 25px auto 0 !important;
        padding: 0 16px 25px !important;
        box-sizing: border-box !important;
        transform: translateY(0) !important;
    }

    .botones-inicio .boton-inicio {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 360px !important;
        height: 78px !important;
        min-height: 78px !important;
        margin: 0 !important;
        padding: 10px !important;
        box-sizing: border-box !important;
        font-size: 30px !important;
        line-height: 1.1 !important;
    }
}