/* Generado por elementor/port-css.py - no editar a mano.
   Fuente: los <style> de los componentes de web/src/.
   Regenerar con: python elementor/port-css.py */
/* ===== Reset de los contenedores generados =====
   Elementor convierte cada contenedor en flex column con gap y padding
   propios. Este diseno pone su layout desde las clases, asi que hay que
   devolverles el comportamiento por defecto.

   La especificidad es de UNA clase, y va antes que las reglas de componente,
   a proposito. Nuestro CSS se encola despues del de Elementor, asi que a
   igual peso gana el ultimo: esta regla le gana a `.e-con` de Elementor y
   pierde contra `.hero__grid` o `.hero__actions`, que vienen mas abajo. Con
   `.e-con.rmd-node` (dos clases) ganaria tambien a las nuestras, y con
   `:where()` perderia contra las de Elementor. */

:root:root:root .rmd-node {
  display: block;
  flex-direction: row;
  flex-wrap: nowrap;
  /* `normal` y no `stretch`/`flex-start`: es el valor inicial de CSS, que se
     comporta distinto segun el tipo de caja. Con `flex-start` fijo, una
     reticula de una sola pista dejaba de estirarse hasta el ancho del
     contenedor y el boton de "View More Work" quedaba pegado a la izquierda
     en vez de centrado. */
  align-items: normal;
  justify-content: normal;
  gap: 0;
  padding: 0;
  background: none;
  min-height: 0;
  /* Elementor le pone `position: relative` a todos sus elementos. Eso rompe
     el posicionamiento absoluto del diseno: la fotografia de fondo del CTA se
     anclaba al contenedor de contenido (604px) en vez de a la seccion (950) y
     dejaba franjas planas arriba y abajo.

     Las reglas de componente que SI necesitan posicion (.growth, .service,
     .industry, .testimonial, .card, .work__band) la declaran ellas y vienen
     despues, asi que la recuperan. */
  position: static;
  border: 0;
  border-radius: 0;
  /* Elementor le pone `width: 100%` y un ancho maximo a cada contenedor. Eso
     anula el sangrado por margen negativo: la composicion del hero se salia a
     la derecha en el diseno y aqui se quedaba clavada al ancho de su columna,
     72px mas estrecha. Un div normal no tiene ninguno de los dos. */
  width: auto;
  max-width: none;
}/* ===== Section ===== */

:root:root:root .section {
    padding-block: var(--rmd-section-y);
  }/* El relleno del Figma solo desde 900px: por debajo manda el ritmo móvil,
     porque valores como los 5px de Marketing Reflection dejarían las
     tarjetas pegadas a la sección siguiente en una pantalla estrecha. */


  
  @media (min-width: 900px) {
:root:root:root .section {
      padding-block:
        var(--section-pad-top, var(--rmd-section-y))
        var(--section-pad-bottom, var(--rmd-section-y));
    }
  }
:root:root:root .section--ivory {
    background-color: var(--rmd-ivory);
  }
:root:root:root .section--white {
    background-color: var(--rmd-white);
  }
:root:root:root .section--dark {
    background-color: var(--rmd-surface-dark);
  }/* `image` no lleva color: lo aporta el velo sobre la fotografía. */
/* Sobre plum los colores de marca sí cumplen contraste sin retocar:
     coral da 6.50:1 y cyan 7.78:1. Las variantes `-ink` solo hacen falta
     sobre ivory, así que acá se vuelve a los originales del Figma. */

:root:root:root .section--on-dark {
    color: var(--rmd-text-on-dark);
    --rmd-eyebrow: var(--rmd-coral);
    --rmd-heading-accent: var(--rmd-cyan);
    --rmd-heading: var(--rmd-white);
    --rmd-text: var(--rmd-text-on-dark);
  }/* El max-width suma el padding a propósito.
     `--rmd-container` son los 1296px de CONTENIDO del Figma (1440 menos 72 de
     margen a cada lado). Como box-sizing es border-box, poner 1296 a secas
     dejaba solo 1194px útiles: un 8% menos en todas las secciones. Eso hacía
     que las tarjetas midieran 565 en vez de 616 y que el texto envolviera
     distinto al diseño y chocara con las imágenes. */

:root:root:root .section__inner {
    /* Contenedor de consulta: las secciones miden su tipografía en cqw contra
       este ancho de contenido (1296 a escala 1:1 con el Figma). */
    container-type: inline-size;
    /* Sin tope de ancho: el contenido es siempre el 90% del viewport, como
       en el Figma (1296 de 1440). Capar a 1296 hacía que a partir de 1440 el
       sitio dejara de escalar y se viera pequeño en pantallas grandes. */
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--rmd-gutter);
  }/* ===== Eyebrow ===== */

:root:root:root .eyebrow {
    margin: 0 0 var(--rmd-space-4);
    font-family: var(--rmd-font-display);
    font-size: var(--rmd-text-eyebrow);
    font-weight: var(--rmd-weight-semibold);
    letter-spacing: var(--rmd-tracking-eyebrow);
    line-height: 1.2;
    color: var(--rmd-eyebrow);
    text-transform: uppercase;
  }/* ===== Headline ===== */

:root:root:root .headline {
    /* Con las líneas ya fijadas, balancear el texto solo pelearía con ellas. */
    text-wrap: normal;
    /* El Figma usa 44/40 en los h2 de sección y 60/55 en el h1 del hero:
       ambos son 1.1. El valor global (--rmd-leading-heading: 1.2) sumaba
       4px por línea y, en titulares de dos y tres líneas, corría hacia
       abajo todo lo que sigue en la sección. */
    line-height: 1.1;
  }
:root:root:root .headline__line {
    display: inline;
  }
:root:root:root .headline--plum {
    color: var(--rmd-plum);
  }
:root:root:root .headline--center {
    text-align: center;
  }
:root:root:root .headline__line--accent {
    color: var(--rmd-heading-accent);
  }

  @media (min-width: 1024px) {
:root:root:root .headline__line {
      display: block;
    }
  }/* ===== SectionHeader ===== */

:root:root:root .section-header {
    display: grid;
    gap: var(--rmd-space-5);
    margin-bottom: var(--rmd-space-8);
  }

  @media (min-width: 900px) {
:root:root:root .section-header {
      margin-bottom: 4.94cqw; /* 64px sobre 1296 */
    }
  }/* El split solo aparece cuando hay ancho real para dos columnas; por debajo
     de eso las dos partes se apilan, que es lo que espera el móvil. */


  
  @media (min-width: 900px) {/* El bloque de titular mide 650px en el Figma. Con menos, la línea más
       larga ("Four connected capabilities.") se parte y la sección pasa de
       dos líneas a tres. */
/* Cuando la sección pasa la `x` de su introducción, la primera columna
       mide exactamente eso y el hueco va en cero: así la introducción cae en
       la misma coordenada del Figma. Sin el dato, se conserva el reparto
       aproximado de antes. */

:root:root:root .section-header--split {
      grid-template-columns: var(--header-col-1, minmax(0, 1.15fr)) minmax(0, 1fr);
      gap: var(--header-col-gap, 3.4cqw);
      align-items: start;
    }
:root:root:root .section-header--split[style*="--header-col-1"] {
      --header-col-gap: 0px;
    }
  }/* `:global` porque la clase viaja al elemento raíz de <Headline y ahí no
     llega el scope de este componente. El descendiente la mantiene acotada. */

:root:root:root .section-header .section-header__headline {
    max-width: var(--header-headline-max, none);
  }
:root:root:root .section-header__intro {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-4);
    font-size: var(--rmd-text-lead);
    max-width: var(--rmd-measure);
  }

  @media (min-width: 900px) {
:root:root:root .section-header__intro {
      max-width: var(--header-intro-max, var(--rmd-measure));
    }
  }

  @media (min-width: 900px) {
:root:root:root .section-header--split .section-header__intro {
      padding-top: 2.47cqw;
    }
  }/* ===== Button ===== */

:root:root:root .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rmd-space-2);
    min-height: 52px;
    padding-inline: var(--rmd-space-5);
  }/* A escala del lienzo desde 900px: 52px de alto → 4.01cqw, texto de 15px →
     1.157cqw. Sin esto los botones quedaban de tamaño fijo dentro de un
     diseño que escala, y en pantallas grandes se veían diminutos. */

