/* ==========================================================================
   Descubrí UTEC 2027 — estilos de la landing de preinscripciones
   Se carga después de build/css/app_preinscripcion.css y pisa lo necesario.
   Paleta: verde #33ff00 · fucsia #fe019a · celeste #00ffff · violeta #8956f5
   Fuente: Poppins (Google Fonts) en todo el sitio.
   ========================================================================== */

:root {
    --d-verde: #33ff00;
    --d-fucsia: #fe019a;
    --d-celeste: #00ffff;
    --d-violeta: #8956f5;
    --d-negro: #1d1d1b;
    --d-azul-btn: #009ee2;
    --d-azul-btn-hover: #0079ad;
    --d-gris-input: #ececec;
    --d-font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ---------- Tipografía: Poppins en lugar de la fuente UTEC ---------- */
html, body, .ff-u, .ff-ub, .ff-a, .ff-gceb, .geologica-font, h1.geologica-font,
.btn, .form-control, input, select, textarea, button, .modal, .card-body p, .card-body p b, .card-body p strong,
#preinscripcion_form input.form-control::placeholder,
#preinscripcion_form .has-float-label .form-control:placeholder-shown:not(:focus) + * {
    font-family: var(--d-font) !important;
}

/* Pesos calibrados contra prod (descubri.utec.edu.uy): la fuente UTEC "bold" rinde como un semibold */
.ff-u, .ff-ub { font-weight: 600; }
.geologica-font, h1.geologica-font { font-weight: 700; }
.ff-a { font-weight: 400; }
.card-body p { font-weight: 400 !important; }
.card-body p b, .card-body p strong { font-weight: 600 !important; }

html, body, .text-black { color: var(--d-negro); }
body { background: #fff; }

/* ---------- Hero ---------- */
#hero-landing {
    background: var(--d-negro) url(/assets/static/landing/2027/hero-escritorio.jpg) no-repeat center top;
    background-size: cover;
    min-height: 46vw;
    max-height: none;
    position: relative;
    overflow: hidden;
    color: #fff;
}

#hero-landing .navbar { position: relative; z-index: 20; }
#hero-landing .navbar-brand img { height: 110px; width: auto; }

#hero-landing .navbar-toggler,
.navbar-dark .navbar-toggler.text-white {
    color: #fff !important;
    border-color: transparent !important;
    font-size: 2.25rem !important;
    padding: 0.25rem 0.75rem;
}

#hero-landing .navbar-collapse {
    position: absolute;
    right: 0;
    top: 100px;
    background-color: var(--d-negro);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 6px;
    z-index: 999;
}

#hero-landing .navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link {
    color: #fff;
    font-weight: 400;
    padding: 0.4rem 1.25rem;
}

#hero-landing .navbar-dark .navbar-nav .nav-link:hover,
#hero-landing .navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
    color: var(--d-azul-btn);
    font-weight: 400;
}

#hero-landing .intro {
    position: relative;
    z-index: 10;
    padding-top: 6vw;
    padding-bottom: 8vw;
}

#hero-landing .intro h1 {
    color: #fff;
    text-align: left;
    font-size: 4.6vw;
    line-height: 1.05;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0 0 2.2vw 0 !important;
}

#hero-landing .intro .hero-sub {
    color: #fff;
    font-size: 1.55vw;
    line-height: 1.35;
    font-weight: 500;
    margin: 0;
    max-width: 34em;
}

#hero-landing .hero-chica {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 78%;
    width: auto;
    z-index: 5;
    pointer-events: none;
}

/* ---------- Franja de 4 colores ---------- */
#keen-slider-header { background: var(--d-negro); }

#keen-slider-header .keen-slider__slide {
    min-height: 5.7vw;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--d-negro);
    font-weight: 600;
    font-size: 2.4vw;
    line-height: 1;
    text-align: center;
    padding: 0.8vw 1vw;
}

.franja-verde { background: var(--d-verde); }
.franja-fucsia { background: var(--d-fucsia); }
.franja-celeste { background: var(--d-celeste); }
.franja-violeta { background: var(--d-violeta); }

/* ---------- Títulos de sección ---------- */
.d-titulo {
    color: var(--d-negro);
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1.15;
    text-align: center;
    margin: 0;
}

