/*!
Theme Name: comfandi
Theme URI: http://underscores.me/
Author: Himalaya SEM
Author URI: https://himalayadigital.co/
Description: Theme Diseñado y Desarrollado para Landing Comfandi Evoluciona
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: comfandi
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.

comfandi 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: #003DA5;
    --azul-c: #34BBDA;
    --verde: #97D700;
    --gris: #D1CCBD;
    --blanco: #ffffff;
    --negro: #000000;
}


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

nav.site-branding {
    background-color: var(--azul-o);
    color: white;
    position: relative;
    padding: 2.5rem 4rem;
}

nav.site-branding a.custom-logo-link {
    position: absolute;
    top: 45%;
}

nav.site-branding a.custom-logo-link img {
    width: 12rem;
    height: auto;
}

nav.site-branding h1 {
    font-weight: 500;
    font-size: 1.8rem;
}

.contenido h2 {
    padding-top: 58px;
    font-size: 2.2rem;
    color: var(--azul-o);
    margin-bottom: 3rem;
    font-weight: bold;
}

.contenido h2 strong {
    font-weight: 900;
}



.contenido p {
    padding-top: 20px;
    padding-right: 8rem;
    color: white;
    line-height: 1.2;
    font-size: 1.2rem;
    font-weight: 300;
    margin-bottom: 0.7rem;
}

.videos .slick-slider .video-slide {
    cursor: pointer;
}

.video-modal {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    overflow: hidden;
}

.video-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: 91%;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
    width: 55%;
    max-width: 312px;
    aspect-ratio: 9 / 16;
}

.video-modal-close {
    position: absolute;
    top: 0;
    right: -18px;
    font-size: 4rem;
    color: var(--azul-o);
    cursor: pointer;
    z-index: 9;
    line-height: 0;
}

.videos .video-thumbnail-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    width: 100%;
    height: 0;
    padding-bottom: 127%;
}

.videos .video-thumbnail-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 15px;
}

.videos .play-icon-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    opacity: 0.8;
    cursor: pointer;
    pointer-events: none;
    /* Asegura que el ícono no bloquee el clic en la miniatura */
}

.videos .play-icon-wrapper i {
    font-size: 50px;
    /* Tamaño del ícono */
}

.videos .play-icon-wrapper:hover {
    opacity: 1;
}

/* Ajustes para diferentes tamaños de pantalla */
@media (max-width: 768px) {
    .play-icon-wrapper i {
        font-size: 40px;
    }
}

button.flecha {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9;
    background-color: var(--azul-o);
    border: none;
    border-radius: 100px;
    color: white;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    line-height: 0;
    padding: 0;
}

.f-right {
    right: -6rem;
}

.f-left {
    left: -3rem;
}


.conectados h2,
.pqr h2 {
    font-weight: 800;
    color: var(--azul-o);
}

.pqr .btn-header-link {
    background-color: var(--azul-o);
    color: white;
    font-weight: bold;
    font-size: 1.15rem;
    border-radius: 30px;
    position: relative;
}

.pqr .respuesta {
    color: var(--azul-o);
    font-size: 1.1rem;
    line-height: 1.3;
}

#pqr .btn-header-link:after {
    content: "\F286";
    font-family: bootstrap-icons !important;
    font-size: 1.9rem;
    color: white;
    right: 15px;
    line-height: 1;
    position: absolute;
    top: 5px;
}

#pqr .btn-header-link.collapsed:after {
    content: "\F282";
}

.gif-text .modal-content button.close {
    position: absolute;
    right: 5px;
    top: 0px;
    font-size: 5rem;
    color: white !important;
    z-index: 9;
    text-shadow: none;
    opacity: 1;
}

.gif-text .modal-content .modal-body {
    padding: 10rem 8.5rem;
}

.gif-text .modal-content .modal-body p {
    font-size: 1.25rem;
    line-height: 1.3;
    margin: 0px !important;
}

.gif-text .modal-content .modal-body h3,
.gif-text .card-body h4 {
    font-weight: 400;
}

section.conectados {
    background: linear-gradient(to bottom, var(--azul-c) 50%, #fff 50%);
}

footer a.custom-logo-link img {
    width: 12%;
    height: auto;
}

footer {
    background-color: var(--azul-o);
}

footer h6 {
    color: white;
}

footer ul {
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 100;
    margin: 0;
}

footer ul a {
    color: #fff;
}

footer ul a:hover {
    color: #fff;
    font-weight: 200;
}

footer hr {
    background-color: white;
    margin: 0.5rem 5rem;
}

footer .copyrights a {
    font-size: 12px;
    color: white;
    font-weight: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}

footer .copyrights a img {
    width: 9%;
}

footer ul li {
    margin-bottom: 7px;
    white-space: nowrap;
}

div#es-widget-header-container-template {
    display: none;
}

footer .logo-super {
    width:

        15%;
}


