/*
  Escalado fluido (mismo sistema que carlos-guillermo).

  En carlos-guillermo cada medida pasa por vw($px, $base): px * 100vw / base.
  Aquí casi todo el CSS de Webflow está en rem, así que basta con aplicar esa
  misma fórmula al font-size de <html>: cada rem escala con el ancho de la
  ventana, igual que el frame de Figma.

  - Desktop (≥1031px): diseño base de 1440px. Deja de crecer en 1920px
    (1rem = 21.33px) y no baja de 1rem = 14px.
  - Mobile (≤1030px): diseño base de 430px. No crece más allá de 16px, para
    que la tablet no se vea enorme, y no baja de 13px.

  Aquí solo se calcula --root-size; css/accessibility.css lo aplica a <html>
  multiplicado por --a11y-font-scale, para que el control de tamaño de texto
  siga funcionando encima del escalado.

  Para que una medida nueva escale, escríbela en rem (px de Figma / 16).
*/

@media only screen and (min-width: 1031px) {
  html {
    --root-size: clamp(14px, calc(100vw * 16 / 1440), calc(16px * 1920 / 1440));
  }
}

@media only screen and (max-width: 1030px) {
  html {
    --root-size: clamp(13px, calc(100vw * 16 / 430), 16px);
  }
}

/*
  Iconos: los SVG sin ancho en CSS usan su tamaño propio en px y no escalan.
  Se fija su tamaño en rem (mismo tamaño que hoy a 1440px).
*/
.arrow-icon { width: 1rem; height: 1rem; }
.accordion_arrow { width: 0.625rem; height: auto; }
.button_whatsapp-icon { width: 1.5rem; height: 1.5rem; }
.nav_dropdown-chevron { width: 0.625rem; height: 0.375rem; }
.services_arrow svg { width: 1.125rem; height: 1.125rem; }
/* Iconos de las tarjetas de beneficios: el <img> no trae la clase .card_icon */
.card_icon-wrapper > img:not(.card_icon) { width: var(--_sizes---fixed--xlarge); height: var(--_sizes---fixed--xlarge); }