@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "JetBrainsMono";
    src: url('../fonts/JetBrainsMono.ttf');
}

@font-face {
    font-family: "Neue";
    src: url('../fonts/neue.otf');
}
:root{

    --font-display: 'JetBrainsMono', ui-monospace, 'SF Mono', Menlo, monospace;
    --font-body: 'Neue';
    --fs-xs:  0.875rem;
    --fs-base:   1rem;
    --fs-body: 1.125rem;
    --fs-h3:  1.25rem;
    --fs-h2:   1.5rem;
    --fs-h1:  1.75rem;
    --fs-display:  2.5rem;
    --fs-5xl:  3.5rem;
    --small: 0.833rem;


    --sp-1:  0.25rem;  /*  4px */
    --sp-2:  0.5rem;   /*  8px */
    --sp-3:  0.75rem;  /* 12px */
    --sp-4:  1rem;     /* 16px */
    --sp-6:  1.5rem;   /* 24px */
    --sp-8:  2rem;     /* 32px */
    --sp-12: 3rem;     /* 48px */
    --sp-16: 4rem;     /* 64px */
    --sp-24: 6rem;     /* 96px */
    --sp-32: 8rem;     /* 128px */

    --color-titulo: #b3b0b0;
    --color-navbar: #ebeaea;
}


body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5;
    /*letter-spacing: -0.08rem;*/
    font-family: var(--font-display);
    font-weight: 300;
}


/* ==========================================================================
    NAVBAR
   ========================================================================== */

.navbar{
    display: flex;
    align-items: center;
    font-weight: 200;
    font-size: var(--fs-base);
    padding: var(--sp-2) var(--sp-2);
    background-color: var(--color-navbar);
}

.navbar > a{
    flex: 1;
}

.navbar-links{
    display: flex;
    gap: var(--sp-3);
    margin-inline: auto;
    padding: 0;
    list-style: none;
}

.navbar-contacto{
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.navbar a{
    list-style: none;
    text-decoration: none;
    color: black;
}
.navbar li {
    list-style: none;
    margin: 0;
}

.navbar-links li:not(:last-child) a::after {
    content: ",";
}
/* ==========================================================================
    HERO
   ========================================================================== */

.hero{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-2);
    font-weight: 300;
    font-size: var(--sp-3);
    margin-top: var(--sp-4);
    padding: var(--sp-4);
    min-height: 40vh;
}

.hero-col--profile{
   max-width: 24ch;
}

.hero-list{
    list-style: none;
    padding: 0;
    margin:0;
    letter-spacing: -0.08rem;
}

.hero-title{
    font-weight: 300;
    color: var(--color-titulo);
    font-size: var(--sp-3);
    letter-spacing: -0.08rem;
}
/* ==========================================================================
    GRID IZQUIERDA
   ========================================================================== */

.imagen{
    width: 100%;
    height: auto;
    display: block;

}
.grid-section{
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--sp-4);
}
.grid-izq {
  flex: 0 0 500px;
}
.grid-der{
    padding: var(--sp-4);

}
.imagen{
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

/* ==========================================================================
    TABLA
   ========================================================================== */
.table{
    font-family: var(--font-display);
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sp-3);
}

th{
    color: var(--color-titulo);
}

th, td{
    padding: var(--sp-1) var(--sp-3);
    text-align: left;
    vertical-align: baseline;
    font-weight: 300;    
}
tbody{
    display: table-row-group;
    vertical-align: center;
    border-color: inherit;
}

th:last-child, td:last-child {
  text-align: right;
  padding-right: 0;
}
th:first-child, td:first-child {
  padding-left: 0;
}

tr{
    background: white;
    transition: background 0.3s ease;
}

tr:hover{
    background:linear-gradient(90deg, black, #777575) ;
    color: white;
}

.table a {
    color: inherit;
    text-decoration: none;
}
.todos{
    display: inline-block;
    margin-top: var(--sp-6);
    color: black;
    font-size: var(--fs-xs);
}
/* ==========================================================================
   RESEÑA
   ========================================================================== */

.titulo-blog, .subtitulo-blog, .info-blog, .miniblog-titulo, .miniblog-parrafo{
    font-weight: 300;
}

.resena{
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--sp-12);
    align-items: start;
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--sp-16) var(--sp-8);
}

.resena-intro{
    position: sticky;
    top: var(--sp-12);
}

.resena-titulo{
    font-size: var(--fs-h1);
    font-weight: 500;
    margin: 0;
    letter-spacing: -0.08rem;
    max-width: 20ch;
}

.resena-subtitulo{
    font-size: var(--fs-h4);
    font-weight: 300;
    color: var(--color-titulo);
    margin: var(--sp-2) 0 0;
    font-family: Helvetica, sans-serif;

}

.resena-cuerpo p{
    font-size: var(--fs-body);
    max-width: 60ch;
    margin: 0 0 var(--sp-6);
    font-family: Helvetica, sans-serif;
}

