/* --- Estilos para la Sección Sobre el Creador (Diseño Claro y Profesional) --- */

/* :root {
    --primary-color-blue: #4285F4; /* Azul Google / Primario */
    --primary-color-blue-darker: #3367D6;
    --accent-color-orange: #FFA726; /* Naranja/Amarillo de acento */
    --accent-color-orange-darker: #FB8C00;
    --accent-color-ai: #00D9E9; /* Cian para toques IA sutiles */
    
    --text-color-dark: #202124; /* Gris oscuro Google para texto principal */
    --text-color-medium: #5f6368; /* Gris medio Google para texto secundario */
    --text-color-light: #80868b;   /* Gris claro Google para detalles */
    --text-color-on-accent: #ffffff; /* Texto blanco sobre colores de acento */

    --bg-light-primary: #ffffff; /* Fondo blanco principal */
    --bg-light-secondary: #f8f9fa; /* Fondo gris muy claro para secciones o tarjetas */
    --border-color-light: #dadce0; /* Borde sutil Google */

    --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-family-display: 'Inter', sans-serif; /* Usar Inter también para títulos para consistencia limpia */

    --border-radius-md: 0.5rem; 
    --border-radius-lg: 0.75rem;
    --shadow-subtle: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --shadow-medium: 0 4px 8px 0 rgba(60,64,67,0.15), 0 1px 3px 1px rgba(60,64,67,0.1);
    --container-max-width: 1140px; 
}
*/

/* Importar Inter si no está cargada globalmente */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

.sobre-creador-section *, /* Quitar .theme-dark para aplicar a todos los .sobre-creador-section */
.sobre-creador-section *::before,
.sobre-creador-section *::after {
    box-sizing: border-box;
}

