/* variables (las mismas que en Figma, colección Cartel) */
:root {
  --papel: #F1EDE4;
  --tinta: #141414;
  --rojo: #E8402A;
  --gris: #6B6862;
  --linea: #C9C3B8;
  --hueco: #D9D3C7;

  --fuente-titulos: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fuente-meta: "Courier Prime", "Courier New", monospace;

  --margen: 40px;
  --medianil: 20px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--fuente-titulos);
  font-size: 19px;
  line-height: 1.5;
  padding: 0 var(--margen);
  overflow-x: hidden;
}

a {
  color: inherit;
}

/* la retícula de 12 columnas */
.reticula {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--medianil);
}

.meta-fuerte {
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.rojo {
  color: var(--rojo);
}

.entradilla {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.25;
  letter-spacing: -0.015em;
}


/* cabecera */
.cabecera {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 28px 0;
}

.menu {
  display: flex;
  gap: 32px;
}

.menu a {
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
}

.menu a:hover,
.cabecera a:hover {
  color: var(--rojo);
}


/* portada */
.nombre {
  font-weight: 900;
  font-size: min(19.5vw, 250px);
  line-height: 0.9;
  letter-spacing: -0.05em;
  text-transform: uppercase;
  margin-top: 8px;
  padding-bottom: 4px;
  border-bottom: 6px solid var(--tinta);
}

.nombre span {
  display: block;
  color: var(--rojo);
}

.intro {
  padding: 28px 0 96px;
}

.intro .entradilla {
  grid-column: 1 / 8;
}

.ahora {
  grid-column: 11 / 13;
  font-family: var(--fuente-meta);
  font-size: 15px;
  line-height: 1.4;
}


/* secciones */
.seccion {
  padding-top: 120px;
}

#proyectos {
  padding-top: 0;
}

.titulo-seccion {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--tinta);
}

.titulo-seccion h2 {
  display: flex;
  align-items: baseline;
  gap: 20px;
  font-weight: 900;
  font-size: 120px;
  line-height: 0.85;
  letter-spacing: -0.04em;
}

.numero {
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--rojo);
}


/* filtros */
.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filtro {
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  padding: 7px 14px;
  border: 1.5px solid var(--tinta);
  background: none;
  color: var(--tinta);
  cursor: pointer;
}

.filtro:hover {
  border-color: var(--rojo);
  color: var(--rojo);
}

.filtro.activo {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--papel);
}


/* índice de proyectos */
.indice {
  list-style: none;
}

.fila a {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--medianil);
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--tinta);
  text-decoration: none;
}

.fila .titulo {
  grid-column: 2 / 10;
  font-weight: 700;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  transition: color 0.15s, transform 0.15s;
}

.fila .datos {
  grid-column: 10 / 13;
  justify-self: end;
  font-family: var(--fuente-meta);
  font-size: 15px;
}

.fila a:hover .titulo {
  color: var(--rojo);
  transform: translateX(12px);
}

.fila.oculta {
  display: none;
}

.vista-previa {
  position: fixed;
  top: 0;
  left: 0;
  width: 300px;
  height: 200px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 5;
}

.vista-previa.visible {
  opacity: 1;
}

.vista-previa span {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: var(--fuente-meta);
  font-size: 15px;
}

.vista-previa.rojo,
.rojo-fondo {
  background: var(--rojo);
  color: var(--papel);
}

.vista-previa.tinta,
.tinta-fondo {
  background: var(--tinta);
  color: var(--papel);
}

.vista-previa.hueco,
.hueco-fondo {
  background: var(--hueco);
  color: var(--tinta);
}


/* sobre mí */
.sobre-texto {
  grid-column: 4 / 13;
  padding-top: 28px;
}

.dato {
  grid-column: span 3;
  margin-top: 48px;
}

.dato:first-of-type {
  grid-column: 4 / 7;
}

.dato h3,
.ficha dt {
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  color: var(--rojo);
  margin-bottom: 10px;
}


/* contacto */
.titulo-seccion .rojo {
  color: var(--rojo);
}

.contacto-texto {
  grid-column: 1 / 5;
  padding-top: 28px;
}

.contacto-texto p + p {
  margin-top: 12px;
}

.formulario {
  grid-column: 7 / 13;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px var(--medianil);
  padding-top: 28px;
}

.campo-ancho,
.boton,
.aviso {
  grid-column: 1 / -1;
}

.campo label {
  display: block;
  font-family: var(--fuente-meta);
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
}

.campo input,
.campo textarea {
  width: 100%;
  border: none;
  border-bottom: 2px solid var(--tinta);
  background: transparent;
  font: inherit;
  color: var(--tinta);
  padding: 8px 0;
  resize: vertical;
}

.campo input:focus,
.campo textarea:focus {
  outline: none;
  border-bottom-color: var(--rojo);
}

.boton {
  justify-self: start;
  background: var(--rojo);
  color: var(--papel);
  border: none;
  font-family: var(--fuente-titulos);
  font-weight: 700;
  font-size: 20px;
  padding: 18px 32px;
  cursor: pointer;
}