@media (max-width: 768px){
    .resena{
        grid-template-columns: 1fr;
        gap: var(--sp-8);
        padding: var(--sp-8) var(--sp-4);
    }
    .resena-intro{ position: static; }
}



.pagination{
    margin-top: var(--sp-8);
    display: flex;
    gap: var(--sp-3);
    font-size: var(--small);
}

.pagination a,
.pagination .current{
    color: black;
    text-decoration: none;
}

.pagination .current{
    color: var(--color-titulo);
}

.screen-reader-text{
    position: absolute;
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
}
/* ==========================================================================
    INTRO
   ========================================================================== */
.intro{
    padding: var(--sp-4);
}
.intro-titulo{
    font-size: var(--fs-h3);
    font-weight: 300;
    color: var(--color-titulo);
    text-align: center;
    letter-spacing: -0.15rem;
}

.info-parrafo{
    max-width: 20ch;
    font-size: var(--small);

}
/* ==========================================================================
    LANDING PAGE BLOG
   ========================================================================== */

.rejilla{
    display: grid;
    grid-template-columns: repeat(2, 17rem) 1fr;
    gap: var(--sp-12) var(--sp-8);
    padding: var(--sp-8);
    max-width: 1200px;
    margin-inline: auto;
}

.rejilla-item a{
    color: black;
    text-decoration: none;
    display: block;
}

.rejilla-img{
    display: block;
    width: 100%;
    height: auto;
}

.rejilla-pie{
    display: flex;
    gap: var(--sp-6);
    font-size: var(--small);
    margin: var(--sp-3) 0 0;
}

.rejilla-fecha{
    color: var(--color-titulo);
}


/* ==========================================================================
    BLOG
   ========================================================================== */
.galeria {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: var(--sp-12);
    align-items: start;
    max-width: 1200px;
    margin-inline: auto;
    padding: var(--sp-16) var(--sp-8);
}

.galeria-intro {
    position: sticky;
    top: var(--sp-12);
}

.intro-meta {
    font-size: var(--fs-xs);
    color: var(--color-titulo);
    margin: var(--sp-1) 0 0;
}

.nota {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-4);
    margin-top: var(--sp-16);
}

.nota-num {
    font-size: var(--fs-5xl);
    line-height: .8;
    font-weight: 300;
    color:var(--color-titulo);
    flex-shrink: 0;
}

.nota-cuerpo {
    transition: opacity .25s ease;
    min-height: 5rem;
}

.nota-titulo {
    font-size: var(--fs-base);
    margin: 0;
}

.nota-parrafo {
    font-size: var(--small);
    color: #555;
    line-height: 1.65;
    margin: var(--sp-2) 0 0;
    max-width: 34ch;
}

.galeria-fotos {
    display: flex;
    flex-direction: column;
    gap: var(--sp-24);
}

.foto { margin: 0; }

.foto img {
    display: block;
    width: 100%;
    height: auto;
}

.foto-pie { display: none; }


/* ==========================================================================
    CONTACTO
   ========================================================================== */

.contacto-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: start;
}
.contacto-grid > div:nth-child(1) { margin-top: 0; }      /* Perfil */
.contacto-grid > div:nth-child(2) { margin-top: 640px; }   /* Correo */
.contacto-grid > div:nth-child(3) { margin-top: 640px; }   /* Sígueme */
.contacto-grid > div:nth-child(4) { margin-top: 640px; }  /* Instagram */


.contacto-correo, .contacto-insta, .contacto-dispo{
    display: flex;
    height: 100px;
    flex-direction: column;
    justify-content: space-between;
}
.contacto-titulo{
    color: var(--color-titulo);
}
.contacto-subtitulo{
    color: black;
}



.contacto-titulo{
    font-weight: 600;
    font-size: var(--fs-h4);
}

/* ==========================================================================
    MEDIA
   ========================================================================== */


@media (max-width: 768px) {
    .hero { grid-template-columns: 1fr; gap: var(--sp-12); }
    .hero__col { grid-column: auto; }
    .blog-grid { grid-template-columns: 1fr; gap: 2rem; padding: 2rem 1.25rem; }
    .blog-intro { position: static; }
    .galeria {
        grid-template-columns: 1fr;
        gap: var(--sp-8);
        padding: var(--sp-8) var(--sp-4);
    }
    .galeria-intro { position: static; }
    .nota { display: none; }
    .galeria-fotos { gap: var(--sp-12); }

    .foto-pie {
        display: block;
        font-size: var(--small);
        color: #555;
        margin-top: var(--sp-3);
    }
    .foto-pie span { color: var(--color-titulo); margin-right: var(--sp-2); }
    .foto-pie strong { display: block; font-weight: 300; color: black; }

.rejilla{
        grid-template-columns: 1fr;
        gap: var(--sp-8);
        padding: var(--sp-4);
    }
}


@media (prefers-reduced-motion: reduce) {
    .nota-cuerpo { transition: none; }
}