/* =========================================================
   0. TIPOGRAFÍA (Google Fonts)
   Siempre va al principio de todo el archivo.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,700&family=Roboto+Slab:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Winky+Rough:wght@300..900&display=swap');
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --color-fondo: #768C4C;          /* fondo de la página */
    --color-caja: #8C564C;          /* fondo de las cajas */
    --color-borde: #474D3C;          /* bordes */
    --color-principal: #1E1E1E;      /* textos */
    --color-secundario: #1E1E1E;     /* textos chicos */
    --color-contraste: #373d20;      /* caja del header y del footer */
    --color-boton: #97B8FF;         /* botones del header */
    --color-etiqueta: #97B8FF;       /* etiquetas y subcajas */
    --color-titulo: #122c26;    /* color del nombre */
    /* tipografías */
    --letra-titulos: "Winky Rough", sans-serif;
    --letra-textos: "IBM Plex Serif", sans-serif;
    /* tamaños de texto */
    --texto-normal: 1.1rem;     /* párrafos */
    --texto-chico: 1.15rem;        /* textos secundarios: videos, fichas, etiquetas */
    --texto-mini: .9rem;        /* footer */

    /* espacios */
    --espacio-chico: .5rem;
    --espacio-medio: 1rem;
    --espacio-grande: 1.5rem;

    /* redondeos */
    --radio-chico: .5rem;
    --radio-medio: 1rem;
    --radio-grande: 2rem;

    /* sombras */
    --borde: .0625rem solid var(--color-borde);   /* .0625rem = 1px */
    --sombra-chica: 0 .25rem .5rem #122c26;

     --ancho-maximo: 60rem;
}


body {
    display: grid;
    grid-template-columns: minmax(0, var(--ancho-maximo));
    justify-content: center;
    background-color: var(--color-fondo);
    color: var(--color-principal);
    font-family: var(--letra-textos);
    line-height: 1.5;
    font-size: var(--texto-normal);
}

h1,
h2,
h3 {
    font-family: var(--letra-titulos);
    line-height: 1.2;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
    hyphens: auto;
}

img,
video,
iframe {
    display: block;
    width: 100%;
}
.header {
    padding: var(--espacio-medio);
}

.nav {
    
     display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--espacio-chico);
    padding: var(--espacio-chico);
    background-color: var(--color-contraste);
    border-radius: var(--radio-medio);
}

.nav a {
   display: grid;
    place-items: center;
    min-height: 2.75rem;
    padding: var(--espacio-chico);
    background-color: var(--color-boton);
    color: var(--color-principal);
    border-radius: var(--radio-chico);
    font-size: .9rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* ---------- CAJAS (estilo común) ---------- */
.caja {
    margin: var(--espacio-medio);
    padding: var(--espacio-grande);
    background-color: var(--color-caja);
    border: var(--color-borde);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-chica);
}
.caja-titulo {
    margin-block-end: var(--espacio-medio);
    font-size: 1.5rem;
}
/* ---------- CAJA 1: PRESENTACIÓN ---------- */
.presentacion {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    column-gap: var(--espacio-grande);
}
.presentacion-foto {
    grid-row: span 2;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: var(--radio-medio);
}

.presentacion-nombre {
    align-self: end;
    margin-block: var(--espacio-medio) var(--espacio-chico);
    font-size: 3rem;
    font-weight: 900;
    color: var(--color-titulo);
}

.presentacion-texto {
    color: var(--color-secundario);
}


/* ---------- CAJA 2: VIDEOS ---------- */
.videos-contenedor {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: var(--espacio-grande);
}

.videos article {
    display: grid;
    align-content: start;
    gap: var(--espacio-chico);
}

.videos video {
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: var(--radio-medio);
}

.video-instagram {
    height: 38rem;
    border: none;
    border-radius: var(--radio-medio);
}

.videos p {
    color: var(--color-secundario);
    font-size: var(--texto-chico);
}

/* ---------- CAJA 3: PÓSTERS  ---------- */

.posters-contenedor {
   display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: var(--espacio-medio);
}

.posters-contenedor img {
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra-chica);
}


/* ---------- CAJA 4: ETIQUETAS ---------- */
.etiquetas-titulo {
    margin-block-end: var(--espacio-medio);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.etiquetas-lista {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr));
    gap: var(--espacio-chico);
    margin-block-end: var(--espacio-grande);
    list-style: none;
}
.etiquetas-lista:last-child {
    margin-block-end: 0;
}

.etiqueta {
   display: grid;
    place-items: center;
    padding: .4rem .8rem;
    background-color: var(--color-etiqueta);
    border: var(--borde);
    border-radius: var(--radio-medio);
    font-size: var(--texto-chico);
    line-height: 1.2;
    text-align: center;
}
/* -------caja propuesta tp2--------- */
.propuesta a {
    display: grid;
    place-items: center;
    min-height: 3rem;
    padding: var(--espacio-medio);
    background-color: var(--color-boton);
    color: var(--color-principal);
    border-radius: var(--radio-chico);
    font-family: var(--letra-titulos);
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

/* ---------- CAJA 5: FICHA ---------- */
.ficha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--espacio-medio);
}

.ficha .caja-titulo {
    grid-column: 1 / -1;             /* el título ocupa todo el ancho */
    margin-block-end: 0;
}

.ficha article {
    display: grid;
    align-content: start;
    gap: .25rem;
    padding: var(--espacio-medio);
    background-color: var(--color-etiqueta);
    border: var(--borde);
    border-radius: var(--radio-medio);
}

.ficha h3 {
    margin-block-end: var(--espacio-chico);
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ficha p {
    font-size: var(--texto-chico);
    color: var(--color-secundario);
}

/* ---------- PROPUESTA (propuestatp2.html) ---------- */
.galeria-contenedor {
    display: grid;
    gap: var(--espacio-medio);
    align-items: start;
}

.galeria-contenedor img {
    height: auto;
    border: var(--borde);
    border-radius: var(--radio-chico);
    box-shadow: var(--sombra-chica);
}

.galeria-mobile {
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    max-width: 40rem;
    margin-inline: auto;
}

.galeria-desktop {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.galeria-tablet {
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
}
/* ---------- FOOTER  ---------- */
footer {
    margin: var(--espacio-medio);
    padding: var(--espacio-grande);
    background-color: var(--color-contraste);
    border-radius: var(--radio-medio);
}

footer p {
   font-size: var(--texto-mini);
    color: var(--color-boton);
}


/* =========================================================
   5. ESTADOS / INTERACCIONES
   ========================================================= */
.nav a:hover{
    background-color: var(--color-fondo);
    text-decoration: underline;
}
.propuesta a:hover {
    background-color: var(--color-caja);
    text-decoration: underline;
}