/* ==========================================================================
   Alexio Ramirez Real Estate — one page.
   Dark throughout, radius 0 throughout, one accent (champagne gold).
   The hero is measured off the approved concept (1600 x 900) and scales on a
   single unit, --u; everything below the hero is fluid.
   ========================================================================== */

:root {
  --night:    #0A0B0D;
  --night-2:  #0E1013;
  --night-3:  #131619;

  --ink:      #F3F0EA;
  --muted:    rgba(243, 240, 234, .68);
  --faint:    rgba(243, 240, 234, .44);
  --line:     rgba(243, 240, 234, .13);
  --line-2:   rgba(243, 240, 234, .26);

  --gold:     #C9A46A;
  --gold-dim: rgba(201, 164, 106, .34);
  --cream:    #EDE7DC;
  --on-cream: #14161A;

  --wrap: 1360px;
  --pad:  clamp(20px, 5vw, 76px);
  --sect: clamp(80px, 10.5vw, 164px);

  --display: 'Montserrat', 'HelveticaNeue', Helvetica, Arial, sans-serif;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav-h: 72px;

  /* el dock flotante: dos marcas apiladas que comparten estas cuatro medidas,
     asi ninguna de las dos puede quedar colgada en el aire */
  --dock-r:   clamp(16px, 2.1vw, 30px);
  --dock-b:   calc(clamp(16px, 2.1vw, 30px) + env(safe-area-inset-bottom, 0px));
  --dock-h:   56px;
  --dock-gap: 12px;

  /* the concept was drawn at 1600 wide; below 1100 the hero switches layout,
     so the unit is floored there rather than shrinking into nothing. */
  --u: calc(clamp(1100px, 100vw, 1800px) / 1600);
}

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

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: clamp(70px, 6.6vw, 104px); }

body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font-family: 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, dl, dd, figure, blockquote, ul { margin: 0; padding: 0; }
ul { list-style: none; }
button, input, select { font: inherit; color: inherit; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 1em; height: 1em; fill: currentColor; flex: none; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--cream); color: var(--on-cream); padding: 12px 18px; text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* shared display heading ------------------------------------------------- */

.h2 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height: 1.08;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ============================================================== nav ===== */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  /* .28s y no .45s: la barra se solidifica a los 48px de scroll, o sea casi
     enseguida, y a .45s el fondo llegaba despues del gesto. */
  transition: background .28s var(--ease), border-color .28s var(--ease), backdrop-filter .28s;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(10, 11, 13, .88);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px);
}

.nav__in {
  display: flex; align-items: center; gap: 24px;
  height: calc(96 * var(--u));
  padding-left: calc(70.5 * var(--u));
  padding-right: calc(68 * var(--u));
}

.lockup {
  display: flex; flex-direction: column; align-items: center; gap: calc(7 * var(--u));
  text-decoration: none; flex: none;
}
.lockup__name {
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(21.6 * var(--u));
  line-height: 1;
  letter-spacing: .296em;
  text-transform: uppercase;
  text-indent: .296em;
}
.lockup__sub {
  font-family: var(--display);
  font-weight: 500;
  font-size: calc(9.7 * var(--u));
  line-height: 1;
  letter-spacing: .345em;
  text-transform: uppercase;
  text-indent: .345em;
  color: rgba(243, 240, 234, .82);
}

.nav__links {
  display: flex; align-items: center;
  margin-left: calc(41 * var(--u));
  gap: calc(24 * var(--u));
}
.nav__links a,
.nav__tel {
  font-family: var(--display);
  text-decoration: none;
  font-size: calc(13.9 * var(--u));
  letter-spacing: .118em;
  text-transform: uppercase;
  color: var(--ink);
  position: relative;
  padding-block: 6px;
}
.nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: right;
  transition: transform .5s var(--ease);
}
.nav__links a:hover::after,
.nav__links a.is-here::after { transform: scaleX(1); transform-origin: left; }

/* El telefono es la accion mas corta de toda la pagina, asi que sale del
   registro de link y entra al de control: la misma caja de esquinas vivas que
   usa el resto del sitio, y el mismo relleno crema al hover que hace el boton
   primario del hero. 18u y no 22.5u a proposito -- con caja alrededor, 22.5u
   no entra en los 96u de alto del nav. */
.nav__tel {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: calc(9 * var(--u));
  height: calc(44 * var(--u));
  padding-inline: calc(20 * var(--u));
  border: 1px solid rgba(243, 240, 234, .42);
  background: rgba(10, 11, 13, .3);
  font-size: calc(18 * var(--u));
  letter-spacing: .012em;
  text-transform: none;
  padding-block: 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
}
.nav__tel .ico { font-size: calc(15 * var(--u)); color: var(--gold); transition: color .3s var(--ease); }
.nav__tel:hover {
  background: var(--cream); border-color: var(--cream); color: var(--on-cream);
}
.nav__tel:hover .ico { color: var(--on-cream); }

