/* Reset básico para márgenes y fuentes */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* --- Barra Superior --- */
.top-bar {
    background-color: #0b1154; /* Azul oscuro */
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 10px 20px;
    font-size: 14px;
    gap: 30px; /* Espacio entre los elementos */
}

.info-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-yellow {
    color: #ffcc00; /* Amarillo para los íconos */
    font-size: 16px;
}

/* --- Navegación Principal --- */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    padding: 15px 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.logo img {
    height: 50px;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 10px; /* Reducimos un poco el gap para que quepan bien con el nuevo fondo */
    align-items: center;
}

.nav-links li {
    position: relative;
}

/* Enlaces principales del menú */
.nav-links a {
    text-decoration: none;
    color: #0b1154;
    font-weight: 700;
    font-size: 14px;
    padding: 8px 15px; /* Añadimos padding para crear el "botón" */
    border-radius: 8px; /* Bordes redondeados */
    transition: all 0.3s ease;
    display: block;
}

/* Efecto Hover: Fondo amarillo para el menú principal */
.nav-links a:hover,
.dropdown:hover > a { /* Mantiene el amarillo encendido cuando el submenú está abierto */
    background-color: #ffcc00;
    color: #e0e0e0;
}

.nav-links .fas {
    font-size: 12px;
    margin-left: 3px;
}

/* --- Menú Desplegable (Dropdown) Estilo Botones Apilados --- */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: transparent; /* El contenedor ya no tiene fondo blanco */
    box-shadow: none; /* Quitamos la sombra del contenedor */
    list-style: none;
    min-width: 220px;
    padding-top: 10px; /* Espacio entre el menú principal y el primer submenú */
    z-index: 100;
}

.dropdown:hover .dropdown-menu {
    display: block; /* Muestra el menú al pasar el mouse */
}

.dropdown-menu li {
    padding: 0;
    margin-bottom: 6px; /* Separación entre cada botón del submenú */
}

/* Diseño por defecto para los enlaces del submenú (Azul oscuro) */
/* Diseño uniforme para TODOS los enlaces del submenú (Azul oscuro) */
.dropdown-menu a {
    background-color: #0b1154;
    color: #ffffff !important; /* Texto blanco */
    font-weight: 600;
    border-radius: 8px; /* Bordes redondeados para cada cajita */
    box-shadow: 0 4px 8px rgba(0,0,0,0.2); /* Sombra individual a cada botón */
    padding: 12px 20px;
    transition: all 0.3s ease; /* Transición suave */
}

/* Efecto hover (pasar el mouse) igual para todos en el submenú */
.dropdown-menu a:hover {
    background-color: #e0e0e0; /* Un azul aún más oscuro */
    transform: translateX(5px); /* Efecto sutil: el botón se mueve un poquito a la derecha */
}

.dropdown-menu li:first-child a:hover {
    background-color: #e0e0e0; /* Un gris un poco más oscuro */
}
/* --- Banner Principal (Hero Section) --- */
.hero-banner {
    /* Aquí definimos la capa blanca semitransparente (85% opacidad) y la imagen de fondo */
    background: linear-gradient(
        rgba(255, 255, 255, 0.85), 
        rgba(255, 255, 255, 0.85)
    ), url('img/banner.png');
    
    background-size: cover;
    /* CAMBIO CLAVE: Cambia 'center' por 'top center' */
    background-position: top center; 
    background-repeat: no-repeat;
    
    /* AJUSTE OPCIONAL: Sube la altura mínima de 500px a 600px o 650px 
       para que se alcance a ver más de los brazos/balón */
    min-height: 650px; 
    
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 40px 20px;
}

.hero-content {
    text-align: center;
    max-width: 800px; /* Evita que el texto se estire demasiado en pantallas grandes */
}

.hero-content h1 {
    color: #0b1154; /* El mismo azul oscuro del menú */
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    /* Sutil sombra para dar un ligero efecto 3D como en la imagen */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2); 
}

.hero-content p {
    color: #222; /* Un gris muy oscuro/casi negro */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 40px;
}

/* --- Botón (Call to Action) --- */
.cta-button {
    display: inline-block;
    background-color: #ffcc00; /* El amarillo de los íconos */
    color: #000;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 35px;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0,0,0,0.2); /* Sombra debajo del botón */
    transition: all 0.3s ease;
}

.cta-button:hover {
    background-color: #e6b800; /* Un amarillo un poco más oscuro al pasar el mouse */
    box-shadow: 0 6px 8px rgba(0,0,0,0.3);
    transform: translateY(-2px); /* Efecto de que el botón se levanta */
}
/* --- Sección de Información y Comunicados --- */
.info-section {
    padding: 80px 20px;
    background-color: #ffffff;
}

