:root {
  --dark: #514136;
  --black: #0a0a0a;
  --red: #610500;
  --sand: #ded6c8;
  --cream: #f2e9de;
  --gold: #e5b861;
  --ink: #2b2119;
  --ink-muted: #6b5d50;
  /* alto del logo del header. La marca es el logotipo dorado suelto (sin la
     bajada ni los arcos), que es casi diez veces mas ancho que alto: a 60px
     medía 570px y no entraba en la barra.

     Se mide el logo y no el padding: la barra mantiene su alto (--header-h) y
     lo que sobra queda como aire alrededor. */
  --logo-h: 22px;
  /* Alto real de la barra. Lo usan tres cosas: el aire alrededor de la marca,
     el menu mobile —que arranca justo debajo— y la trama del hero, que la
     continua sin salto. Por eso el header lo fija como height y no lo deja
     salir del contenido: si dependiera del contenido, agrandar la marca
     achicaria el aire en vez de agrandar la barra. */
  --header-h: 100px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Archivo', sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

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

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

.eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
  padding: 0 48px;
  background: var(--dark);
  position: relative;
  z-index: 100;
}

/* La trama arranca en el header y sigue en el hero.
   Cortada justo en el borde de la barra, el mismo marron se leia como dos
   bloques distintos: una franja lisa arriba y la trama empezando de golpe.
   El desfase negativo del hero es exactamente el alto del header, asi el
   mosaico de 200px cruza el limite en fase y la union desaparece. */
/* La trama del header se apago a pedido del cliente (ronda del 2026-09-01):
   about, projects y contact llevan el mismo marron liso que la home. La clase
   se conserva porque el hero interior la coordina; si vuelve a pedirse la
   trama, alcanza con devolver el background-image aca y en .hero-pattern. */
.site-header.header-pattern {
  background-color: var(--dark);
}

/* Los estilos de texto que tenia .site-logo eran de cuando la marca era una
   palabra escrita, antes de que hubiera archivo: no pintaban nada. */
.site-logo {
  display: block;
  color: var(--gold);
}

.site-logo img {
  height: var(--logo-h);
  /* sin esto manda el atributo width del <img> y la caja queda del ancho del
     archivo, con el logo flotando en el medio en vez de pegado a la izquierda */
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cream);
}

.site-nav a {
  opacity: .85;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
}

.site-nav a:hover,
.site-nav a.active {
  opacity: 1;
  color: var(--gold);
  border-color: var(--gold);
}

/* Instagram y LinkedIn al final del nav.
   Van envueltos porque el par tiene que leerse como una unidad: uno solo es el
   item flex, con 36px hasta "Contact us" y 18 entre ellos. Sueltos quedaban a
   36 de todo y parecian dos items mas del menu.

   Los iconos son SVG en el markup y no una fuente ni un archivo: son dos, usan
   currentColor —asi el dorado del hover sale gratis— y no suman una peticion. */
.nav-social {
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-social a {
  display: flex;
  padding: 0;
  /* .site-nav a subraya en el hover; sobre un icono eso es una raya suelta */
  border: 0;
}

.nav-social a:hover {
  color: var(--gold);
  opacity: 1;
}

.nav-social svg {
  width: 17px;
  height: 17px;
  display: block;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--cream);
  font-size: 22px;
  cursor: pointer;
}

@media (max-width:900px) {
  /* Mismo criterio que en desktop, todo un punto mas chico. */
  :root {
    --logo-h: 19px;
    --header-h: 84px;
  }

  .site-header {
    padding: 0 20px;
  }

  .site-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--black);
    flex-direction: column;
    align-items: flex-start;
    padding: 32px 32px;
    gap: 0;
    display: none;
    overflow-y: auto;
  }

  .site-nav.open {
    display: flex;
  }

  /* En el menu apilado cada item ocupa el ancho entero y su borde inferior es
     el separador, asi que tienen que ser bloques. */
  .site-nav a {
    padding: 14px 0;
    display: block;
    width: 100%;
    line-height: 18px;
    border-bottom: 1px solid rgba(242, 233, 222, .08);
  }

  /* En el menu apilado la raya es el separador entre items, no el subrayado del
     link: pintarla de dorado en el activo dibuja una barra de lado a lado que se
     lee como division de secciones. Los separadores quedan todos iguales y el
     activo se distingue por el texto dorado, que ya viene de la regla de arriba. */
  .site-nav a:hover,
  .site-nav a.active {
    border-bottom-color: rgba(242, 233, 222, .08);
  }

  /* En el menu apilado los dos iconos van en fila, no uno abajo del otro:
     .site-nav a los blockifica y los estiraria al ancho entero con su
     separador, como si fueran dos items mas. */
  .nav-social {
    width: 100%;
    padding: 20px 0 0;
    gap: 24px;
  }

  .nav-social a {
    width: auto;
    display: flex;
    padding: 0;
    border-bottom: 0;
  }

  .nav-social svg {
    width: 20px;
    height: 20px;
  }

  .menu-toggle {
    display: block;
  }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--dark);
  color: var(--cream);
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
}

.hero img.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .55;
}

.hero .arc {
  position: absolute;
  border: 1px solid rgba(229, 184, 97, .35);
  border-radius: 50%;
  width: 480px;
  height: 480px;
}

.hero .arc.h1 {
  top: -240px;
  left: 15%;
}

.hero .arc.h2 {
  bottom: -240px;
  left: 15%;
}

.hero .arc.h3 {
  top: -240px;
  right: 15%;
}

.hero .arc.h4 {
  bottom: -240px;
  right: 15%;
}

.hero-content {
  position: relative;
  z-index: 1;
  max-width: 640px;
}

.hero .eyebrow {
  color: var(--gold);
  margin-bottom: 18px;
}

.hero h1 {
  font-size: 48px;
  letter-spacing: .15em;
  font-weight: 500;
  margin-bottom: 20px;
  line-height: 1.15;
}

.hero p {
  font-size: 16px;
  color: rgba(242, 233, 222, .85);
  line-height: 1.6;
  margin-bottom: 32px;
}

.hero.small {
  min-height: 320px;
  padding: 64px 24px;
}

.hero.small h1 {
  font-size: 36px;
  letter-spacing: .08em;
}

.btn-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  padding: 14px 30px;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid var(--gold);
  cursor: pointer;
  background: none;
  font-family: inherit;
  transition: opacity .2s;
}

.btn.solid {
  background: var(--gold);
  color: var(--black);
}

.btn.ghost {
  color: var(--cream);
  border-color: rgba(242, 233, 222, .4);
}

.btn.on-light {
  border-color: var(--red);
  color: var(--red);
}

.btn:hover {
  opacity: .85;
}

/* ---------- intro / split blocks ---------- */
.intro-strip {
  background: var(--sand);
  padding: 72px 48px;
}

.intro-strip .grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.intro-strip h2 {
  font-size: 26px;
  font-weight: 500;
  line-height: 1.3;
}

