* { box-sizing: border-box; margin:0; padding:0; font-family: Arial, sans-serif; }


@font-face {
            font-family: 'AvenirRegular';
            src: url('../fonts/AvenirNextLTPro-Regular.otf');
            font-weight: 400;
            font-style: normal;
            font-display: swap;
        }

        @font-face {
            font-family: 'Freigeist';
            src: url('../fonts/freigeist-widemedium.ttf') format('truetype');
            font-weight: 700;
            font-style: normal;
            font-display: swap;
        }

        body {
            height: 100vh;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            background-color: #d4c0a1;
            flex-direction: column;
        }

        .header{
            margin-bottom: 1.5rem;
            padding-top: 2rem;
            padding-bottom: 3rem;
        }

        .header img{
            position: absolute;
            left: 0;
            margin-left: 3rem;
        }

        .container {
            padding: 20px 40px;
            border-radius: 8px;
            width: 100%;
            max-width: 700px;
            text-align: center;
        }

        .logo { margin-bottom: 20px; }
        .logo img { width: 60px; }

        h1 { font-family: 'Freigeist'; font-size: 45px; margin-bottom: 10px; color: #000}
        p { font-size: 20px; color: #555; margin-bottom: 20px; font-family: 'AvenirRegular'; }

        input[type="text"],
        input[type="password"] {
            width: 100%;
            padding: 12px 15px;
            margin: 10px 0;
            border: 1px solid #ccc;
            border-radius: 4px;
            font-size: 14px;
        }

        button {
            width: 100%;
            padding: 12px;
            background-color: #000;
            color: #fff;
            border: none;
            border-radius: 4px;
            font-size: 18px;
            cursor: pointer;
            margin-top: 15px;
            font-family: 'Freigeist';
        }

        button:hover { background-color: #333; }

        .forgot { margin-top: 20px; font-size: 12px; color: #222; }
        .forgot a { text-decoration: none; color: #222; font-size: 18px; }
        .forgot a:hover { text-decoration: underline; }

        /* --- Estilos para password con icono --- */
        .password-wrapper {
            position: relative;
        }

        .password-wrapper input {
            width: 100%;
            padding-right: 2.5rem; /* espacio para el icono */
            padding: 12px 15px;
        }

        .password-wrapper .toggle-password {
            position: absolute;
            top: 50%;
            right: 0.75rem;
            transform: translateY(-50%);
            cursor: pointer;
            color: #555;
            font-size: 1.1rem;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin-right: -15px; /* corresponde a padding de columnas */
            margin-left: -15px;
            box-sizing: border-box;
        }

        .text-left{
            text-align: left !important;
        }

        
        .col-md-2 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            box-sizing: border-box;
        }

        /* A partir de 768px (md en adelante) */
        @media (min-width: 768px) {
            .col-md-2 {
                flex: 0 0 16.666667%;
                max-width: 16.666667%;
            }
        }

        .col-md-5 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            box-sizing: border-box;
        }

        /* A partir de 768px (md en adelante) */
        @media (min-width: 768px) {
            .col-md-5 {
                flex: 0 0 41.666667%;
                max-width: 41.666667%;
            }
        }

        .col-md-6 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            box-sizing: border-box;
        }

        

        @media (min-width: 768px) {
            .col-md-6 {
                flex: 0 0 50%;
                max-width: 50%;
            }
        }



        .col-md-12 {
            position: relative;
            width: 100%;
            padding-right: 15px;
            padding-left: 15px;
            box-sizing: border-box;
        }

        @media (min-width: 768px) {
            .col-md-12 {
                flex: 0 0 100%;
                max-width: 100%;
            }
        }

        
        .footer a{
            text-decoration: none;
        }

        .footer p{
            font-family: 'AvenirRegular';
            color: black;
            margin: 0px;
            padding: 0px;
            font-size: 15px !important;
            margin-top: 0.75rem !important;
            margin-bottom: 0.75rem !important;
        }

        .footer .red-social {
            max-height: 30px;
            padding-right: 20px;
        }

        .my-4 {
            margin-top: 1.5rem !important;
            margin-bottom: 1.5rem !important;
        }

        .my-5 {
            margin-top: 3rem !important;
            margin-bottom: 3rem !important;
        }