:root:root:root .btn {
    border-radius: var(--rmd-radius);
    font-family: var(--rmd-font-display);
    font-size: 0.9375rem;
    font-weight: var(--rmd-weight-semibold);
    text-decoration: none;
    text-align: center;
    transition:
      background-color var(--rmd-duration) var(--rmd-ease),
      color var(--rmd-duration) var(--rmd-ease),
      transform var(--rmd-duration) var(--rmd-ease);
  }/* A escala del lienzo desde 900px: 52px de alto → 4.01cqw, texto de 15px →
     1.157cqw sobre los 1296 de contenido. Sin esto los botones quedaban fijos
     dentro de un diseño que escala: diminutos en pantallas grandes. */


  
  @media (min-width: 900px) {
:root:root:root .btn {
      min-height: 4.01cqw;
      padding-inline: 2.31cqw;
      font-size: 1.157cqw;
    }
  }
:root:root:root .btn:hover {
    transform: translateY(-1px);
  }
:root:root:root .btn--primary {
    background-color: var(--rmd-btn-primary-bg);
    color: var(--rmd-btn-primary-text);
    border: 1px solid transparent;
  }
:root:root:root .btn--primary:hover {
    background-color: color-mix(in srgb, var(--rmd-cyan) 88%, var(--rmd-plum));
  }
:root:root:root .btn--outline {
    background-color: transparent;
    color: var(--rmd-purple);
    border: 1px solid var(--rmd-purple);
  }
:root:root:root .btn--outline:hover {
    background-color: var(--rmd-purple);
    color: var(--rmd-white);
  }/* Sobre plum, el coral de marca da 6.50:1 y el blanco 18.65:1: acá no hacen
     falta las variantes accesibles. */
/* Blanco sobre purple da 14.19:1: acá el blanco sí cumple sin tocar nada. */

:root:root:root .btn--purple {
    background-color: var(--rmd-purple);
    color: var(--rmd-white);
    border: 1px solid transparent;
  }
:root:root:root .btn--purple:hover {
    background-color: color-mix(in srgb, var(--rmd-purple) 86%, var(--rmd-plum));
  }
:root:root:root .btn--ghost {
    background-color: transparent;
    color: var(--rmd-white);
    border: 2px solid var(--rmd-coral);
  }
:root:root:root .btn--ghost:hover {
    background-color: var(--rmd-coral);
    color: var(--rmd-plum);
  }/* ===== Header ===== */
/* Sticky: la página mide más de 8000px y el CTA es el objetivo de la
     sección. El Figma muestra el header estático arriba, pero mantenerlo a la
     vista en un scroll tan largo es una mejora clara. Si el cliente lo quiere
     fijo al inicio, se quita `position: sticky`. */

:root:root:root .header {
    position: sticky;
    top: 0;
    z-index: 50;
    /* Blanco, como el Figma — no ivory. */
    background-color: color-mix(in srgb, var(--rmd-white) 94%, transparent);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid color-mix(in srgb, var(--rmd-purple) 10%, transparent);
  }
:root:root:root .header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rmd-space-5);
    max-width: none;
    margin-inline: auto;
    padding: var(--rmd-space-3) var(--rmd-gutter);
    min-height: 96px;
  }/* --- Logo ---
     Placeholder tipográfico hasta que llegue el SVG de marca. Reserva el
     mismo espacio que el logo real (159×70 en el Figma). */

:root:root:root .header__logo {
    display: flex;
    align-items: center;
    gap: var(--rmd-space-3);
    text-decoration: none;
    flex: none;
  }
:root:root:root .header__logo-img {
    display: block;
    width: 159px;
    height: 70px;
  }/* Header a escala del lienzo desde 900px: logo 159px → 12.27cqw, nav de
     14px → 1.08cqw, alto de 96px → 7.4cqw. El header__inner es contenedor de
     consulta (misma base de 1296 que las secciones). */


  
  @media (min-width: 900px) {
:root:root:root .header__inner {
      container-type: inline-size;
      /* Ojo: nada de cqw en este elemento — es el propio contenedor y no
         puede consultarse a sí mismo. El alto lo da el logo escalado. */
      min-height: 0;
    }
:root:root:root .header__logo-img {
      width: 12.27cqw;
      height: auto;
    }/* La especificidad extra es deliberada: las reglas base de estos dos
       elementos aparecen más abajo en el archivo y, a igual peso, ganarían
       por orden de aparición. */

:root:root:root .header__nav .header__link {
      font-size: 1.08cqw;
    }
:root:root:root .header__nav .header__list {
      gap: 2.7cqw;
    }
  }/* --- Navegación --- */

:root:root:root .header__nav {
    display: flex;
    align-items: center;
    gap: var(--rmd-space-6);
  }
:root:root:root .header__list {
    display: flex;
    align-items: center;
    gap: var(--rmd-space-6); /* paso de 112px entre ítems en el Figma */
  }/* Montserrat Regular 14px en color ink, como el Figma — no semibold morado. */

:root:root:root .header__link {
    position: relative;
    display: inline-block;
    padding-block: var(--rmd-space-2);
    font-family: var(--rmd-font-display);
    font-size: 0.875rem;
    font-weight: var(--rmd-weight-regular);
    color: var(--rmd-ink);
    text-decoration: none;
  }/* Subrayado del ítem activo, como en el Figma (55×2 bajo "Home"). */

:root:root:root .header__link[aria-current="page"]::after, :root:root:root .header__link:hover::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--rmd-cyan);
  }
:root:root:root .header__link:hover::after {
    background-color: color-mix(in srgb, var(--rmd-cyan) 55%, transparent);
  }/* --- Botón de menú --- */

:root:root:root .header__toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px; /* objetivo táctil mínimo */
    height: 44px;
    background: none;
    border: 1px solid color-mix(in srgb, var(--rmd-purple) 25%, transparent);
    border-radius: var(--rmd-radius);
    cursor: pointer;
  }
:root:root:root .header__bars, :root:root:root .header__bars::before, :root:root:root .header__bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background-color: var(--rmd-purple);
    transition: transform var(--rmd-duration) var(--rmd-ease);
  }
:root:root:root .header__bars::before, :root:root:root .header__bars::after {
    content: "";
    position: absolute;
  }
:root:root:root .header__bars::before {
    transform: translateY(-6px);
  }
:root:root:root .header__bars::after {
    transform: translateY(6px);
  }
:root:root:root [aria-expanded="true"] .header__bars {
    background-color: transparent;
  }
:root:root:root [aria-expanded="true"] .header__bars::before {
    transform: rotate(45deg);
  }
:root:root:root [aria-expanded="true"] .header__bars::after {
    transform: rotate(-45deg);
  }/* --- Móvil ---
     El breakpoint no es redondo: se eligió 1080px porque es donde los seis
     ítems más el CTA empiezan a apretarse contra el logo. */


  
  @media (max-width: 1080px) {
:root:root:root .header__toggle {
      display: flex;
      position: relative;
    }
:root:root:root .header__nav {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      flex-direction: column;
      align-items: stretch;
      gap: var(--rmd-space-4);
      padding: var(--rmd-space-5) var(--rmd-gutter) var(--rmd-space-6);
      background-color: var(--rmd-ivory);
      border-bottom: 1px solid color-mix(in srgb, var(--rmd-purple) 12%, transparent);
      box-shadow: var(--rmd-shadow);
    }/* `hidden` en vez de display:none por CSS: así el contenido queda fuera
       del orden de tabulación cuando el menú está cerrado, que es lo que
       espera un lector de pantalla. */

:root:root:root .header__nav[hidden] {
      display: none;
    }
:root:root:root .header__list {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
:root:root:root .header__link {
      display: block;
      padding: var(--rmd-space-3) 0;
      font-size: 1.0625rem;
      border-bottom: 1px solid color-mix(in srgb, var(--rmd-purple) 8%, transparent);
    }
:root:root:root .header__link[aria-current="page"]::after, :root:root:root .header__link:hover::after {
      display: none;
    }
:root:root:root .header__link[aria-current="page"] {
      color: var(--rmd-cyan-ink);
    }
:root:root:root .header__cta .btn {
      width: 100%;
    }
  }/* ===== Hero ===== */

:root:root:root .section.hero {
    overflow: hidden; /* la imagen desborda a propósito; no debe crear scroll */
  }
:root:root:root .hero__grid {
    display: grid;
    gap: var(--rmd-space-6);
    align-items: center;
  }/* Geometría del Figma sobre el contenido de 1296: columna de copy de 550px
     (550fr), hueco de 44px (3.4cqw) y 702px para la imagen, que además sangra
     por la derecha. Los ritmos verticales también son los del diseño:
     32px bajo el titular → 2.47cqw · 60px antes de los botones → 4.63cqw
     línea en blanco de 24px entre párrafos → 1.85cqw · 20px entre botones. */

:root:root:root .hero__copy .hero__headline {
    margin-bottom: var(--rmd-space-5);
  }
:root:root:root .hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-4);
    max-width: var(--rmd-measure);
    font-size: var(--rmd-text-lead);
  }