.intro-strip .body p {
  font-size: 14px;
  line-height: 1.8;
  color: #4a3d32;
}

.intro-strip .stat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .15);
  font-size: 13px;
  letter-spacing: .05em;
}

.split-block {
  padding: 64px 48px;
}

.split-block .grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.split-block h2 {
  font-size: 24px;
  font-weight: 500;
  line-height: 1.35;
}

.split-block .body p {
  font-size: 14px;
  line-height: 1.85;
  color: #4a3d32;
  margin-bottom: 14px;
}

.section-label {
  text-align: center;
  padding: 56px 24px 0;
}

.section-label .eyebrow {
  color: var(--ink-muted);
}

.section-label h2 {
  font-size: 28px;
  font-weight: 500;
  margin-top: 10px;
}

/* ---------- cards ---------- */
/* Cada proyecto es una caja con su borde y separada de la de al lado.
   Antes la grilla tenia gap de 1px sobre un fondo gris: lo unico que dividia
   una propiedad de la siguiente era una linea, y las tres se leian como una
   sola tira. */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 40px 24px;
}

.card-grid.two {
  grid-template-columns: repeat(2, 1fr);
}

.proj-card {
  background: var(--cream);
  border: 1px solid rgba(0, 0, 0, .12);
  display: flex;
  flex-direction: column;
  transition: border-color .25s, box-shadow .25s;
}

.proj-card:hover {
  border-color: rgba(0, 0, 0, .26);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .10);
}

.proj-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  position: relative;
  background: var(--sand);
}

.proj-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* el zoom lo recorta el overflow:hidden de .proj-img */
  transition: transform .7s cubic-bezier(.2, .6, .2, 1);
}

.proj-card:hover .proj-img img {
  transform: scale(1.07);
}

/* La cortina y el rotulo "View property", como en pumayna.com.
   Van como pseudo-elementos de .proj-img y no como markup propio: la card se
   repite 59 veces en la maqueta (home, listado y el bloque "Other projects" de
   cada ficha) y asi no hay 59 lugares donde se pueda desincronizar. El texto es
   decorativo y no hace falta que este en el DOM: la card entera ya es un link
   que se anuncia con la direccion.

   Quedan debajo de .tag, que tiene z-index 2: la cinta de Featured o Sold se
   tiene que seguir leyendo con la cortina puesta. */
.proj-img::before {
  content: 'View property';
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  /* deja el hueco de abajo para la flecha */
  padding-bottom: 36px;
  background: rgba(10, 10, 10, .5);
  color: var(--cream);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  /* letter-spacing agrega el espacio tambien despues de la ultima letra, que
     corre el texto medio caracter a la izquierda; el text-indent lo compensa */
  text-indent: .3em;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}

/* La flecha va dibujada y no como caracter: Archivo no trae la flecha larga y
   cada sistema la sustituia con una fuente distinta, con otro grosor y otro
   largo. Asi mide siempre lo mismo. */
.proj-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='12' viewBox='0 0 46 12'%3E%3Cpath d='M0 6h43M37.5 1 43 6l-5.5 5' fill='none' stroke='%23f2e9de' stroke-width='1.1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center calc(50% + 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s .05s;
}

/* focus-within ademas de hover: llegando por teclado tambien se ve */
.proj-card:hover .proj-img::before,
.proj-card:hover .proj-img::after,
.proj-card:focus-within .proj-img::before,
.proj-card:focus-within .proj-img::after {
  opacity: 1;
}

/* Un puntero que no puede hacer hover (telefono, tablet) se queda con el
   ultimo estado tocado pegado hasta que se toca otra cosa: ni el zoom ni la
   cortina tienen como volver atras, y la cortina ademas taparia la foto. */
@media (hover: none) {
  .proj-card:hover .proj-img img {
    transform: none;
  }

  .proj-img::before,
  .proj-img::after {
    content: none;
  }
}

.tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--red);
  color: var(--cream);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 10px;
  z-index: 2;
}

.proj-body {
  padding: 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.proj-body .kicker {
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #a08f7c;
  margin-bottom: 6px;
}

.proj-body h3 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.proj-body .loc {
  font-size: 12px;
  color: #6b5d50;
  margin-bottom: 12px;
}

.proj-body .specs {
  font-size: 12px;
  color: #4a3d32;
  letter-spacing: .02em;
  margin-top: auto;
  padding-top: 10px;
}

.proj-card a.card-link {
  display: block;
  color: inherit;
}

/* ---------- values ---------- */
.values-strip {
  background: var(--dark);
  color: var(--cream);
  padding: 72px 48px;
}

.values-strip .head {
  max-width: 600px;
  margin: 0 auto 40px;
  text-align: center;
}

.values-strip .head .eyebrow {
  color: var(--gold);
}

.values-strip .head h2 {
  font-size: 26px;
  font-weight: 500;
  margin-top: 10px;
}

.values-mini {
  max-width: 1040px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.values-mini .v h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--gold);
}

.values-mini .v p {
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(242, 233, 222, .75);
}

.values-full {
  padding: 72px 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.values-full-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 36px;
}

.values-full-grid .v {
  padding-left: 20px;
  border-left: 2px solid var(--gold);
}

.values-full-grid .v h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.values-full-grid .v p {
  font-size: 13.5px;
  line-height: 1.7;
  color: #4a3d32;
}

/* ---------- vision / quote ---------- */
.vision-block {
  background: var(--black);
  color: var(--cream);
  text-align: center;
  padding: 88px 24px;
}

.vision-block .eyebrow {
  color: var(--gold);
  margin-bottom: 20px;
}

.vision-block p {
  font-size: 26px;
  font-weight: 400;
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.5;
  font-style: italic;
}

/* ---------- process ---------- */
.process-strip {
  background-color: var(--dark);
  background-image: url('../images/pattern-arcs.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--cream);
  padding: 64px 48px;
}

.process-strip .inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 40px;
  align-items: center;
}

.process-strip .section-kicker {
  color: var(--cream);
  font-size: 26px;
}

.process-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

.process-photo {
  width: 100%;
  aspect-ratio: 5/8;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--sand);
}

.process-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.process-row .p .num {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 10px;
}

.process-row .p h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--cream);
}

.process-row .p p {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(242, 233, 222, .75);
}

@media (max-width:900px) {
  .process-strip .inner {
    grid-template-columns: 1fr;
  }
}

/* ---------- founders ---------- */
.founders {
  padding: 72px 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.founders-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 36px;
}

.founder-card {
  background: var(--sand);
  border: 1px solid rgba(0, 0, 0, .10);
  padding: 40px 36px 44px;
  text-align: center;
}

/* El ovalo repite la forma de las fotos del proceso, que es la de la marca.
   Era un circulo de 64px: a ese tamaño la cara no se distinguia, asi que
   nunca se le habian cargado las fotos y quedaba como una mancha oscura. */
