/* Citybroom — home page, upper half.
   Every size here was read off the live Framer site with getComputedStyle
   on 2026-09-03, section by section, at 1440 wide. */

/* Headings ------------------------------------------------------------- */
.h2 { font: 500 54px/110% var(--font-display); letter-spacing: -0.03em; }
.h2--light { color: var(--neutral-01); }
.h4 { font: 600 24px/140% var(--font-display); letter-spacing: -0.5px; }
/* The 20px bold that titles every small card on the site */
.h5 { font: 600 20px/140% var(--font-display); }

/* HERO ----------------------------------------------------------------- */
/* A fixed 950 tall. The content is taller than the padding box, so it is
   centred and spills evenly into the padding, exactly as Framer lays it. */
.hero {
  position: relative;
  height: 950px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 200px var(--gutter) 108px;
  overflow: hidden;
  color: var(--neutral-01);
}
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.hero__overlay {
  position: absolute; inset: 0;
  background: var(--overlay-hero);
  z-index: 1;
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}
.hero__text { display: flex; flex-direction: column; gap: 32px; align-items: flex-start; }
.hero__copy { display: flex; flex-direction: column; gap: 24px; max-width: 603px; }
.hero__title {
  font: 500 82px/100% var(--font-display);
  letter-spacing: -0.045em;
}
.hero__lede {
  max-width: 453px;
  opacity: .8;
  font: 400 18px/170% var(--font-display);
}

/* The glass card bottom-right of the hero. 269 x 211. */
.hero__row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.stat-card {
  position: relative;
  width: 269px;
  height: 211px;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  border-radius: var(--radius);
  background: var(--card-glass);
  overflow: hidden;
}
/* Sits flush in the card's corner, radius 8 */
.stat-card__thumb {
  position: absolute; top: 0; right: 0;
  width: 95px; height: 55px;
  border-radius: 8px;
  object-fit: cover;
  z-index: 1;
}
.stat-card__label {
  max-width: 130px;
  font: 400 14px/170% var(--font-display);
  color: var(--neutral-02);
}
.stat-card__stats { display: flex; flex-direction: column; }
.stat-card__number {
  font: 500 54px/110% var(--font-number);
  letter-spacing: -3px;
  font-feature-settings: "tnum", "zero";
}
.stat-card__caption { font: 500 16px/170% var(--font-display); color: var(--neutral-02); }

/* TRABAJAMOS CON ------------------------------------------------------- */
.brands__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 861px;
}
.brands__label { font: 500 16px/170% var(--font-display); color: var(--neutral-03); }
.brands__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
}
/* Juan never supplied the partner logos — these hold the space at the
   right size (206 x 39) so the row does not collapse when they arrive. */
.brands__slot {
  flex: 1;
  height: 39px;
  border-radius: 8px;
  background: rgba(24, 24, 24, .06);
}

/* QUIÉNES SOMOS -------------------------------------------------------- */
.about__grid {
  display: flex;
  align-items: flex-end;
  gap: 50px;
}
.about__left {
  flex: 1;
  max-width: 490px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  z-index: 1;
}
.about__photo {
  width: 100%;
  height: 511px;
  object-fit: cover;
  border-radius: var(--radius);
}
.about__right {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 156px;
  align-items: flex-start;
}
/* 22% wide, 0.807 tall for its width, hanging 117 above the column */
.about__photo-small {
  position: absolute;
  top: -117px; right: 23px;
  width: 22%;
  aspect-ratio: 0.807;
  object-fit: cover;
  border-radius: var(--radius);
  z-index: 0;
}
.about__copy {
  max-width: 376px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
}
.about__copy p { opacity: .9; font: 400 16px/180% var(--font-display); color: var(--neutral-03); }

/* The two feature cards: olive icon box, 20px title, grey line */
.about__features { display: flex; gap: 64px; width: 100%; }
.about__features li { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.feature__icon {
  width: 43px; height: 46px;
  padding: 12px;
  border-radius: 8px;
  background: var(--color-01);
  display: grid;
  place-items: center;
}
.feature__icon svg { width: 19px; height: 22px; display: block; }
.feature__text { display: flex; flex-direction: column; gap: 8px; }
.feature__text p { font: 400 16px/180% var(--font-display); color: var(--neutral-03); opacity: .9; }

/* NUESTROS SERVICIOS --------------------------------------------------- */
.services { position: relative; overflow: hidden; }
.services__bg { position: absolute; inset: 0; z-index: 0; }
.services__bg img { width: 100%; height: 100%; object-fit: cover; }
.services__scrim { position: absolute; inset: 0; background: var(--overlay-soft); }

.services__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 54px;
  padding: 120px var(--gutter);
}
.services .eyebrow--light { color: var(--neutral-02); }
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

/* The service card: text on the left, photo on the right. 570 x 351. */
.svc {
  display: flex;
  gap: 10px;
  height: 100%;
  min-height: 351px;
  padding: 32px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: var(--neutral-01);
}
.svc__content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.svc__head { display: flex; flex-direction: column; gap: 10px; max-width: 200px; }
.svc__num { font: 400 12px/170% var(--font-display); opacity: .9; }
.svc__title { font: 600 24px/140% var(--font-display); letter-spacing: -0.5px; }
/* The pill. 93 x 32, empty with a faint white ring at rest, filling with
   white and flipping the lettering dark when the card is hovered. The ring
   is Framer's own: 1px of rgba(255,255,255,.4), drawn on a pseudo-element
   so it never nudges the box. */