.nav__burger {
  display: none;
  margin-left: auto;
  background: none; border: 1px solid var(--line-2); padding: 9px;
  font-size: 22px; line-height: 0; cursor: pointer;
}
.nav__burger .ico--close { display: none; }
.nav__burger[aria-expanded="true"] .ico--close { display: block; }
.nav__burger[aria-expanded="true"] .ico--open { display: none; }

.nav__sheet {
  display: flex; flex-direction: column;
  padding: 8px var(--pad) 26px;
  background: rgba(10, 11, 13, .97);
  border-top: 1px solid var(--line);
}
.nav__sheet a {
  text-decoration: none; padding: 15px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase;
}
.nav__sheet-tel { border-bottom: 0 !important; color: var(--gold); letter-spacing: .02em !important; }

/* ============================================================= hero ===== */

.hero {
  position: relative;
  display: grid;
  grid-template-areas: 'stack';
  grid-template-columns: minmax(0, 1fr);
  height: max(100svh, calc(700 * var(--u)));
  isolation: isolate;
  background: #08090B;
}

.hero__plate {
  grid-area: stack;
  height: 100%;                      /* definite: the row is a definite height */
  display: grid; grid-template-areas: 'shot';
  overflow: hidden;
}
.hero__plate img,
.hero__scrim { grid-area: shot; width: 100%; height: 100%; min-width: 0; min-height: 0; }
.hero__plate img { object-fit: cover; object-position: 62% 50%; }
.hero__scrim {
  background:
    linear-gradient(90deg, rgba(6, 7, 9, .56) 0%, rgba(6, 7, 9, .34) 38%, rgba(6, 7, 9, 0) 64%),
    linear-gradient(180deg, rgba(6, 7, 9, .42) 0%, rgba(6, 7, 9, 0) 20%);
}

/* El bloque se centra en el espacio que la nav deja libre, no en el hero crudo.
   La nav es fixed y no empuja nada, asi que el padding es lo unico que la
   compensa: arriba va nav (96u) + K, abajo va K, y con justify-content:center
   el centro del bloque cae exacto en (96u + alto del hero) / 2.
   El 169u de abajo que habia antes venia de hacer aterrizar el buscador donde
   lo dibujaba el concepto, y empujaba todo ~35px por encima del centro. */
.hero__copy {
  grid-area: stack;
  z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(136 * var(--u)) calc(63 * var(--u)) calc(40 * var(--u)) calc(100 * var(--u));
}

.hero__eyebrow {
  font-family: var(--display);
  display: flex; align-items: center; gap: calc(16 * var(--u));
  font-size: calc(14.6 * var(--u));
  line-height: 1;
  letter-spacing: .117em;
  text-transform: uppercase;
  color: rgba(243, 240, 234, .9);
  margin-bottom: calc(24.8 * var(--u));
}
.hero__eyebrow .rule {
  display: block; height: 1px; width: calc(300 * var(--u));
  background: linear-gradient(90deg, rgba(243, 240, 234, .5), rgba(243, 240, 234, 0));
}

.hero__head {
  /* the concept headline measures stem/cap .146, which is Helvetica Neue
     MEDIUM, not Bold; size solves the cap height and the tracking solves the
     three line widths. */
  font-family: var(--display);
  font-weight: 600;
  font-size: calc(66.9 * var(--u));
  line-height: calc(68.5 * var(--u));
  letter-spacing: .0707em;
  text-transform: uppercase;
}
.hero__head span { display: block; }

.hero__row {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-top: calc(12.2 * var(--u));
}
.hero__sub {
  font-size: calc(22 * var(--u));
  line-height: calc(30 * var(--u));
  color: rgba(243, 240, 234, .9);
}
.hero__sub span { display: block; }   /* the concept's two lines; inline on mobile */
.hero__sig {
  font-family: 'MsMadi', 'Segoe Script', cursive;
  font-size: calc(40 * var(--u));
  line-height: 1;
  color: var(--gold);
  flex: none;
  align-self: flex-start;
  margin-top: calc(-18 * var(--u));
  transform: rotate(-4deg);
}

/* donde estaba el buscador del concepto: dos acciones, misma altura de 56u --
   el primario hereda entero el lenguaje de la vieja .search__go (crema, se
   vuelve oro), el secundario el de los campos (hairline sobre vidrio). */

.hero__acts {
  display: flex; align-items: stretch; gap: calc(15 * var(--u));
  margin-top: calc(34 * var(--u));
  flex-wrap: wrap;
}

