/*
Theme Name:   Twenty Twenty-Five Child
Theme URI:    https://wordpress.org/themes/twentytwentyfive/
Description:  Tema hijo personalizado para portafolio profesional.
Author:       Miguel Figueroa
Template:     twentytwentyfive
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Estilos globales y espaciado para el Hero */
.hero-section {
    padding: 8rem 2rem;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Tipografía fluida para el H1 (se adapta sola a pantallas móviles) */
.hero-section h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: #1a202c;
}

/* Estilo para el párrafo de introducción */
.hero-section p {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    line-height: 1.6;
    color: #4a5568;
    margin-bottom: 2.5rem;
    max-width: 650px;
}

/* Micro-interacciones para los botones nativos de WordPress */
.hero-section .wp-block-button__link {
    border-radius: 6px !important;
    padding: 0.8rem 1.75rem !important;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.hero-section .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Separación para los iconos sociales */
.hero-section .wp-block-social-links {
    margin-top: 2rem;
    gap: 1rem;
}

/* Estilo personalizado para el bloque de código del Hero */
.hero-section .wp-block-code {
    background-color: #1e1e2e; /* Fondo oscuro tipo VS Code */
    color: #cdd6f4;
    border: 1px solid #313244;
    border-radius: 8px;
    padding: 1.5rem;
    font-family: 'Fira Code', 'Courier New', Courier, monospace;
    font-size: 0.9rem;
    line-height: 1.5;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15);
    overflow-x: auto;
}

/* Simulación sutil de sintaxis (opcional para dar dinamismo) */
.hero-section .wp-block-code code {
    color: #f5e0dc;
}

/* Contenedor principal de la sección de habilidades */
.skills-section {
    padding: var(--wp--preset--spacing--50) 2rem;
    background-color: var(--wp--preset--color--base);
    max-width: var(--wp--style--global--wide-size);
    margin: 0 auto;
}

/* Título de la sección */
.skills-section h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    text-align: center;
    margin-bottom: 3rem;
    color: #1a202c;
    letter-spacing: -0.02em;
}

/* Formato de tarjetas para cada columna */
.skills-section .wp-block-column {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 2rem 1.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.skills-section .wp-block-column:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

/* Estilo de los encabezados de cada categoría (H3) */
.skills-section h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid #edf2f7;
    padding-bottom: 0.5rem;
}

/* Limpieza de las listas nativas de WordPress */
.skills-section ul {
    list-style-type: none; /* Quitamos los puntos por defecto */
    padding: 0;
    margin: 0;
}

/* Elementos de la lista */
.skills-section ul li {
    font-size: 0.95rem;
    color: #4a5568;
    padding: 0.4rem 0;
    position: relative;
    padding-left: 1.25rem;
}

/* Añadir un indicador elegante de código (>) antes de cada habilidad */
.skills-section ul li::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #3182ce; /* Un tono azul técnico */
    font-weight: bold;
    font-size: 1.1rem;
    top: 0.2rem;
}

/* Ajuste responsivo para tablets y móviles */
@media (max-width: 1024px) {
    .skills-section .wp-block-columns {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
        gap: 1.5rem;
    }
}

/* Responsividad para pantallas pequeñas */
@media (max-width: 782px) {
    .hero-section {
        padding: 4rem 1rem;
        text-align: left;
    }
    
    .hero-section .wp-block-columns {
        flex-direction: column; /* En móviles, el texto va arriba y la imagen/código abajo */
        gap: 3rem;
    }
}