/* Zisca — tipografías del sitio, autoalojadas.
   Jost (variable 300–500) para toda la interfaz y el texto corrido.
   Cormorant Garamond itálica, solo para las frases de apertura. */

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-i-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/CormorantGaramond-i-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/Jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Jost';
  font-style: normal;
  font-weight: 300 500;
  font-display: swap;
  src: url('../fonts/Jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =============================================================================
   Zisca Interiorismo — hoja de estilos única
   ========================================================================== */

:root {
  /* Color ---------------------------------------------------------------
     Fondo greige cálido en vez de blanco: enmarca la fotografía y baja el
     contraste del conjunto. Los tonos de texto están elegidos para cumplir
     WCAG AA sobre ese fondo (el #939598 del manual da 3.0:1 y no alcanza). */
  --tinta:       #19191a;   /* texto principal — 12.4:1 sobre el fondo */
  --tinta-70:    #4a4842;   /* texto secundario — 6.4:1 */
  --gris-texto:  #57544d;   /* rótulos y datos — 5.3:1 */
  --papel:       #dcd8d0;   /* fondo */
  --papel-alto:  #e8e5df;   /* bloques más claros */
  --banda:       #746e62;   /* bandas oscuras — blanco encima da 5.1:1 */
  --linea:       #bdb8ad;   /* filetes */
  --linea-tenue: #cbc6bc;
  --verde:       #657568;   /* acento del manual */
  --arena:       #cfac8f;   /* cálido del manual */
  --blanco:      #ffffff;
  --claro:       #f2efe9;   /* texto sobre fotografía oscurecida */

  /* Tipografía ----------------------------------------------------------
     Jost para toda la interfaz y el texto corrido; Cormorant Garamond en
     itálica ligera solo para las frases de apertura. */
  --f-ui:      'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  /* Métrica -------------------------------------------------------------- */
  --ancho:     1360px;
  --gutter:    clamp(1.25rem, 4.5vw, 4rem);
  --aire:      clamp(2.75rem, 5.5vw, 5rem);
  --cabecera:  76px;
  --transicion: 480ms cubic-bezier(.22, .61, .36, 1);
}

/* ------------------------------------------------------------------ base -- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-ui);
  font-weight: 300;
  font-size: clamp(.9375rem, .9rem + .15vw, 1rem);
  line-height: 1.8;
  letter-spacing: .015em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; font-weight: 400; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--banda); color: var(--blanco); }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 3px; }

.salto-contenido {
  position: absolute; left: -9999px; z-index: 200;
  background: var(--tinta); color: var(--papel);
  padding: .75rem 1.25rem;
  font-family: var(--f-ui); font-size: .75rem;
  letter-spacing: .2em; text-transform: uppercase;
}
.salto-contenido:focus { left: 1rem; top: 1rem; }

.oculto-visual {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- layout -- */

.contenedor {
  width: 100%; max-width: var(--ancho);
  margin-inline: auto; padding-inline: var(--gutter);
}
.contenedor--angosto { max-width: 940px; }

.bloque { padding-block: var(--aire); }
.bloque--alto { background: var(--papel-alto); }

/* Bloque con trama botánica de fondo (build/patron.py). La trama va en un
   pseudoelemento para poder bajarle la opacidad y desvanecerla por arriba y por
   abajo sin tocar el texto. */
.bloque--patron {
  --trama-tamano: clamp(210px, 24vw, 320px);
  position: relative; overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.bloque--patron::before {
  content: ''; position: absolute; inset: 0;
  /* la url va directa y no en una variable: si no, el navegador descarga
     también la trama que no se usa */
  background-image: url('../brand/patron-palmera.svg');
  background-repeat: repeat;
  background-size: var(--trama-tamano);
  opacity: .34;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 76%, transparent);
  pointer-events: none;
}
.bloque--patron > * { position: relative; }

/* La hoja de monstera es más grande que la fronda: mosaico más amplio */
.bloque--monstera { --trama-tamano: clamp(260px, 30vw, 420px); }
.bloque--monstera::before { background-image: url('../brand/patron-monstera.svg'); }

/* Banda oscura a sangre completa */
.banda { background: var(--banda); color: var(--blanco); padding-block: var(--aire); }
.banda a { color: var(--blanco); }
.banda .rotulo { color: rgba(255,255,255,.66); }

/* ------------------------------------------------------------ tipografía -- */

/* Rótulos: versalitas muy espaciadas, el recurso que ordena todo el sitio */
.rotulo {
  display: block;
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase;
  line-height: 1.7; color: var(--gris-texto);
  margin: 0 0 1.1rem;
}
.rotulo--tinta { color: var(--tinta); }

.titulo-seccion {
  font-family: var(--f-ui); font-weight: 400;
  font-size: clamp(.75rem, .72rem + .12vw, .875rem);
  letter-spacing: .34em; text-transform: uppercase;
  line-height: 1.7; color: var(--tinta);
  text-align: center; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
}

/* Frases de apertura, en itálica */
.display {
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3.25rem);
  line-height: 1.2; letter-spacing: .005em;
  color: var(--tinta); margin: 0;
  text-wrap: balance;
}
.display--centrado { text-align: center; margin-inline: auto; max-width: 22ch; }