.founder-photo {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 5/8;
  border-radius: 999px;
  overflow: hidden;
  background: var(--dark);
  border: 2px solid var(--gold);
  margin: 0 auto 24px;
}

.founder-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-card h4 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.founder-card .role {
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--red);
  margin: 8px 0 16px;
}

.founder-card p {
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a3d32;
  max-width: 380px;
  margin: 0 auto;
}

/* ---------- partners ---------- */
.partners-strip {
  padding: 56px 48px;
  text-align: center;
}

.partners-strip .eyebrow {
  color: var(--ink-muted);
  margin-bottom: 24px;
}

.partner-logos {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6b5d50;
}

.partners-full {
  background: var(--dark);
  color: var(--cream);
  padding: 72px 48px;
}

.partners-full .head {
  text-align: center;
  margin-bottom: 40px;
}

.partners-full .eyebrow {
  color: var(--gold);
}

.partners-full .head h2 {
  font-size: 26px;
  font-weight: 500;
  margin-top: 10px;
}

/* Flex y no grilla de 3: son cinco partners, asi que la segunda fila tiene dos
   y en una grilla quedaban pegados a la izquierda, con un hueco a la derecha.
   Envolviendo con justify-content:center la fila incompleta queda centrada. */
.partner-quote-grid {
  max-width: 1040px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 32px;
}

.pq {
  flex: 0 1 300px;
}

.pq {
  text-align: center;
}

.pq h5 {
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.pq p {
  font-size: 12.5px;
  line-height: 1.7;
  color: rgba(242, 233, 222, .8);
  font-style: italic;
}

/* ---------- cta ---------- */
/* Beige y no bordo, a pedido del cliente (ronda del 2026-09-01): es el mismo
   --sand del banner de "Our values", que es el bloque que senalo. La trama se
   mantiene, con su propia variante: el trazo de pattern-arcs-red es mas oscuro
   que el bordo y sobre un fondo claro se leeria como una reja. */
.cta-block {
  background-color: var(--sand);
  background-image: url('../images/pattern-arcs-sand.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--ink);
  text-align: center;
  padding: 80px 24px;
}

/* El boton traia border-color:var(--cream) en un style inline repetido en los
   18 HTML. Sobre beige era invisible: se resuelve una vez aca. */
.cta-block .btn {
  border-color: var(--ink);
  color: var(--ink);
}

.cta-block .btn:hover {
  background: var(--ink);
  color: var(--sand);
}

.cta-block h2 {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 14px;
}

.cta-block p {
  font-size: 14px;
  opacity: .9;
  margin-bottom: 28px;
}

/* ---------- filters ---------- */
.filter-bar {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 32px 48px;
  background: var(--sand);
}

.filter-bar button {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 9px 18px;
  border: 1px solid rgba(0, 0, 0, .15);
  color: #4a3d32;
  background: none;
  cursor: pointer;
  font-family: inherit;
}

.filter-bar button.on {
  background: var(--black);
  color: var(--cream);
  border-color: var(--black);
}

/* ---------- listing detail ---------- */
.listing-specs {
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 36px 24px;
  background: var(--sand);
  text-align: center;
}

.listing-specs .s .n {
  font-size: 20px;
  font-weight: 600;
}

.listing-specs .s .l {
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 4px;
}

.listing-desc {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 48px;
  text-align: center;
}

.listing-desc p {
  font-size: 15px;
  line-height: 1.9;
  color: #4a3d32;
}

/* El reset de arriba deja los <p> sin margen. Las primeras 10 fichas tienen un
   solo parrafo y no se notaba; las que vienen del CMS traen varios y quedaban
   pegados. Solo separa a partir del segundo, asi las de un parrafo no cambian. */
.listing-desc p + p {
  margin-top: 20px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 0 48px 64px;
  max-width: 1120px;
  margin: 0 auto;
  /* Sin esto una foto vertical estira toda su fila y las horizontales de al
     lado quedan con un hueco debajo. */
  align-items: start;
}

.gallery-grid img {
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
}

/* Las propiedades en obra traen fotos verticales de 3:4, sacadas con telefono.
   Recortadas al 4:3 de la grilla se perdia mas de la mitad de la imagen, asi
   que conservan su proporcion: con el aspect-ratio igual al del archivo,
   object-fit: cover no recorta nada. La clase la pone la plantilla mirando las
   medidas del adjunto, no hay que acordarse de escribirla. */
.gallery-grid img.is-portrait {
  aspect-ratio: 3/4;
}

/* planos y elevaciones: fondo blanco + contain, no cover — los planos no se recortan */
.plans-block {
  background: var(--sand);
  padding: 56px 48px 64px;
}

.plans-block .head {
  text-align: center;
  margin-bottom: 28px;
}

.plans-block .head .eyebrow {
  color: var(--ink-muted);
}

.plans-block .head h2 {
  font-size: 24px;
  font-weight: 500;
  margin-top: 10px;
}

.plans-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.plans-grid a {
  display: block;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .12);
  transition: border-color .2s;
}

.plans-grid a:hover {
  border-color: var(--red);
}

.plans-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: contain;
  background: #fff;
  padding: 8px;
}

@media (max-width:900px) {
  .plans-block {
    padding-left: 20px;
    padding-right: 20px;
  }

  .plans-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ---------- contact ---------- */
/* La columna de la derecha repetia telefonos, mail, oficina y redes, que ya
   estan en el footer de todas las paginas. Sacada, queda el formulario solo:
   centrado y dentro de una caja, para que no flote suelto sobre la franja. */
.contact-split {
  background: var(--sand);
  padding: 64px 24px 72px;
}

.contact-form {
  background: var(--cream);
  border: 1px solid rgba(0, 0, 0, .12);
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 44px;
}

.contact-form .field {
  margin-bottom: 20px;
}

.contact-form label {
  display: block;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 6px;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, .15);
  background: #fff;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}

.contact-form textarea {
  min-height: 110px;
  resize: vertical;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 1px solid var(--red);
}

.form-note {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 10px;
}

/* ---------- footer ---------- */
.site-footer {
  background: var(--black);
  color: var(--cream);
  padding: 64px 48px 32px;
}

.site-footer .foot-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 32px;
  max-width: 1120px;
  margin: 0 auto;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(242, 233, 222, .15);
}

.site-footer .foot-logo img {
  height: 22px;
  width: auto;
}

.site-footer .foot-cols {
  display: flex;
  gap: 64px;
  font-size: 13px;
  line-height: 2.1;
  color: rgba(242, 233, 222, .7);
  flex-wrap: wrap;
}

.site-footer .foot-cols strong {
  color: var(--cream);
  font-weight: 600;
}

