/* Citybroom — the shared furniture.
   Sizes read off the Framer project and the live site on 2026-09-03. */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Framer hides every scrollbar; the layout is measured without one. */
html { scrollbar-width: none; }
::-webkit-scrollbar { display: none; }

body {
  margin: 0;
  background: var(--neutral-01);
  color: var(--neutral-04);
  font: 400 16px/180% var(--font-display);
  /* Framer turns these Inter Display alternates on for every text on the
     site. Without them the letters are narrower and lines break differently. */
  font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11";
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Everything sits inside this ------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}

/* The little uppercase label above each section heading */
.eyebrow {
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-03);
}
.eyebrow--light { color: var(--neutral-01); }

/* Buttons --------------------------------------------------------------- */
/* One shape, two colourways. Radius 58px and 10/20 padding are Framer's. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  min-height: 44px;
  border-radius: 58px;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
}
/* On hover the label slides up and out while its twin slides in from
   28px below. main.js doubles the label; without it the button just sits. */
.btn__txt, .slide__txt { position: relative; display: block; height: 24px; overflow: hidden; }
.btn__txt > span, .slide__txt > span {
  display: block;
  line-height: 24px;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.btn__txt > span + span { position: absolute; top: 28px; left: 0; width: 100%; }
.slide__txt > span + span { position: absolute; top: 24px; left: 0; width: 100%; }
.btn:hover .btn__txt > span { transform: translateY(-28px); }
a:hover .slide__txt > span { transform: translateY(-24px); }

.btn--light { background: var(--neutral-01); color: var(--neutral-04); }
.btn--dark { background: var(--neutral-04); color: var(--neutral-01); }

.btn--olive { background: var(--color-01); color: var(--neutral-01); }

/* Header ---------------------------------------------------------------- */
/* Sits on top of the hero rather than pushing it down. 76px tall. */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 10;
  padding: 16px var(--gutter);
}
.site-header__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
}
.site-header__logo { display: block; width: 135px; height: 36px; }
.site-header__logo img { width: 100%; height: 100%; object-fit: contain; }

.site-nav { flex: 1; display: flex; align-items: center; justify-content: center; gap: 32px; }
.site-nav a,
.site-nav button {
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-01);
  padding: 0;
  transition: color .25s ease;
}
/* The live site's menu links do nothing on hover. */

/* Burger, phone only. 26 box, three 17 x 2 bars 5 apart; open, the outer
   bars turn 45° into an X and the middle one collapses. */
.burger { display: none; position: relative; width: 26px; height: 26px; padding: 0; }
.burger span,
.burger span::before,
.burger span::after {
  position: absolute; left: 4px;
  width: 17px; height: 2px;
  border-radius: 20px;
  background: var(--neutral-04);
  transition: transform .25s ease, opacity .2s ease;
}
.burger span { top: 12px; display: block; }
.burger span::before, .burger span::after { content: ""; left: 0; top: 0; }
.burger span::before { transform: translateY(-7px); }
.burger span::after  { transform: translateY(7px); }
.burger[aria-expanded="true"] span { background: transparent; }
.burger[aria-expanded="true"] span::before { transform: rotate(45deg); }
.burger[aria-expanded="true"] span::after  { transform: rotate(-45deg); }

/* Sections -------------------------------------------------------------- */
.section { padding: 130px var(--gutter); }
.section--tight { padding: 64px var(--gutter) 0; }

.section-head { display: flex; flex-direction: column; gap: 10px; }
.section-head--center { align-items: center; text-align: center; }

/* Scroll-in reveal ------------------------------------------------------ */
/* The live site shows everything at once — no fades on scroll. The class
   stays on the elements as a hook, but does nothing. */
.reveal { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* Phone menu ------------------------------------------------------------ */
/* Lives inside the cream header bar, which grows to hold it. Only ever
   exists on phones, and only once the burger is pressed. */
.menu-movil[hidden] { display: none; }
@media (min-width: 768px) { .menu-movil { display: none !important; } }

.menu-movil {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 30px;
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
}
.menu-movil nav { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.menu-movil nav > a,
.menu-movil__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-04);
}
.menu-movil__toggle[aria-expanded="true"] .dropdown__caret { transform: rotate(180deg); }
.menu-movil__group { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.menu-movil__sub[hidden] { display: none; }
.menu-movil__sub {
  width: 300px;
  padding-left: 10px;
  display: flex;
  flex-direction: column;
  gap: 47px;
}
.menu-movil__sub ul { width: 183px; display: flex; flex-direction: column; gap: 12px; }
.menu-movil__sub a {
  display: block;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-03);
}
.menu-movil .btn { width: 100%; }

/* The Páginas dropdown --------------------------------------------------- */
.dropdown { position: static; }
.dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-01);
  transition: opacity .2s ease;
}
.dropdown__trigger:hover { opacity: .7; }
.dropdown__caret { transition: transform .2s ease; }
.dropdown__trigger[aria-expanded="true"] .dropdown__caret { transform: rotate(180deg); }

/* The hidden attribute has to beat the display:flex below. */
.dropdown__panel[hidden] { display: none; }