.info-container {
    max-width: 1200px;
    margin: 0 auto; /* Centra el contenedor en la pantalla */
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alinea los elementos arriba */
    gap: 40px; /* Espacio entre las dos columnas */
}

/* --- Columna Izquierda (Texto) --- */
.info-text {
    width: 60%; /* Toma el 60% del ancho disponible */
}

.info-text h2 {
    color: #0b1154; /* Azul oscuro corporativo */
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
}

.info-text p {
    color: #333333;
    font-size: 18px;
    line-height: 1.6;
}

/* --- Columna Derecha (Archivos) --- */
.info-files {
    width: 35%; /* Toma el 35% del ancho disponible */
}

.files-header {
    background-color: #ffcc00; /* Fondo amarillo */
    color: #222;
    text-align: center;
    font-weight: 700;
    font-size: 18px;
    padding: 15px;
    margin-bottom: 10px;
}

.files-list {
    list-style: none; /* Quita los puntos de la lista */
    padding: 0;
}

.files-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 5px;
    border-bottom: 1px solid #e0e0e0; /* Línea separadora gris clara */
}

/* El último elemento no necesita línea abajo */
.files-list li:last-child {
    border-bottom: none; 
}

.file-name {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el icono PDF y el texto */
    color: #444;
    font-weight: 600;
    font-size: 15px;
}

.icon-pdf {
    color: #ff0000; /* Color rojo para el icono PDF */
    font-size: 28px;
}

.file-size {
    color: #888; /* Texto gris para el peso del archivo */
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
}
/* --- Sección de Advertencia Legal --- */
.warning-section {
    /* Fondo azul muy oscuro (casi negro) para contrastar el texto blanco */
    background: linear-gradient(
        rgba(6, 10, 50, 0.95), 
        rgba(11, 17, 84, 0.95)
    );
    padding: 40px 20px;
    color: #ffffff; /* Texto general en blanco */
}

.warning-container {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    align-items: center; /* Centra el ícono y el texto verticalmente */
    gap: 40px; /* Espaciado entre el ícono y el texto */
}

.warning-icon {
    flex-shrink: 0; /* Evita que el ícono se encoja si hay mucho texto */
}

.warning-text {
    font-size: 15px;
    line-height: 1.6;
}

.warning-text p {
    margin-bottom: 15px; /* Espacio entre los dos párrafos */
}

/* Evita que el último párrafo tenga un margen innecesario abajo */
.warning-text p:last-child {
    margin-bottom: 0;
}

/* --- Clases de utilidad para resaltar texto --- */
.highlight-yellow {
    color: #ffcc00; /* El mismo amarillo del resto de la página */
    font-weight: 700;
}

.highlight-bold {
    font-size: 16px;
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 768px) {
    .warning-container {
        flex-direction: column; /* Apila el ícono arriba y el texto abajo */
        text-align: center; /* Centra el texto para que se vea mejor en móvil */
    }
}
/* --- Sección de Recordatorio (Fondo) --- */
.reminder-section {
    padding: 60px 20px;
    background-color: #fafafa; /* Un fondo gris muy claro para que la tarjeta blanca resalte */
    display: flex;
    justify-content: center; /* Centra la tarjeta en la pantalla */
}

/* --- La Tarjeta (Card) --- */
.reminder-card {
    display: flex;
    background-color: #ffffff;
    max-width: 800px; /* Ancho máximo para que no se estire demasiado */
    width: 100%;
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Sombra suave para dar profundidad */
    overflow: hidden; /* Corta la imagen para que respete el borde redondeado */
}

/* --- Contenedor de la Imagen --- */
.reminder-image {
    flex: 1; /* Ocupa el 50% del espacio de la tarjeta */
}

.reminder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Evita que la imagen se deforme, llenando todo su espacio */
    display: block; /* Quita un pequeño margen fantasma que traen las imágenes por defecto */
}

/* --- Contenedor del Texto --- */
.reminder-content {
    flex: 1; /* Ocupa el otro 50% del espacio */
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centra el texto verticalmente */
}

.reminder-content h3 {
    color: #000000; /* Negro para el título */
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 15px;
}

.reminder-content p {
    color: #555555; /* Gris oscuro para el párrafo */
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 768px) {
    .reminder-card {
        flex-direction: column; /* Apila la imagen arriba y el texto abajo */
    }
    
    .reminder-content {
        padding: 30px 20px; /* Reduce un poco el relleno interno en móviles */
    }
    
    .reminder-image img {
        height: 250px; /* Le da una altura fija a la imagen en móviles para que no quede gigante */
    }
}
/* --- Sección de Proceso de Registro --- */
.process-section {
    background-color: #f8f9fa; /* Un gris casi blanco para diferenciar la sección */
    padding: 60px 20px;
    text-align: center;
}

