/* =========================
   1. RESET Y SEGURIDAD
   ========================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    overflow-x: hidden; /* ESTO EVITA QUE EL LADO DERECHO SE COMA NADA */
    background-color: #4d4444;
}

/* =========================
   2. HEADER (DISEÑO ELÁSTICO)
   ========================= */
.site-header {
    position: relative;
    width: 100%;
}

.banner-img {
    width: 100%;
    height: clamp(200px, 40vh, 300px);
    object-fit: cover;
    object-position: center 70%;
    display: block;
}

/*Imagen del banner*/
.banner-wrapper img {
    width: 100%;
    height: clamp(200px, 40vh, 300px);
    object-fit: cover;
    object-position: center 70%;
    display: block; /* Esto es vital para que el texto no se suba encima */
}

/* El estilo del crédito (pie de foto) */
.banner-photo-credit {
    display: block;
    text-align: right;
    padding: 5px 15px 0 0;
    font-size: 11px;
    color: #ccc; /* Gris claro para que se vea fino */
    font-family: serif; /* Estilo periódico */
    font-style: italic;
    margin: 0; /* Reseteamos márgenes por si acaso */
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .banner-wrapper img {
        height: clamp(250px, 30vh, 250px);
        object-position: center 90%;
    }
    .banner-photo-credit {
        font-size: 9px; /* Más pequeño para que no robe protagonismo */
        padding-top: 2px; /* Casi pegado a la imagen */
        padding-right: 5px; /* Menos margen lateral en pantallas pequeñas */
        margin-top: 0; /* Eliminamos cualquier margen superior */
        line-height: 1; /* Evita que el alto de línea separe el texto de la foto */
    }

    .banner-img {
        height: clamp(250px, 30vh, 250px);
        object-position: center 90%;
    }
}

.header-content-wrapper {
    position: absolute;
    bottom: -80px; /* Sube/baja todo el bloque */
    left: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 5%; /* Margen de seguridad */
}