/* Filete corto bajo las frases */
.filete {
  width: 130px; height: 1px; background: var(--tinta);
  border: 0; margin: clamp(1.15rem, 2vw, 1.6rem) 0;
}
.filete--centrado { margin-inline: auto; }

.texto { max-width: 62ch; }
.texto p + p { margin-top: 0; }

/* Texto corrido a dos columnas, justificado */
.columnas {
  column-count: 1; column-gap: clamp(2rem, 5vw, 4.5rem);
  text-align: justify; hyphens: auto;
}
@media (min-width: 820px) { .columnas { column-count: 2; } }
.columnas p { break-inside: avoid-column; }

.justificado { text-align: justify; hyphens: auto; }

/* En pantallas angostas caben pocas palabras por línea y el justificado abre
   demasiado los espacios: ahí se alinea a la izquierda. */
@media (max-width: 620px) {
  .columnas, .justificado { text-align: left; }
}

.suave { color: var(--tinta-70); }

/* Enlaces y botones */
.enlace {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%;
  background-repeat: no-repeat; padding-bottom: .1em;
  transition: background-size var(--transicion);
}
.enlace:hover { background-size: 0 1px; background-position: 100% 100%; }

.boton {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none; color: inherit;
  transition: gap var(--transicion), opacity var(--transicion);
}
.boton .flecha { transition: transform var(--transicion); }
.boton:hover .flecha { transform: translateX(.45rem); }

.boton--solido {
  background: var(--tinta); color: var(--papel);
  padding: 1.15rem 2.75rem; justify-content: center;
  transition: background var(--transicion);
}
.boton--solido:hover { background: var(--banda); }
.banda .boton--solido { background: var(--tinta); color: var(--blanco); }

/* Marca de sección: el isotipo del manual */
.marca-seccion { width: 5px; height: auto; color: var(--tinta); margin-bottom: 1.5rem; }
.marca-seccion--centrada { margin-inline: auto; }

/* --------------------------------------------------------------- velo ---- */
/* Pantalla de carga: el logotipo animado sobre el fondo del sitio, hasta que
   la página termina de cargar. Sin JavaScript no aparece nunca. */

.velo {
  position: fixed; inset: 0; z-index: 400;
  background: var(--papel);
  display: grid; place-items: center;
}
html:not(.js) .velo { display: none; }
.velo img { width: clamp(190px, 28vw, 340px); height: auto; }
.velo[data-listo] {
  opacity: 0; pointer-events: none;
  transition: opacity 620ms cubic-bezier(.22, .61, .36, 1);
}
html.cargando body { overflow: hidden; }

/* ------------------------------------------------------------ cabecera --- */

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  transition: background var(--transicion);
}
.cabecera__logo svg { transition: fill var(--transicion); }
.menu-boton { transition: color var(--transicion); }
.cabecera__fila {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: var(--cabecera);
}
.cabecera__logo { display: block; color: var(--tinta); flex: none; }
.cabecera__logo img,
.cabecera__logo svg { width: clamp(104px, 11vw, 132px); height: auto; }

.nav { display: flex; align-items: center; gap: clamp(1.75rem, 3.2vw, 3.25rem); }
.nav a {
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .28em; text-transform: uppercase;
  text-decoration: none; color: var(--tinta);
  position: relative; padding-block: .5rem; white-space: nowrap;
  transition: opacity var(--transicion), color var(--transicion);
}
.nav a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: .1rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--transicion);
}
.nav a:hover::after, .nav a[aria-current="page"]::after {
  transform: scaleX(1); transform-origin: left;
}

.nav__pie { display: none; }