.video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la miniatura cubra todo el contenedor */
    border-radius: 20px;
}
.video-container{
    position: relative;
    cursor: pointer;
    width: 100%;
    padding-bottom: 56.25%; /* Mantiene la relación de aspecto 16:9 */
    height: 0;
    overflow: hidden;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 20px;
}
.ico-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64px;
    height: 64px;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.ico-play i {
    font-size: 90px !important;
    color: white;
}
.row-fondo{
    background-image: url('img/textura-inicio.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
}
.row-fondo h2 {
    font-family: "Outfit", sans-serif !important;
    width: fit-content;
    padding: 3rem;
    color: var(--azul-o);
    font-size: 2.6rem;
    line-height: 1;
    font-weight: bold;
}
.row-fondo p {
    color: white;
    line-height: 1.2;
    font-size: 1.15rem;
    padding-left: 3rem;
}
.obj{
    background-color: var(--azul-o);
}
.obj h2 {
    font-size: 2.5rem;
    font-weight: bold;
}
.obj h3 {
    font-size: 1.8rem;
}
.obj p{
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 300;
}
.flor{
    background-image: url('img/fondo-textura.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.flor h3 {
    font-size: 1.85rem;
    color: var(--azul-o);
    font-weight: 400;
}
.flor h2, .armonia h2, 
.slider-armo h2, .banner h1 {
    font-size: 2.4rem;
    font-weight: bold;
    color:  var(--azul-o);
}
.armonia .card{
    background-image: url('img/textura-indice.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-color: var(--azul-o);
    height: 280px;
    border-radius: 0 0px 30px 30px;
}
.armonia .card img{
    width: 20%;
}
.armonia .card p {
    font-size: 1.3rem;
    line-height: 1.2;
    font-weight: 400;   
}
.armonia .card p b{
    color: var(--azul-c);
    font-weight: 600;
}
.slick-slider .card {
    background-color: var(--azul-o);
    border: none;
    border-radius: 30px;
    height: 420px;
}
.slick-slider .card p{
    line-height: 1.2;
}















.flor-contenedor {
    position: relative;
    height: 650px;
}

.centro-descripcion {
    position: absolute;
    width: 290px;
    height: 290px;
    padding: 2.5rem 1rem 2rem 3rem;
    background-image: url(img/fondo-flor.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    display: flex;
    flex-direction: column;
    z-index: 99;
}
#nombre-central {
    font-size: 1.95rem;
    font-weight: bold;
    margin-bottom: 5px;
    color: var(--azul-o);
    line-height: 1;
}

#texto-descripcion {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 300;
    color: var(--azul-o);
}
.punta-estrella {
    position: absolute;
    width: 230px;
    height: 110px;
    background-color: var(--azul-o);
    color: white;
    border-radius: 0 60px 0 0;
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.punta-estrella.activa {
    background-color: var(--verde); /* Color de fondo para la punta activa */
    color: var(--azul-o); /* Color de texto para la punta activa */
    z-index: 1;
    font-weight: bold;
}
/* Posiciones precisas de las puntas */
#punta-1 {
    top: 30px;
    left: -119px;
    transform: rotate(-90deg);
}

#punta-2 { /* Superior derecha */
    top: 113px;
    left: 46px;
    transform: rotate(-40deg);
    width: 250px;
    padding-left: 1rem;
}

#punta-3 { /* Inferior derecha */
    top: 270px;
    left: 124px;
    width: 260px;
    padding-left: 1rem;
}

#punta-4 { /* Inferior central */
    bottom: 112px;
    left: 36px;
    width: 250px;
    transform: rotate(45deg);
    padding-left: 1rem;
}

#punta-5 { /* Inferior izquierda */
    bottom: 38px;
    right: -119px;
    transform: rotate(90deg);
}

#punta-6 { /* Superior izquierda */
    bottom: 117px;
    right: 43px;
    width: 250px;
    transform: rotate(321deg);
    border-radius: 0 0 0 60px;
    padding-right: 1rem;
}
#punta-7 { /* Superior izquierda */
    top: 270px;
    right: 110px;
    border-radius: 0 0 0 60px;
    width: 260px;
    padding-right: 1rem;
}
#punta-8 { /* Superior izquierda */
    top: 116px;
    right: 64px;
    transform: rotate(32deg);
    border-radius: 0 0 0 60px;
    width: 260px;
    padding-right: 1rem;
}
.slider-armo h4{
    color: #453D3B;
}
.div-textFondo {
    top: 42%;
    right: 125px;
}
.div-textFondo h2 {
    font-size: 2.5rem;
    line-height: 1;
    font-weight: bold;
}
a.btn-clic {
    background-color: var(--verde);
    border: 2px solid var(--verde);
    width: fit-content;
    margin: auto;
    color: var(--azul-o);
    padding: 0px 30px;
    font-size: 1.2rem;
    border-radius: 30px;
    font-weight: 500;
}
a.btn-clic:hover{
    background-color: transparent;
    text-decoration: none;
    font-weight: 700;
}
.slider-armo span {
    position: absolute;
    left: 26px;
    top: 20px;
    background-color: var(--verde);
    color: var(--azul-o);
    font-size: 1.8rem;
    font-weight: bold;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0px 30px 30px 30px;
}


.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
.fade-effect {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 400px;
    border-radius: 10px;
    text-align: center;
    transform: scale(0.8);
    opacity: 0;
    animation: modalFadeIn 0.4s forwards;
}

@keyframes modalFadeIn {
    0% {
        transform: scale(0.8);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes modalFadeOut {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0;
    }
}