/*
*Primera regla hace que padding y border se incluyan dentro del ancho declarado. 
*Sin esto, los layouts se rompen de formas inesperadas.
*La segunda quita los márgenes y la tercera el padding por defecto.
*/
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
/*
*Estilos generales para el cuerpo de la página, 
*Con un fondo oscuro y texto claro.
*/
body {
    background-color: #020617;
    color: #ffffff;
    font-family: Inter, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/*
* Scroll-behavior smooth hace que el desplazamiento al hacer clic en un enlace de anclaje sea suave en lugar de instantáneo.
* Se aplica en todo el contenido html.
*/
html {
    scroll-behavior: smooth;
}

/*
* position sticky hace que el elemento se quede fijo en la parte superior de la ventana cuando se desplaza hacia abajo,
* y z-index asegura que esté por encima de otros elementos.
* top 0 hace que el elemento se quede pegado a la parte superior de la ventana.
*/
#cabecera-contenedor {
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 10px;
    width: 100%;
    height: 60px;
    background-color: #020617;
    border-bottom: 1px solid #252525;
    border-radius: 0 0 10px 10px;
}

/*
*Elementos tales como sobre mí, proyectos, contacto y CV 
*Se distribuyen horizontalmente con espacio entre ellos con aling-items: center.
* Que ocupe el 100% de la altura de su padre para que los elementos estén centrados verticalmente.
* En pantallas muy anchas el contenido se va a estirar mucho, -> max-width: 1280px y margin auto para no superar el ancho y margin: 0 auto para centrarlo.
*/
.cabecera-inside {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}
/*
* El gap solo funciona en contenedores flex.
* Los enalces son hijos del nav, asi que el gap tiene que estar donde viven ellos
*/
.cabecera-nav {
    display: flex;
    gap: 2rem;
}

/*
* Estilos para los enlaces de navegación
* Sin subrayado text-decoration none 
* Con un espacio de 20px entre ellos.
* Añade una transición suave de 0.5 segundos para el cambio de color directamente en el enlace, para que el efecto de hover ocurra al entrar y al salir.
*/
.cabecera-nav a {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.5s ease;
}
/*
Pseudoclase hover para los enlaces de navegación,
cambia el color a un azul claro 
*/
.cabecera-nav a:hover {
    color: #ffffff;
}
/*
* Padding arriba y abajo (vertical) de 5rem para separar las secciones entre sí.
*/
section {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/*
* Que: los h2 tienen un tamano base de seccion, no de hero.
* Por que: antes casi todos los titulos competian con el titular principal.
* Para que: la pagina tenga jerarquia clara entre portada, secciones y tarjetas.
*/
h2 {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.2;
    margin-bottom: 2rem;
}

p {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}

strong {
    color: #60a5fa;
    font-weight: 600;
}

h3 {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.35;
}

/*
* Display grid: El contenido se muestra como una cuadrícula con dos columnas,
* grid template columns 3fr 1fr: la primera columna ocupa 3 partes del espacio disponible y la segunda columna ocupa 1 parte, creando una relación de 3:1 entre ellas.
* Gap 2 rem: y un espacio de 2rem entre las columnas.
*/
/*
* Que: el bloque principal mantiene texto y foto en dos columnas equilibradas.
* Por que: si la foto queda demasiado grande, compite con el titular y rompe la jerarquia visual.
* Para que: la primera pantalla se lea primero por el mensaje y despues por la imagen.
*/
.seccion-contenido {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: center;
}

.contenedor{
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
}
#foto-perfil {
    width: 100%;
    max-width: 360px;
    justify-self: end;
}

/*
* Que: la foto mantiene proporcion natural con un ancho maximo controlado.
* Por que: forzarla a cuadrado la hacia verse mas pequena y recortada frente al diseno de referencia.
* Para que: el retrato tenga presencia sin romper el equilibrio con el texto.
*/
#foto-perfil img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    filter: grayscale(100%);
    transition: filter 0.8s ease;
}
/*
* poner foto en gris y cuando se pasa el raton color original
*/
#foto-perfil img:hover {
    filter: grayscale(0%);
}