.site-footer .foot-bottom {
  max-width: 1120px;
  margin: 0 auto;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(242, 233, 222, .5);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

@media (max-width:900px) {

  .card-grid,
  .card-grid.two,
  .founders-grid,
  .gallery-grid {
    grid-template-columns: 1fr;
  }

  .contact-split {
    padding: 40px 20px 48px;
  }

  .contact-form {
    padding: 32px 24px 36px;
  }

  .process-row {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Los pasos son cinco y las columnas dos, asi que el 05 cae solo en la
     ultima fila y quedaba pegado a la izquierda con la mitad derecha vacia.
     Toma las dos columnas y se centra, pero conservando el ancho de una: si
     se dejara estirar, la foto —que es width:100% con aspecto 5/8— pasaria al
     doble de alto que las otras cuatro.

     :last-child:nth-child(odd) es "el ultimo y en posicion impar", que en una
     grilla de dos columnas es exactamente "quedo solo en su fila". Con un
     numero par de pasos no aplica y no hay nada que centrar. */
  .process-row .p:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    width: calc(50% - 10px);
    margin-inline: auto;
  }

  .values-mini,
  .values-full-grid {
    grid-template-columns: 1fr;
  }

  .intro-strip .grid,
  .split-block .grid {
    grid-template-columns: 1fr;
  }

  .wrap,
  .intro-strip,
  .split-block,
  .values-full,
  .process-strip,
  .founders,
  .card-grid,
  .filter-bar,
  .gallery-grid,
  .listing-desc {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* "Our process" y "The founders" eran los dos unicos titulos alineados a la
     izquierda en una pagina toda centrada. En desktop tiene sentido: conviven
     con una grilla al costado y el flanco izquierdo es el que ordena. Apilados
     en una sola columna ya no ordenan nada y quedaban descolgados. */
  .process-strip .section-kicker,
  .founders .section-kicker {
    text-align: center;
  }

  /* el padding de arriba viene a reemplazar al margen lateral, no a sumarse:
     los dos juntos dejaban 68px por lado y la card se quedaba con 254px de los
     390 de pantalla */
  .card-grid {
    margin-left: 0;
    margin-right: 0;
  }

  .hero h1 {
    font-size: 32px;
  }

  /* Safari en iOS hace zoom solo al enfocar un campo de menos de 16px, y deja
     la pagina corrida y agrandada. Los 13px del diseño quedan en desktop. */
  .contact-form input,
  .contact-form textarea {
    font-size: 16px;
  }

  /* El footer se habia quedado en los 48px de padding lateral del desktop,
     igual que la seccion de partners: de los 390px de pantalla, 96 eran aire a
     los costados. Con 20px, como el resto del sitio, las columnas respiran. */
  .site-footer {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Las tres columnas eran un flex con gap de 64px. En mobile entraban dos por
     fila y Follow caia sola a la segunda, desalineada y con un hueco vertical
     grande: la altura de la fila la fijaba Navigate, que tiene cuatro items.
     Con grilla de dos columnas las tres quedan alineadas entre si. */
  .site-footer .foot-cols {
    display: grid;
    /* auto-fit y no un numero fijo: en un telefono entran dos columnas y en una
       tablet las tres, sin agregar otro breakpoint. Los 140px son el minimo que
       necesita "+1 (305) 985 8123" para no cortarse. */
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 28px 20px;
    width: 100%;
  }
}


/* ---------- home: fullscreen video hero ---------- */
.hero.hero-video-wrap {
  min-height: 100vh;
  padding: 0;
  overflow: hidden;
  background-color: var(--dark);
  background-image: url('../images/hero-home-photo.jpg');
  background-size: cover;
  background-position: center;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  background: var(--dark);
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* el gradiente lineal solo bajaba a .12 justo a la altura del lockup, y el
     dorado se perdia contra el cielo y la fachada clara. La viñeta radial
     oscurece detras del texto y deja los bordes de la foto con luz */
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(10, 10, 10, .5) 0%, rgba(10, 10, 10, 0) 100%),
    linear-gradient(180deg, rgba(10, 10, 10, .4) 0%, rgba(10, 10, 10, .14) 42%, rgba(10, 10, 10, .6) 100%);
}

.hero-content--brand {
  z-index: 2;
}

.brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.brand-word {
  font-size: 58px;
  letter-spacing: .32em;
  font-weight: 500;
  color: var(--gold);
  line-height: 1;
}

/* La raya va debajo de la bajada, no entre la bajada y el nombre: el nombre y
   "Envisioning Lifestyles" son la marca y tienen que leerse juntos. Asi la raya
   pasa a separar la marca de la frase de abajo, que es lo que separa de verdad.
   Y va en dorado pleno: con opacidad quedaba de un tostado apagado. */
.brand-rule {
  width: 44px;
  height: 1px;
  background: var(--gold);
  margin: 22px 0;
}

.brand-tagline {
  font-size: 12px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--cream);
  margin-top: 14px;
}

.brand-sub {
  font-size: 14px;
  color: rgba(242, 233, 222, .8);
  letter-spacing: .02em;
  font-weight: 400;
}

.scroll-cue {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: var(--cream);
  font-size: 20px;
  opacity: .75;
  line-height: 1;
  animation: bob 2.2s ease-in-out infinite;
}

@keyframes bob {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 8px);
  }
}

@media (max-width:900px) {
  .brand-word {
    font-size: 36px;
    letter-spacing: .22em;
  }

  .hero.hero-video-wrap {
    min-height: 88vh;
  }
}

/* ---------- home: intro / stats redesign ---------- */
.intro-grid {
  grid-template-columns: 1.2fr 1fr;
  align-items: center;
  gap: 56px;
}

.intro-head .eyebrow {
  color: var(--red);
  margin-bottom: 14px;
}

.intro-head h2 {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.3;
  margin-bottom: 14px;
}

.intro-lead {
  font-size: 14px;
  color: #4a3d32;
  line-height: 1.7;
  max-width: 380px;
}

.stat-row {
  display: flex;
  border-top: 1px solid rgba(0, 0, 0, .15);
}

.stat-row .stat {
  flex: 1;
  padding: 24px 22px 0;
  border-left: 1px solid rgba(0, 0, 0, .15);
}

.stat-row .stat:first-child {
  border-left: none;
  padding-left: 0;
}

.stat-n {
  font-size: 32px;
  font-weight: 600;
  color: var(--red);
  letter-spacing: -.01em;
}

.stat-l {
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 8px;
}

@media (max-width:900px) {
  .intro-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stat-row {
    flex-wrap: wrap;
    gap: 20px;
  }

  .stat-row .stat {
    flex: 1 1 40%;
    border-left: none;
    padding-left: 0;
  }
}


/* ---------- home: vision split (quote + intro) ---------- */
.vision-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.vision-split .quote-panel {
  background-color: var(--dark);
  background-image: url('../images/hero-home.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 56px;
  min-height: 460px;
  text-align: center;
}

.vision-split .quote-panel p {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.45;
  max-width: 420px;
}

.vision-split .content-panel {
  background: var(--sand);
  padding: 80px 56px;
  display: flex;
  align-items: center;
}

.vision-split .content-panel {
  text-align: center;
  justify-content: center;
}

.vision-split .content-panel .inner-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}

.vision-split .content-panel h2 {
  font-size: 25px;
  font-weight: 500;
  line-height: 1.32;
}