.sobre-creador-section {
    padding: 80px 0;
    background-color: var(--bg-light-primary, #ffffff);
    color: var(--text-color-dark, #202124);
    font-family: var(--font-family-sans-serif, 'Inter', sans-serif);
    position: relative;
    overflow: hidden;
}

/* Formas decorativas de fondo - ahora más sutiles para fondo claro */
.creador-background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
}
.creador-background-shapes .shape {
    position: absolute;
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; /* Forma orgánica tipo blob */
    opacity: 0.08; /* Muy sutil */
}
.creador-background-shapes .shape-1 {
    width: 400px;
    height: 400px;
    background-color: var(--primary-color-blue, #4285F4);
    top: -80px;
    left: -120px;
    transform: rotate(15deg);
    filter: blur(60px);
}
.creador-background-shapes .shape-2 {
    width: 500px;
    height: 500px;
    background-color: var(--accent-color-orange, #FFA726);
    bottom: -150px;
    right: -200px;
    transform: rotate(-25deg);
    filter: blur(70px);
}
.creador-background-shapes .shape-3 {
    width: 300px;
    height: 300px;
    background-color: var(--accent-color-ai, #00D9E9);
    top: 25%;
    right: 10%;
    transform: rotate(45deg);
    filter: blur(50px);
    opacity: 0.06;
}


.sobre-creador-section .container {
    max-width: var(--container-max-width, 1140px);
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    position: relative;
    z-index: 1;
}

.creador-content-wrapper-modern {
    display: flex;
    align-items: center;
    gap: 50px; 
    background-color: var(--bg-light-secondary, #f8f9fa); 
    padding: 40px;
    border-radius: var(--border-radius-lg, 0.75rem);
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15));
    border: 1px solid var(--border-color-light, #dadce0);
}

.creador-foto-col-modern {
    flex: 0 0 320px; /* Ancho fijo para la columna de la foto */
    position: relative;
}

.creador-foto-card {
    position: relative;
    border-radius: var(--border-radius-md, 0.5rem);
    box-shadow: var(--shadow-medium, 0 4px 8px 0 rgba(60,64,67,0.15), 0 1px 3px 1px rgba(60,64,67,0.1));
    /* Marco con color de acento */
    padding: 8px;
    background-color: var(--primary-color-blue, #4285F4);
}

.creador-foto-modern {
    display: block;
    width: 100%;
    height: auto; 
    max-height: 480px; 
    object-fit: cover;
    border-radius: calc(var(--border-radius-md, 0.5rem) - 4px); /* Radio interno más pequeño que el marco */
}

/* Quitar el .creador-foto-accent-bg ya que el marco de la tarjeta hace ese efecto */


.creador-texto-col-modern {
    flex: 1;
    padding-left: 0; /* Ajustar si es necesario, pero el gap ya da espacio */
}

.creador-header-info {
    margin-bottom: 25px;
}

.creador-kicker-modern {
    font-family: var(--font-family-sans-serif, 'Inter', sans-serif); /* Kicker con fuente normal */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-color-blue, #4285F4);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.creador-nombre-modern { /* LEMA */
    font-family: var(--font-family-sans-serif, 'Inter', sans-serif); /* Título con fuente normal, pero más peso */
    font-size: 2rem; 
    font-weight: 700;
    color: var(--text-color-dark, #202124);
    line-height: 1.3;
    margin-bottom: 10px;
}

.creador-titulo-profesional-modern {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color-medium, #5f6368);
    margin-bottom: 5px;
}

.creador-colegio-modern {
    font-size: 0.95rem;
    color: var(--text-color-light, #80868b);
}
.creador-colegio-modern i {
    margin-right: 6px;
    color: var(--primary-color-blue, #4285F4);
}

.creador-bio-modern p {
    font-size: 1rem;
    line-height: 1.75; /* Mayor interlineado para legibilidad */
    color: var(--text-color-medium, #5f6368);
    margin-bottom: 25px;
}

.creador-oferta-modern {
    margin-bottom: 30px;
    padding: 15px;
    background-color: var(--bg-light-secondary, #f8f9fa); /* Fondo sutil para la oferta */
    border-radius: var(--border-radius-md, 0.5rem);
    border-left: 4px solid var(--accent-color-orange, #FFA726); /* Acento naranja */
}
.creador-oferta-modern p {
    font-size: 0.95rem;
    color: var(--text-color-dark, #202124);
    margin: 0;
    display: flex;
    align-items: center;
}
.creador-oferta-modern .icon-oferta {
    color: var(--accent-color-orange, #FFA726);
    margin-right: 10px;
    font-size: 1.2em;
}

.creador-contacto-modern .contacto-titulo-modern {
    font-family: var(--font-family-sans-serif, 'Inter', sans-serif);
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-color-dark, #202124);
    margin-bottom: 20px;
}

.btn.btn-contact-modern {
    display: inline-flex; /* Cambiado a inline-flex para que estén en línea */
    padding: 12px 24px;
    margin-right: 15px;
    margin-bottom: 10px; 
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-color-on-accent, #ffffff);
    background-color: var(--primary-color-blue, #4285F4);
    border: none;
    border-radius: var(--border-radius-md, 0.5rem);
    text-decoration: none;
    transition: all 0.3s ease;
    align-items: center;
    box-shadow: var(--shadow-subtle, 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15));
}
.btn.btn-contact-modern i {
    margin-right: 8px;
}
.btn.btn-contact-modern:hover {
    background-color: var(--primary-color-blue-darker, #3367D6);
    transform: translateY(-2px);
    box-shadow: var(--shadow-medium, 0 4px 8px 0 rgba(60,64,67,0.15), 0 1px 3px 1px rgba(60,64,67,0.1));
}

/* Botón de acento naranja */
.btn.btn-contact-modern.btn-phone-modern,
.btn.btn-contact-modern.btn-web-modern { /* Podríamos usar uno de estos para el naranja */
    background-color: var(--accent-color-orange, #FFA726);
    color: var(--text-color-dark, #202124); /* Texto oscuro sobre naranja claro */
}
.btn.btn-contact-modern.btn-phone-modern:hover,
.btn.btn-contact-modern.btn-web-modern:hover {
    background-color: var(--accent-color-orange-darker, #FB8C00);
    color: var(--text-color-dark, #202124);
}


/* --- Responsive Adjustments --- */
@media (max-width: 991.98px) { /* Tablets */
    .creador-content-wrapper-modern {
        flex-direction: column;
        padding: 30px;
        gap: 30px;
    }
    .creador-foto-col-modern {
        flex: 0 0 auto; 
        width: 100%;
        max-width: 280px; 
        margin-bottom: 0; /* El gap ya da espacio */
    }
    .creador-texto-col-modern {
        text-align: center;
    }
    .creador-header-info, .creador-bio-modern p, .creador-oferta-modern p {
        text-align: center; 
    }
     .creador-oferta-modern p {
        justify-content: center;
    }
    .creador-contacto-modern .btn {
        margin-left: 5px; /* Ajustar para centrar mejor */
        margin-right: 5px;
    }
}

@media (max-width: 767.98px) { /* Móviles */
    .sobre-creador-section {
        padding: 60px 0;
    }
    .creador-content-wrapper-modern {
        padding: 25px;
        gap: 25px;
    }
    .creador-nombre-modern {
        font-size: 1.8rem;
    }
    .creador-titulo-profesional-modern {
        font-size: 1rem;
    }
    .creador-bio-modern p {
        font-size: 0.95rem;
    }
    .creador-background-shapes .shape {
        transform: scale(0.5);
        opacity: 0.05;
    }
    .btn.btn-contact-modern {
        display: flex; /* Hacer que ocupen el ancho y se centren */
        justify-content: center;
        width: 100%;
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
}