.boton:hover {
  background: var(--tinta);
}

.aviso {
  font-family: var(--fuente-meta);
  font-weight: 700;
  color: var(--rojo);
}


/* pie */
.pie {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 120px;
  padding: 16px 0 40px;
  border-top: 6px solid var(--tinta);
  font-family: var(--fuente-meta);
  font-size: 15px;
}

.ver-reticula {
  font: inherit;
  background: none;
  border: none;
  text-decoration: underline;
  color: var(--gris);
  cursor: pointer;
}

.ver-reticula:hover {
  color: var(--rojo);
}

/* las columnas que se ven al pulsar "ver retícula" */
.columnas {
  position: fixed;
  inset: 0;
  padding: 0 var(--margen);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--medianil);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
  z-index: 10;
}

.columnas span {
  background: rgba(232, 64, 42, 0.1);
}

.con-reticula .columnas {
  opacity: 1;
}


/* página de proyecto */
.proyecto {
  padding-top: 56px;
}

.titular {
  font-weight: 900;
  font-size: 120px;
  line-height: 0.95;
  letter-spacing: -0.04em;
}

.proyecto h1 {
  margin-top: 8px;
  padding-bottom: 24px;
  border-bottom: 6px solid var(--tinta);
}

.ficha {
  padding-top: 20px;
}

.ficha div {
  grid-column: span 3;
}

.proyecto-intro {
  grid-column: 4 / 13;
  margin-top: 64px;
}

.imagen {
  position: relative;
  height: 600px;
  margin-top: 64px;
}

.imagen figcaption {
  position: absolute;
  left: 16px;
  bottom: 12px;
  font-family: var(--fuente-meta);
  font-size: 15px;
}

.bloque {
  margin-top: 64px;
  row-gap: 40px;
}

.bloque h2 {
  grid-column: 1 / 4;
  font-family: var(--fuente-meta);
  font-size: 14px;
  padding-top: 4px;
}

.bloque p {
  grid-column: 4 / 10;
}

.imagenes .imagen {
  grid-column: span 6;
  height: 440px;
}

.siguiente {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 120px;
  padding-top: 10px;
  border-top: 2px solid var(--tinta);
  text-decoration: none;
}

.siguiente:hover .titular {
  color: var(--rojo);
}


/* responsive */
@media (max-width: 1000px) {
  .titulo-seccion h2,
  .titular {
    font-size: 88px;
  }

  .fila .titulo {
    font-size: 40px;
  }

  .contacto-texto,
  .formulario {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  :root {
    --margen: 20px;
    --medianil: 12px;
  }

  body {
    font-size: 17px;
  }

  .reticula,
  .columnas {
    grid-template-columns: repeat(4, 1fr);
  }

  .reticula > *,
  .dato:first-of-type,
  .imagenes .imagen {
    grid-column: 1 / -1;
  }

  .columnas span:nth-child(n + 5) {
    display: none;
  }

  .solo-grande {
    display: none;
  }

  .cabecera {
    padding: 20px 0;
  }

  .menu {
    gap: 14px;
  }

  .menu a,
  .cabecera .meta-fuerte {
    font-size: 12px;
  }

  .nombre {
    font-size: 20.5vw;
    margin-top: 24px;
    border-bottom-width: 4px;
  }

  .entradilla {
    font-size: 22px;
  }

  .intro {
    padding: 18px 0 0;
  }

  .ahora {
    display: none;
  }

  .seccion,
  #proyectos {
    padding-top: 72px;
  }

  .titulo-seccion {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 16px;
  }

  .titulo-seccion h2,
  .titular {
    font-size: 52px;
    gap: 10px;
  }

  .numero {
    font-size: 12px;
  }

  .filtro {
    padding: 7px 9px;
  }

  .fila a {
    grid-template-columns: 40px 1fr;
    padding: 14px 0;
  }

  .fila .titulo {
    grid-column: 2;
    font-size: 26px;
  }

  .fila .datos {
    display: none;
  }

  .sobre-texto,
  .contacto-texto {
    padding-top: 16px;
  }

  .dato {
    margin-top: 20px;
  }

  .formulario {
    grid-template-columns: 1fr;
    gap: 24px;
    padding-top: 24px;
  }

  .pie {
    margin-top: 72px;
    border-top-width: 4px;
    font-size: 12px;
  }

  .proyecto {
    padding-top: 24px;
  }

  .proyecto-intro,
  .imagen,
  .bloque {
    margin-top: 40px;
  }

  .imagen {
    height: 260px;
  }

  .imagenes {
    row-gap: 12px;
  }

  .imagenes .imagen {
    height: 220px;
  }

  .bloque {
    row-gap: 8px;
  }

  .bloque p {
    margin-bottom: 16px;
  }

  .siguiente {
    flex-direction: column;
    align-items: flex-start;
    margin-top: 72px;
  }

  .siguiente .titular {
    font-size: 40px;
  }
}