.btn {
  font-family: var(--display);
  height: calc(56 * var(--u));
  padding-inline: calc(30 * var(--u));
  display: inline-flex; align-items: center; justify-content: center; gap: calc(11 * var(--u));
  font-size: calc(14 * var(--u));
  letter-spacing: .13em; text-transform: uppercase;
  text-decoration: none;
  cursor: pointer; white-space: nowrap;
  border: 1px solid transparent;
  transition: background .3s var(--ease), color .3s var(--ease),
              border-color .3s var(--ease), transform .12s ease;
}
.btn .ico { font-size: calc(16 * var(--u)); transition: transform .4s var(--ease); }
.btn:active { transform: translateY(1px); }

.btn--solid { background: var(--cream); color: var(--on-cream); border-color: var(--cream); }
.btn--solid:hover { background: var(--gold); border-color: var(--gold); color: #17130C; }
.btn--solid:hover .ico { transform: translateX(4px); }

.btn--line {
  background: rgba(10, 11, 13, .46);
  border-color: rgba(243, 240, 234, .3);
  color: var(--ink);
}
.btn--line:hover { border-color: rgba(243, 240, 234, .72); background: rgba(10, 11, 13, .66); }

/* ======================================================== proof band ==== */

.band { border-block: 1px solid var(--line); background: var(--night-2); }
.band__in {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding-block: clamp(44px, 5vw, 76px);
  gap: clamp(28px, 4vw, 64px);
}
.band__cell + .band__cell { border-left: 1px solid var(--line); padding-left: clamp(28px, 4vw, 64px); }

.band__fig {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(46px, 6.4vw, 92px);
  line-height: .92;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: .06em;
}
.band__fig::before { content: '$'; color: var(--gold); font-size: .46em; font-weight: 400; align-self: flex-start; margin-top: .12em; }
.band__fig--years { letter-spacing: -.02em; font-size: clamp(38px, 4.8vw, 68px); }
.band__fig--years::before { content: none; }
.band__unit { color: var(--gold); font-size: .46em; font-weight: 400; }
.band__fig--years .band__unit { font-size: .3em; letter-spacing: .1em; text-transform: uppercase; margin-inline: .22em; }

.band__note {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px; line-height: 1.6;
  max-width: 34ch;
}

/* =========================================================== results ==== */

.deals { padding-block: var(--sect); }
.deals__h { margin-bottom: clamp(44px, 6vw, 92px); }

.deal { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; }
.deal + .deal { margin-top: clamp(64px, 9vw, 150px); }

.deal--a { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.deal--b { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.deal--b .deal__shot { order: 2; }
.deal--b .deal__copy { order: 1; }

.deal__shot { overflow: hidden; }
.deal__shot img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.96);
  transition: transform 1.4s var(--ease);
}
.deal--a .deal__shot { height: clamp(420px, 58vw, 760px); }
.deal--b .deal__shot { height: clamp(300px, 38vw, 520px); }
.deal:hover .deal__shot img { transform: scale(1.035); }

.deal__price {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(40px, 5.2vw, 74px);
  line-height: 1;
  letter-spacing: -.012em;
  color: var(--gold);
}
.deal__title {
  margin-top: 22px;
  font-family: var(--display);
  font-weight: 500; font-size: clamp(19px, 1.6vw, 24px);
  letter-spacing: .06em; text-transform: uppercase;
}
.deal__body { margin-top: 18px; color: var(--muted); max-width: 46ch; }

.deal__meta { display: flex; gap: 46px; margin-top: 34px; border-top: 1px solid var(--line); padding-top: 22px; }
.deal__meta dt { font-family: var(--display); font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); }
.deal__meta dd { margin: 7px 0 0; font-size: 16px; }

/* ============================================================= press ==== */

.press { padding-block: var(--sect); background: var(--night-2); border-top: 1px solid var(--line); }
.press__lead {
  margin-top: 26px; max-width: 58ch; color: var(--muted);
  font-size: clamp(16px, 1.3vw, 19px);
}
.press__list {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 6vw, 88px);
}
.press__item { border-top: 1px solid var(--line-2); padding-top: 26px; }
.press__name {
  font-size: clamp(21px, 2.1vw, 30px);
  line-height: 1.12;
  letter-spacing: .01em;
}
.press__name--mag { font-family: var(--display); letter-spacing: .06em; text-transform: uppercase; font-size: clamp(18px, 1.7vw, 24px); font-weight: 500; }
.press__name--wynn { font-family: var(--display); letter-spacing: .24em; text-transform: uppercase; font-size: clamp(15px, 1.4vw, 20px); font-weight: 400; }
.press__what { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.62; }

/* the two clippings: the newspaper runs tall down the right, the heading and
   the magazine page share the left, and the list closes the section across
   both columns. One grid, so the text and the clippings read as one spread. */