/* ---------- Encontrá tu carrera ---------- */
#nuestras-carreras { background: #fff; padding-top: 6rem; padding-bottom: 5rem; }
#nuestras-carreras .d-titulo { margin-bottom: 4rem; }

#listado-carreras .titulo-listado {
    color: var(--d-negro);
    font-weight: 600;
    font-size: 1.65rem;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

#listado-carreras li { margin-bottom: 0.5rem !important; }

#listado-carreras a,
#listado-carreras li a {
    color: var(--d-negro);
    font-weight: 500;
    font-size: 1.1rem;
    line-height: 1.3;
}

a:hover, a.sortable-item:hover { color: var(--d-azul-btn) !important; }

.span-cursos {
    height: 22px;
    width: 5px;
    margin-right: 14px;
    flex: 0 0 5px;
}

.hashtag_carreras { right: 8%; bottom: 3rem; z-index: 1; }
.hashtag_carreras .hashtag { width: 230px; }

/* Mensaje de gracias */
#form-msg .navbar-text {
    background-color: var(--d-azul-btn) !important;
    color: var(--d-negro) !important;
    border-radius: 25px !important;
}
#form-msg h4 { font-weight: 500; }

/* ---------- Formulario sobre trama negra ---------- */
#bg-info { background: transparent; }

#solicitud-info {
    background: #000 url(/assets/static/landing/2027/trama-desktop.jpg) no-repeat center top;
    background-size: cover;
    padding-top: 7rem !important;
    padding-bottom: 1rem !important;
}


#preinscripcion_form .form-control {
    background-color: var(--d-gris-input);
    border-radius: 40px;
    height: 64px;
    color: var(--d-negro);
    font-weight: 500;
    font-size: 16px;
    padding: 1.5rem 1.6rem 0.9rem 1.6rem;
    box-shadow: none;
}

#preinscripcion_form .form-control:focus {
    background-color: var(--d-gris-input);
    /* borde gris suave, apenas más oscuro que el fondo del input */
    box-shadow: 0 0 0 1.5px #c6c6c6;
    outline: none;
}

#preinscripcion_form .has-float-label > span,
#preinscripcion_form .form-group span {
    left: 1.6rem;
    font-weight: 500;
    color: var(--d-negro);
    opacity: 1;
}

#preinscripcion_form input.form-control::placeholder,
#preinscripcion_form .has-float-label .form-control:placeholder-shown:not(:focus) + * {
    color: var(--d-negro);
    font-weight: 500;
    font-size: 16px;
}

/* Los mensajes de error quedan en rojo (#dc3545), como en la versión anterior */

/* Botones azules (Enviar / Preinscribite) */
.btn-celeste,
.btn-celeste:not(:disabled):not(.disabled):active {
    color: var(--d-negro) !important;
    background-color: var(--d-azul-btn) !important;
    border-color: var(--d-azul-btn) !important;
    font-weight: 600;
    font-size: 18px;
    border-radius: 50px;
    padding: 1.25rem 1rem !important;
    width: 470px;
    max-width: 100%;
    transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

.btn-celeste:hover, .btn-celeste:focus {
    color: #fff !important;
    background-color: var(--d-azul-btn) !important;
    border-color: var(--d-azul-btn) !important;
}

/* ---------- Video ---------- */
#conocenos-video { padding-top: 6rem; }

#conocenos-video .multimedia__item {
    margin-bottom: -230px;
}

.multimedia__item__img {
    border-radius: 28px;
    margin-bottom: 0 !important;
}

/* Play del video: triángulo blanco (play.svg, de Leticia) centrado sobre la portada */
.multimedia__item__play_icon::before {
    content: "";
    width: 110px;
    height: 110px;
    padding: 0;
    background: url(/assets/static/landing/2027/play.svg) no-repeat center / contain;
    opacity: 0.95;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.35));
}

.multimedia__item__play_icon:hover::before {
    content: "";
    background: url(/assets/static/landing/2027/play.svg) no-repeat center / contain;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.12);
}

/* ---------- ¿Ya sabés lo que querés estudiar? ---------- */
.banner { margin-top: 230px; margin-bottom: 0 !important; background: #fff; }
.banner #pre-inscripcion { padding-top: 7rem !important; padding-bottom: 3rem !important; }
.banner .d-titulo { margin-bottom: 2.5rem; }

/* ---------- Galería ---------- */
#galeria-titulo { background: #fff; padding-top: 7rem; padding-bottom: 3.5rem; }
#galeria-titulo .d-titulo { font-size: 2.1rem; }

#galeria .keen-slider-background { background: #fff !important; }
#galeria .swiper-slide a {
    display: block;
    overflow: hidden;
    border-radius: 25px;
    margin: 0 0.5rem;
}

