/* (*) con box-sizing: border-box para que el 
   ancho (width) incluya el padding y el border sin desbordar las cajas flotantes. */
* {
    box-sizing: border-box;
}

/* vamos a hacer que al pulsar "Volver arriba" 
   el desplazamiento hacia #top sea suave en lugar de dar un salto brusco. */
html {
    scroll-behavior: smooth;
}

/* Aplicamos un fondo con degradado suave (linear-gradient), tipografía general
   sin serifa y eliminamos el margen por defecto del navegador. */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: rgb(35, 45, 55);
    background: linear-gradient(to bottom right, #eef2f7, #d6e4f0, #f8f9fa);
    min-height: 100vh;
}

/* Usamos position: sticky con top: 0 y un z-index alto (100) para que la 
   barra superior acompañe al usuario al hacer scroll sin quedar oculta. */
header {
    background-color: hsl(210, 50%, 20%);
    color: #ffffff;
    padding: 12px 15px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

header h1 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    margin: 0 0 10px 0;
}

header nav {
    margin-top: 6px;
}

/* Clase para sustituir la antigua etiqueta <u> mediante CSS */
.subrayado {
    text-decoration: underline;
    color: #ffb703;
}

/* primer cambio; En móvil queremos que los bloques se apilen uno debajo del otro(display: block). En 768px pasarán a display: inline-block */
.enlace-nav {
    display: block;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 15px;
    margin: 6px 0;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.12);
    transition: background-color 0.3s, color 0.3s;
}

.enlace-nav:hover {
    background-color: #ffb703;
    color: hsl(210, 50%, 15%);
    cursor: pointer;
}

/* Indicador visual de la página activa en el menu */
.enlace-nav.activo {
    background-color: #fb8500;
    color: #ffffff;
    font-weight: bold;
}

/*segundo cambio En móvil aprovechamos el 94% del ancho de la pantalla */
main {
    width: 94%;
    max-width: 1150px;
    margin: 20px auto;
    overflow: hidden;
}

/* Estilo común para todas las secciones con class="tarjeta" */
.tarjeta {
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #cbd5e1;
    border-radius: 16px;
    padding: 18px 16px;
    margin-bottom: 20px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.08);
    overflow: hidden; /* Contener elementos flotantes internos como la foto */
    position: relative;
    z-index: 1;
    transition: box-shadow 0.3s;
}

/* Efecto al pasar el ratón sobre cualquier tarjeta (no funcionara en el movil, pero igual lo dejamos para que sea responsive cuando este en destok) */
.tarjeta:hover {
    box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.16);
}

/* Selector de hijo directo (>)*/
.tarjeta > h2 {
    color: hsl(210, 50%, 25%);
    font-family: Georgia, serif;
    font-size: 1.3rem;
    margin-top: 0;
    border-bottom: 2px solid #ffb703;
    padding-bottom: 8px;
}
.tarjeta > h2::after {
    content: " •";
    color: #fb8500;
}

.tarjeta p {
    line-height: 1.6;
    font-size: 1rem;
}
/*tercer cambio = como queremos que sea mobile first: todas las secciones ocupan el 100% 
   del ancho y van apiladas en una única columna (sin float) */
#sobre-mi,
#contacto,
#cuestionario,
#viajes,
#aficiones,
#musica {
    width: 100%;
    float: none;
}
#aficiones,
#musica {
    text-align: center;
}

/* cuarto cambio =  En móvil la foto no flota a la izquierda para no 
   aplastar el texto; se muestra como bloque centrado ocupando el 65% del ancho. */
img[alt]#foto-perfil {
    display: block;
    float: none;
    width: 65%;
    max-width: 190px;
    margin: 0 auto 15px auto;
    border: 4px solid #ffffff;
    border-radius: 15px;
    box-shadow: 5px 5px 12px lightblue;
    transition: width 0.4s;
}
/* el hover no va a funcionar en la imagen pero igual lo dejamos */
img[alt]#foto-perfil:hover {
    width: 230px;
    cursor: pointer;
}

/* quinto cambio = parrafo largo se lee en una sola columna para evitar renglones demasiado estrecho */
#foto-perfil + p {
    column-count: 1;
    text-align: left;
}

/* Lista de datos básicos sin viñetas por defecto (list-style: none ) */
.lista-datos {
    list-style: none;
    padding: 0;
    margin: 15px 0;
    clear: both; /* Se coloca limpiamente debajo de la foto flotante */
}
/* sexto cambio = cada dato de la lista se muestra como bloque utilizando su propia fila completa */
.lista-datos li {
    display: block;
    background-color: #e2e8f0;
    padding: 8px 15px;
    margin: 8px 0;
    border-radius: 8px;
    border-left: 4px solid hsl(210, 50%, 25%);
}