.menu-boton {
  display: none; background: none; border: 0; cursor: pointer;
  padding: .6rem; margin-right: -.6rem; color: var(--tinta);
}
.menu-boton span {
  display: block; width: 26px; height: 1px; background: currentColor;
  transition: transform var(--transicion), opacity var(--transicion);
}
.menu-boton span + span { margin-top: 7px; }
[data-menu="abierto"] .menu-boton span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
[data-menu="abierto"] .menu-boton span:nth-child(2) { opacity: 0; }
[data-menu="abierto"] .menu-boton span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 800px) {
  .menu-boton { display: block; }

  /* El desenfoque de la cabecera crea un bloque contenedor y dejaría el menú
     encerrado dentro de ella: en móvil se desactiva para que `fixed` se
     resuelva contra la ventana. */
  .cabecera { backdrop-filter: none; -webkit-backdrop-filter: none; }

  /* El logotipo y el botón quedan por encima del panel */
  .cabecera__logo, .menu-boton { position: relative; z-index: 2; }

  .nav {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: 0;
    background: var(--papel);
    padding: calc(var(--cabecera) + clamp(1.5rem, 7vh, 3.5rem))
             var(--gutter) clamp(2rem, 6vh, 3.5rem);
    opacity: 0; pointer-events: none;
    transition: opacity 300ms ease;
  }
  .nav a {
    font-size: clamp(1.125rem, 1rem + 1.4vw, 1.5rem);
    letter-spacing: .16em; padding-block: clamp(.7rem, 1.8vh, 1.1rem);
    width: auto;
  }
  [data-menu="abierto"] .nav { opacity: 1; pointer-events: auto; }
  html[data-menu="abierto"] body { overflow: hidden; }

  /* Isotipo y los tres valores, al pie del panel */
  .nav__pie { display: block; margin-top: auto; padding-top: 2rem; }
  .nav__iso {
    width: 6px; height: auto; color: var(--tinta);
    opacity: .8; margin-bottom: 1rem;
  }
  .nav__valores {
    display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
    margin: 0; color: var(--gris-texto);
    font-family: var(--f-ui); font-size: .625rem;
    letter-spacing: .22em; text-transform: uppercase;
  }
  .nav__sep {
    display: inline-block; width: 1px; height: 1.1em;
    background: currentColor; opacity: .55;
  }

  /* Con el menú abierto el logotipo vuelve a oscuro aunque haya foto detrás */
  html.js.sobre-foto[data-menu="abierto"] .cabecera__logo svg { fill: var(--tinta); }
  html.js.sobre-foto[data-menu="abierto"] .menu-boton { color: var(--tinta); }
}

/* ------------------------------------------------------- portada (home) -- */
/* La fotografía ocupa la pantalla completa a cualquier tamaño de ventana: se
   mete por debajo de la cabecera con un margen negativo y usa `svh`, que en los
   teléfonos descuenta las barras del navegador (100vh se pasa de largo). */

.inicio {
  position: relative;
  margin-top: calc(-1 * var(--cabecera));
  /* `svh` es la ventana más chica —con las barras del navegador desplegadas—,
     así que al retraerse dejaba una franja de fondo bajo la foto. `dvh` sigue
     la altura visible real. La primera línea queda de respaldo. */
  height: 100svh;
  height: 100dvh;
  min-height: 420px;
  /* Oscuro y no claro: si por redondeo asomara una línea, se confunde con la
     parte baja de la capa que oscurece la foto. */
  background: var(--tinta);
  overflow: hidden;
}
/* Posicionada en absoluto: cubre la caja entera aunque el alto quede en
   fracciones de píxel, sin dejar un filo abajo. */
.inicio__foto {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
/* Capa que oscurece la fotografía: más marcada arriba, para la cabecera, y
   abajo, donde va el lema; suave al medio para no apagar el ambiente. */
.inicio__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
              rgba(25, 25, 26, .42) 0%,
              rgba(25, 25, 26, .20) 34%,
              rgba(25, 25, 26, .26) 62%,
              rgba(25, 25, 26, .60) 100%);
}

/* El lema, abajo a la izquierda */
.inicio__lema {
  position: absolute; left: 0; right: 0; bottom: clamp(2.5rem, 7vh, 5rem);
  padding-inline: var(--gutter);
  max-width: var(--ancho); margin-inline: auto;
  color: var(--claro);
}
@media (min-width: 1360px) {
  .inicio__lema { padding-left: calc((100vw - var(--ancho)) / 2 + var(--gutter)); }
}
.inicio__iso {
  width: clamp(6px, .55vw, 8px); height: auto; color: var(--claro);
  opacity: .92; margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}
.inicio__valores {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: clamp(.6rem, 1.6vw, 1.4rem);
  margin: 0;
  font-family: var(--f-ui); font-weight: 400;
  font-size: clamp(.6875rem, .58rem + .45vw, 1.0625rem);
  letter-spacing: clamp(.2em, .28vw, .34em);
  text-transform: uppercase; line-height: 1.6;
}
/* Separador fino entre los tres conceptos */
.inicio__sep {
  display: inline-block; width: 1px; height: 1.1em;
  background: currentColor; opacity: .5;
}

/* Sobre la fotografía oscurecida, la cabecera va en claro */
html.js.sobre-foto .cabecera {
  background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
html.js.sobre-foto .cabecera__logo svg { fill: var(--claro); }
html.js.sobre-foto:not([data-menu="abierto"]) .nav a,
html.js.sobre-foto .menu-boton { color: var(--claro); }
.inicio__baja {
  position: absolute; right: clamp(1.25rem, 4.5vw, 4rem);
  bottom: clamp(2.5rem, 7vh, 5rem);
  display: grid; place-items: center;
  width: 44px; height: 44px;
  color: var(--claro);
  border: 1px solid rgba(242, 239, 233, .45);
  border-radius: 50%;
  transition: border-color var(--transicion), background var(--transicion);
}
.inicio__baja:hover {
  border-color: var(--claro);
  background: rgba(242, 239, 233, .12);
}
/* En pantallas angostas el lema ya ocupa el pie de la foto */
@media (max-width: 559px) { .inicio__baja { display: none; } }
.inicio__baja svg { transition: transform var(--transicion); }
.inicio__baja:hover svg { transform: translateY(3px); }

/* Las cuatro puertas de entrada al sitio */
.puertas {
  display: grid; gap: clamp(.6rem, 1.5vw, 1.25rem);
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1000px) { .puertas { grid-template-columns: repeat(4, 1fr); } }

.puerta {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .35rem;
  aspect-ratio: 1 / 1;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--linea);
  text-decoration: none; color: inherit; text-align: center;
  transition: border-color var(--transicion), background var(--transicion);
}
.puerta:hover { border-color: var(--tinta); background: var(--papel-alto); }

