/* Citybroom — the lower half of the home page.
   Beneficios, nuestra operación, por qué Citybroom, preguntas, contacto, pie.
   Every size read off the live Framer site with getComputedStyle, 2026-09-03. */

/* ====================================================================== */
/* NUESTROS BENEFICIOS                                                     */
/* ====================================================================== */
.benefits { padding: 120px var(--gutter) 0; }
.benefits__inner { display: flex; flex-direction: column; gap: 50px; }
.benefits__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}
.benefits__head .section-head { max-width: 400px; }

/* Three cards, 392 wide, centred on each other */
.benefits__cards { display: flex; gap: 24px; align-items: center; }
.benefit {
  flex: 1;
  padding: 48px 56px;
  border-radius: var(--radius);
  background: rgb(242, 246, 241);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
}
.benefit svg { width: 64px; height: 64px; display: block; }
.benefit__text { display: flex; flex-direction: column; gap: 10px; }
.benefit__text p { font: 400 14px/170% var(--font-display); color: var(--neutral-03); }

/* The video, with the play button in the middle and the ticker along
   the bottom edge. 1224 x 690. */
.benefits__video {
  position: relative;
  height: 690px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 4px 4px rgba(0, 0, 1, .07);
  background: var(--neutral-02);
}
.benefits__video video {
  width: 100%; height: 100%;
  object-fit: cover;
}
.video-toggle {
  position: absolute;
  top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--neutral-01);
  display: grid;
  place-items: center;
  padding: 0;
}
.video-toggle::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
}
.video-toggle svg { position: relative; width: 24px; height: 24px; display: block; }
.video-toggle .icon-pause { display: none; }
.video-toggle[aria-pressed="true"] .icon-play { display: none; }
.video-toggle[aria-pressed="true"] .icon-pause { display: block; }

.ticker {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 16px 0;
  background: rgba(0, 0, 0, .2);
  backdrop-filter: blur(27px);
  -webkit-backdrop-filter: blur(27px);
  overflow: hidden;
}
.ticker__track {
  display: flex;
  gap: 80px;
  width: max-content;
  padding-right: 80px;
  animation: ticker 20s linear infinite; /* ~60px a second, measured on the live site */
}
.ticker__track span {
  font: 600 20px/140% var(--font-display);
  color: var(--neutral-01);
  white-space: nowrap;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none; }
}

/* ====================================================================== */
/* NUESTRA OPERACIÓN — the dark panel                                      */
/* ====================================================================== */
.operation { padding: 0 var(--gutter); }
.operation__panel {
  max-width: 1378px;
  margin-inline: auto;
  padding: 120px 0;
  border-radius: var(--radius-lg);
  background: var(--neutral-04);
  color: var(--neutral-01);
  overflow: hidden;
}
.operation__content {
  max-width: 1016px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 72px;
}
.operation__content .section-head { max-width: 578px; }

/* Holds the exact space the globe needs, so nothing below shifts when the
   real one arrives. */
.globe-slot {
  position: relative;
  width: 500px;
  height: 500px;
  max-width: 100%;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 45%, rgba(245,245,240,.06), transparent 62%),
    repeating-radial-gradient(circle at 50% 50%,
      rgba(245,245,240,.10) 0 1px, transparent 1px 9px);
}
.globe-slot__pin {
  font: 500 14px/170% var(--font-display);
  padding: 8px 14px;
  border-radius: 58px;
  background: rgba(245, 245, 240, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.operation__bottom {
  width: 100%;
  max-width: 586px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}
.operation__stats {
  width: 100%;
  max-width: 481px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.operation__stats li { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.stat__number {
  font: 500 54px/100% var(--font-number);
  letter-spacing: -0.03em;
  font-feature-settings: normal;
}
.stat__label { font: 500 16px/170% var(--font-display); color: var(--neutral-02); opacity: .9; }

/* The paragraph that lights up letter by letter as it scrolls through */
.operation__copy {
  text-align: center;
  font: 600 20px/140% var(--font-display);
}
.operation__copy .ch { opacity: .2; transition: opacity .25s ease; }
.operation__copy .ch.lit { opacity: 1; }

/* ====================================================================== */
/* POR QUÉ CITYBROOM                                                       */
/* ====================================================================== */
.why__inner { display: flex; flex-direction: column; gap: 54px; }
.why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 50px;
}
.why__head .section-head { max-width: 500px; }
.why__lede { flex: 0 1 404px; color: var(--neutral-03); font: 400 16px/180% var(--font-display); }

/* Photo cards with a glass panel pinned to the bottom. 392 x 450. */
.why__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.why__card {
  position: relative;
  min-height: 450px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--radius);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  color: var(--neutral-01);
}
.why__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, .15);
  backdrop-filter: blur(27.95px);
  -webkit-backdrop-filter: blur(27.95px);
}
.why__num { font: 400 12px/170% var(--font-display); opacity: .9; }
.why__text { display: flex; flex-direction: column; gap: 6px; }
.why__text p { font: 400 14px/170% var(--font-display); color: var(--neutral-02); opacity: .9; }

