/* ==========================================================================
   Thinkhub — Design tokens
   Valores extraídos del export CSS de Figma (Thinkhub | Web Design).
   No inventar valores acá: si falta algo, sacarlo del export.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Aeonik real (llegó con el paquete del diseñador, ago-2026)

   Regular y Medium están completos (703 glifos). El **Bold es una versión
   TRIAL con sólo 67 glifos**: tiene ASCII básico pero NO tiene á é í ó ú ü ñ
   ni sus mayúsculas. Sin protección, «transformación» en bold mostraría
   cuadros.

   Por eso el Bold declara un `unicode-range` acotado a lo que realmente tiene:
   cualquier carácter fuera de ese rango cae solo al siguiente de la cadena
   (el Inter calibrado), sin romper nada. Cuando llegue el Bold completo con
   licencia, se borra el `unicode-range` y listo.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: 'Aeonik';
  src: url('../fonts/Aeonik-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  /* Sólo lo que el TRIAL cubre: espacio, coma, guión, punto, 0-9, A-Z, a-z. */
  unicode-range: U+0020, U+002C-002E, U+0030-0039, U+0041-005A, U+0061-007A;
}

@font-face {
  font-family: 'Inter Aeonik Fallback';
  src: url('../fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  size-adjust: 94%;
}

@font-face {
  font-family: 'Inter Aeonik Fallback';
  src: url('../fonts/Inter-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
  size-adjust: 94%;
}

@font-face {
  font-family: 'Inter Aeonik Fallback';
  src: url('../fonts/Inter-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
  size-adjust: 94%;
}

/* --------------------------------------------------------------------------
   IBM Plex Mono — datos de contacto (drawer mobile).
   Autohospedada igual que Aeonik, no por Google Fonts: así no depende de
   una conexión aparte ni de un <link> nuevo en cada página.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'IBM Plex Mono';
  src: url('../fonts/IBMPlexMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}

:root {
  /* --- Color ------------------------------------------------------------ */
  --c-dark:        #212224;  /* fondo oscuro, texto sobre claro */
  --c-light:       #E8E9DD;  /* fondo claro (secciones Soluciones/Casos) */
  --c-orange:      #FF5800;  /* naranja de marca */
  --c-lavender:    #E4D1FF;  /* overlay del header */
  --c-violet:      #B28CFF;  /* cierre del gradiente primario, y thinkcloud */
  --c-violet-deep: #7E54EC;  /* acento de thinksmart */
  --c-border:      #C4C6C5;  /* borde de las cards circulares */
  --c-border-hi:   #FFAD82;  /* borde destacado (usado en /caso y /exitos) */
  --c-white:       #FFFFFF;
  --c-footer-text: #C4C6C5;

  /* Gradiente primario: botones, texto "Hablemos", flechas */
  --grad-primary: linear-gradient(90deg, #FF5800 0%, #B28CFF 100%);

  /* Overlay del header en el `.fig`. Sin usar desde que el hero pasó a la
     animación de la maqueta provisoria: tapaba el 90% del ancho y dejaba
     asomar el navbar que el video del archivo trae pintado adentro. Queda
     anotado por si el diseño vuelve sobre esto. */
  --grad-header: linear-gradient(270deg, rgba(224, 209, 255, 0) 0%, #E4D1FF 90.07%);

  /* Fade a claro sobre la imagen de cierre */
  --grad-fade-light: linear-gradient(0deg, rgba(232, 233, 221, 0) 0%, #E8E9DD 100%);

  /* Halo radial detrás de Casos de éxito.
     Son dos GRADIENT_RADIAL apilados en la elipse. Los porcentajes salen de
     invertir la matriz de cada paint, no del export CSS: ahí figuraban
     «81.42% at 70.68% 4.2%», que no se corresponden con la matriz real.
     Ojo con el orden: en Figma el primer fill de la lista se pinta abajo;
     en CSS el primero va arriba, así que van invertidos. */
  --grad-halo: radial-gradient(181.3% 181.3% at 192% -37.3%, #E8E9DD 0%, #FF5800 100%),
               radial-gradient(100% 100% at 100% 0%, #FFAD82 0%, #FF5800 100%);

  /* Superficie de las cards de caso */
  --surface-glass: rgba(255, 255, 255, 0.2);
  --blur-glass: blur(22.5px);
  --surface-navbar: rgba(255, 255, 255, 0.01);
  --blur-navbar: blur(10px);

  /* --- Tipografía ------------------------------------------------------- */
  /* Aeonik real primero. El Inter con `size-adjust: 94%` queda de fallback:
     cubre los acentos que le faltan al Bold TRIAL y sostiene los cortes de
     línea del diseño si Aeonik no carga. */
  --font-sans: 'Aeonik', 'Inter Aeonik Fallback', 'Inter',
               -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  /* Escala tipográfica — nombres tal cual los usa el diseño.
     Cada par es (font-size / line-height) del breakpoint desktop. */
  --fs-header:      150px;  --lh-header:      116px;  /* Header/Desktop */
  --fs-section:     100px;  --lh-section:      80px;  /* título de sección (Nosotros) */
  --fs-subheader:   100px;  --lh-subheader:    80px;  /* Subheader/Desktop — KPI */
  --fs-title:        72px;  --lh-title:        56px;  /* Tittle/Desktop */
  --fs-solutions:    48px;  --lh-solutions:    44px;  /* bajada de Soluciones */
  --fs-subtitle:     32px;  --lh-subtitle:     28px;  /* Subtittle/Desktop */
  --fs-paragraph-l:  36px;  --lh-paragraph-l:  38px;  /* Paragraph L/Desktop */
  --fs-paragraph-m:  28px;  --lh-paragraph-m:  30px;  /* Paragraph M/Desktop */
  --fs-paragraph-xs: 20px;  --lh-paragraph-xs: 24px;  /* Paragraph XS/Desktop */
  --fs-footer-nav:   24px;  --lh-footer-nav:   27px;  /* nav del footer, igual en los 3 */
  --fs-button:       16px;  --lh-button:       18px;
  --fs-caption:      14px;  --lh-caption:      16px;  /* Caption, siempre uppercase */

  /* --fs-section y --fs-subheader coinciden en desktop y tablet, pero en mobile
     se separan: el título de sección baja a 40px y el KPI se queda en 68px
     (Subheader/Mobile). Por eso van como tokens distintos. */

  /* --- Layout ----------------------------------------------------------- */
  --page-max:      1440px;  /* ancho del frame de diseño */
  --content-max:   1328px;  /* 1440 - 56*2 */
  --gutter:          56px;  /* padding lateral desktop */
  --navbar-h:        90px;
  --footer-logo-h:  162px;  /* alto del logo del footer */

  /* --- Espaciado -------------------------------------------------------- */
  --sp-4:    4px;   --sp-12:  12px;  --sp-16:  16px;  --sp-24:  24px;  --sp-26:  26px;
  --sp-28:  28px;   --sp-32:  32px;  --sp-34:  34px;  --sp-36:  36px;
  --sp-44:  44px;   --sp-48:  48px;  --sp-54:  54px;  --sp-56:  56px;
  --sp-60:  60px;   --sp-64:  64px;  --sp-72:  72px;  --sp-80:  80px;
  --sp-84:  84px;   --sp-100: 100px; --sp-120: 120px;

  /* --- Medidas de sección ----------------------------------------------- */
  /* Alto del header y ancho de las cards circulares cambian por breakpoint. */
  --header-h:     838px;  /* frame desktop; tablet y mobile son 837px */
  --card-size:    420px;  /* Solution — diámetro de la card circular */
  --logo-scale:       1;  /* tira de clientes: logos, gap y padding escalan juntos */
  /* Marquesina: la duración se deriva del ancho de una copia de la tira a
     60px/s, para que los tres breakpoints se muevan al mismo ritmo aparente.
     La velocidad NO está en el .fig (Figma no anima esto) — a confirmar con
     diseño; el resto de la geometría sí sale del archivo. */
  --marquee-dur:      38s;

  /* --- /exitos ---------------------------------------------------------- */
  --quotes-pt:       200px;  /* padding-top de la sección de quotes */
  --quote-w:         410px;  /* card de testimonio */
  --quote-h:         300px;
  --quotes-dur:       50s;   /* tira de 2982px a 60px/s */
  --fs-quote:         24px;  --lh-quote: 28px;
  --title-pt:         64px;  /* «Casos destacados» */
  --case-row-gap:     48px;  /* entre casos */
  --closing-pt:      180px;
  /* Sangría izquierda del bloque de cierre de /exitos: el frame deja 394px
     libres para la ilustración (pl-[394px] en el export). */
  --closing-indent:  338px;   /* 394 − 56 del gutter */

  /* --- /soluciones (portado del paquete del diseñador) ------------------- */
  --c-muted:      rgba(33, 34, 36, 0.55);   /* texto secundario */
  --c-rule:       rgba(33, 34, 36, 0.14);   /* línea entre unidades */
  --c-rule-str:   rgba(33, 34, 36, 0.30);   /* borde del CTA de cada unidad */
  /* Relleno de los tags de tecnologías: el tono suave de cada submarca. El de
     thinksmart es directamente el violeta de marca. */
  --c-core-soft:  #FFB08A;
  --c-cloud-soft: #E0D1FF;
  --sol-header-pt:   120px;  --sol-header-pb: 160px;
  --fs-sol-title:    104px;  /* titular de la página */
  --fs-sol-lead:      22px;
  --fs-sol-unit:      21px;
  --fs-sol-item:      16px;
  --fs-sol-tag:       14px;
  --fs-sol-label:     13px;  /* rótulos "Beneficios" / "Tecnologías" */
  --fs-sol-cta:       15px;  /* pastilla "Ver thinkcore" */
  --fs-sol-closing:   60px;
  --sol-unit-gap:    100px;
  --sol-logo-h:       64px;
  --sol-media-h:     420px;  /* alto de la caja del objeto animado del cierre */
  --sol-closing-pt:  140px;  --sol-closing-gap:  80px;

  /* --- /nosotros, /hablemos, /caso -------------------------------------- */
  --nos-hero-h:      883px;  /* alto del frame `Hero image` */
  --adn-overlap:     100px;  /* el bloque ADN sube sobre la foto */
  /* /hablemos — Contact section (273:15298). El padding-top del frame ya
     incluye el alto del navbar: el navbar va encima, no empuja. */
  --contacto-pt:     200px;
  --contacto-pb:     100px;
  --contacto-gap:    120px;  /* entre título y formulario */
  --intro-gap:        44px;  /* mínimo entre título y el CTA de mail */
  --fs-contacto:     100px;  --lh-contacto: 80px;
  /* El formulario: 3 líneas + botón, todo separado por --form-gap. Las cajas
     de campo tienen alto fijo y el texto apoyado sobre la línea inferior.
     La 1ª línea es 8px más alta que la 2ª — así está en el archivo. */
  --form-gap:         72px;
  --field-gap:        20px;  /* entre los dos campos de una línea */
  --field-h:          64px;  --field-h-sm: 56px;
  --field-pb:         12px;
  --fs-field:         20px;  --lh-field: 24px;
  --msg-h:           124px;  --msg-pt: 0px;

  /* /hablemos — Locations section (273:15322).
     Ojo: los laterales NO son --gutter. En tablet la sección usa 56px
     mientras el resto del frame usa 36px. */
  --locations-pt:    160px;
  --locations-pb:    160px;
  --locations-side:   56px;
  --locations-gap:   100px;  /* entre la bajada y la lista de oficinas */
  --places-gap:       64px;  /* entre oficinas */
  --addr-w:          190px;  /* columna de la dirección, a la izquierda */
  --fs-city:          72px;  --lh-city: 56px;
  --fs-addr:          20px;  --lh-addr: 24px;
  /* La esfera es un círculo suelto (`stackPositioning: ABSOLUTE`) al 20% de
     opacidad, detrás del texto. x/y van respecto del contenido de la sección:
     en desktop entra desde la izquierda del texto, en tablet y mobile sangra
     fuera del frame. */
  --world-size:      582px;
  --world-x:         137px;  --world-y: 43px;
  --world-op:          0.2;
  /* Foto que aparece al pasar por cada oficina (frames 273:16060 y hermanos). */
  --photo-w:         260px;  --photo-h: 368px;

  --caso-hero-h:     663px;
  --caso-logo-h:      52px;
  /* /caso — el logo del hero es un PNG de 421x136 en el frame desktop. */
  --caso-logo-w:     421px;  --caso-logo-y:  140px;
  /* Las dos elipses del hero van como SVG exportado del frame, y el export
     trae el desborde del blur alrededor del círculo: el asset mide más que la
     elipse. Estas medidas son las de la caja del SVG, no las del círculo.
       · Ellipse 117 (naranja, entra desde arriba): d=2300 → caja 2558.
       · Ellipse 118 (oscura, sube desde abajo):    d=2823 → caja 3623.
     El `y` es el tope de esa caja respecto del hero; ambas van centradas. */
  --caso-glow-top-w:    2558px;  --caso-glow-top-y:    -2059px;
  --caso-glow-bottom-w: 3623px;  --caso-glow-bottom-y:      4px;
  /* La misma elipse reaparece entre la cita y La solución, bajando desde
     arriba (d=2823 → caja 3623). `band` es el hueco que el frame deja entre
     las dos secciones y el arco cae a 71px de su inicio, o sea que el centro
     del círculo queda 1341px más arriba: ése es el tope del recorte. `bleed`
     es lo que el halo sigue bajando después de la franja. */
  --caso-glow-sol-band:  370px;
  --caso-glow-sol-clip: -1341px;  --caso-glow-sol-bleed: 101px;
  --caso-glow-sol-w:    3623px;
  /* Ellipse 124: la mancha difuminada de Claves. `w`/`h` son la caja del SVG
     (incluye el desborde del blur), `x` el corrimiento respecto del centro de
     la sección y `y` cuánto pasa del pie. */
  --caso-halo-w:    1241px;  --caso-halo-h:  1316px;
  --caso-halo-x:     -29px;  --caso-halo-y:   -39px;
  --caso-banda-h:    406px;  /* banda de imagen entre Acerca y El desafío */
  --caso-arrow:       40px;  /* flechas de la ficha y de funcionalidades */
  --fs-reto:          18px;  --lh-reto:  22px;  /* texto de las cards de reto */
  --fs-func:          56px;  --lh-func:  56px;  /* filas de funcionalidades */
  --fs-destacado:     44px;  --lh-destacado: 46px;
  --sp-8:              8px;
  --sp-20:            20px;
  --sp-46:            46px;
  --fs-marca-title:   72px;
  --fs-marca-h2:      44px;
  --case-gap:     131px;  /* separación real entre cards de caso */
  /* Stack sticky de Casos. El paso coincide con --case-gap: es el mismo dato
     visto de dos formas (837 + gapContenedor − altoCard). */
  --case-stick-top:   calc(var(--navbar-h) + 24px);
  --case-stick-step:  131px;
  /* Encabezado de Casos: bloque fijo de 837px con el halo adentro. */
  --cases-head-h:     837px;
  --cases-head-pt:    120px;
  --cases-head-pb:    100px;
  --halo-size:        744px;
  --halo-top:          47px;
  /* Cuánto sube la lista sobre el encabezado. NO es el stackSpacing de -547:
     ése es entre contenedores con 100px de padding que acá no se replican.
     Sale de medir dónde arranca la 1ª card respecto del inicio de Cases
     (505/462/402) menos los 837 del encabezado. */
  --cases-overlap:    332px;
  --closing-h:    495px;  /* alto de la imagen de cierre */

  /* --- Movimiento -------------------------------------------------------
     Del prototipo del .fig. Es unánime: todas las transiciones del archivo
     son OUT_CUBIC a 0.3s, y OUT_CUBIC en Figma es exactamente esta bezier.
     Los hovers van a opacidad 0.6 (links) y 0.4 (secundarios); los botones
     escalan a 1.1. */
  --ease:          cubic-bezier(0.215, 0.61, 0.355, 1);
  --dur:           0.3s;
  --hover-op:      0.6;
  --hover-op-soft: 0.4;
  --hover-scale:   1.1;

  /* --- Radios ----------------------------------------------------------- */
  --r-button:  24px;
  --r-card:    24px;
  --r-media:   36px;
  --r-section: 100px;   /* esquinas superiores de Soluciones */
  --r-pill:    99999px; /* cards circulares */
}

/* --------------------------------------------------------------------------
   Breakpoints
   Los tres frames vienen del export: desktop 1440px, tablet 800px, mobile 375px.
   Todos los valores de acá salen de esos frames — ninguno está estimado.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  :root {
    --fs-header:      120px;  --lh-header:      96px;  /* Header/Tablet */
    --fs-section:      80px;  --lh-section:     64px;  /* Subheader/Tablet */
    --fs-subheader:    80px;  --lh-subheader:   64px;  /* Subheader/Tablet */
    --fs-solutions:    44px;  --lh-solutions:   40px;
    --fs-subtitle:     28px;  --lh-subtitle:    24px;  /* Subtittle/Tablet */
    --fs-paragraph-l:  34px;  --lh-paragraph-l: 36px;  /* Paragraph L/Tablet */
    --fs-paragraph-m:  26px;  --lh-paragraph-m: 28px;  /* Paragraph M/Tablet */
    --fs-paragraph-xs: 18px;  --lh-paragraph-xs: 22px; /* Paragraph XS/Tablet */
    --gutter:          36px;
    --navbar-h:        82px;
    --footer-logo-h:  113px;
    --header-h:       837px;
    --r-section:       80px;
    /* Las 3 entran en una fila: 3×260 − 2×26 = 728, justo el ancho útil. */
    --card-size:      260px;
    --case-gap:        73px;
    --case-stick-step:  73px;
    --cases-head-pt:   100px;
    --halo-size:       593px;
    --halo-top:        122px;
    --cases-overlap:   375px;
    --closing-h:      275px;
    --logo-scale:     0.821;
    --marquee-dur:      31s;
    --quote-w:        369px;
    --quote-h:        270px;
    --quotes-dur:      45s;
    --title-pt:        36px;
    --case-row-gap:    64px;
    --closing-pt:     100px;
    --closing-indent:  155px;
    --sol-header-pt:   96px;  --sol-header-pb: 100px;
    --fs-sol-title:    64px;
    --fs-sol-lead:     20px;
    --fs-sol-unit:     19px;
    --fs-sol-closing:  44px;
    --sol-unit-gap:    56px;
    --sol-logo-h:      52px;
    --sol-media-h:    340px;
    --sol-closing-pt: 100px;  --sol-closing-gap:  56px;
    --nos-hero-h:     620px;
    --adn-overlap:     80px;
    --contacto-pt:    164px;
    --contacto-gap:    86px;
    --fs-contacto:     80px;  --lh-contacto: 64px;
    --fs-field:        18px;  --lh-field: 22px;
    --msg-h:          122px;
    --locations-pb:   100px;
    --world-x:       -179px;  --world-y: -107px;
    --caso-hero-h:    444px;
    --caso-logo-h:     44px;
    --caso-logo-w:    234px;  --caso-logo-y:  148px;
    /* Frame tablet: Ellipse 117 y=-1112 d=1388; Ellipse 118 y=312 d=1388. */
    --caso-glow-top-w:    1543px;  --caso-glow-top-y:    -1190px;
    --caso-glow-bottom-w: 1781px;  --caso-glow-bottom-y:    114px;
    /* Frame tablet: la elipse intermedia es de 1014, arco a 130 de la franja. */
    --caso-glow-sol-band:  264px;
    --caso-glow-sol-clip: -377px;  --caso-glow-sol-bleed:  10px;
    --caso-glow-sol-w:    1301px;
    --caso-halo-w:     954px;  --caso-halo-h:  1011px;
    --caso-halo-x:    -195px;  --caso-halo-y:  -266px;
    --caso-banda-h:   226px;
    --caso-arrow:      40px;
    --fs-func:         36px;  --lh-func: 40px;
    --fs-destacado:    34px;  --lh-destacado: 38px;
    --fs-marca-title:  52px;
    --fs-marca-h2:     34px;
  }
}

@media (max-width: 640px) {
  :root {
    --fs-header:       96px;  --lh-header:      72px;  /* Tagline */
    --fs-section:      40px;  --lh-section:     38px;  /* Section headline */
    --fs-subheader:    68px;  --lh-subheader:   56px;  /* Subheader/Mobile — KPI */
    --fs-solutions:    40px;  --lh-solutions:   36px;  /* Solution tagline */
    --fs-subtitle:     26px;  --lh-subtitle:    22px;  /* Subtittle/Mobile */
    --fs-paragraph-l:  24px;  --lh-paragraph-l: 26px;  /* no hay Paragraph L/Mobile:
                                                          el diseño usa Paragraph M/Mobile */
    --fs-paragraph-m:  24px;  --lh-paragraph-m: 26px;  /* Paragraph M/Mobile */
    --fs-paragraph-xs: 14px;  --lh-paragraph-xs: 18px; /* Paragraph XS/Mobile */
    --gutter:          24px;
    --navbar-h:        84px;
    --footer-logo-h:   70px;
    --header-h:       837px;
    --r-section:       64px;
    --card-size:      260px;
    --case-gap:       319px;
    --cases-head-pt:    56px;
    --cases-head-pb:    56px;
    --halo-size:       575px;
    --halo-top:        132px;
    --cases-overlap:   435px;
    --closing-h:      206px;
    --logo-scale:     0.481;
    --marquee-dur:      18s;
    --quotes-pt:      140px;
    --quote-w:        328px;
    --quote-h:        240px;
    --quotes-dur:      40s;
    --fs-quote:        20px;  --lh-quote: 24px;
    --title-pt:        32px;
    --case-row-gap:    64px;
    --closing-pt:     120px;
    --closing-indent:    0px;
    --sol-header-pt:   72px;  --sol-header-pb: 64px;
    --fs-sol-title:    38px;
    --fs-sol-lead:     18px;
    --fs-sol-unit:     17px;
    --fs-sol-item:     16px;
    --fs-sol-closing:  32px;
    --sol-unit-gap:    36px;
    --sol-logo-h:      42px;
    --sol-media-h:    260px;
    --sol-closing-pt:  80px;  --sol-closing-gap:  44px;
    --nos-hero-h:     440px;
    --adn-overlap:     56px;
    --contacto-pt:    164px;
    --contacto-gap:    64px;
    --fs-contacto:     60px;  --lh-contacto: 56px;
    --form-gap:        20px;  /* en mobile todo el form va a 20px */
    --field-h-sm:      64px;
    --msg-h:          142px;  --msg-pt: 20px;
    --locations-pt:    64px;
    --locations-pb:    80px;
    --locations-side:  24px;
    --locations-gap:   64px;
    --places-gap:      32px;
    --fs-city:         48px;  --lh-city: 44px;
    --fs-addr:         14px;  --lh-addr: 18px;
    --world-size:     371px;
    --world-x:       -147px;  --world-y: -21px;
    --caso-hero-h:    318px;
    --caso-logo-h:     36px;
    --caso-logo-w:    141px;  --caso-logo-y:  144px;
    /* Frame mobile: Ellipse 117 y=-884 d=1103; Ellipse 118 y=251 d=650. */
    --caso-glow-top-w:    1227px;  --caso-glow-top-y:    -946px;
    --caso-glow-bottom-w:  834px;  --caso-glow-bottom-y:  158px;
    /* Frame mobile: la elipse intermedia es de 511, arco a 118 de la franja. */
    --caso-glow-sol-band:  196px;
    --caso-glow-sol-clip: -138px;  --caso-glow-sol-bleed:   0px;
    --caso-glow-sol-w:     656px;
    --caso-halo-w:     555px;  --caso-halo-h:   589px;
    --caso-halo-x:    -127px;  --caso-halo-y:   -37px;
    --caso-banda-h:   151px;
    --caso-arrow:      36px;
    --fs-func:         24px;  --lh-func: 28px;
    --fs-destacado:    26px;  --lh-destacado: 30px;
    --fs-marca-title:  34px;
    --fs-marca-h2:     26px;
  }
}