/*
 * CHM — site custom CSS.
 * Deployed as a file in the child theme (hello-theme-child-master/chm-sitio.css),
 * enqueued last. Do NOT paste it into Elementor → Site Settings → Custom CSS:
 * that box prints before Elementor's widget styles and loses every tie.
 * Only what Elementor controls cannot express. Colors come from the kit
 * through --e-global-color-* variables, never hard-coded, except the
 * white-on-photo tones of the hero, which have no kit color.
 * Source of every value: maqueta/css/estilo.css (approved home).
 */

/* === Home · Hero ======================================================= */

/* The claim sits in a solid navy box (15/10). The 06/10 round asked that
   «Consultoría y Gestión Inmobiliaria» stop getting lost against the windows,
   and Camila asked twice (09/09, 16/09) for an opening photo that reads bright
   and fills the screen, like fortuneintlgroup.com. The box keeps the claim
   legible on any part of the photo without dimming the rest of it. It replaces
   the radial scrim and the text halo used from 16/09 to 15/10. */
.e-con.chm-hero {
  position: relative;
  isolation: isolate;
}

.e-con.chm-hero > .e-con {
  position: relative;
  z-index: 1;
}

/* !important: the widget sets its own width and padding through per-element
   rules one specificity step above ours. */
.chm-hero__claim {
  width: fit-content !important;
  max-width: fit-content !important;
  padding: clamp(1.25rem, 2vw, 2rem) clamp(1.5rem, 2.6vw, 2.6rem) !important;
  background: var(--e-global-color-primary);
}

.chm-hero__claim .elementor-heading-title {
  max-width: 22ch;
  text-wrap: balance;
}

/* Desktop only: the photo pans down while the cover scrolls away, so the floors
   below the first frame come into view (Fabián, 15/10, to show more of the
   building; the whole building needs the horizontal render asked of CHM). The
   desktop image is cropped taller for it, and 50% 25% is the framing Elementor
   sets on load. Never with reduced motion, and only where scroll-driven
   animations exist; elsewhere the photo stays still. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1025px) {
    @keyframes chm-hero-pan {
      from {
        background-position: 50% 25%;
      }
      to {
        background-position: 50% 100%;
      }
    }

    .e-con.chm-hero {
      animation: chm-hero-pan linear both;
      animation-timeline: scroll(root);
      animation-range: 0 100vh;
    }
  }
}

/* The claim's second line, one step softer. It was 72% white over the old dark
   render; over a daylight photo that reads as grey, so it is now 90%. */
.chm-hero__claim .elementor-heading-title em {
  display: block;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
}

.chm-hero .elementor-button {
  text-shadow: 0 1px 2px rgba(9, 16, 34, 0.55);
}

/* === Home · Figures ==================================================== */

/* Figures are data: lining tabular numerals, not a typography control. */
.chm-figure__value .elementor-heading-title {
  font-variant-numeric: lining-nums tabular-nums;
}

/* Centred in their columns since the 06/10 round, so the space between the
   three figures reads even. 26ch keeps "m² comercializados" on one line. */
.chm-figure__label .elementor-heading-title {
  max-width: 26ch;
  margin-inline: auto;
}

/* === Home · Lo que hacemos ============================================= */

/* Two columns from 56rem, the mockup's own breakpoint. Elementor's tablet
   range starts at 1024px, which would break the layout between 896 and 1024. */
.e-con.chm-statement__grid {
  align-items: start;
}

@media (min-width: 56rem) {
  .e-con.chm-statement__grid {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  }
}

/* Links never carry a colour of their own: they take the colour of the text
   around them and keep the underline. The accent has exactly three roles —
   active row marker, primary action and the "Ver más" control — and a link
   colour would quietly make it a fourth. Buttons and the menu are left alone:
   they set their own colour at a higher weight. */
.elementor-widget-text-editor a,
.elementor-widget-heading a {
  color: inherit;
  /* The theme strips the underline. With no colour of their own left, an
     underline is the only thing that still says "this is a link". */
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.chm-lead .elementor-widget-container {
  max-width: 46ch;
}

.chm-prose .elementor-widget-container {
  max-width: 68ch;
}

/* Profiles: a list of facts closed by hairlines, never a bulleted list. */
.chm-profiles {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--e-global-color-primary);
}

.chm-profiles li {
  border-bottom: 1px solid var(--e-global-color-filete);
  padding-block: 0.95rem;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* «A quién asesoramos»: the client category that opens each item stands out in
   ink and weight, the rest of the sentence does not (CHM, 05/11). Scoped to the
   statement block so Contacto's names keep their look. */
.chm-statement .chm-profiles strong {
  font-weight: 600;
  color: var(--e-global-color-primary);
}

/* === Home · Líneas de negocio ========================================== */

/* Stacked schedule: icon, name and text. Below 56rem the text drops under the
   name; from 56rem the three sit on one line. */
.e-con.chm-row {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 2.25rem);
  row-gap: 0;
  align-items: start;
  position: relative;
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-row__icon {
  grid-column: 1;
  grid-row: 1;
  color: var(--e-global-color-text);
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-row__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.chm-row__name {
  grid-column: 2;
  grid-row: 1;
}

.chm-row__text {
  grid-column: 2;
  grid-row: 2;
  margin-top: 0.65rem;
  max-width: 62ch;
}

/* The magenta marker of the active row: one of the accent's three roles. */
.e-con.chm-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  height: 2px;
  width: 100%;
  background: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 56rem) {
  .e-con.chm-row {
    grid-template-columns: 2.75rem minmax(0, 15rem) minmax(0, 1fr);
    align-items: center;
  }

  .chm-row__text {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
  }
}

@media (hover: hover) {
  .chm-schedule__list:hover .chm-row {
    opacity: 0.45;
  }

  .chm-schedule__list:hover .chm-row:hover {
    opacity: 1;
  }

  .e-con.chm-row:hover::before,
  .e-con.chm-row:focus-within::before {
    transform: scaleX(1);
  }

  .chm-row:hover .chm-row__icon,
  .chm-row:focus-within .chm-row__icon {
    color: var(--e-global-color-primary);
  }
}

/* === Home · Proyectos destacados ======================================= */

/* A plate is an image with its caption below a hairline. Not a card. */
@media (min-width: 52rem) {
  .e-con.chm-plates__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .e-con.chm-plate--wide {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    align-items: center;
  }
}

.chm-plate__img img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--e-global-color-papelps);
}

.chm-plate__img--wide img {
  aspect-ratio: 16 / 10;
}

.chm-plate__text {
  margin-top: 0.6rem;
}

.chm-plate__specs {
  margin-top: 1rem;
}

.chm-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-variant-numeric: lining-nums tabular-nums;
}

.chm-plate__link {
  margin-top: 1.25rem;
  align-self: start;
}

