/* Tokens. Ver DESIGN.md. */
:root{
  --tinta:       oklch(0.18 0.004 90);
  --papel:       oklch(1 0 0);           /* el fondo de la pagina es blanco */
  /* El gris de superficie salió del sitio el 9 de septiembre: al cliente no
     le gustó. Donde había un plano gris ahora hay blanco y un filete, y donde
     hacía falta una superficie tibia se usa --vino-tenue. El token se
     queda definido porque sigue sirviendo de referencia para mezclas, no como
     fondo de nada. */
  --obra:        oklch(0.962 0.002 90);
  --cemento:     oklch(0.50 0.004 90);   /* texto secundario, AA sobre papel */
  --linea-suave: oklch(0.80 0.003 90);   /* filetes, no lleva texto encima */
  --grafito:     oklch(0.32 0.004 90);

  /* Rojo vino. Sustituye a la vino el 11 de septiembre; antes de ella
     estaban la arena y el #CBBD93. La base cumple AA en las dos direcciones en
     que aparece un realce, escrita sobre blanco y como fondo con blanco
     encima: 9.91:1 en los dos casos, muy por encima del 4.5 que pide la norma.
     Al ser bastante mas oscura que la vino, ya no hay ninguna
     combinacion del sitio que se quede corta. Medido, no elegido a ojo. */
  --vino:       oklch(0.398 0.122 13.6);  /* #7B2233 */
  --vino-honda: oklch(0.318 0.100 13);    /* #5A1523, el hover */
  --vino-tenue: oklch(0.962 0.013 14);    /* #FBEFF0, fondos de aviso */
  --vino-filo:  oklch(0.72 0.085 14);     /* #D48F94, filetes de realce */
  /* Relleno de los estados marcados en el mapa. Estaba sin definir: el fill se
     quedaba en el valor heredado, que es negro, y por eso los estados salian
     casi del color de su propio contorno. */
  --destaque:        var(--vino);

  --filete: 1px;
  /* La forma y la altura de un mando. Antes cada uno traía la suya: el disco
     de volver al mapa era una píldora de 48, la flecha de bajar un círculo de
     50, el botón de la galería un rectángulo recto de 62 y las pestañas del
     mapa otras píldoras. Puestos uno al lado de otro, en la cabecera de una
     ficha se ven los tres a la vez, y parecían de tres sitios distintos. El
     cliente lo pidió unificado el 12 de octubre.

     La altura vale para todos los botones y no solo para los que flotan: dos
     botones del mismo tipo con dos alturas distintas es la misma falta vista de
     cerca. Se pone como mínimo, no como alto fijo, para que el que lleve dos
     renglones pueda crecer.

     Cuadrados de esquina blanda, no píldoras: la página entera va de ángulos
     rectos —los marcos de las fotografías, las tablas, los campos del
     formulario— y una píldora ahí dentro canta. Seis píxeles es lo justo para
     que no corte, sin llegar a ser una forma. */
  --radio: 6px;
  --mando: 56px;
  /* Dos familias con papeles distintos.

     Texto corriente: IBM Plex Sans. Es plana, de trazo casi sin modulación, y
     sobria sin ser anónima: la dibujó IBM para su propia documentación técnica
     y tiene carácter propio. No es ninguna de las que delatan una plantilla
     genérica —Inter, Roboto, Open Sans, Lato—, que están descartadas en la
     tabla de anti-patrones.

     Títulos grandes: Cormorant Garamond, en su peso ligero. Es lo más cercano
     que hay, ya dibujado y completo, a la letra del logo: romano de trazo
     capilar, remates finos y mucho contraste. La Euro Roman de verdad se probó
     y se descartó, ver DESIGN.md. */
  --texto: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;

  --marca-tres: none;          /* none | block. Enciende + TRES en todo el sitio. */
  --marca-alto: 20px;
  --marca-tres-escala: 0.5;
  --marca-hueco: 0.30;

  --col: clamp(1.25rem, 4vw, 3.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  margin:0; background:var(--fondo); color:var(--tinta);
  /* Las entradas laterales empujan las imágenes fuera del borde antes de revelarse.
     Se recorta con clip y no con hidden: hidden rompería el rótulo pegajoso de la
     dirección Plano, que usa position:sticky. */
  overflow-x:clip;
  font-family:var(--texto); font-size:16.5px; line-height:1.62;
  font-synthesis-weight:none; -webkit-font-smoothing:antialiased;
}
img,video{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:500;line-height:1.18;letter-spacing:-.006em}
/* Titular de sector que lleva las dos frases y no baja ninguna a apunte:
   va más chico para que no se amontone. Las dos clases juntas y el elemento
   delante, porque con solo h1.titular--largo empataba en especificidad con
   h1.titular y ganaba el que va después, que siempre es el otro. */
/* El titular largo solo baja de cuerpo; el ancho lo pone la columna, como los
   demás desde el 7 de octubre. */
h1.titular.titular--largo{font-size:clamp(1.65rem,3.1vw,2.5rem)}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--vino);outline-offset:3px}

.envoltura{width:min(1360px, calc(100% - var(--col) * 2));margin-inline:auto}
.angosto{width:min(74ch, calc(100% - var(--col) * 2));margin-inline:auto}
.num{font-variant-numeric:tabular-nums lining-nums}

/* Marca */

.marca{display:inline-flex;flex-direction:column;align-items:center;width:max-content;
  gap:calc(var(--marca-alto) * var(--marca-hueco));text-decoration:none;line-height:0}
.marca__wordmark{height:var(--marca-alto);width:auto}
/* Se dimensiona por altura, a la mitad de TANTUM. Con width:100% quedaba
   estirada al ancho del logo y más alta que él. */
.marca__tres{display:var(--marca-tres);
  height:calc(var(--marca-alto) * var(--marca-tres-escala));width:auto}
.marca--con-tres .marca__tres{display:block}
.marca--sin-tres .marca__tres{display:none}
.marca--izq{align-items:flex-start}
.marca--pie{--marca-alto:16px}
.marca--claro img{filter:invert(1)}


/* El fondo de la sección de contacto. La fotografía va dentro del bloque y
   detrás de todo, a sangre, y no como background de CSS: así se sirve con
   srcset y el navegador elige el tamaño que toca.

   Apagada y con dos máscaras cruzadas, que es la receta de la página que puso
   el cliente de referencia. Allí el desvanecido va hacia la izquierda porque el
   texto está a la izquierda; aquí va al revés, porque el formulario está a la
   derecha.

   Estas reglas ya se perdieron una vez en una poda de hoja, y sin ellas la
   fotografía sale como una banda encima del formulario en vez de detrás. Están
   en la lista de revisar.py para que no vuelva a pasar en silencio. */
.bloque--contacto{position:relative;isolation:isolate}
.bloque--contacto>.envoltura{position:relative;z-index:1}
/* Un recuadro de papel entre la fotografía y el formulario, que es donde la
   fotografía tiene más dibujo y los rótulos de los campos se peleaban con ella.
   Al 70% de papel: deja ver la fotografía detrás y sostiene el texto. */
.contacto .form{background:color-mix(in oklab,var(--papel) 70%,transparent);
  padding:clamp(1.4rem,3vw,2.2rem);margin:calc(-1 * clamp(1.4rem,3vw,2.2rem));
  margin-top:0}