.avatar-area {
    display: flex;
    flex-direction: column; /* Alinea círculo y texto en vertical */
    align-items: center; /* Centra el texto respecto al círculo */
}
.avatar-circle {
    /* Tamaño fijo para pantallas grandes (Escritorio) */
    width: 220px;
    height: 220px;
    background: white;
    border-radius: 50%;
    padding: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
.avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-photo-credit {
    display: block;
    text-align: center;
    margin-top: 8px; /* Espacio entre el círculo y el nombre */
    font-size: 11px;
    color: #ccc; /* Gris claro para que combine con el banner */
    text-decoration: none;
    font-family: serif;
    font-style: italic;
}

/* --- AJUSTE AVATAR PARA MÓVIL --- */
@media (max-width: 768px) {
    .avatar-photo-credit {
        font-size: 10px;
        margin-top: 4px;
        color: white; /*en el movil mejor blanco, se lee mejor */
    }
}

/* Usamos la Media Query para el móvil */
@media (max-width: 768px) {
    .avatar-circle {
        /* PROBAR: Aquí aumentamos el tamaño en móvil. 
       Usamos un porcentaje del ancho de pantalla (vw) 
       para que se adapte a diferentes teléfonos */
        width: 65vw; /* Ocupará el 65% del ancho del móvil */
        height: 65vw; /* Mantenemos el círculo perfecto */

        /* PROBAR: Ponemos un máximo en píxeles para que no 
       se vea gigante en tablets pequeñas */
        max-width: 280px;
        max-height: 280px;
    }
}

.avatar-circle img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.nickname-area {
    flex-grow: 1;
    text-align: center;
    margin-right: clamp(120px, 18vw, 220px);
}

.nickname {
    font-family: "Kaushan Script", cursive;
    /* DESKTOP: Se mantiene igual */
    font-size: clamp(2.5rem, 6vw, 5.5rem);
    color: white;
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
    margin-bottom: 30px;
    transform: translateY(90px);
    display: block; /* Asegura que se comporte como bloque para aceptar anchos */
}
/* =========================
   AJUSTE PARA EL MÓVIL
   ========================= */

@media (max-width: 768px) {
    .nickname {
        /*  'vw' (view width). 
      Crece sí o sí según el ancho de la pantalla*/

        font-size: 12vw !important;
        white-space: normal;
        transform: translateY(40px);
        text-align: center;
        width: 100%;
    }
}

/* =========================
 Contenedor GRID 3fr 1fr)
   ========================= */
.container {
    max-width: 1100px;
    margin: 120px auto 40px; /* 120px de margen arriba para dejar espacio al nick */
    padding: 0 20px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.box {
    padding: 30px;
    border-radius: 15px;
}

.bottom-row {
    display: grid;
    grid-template-columns: 3fr 1fr;
    gap: 20px;
}

/* --- LA CAJA ROJA  */
.box.red {
    background: #d24d3e;
    display: flex;
    flex-direction: column; /* Alinea título y links en vertical */
    align-items: center; /* Centra todo horizontalmente */
    justify-content: center; /* Centra todo verticalmente si la caja tiene altura */
    text-align: center;
    padding: 30px;
    
}

.grey {
    background: #9b8d8d;
}

.white {
    background: white;
    padding: 0;
    overflow: hidden;
}

.white img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}
/* enlace de copyright sobre la imagen */
.box-white {
    background: white;
    padding: 20px;
    border-radius: 15px; /* Consistencia con las otras cajas */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- EL MARCO DE LA FOTO (5px) --- */
.ramen-photo-frame {
    width: 100%;
    border: 5px solid white; /* Borde físico de 5px */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Sombra para que se note el relieve */
    overflow: hidden;
   
}

.ramen-photo-frame img {
    width: 100%;
    display: block;
    object-fit: cover;
}

/* --- CRÉDITO DEL RAMEN --- */
.ramen-photo-credit {
    display: block;
    text-align: center;
    margin-top: 10px;
    font-size: 11px;
    color: #4d4444; /* Gris oscuro del pelaje */
    text-decoration: none;
    font-family: serif;
    font-style: italic;
    height: 16px;
}

/* --- AJUSTE RESPONSIVE --- */
@media (max-width: 768px) {
    .box-white {
        padding: 15px;
    }
    .ramen-photo-credit {
        font-size: 10px;
        margin-top: 6px;
    }
}

/* TIPOGRAFÍA */
.title-persona {
    font-family: "Kaushan Script", cursive;
    font-size: 3rem;
    text-align: center;
    margin-bottom: 10px;
    color: #abe91c;
}

.text {
    font-family: "Permanent Marker", cursive;
    text-align: center;
    line-height: 1.6;
}

/* --- EL PADRE (Contenedor de links) --- */
.links-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
}

/* --- LOS HIJOS (Los links e imágenes) --- */
.link-item {
    flex: 1;
    max-width: 200px;
}
.link-item img {
    width: 60%; /* La imagen se adapta al link */
    height: auto;
    border-radius: 50%;
    transition: transform 0.9s ease;
}

.link-item img:hover {
    transform: scale(1.2); /* Se agranda un poquito al tocarlo */
}

/* --- CONFIGURACIÓN PARA MÓVIL --- */
@media (max-width: 768px) {
    .links-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 30px;
    }

    .link-item {
        width: 80%; /* En móvil  un poco más anchas */
        max-width: 250px;
    }
    .link-item {
        width: 100%;
        display: flex;
        justify-content: center; /*  la imagen dentro del link */
    }

    .link-item img {
        max-width: 250px; /* Tamaño máximo en móvil */
        width: 60%; /* Tamaño relativo */
    }
    .link-item img:hover {
        transform: scale(1.2); /* opcional*/
    }
}

/* --- FOOTER GENERAL (Desktop) --- */
.site-footer {
    background: rgb(19, 1, 1);
    color: white;
    padding: 20px 5%;
    width: 100%;
    font-family: "Montserrat", sans-serif;
}

.footer-inner {
    max-width: 1100px;
    margin: 0 auto; /* En PC a la izquierda */
    display: flex;
    align-items: center;
    gap: 15px;
}
/* --- CONTROL DEL LOGO --- */
.footer-linkedin img {
    height: 24px;
    width: auto;
    border-radius: 50%;
    display: block;
    transition: opacity 0.3s;
}

.footer-linkedin img:hover {
    opacity: 0.7;
}

/* --- CONFIGURACIÓN PARA MÓVIL --- */
@media (max-width: 768px) {
    .footer-inner {
        margin: 0 auto;
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .footer-linkedin img {
        height: 30px;
    }
}

/* =========================
   MÓVIL (AJUSTE AUTOMÁTICO)
   ========================= */
@media (max-width: 768px) {
    .header-content-wrapper {
        position: relative;
        bottom: 0;
        margin-top: -60px;
        flex-direction: column;
        padding: 0;
    }

    .nickname-area {
        margin-right: 0; /* Quita el offset de PC */
        margin-top: 15px;
    }

    .nickname {
        transform: translateY(0);
        color: white;
        font-size: 12vw !important;
    }

    .container {
        margin-top: 30px; /* Menos espacio en móvil */
    }

    .bottom-row {
        grid-template-columns: 1fr; /* Se apilan automáticamente */
    }
}