/* Pseudo-clase :first-child para destacar el primer dato de la lista */
.lista-datos li:first-child {
    background-color: #fde68a;
}

/* Desplegable de estudios (<details> y <summary>) */
.desplegable {
    background-color: #f8fafc;
    border: 1px dashed #94a3b8;
    border-radius: 10px;
    padding: 12px 18px;
    margin: 15px 0 20px 0;
}

.desplegable summary {
    font-weight: bold;
    color: hsl(210, 50%, 25%);
    cursor: pointer;
}

/* 7. ESTILOS DE FORMULARIOS Y botones en el movil */
fieldset {
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    background-color: #f8fafc;
}

legend {
    font-weight: bold;
    color: #ffffff;
    background-color: hsl(210, 50%, 25%);
    padding: 5px 14px;
    border-radius: 6px;
}

/* Reemplazo de los antiguos <br> mediante bloques con margen inferior */
.campo-formulario {
    margin-bottom: 16px;
}

.campo-formulario label,
.campo-formulario .etiqueta-grupo {
    display: block;
    font-weight: bold;
    margin-bottom: 6px;
    color: #334155;
}

/* Las etiquetas de los radio buttons sí van en línea (inline-block) */
.campo-formulario .label-inline {
    display: inline-block;
    font-weight: normal;
    margin-right: 15px;
    cursor: pointer;
}

/* Selección por atributos de formulario */
input[type="text"],
input[type="email"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #94a3b8;
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.95rem;
}

/* Destacar los campos obligatorios con el selector de atributo [required] */
input[required] {
    border-left: 4px solid #fb8500;
}

/* Selección por situación input:checked.
   Cuando se marca un radio button, resalta su etiqueta contigua (+) */
input[type="radio"]:checked + label.label-inline {
    color: #fb8500;
    font-weight: bold;
    text-decoration: underline;
}

input[type="range"],
input[type="file"] {
    width: 100%;
    cursor: pointer;
}

/* 8. BOTONES Y ENLACES DE ACCIÓN */
.grupo-botones {
    margin-top: 15px;
    text-align: center;
}

/* octavo cambio = En móvil los botones tambien van en bloque (100% de ancho) para ser más fáciles de pulsar */
.boton {
    display: block;
    width: 100%;
    background-color: hsl(210, 50%, 25%);
    color: #ffffff;
    text-decoration: none;
    border: none;
    padding: 12px 20px;
    margin-bottom: 8px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: bold;
    transition: background-color 0.3s;
}

.boton:hover {
    background-color: #fb8500;
    cursor: pointer;
}

.boton-secundario {
    background-color: #64748b;
}

/* otro hover que no utilizaremos pero no dejaremos */
.boton-secundario:hover {
    background-color: #475569;
}

/* 9. TABLA DE VIAJES Y ELEMENTOS MULTIMEDIA (trayectoria.html) */
#tabla-viajes {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.9rem;
}

#tabla-viajes caption {
    margin-bottom: 10px;
    font-size: 1rem;
    font-weight: bold;
    color: hsl(210, 50%, 20%);
}

#tabla-viajes th,
#tabla-viajes td {
    border: 1px solid #cbd5e1;
    padding: 8px 6px;
    text-align: center;
}

#tabla-viajes th {
    background-color: hsl(210, 50%, 25%);
    color: #ffffff;
}

/* Efecto hover sobre las filas de datos de la tabla que tampoco tendra prioridad */
#tabla-viajes tbody tr:hover {
    background-color: #fef3c7;
    cursor: pointer;
}

/* Control del tamaño del vídeo y audio mediante CSS en lugar de atributos HTML */
.multimedia {
    display: block;
    margin: 15px auto 5px auto;
    max-width: 100%;
    border-radius: 12px;
    box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.15);
}

/*noveno cambio = el video va al ancho completon del movil */
#video-aficiones {
    width: 100%;
    max-width: 720px;
    border: 3px solid hsl(210, 50%, 25%);
}

/* audio igualmente al 100% */
#audio-musica {
    width: 100%;
    margin-top: 15px;
}

/* 10. PIE DE PÁGINA CON CLEAR: BOTH.
   Aplicamos clear: both para obligar al footer a colocarse siempre debajo
   de cualquier elemento flotante de la página. */
