/* estadisticas */
section.stats {
    padding: 10px 0;
    color: #ffffff;
    background: #31245c !important;
}
/* estadistica */
/* header */
/*@media (min-width: 768px) {
    header .intro-text {
        padding-top: 176px;
        padding-bottom: 42px;
    }
}*/
@media (min-width: 768px) {
header .intro-text
 {
        padding-top: 20px;
        padding-bottom: 0px;
    }
}
header, .captcha-page #mainNav, .interstitial-page #mainNav, .banner-page #mainNav {
    background: #31245c;
}

/*@media (min-width: 768px) {
    header .intro-text {
        padding-top: 5px;
        padding-bottom: 0px;
    }
}*/
header.shorten
Specificity: (0,1,1)
 {
    border-bottom: 2px solid #ffffff;
}
/* header */
/* texto mas anchho en blog */
.inner-page section {
    line-height: 38px;
}
/* texto mas anchho en blog */
/* contacto */
section#contact .form-group {
    margin-bottom: -9px;
}
/* contacto */
/* menu al bajar */
@media (min-width: 768px) {
    .navbar-default.affix {
        background-color: #000000;
        padding: 10px 0;
    }
}
/* menu al bajar */
/* hover menu */
.navbar-default .navbar-nav a:hover {
    border-radius: 6px;
    border: 1px solid #ffffff;
    line-height: 0px;
}
/* hover menu */
/* correr formulario 100% */
@media (min-width: 768px) {
    .col-sm-6 {
        width: 100%;
    }
}
/* correr formulario 100% */
/* acercar mas uno al otro selection */
section {
    padding: 9px 0;
}
/* acercar mas uno al otro selection */

/* css de formulario de contacto */
/*
 * ESTILO PARA SEPARAR EL BOTÓN DEL CONSENTIMIENTO
 */
.contact-form-style button[type="submit"],
.contact-form-style input[type="submit"] {
    /* Mantenemos estilos anteriores y añadimos un margen superior forzado */
    margin-top: 15px !important; /* Espacio extra sobre el botón */
    
    /* ... (El resto de estilos de botón que ya tenías) ... */
    background-color: #28a745 !important;
    color: white !important;
    border: none !important;
    border-radius: 30px !important;
    font-weight: bold !important;
    padding: 12px 40px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
/* css de formulario de contacto */


/* gana dinero extra */
.feature-card {
    border-radius: 12px !important; 
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    background-color: #fff !important; 
    padding: 25px !important; 
    margin-bottom: 30px !important;
    border: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.feature-card .feature-img {
    margin-bottom: 15px !important;
}

.feature-card .feature-heading {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #333 !important;
    margin-top: 0 !important; 
    margin-bottom: 8px !important;
    text-transform: none !important;
}

.feature-card .feature-content {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #6c757d !important;
}
/*
 * FUERZA EL CENTRADO DE LAS TARJETAS DENTRO DEL CONTENEDOR
 * Esto soluciona que el último elemento quede "volando" a la izquierda.
 */
.section-title + .row { /* Selecciona el ROW justo después del título de la sección */
    /* Activa Flexbox para manejar la alineación */
    display: flex; 
    /* Permite que los elementos pasen a la siguiente línea */
    flex-wrap: wrap; 
    /* Centra los elementos horizontalmente, especialmente la última fila impar */
    justify-content: center !important; 
    
    /* Asegura que los elementos col-sm-4 tengan el ancho completo de Bootstrap */
    align-items: flex-start; /* Alineación vertical */
}

/* Ajusta el margen inferior para la última fila, si es necesario */
.section-title + .row .col-sm-4:last-child {
    margin-bottom: 30px; /* Mantener la separación inferior si está solo */
}

/* Opcional: Centrar el contenido de la tarjeta si quieres que todo el texto esté centrado */
.feature-card {
    text-align: center; /* Centra el texto dentro de cada tarjeta */
}
/* gana dinero extra */


/* como empezar */

//*
 * ESTILOS INNOVADORES 2.0 PARA LA SECCIÓN DE TRES PASOS (FONDO OSCURO #31245C)
 * Estilo: Tarjeta Pin-Up con efecto 3D
 */

/* 1. Fondo de la Sección y Títulos (Se mantiene el morado oscuro) */
.section-pasos-inicio {
    background: #31245c !important; 
    padding-top: 80px;
    padding-bottom: 80px;
}

.section-pasos-inicio .section-title h3,
.section-pasos-inicio .section-title h2 {
    color: #5a5a5a !important; 
}

/* 2. Estilo de Tarjeta (Base del Contenido) */
.section-pasos-inicio .step-card {
    /* Nueva base: Morado un poco más claro para un efecto de capa */
    background-color: #000000; 
    border-radius: 15px;
    padding: 30px 20px 20px 20px; 
    margin-bottom: 30px;
    
    /* Configuración 3D */
    position: relative;
    overflow: visible; /* Importante para que el número salga del borde */
    transform-style: preserve-3d; /* Permite rotación 3D en hover */
    perspective: 1000px;
    
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); /* Transición más suave y elástica */
    z-index: 5;
}

/* 3. EFECTO 3D EN HOVER (Da mucha vida) */
.section-pasos-inicio .step-card:hover {
    transform: rotateX(5deg) rotateY(5deg) scale(1.05); /* Ligeramente inclinado y más grande */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); /* Sombra más intensa */
    z-index: 10;
}

/* 4. Estilo del Número del Paso (El "PIN" llamativo) */
.section-pasos-inicio .step-card .step-num {
    position: absolute;
    top: -25px; /* Sale por arriba */
    right: -25px; /* Sale por la derecha */
    z-index: 20; /* Encima de todo */
    
    /* Diseño del número */
    background: #FF5722; /* NARANJA VIVO Y LLAMATIVO */
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 5px 15px rgba(255, 87, 34, 0.5); /* Sombra para que flote */
    border: 3px solid #fff; /* Borde blanco para separar del fondo */
    
    transition: all 0.3s ease-in-out;
    transform: translateZ(20px); /* Le da profundidad en la rotación 3D */
}

/* Estilo del texto del número */
.section-pasos-inicio .step-card .step-num span {
    color: #fff;
    font-size: 28px;
    font-weight: 900;
    line-height: 54px; /* Ajuste por el borde */
    display: block;
}

/* 5. Efecto Hover en el PIN */
.section-pasos-inicio .step-card:hover .step-num {
    background: #FFC107; /* Amarillo/Dorado en hover */
    box-shadow: 0 5px 20px rgba(255, 193, 7, 0.8);
}

/* 6. Estilo de los Iconos (Capa interna) */
.section-pasos-inicio .step-card .step-img {
    background-color: #31245c; /* Fondo Morado más oscuro para el ícono */
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 15px auto; /* Centrar y espacio debajo */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.1); /* Anillo sutil */
    transition: all 0.3s ease-in-out;
}