.svc__more {
  display: block;
  padding: 4px 16px;
  border-radius: 39px;
  background: transparent;
  /* Inset so the ring sits inside the box and never changes its size,
     which is how Framer draws it. */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4);
  color: var(--neutral-01);
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.svc:hover .svc__more {
  background: var(--neutral-01);
  box-shadow: inset 0 0 0 1px var(--neutral-01);
  color: var(--neutral-04);
}

/* The photo needs a box that clips, or the zoom spills past the rounded
   corner of the card. */
.svc__media {
  flex: 1;
  min-width: 0;
  height: 287px;
  border-radius: 8px;
  overflow: hidden;
}
.svc__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}
.svc:hover .svc__img { transform: scale(1.06); }

@media (prefers-reduced-motion: reduce) {
  .svc__img { transition: none; }
  .svc:hover .svc__img { transform: none; }
}
.services__all { align-self: center; }

/* The servicios page opener. The same photo-backed section as the home
   page, only taller, carrying the page title instead of a heading and
   with no button under the cards. Sizes off the live page at 1440. */
.services--page { padding-inline: var(--gutter); }
.services--page .services__inner { padding: 170px 0 130px; gap: 72px; }
.services--page .section-head { max-width: 670px; gap: 16px; }
.services--page .eyebrow--light { color: var(--neutral-01); }
.services--page .h1 { color: var(--neutral-02); }

/* ---------------------------------------------------------------------- */
/* Tablet — 768 to 1199. Framer's tablet is the desktop layout squeezed:   */
/* same paddings, narrower type. Two of its faults are copied on purpose   */
/* and flagged in CITYBROOM.md: the about photos render 0px tall.          */
/* ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .hero { padding: 180px var(--gutter) 108px; }
  .hero__copy { max-width: 600px; }
  .hero__title { font-size: 56px; letter-spacing: -0.025em; }
  .h2 { font-size: 42px; line-height: 106%; }

  .brands__row { gap: 32px; }

  .about { padding: 100px var(--gutter) 80px; }
  .about__grid { flex-direction: column; align-items: stretch; gap: 40px; }
  .about__left { max-width: none; }
  .about__photo { height: 0; }                 /* Framer's tablet fault, kept */
  .about__right { gap: 62px; }
  .about__photo-small { position: static; width: 100%; height: 0; aspect-ratio: auto; }
  .about__copy { max-width: none; }

  .services__inner { padding: 80px var(--gutter); gap: 40px; }
  .services__grid { gap: 20px; }
}

/* ---------------------------------------------------------------------- */
/* Phone — under 768. Every value read off the live site at 390.          */
/* ---------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --gutter: 20px; }

  .site-nav { display: none; }
  /* Only the button in the header bar itself — not the one inside the
     phone menu, which lives in the same header. */
  .site-header__inner > .btn--light { display: none; }
  .burger { display: flex; }

  .hero { padding: 120px var(--gutter) 60px; }
  .hero__inner { gap: 48px; }
  .hero__text { gap: 30px; }
  .hero__copy { max-width: none; }
  .hero__title { font-size: 36px; letter-spacing: -0.025em; }
  .hero__lede { max-width: none; }
  /* The card drops under the text, on the left, with Framer's invisible
     93 x 103 spacer and a 30px gap above it. */
  .hero__row { flex-direction: column; align-items: flex-start; gap: 30px; }
  .hero__row > span { display: block; width: 93px; height: 103px; }

  .brands { padding: 60px var(--gutter) 0; }
  .brands__inner { gap: 29px; }
  .brands__row { flex-wrap: wrap; gap: 20px 30px; justify-content: center; }
  .brands__slot { flex: 0 0 128px; height: 30px; }

  .about { padding: 60px var(--gutter); }
  .about__grid { gap: 36px; }
  .about__left { gap: 40px; }
  .h2 { font-size: 32px; line-height: 110%; letter-spacing: -0.03em; }
  .about__photo { height: 350px; }
  .about__right { gap: 40px; }
  .about__photo-small { position: static; width: 100%; height: 300px; aspect-ratio: auto; order: -1; }
  .about__features { flex-direction: column; gap: 40px; }

  .services__inner { padding: 60px var(--gutter); gap: 48px; }
  /* One column, every row as tall as the tallest card, cards not stretched */
  .services__grid { grid-template-columns: 1fr; grid-auto-rows: 1fr; gap: 24px; }
  .svc { flex-direction: column; padding: 16px; gap: 26px; min-height: 0; height: auto; }
  .svc__content { gap: 20px; }
  .svc__head { max-width: none; }
  .svc__title { line-height: 130%; }
  .svc__media { width: 100%; height: 287px; flex: none; }
}

/* ---------------------------------------------------------------------- */
/* The servicios opener on smaller screens                                 */
/* ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .services--page .services__inner { padding: 120px 0 80px; gap: 48px; }
}

@media (max-width: 767px) {
  .services--page .services__inner { padding: 100px 0 60px; gap: 40px; }
  .services--page .section-head { max-width: none; }
}