/* Citybroom — the inner pages.
   Nosotros, servicios, the six service pages, proyectos, contáctanos, legal. */

.h1 { font: 500 82px/100% var(--font-display); letter-spacing: -0.045em; }
.h3 { font: 600 40px/140% var(--font-display); letter-spacing: -1px; }

/* The header is fixed on every page, so the openers carry the 76px it
   would otherwise have taken up in the flow. */

/* Page opener ---------------------------------------------------------- */
.page-hero { padding: 156px var(--gutter) 64px; background: var(--neutral-01); }
.page-hero--tall { padding: 236px var(--gutter) 200px; }
.page-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 900px;
}
.page-hero__lede { max-width: 620px; font: 400 18px/170% var(--font-display); opacity: .85; }
.page-hero__meta { font: 500 14px/170% var(--font-display); color: var(--neutral-03); }
.page-hero .btn { margin-top: 12px; }

.section--alt { background: var(--neutral-02); }
.section-head__lede { max-width: 620px; margin-top: 8px; opacity: .85; }

/* Long-form pages ------------------------------------------------------ */
.article__grid { display: flex; gap: 80px; align-items: flex-start; }
.article__body { flex: 1; max-width: 680px; }
.article__body > * + * { margin-top: 20px; }
.article__body h2 { margin-top: 8px; }
.article__body h3 { margin-top: 40px; }
.article__body p { opacity: .9; }

.ticks { display: flex; flex-direction: column; gap: 10px; }
.ticks li {
  position: relative;
  padding-left: 26px;
  opacity: .9;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 2px; top: 12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-01);
}

.article__aside {
  position: sticky;
  top: 40px;
  flex: 0 0 380px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.article__aside img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Misión / visión pair -------------------------------------------------- */
.pair-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 48px; }
.pair-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 40px 32px;
  border-radius: var(--radius);
  background: var(--neutral-02);
}
.pair-card p { opacity: .9; }
.section--alt .pair-card { background: var(--neutral-01); }
.section--alt .why__card { background: var(--neutral-01); }

/* The four figures on nosotros ------------------------------------------ */
.figure-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid rgba(24, 24, 24, .12);
}
.figure-row li { display: flex; flex-direction: column; gap: 4px; }
.figure-row .stat__label { color: var(--neutral-04); opacity: .7; }

/* Services list --------------------------------------------------------- */
/* The servicios cards are the home cards, unchanged. The photo backdrop
   that sits behind them on the live site is still to come. */

/* Proyectos ------------------------------------------------------------- */
.project-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.project-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px;
  border-radius: var(--radius);
  background: var(--neutral-02);
  transition: background-color .25s ease, transform .25s ease;
}
.project-card:hover { background: #ecece2; transform: translateY(-3px); }
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
}
.project-card__text { display: flex; flex-direction: column; gap: 8px; padding: 0 8px 12px; }
.project-card__place { font: 500 14px/170% var(--font-display); color: var(--neutral-03); }
.project-card__text p:last-child { opacity: .9; }

/* Contacto -------------------------------------------------------------- */
.contact__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.contact__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 48px 40px;
  border-radius: var(--radius);
  background: var(--neutral-02);
}
.contact__card p { opacity: .9; }
.contact__email {
  font: 600 24px/140% var(--font-display);
  letter-spacing: -0.5px;
  border-bottom: 1px solid rgba(24, 24, 24, .25);
}
/* A button with nowhere to go yet — reads as unavailable rather than broken */
.btn.is-pending { opacity: .45; pointer-events: none; }

/* Legal ----------------------------------------------------------------- */
.legal { max-width: 760px; }
.legal > * + * { margin-top: 16px; }
.legal h2 { margin-top: 40px; }
.legal p { opacity: .9; }
.legal a { border-bottom: 1px solid rgba(24, 24, 24, .3); }

/* ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .h1 { font-size: 58px; }
  .h3 { font-size: 32px; }
  .article__grid { flex-direction: column; gap: 48px; }
  .article__aside { position: static; flex: none; width: 100%; max-width: 420px; }
  .figure-row { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .project-grid, .contact__grid, .pair-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .h1 { font-size: 38px; letter-spacing: -0.03em; }
  .h3 { font-size: 26px; }
  .page-hero { padding: 116px var(--gutter) 40px; }
  .page-hero--tall { padding: 158px var(--gutter) 120px; }
  .figure-row { grid-template-columns: 1fr; gap: 24px; }
  .pair-card, .contact__card { padding: 28px 24px; }
  .contact__email { font-size: 18px; word-break: break-all; }
}

/* ---------------------------------------------------------------------- */
/* Inter Display alternates. Framer turns these on for every text on the
   site, and the `font:` shorthand used above resets them — so they are set
   here, last, with enough weight to win. The counters use their own. */
:root body * { font-feature-settings: "blwf", "cv03", "cv04", "cv09", "cv11"; }
:root body .stat-card__number { font-feature-settings: "tnum", "zero"; }
:root body .stat__number { font-feature-settings: normal; }

/* ====================================================================== */
/* NOSOTROS — the four opening sections.                                   */
/* Every size read off the live page at 1440 on 2026-09-03.               */
/* ====================================================================== */

/* Quiénes somos — words on the left, then one wide photograph */
.nos-hero { padding: 200px var(--gutter) 130px; }
.nos-hero__inner { display: flex; flex-direction: column; gap: 72px; }
.nos-hero__text { max-width: 595px; display: flex; flex-direction: column; gap: 24px; }
.nos-hero__lede {
  max-width: 501px;
  font: 400 18px/170% var(--font-display);
  color: var(--neutral-03);
}
.nos-hero__photo {
  width: 100%;
  height: 650px;
  object-fit: cover;
  border-radius: var(--radius-lg);
}

/* Misión y visión — tall photograph beside the words */
.nos-mv { padding: 0 var(--gutter) 130px; }
.nos-mv__inner { display: flex; gap: 64px; align-items: center; }
.nos-mv__photo {
  flex: 0 0 552px;
  height: 654px;
  object-fit: cover;
  border-radius: var(--radius);
}
.nos-mv__right { flex: 1; min-width: 0; max-width: 600px; display: flex; flex-direction: column; gap: 54px; }
.nos-mv__head { display: flex; flex-direction: column; gap: 16px; }
.nos-mv__lede {
  max-width: 447px;
  opacity: .9;
  font: 400 16px/180% var(--font-display);
  color: var(--neutral-03);
}
.nos-mv__cards { max-width: 429px; display: flex; flex-direction: column; gap: 32px; }
.nos-mv__cards li { display: flex; flex-direction: column; gap: 10px; }
.nos-mv__cards p { opacity: .9; font: 400 16px/180% var(--font-display); color: var(--neutral-03); }

/* Nuestros valores — three numbered marks joined by a faint dotted line */
.values { padding: 0 var(--gutter) 130px; }
.values__inner { display: flex; flex-direction: column; align-items: center; gap: 72px; }
.values__head { max-width: 434px; }
.values__row {
  position: relative;
  width: 100%;
  max-width: 1034px;
  display: flex;
  justify-content: space-between;
}
/* The two dotted arcs that run behind the marks. Framer's own paths, at
   a tenth of full strength. */
.values__arc { position: absolute; opacity: .1; pointer-events: none; }
/* The dashes crawl along the path, about 2.8 units a second on the live
   site. Each loop shifts by exactly one dash-plus-gap so it never jumps.
   The two arcs have slightly different dash lengths, hence two timings. */
@keyframes values-dots-a { to { stroke-dashoffset: -0.6642; } }
@keyframes values-dots-b { to { stroke-dashoffset: -0.6684; } }
.values__arc--a path { animation: values-dots-a .238s linear infinite; }
.values__arc--b path { animation: values-dots-b .24s linear infinite; }

@media (prefers-reduced-motion: reduce) {
  .values__arc--a path, .values__arc--b path { animation: none; }
}
.values__arc--a { left: 165px; top: 33px; width: 323px; height: 81px; }
.values__arc--b { left: 532px; top: 76px; width: 338px; height: 84px; }