.chm-plate__link .elementor-button {
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    letter-spacing 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-plate__link .elementor-button:hover,
.chm-plate__link .elementor-button:focus-visible {
  letter-spacing: 0.15em;
}

/* === Home · Histórico de proyectos ===================================== */

@media (min-width: 46rem) {
  .e-con.chm-record__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}

.chm-record__img img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: #ddd9d1;
  filter: saturate(0.72);
}

.chm-record__name {
  margin-top: 0.9rem;
}

.chm-record__text {
  margin-top: 0.4rem;
}

/* This size sits outside the kit's ramp: it exists only here. !important
   beats Elementor's per-element rule, which is one specificity step higher. */
.chm-record__text .elementor-widget-container {
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

/* === Home · Nuestros clientes ========================================== */

.e-con.chm-register__head {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

/* The register is ONE grid, not two. "Ver más" used to open a second grid below the
   first, so each block ended in its own partial row: at 1440px the 31 corporate logos
   fell 7+7+2 and then 7+7+1, and since the fillet is drawn per cell, the rules stopped
   twice in the middle of the register. Dissolving both blocks into the group lets the
   31 flow as one table with a single ragged row at the end.

   Losing the blocks' own 10px inline padding widens each cell from 158.8 to 161.7 and
   lands the table on 154..1286 — flush with the head's rule, which until now overhung
   the logos by 10px a side. Column count and logo density are unchanged. Verified by
   rendering both registers in both states. */
.e-con.chm-register__group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
}

.chm-register__group > .chm-register__head,
.chm-register__group > .chm-disclose-wrap {
  grid-column: 1 / -1;
}

.e-con.chm-register__grid {
  display: contents;
}

@media (max-width: 46rem) {
  .e-con.chm-register__group {
    grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  }
}

.chm-logo img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: contain;
  padding: clamp(1rem, 2.2vw, 1.65rem) clamp(0.9rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--e-global-color-filete);
  border-right: 1px solid var(--e-global-color-filete);
  mix-blend-mode: multiply;
}

/* The "Ver más" panel. Hidden by default, opened by the button's script. It opens as
   `contents`, not as `grid`, so its logos join the register's single grid instead of
   starting a second one below it. */
.e-con.chm-register__more {
  display: none;
}

.e-con.chm-register__more.is-open {
  display: contents;
}

.chm-disclose {
  margin-top: 1.5rem;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--e-global-color-accent);
  color: var(--e-global-color-accent);
  font-family: var(--e-global-typography-enlace-font-family), sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  padding: 0 0 0.35rem;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-disclose:hover,
.chm-disclose:focus-visible {
  color: var(--e-global-color-magprof);
  border-bottom-color: var(--e-global-color-magprof);
}

.chm-disclose-js {
  display: none;
}

/* === Home · Cierre ===================================================== */

.chm-close__quote .elementor-heading-title {
  max-width: 30ch;
  text-wrap: balance;
}

.chm-close__attrib {
  margin-top: 1.5rem;
}

.chm-close__attrib .elementor-heading-title {
  letter-spacing: 0.04em !important;
}

/* Space above the button only when text sits above it. Since the 06/10
   round the inner-page closings carry the button alone, and a margin there
   would push it off centre inside the band. */