#sobre-mi {
    background-color: #020617;
}

/*
* EFECTO 3D HOVER
* El truco consiste en 3 capas: contenedor exterior (soft-skill-item),
* tarjeta interior que rota (interior-tarjeta), y dos caras superpuestas.
*/

/*
* Flex para distribuir las 3 tarjetas en horizontal.
* Gap para separación entre ellas.
*/
.soft-skills {
    display: flex;
    gap: 2rem;
    padding-top: 0;
    padding-bottom: 0;
}

/*
* Tamaño fijo necesario para que las caras absolutas tengan referencia.
* Sin height definido, height: 100% en los hijos no funcionaría.
* perspective: 1000px activa el espacio 3D para los hijos — 
* sin esto, rotateY no tendría profundidad, sería plano.
*/
.soft-skill-item {
    border: 1px solid #0a1d7c;
    border-radius: 15px;
    padding: 1rem;
    width: 100%;
    height: 150px;
    text-align: center;
    perspective: 2000px;
}

/*
* position: relative para que las caras absolutas se referencien a este elemento.
* transform-style: preserve-3d hace que los hijos vivan en el espacio 3D del padre,
* sin esto, las caras se aplanarían y el efecto no funcionaría.
* transition anima el transform suavemente durante 0.6s.
*/
.interior-tarjeta {
    position: relative;
    transition: transform 0.6s ease;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

/*
* position: absolute superpone las dos caras en el mismo espacio.
* top, left, width y height al 100% para que cubran toda la tarjeta.
* backface-visibility: hidden oculta la cara cuando está girada de espaldas
* a la pantalla — sin esto verías las dos caras a la vez.
*/
.cara-delantera, .cara-trasera {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

/*
* Centrar el titulo y parrafo con display flex, aling-items center y justify-content center
*/

.cara-delantera, .cara-trasera{
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
* La cara trasera empieza ya rotada 180deg para estar "escondida".
* Cuando interior-tarjeta rote 180deg, ella llega a 0deg y se muestra.
*/
.cara-trasera {
    transform: rotateY(180deg);
}

/*
* El hover se pone en el contenedor exterior, no en interior-tarjeta.
* Si fuese en interior-tarjeta, al empezar a rotar el ratón podría
* salirse del elemento y el efecto se cortaría a mitad.
*/
.soft-skill-item:hover .interior-tarjeta {
    transform: rotateY(180deg);
}

.titulo-soft-skills {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 5rem;
    color: #ffffff;
    font-size: 1.875rem;
    font-weight: 500;
    line-height: 1.2;
}

.titulo-tech-stack{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    margin-top: 5rem;
    margin-bottom: 2rem;
    color: #ffffff;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.linea-titulo-stack {
    width: 1.5rem;
    height: 2px;
    background-color: #38bdf8;
}

#caja-global-tech-stack{
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.tarjeta-lenguaje{
    cursor: default;
    padding: 0.625rem 1.25rem;
    text-align: center;
    background-color: rgba(15, 23, 42, 0.5);
    border: 1px solid #1e293b;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
    transition: all 0.3s ease;
}

.tarjeta-lenguaje:hover{
    transform: scale(1.1);
    background-color: #0f172a;
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 10px 18px rgba(0, 0, 0, 0.35), 0 0 18px rgba(59, 130, 246, 0.25);
}

.lenguaje-tech{
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.025em;
    transition: color 0.3s ease;
}

.tarjeta-lenguaje:hover .lenguaje-tech{
    color: #60a5fa;
}

/*
* Que: experiencia adopta el formato timeline del Blade con etiqueta, linea lateral y punto azul.
* Por que: el bloque plano no separaba bien cargo, rango y descripcion tecnica.
* Para que: la lectura parezca una experiencia laboral real y guie el ojo de arriba hacia abajo.
*/
#experiencia {
    background-color: rgba(15, 23, 42, 0.4);
}

#experiencia .contenedor {
    max-width: 896px;
}

.etiqueta-experiencia {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.75rem;
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background-color: rgba(30, 58, 138, 0.5);
    border-radius: 999px;
}

.titulo-experiencia {
    margin-bottom: 3rem;
}

.caja-titulo-y-puesto-trabajo,
.caja-descripcion-experiencia {
    margin-left: 2rem;
}

.caja-titulo-y-puesto-trabajo {
    position: relative;
    border-left: 2px solid #1e293b;
    padding-left: 2rem;
}

.caja-titulo-y-puesto-trabajo::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: -0.5625rem;
    width: 1rem;
    height: 1rem;
    background-color: #2563eb;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.rango-puesto-trabajo {
    display: inline-block;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: #1e293b;
    border-radius: 999px;
    font-style: italic;
}