@media (max-width:900px){
  .contacto .form{margin-left:0;margin-right:0}
}
.contacto__fondo{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.contacto__fondo .foto{position:absolute;inset:0;aspect-ratio:auto;background:0}
/* Al 26% y no más. Medido componiendo la fotografía sobre el papel y sacando
   el contraste contra el texto: a 34% el correo en vino se quedaba en 4.28 a 1,
   por debajo del 4.5 que pide la norma para texto de cuerpo. A 26% sube a 5.38
   y el titular a 7.79. */
.contacto__fondo img{width:100%;height:100%;object-fit:cover;opacity:.26;
  -webkit-mask-image:
    linear-gradient(90deg,#000 0,#000 30%,transparent 88%),
    linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,#000 0,#000 30%,transparent 88%),
    linear-gradient(180deg,transparent 0,#000 10%,#000 90%,transparent 100%);
  mask-composite:intersect}
/* En pantalla estrecha el formulario cae debajo del texto y la fotografía pasa
   por detrás de los dos: ahí tiene que pesar menos. */
@media (max-width:900px){
  .contacto__fondo img{opacity:.16}
}

/* Huecos de imagen. Cada uno lleva rotulado el archivo que espera.
   El hueco es un plano tibio y no gris: fuera del sitio el gris, un marco sin
   foto tiene que seguir viéndose contra el blanco, y el único plano claro que
   queda en la paleta es el del vino rebajado. */
:root{--hueco:color-mix(in oklab,var(--vino) 6%,var(--papel))}
.foto{position:relative;overflow:hidden;background:var(--hueco);
  background-image:repeating-linear-gradient(135deg,transparent 0 11px,
    color-mix(in oklab, var(--cemento) 22%, transparent) 11px 12px);
  background-size:auto}
.foto::after{content:attr(data-archivo);position:absolute;inset:auto auto 0 0;
  font-size:.63rem;letter-spacing:.01em;padding:.28rem .5rem;color:var(--cemento);
  background:var(--papel);border-top:var(--filete) solid var(--cemento);
  border-right:var(--filete) solid var(--cemento);font-variant-numeric:tabular-nums}
.foto--muda{background-image:none;background:var(--hueco);
  box-shadow:inset 0 0 0 var(--filete) var(--linea-suave)}
.foto--muda::after{content:none}
.foto--puesta{background-image:none}
.foto--puesta::after{content:none}
.foto img{width:100%;height:100%;object-fit:cover}


/* Las zonas del plan maestro. La capa se coloca encima de la imagen del visor
   con sus medidas exactas, y el dibujo va de 0 a 100 estirado a ese hueco: así
   las fracciones que vienen de imagenes.py se usan tal cual.
   El contorno parpadea para que se vea que hay algo que señalar; a quien tenga
   pedido menos movimiento se le deja fijo, que la línea ya se ve. */
.visor__zonas{position:fixed;z-index:210;pointer-events:none;
  transition:opacity .3s ease}
.visor__zonas[hidden]{display:none}
/* Apartada mientras se mira uno de los planes de dentro. Con opacidad y no con
   display, que cortar el dibujo reinicia el latido de las tres y vuelven
   desfasadas. */
.visor__zonas--fuera{opacity:0}
.visor__zonas{overflow:visible}
/* La marca de cada zona: su número dentro de un círculo, puesto en el centro de
   la forma. Del mismo tamaño las tres y en píxeles, no en proporción del plano:
   así se leen igual con el plano grande o chico.

   Un color por zona, que si no las tres se confunden. Son los mismos tonos de
   antes rebajados —más claros y menos cargados—, que como silueta tenían que
   pelear contra el plano y como disco no. */
.zona{position:absolute;transform:translate(-50%,-50%);
  width:4.6rem;height:4.6rem;border-radius:50%;border:0;padding:0;
  display:grid;place-items:center;
  font-family:var(--texto);font-size:1.9rem;font-weight:500;font-variant-numeric:tabular-nums;
  line-height:1;
  color:var(--papel);background:color-mix(in oklab,var(--zona) 58%,transparent);
  pointer-events:auto;cursor:zoom-in;animation:late 1.6s ease-in-out infinite;
  --zona:var(--vino)}
.zona[data-de="hotelero-02"]{--zona:oklch(0.62 0.105 62)}    /* la Marina, ámbar */
.zona[data-de="hotelero-03"]{--zona:oklch(0.58 0.095 250)}   /* Brunesia, azul */
.zona[data-de="hotelero-04"]{--zona:oklch(0.55 0.105 14)}    /* Punta del Mar, vino claro */
.zona:focus{outline:0}
/* Al señalarla, el disco se cierra un poco más en vez de ganar un aro: el aro
   ensuciaba el plano justo donde hay que mirarlo. */
.zona:hover,.zona.puesta,.zona:focus-visible{
  background:color-mix(in oklab,var(--zona) 82%,transparent)}
@keyframes late{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion: reduce){.zona{animation:none}}

/* El plan de dentro, encima del plano ya acercado. Ocupa casi toda la pantalla:
   son láminas con leyenda y números y a tamaño pequeño no se leen. */
.visor__dentro{position:fixed;inset:0;z-index:220;display:grid;place-items:center;
  overflow:hidden;background:color-mix(in oklab,var(--papel) 72%,transparent)}
.visor__dentro[hidden]{display:none}
.visor__dentro img{max-width:98vw;max-height:calc(100svh - 3.4rem);
  box-shadow:0 18px 60px color-mix(in oklab,var(--tinta) 28%,transparent);
  background:var(--papel);cursor:zoom-in;transform-origin:0 0;will-change:transform;
  touch-action:none;-webkit-user-select:none;user-select:none}
.visor__dentro.cerca img{cursor:grab}
.visor__dentro.tope img{cursor:zoom-out}
/* La lámina del pase, cuando admite lupa. */
.visor--lupa .visor__img{cursor:zoom-in;transform-origin:0 0;touch-action:none;
  -webkit-user-select:none;user-select:none}
.visor--lupa.cerca .visor__img{cursor:grab}
.visor--lupa.arrastra .visor__img{cursor:grabbing}
.visor--lupa.tope .visor__img{cursor:zoom-out}
/* Sin transición mientras se acerca a mano: la del zoom a una zona son 0.45 s y
   aquí harían que la lámina persiguiera al cursor. */
.visor--lupa .visor__img{transition:none}
.visor__dentro.arrastra img{cursor:grabbing}
.visor__dentro-nombre{position:fixed;left:50%;bottom:.8rem;transform:translateX(-50%);
  font-size:.9rem;letter-spacing:.02em;background:var(--papel);padding:.3rem .7rem;
  box-shadow:0 2px 14px color-mix(in oklab,var(--tinta) 14%,transparent)}
.visor__dentro-pista{position:fixed;left:50%;bottom:2.9rem;transform:translateX(-50%);
  font-size:.74rem;color:var(--cemento);background:var(--papel);padding:.2rem .6rem}
.visor__dentro-cerrar{position:fixed;top:1rem;right:1rem;z-index:2}
/* El plano se acerca a la zona señalada. La transición va en la imagen y no en
   la capa: la capa se queda quieta encima, que es lo que mantiene el contorno
   donde el ojo lo dejó. */
.visor__img{transition:transform .45s ease}
@media (prefers-reduced-motion: reduce){.visor__img{transition:none}}

/* La lámina de la página se abre al pasar por encima, así que tiene que
   parecer que se puede pulsar aunque no se pulse. */
.galeria--master .foto--puesta{cursor:zoom-in}

/* La obra en colaboración, al pie de una ficha del equipo. Tres por renglón y
   sin separar por sector: es un recuento de en qué ha trabajado alguien, no un
   índice del sitio. De cada una, la fotografía, una línea de su descripción y,
   solo cuando esa línea no cabe entera, el "Ver más" debajo. */
.colabs{margin-top:2rem;padding-top:1.2rem;border-top:var(--filete) solid var(--linea-suave)}
.colabs__titulo{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cemento);margin:0 0 .9rem}
/* minmax(0,1fr) y no 1fr: la línea va en una sola línea y sin el mínimo en cero
   su ancho mínimo manda sobre el reparto, que salía de 245, 665 y 271 px en vez
   de tres columnas iguales. */
.colabs__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .9rem}
.colabs__ficha{display:block;min-width:0;text-decoration:none;color:inherit}
.colabs__ficha .foto{margin-bottom:.45rem}
.colabs__nombre{display:block;font-size:.82rem;line-height:1.3;color:var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colabs__linea{display:block;font-size:.76rem;line-height:1.35;color:var(--cemento);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.colabs__mas{display:block;font-size:.76rem;line-height:1.35;color:var(--vino)}
.colabs__mas[hidden]{display:none}
.colabs__ficha:hover .colabs__nombre{color:var(--vino)}
.colabs__ficha:focus-visible{outline:var(--filete) solid var(--vino);outline-offset:3px}
@media (max-width:560px){.colabs__lista{grid-template-columns:repeat(2,1fr)}}

/* La obra dirigida, al pie de la ficha de quien dirige la obra. Es la misma
   rejilla que las colaboraciones de arriba, y por eso se apoya en ella: tres
   por renglón, la fotografía pequeña y debajo el nombre y una línea con el
   sitio y el año. Cinco obras caben en dos renglones.

   Tuvo otra forma durante cuatro días: una cinta de portadas que se pasaba con
   flechas y abría un cuadro encima con la descripción y todas las fotografías
   de cada obra. El cliente la cambió el 6 de octubre por esta, que es la de
   Juan, y así las dos fichas del equipo terminan igual.

   La fotografía va pequeña a propósito. Estas imágenes son las de peor calidad
   de todo el sitio, y a un tercio del ancho de la ficha eso no se nota. */
.obras{margin-top:2rem;padding-top:1.2rem;border-top:var(--filete) solid var(--linea-suave)}
.obras__titulo{font-size:.72rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--cemento);margin:0 0 .9rem}
/* minmax(0,1fr) y no 1fr, por lo mismo que en las colaboraciones: sin el mínimo
   en cero, el ancho del contenido manda sobre el reparto y las columnas salen
   de tres anchos distintos. */
.obras__lista{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem .9rem}
.obras__ficha{display:block;min-width:0}
.obras__ficha .foto{margin-bottom:.45rem}
.obras__nombre{display:block;font-size:.82rem;line-height:1.3;color:var(--tinta)}
.obras__linea{display:block;font-size:.76rem;line-height:1.35;color:var(--cemento)}
@media (max-width:560px){.obras__lista{grid-template-columns:repeat(2,1fr)}}

/* ---------------------------------------------------------------------------
   DE AQUÍ AL BLOQUE DE RENTA: tramo recuperado.

   El 6 de octubre, al cambiar la obra dirigida de Gerardo de cinta a rejilla,
   un corte mal calculado se llevó por delante este tramo entero de la hoja
   —unas trescientas reglas: las galerías de plan maestro, las proporciones de
   los huecos de imagen, el visor y sus zonas, el pase de cabecera, los botones,
   el formulario, el equipo, el mapa y el ciclo—. No había copia en ninguna
   parte: el sitio no está en control de versiones y las dos hojas construidas
   se habían regenerado ya con el daño dentro.

   Se recuperó de la única copia que quedaba viva: la hoja que el navegador de
   pruebas todavía tenía cargada en memoria de antes del cambio. Por eso llega
   tal como la escribe el navegador —`sel { prop: valor; }` en vez de
   `sel{prop:valor}`— y, sobre todo, **sin los comentarios originales**, que
   explicaban el porqué de buena parte de estas reglas y no se pueden rescatar
   de una hoja ya interpretada. Se ha devuelto el formato de la casa; los
   comentarios se van reponiendo donde se sabe lo que decían.

   Una declaración se perdió de verdad en el viaje: `-ms-overflow-style`, que el
   navegador no reconoce y no serializa. Solo afectaba a Edge antiguo e IE, que
   no son navegadores a los que este sitio llegue —usa oklch, color-mix y svh—,
   así que no se repone.

   La lección, apuntada también en DESIGN.md: los cortes por índice sobre el
   fuente tienen que comprobar lo que se llevan, no solo dónde empiezan.
   --------------------------------------------------------------------------- */


/* ---------------------------------------------------------------------------
   DE AQUÍ AL BLOQUE DE RENTA: tramo recuperado.

   El 6 de octubre, al cambiar la obra dirigida de Gerardo de cinta a rejilla,
   un corte mal calculado se llevó por delante este tramo entero de la hoja
   —unas trescientas reglas: las galerías de plan maestro, las proporciones de
   los huecos de imagen, el visor y sus zonas, el pase de cabecera, los botones,
   el formulario, el equipo, el mapa y el ciclo—. No había copia en ninguna
   parte: el sitio no está en control de versiones y las dos hojas construidas
   se habían regenerado ya con el daño dentro.

   Se recuperó de la única copia que quedaba viva: la hoja que el navegador de
   pruebas todavía tenía cargada en memoria de antes del cambio. Por eso llega
   tal como la escribe el navegador —`sel { prop: valor; }` en vez de
   `sel{prop:valor}`— y, sobre todo, **sin los comentarios originales**, que
   explicaban el porqué de buena parte de estas reglas y no se pueden rescatar
   de una hoja ya interpretada. Se ha devuelto el formato de la casa; los
   comentarios se van reponiendo donde se sabe lo que decían.

   Una declaración se perdió de verdad en el viaje: `-ms-overflow-style`, que el
   navegador no reconoce y no serializa. Solo afectaba a Edge antiguo e IE, que
   no son navegadores a los que este sitio llegue —usa oklch, color-mix y svh—,
   así que no se repone.

   La lección, apuntada también en DESIGN.md: los cortes por índice sobre el
   fuente tienen que comprobar lo que se llevan, no solo dónde empiezan.
   --------------------------------------------------------------------------- */
.galeria.galeria--master{grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1.2rem;align-items:start}
.galeria--master .foto{aspect-ratio:4 / 3;margin-bottom:0.8rem;border:var(--filete) solid var(--linea-suave);background:var(--papel)}
.galeria--master .foto img{object-fit:contain}
.galeria--master .galeria__pieza{margin:0px}

/* Guardada no es lo mismo que fuera: la lámina sigue en la página, y por eso
   el visor la encuentra y la abre con las demás. */
.galeria--master .galeria__pieza--guardada{display:none}
.master__pie{display:block}
.master__nombre{display:block;font-size:1.2rem;font-weight:500;margin-top:0.15rem;line-height:1.25}
.master__nota, .master__credito{display:block;font-size:0.84rem;line-height:1.35;color:var(--cemento);margin-top:0.15rem}
.r32{aspect-ratio:3 / 2}
.r43{aspect-ratio:4 / 3}
.r11{aspect-ratio:1 / 1}
.r169{aspect-ratio:16 / 9}
.r219{aspect-ratio:21 / 9}
.r34{aspect-ratio:3 / 4}
.r45{aspect-ratio:4 / 5}
.js .revelar{opacity:0}
.js .rev--sube{transform:translate3d(0px,58px,0px)}
.js .rev--izq{transform:translate3d(-58px,0px,0px)}
.js .rev--der{transform:translate3d(58px,0px,0px)}
.js .revelar.visto{opacity:1;transform:none;transition:opacity 0.9s,transform 1s cubic-bezier(0.16,0.7,0.2,1)}
.hero-media{position:absolute;inset:0px;overflow:hidden}
.hero-media img, .hero-media video{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero-media video{position:absolute;inset:0px}
.heroc__pieza{position:absolute;inset:0px;margin:0px;opacity:0;transition:opacity 1.1s}
.heroc__pieza.ahora{opacity:1}
.js .heroc__pieza:not(.ahora){pointer-events:none}
/* Cada portada lleva a su proyecto. El enlace cubre la fotografía entera; el
   titular va por encima en su propia capa, así que pulsar sobre las letras
   sigue siendo pulsar sobre las letras.

   Y la regla de arriba se repite aquí sin depender de que haya guion: las
   portadas que no se ven están apiladas con opacidad cero y, sin esto, un
   visitante sin JavaScript pulsaría la última del montón en lugar de la que
   está mirando. */
.heroc__ir{position:absolute;inset:0;display:block}
.heroc__pieza:not(.ahora) .heroc__ir{pointer-events:none}

/* El pie asoma cuando la fotografía ya está: sube un dedo y se enciende, medio
   segundo después del cruce, que es cuando el ojo ha terminado de cambiar de
   imagen y puede leer. */
.heroc__pie{position:absolute;left:50%;right:auto;bottom:clamp(2.2rem,6vh,4rem);z-index:2;text-align:center;color:var(--papel);width:max-content;max-width:min(90vw,44ch);-webkit-text-stroke:0.5px color-mix(rgb(0,0,0) 62%,transparent);paint-order:stroke;text-shadow:color-mix(rgb(0,0,0) 78%,transparent) 0px 2px 3px,color-mix(rgb(0,0,0) 60%,transparent) 0px 4px 10px,color-mix(rgb(0,0,0) 45%,transparent) 0px 8px 26px;opacity:0;transform:translate(-50%,1.1rem);transition:opacity 0.7s 0.45s,transform 0.7s cubic-bezier(0.2,0.8,0.3,1) 0.45s}
.heroc__pieza.ahora .heroc__pie{opacity:1;transform:translate(-50%,0px)}
@media (prefers-reduced-motion: reduce){
  .heroc__pie{transition:none;opacity:1;transform:translate(-50%,0px)}
}
.heroc__pie b{display:block;font-size:clamp(1rem,1.7vw,1.3rem);font-weight:500;line-height:1.2}
.heroc__pie span{display:block;font-size:clamp(0.76rem,1.1vw,0.88rem);opacity:0.85;margin-top:0.15rem}
@media (max-width: 760px){
  .heroc__pie{bottom:1.4rem}
}
@media (prefers-reduced-motion: reduce){
  .hero-media video{display:none}
  .js .revelar{opacity:1;transform:none}
  *{animation-duration:0.001ms !important;transition-duration:0.001ms !important}
}

/* Botones y enlaces de acción. Van en terracota desde el principio y no solo
   al pasar el cursor: un botón que solo se distingue al tocarlo no se ve, y en
   una pantalla táctil no hay cursor que lo revele.

   El contorno se dibuja con currentColor, así que basta darle el color al
   texto. El botón del hero lleva el suyo escrito en el propio elemento, en
   blanco, porque ahí el fondo es un video oscuro y la terracota no llega a
   contraste; ese estilo gana y el contorno lo sigue. */
.boton{display:inline-flex;align-items:center;justify-content:center;min-height:var(--mando);padding:0.85rem 1.6rem;border-radius:var(--radio);border:var(--filete) solid currentColor;color:var(--vino);background:var(--vino-tenue);text-decoration:none;font-size:0.82rem;letter-spacing:0.01em;font-weight:500;transition:background 0.18s,color 0.18s,border-color 0.18s}
.boton--claro{color:var(--papel);background:transparent}

/* El contorno se queda del color del texto que lo rodea: asi el boton del
   hero sigue leyendose en blanco sobre el video. La terracota entra al pasar
   por encima, y en el boton lleno, que es el que manda en cada pagina. */
.boton:hover{background:var(--vino);color:var(--papel);border-color:var(--vino)}
.boton--lleno{background:var(--vino);color:var(--papel);border-color:var(--vino)}
.boton--lleno:hover{background:var(--vino-honda);border-color:var(--vino-honda)}

/* El formulario sobre un cuadro claro, como en Gastélum: la fotografía le pasa
   por detrás en su parte de arriba y sin esto las etiquetas se leían mal. */
.form{display:grid;gap:1.4rem}
.form__par{display:grid;gap:1.4rem;grid-template-columns:1fr 1fr}
.campo{display:flex;flex-direction:column;gap:0.42rem}
.campo label{font-size:0.8rem;font-weight:500;color:var(--cemento)}
.campo label .req{color:var(--cemento)}
.campo input, .campo textarea{font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-optical-sizing:inherit;font-size-adjust:inherit;font-kerning:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-language-override:inherit;font-size:0.95rem;color:var(--tinta);background:transparent;border-top:0px;border-right:0px;border-left:0px;border-image:none;border-bottom:var(--filete) solid var(--cemento);padding:0.55rem 0px;border-radius:0px;transition:border-color 0.18s}
.campo input:focus, .campo textarea:focus{outline:0px;border-color:var(--vino)}
.campo textarea{resize:vertical;min-height:8.5rem}
.campo--casilla{display:flex;align-items:flex-start;gap:0.65rem;max-width:56ch}
.campo--casilla > input[type="checkbox"]{appearance:auto;width:17px;height:17px;margin:0.16rem 0px 0px;padding:0px;border:0px;border-radius:0px;flex:0 0 17px;background:transparent;accent-color:var(--vino);cursor:pointer}
.campo--casilla > label{font-size:0.86rem;color:var(--cemento);font-weight:400;line-height:1.5;cursor:pointer;margin:0px}
.campo--casilla > input:focus-visible{outline:2px solid var(--vino);outline-offset:2px}
.form__aviso{font-size:0.82rem;color:var(--cemento)}
.form__estado{font-size:0.86rem;padding:0.7rem 0px;border-top:var(--filete) solid var(--cemento)}
.form__estado:empty{display:none}
.form__estado.ok{color:var(--tinta);font-weight:500}
.form__estado.error{color:oklch(0.45 0.14 28)}
.form.enviando{opacity:0.6;pointer-events:none}
.form__aviso a{color:var(--vino)}
.cuerpo a, .entrada a, .rotulos a, .pildora__c a{color:var(--vino);text-decoration:underline;text-underline-offset:3px}

/* El pie se va al negro de arriba abajo, suave y sin corte visible: el blanco
   de la pagina se mete un tercio dentro del degradado para que no haya una
   linea donde empieza. Lo que va escrito encima cambia de color con el fondo,
   asi que el texto de arriba es tinta y el de abajo es papel; el punto medio
   esta calculado para que ningun renglon caiga donde el contraste flaquea. */
.pie{position:relative;background:var(--tinta);color:var(--papel);padding:0px 0px 2.4rem;margin-top:0px}
.pie__alto{padding-top:2.6rem}
.pie__alto{display:flex;flex-wrap:wrap;gap:2.5rem;justify-content:space-between;align-items:flex-start}
.pie__datos{display:grid;gap:0.35rem;font-size:0.92rem}
.pie__datos a{text-decoration:none;color:var(--vino)}
.pie__datos a:hover{text-decoration:underline;text-underline-offset:3px}
.pie__social{display:flex;gap:0.6rem;margin-top:1rem}

/* El aire entre bloques bajó el 11 de septiembre: de 7rem a 4.2rem de tope.
   Los huecos de antes dejaban pantallas casi vacías entre una sección y la
   siguiente, que es justo lo que el cliente no quería ver. */
:root{--linkedin:#0A66C2}
.pie__social a{width:38px;height:38px;display:grid;place-items:center;color:var(--linkedin);border:var(--filete) solid color-mix(in oklab,var(--linkedin) 45%,transparent);transition:background 0.18s,color 0.18s,border-color 0.18s}
.pie__social a:hover{background:var(--linkedin);color:var(--papel);border-color:var(--linkedin)}
.pie__social svg{width:15px;height:15px;fill:currentcolor}
.pie__bajo{display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;margin-top:2.6rem;padding-top:1.2rem;border-top:var(--filete) solid var(--linea);font-size:0.78rem;color:var(--cemento)}
.pie__bajo a{text-decoration:none;color:var(--vino)}
.pie__bajo a:hover{text-decoration:underline;text-underline-offset:3px}
.pie .marca img{filter:invert(1)}
.pie .pie__datos, .pie .pie__datos a, .pie .pie__bajo, .pie .pie__bajo a{color:var(--papel)}
.pie .pie__datos a, .pie .pie__bajo a{text-decoration:underline;text-underline-offset:3px}
.pie__bajo{border-top-color:color-mix(in oklab,var(--papel) 22%,transparent)}

/* El interruptor de la vista previa de estados del mapa, escondido en la
   esquina de abajo a la derecha. Es para que el cliente pruebe las dos formas
   sin tocar el código, así que se ve lo justo para encontrarlo sabiendo que
   está: al 10% de opacidad, y entero al pasar por encima o al enfocarlo con el
   tabulador. Enfocable a propósito: esconderlo a la vista es lo que se pidió,
   esconderlo también del teclado sería otra cosa. */
.apagon{position:absolute;right:0.55rem;bottom:0.45rem;z-index:2;font-style:inherit;font-variant:inherit;font-weight:inherit;font-stretch:inherit;font-family:inherit;font-optical-sizing:inherit;font-size-adjust:inherit;font-kerning:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-language-override:inherit;font-size:0.7rem;line-height:1;background:0px center;border:0px;padding:0.45rem 0.5rem;cursor:pointer;color:var(--papel);opacity:0.1;transition:opacity 0.2s}
.apagon:hover, .apagon:focus-visible{opacity:0.85}
.apagon[aria-pressed="false"]{opacity:0.06}
.apagon[aria-pressed="false"]:hover, .apagon[aria-pressed="false"]:focus-visible{opacity:0.7}
.pie .pie__social a{border-color:color-mix(in oklab,var(--linkedin) 62%,var(--papel))}
.nav__lista{display:flex;gap:1.9rem;align-items:center}
.nav__lista > li{position:relative}
.nav__enlace{text-decoration:none;font-size:0.87rem;font-weight:500;padding:0.5rem 0px;display:block}

/* La pagina en la que se esta, marcada con un filete de realce. Va en sombra
   interior y no en borde para no mover el renglon al encenderse. */
.nav__enlace[aria-current]{box-shadow:inset 0 -2px 0 var(--vino)}
.nav__sub{position:absolute;top:100%;left:-0.9rem;min-width:15rem;padding:0.4rem 0px;background:var(--papel);border:var(--filete) solid var(--linea);opacity:0;visibility:hidden;transform:translateY(5px);transition:0.16s;z-index:60}
li:hover > .nav__sub, li:focus-within > .nav__sub{opacity:1;visibility:visible;transform:none}
.nav__sub a{display:block;padding:0.5rem 0.9rem;text-decoration:none;font-size:0.84rem;color:var(--tinta)}
.nav__sub a:hover{background:var(--vino-tenue)}
.nav__lista > li:nth-last-child(-n+3) > .nav__sub{left:auto;right:-0.9rem}
.idiomas{display:inline-flex;align-items:center;gap:0.15rem;margin-left:0.85rem;padding-left:0.85rem;border-left:var(--filete) solid currentColor}
.idiomas__op{font-style:inherit;font-variant:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-optical-sizing:inherit;font-size-adjust:inherit;font-kerning:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-language-override:inherit;font-size:0.74rem;letter-spacing:0.07em;font-weight:600;padding:0.28rem 0.4rem;text-decoration:none;color:inherit;background:0px center;border:0px;opacity:0.55;transition:opacity 0.18s}
a.idiomas__op{cursor:pointer}
a.idiomas__op:hover{opacity:1}
.idiomas__op[aria-current]{opacity:1;text-decoration-line:underline;text-decoration-style:initial;text-decoration-color:initial;text-underline-offset:5px;text-decoration-thickness:var(--filete)}
.idiomas__op[aria-disabled="true"]{opacity:0.38;cursor:not-allowed}
.idiomas__op:focus-visible{outline:var(--filete) solid currentColor;outline-offset:2px}
.hamburguesa{display:none;background:0px center;border:0px;cursor:pointer;color:inherit;width:44px;height:44px;padding:0px;margin-right:-10px;align-items:center;justify-content:center;flex-direction:column;gap:5px}
.hamburguesa span{display:block;width:24px;height:2px;background:currentcolor}
@media (max-width: 1024px){
  .hamburguesa{display:flex}
  .nav{position:fixed;inset:var(--cab-alto) 0 auto 0;background:var(--papel);border-bottom:var(--filete) solid var(--linea);transform:translateY(calc(-100% - var(--cab-alto) - 8px));transition:transform 0.28s;max-height:80vh;overflow:auto;z-index:55}
  .nav.abierta{transform:none}
  .nav__lista{flex-direction:column;align-items:stretch;gap:0px;padding:0.6rem 0px}
  .nav__enlace{padding:.8rem var(--col);color:var(--tinta)}
  .nav__sub{position:static;opacity:1;visibility:visible;transform:none;border:0px;background:0px center;padding:0px 0px 0.5rem}
  .nav__sub a{padding-left:calc(var(--col) + 1rem);color:var(--cemento)}
  .nav__idiomas{padding:.7rem var(--col) .2rem}
  .idiomas{margin:0px;padding:0.7rem 0px 0px;border-left:0px;border-top:var(--filete) solid var(--linea);width:100%}
  .idiomas__op{padding:0.3rem 0.5rem 0.3rem 0px;color:var(--tinta)}
  .form__par{grid-template-columns:1fr}
}

/* La columna de la foto y su proporción. La caja tiene la misma que la
   fotografía, dos tercios, así que se ve entera: no hay recorte ni bordes
   vacíos, y "cubrir" y "contener" dan lo mismo. Y como la altura sale del
   ancho, ensanchar la columna es lo único que la hace crecer; el bloque se
   estira con ella. El 18 de septiembre el cliente la pidió más grande. */
.quienes{display:grid;grid-template-columns:minmax(0px,1.25fr) minmax(0px,0.75fr);gap:0px;align-items:stretch}
.quienes__foto{position:relative;aspect-ratio:2 / 3;align-self:center;margin:0 calc(-1 * var(--col)) 0 0}
.quienes > div:first-child{display:flex;flex-direction:column;justify-content:center}

/* Entera y sin recortar, por orden del cliente el 18 de septiembre: antes
   llenaba su recuadro y se le comía un trozo arriba y abajo. Ahora se ve
   completa y el recuadro le sobra por los lados, que las máscaras disimulan. */
.quienes__foto img{object-fit:cover;object-position:50% 50%}
.quienes__foto .foto{position:absolute;inset:0px;aspect-ratio:auto;background:0px center}
@media (max-width: 900px){
  .quienes{grid-template-columns:1fr;gap:1.6rem}
  .quienes__foto{aspect-ratio:4 / 3;margin:0 calc(-1 * var(--col))}
  .quienes > div:first-child{display:block}
  .quienes__foto .foto{position:relative;aspect-ratio:16 / 10;mask-image:linear-gradient(90deg,transparent 0px,rgb(0,0,0) 7%,rgb(0,0,0) 93%,transparent 100%),linear-gradient(transparent 0px,rgb(0,0,0) 8%,rgb(0,0,0) 92%,transparent 100%);mask-composite:intersect}
}

/* La cabeza, por encima del mapa pase lo que pase: ahí vive el botón de volver
   y ningún trozo de dibujo debe poder taparlo. */
.mapa__cabeza{position:relative;z-index:6;display:flex;align-items:baseline;justify-content:flex-start;gap:clamp(0.9rem,2.4vw,1.8rem);flex-wrap:wrap}
#nosotros-mapa .titulo{max-width:none;font-size:clamp(1.25rem,2.35vw,1.95rem)}
.mapa__cabeza .cifra{background:0px center;padding:0px;flex:0 0 auto;display:flex;align-items:baseline;gap:0.45rem}
.mapa__cabeza .cifra b{font-size:clamp(1.35rem,2.4vw,2rem)}
.mapa__cabeza .cifra span{font-size:0.8rem}

/* El mapa toma todo el ancho de la página y todo el alto que le quede: la
   sección mide la pantalla menos la barra, el título se lleva lo suyo y el
   resto de la fila es del mapa. Dentro de esa caja, el dibujo se ajusta solo
   —es lo que hace un SVG con su viewBox— y queda centrado sin deformarse, así
   que no hace falta saber aquí ni su proporción ni cuánto ocupa el título.

   Antes iba con esa cuenta a mano, el alto de la pantalla menos un apaño en
   rem, y encima un tope del 74% del ancho. El apaño había que corregirlo cada
   vez que cambiaba algo del título, y el tope dejaba el dibujo más estrecho
   que la página aunque sobrara sitio, que es lo que se veía. */
#nosotros-mapa{height:calc(100svh - var(--cab-alto));padding-block:clamp(0.9rem,1.8vw,1.6rem);display:grid;grid-template-rows:minmax(0px,1fr)}
#nosotros-mapa .rejilla{align-items:stretch}
#nosotros-mapa .rejilla > div{display:grid;grid-template-rows:auto minmax(0px,1fr);min-height:0px}

/* El mapa y, a su izquierda, la columna de pestañas. La columna se mide por su
   contenido y el dibujo se queda con lo que sobra: así cambiar un rótulo no
   obliga a tocar ningún ancho. */
.nosotros{display:grid;grid-template-columns:auto minmax(0px,1fr);align-content:stretch;gap:clamp(0.5rem,1.2vw,1.1rem);margin-top:0.7rem;min-height:0px}

/* Todo lo que se dibuja encima del mapa se mide contra --esc, que es la escala
   del acercamiento en curso. Sin eso, el nombre del proyecto se multiplicaba
   por la escala: en un estado chico como Morelos el zoom pasa de ocho, y once
   píxeles de texto salían de noventa. Las líneas no lo necesitan: llevan
   vector-effect y no engordan. */
.mapa{opacity:1;width:100%;min-height:0px}

/* Las pestañas de sector. Van arriba de su columna y no centradas: el mapa de
   México es más alto por el sur y centrarlas las dejaba frente al mar. */
.mapa__filtros{display:flex;flex-direction:column;gap:0.25rem;align-self:start;padding-top:0.3rem}
.mapa__filtro{font-style:inherit;font-variant:inherit;font-stretch:inherit;font-family:inherit;font-optical-sizing:inherit;font-size-adjust:inherit;font-kerning:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-language-override:inherit;font-size:0.8rem;font-weight:500;letter-spacing:0.01em;line-height:1.2;text-align:left;padding:0.4rem 0.9rem;border:var(--filete) solid transparent;border-radius:var(--radio);background:0px center;color:var(--cemento);cursor:pointer;white-space:nowrap;transition:color 0.18s,background 0.18s,border-color 0.18s}
.mapa__filtro:hover{color:var(--tinta);border-color:var(--linea-suave)}
.mapa__filtro[aria-pressed="true"]{color:var(--papel);background:var(--vino);border-color:var(--vino)}
.mapa__filtro:focus-visible{outline:var(--filete) solid var(--vino);outline-offset:2px}

/* Un sector sin ningún proyecto encendido no tiene pestaña: llevaría a un mapa
   en blanco. Lo decide el guion al leer los interruptores. */
.mapa__filtro[hidden]{display:none}
.nosotros .num{font-variant-numeric:tabular-nums}
.js .mapa{opacity:0;transition:opacity 0.9s}
.js .mapa.dentro{opacity:1}
.mapa__cabeza .cifra b{color:var(--vino)}
.js .mapa__cabeza .cifra{opacity:0;transform:translateY(9px);transition:opacity 0.45s,transform 0.5s cubic-bezier(0.16,0.7,0.2,1)}
.js .mapa__cabeza .cifra.dentro{opacity:1;transform:none}
.mapa{position:relative}

/* Sin overflow visible. Con él, el dibujo acercado se pintaba fuera de su caja
   y, lo que es peor, seguía recibiendo el cursor ahí fuera: el contorno del
   estado ampliado se ponía por encima del botón de "Regresar al mapa" y se
   comía el clic. Era eso lo que hacía que el botón funcionara unas veces sí y
   otras no, según qué estado se hubiera abierto. */
.mapa svg{display:block;width:100%;height:100%}

/* ------------------------------------------------- mapa interactivo
   El acercamiento se hace con una transformación sobre el grupo que envuelve
   todo el dibujo, no cambiando el viewBox: así lo mueve el compositor y la
   animación no depende de cuántos contornos haya en pantalla. El grosor de
   los filetes no crece porque todos llevan vector-effect. */
.mapa__zoom{transform-box:view-box;transform-origin:0px 0px;transition:transform 0.85s cubic-bezier(0.22,0.61,0.36,1)}
.js .mapa__grupo{cursor:pointer}

/* El estado elegido. Un filete de papel alrededor del contorno, que es lo que
   se lee sobre el vino del relleno y sobre la tierra del fondo. Sustituye a la
   vista previa que salía al pasar por encima: el cliente avisó el 2 de octubre
   de que cruzar el Estado de México camino de la Ciudad de México cambiaba la
   selección sin querer, así que ahora hay que pulsar, y lo pulsado se queda. */
.mapa__grupo.sel .mapa__estado{stroke:var(--papel);stroke-width:4.4;paint-order:stroke;filter:drop-shadow(0 0 1.6px color-mix(in oklab,var(--tinta) 60%,transparent))}

/* Lo que la pestaña deja fuera. El contorno se queda apagado en su sitio —el
   mapa no cambia de forma al filtrar, que sería mareante— y pierde la chincheta
   y el número, que es lo que invita a pulsarlo. */
.js .mapa__grupo.fuera{pointer-events:none}
.js .mapa__grupo.fuera .mapa__estado{opacity:0.14}
.js .mapa__grupo.fuera .mapa__punto, .js .mapa__grupo.fuera .mapa__cuantos{opacity:0}
.mapa__pin.fuera{display:none}
.mapa{--esc:1}
.mapa__punto{fill:var(--vino);stroke:var(--papel);stroke-width:1;r:calc(9px / var(--esc));vector-effect:non-scaling-stroke;transition:opacity 0.3s,r 0.3s}

/* El número de proyectos, dentro del punto. Se apaga con él. */
.mapa__cuantos{font-family:var(--texto);font-size:calc(10px / var(--esc));font-weight:600;fill:var(--papel);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:opacity 0.3s}
.js .mapa__cuantos{opacity:0}
.js .mapa__estado.puesto ~ .mapa__cuantos{opacity:1}
.mapa__grupo:focus{outline:0px}
.mapa__grupo:focus-visible .mapa__punto{stroke:var(--vino);stroke-width:3}
.js .mapa__punto{opacity:0}
.js .mapa__estado.puesto + .mapa__punto{opacity:1}
.js .mapa__grupo:hover .mapa__punto{r:calc(10.5px / var(--esc))}

/* Con el mapa acercado, los estados que no son el elegido se van casi del
   todo: se quedan como una sombra que sitúa al que sí está. */
.mapa--dentro .mapa__fondo{opacity:0.12;transition:opacity 0.5s}
.mapa--dentro .mapa__grupo{opacity:0;pointer-events:none;transition:opacity 0.5s}
.mapa--dentro .mapa__grupo.elegido{opacity:1}
.mapa--dentro .mapa__grupo.elegido .mapa__punto, .mapa--dentro .mapa__cuantos{opacity:0}

/* Los puntos de proyecto y sus etiquetas. Solo existen con el mapa acercado. */
.mapa__detalle{opacity:0;pointer-events:none;transition:opacity 0.4s 0.35s}
.mapa__detalle.puesto{opacity:1;pointer-events:auto}
.js .mapa__pin{cursor:pointer}
.mapa__pinta{fill:var(--vino);stroke:var(--papel);stroke-width:1.2;r:calc(5px / var(--esc));vector-effect:non-scaling-stroke;transition:r 0.2s}
.mapa__pin:hover .mapa__pinta, .mapa__pin:focus .mapa__pinta{r:calc(7px / var(--esc))}
.mapa__hilo{fill:none;stroke:var(--vino);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0.55}
.mapa__nombre{font-family:var(--texto);font-size:calc(11px / var(--esc));fill:var(--tinta);paint-order:stroke;stroke:var(--papel);stroke-width:calc(3px / var(--esc));stroke-linejoin:round}
.mapa__pin:hover .mapa__nombre, .mapa__pin:focus .mapa__nombre{fill:var(--vino)}
.mapa__pin:focus{outline:0px}
.mapa__pin:focus-visible .mapa__pinta{stroke:var(--vino);stroke-width:3}

/* A la derecha y arriba, no centrada abajo: centrada tapaba justo el mapa, que
   es lo que se está mirando. Ahí solo cubre el margen que el acercamiento deja
   libre por ese lado. */
.mapa__tira{position:absolute;right:0px;top:4%;width:min(23rem,42%);background:var(--papel);box-shadow:rgba(0,0,0,0.18) 0px 12px 40px;border:var(--filete) solid var(--vino-filo);padding:0.55rem;display:grid;gap:0.45rem;z-index:5}
.mapa__tira[hidden]{display:none}
.mapa__tira__t{font-size:0.8rem;font-weight:600;color:var(--vino);display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.mapa__tira__t a{color:var(--vino);text-decoration:underline;text-underline-offset:3px}
.mapa__tira__n{font-weight:400;color:var(--cemento)}

/* La ficha entera es el enlace al proyecto, no solo el rótulo de la esquina:
   en el teléfono no hay cursor que pasar por encima y el primer toque abre la
   ficha, así que el segundo tiene que valer en cualquier parte de ella. */
.mapa__tira__ir{display:grid;gap:0.45rem;text-decoration:none;color:inherit}
.mapa__tira__ir:hover .mapa__tira__t span:last-child{text-decoration:underline;text-underline-offset:3px}

/* Los nombres se van apilando debajo de la cifra de estados, uno por cada
   estado que se marca, así que la lista es la lectura de esa cifra. */
.mapa__lista{list-style:none;margin:0px;padding:0px;display:grid;gap:0.2rem}
.mapa__lista a{display:flex;align-items:center;gap:0.55rem;text-decoration:none;color:var(--tinta);font-size:0.78rem;line-height:1.25;padding:0.22rem;border-radius:6px;transition:background 0.16s,color 0.16s}
.mapa__lista a:hover, .mapa__lista a:focus-visible{background:var(--hueco);color:var(--vino)}
.mapa__lista img{width:3.1rem;height:2.2rem;object-fit:cover;flex:0 0 auto;border-radius:4px;display:block}
.mapa__cinta{overflow:hidden}
.mapa__cinta > div{display:flex;width:max-content;animation:desfilar calc(var(--piezas,6) * 3s) linear infinite}

/* La separación a la derecha de cada copia, no entre las piezas del rollo: así
   la mitad del ancho total es exactamente una copia y la vuelta no salta. */
.mapa__grupo{display:flex;gap:0.45rem;padding-right:0.45rem}
.mapa__cinta img{height:clamp(4rem,7vw,5.6rem);width:auto;display:block}
.mapa__cinta:hover > div{animation-play-state:paused}
.mapa__volver{font-style:inherit;font-variant:inherit;font-stretch:inherit;line-height:inherit;font-family:inherit;font-optical-sizing:inherit;font-size-adjust:inherit;font-kerning:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-language-override:inherit;font-size:0.8rem;font-weight:500;letter-spacing:0.01em;color:var(--vino);background:transparent;border:var(--filete) solid var(--vino);padding:0.4rem 0.9rem;border-radius:var(--radio);cursor:pointer;transition:background 0.18s,color 0.18s}
.mapa__volver:hover{background:var(--vino);color:var(--papel)}
.mapa__volver[hidden]{display:none}
@media (prefers-reduced-motion: reduce){
  .mapa__zoom{transition:none}
  .mapa__cinta > div{animation:auto ease 0s 1 normal none running none}
}
.mapa__fondo path{fill:var(--mapa-tierra);stroke:var(--mapa-linea);stroke-width:1;vector-effect:non-scaling-stroke}
.mapa__estado{fill:var(--destaque);stroke:var(--tinta);stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.js .mapa__estado{opacity:0;transition:opacity 0.42s}
.js .mapa__estado.puesto{opacity:1}
@media (prefers-reduced-motion: reduce){
  .js .mapa{opacity:1}
  .js .mapa__estado{opacity:1}
  .js .mapa__cabeza .cifra{opacity:1;transform:none}
}
@media (min-width: 901px) and (max-height: 820px){
  .nosotros{margin-top:0.5rem}
  #nosotros-mapa{padding-block:0.8rem}
}
@media (max-width: 900px){
  .mapa__cabeza{gap:0.5rem 1rem}
  #nosotros-mapa{height:auto;min-height:0px;grid-template-rows:auto;padding-block:var(--aire-bloque)}
  #nosotros-mapa .rejilla > div{grid-template-rows:auto auto}
  .mapa svg{height:auto}
  .nosotros{grid-template-columns:1fr}
  .mapa__filtros{flex-direction:row;overflow-x:auto;padding:0px 0px 0.55rem;scrollbar-width:none}
  .mapa__filtros::-webkit-scrollbar{display:none}
  .mapa__filtro{flex:0 0 auto}
  .mapa__cabeza .cifra b{font-size:clamp(1.5rem,6.5vw,2rem);line-height:1.1}
}
.js .area li{opacity:0;transform:translateY(9px);transition:opacity 0.5s,transform 0.55s cubic-bezier(0.16,0.7,0.2,1)}
.js .area li.dentro{opacity:1;transform:none}
.js .area{transition:background 0.4s,box-shadow 0.4s}
@media (min-width: 901px){
  .js .area.dentro li:nth-child(1){transition-delay:0.04s}
  .js .area.dentro li:nth-child(2){transition-delay:0.14s}
  .js .area.dentro li:nth-child(3){transition-delay:0.24s}
  .js .area.dentro li:nth-child(4){transition-delay:0.34s}
}
@media (max-width: 900px){
  .js .area.abierta{background:var(--papel);box-shadow:0 1px 0 var(--vino-filo),0 10px 30px rgba(0,0,0,.07)}
}
@media (prefers-reduced-motion: reduce){
  .js .area li{opacity:1;transform:none}
}

/* Los retratos, en renglones de distinto largo pero todos del mismo tamaño.
   La rejilla tiene el doble de columnas que retratos caben en el renglón más
   largo, cada retrato ocupa dos, y el renglón que no llena empieza corrido:
   con dos arriba y tres abajo, los de arriba van en las columnas 2-3 y 4-5 y
   quedan centrados. El reparto lo dice EQUIPO_FILAS en contenido.py. */
.equipo{--equipo-hueco:clamp(1.1rem,2.4vw,1.9rem);display:grid;gap:calc(var(--equipo-hueco) * 1.5) var(--equipo-hueco);grid-template-columns:repeat(var(--columnas,6),1fr);margin-top:1.8rem}
.persona{grid-column:span 2}
.persona--abre-fila{grid-column:var(--col) / span 2}
.persona{margin:0px;padding:0px;border:0px}
.persona__abre{display:grid;gap:0.65rem;text-decoration:none;color:inherit}

/* El retrato entero, en tres cuartos. El recorte ya viene hecho de
   generar_retratos.py, a la altura del cierre del pantalón, así que aquí no
   hay que encuadrar nada: se enseña tal cual. Era un cuadro con encuadre de
   busto hasta el 14 de septiembre. */
.persona__abre .foto{aspect-ratio:3 / 4;border-radius:10px}
.persona__nombre{display:block;font-size:1.02rem;font-weight:600;line-height:1.25}
.persona__cargo{display:block}
.persona__abre:hover .persona__nombre{color:var(--vino)}
.persona__abre:focus-visible{outline:2px solid var(--vino);outline-offset:4px}

/* La ficha completa vive en la página, debajo de su tarjeta. Con guion se
   esconde y se abre dentro del cuadro; sin guion se queda a la vista y la
   rejilla pasa a una columna, que es la única forma de que un texto largo se
   lea en el sitio de una tarjeta.

   El reparto es el que tenía antes de pasar a rejilla: retrato a un lado y el
   texto al otro. Es lo que pidió el cliente conservar. */
.persona__ficha{display:grid;grid-template-columns:minmax(11rem,25%) 1fr;gap:clamp(1.4rem,3vw,2.6rem);align-items:start}
.persona__ficha .persona__nombre{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:500;font-family:var(--display);line-height:1.18}
.persona__texto{display:grid;gap:1rem}
.persona__resumen{font-size:1.05rem}

/* La ficha completa vive en la página, debajo de su tarjeta. Con guion se
   esconde y se abre dentro del cuadro; sin guion se queda a la vista y la
   rejilla pasa a una columna, que es la única forma de que un texto largo se
   lea en el sitio de una tarjeta. */
.js .persona__ficha{display:none}
.js .retrato .persona__ficha{display:grid}
html:not(.js) .equipo{grid-template-columns:1fr}
html:not(.js) .persona, html:not(.js) .persona--abre-fila{grid-column:auto}
html:not(.js) .persona__ficha{margin-top:1.2rem}
@media (max-width: 700px){
  .persona__ficha{grid-template-columns:1fr}
  .persona__retrato{max-width:12rem}
}

/* El cuadro. Mismo lenguaje que el visor de imágenes: fondo oscurecido, mando
   arriba a la izquierda, clic en el fondo para cerrar. Lo que cambia es que
   dentro va texto y no una imagen, así que el panel es claro y desplazable. */
.retrato{position:fixed;inset:0px;z-index:210;display:grid;place-items:center;padding:4.5rem 1rem 2rem;background:color-mix(in oklab,var(--tinta) 90%,transparent);cursor:pointer}
.retrato[hidden]{display:none}
.js .retrato{opacity:0;transition:opacity 0.26s}
.js .retrato.puesto{opacity:1}
.retrato__panel{background:var(--papel);color:var(--tinta);border-radius:14px;width:min(56rem,94vw);max-height:86vh;overflow:auto;cursor:default;padding:clamp(1.5rem,3.2vw,2.8rem)}
.retrato__cerrar{position:fixed;top:1rem;left:1rem}

/* La animación que tenía la ficha, ahora al abrir el cuadro: el retrato se
   revela y los renglones entran desde la derecha, escalonados. La clase la
   pone el guion un cuadro después de mostrar el cuadro, para que la
   transición arranque desde el estado de partida y no se la salte. */
.js .retrato .persona__retrato .foto{opacity:0;transition:opacity 0.8s}
.js .retrato.anima .persona__retrato .foto{opacity:1}
.js .retrato .persona__texto > *{opacity:0;transform:translateX(30px);transition:opacity 0.6s,transform 0.75s cubic-bezier(0.16,0.7,0.2,1)}
.js .retrato.anima .persona__texto > *{opacity:1;transform:none}
.js .retrato.anima .persona__texto > :nth-child(1){transition-delay:0.06s}
.js .retrato.anima .persona__texto > :nth-child(2){transition-delay:0.16s}
.js .retrato.anima .persona__texto > :nth-child(3){transition-delay:0.26s}
.js .retrato.anima .persona__texto > :nth-child(4){transition-delay:0.36s}
.js .retrato.anima .persona__texto > :nth-child(5){transition-delay:0.46s}
.js .retrato.anima .persona__texto > :nth-child(6){transition-delay:0.56s}
@media (prefers-reduced-motion: reduce){
  .js .retrato .persona__retrato .foto, .js .retrato .persona__texto > *{opacity:1;transform:none}
}

/* Entrada de las fichas del equipo. La fotografía se revela sola y el texto
   viene de la derecha, escalonado renglón a renglón. Sin JavaScript se ve entera
   y quieta.

   Vive aquí, en la hoja común, y no en la de una dirección: .persona está
   definida por separado en Obra y en Plano, con declaraciones distintas, así que
   al colgar esto de una de las dos se quedó solo en Plano. La animación existía,
   el guion ponía la clase, y en Obra no había nada que animar. */
.js .persona .foto{opacity:0;transition:opacity 0.85s}
.js .persona.dentro .foto{opacity:1}
.js .persona__abre > span{opacity:0;transform:translateX(26px);transition:opacity 0.6s,transform 0.75s cubic-bezier(0.16,0.7,0.2,1)}
.js .persona.dentro .persona__abre > span{opacity:1;transform:none}
.js .persona.dentro .persona__abre > span:nth-of-type(1){transition-delay:0.05s}
.js .persona.dentro .persona__abre > span:nth-of-type(2){transition-delay:0.15s}
@media (prefers-reduced-motion: reduce){
  .js .persona .foto, .js .persona__abre > span{opacity:1;transform:none}
}
@media (max-width: 900px){
  .equipo{grid-template-columns:repeat(2,1fr)}
  .persona, .persona--abre-fila{grid-column:auto}
  .retrato{padding:4rem 0.7rem 1rem}
}
:root{--aliado-fondo:color-mix(in oklab,var(--vino) 10%,var(--papel));--aliado-linea:var(--vino-filo)}
.desfile{overflow:hidden;margin-top:0.4rem;mask-image:linear-gradient(90deg,transparent,rgb(0,0,0) 5%,rgb(0,0,0) 95%,transparent)}
.desfile__cinta{display:flex;width:max-content;animation:62s linear 0s infinite normal none running desfilar}
.desfile__grupo{display:flex;gap:0.9rem;padding-right:0.9rem;margin:0px;list-style:none}
.desfile__pieza{flex:0 0 auto;display:grid;place-items:center;text-align:center;width:11.5rem;height:5.4rem;padding:0.6rem 0.9rem;line-height:1.25;font-size:0.83rem;color:var(--cemento);background:var(--aliado-fondo);border:var(--filete) solid var(--aliado-linea)}
@keyframes desfilar { 
  0% { transform: translate3d(0px, 0px, 0px); }
  100% { transform: translate3d(-50%, 0px, 0px); }
}
.desfile:hover .desfile__cinta, .desfile:focus-within .desfile__cinta{animation-play-state:paused}
@media (prefers-reduced-motion: reduce){
  .desfile{overflow:visible;mask-image:none}
  .desfile__cinta{animation:auto ease 0s 1 normal none running none;width:auto;flex-wrap:wrap}
  .desfile__grupo{flex-wrap:wrap;gap:0.6rem;padding:0px}
  .desfile__cinta .desfile__grupo:last-child{display:none}
}
@media (max-width: 700px){
  .desfile__pieza{width:9.5rem;height:4.6rem;font-size:0.78rem}
}

/* El fondo es papel firme y sin transparencia, por orden del cliente el 23 de
   septiembre, y pulsarlo cierra. Era tinta al 93%. Con el fondo claro, los
   mandos y las miniaturas pasan de blanco a tinta. */
.visor{position:fixed;inset:0px;z-index:200;display:grid;place-items:center;padding:4rem 1rem 5.6rem;background:var(--papel);cursor:zoom-out}
.visor[hidden]{display:none}
.js .visor{opacity:0;transition:opacity 0.28s}
.js .visor.puesto{opacity:1}
.visor__cine{max-width:min(1700px,96vw);max-height:calc(-9.6rem + 100svh);width:auto;height:auto;background:rgb(0,0,0)}
.visor__cine[hidden]{display:none}
.visor__img[hidden]{display:none}

/* El plano se acerca a la zona señalada. La transición va en la imagen y no en
   la capa: la capa se queda quieta encima, que es lo que mantiene el contorno
   donde el ojo lo dejó. */
.visor__img{max-width:min(1700px,96vw);max-height:calc(-9.6rem + 100svh);width:auto;height:auto;object-fit:contain;cursor:default;box-shadow:0 18px 60px color-mix(in oklab,var(--tinta) 16%,transparent)}
.visor__mandos{position:fixed;top:1rem;left:1rem;display:flex;align-items:center;gap:1rem;color:var(--tinta);cursor:default}
.visor__cuenta{font-size:0.82rem;font-variant-numeric:tabular-nums;color:var(--cemento)}
.visor__boton{width:var(--mando);height:var(--mando);display:grid;place-items:center;cursor:pointer;background:var(--papel);border:var(--filete) solid var(--linea);color:var(--tinta);border-radius:var(--radio);padding:0px;transition:border-color 0.18s,background 0.18s}
.visor__boton:hover{background:color-mix(in oklab,var(--tinta) 6%,transparent);border-color:var(--tinta)}
.visor__boton:focus-visible{outline:var(--filete) solid var(--tinta);outline-offset:3px}
.visor__cerrar::before, .visor__cerrar::after{content:"";position:absolute;width:15px;height:1.5px;background:currentcolor}
.visor__cerrar{position:relative}
.visor__cerrar::before{transform:rotate(45deg)}
.visor__cerrar::after{transform:rotate(-45deg)}
.visor__flecha{position:fixed;top:50%;transform:translateY(-50%)}
.visor__flecha--izq{left:1rem}
.visor__flecha--der{right:1rem}
.visor__flecha::before{content:"";width:13px;height:13px;border-left:1.5px solid;border-bottom:1.5px solid}
.visor__flecha--izq::before{transform:rotate(45deg) translate(2px,-2px)}
.visor__flecha--der::before{transform:rotate(-135deg) translate(2px,-2px)}
.visor__pie{display:none;position:fixed;left:0px;right:0px;bottom:6.2rem;text-align:center;font-size:0.84rem;padding:0px 5rem;color:var(--cemento);cursor:default}
.galeria .foto--puesta{cursor:zoom-in}

/* Tira de miniaturas al pie del visor. El cliente la pidió el 11 de
   septiembre; en junio había pedido lo contrario, solo flechas. */
.visor__tira{position:fixed;left:0px;right:0px;bottom:0.7rem;display:flex;gap:0.4rem;justify-content:center;flex-wrap:wrap;padding:0px 1rem;max-height:5.2rem;overflow:auto}
.visor__tira[hidden]{display:none}
.visor__mini{width:64px;height:44px;padding:0px;border:0px;border-radius:0px;cursor:pointer;background:transparent;opacity:0.45;transition:opacity 0.18s,box-shadow 0.18s}
.visor__mini img{width:100%;height:100%;object-fit:cover}
.visor__mini:hover{opacity:0.8}
.visor__mini.puesta{opacity:1;box-shadow:0 0 0 2px var(--tinta)}
.visor__mini:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
@media (max-width: 700px){
  .visor__mini{width:48px;height:34px}
}
@media (max-width: 700px){
  .visor{padding:3.4rem 0.6rem 5rem}
  .visor__flecha{top:auto;bottom:1rem;transform:none}
  .visor__flecha--izq{left:0.8rem}
  .visor__flecha--der{right:0.8rem}
  .visor__pie{bottom:5rem;padding:0px 1rem}
}
.volver{margin-bottom:1.8rem}
.atras{display:inline-flex;align-items:center;gap:0.55rem;font-size:0.82rem;font-weight:500;letter-spacing:0.01em;color:var(--vino);text-decoration:none;padding-bottom:0.2rem;border-bottom:var(--filete) solid transparent;transition:color 0.18s,border-color 0.18s}
.atras::before{content:"";width:0.48rem;height:0.48rem;flex:0 0 auto;border-left:var(--filete) solid currentColor;border-bottom:var(--filete) solid currentColor;transform:rotate(45deg)}
.atras:hover, .atras:focus-visible{color:var(--vino-honda);border-bottom-color:var(--vino-honda)}

/* Misión y visión: cada una con su fotografía a la izquierda y su texto a la
   derecha, y la segunda debajo de la primera. Así se leen de una en una según
   se baja, que es lo que pidió el cliente. */
.pares{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.6rem,4vw,3.4rem);margin-top:clamp(1.6rem,3.4vw,2.8rem)}
/* En teléfono, una debajo de otra. A 375 px las dos columnas se quedaban en 155
   px cada una, que es el mismo apretón que tenía el ciclo integral y que el
   cliente avisó el 6 de octubre. Misión y visión son dos párrafos cortos: de
   corrido se leen y en dos columnas de 155 px no. */
@media (max-width:760px){
  .pares{grid-template-columns:1fr}
}
.par h3{font-size:1.3rem;font-weight:600;margin-bottom:0.7rem}
.par p{color:var(--cemento);font-size:1.02rem}

/* La línea que sustituye al rótulo de "Servicio integral". Fina y dentro de la
   envoltura: las divisorias de borde a borde se quitaron en septiembre. */
.raya{border-right:0px;border-bottom:0px;border-left:0px;border-image:none;height:0px;border-top:var(--filete) solid var(--linea);margin:0px 0px clamp(1.6rem,3.4vw,2.6rem)}
.raya--entre{margin:clamp(0.7rem,1.6vw,1.3rem) 0px 0px}

/* El botón de "Ver proyectos" va sobre el mapa, pegado a la derecha y abajo, y
   no debajo: colgado del flujo le quitaba alto al mapa, que es lo que se
   quería evitar. Ahí cae sobre el margen que el dibujo deja libre por ese
   lado, así que no tapa nada. */
.mapa__pie{position:absolute;right:0px;bottom:6%;margin:0px;z-index:4}
.mapa__pie .boton{padding:0.55rem 1.1rem;font-size:0.74rem}
@media (max-width: 900px){
  .mapa__pie{position:static;text-align:center;margin-top:1.2rem}
  .mapa__tira{position:static;width:auto;margin-top:1rem;transform:none}
  .mapa__cuantos{display:none}
}

/* El ciclo integral, en dos columnas. Llegó de servicios.html, que
   desapareció, y ahí ocupaba una columna y media pantalla. Mismos pasos y
   misma animación: lo único que cambia es cuántos caben por renglón. */
.ciclo--par{grid-template-columns:1fr 1fr}
@media (max-width: 760px){
  .ciclo--par{grid-template-columns:1fr}
  .ciclo.ciclo--par .ciclo__paso{grid-template-columns:2.6rem 1fr;gap:0.9rem}
}

/* La cabecera del proyecto: el carrusel a todo el ancho de la página, que es
   lo que pidió el cliente. Va fuera de la envoltura porque la envoltura se
   topa en 1360 px, y el enlace de regreso se cuelga de su esquina: la maqueta
   no deja sitio por encima. */
.cima{position:relative}

/* La flecha que baja a la ficha. En la misma transparencia que el nombre, y
   con su misma sombra: debajo pasa cualquier fotografía. Se mueve un poco, lo
   justo para que se vea que lleva a algún sitio. */
.cima__baja{position:absolute;left:50%;bottom:clamp(1.1rem,3.4vh,2.6rem);transform:translateX(-50%);z-index:3;width:var(--mando);height:var(--mando);display:grid;place-items:center;border-radius:var(--radio);color:var(--papel);background:var(--vino);box-shadow:color-mix(rgb(0,0,0) 45%,transparent) 0px 2px 16px;transition:background 0.2s,transform 0.2s}
.cima__baja:hover, .cima__baja:focus-visible{background:color-mix(in oklab,var(--vino) 82%,var(--tinta));transform:translateX(-50%) translateY(2px)}
.cima__baja::before{content:"";width:17px;height:17px;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translate(-3px,-3px);animation:2.6s ease-in-out 0s infinite normal none running asoma}
@keyframes asoma { 
  0%, 100% { transform: rotate(45deg) translate(-3px, -3px); }
  50% { transform: rotate(45deg) translate(1px, 1px); }
}
@media (prefers-reduced-motion: reduce){
  .cima__baja::before{animation:auto ease 0s 1 normal none running none}
}

/* ------------------------------------------------------- inmuebles en renta
   Cada unidad es un bloque suelto con el mismo orden siempre: el nombre, la
   dirección debajo, la cinta de fotografías y la tabla. Lo pidió así el cliente
   el 5 de octubre.

   Las tablas llevan todas las mismas columnas aunque no todas las llenen, y
   escriben una raya donde no hay dato. Seis tablas con columnas distintas se
   leen como seis cosas distintas. */
.renta{display:grid;gap:clamp(2.6rem,5vw,4.2rem)}
.renta__unidad{display:grid;gap:.75rem}
.renta__unidad[hidden]{display:none}
.renta__nombre{font-family:var(--display);font-weight:500;
  font-size:clamp(1.25rem,2.4vw,1.7rem);line-height:1.2;margin:0}
.renta__sitio{font-size:.86rem;line-height:1.45;color:var(--cemento);margin:0}

/* La cinta. Corre sola hacia la izquierda y no se abre: el cliente pidió
   expresamente que a esta no se le hiciera zoom, así que no lleva la clase que
   el visor busca y las fotografías no reciben el puntero. Es pequeña a
   propósito, lo justo para ver qué hay.

   Las piezas van dos veces y la animación recorre la mitad: al llegar al final
   de la primera copia, la segunda está exactamente donde estaba la primera al
   empezar, y el salto no se ve. Es la misma receta de la marquesina de aliados.
   Por eso la duración se calcula con --piezas: con una cantidad fija, ocho
   fotografías corrían al doble de velocidad que cuatro.

   No se detiene al pasar por encima. Lo tuvo un día y el cliente lo quitó el 5
   de octubre: aquí no hay nada que leer, como en la marquesina de aliados, y
   una cinta que se para sola donde está el cursor se lee como que se ha roto. */
.renta__cinta{overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
/* La duración se calcula con --anchos, que es lo ancha que es la cinta medida
   en alturas: la suma de las proporciones de sus fotografías. Como todas se ven
   a la misma altura, eso vale para cualquier tamaño de ventana, y las seis
   cintas corren a la misma velocidad aunque una tenga ocho apaisadas y otra
   once con cuatro verticales. Con --piezas no: ahí la de ocho corría a
   cincuenta píxeles por segundo y la de once a cuarenta. */
.renta__rollo{display:flex;width:max-content;
  animation:desfilar-renta calc(var(--anchos,12) * 5s) linear infinite}
/* La separación va a la derecha de cada grupo, no entre las piezas del rollo:
   así cada copia mide exactamente lo mismo y la vuelta no salta. */
.renta__grupo{display:flex;gap:.5rem;padding-right:.5rem}
/* El recorrido es una copia, y cuántas copias hay lo decide cada cinta: con dos
   basta mientras una copia sea más ancha que el hueco donde se ve, y las que no
   lo son llevan tres. De ahí que el paso no sea un -50% fijo sino lo que diga
   --paso, que se escribe en la propia cinta. */
@keyframes desfilar-renta{from{transform:translate3d(0,0,0)}
  to{transform:translate3d(var(--paso,-50%),0,0)}}
.renta__rollo img{height:clamp(7.5rem,13vw,11rem);width:auto;display:block;
  pointer-events:none;background:var(--hueco)}
@media (prefers-reduced-motion: reduce){
  /* Sin movimiento no se puede ver lo que queda fuera, así que la cinta pasa a
     desplazarse con el dedo o con la rueda. */
  .renta__cinta{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
  .renta__cinta::-webkit-scrollbar{display:none}
  .renta__rollo{animation:none}
}

/* La tabla. En pantalla estrecha no se reparte en renglones: se desplaza a lo
   ancho. Partirla cambiaría su forma justo donde más falta hace compararla con
   la de la unidad de al lado. */
.renta__tabla{overflow-x:auto;scrollbar-width:thin}
/* Sin ancho mínimo fijo: las tablas ya no tienen todas el mismo número de
   columnas, y 40rem obligaban a desplazar una de tres que cabía de sobra. Lo
   que no se parte es cada celda, y de ahí sale el ancho que pide la tabla. */
.renta__tabla table{width:100%;border-collapse:collapse;
  font-size:.84rem;line-height:1.45}
.renta__tabla th{white-space:nowrap}
.renta__tabla th,.renta__tabla td{padding:.7rem .9rem;text-align:center;
  vertical-align:top;border-bottom:var(--filete) solid var(--linea-suave)}
.renta__tabla thead th{font-weight:600;font-size:.76rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--tinta);
  background:color-mix(in oklab,var(--vino) 7%,var(--papel));
  border-bottom:var(--filete) solid var(--linea)}
.renta__tabla td b{font-weight:500}
.renta__tabla .renta__detalle{display:block;margin-top:.22rem;font-size:.76rem;
  line-height:1.35;color:var(--cemento)}
/* Fuera de la superficie, el renglón de debajo no es un apunte: es la otra
   mitad del dato. Mismo color y mismo peso que la cifra de arriba, y solo el
   cuerpo un punto menor para que se vea que van juntos. */
.renta__tabla .renta__detalle--par{color:var(--tinta);font-weight:500;font-size:.8rem}
.renta__tabla .renta__vacio{color:var(--cemento)}

/* Los apartados de un bloque. En uno con una sola unidad no se nota que estén:
   es la tabla y sus textos, como antes. En uno con varias, cada apartado se
   separa del anterior con un filete y lleva encima el número del departamento,
   que es lo único que los distingue. */
.renta__sub{display:grid;gap:.75rem}
.renta__sub[hidden]{display:none}
.renta__unidad--varias .renta__sub+.renta__sub{margin-top:.6rem;padding-top:1.4rem;
  border-top:var(--filete) solid var(--linea-suave)}
/* El nombre del departamento dentro de un bloque compartido. Era del tamaño de
   un subtítulo pequeño y el cliente pidió el 7 de octubre que se viera: ahora
   anda cerca del nombre del bloque, que es lo que distingue una tabla de la de
   abajo. */
.renta__subnombre{font-family:var(--display);font-weight:500;
  font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.2;margin:0;color:var(--vino)}
.renta__nota{font-size:.86rem;line-height:1.55;margin:0}
.renta__amenidades{font-size:.84rem;line-height:1.55;color:var(--cemento);margin:0}
.renta__amenidades b{color:var(--tinta);font-weight:600;font-size:.76rem;
  letter-spacing:.04em;text-transform:uppercase;display:block;margin-bottom:.2rem}
.renta__pie{margin-top:clamp(2rem,4vw,3rem);padding-top:1rem;
  border-top:var(--filete) solid var(--linea-suave);
  font-size:.78rem;line-height:1.5;color:var(--cemento)}

/* El rótulo que separa un apartado del siguiente, cuando es lo único que los
   separa. En la página de proyectos cada sector lleva debajo su lema en cuerpo
   grande y el corte se lee solo; en la de renta y venta no hay lema, y a 0.95rem
   el rótulo pesaba menos que el nombre de cualquier inmueble: el cliente avisó
   el 12 de octubre de que "Venta" se perdía encima de Proyecto Po.

   Va en la tipografía de los titulares y por encima de las dos cosas que puede
   llevar debajo: el lema del sector, que llega a 2.16rem, y el nombre de un
   inmueble, que llega a 1.7rem. Queda una escalera de tres peldaños en vez de
   dos líneas del mismo tamaño, que es lo que salió al primer intento.

   Y en tinta: la dirección Obra pinta los rótulos en cemento, que a 0.8rem es
   un apunte al margen y a 2rem parecía un título apagado. */
.bloque--aparta .rotulo b{font-family:var(--display);font-weight:600;
  font-size:clamp(1.75rem,3.2vw,2.42rem);line-height:1.1;margin-bottom:.5rem;
  color:var(--tinta);text-wrap:balance}

/* El botón que abre la galería, sobre el pase de la ficha. Abajo a la derecha:
   el nombre del proyecto va arriba a la izquierda y la flecha de bajar, abajo
   en el centro, así que es la esquina que queda libre.

   Recto y no redondo: es un mando de la página, de la misma familia que el
   botón de "Ver proyectos", y no uno de los que flotan sobre un dibujo. */
.carrusel__ver{position:absolute;z-index:3;
  right:clamp(1.1rem,3.4vw,2.6rem);bottom:clamp(1.1rem,3.4vh,2.6rem);
  font:inherit;border:0;cursor:pointer;
  background:var(--vino);color:var(--papel);
  box-shadow:0 2px 16px color-mix(in oklab,#000 40%,transparent);
  transition:background .2s ease}
.carrusel__ver:hover{background:color-mix(in oklab,var(--vino) 82%,var(--tinta))}
.carrusel__ver:focus-visible{outline:var(--filete) solid var(--papel);outline-offset:3px}

/* El enlace al proyecto dentro del visor, cuando lo que se está viendo es una
   portada del pase de la portada. Abajo a la derecha, y un escalón más arriba
   cuando hay tira de miniaturas, que ocupa el bajo de la pantalla. */
.visor__ir{position:fixed;right:1rem;bottom:1rem;z-index:4;
  text-decoration:none;background:var(--vino);color:var(--papel);
  box-shadow:0 2px 16px color-mix(in oklab,#000 40%,transparent);
  transition:background .2s ease,bottom .2s ease}

/* Los botones que flotan sobre una fotografía. El cliente los quiso el 12 de
   octubre con el dibujo por delante y el rótulo en letra muy pequeña debajo:
   sobre una imagen a pantalla entera, un icono se reconoce de lejos y una línea
   de texto no. El rótulo se queda porque un dibujo solo no dice de qué galería
   se trata, y porque es lo que lee quien no ve la pantalla.

   La letra va en versalitas espaciadas: a ese cuerpo, el espaciado es lo único
   que la mantiene legible. */
.boton--icono{display:inline-flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.34rem;padding:0 1rem;min-width:5.1rem;
  height:var(--mando);border-radius:var(--radio);
  font-size:.58rem;font-weight:500;letter-spacing:.1em;line-height:1;
  text-transform:uppercase}
/* El dibujo lleva el nombre del botón delante por una razón: el de "Ver
   proyectos" vive dentro de la caja del mapa, y allí manda `.mapa svg`, que
   estira cualquier dibujo a todo el hueco. Sin esto salía de 300 px. */
.boton--icono .boton__icono{width:24px;height:24px;display:block;flex:0 0 auto}
.boton__t{display:block}
.visor__ir:hover{background:color-mix(in oklab,var(--vino) 82%,var(--tinta))}
.visor__ir:focus-visible{outline:var(--filete) solid var(--papel);outline-offset:3px}
.visor__ir[hidden]{display:none}
.visor--contira .visor__ir{bottom:6.6rem}

/* El disco de vuelta al mapa. Solo sale en la ficha de un proyecto, y solo
   cuando se ha llegado a ella desde el mapa: el guion lo enseña si encuentra
   guardado el estado del mapa de donde se venía. Lo pidió el cliente el 2 de
   octubre, para poder recorrer el mapa de proyecto en proyecto sin tener que
   rehacer el camino cada vez.

   Va fijo a la ventana, abajo a la izquierda: las flechas del pase están a
   media altura en los costados y la flecha de bajar, abajo en el centro. */
/* Mismos márgenes que el botón de la galería y la flecha de bajar, que es con
   quienes comparte renglón en la cabecera de una ficha: así los tres se apoyan
   en la misma línea. */
.volmapa{position:fixed;left:clamp(1.1rem,3.4vw,2.6rem);
  bottom:clamp(1.1rem,3.4vh,2.6rem);z-index:40;
  display:inline-flex;align-items:center;gap:.5rem;
  height:var(--mando);padding:0 .55rem;border-radius:var(--radio);
  background:var(--vino);color:var(--papel);text-decoration:none;
  box-shadow:0 3px 18px color-mix(in oklab,#000 40%,transparent);
  transition:background .2s ease,padding .22s ease}
.volmapa[hidden]{display:none}
.volmapa svg{width:38px;height:38px;flex:0 0 auto;display:block}
/* El rótulo se despliega al acercarse. En reposo el disco mide lo que su
   icono; el texto está ahí para quien lo necesite, pero no ocupa sitio. */
.volmapa__t{max-width:0;overflow:hidden;white-space:nowrap;font-size:.78rem;
  letter-spacing:.01em;opacity:0;
  transition:max-width .22s ease,opacity .18s ease,margin .22s ease}
.volmapa:hover,.volmapa:focus-visible{background:color-mix(in oklab,var(--vino) 84%,var(--tinta))}
.volmapa:hover .volmapa__t,.volmapa:focus-visible .volmapa__t{max-width:12rem;opacity:1;
  margin-right:.45rem}
.volmapa:focus-visible{outline:var(--filete) solid var(--papel);outline-offset:3px}
/* El mismo disco, a la derecha y en el verde de WhatsApp, que es el que la
   gente reconoce sin leer. No nace escondido: este no depende de dónde se venga,
   siempre hay a quién escribir.

   Va aquí abajo y no junto a .volmapa a propósito. Estuvo arriba un día y el
   :hover genérico del disco, que viene después, le ganaba por empate de
   especificidad: al pasar por encima se ponía vino, con el icono verde encima,
   y se veía mal. El cliente lo avisó el 7 de octubre.

   Al acercarse pasa a blanco, que es lo que pidió. El verde oscuro de la marca
   sobre blanco da 7.67 a 1, de sobra para el rótulo, que es letra pequeña; el
   verde claro habría dado 1.98 y no se leería. En reposo el icono va en verde
   muy oscuro sobre el verde del disco, 6.22 a 1.

   El filete del borde se dibuja con una sombra interior y no con border: un
   borde de verdad engorda la caja un píxel y el disco pegaría un salto al
   acercarse. */
.volmapa--wa{left:auto;right:clamp(.8rem,2.2vw,1.6rem);
  background:#25d366;color:#0b3d1f;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease,padding .22s ease}
.volmapa--wa:hover,.volmapa--wa:focus-visible{background:var(--papel);color:#075e54;
  box-shadow:0 3px 18px color-mix(in oklab,#000 26%,transparent),
             inset 0 0 0 1px color-mix(in oklab,#075e54 35%,transparent)}
/* Y el aro del foco, que era de papel: sobre el blanco del acercamiento no se
   vería. */
.volmapa--wa:focus-visible{outline-color:#075e54}
.volmapa--wa svg{width:30px;height:30px}
.volmapa--wa .volmapa__t{font-weight:500}

@media (prefers-reduced-motion: reduce){
  .volmapa,.volmapa__t{transition:none}
}

/* El pase de la cabecera de un proyecto: una sola foto llenando la ventana de
   la barra para abajo, y la siguiente cada tres segundos por fundido. Lleva
   todas las fotos del proyecto desde el 23 de septiembre, que fue cuando
   desapareció la galería de debajo.

   La que sale se queda visible mientras dura el fundido y solo entonces pasa a
   visibility:hidden. Eso es lo que hace que el clic del visor caiga siempre en
   la foto que se está viendo y no en una de las que están debajo. */
.carrusel{position:relative;overflow:hidden;background:var(--hueco);
  height:calc(100svh - var(--cab-alto))}
.carrusel__cinta{position:absolute;inset:0}
.carrusel__pieza{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .8s ease, visibility 0s linear .8s}
.carrusel__pieza.ahora{opacity:1;visibility:visible;
  transition:opacity .8s ease, visibility 0s}
html:not(.js) .carrusel__pieza.ahora{opacity:1;visibility:visible}
/* Las verticales están en la página pero no desfilan: son para el visor. Nunca
   reciben la clase que las enseña, así que con esto basta para que no cuenten
   como sitio ni reciban el clic. */
.carrusel__pieza--guardada{pointer-events:none}
.carrusel__pieza .foto{width:100%;height:100%;aspect-ratio:auto}
.carrusel__pieza .foto img{width:100%;height:100%;max-width:none;object-fit:cover}
/* Las dos flechas para andar el pase a mano. Discretas a propósito: son
   ayuda, no el asunto. En la misma transparencia que el nombre y con su misma
   sombra, porque debajo pasa cualquier fotografía. Antes de ellas había una
   franja con la foto siguiente asomando por el canto. */
.carrusel__flecha{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;display:grid;place-items:center;
  background:0;border:0;padding:0;cursor:pointer;
  color:color-mix(in oklab,var(--papel) 58%,transparent);
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.5));
  transition:color .2s ease}
.carrusel__flecha:hover,.carrusel__flecha:focus-visible{color:var(--papel)}
.carrusel__flecha[hidden]{display:none}
.carrusel__flecha--izq{left:clamp(.2rem,1.6vw,1.4rem)}
.carrusel__flecha--der{right:clamp(.2rem,1.6vw,1.4rem)}
.carrusel__flecha::before{content:'';width:15px;height:15px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor}
.carrusel__flecha--izq::before{transform:rotate(135deg) translate(-2px,-2px)}
.carrusel__flecha--der::before{transform:rotate(-45deg) translate(-2px,-2px)}
@media (prefers-reduced-motion: reduce){
  .carrusel__pieza{transition:none}
}
/* El nombre del proyecto encima, a media transparencia. Lleva una sombra
   suave porque debajo pasa cualquier fotografía: sin ella, sobre un cielo
   claro desaparecía. */
/* El nombre del proyecto sobre el pase. Hasta el 1 de octubre iba centrado y a
   media transparencia, como marca de agua; el cliente lo subió a la esquina de
   arriba a la izquierda, que es donde empieza a leerse la página. Sigue sin
   recibir el puntero: debajo está el pase, que se abre al pulsarlo. */
.carrusel__nombre{position:absolute;top:clamp(1.1rem,3.2vh,2.2rem);
  left:clamp(1.1rem,3.4vw,2.6rem);right:auto;bottom:auto;
  z-index:2;pointer-events:none;font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,3.2vw,2.6rem);line-height:1.08;text-align:left;
  margin:0;max-width:min(60ch,70%);color:var(--papel);
  -webkit-text-stroke:.6px color-mix(in oklab,#000 62%,transparent);
  paint-order:stroke fill;
  text-shadow:0 2px 3px color-mix(in oklab,#000 78%,transparent),
              0 4px 10px color-mix(in oklab,#000 60%,transparent),
              0 8px 26px color-mix(in oklab,#000 45%,transparent)}

/* Lo que va debajo del pase en la página de un proyecto. El cliente puso de
   referencia una ficha de Taller Aragonés: el nombre grande a la izquierda con
   su lugar y su año, la descripción en una columna desplazada hacia el centro
   y en cuerpo grande, y los datos detrás, del mismo tamaño y a la vista, sin
   nada que desplegar. Se probó en Villa G el 24 de septiembre y al día
   siguiente pasó a todos.

   Lo que había antes era la descripción a la izquierda y una ficha en columna
   a la derecha, con un guion que buscaba el cuerpo de la letra para que las
   dos acabaran a la misma altura. Sin dos columnas no hay nada que igualar. */
.bloque--proyecto{padding:clamp(3rem,7vw,6rem) 0 clamp(3rem,6vw,5rem)}
.proyecto__nombre{font-family:var(--display);font-weight:400;
  font-size:clamp(2.6rem,6.6vw,5.2rem);line-height:.98;letter-spacing:-.012em;
  text-transform:uppercase;margin:0}
.proyecto__sena{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.55rem);line-height:1.25;letter-spacing:.005em;
  color:var(--cemento);margin:.55rem 0 0}
/* La columna del texto arranca a un cuarto del ancho, como en el modelo, y de
   ahí hasta el margen. Es lo que la separa del nombre sin necesidad de una
   línea ni de un recuadro. */
.proyecto__texto,.proyecto__datos{margin-left:26%}
/* El aire grande es el del primero, que desde el 7 de octubre son los datos. */
.proyecto__datos{margin-top:clamp(2.8rem,6vw,5rem)}
.proyecto__texto{margin-top:clamp(2.6rem,5.5vw,4.5rem)}
/* La descripción de un proyecto es la excepción a lo de ensanchar. Se ensanchó
   el 7 de octubre con todo lo demás y el cliente la devolvió el mismo día a su
   sitio: aquí el texto es de cuerpo grande y en la tipografía de los titulares,
   y a ancho de columna entera cada renglón se hacía larguísimo.

   Vuelve también a bandera por la izquierda, que es lo que pidió. Con ella se va
   el partido de palabras: la división silábica estaba para que el texto
   justificado no abriera huecos entre palabras, y sin justificar no hace falta.

   El bloque se queda donde estaba, corrido al 26% de la envoltura, con su
   medida propia y el blanco a la derecha. */
.proyecto__texto p{font-family:var(--display);font-size:clamp(1.2rem,1.9vw,1.55rem);
  line-height:1.55;text-align:left;max-width:62ch;margin:0}
.proyecto__texto p+p{margin-top:1.2em}
.proyecto__datos{max-width:62ch}

.proyecto__parte+.proyecto__parte{margin-top:clamp(1.6rem,3vw,2.4rem)}
.proyecto__rotulo{font-family:var(--display);text-transform:uppercase;
  font-size:clamp(1.05rem,2vw,1.55rem);letter-spacing:.005em;font-weight:400;
  color:var(--vino);margin:0 0 .6rem}
.proyecto__datos .rotulos{border-top:0;margin:0;font-size:clamp(1rem,1.5vw,1.25rem)}
.proyecto__datos .rotulos div{grid-template-columns:minmax(10rem,38%) 1fr;
  gap:.15rem 1.4rem;padding:.42rem 0;border-bottom:0;align-items:baseline}
.proyecto__datos .rotulos dt{color:var(--tinta);font-weight:500}
.proyecto__datos .rotulos dd{color:var(--cemento);font-weight:400}
/* La marca de colaboración, detrás del nombre del proyecto en las listas y
   encabezando su ficha. Se quedó sin estas reglas al podar la maqueta vieja el
   25 de septiembre, y salía en negro y pegada al nombre. */
.colabora{color:var(--vino);font-weight:500;white-space:nowrap}
.indice__nombre .colabora{margin-left:.4em;font-size:.86em}
.mapa__lista .colabora{margin-left:.35em;font-size:.92em}
/* Encabezando la ficha del proyecto: en el tamaño de un subtítulo y en la
   tipografía de los titulares, para que se lea como lo que es y no como un
   apunte. */
.colabora--ficha{font-family:var(--display);font-weight:500;
  font-size:clamp(1.1rem,1.9vw,1.45rem);line-height:1.25;white-space:normal;
  margin:0 0 clamp(.9rem,1.8vw,1.3rem)}
.proyecto__datos .colabora--ficha{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
@media (max-width:900px){
  .proyecto__texto,.proyecto__datos{margin-left:0}
  .proyecto__datos .rotulos div{grid-template-columns:1fr}
}

/* Sin tope de ancho: son los titulares que el cliente quiere en una sola línea.
   Va en la hoja común y no en la de cada dirección, que es donde estaba y por
   eso solo hacía efecto en una: las dos tienen su propio h2.titulo con su tope
   en ch, y una regla de más peso tiene que existir en las dos. En pantalla
   estrecha el tamaño baja solo y el renglón se parte, que ahí no cabe de otra
   manera. */
h2.titulo.titulo--ancho,h1.titular.titulo--ancho{max-width:none}

/* Las cifras de un proyecto son de las pocas cosas que piden realce. */
.dato b{color:var(--vino)}

/* Fotos que son un enlace. Una imagen no se ve enlace por sí sola: al pasar
   por encima se tiñe de vino y aparece el rótulo. El velo no intercepta
   el cursor, así que el enlace de debajo sigue recibiendo el clic. */
.velo{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;
  background:color-mix(in oklab,var(--vino) 30%,transparent);
  opacity:0;transition:opacity .22s ease}
/* El rótulo va sobre vino llena y no sobre el velo: encima de una foto
   cualquiera el contraste es imprevisible, y sobre la vino llena el
   blanco cumple AA siempre. */
.velo>span{font-size:.68rem;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--papel);background:var(--vino);padding:.34rem .8rem;
  border-radius:var(--radio)}
a:hover .velo,a:focus-visible .velo{opacity:1}
@media (hover:none){
  /* Sin cursor no hay nada que revelar y el velo no llegaría a verse nunca. */
  .velo{display:none}
}

/* El pie de imagen. Hasta el 2 de octubre había una píldora arriba a la
   derecha que decía de cada imagen si era fotografía de obra, render o plano.
   El cliente la quitó: decir "real" en una fotografía es decir lo obvio, y
   tres etiquetas distintas sobre cada imagen hacían ruido. Queda una sola
   palabra, "render", y solo donde hace falta, abajo a la izquierda y del
   tamaño de un pie de foto.

   Se lee sobre cualquier imagen porque va sobre fondo oscuro traslúcido, que
   es lo que ya hacía la píldora; lo que cambia es el peso, no el contraste. */
.tipo{position:absolute;left:0;bottom:0;z-index:2;
  font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;font-weight:500;
  color:var(--papel);background:color-mix(in oklab,var(--tinta) 62%,transparent);
  padding:.26rem .6rem;backdrop-filter:blur(3px)}
/* El mismo pie, repetido por el visor a pantalla entera. Va centrado abajo y
   fijo a la ventana, no pegado a la esquina de la imagen: la imagen se ajusta
   al hueco y su esquina cae en un sitio distinto en cada fotografía.

   Lleva las dos clases en el selector a propósito. Con .visor__render a secas
   empataba con .tipo, que está escrita aquí mismo y más abajo, y ganaba .tipo:
   el pie se iba al borde izquierdo de la ventana y medio salía de ella. */
.visor__render.tipo{position:fixed;left:0;top:0;right:auto;bottom:auto;z-index:3}
.visor__render[hidden]{display:none}


/* ---------------------------------------------------------------------------
   B · Obra. La fotografía manda: ocupa el ancho completo y el tipo se coloca
   encima o en una columna angosta. Fondo blanco y bandas grises alternas.
   --------------------------------------------------------------------------- */
/* Todo blanco. La alternancia de bandas se quitó el 9 de septiembre porque el
   gris no gustó, así que lo único que separa un bloque del siguiente es el
   filete, igual que en Plano. */
:root{--fondo:var(--papel);--linea:color-mix(in oklab, var(--cemento) 30%, transparent);--cab-alto:72px}

/* Barra blanca con el logotipo en negro desde el 11 de septiembre. Antes era
   negra con el logotipo invertido, y sobre el video del hero eso era medio
   cartel; ahora el hero empieza justo debajo de la barra. */
.cabecera{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--cab-alto);
  display:flex;align-items:center;color:var(--tinta);
  background:var(--papel);border-bottom:var(--filete) solid var(--linea);
  transition:background .25s ease, color .25s ease}
.cabecera.fija,.cabecera--solida{background:var(--papel);color:var(--tinta)}
body.con-cabecera-solida{padding-top:var(--cab-alto)}
.cabecera__fila{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.cabecera .nav__sub{background:var(--papel);border-color:var(--linea)}
.cabecera .nav__sub a{color:var(--tinta)}
.cabecera .nav__sub a:hover{background:var(--vino-tenue)}

:root{--aire-bloque:clamp(2.2rem,4.6vw,4.2rem)}
.bloque{padding:var(--aire-bloque) 0}
.bloque--apunte{padding:calc(var(--aire-bloque) * .34) 0}
/* Dos bloques que en realidad son el mismo paso de lectura: el nombre de un
   proyecto y sus fotos, o la ficha y el cierre. Con el aire entero de cada uno
   quedaban catorce rem de blanco en medio, que se lee como si faltara algo.
   El de arriba corta su aire de abajo y se queda sin filete; el de abajo
   arranca pegado. */
.bloque--corta-abajo{padding-bottom:calc(var(--aire-bloque) * .45);border-bottom:0}
.bloque--corta-arriba{padding-top:calc(var(--aire-bloque) * .15)}
/* La clase sigue puesta en el HTML y ya no pinta nada: se conserva para no
   tocar los generadores de todas las páginas y porque el día que vuelva a
   haber una banda, este es su sitio. */
.bloque--claro{background:transparent}
.bloque--oscuro{background:var(--tinta);color:var(--papel)}
.bloque--oscuro .entrada,.bloque--oscuro .cuerpo p{color:color-mix(in oklab,var(--papel) 72%, transparent)}
.bloque--oscuro .foto::after{background:var(--tinta);color:color-mix(in oklab,var(--papel) 60%,transparent)}

.rejilla{display:grid;grid-template-columns:1fr;gap:clamp(1.5rem,3vw,2.5rem)}
.rotulo{display:flex;gap:1rem;align-items:baseline;padding-bottom:.4rem;
  font-size:.82rem;color:var(--cemento)}
.rotulo b{color:inherit;font-weight:600;font-size:.95rem}
.rotulo .clave{font-variant-numeric:tabular-nums;color:var(--cemento)}
.bloque--oscuro .rotulo{color:color-mix(in oklab,var(--papel) 62%,transparent)}

/* Los anchos de medida, revisados el 7 de octubre. El cliente pidió aprovechar
   el blanco: que las líneas lleguen casi al borde de la columna y que cada
   texto ocupe los menos renglones posibles.

   Los titulares no llevan tope: un titular se lee de un vistazo y partirlo en
   dos cuando cabe en uno es perder altura sin ganar nada. En la página de
   proyectos, el de "Diecisiete proyectos en los últimos 5 años" iba a 579 px
   dentro de una columna de 1177 y salía en dos renglones.

   Segunda vuelta, el 7 de octubre por la tarde: el cliente miró lo anterior y
   siguió viendo blanco a la derecha. En la página de nosotros la entrada se
   quedaba en 1.078 px dentro de una envoltura de 1.360, que son 282 px vacíos.
   Los topes de medida se quitan del todo: ahora el ancho lo pone el hueco donde
   va cada texto, y el hueco ya está topado por .envoltura en 1.360 px.

   Queda dicho una vez y no se repite: a ese ancho una línea pasa de los ciento
   veinte caracteres, bastante por encima de lo que recomienda cualquier manual
   de composición, y al volver al principio del renglón el ojo pierde la línea
   más a menudo. Es lo que se pidió, dos veces, y así queda. */
h1.titular{font-family:var(--display);font-size:clamp(2rem,4.1vw,3.3rem);font-weight:500;
  letter-spacing:-.006em;line-height:1.1}
h2.titulo{font-family:var(--display);font-size:clamp(1.55rem,2.7vw,2.3rem);font-weight:500;
  letter-spacing:-.004em;line-height:1.16}
h3.sub{font-size:1.15rem;font-weight:600}
.entrada{font-size:clamp(1.02rem,1.5vw,1.22rem);color:var(--cemento)}
.cuerpo{display:grid;gap:1rem}

/* Hero a sangre, el video carga todo el peso */
.hero{position:relative;min-height:calc(100svh - var(--cab-alto));display:flex;
  align-items:flex-start;color:var(--papel);overflow:hidden}
/* Sin velo desde el 30 de septiembre. Oscurecía la fotografía y, de paso,
   apagaba el pie: iba en z-index 1 y el pie vive dentro de .hero-media, que
   abre su propia pila en el 0, así que ningún hijo suyo podía subir por encima
   por mucho z-index que se le diera. El texto se sostiene ahora con su propia
   sombra, que solo pesa donde hay letra. */
.hero .hero-media{z-index:0}
/* El titular del hero. Llevaba un filete alrededor de cada letra, y sobre una
   fotografía clara ese filete se leía como un borde gris sucio en vez de como
   un contorno: el cliente lo avisó el 12 de octubre. Fuera el filete, y en su
   lugar tres sombras negras encajadas.

   Tres y no una a propósito. La primera es dura y pegada a la letra, y es la
   que la despega de un fondo claro; la segunda abre un poco y rellena; la
   tercera es ancha y suave, y oscurece el aire alrededor sin que se note de
   dónde viene. Una sola sombra ancha no basta contra un cielo blanco y una sola
   dura se ve como un doble de la letra. */
.hero__texto{position:relative;z-index:2;padding-top:clamp(2.2rem,6vh,4rem);
  text-shadow:0 1px 2px color-mix(in oklab,#000 86%,transparent),
              0 2px 8px color-mix(in oklab,#000 72%,transparent),
              0 6px 30px color-mix(in oklab,#000 58%,transparent)}
/* El titular del hero es el único que se queda grande, pero cabiendo en tres
   renglones: se le da más ancho de caja en vez de más cuerpo. */
/* El titular del hero va en versales: el cliente lo escribió así. El texto se
   guarda con sus mayúsculas y minúsculas de verdad, que es lo que leen el
   buscador y el lector de pantalla, y las versales las pone el CSS.

   Medido para que caiga en tres renglones y no en cuatro. La caja se da en ch,
   que es el ancho del cero, y en versales cada letra ocupa bastante más que
   eso: por eso 26ch dan unos veinte caracteres por renglón y no veintiséis. */
.hero .titular{font-size:clamp(1.55rem,3vw,2.35rem);max-width:34ch;
  text-transform:uppercase;letter-spacing:.005em;line-height:1.16}
.hero__pie{display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:end;margin-top:1.8rem}
/* Sin el renglón que había a la izquierda, el botón se queda solo y va al
   principio, no colgando del borde derecho. */
.hero__pie--solo{grid-template-columns:auto;justify-content:start}
.hero__datos{display:flex;flex-wrap:wrap;gap:1.2rem 2.4rem}

.cifras{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem}
.cifra b{display:block;font-size:clamp(1.9rem,4vw,3rem);font-weight:300;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.cifra span{font-size:.82rem;color:var(--cemento)}
.bloque--oscuro .cifra span,.hero .cifra span{color:color-mix(in oklab,var(--papel) 62%,transparent)}

/* Proyectos como mosaico de foto, no como tabla */
.indice{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1.2rem}
.indice__fila{display:block;text-decoration:none;color:inherit;position:relative}
.indice__fila .foto{aspect-ratio:4/3;margin-bottom:.8rem}
.indice__clave{font-size:.78rem;color:var(--cemento);font-variant-numeric:tabular-nums}
.indice__nombre{font-size:1.2rem;font-weight:500;margin-top:.15rem}
.indice__meta{font-size:.84rem;color:var(--cemento);display:block}

.fichas{display:grid;grid-template-columns:repeat(auto-fill,minmax(20rem,1fr));gap:1.2rem}
.ficha{text-decoration:none;color:inherit;display:grid;gap:.7rem;align-content:start}
.ficha .foto{aspect-ratio:3/2}
.ficha__clave{font-size:.78rem;color:var(--cemento);font-variant-numeric:tabular-nums}
.ficha__nombre{font-size:1.24rem;font-weight:500}
.ficha__meta{font-size:.84rem;color:var(--cemento)}

.rotulos{font-size:.88rem}
.rotulos div{display:grid;grid-template-columns:minmax(8rem,34%) 1fr;gap:1rem;
  padding:.5rem 0;border-bottom:var(--filete) solid var(--linea)}
.rotulos dt{color:var(--cemento)}
.rotulos dd{margin:0;font-weight:500}

.datos{display:flex;flex-wrap:wrap;gap:2.4rem}
.dato b{display:block;font-size:clamp(1.5rem,3vw,2.3rem);font-weight:300;letter-spacing:-.035em;
  font-variant-numeric:tabular-nums}
.dato span{font-size:.8rem;color:var(--cemento);max-width:16ch;display:block}

.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(17rem,1fr));gap:1.2rem}
.galeria--sangre{width:100%;grid-template-columns:repeat(auto-fill,minmax(22rem,1fr));gap:2px}

.ciclo{counter-reset:paso;display:grid;gap:2px;background:var(--linea-suave)}
.ciclo__paso{display:grid;grid-template-columns:4.5rem 1fr;gap:1.5rem;background:var(--vino-tenue);
  color:var(--tinta);padding:1.7rem;opacity:0;transform:translateY(10px);
  transition:opacity .5s ease, transform .5s ease}
.ciclo__paso.visible{opacity:1;transform:none}
.ciclo__n{font-size:.84rem;color:color-mix(in oklab,var(--tinta) 62%,transparent);
  font-variant-numeric:tabular-nums}
.ciclo__paso h3{font-size:1.15rem;font-weight:600;margin-bottom:.4rem}
/* Sin tope de ancho: en una columna de media pantalla, 62ch cortaban el texto
   a la mitad de su caja y parecía un error de maqueta. Quien pone el límite de
   línea aquí es la propia columna. */
.ciclo__paso p{color:color-mix(in oklab,var(--tinta) 78%,transparent)}

:root{--mapa-tierra:color-mix(in oklab,var(--vino) 13%,var(--papel));
  --mapa-linea:color-mix(in oklab,var(--vino) 38%,transparent)}
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.5rem}
.area{background:var(--papel);border:var(--filete) solid var(--linea);
  padding:1.6rem;display:grid;gap:.8rem;align-content:start}
.area h3{font-size:1.08rem;font-weight:600;padding-bottom:.6rem;
  border-bottom:var(--filete) solid var(--vino-filo)}
.area li{font-size:.88rem;color:var(--cemento);padding:.28rem 0}

.principios{display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));gap:2rem 2.5rem}
.principio h3{font-size:1.04rem;font-weight:600;margin-bottom:.5rem}
.principio p{font-size:.9rem;color:var(--cemento)}

.persona__cargo{font-size:.88rem;color:var(--cemento)}
.persona__cifras{display:flex;gap:1.6rem;margin:1rem 0}
.persona__caps{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.persona__caps li{font-size:.78rem;padding:.28rem .65rem;color:var(--cemento);
  border:var(--filete) solid var(--vino-filo)}

.aliados{display:flex;flex-wrap:wrap;gap:.5rem}
.aliados li{font-size:.83rem;padding:.35rem .75rem;color:var(--cemento);
  border:var(--filete) solid var(--vino-filo)}

.contacto{display:grid;grid-template-columns:minmax(16rem,34%) 1fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.pendientes{background:var(--vino-tenue);color:var(--tinta);padding:1.5rem 1.7rem;font-size:.86rem;display:grid;gap:.6rem}
.pendientes b{font-weight:600}
.pendientes li{padding-left:1rem;position:relative}
.pendientes li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--tinta)}

@media (max-width:900px){
  .contacto{grid-template-columns:1fr}
  .cifras{grid-template-columns:repeat(2,1fr)}
  .hero__pie{grid-template-columns:1fr}
}