/* =========================================
   VARIABLES DE COLOR ACTUALIZADAS
   ========================================= */

:root {
    --brand-color: #55c777;
    /* Verde logo JeronPOS */
    --brand-color-hover: #45a761;
    --dark-bg: #0f1b1c;
    /* Tu fondo-app-dark EXACTO */
    --light-green-bg: #eaf8ef;
}


/* =========================================
   ESTILOS ESPECÍFICOS DEL HERO SECTION
   ========================================= */

.hero-section {
    background-color: var(--dark-bg) !important;
    position: relative;
    overflow: hidden;
    /* Oculta partes de los íconos que sobresalen de la pantalla */
    padding-bottom: 80px;
    /* Espacio extra para la curva inferior */
}


/* Z-Index para garantizar que el texto e imagen están por encima de los íconos */

.hero-content {
    position: relative;
    z-index: 2;
}


/* =========================================
   ÍCONOS FLOTANTES DE FONDO (ESTILO FUDO)
   ========================================= */

.bg-icon {
    position: absolute;
    opacity: 0.05;
    /* Muy sutil para que no estorbe la lectura */
    color: #ffffff;
    pointer-events: none;
    /* Asegura que no bloqueen el click en los botones */
    z-index: 0;
}


/* Grosor de la línea del SVG */

.bg-icon svg {
    width: 250px;
    height: 250px;
    stroke-width: 1.2px;
}


/* Posiciones rotadas */

.icon-1 {
    top: 5%;
    left: -5%;
    transform: rotate(-15deg);
}

.icon-2 {
    bottom: 10%;
    left: 12%;
    transform: rotate(10deg);
}

.icon-3 {
    top: 25%;
    right: 45%;
    transform: rotate(20deg);
    opacity: 0.03;
    /* Aún más sutil porque está detrás de la imagen */
}


/* Ícono de Pizza a la derecha de la tablet */

.icon-4 {
    right: 2%;
    top: 45%;
    transform: rotate(20deg);
}


/* =========================================
   ONDA / CURVA INFERIOR (SHAPE DIVIDER)
   ========================================= */

.wave-divider {
    position: absolute;
    bottom: -1px;
    /* -1px evita líneas blancas fantasmas en algunos navegadores */
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    z-index: 1;
}

.wave-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 90px;
    /* Define la altura de la ola */
}

.wave-divider .shape-fill {
    /* Este color debe coincidir exactamente con el fondo de tu sección "Funcionalidades" (bg-light de Bootstrap) */
    fill: #f8f9fa;
}


/* =========================================
   ANIMACIÓN DE DOODLES / ILUSTRACIONES
   ========================================= */

@keyframes floatDoodle {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }
    50% {
        transform: translateY(-65%) rotate(2deg);
    }
    100% {
        transform: translateY(-50%) rotate(0deg);
    }
}

.doodle-float-1 {
    animation: floatDoodle 4s ease-in-out infinite;
    opacity: 0.85;
    /* Un poco de transparencia para no distraer la lectura */
}

.doodle-float-2 {
    animation: floatDoodle 5s ease-in-out infinite;
    animation-delay: 1.5s;
    /* Retraso para que no se muevan al mismo tiempo */
    opacity: 0.85;
}


/* EFECTO MÁQUINA DE ESCRIBIR */

.cursor-blink {
    display: inline-block;
    width: 4px;
    height: 1em;
    background-color: #2cd67a;
    /* Tu verde marca */
    vertical-align: text-bottom;
    margin-left: 5px;
    animation: blinkCursor 0.8s step-end infinite;
}

@keyframes blinkCursor {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}


/* EFECTO LOGOS DE CLIENTES */

.client-logo {
    filter: grayscale(100%);
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
    max-height: 80px;
    /* Evita que suban logos gigantes y dañen la proporción */
    object-fit: contain;
}

.client-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.05);
    /* Un pequeño zoom al pasar el mouse */
}