.chm-close__action:not(:first-child) {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* === Páginas internas · Cabecera ======================================= */

.chm-pagehead__title .elementor-heading-title {
  max-width: 20ch;
  text-wrap: balance;
}

/* === Páginas internas · Variantes de la cuadrícula de fichas =========== */

@media (min-width: 46rem) {
  .e-con.chm-record__grid--four {
    grid-template-columns: repeat(4, 1fr);
  }

  .e-con.chm-record__grid--two {
    grid-template-columns: repeat(2, 1fr);
  }
}

.chm-record__img--two img {
  aspect-ratio: 16 / 10;
}

/* Portraits keep the card grid but stand upright, and crop from the head down
   so no one loses their face to the frame. */
.chm-record__img--portrait img {
  aspect-ratio: 4 / 5;
  object-position: top center;
}

/* A missing facade is stated, not hidden. World Business Center has the best
   description of the nine historicals and no usable photo; dropping it would
   lose a real project over a file that never arrived. */
.chm-record__falta {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--e-global-color-papel);
  border: 1px dashed var(--e-global-color-primary);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 1rem;
  box-sizing: border-box;
  color: var(--e-global-color-text);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === Páginas internas · Equipo ========================================= */

@media (min-width: 46rem) {
  .e-con.chm-people__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.chm-people__portrait img {
  display: block;
  width: 100%;
  max-width: 18rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: top center;
  background: #ddd9d1;
  filter: saturate(0.72);
}

.chm-people__name {
  margin-top: 0.9rem;
}

.chm-people__role {
  margin-top: 0.3rem;
}

/* === Páginas internas · Enlace discreto ================================ */

.chm-quietlink {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  align-self: flex-start;
}

/* === Contacto · Formulario ============================================= */

/* Elementor's form widget brings its own look; these rules bring it back to
   the mockup: underlined fields on paper, no boxes. */
.chm-form {
  --e-form-row-gap: clamp(1.4rem, 3vw, 2rem);
  --e-form-column-gap: clamp(1.4rem, 3vw, 2rem);
}

.chm-form .elementor-field-label {
  display: block;
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
  margin-bottom: 0.55rem;
}

.chm-form .elementor-field-textual {
  width: 100%;
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  color: var(--e-global-color-primary);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--e-global-color-primary);
  border-radius: 0;
  padding: 0.45rem 0;
  box-shadow: none;
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-form .elementor-field-textual:hover {
  border-bottom-color: var(--e-global-color-text);
}

.chm-form .elementor-field-textual:focus {
  outline: none;
  border-bottom-width: 2px;
  box-shadow: none;
}

.chm-form .elementor-field-type-acceptance .elementor-field-option {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--e-global-color-text);
}

/* The consent text shares one widget control with what the visitor types, and
   the mockup sizes them differently, so the panel cannot express both. This
   selector outweighs the widget's own (.elementor-widget-form
   .elementor-field-subgroup label) instead of merely following it. */
.chm-form .elementor-field-type-acceptance .elementor-field-subgroup label {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.chm-form .elementor-field-type-acceptance input[type="checkbox"] {
  margin-top: 0.2rem;
  flex: none;
  accent-color: var(--e-global-color-primary);
}

.chm-form .elementor-button {
  background: var(--e-global-color-accent);
  color: #fff;
  border: 0;
  border-radius: 0;
  padding: 1.05rem 2.25rem;
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: background 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-form .elementor-button:hover,
.chm-form .elementor-button:focus-visible {
  background: var(--e-global-color-magprof);
}

/* === Contacto · Quién atiende cada frente ============================== */

.chm-specs-block {
  margin-top: clamp(1.75rem, 4vw, 3rem);
  border-top: 1px solid var(--e-global-color-filete);
}

.chm-specs__row {
  display: grid;
  gap: 0.35rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.1rem, 2.2vw, 1.6rem);
  border-bottom: 1px solid var(--e-global-color-filete);
}

@media (min-width: 46rem) {
  .chm-specs__row {
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  }
}

.chm-specs__name {
  font-family: "Frank Ruhl Libre", "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: clamp(1.125rem, 1rem + 0.5vw, 1.4rem);
  letter-spacing: -0.012em;
  color: var(--e-global-color-primary);
}

.chm-specs__role {
  color: var(--e-global-color-text);
  max-width: 52ch;
}

/* === Página de gracias ================================================= */

.chm-thanks {
  text-align: center;
}

.chm-thanks__mark img {
  width: 8.5rem;
  height: auto;
  margin-inline: auto;
}

.chm-thanks__title {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
}

.chm-thanks__text {
  margin-top: 1.2rem;
}

.chm-thanks__text .elementor-widget-container {
  max-width: 44ch;
  margin-inline: auto;
}

.chm-thanks__back {
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* The direct line to the commercial who owns the lead. Only the project
   thank-you pages carry it: the general one cannot know which of the seven
   subjects the visitor picked, so it offers no button at all. */
.chm-thanks__direct {
  margin-top: clamp(2.25rem, 5vw, 3.25rem);
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  width: min(100%, 34rem);
  margin-inline: auto;
}

.chm-thanks__owner {
  letter-spacing: 0.06em;
  text-transform: uppercase;
  max-width: 30ch;
  margin-inline: auto;
  line-height: 1.5;
}

.chm-thanks__wa .elementor-button {
  width: auto;
}

/* Marks copy that is still waiting on the client, never a real link. */
.chm-pendiente {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}

/* === Encabezado ======================================================== */

/* Sticky on the header template's own wrapper, not on .chm-masthead inside
   it: a sticky box only travels within its parent, and the wrapper is exactly
   as tall as the masthead, so the rule on .chm-masthead never moved it. It
   scrolled away with the page until 13/10, verified rendering. The body's
   overflow-x: clip does not create a scroll container, so it does not stop
   this one. */
[data-elementor-type="header"] {
  position: sticky;
  top: 0;
  z-index: 20;
}

/* Anchors (#lo-que-hacemos, the tab links from the home) land below the fixed
   header instead of under it: 88px tall, 80px on phones, plus some air. */
html {
  scroll-padding-top: 6.5rem;
}

/* Larger since the 06/10 round: CHM asked for a more visible logo from the
   first screen. The masthead grew with it, 88px tall (80px on phones), set in
   the header template; the home hero subtracts the same figure. */
.chm-masthead__logo img {
  height: 4.5rem;
  width: auto;
}

@media (max-width: 767px) {
  .chm-masthead__logo img {
    height: 4rem;
  }
}

/* The nav is a row of small tracked capitals, underlined only on hover.
   The widget defaults its items to the Primary global font — serif, display
   size — through a per-element rule one specificity step above any class of
   ours, so font-family and font-size are forced here. The list layout is
   restated too, so the nav survives even if the widget's own stylesheet is
   not enqueued in the header location. */
.chm-nav .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chm-nav .elementor-nav-menu--main .elementor-nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chm-nav .elementor-nav-menu--main .elementor-item {
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--e-global-color-text);
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-nav .elementor-nav-menu--main .elementor-item:hover,
.chm-nav .elementor-nav-menu--main .elementor-item:focus-visible,
.chm-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--e-global-color-primary);
  border-bottom-color: var(--e-global-color-primary);
  background: transparent;
}

/* The widget also prints a second, mobile copy of the menu. The header hides
   the whole nav on phones and shows the Contacto link instead. */
.chm-nav .elementor-nav-menu--dropdown {
  display: none !important;
}

/* === Pie de página ===================================================== */

.chm-colophon__logo {
  text-align: left;
}

.chm-colophon__logo img {
  height: 2.75rem;
  width: auto;
  margin-inline: 0;
}

.chm-colophon__blurb {
  margin-top: 1rem;
}

.chm-colophon__blurb .elementor-widget-container {
  max-width: 34ch;
}

/* The footer sets its own size: 0.875rem, outside the kit's ramp. */
.chm-colophon .elementor-widget-text-editor .elementor-widget-container {
  font-size: 0.875rem !important;
  line-height: 1.55 !important;
}

.chm-colophon__items {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
}

.chm-colophon__items li + li {
  margin-top: 0.55rem;
}

.chm-colophon a {
  color: var(--e-global-color-sobrec);
  text-decoration-color: rgba(233, 231, 225, 0.35);
}

/* WhatsApp on CHM's general number, which is Camila's (21/10). The number is
   the link and the icon follows it: an icon alone was a 16 px target for a
   finger (Fabián). No button or floating badge (06/10 round). The glyph is a
   mask, so it takes the link's colour and adds no fourth role for the magenta;
   the editor would strip an inline SVG. Glyph: Font Awesome Free (CC BY 4.0),
   the copy Elementor ships. */
a.chm-wa {
  white-space: nowrap;
}

a.chm-wa::after {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-left: 0.4em;
  vertical-align: -0.17em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4 0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3 0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2 0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2 0-101.7 82.8-184.5 184.6-184.5 49.3 0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5 0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8-3.7 5.6-14.3 18-17.6 21.8-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2-3.7 0-9.7 1.4-14.8 6.9-5.1 5.6-19.4 19-19.4 46.3 0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.chm-colophon a:hover {
  text-decoration-color: currentColor;
}

@media (min-width: 52rem) {
  .e-con.chm-colophon__inner {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
  }
}

/* === Páginas internas · Cierre con pregunta ============================ */

.chm-close__lead .elementor-heading-title {
  max-width: 34ch;
  text-wrap: balance;
}

/* === Líneas de negocio · Pestañas ====================================== */

/* The tab row is the home's schedule row turned sideways: icon and name on an
   ink rule, and the chosen line carries the active-row accent marker. Accent
   role 1 of 3, not a fourth.
   The widget styles itself through custom properties, so they are redefined
   on .e-n-tabs, below the widget element, where they win by inheritance
   whatever the specificity of the rule that set them. */
.chm-tabs .e-n-tabs {
  --n-tabs-gap: 0px;
  --n-tabs-title-gap: 0px;
  --n-tabs-title-background-color: transparent;
  --n-tabs-title-background-color-active: transparent;
  --n-tabs-title-background-color-hover: transparent;
  --n-tabs-title-color: var(--e-global-color-secondary);
  --n-tabs-title-color-active: var(--e-global-color-primary);
  --n-tabs-title-color-hover: var(--e-global-color-primary);
  --n-tabs-title-border-radius: 0;
  display: block;
}

.chm-tabs .e-n-tabs-heading {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--e-global-color-primary);
}

.chm-tabs .e-n-tab-title {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0.75rem;
  width: auto;
  margin: 0;
  padding-block: 1.1rem 1.25rem;
  padding-inline: 0 1rem;
  border: 0;
  border-bottom: 1px solid var(--e-global-color-filete);
  border-radius: 0;
  text-align: start;
  cursor: pointer;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-tabs .e-n-tab-title:nth-child(even) {
  padding-inline-start: 1rem;
  border-left: 1px solid var(--e-global-color-filete);
}

/* The line icon. The files live next to this stylesheet in the child theme:
   WordPress refuses SVG uploads from the command line, and forcing it would
   skip the sanitising that keeps script out of an SVG. Tied to each tab's id,
   so reordering the tabs in the panel keeps every icon with its line. */
.chm-tabs .e-n-tab-title::before {
  content: "";
  display: block;
  width: 2.25rem;
  height: 2.25rem;
  background-color: currentColor;
  -webkit-mask: var(--chm-icono) center / contain no-repeat;
  mask: var(--chm-icono) center / contain no-repeat;
}

#proyectos-inmobiliarios.e-n-tab-title {
  --chm-icono: url("iconos/linea-proyectos-inmobiliarios.svg");
}

#expansion-y-retail.e-n-tab-title {
  --chm-icono: url("iconos/linea-expansion-y-retail.svg");
}