:root:root:root .hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rmd-space-4);
    margin-top: var(--rmd-space-7);
  }

  @media (min-width: 900px) {
:root:root:root .hero__grid {
      grid-template-columns: minmax(0, 550fr) minmax(0, 702fr);
      gap: 3.4cqw;
      align-items: start;
    }/*  porque `hero__headline` viaja como prop a <Headline y su
       elemento raíz no lleva el scope de este componente. El ancestro sí lo
       lleva, así que la regla sigue acotada al hero. */

:root:root:root .hero__copy .hero__headline {
      margin-bottom: 2.47cqw;
    }
:root:root:root .hero__body {
      gap: 1.85cqw;
      max-width: none;
    }
:root:root:root .hero__actions {
      gap: 1.54cqw;
      margin-top: 4.63cqw;
    }
  }
:root:root:root .hero__image {
    width: 100%;
    height: auto;
  }/* En el Figma la composición se sale del contenedor por arriba y por la
     derecha. Se reproduce solo desde 1100px: por debajo comprimiría el copy. */


  
  @media (min-width: 1100px) {
:root:root:root .hero__media {
      /* La composición sube hasta el borde inferior del header (y=-93 en el
         frame, es decir 171px sobre el eyebrow) y llega al borde del viewport,
         como en el Figma. */
      margin-top: -13.19cqw;
      margin-right: calc(var(--rmd-gutter) * -1);
    }
  }/* Entrada del hero: una sola secuencia escalonada al cargar. Es el único
     momento animado de la página, y por eso se nota. */


  
  @media (prefers-reduced-motion: no-preference) {
:root:root:root .hero__copy *, :root:root:root .hero__media {
      animation: hero-rise 620ms var(--rmd-ease) backwards;
    }
:root:root:root .hero__copy *:nth-child(1) { animation-delay: 40ms; }
:root:root:root .hero__copy *:nth-child(2) { animation-delay: 110ms; }
:root:root:root .hero__copy *:nth-child(3) { animation-delay: 180ms; }
:root:root:root .hero__copy *:nth-child(4) { animation-delay: 250ms; }
:root:root:root .hero__media { animation-delay: 160ms; }
  }

  @keyframes hero-rise {
    from {
      opacity: 0;
      transform: translateY(14px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }/* ===== TrustedBy ===== */
/* Grid en vez de flex: con auto-fit las cinco categorías se reparten solas
     de 1 a 5 columnas sin necesidad de breakpoints a medida. */

:root:root:root .trusted__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--rmd-space-5);
    margin-top: var(--rmd-space-8);
  }/* Las cinco categorías en una fila, como el Figma. Con `auto-fit` sobre el
     contenedor ya a 1296 el reparto no coincidía con los 270px de paso del
     diseño. Hueco de 40px → 3.09cqw. */


  
  @media (min-width: 900px) {
:root:root:root .trusted__list {
      grid-template-columns: repeat(5, 1fr);
      gap: 3.09cqw;
    }
  }/* Inter SemiBold 13px sin tracking, como el Figma (el texto ya viene en
     mayúsculas en el diseño; acá se transforma para no gritar en el HTML). */

:root:root:root .trusted__item {
    font-family: var(--rmd-font-body);
    font-size: 0.8125rem;
    font-weight: var(--rmd-weight-semibold);
    text-transform: uppercase;
    color: var(--rmd-muted);
  }/* Ritmos del Figma: 87px entre titular y etiquetas, sección contenida
     (45px arriba, 97 abajo → 3.5/7.5cqw). */


  
  @media (min-width: 900px) {
:root:root:root .trusted__list {
      margin-top: 6.71cqw;
    }
:root:root:root .trusted__item {
      font-size: 1.003cqw;
      /* 13px de caja para 13px de texto, como el nodo del Figma. */
      line-height: 1;
    }
  }

  @media (max-width: 639px) {
:root:root:root .trusted__item {
      text-align: center;
    }
  }/* ===== MarketingReflection ===== */

:root:root:root .reflection__top {
    display: grid;
    gap: var(--rmd-space-7);
    align-items: center;
  }

  @media (min-width: 900px) {/* Medidas del nodo 4:44 sobre el contenido de 1296: la imagen arranca en
       x=618 (47.69cqw) y el texto ocupa la columna izquierda. Sin hueco entre
       columnas porque en el Figma texto e imagen son adyacentes. `start` y no
       `center`: la imagen va anclada arriba, 49px por encima del eyebrow. */

:root:root:root .reflection__top {
      grid-template-columns: 47.69cqw minmax(0, 1fr);
      gap: 0;
      align-items: start;
    }/* El eyebrow de esta sección va en Inter (no Montserrat) y a 560px de
       ancho (43.21cqw), que es lo que fuerza el corte "...AROUND / YOUR
       BUSINESS" del Figma. 30px de interlínea y 7px hasta el titular. */

:root:root:root .reflection__copy .eyebrow {
      max-width: 43.21cqw;
      font-family: var(--rmd-font-body);
      letter-spacing: normal;
      line-height: 1.25;
      margin-bottom: 0.54cqw;
    }/*  por el mismo motivo que en el hero: la clase llega al
       elemento raíz de <Headline , fuera del scope de este componente. */

:root:root:root .reflection__copy .reflection__headline {
      margin-bottom: 2.55cqw; /* 33px: del titular (bottom 224) al cuerpo (257) */
    }/* Columna de 520px (40.12cqw) e interlínea de 24/18: con la columna más
       ancha el párrafo envolvía en menos líneas que el diseño. La línea en
       blanco entre párrafos son 24px → 1.85cqw. */

:root:root:root .reflection__copy .reflection__body {
      max-width: 40.12cqw;
      line-height: 1.333;
      gap: 1.85cqw;
    }/* 750px sobre 1440 (57.87cqw) y sangrada a través del gutter hasta el
       borde del viewport, como el hero. El margen negativo superior son los
       49px que la imagen sube por encima del eyebrow (top -24 vs 25). */

:root:root:root .reflection__top .reflection__media {
      width: 57.87cqw;
      justify-self: end;
      margin-right: calc(var(--rmd-gutter) * -1);
      margin-top: -3.78cqw;
    }
  }
:root:root:root .reflection__copy .reflection__headline {
    margin-bottom: var(--rmd-space-5);
  }
:root:root:root .reflection__body {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-4);
    font-size: var(--rmd-text-lead);
    max-width: var(--rmd-measure);
  }
:root:root:root .reflection__body strong {
    color: var(--rmd-plum);
    font-weight: var(--rmd-weight-bold);
  }
:root:root:root .reflection__media {
    width: 100%;
    height: auto;
  }/* 20px de separación, como el Figma: con 32 las tarjetas bajaban de los
     422px del diseño y el texto envolvía distinto. */

:root:root:root .reflection__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 1.543cqw; /* 20px sobre 1296 */
    margin-top: var(--rmd-space-9);
  }/* 26px entre el borde inferior de la imagen (514) y las tarjetas (540). */


  
  @media (min-width: 900px) {
:root:root:root .reflection__cards {
      margin-top: 2.01cqw;
    }
  }/* Tres tarjetas de problema, como el Figma. Con `auto-fit` y el contenedor ya a 1296 el navegador
     reservaba una pista de más y las tarjetas quedaban estrechas. */


  
  @media (min-width: 1000px) {
:root:root:root .reflection__cards {
      grid-template-columns: repeat(3, 1fr);
    }
  }/* ---------------------------------------------------------------
     Tarjeta
     ---------------------------------------------------------------
     En el Figma no hay una caja aparte: la imagen ES la tarjeta. Su tercio
     izquierdo es casi blanco (#FEF8F4) y el texto va superpuesto encima.
     La tarjeta lleva ese mismo color de fondo para que, cuando en móvil el
     texto pase a ir debajo, la caja se siga leyendo como una sola pieza.
  --------------------------------------------------------------- */
/* Contenedor de consulta: lo interno va en cqw para que la tarjeta sea una
     réplica proporcional del Figma (422×361) a cualquier ancho. Ver el
     comentario equivalente en ConnectedCapabilities. */

:root:root:root .card {
    position: relative;
    container-type: inline-size;
    background-color: #fef8f4;
    border-radius: var(--rmd-radius-xl);
    box-shadow: var(--rmd-shadow);
    overflow: hidden;
  }