.puerta__hoja {
  width: clamp(52px, 6vw, 76px); height: auto;
  margin-bottom: clamp(.75rem, 1.6vw, 1.25rem);
  color: var(--verde); opacity: .6;
  transition: opacity var(--transicion), transform var(--transicion);
}
.puerta__hoja g { stroke-width: 2.2; }
.puerta:hover .puerta__hoja { opacity: .85; transform: translateY(-3px); }

.puerta__titulo {
  font-family: var(--f-ui); font-weight: 400;
  font-size: clamp(.75rem, .72rem + .12vw, .8125rem);
  letter-spacing: .3em; text-transform: uppercase; margin: 0;
}
.puerta__texto {
  font-family: var(--f-display); font-style: italic;
  font-size: 1.0625rem; color: var(--gris-texto); margin: 0;
}

/* En dos columnas angostas la caja se aprieta para no comerse la pantalla */
@media (max-width: 559px) {
  .puerta { padding: .9rem; }
  .puerta__hoja { width: 44px; margin-bottom: .55rem; }
  .puerta__titulo { font-size: .625rem; letter-spacing: .18em; }
  .puerta__texto { font-size: .8125rem; line-height: 1.35; }
}

/* El portafolio abre directo con el mosaico: solo algo de aire sobre los filtros */
.obra-inicio { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--aire); }

/* ------------------------------------------- encabezado de página / obra -- */
/* La imagen va enmarcada por el fondo, no a sangre: es el recurso que da
   el aire del sitio. */

.portada-pagina { padding-top: clamp(1rem, 2vw, 1.75rem); }
.portada-pagina__marco { position: relative; }
.portada-pagina__figura {
  margin: 0; overflow: hidden;
  background: var(--papel-alto);
  /* el ancho explícito es necesario: con solo aspect-ratio + max-height el
     recorte terminaba angostando la figura en vez de recortarla */
  width: 100%; aspect-ratio: 16 / 9; max-height: 64vh;
}
@media (max-width: 700px) { .portada-pagina__figura { aspect-ratio: 4 / 3; } }

/* La textura de palmera ya viene recortada en banda: se muestra tal cual */
.portada-pagina__figura--textura { aspect-ratio: 12 / 5; max-height: none; }
@media (max-width: 700px) { .portada-pagina__figura--textura { aspect-ratio: 3 / 2; } }
.portada-pagina__figura img { width: 100%; height: 100%; object-fit: cover; }
.portada-pagina__etiqueta {
  position: absolute; left: 0; bottom: 0;
  background: var(--banda); color: var(--blanco);
  padding: .85rem 2.25rem .8rem 1.5rem;
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .3em; text-transform: uppercase;
  margin: 0;
}

/* -------------------------------------------------------------- filtros -- */

.filtros {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; align-items: baseline;
  padding-block: 1.15rem;
  border-block: 1px solid var(--linea-tenue);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}
.filtros__grupo { display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.filtro {
  background: none; border: 0; cursor: pointer;
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gris-texto); padding: .3rem 0; position: relative;
  transition: color var(--transicion);
}
.filtro::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right;
  transition: transform var(--transicion);
}
.filtro:hover, .filtro[aria-pressed="true"] { color: var(--tinta); }
.filtro[aria-pressed="true"]::after, .filtro:hover::after {
  transform: scaleX(1); transform-origin: left;
}
.filtros__cuenta {
  margin-left: auto; font-family: var(--f-ui); font-size: .6875rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gris-texto);
}

/* ---------------------------------------------------------- mosaico ------ */
/* Retícula estricta de N columnas que se llena con bloques rectangulares.
   Las piezas ocupan 1×1 o 2×2 celdas: los tamaños varían pero todos los
   bordes caen sobre las mismas líneas. Las recetas están en build/mosaico.py
   y las aplica zisca.js. */

.mosaico, .serie {
  --cols: 2; --hueco: 10px;
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--hueco);
}
@media (min-width: 640px)  { .mosaico, .serie { --cols: 3; --hueco: 12px; } }
@media (min-width: 1000px) { .mosaico, .serie { --cols: 4; --hueco: 14px; } }
@media (min-width: 1400px) { .mosaico, .serie { --cols: 5; --hueco: 16px; } }

/* En el portafolio cada pieza lleva nombre debajo: la separación vertical es
   mayor para que el pie no quede pegado a la fila siguiente. Al ser igual para
   todas las filas, la retícula sigue alineada. */
.mosaico { row-gap: calc(var(--hueco) + 1.75rem); }