.vision-split .content-panel .body p {
  font-size: 13.5px;
  line-height: 1.8;
  color: #4a3d32;
}

.vision-split .content-panel .stat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .15);
  font-size: 13px;
  letter-spacing: .05em;
}

@media (max-width:900px) {
  .vision-split {
    grid-template-columns: 1fr;
  }

  .vision-split .content-panel .inner-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .vision-split .quote-panel,
  .vision-split .content-panel {
    padding: 56px 24px;
  }
}


/* ---------- home: values split ---------- */
.values-split {
  background: var(--sand);
}

.values-quote-panel {
  background-color: var(--red);
  background-image: url('../images/pattern-arcs-red.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--cream);
  text-align: center;
  padding: 64px 48px;
}

.values-quote-panel .vq-title {
  font-size: 34px;
  font-weight: 400;
  letter-spacing: .01em;
}

.values-content-panel {
  max-width: 900px;
  margin: 0 auto;
  padding: 64px 48px;
  text-align: center;
}

.values-content-panel h2 {
  font-size: 22px;
  font-weight: 500;
  line-height: 1.35;
  max-width: 560px;
  margin: 0 auto 44px;
}

.values-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px 48px;
}

.values-2x2 .v h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.values-2x2 .v h4::before {
  content: "\2022";
  color: var(--red);
  margin-right: 8px;
}

.values-2x2 .v p {
  font-size: 12.5px;
  line-height: 1.7;
  color: #4a3d32;
  padding-left: 18px;
}

@media (max-width:900px) {
  .values-split {
    grid-template-columns: 1fr;
  }

  /* display:flex ademas de align-items: sin el, el align-items no hacia nada y
     el titulo se quedaba arriba de todo, con media pantalla de rojo vacio
     debajo. Y 200px de alto minimo para un renglon eran de mas. */
  .values-quote-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    padding: 28px 24px;
  }

  .values-quote-panel .vq-title {
    font-size: 28px;
  }

  .values-content-panel {
    padding: 40px 24px;
  }

  .values-2x2 {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}


/* ---------- partner logo placeholders ---------- */
.partner-logos {
  display: flex;
  justify-content: center;
  gap: 1px;
  flex-wrap: wrap;
  background: rgba(0, 0, 0, .08);
}

.partner-logo {
  background: var(--cream);
  width: 200px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  transition: opacity .2s;
}

.partner-logo img {
  max-height: 28px;
  max-width: 140px;
  opacity: .85;
}

.partner-logo:hover img {
  opacity: 1;
}

.partner-logo-mark {
  /* sin fondo: los logos van directo sobre el marron de la seccion. La caja
     sigue existiendo para que los cinco queden alineados a la misma altura */
  width: 190px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

/* Todos al mismo alto. Antes cada uno topaba contra un limite distinto segun
   su proporcion: el de Serena Cucina, que es siete veces mas ancho que alto,
   chocaba con el max-width y quedaba de 22px, mientras que MYOO llegaba a los
   40 del max-height. Se veian de tamaños dispares aunque la caja fuera la misma.
   object-fit:contain es el seguro por si alguno llegara a topar el ancho: en vez
   de estirarse, se acomoda adentro. */
.partner-logo-mark img {
  height: 32px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  /* los partners mandan su logo en el color que cada uno usa: Unicca azul,
     Serena y MYOO negro, Remy y Pacheco blanco. Sobre el marron de la seccion
     los oscuros no se leen. Esto los pinta a todos de blanco puro sin tocar
     los archivos originales; se revierte borrando esta linea */
  filter: brightness(0) invert(1);
}

/* Los partners eran la unica grilla sin bajada a mobile: quedaban 3 columnas
   fijas y los 190px de cada logo no entraban, asi que el home y About se iban
   a 682px de ancho en una pantalla de 390 y toda la pagina scrolleaba de
   costado. Dos por fila, como .process-row.

   Va aca y no en el bloque mobile de mas arriba porque ese esta antes de
   .partner-logo-mark y, con la misma especificidad, gana el que viene despues. */
@media (max-width:900px) {

  .partner-quote-grid {
    gap: 30px 20px;
  }

  /* base chica y shrink libre: los 300px del desktop dejaban uno solo por fila.
     Con 140 entran dos y crecen hasta llenar el ancho disponible. */
  .pq {
    flex: 1 1 140px;
    max-width: calc(50% - 10px);
  }

  .partner-logo-mark {
    width: 100%;
    height: 52px;
  }

  .partner-logo-mark img {
    height: 26px;
  }

  /* el resto del sitio baja a 20px en mobile; esta seccion se habia quedado en
     48 y se comia 96px de los 390 de pantalla */
  .partners-full {
    padding-left: 20px;
    padding-right: 20px;
  }
}


/* ---------- consistent section titles (site-wide) ---------- */
.section-kicker {
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .005em;
  margin-bottom: 18px;
}

.section-kicker.on-dark {
  color: var(--cream);
}

.section-statement {
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.42;
  color: var(--ink);
}

.section-statement.tight {
  max-width: 520px;
}

/* ---------- hero small: tone-on-tone brand pattern (replaces crossing arcs) ---------- */
/* Marron liso, sin trama (ronda del 2026-09-01). El desfase de --header-h que
   habia aca existia para empalmar el mosaico con el del header; sin trama no
   hay nada que empalmar y el corte que motivaba todo eso tampoco aparece,
   porque las dos superficies son el mismo color plano. */
.hero.small.hero-pattern {
  background-color: var(--dark);
}

.hero.small.hero-pattern .hero-content {
  position: relative;
  z-index: 2;
}

/* ---------- about: content blocks with alternating rhythm ---------- */
.about-block {
  padding: 64px 48px;
  max-width: 1120px;
  margin: 0 auto;
}

.about-block.narrow {
  text-align: center;
}

.about-block.narrow .body {
  max-width: 640px;
  margin: 0 auto;
}

.about-block .body p {
  font-size: 14px;
  line-height: 1.85;
  color: #4a3d32;
  margin-bottom: 14px;
}

/* Se habia quedado con los 48px de padding lateral del desktop, igual que
   pasaba con partners y con el footer: de los 390px de pantalla, 96 eran aire
   a los costados y el parrafo entraba en una columna de 294. Va aca abajo y no
   en el bloque mobile de mas arriba porque ese esta antes de .about-block y, a
   igual especificidad, gana la regla que viene despues. */
@media (max-width:900px) {
  .about-block {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.about-block .stat {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, .15);
  font-size: 13px;
  letter-spacing: .05em;
}

/* ---------- values: single-column list with dividers (about page) ---------- */
.values-list {
  max-width: 640px;
  margin-top: 8px;
}

.values-list .v {
  padding: 22px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.values-list .v:first-child {
  padding-top: 0;
}

.values-list .v h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 6px;
}

.values-list .v h4::before {
  content: "\2022";
  color: var(--red);
  margin-right: 8px;
}

.values-list .v p {
  font-size: 13px;
  line-height: 1.7;
  color: #4a3d32;
  padding-left: 18px;
}


/* ---------- about: vision, refined pull-quote treatment ---------- */
.vision-feature {
  background-color: var(--red);
  background-image: url('../images/pattern-arcs-red.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  padding: 88px 48px;
  text-align: center;
  color: var(--cream);
}

.vision-feature .vf-inner {
  max-width: 640px;
  margin: 0 auto;
}

.vision-feature .section-kicker {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 28px;
}

.vision-feature .section-kicker::before,
.vision-feature .section-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--gold);
  opacity: .5;
}

.vision-feature .vf-quote {
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.5;
  color: var(--cream);
}

/* ---------- about: values, split layout with numbered list ---------- */
.values-full-grid2 {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 48px;
}

.values-full-grid2 .vf-head {
  padding-top: 4px;
}

.values-full-grid2 .vf-head .section-statement {
  margin-top: 16px;
}

.values-list {
  max-width: none;
  margin-top: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 48px;
}

.values-list .v {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
}

.values-list .v:nth-child(1),
.values-list .v:nth-child(2) {
  padding-top: 0;
}

.values-list .v:nth-child(3),
.values-list .v:nth-child(4) {
  border-bottom: none;
}

.values-list .vnum {
  font-size: 12px;
  font-weight: 600;
  color: var(--red);
  min-width: 22px;
  padding-top: 2px;
  letter-spacing: .02em;
}

.values-list .v h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
}