.caja-descripcion-experiencia {
    padding-left: 2rem;
    border-left: 2px solid #1e293b;
}

.caja-descripcion-experiencia p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.caja-descripcion-experiencia p:last-child {
    margin-bottom: 0;
}

.palabra-clave {
    display: inline-block;
    padding: 0.125rem 0.375rem;
    background-color: #1e293b;
    border-radius: 0.25rem;
}

#proyectos {
    background-color: #020617;
}

/*
* Que: la seccion de proyectos copia la composicion del Blade: encabezado centrado y cards en grid.
* Por que: las tarjetas sueltas caian una debajo de otra y no tenian la lectura compacta del diseno de referencia.
* Para que: los proyectos se puedan comparar rapidamente en tres columnas con una jerarquia visual clara.
*/
#proyectos .contenedor {
    max-width: 1024px;
    text-align: center;
}

#titulo-proyectos {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.25rem 0.75rem;
    background-color: rgba(30, 58, 138, 0.5);
    border-radius: 999px;
}

.titulo-proyectos {
    margin-bottom: 0;
}

.resumen-proyectos-seleccionados {
    max-width: 28rem;
    margin: 1rem auto 3.5rem;
}

.grid-proyectos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    text-align: left;
}

.proyecto-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background-color: #0f172a;
    border: 1px solid #1e293b;
    border-radius: 1rem;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.proyecto-card:hover {
    transform: translateY(-0.25rem);
    border-color: rgba(59, 130, 246, 0.6);
}

.tecnologia-usada-proyecto {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 1rem;
}

.lenguaje-usado-en-proyecto {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background-color: #172554;
    border-radius: 999px;
}

.titulo-del-proyecto {
    margin-bottom: 0.75rem;
    transition: color 0.3s ease;
}

.proyecto-card:hover .titulo-del-proyecto {
    color: #60a5fa;
}

.resumen-del-proyecto {
    flex: 1;
    margin-bottom: 1.5rem;
}

.resumen-del-proyecto em {
    color: #94a3b8;
    font-style: normal;
}

.enlaces-proyecto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid #1e293b;
}

.enlace-con-estilos-proyecto-github,
.enlace-con-estilos-proyecto-live {
    text-decoration: none;
    transition: color 0.3s ease;
}

.enlace-con-estilos-proyecto-github:hover {
    color: #7dd3fc;
}

.enlace-con-estilos-proyecto-live:hover {
    color: #cbd5e1;
}

@media (max-width: 900px) {
    .grid-proyectos {
        grid-template-columns: 1fr;
    }
}

/*
* Que: contacto se presenta como una llamada a la accion con tres canales claros.
* Por que: los enlaces sueltos funcionaban, pero no tenian peso visual ni parecian parte del sistema de cards.
* Para que: quien llegue al final tenga opciones inmediatas, escaneables y con feedback al interactuar.
*/
#contacto {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(37, 99, 235, 0.18), transparent 34rem),
        #0f172a;
}

