/* ------------------------------------------------------------------
   Be Social Creative Studio — besocialcs.com
   Retícula de 12 columnas, fondo hueso, tipografía de la marca.
   ------------------------------------------------------------------ */

@font-face {
  font-family: "PP Editorial Old";
  src: url("fonts/PPEditorialOld-Ultralight.otf") format("opentype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Editorial Old";
  src: url("fonts/PPEditorialOld-UltralightItalic.otf") format("opentype");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

:root {
  --bone: #f8f8f8;
  --ink: #222222;
  --line: #d8d8d8;
  /* Sabrina pidió todo el texto en negro: `mute` y `soft` ya no aclaran el
     texto, solo `--line` sigue siendo gris para las divisiones. */
  --mute: #222222;
  --soft: #222222;

  --cols: 12;
  --gap: 8px;
  --pad: 8px;

  /* Una sola familia en todo el sitio, al estilo de la referencia suiza:
     grotesca neutra, un solo peso, tracking negativo en los tamaños grandes. */
  --f-body: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-display: var(--f-body);
  --f-meta: var(--f-body);

  --t-meta: 11px;
  --t-body: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.45;
}

/* El navegador le pone `margin: 1em 40px` a figure. Sin esto cada medio pierde
   80 px de ancho y la retícula deja de cuadrar. */
figure,
h1,
h2,
p {
  margin: 0;
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* --- Retícula -------------------------------------------------- */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
}

.wrap {
  padding-inline: var(--pad);
}

/* Tokens de tamaño. Cambian por breakpoint; la proporción del medio nunca. */
.s-xs { --span: 2; }
.s-s  { --span: 3; }
.s-m  { --span: 4; }
.s-l  { --span: 6; }
.s-xl { --span: 8; }
.s-full { --span: 12; }

/* El span va en el `end`, no en el `grid-column` completo: así un
   `grid-column-start` en línea puede mover la pieza sin anular su ancho. */
[class*="s-"] {
  grid-column-end: span var(--span);
}

/* Pegado al borde derecho de la retícula. Se calcula el inicio porque con el
   `end` suelto el navegador colocaría la pieza con ancho de una columna. */
.al-final {
  grid-column-start: calc(var(--cols) + 1 - var(--span));
  grid-column-end: -1;
}

/* --- Metadatos -------------------------------------------------- */

.meta {
  font-family: var(--f-meta);
  font-size: var(--t-meta);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.35;
}

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

/* --- Cabecera --------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: var(--pad);
  background: var(--bone);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s, color 0.3s, border-color 0.25s;
}

/* Al bajar, la cabecera se pasa a negro y sus elementos a blanco. */
.site-head[data-stuck="true"] {
  background: var(--ink);
  color: var(--bone);
  border-bottom-color: transparent;
}

/* El logotipo es negro plano, así que invertirlo lo deja en blanco exacto. */
.site-head[data-stuck="true"] .logotipo {
  filter: invert(1);
}

.site-head .grid {
  align-items: center;
}

.logotipo {
  height: 13px;
  width: auto;
}

.site-nav {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
}

/* El conmutador de idioma se separa del resto de la navegación. */
.idioma {
  margin-left: 4px;
  padding-left: 12px;
  border-left: 1px solid currentColor;
  opacity: 0.55;
  transition: opacity 0.2s;
}

.idioma:hover {
  opacity: 1;
}

.site-nav a[aria-current="true"] {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Intro ------------------------------------------------------ */

.intro {
  padding: 112px var(--pad) 88px;
}

/* Descripción del estudio: sans serif, pequeña, contra un lado. */
.about p {
  font-size: 14px;
  line-height: 1.55;
  font-weight: 300;
  max-width: 52ch;
  margin-top: 10px;
}

.about p + p {
  color: var(--mute);
}

/* «Ver el caso» va pegado al borde derecho de la retícula. */
.ver-caso {
  text-align: right;
}

/* Los datos del proyecto: año, categoría y país. */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tags li {
  padding: 1px 0;
}

.ancla {
  display: block;
  height: 0;
  scroll-margin-top: 72px;
}

/* --- Filtros ----------------------------------------------------- */
/* Debajo del texto del estudio, como una línea de texto más. Sin cajas, sin
   líneas y sin quedarse pegados al hacer scroll. */

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-top: 26px;
}

.filtros button {
  position: relative;
  padding: 0;
}

.filtros button::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.filtros button:hover::after,
.filtros button[aria-pressed="true"]::after {
  transform: scaleX(1);
}


/* --- Proyecto --------------------------------------------------- */

.project {
  padding-top: 64px;
  scroll-margin-top: 80px;
}

.project[hidden] {
  display: none !important;
}

.project-head {
  padding: 0 var(--pad) 12px;
}

.project-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.1vw, 32px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 2px;
}

.project-num {
  color: var(--soft);
}

/* Única señal de hover del proyecto: una línea que se traza bajo el título,
   de izquierda a derecha. El resto del bloque no reacciona. */
.title-link {
  position: relative;
  display: inline-block;
}

.title-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.08em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.title-link:hover::after,
.title-link:focus-visible::after {
  transform: scaleX(1);
}

.project-desc {
  max-width: 46ch;
  color: var(--mute);
  font-size: var(--t-body);
}

.project-link {
  display: inline-block;
  border-bottom: 1px solid var(--soft);
  padding-bottom: 1px;
}

.project-link:hover {
  border-bottom-color: var(--ink);
}

.project-align-right {
  text-align: right;
}

/* Índice numérico de los medios del proyecto */
.media-index {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.media-index button {
  color: var(--soft);
  font-family: var(--f-meta);
  font-size: var(--t-meta);
  transition: color 0.15s;
}

.media-index button:hover,
.media-index button[data-on="true"] {
  color: var(--ink);
}

/* --- Medios ----------------------------------------------------- */

/* El grupo de medios del home ocupa 8 de las 12 columnas y se pega a un margen:
   el aire que queda siempre cae del otro lado, nunca entre la imagen y el borde.
   La separación entre piezas es la misma que el margen de la página. */
.media-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;
  margin-inline: var(--pad);
  width: calc((100% - var(--pad) * 2) * 8 / 12 - var(--gap) * 4 / 12);
}

.media-grid--der {
  margin-left: auto;
}

/* Dentro del grupo la retícula es de 8. */
.media-grid .s-m { --span: 4; }
.media-grid .s-l { --span: 4; }
.media-grid .s-xl { --span: 8; }
.media-grid .s-full { --span: 8; }

.media {
  position: relative;
}

/* La caja adopta la proporción real del archivo: cero salto de layout. */
.media-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--ar);
  background: rgba(40, 40, 40, 0.04);
  overflow: hidden;
}