:root:root:root .card__image {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (min-width: 620px) {/* Mismo apilado con grid que en las tarjetas de servicio: el alto lo marca
       el contenido más alto, así que la caja crece en vez de cortar el texto. */

:root:root:root .card {
      display: grid;
    }
:root:root:root .card__image, :root:root:root .card__body {
      grid-area: 1 / 1;
    }
:root:root:root .card__image {
      width: 100%;
      height: auto;
      aspect-ratio: 422 / 361;
      min-height: 100%;
      object-fit: contain;
      object-position: center;
    }
  }
:root:root:root .card__body {
    padding: var(--rmd-space-5);
  }/* En móvil (apilado) el asset entero se veía flotando: su mitad izquierda
     es la zona clara pensada para superponer el texto en escritorio y, con el
     texto ya debajo, quedaba como aire muerto. Se recorta a la franja derecha
     —donde vive la ilustración— con la imagen sobredimensionada y márgenes
     negativos; el overflow:hidden de la tarjeta hace el corte. */


  
  @media (max-width: 619px) {/* 148% de zoom: la ilustración (franja del 44-97% del asset) queda al
       ~78% del ancho de la tarjeta, centrada y completa — con 167% el cursor
       del borde derecho se cortaba y a la izquierda quedaba franja vacía. */

:root:root:root .card__image {
      width: 148%;
      max-width: none;
      margin-left: -54%;
      margin-top: -10%;
      margin-bottom: -14%;
    }
:root:root:root .card__body {
      position: relative;
      background-color: #fef8f4;
    }
  }
:root:root:root .card__title {
    /* 20px en el Figma, no el H3 de sección. */
    font-size: 1.25rem;
    line-height: 1.42;
    color: var(--rmd-plum);
    margin-bottom: var(--rmd-space-4);
  }
:root:root:root .card__copy {
    font-family: var(--rmd-font-display);
    font-size: 1rem;
    line-height: 1.25;
    color: var(--rmd-plum);
  }/* Desde 620px el texto se superpone sobre la zona clara de la imagen, que
     es como está compuesto en el Figma. Por debajo se apila, porque a esa
     anchura el texto sobre la ilustración sería ilegible. */


  
  @media (min-width: 620px) {/* 64px desde arriba y 19px desde la izquierda, columna de 175px (41,5%),
       tal como está compuesto en el Figma. */
/* Igual que en las tarjetas de servicio: el ancho suma el padding para
       que la columna de texto quede en los 175px del Figma (41,5% de 422). */
/* Medidas del Figma sobre la tarjeta de 422px, en fracción de la caja:
       64px arriba → 15.17cqw · 19px izquierda → 4.5cqw
       título 20px → 4.74cqw · copy 16px → 3.79cqw */

:root:root:root .card__body {
      width: 46%;
      padding: 15.17cqw 0 6.6cqw 4.5cqw;
    }/* En el Figma el copy no fluye tras el título: arranca siempre a 198px
       del borde superior de la tarjeta (46.9cqw), tenga el título dos, tres o
       cuatro líneas. El título reserva ese bloque con min-height (134/422)
       en vez de un margen. */

:root:root:root .card__title {
      font-size: 4.74cqw;
      line-height: 1.42;
      margin-bottom: 0;
      min-height: 31.75cqw;
      max-width: 41.5cqw; /* 175px: fuerza los mismos cortes del diseño */
    }
:root:root:root .card:nth-child(2) .card__title {
      max-width: 34.4cqw; /* 145px */
    }
:root:root:root .card:nth-child(3) .card__title {
      max-width: 38.4cqw; /* 162px */
    }
:root:root:root .card__copy {
      font-size: 3.79cqw;
      line-height: 1.25;
      max-width: 41.5cqw; /* 175px */
    }
:root:root:root .card:nth-child(2) .card__copy {
      max-width: 38.2cqw; /* 161px */
    }
:root:root:root .card:nth-child(3) .card__copy {
      max-width: 40cqw; /* 169px */
    }
  }/* ===== ConnectedCapabilities ===== */

:root:root:root .services {
    display: grid;
    gap: var(--rmd-space-7);
  }

  @media (min-width: 800px) {
:root:root:root .services {
      grid-template-columns: 1fr 1fr;
      gap: 4.94cqw; /* 64px sobre 1296: deja las tarjetas en 616 */
    }
  }/* ---------------------------------------------------------------
     Tarjeta de servicio
     ---------------------------------------------------------------
     Igual que en Marketing Reflection: en el Figma la imagen ES la tarjeta,
     y el texto se superpone sobre su franja izquierda, que en el asset es
     casi blanca (#FEF8F4). El color de fondo de la tarjeta repite ese tono
     para que la pieza se lea igual cuando en móvil el texto pasa debajo.
  --------------------------------------------------------------- */
/* La tarjeta es un contenedor de consulta: todo lo interno se mide en cqw
     (porcentaje del ancho de la tarjeta). La página es fluida y la tarjeta no
     siempre mide los 616px del Figma — en un portátil ronda los 560 —, y con
     fuentes fijas el texto envolvía distinto y descuadraba la composición.
     En cqw, la tarjeta es una réplica proporcional exacta a cualquier ancho:
     mismas palabras por línea que el Figma siempre. */

:root:root:root .service {
    position: relative;
    container-type: inline-size;
    background-color: #fef8f4;
    border-radius: var(--rmd-radius-xl);
    box-shadow: var(--rmd-shadow);
    overflow: hidden;
  }
:root:root:root .service__link {
    display: block;
    color: inherit;
    text-decoration: none;
  }
:root:root:root .service__image {
    width: 100%;
    height: auto;
    display: block;
  }

  @media (min-width: 800px) {/* Imagen y texto se apilan en la MISMA celda de grid. Así el alto de la
       fila lo marca el más alto de los dos: la tarjeta conserva la proporción
       del Figma y, si un copy necesita más —Graphic Design es el más largo—,
       crece en vez de cortarlo.
       Con posicionamiento absoluto no funcionaba: `overflow: hidden` hace que
       `min-height: auto` resuelva a 0 y la caja nunca crecía. */

:root:root:root .service__link {
      display: grid;
    }
:root:root:root .service__image, :root:root:root .service__body {
      grid-area: 1 / 1;
    }
:root:root:root .service__image {
      width: 100%;
      height: auto;
      /* La proporción del Figma (616×329) marca el alto: así la tarjeta escala
         como una foto. min-height deja que el texto la estire si necesita más. */
      aspect-ratio: 616 / 329;
      min-height: 100%;
      /* `cover` y no `contain`: el asset de Graphic Design (710x387) es más
         estrecho que la proporción 616/329 y contain dejaba una banda de
         fondo a la derecha. Con el cuerpo de texto ya limitado a la altura de
         la tarjeta, cover solo recorta el pequeño exceso vertical del asset
         y la imagen rellena la tarjeta de borde a borde. */
      object-fit: cover;
      object-position: center;
    }
  }
:root:root:root .service__body {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-4);
    padding: var(--rmd-space-5);
  }
:root:root:root .service__title {
    font-family: var(--rmd-font-display);
    /* 24px, igual que el Figma: con el contenedor ya corregido la tarjeta mide
       616px y el título guarda la misma relación con el gráfico. */
    font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
    font-weight: var(--rmd-weight-bold);
    line-height: 1.44;
    color: var(--rmd-plum);
  }
:root:root:root .service__copy {
    font-size: 1rem;
    line-height: 1.5;
    color: var(--rmd-muted);
  }/* Proporciones exactas del Figma sobre la tarjeta de 616×329:
       texto a 54px del borde superior (16.4%) y 28px del izquierdo (4.5%),
       columna de 252px (41%). Con menos ancho, "Growth Marketing" se parte en
       dos líneas y el copy de Graphic Design —el más largo— desborda por
       abajo. */


  
  @media (min-width: 800px) {/* Medidas del Figma convertidas a fracción de la tarjeta de 616px:
       54px arriba → 8.77cqw · 28px izquierda → 4.55cqw · hueco 36px → 5.84cqw
       título 24px → 3.9cqw · copy 16px → 2.6cqw
       Al escalar caja y tipografía con el mismo factor, el texto envuelve
       exactamente igual que el diseño a cualquier ancho. */
/* Sin padding inferior: en el Figma el copy de Graphic Design llega a
       327px de los 329 de la tarjeta. Con 6.5cqw de padding el cuerpo superaba
       la altura de la proporcion 616/329, la tarjeta crecia y la imagen (con
       `contain`) quedaba flotando con bandas de fondo alrededor. */

:root:root:root .service__body {
      width: 53.2%;
      padding: 8.77cqw 0 0 4.55cqw;
      gap: 5.84cqw;
    }
:root:root:root .service__title {
      font-size: 3.9cqw;
      line-height: 1.44;
    }/* En el Figma cada tarjeta tiene su propia anchura de copy: 204, 199, 252
       y 189px sobre 616. Tres rondan el 33% y solo Graphic Design —la del
       texto más largo— usa el 41%. Con una anchura única el texto llegaba a
       tocar el gráfico. */

:root:root:root .service__copy {
      font-size: 2.6cqw;
      line-height: 1.5;
      max-width: 68%;
    }
:root:root:root .service:nth-child(3) .service__copy {
      max-width: 84%;
    }/* Los títulos también llevan anchura propia: 300, 251, 300 y 210px. La de
       Social Media es la que fuerza el corte "Social Media & / Content"; sin
       ella el título entra en una línea y se mete debajo del móvil. */

:root:root:root .service:nth-child(2) .service__title {
      max-width: 84%;
    }
:root:root:root .service:nth-child(4) .service__title {
      max-width: 70%;
    }
:root:root:root .service__copy {
      line-height: 1.5;
    }
  }/* El subrayado aparece solo en el título: marca que la tarjeta entera es
     un enlace sin ensuciar el párrafo. */