.values-list .v h4::before {
  content: none;
}

.values-list .v p {
  font-size: 13px;
  line-height: 1.7;
  color: #4a3d32;
  padding-left: 0;
}

@media (max-width:900px) {
  .values-list {
    grid-template-columns: 1fr;
  }

  /* En dos columnas el 01 y el 02 encabezan cada una y no llevan padding
     arriba. Apiladas en una sola, el 02 deja de encabezar nada: sin esto
     quedaba pegado a la raya del 01 mientras las demas separaciones median
     24px, que es el desnivel que se nota en el telefono. */
  .values-list .v:nth-child(2) {
    padding-top: 24px;
  }

  .values-list .v:nth-child(3) {
    border-bottom: 1px solid rgba(0, 0, 0, .12);
  }
}

@media (max-width:900px) {
  .values-full-grid2 {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: 56px 24px;
  }

  .vision-feature {
    padding: 56px 24px;
  }

  .vision-feature .vf-quote {
    font-size: 23px;
  }
}


/* ---------- about: red patterned panel for "Our values" (matches Home) ---------- */
.values-full-grid2 .vf-quote-panel {
  background-color: var(--red);
  background-image: url('../images/pattern-arcs-red.svg');
  background-size: 200px 200px;
  background-repeat: repeat;
  color: var(--cream);
  display: flex;
  align-items: flex-end;
  padding: 32px;
  min-height: 220px;
}

.values-full-grid2 .vf-quote-panel .vq-title {
  font-size: 28px;
  font-weight: 400;
}

.values-full-grid2 .vf-body .section-statement {
  margin-bottom: 32px;
}

@media (max-width:900px) {
  .values-full-grid2 .vf-quote-panel {
    min-height: 140px;
  }
}


/* ---------- about: "Our values" as a full-width maroon banner, content stacked below ---------- */
.values-banner {
  background: var(--cream);
  color: var(--ink);
  padding: 56px 48px 0;
  text-align: center;
}

.values-banner .vb-kicker {
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}

.values-banner .vb-kicker::before,
.values-banner .vb-kicker::after {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ink);
  opacity: .5;
}

.values-body {
  background: var(--cream);
  padding: 40px 48px 64px;
  text-align: center;
  color: var(--ink);
}

.values-body .inner {
  max-width: 920px;
  margin: 0 auto;
}

.values-body .section-statement {
  margin-bottom: 40px;
  color: var(--ink);
}

.values-body .values-list {
  text-align: left;
}

.values-body .values-list .v {
  border-bottom-color: rgba(0, 0, 0, .12);
}

.values-body .values-list .vnum {
  color: var(--red);
}

.values-body .values-list .v h4 {
  color: var(--ink);
}

.values-body .values-list .v p {
  color: #4a3d32;
}

/* Va aca abajo y no en un bloque mobile de mas arriba: .values-banner y
   .values-body se definen recien unas lineas antes y, a igual especificidad,
   gana la regla que viene despues aunque la otra este en un media query. */
@media (max-width:900px) {
  /* En el telefono la seccion arrancaba con 56px de crema vacia antes del
     "Our values" y cerraba con 64 mas: casi media pantalla de aire alrededor
     de cuatro renglones. */
  .values-banner {
    padding: 32px 20px 0;
  }

  .values-body {
    padding: 24px 20px 40px;
  }

  .values-body .section-statement {
    margin-bottom: 24px;
  }
}

/* ---------- visor de fotos y planos ----------
   Antes los planos abrian la imagen suelta en otra pestaña, que saca al
   visitante del sitio y no deja pasar al siguiente. Esto es un visor propio,
   sin librerias: el <a target="_blank"> queda abajo como respaldo si no hay JS. */
.gallery-grid img,
.plans-grid a {
  cursor: zoom-in;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .95);
  padding: 64px 72px;
}

.lightbox.open {
  display: flex;
}

.lb-figure {
  margin: 0;
  max-width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.lb-img {
  max-width: 100%;
  /* el alto de la ventana menos el padding y el epigrafe */
  max-height: calc(100vh - 176px);
  object-fit: contain;
  opacity: 0;
  transition: opacity .18s ease;
}

.lb-img.ready {
  opacity: 1;
}

/* los planos son dibujos de linea sobre fondo claro: sobre el negro del visor
   se leen mal si no se les pone el blanco atras */
.lightbox.is-plans .lb-img {
  background: #fff;
  padding: 12px;
}

.lb-caption {
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(242, 233, 222, .72);
  text-align: center;
  max-width: 640px;
}

.lb-btn {
  position: absolute;
  background: none;
  border: 1px solid rgba(242, 233, 222, .22);
  color: var(--cream);
  cursor: pointer;
  line-height: 1;
  transition: border-color .2s, color .2s;
}

.lb-btn:hover {
  border-color: var(--gold);
  color: var(--gold);
}

.lb-close {
  top: 22px;
  right: 22px;
  width: 42px;
  height: 42px;
  font-size: 22px;
}

.lb-prev,
.lb-next {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 64px;
  font-size: 26px;
}

.lb-prev {
  left: 18px;
}

.lb-next {
  right: 18px;
}

/* con una sola imagen no hay a donde ir */
.lightbox.single .lb-prev,
.lightbox.single .lb-next,
.lightbox.single .lb-count {
  display: none;
}

.lb-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: .16em;
  color: rgba(242, 233, 222, .6);
}