footer {
    clear: both;
    background-color: hsl(210, 50%, 15%);
    color: #e2e8f0;
    text-align: center;
    padding: 16px;
    margin-top: 25px;
}
a[href^="#"].enlace-subir {
    display: inline-block;
    background-color: #ffb703;
    color: hsl(210, 50%, 15%);
    text-decoration: none;
    font-weight: bold;
    padding: 8px 16px;
    border-radius: 6px;
}
a[href^="#"].enlace-subir:hover {
    background-color: #fb8500;
    color: #ffffff;
    cursor: pointer;
}
/* como es una pantalla pequeña, ocultamos el titulo decorativo y los derechos reservados para dejar el boton de volver arriva limpio */
header h1 i,
#tabla-viajes caption i,
footer p {
    display: none;
}

/* PRIMER BREAK point para tabletas (min-width: 768px)
   Se aplica cuando la ventana mide 768px o más */

@media (min-width: 768px) {

    /* 1. Recuperamos el espaciado amplio en la cabecera y tarjetas */
    header {
        padding: 16px 25px;
    }

    header h1 {
        font-size: 1.7rem;
    }

    main {
        width: 90%;
        margin: 25px auto;
    }

    .tarjeta {
        padding: 22px 26px;
        margin-bottom: 25px;
    }

    .tarjeta > h2 {
        font-size: 1.5rem;
    }

    /* Cambio de display: block a inline-block.
       Al tener más ancho en tableta, los enlaces del menú, las etiquetas de datos 
       personales y los botones de formulario pasan a colocarse en línea horizontal. */
    .enlace-nav {
        display: inline-block;
        width: auto;
        padding: 8px 20px;
        margin: 0 8px;
        border-radius: 20px;
    }

    .lista-datos li {
        display: inline-block;
        margin: 5px 10px 5px 0;
    }

    .boton {
        display: inline-block;
        width: auto;
        padding: 10px 20px;
        margin-bottom: 0;
    }

    .boton-secundario {
        margin-left: 10px;
    }

    /* La foto de perfil pasa a flotar a la izquierda 
       con un ancho proporcional del 32% para convivir con el texto al lado. */
    img[alt]#foto-perfil {
        float: left;
        width: 32%;
        max-width: 195px;
        margin: 5px 22px 15px 0;
    }

    /* El párrafo biográfico pasa de 1 a 2 columnas 
       justificadas ahora que la pantalla tiene ancho suficiente. */
    #foto-perfil + p {
        column-count: 2;
        column-gap: 20px;
        text-align: justify;
    }

    /* Tabla más holgada en pantallas medianas */
    #tabla-viajes {
        font-size: 1rem;
    }

    #tabla-viajes th,
    #tabla-viajes td {
        padding: 12px;
    }

    /* los elementos que estaban 
       ocultos con display: none en el móvil ahora que sobra espacio. */
    header h1 i,
    #tabla-viajes caption i {
        display: inline-block;
    }

    footer p {
        display: inline-block;
        margin: 0 20px 0 0;
    }
}

/* SEGUNDO BREAK point ahora tomando en cuenta el minimo de ancho para ordenadores como por ejemplo (min-width: 1024px)
   Se aplica cuando la ventana mide 1024px o más */

@media (min-width: 1024px) {

    header {
        padding: 18px 30px;
    }

    header h1 {
        font-size: 1.9rem;
    }

    .tarjeta {
        padding: 25px 30px;
    }

    /* En pantallas de escritorio (1024px+), aprovechamos el espacio horizontal 
        */
    #contacto {
        float: left;
        width: 56%;
    }

    #cuestionario {
        float: right;
        width: 41%;
    }

    #aficiones {
        float: left;
        width: 54%;
    }

    #musica {
        float: right;
        width: 43%;
    }

    /* Ajustamos el tamaño final de 
       la foto de perfil (con su efecto hover) y de los reproductores en PC. */
    img[alt]#foto-perfil {
        width: 210px;
        max-width: none;
        margin: 5px 25px 15px 0;
    }

    img[alt]#foto-perfil:hover {
        width: 230px;
        cursor: pointer;
    }

    #video-aficiones {
        width: 280px;
    }

    #audio-musica {
        width: 90%;
        margin-top: 25px;
    }

    /* En escritorio grande subimos el párrafo largo 
       a 3 columnas estilo revista para aprovechar todo el ancho de la tarjeta. */
    #foto-perfil + p {
        column-count: 3;
        column-gap: 25px;
    }
}