.obra { display: flex; flex-direction: column; min-width: 0; }
.obra[hidden] { display: none; }
.obra__enlace {
  display: flex; flex-direction: column; height: 100%;
  text-decoration: none; color: inherit;
}
.obra__marco {
  position: relative; overflow: hidden;
  background: var(--papel-alto); aspect-ratio: 4 / 5;
}
.obra__marco img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms cubic-bezier(.22,.61,.36,1), opacity var(--transicion);
}
.obra__enlace:hover .obra__marco img { transform: scale(1.035); opacity: .92; }
.obra--grande .obra__marco { flex: 1; min-height: 0; }

.obra__pie { flex: none; padding-top: .85rem; }
.obra__titulo {
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .2em; text-transform: uppercase;
  line-height: 1.6; margin: 0; color: var(--tinta);
}
.obra--grande .obra__titulo { font-size: .75rem; letter-spacing: .24em; }
.obra__meta {
  display: block; margin-top: .15rem;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: .9375rem; letter-spacing: 0; text-transform: none;
  color: var(--gris-texto);
}

.vacio { padding: 4rem 0; color: var(--gris-texto); }

/* Galería del proyecto */
.foto {
  position: relative; overflow: hidden; min-width: 0;
  background: var(--papel-alto);
  border: 0; padding: 0; margin: 0;
  display: block; cursor: zoom-in;
  aspect-ratio: 4 / 5;
  text-decoration: none; color: inherit;
}
.foto img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity var(--transicion);
}
.foto:hover img { opacity: .86; }

/* ------------------------------------------------------- ficha proyecto -- */

/* Cada ficha abre con un dibujo botánico a la izquierda del título. Se va
   turnando entre los seis para que dos proyectos seguidos no repitan.
   Es decorativo. */
.ficha__marca {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(.75rem, 1.8vw, 1.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
}
.ficha__hoja {
  flex: none;
  width: clamp(40px, 4.4vw, 58px); height: auto;
  color: var(--verde); opacity: .58;
}
.ficha__hoja g { stroke-width: 2.4; }

.ficha__titulo {
  font-family: var(--f-ui); font-weight: 400;
  font-size: clamp(.875rem, .8rem + .35vw, 1.0625rem);
  letter-spacing: .34em; text-transform: uppercase;
  text-align: center; line-height: 1.6;
  margin: 0;
}

.ficha__cuerpo {
  display: grid; gap: clamp(1.75rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 3.5vw, 2.75rem);
}
@media (min-width: 860px) {
  .ficha__cuerpo { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); }
}
.ficha__datos { list-style: none; margin: 0; padding: 0; }
.ficha__datos div { display: block; margin-bottom: .9rem; }
.ficha__datos dt {
  font-family: var(--f-ui); font-size: .625rem;
  letter-spacing: .26em; text-transform: uppercase; color: var(--gris-texto);
}
.ficha__datos dd {
  margin: .1rem 0 0; font-size: .9375rem; color: var(--tinta);
}
.ficha__linea { border: 0; border-top: 1px solid var(--linea-tenue); margin: 0; }

.paginacion {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 2rem; padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--linea-tenue); margin-top: clamp(2rem, 4vw, 3.25rem);
}
.paginacion__lado { max-width: 46%; }
.paginacion__lado--fin { text-align: right; margin-left: auto; }
.paginacion__rotulo {
  display: block; margin-bottom: .5rem;
  font-family: var(--f-ui); font-size: .625rem; letter-spacing: .26em;
  text-transform: uppercase; color: var(--gris-texto);
}
.paginacion a {
  text-decoration: none;
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.25rem, 1rem + .8vw, 1.75rem); line-height: 1.25;
  transition: opacity var(--transicion);
}
.paginacion a:hover { opacity: .6; }

.centrado { text-align: center; }

/* -------------------------------------------------------------- nosotras -- */