:root:root:root .service__link:hover .service__title {
    text-decoration: underline;
    text-decoration-color: var(--rmd-cyan);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.15em;
  }/* ===== CreativeWork ===== */
/* 20px de separación, como el Figma. */

:root:root:root .projects {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.543cqw 1.85cqw; /* 20/24px sobre 1296 */
  }/* Tres proyectos, como el Figma. Con `auto-fit` y el contenedor ya a 1296 el navegador
     reservaba una pista de más y las tarjetas quedaban estrechas. */


  
  @media (min-width: 1000px) {
:root:root:root .projects {
      grid-template-columns: repeat(3, 1fr);
    }
  }/* 12px de diámetro y 8 de separación, como el Figma; el activo en coral y
     el resto en cyan. */

:root:root:root .work__dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--rmd-space-7);
  }
:root:root:root .work__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--rmd-cyan);
    transition: background-color var(--rmd-duration) var(--rmd-ease);
  }
:root:root:root .work__dot.is-active {
    background-color: var(--rmd-coral);
  }
:root:root:root .project__image {
    width: 100%;
    height: auto;
    border-radius: var(--rmd-radius-xl);
    box-shadow: var(--rmd-shadow);
  }
:root:root:root .project {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-3);
  }/* La ficha mide 380px en el Figma sobre columnas de 416: sin el tope, el
     texto llega al borde y "Challenge … client's business / challenge."
     parte en otro punto que el diseño. */


  
  @media (min-width: 1000px) {
:root:root:root .project__client, :root:root:root .project__industry, :root:root:root .project__detail {
      max-width: 29.32cqw;
    }
  }
:root:root:root .project__client {
    font-size: var(--rmd-text-body);
    font-weight: var(--rmd-weight-regular);
    color: var(--rmd-muted);
    margin-top: var(--rmd-space-2);
  }
:root:root:root .project__industry {
    color: var(--rmd-muted);
  }
:root:root:root .project__label {
    font-family: var(--rmd-font-display);
    font-weight: var(--rmd-weight-semibold);
    color: var(--rmd-plum);
  }
:root:root:root .project__detail {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-2);
    margin: 0;
  }/* dt y dd en la misma línea: el Figma los muestra como "Etiqueta valor"
     corrido, no como una tabla de dos columnas. */

:root:root:root .project__row dt {
    display: inline;
    font-family: var(--rmd-font-display);
    font-weight: var(--rmd-weight-semibold);
    color: var(--rmd-plum);
  }
:root:root:root .project__row dd {
    display: inline;
    margin: 0;
    color: var(--rmd-muted);
  }
:root:root:root .project__row dt::after {
    content: " ";
  }/* Banda de imagen a sangre con el CTA encima, como en el Figma.
     Va fuera del <Section y no usa 100vw: 100vw incluye la barra de scroll y
     generaba unos 8px de desplazamiento horizontal. Como elemento de bloque a
     nivel de página, el 100% ya es el ancho correcto. */

:root:root:root .work__band {
    position: relative;
    width: 100%;
    min-height: 131px;
    display: grid;
    place-items: center;
    isolation: isolate;
    overflow: hidden;
  }
:root:root:root .work__band-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
  }
:root:root:root .work__band-cta {
    padding-block: var(--rmd-space-5);
  }/* Fichas de proyecto a 16px → 1.235cqw, y banda de 131px → 9.1vw (es un
     elemento a sangre: su base correcta es el viewport). */


  
  @media (min-width: 900px) {
:root:root:root .project__client, :root:root:root .project__industry, :root:root:root .project__label, :root:root:root .project__row dt, :root:root:root .project__row dd {
      font-size: 1.235cqw;
    }
:root:root:root .work__band {
      min-height: 9.1vw;
    }
  }/* ===== Industries ===== */

:root:root:root .industries {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 1.543cqw; /* 20px sobre 1296 */
  }/* Tres columnas explícitas: el Figma dispone las seis industrias en 3×2.
     Con `auto-fit` y el contenedor ya a 1296 entraban cuatro, y la última
     fila quedaba con dos tarjetas sueltas. */


  
  @media (min-width: 1000px) {
:root:root:root .industries {
      grid-template-columns: repeat(3, 1fr);
    }
  }/* Apilado con grid: imagen y panel comparten celda y el alto lo marca el
     más alto de los dos, así el copy largo no se corta. La tarjeta es además
     contenedor de consulta: lo interno se mide en cqw para ser una réplica
     proporcional del Figma (426×284) a cualquier ancho de pantalla. */

:root:root:root .industry {
    position: relative;
    display: grid;
    container-type: inline-size;
    border-radius: var(--rmd-radius-xl);
    overflow: hidden;
    isolation: isolate;
  }
:root:root:root .industry__image, :root:root:root .industry__panel {
    grid-area: 1 / 1;
  }
:root:root:root .industry__image {
    width: 100%;
    height: auto;
    /* La proporción del Figma marca el alto base; el panel la estira si
       su texto necesita más. */
    aspect-ratio: 426 / 284;
    min-height: 100%;
    object-fit: cover;
    transition: transform 600ms var(--rmd-ease);
  }/* El Figma superpone un panel de color sobre la mitad izquierda de la foto,
     al 80% de opacidad, alternando plum y purple según la tarjeta. */

:root:root:root .industry__panel {
    position: relative;
    width: 50%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-3);
    padding: var(--rmd-space-5) var(--rmd-space-4) var(--rmd-space-5) var(--rmd-space-5);
    border-radius: var(--rmd-radius-xl);
  }
:root:root:root .industry--plum .industry__panel {
    background-color: color-mix(in srgb, var(--rmd-plum) 80%, transparent);
  }
:root:root:root .industry--purple .industry__panel {
    background-color: color-mix(in srgb, var(--rmd-purple) 80%, transparent);
  }
:root:root:root .industry__name {
    font-size: 1.6875rem; /* 27px en el Figma */
    line-height: 1.1;
    color: var(--rmd-white);
    /* "Real
Estate" y "Law
Firms" traen el salto del Figma en el contenido:
       a 27px cabrían en una línea y el diseño los quiere en dos. */
    white-space: pre-line;
  }
:root:root:root .industry__copy {
    font-size: 1rem;
    line-height: 1.375;
    color: var(--rmd-ivory);
  }/* Fracciones del Figma sobre la tarjeta de 426px: título 27px → 6.34cqw,
     copy 16px → 3.76cqw, padding 28/30px → 6.6/7cqw, hueco 24px → 5.63cqw.
     Solo desde 420px: por debajo rige la variante apilada con rem. */


  
  @media (min-width: 420px) {/* En el Figma (5:25) el copy no fluye tras el nombre: arranca siempre a
       114px del borde superior (26.76cqw), tenga el nombre una o dos lineas.
       El nombre reserva ese bloque con min-height (86/426) en vez de gap.
       Padding inferior de 16px (3.76cqw), lo que sobra bajo el copy mas largo:
       con 28px el panel superaba los 284 de la tarjeta y la estiraba. */

:root:root:root .industry__panel {
      gap: 0;
      padding: 6.6cqw 4.7cqw 3.76cqw 7cqw;
    }
:root:root:root .industry__name {
      font-size: 6.34cqw;
      min-height: 20.19cqw;
    }
:root:root:root .industry__copy {
      font-size: 3.76cqw;
      max-width: 36.62cqw; /* 156px: mismos cortes de linea que el diseno */
    }
  }/* Un acercamiento leve de la foto al pasar el cursor: sugiere que la
     tarjeta lleva a algún lado, sin mover el texto de sitio. */


  
  @media (prefers-reduced-motion: no-preference) {
:root:root:root .industry:hover .industry__image {
      transform: scale(1.06);
    }
  }/* Por debajo de 420px el panel a media anchura deja el texto en una tira
     ilegible: pasa a cubrir la tarjeta entera. */


  
  @media (max-width: 419px) {
:root:root:root .industry {
      min-height: 320px;
    }
:root:root:root .industry__image {
      aspect-ratio: auto;
    }
:root:root:root .industry__panel {
      width: 100%;
      justify-content: flex-end;
    }
:root:root:root .industry--plum .industry__panel {
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--rmd-plum) 92%, transparent) 40%,
        color-mix(in srgb, var(--rmd-plum) 30%, transparent) 100%
      );
    }
