.elementor-kit-465{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-465 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1200px;}.e-con{--container-max-width:1200px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//*
 * CSS Personalizado para bloques de contenido con estilo de tarjeta
 * Diseñado para Elementor, aplicando el estilo visual de la imagen proporcionada.
 * Asegura que los estilos se apliquen a los divs con la clase 'section'.
 */

/* Estilos generales para el contenedor de la sección (el bloque blanco) */
.elementor-widget-container .section,
.elementor-section .section,
.elementor-column .section, /* Agregado para mayor especificidad si el div está en una columna */
.elementor-container .section { /* Agregado para mayor especificidad */
    background-color: #ffffff; /* Fondo blanco para el recuadro */
    border-radius: 8px; /* Bordes ligeramente redondeados */
    padding: 35px; /* Espaciado interno más generoso para que el contenido respire */
    margin-bottom: 30px; /* Espacio debajo de cada sección para separarlos */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave y sutil */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave para la animación */
    position: relative; /* Necesario para animaciones internas o posicionamiento */
    overflow: hidden; /* Asegura que la sombra no se corte y que el contenido no se desborde */
}

/* Animación al pasar el mouse sobre el bloque (efecto de levantamiento y sombra más intensa) */
.elementor-widget-container .section:hover,
.elementor-section .section:hover,
.elementor-column .section:hover,
.elementor-container .section:hover {
    transform: translateY(-4px); /* Pequeño levantamiento al pasar el mouse */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); /* Sombra ligeramente más pronunciada */
}

/* Estilos para el encabezado h2 dentro del bloque (el texto verde como "Serchan") */
.elementor-widget-container .section h2,
.elementor-section .section h2,
.elementor-column .section h2,
.elementor-container .section h2 {
    color: #4CAF50; /* Color verde vibrante, similar al de la imagen */
    font-size: 34px; /* Tamaño de fuente grande para que el título destaque */
    font-weight: 600; /* Un poco más de peso para que resalte */
    margin-bottom: 18px; /* Espacio debajo del título, separándolo del párrafo */
    line-height: 1.2; /* Ajuste del interlineado para el título */
    display: flex; /* Permite alinear el emoji y el texto en la misma línea */
    align-items: center; /* Centra verticalmente el emoji con el texto del título */
}

/* Estilos para el elemento span con la clase 'emoji' dentro del título h2 (si lo usas) */
.elementor-widget-container .section h2 .emoji,
.elementor-section .section h2 .emoji,
.elementor-column .section h2 .emoji,
.elementor-container .section h2 .emoji {
    margin-right: 12px; /* Espacio a la derecha del emoji */
    font-size: 38px; /* Tamaño un poco más grande para el emoji */
}

/* Estilos para el párrafo dentro del bloque */
.elementor-widget-container .section p,
.elementor-section .section p,
.elementor-column .section p,
.elementor-container .section p {
    color: #4a4a4a; /* Color gris oscuro para el texto del párrafo, para buena legibilidad */
    font-size: 17px; /* Tamaño de fuente ligeramente más grande para el párrafo */
    line-height: 1.7; /* Interlineado generoso para mejor legibilidad */
}/* End custom CSS */