.doble { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 900px) { .doble { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

/* Nosotras: texto a la izquierda y el retrato del estudio a la derecha, más
   angosto. Como la columna de texto es larga, el retrato queda fijo mientras
   se lee. */
.retrato-estudio { margin: 0; background: var(--papel-alto); }
@media (min-width: 900px) {
  .doble--nosotras { grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); }
  .retrato-estudio { position: sticky; top: calc(var(--cabecera) + 2rem); }
}

.socias { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 780px) {
  /* El bloque de las socias ocupa tres cuartos del ancho, centrado: a tamaño
     completo competía con la fotografía de los proyectos. */
  .socias { grid-template-columns: 1fr 1fr; max-width: 75%; margin-inline: auto; }
  /* Y dentro de cada ficha el retrato se achica otro cuarto. El texto conserva
     el ancho de la columna, que a esa medida ya quedaría muy angosto. */
  .socia__retrato { max-width: 75%; }
}
.socia__retrato { background: var(--papel-alto); aspect-ratio: 4 / 5; overflow: hidden; }
.socia__retrato img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.socia__nombre {
  font-family: var(--f-ui); font-weight: 400; font-size: .75rem;
  letter-spacing: .28em; text-transform: uppercase;
  margin: 1.5rem 0 .15rem;
}
.socia__rol {
  font-family: var(--f-display); font-style: italic; font-size: 1.0625rem;
  color: var(--gris-texto); margin: 0 0 1.1rem;
}
.socia p { font-size: .9375rem; color: var(--tinta-70); }
.socia blockquote {
  margin: 1.25rem 0 0; padding: 0;
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.125rem; line-height: 1.5; color: var(--tinta);
}

.valores { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .valores { grid-template-columns: repeat(3, 1fr); } }
.valores h3 {
  font-family: var(--f-ui); font-weight: 400; font-size: .6875rem;
  letter-spacing: .3em; text-transform: uppercase; margin: 0 0 .35rem;
}
.valores .sub {
  font-family: var(--f-display); font-style: italic; font-size: 1.0625rem;
  color: var(--gris-texto); margin: 0 0 1rem;
}
.valores p { font-size: .9375rem; color: var(--tinta-70); }
.banda .valores p { color: rgba(255,255,255,.8); }
.banda .valores .sub { color: rgba(255,255,255,.7); }

/* ------------------------------------------------------------- servicios -- */

.servicios { display: grid; gap: clamp(2rem, 4vw, 3.25rem); }
@media (min-width: 820px) { .servicios { grid-template-columns: 1fr 1fr; } }

/* Cada servicio lleva al lado un dibujo botánico a línea, para descansar del
   texto. Es decorativo: va con aria-hidden y no aporta información. */
.servicio {
  display: grid; gap: clamp(1rem, 2vw, 1.75rem);
  grid-template-columns: clamp(64px, 9.5vw, 112px) minmax(0, 1fr);
  align-items: start;
}
.servicio__hoja {
  width: 100%; height: auto;
  color: var(--verde); opacity: .7;
  margin-top: -.6rem;
}
/* El trazo original es de 1.6 sobre un lienzo de 200: a este tamaño quedaría
   por debajo del píxel. Se engrosa para que la línea se lea. */
.servicio__hoja g { stroke-width: 2.4; }

/* En pantallas angostas el dibujo al lado dejaba la columna de texto en 255 px.
   Ahí se pone arriba y el texto recupera todo el ancho. */
@media (max-width: 619px) {
  .servicio { grid-template-columns: 1fr; gap: 1rem; }
  .servicio__hoja { width: 62px; margin-top: 0; }
}
.servicio h2 {
  font-family: var(--f-ui); font-weight: 400; font-size: .8125rem;
  letter-spacing: .28em; text-transform: uppercase; margin: 0 0 .3rem;
}
.servicio .sub {
  font-family: var(--f-display); font-style: italic; font-size: 1.125rem;
  color: var(--gris-texto); margin: 0 0 1.25rem;
}
.servicio p { font-size: .9375rem; color: var(--tinta-70); }
.servicio__pie { margin-top: 1.5rem; }

.proceso { display: grid; gap: clamp(1.75rem, 3vw, 2.75rem); list-style: none; margin: 0; padding: 0; }
@media (min-width: 780px) { .proceso { grid-template-columns: repeat(3, 1fr); } }
.proceso__n {
  display: block; margin-bottom: .35rem;
  font-family: var(--f-ui); font-size: .625rem;
  letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.66);
}
.proceso h3 {
  font-family: var(--f-display); font-style: italic; font-weight: 400;
  font-size: 1.5rem; line-height: 1.25; margin: 0 0 1rem;
}
.proceso p { font-size: .9375rem; color: rgba(255,255,255,.82); }

/* -------------------------------------------------------------- contacto -- */

.contacto-correo {
  display: inline-block; text-decoration: none;
  font-family: var(--f-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.6rem, .9rem + 3.2vw, 3.4rem);
  line-height: 1.15; word-break: break-word;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: .06em;
  transition: background-size var(--transicion), opacity var(--transicion);
}
.contacto-correo:hover { background-size: 0 1px; background-position: 100% 100%; opacity: .7; }