.section-pasos-inicio .step-card:hover .step-img {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2); /* Anillo más visible en hover */
}

/* Ajuste de colores base del icono para que se vean bien sobre el fondo oscuro */
.section-pasos-inicio .step-card .step-img i {
    filter: drop-shadow(0 0 5px rgba(0,0,0,0.5));
    /* Si los ms-sprite son imágenes, esto no aplica, pero es buena práctica */
}


/* 7. Ajustes de Contenido */
.section-pasos-inicio .step-card .step-heading {
    color: #fff !important; /* Título en blanco sobre el fondo de la tarjeta */
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    text-transform: uppercase; /* Darle más fuerza */
    letter-spacing: 1px;
}

.section-pasos-inicio .step-card .step-content {
    color: #D3D3D3 !important; /* Texto gris claro */
    font-size: 15px;
    line-height: 1.6;
}
/* como empezar */

/* header */
/*
 * DISEÑO INNOVADOR Y CORREGIDO PARA EL HEADER PRINCIPAL (HEADER.SHORTEN)
 * Enfocado en la limpieza del formulario (Efecto Cristal Esmerilado)
 */
header.shorten {
    /* Fondo Degradado Profundo (Dark Blue/Purple) */
    background: linear-gradient(135deg, #1f143d 0%, #31245c 100%) !important; 
    position: relative;
    overflow: hidden; 
    padding-top: 150px; 
    padding-bottom: 100px;
    min-height: 550px; 
}

/* Patrón de Fondo Sutil */
header.shorten::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Patrón de líneas diagonales muy sutil */
    background: repeating-linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.05) 10px,
        transparent 10px,
        transparent 20px
    );
    z-index: 1;
    opacity: 0.5;
}

header.shorten .container {
    position: relative;
    z-index: 5;
}

/* Estilo de Títulos */
header.shorten .intro-text .intro-lead-in {
    font-size: 30px;
    font-weight: 300;
    color: #b3a0e6 !important; 
    margin-bottom: 5px;
}

header.shorten .intro-text .intro-heading {
    font-size: 68px; 
    font-weight: 900;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 40px;
}

/* 4. Contenedor del Formulario (Tarjeta de Cristal Esmerilado) */
header.shorten .row {
    padding: 25px; 
    background: rgba(255, 255, 255, 0.15); /* Fondo semitransparente más claro */
    border-radius: 18px; /* Bordes más redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(8px); /* <-- Efecto de Cristal Esmerilado más fuerte */
    transition: all 0.3s ease-in-out;
}
header.shorten .row:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6); 
}

/* 5. Estilos del Formulario: Ajuste del Input y Botón */
/* Si tu formulario usa la estructura de CakePHP con un div.input-group: */
.shorten .input-group input[type="text"],
.shorten .input-group input[type="url"],
.shorten .input-group .form-control { /* Aseguramos que el input base sea afectado */
    height: 60px !important;
    border: none !important;
    background-color: #fff !important;
    font-size: 18px;
    /* Ajuste para que el input ocupe el espacio correcto sin bordes extras */
    border-radius: 10px 0 0 10px !important; 
    padding-left: 20px;
}