@media (max-width:900px) {
  .lightbox {
    padding: 56px 16px;
  }

  .lb-img {
    max-height: calc(100vh - 168px);
  }

  .lb-prev,
  .lb-next {
    width: 38px;
    height: 52px;
    font-size: 22px;
  }

  .lb-prev {
    left: 6px;
  }

  .lb-next {
    right: 6px;
  }
}


/* ---------- about: la apertura y la vision, sobre el material que mando el cliente ----------
   Las dos secciones que abren About dejan de ser texto centrado y pasan a
   compartir la fila con una foto, siguiendo la referencia aprobada: la apertura
   sobre un degrade oliva que la separa del resto de la pagina, y la vision sobre
   crema, con el carrusel del lado del que venia la cita.

   El titulo y la cita van en serif porque asi vienen en la referencia. Es la
   unica tipografia fuera de Archivo en todo el sitio y solo se usa aca; el resto
   de los titulos —secciones, fichas, cards— siguen siendo Archivo. */
.serif-display {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  letter-spacing: 0;
}

.eyebrow-plain {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- about: apertura ---------- */
/* Reemplaza al hero con trama: el titulo de la pagina vive aca, al lado de la
   foto. El fondo es el mismo del hero de Projects —el marron de la marca con la
   trama de arcos—, con el mismo desfase de --header-h: la barra lleva la trama
   con .header-pattern y las dos superficies quedan como un unico mosaico, sin
   que el limite se lea como un corte. */
.lead-split {
  display: grid;
  grid-template-columns: 1fr 1.42fr;
  align-items: stretch;
  background-color: var(--dark);
  color: var(--cream);
}

.lead-split .ls-text {
  align-self: center;
  padding: 56px 52px;
}

.lead-split h1 {
  font-size: 46px;
  line-height: 1.22;
  color: var(--cream);
  margin: 22px 0 26px;
}

.lead-split .ls-text p {
  font-size: 13.5px;
  line-height: 1.9;
  color: rgba(242, 233, 222, .78);
  max-width: 400px;
}

.lead-split .ls-photo {
  margin: 0;
  height: 100%;
}

/* aspect-ratio da el alto de la seccion y height:100% la acompaña si el texto
   llega a ser mas alto que la foto */
.lead-split .ls-photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ---------- about: la vision, con el carrusel al lado ---------- */
.vision-split-photo {
  background: var(--cream);
}

/* Las dos secciones van a sangre: ni padding ni contenedor centrado. El aire lo
   pone el bloque de texto, asi la foto llega al borde de la pantalla. */
.vision-split-photo .vsp-inner {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  align-items: stretch;
}

.vision-split-photo .vsp-text {
  align-self: center;
  padding: 56px 52px;
}

.vision-split-photo .vsp-quote {
  font-size: 31px;
  font-style: italic;
  line-height: 1.42;
  color: var(--ink);
  margin: 22px 0 0;
}

.vision-split-photo .vsp-body {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ink-muted);
  margin-top: 24px;
}

/* ---------- el carrusel ---------- */
/* Las flechas y los puntos los inyecta main.js: sin JS no servirian de nada y
   la primera foto quieta ya es una foto correcta. */
.vf-carousel {
  position: relative;
  height: 100%;
}

.vfc-viewport {
  overflow: hidden;
  height: 100%;
}

.vfc-track {
  display: flex;
  height: 100%;
  transition: transform .6s cubic-bezier(.4, 0, .2, 1);
}

.vfc-track img {
  flex: 0 0 100%;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* van sobre la foto, no sobre el fondo de la seccion: el mismo par sirve
   igual si la seccion es clara o si es oscura */
.vfc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border: 1px solid rgba(242, 233, 222, .45);
  border-radius: 50%;
  background: rgba(31, 20, 16, .35);
  color: var(--cream);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .25s ease, border-color .25s ease;
}

.vfc-arrow:hover,
.vfc-arrow:focus-visible {
  background: rgba(31, 20, 16, .6);
  border-color: var(--gold);
}

.vfc-prev {
  left: 20px;
}

.vfc-next {
  right: 20px;
}

.vfc-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  display: flex;
  gap: 8px;
  justify-content: center;
}

.vfc-dots button {
  width: 26px;
  height: 2px;
  padding: 0;
  border: 0;
  background: rgba(242, 233, 222, .5);
  box-shadow: 0 0 6px rgba(31, 20, 16, .45);
  cursor: pointer;
  transition: background .25s ease;
}

.vfc-dots button.on {
  background: var(--gold);
}

@media (max-width:900px) {
  .lead-split {
    grid-template-columns: 1fr;
  }

  .lead-split .ls-text {
    padding: 34px 20px 36px;
  }

  .lead-split h1 {
    font-size: 33px;
    margin: 16px 0 20px;
  }

  .vision-split-photo .vsp-inner {
    grid-template-columns: 1fr;
  }

  /* Apilado, el carrusel va debajo del texto: queda entre el zocalo de la
     vision y la franja de Our values, que es donde lo pidio el cliente. */
  .vision-split-photo .vsp-text {
    order: 1;
    padding: 34px 20px 30px;
    text-align: center;
  }

  .vision-split-photo .vf-carousel {
    order: 2;
  }

  /* La volanta se centra con el resto del bloque y nada mas: el color y el
     cuerpo ya son los mismos que los de Our values, que ahora usa este mismo
     tratamiento. Estuvo un rato al reves —la vision copiando las rayitas y el
     gris de los valores— y al invertirse el pedido quedaban las dos distintas. */
  .vision-split-photo .eyebrow-plain {
    text-align: center;
  }

  .vision-split-photo .vsp-quote {
    font-size: 25px;
  }

  .vfc-arrow {
    width: 34px;
    height: 34px;
    font-size: 17px;
  }

  .vfc-prev {
    left: 8px;
  }

  .vfc-next {
    right: 8px;
  }
}

/* el carrusel se mueve solo: quien pidio menos movimiento no lo necesita */
@media (prefers-reduced-motion: reduce) {
  .vfc-track {
    transition: none;
  }
}


/* ---------- about: los valores toman el estilo de la vision ----------
   Misma volanta dorada sin rayitas y mismo enunciado en serif que la seccion de
   arriba, a pedido del cliente: las dos secciones se leen como una sola voz en
   vez de dos tratamientos distintos a dos franjas de distancia. Solo alcanza a
   la variante de About (.values-banner / .values-body); la del inicio, que es
   .values-full-grid2, sigue como estaba. */
.values-banner .vb-kicker {
  gap: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--gold);
}

.values-banner .vb-kicker::before,
.values-banner .vb-kicker::after {
  display: none;
}