.datos-contacto {
  display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.datos-contacto h2 {
  font-family: var(--f-ui); font-weight: 400; font-size: .625rem;
  letter-spacing: .28em; text-transform: uppercase; color: var(--gris-texto);
  margin: 0 0 .7rem;
}
.datos-contacto p { margin: 0; font-size: .9375rem; }

/* ------------------------------------------------------------------ pie -- */

/* Sin margen propio: la separación la pone el relleno inferior del último
   bloque, que es el mismo que el de arriba. Así el aire queda simétrico y,
   cuando la página cierra con una banda oscura, el pie la continúa sin corte. */
.pie { background: var(--banda); color: var(--blanco); }
.pie__cuerpo {
  display: grid; gap: clamp(1.75rem, 4vw, 2.75rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start; padding-block: clamp(2.25rem, 4.5vw, 3.25rem) 1.5rem;
}
.pie__logo img { width: 128px; height: auto; filter: invert(1) brightness(2); }
.pie h2 {
  font-family: var(--f-ui); font-weight: 400; font-size: .625rem;
  letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.62); margin: 0 0 1rem;
}
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { margin-bottom: .5rem; }
.pie a { text-decoration: none; font-size: .9375rem; transition: opacity var(--transicion); }
.pie a:hover { opacity: .68; }
.pie p { font-size: .9375rem; color: rgba(255,255,255,.82); }
.pie__legal {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem;
  padding-block: 1.35rem;
  border-top: 1px solid rgba(255,255,255,.22);
  font-family: var(--f-ui); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

/* ------------------------------------------------------------- lightbox -- */

.visor {
  position: fixed; inset: 0; z-index: 300;
  border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: var(--tinta); color: var(--papel);
}
.visor::backdrop { background: rgba(25,25,26,.97); }
.visor[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.visor__lienzo {
  display: flex; align-items: center; justify-content: center;
  min-height: 0; overflow: hidden; padding: clamp(1rem, 3vw, 2.5rem);
}
.visor__lienzo img {
  display: block; max-width: 100%;
  animation: aparecer 420ms cubic-bezier(.22,.61,.36,1);
}
@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }

.visor__barra {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
}
.visor__pie {
  font-family: var(--f-ui); font-size: .625rem;
  letter-spacing: .26em; text-transform: uppercase; color: rgba(255,255,255,.62);
}
.visor__controles { margin-left: auto; display: flex; gap: .5rem; }
.visor button {
  background: none; border: 1px solid rgba(255,255,255,.28);
  color: var(--papel); width: 46px; height: 46px;
  display: grid; place-items: center; cursor: pointer;
  transition: background var(--transicion), border-color var(--transicion);
}
.visor button:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); }
.visor button[disabled] { opacity: .3; cursor: default; }
.visor__cerrar { position: fixed; top: 1rem; right: clamp(1rem, 3vw, 2.5rem); }

/* --------------------------------------------------- aparición al entrar -- */

@media (prefers-reduced-motion: no-preference) {
  .js .revelar { opacity: 0; transform: translateY(16px); }
  .js .revelar.visible {
    opacity: 1; transform: none;
    transition: opacity 900ms cubic-bezier(.22,.61,.36,1),
                transform 900ms cubic-bezier(.22,.61,.36,1);
  }
}

/* ------------------------------------------------------------ impresión -- */

@media print {
  .cabecera, .pie__legal, .visor, .filtros, .menu-boton { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .revelar { opacity: 1 !important; transform: none !important; }
}

/* ------------------------------------------------------- WhatsApp flotante */
/* Pastilla discreta en el verde de la marca, no en el verde de WhatsApp:
   acompaña la paleta en vez de pelearse con ella. Cerrada muestra sólo el
   icono; al pasar el cursor o al enfocar con teclado revela la palabra. */

.wsp {
  position: fixed; z-index: 150;
  right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem);
  display: inline-flex; align-items: center; gap: 0;
  /* Cerrado es un círculo exacto: el icono mide 21px y el relleno lateral
     completa los 52px de alto. El aire del texto lo pone su propio margen,
     para que el gap del flex no ensanche la pastilla cuando está cerrada. */
  height: 3.25rem; padding: 0 .96875rem;
  border-radius: 999px;
  background: var(--verde); color: var(--claro);
  box-shadow: 0 2px 10px rgba(25,25,26,.16), 0 8px 28px rgba(25,25,26,.14);
  text-decoration: none;
  transition: background var(--transicion), transform var(--transicion),
              box-shadow var(--transicion);
}
.wsp:hover, .wsp:focus-visible {
  background: var(--tinta);
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(25,25,26,.2), 0 12px 34px rgba(25,25,26,.18);
}
.wsp svg { flex: none; }

.wsp__texto {
  font-family: var(--f-ui); font-weight: 400;
  font-size: .6875rem; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  max-width: 0; opacity: 0; overflow: hidden; margin-left: 0;
  transition: max-width var(--transicion), opacity var(--transicion),
              margin-left var(--transicion);
}
.wsp:hover .wsp__texto, .wsp:focus-visible .wsp__texto {
  max-width: 8rem; opacity: 1; margin-left: .6rem;
}

/* En la portada, la flecha «bajar» ocupa esta misma esquina: el botón espera
   fuera de cuadro y entra recién cuando la fotografía deja de mandar. */
.wsp--espera { opacity: 0; pointer-events: none; transform: translateY(.75rem); }

/* El visor de fotos manda: nada flotando sobre una galería a pantalla completa. */
body:has(dialog.visor[open]) .wsp { opacity: 0; pointer-events: none; }