#galeria .swiper-slide img {
    border-radius: 25px;
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 3 / 2;
    margin: 0 !important;
    display: block;
    transition: transform .6s ease-in-out;
}

/* Zoom suave al pasar el mouse por las fotos de la galería */
#galeria .swiper-slide a:hover img { transform: scale(1.08); }

/* ---------- Preguntas frecuentes ---------- */
#preguntas-frecuentes {
    background: #fff !important;
    padding-top: 7rem !important;
    padding-bottom: 5rem !important;
}

#preguntas-frecuentes .d-titulo { font-size: 2.1rem; margin-bottom: 3rem; }

#preguntas-frecuentes .cardion .card-header {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--d-negro);
    border-radius: 0;
    margin-bottom: 0;
    min-height: 5rem;
    padding: 1.5rem 0.25rem 1.6rem 0.25rem;
    color: var(--d-negro);
    font-weight: 500;
    font-size: 1.15rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#preguntas-frecuentes .cardion { margin-bottom: 1.75rem; }

#preguntas-frecuentes .cardion .card-header span { padding-right: 1rem; }

#accordion .card-header:after,
#accordion .card-header.collapsed:after {
    float: none;
    margin-top: 0;
    color: var(--d-negro);
    font-size: 1.1rem;
}

#preguntas-frecuentes .card-body {
    background: transparent;
    color: var(--d-negro);
    padding: 1rem 0.25rem 0.5rem 0.25rem;
    margin-top: 0;
    font-weight: 400;
}

/* ---------- Footer ---------- */
footer.d-footer,
footer.bg-black {
    background: var(--d-negro) url(/assets/static/landing/2027/footer.jpg) repeat-x center top !important;
    background-size: auto 100% !important;
    padding: 4rem 0 !important;
}

footer.d-footer .footer-logo { height: 120px; width: auto; }

footer.d-footer .footer-contacto {
    color: #fff;
    font-weight: 500;
    font-size: 17px;
    margin: 0;
}