.values-body .section-statement {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 31px;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.42;
  /* en mayusculas y en Archivo la frase ocupaba tres renglones; en serif entra
     en uno solo de punta a punta, que se lee como un renglon suelto */
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* El aire de la seccion lo ponen el banner y el cuerpo, no la seccion: sumados
   daban 128px arriba del volante y 136 debajo de la lista, contra 24 y 40 entre
   los elementos de adentro. El bloque quedaba flotando en el medio. */
.values-full {
  padding-top: 0;
  padding-bottom: 0;
}

.values-body .section-statement {
  margin-bottom: 32px;
}

@media (max-width:900px) {
  .values-body .section-statement {
    font-size: 25px;
    margin-bottom: 28px;
  }

  .values-banner {
    padding-top: 40px;
  }
}


/* ---------- la escala de titulos, unificada ----------
   Antes de esto convivian siete tamaños de titulo de seccion (32, 31, 28, 26 en
   dos pesos, 25, 24, 22), tres volantas distintas y dos tratamientos del mismo
   enunciado segun la pagina. Aca quedan dos niveles y uno solo de cada uno:

     volanta   Archivo 11.5 / 600, mayusculas, ls .2em, dorado
     titulo    Playfair 30 / 400, caja normal        (en cursiva, si es cita)

   Va al final del archivo a proposito: pisa por orden de cascada las medidas
   que cada seccion se habia puesto por su cuenta, sin tener que ir a buscarlas
   una por una ni subirles la especificidad.

   Los titulos de card (18) y de item (15) quedan fuera del cambio: son otro
   nivel, y su unico problema era que los valores median 14 en el inicio y 15 en
   About, que se empareja mas abajo. */
/* El h1: los heroes interiores median 36 en Archivo con letterspacing y la
   apertura de About 46 en Playfair. Un solo tratamiento para los cuatro, un
   escalon por encima del titulo de seccion. El hero del inicio queda afuera
   porque no es un titulo sino la marca (.brand-lockup, y no es h1). */
.hero h1,
.hero.small h1,
.lead-split h1 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.2;
}

@media (max-width:900px) {
  .hero h1,
  .hero.small h1,
  .lead-split h1 {
    font-size: 30px;
  }
}

.eyebrow,
.eyebrow-plain,
.values-banner .vb-kicker,
.vision-feature .section-kicker,
.section-label .eyebrow,
.partners-strip .eyebrow,
.plans-block .head .eyebrow,
.contact-form .eyebrow {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  /* Siete de las diez volantas ya eran doradas y tres iban en gris apagado
     (el listado de propiedades, los planos y el formulario). El dorado es el
     que funciona igual sobre crema y sobre las franjas oscuras. */
  color: var(--gold);
}

/* las rayitas al costado eran de una sola de las tres volantas */
.vision-feature .section-kicker::before,
.vision-feature .section-kicker::after {
  display: none;
}

.section-kicker,
.section-statement,
.section-label h2,
.cta-block h2,
.plans-block .head h2,
.partners-full .head h2,
.vision-split .content-panel h2,
.values-content-panel h2,
.values-body .section-statement,
.values-quote-panel .vq-title,
.values-full-grid2 .vf-quote-panel .vq-title,
.vision-block p,
.vision-split .quote-panel p,
.vision-feature .vf-quote,
.vision-split-photo .vsp-quote {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}

/* La cursiva es lo unico que distingue una cita de un titulo. "What makes a
   house work..." va con las citas porque asi lo aprobo el cliente en About, y
   el inicio repite ese mismo texto: dos tratamientos para la misma frase se
   leian como dos frases distintas. */
.vision-block p,
.vision-split .quote-panel p,
.vision-feature .vf-quote,
.vision-split-photo .vsp-quote,
.values-body .section-statement,
.values-content-panel h2 {
  font-style: italic;
}

/* el proceso y los fundadores tenian el titulo en negrita y en Archivo */
.section-kicker {
  color: var(--ink);
}

.process-strip .section-kicker {
  font-size: 30px;
}

/* los valores median 14px en el inicio y 15 en About, siendo el mismo bloque */
.values-2x2 .v h4,
.values-list .v h4 {
  font-size: 15px;
}

@media (max-width:900px) {
  .section-kicker,
  .section-statement,
  .section-label h2,
  .cta-block h2,
  .plans-block .head h2,
  .partners-full .head h2,
  .vision-split .content-panel h2,
  .values-content-panel h2,
  .values-body .section-statement,
  .values-quote-panel .vq-title,
  .values-full-grid2 .vf-quote-panel .vq-title,
  .vision-block p,
  .vision-split .quote-panel p,
  .vision-feature .vf-quote,
  .vision-split-photo .vsp-quote,
  .process-strip .section-kicker {
    font-size: 24px;
  }
}


/* ---------- valores: los dos bloques iguales, con iconografia ----------
   El inicio tenia la franja roja con "Our values" arriba del bloque; se saco a
   pedido del cliente y la volanta pasa adentro, dorada, igual que en About. Con
   eso las dos paginas muestran la misma seccion y no dos versiones.

   El icono ocupa el lugar que tenian el bullet del inicio y el numero de About:
   dice lo mismo que decia el numero y ademas dice de que se trata el valor. */
.values-split .values-quote-panel,
.values-full-grid2 .vf-quote-panel {
  display: none;
}

.values-content-panel .eyebrow-plain {
  margin-bottom: 14px;
}

.v-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--gold);
  margin-bottom: 10px;
}

.values-list .v .v-icon {
  flex: 0 0 26px;
  margin: 2px 0 0;
}

.v-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* en el inicio los items van centrados, asi que el icono tambien */
.values-2x2 .v .v-icon {
  margin-left: auto;
  margin-right: auto;
}

/* el bullet delante del titulo lo reemplaza el icono */
.values-2x2 .v h4::before {
  content: none;
}

/* Los partners perdieron el titulo que repetia el logo: el aire que lo separaba
   de la descripcion sobra. */
.partner-logo-mark {
  margin-bottom: 10px;
}


/* La lista de valores del inicio es la misma que la de About: icono al costado,
   texto al ras y separadores entre filas. Lo unico que hay que anular es el
   centrado del panel, que sigue valiendo para la volanta y el enunciado. */
.values-content-panel .values-list {
  text-align: left;
}

/* ---------- pop up de gracias del formulario ---------- */
/* Pedido del cliente en la ronda del 2026-09-01: el aviso de envio pasa de una
   linea debajo del boton a un pop up. Lo arma main.js, no el markup. */
.modal-gracias {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 10, 10, .7);
  padding: 24px;
}

.modal-gracias.open {
  display: flex;
}

.mg-caja {
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  padding: 48px 44px 40px;
  max-width: 420px;
  width: 100%;
  border-top: 3px solid var(--gold);
}

.mg-titulo {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  font-weight: 400;
  margin: 0 0 10px;
}

.mg-texto {
  font-size: 14px;
  color: var(--ink-muted);
  margin: 0 0 28px;
}

.mg-cerrar {
  border-color: var(--ink);
  color: var(--ink);
}

.mg-cerrar:hover {
  background: var(--ink);
  color: var(--cream);
}

@media (max-width: 900px) {
  .mg-caja { padding: 40px 28px 32px; }
  .mg-titulo { font-size: 24px; }
}