#transacciones-inmobiliarias.e-n-tab-title {
  --chm-icono: url("iconos/linea-transacciones-inmobiliarias.svg");
}

#gestion-de-rentas-y-propiedades.e-n-tab-title {
  --chm-icono: url("iconos/linea-gestion-de-rentas-y-propiedades.svg");
}

/* The marker, the same one an active schedule row carries on the home. */
.chm-tabs .e-n-tab-title::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 100%;
  height: 2px;
  background: var(--e-global-color-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-tabs .e-n-tab-title[aria-selected="true"]::after {
  transform: scaleX(1);
}

.chm-tabs .e-n-tab-title:focus-visible {
  outline: 2px solid var(--e-global-color-primary);
  outline-offset: -2px;
}

.chm-tabs .e-n-tab-title-text {
  display: block;
  font-family: "Frank Ruhl Libre", "Times New Roman", Times, serif;
  font-weight: 500;
  font-size: clamp(1.05rem, 0.95rem + 0.55vw, 1.4rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-transform: none;
  text-align: start;
}

@media (min-width: 56rem) {
  .chm-tabs .e-n-tabs-heading {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .chm-tabs .e-n-tab-title {
    padding-block: 1.5rem 1.6rem;
    padding-inline: 0 1.5rem;
  }
  .chm-tabs .e-n-tab-title:nth-child(even) {
    padding-inline-start: 0;
    border-left: 0;
  }
  .chm-tabs .e-n-tab-title + .e-n-tab-title {
    padding-inline-start: 1.5rem;
    border-left: 1px solid var(--e-global-color-filete);
  }
}

@media (prefers-reduced-motion: reduce) {
  .chm-tabs .e-n-tab-title,
  .chm-tabs .e-n-tab-title::after {
    transition: none;
  }
}

/* === Líneas de negocio · Panel y proceso =============================== */

.chm-tabs .e-n-tabs-content {
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* Elementor pads every container 10px by default and only cancels it for a
   container nested directly in another. The panels hang from the tabs widget,
   not from a container, so the default survived and inset every panel from
   the tab row. Spacing inside the panels comes from the rules below. */
.chm-tabs .e-n-tabs-content .e-con {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
}

.chm-lines__label {
  margin-top: clamp(2.75rem, 5.5vw, 4rem);
}

/* Clients under each line (21/10): the «Nuestros clientes» register, one group
   per subgroup. Air after the «Clientes» label and between groups, which in
   Quiénes somos come from the section around them. A group with no head
   (Gestión de Rentas) takes the head's rule on top instead. */
.e-con.chm-lines__clients {
  margin-top: 1.25rem;
}

.e-con.chm-lines__clients + .e-con.chm-lines__clients {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.e-con.chm-lines__clients:not(:has(> .chm-register__head)) {
  border-top: 1px solid var(--e-global-color-primary);
}

.chm-lines__body .elementor-widget-container p + p {
  margin-top: 1rem;
}

@media (min-width: 56rem) {
  .e-con.chm-lines__body {
    padding-block-start: 0.5rem;
  }
}

/* The process. Numbered, because here the order is the content. A list on a
   phone; wide, it reads left to right with a hairline between steps. */
.e-con.chm-process {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 1.1rem;
  border-top: 1px solid var(--e-global-color-primary);
}

.e-con.chm-process__step {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 0.5rem;
  row-gap: 0;
  align-content: start;
  padding-block: 1.4rem;
  padding-inline: 0;
  border-bottom: 1px solid var(--e-global-color-filete);
}

.chm-process__num {
  grid-row: 1 / span 2;
}

.chm-process__num .elementor-heading-title {
  line-height: 0.95 !important;
  font-variant-numeric: lining-nums tabular-nums;
}

.chm-process__text {
  margin-top: 0.45rem;
}

.chm-process__text .elementor-widget-container {
  max-width: 46ch;
}

@media (min-width: 46rem) {
  .e-con.chm-process {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2rem;
  }
}

@media (min-width: 64rem) {
  /* Numeral, name and text line up across every column, whatever each name
     wraps to. Subgrid carries the three rows through the steps. */
  .e-con.chm-process {
    column-gap: 0;
    grid-template-rows: auto auto 1fr;
  }
  .e-con.chm-process--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .e-con.chm-process--5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
  .e-con.chm-process__step {
    grid-row: span 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    padding-block: clamp(1.5rem, 2.5vw, 2rem) 0;
    padding-inline: 0 1.5rem;
    border-bottom: 0;
  }
  .e-con.chm-process__step + .e-con.chm-process__step {
    padding-inline-start: 1.5rem;
    border-left: 1px solid var(--e-global-color-filete);
  }
  .chm-process__num {
    grid-row: 1;
  }
  .chm-process__name {
    margin-top: 1rem;
  }
}

/* === Project sheet · Artié 84 ========================================== */

/* Only what Elementor cannot express. Section grounds, padding and rules come
   from the container settings in plantillas/artie-84.json.
   Source of every value: maqueta/css/estilo.css.
   Containers need the .e-con prefix: Elementor sets display:flex on every one
   of them, and a bare class loses the tie. */

/* Opening plate and the offices closing plate. Elementor has no aspect-ratio
   control on the image widget, and without it a 4:3 render and a 2.2:1 render
   land at different heights on the same page. */
.chm-sheet__img img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

@media (min-width: 52rem) {
  .chm-sheet__img img {
    aspect-ratio: 16 / 10;
  }
}

.chm-sheet__img--wide img,
.chm-sheet__img--wide.chm-sheet__img img {
  aspect-ratio: 16 / 9;
}

.chm-sheet__caption {
  border-top: 1px solid var(--e-global-color-filete);
  padding-top: 0.7rem;
}

/* Technical data: term and value on a rule grid. */
.e-con.chm-datasheet__row {
  display: grid;
  gap: 0.3rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--e-global-color-filete);
}

@media (min-width: 46rem) {
  .e-con.chm-datasheet__row {
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    align-items: baseline;
  }
}

/* Availability: the schedule row with pieces removed. The area is the figure,
   the price is the second figure, the specifications annotate between them. */
.e-con.chm-unit {
  display: grid;
  gap: 0.75rem 2rem;
  grid-template-columns: minmax(0, 1fr);
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
  border-bottom: 1px solid var(--e-global-color-filete);
  align-items: baseline;
}

/* Tabular numerals so the three areas and the three prices line up on their
   digits, and no-wrap so "118 m²" never breaks across two lines. */
.chm-unit__area p,
.chm-unit__price p {
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0;
}

.chm-unit__area p {
  white-space: nowrap;
}

.chm-unit__area small {
  font-size: 0.42em;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--e-global-color-text);
  margin-left: 0.15em;
}

.chm-unit__specs ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (min-width: 46rem) {
  .e-con.chm-unit {
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) minmax(0, auto);
  }
  .e-con.chm-unit__money {
    text-align: right;
    align-items: flex-end;
  }

  /* Area ranges in place of units (Artié 84, 21/10): no price column, and a
     first column wide enough for «300 a 2.800 m²» on one line. Measured at
     1440: 24rem holds it, 22rem clips the m². */
  .e-con.chm-unit--rango {
    grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  }
}

/* Galleries. No desaturation here: the historical record is dimmed on purpose
   in chm-record__img, the project that is selling today is not. */
.e-con.chm-gallery__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 46rem) {
  .e-con.chm-gallery__grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 52rem) {
  .e-con.chm-gallery__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.chm-gallery__img img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.chm-gallery__caption {
  border-top: 1px solid var(--e-global-color-filete);
  padding-top: 0.6rem;
}

.chm-gallery__subhead {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
}

/* Legal and source notes. NOT chm-pendiente: that one is the dotted-underline
   marker for placeholders still waiting on the client, and a legal note dressed
   as a placeholder reads like an unfinished link. */
.chm-note p {
  margin: 0;
  max-width: 78ch;
}

/* === Política de tratamiento de datos ================================== */

/* The draft band. It is deliberately loud: while this document is unapproved,
   nobody should mistake it for CHM's policy in force. It comes off the day CHM
   completes and approves it, together with the gap marks below. */
.chm-draftband {
  border-top: 2px solid var(--chm-accent, #A5227C);
  border-bottom: 1px solid var(--chm-filete, #CFCCC3);
}

.chm-draftband__text .elementor-widget-container {
  max-width: 62ch;
  margin-inline: auto;
}

.chm-draftband__text p {
  font-size: 0.95rem;
  line-height: 1.6;
}

.chm-legal .elementor-widget:not(:first-child) {
  margin-top: 0;
}

.chm-legal__head {
  margin-top: 2.75rem;
  margin-bottom: 0.85rem;
  max-width: 62ch;
  margin-inline: auto;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
}

.chm-legal__body .elementor-widget-container {
  max-width: 62ch;
  margin-inline: auto;
}

.chm-legal__body p,
.chm-legal__body li {
  line-height: 1.65;
}

.chm-legal__body p + p {
  margin-top: 0.85rem;
}

.chm-legal__body ul,
.chm-legal__body ol {
  margin-top: 0.6rem;
  padding-left: 1.35rem;
}

.chm-legal__body li + li {
  margin-top: 0.5rem;
}

/* What CHM still has to supply. Left visible on purpose: a policy with no
   identified responsable and no channel to exercise rights is not a valid
   policy, and hiding that would be worse than showing it. */
.chm-gap {
  background: #FFF2AC;
  border-bottom: 1px solid var(--chm-accent, #A5227C);
  padding: 0 0.2em;
  font-style: italic;
}

/* === Menú móvil ========================================================= */

/* Until 17/09 the phone header had no navigation at all: the menu was hidden
   below the mobile breakpoint and the toggle was set to None, leaving a single
   Contacto button. Everything else on the site was unreachable from a phone.

   The panel is driven entirely from CSS. pro-elements' nav-menu JS only does
   toggleClass('elementor-active', show) on the toggle and flips aria-expanded;
   there is no slide animation and no inline style to fight, so the dropdown
   nav -- which the widget renders as the toggle's next sibling -- can be taken
   over completely.

   It reads as a sheet of paper laid over the page, not as a boxed dropdown:
   the design's rectoral decision is that nothing goes enclosed. The masthead is
   sticky at z-index 20, so the overlay sits below it and the logo and the close
   control stay visible and clickable. */

.chm-nav .elementor-menu-toggle {
  background: transparent;
  padding: 0.35rem;
  color: var(--e-global-color-primary);
}

.chm-nav .elementor-menu-toggle svg {
  width: 1.6rem;
  height: 1.6rem;
  fill: currentColor;
}

/* The logo and the close control ride above the paper. The panel is rendered
   INSIDE the masthead, so its z-index resolves within the masthead's own
   stacking context: it cannot be placed under its own siblings, only over
   them. Lifting these two is what keeps the header readable with the menu
   open, instead of the paper cutting the logo in half. */
.chm-masthead__logo,
.chm-nav .elementor-menu-toggle {
  position: relative;
  z-index: 16;
}

.chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  display: block !important;
  position: fixed;
  /* Long-hand, not `inset`: the widget's own stylesheet was winning `top` and
     leaving the panel at its static position, some 47px down, which is what let
     the page show above it. */
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto;
  max-width: none;
  margin: 0 !important;
  z-index: 15;
  background-color: #F4F3EF;
  background-image: none;
  padding: 8.5rem 1.25rem 3rem;
  overflow-y: auto;
  overscroll-behavior: contain;

  /* display:none cannot transition, so visibility carries the hidden state and
     opacity carries the motion. */
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.5rem);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
}

.chm-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s;
}

.chm-nav .elementor-nav-menu--dropdown .elementor-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--e-global-color-filete, #CFCCC3);
}

.chm-nav .elementor-nav-menu--dropdown .elementor-nav-menu li {
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--e-global-color-filete, #CFCCC3);
}

/* The widget defaults dropdown items to the Primary global font at display
   size through a per-element rule one specificity step above any class of
   ours, the same collision the desktop nav already documents above. */
.chm-nav .elementor-nav-menu--dropdown .elementor-item {
  /* Flex rather than block: the widget renders its anchors as flex containers,
     and the accent mark was computing to display:block and taking its own line
     above the label. As a flex item it can only sit beside the text. */
  display: flex !important;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0.7rem;
  text-decoration: none;
  font-family: "Frank Ruhl Libre", "Times New Roman", Times, serif !important;
  font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
  font-weight: 400 !important;
  line-height: 1.25 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--e-global-color-primary) !important;
  background: transparent !important;
  padding: 1.05rem 0 !important;
}