.process-container {
    max-width: 1100px;
    margin: 0 auto;
}

.process-section h2 {
    color: #0b1154; /* Azul oscuro */
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.3;
}

.process-subtitle {
    color: #444444;
    font-size: 18px;
    margin-bottom: 40px;
}

/* --- Cuadrícula de Tarjetas (Grid) --- */
.cards-grid {
    display: flex;
    justify-content: center;
    gap: 30px; /* Espacio entre las tarjetas */
}

/* --- Diseño Individual de cada Tarjeta --- */
.process-card {
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #eaeaea; /* Borde gris muy clarito */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra suave */
    padding: 20px;
    width: 32%; /* Cada tarjeta ocupa aprox un tercio del espacio */
    display: flex;
    flex-direction: column; /* Apila los elementos de la tarjeta hacia abajo */
}

/* Contenedor gris claro para las imágenes/iconos */
.card-icon {
    background-color: #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 180px; /* Altura fija para que las imágenes se vean uniformes */
}

.card-icon img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen sin deformarla */
}

.process-card p {
    color: #333333;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1; /* Empuja el botón siempre hacia el fondo de la tarjeta */
}

/* --- Botones de las tarjetas --- */
.btn {
    display: block; /* Para que el botón ocupe todo el ancho */
    padding: 12px 0;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    transition: all 0.3s ease;
}

.btn-dark {
    background-color: #0b1154;
    color: #ffffff;
}

.btn-dark:hover {
    background-color: #060a33; /* Más oscuro al pasar el mouse */
}

.btn-yellow {
    background-color: #ffcc00;
    color: #000000;
}

.btn-yellow:hover {
    background-color: #e6b800; /* Más oscuro al pasar el mouse */
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 900px) {
    .cards-grid {
        flex-direction: column; /* Apila las tarjetas verticalmente en pantallas pequeñas */
        align-items: center;
    }
    
    .process-card {
        width: 100%;
        max-width: 400px; /* Evita que las tarjetas se estiren demasiado en una tablet */
    }
}
/* --- Sección de Correos de Contacto --- */
.contact-emails-section {
    padding: 40px 20px;
    background-color: #f8f9fa; /* Mantiene el fondo sutil de la sección anterior, ajústalo si es necesario */
    display: flex;
    justify-content: center; /* Centra la caja horizontalmente */
}

/* --- Caja Gris Oscura --- */
.contact-emails-box {
    background-color: #555555; /* Color gris oscuro */
    color: #ffffff; /* Texto en blanco */
    max-width: 1100px; /* Ancho máximo para alinearse con los elementos de arriba */
    width: 100%;
    padding: 30px 40px; /* Espaciado interno (arriba/abajo - izquierda/derecha) */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* Sombra para dar efecto de elevación */
    text-align: center; /* Centra el texto */
}

.contact-emails-box p {
    font-size: 20px; /* Tamaño de letra un poco más grande */
    line-height: 1.6;
    margin: 0; /* Quita márgenes por defecto */
}

/* --- Enlaces de Correo (Color Amarillo) --- */
.email-link {
    color: #ffcc00; /* Amarillo característico del sitio */
    text-decoration: none; /* Quita el subrayado por defecto de los enlaces */
    font-weight: 500;
    transition: color 0.3s ease; /* Efecto suave al pasar el mouse */
}

.email-link:hover {
    color: #e6b800; /* Un amarillo más oscuro al hacer hover */
    text-decoration: underline; /* Subraya al pasar el mouse para indicar que es un enlace */
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 768px) {
    .contact-emails-box {
        padding: 20px; /* Reduce el relleno en pantallas pequeñas */
    }
    
    .contact-emails-box p {
        font-size: 16px; /* Reduce el tamaño de la fuente para móviles */
    }
}
/* --- Footer: Sección de Medios de Pago --- */
.payment-partners {
    background-color: #e8f4f8; /* Azul/Celeste muy claro */
    padding: 50px 20px;
}

.partners-grid {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap; /* Permite que los logos bajen de línea si no caben */
    justify-content: center;
    gap: 15px; /* Espaciado entre cada cajita de logo */
}

/* Cajitas blancas individuales para cada logo */
.partner-logo {
    background-color: #ffffff;
    width: 130px;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Sombra muy sutil */
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Ajusta la imagen dentro de la caja sin deformarla */
}

