/* ==========================================================================
   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%;
}

: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 */
  --c-border:      #C4C6C5;  /* borde de las cards circulares */
  --c-border-hi:   #FFAD82;  /* borde destacado (card ThinkCloud) */
  --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 sobre la imagen de fondo */
  --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-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:    320px;  /* 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 */
  --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:      17px;
  --fs-sol-tag:       14px;
  --fs-sol-closing:   44px;
  --sol-unit-gap:    100px;
  --sol-logo-h:       64px;
  --sol-media-w:     420px;

  /* --- /nosotros, /hablemos, /caso -------------------------------------- */
  --nos-hero-h:      883px;  /* alto del frame `Hero image` */
  --adn-overlap:     100px;  /* el bloque ADN sube sobre la foto */
  --contacto-pt:     200px;
  --locations-pt:    160px;
  --caso-hero-h:     663px;  --caso-hero-pb: 343px;
  --caso-logo-h:      52px;
  /* /caso — el logo del hero es un PNG de 421x136 en el frame desktop. */
  --caso-logo-w:     421px;
  /* Las dos elipses del hero, con el diámetro y el `top` que traen en el frame.
     La naranja (Ellipse 117) entra desde arriba y la oscura (Ellipse 118) sube
     desde abajo; ambas se salen del frame a los costados. */
  --caso-glow-bottom-w: 2820px;  --caso-glow-bottom-y:    404px;
  --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;
    --card-size:      320px;  /* en tablet la card NO se achica: grilla 2x2 */
    --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:  36px;
    --sol-unit-gap:    56px;
    --sol-logo-h:      52px;
    --sol-media-w:    340px;
    --nos-hero-h:     620px;
    --adn-overlap:     80px;
    --contacto-pt:    120px;
    --locations-pt:   100px;
    --caso-hero-h:    444px;  --caso-hero-pb: 156px;
    --caso-logo-h:     44px;
    --caso-logo-w:    234px;
    /* Frame tablet: Ellipse 117 y=-1112 d=1387; Ellipse 118 y=312 d=1388. */
    --caso-glow-bottom-w: 1388px;  --caso-glow-bottom-y:    312px;
    --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:  28px;
    --sol-unit-gap:    36px;
    --sol-logo-h:      42px;
    --sol-media-w:    260px;
    --nos-hero-h:     440px;
    --adn-overlap:     56px;
    --contacto-pt:     80px;
    --locations-pt:    72px;
    --caso-hero-h:    318px;  --caso-hero-pb:  68px;
    --caso-logo-h:     36px;
    --caso-logo-w:    141px;
    /* Frame mobile: Ellipse 117 y=-884 d=1103; Ellipse 118 y=251 d=648. */
    --caso-glow-bottom-w:  648px;  --caso-glow-bottom-y:  251px;
    --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;
  }
}