/*!
Theme Name: Incauca
Theme URI: http://underscores.me/
Author: Himalaya SEM
Author URI: https://himalayadigital.co/
Description: Landing de lansamiento nueva imagen Incauca
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: incauca
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

incauca is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

:root{
    --azul-o:#1F3685;
    --azul-c:#0073B8;
    --azul-m: #009EE2;
	--verde: #009640;
	--amarillo: #FDC300;
	--gris: #636363;
	--cBlanco: #FCFCFC;
    --blanco: #ffffff;
	--negro: #000000;
}
@font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-weight: 100;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url('fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
  }


body {
    font-family: "Poppins", sans-serif !important;
}

header#masthead {
    background-color: white;
        box-shadow: 0px 5px 9px 0px rgba(0, 0, 0, 0.1);
}
nav.nay-redes>ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 10px;
    align-items: center;
}
nav.nay-redes>ul li a {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
}
nav.nay-redes>ul li a:hover svg {
    transform: scale(1.2);
    filter: invert(3%) sepia(100%) saturate(1662%) hue-rotate(185deg) brightness(130%) contrast(100%);
}
nav.nay-redes li svg {
    width: 30px !important;
    height: 30px !important;
    transition: transform 0.3s ease-in-out;
}
section.banner-inicio p {
    font-size: 24px;
    font-weight: 400;
    text-shadow: 0 2px 16px rgb(0 0 0 / 45%);
}
section.banner-inicio h1 {
    font-size: 64px;
    font-weight: 800;
    font-style: italic;
    line-height: normal;
    margin-bottom: 0;
        text-shadow: 0 2px 16px rgb(0 0 0 / 45%);
}
section.proposito{
    margin-top: -7px;
}
section.banner-inicio .txt-content {
    margin-top: 10rem;
}
section.proposito, footer#colophon{
    background-color: var(--azul-o);
}

.slider_propo .valor .card{
    border-radius: 20px;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;;
}
.slider_propo .valor .card .ico svg {
    width: 75px;
    height: 75px;
}
.slider_propo .valor .card .ico {
    background-color: #ffffff73;
    padding: 18px;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
     transition: opacity 0.3s ease;

}
.slider_propo .valor .card h3{
    font-size: 20px;
    font-weight: 750;
}
.slider_propo .valor .card .text{
    opacity: 0;
    position: absolute;
    transform: translateY(10px);
    transition: all 0.4s ease;
}
.slider_propo .valor .card .text p{
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
}
.slider_propo .valor .card:hover .ico, 
.slider_propo .valor .card:hover>h3 {
  opacity: 0;
}
.slider_propo .valor .card:hover .text {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;    
}
/* .slider_propo .valor .card:hover {
    transform: translateY(-10px);
} */
.slider_propo .valor .card.bg-yellow {
    background-color: var(--amarillo);
}
.slider_propo .valor .card.bg-green {
    background-color: var(--verde);
}
.slider_propo .valor .card.bg-blue {
    background-color: #204999;
}
.slider_propo .valor .card p, .slider_propo .valor .card h3, .slider_propo .valor .card h4{
    color: white;
}
.slider_propo .valor .card.bg-yellow h3, .slider_propo .valor .card.bg-yellow p, .slider_propo .valor .card.bg-yellow h4 {
    color: var(--azul-o);
}
.slider_propo .slick-list {
    padding: 0px !important;
}

/* .txt.bg-green {
    background-color: var(--verde);
    color: var(--cBlanco);
}
.txt.bg-yellow {
    background-color: var(--amarillo);
    color: var(--azul-o);
}
.slider_propo .slick-list {
    padding: 0px 100px 0px 0px !important;
}
.slider_propo .card{
    border: none;
    border-radius: 24px;
}
.slider_propo img{
    object-fit: cover;
    height: 200px;
    width: 100%;
    border-radius: 24px 24px 0 0;
    margin-bottom: -20px;
}
.slider_propo .txt {
    height: 220px;
    border-radius: 24px;
}
.slider_propo .txt h3{
    font-size: 24px;
    font-weight: 300;
}
.slider_propo .txt h3 b{
    font-weight: 700;
}
.slider_propo .txt p{
    font-size: 14px;
    font-weight: 400;
} */
section.proposito h2{
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
}
section.proposito p{
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 0;
}
section.negocios h2{
    font-size: 35px;
    font-weight: 400;
     color: var(--azul-o);
}
section.negocios .card {
    border: none;
    border-radius: 24px;
    box-shadow: 23px 67px 20px 0 rgba(0, 0, 0, 0.00), 15px 43px 18px 0 rgba(0, 0, 0, 0.01), 8px 24px 15px 0 rgba(0, 0, 0, 0.05), 4px 11px 11px 0 rgba(0, 0, 0, 0.09), 1px 3px 6px 0 rgba(0, 0, 0, 0.10);
        width: 100%;
    height: 450px;
}
section.negocios .card img{
    border-radius: 24px;
        object-fit: cover;
    width: 100%;
    height: 100%;
}
section.negocios .card h3{
    font-size: 35px;
    font-weight: 700;
}
/* section.proposito .slide-item .card {
    max-width: 550px !important;
} */