/* En móvil no hay hover: queda el círculo, sin la palabra. */
@media (max-width: 640px) {
  .wsp { height: 3rem; padding: 0 .84375rem; }   /* (48 - 21) / 2 */
  .wsp__texto { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wsp, .wsp__texto { transition: none; }
  .wsp:hover, .wsp:focus-visible { transform: none; }
}

@media print { .wsp { display: none !important; } }

/* Generado por build/logo.py — no editar a mano */
.cabecera__logo svg [data-g] { transform-box: fill-box; }
.cabecera__logo svg [data-g='dot'] { transform-origin: center; }
/* Con JavaScript el logotipo espera al velo; sin él se ve de inmediato.
   Se ocultan solo los grupos que se animan: `all`, `wm` y `sub` son
   contenedores y esconderlos taparía todo lo de adentro. */
html.js .cabecera__logo svg [data-g='w0'] { opacity:0;transform:translateY(7px); }
html.js .cabecera__logo svg [data-g='w1'] { opacity:0;transform:translateY(7px); }
html.js .cabecera__logo svg [data-g='w2'] { opacity:0;transform:translateY(7px); }
html.js .cabecera__logo svg [data-g='w3'] { opacity:0;transform:translateY(7px); }
html.js .cabecera__logo svg [data-g='w4'] { opacity:0;transform:translateY(7px); }
html.js .cabecera__logo svg [data-g='dot'] { opacity:0;transform:scale(.2); }
html.js .cabecera__logo svg [data-g='s0'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s1'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s2'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s3'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s4'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s5'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s6'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s7'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s8'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s9'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s10'] { opacity:0; }
html.js .cabecera__logo svg [data-g='s11'] { opacity:0; }

html.entrado .cabecera__logo svg [data-g='w0'] { animation: zi-w0 0.62s cubic-bezier(.22,.61,.36,1) 0.10s forwards; }
html.entrado .cabecera__logo svg [data-g='w1'] { animation: zi-w1 0.62s cubic-bezier(.22,.61,.36,1) 0.19s forwards; }
html.entrado .cabecera__logo svg [data-g='w2'] { animation: zi-w2 0.62s cubic-bezier(.22,.61,.36,1) 0.28s forwards; }
html.entrado .cabecera__logo svg [data-g='w3'] { animation: zi-w3 0.62s cubic-bezier(.22,.61,.36,1) 0.37s forwards; }
html.entrado .cabecera__logo svg [data-g='w4'] { animation: zi-w4 0.62s cubic-bezier(.22,.61,.36,1) 0.46s forwards; }
html.entrado .cabecera__logo svg [data-g='dot'] { animation: zi-dot 0.45s cubic-bezier(.34,1.3,.64,1) 0.62s forwards; }
html.entrado .cabecera__logo svg [data-g='s0'] { animation: zi-s0 0.45s ease-out 0.72s forwards; }
html.entrado .cabecera__logo svg [data-g='s1'] { animation: zi-s1 0.45s ease-out 0.75s forwards; }
html.entrado .cabecera__logo svg [data-g='s2'] { animation: zi-s2 0.45s ease-out 0.78s forwards; }
html.entrado .cabecera__logo svg [data-g='s3'] { animation: zi-s3 0.45s ease-out 0.81s forwards; }
html.entrado .cabecera__logo svg [data-g='s4'] { animation: zi-s4 0.45s ease-out 0.84s forwards; }
html.entrado .cabecera__logo svg [data-g='s5'] { animation: zi-s5 0.45s ease-out 0.87s forwards; }
html.entrado .cabecera__logo svg [data-g='s6'] { animation: zi-s6 0.45s ease-out 0.90s forwards; }
html.entrado .cabecera__logo svg [data-g='s7'] { animation: zi-s7 0.45s ease-out 0.93s forwards; }
html.entrado .cabecera__logo svg [data-g='s8'] { animation: zi-s8 0.45s ease-out 0.96s forwards; }
html.entrado .cabecera__logo svg [data-g='s9'] { animation: zi-s9 0.45s ease-out 0.99s forwards; }
html.entrado .cabecera__logo svg [data-g='s10'] { animation: zi-s10 0.45s ease-out 1.02s forwards; }
html.entrado .cabecera__logo svg [data-g='s11'] { animation: zi-s11 0.45s ease-out 1.05s forwards; }

@keyframes zi-w0 { to { opacity:1;transform:none } }
@keyframes zi-w1 { to { opacity:1;transform:none } }
@keyframes zi-w2 { to { opacity:1;transform:none } }
@keyframes zi-w3 { to { opacity:1;transform:none } }
@keyframes zi-w4 { to { opacity:1;transform:none } }
@keyframes zi-dot { to { opacity:1;transform:scale(1) } }
@keyframes zi-s0 { to { opacity:1 } }
@keyframes zi-s1 { to { opacity:1 } }
@keyframes zi-s2 { to { opacity:1 } }
@keyframes zi-s3 { to { opacity:1 } }
@keyframes zi-s4 { to { opacity:1 } }
@keyframes zi-s5 { to { opacity:1 } }
@keyframes zi-s6 { to { opacity:1 } }
@keyframes zi-s7 { to { opacity:1 } }
@keyframes zi-s8 { to { opacity:1 } }
@keyframes zi-s9 { to { opacity:1 } }
@keyframes zi-s10 { to { opacity:1 } }
@keyframes zi-s11 { to { opacity:1 } }
@media (prefers-reduced-motion: reduce) {
  html.js .cabecera__logo svg [data-g] { opacity: 1; transform: none; animation: none; }
}