:root:root:root .industry--purple .industry__panel {
      background: linear-gradient(
        to top,
        color-mix(in srgb, var(--rmd-purple) 92%, transparent) 40%,
        color-mix(in srgb, var(--rmd-purple) 30%, transparent) 100%
      );
    }
  }
:root:root:root .industries__cta {
    display: flex;
    justify-content: center;
    margin-top: var(--rmd-space-8);
  }/* ===== StrategicPartner ===== */

:root:root:root .benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
    gap: 4.71cqw; /* 61px sobre 1296 */
  }/* Cuatro diferenciadores en fila, como el Figma. Con `auto-fit` y el contenedor ya a 1296 el navegador
     reservaba una pista de más y las tarjetas quedaban estrechas. */


  
  @media (min-width: 1100px) {
:root:root:root .benefits {
      grid-template-columns: repeat(4, 1fr);
    }
  }
:root:root:root .benefit {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-4);
  }/* Ritmo vertical del Figma: icono de 274 que termina en y=625, título en
     y=665 (40px después) y copy en y=730 (12px tras un bloque de título de
     53px). El `min-height` fija ese bloque a dos líneas — las cuatro lo son
     en el diseño — para que los cuatro copys arranquen a la misma altura;
     sin él, "Personalized Attention" entraba en una línea y desalineaba la
     fila. */


  
  @media (min-width: 900px) {
:root:root:root .benefit {
      gap: 0;
    }
:root:root:root .benefit__title {
      max-width: 20.833cqw; /* 270px */
      min-height: 4.09cqw; /* 53px = dos líneas */
      margin-top: 3.086cqw; /* 40px bajo el icono */
    }
:root:root:root .benefit__copy {
      max-width: 20.448cqw; /* 265px */
      margin-top: 0.926cqw; /* 12px */
    }
  }/* El icono del Figma es un cuadrado de 274px. Se limita para que en una
     sola columna no ocupe toda la pantalla. */

:root:root:root .benefit__icon {
    width: 100%;
    max-width: 274px;
    height: auto;
  }/* 23px en el Figma. */

:root:root:root .benefit__title {
    font-size: 1.4375rem;
    line-height: 1.15;
    color: var(--rmd-plum);
  }
:root:root:root .benefit__copy {
    font-family: var(--rmd-font-display);
    font-size: 0.9375rem;
  }/* A escala: icono 274px → 21.14cqw, título 23px → 1.775cqw, copy 15px →
     1.157cqw sobre los 1296 del Figma. */


  
  @media (min-width: 900px) {
:root:root:root .benefit__icon {
      max-width: 21.14cqw;
    }
:root:root:root .benefit__title {
      font-size: 1.775cqw;
    }
:root:root:root .benefit__copy {
      font-size: 1.157cqw;
    }
  }/* En móvil los cuatro diferenciadores van dos arriba y dos abajo, con el
     icono y la tipografía reducidos a la escala de la pantalla. */


  
  @media (max-width: 767px) {
:root:root:root .benefits {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rmd-space-6) var(--rmd-space-5);
    }
:root:root:root .benefit {
      gap: var(--rmd-space-3);
    }
:root:root:root .benefit__icon {
      max-width: 132px;
    }
:root:root:root .benefit__title {
      font-size: 1.0625rem;
    }
:root:root:root .benefit__copy {
      font-size: 0.8125rem;
    }
  }/* ===== Testimonials ===== */
/* El avatar se solapa con el borde superior de la tarjeta, como en el
     Figma. El padding-top del listado deja sitio para ese medio círculo. */

:root:root:root .testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 2.546cqw; /* 33px sobre 1296 */
    padding-top: 60px;
  }/* Tres testimonios, como el Figma. Con `auto-fit` y el contenedor ya a 1296 el navegador
     reservaba una pista de más y las tarjetas quedaban estrechas. */


  
  @media (min-width: 1000px) {
:root:root:root .testimonials {
      grid-template-columns: repeat(3, 1fr);
    }
  }
:root:root:root .testimonial {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 74px var(--rmd-space-5) var(--rmd-space-6);
    border-radius: var(--rmd-radius-lg);
    text-align: center;
  }/* Los tres colores de tarjeta son los del Figma, sin retocar. Lo que cambia
     es el color del TEXTO: ivory sobre coral da 2.71:1 y sobre cyan 2.26:1,
     ambos por debajo del 4.5:1 de WCAG AA. Plum da 6.50:1 y 7.78:1. */

:root:root:root .testimonial--coral {
    --card: var(--rmd-coral);
    background-color: var(--rmd-coral);
    color: var(--rmd-on-coral);
  }
:root:root:root .testimonial--purple {
    --card: var(--rmd-purple);
    background-color: var(--rmd-purple);
    color: var(--rmd-on-purple);
  }
:root:root:root .testimonial--cyan {
    --card: var(--rmd-cyan);
    background-color: var(--rmd-cyan);
    color: var(--rmd-on-cyan);
  }
:root:root:root .testimonial__avatar {
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background-color: var(--rmd-ivory);
    /* El borde toma el color de la tarjeta, no el del texto: con currentColor
       el avatar de la tarjeta morada salía blanco sobre ivory y desaparecía. */
    border: 2px solid var(--card);
    color: var(--card);
    display: grid;
    place-items: center;
  }
:root:root:root .testimonial__avatar svg {
    width: 56px;
    height: 56px;
    color: inherit;
  }
:root:root:root .testimonial__figure {
    display: flex;
    flex-direction: column;
    gap: var(--rmd-space-5);
    margin: 0;
    height: 100%;
  }/* Serif solo acá: en el Figma las citas van en Playfair Display 20/29. */

:root:root:root .testimonial__quote {
    margin: 0;
    /* Astra le da a los blockquote 20px de relleno y un borde izquierdo. En el
       Figma la cita es solo el texto: el relleno estiraba la tarjeta 40px y el
       borde dibujaba una barra vertical dentro de cada tarjeta. */
    padding: 0;
    border: 0;
    font-family: var(--rmd-font-quote);
    font-size: 1.25rem;
    line-height: 1.45;
    color: inherit;
  }
:root:root:root .testimonial__client {
    margin-top: auto;
    font-family: var(--rmd-font-body);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: inherit;
    opacity: 0.86;
  }/* Medidas del nodo 5:69, sobre el contenido de 1296.

     Tarjeta 405×300 (y=340) · avatar 180×180 (y=247, sobresale 93px)
     cita Playfair 20/29 en una columna de 345 (y=468, tres líneas)
     cliente Inter ExtraBold 12 (y=590).

     La columna de 345 es la que fija los cortes: con el ancho que dejaba el
     relleno de la tarjeta (357) la cita pasaba a cuatro líneas. */


  
  @media (min-width: 900px) {
:root:root:root .testimonials {
      padding-top: 7.176cqw; /* el avatar sobresale 93px sobre la tarjeta */
    }
:root:root:root .testimonial {
      padding: 9.877cqw 1.85cqw 2.932cqw; /* 128px hasta la cita, 38 abajo */
      min-height: 23.15cqw; /* 300px */
    }
:root:root:root .testimonial__avatar {
      width: 13.889cqw; /* 180px */
      height: 13.889cqw;
      top: -7.176cqw; /* 93px */
    }
:root:root:root .testimonial__avatar svg {
      width: 6.48cqw; /* 84px: la proporcion del icono dentro del circulo */
      height: 6.48cqw;
    }
:root:root:root .testimonial__quote {
      font-size: 1.543cqw; /* 20px */
      line-height: 1.45; /* 29/20 */
      max-width: 26.62cqw; /* 345px */
      margin-inline: auto;
    }/* El hueco entre cita y cliente lo pone el figure, no un margen: con los
       dos se sumaban y la tarjeta crecia 24px de mas. */

:root:root:root .testimonial__figure {
      gap: 2.701cqw; /* 35px */
    }
:root:root:root .testimonial__client {
      font-size: 0.926cqw; /* 12px */
      line-height: 1; /* el Figma le da 12 de interlineado a 12 de cuerpo */
    }
  }/* ===== GrowthCta ===== */