.media-frame > img,
.media-frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* El marco recorta, así que la pieza no cambia de tamaño al acercarse. */
  transition: transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}

@media (hover: hover) {
  .media:hover .media-frame > img,
  .media:hover .media-frame > video {
    transform: scale(1.06);
  }
}

/* La aparición gradual solo si hay JS. Sin JS los medios se ven igual.
   La transición lleva también el `transform`, o esta regla pisaría la del
   acercamiento al pasar el ratón. */
.js .media img,
.js .media video {
  opacity: 0;
  transition: opacity 0.5s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.js .media img.is-loaded,
.js .media video.is-loaded {
  opacity: 1;
}

.media-tag {
  position: absolute;
  top: 5px;
  left: 6px;
  z-index: 2;
  color: rgba(248, 248, 248, 0.85);
  mix-blend-mode: difference;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.media:hover .media-tag,
.media[data-flash="true"] .media-tag {
  opacity: 1;
}


/* --- Cifra grande ------------------------------------------------ */
/* El número que va a la derecha de cada proyecto, como las fechas de la
   referencia: grande, en negrita y en el tono más oscuro. */

.cifra {
  font-size: clamp(30px, 3.6vw, 54px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: #222222;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* --- Página de caso --------------------------------------------- */
/* Los medios ocupan las ocho primeras columnas y el texto se queda fijo en las
   últimas cuatro, como en la referencia. En móvil pasa a una sola columna con
   el texto arriba. */

.caso {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--gap);
  padding: 40px var(--pad) 0;
  align-items: start;
}

/* Dentro del caso la retícula es de 8, así que `full` se recorta a 8. */
.caso-medios .s-full { --span: 8; }

/* Los medios van uno debajo del otro y ocupan toda la columna izquierda. */
.caso-medios {
  grid-column: 1 / span 7;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* Los apaisados ocupan todo el ancho; los verticales y cuadrados se quedan
   más estrechos y centrados, para que no se vuelvan gigantes. */
.caso-medios .media {
  width: 100%;
}

.caso-medios .media--alta {
  width: min(100%, 62%);
  margin-inline: auto;
}

/* La columna de texto se queda quieta mientras las imágenes suben. Si el texto
   no cabe en la pantalla, se desplaza por dentro al pasar el ratón por encima. */
.caso-texto {
  grid-column: 8 / -1;
  padding-left: 28px;
  position: sticky;
  top: 44px;
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: 24px;
  scrollbar-width: none;
}

.caso-texto::-webkit-scrollbar {
  display: none;
}

.bloque {
  margin-top: 26px;
}

.bloque-titular {
  font-size: 16px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 6px 0 8px;
}

.bloque-texto {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}

.sublista {
  margin-top: 10px;
}

.sublista ul {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  font-size: 14px;
  color: var(--mute);
}

.sublista li {
  padding: 1px 0;
}

.caso-titulo {
  font-weight: 600;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 14px 0 20px;
}

.caso-desc {
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--mute);
  margin-bottom: 22px;
}

.volver {
  display: inline-block;
  transition: color 0.15s;
}

.volver:hover {
  color: var(--ink);
}

.ficha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  margin: 0 0 22px;
}

.ficha dt {
  white-space: nowrap;
}

.ficha dd {
  margin: 0;
}

.caso-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.caso-nav a {
  transition: color 0.15s;
}

.caso-nav a:hover {
  color: var(--ink);
}

/* --- Entrada a un proyecto -------------------------------------- */
/* El caso entra deslizándose desde la derecha y el home se va a la izquierda.
   Donde el navegador no soporta transiciones de vista, no pasa nada: navega
   normal. En móvil se reduce a un fundido. */

@view-transition {
  navigation: auto;
}

/* Entrada a un caso, en dos tiempos a propósito:
   1. la página anterior se va hacia la izquierda,
   2. la columna de texto entra desde la derecha,
   3. la columna de imágenes se revela por detrás, un poco después.

   La coreografía de las dos columnas va con animaciones normales de CSS y no
   con nombres de transición de vista: la columna de medios llega a medir
   veinte mil píxeles de alto y pedirle al navegador una captura de eso entero
   sale carísimo. */

::view-transition-old(root) {
  animation: salir-izquierda 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
  z-index: 1;
}

::view-transition-new(root) {
  animation: aparecer 0.3s ease both;
  z-index: 2;
}

html:active-view-transition-type(volver)::view-transition-old(root) {
  animation: salir-derecha 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
  z-index: 2;
}

html:active-view-transition-type(volver)::view-transition-new(root) {
  animation: entrar-izquierda 0.5s cubic-bezier(0.65, 0, 0.35, 1) both;
  z-index: 1;
}

@keyframes aparecer {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes salir-izquierda {
  from { transform: translateX(0);    opacity: 1; }
  to   { transform: translateX(-28%); opacity: 0; }
}

@keyframes entrar-izquierda {
  from { transform: translateX(-28%); opacity: 0.5; }
  to   { transform: translateX(0);    opacity: 1; }
}

@keyframes salir-derecha {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

/* Los dos tiempos de la página de caso. */
@media (min-width: 821px) and (prefers-reduced-motion: no-preference) {
  .caso-texto {
    animation: texto-entra 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }

  .caso-medios {
    /* El origen va arriba: la columna mide miles de píxeles y con el origen
       en el centro el escalado desplazaría la parte visible una barbaridad. */
    transform-origin: center top;
    animation: medios-detras 0.7s 0.22s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
}

@keyframes texto-entra {
  from { transform: translateX(46%); opacity: 0; }
  to   { transform: translateX(0);   opacity: 1; }
}

@keyframes medios-detras {
  from { transform: scale(0.93); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* --- Ampliar un medio -------------------------------------------- */

.ampliar {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  cursor: zoom-in;
  background: rgba(34, 34, 34, 0.04);
}

.visor {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--bone);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px var(--pad);
  cursor: zoom-out;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.visor[data-abierto="true"] {
  opacity: 1;
  pointer-events: auto;
}

.visor-pieza {
  max-width: 100%;
  max-height: 100%;
  display: flex;
}

.visor img,
.visor video {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.visor-cerrar {
  position: absolute;
  top: 12px;
  right: var(--pad);
  z-index: 2;
}

/* --- Contacto --------------------------------------------------- */

.contact {
  padding: 128px var(--pad) 72px;
  scroll-margin-top: 80px;
}

.contact-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(30px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.035em;
  margin: 0 0 40px;
}

.contact-title em {
  font-style: normal;
  color: var(--mute);
}

.field {
  display: block;
  margin-bottom: 14px;
}

.field > span {
  display: block;
  margin-bottom: 4px;
  color: var(--mute);
}

.field input,
.field textarea,
.field select {
  width: 100%;
  font-family: var(--f-body);
  font-size: var(--t-body);
  font-weight: 300;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 6px 0;
  transition: border-color 0.2s;
  -webkit-appearance: none;
  appearance: none;
}

.field textarea {
  resize: vertical;
  min-height: 78px;
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.submit {
  border: 1px solid var(--ink);
  padding: 9px 20px 8px;
  margin-top: 8px;
  transition: background-color 0.2s, color 0.2s;
}

.submit:hover {
  background: var(--ink);
  color: var(--bone);
}

.submit[disabled] {
  opacity: 0.4;
  cursor: default;
}

/* Campo trampa para robots: fuera de la vista y del recorrido con teclado. */
.trampa {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.form-note {
  margin-top: 12px;
  min-height: 1.3em;
}

.contact-block + .contact-block {
  margin-top: 26px;
}

.contact-block a {
  border-bottom: 1px solid var(--soft);
}

.contact-block a:hover {
  border-bottom-color: var(--ink);
}

/* --- Pie -------------------------------------------------------- */

.site-foot {
  padding: 40px var(--pad) 14px;
  border-top: 1px solid var(--line);
}

.site-foot .isotipo {
  height: 22px;
  width: auto;
  justify-self: end;
}

/* --- Responsive ------------------------------------------------- */

@media (max-width: 1100px) {
  .s-xs { --span: 3; }
  .s-s  { --span: 4; }
}

@media (max-width: 820px) {
  :root { --cols: 6; }
  .s-xs { --span: 2; }
  .s-s  { --span: 3; }
  .s-m  { --span: 3; }
  .s-l  { --span: 6; }
  .s-xl { --span: 6; }
  .s-full { --span: 6; }

  .site-foot .grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .intro { padding-top: 64px; }

  /* En pantallas chicas el grupo de medios ocupa todo el ancho disponible. */
  .media-grid {
    width: auto;
    margin-left: var(--pad);
    margin-right: var(--pad);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .media-grid .media {
    grid-column-start: auto !important;
  }
  .media-grid .s-m { --span: 1; }
  .media-grid .s-xl,
  .media-grid .s-full { --span: 2; }

  /* Página de caso: el texto deja de ir al lado y pasa arriba. */
  .caso-medios {
    grid-column: 1 / -1;
  }
  .caso-medios .media--alta {
    width: 100%;
  }
  /* En pantallas chicas el texto no se queda fijo ni tiene scroll propio:
     va arriba, entero, y debajo las imágenes. */
  .caso-texto {
    grid-column: 1 / -1;
    order: -1;
    margin-bottom: 28px;
    position: static;
    max-height: none;
    overflow: visible;
    padding-left: 0;
  }
  .caso-nav { max-width: 100%; }

  /* Cabecera en una sola línea: logotipo a la izquierda, navegación a la derecha. */
  .site-head .grid {
    grid-template-columns: auto 1fr;
  }
  .site-head .grid > * {
    grid-column: auto;
  }
  .site-head .site-nav {
    grid-column-start: auto;
  }
}

@media (max-width: 560px) {
  :root { --cols: 2; --t-meta: 10.5px; }
  .s-xs { --span: 1; }
  .s-s  { --span: 1; }
  .s-m  { --span: 2; }
  .s-l  { --span: 2; }
  .s-xl { --span: 2; }
  .s-full { --span: 2; }

  .site-nav {
    gap: 11px;
  }
  .logotipo {
    height: 11px;
  }

  /* Una sola columna. Los `grid-column-end: -1` del HTML sobran acá. */
  .intro > *,
  .contact > *,
  .site-foot .grid > * {
    grid-column: 1 / -1 !important;
  }

  .project { padding-top: 44px; }

  .intro {
    padding-top: 40px;
    padding-bottom: 36px;
  }

  .intro .meta {
    text-align: left;
    margin-top: 14px;
  }
  .contact { padding-top: 72px; }

  /* Página de caso: el texto arriba y los medios debajo, a una columna.
     El `order` va solo en el texto: si lo llevan los dos empatan y manda el
     orden del HTML, que pone los medios primero. */
  .caso-medios,
  .caso-texto {
    grid-column: 1 / -1;
  }
  .caso-texto {
    order: -1;
    margin-bottom: 24px;
    position: static;
    max-height: none;
    overflow: visible;
    padding-left: 0;
  }
  .caso-medios .media--alta {
    width: 100%;
  }

  /* Ficha del proyecto: una columna, sin el bloque derecho pegado al borde. */
  .project-head > * {
    grid-column: 1 / -1;
  }
  .project-align-right {
    text-align: left;
  }
  .project-head .media-index {
    justify-content: flex-start !important;
  }
  .site-foot .grid > *:last-child {
    text-align: left !important;
    margin-top: 16px;
  }
  .site-foot .isotipo {
    justify-self: start;
  }
  .contact form {
    margin-top: 32px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}