/* Contenedor */
section.negocios .card {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 24px;
}

/* Oscurecido en hover (sin tapar la imagen) */
section.negocios .card::after{
  content:"";
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  background:#000;
  opacity:0;
  transition: opacity .50s ease;
  z-index:1; /* por debajo del texto */
}
section.negocios .card:hover::after, section.negocios .card.active::after { opacity:.45; }

/* Overlay de texto siempre por encima del oscurecido */
section.negocios .card .card-img-overlay{
  position:absolute;
  left:0; top:0; right:0; bottom:0;
  z-index:2;
  pointer-events:auto;
  cursor:pointer;
}

/* Título: leve subida en hover */
section.negocios .card .card-img-overlay h3{
  transform: translateY(0);
  transition: transform .50s ease;
  margin-bottom:.75rem;
}
section.negocios .card:hover .card-img-overlay h3,
section.negocios .card.active .card-img-overlay h3{
  transform: translateY(-10px);
}

/* Párrafo oculto por defecto (lo animamos con jQuery) */
section.negocios .card .card-img-overlay p{
  display:none;
  margin-bottom:0;
}

/* Ajustes de texto */
section.negocios .card .card-img-overlay{ color:#fff; }

section.historias h2{
    font-size: 35px;
    font-weight: 700;
     color: var(--azul-o);
}
section.historias h3{
    font-size: 30px;
    font-weight: 400;
     color: var(--azul-o);
}


.historias-slider .slick-slide > .histo-item {
    display: flex;
    align-items: center; /* Asegura que el contenido esté centrado */
    justify-content: center;
}

/* Espaciado entre slides */
.historias-slider .slick-slide { margin: 0 14px;overflow: hidden; }
.historias-slider .slick-list  { margin: 0 -14px; }
.historias-slider .slick-list {
    will-change: transform; /* Optimiza la renderización */
}
/* Card */
.histo-card{
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  height: 420px; /* ajusta a tu gusto */
}
.histo-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay con título y + */
.histo-overlay{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding: 55px 44px;
  color:#fff;
  cursor: pointer;
}
section.historias .histo-overlay h3.histo-title {
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 2px 16px rgba(0, 0, 0);
    color: white;
    line-height: normal;
    z-index: 9;
}
.histo-plus{
    z-index: 9;
    position: absolute;
    bottom: 30px;
    right: 30px;
}

/* Hover leve */
.histo-card::after{
  content:"";
  position:absolute; inset:0;
  background:#000; opacity:.25; transition:opacity .2s ease;
  cursor: pointer;
}
/* .histo-card:hover::after{ opacity:.25; } */


section.formulario{
    background-color: var(--amarillo);
}

.card.contact-form {
    width: min-content;
}
section.formulario .text-form h2{
    font-size: 30px;
    font-style: normal;
font-weight: 500;
color: var(--azul-o);
}
section.formulario .text-form p{
    font-size: 20px;
    font-style: normal;
font-weight: 400;
color: var(--azul-o);
}


/* Zoom sutil en hover sin alterar el contenedor */
.histo-card{
  overflow: hidden; /* recorta el zoom para que no crezca el card */
}

.histo-card .histo-img{
  transform: scale(1);                 /* estado base */
  transition: transform .45s ease;     /* animación suave */
  will-change: transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

.histo-card:hover .histo-img{
  transform: scale(1.1);              /* zoom leve (~5%) */
}

/* Respeto a usuarios con reducción de movimiento */
@media (prefers-reduced-motion: reduce){
  .histo-card .histo-img{
    transition: none;
  }
}


#histoModal .modal-content, img#histoModalImg {
    border-radius: 50px;
}
#histoModal h3#histoModalTitle{
    color: var(--azul-o);
    font-size: 30px;
    font-weight: 500;
}

