/*
Theme Name:CREA UPN 2
Author:Universidad Privada del Norte
Description:Tema personalizado para el landing page del concurso CREA UPN
Version:2.0
*/

@charset "UTF-8";

/* ==========================================
   FUENTES LOCALES
   ========================================== */
@font-face { font-family:"TelegrafRegular"; src:url(../fonts/Telegraf-Regular.eot); src:url(../fonts/Telegraf-Regular.eot#iefix) format("embedded-opentype"), url(../fonts/Telegraf-Regular.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:"TelegrafSemiBold"; src:url(../fonts/Telegraf-SemiBold.eot); src:url(../fonts/Telegraf-SemiBold.eot#iefix) format("embedded-opentype"), url(../fonts/Telegraf-SemiBold.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:"TelegrafUltraBold"; src:url(../fonts/Telegraf-UltraBold.eot); src:url(../fonts/Telegraf-UltraBold.eot#iefix) format("embedded-opentype"), url(../fonts/Telegraf-UltraBold.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:"SharpGroteskBook"; src:url(../fonts/SharpGrotesk-Book15.eot); src:url(../fonts/SharpGrotesk-Book15.eot#iefix) format("embedded-opentype"), url(../fonts/SharpGrotesk-Book15.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:"SharpGroteskSemiBold"; src:url(../fonts/SharpGrotesk-SemiBold15.eot); src:url(../fonts/SharpGrotesk-SemiBold15.eot#iefix) format("embedded-opentype"), url(../fonts/SharpGrotesk-SemiBold15.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:"SharpGroteskBold"; src:url(../fonts/SharpGrotesk-Bold15.eot); src:url(../fonts/SharpGrotesk-Bold15.eot#iefix) format("embedded-opentype"), url(../fonts/SharpGrotesk-Bold15.ttf) format("truetype"); font-weight:normal; font-style:normal; font-display:swap; }
@font-face { font-family:'Sticky Notes'; src:url('../fonts/StickyNotesRegular.eot'); src:url('../fonts/StickyNotesRegular.eot?#iefix') format('embedded-opentype'), url('../fonts/StickyNotesRegular.woff2') format('woff2'), url('../fonts/StickyNotesRegular.woff') format('woff'), url('../fonts/StickyNotesRegular.ttf') format('truetype'), url('../fonts/StickyNotesRegular.svg#StickyNotesRegular') format('svg'); font-weight:normal; font-style:normal; font-display:swap; }

/* ==========================================
   RESET Y ESTILOS BASE
   ========================================== */
html, body { width:100%; height:100%; }
body { position:relative; font-size:17px; line-height:1.6; font-weight:normal; font-family:'TelegrafRegular', 'Arial', sans-serif; color:#000; margin:0 auto; overflow-x:hidden; }
* { outline:0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight:normal; font-family:'SharpGroteskSemiBold', sans-serif; margin-bottom:1rem; }
h5, h6, .h5, .h6 { line-height:1.3; }
b, strong { font-weight:normal; font-family:'TelegrafUltraBold', sans-serif; }
a { -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
a, a:hover, a:active, a:focus { text-decoration:none; outline:none; }
a[href^=tel] { color:inherit; }
button:focus, :focus { outline:0 !important; box-shadow:none !important; }
button:disabled,
button[disabled] { color:#666 !important; background:#EEE !important; border-color:transparent !important; }

/* ==========================================
   CLASES DE UTILIDAD
   ========================================== */
.text-amarillo { color:#FDBA30 !important; }
.text-morado { color:#9500FF !important; }
.text-magenta { color:#FF00DA !important; }
.text-cyan { color:#00B9FF !important; }

.TelegrafUltraBold { font-family:"TelegrafUltraBold" !important; }
.big { font-size:110%; }

.bg-amarillo { background-color:#FDBA30; }
.bg-blanco { color:#000; background-color:#FFF; }
.bg-negro { color:#FFF; background-color:#000; }
.bg-cyan { background-color:#00B9FF !important; }
.bg-magenta { color:#FFF; background-color:#FF00DA !important; }

.bg-celeste { color:#FFF; background-color:#00B9FF; }
.bg-morado { color:#FFF; background-color:#9500FF; }
.bg-verde { color:#FFF; background-color:#00CB00; }

/* ==========================================
   BOTONES
   ========================================== */
.btn { display:inline-block; align-items:center; font-size:18px; text-transform:uppercase; font-family:"SharpGroteskBook", sans-serif; color:#FFF; background:#00B9FF; padding:.5rem 1.5rem; border:1px solid transparent; border-radius:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }
.btn:hover { background-color:#000 !important; color:#FFF !important; }
.btn-negro { color:#FDBA30; background-color:#000; }
.btn-negro:hover { color:#000; background-color:#FDBA30; }
.btn :first-child { margin-right:.5rem; }
.bg-amarillo .btn-negro { color:#FDBA30; background-color:#000; }
.bg-amarillo .btn-negro:hover { color:#000 !important; background-color:#FFF !important; }

/* ==========================================
   SOCIAL
   ========================================== */
.social { list-style:none; margin:0; padding:0; }
.social li { display:inline-block; font-size:0; }
.social li a { padding:.5rem; }
.social li i { font-size:18px; }

/* ==========================================
   UTILIDADES DE GRID
   ========================================== */
.row.gutter-5 { margin-right:-5px; margin-left:-5px; }
.row.gutter-5 > .col, .row.gutter-5 > [class*="col-"] { padding-right:5px; padding-left:5px; }
.imgwrap { position:relative; display:block; height:0; margin:0; padding-bottom:100%; overflow:hidden; }
.imgwrap img { position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); width:auto !important; max-height:100% !important; height:auto !important; z-index:0; -webkit-transition:all 0.3s; -moz-transition:all 0.3s; transition:all 0.3s; }

/* ==========================================
   VIDEO RESPONSIVE
   ========================================== */
.video-responsive, .wp-block-embed.is-type-video { position:relative; height:0; margin-bottom:1.5rem; padding-bottom:56.25%; /* 16:9 ratio */ overflow:hidden; }
.video-responsive iframe, .video-responsive object, .video-responsive embed, .wp-block-embed.is-type-video iframe, .wp-block-embed.is-type-video object, .wp-block-embed.is-type-video embed { position:absolute; top:0; left:0; width:100%; height:100%; }

/* ==========================================
   SLICK SLIDER
   ========================================== */
.slick-track { display:flex !important; align-items:stretch; }
.slick-slide { height: auto !important; display: flex !important; flex-direction: column; }

.slick-prev, .slick-next { position:absolute; top:50%; display:block; width:42px; height:42px; transform:translateY(-50%); content:''; margin:0; padding:0; font-size:0; cursor:pointer; background:transparent; border:none; outline:none; z-index:1; }
.slick-prev:before, .slick-next:before { display:block; width:100%; height:42px; line-height:42px; font-size:42px; color:#000; font-family:'Font Awesome 7 Free'; font-weight:900; text-align:center; }
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color:transparent; outline:none; opacity:1; }
.slick-prev.slick-disabled, .slick-next.slick-disabled { opacity:.25; }
.slick-prev { left:-42px; }
.slick-prev:before { content:'\f104'; }
.slick-next { right:-42px; }
.slick-next:before { content:'\f105'; }
.slick-dots { position:relative; bottom:auto; padding:0; margin:1rem 0; list-style:none; text-align:center; }
.slick-dots li { display:inline-block; margin:0 5px; padding:0; }
.slick-dots li button { font-size:0; line-height:0; display:block; width:12px; height:12px; padding:5px; cursor:pointer; color:transparent; border:0; outline:none; background:transparent; }
.slick-dots li button:hover, .slick-dots li button:focus { outline:none; }
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity:1; }
.slick-dots li button:before { font-family:'slick'; font-size:6px; line-height:20px; position:absolute; top:0; left:0; width:20px; height:20px; content:'•'; text-align:center; opacity:.25; color:black; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
.slick-dots li.slick-active button:before { opacity:.75; color:black; }

/* ==========================================
   LISTAS
   ========================================== */
section ul { list-style:none; margin:0 0 1.75rem; padding:0; }
section ul li { position:relative; margin-bottom:.5rem; padding-left:24px; }
section ul li:before { position:absolute; left:5px; top:6px; width:12px; height:12px; content:''; background:url('../img/flecha-upn-regular.svg') no-repeat left center; background-size:auto 100%; }
section h3 { display:inline-block; align-items:center; font-weight:normal; font-family:'SharpGroteskSemiBold', sans-serif; text-transform:uppercase; margin-bottom:.5rem; }
section h3 .fa { font-size:1.2rem; line-height:1; margin-right:.5rem; transform:translateY(-2px); }
section h3 .fa-lightbulb-o { font-size:1.4rem; }
section strong,
section b { font-weight:normal; font-family:'TelegrafSemiBold', sans-serif; }

/* ==========================================
   HEADER
   ========================================== */
.navbar { padding-top:2rem; padding-bottom:2rem; background-color:transparent; transition:all 0.3s ease; }
.navbar > .container { align-items:center; }
.navbar-brand { margin-right:0; padding:0; }
.navbar-brand img { height:80px; transition:all 0.3s ease; }
.navbar-nav .nav-item { font-size:15px; }
.navbar-nav .nav-item.hashtag { font-weight:700; color:#FFF; }
.navbar-nav .nav-link { position:relative; font-family:'TelegrafUltraBold', serif; color:#000; padding:.25rem 0; }
.navbar-nav .nav-link:after { position:absolute; left:0; top:100%; width:0; height:2px; content:''; background:#000; transition:.3s all ease-out; }
.navbar-nav .nav-link:hover:after, .navbar-nav .nav-link.active:after { width:24px; }
@media (min-width:992px) { 
  .navbar-menu { margin-top:-3rem; }
  .navbar-nav .nav-item { margin:0 .75rem; }
  .navbar-nav .nav-item.hashtag { position:relative; margin-right:.5rem; }
  .navbar-nav .nav-item:first-child { margin-left:0; }
  .navbar-nav .nav-item:last-child { margin-right:0; }
  .navbar-nav .nav-link { padding-right:0 !important; padding-left:0 !important; }
}
@media (max-width:991.98px) { 
  .navbar { padding-top:1rem; padding-bottom:1rem; }
}
header.fixed .navbar { padding-top:1rem; padding-bottom:1rem; background-color:#FFB610; }
header.fixed .navbar-nav .nav-item.hashtag, header.fixed .navbar-nav .nav-link { color:#000; }
header.fixed .navbar-nav .nav-link:after { background:#000; }
header.fixed .navbar-brand img { height:60px; }
header.fixed .navbar-menu { margin-top:0; }


/* ==========================================
   FAT NAV (Menú Hamburguesa)
   ========================================== */
.navbar-menu { position:relative; }
.hamburger { display:none; position:absolute; right:15px; top:50%; transform:translateY(-50%); z-index:99999; width:25px; height:25px; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; -ms-touch-action:manipulation; touch-action:manipulation; }
.hamburger__icon { position:relative; margin-top:7px; margin-bottom:7px; }
.hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { display:block; width:25px; height:2px; background-color:#000; transition-property:background-color, transform; transition-duration:0.4s; }
.hamburger:hover .hamburger__icon, .hamburger:hover .hamburger__icon:before, .hamburger:hover .hamburger__icon:after { background-color:#000; }
.hamburger__icon:before, .hamburger__icon:after { position:absolute; content:""; }
.hamburger__icon:before { top:-7px; }
.hamburger__icon:after { top:7px; }
.hamburger.active .hamburger__icon { background-color:transparent; }
.hamburger.active .hamburger__icon:before, .hamburger.active .hamburger__icon:after { background-color:#000; }
.hamburger.active .hamburger__icon:before { transform:translateY(7px) rotate(45deg); }
.hamburger.active .hamburger__icon:after { transform:translateY(-7px) rotate(-45deg); }
.fat-nav { top:0; left:0; z-index:9999; position:fixed; display:none; width:100%; height:100%; background:#FDBA30; transform:scale(1); transition-property:transform; transition-duration:0.4s; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
.fat-nav__wrapper { width:100%; height:100%; display:table; table-layout:fixed; }
.fat-nav.active { transform:scale(1); }
.fat-nav ul { display:table-cell; vertical-align:middle; text-align:center; margin:0; padding:0; }
.fat-nav li { list-style-type:none; text-align:center; padding:10px; font-size:110%; font-family:'TelegrafUltraBold', serif; }
.fat-nav li.nav-item.hashtag { font-weight:700; font-size:120%; font-family:'Open Sans', sans-serif; color:#000; }
.fat-nav li a { position:relative; text-decoration:none; color:#000; padding-bottom:.2rem; }
.fat-nav li a:after { position:absolute; left:50%; transform:translateX(-50%); bottom:-1px; width:0; max-width:100%; height:1px; content:''; background:#000; transition:.3s all ease-out; }
.fat-nav li a:hover:after { color:#000; width:1rem; }
.fat-nav li.active a:after { width:1rem; }
.fat-nav .social { position:absolute; left:0; bottom:60px; width:100%; height:auto !important; transform:none !important; }
.fat-nav .social li { font-size:0; margin:0 8px; padding:5px; }
.fat-nav .social li a { display:block; width:24px; height:24px; color:#8B8B8B; }
.fat-nav .social li i { font-size:20px; line-height:24px; }
.fat-nav .copyright { position:absolute; left:0; bottom:30px; width:100%; height:auto !important; transform:none !important; font-size:12px; color:#8B8B8F; text-align:center; }


main section { position:relative; overflow:hidden; }
main section:before { position:absolute; left:0; top:0; width:100%; height:100%; content:''; z-index:0; }
main section .container { padding-top:5rem; padding-bottom:5rem; }
main section .container { position:relative; padding-top:5rem; padding-bottom:5rem; z-index:1; }


/* ==========================================
   INTRO
   ========================================== */
#intro { position:relative; }
.banner-2 { position:relative; }
.banner-2 .btn { position:absolute; top:65.2%; left:44.80%; font-size:1.8vw; font-family:"SharpGroteskSemiBold", sans-serif; line-height:1; padding:.75vw .8vw .37vw 2vw; border:0px none; color:#000; background-color:#FFF; background-image:url('../img/btn-flecha-amarilla.png'); background-repeat:no-repeat; background-position:.7vw center; background-size:.8vw auto; }
.banner-2 .btn:hover { color:#FFF; background-color:#000; background-image:url('../img/btn-flecha-amarilla.png'); background-repeat:no-repeat; background-position:.7vw center; background-size:.8vw auto; }
.banner-2 .btn-finalistas { top:65.2%; left:44.80%; }

#hero { position:relative; height:100vh; max-height:800px; min-height:600px; overflow:hidden; }
#hero .hero-bg { position:absolute; right:0; top:50%; transform:translateY(-50%); width:135%; height:135%; object-fit:cover; object-position:0% 30%; z-index:0; }
#hero .container-xl { position:relative; z-index:1; text-align:right; padding-top:120px; }
#hero .hero-logo-btn { display:inline-flex; flex-direction:column; align-items:end; gap:18px; width:35%; max-width:480px; margin-left:auto; }
#hero .hero-btn { width:72.5%; text-align:center; }
#hero .hero-btn .btn { font-family:"TelegrafSemiBold"; color:#FFB610; padding:.5rem 1rem .3rem 1rem; background:#000; }

@media (max-width:1199.98px) { 
  #hero { max-height:700px; }
}
@media (max-width:991.98px) { 
  #hero { max-height:600px; }
}

@media (max-width:575.98px) { 
  #hero { max-height: none; min-height: 100vh; }
  #hero .container-xl { padding-top:80px; }
  #hero .hero-bg { width:135%; height:155%; object-position: 50% 25%; }
  #hero .hero-logo-btn { width:70%; max-width:none; gap:7px; }
  #hero .hero-btn .btn { font-size:.8em; }
}

/* ==========================================
   SECCIÓN:¿QUÉ ES CREA UPN?
   ========================================== */
#que-es .dirigido { padding:1.5rem 1.5rem .5rem; background:rgba(255, 184, 25, .25); }
#que-es .dirigido h3 { text-transform:none; margin-bottom:.25rem; }

/* ==========================================
   SECCIÓN:¿CÓMO PARTICIPO?
   ========================================== */
#como-participo { overflow:hidden; }
#como-participo:before { background:url('../img/bg-foto.jpg') no-repeat left center; opacity:.05; background-size:cover; }
/*
#como-participo .container:before { position:absolute; right:calc(100% + 3rem); top:1rem; width:2000px; height:100%; content:''; background:url('../img/patron-flechas.svg') repeat right top; background-size:100px; filter:brightness(0) invert(1); opacity:.5; }
#como-participo .container:after { position:absolute; left:calc(100% + 3rem); top:1rem; width:2000px; height:100%; content:''; background:url('../img/patron-flechas.svg') repeat right top; background-size:100px; filter:brightness(0) invert(1); opacity:.5; }
*/
#como-participo ul { margin-left:36px; }

/* ==========================================
   CRONOGRAMA (Slick)
   ========================================== */
#hitos { margin-bottom:0rem; }
#hitos .slick-track { display:block !important; margin:0 -7px; padding:7px; }
#hitos .mes { position:relative; background:rgba(255, 255, 255, .25); background:#ffcf6c; margin:0 7px; }
#hitos .mes:before { position:absolute; left:4px; top:5px; width:calc(100% - 4px); height:100%; content:''; background:#000; opacity:.25; z-index:-1; transform:rotate(-.5deg); }
#hitos .mes h4 { position:relative; display:block; height:40px; font-size:100%; line-height:40px; color:#000; font-family:"TelegrafUltraBold", sans-serif; padding:0 .5rem; margin-bottom:1rem; background:rgba(0, 0, 0, .025); }
#hitos .iniciativas { margin:1.5rem 0 0; padding-bottom:.5rem; }
#hitos .iniciativas li { padding:0 1rem 0 0; background:transparent none; text-align:left; margin-bottom:1rem; }
#hitos .iniciativas li:before { display:none; }
#hitos .iniciativas .fecha { display:inline-flex; align-items:center; gap:5px; color:#FFF; font-size:80%; font-family:'TelegrafSemiBold', sans-serif; background:#00B9FF; margin-bottom:.5rem; padding:.2rem .5rem .1rem; }
#hitos .iniciativas .fecha.bg-celeste { background:#00B9FF; }
#hitos .iniciativas .fecha.bg-morado { background:#9500FF; }
#hitos .iniciativas .fecha.bg-verde { background:#00CB00; }
#hitos .iniciativas .fecha .fa { margin-right:5px; }
#hitos .iniciativas p { font-size:85%; line-height:1.3; padding-left:.75rem; }
#hitos .slick-dots { margin:1rem; }
#hitos .slick-dots li { padding:0; }
#hitos .slick-dots li:before { display:none; }

/* ==========================================
   DESAFÍOS (Slick)
   ========================================== */
#desafio { background:rgba(255, 184, 25, .1); }
.desafios { margin:0 -15px; }
.desafio { margin:0 15px; }
.desafio .card, .desafio .card > * { margin:0; padding:0; border:none; border-radius:0; background:transparent; }
.desafio .card { padding:1.5rem; color:#FFF; border:1px solid #000; background-color:#000; }
.desafio .card { height:100%; line-height:1.4; }
.desafio .card-header, .desafio .card-footer { text-align:center; }
.desafio .card-header { position:relative; }
.desafio .card-header h3 { line-height:1.1; color:#fdb12b; margin:0; }
.desafio .card-header i { position:absolute; display:none; }
.desafio .card-body { padding:1rem 0; }
.desafio .card-body ul { margin:0; }
.desafio .card-body ul li { position:relative; font-size:.95em; margin:1rem 0; padding-left:24px; }
.desafio .card-body ul li:before { left:0; top:6px; background-image:url('../img/icono-check.svg'); }
.desafio .card-footer { background:rgba(255,255,255,0.15); padding:.7rem 1rem .5rem; }
.desafio .card-footer p { font-size:.8em; margin:0; }
.desafio .card-footer p strong { display:block; }

/* ==========================================
   SECCIÓN:PROCESO DE PARTICIPACIÓN (Acordeón)
   ========================================== */
.fase { position:relative; z-index:1; margin:2rem 0; }
.fase:first-child { margin-top:0; }
.fase .accordion-item { border:none; background:transparent; }
.fase .accordion-header { margin:0; }
.fase .accordion-button { display:flex; align-items:center; width:100%; padding:0; background:transparent; border:0px none; box-shadow:none; }
.fase .accordion-button:focus { box-shadow:none; }
.fase .accordion-button:not(.collapsed) { background-color:transparent; box-shadow:none; }
.fase .fase-icon { flex:0 0 80px; width:80px; margin-right:1rem; }
.fase figure { background:#FFF; border:3px solid #00B9FF; margin:0; }
.fase figure img { width:100%; }
.fase-3 figure img { padding:10%; }
.fase .fase-texto { text-align:left; padding-top:.75rem; }
.fase .accordion-button h3 { margin-bottom:0; }
.fase .accordion-button p { line-height:1.2; margin-bottom:0; }
.fase .accordion-body { padding:.75rem 0 0 100px; }
.fase ul { font-size:16px; }
.fase a { display:inline-block; color:#000; padding:.1rem .25rem; background:rgba(255, 184, 25, .5); }
.fase a:hover { background:rgba(255, 184, 25, .75); }
.fases { position:relative; padding:1.75rem 0 2rem 40px; }
.fases:before { position:absolute; left:0; top:30px; width:80px; bottom:0; content:''; background:#FFB119; z-index:0; }
.fases:after { position:absolute; left:0; top:0; width:80px; height:100%; content:''; background:url('../img/logo-flecha.svg') no-repeat center top; background-size:100% auto; z-index:1; }
.fases .section-header { padding:0 0 1rem 100px; }

/* ==========================================
   SECCIÓN HEADER
   ========================================== */
.section-header { margin-bottom:2rem; }
.section-header h2 { position:relative; display:inline-block; font-size:2.75rem; line-height:1; color:#000; margin-bottom:1rem; padding-bottom:.75rem; }
.section-header h2:before { position:absolute; left:0; bottom:0; content:''; width:100%; height:7px; background:#fdb12b; }
.section-header h2.text-blanco { color:white; }
.section-header h2.text-blanco:after { background:white; }
.section-header h2.text-center { text-align:center; }
.section-header h2.text-center:after { left:50%; transform:translateX(-50%); }
.bg-amarillo .section-header h2:before { background:#00B9FF; }

/* ==========================================
   FOOTER
   ========================================== */
footer { position:relative; background-color:#000; font-size:.9rem; color:#FFF; }
footer a { color:#FFF; text-decoration:underline; }
footer a:hover { color:#FDBA30; text-decoration:none; }
.social-network-link { transition:transform .3s ease; }
.social-network-link:focus, .social-network-link:hover { transform:scale(1.3); }
.totop { position:absolute; bottom:calc(100% + 10px); right:5%; width:48px; height:48px; content:''; background:url('../img/btn-totop.svg') no-repeat center center; background-size:cover; z-index:3; }

/* ==========================================
   MODAL (Bootstrap 5)
   ========================================== */
.modal-header .btn-close { background:transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat; opacity:0.5; }
.modal-header .btn-close:hover { opacity:1; }
#videoModal .modal-content { border-radius:0; }
#videoModal .modal-content:before { position:absolute; top:0; left:0; width:100%; height:100%; content:''; background-image:url('../img/btn-flecha-amarilla.png'); background-repeat:no-repeat; background-position:95% 105%; background-size:auto 90%; opacity:.15; z-index:0; }
#videoModal .modal-header { border:0px none; padding-bottom:0; border-radius:0; z-index:2; }
#videoModal .modal-body { padding:0 3rem 2rem; z-index:2; }
#videoModal .modal-body a { color:#9500ff; text-decoration:underline; }
#videoModal .modal-body a:hover { text-decoration:none; }
#videoModal .modal-body i { margin-right:.25rem; }

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

/* Tablets y menores */
@media (max-width:991.98px) { 
   .navbar-brand img { height:60px; }
  .hamburger { display:block; }
  .navbar-nav { display:none; }
  .hamburger { display:flex; align-items:center; justify-content:center; }
  .hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { background:#000; }

   header.fixed .hamburger__icon, header.fixed .hamburger__icon:before, header.fixed .hamburger__icon:after { background:#000; }
  .fat-nav__wrapper { display:flex; text-align:left; align-items:center; justify-content:center; padding:120px 0 80px; }
  .fat-nav ul { display:block; }
  .fat-nav li a { padding:0; }
  .no-scroll { width:100% !important; }
  .no-scroll .navbar-brand { height:60px; z-index:99999; margin-right:10px; }
  .banner-2 .btn { top:auto; bottom:6.4%; font-size:4vw; padding:1.6vw 2vw 1.1vw 4.3vw; background-position:1.7vw center; background-size:1.75vw auto; }
  .banner-2 .btn-finalistas { top:auto; bottom:7.5%; left:50%; transform:translateX(-50%); font-size:5vw; padding:2.5vw 3vw 1.75vw 6.5vw; background-position:2.5vw; background-size:2.4vw auto; }

   #como-participo .container:after { left:calc(60%); height:100px; background-size:80px; }
}

/* Móviles */
@media (max-width:767.98px) { 
  section { overflow-x:hidden; }
   input, select, textarea { font-size:16px; }
  .navbar-brand img { height:60px; }
  .hamburger__icon, .hamburger__icon:before, .hamburger__icon:after { background:#000; }
  main section { overflow:hidden; }
   main section .container { padding-top:3rem; padding-bottom:3rem; }
   .section-header { text-align:center; }
  .fase { margin-bottom:1rem; }
  .banner-2 .btn { bottom:6.4%; font-size:4vw; padding:1.6vw 2vw 1.1vw 4.3vw; background-position:1.7vw center; background-size:1.75vw auto; }
  .banner-2 .btn-finalistas { bottom:7.5%; font-size:5vw; padding:2.5vw 3vw 1.75vw 6.5vw; background-position:2.5vw; background-size:2.4vw auto; }
  #hitos .slick-list { margin:0 -30px; }
  #desafio .slick-list { margin:0 -15px; }
  .desafio { margin:0 7px; }
  .fases:before, .fases:after { width:60px; }
  .fases { padding:1rem 0 3rem 20px; }
  .fase .fase-icon { flex:0 0 64px; width:64px; }
  .fase .accordion-button:not(.collapsed) figure { background:#00B9FF; }
  .fase .accordion-button:not(.collapsed) figure img { filter:brightness(0) invert(1); }
  .fase .fase-texto { padding-top:.5rem; }
  .fases .section-header { padding-left:80px; }
  .fase .accordion-body { padding-left:80px; }
  .fase h3 { font-size:1.6rem; }
  .fase .big { font-size:105%; line-height:1.2; padding-right:1rem; }
  .fase a { padding:0 .25rem; }
   section .fase ul li { font-size:90%; padding-left:0; background:none; }
   section .fase ul li:before { display:none; }
}

/* Móviles pequeños */
@media (max-width:575.98px) { 
  body { font-size:14px; }
  .navbar-brand { padding:0; }
  .navbar-brand img { height:50px !important; }
  .no-scroll .navbar-brand { margin-right:0; }
  .section-header { margin-bottom:1rem; }
  .section-header h2 { font-size:2rem; }
  .section-header h2:before { height:6px; }
  #como-participo ul { margin-left:26px; }
  .fase .fase-texto { padding-top:.75rem; }
  .fase h3 { font-size:1.25rem; }
  .fase .big { font-size:90%; padding-right:0; }
   footer { font-size:80%; padding-bottom:45px; }
}