/*  es necesario acá, no es un atajo.
     `class="growth"` viaja como prop hasta <Section , así que la clase acaba
     en un <section que pertenece a la plantilla de Section.astro. El CSS con
     scope de este componente no alcanza ese elemento, y sin  estas
     reglas no se aplican: la sección quedaba `position: static`, el velo no
     se pintaba y el texto blanco caía sobre el fondo ivory, ilegible. */

:root:root:root .growth {
    position: relative;
    isolation: isolate;
    overflow: hidden;
  }
:root:root:root .growth__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
  }/* Velo sobre la fotografía. Sin esto el texto queda a merced de lo que haya
     debajo: con él, el blanco mantiene 18.65:1 en toda la sección. */

:root:root:root .growth::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      100deg,
      color-mix(in srgb, var(--rmd-plum) 94%, transparent) 0%,
      color-mix(in srgb, var(--rmd-plum) 82%, transparent) 45%,
      color-mix(in srgb, var(--rmd-plum) 42%, transparent) 100%
    );
  }
:root:root:root .growth__copy {
    position: relative;
    z-index: 2;
    max-width: 46rem;
  }
:root:root:root .growth__copy .growth__headline {
    font-size: var(--rmd-text-h1);
    line-height: var(--rmd-leading-display);
    /* El Figma deja unos 66px entre el titular y el cuerpo. */
    margin-bottom: var(--rmd-space-7);
  }/* Blanco pleno, como el Figma: el rol on-dark lleva alfa y quedaba grisáceo. */

:root:root:root .growth__body {
    font-size: var(--rmd-text-lead);
    color: var(--rmd-white);
    max-width: var(--rmd-measure);
  }
:root:root:root .growth__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rmd-space-4);
    margin-top: var(--rmd-space-7);
  }/* Ritmos verticales del Figma (sección de 960px): 50px tras el eyebrow,
     66px tras el titular, 94px antes de los botones, cuerpo de 500px y
     relleno vertical de 182/164px — todo como fracción del contenido. */

  
  @media (min-width: 900px) {
:root:root:root .growth__copy .eyebrow {
      margin-bottom: 3.86cqw;
      max-width: 32.9cqw; /* 426px en el Figma */
    }
:root:root:root .growth__copy .growth__headline {
      margin-bottom: 5.09cqw;
    }/* La especificidad extra es deliberada: la regla base de .growth__body
       aparece más abajo en este archivo y, a igual peso, ganaría por orden. */

:root:root:root .growth__copy .growth__body {
      max-width: 38.6cqw; /* 500px en el Figma */
      line-height: 1.55;
    }/* 66px entre el final del cuerpo y los botones (el cuerpo cierra en
       y=677 y los botones abren en y=744). */

:root:root:root .growth__actions {
      margin-top: 5.13cqw;
    }
  }/* El titular del CTA mide 55px con interlineado 60, como el h1 del hero y
     no como los 40 de un h2 de sección (nodo 5:87). Sigue siendo un h2 por
     jerarquía: el h1 de la página es el del hero.
      porque la clase llega al elemento raíz de <Headline ; sin ella
     el titular se quedaba en 40px y la sección perdía 50px de alto. */
/* ===== Footer ===== */

:root:root:root .footer {
    background-color: var(--rmd-plum);
    color: rgba(255, 255, 255, 0.78);
    padding-block: var(--rmd-space-8) var(--rmd-space-6);
  }/* Relleno del nodo 5:96: 69px sobre el logo y 40 bajo la línea legal.
     Con el ritmo genérico el pie quedaba 71px más bajo que el diseño. */


  
  @media (min-width: 900px) {
:root:root:root .footer {
      padding-block: 4.792vw 2.778vw;
    }
  }
:root:root:root .footer__inner, :root:root:root .footer__bottom {
    max-width: none;
    margin-inline: auto;
    padding-inline: var(--rmd-gutter);
  }
:root:root:root .footer__inner {
    container-type: inline-size;
  }/* Footer a escala desde 900px: logo 200px → 15.43cqw, títulos 13px →
     1.003cqw, enlaces 15px → 1.157cqw, descripción 16px → 1.235cqw con su
     columna de 330px → 25.5cqw. */


  
  @media (min-width: 900px) {
:root:root:root .footer__logo {
      width: 15.43cqw;
      height: auto;
    }
:root:root:root .footer__heading {
      font-size: 1.003cqw;
    }
:root:root:root .footer__link {
      font-size: 1.157cqw;
    }
:root:root:root .footer__description {
      font-size: 1.235cqw;
      max-width: 25.5cqw;
    }
  }
:root:root:root .footer__inner {
    display: grid;
    gap: var(--rmd-space-8);
  }/* En el Figma los encabezados de columna van en y=113 y el logo en y=69:
     las cuatro columnas arrancan 44px más abajo que la marca. */


  
  @media (min-width: 900px) {
:root:root:root .footer__columns {
      padding-top: 3.395cqw; /* 44px */
    }
  }

  @media (min-width: 900px) {/* Marca de 330px y columnas desde los 428px de contenido, como el Figma
       (columnas a x=500/720/940/1160 sobre el lienzo de 1440). */

:root:root:root .footer__inner {
      /* En %: las pistas se resuelven contra la caja de contenido del grid
         (1296px a escala 1:1), que es justo la base del Figma. Un cqw acá
         sería un error: el contenedor no puede consultarse a sí mismo y el
         valor caería al viewport. */
      grid-template-columns: minmax(0, 25.5%) minmax(0, 1fr);
      gap: 7.5%;
    }
  }/* --- Marca --- */

:root:root:root .footer__logo {
    display: block;
    width: 200px;
    height: 88px;
    margin-bottom: var(--rmd-space-4);
  }/* Inter 16/24.8 en blanco pleno, 330px de columna: valores del Figma. */

:root:root:root .footer__description {
    font-size: 1rem;
    line-height: 1.55;
    color: var(--rmd-white);
    max-width: 330px;
  }/* --- Columnas ---
     auto-fit reparte las cuatro columnas solo: 4 en desktop, 2 en tablet y 1
     en móvil, sin un breakpoint por caso. */

:root:root:root .footer__columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
    gap: var(--rmd-space-6);
  }/* Dorado #e8a11c, como el Figma — no coral. Sobre plum da 7.4:1. */

:root:root:root .footer__heading {
    font-family: var(--rmd-font-body);
    font-size: 0.8125rem;
    font-weight: var(--rmd-weight-semibold);
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--rmd-gold);
    margin-bottom: var(--rmd-space-4);
    /* Es un <summary : sin marcador nativo en ningún navegador. */
    list-style: none;
  }
:root:root:root .footer__heading::-webkit-details-marker {
    display: none;
  }/* En escritorio las columnas están siempre abiertas: el summary no es
     interactivo y no lleva flecha. */


  
  @media (min-width: 768px) {
:root:root:root .footer__heading {
      pointer-events: none;
    }
  }/* En móvil, acordeón 2×2: los cuatro grupos en dos columnas y cada
     summary con su flecha, que gira al abrir. */


  
  @media (max-width: 767px) {
:root:root:root .footer__columns {
      grid-template-columns: repeat(2, 1fr);
      gap: var(--rmd-space-5) var(--rmd-space-5);
      align-items: start;
    }
:root:root:root .footer__heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--rmd-space-2);
      margin-bottom: 0;
      padding-block: var(--rmd-space-2);
      cursor: pointer;
    }
:root:root:root .footer__heading::after {
      content: "";
      flex: 0 0 auto;
      width: 0.5em;
      height: 0.5em;
      border-right: 2px solid var(--rmd-gold);
      border-bottom: 2px solid var(--rmd-gold);
      transform: rotate(45deg); /* apunta hacia abajo */
      transition: transform var(--rmd-duration) var(--rmd-ease);
    }
:root:root:root .footer__column[open] .footer__heading::after {
      transform: rotate(225deg); /* apunta hacia arriba */
    }
:root:root:root .footer__column[open] .footer__heading {
      margin-bottom: var(--rmd-space-2);
    }
  }
:root:root:root .footer__links {
    display: flex;
    flex-direction: column;
    gap: 0;
  }/* Inter 15/30 en blanco, como el Figma. `anywhere` deja partir el email
     (hello@royalmediadesigns.com), que en columnas estrechas desbordaba. */

:root:root:root .footer__link {
    font-size: 0.9375rem;
    line-height: 2;
    color: var(--rmd-white);
    text-decoration: none;
    overflow-wrap: anywhere;
  }
:root:root:root .footer__link:hover {
    color: var(--rmd-white);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }/* --- Barra inferior --- */
/* El divisor es dorado en el Figma, y el bloque legal va con viñetas. */

