/* app.css */
/* =====================================================
   FUENTE INSTITUCIONAL
===================================================== */

@font-face {
    font-family: 'Poppins';
    src: url('Poppins-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

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

body{
    background:#ffffff;
    color:#555;
}

    /* =========================================
       HEADER
    ========================================= */

    .top-bar{
        width:100%;
        height:78px;
        background:#f58a00;
        display:flex;
        align-items:center;
        padding:0 42px;
        border-bottom:1px solid rgba(255,255,255,.35);
    }
    .logo-header{
        width:200px;
        height:200px;
        object-fit:contain;
    }

    .top-logo{
        display:flex;
        align-items:center;
        gap:18px;

    }

    .logo-mini{
        width:36px;
        height:36px;
        background:#fff;
        border-radius:6px;
    }

    .top-divider{
        width:1px;
        height:38px;
        background:rgba(255,255,255,.55);
    }

    .top-logo span{
        color:#fff;
        font-size:31px;
        font-weight:600;
    }

    .top-subbar{
        width:100%;
        height:58px;
        background:#f58a00;
        position:relative;
    }

    .top-subbar::after{
        content:'';
        position:absolute;
        left:50%;
        top:8px;
        width:1px;
        height:42px;
        background:rgba(255,255,255,.55);
    }

    /* =========================================
       MAIN WRAPPER
    ========================================= */

    .main-wrapper{
        width:100%;
        max-width:1280px;
        margin:55px auto 0;
        padding:0 20px;
    }

    /* =========================================
       HERO
    ========================================= */

    .hero{
        width:100%;
        height:300px;
        background:#f58a00;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .hero-logo{
        width:95px;
        height:95px;
         
        border-radius:14px;
        margin-bottom:22px;
    }

    .hero h1{
        color:#fff;
        font-size:28px;
        line-height:1.45;
        font-weight:700;
    }

    /* =========================================
       CONTENT SECTION
    ========================================= */

    .content-section{
        width:100%;
        display:flex;
        background:#ffffff;
        margin-top:22px;
        border:1px solid #e5e5e5;
        overflow:hidden;
        position:relative;
    }

    /* =========================================
       LEFT PANEL
    ========================================= */

    .left-info {
        width: 60%;
        padding: 72px 70px 62px;
        position: relative;
        background: #f4ebca url("../img/envolvente2.png") no-repeat center center;
        background-size: cover;   /* Escala la imagen para cubrir todo el div */
        /* Si quieres que se estire exactamente al ancho y alto del div: */
        /* background-size: 100% 100%; */

       /* clip-path: polygon(
            0 0,
            88% 0,
            97% 50%,
            88% 100%,
            0 100%
        );*/
    }

    .left-info p{
        font-size:15px;
        line-height:2.05;
        color:#5d5d5d;
        margin-bottom:32px;
        font-weight:400;
        text-align: justify;
        margin-right: 50px; /* agrega espacio a la derecha */
    }

    .left-info strong{
        font-weight:700;
        color:#454545;
    }

    .left-line{
        width:26px;
        height:10px;
        background:#f58a00;
        margin-top:36px;
    }



    /* =========================================
       RIGHT PANEL
    ========================================= */

    .right-form{
        width:46%;
        background:#ffffff;
        padding:72px 70px 55px;
    }

    .right-form h2{
        color:#e18b08;
        font-size:19px;
        line-height:1.75;
        font-weight:700;
        margin-bottom:40px;
    }

    .input-group{
        margin-bottom:22px;
    }

    .input-group input{
        width:100%;
        height:64px;
        border:2px solid #d79b46;
        border-radius:6px;
        padding:0 22px;
        font-size:18px;
        font-family:'Montserrat', sans-serif;
        background:#fff;
        outline:none;
    }

    .input-group input::placeholder{
        color:#9a9a9a;
    }

    .alert-box{
        width:100%;
        height:70px;
        background:#f4ebca;
        border-radius:6px;
        display:flex;
        align-items:center;
        gap:18px;
        padding:0 22px;
        margin-bottom:26px;
    }

    .alert-icon{
        width:42px;
        height:42px;
        background:#f58a00;
        border-radius:8px;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#fff;
        font-size:24px;
        font-weight:700;
    }

    .alert-box span{
        color:#df8d12;
        font-size:16px;
        font-weight:600;
    }

    .recaptcha{
        width:100%;
        height:138px;
        border-radius:12px;
        background:#dcdcdc;
        display:flex;
        align-items:center;
        justify-content:center;
        color:#8f8f8f;
        font-size:28px;
        margin-bottom:22px;
    }

    .btn-submit{
        width:100%;
        height:66px;
        border:none;
        border-radius:6px;
        background:#f58a00;
        color:#fff;
        font-size:20px;
        font-weight:700;
        cursor:pointer;
        transition:.2s;
    }

    .btn-submit:hover{
        opacity:.94;
    }

    /* =========================================
       FOOTER TOP
    ========================================= */

    .footer-top{
        width:100%;
        background:#e8e8ea;
        min-height:190px;
        margin-top:36px;
        padding:38px 80px;
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
    }

    .footer-links{
        display:flex;
        gap:120px;
    }

    .footer-links a{
        text-decoration:none;
        color:#5f5f5f;
        font-size:15px;
        font-weight:400;
    }

    .footer-emblem{
        width:100px;
        height:100px;
        background:#f58a00;
        border-radius:12px;
    }

    /* =========================================
       MAIN FOOTER
    ========================================= */

    .footer-main{
        width:100%;
        background:#f58a00;
        padding:42px 80px;
        display:flex;
        justify-content:space-between;
        align-items:flex-end;
        flex-wrap:wrap;
    }

    .footer-brand{
        color:#fff;
    }

    .logo-big{
        font-size:82px;
        font-weight:800;
        line-height:1;
    }

    .sub{
        margin-top:6px;
        letter-spacing:8px;
        font-size:14px;
        font-weight:600;
    }

    .privacy{
        margin-top:42px;
        font-size:13px;
        font-weight:500;
    }

    .privacy a{
        color:#fff;
        text-decoration:none;
    }

    .privacy a:hover{
        text-decoration:underline;
    }

    .social{
        text-align:right;
        color:#fff;
    }

    .social-title{
        margin-bottom:18px;
        font-size:13px;
    }

    .social-icons{
        display:flex;
        gap:12px;
        justify-content:flex-end;
    }

    .social-icons div{
        width:34px;
        height:34px;
        border-radius:50%;
        border:2px solid #fff;
    }

    /* =========================================
       FOOTER BOTTOM
    ========================================= */

    .footer-bottom{
        width:100%;
        background:#efefef;
        padding:16px;
        text-align:center;
        color:#c68b3e;
        font-size:12px;
        font-weight:600;
    }

    /* =========================================
       RESPONSIVE
    ========================================= */

    @media(max-width:1100px){

        .content-section{
            flex-direction:column;
        }

        .left-info,
        .right-form{
            width:100%;
        }

        .left-info{
            clip-path:none;
        }

    }

    @media(max-width:768px){

        .hero{
            height:auto;
            padding:60px 20px;
        }

        .hero h1{
            font-size:22px;
        }

        .left-info,
        .right-form{
            padding:40px 30px;
        }

        .footer-top,
        .footer-main{
            padding:35px 25px;
        }

        .footer-links{
            flex-direction:column;
            gap:35px;
        }

    }

/* =========================================
   RESULTADO
========================================= */

.result-title{
    text-align:center;
    font-size:64px;
    font-weight:800;
    color:#333;
    margin:55px 0 45px;
}

.result-layout{
    background:#ffffff;
    border-radius:0 0 40px 40px;
    overflow:hidden;
}

.result-form{
    width:52%;
    padding:55px 38px;
    background:#f5f5f5;
}

.result-message{
    width:48%;
    background:#f4ebca;
    padding:70px 45px;
    border-radius:40px 0 40px 0;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.result-message p{
    font-size:15px;
    line-height:2;
    color:#333;
    margin-bottom:45px;
}

.result-message strong{
    font-weight:800;
}

.result-form .input-group{
    margin-bottom:24px;
}

.result-form label{
    display:block;
    margin-bottom:8px;
    color:#e18b08;
    font-size:15px;
    font-weight:700;
}

.result-form input{
    width:100%;
    height:64px;
    border:2px solid #d79b46;
    border-radius:6px;
    padding:0 18px;
    font-size:18px;
    font-family:'Montserrat', sans-serif;
    outline:none;
}

.btn-secondary{
    margin-top:16px;
}
.btn-naranja {
    background-color: #f57c00;
    border: none;
    color: #fff;
    font-weight: 600;
    width: 100%;
    margin-top: 20px;
    padding: 12px 20px;   /* aumenta alto y ancho interno */
}

.btn-naranja:hover {
    background-color: #e65100;
}