/* The accent marks the current row and nothing else here -- the same role it
   plays in the stacked floor table on Líneas de negocio. */
.chm-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.chm-nav .elementor-nav-menu--dropdown .current-menu-item > .elementor-item {
  color: var(--e-global-color-accent, #A5227C) !important;
}

.chm-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::before,
.chm-nav .elementor-nav-menu--dropdown .current-menu-item > .elementor-item::before {
  content: "";
  /* The widget styles .elementor-item:before as an absolutely positioned bar
     for its pointer effects, which is why the mark was drawn THROUGH the label
     instead of beside it. Back into flow, as a flex item. */
  position: static !important;
  top: auto;
  left: auto;
  flex: 0 0 auto;
  width: 1.4rem;
  min-width: 1.4rem;
  height: 1px;
  background: var(--e-global-color-accent, #A5227C);
}

/* The desktop bar keeps its own rules; nothing above may leak into it. */
@media (min-width: 768px) {
  .chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    display: none !important;
  }
}

/* === Submenú de Proyectos =============================================== */

/* The three active project sheets hang off Proyectos in the WordPress menu, so
   CHM can add the 2027 project by dragging one item and never calling us.
   Untouched, the widget renders them at 13px grey underlined on a white strip:
   a box inside the paper, which this design does not do.

   Proyectos itself still links to the hub, where the nine historical projects
   live -- that record is the firm's credibility argument and the submenu must
   not become a way around it. On a phone the first tap on a parent expands
   instead of navigating, so the hub is reachable through an explicit
   "Ver todos los proyectos" as the first child. */

.chm-nav .sub-arrow {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
}

.chm-nav .sub-arrow svg {
  width: 0.6em;
  height: 0.6em;
  fill: currentColor;
}

/* --- On the desktop bar it floats, so it needs its own sheet of paper --- */
.chm-nav .elementor-nav-menu--main .sub-menu {
  background-color: #FAF9F6;
  border: 1px solid var(--e-global-color-filete, #CFCCC3);
  border-top: 2px solid var(--e-global-color-primary, #18294E);
  border-radius: 0;
  box-shadow: none;
  padding: 0.5rem 0;
  min-width: 15rem;
}

/* Opened from CSS, not from the widget's JS. SmartMenus is not wiring submenu
   behaviour in this header at all -- on a phone both the label and the arrow
   navigate, and on the desktop bar hover never expanded it. focus-within comes
   along for free, so the submenu is reachable from the keyboard too. */
.chm-nav .elementor-nav-menu--main .menu-item-has-children {
  position: relative;
}

.chm-nav .elementor-nav-menu--main .sub-menu {
  display: block !important;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  background-color: #FAF9F6 !important;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-0.35rem);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.chm-nav .elementor-nav-menu--main .menu-item-has-children:hover > .sub-menu,
.chm-nav .elementor-nav-menu--main .menu-item-has-children:focus-within > .sub-menu {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s;
}

.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  white-space: nowrap;
}

.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item {
  font-family: "Libre Franklin", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  text-decoration: none;
  color: var(--e-global-color-text) !important;
  background-color: transparent !important;
  padding: 0.55rem 1.1rem !important;
}

.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.highlighted {
  color: var(--e-global-color-accent, #A5227C) !important;
  background-color: transparent !important;
}

/* --- Inside the phone overlay it is already on paper, so no panel --- */

.chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-arrow {
  display: none;
}

/* Always open inside the overlay. SmartMenus does not intercept the tap here --
   both the label and the arrow navigate -- so an accordion would simply never
   expand. With three projects on a full-screen sheet, showing them is better
   than hiding them behind a control that does not work: fewer taps, and the
   whole map visible at once. The parent still navigates to the hub. */
.chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu {
  display: block !important;
  background-color: transparent !important;
  border: none;
  box-shadow: none;
  padding: 0 0 0.6rem 2.1rem;
  list-style: none;
}

.chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu li {
  border-bottom: none;
}

.chm-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container .sub-menu .elementor-sub-item {
  display: block;
  font-family: "Frank Ruhl Libre", "Times New Roman", Times, serif !important;
  font-size: clamp(1.05rem, 4.2vw, 1.3rem) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  /* The kit's global menu typography sets tracked capitals, which the parent
     rule overrides for .elementor-item but not for .elementor-sub-item. */
  text-transform: none !important;
  letter-spacing: 0 !important;
  text-decoration: none;
  color: var(--e-global-color-text) !important;
  background-color: transparent !important;
  padding: 0.6rem 0 !important;
}

/* The project you are standing on, marked in both contexts. Colour only: the
   parent row already carries the accent rule, and two marks in one column
   would read as two separate places. */
.chm-nav .sub-menu .elementor-sub-item.elementor-item-active,
.chm-nav .sub-menu .current-menu-item > .elementor-sub-item {
  color: var(--e-global-color-accent, #A5227C) !important;
}

/* === Ronda de diseño de octubre ======================================== */

/* Section 3 of the 13/10 round summary. CHM found the site plain; these rules
   come last so they win over the earlier ones at equal specificity, and each
   block names the task in odd/tasks/ronda-ajustes-octubre.md. */

/* 7A.1 · While the page scrolls under the fixed header, a hairline appears
   below it and the logo eases down a size, over the first 120px. Driven by
   the scroll itself, no script; browsers without scroll timelines keep the
   still header, which is the design as approved. Transform only, so the
   header never changes height and nothing below it jumps. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    @keyframes chm-masthead-al-bajar {
      to {
        box-shadow: 0 1px 0 var(--e-global-color-filete, #CFCCC3);
      }
    }

    @keyframes chm-logo-al-bajar {
      to {
        transform: scale(0.84);
      }
    }

    [data-elementor-type="header"] .e-con.chm-masthead {
      animation: chm-masthead-al-bajar linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }

    .chm-masthead__logo img {
      transform-origin: left center;
      animation: chm-logo-al-bajar linear both;
      animation-timeline: scroll(root);
      animation-range: 0 120px;
    }
  }
}

/* 7A.2 · The current and the hovered menu item as a navy block with light
   text, instead of the hairline under the label (call of 13/10, 17:38). The
   block needs side padding, so the gap between items shrinks; the padding
   follows the viewport so the bar stays on one line at 1024px, where 805px of
   items had only 835px to sit in. */
.chm-nav .elementor-nav-menu--main .elementor-nav-menu {
  gap: clamp(0.15rem, 0.6vw, 0.6rem);
}

/* !important because the widget sets its own padding on :hover, 13px 20px,
   through a per-element rule above ours: the hovered item grew 7px and its
   line sat lower than the current item's, which was already visible before
   this round. One padding for every state keeps the blocks the same size. */
.chm-nav .elementor-nav-menu--main .elementor-item {
  padding: 0.6rem clamp(0.55rem, 0.9vw, 0.8rem) !important;
  border-bottom: 0;
  transition: color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-nav .elementor-nav-menu--main .elementor-item:hover,
.chm-nav .elementor-nav-menu--main .elementor-item:focus-visible,
.chm-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
  color: var(--e-global-color-papelcl, #FAF9F6);
  background: var(--e-global-color-primary);
}

.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:hover,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:focus,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.highlighted {
  color: var(--e-global-color-papelcl, #FAF9F6) !important;
  background-color: var(--e-global-color-primary) !important;
}

/* The project you stand on, and the current row in the phone overlay: navy
   now, so magenta is left to the buttons (section 3, item 3). */
.chm-nav .sub-menu .elementor-sub-item.elementor-item-active,
.chm-nav .sub-menu .current-menu-item > .elementor-sub-item,
.chm-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
.chm-nav .elementor-nav-menu--dropdown .current-menu-item > .elementor-item {
  color: var(--e-global-color-primary) !important;
  font-weight: 600 !important;
}

.chm-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active::before,
.chm-nav .elementor-nav-menu--dropdown .current-menu-item > .elementor-item::before {
  background: var(--e-global-color-primary);
}

/* 7A.3 · The selected tab on Líneas de negocio filled in navy, instead of the
   magenta line over it (call of 13/10, 21:46). Every tab gets the same side
   padding so the filled one does not sit flush against its edge. */
.chm-tabs .e-n-tabs {
  --n-tabs-title-background-color-active: var(--e-global-color-primary);
  --n-tabs-title-color-active: var(--e-global-color-papelcl, #FAF9F6);
}

.chm-tabs .e-n-tabs-heading > .e-n-tab-title {
  padding-inline: 1.25rem;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.chm-tabs .e-n-tabs-heading > .e-n-tab-title[aria-selected="true"] {
  color: var(--e-global-color-papelcl, #FAF9F6);
  background-color: var(--e-global-color-primary);
}

.chm-tabs .e-n-tab-title::after {
  display: none;
}

/* 7B.1 · Hover effects, a closed list approved one by one (13/10). Pointer
   devices only, and none of them for anyone who asked for less motion.
   1. Project plates (home and Proyectos): the photo eases in inside its frame.
   2. Earlier projects and team portraits: from the dimmed record colour to
      full colour, the «takes another tone» Mauricio relayed.
   3. Gallery photos on the project sheets: the same ease in, which also tells
      that they open in the lightbox.
   Frames clip the zoom, so nothing around the photo moves. */
.chm-plate__img,
.chm-gallery__img,
.chm-record__img {
  overflow: hidden;
}

/* The lightbox link around a gallery photo is inline-block, so the widget was
   7px taller than the photo (a line box under it) and the zoom spilled into
   that strip. As a block, the link and the frame are exactly the photo. The
   «Proyecto siguiente» plate links its photo too, so it gets the same. */
.chm-gallery__img a,
.chm-plate__img a {
  display: block;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .chm-plate__img img,
  .chm-gallery__img img,
  .chm-record__img img,
  .chm-people__portrait img {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .e-con.chm-plate:hover .chm-plate__img img,
  .chm-gallery__img:hover img {
    transform: scale(1.04);
  }

  .e-con:hover > .chm-record__img img,
  .chm-record__img:hover img,
  .chm-people__portrait:hover img {
    filter: saturate(1);
  }
}

/* 7B.2 · «Proyecto siguiente», the last band of each project sheet: the next
   project as the home's wide plate, so the layout and the hover zoom are the
   ones already approved. The rule above it separates it from the form. */
.chm-next .chm-label {
  margin-bottom: 1.5rem;
}

/* The plate hangs from the boxed section's inner wrapper, not from a
   container, so Elementor's default 10px padding survived on its sides and
   set the photo in from the label and the rule; same case as the tab panels. */
.e-con.chm-next__plate {
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  padding-top: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--e-global-color-filete);
}

/* 7C · One paper, navy to open and close, magenta only on buttons (13/10).
   Mauricio relayed that CHM read the alternating greys as flat: «esto está
   gris, esto gris clarito, esto un poquito más oscurito». Every page
   alternated three papers by section; it now carries exactly two tones. The
   section backgrounds still point at the kit globals in Elementor, so these
   rules are the single place that decides them. */

/* 1. One paper for content. The three greys collapse into the lightest. */
[data-elementor-type="wp-page"] > .e-con:not(.chm-hero, .chm-close, .chm-thanks) {
  background-color: var(--e-global-color-papelcl, #FAF9F6) !important;
}

/* 2. With one tone, consecutive paper sections are told apart by a hairline
   at the content width. Drawn as a background image because Elementor keeps
   .e-con::before for its background overlay. */
[data-elementor-type="wp-page"] > .e-con:not(.chm-hero, .chm-close, .chm-thanks, .chm-pagehead)
  + .e-con:not(.chm-close, .chm-thanks) {
  background-image: linear-gradient(var(--e-global-color-filete, #CFCCC3), var(--e-global-color-filete, #CFCCC3)) !important;
  background-size: min(1152px, 100% - 2.5rem) 1px !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
}

/* 3. Navy as the second base: every inner page and project sheet opens on
   the ink, as the home does with its hero, and closes on it with the close
   band. 7D lays a photo with transparency over this same navy. */
[data-elementor-type="wp-page"] > .e-con.chm-pagehead {
  background-color: var(--e-global-color-primary, #18294E) !important;
  border-bottom-color: transparent !important;
}

.chm-pagehead .chm-label .elementor-heading-title,
.chm-pagehead .chm-sheet__caption .elementor-heading-title {
  color: var(--e-global-color-sobrecs, #9AA3BC) !important;
}

.chm-pagehead .chm-pagehead__title .elementor-heading-title {
  color: var(--e-global-color-papelcl, #FAF9F6) !important;
}

.chm-pagehead .chm-lead,
.chm-pagehead .chm-lead p {
  color: var(--e-global-color-sobrec, #E9E7E1) !important;
}

/* 4. Magenta only on buttons: the hover marker of the business-line rows
   goes ink. «Ver más» is a button and keeps the accent. Client logos stay on
   paper: they blend with multiply and would darken on navy. */
.e-con.chm-row::before {
  background: var(--e-global-color-primary, #18294E) !important;
}

/* 5. The fixed header joins the same paper, or it would be the last grey. */
.e-con.chm-masthead {
  background-color: var(--e-global-color-papelcl, #FAF9F6) !important;
}

/* 7D.1 · The five inner heads carry a photo under the navy (set in Elementor,
   so CHM can swap it). Over the brightest part of a photo the 7C label colour
   drops near 3:1, so on those heads it goes one step lighter. Project sheets
   keep their own photo below the text and the 7C colour. */
.chm-pagehead:not(.chm-sheet) .chm-label .elementor-heading-title {
  color: var(--e-global-color-sobrec, #E9E7E1) !important;
}

/* 7D.2 · «Lo que hacemos» in two zigzag rows, on the home and Quiénes somos
   (proposed by Fabián, 13/10). The grid holds text, photo, photo, list, and
   the 5fr/6fr columns above lay them out as text|photo over photo|list. The
   photos are Elementor image widgets; Elementor's column padding is 10px, so
   the photos carry the same to line up with the text. */
@media (min-width: 56rem) {
  .e-con.chm-statement__grid {
    row-gap: clamp(3.5rem, 6vw, 5.5rem);
  }
}

.elementor-widget.chm-statement__img {
  padding: 10px;
  align-self: stretch;
}

.elementor-widget.chm-statement__img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.elementor-widget.chm-statement__img--hacemos img {
  aspect-ratio: 4 / 3;
}

.elementor-widget.chm-statement__img--asesoramos img {
  aspect-ratio: 3 / 2;
}

/* On phones the column stacks, so the second photo moves after the list:
   text, photo, list, photo, never two photos with no text between them. */
@media (max-width: 55.99rem) {
  .elementor-widget.chm-statement__img {
    margin-top: 1rem;
  }

  .elementor-widget.chm-statement__img--asesoramos {
    order: 2;
  }
}

/* T8 · «Quiénes somos» projects sequence (CHM, meeting of 05/11): the photo
   next to the text is Elementor's stock image carousel, one photo at a time,
   fading. It keeps the still photo's box: 4:3 on phones, and from 56rem the
   height of the text beside it, which the carousel cannot take by itself, so
   it is laid over the widget's box. The min-height guards a short text. */
.elementor-widget.chm-secuencia .swiper-slide-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (min-width: 56rem) {
  .elementor-widget.chm-secuencia {
    position: relative;
    min-height: 22rem;
  }

  .elementor-widget.chm-secuencia .elementor-image-carousel-wrapper {
    position: absolute;
    inset: 10px;
  }

  .elementor-widget.chm-secuencia .swiper-wrapper,
  .elementor-widget.chm-secuencia .swiper-slide,
  .elementor-widget.chm-secuencia .swiper-slide-inner {
    height: 100%;
  }

  .elementor-widget.chm-secuencia .swiper-slide-image {
    height: 100%;
    aspect-ratio: auto;
  }
}

/* T10 · «A quién asesoramos» brand collage (Camila, 10/11): the meeting-room
   photo becomes a still grid of the brands CHM wants seen first. Still on
   purpose: the sequence above already moves, and a grid shows every brand at
   once. The cells are the register's own .chm-logo, so the page keeps one way
   of showing a logo. It holds the photo's place: left column of the second
   zigzag row from 56rem, after the list on phones. */
.e-con.chm-collage {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 0;
  padding: 10px;
}

/* Fewer cells than the register, so each logo gets more of its cell: the
   register's padding left the smallest marks at about 90×35 px here. */
.chm-collage .chm-logo img {
  padding: clamp(0.7rem, 1.4vw, 1rem) clamp(0.6rem, 1.2vw, 0.85rem);
}

@media (max-width: 55.99rem) {
  .e-con.chm-collage {
    order: 2;
    margin-top: 1rem;
  }
}

/* 7D.2 · Líneas de negocio, one photo per tab: the first zigzag row of «Lo
   que hacemos» again, all the text left and the photo right. The paragraph
   moved into the left column, so its spacing rule follows it; the right
   column drops the 0.5rem offset that lined the paragraph up with the lead,
   so the photo starts level with the title. Unlike the home, these columns
   carry no padding, so neither does the photo. */
.chm-lines__intro .chm-prose p + p {
  margin-top: 1rem;
}

@media (min-width: 56rem) {
  .e-con.chm-lines__body {
    padding-block-start: 0;
  }
}

.elementor-widget.chm-lines__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

@media (max-width: 55.99rem) {
  .e-con.chm-lines__body {
    margin-top: 1rem;
  }
}

/* 7D.2 · Fabián (13/10, 21:00): a fixed 4:3 photo left the text taller than
   the photo on the longer tabs (Gestión de Rentas: 593 px of text, 445 of
   photo). On wide screens the photo now takes the exact height of the text
   column, cropped with object-fit; on phones it keeps its 4:3 under the text. */
@media (min-width: 56rem) {
  .e-con.chm-lines__body {
    align-self: stretch;
  }

  .e-con.chm-lines__body > .elementor-widget.chm-lines__photo {
    position: relative;
    flex: 1 1 auto;
    min-height: 20rem;
  }

  .elementor-widget.chm-lines__photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Client logos · a navy hairline draws along the cell's bottom rule on hover,
   left to right, and retracts to the right on leave (approved by Fabián on
   15/10). Motion only: the logo keeps its brand colour and size. Pointer
   devices only, and nothing for reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .chm-logo {
    position: relative;
  }

  .chm-logo::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: var(--e-global-color-primary);
    transform: scaleX(0);
    transform-origin: right center;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }

  .chm-logo:hover::after {
    transform: scaleX(1);
    transform-origin: left center;
  }
}

/* Menu · the navy block marks only the page you are on (CHM asked for it in the
   13/10 call); hovering another item draws the same navy hairline as the client
   logos, left to right, and retracts it to the right on leave (15/10). */
.chm-nav .elementor-nav-menu--main .elementor-item {
  position: relative;
}

.chm-nav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover,
.chm-nav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):focus-visible {
  color: var(--e-global-color-primary);
  background: transparent;
}

.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:not(.elementor-item-active):hover,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:not(.elementor-item-active):focus,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item.highlighted:not(.elementor-item-active) {
  color: var(--e-global-color-primary) !important;
  background-color: transparent !important;
}

.chm-nav .elementor-nav-menu--main .elementor-item::after,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item::after {
  content: "";
  position: absolute;
  right: clamp(0.55rem, 0.9vw, 0.8rem);
  bottom: 0.3rem;
  left: clamp(0.55rem, 0.9vw, 0.8rem);
  height: 2px;
  /* !important: the widget paints its pointer bar magenta through a
     per-element rule one specificity step above ours. */
  background-color: var(--e-global-color-primary) !important;
  transform: scaleX(0);
  transform-origin: right center;
  pointer-events: none;
}

.chm-nav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):hover::after,
.chm-nav .elementor-nav-menu--main .elementor-item:not(.elementor-item-active):focus-visible::after,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:not(.elementor-item-active):hover::after,
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item:not(.elementor-item-active):focus-visible::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Submenu rows: the line spans the row inside its 1.1rem padding, like a ruled
   row of the site's tables, so the three projects draw the same length. */
.chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item::after {
  right: 1.1rem;
  left: 1.1rem;
}

@media (prefers-reduced-motion: no-preference) {
  .chm-nav .elementor-nav-menu--main .elementor-item::after,
  .chm-nav .elementor-nav-menu--main .sub-menu .elementor-sub-item::after {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  }
}