:root:root:root .footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rmd-space-4);
    margin-top: var(--rmd-space-8);
    padding-top: var(--rmd-space-6);
    border-top: 1px solid var(--rmd-gold);
  }/* Ritmo del Figma: los enlaces cierran en y=283, el divisor va en y=380 y
     la línea legal en y=425. Con el ritmo genérico el pie quedaba 58px más
     corto que el diseño. */


  
  @media (min-width: 900px) {
:root:root:root .footer__bottom {
      margin-top: 7.485cqw; /* 97px */
      padding-top: 3.472cqw; /* 45px hasta el copyright */
    }
  }
:root:root:root .footer__copyright, :root:root:root .footer__legal {
    font-size: 0.8125rem;
  }
:root:root:root .footer__legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rmd-space-3);
  }
:root:root:root .footer__legal li + li::before {
    content: "•";
    margin-right: var(--rmd-space-3);
    color: rgba(255, 255, 255, 0.6);
  }/* ===== Relleno vertical de cada seccion (px del Figma sobre 1440) ===== */



@media (min-width: 900px) {
:root:root:root .section--hero {
    --section-pad-top: 5.417vw;
    --section-pad-bottom: 2.222vw;
  }
:root:root:root .section--trusted-by {
    --section-pad-top: 3.125vw;
    --section-pad-bottom: 6.736vw;
  }
:root:root:root .section--marketing-reflection {
    --section-pad-top: 1.736vw;
    --section-pad-bottom: 0.347vw;
  }
:root:root:root .section--connected-capabilities {
    --section-pad-top: 4.861vw;
    --section-pad-bottom: 4.097vw;
  }
:root:root:root .section--creative-work {
    --section-pad-top: 4.167vw;
    --section-pad-bottom: 0.694vw;
  }
:root:root:root .section--industries {
    --section-pad-top: 4.861vw;
    --section-pad-bottom: 2.431vw;
  }
:root:root:root .section--strategic-partner {
    --section-pad-top: 4.861vw;
    --section-pad-bottom: 6.944vw;
  }
:root:root:root .section--testimonials {
    --section-pad-top: 4.514vw;
    --section-pad-bottom: 8.056vw;
  }
:root:root:root .section--growth-cta {
    --section-pad-top: 12.639vw;
    --section-pad-bottom: 11.389vw;
  }
}/* ===== Anchos del encabezado de cada seccion (px del Figma) ===== */



@media (min-width: 900px) {
:root:root:root .section--connected-capabilities .section-header {
    --header-headline-max: 50.154cqw;
    --header-intro-max: 40.895cqw;
    --header-col-1: 54.630cqw;
    --header-col-gap: 0px;
  }
:root:root:root .section--creative-work .section-header {
    --header-headline-max: 43.210cqw;
    --header-intro-max: 40.123cqw;
    --header-col-1: 53.858cqw;
    --header-col-gap: 0px;
  }
:root:root:root .section--industries .section-header {
    --header-headline-max: 50.154cqw;
    --header-intro-max: 40.123cqw;
    --header-col-1: 54.630cqw;
    --header-col-gap: 0px;
  }
:root:root:root .section--strategic-partner .section-header {
    --header-headline-max: 60.185cqw;
    --header-intro-max: 50.154cqw;
  }
:root:root:root .section--testimonials .section-header {
    --header-headline-max: 47.840cqw;
    --header-intro-max: 37.809cqw;
    --header-col-1: 50.000cqw;
    --header-col-gap: 0px;
  }
}/* ===== Compatibilidad con Elementor =====
   Elementor envuelve cada contenedor en `.e-con-inner` y cada widget en
   `.elementor-widget-container`. Ese DOM extra rompe las reglas de arriba, que
   estan escritas para la estructura del sitio en Astro: una reticula cuyo hijo
   directo pasa a ser un unico envoltorio deja de repartir sus columnas.

   `display: contents` hace que esos divs desaparezcan del layout sin sacarlos
   del DOM: sus hijos pasan a ser hijos directos del abuelo. Asi el mismo CSS
   sirve para los dos frontends y no hay dos fuentes de verdad. */

:root:root:root .e-con > .e-con-inner, :root:root:root .elementor-widget > .elementor-widget-container {
  display: contents;
}/* El widget de HTML tampoco: su marcado ES el del diseno y cualquier caja
   intermedia sobra. Importa sobre todo porque Elementor posiciona sus
   envoltorios, y eso rompe el posicionamiento absoluto: el avatar de los
   testimonios se anclaba al widget en vez de a la tarjeta y aparecia en el
   medio en lugar de sobresalir por arriba. */

:root:root:root .elementor-widget-html {
  display: contents;
}/* Elementor le pone margen propio a los titulos y parrafos de sus widgets. El
   ritmo vertical de este diseno sale del Figma y lo fijan las reglas de arriba. */

:root:root:root .elementor-widget-heading .elementor-heading-title, :root:root:root .elementor-widget-text-editor p:last-child {
  margin: 0;
}/* Astra limita el contenido a 1240px con su `.ast-container`. Este diseno es
   a sangre completa: cada seccion pone su propio ancho y su propio margen, y
   con ese tope el lienzo se quedaba en 1056px de contenido en vez de 1282.

   Va en el tema y no en un ajuste del panel a proposito: asi el ancho no
   depende de una opcion guardada en la base, que en una instalacion limpia
   vuelve al valor por defecto (fue exactamente lo que paso al desplegar). */

:root:root:root .ast-container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}/* Elementor le impone a sus widgets de texto la tipografia del kit (Roboto).
   No es cosmetico: Roboto es mas estrecho que Inter, asi que entraban mas
   palabras por linea y los parrafos dejaban de partir donde manda el Figma.
   La introduccion de Testimonials salia en 2 lineas en vez de 3.

   `inherit` la devuelve a la del envoltorio, que es donde vive el diseno. */

:root:root:root .elementor-widget-text-editor, :root:root:root .elementor-widget-text-editor p, :root:root:root .elementor-widget-text-editor span, :root:root:root .elementor-widget-text-editor div {
  font-family: inherit;
  font-weight: inherit;
  font-style: inherit;
  letter-spacing: inherit;
}/* Nuestras clases caen en el ENVOLTORIO del widget, pero el texto visible esta
   en un elemento interno que Elementor pinta con los colores y la tipografia
   de su kit. Sin esto el eyebrow se ve cyan aunque `.eyebrow` sea coral: la
   regla se aplica, pero a la caja de afuera. Heredar lo devuelve al diseno. */

:root:root:root .elementor-widget-heading .elementor-heading-title {
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-transform: inherit;
  text-align: inherit;
}/* Los containers de Elementor traen `--width`, `--padding-*` y un ancho maximo
   propios que pisan el lienzo. Las secciones lo definen ellas. */

:root:root:root .e-con.section, :root:root:root .e-con.section__inner {
  --width: 100%;
  --content-width: 100%;
  max-width: none;
}
:root:root:root .e-con.section__inner {
  padding: 0 var(--rmd-gutter);
}/* Enlace que cubre una tarjeta entera.

   En el diseno original la tarjeta ES un <a> que envuelve imagen y texto. En
   Elementor eso no puede ser: un enlace crudo dejaria de ser editable y el
   layout depende de que sus hijos sean nodos propios. Se conserva el
   contenedor y se le superpone este enlace, que mantiene la tarjeta navegable
   con teclado y abrible en pestana nueva.

   El texto va oculto pero presente: un enlace sin nombre accesible no le dice
   nada a un lector de pantalla. */

:root:root:root .rmd-cover-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}/* Elementor posiciona el envoltorio de cada widget, asi que el enlace se
   ajustaba a esa caja de altura cero en vez de a la tarjeta. Se le quita el
   posicionamiento SOLO al envoltorio que contiene un enlace de cobertura. */

:root:root:root .elementor-widget:has(.rmd-cover-link) {
  position: static;
}
:root:root:root .rmd-cover-link span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}/* El widget de imagen desaparece por completo del layout.

   Un filtro del tema copia las clases del widget al <img>, porque
   `aspect-ratio` y `object-fit` solo hacen algo aplicados al propio elemento.
   Pero entonces las clases quedan en el envoltorio Y en la imagen, y las
   propiedades de caja se aplican dos veces: la imagen de Marketing Reflection
   recibia su margen negativo dos veces y se salia 36px de la pantalla.

   Con el envoltorio en `display: contents` no genera caja, asi que sus
   margenes y anchos no hacen nada y el <img> queda como el elemento de layout
   real — exactamente el modelo del diseno original. */

:root:root:root .elementor-widget-image, :root:root:root .elementor-widget-image > .elementor-widget-container {
  display: contents;
}