/* ====================================================================== */
/* PREGUNTAS FRECUENTES                                                    */
/* ====================================================================== */
.faq { background: var(--neutral-02); }
.faq__grid { display: flex; gap: 64px; align-items: flex-start; }
.faq__content { flex: 0 0 562px; display: flex; flex-direction: column; gap: 48px; }
.faq .eyebrow { color: var(--neutral-04); }
.faq__photo {
  flex: 1;
  min-width: 0;
  height: 722px;
  object-fit: cover;
  border-radius: var(--radius);
}
.faq__list { display: flex; flex-direction: column; gap: 12px; }
.faq__item {
  padding: 25px 32px;
  border-radius: 8px;
  background: var(--neutral-01);
  transition: background-color .25s ease;
}
.faq__item.is-open { background: #fff; }
.faq__q {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 52px;
  width: 100%;
  padding: 0;
  text-align: left;
  font: 600 20px/140% var(--font-display);
}
/* The plus that turns into a minus. 20 box, two 13 x 2 bars. */
.faq__sign { position: relative; flex: 0 0 20px; height: 20px; margin-top: 4px; }
.faq__sign::before,
.faq__sign::after {
  content: ""; position: absolute;
  left: 4px; top: 9px;
  width: 13px; height: 2px;
  border-radius: 10px;
  background: var(--neutral-04);
  transition: transform .25s ease;
}
.faq__sign::after { transform: rotate(90deg); }
.faq__item.is-open .faq__sign::after { transform: rotate(0); }

/* The answer stays in the question's column, clear of the icon */
.faq__a {
  padding-right: 72px;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq__a > p {
  overflow: hidden;
  font: 400 14px/170% var(--font-display);
  color: var(--neutral-03);
  opacity: .9;
}
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a > p { padding-top: 12px; }

/* ====================================================================== */
/* CONTÁCTANOS — glass box over the services photo, 680 tall               */
/* ====================================================================== */
.cta {
  position: relative;
  padding: 120px var(--gutter);
  overflow: hidden;
  color: var(--neutral-01);
}
.cta__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cta__inner { position: relative; z-index: 1; display: flex; justify-content: center; }
.cta__box {
  width: 100%;
  max-width: 792px;
  padding: 72px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  background: rgba(180, 180, 180, .15);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
}
.cta__body { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cta__text { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.cta__lede { max-width: 527px; opacity: .9; font: 400 16px/180% var(--font-display); }

/* ====================================================================== */
/* FOOTER — sizes read off the live footer 2026-09-03                      */
/* ====================================================================== */
.footer {
  position: relative;
  background: var(--neutral-04);
  color: var(--neutral-01);
  padding: 110px var(--gutter) 210px;
  overflow: hidden;
}
.footer > * { position: relative; z-index: 1; }

.footer__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding-bottom: 110px;
  margin-bottom: 24px;
}
.footer__brand { flex: 1; max-width: 332px; }
.footer__brand img { width: 116px; height: 31px; object-fit: contain; }

.footer__cols {
  flex: 1;
  max-width: 640px;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}
.footer__col { display: flex; flex-direction: column; gap: 24px; }
.footer__title {
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  margin: 0;
}
.footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.footer__col a {
  display: block;
  font: 600 14px/170% var(--font-display);
  text-transform: uppercase;
  opacity: .8;
  transition: color .2s ease;
}
/* Framer's hover on these falls back to the browser's default link blue.
   Matched as-is; flagged for RAWFORM. */
.footer__col a:hover { color: rgb(0, 0, 238); }

/* Bottom row: social on the left, copyright on the right */
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.footer__social { display: flex; align-items: center; gap: 22px; }
.social { display: block; }

/* Empty squares holding the icon positions. RAWFORM is sending the SVGs;
   drop each one inside its slot and delete the border. The first slot is
   the 32px WhatsApp button, the other three are 18px marks. */
.social__slot {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px dashed rgba(245, 245, 240, .35);
  transition: border-color .2s ease, background-color .2s ease;
}
.social__slot[data-icon="whatsapp"] { width: 32px; height: 32px; border-radius: 0; }
.social:hover .social__slot {
  border-color: rgba(245, 245, 240, .8);
  background: rgba(245, 245, 240, .08);
}

.footer__copy {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 400 14px/170% var(--font-display);
  color: var(--neutral-02);
}
.footer__copy svg { flex: none; }

/* The giant wordmark bleeding off the bottom, 9% opacity. 1224 x 382,
   its bottom edge 130 below the footer's. Empty until the SVG lands —
   the space is already reserved. */
.footer__wordmark {
  position: absolute;
  left: 50%;
  bottom: -130px;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1224px;
  height: 382px;
  opacity: .09;
  pointer-events: none;
  z-index: 0;
}

/* ====================================================================== */
/* Tablet — 768 to 1199. Framer keeps the desktop layout here; the cards   */
/* just get narrow. The footer columns overflow on the live site too.      */
/* ====================================================================== */
@media (max-width: 1199px) {
  .benefit { padding: 48px 56px; flex: 1 1 0; min-width: 0; }
  .benefits__video { height: 399px; }

  .operation__content .section-head { max-width: 458px; }

  .why__head { gap: 0; }
  .why__head .section-head { max-width: 474px; }
  .why__lede { flex: 0 0 234px; }

  .faq__content { flex: 0 0 322px; }
  .faq__photo { height: auto; align-self: stretch; }

  .cta__box { max-width: none; }

  /* Framer's tablet footer: a 376px link block whose three fixed-width
     columns spill past the right edge. Kept as-is; flagged for RAWFORM. */
  .footer__cols { flex: 0 0 376px; max-width: none; justify-content: flex-start; gap: 0; }
  .footer__col { flex: none; }
  .footer__col:nth-child(1) { width: 83px; }
  .footer__col:nth-child(2) { width: 282px; }
  .footer__col:nth-child(3) { width: 183px; }
  .footer__wordmark { height: 221px; bottom: -129px; }
}

/* ====================================================================== */
/* Phone — under 768. Every value read off the live site at 390.          */
/* ====================================================================== */
@media (max-width: 767px) {
  .benefits { padding: 60px var(--gutter) 20px; }
  .benefits__inner { gap: 48px; }
  .benefits__head { flex-direction: column; align-items: center; text-align: center; gap: 28px; }
  .benefits__head .section-head { align-items: center; max-width: none; }
  .benefits__cards { flex-direction: column; align-items: stretch; gap: 20px; }
  .benefit { padding: 20px; gap: 45px; }
  .benefit:first-child { min-height: 317px; }   /* fixed height in Framer's phone card */
  .benefits__video { height: 150px; border-radius: 10px; }
  .video-toggle { width: 50px; height: 50px; }
  .video-toggle svg { width: 15px; height: 15px; }

  .operation__panel { padding: 60px 0; border-radius: var(--radius); }
  .operation__content { padding-inline: 14px; gap: 40px; }
  .globe-slot { width: 343px; height: 343px; }
  .operation__bottom { gap: 40px; }
  .operation__stats { flex-direction: column; align-items: center; gap: 20px; }
  .stat__number { font-size: 34px; }

  .why { padding: 40px var(--gutter) 60px; }
  .why__inner { gap: 48px; }
  .why__head { flex-direction: column; align-items: flex-start; gap: 28px; }
  .why__head .section-head { max-width: none; }
  .why__lede { flex: none; }
  .why__grid { grid-template-columns: 1fr; }
  .why__card { min-height: 350px; padding: 16px; }
  .why__panel { padding: 16px; }

  .faq { padding: 60px var(--gutter); }
  .faq__grid { flex-direction: column; gap: 32px; }
  .faq__content { flex: none; }
  .faq__item { padding: 20px 24px; }
  .faq__item.is-open { background: var(--neutral-01); }
  .faq__photo { flex: none; width: 100%; height: 350px; align-self: auto; }

  .cta { padding: 60px var(--gutter); }
  .cta__box { padding: 20px; }

  .footer { padding: 60px var(--gutter) 104px; }
  .footer__top { flex-direction: column; gap: 40px; padding-bottom: 40px; margin-bottom: 24px; }
  .footer__cols { flex-direction: column; gap: 0; max-width: none; flex: none; }
  .footer__col { flex: none; width: auto; padding-bottom: 20px; }
  .footer__col:last-child { padding-bottom: 0; }
  .footer__base { flex-direction: column; align-items: center; gap: 20px; }
  .footer__wordmark { height: 109px; bottom: -38px; }
}