#contacto .contenedor {
    max-width: 896px;
    text-align: center;
}

.etiqueta-contacto {
    display: inline-block;
    margin-bottom: 1.5rem;
    padding: 0.25rem 0.75rem;
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    background-color: rgba(30, 58, 138, 0.5);
    border-radius: 999px;
}

#pregunta-hablamos {
    margin-bottom: 0.75rem;
}

#resumen-contacto {
    max-width: 24rem;
    margin: 0 auto 2.5rem;
}

.contacto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.contacto-card a {
    position: relative;
    display: flex;
    min-height: 9rem;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.25rem;
    overflow: hidden;
    color: #ffffff;
    text-align: left;
    text-decoration: none;
    background-color: rgba(15, 23, 42, 0.72);
    border: 1px solid #1e293b;
    border-radius: 1rem;
    box-shadow: 0 18px 35px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.contacto-card a::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), transparent 55%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contacto-card a:hover {
    transform: translateY(-0.35rem);
    background-color: #0f172a;
    border-color: rgba(59, 130, 246, 0.7);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.35), 0 0 24px rgba(59, 130, 246, 0.22);
}

.contacto-card a:hover::before {
    opacity: 1;
}

.contacto-canal,
.contacto-accion {
    position: relative;
    z-index: 1;
}

.contacto-canal {
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.contacto-accion {
    color: #e2e8f0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

#whatsapp .contacto-canal {
    color: #4ade80;
}

#whatsapp a:hover {
    border-color: rgba(74, 222, 128, 0.65);
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.35), 0 0 24px rgba(74, 222, 128, 0.2);
}

#telegram .contacto-canal {
    color: #38bdf8;
}

#email .contacto-canal {
    color: #818cf8;
}

@media (max-width: 900px) {
    .contacto-grid {
        grid-template-columns: 1fr;
    }
}

.cabecera-logo {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
}

.contenido-parrafos h2 {
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.2;
}

.contenido-parrafos p {
    color: #94a3b8;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
}

.cara-delantera h3 {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 500;
}

.cara-trasera p {
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.6;
}

.titulo-experiencia,
.titulo-proyectos,
#pregunta-hablamos {
    color: #ffffff;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
}

.titulo-puesto-trabajo {
    color: #ffffff;
    font-size: 1.125rem;
    font-weight: 500;
}

.rango-puesto-trabajo,
#titulo-proyectos {
    color: #60a5fa;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.caja-descripcion-experiencia p,
.resumen-proyectos-seleccionados,
.resumen-del-proyecto,
#resumen-contacto {
    color: #94a3b8;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.7;
}

.palabra-clave {
    color: #7dd3fc;
    font-size: 0.75rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}

.lenguaje-usado-en-proyecto {
    color: #60a5fa;
    font-size: 0.625rem;
    font-weight: 500;
}

.titulo-del-proyecto {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.enlace-con-estilos-proyecto-github,
.enlace-con-estilos-proyecto-live {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.enlace-con-estilos-proyecto-github {
    color: #38bdf8;
}

.enlace-con-estilos-proyecto-live {
    color: #475569;
}

.label-formulario-contacto,
#nombre,
#email,
#telefono,
#mensaje {
    color: #cbd5e1;
    font-size: 0.875rem;
    font-weight: 400;
}

#nombre::placeholder,
#email::placeholder,
#telefono::placeholder,
#mensaje::placeholder {
    color: #475569;
}

#boton-enviar-mensaje {
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}

footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-text,
#footer-description {
    margin: auto;
    color: #64748b;
    font-size: 0.875rem;
    font-weight: 400;
}

/*NOTA: AÑADIR COMENTARIOS EXPLICATIVOS Y AÑADIR RESPONSIVE*/