/* --- Footer: Información de Contacto --- */
.footer-info {
    background-color: #0b1154; /* El azul oscuro institucional */
    color: #ffffff;
    text-align: center;
    padding: 40px 20px;
    font-size: 15px;
}

.footer-info p {
    margin-bottom: 8px; /* Separación sutil entre las líneas de texto */
}

.footer-info a {
    color: #ffffff; /* Asegura que el correo no se ponga azul por defecto */
    text-decoration: none;
}

.footer-info a:hover {
    text-decoration: underline; /* Subraya al pasar el mouse */
}

.footer-info .fab {
    font-size: 16px;
    margin-right: 5px;
}

/* Enlace de políticas (Texto en mayúscula más pequeño) */
.privacy-policy {
    display: inline-block;
    margin-top: 20px;
    font-size: 12px;
    letter-spacing: 0.5px;
}
/* --- Sección Certificado de Idoneidad --- */
.certificado-section {
    background-color: #f8f9fa; /* Fondo gris muy sutil de la página */
    padding: 50px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.container-certificado {
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Recuadros Crema (Login e Info) --- */
.login-box, .info-box {
    background-color: #fcf4d9; /* Color crema claro */
    border-left: 6px solid #e0b046; /* Borde izquierdo dorado/naranja */
    border-radius: 6px;
    padding: 30px;
}

.login-box {
    text-align: center;
    margin-bottom: 50px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Sombra suave */
}

.login-box p {
    font-weight: 700;
    color: #333333;
    font-size: 16px;
    margin-bottom: 20px;
}

.btn-login {
    background-color: #0b1154; /* Azul oscuro corporativo */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    padding: 12px 30px;
    border-radius: 6px;
    display: inline-block;
    transition: background-color 0.3s;
}

.btn-login:hover {
    background-color: #060a33;
}

/* --- Título Central --- */
.main-title {
    text-align: center;
    font-size: 26px;
    color: #000000;
    font-weight: 800;
    margin-bottom: 40px;
}

/* --- Layout de 2 Columnas --- */
.content-layout {
    display: flex;
    gap: 40px; /* Espacio entre el texto y la imagen */
    align-items: flex-start;
}

/* Columna Izquierda (Texto) */
.text-column {
    flex: 1; /* Ocupa el espacio restante */
}

.text-column p {
    color: #444444;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: justify; /* Texto justificado como en la imagen */
}

.requisitos-title {
    color: #cca300 !important; /* Color dorado para el subtítulo */
    font-weight: 600;
}

.requisitos-list {
    margin-bottom: 30px;
    padding-left: 25px; /* Sangría de la lista */
    color: #444444;
    font-size: 15px;
    line-height: 1.6;
}

.requisitos-list li {
    margin-bottom: 15px;
}

.info-box {
    padding: 20px 25px; /* Padding un poco menor que el login box */
}

.info-box p {
    margin-bottom: 0; /* Quita el margen al último párrafo para que no quede espacio extra */
    font-size: 14px;
}

/* Columna Derecha (Imagen) */
.image-column {
    flex: 0 0 42%; /* Fija el ancho de la imagen aprox al 42% del contenedor */
}

.image-column img {
    width: 100%;
    border-radius: 12px; /* Bordes redondeados de la foto */
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 850px) {
    .content-layout {
        flex-direction: column; /* Pone la imagen debajo del texto en móviles */
    }
    
    .image-column {
        width: 100%;
    }
}
/* --- Contenedor General de la Sección --- */
.tarjeta-entrenador-section {
    background-color: #f8f9fa; /* Fondo gris claro exterior para que resalte la tarjeta blanca */
    padding: 60px 20px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    display: flex;
    justify-content: center;
}

/* --- La Tarjeta Principal Blanca --- */
.tarjeta-card-main {
    background-color: #ffffff;
    max-width: 950px;
    width: 100%;
    border-radius: 16px; /* Bordes muy redondeados */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); /* Sombra amplia y muy suave */
    padding: 60px;
}

/* --- Etiqueta "Ley 2210" (Badge) --- */
.ley-badge {
    background-color: #e6f2ff; /* Fondo azul muy claro */
    color: #0b5bc6; /* Texto azul vibrante */
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 20px; /* Borde tipo píldora */
    display: inline-block;
    margin-bottom: 25px;
}

/* --- Título de la Tarjeta --- */
.tarjeta-title {
    color: #202b3c; /* Un azul/gris muy oscuro */
    font-size: 38px;
    font-weight: 800;
    margin-bottom: 25px;
}

/* --- Textos Introductorios --- */
.tarjeta-intro p {
    color: #4a5568; /* Gris medio/oscuro */
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

.tarjeta-intro strong {
    color: #2d3748; /* Negritas un poco más oscuras */
}

/* --- Contenedor de la lista de requisitos --- */
.requisitos-box-list {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espacio entre cada recuadro */
    margin-top: 35px;
}

/* --- Recuadro individual de cada requisito --- */
.requisito-item {
    border: 1px solid #e2e8f0; /* Borde gris claro */
    border-radius: 12px;
    padding: 30px;
    display: flex; /* Flexbox para poner el número y el texto lado a lado */
    align-items: center; /* Centra el contenido verticalmente */
    gap: 25px; /* Espacio entre el círculo azul y el texto */
    background-color: #ffffff;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Efecto hover sutil al pasar el mouse por un requisito */
.requisito-item:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* --- Círculo Azul del Número --- */
.requisito-num {
    background-color: #0b5bc6; /* Azul medio */
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Lo hace un círculo perfecto */
    display: flex;
    justify-content: center; /* Centra el número horizontalmente */
    align-items: center; /* Centra el número verticalmente */
    flex-shrink: 0; /* Evita que el círculo se aplaste si hay mucho texto */
}

/* --- Texto del Requisito --- */
.requisito-text {
    color: #334155;
    font-size: 15px;
    line-height: 1.6;
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 768px) {
    .tarjeta-card-main {
        padding: 40px 25px; /* Reduce el relleno interior de la tarjeta en móviles */
    }

    .tarjeta-title {
        font-size: 28px;
    }

    .requisito-item {
        flex-direction: column; /* Apila el número arriba del texto */
        align-items: flex-start; /* Alinea a la izquierda */
        padding: 25px 20px;
        gap: 15px;
    }
}
/* --- Contenedor General de la Sección --- */
.pasos-section {
    padding: 60px 20px;
    background-color: #ffffff; /* Fondo general blanco */
    display: flex;
    justify-content: center;
}

.pasos-container {
    max-width: 1000px;
    width: 100%;
    display: flex;
    gap: 30px; /* Separación entre la imagen y la tarjeta oscura */
    align-items: stretch; /* CLAVE: Fuerza a ambas columnas a tener la misma altura */
}

/* --- Columna Izquierda (Imagen) --- */
.pasos-image {
    flex: 1; /* Ocupa el 50% del espacio */
    border-radius: 16px;
    overflow: hidden; /* Corta la imagen para que respete las esquinas redondeadas */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.pasos-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta la imagen sin deformarla para llenar todo su contenedor */
    display: block;
}

/* --- Columna Derecha (Tarjeta Oscura) --- */
.pasos-card {
    flex: 1; /* Ocupa el otro 50% del espacio */
    background-color: #030047; /* Azul muy oscuro de fondo */
    border-radius: 16px;
    padding: 40px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

.pasos-card h2 {
    font-size: 32px;
    font-weight: 800;
    margin-bottom: 30px;
    color: #ffffff;
}

/* --- Cajitas de cada paso --- */
.step-box {
    background-color: #171560; /* Un azul ligeramente más claro que el fondo principal */
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center; /* Alinea el ícono y el texto al centro verticalmente */
    gap: 20px;
    transition: background-color 0.3s ease;
}

.step-box:hover {
    background-color: #211e7a; /* Se ilumina sutilmente al pasar el mouse */
}

/* Íconos de FontAwesome */
.emoji-icon {
    font-size: 50px; /* Ajusta el tamaño visual del emoji */
    width: 39px; /* Un ancho fijo garantiza que todos los textos arranquen en la misma línea */
    text-align: center;
    display: inline-block;
    flex-shrink: 0; /* Evita que el emoji se aplaste si el texto es largo */
}

.step-box span {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}

/* --- Botón Regístrate --- */
.btn-wrapper {
    margin-top: auto; /* Truco de Flexbox: Empuja el botón hasta abajo si sobra espacio en la tarjeta */
    text-align: center;
    padding-top: 20px;
}

.btn-registrate {
    background-color: #000080; /* Azul fuerte para el botón */
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    padding: 15px 50px; /* Botón ancho */
    border-radius: 8px;
    display: inline-block;
    transition: background-color 0.3s ease;
}

.btn-registrate:hover {
    background-color: #0000b3; /* Azul más brillante al pasar el mouse */
}

/* --- Diseño para Celulares y Tablets --- */
@media (max-width: 800px) {
    .pasos-container {
        flex-direction: column; /* Apila la imagen arriba y la tarjeta de pasos abajo */
    }

    .pasos-image {
        height: 400px; /* Le da una altura fija a la imagen en móviles para que no quede infinita */
    }
}