.press__in {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  grid-template-areas: "head rj" "mag rj" "list list";
  column-gap: clamp(32px, 6vw, 110px);
  align-items: start;
}
.press__head { grid-area: head; }
.clip--rj { grid-area: rj; justify-self: end; width: 100%; max-width: 560px; margin-top: clamp(0px, 3vw, 48px); }
.clip--mag { grid-area: mag; width: 100%; max-width: 400px; margin-top: clamp(40px, 5vw, 80px); }
.press__in .press__list { grid-area: list; }
.clip__img { overflow: hidden; border: 1px solid var(--line); background: var(--night-3); }
.clip__img img {
  width: 100%; height: auto;
  filter: saturate(.94);
  transition: transform 1.4s var(--ease);
}
.clip:hover .clip__img img { transform: scale(1.025); }
.clip__cap { display: grid; gap: 8px; margin-top: 20px; max-width: 46ch; }
.clip__src {
  font-family: var(--display); font-size: 11.5px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.clip__line { color: var(--muted); font-size: 15px; line-height: 1.6; }

/* ========================================================= marketing ==== */

.mk { padding-block: var(--sect); border-top: 1px solid var(--line); }
.mk__lead { margin-top: 26px; max-width: 62ch; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); }

.mk__body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 86px);
  align-items: start;
  margin-top: clamp(48px, 6vw, 86px);
}

.mk__tab {
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; border-top: 1px solid var(--line);
  padding: clamp(18px, 2vw, 28px) 0;
  display: grid; gap: 7px;
  transition: opacity .4s var(--ease);
}
.mk__tabs li:last-child .mk__tab { border-bottom: 1px solid var(--line); }
.mk__tab-name {
  font-family: var(--display);
  font-size: clamp(18px, 1.8vw, 26px); font-weight: 500;
  letter-spacing: .03em;
  transition: color .4s var(--ease), transform .5s var(--ease);
}
.mk__tab-hint { font-family: var(--display); font-size: 13px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); }
.mk__tab[aria-selected="true"] .mk__tab-name { color: var(--gold); transform: translateX(10px); }
.mk__tab[aria-selected="false"]:hover .mk__tab-name { transform: translateX(5px); }
.mk__tab[aria-selected="false"] { opacity: .72; }

.mk__stage { display: grid; grid-template-areas: 'panel'; }
.mk__panel {
  grid-area: panel;
  opacity: 0; visibility: hidden;
  transition: opacity .6s var(--ease);
}
.mk__panel.is-on { opacity: 1; visibility: visible; }
.mk__panel img { width: 100%; height: clamp(320px, 42vw, 620px); object-fit: cover; }
.mk__cap { margin-top: 22px; color: var(--muted); font-size: 15.5px; max-width: 52ch; }

/* ============================================================= areas ==== */

.areas { padding-block: var(--sect); background: var(--night-2); border-top: 1px solid var(--line); }
.areas__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.areas__nav { display: flex; gap: 10px; flex: none; }
.areas__nav button,
.says__arrow {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: none; border: 1px solid var(--line-2); color: var(--ink);
  font-size: 19px; cursor: pointer;
  transition: background .3s var(--ease), border-color .3s var(--ease), opacity .3s;
}
.areas__nav button:hover,
.says__arrow:hover { background: rgba(243, 240, 234, .08); border-color: var(--ink); }
.areas__nav button[disabled] { opacity: .3; cursor: default; }