.dropdown__panel {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 190px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  background: var(--neutral-01);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.dropdown__panel a {
  padding: 10px 14px;
  border-radius: 10px;
  font: 500 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-04);
  transition: background-color .2s ease;
}
.dropdown__panel a:hover { background: var(--neutral-02); opacity: 1; }

/* The mega menu ---------------------------------------------------------
   934 x 267, 32 padding, 16 radius, no shadow. Two link columns of 171 on
   the left in a 350 block, two 242 x 200 photo cards on the right. Every
   number read off the live site on 2026-09-03 with the panel open. */
.mega[hidden] { display: none; }

/* Anchored to the header bar rather than to the Páginas button. The live
   site sits it 17px right of centre, and 14px below the header row. */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(calc(-50% + 17px));
  width: 934px;
  max-width: calc(100vw - 40px);
  padding: 32px;
  display: flex;
  gap: 24px;
  align-items: flex-start;
  border-radius: var(--radius);
  background: var(--neutral-01);
  overflow: hidden;
}

.mega__links { display: flex; gap: 8px; flex: 0 0 350px; align-items: flex-start; }
.mega__col { flex: 0 0 171px; display: flex; flex-direction: column; gap: 16px; }
.mega__col ul { display: flex; flex-direction: column; gap: 12px; }

/* Geist, 12px, half opacity — the only Geist on the site that is not a number */
.mega__label {
  font: 500 12px/170% var(--font-number);
  text-transform: uppercase;
  color: var(--neutral-04);
  opacity: .5;
}
/* Same size and weight as the footer links, which were already right */
.mega__col a {
  display: block;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  color: var(--neutral-04);
  /* The live links run past the 171 column rather than wrapping —
     Términos y condiciones sits on one line at 183 wide. */
  white-space: nowrap;
  transition: color .2s ease;
}
.mega__col a:hover { color: var(--neutral-03); }

.mega__services { flex: 0 0 496px; display: flex; gap: 12px; }

/* Fixed 242 x 200 so the cards never stretch to the height of the links.
   Scoped to .mega so it outranks the .site-nav a rule further up, which
   otherwise zeroes the padding and forces the title into capitals. */
.mega .mini-card {
  position: relative;
  width: 242px;
  height: 200px;
  display: flex;
  align-items: flex-end;
  padding: 20px;
  border-radius: 8px;
  overflow: hidden;
}
.mini-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
/* Framer's own gradient, dark at the bottom, the whole layer at 40% */
.mini-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgb(1, 9, 7) 0%, rgba(2, 10, 8, 0) 100%);
  opacity: .4;
}
.mega .mini-card__title {
  position: relative;
  width: 161px;
  font: 600 20px/140% var(--font-display);
  text-transform: none;
  color: var(--neutral-01);
}
/* RAWFORM asked for the photo to push in on hover. The live site does not
   do this — it is his addition, not a match. */
.mini-card:hover img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .mini-card img { transition: none; }
  .mini-card:hover img { transform: none; }
}

/* No room for it below the desktop breakpoint — the phone menu takes over */
@media (max-width: 1023px) {
  .mega { display: none !important; }
}

/* The two states of the bar ---------------------------------------------
   There is one bar on the whole site. It is see-through where it floats
   over a photograph, and turns white once the page has scrolled past it.
   Pages that open on cream start in the white state and stay there, which
   is what --solid means. Everything below is written once and reached
   two ways, so the two can never drift apart. */
.site-header {
  transition: background-color .25s ease;
}

.site-header--solid,
.site-header.is-stuck { background: #fff; }

.site-header--solid .site-nav a,
.site-header--solid .dropdown__trigger,
.site-header.is-stuck .site-nav a,
.site-header.is-stuck .dropdown__trigger { color: var(--neutral-04); }

/* The wordmark swaps for its dark twin */
.logo--dark { display: none; }
.site-header--solid .logo--light,
.site-header.is-stuck .logo--light { display: none; }
.site-header--solid .logo--dark,
.site-header.is-stuck .logo--dark { display: block; }

/* And the button turns dark. Only the one in the bar itself — not the one
   inside the phone menu, which lives in the same header. */
.site-header--solid .site-header__inner > .btn,
.site-header.is-stuck .site-header__inner > .btn {
  background: var(--neutral-04);
  color: var(--neutral-01);
}

.site-header--solid .burger span,
.site-header--solid .burger span::before,
.site-header--solid .burger span::after,
.site-header.is-stuck .burger span,
.site-header.is-stuck .burger span::before,
.site-header.is-stuck .burger span::after { background: var(--neutral-04); }

/* ---------------------------------------------------------------------- */
/* Phone header: 68px tall, solid cream, dark mark. Measured off the live
   site's "Phone Close Light" navbar variant; grows to 280 when open.    */
/* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* The turning-white-on-scroll is a desktop thing. On a phone the bar is
     the solid cream one from the first pixel and stays that way. */
  .site-header,
  .site-header.is-stuck {
    padding: 16px var(--gutter);
    background: var(--neutral-01);
  }
  .site-header__inner { min-height: 36px; }

  .logo--light { display: none; }
  .logo--dark { display: block; }
}