/* Estilo del Botón 'Shorten' (Aseguramos que el botón sea un grupo) */
.shorten .input-group .btn {
    height: 60px !important;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    /* Borde redondeado sólo a la derecha */
    border-radius: 0 10px 10px 0 !important;
    /* Degradado en el botón */
    background: linear-gradient(90deg, #ff5722 0%, #ff9800 100%) !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4);
    transition: all 0.3s ease-in-out;
}
.shorten .input-group .btn:hover {
    box-shadow: 0 6px 20px rgba(255, 87, 34, 0.6);
    background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%) !important; 
}


/* 6. Corrección para móvil (Input y botón separados) */
@media (max-width: 767px) {
    header.shorten .intro-heading {
        font-size: 40px;
    }
    header.shorten .row {
        padding: 15px;
    }
    /* Redondeado completo para inputs y botones en móvil */
    .shorten .input-group input[type="text"],
    .shorten .input-group .btn {
        border-radius: 10px !important;
        margin-bottom: 10px;
    }
}
/* header */

/* COMO EMPEZAR 2 AISLADO */

/* 1. Estilo General de la Tarjeta */
.section-pasos-flotantes .step {
    /* Eliminamos sombra y redondeado predeterminado */
    box-shadow: none !important; 
    border-radius: 15px !important;
    background-color: #fff !important;
    padding: 30px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    border: 1px solid #e0e0e0; /* Borde sutil */
    position: relative;
    overflow: hidden;
    z-index: 5;
}

/* 2. Efecto de Hover (Flotar y Brillar) */
.section-pasos-flotantes .step:hover {
    transform: translateY(-8px); /* Flotar ligeramente */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15) !important; /* Sombra pronunciada */
}

/* Pseudo-elemento de fondo: Brillo de color Morado que se expande */
.section-pasos-flotantes .step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #31245c; /* Color de acento Morado */
    /* Crea un círculo que se expande desde el centro */
    clip-path: circle(0% at 50% 50%); 
    transition: all 0.5s ease-out;
    z-index: 1;
    opacity: 0.1; /* Opacidad muy baja para que sea un brillo sutil */
}

.section-pasos-flotantes .step:hover::before {
    clip-path: circle(120% at 50% 50%); /* Expande el círculo en hover */
    opacity: 0.05; 
}

/* 3. Estilo del Icono (La Burbuja) */
.section-pasos-flotantes .step i.fs-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    font-size: 2.2rem !important; 
    margin-bottom: 20px !important;
    position: relative;
    z-index: 2; 

    /* Fondo y sombra */
    background-color: #31245c; /* Fondo morado */
    color: #fff !important; /* Icono blanco */
    box-shadow: 0 5px 15px rgba(49, 36, 92, 0.4);
    transition: all 0.4s ease;
}

/* 4. Efecto de Hover en el Icono (Cambia de color) */
.section-pasos-flotantes .step:hover i.fs-1 {
    background-color: #ff5722; /* Naranja vibrante en hover */
    box-shadow: 0 5px 20px rgba(255, 87, 34, 0.6);
}

/* 5. Estilo del Contenido */
.section-pasos-flotantes .step h5.fw-bold {
    color: #333333 !important; 
    margin-top: 10px;
    font-size: 1.3rem;
    position: relative;
    z-index: 2;
}

.section-pasos-flotantes .step p.text-muted {
    color: #777 !important;
    position: relative;
    z-index: 2;
    font-size: 1.30rem;
}

/* 6. Estilo del Título de Sección */
.section-pasos-flotantes .section-title h2.section-heading b {
    color: #31245c; /* Asegurar que la parte en negrita del título de sección sea morada */
}
/* COMO EMPEZAR 2 AISLADO */

/* ULTIMAS PUBLICACIONES */
/*
 * ESTILOS DE LISTADO DE ÚLTIMAS PUBLICACIONES EN HOME
 * Clase: latest-blog-posts
 */

.latest-blog-posts {
    padding-top: 60px;
    padding-bottom: 60px;
}

.latest-blog-posts .blog-list-titles {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.latest-blog-posts .list-group-item {
    padding: 18px 25px;
    border: none;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s, transform 0.2s;
    display: flex; 
    justify-content: space-between;
    align-items: center;
}

.latest-blog-posts .list-group-item:hover {
    background-color: #f0f0f5; 
    transform: translateX(5px);
    cursor: pointer;
}

.latest-blog-posts .post-title-link {
    font-weight: 600;
    color: #31245c; 
    font-size: 1.31rem;
    flex-grow: 1;
}

.latest-blog-posts .post-date-link {
    font-size: 0.85rem;
    color: #ff5722; 
    margin-left: 15px;
    min-width: 100px; 
    text-align: right;
}

.latest-blog-posts .btn-primary {
    background-color: #31245c;
    border-color: #31245c;
    transition: background-color 0.3s;
}

.latest-blog-posts .btn-primary:hover {
    background-color: #ff5722;
    border-color: #ff5722;
}
/*
 * ESTILOS DE LISTADO DE ÚLTIMAS PUBLICACIONES EN HOME
 */
.latest-blog-posts {
    padding-top: 60px;
    padding-bottom: 60px;
}
/* ... resto del CSS ... */
/* ULTIMAS PUBLICACIONES */