#histoModal button.close.position-absolute {
    right: 1.5rem;
    top: 1rem;
    font-size: 3rem;
    color: var(--azul-o);
    opacity: 1;
}
section.formulario .card.contact-form {
    background-color: var(--cBlanco);
    border-radius: 27px;
box-shadow: 0 352.008px 98.93px 0 rgba(0, 0, 0, 0.00), 0 225.469px 89.727px 0 rgba(0, 0, 0, 0.01), 0 126.539px 75.923px 0 rgba(0, 0, 0, 0.05), 0 56.367px 56.367px 0 rgba(0, 0, 0, 0.09), 0 13.804px 31.059px 0 rgba(0, 0, 0, 0.10);
}

section.formulario .card.contact-form p {
    margin: 0;
}
section.formulario .card.contact-form .wpcf7-form-control-wrap {
    position: relative;
    margin-bottom: 1rem;
    display: block;
}
section.formulario .card.contact-form label {
    margin-bottom: .2rem;
    color: #787878;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
}
select.wpcf7-form-control, input.wpcf7-form-control {
    background-color: #F2F2F2;
    border: none;
    height: 28px;
    border-radius: 3px;
}
select.wpcf7-form-control{
    width: 100%;
}
section.formulario .card.contact-form .div-btn_evniar p {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
}
section.formulario .card.contact-form .div-btn_evniar input{
    background-color: var(--verde);
    border-radius: 50px;
    color: var(--cBlanco);
    font-size: 16px;
    font-weight: 700;
    line-height: 0;
    padding: 15px 30px;
}
section.formulario .card.contact-form .wpcf7 form .wpcf7-response-output {
    margin: 0 !important;
}


/* Aseguramos que el select tiene un estilo limpio sin la flecha predeterminada */
select.wpcf7-form-control {
  -webkit-appearance: none;  /* Para Webkit (Chrome/Safari) */
  -moz-appearance: none;     /* Para Firefox */
  appearance: none;          /* Para otros navegadores */
  width: 100%;
  position: relative;
}

/* Estilo para el contenedor de la flecha */
.select-wrapper {
  position: relative;
}

/* SVG de la flecha (puedes cambiarlo por el tuyo) */
.select-wrapper::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background: url('img/ico-select.svg') no-repeat center center;
  background-size: contain;
  pointer-events: none;  /* Asegura que la flecha no interfiera con la selección */
  transition: transform 0.3s ease;  /* Transición suave para el giro */
}

/* Efecto de giro cuando se hace clic o se abre el select */
.select-wrapper.open::after {
  transform: translateY(-50%) rotate(180deg);
}

/* Opcional: cambia el borde cuando está enfocado */
select:focus {
  border-color: #007bff;
}

.wpcf7-list-item span.wpcf7-list-item-label {
    font-size: 10px !important;
}
.wpcf7-list-item span.wpcf7-list-item-label a{
    color: var(--azul-o);
    font-weight: 600;
}

.div-logo img.custom-logo {
    width: 160px;
}

/* Estilo del ícono de play */
#play-btn-desktop,
#play-btn-movil {
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    font-size: 3rem;
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    visibility: visible;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    display: flex
;
    justify-content: center;
    align-items: center;
}

/* Aseguramos que el ícono de play sea visible */
#play-btn-desktop,
#play-btn-movil {
  font-size: 5rem; /* Tamaño del ícono de play */
}

/* Mostrar el ícono de play solo cuando el video esté pausado */
.video-container video.paused + #play-btn-desktop,
.video-container video.paused + #play-btn-movil {
  opacity: 1;
  visibility: visible;
}

/* Cuando el video se está reproduciendo, ocultamos el ícono */
.video-container video.playing + #play-btn-desktop,
.video-container video.playing + #play-btn-movil {
  opacity: 0;
  visibility: hidden;
}


.lang-current svg,
.lang-dropdown li a svg {
    width: 35px;
    height: auto;
    display: inline-block;
    vertical-align: middle;
}

.lang-switcher {
    position: relative;
    display: inline-block;
    font-family: sans-serif;
}

.lang-current {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 2;
    position: relative;
}

.lang-current img {
    width: 24px;
    height: auto;
}

.lang-dropdown {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 0px;
    margin: 0;
    list-style: none;
    display: none;
    z-index: 10;
    min-width: max-content;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.lang-dropdown li a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    text-decoration: none;
    color: #333;
    font-size: 14px;
}

.lang-dropdown li a img {
    width: 20px;
    height: auto;
}

.lang-switcher.open .lang-dropdown {
    display: block;
}
.lang-dropdown {
    display: none;
}

nav.nay-redes {
    display: flex;
    gap: 20px;
}

.site-info svg, .carousel-item svg{
  width: 231px;
}