.rail {
  display: flex; gap: clamp(16px, 2vw, 30px);
  margin-top: clamp(36px, 4.5vw, 64px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  padding-bottom: 12px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

/* la tarjeta entera no es clickeable y nunca lo fue: el cursor vive en el
   enlace de abajo, que es lo unico que hace algo. */
.card { flex: 0 0 clamp(250px, 26vw, 360px); scroll-snap-align: start; }
.card figure { overflow: hidden; height: clamp(320px, 34vw, 470px); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s var(--ease); filter: saturate(.94) brightness(.94); }
.card:hover img { transform: scale(1.05); filter: saturate(1) brightness(1); }
.card__t { font-family: var(--display); margin-top: 22px; font-size: clamp(17px, 1.5vw, 21px); font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.card__n { margin-top: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.6; }
.card__go {
  font-family: var(--display);
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
  text-decoration: none; cursor: pointer;
  border-bottom: 1px solid transparent; padding-bottom: 4px;
  transition: border-color .4s var(--ease);
}
.card__go .ico { font-size: 14px; transition: transform .4s var(--ease); }
.card:hover .card__go .ico,
.card__go:focus-visible .ico { transform: translate(3px, -3px); }
.card__go:hover { border-bottom-color: var(--gold-dim); }

/* ====================================================== testimonials ==== */

.says { padding-block: var(--sect); border-top: 1px solid var(--line); }
.says__in { display: grid; justify-items: center; text-align: center; }
.says__mark { font-size: 40px; color: var(--gold-dim); width: 1.17em; }

.says__stage { display: grid; grid-template-areas: 'q'; margin-top: 38px; width: min(100%, 880px); }
.says__q {
  grid-area: q; opacity: 0; visibility: hidden;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.says__q.is-on { opacity: 1; visibility: visible; transform: none; }
.says__q p {
  font-size: clamp(21px, 2.7vw, 35px);
  line-height: 1.34;
  font-weight: 300;
  letter-spacing: .005em;
}
.says__q footer { margin-top: 30px; display: grid; gap: 5px; }
.says__who { font-family: var(--display); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; }
.says__role { font-size: 13px; letter-spacing: .08em; color: var(--faint); }

/* las flechas flanquean los dots en una sola fila: la cita esta centrada, asi
   que el control tambien. Aca ciclan, y por eso no hay estado disabled -- el
   rail de areas si lo tiene, porque ese tiene extremos. */
.says__rail { display: flex; align-items: center; gap: clamp(16px, 2.6vw, 32px); margin-top: 44px; }

.says__dots { display: flex; gap: 10px; }
.says__dots button {
  width: 34px; height: 2px; padding: 0; border: 0; cursor: pointer;
  background: var(--line-2); transition: background .4s var(--ease), width .4s var(--ease);
}
.says__dots button[aria-selected="true"] { background: var(--gold); width: 54px; }

/* ============================================================= about ==== */

.about { padding-block: var(--sect); background: var(--night-2); border-top: 1px solid var(--line); }
.about__in {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 90px); align-items: center;
}
.about__shot { overflow: hidden; height: clamp(420px, 52vw, 700px); }
.about__shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }

.about__role { font-family: var(--display); margin-top: 20px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.about__body { margin-top: 24px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 52ch; }
.about__line {
  font-family: var(--display);
  margin-top: 34px; font-size: clamp(15px, 1.35vw, 19px);
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.7;
}
.about__sig {
  margin-top: 26px;
  font-family: 'MsMadi', 'Segoe Script', cursive;
  font-size: clamp(42px, 4.2vw, 62px); line-height: 1; color: var(--gold);
  transform: rotate(-4deg); transform-origin: left center;
}

/* =========================================================== contact ==== */

.cta { padding-block: var(--sect); border-top: 1px solid var(--line); }
.cta__in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  gap: clamp(40px, 6vw, 110px);
}
.cta__lead { margin-top: 26px; color: var(--muted); font-size: clamp(16px, 1.3vw, 19px); max-width: 44ch; }

.cta__tel {
  display: inline-grid; gap: 8px; margin-top: 46px; text-decoration: none;
  border-top: 1px solid var(--line); padding-top: 20px;
}
.cta__tel-k { font-family: var(--display); font-size: 11.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); }
.cta__tel-v { font-size: clamp(26px, 2.6vw, 38px); transition: color .3s var(--ease); }
.cta__tel:hover .cta__tel-v { color: var(--gold); }

.form { display: grid; gap: 24px; align-content: start; }
.form__row { display: grid; gap: 9px; }
.form__row label { font-family: var(--display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(243, 240, 234, .78); }
.form input,
.form select {
  width: 100%; height: 54px;
  background: var(--night-3);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding-inline: 16px;
  font-size: 16px;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.form input:hover, .form select:hover { border-color: rgba(243, 240, 234, .42); }
.form input:focus, .form select:focus { outline: none; border-color: var(--gold); background: #171B1F; }
.form__hint { font-size: 13px; color: var(--faint); }
.form__err { font-size: 13px; color: #E8A87C; }
.form input[aria-invalid="true"] { border-color: #E8A87C; }

.form__sel { position: relative; display: flex; }
.form__sel select { appearance: none; padding-right: 44px; cursor: pointer; }
.form__sel .ico {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  font-size: 15px; pointer-events: none; color: var(--faint);
}

.form__go {
  font-family: var(--display);
  margin-top: 8px; height: 58px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: var(--cream); color: var(--on-cream); border: 1px solid var(--cream);
  font-size: 14px; letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease), transform .12s ease;
}
.form__go .ico { font-size: 17px; transition: transform .4s var(--ease); }
.form__go:hover { background: var(--gold); border-color: var(--gold); color: #17130C; }
.form__go:hover .ico { transform: translateX(4px); }
.form__go:active { transform: translateY(1px); }
.form__go[data-busy] { opacity: .75; cursor: progress; }
/* Honeypot: off screen rather than display:none, which some bots skip. */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================ footer ==== */

.foot { border-top: 1px solid var(--line); background: var(--night-2); padding-block: clamp(46px, 5vw, 76px); }
.foot__in {
  display: grid; grid-template-columns: repeat(3, auto); gap: 34px;
  align-items: start; justify-content: space-between;
}
.foot__brand { display: grid; justify-items: center; gap: 7px; }
.foot__brand .lockup__name { font-size: 19px; }
.foot__brand .lockup__sub { font-size: 8.6px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.foot__nav a { font-family: var(--display); text-decoration: none; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.foot__nav a:hover { color: var(--gold); }
.foot__meta { font-size: 14px; color: var(--muted); line-height: 1.75; text-align: right; }
.foot__meta a { text-decoration: none; }
.foot__meta a:hover { color: var(--gold); }
.foot__fine { grid-column: 1 / -1; margin-top: 30px; border-top: 1px solid var(--line); padding-top: 24px; font-size: 12.5px; color: var(--faint); }

/* ============================================================== dock ==== */
/* Dos marcas apiladas en la esquina, colgadas de las mismas cuatro medidas de
   :root para que no se puedan separar. Arriba la accion propia de la pagina,
   abajo la conversacion de siempre. Rectas, sin un solo radio: la regla de
   forma de este sitio no hace excepciones, ni siquiera flotando. */

.fab, .wa {
  position: fixed; right: var(--dock-r); z-index: 70;
  display: flex; align-items: center;
  height: var(--dock-h);
  overflow: hidden; text-decoration: none;
  opacity: 0; transform: translateY(14px); pointer-events: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease),
              background .4s var(--ease), border-color .4s var(--ease), color .4s var(--ease);
}
.fab[data-show="1"], .wa[data-show="1"] { opacity: 1; transform: none; pointer-events: auto; }

.fab__ic, .wa__ic {
  flex: none; width: var(--dock-h); height: var(--dock-h);
  display: grid; place-items: center;
}
.fab__ic .ico { font-size: 21px; }
.wa__ic .ico { font-size: 23px; }

/* la etiqueta no ocupa ancho en reposo, asi que la marca es un cuadrado hasta
   que alguien la toca y ninguna de las dos empuja a la otra */
.fab__t, .wa__t {
  font-family: var(--display);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  white-space: nowrap;
  max-width: 0; opacity: 0; padding-right: 0;
  transition: max-width .55s var(--ease), opacity .4s var(--ease), padding-right .55s var(--ease);
}
.fab:hover .fab__t, .fab:focus-visible .fab__t { max-width: 200px; opacity: 1; padding-right: 22px; }
.wa:hover  .wa__t,  .wa:focus-visible  .wa__t  { max-width: 160px; opacity: 1; padding-right: 22px; }

/* arriba: el mismo crema que el boton primario del hero, y el mismo oro al
   hover. Es la misma accion, asi que es el mismo color. */
.fab {
  bottom: calc(var(--dock-b) + var(--dock-h) + var(--dock-gap));
  background: var(--cream); color: var(--on-cream);
  border: 1px solid var(--cream);
  box-shadow: 0 16px 38px -16px rgba(0, 0, 0, .8);
}
.fab:hover, .fab:focus-visible { background: var(--gold); border-color: var(--gold); color: #17130C; }

/* abajo: vidrio oscuro con hairline y glifo dorados. NO el #25D366 de
   WhatsApp -- seria el unico pixel saturado de una pagina de paleta cerrada,
   y justo en el cuadro que se comparte en pantalla en una llamada. */
.wa {
  bottom: var(--dock-b);
  background: rgba(10, 11, 13, .88);
  border: 1px solid var(--gold-dim); color: var(--gold);
}
@supports (backdrop-filter: blur(1px)) {
  .wa { backdrop-filter: blur(12px) saturate(140%); }
}
.wa:hover, .wa:focus-visible { background: var(--gold); border-color: var(--gold); color: #17130C; }

@media (max-width: 700px) {
  :root { --dock-h: 50px; --dock-gap: 10px; }
  .fab__t, .wa__t { display: none; }   /* sin hover no hay etiqueta que mostrar */
}

@media (prefers-reduced-motion: reduce) {
  .fab, .wa { transform: none; }
}

/* ============================================================= toast ==== */
/* La confirmacion de los dos formularios (js/site.js). El mismo vidrio oscuro
   con hairline dorada que la marca de WhatsApp, recto como todo el sitio, y
   por encima del dock para no quedar debajo de sus dos marcas. */

.toast {
  position: fixed; z-index: 80;
  left: 50%; bottom: calc(var(--dock-b) + var(--dock-h) + var(--dock-gap));
  width: min(440px, calc(100vw - 32px));
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 20px 17px 16px;
  background: rgba(10, 11, 13, .94);
  border: 1px solid var(--gold-dim);
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .9);
  color: var(--ink); cursor: pointer;
  opacity: 0; transform: translate(-50%, 14px); pointer-events: none;
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
@supports (backdrop-filter: blur(1px)) {
  .toast { background: rgba(10, 11, 13, .86); backdrop-filter: blur(12px) saturate(140%); }
}
.toast[data-show] { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

.toast__ic {
  flex: none; width: 30px; height: 30px; margin-top: 1px;
  display: grid; place-items: center;
  border: 1px solid var(--gold-dim); color: var(--gold);
}
.toast__ic .ico { font-size: 17px; }
.toast[data-warn] { border-color: rgba(232, 168, 124, .45); }
.toast[data-warn] .toast__ic { border-color: rgba(232, 168, 124, .45); color: #E8A87C; }
.toast[data-warn] .toast__ic svg { display: none; }
.toast[data-warn] .toast__ic::before { content: "!"; font-family: var(--display); font-size: 15px; font-weight: 600; }

.toast__body { display: grid; gap: 3px; min-width: 0; }
.toast__t {
  font-family: var(--display); font-weight: 500;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}
.toast[data-warn] .toast__t { color: #E8A87C; }
.toast__m { font-size: 15px; line-height: 1.5; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .toast { transform: translate(-50%, 0); transition: opacity .2s linear; }
}

/* ============================================================ motion ==== */

[data-reveal] {
  opacity: 0; transform: translateY(20px);
  transition: opacity .85s var(--ease), transform .85s var(--ease);
}
[data-reveal][data-delay="1"] { transition-delay: .1s; }
[data-reveal][data-delay="2"] { transition-delay: .2s; }
[data-reveal][data-delay="3"] { transition-delay: .3s; }
[data-reveal].is-in { opacity: 1; transform: none; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
[data-anim] { opacity: 0; animation: rise .95s var(--ease) forwards; }
[data-anim="1"] { animation-delay: .10s; }
[data-anim="2"] { animation-delay: .20s; }
[data-anim="3"] { animation-delay: .29s; }
[data-anim="4"] { animation-delay: .38s; }
[data-anim="5"] { animation-delay: .52s; }
[data-anim="6"] { animation-delay: .70s; }
[data-anim="7"] { animation-delay: .62s; }

/* ======================================================= breakpoints ==== */

@media (max-width: 1180px) {
  .nav__links { margin-left: calc(56 * var(--u)); gap: calc(30 * var(--u)); }
}

@media (max-width: 1000px) {
  :root { --nav-h: 64px; }

  .nav__in { height: var(--nav-h); padding-inline: var(--pad); }
  .nav__links, .nav__tel { display: none; }
  .nav__burger { display: block; }
  .lockup__name { font-size: 17px; }
  .lockup__sub { font-size: 8px; }

  /* the hero stacks: copy over a full-bleed plate, no --u scaling */
  .hero { height: auto; min-height: 100svh; }
  .hero__plate { height: 100%; }
  .hero__plate img { object-position: 70% 50%; }
  .hero__scrim {
    background:
      linear-gradient(180deg, rgba(6, 7, 9, .86) 0%, rgba(6, 7, 9, .5) 42%, rgba(6, 7, 9, .92) 100%);
  }
  .hero__copy {
    padding: calc(var(--nav-h) + 58px) var(--pad) 54px;
    justify-content: flex-end;
  }
  .hero__eyebrow { font-size: 11.5px; letter-spacing: .22em; margin-bottom: 20px; gap: 12px; }
  .hero__eyebrow .rule { width: min(180px, 34vw); }
  .hero__head { font-size: clamp(33px, 9vw, 58px); line-height: 1.04; letter-spacing: .05em; }
  .hero__row { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 20px; }
  .hero__sub { font-size: 16px; line-height: 1.6; max-width: 40ch; }
  .hero__sub span { display: inline; }
  .hero__sig { font-size: 40px; align-self: flex-end; margin-top: -4px; margin-right: 4px; }

  .hero__acts { gap: 10px; margin-top: 30px; width: 100%; }
  .btn { width: 100%; height: 52px; font-size: 13px; padding-inline: 20px; }
  .btn .ico { font-size: 15px; }

  .band__in { grid-template-columns: 1fr; gap: 30px; }
  .band__cell + .band__cell { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 30px; }
  .band__note { max-width: none; }

  .deal--a, .deal--b { grid-template-columns: 1fr; }
  .deal--b .deal__shot { order: 0; }
  .deal--b .deal__copy { order: 1; }
  .deal--a .deal__shot, .deal--b .deal__shot { height: clamp(280px, 62vw, 460px); }

  .press__list { grid-template-columns: 1fr; }
  .press__in { grid-template-columns: 1fr; grid-template-areas: "head" "rj" "mag" "list"; }
  .clip--rj { justify-self: start; max-width: 560px; margin-top: clamp(40px, 8vw, 64px); }
  .clip--mag { justify-self: end; width: 86%; max-width: 480px; margin-top: 48px; }

  .mk__body { grid-template-columns: 1fr; }
  .mk__panel img { height: clamp(260px, 62vw, 440px); }

  .about__in { grid-template-columns: 1fr; }
  .about__shot { height: clamp(360px, 88vw, 560px); }
  .about__sig { transform: rotate(-3deg); }

  .cta__in { grid-template-columns: 1fr; }

  .foot__in { grid-template-columns: 1fr; justify-content: start; }
  .foot__brand { justify-items: start; }
  .foot__meta { text-align: left; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .says__q p { font-size: 20px; }
  .deal__meta { gap: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-anim] { opacity: 1; }
}

/* ------------------------------------------- scroll-linked depth ------- */
/* The two transaction images drift as they pass, so the record section has
   the same weight of movement as the hero. Progressive: no ScrollTimeline,
   no drift, nothing else changes. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes drift {
      from { transform: translateY(2.6%) scale(1.07); }
      to   { transform: translateY(-2.6%) scale(1.07); }
    }
    .deal__shot img,
    .about__shot img {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}

/* ======================================================================
   dynamic form modal - las palancas de marca
   Esto es lo UNICO que cambia entre sitios. css/dfm.css no se edita nunca:
   se pisa entero cada vez que corres Add-Form.ps1 -Update.
   La tabla completa de palancas esta arriba de todo en css/dfm.css.
   ====================================================================== */
.dfm-root{
  --dfm-color-scheme: dark;                /* caret, scrollbar, plato del autofill */

  /* Superficies: el panel se apoya en la parada de gris que la pagina ya usa
     para sus secciones alternas, no sobre el negro del fondo. */
  --dfm-surface:   var(--night-2);
  --dfm-surface-2: var(--night-3);
  --dfm-chip:      var(--night-3);         /* si no, la pildora del tick es blanca */
  --dfm-badge:     var(--night-3);
  --dfm-badge-fg:  var(--gold);

  --dfm-ink:            var(--ink);
  --dfm-ink-muted:      var(--muted);
  --dfm-ink-on-media:   var(--ink);
  --dfm-ink-on-media-2: rgba(243, 240, 234, .72);

  /* LA DECISION DE ESTE SITIO: el acento es la crema, no el oro.
     La pagina tiene dos colores de accion y su boton primario es crema que se
     vuelve oro al hover -- .btn--solid, .form__go, .nav__tel y las dos marcas
     flotantes hacen todos exactamente eso. El modal lo repite tal cual, y el
     oro se queda donde la pagina lo tiene: en el anillo y en el foco. Para eso
     existe --dfm-ring separada del acento. */
  --dfm-accent:          var(--cream);
  --dfm-on-accent:       var(--on-cream);
  --dfm-icon-on-accent:  rgba(20, 22, 26, .72);
  --dfm-accent-hover:    var(--gold);
  --dfm-accent-wash:     rgba(237, 231, 220, .10);
  --dfm-ring:            var(--gold);
  --dfm-ring-w:          1px;              /* la pagina es hairline, no glow */
  --dfm-focus:           var(--gold);      /* el mismo :focus-visible global */
  --dfm-danger:          #E8A87C;          /* el que .form__err ya usa; #c8102e no pasa aca */

  /* Hairlines en crema-alfa: sobre oscuro, tinta-alfa desaparece. */
  --dfm-line:        var(--line);
  --dfm-line-strong: var(--line-2);

  /* Scrim mas oscuro que el default, no mas claro, y en el negro de la pagina. */
  --dfm-scrim:      rgba(6, 7, 9, .88);
  --dfm-scrim-blur: 6px;
  --dfm-on-scrim:   var(--ink);

  /* Forma: radio 0 y no se reinstala NINGUNO. En 787 lineas de este sitio no
     hay una sola declaracion de border-radius; el modal no va a ser la primera. */
  --dfm-radius-scale: 0;

  /* Tipografia: Montserrat display para la pregunta, Helvetica Neue para lo
     operativo, y el registro de versalitas de .card__go / .form label. */
  --dfm-font-display: var(--display);
  --dfm-font-ui:      "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --dfm-font-card:    var(--display);
  --dfm-q-weight:     500;
  --dfm-q-tracking:   .02em;
  --dfm-caps-tracking: .2em;
  --dfm-caps-weight:   500;

  /* Elevacion: la pagina es plana y de hairlines, no de sombras. */
  --dfm-shadow-modal:  0 48px 130px -40px rgba(0, 0, 0, .85);
  --dfm-border-modal:  1px solid var(--line-2);
  --dfm-shadow-hover:  none;
  --dfm-shadow-select: none;
  --dfm-shadow-cta:    none;

  /* El grado exacto con el que .card img sirve estas mismas cuatro fotos, y la
     seleccion las devuelve a color: es la misma regla que ya tiene el rail. */
  --dfm-media-scrim-bottom: rgba(6, 7, 9, .86);
  --dfm-media-filter:     saturate(.94) brightness(.94);
  --dfm-media-filter-sel: saturate(1) brightness(1);
  --dfm-media-zoom: 1.05;

  --dfm-ease: var(--ease);

  /* El punto de presencia. El #3cca52 del default seria el unico pixel saturado
     de una pagina de paleta cerrada: al lado del oro deja de leerse como "esta
     en linea" y se lee como una notificacion. Mismo rol, bajado al registro. */
  --dfm-presence: #7FA46F;
}