footer.d-footer .footer-contacto a { color: #fff; }
footer.d-footer .footer-contacto a:hover { color: var(--d-azul-btn) !important; }

.client_logos { display: flex; justify-content: center; gap: 12px; }

.client_logos a { display: inline-flex; }

.client_logos .iconify {
    background-color: #fff;
    color: var(--d-negro) !important;
    padding: 9px;
    font-size: 2.6rem !important;
    border-radius: 11px;
    width: 42px;
    height: 42px;
    margin: 0;
    transition: transform .15s ease-in-out;
}

.client_logos a:hover .iconify { transform: translateY(-3px); }

/* ---------- Modal de carrera ---------- */
#modalCarrera .modal-content { border-radius: 25px; overflow: hidden; border: 0; }
#modalCarrera .modal-header { border: 0; }
#modalCarrera .modal-header h4 { font-weight: 600; }
#modalCarrera .modal-body p { font-weight: 400; }
#modalCarrera .modal-body p b { font-weight: 600; }
#modalCarrera .btn-celeste { width: auto; padding: 0.6rem 2.5rem !important; }

/* ---------- Responsive ---------- */
@media (min-width: 992px) {
    /* En desktop el título y el subtítulo van siempre en 2 líneas (el <br> manda) */
    #hero-landing .intro h1, #hero-landing .intro .hero-sub { white-space: nowrap; }
    #hero-landing .intro .col-lg-8 { flex: 0 0 auto; max-width: none; }
}

@media (min-width: 1600px) {
    /* En monitores grandes el hero no puede tapar la franja de colores: se limita al alto de la ventana */
    #hero-landing { min-height: min(46vw, 78vh, 920px); }
    #hero-landing .intro { padding-top: 5vw; padding-bottom: 5vw; }
}

@media (min-width: 1900px) {
    #hero-landing .intro h1 { font-size: 88px; }
    #hero-landing .intro .hero-sub { font-size: 30px; }
    #keen-slider-header .keen-slider__slide { font-size: 46px; min-height: 110px; }
}

@media (max-width: 1199.98px) {
    #hero-landing .hero-chica { height: 70%; bottom: 10%; }
}

@media (max-width: 991.98px) {
    #hero-landing .intro h1 { font-size: 5.5vw; }
    #hero-landing .intro .hero-sub { font-size: 2vw; }
    #hero-landing .hero-chica { height: 70%; bottom: 8%; }
    #keen-slider-header .keen-slider__slide { font-size: 3vw; min-height: 8vw; }
    .d-titulo { font-size: 2.1rem; }
}

@media (max-width: 800px) {
    #hero-landing {
        background: var(--d-negro) url(/assets/static/landing/2027/hero-mobile.jpg) no-repeat center top;
        background-size: cover;
        min-height: 150vw;
    }

    #hero-landing .navbar { padding-left: 1rem; padding-right: 1rem; }
    #hero-landing .navbar-brand img { height: 88px; }
    #hero-landing .navbar-collapse { right: 16px; top: 90px; }

    #hero-landing .intro {
        padding-top: 8vw;
        padding-bottom: 0;
        text-align: center !important;
    }

    #hero-landing .intro h1 {
        font-size: 9.2vw;
        text-align: center !important;
        margin: 0 auto 4vw auto !important;
    }

    #hero-landing .intro .hero-sub {
        font-size: 4vw;
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
    }

    #hero-landing .hero-chica {
        height: 50%;
        bottom: 0;
        right: -4%;
    }

    #keen-slider-header .keen-slider__slide {
        font-size: 5.6vw;
        min-height: 16vw;
        padding: 3vw 2vw;
    }

    .d-titulo, .sm-fs-32 { font-size: 1.85rem !important; }

    #nuestras-carreras { padding-top: 4rem; padding-bottom: 3.5rem; }
    #nuestras-carreras .d-titulo { margin-bottom: 2.5rem; }
    #listado-carreras { text-align: left !important; }
    #listado-carreras .titulo-listado { font-size: 1.35rem; }
    #listado-carreras li a { font-size: 1rem; }
    .hashtag_carreras { right: 16px; bottom: 0; }
    .hashtag_carreras .hashtag { width: 90px !important; }

    #solicitud-info {
        background: #000 url(/assets/static/landing/2027/trama-mobile.jpg) no-repeat center top;
        background-size: cover;
        padding-top: 4rem !important;
    }

    #solicitud-info .container { padding-left: 16px; padding-right: 16px; }

    .btn-celeste { width: 100%; padding: 1.1rem 0 !important; }

    #conocenos-video { padding-top: 3rem; }
    #conocenos-video .multimedia__item { margin-bottom: -90px; width: 100%; }
    .multimedia__item__img { border-radius: 18px; }
    .multimedia__item__play_icon::before,
    .multimedia__item__play_icon:hover::before { width: 70px; height: 70px; transform: translate(-50%, -50%); }

    .banner { margin-top: 90px; }
    .banner #pre-inscripcion { padding-top: 3.5rem !important; padding-bottom: 2rem !important; }
    .banner .d-titulo { margin-bottom: 2rem; }

    #galeria-titulo { padding-top: 4.5rem; padding-bottom: 2.5rem; }
    #galeria-titulo .d-titulo { font-size: 1.6rem !important; }
    #galeria .swiper-slide a, #galeria .swiper-slide img { border-radius: 18px; }

    #preguntas-frecuentes { padding-top: 4.5rem !important; padding-bottom: 3.5rem !important; }
    #preguntas-frecuentes .d-titulo { margin-bottom: 2rem; }
    #preguntas-frecuentes .d-titulo { font-size: 1.6rem !important; }
    #preguntas-frecuentes .cardion { margin-bottom: 1rem; }
    #preguntas-frecuentes .cardion .card-header { font-size: 1rem; min-height: 4rem; margin-bottom: 0; padding: 1.2rem 0.25rem 1.3rem 0.25rem; }

    footer.d-footer .footer-logo { height: 90px; margin-bottom: 1rem; }
    footer.d-footer .footer-contacto { font-size: 15px; margin-bottom: 1.25rem; }
    footer.d-footer .footer-contacto .sep { display: none; }
    footer.d-footer .footer-contacto span.linea { display: block; }
}

@media (max-width: 400px) {
    #hero-landing .intro h1 { font-size: 10vw; }
    #hero-landing .hero-chica { height: 50%; }
}