.value {
  position: relative;
  z-index: 1;
  width: 278px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.value__mark { display: flex; flex-direction: column; align-items: center; gap: 10px; }
/* The big faint number. Framer paints it with a gradient clipped to the
   letters, then drops the lot to half strength. */
.value__n {
  font: 600 40px/140% var(--font-display);
  letter-spacing: -1px;
  opacity: .5;
  background: linear-gradient(0deg, rgb(245, 245, 240) 0%, rgba(16, 17, 12, .05) 30.38%,
              rgba(16, 17, 12, .1) 40%, rgba(16, 17, 12, .15) 50.05%, rgb(24, 24, 24) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.value__icon {
  width: 54px;
  height: 54px;
  border-radius: 6px;
  background: var(--color-01);
  display: grid;
  place-items: center;
}
.value__icon svg { width: 24px; height: 24px; display: block; }
.value__text { display: flex; flex-direction: column; gap: 10px; text-align: center; }
.value__text p { font: 400 16px/180% var(--font-display); color: var(--neutral-03); }

/* Cómo operamos — the four figures and two photographs on a cream panel */
.operate { padding: 0 var(--gutter); }
.operate__panel {
  max-width: 1378px;
  margin-inline: auto;
  padding: 120px var(--gutter) 90px;
  border-radius: var(--radius-lg);
  background: var(--neutral-02);
}
.operate__content { max-width: 1044px; margin-inline: auto; }
.operate__head { display: flex; justify-content: space-between; gap: 40px; padding-bottom: 72px; }
.operate__head .section-head { max-width: 420px; }
.operate__lede {
  flex: 0 0 376px;
  opacity: .9;
  font: 400 16px/180% var(--font-display);
  color: var(--neutral-03);
}
.operate__figures { display: flex; justify-content: space-between; gap: 24px; padding: 40px 0; }
.operate__figures li { display: flex; flex-direction: column; align-items: center; gap: 8px; }
/* Framer sets the 24/7 apart as its own heading, which makes that one
   figure six pixels taller and sets the height of the whole row. */
.operate__figures .stat__number { color: var(--neutral-04); line-height: 110%; }
.operate__figures .stat__label { color: var(--neutral-03); opacity: .9; text-align: center; }
.operate__photos { display: flex; gap: 20px; }
.operate__photos img {
  flex: 1;
  min-width: 0;
  height: 500px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ---------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .nos-hero { padding: 150px var(--gutter) 90px; }
  .nos-hero__inner { gap: 48px; }
  .nos-hero__photo { height: 460px; }
  .nos-mv { padding: 0 var(--gutter) 90px; }
  .nos-mv__inner { flex-direction: column; gap: 40px; align-items: stretch; }
  .nos-mv__photo { flex: none; width: 100%; height: 460px; }
  .nos-mv__right { gap: 40px; }
  .nos-mv__lede, .nos-mv__cards { max-width: none; }
  .values { padding: 0 var(--gutter) 90px; }
  .values__inner { gap: 48px; }
  .values__row { flex-direction: column; align-items: center; gap: 48px; }
  .values__arc { display: none; }
  .operate__panel { padding: 80px var(--gutter) 64px; }
  .operate__head { flex-direction: column; gap: 24px; padding-bottom: 48px; }
  .operate__lede { flex: none; }
  .operate__figures { flex-wrap: wrap; gap: 32px 24px; }
  .operate__figures li { flex: 0 0 calc(50% - 12px); }
  .operate__photos img { height: 340px; }
}

@media (max-width: 767px) {
  .nos-hero { padding: 116px var(--gutter) 60px; }
  /* A short strip on a phone, not the tall box it is on a wide screen */
  .nos-hero__photo { height: 186px; }
  /* And the sky drops to the foot of the section, under Nuestra visión */
  .nos-mv__photo { height: 350px; order: 1; }
  .operate { padding: 0 var(--gutter); }
  .operate__panel { padding: 60px 20px 48px; border-radius: var(--radius); }
  .operate__figures { flex-direction: column; gap: 28px; }
  .operate__figures li { flex: none; }
  .operate__photos { flex-direction: column; }
  .operate__photos img { height: 260px; }
}