/* style.css */
/*
Theme Name: TrialTrack
Theme URI: https://trialtrack.example.com
Author: TrialTrack Team
Author URI: https://trialtrack.example.com
Description: Conversion-focused theme for a clinical trial management platform (CTMS). Single-page landing plus full editorial templates, with SEO, structured data, consent-aware analytics and campaign attribution built in.
Version: 3.2.0
Tags: one-column, custom-logo, custom-colors, editor-style, translation-ready, block-styles, wide-blocks, accessibility-ready
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: trialtrack

TrialTrack is a purpose-built WordPress theme designed for showcasing clinical trial management platforms with a focus on conversion and demo requests.
*/

/* tokens.css */
/* ==========================================================================
   TrialTrack — Design Tokens
   Única fuente de verdad para color, tipografía, espaciado y movimiento.
   No añadir valores "sueltos" en otras hojas: usar siempre estas variables.
   ========================================================================== */

:root {
    /* ---------------------------------------------------------------
       MARCA — Deep navy / Dark teal / Turquoise
       --------------------------------------------------------------- */
    --tt-navy-900:        #08121F;
    --tt-navy-800:        #0B1826;
    --tt-navy:            #0F1F33;   /* Deep navy — color base de marca */
    --tt-navy-700:        #16293F;
    --tt-navy-600:        #22384F;

    --tt-teal-900:        #063E3A;
    --tt-teal-800:        #0B5550;   /* Dark teal */
    --tt-teal-700:        #07766D;
    --tt-teal:            #07998D;   /* Secondary teal */
    --tt-teal-400:        #23B5A6;
    --tt-turquoise:       #00CDBB;   /* Turquoise — acento principal */
    --tt-turquoise-300:   #5FDDD1;
    --tt-turquoise-100:   #C7F2ED;
    --tt-turquoise-50:    #E8F8F6;

    /* ---------------------------------------------------------------
       NEUTROS Y SUPERFICIES
       --------------------------------------------------------------- */
    --tt-white:           #FFFFFF;
    --tt-bg:              #F7F9FC;   /* Fondo claro de página */
    --tt-surface:         #FFFFFF;
    --tt-surface-alt:     #F2F6FA;

    --tt-border:          #E4EAF2;
    --tt-border-soft:     #EEF2F7;
    --tt-border-strong:   #D2DCE8;

    /* ---------------------------------------------------------------
       TEXTO
       --------------------------------------------------------------- */
    --tt-text:            #0F1F33;   /* Azul marino oscuro */
    --tt-text-strong:     #08121F;
    --tt-text-muted:      #55687D;
    --tt-text-soft:       #8293A6;

    /* Sobre fondos oscuros */
    --tt-on-dark:         #FFFFFF;
    --tt-on-dark-muted:   rgba(255, 255, 255, 0.74);
    --tt-on-dark-soft:    rgba(255, 255, 255, 0.52);
    --tt-on-dark-line:    rgba(255, 255, 255, 0.12);

    /* ---------------------------------------------------------------
       ESTADOS — paleta pastel heredada de la aplicación
       --------------------------------------------------------------- */
    --tt-mint:            #17B98F;
    --tt-mint-bg:         #E6F8F1;
    --tt-blue:            #3B82F6;
    --tt-blue-bg:         #E9F1FE;
    --tt-violet:          #8B5CF6;
    --tt-violet-bg:       #F1ECFE;
    --tt-orange:          #F0921F;
    --tt-orange-bg:       #FEF2E1;
    --tt-red:             #E9564B;
    --tt-red-bg:          #FDECEA;

    /* ---------------------------------------------------------------
       DEGRADADOS
       --------------------------------------------------------------- */
    --tt-gradient-header:     linear-gradient(102deg, #0F1F33 0%, #0E3340 46%, #0B5550 100%);
    --tt-gradient-dark:       linear-gradient(150deg, #0F1F33 0%, #102B3D 55%, #0B5550 100%);
    --tt-gradient-accent:     linear-gradient(120deg, #07998D 0%, #00CDBB 100%);
    --tt-gradient-hairline:   linear-gradient(90deg,
                                  rgba(0, 205, 187, 0) 0%,
                                  rgba(0, 205, 187, 0.38) 50%,
                                  rgba(0, 205, 187, 0) 100%);

    /* ---------------------------------------------------------------
       TIPOGRAFÍA — sans-serif enterprise / healthcare
       --------------------------------------------------------------- */
    --tt-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
    --tt-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --tt-fs-eyebrow:  0.75rem;                                  /* 12px */
    --tt-fs-xs:       0.8125rem;                                /* 13px */
    --tt-fs-sm:       0.875rem;                                 /* 14px */
    --tt-fs-base:     1rem;                                     /* 16px */
    --tt-fs-lg:       1.0625rem;                                /* 17px */
    --tt-fs-xl:       clamp(1.125rem, 0.35vw + 1.05rem, 1.25rem);
    --tt-fs-h4:       clamp(1.0625rem, 0.4vw + 0.98rem, 1.1875rem);
    --tt-fs-h3:       clamp(1.25rem, 0.8vw + 1.05rem, 1.5rem);
    --tt-fs-h2:       clamp(1.875rem, 2.2vw + 1.15rem, 2.75rem);
    --tt-fs-h1:       clamp(2.25rem, 3.1vw + 1.35rem, 3.5rem);

    --tt-lh-tight:    1.12;
    --tt-lh-snug:     1.3;
    --tt-lh-base:     1.6;

    --tt-ls-tight:    -0.022em;
    --tt-ls-eyebrow:  0.14em;

    /* ---------------------------------------------------------------
       LAYOUT
       --------------------------------------------------------------- */
    --tt-container:        1240px;
    --tt-container-pad:    2rem;
    --tt-header-h:         88px;
    --tt-header-h-sticky:  68px;
    --tt-section-y:        clamp(64px, 7vw, 112px);

    /* Espaciado */
    --tt-sp-1: 4px;
    --tt-sp-2: 8px;
    --tt-sp-3: 12px;
    --tt-sp-4: 16px;
    --tt-sp-5: 24px;
    --tt-sp-6: 32px;
    --tt-sp-7: 48px;
    --tt-sp-8: 64px;

    /* Radios */
    --tt-radius-sm:   6px;
    --tt-radius:      10px;
    --tt-radius-md:   14px;
    --tt-radius-lg:   20px;
    --tt-radius-xl:   28px;
    --tt-radius-full: 999px;

    /* ---------------------------------------------------------------
       SOMBRAS — discretas, de producto, nunca dramáticas
       --------------------------------------------------------------- */
    --tt-shadow-xs:   0 1px 2px rgba(15, 31, 51, 0.05);
    --tt-shadow-sm:   0 1px 3px rgba(15, 31, 51, 0.06),
                      0 1px 2px rgba(15, 31, 51, 0.04);
    --tt-shadow-md:   0 6px 16px -6px rgba(15, 31, 51, 0.12),
                      0 2px 6px -2px rgba(15, 31, 51, 0.06);
    --tt-shadow-lg:   0 18px 38px -14px rgba(15, 31, 51, 0.18),
                      0 6px 14px -8px rgba(15, 31, 51, 0.08);
    --tt-shadow-accent: 0 10px 24px -10px rgba(7, 153, 141, 0.55);
    --tt-shadow-header: 0 10px 30px -18px rgba(8, 18, 31, 0.85);

    /* ---------------------------------------------------------------
       MOVIMIENTO — vivo pero serio
       --------------------------------------------------------------- */
    --tt-ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
    --tt-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --tt-dur-fast:    160ms;
    --tt-dur:         220ms;
    --tt-dur-slow:    420ms;
    --tt-dur-reveal:  680ms;
    --tt-reveal-y:    20px;
    --tt-reveal-step: 90ms;   /* stagger entre elementos */

    /* ---------------------------------------------------------------
       FORMULARIOS — campo, foco, error y acierto
       El rojo y el verde de la paleta pastel son de fondo y de icono: sobre
       blanco no llegan al contraste que pide un texto pequeño, así que el
       texto de estado usa estas dos versiones oscurecidas.
       --------------------------------------------------------------- */
    --tt-field-bg:        #FFFFFF;
    --tt-field-border:    #D2DCE8;
    --tt-field-ring:      0 0 0 3px rgba(0, 205, 187, 0.18);
    --tt-error-text:      #C0392C;
    --tt-error-border:    #E9564B;
    --tt-error-bg:        #FFFBFA;
    --tt-success-text:    #0B5550;

    /* Z-index */
    --tt-z-header:    900;
    --tt-z-nav-panel: 890;
    --tt-z-skip:      1000;
}

/* base.css */
/* ==========================================================================
   TrialTrack — Base
   Reset, tipografía global, layout, primitivas de UI y microinteracciones.
   ========================================================================== */

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    /* Evita el scroll horizontal sin crear un contexto de scroll en <body>,
       que rompería el position:sticky del header. */
    overflow-x: hidden;
    scroll-behavior: smooth;
    /* Compensa el header fijo al saltar a un ancla */
    scroll-padding-top: calc(var(--tt-header-h-sticky) + 16px);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
    margin: 0;
}

ul, ol {
    padding: 0;
    list-style: none;
}

body {
    min-height: 100vh;
    font-family: var(--tt-font);
    font-size: var(--tt-fs-base);
    line-height: var(--tt-lh-base);
    color: var(--tt-text);
    background-color: var(--tt-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv02", "cv03", "cv04", "cv11";
    overflow-x: clip;
}

img, svg, video, canvas {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

/* ==========================================================================
   2. TIPOGRAFÍA
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--tt-text-strong);
    font-weight: 700;
    line-height: var(--tt-lh-tight);
    letter-spacing: var(--tt-ls-tight);
    text-wrap: balance;
}

h1 { font-size: var(--tt-fs-h1); }
h2 { font-size: var(--tt-fs-h2); }
h3 { font-size: var(--tt-fs-h3); line-height: var(--tt-lh-snug); }
h4 { font-size: var(--tt-fs-h4); line-height: var(--tt-lh-snug); }

p {
    color: var(--tt-text-muted);
    text-wrap: pretty;
}

strong { font-weight: 600; }

/* Números tabulares para métricas y datos */
.tt-tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* Eyebrow / label de sección */
.tt-eyebrow {
    display: block;
    font-size: var(--tt-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tt-ls-eyebrow);
    text-transform: uppercase;
    color: var(--tt-teal);
}

.tt-eyebrow--on-dark {
    color: var(--tt-turquoise);
}

/* Acento turquesa dentro de un titular */
.tt-accent {
    color: var(--tt-turquoise);
}

/* ==========================================================================
   3. ACCESIBILIDAD
   ========================================================================== */
.tt-skip-link {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: var(--tt-z-skip);
    padding: 10px 18px;
    border-radius: var(--tt-radius);
    background: var(--tt-white);
    color: var(--tt-navy);
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    box-shadow: var(--tt-shadow-md);
    transform: translateY(-160%);
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-skip-link:focus-visible {
    transform: translateY(0);
}

:focus-visible {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: 3px;
    border-radius: var(--tt-radius-sm);
}

.tt-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
.tt-container {
    width: 100%;
    max-width: var(--tt-container);
    margin-inline: auto;
    padding-inline: var(--tt-container-pad);
}

.tt-container--wide {
    max-width: 1440px;
}

.tt-site {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.tt-main {
    flex: 1 0 auto;
}

.tt-section {
    position: relative;
    padding-block: var(--tt-section-y);
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 16px);
}

.tt-section--light   { background-color: var(--tt-bg); }
.tt-section--white   { background-color: var(--tt-white); }
.tt-section--dark    { background: var(--tt-gradient-dark); color: var(--tt-on-dark); }
.tt-section--dark h1,
.tt-section--dark h2,
.tt-section--dark h3,
.tt-section--dark h4 { color: var(--tt-on-dark); }
.tt-section--dark p  { color: var(--tt-on-dark-muted); }

.tt-section__head {
    max-width: 720px;
    margin-bottom: clamp(36px, 4vw, 56px);
}

.tt-section__head--center {
    margin-inline: auto;
    text-align: center;
}

.tt-section__title {
    margin-top: var(--tt-sp-3);
}

.tt-section__lead {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-lg);
}

/* Línea divisoria fina con degradado (uso en fondos oscuros) */
.tt-hairline {
    height: 1px;
    border: 0;
    background: var(--tt-gradient-hairline);
}

/* ==========================================================================
   5. BOTONES
   ========================================================================== */
.tt-btn {
    --tt-btn-bg: transparent;
    --tt-btn-fg: var(--tt-text);
    --tt-btn-border: transparent;
    --tt-btn-shadow: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-sp-2);
    padding: 13px 22px;
    border: 1px solid var(--tt-btn-border);
    border-radius: var(--tt-radius);
    background: var(--tt-btn-bg);
    color: var(--tt-btn-fg);
    box-shadow: var(--tt-btn-shadow);
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition:
        transform var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease);
}

.tt-btn__arrow {
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-btn:hover {
    transform: translateY(-2px);
}

.tt-btn:hover .tt-btn__arrow {
    transform: translateX(3px);
}

.tt-btn:active {
    transform: translateY(0);
    transition-duration: var(--tt-dur-fast);
}

/* Primario — turquesa corporativo */
.tt-btn--primary {
    --tt-btn-bg: var(--tt-teal);
    --tt-btn-fg: var(--tt-white);
    --tt-btn-shadow: var(--tt-shadow-sm);
}

.tt-btn--primary:hover {
    --tt-btn-bg: #08A99B;
    --tt-btn-shadow: var(--tt-shadow-accent);
}

/* Secundario sobre fondo oscuro */
.tt-btn--ghost-dark {
    --tt-btn-fg: var(--tt-on-dark);
    --tt-btn-border: rgba(255, 255, 255, 0.28);
}

.tt-btn--ghost-dark:hover {
    --tt-btn-bg: rgba(255, 255, 255, 0.08);
    --tt-btn-border: rgba(255, 255, 255, 0.45);
    --tt-btn-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.8);
}

/* Secundario sobre fondo claro */
.tt-btn--ghost {
    --tt-btn-fg: var(--tt-text);
    --tt-btn-border: var(--tt-border-strong);
    --tt-btn-bg: var(--tt-white);
}

.tt-btn--ghost:hover {
    --tt-btn-border: var(--tt-teal);
    --tt-btn-fg: var(--tt-teal-800);
    --tt-btn-shadow: var(--tt-shadow-md);
}

.tt-btn--sm { padding: 10px 16px; font-size: var(--tt-fs-xs); }
.tt-btn--lg { padding: 15px 28px; font-size: var(--tt-fs-base); }
.tt-btn--block { width: 100%; }

/* ==========================================================================
   6. CARDS
   ========================================================================== */
.tt-card {
    position: relative;
    padding: var(--tt-sp-5);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-xs);
    transition:
        transform var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease);
}

.tt-card--interactive:hover {
    transform: translateY(-3px);
    border-color: var(--tt-border-strong);
    box-shadow: var(--tt-shadow-lg);
}

.tt-card--dark {
    border-color: var(--tt-on-dark-line);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
}

.tt-card--dark.tt-card--interactive:hover {
    border-color: rgba(0, 205, 187, 0.35);
    background: rgba(255, 255, 255, 0.07);
}

/* Píldoras de estado — paleta pastel de la aplicación */
.tt-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--tt-sp-2);
    padding: 5px 12px;
    border-radius: var(--tt-radius-full);
    font-size: var(--tt-fs-xs);
    font-weight: 600;
    line-height: 1.4;
}

.tt-pill--mint   { background: var(--tt-mint-bg);   color: var(--tt-mint); }
.tt-pill--blue   { background: var(--tt-blue-bg);   color: var(--tt-blue); }
.tt-pill--violet { background: var(--tt-violet-bg); color: var(--tt-violet); }
.tt-pill--orange { background: var(--tt-orange-bg); color: var(--tt-orange); }
.tt-pill--red    { background: var(--tt-red-bg);    color: var(--tt-red); }

/* Distintivo Premium — clasificación del módulo, no una llamada a mejorar

   Una sola pieza para toda la portada: mismo texto, mismo tamaño y mismo color
   en el diagrama del ecosistema y en las fichas de "Explore the platform". Las
   hojas de sección solo deciden dónde se coloca (`.tt-premium--*`).

   Deliberadamente secundario: turquesa muy claro de la propia marca, sin
   dorados, iconos ni brillos. Dice a qué oferta pertenece el módulo; no dice
   que esté cerrado, y por eso no baja el peso visual de nada. */
.tt-premium {
    /* Los dos juegos de color del distintivo, en reposo y encendido. Viven
       aquí los dos: una sección que quiera subir el contraste al señalar su
       módulo cambia de juego, sin repintar nada. */
    --tt-premium-border: rgba(0, 205, 187, 0.22);
    --tt-premium-bg:     var(--tt-turquoise-50);
    --tt-premium-text:   var(--tt-teal-800);

    --tt-premium-border-lit: rgba(0, 205, 187, 0.4);
    --tt-premium-bg-lit:     var(--tt-turquoise-100);
    --tt-premium-text-lit:   var(--tt-teal-900);

    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--tt-premium-border);
    border-radius: var(--tt-radius-full);
    background: var(--tt-premium-bg);
    color: var(--tt-premium-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.09em;
    line-height: 1.4;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        background-color var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease);
}

/* Encendido: el distintivo sube de contraste con el módulo al que pertenece.
   No tiene movimiento ni tiempos propios; acompaña, nunca reclama atención por
   su cuenta. Quién está señalado solo lo sabe la sección, así que el interruptor
   lo acciona su hoja desde el hover del módulo, siempre con este mismo cambio:

       .selector-del-modulo:hover .tt-premium {
           --tt-premium-border: var(--tt-premium-border-lit);
           --tt-premium-bg:     var(--tt-premium-bg-lit);
           --tt-premium-text:   var(--tt-premium-text-lit);
       }
*/

/* ==========================================================================
   7. MICROINTERACCIONES — reveals al hacer scroll
   Solo se ocultan si hay JS activo (evita contenido invisible sin JS).
   ========================================================================== */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(var(--tt-reveal-y));
    transition:
        opacity var(--tt-dur-reveal) var(--tt-ease-out),
        transform var(--tt-dur-reveal) var(--tt-ease-out);
    transition-delay: var(--tt-reveal-delay, 0ms);
    will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Variantes de entrada */
.js [data-reveal="left"]  { transform: translateX(calc(var(--tt-reveal-y) * -1)); }
.js [data-reveal="right"] { transform: translateX(var(--tt-reveal-y)); }
.js [data-reveal="fade"]  { transform: none; }

/* ==========================================================================
   8. RESPONSIVE — base
   ========================================================================== */
@media (max-width: 1024px) {
    :root {
        --tt-container-pad: 1.75rem;
        --tt-header-h: 74px;
        --tt-header-h-sticky: 62px;
    }
}

@media (max-width: 767px) {
    :root {
        --tt-container-pad: 1.25rem;
        --tt-header-h: 66px;
        --tt-header-h-sticky: 58px;
        --tt-reveal-y: 14px;
    }

    .tt-btn { width: 100%; }
    .tt-btn--auto { width: auto; }
}

/* Bloquea el scroll con el menú móvil abierto */
body.tt-nav-open {
    overflow: hidden;
}

/* ==========================================================================
   9. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js [data-reveal] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================================
   10. ISOTIPO DE MARCA
   El archivo de marca es cuadrado; la identidad lo presenta como disco.
   Regla única: header, footer y diagramas la comparten.
   ========================================================================== */
.tt-brand-mark {
    border-radius: 50%;
}

/* header.css */
/* ==========================================================================
   TrialTrack — Header
   Sticky, degradado navy → teal, navegación por anclas y menú móvil.
   ========================================================================== */

.tt-header {
    position: sticky;
    top: 0;
    z-index: var(--tt-z-header);
    background: var(--tt-gradient-header);
    color: var(--tt-on-dark);
    transition:
        background-color var(--tt-dur-slow) var(--tt-ease),
        box-shadow var(--tt-dur-slow) var(--tt-ease),
        backdrop-filter var(--tt-dur-slow) var(--tt-ease);
}

/* Filo inferior apenas visible */
.tt-header::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity var(--tt-dur-slow) var(--tt-ease);
}

body.admin-bar .tt-header {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* --------------------------------------------------------------------------
   Estado tras hacer scroll: algo más bajo, con blur muy sutil
   -------------------------------------------------------------------------- */
.tt-header.is-scrolled {
    background:
        linear-gradient(104deg,
            rgba(15, 31, 51, 0.92) 0%,
            rgba(14, 51, 64, 0.92) 46%,
            rgba(11, 85, 80, 0.92) 100%);
    box-shadow: var(--tt-shadow-header);
    -webkit-backdrop-filter: saturate(150%) blur(10px);
    backdrop-filter: saturate(150%) blur(10px);
}

.tt-header.is-scrolled::after {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   Estructura interna
   -------------------------------------------------------------------------- */
.tt-header__inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--tt-sp-5);
    min-height: var(--tt-header-h);
    transition: min-height var(--tt-dur-slow) var(--tt-ease);
}

.tt-header.is-scrolled .tt-header__inner {
    min-height: var(--tt-header-h-sticky);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */
.tt-logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    transition: opacity var(--tt-dur) var(--tt-ease);
}

.tt-logo:hover {
    opacity: 0.88;
}

.tt-logo__mark {
    flex: none;
    width: 42px;
    height: 42px;
    transition: transform var(--tt-dur-slow) var(--tt-ease);
}

.tt-header.is-scrolled .tt-logo__mark {
    width: 36px;
    height: 36px;
}

.tt-logo__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1;
}

.tt-logo__name {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--tt-white);
}

.tt-logo__name b {
    font-weight: 700;
}

.tt-logo__sub {
    font-size: 0.5625rem;
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--tt-on-dark-soft);
}

.tt-logo__img {
    max-height: 40px;
    width: auto;
    transition: max-height var(--tt-dur-slow) var(--tt-ease);
}

.tt-header.is-scrolled .tt-logo__img {
    max-height: 34px;
}

/* --------------------------------------------------------------------------
   Navegación principal (anclas)
   -------------------------------------------------------------------------- */
.tt-nav {
    justify-self: center;
}

.tt-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(4px, 1.4vw, 20px);
}

.tt-nav__link {
    position: relative;
    display: block;
    padding: 8px 10px;
    font-size: var(--tt-fs-sm);
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--tt-on-dark-muted);
    transition: color var(--tt-dur) var(--tt-ease);
}

/* Subrayado muy fino, animado */
.tt-nav__link::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 2px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--tt-turquoise);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-nav__link:hover,
.tt-nav__link:focus-visible {
    color: var(--tt-white);
}

.tt-nav__link:hover::after,
.tt-nav__link:focus-visible::after {
    transform: scaleX(1);
}

.tt-nav__link.is-active {
    color: var(--tt-white);
}

.tt-nav__link.is-active::after {
    transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   Acciones (idioma / CTA)
   -------------------------------------------------------------------------- */
.tt-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(8px, 1.2vw, 18px);
}

/* --- Selector de idioma (desplegable) ---
   El botón muestra el idioma activo; el menú lista los disponibles. Cada opción
   es un enlace real a ?lang=xx, así que funciona sin JavaScript: sin JS el menú
   se abre al enfocar el botón (:focus-within), y con JS al pulsarlo. */
.tt-lang {
    position: relative;
}

.tt-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border-radius: var(--tt-radius-sm);
    font-family: inherit;
    font-size: var(--tt-fs-sm);
    font-weight: 500;
    color: var(--tt-on-dark-muted);
    cursor: pointer;
    transition:
        color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease);
}

.tt-lang__toggle:hover,
.tt-lang__toggle[aria-expanded="true"] {
    color: var(--tt-white);
    background: rgba(255, 255, 255, 0.07);
}

.tt-lang__chevron {
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-lang__toggle[aria-expanded="true"] .tt-lang__chevron {
    transform: rotate(180deg);
}

.tt-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 20;
    min-width: 152px;
    padding: 6px;
    list-style: none;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--tt-radius-sm);
    background: var(--tt-navy-700);
    box-shadow: 0 18px 40px rgba(6, 15, 26, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        transform var(--tt-dur) var(--tt-ease),
        visibility var(--tt-dur) var(--tt-ease);
}

.tt-lang.is-open .tt-lang__menu,
html:not(.js) .tt-lang:focus-within .tt-lang__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tt-lang__option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: var(--tt-fs-sm);
    font-weight: 500;
    color: var(--tt-on-dark-muted);
    transition:
        color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease);
}

.tt-lang__option:hover,
.tt-lang__option:focus-visible {
    color: var(--tt-white);
    background: rgba(255, 255, 255, 0.08);
}

.tt-lang__option[aria-current="true"] {
    color: var(--tt-white);
}

.tt-lang__tag {
    font-size: var(--tt-fs-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--tt-turquoise);
}

/* --- Variante en línea (menú móvil y footer) --- */
.tt-lang--inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--tt-on-dark-soft);
}

.tt-lang--inline .tt-lang__list {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    list-style: none;
}

.tt-lang--inline .tt-lang__sep {
    color: rgba(255, 255, 255, 0.22);
}

.tt-lang--inline .tt-lang__option {
    padding: 0;
    border-radius: 0;
    font-size: var(--tt-fs-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--tt-on-dark-soft);
    background: none;
}

.tt-lang--inline .tt-lang__option:hover,
.tt-lang--inline .tt-lang__option:focus-visible {
    color: var(--tt-turquoise);
    background: none;
}

.tt-lang--inline .tt-lang__option[aria-current="true"] {
    color: var(--tt-white);
}

.tt-header__cta {
    padding: 11px 20px;
}

/* --------------------------------------------------------------------------
   Botón hamburguesa (solo móvil / tablet estrecha)
   -------------------------------------------------------------------------- */
.tt-burger {
    display: none;
    position: relative;
    width: 42px;
    height: 42px;
    border-radius: var(--tt-radius-sm);
    transition: background-color var(--tt-dur) var(--tt-ease);
}

.tt-burger:hover {
    background: rgba(255, 255, 255, 0.08);
}

.tt-burger__bar {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 1.5px;
    border-radius: 2px;
    background: var(--tt-white);
    transition:
        transform var(--tt-dur) var(--tt-ease),
        opacity var(--tt-dur-fast) var(--tt-ease);
}

.tt-burger__bar:nth-child(1) { top: 15px; }
.tt-burger__bar:nth-child(2) { top: 20.5px; }
.tt-burger__bar:nth-child(3) { top: 26px; }

.tt-burger[aria-expanded="true"] .tt-burger__bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
}

.tt-burger[aria-expanded="true"] .tt-burger__bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0.4);
}

.tt-burger[aria-expanded="true"] .tt-burger__bar:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Panel de navegación móvil
   -------------------------------------------------------------------------- */
.tt-mobile-nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    z-index: var(--tt-z-nav-panel);
    max-height: calc(100vh - var(--tt-header-h));
    overflow-y: auto;
    padding: var(--tt-sp-5) var(--tt-container-pad) var(--tt-sp-6);
    background: linear-gradient(160deg, #0F1F33 0%, #0D2739 60%, #0B4A47 100%);
    border-top: 1px solid var(--tt-on-dark-line);
    box-shadow: 0 24px 40px -20px rgba(8, 18, 31, 0.9);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        transform var(--tt-dur) var(--tt-ease),
        visibility 0s linear var(--tt-dur);
}

.tt-mobile-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.tt-mobile-nav__list {
    display: flex;
    flex-direction: column;
}

.tt-mobile-nav__link {
    display: block;
    padding: 14px 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    font-size: 1rem;
    font-weight: 500;
    color: var(--tt-on-dark-muted);
    transition:
        color var(--tt-dur) var(--tt-ease),
        padding-left var(--tt-dur) var(--tt-ease);
}

.tt-mobile-nav__link:hover,
.tt-mobile-nav__link.is-active {
    color: var(--tt-white);
    padding-left: 8px;
}

.tt-mobile-nav__link.is-active {
    box-shadow: inset 2px 0 0 var(--tt-turquoise);
}

.tt-mobile-nav__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--tt-sp-4);
    margin-top: var(--tt-sp-5);
}

.tt-mobile-nav__cta {
    margin-top: var(--tt-sp-5);
}

/* Entrada escalonada de los enlaces del menú móvil */
.tt-mobile-nav.is-open .tt-mobile-nav__item,
.tt-mobile-nav.is-open .tt-mobile-nav__foot,
.tt-mobile-nav.is-open .tt-mobile-nav__cta {
    animation: tt-mobile-in var(--tt-dur-slow) var(--tt-ease-out) both;
    animation-delay: calc(var(--tt-nav-index, 0) * 45ms + 60ms);
}

@keyframes tt-mobile-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

/* Tablet ancha: se reduce el espaciado manteniendo la jerarquía */
@media (max-width: 1180px) {
    .tt-nav__list { gap: 2px; }
    .tt-nav__link { padding-inline: 8px; }
    .tt-nav__link::after { left: 8px; right: 8px; }
    .tt-logo { gap: 9px; }
}

@media (max-width: 1060px) {
    /* Solo el botón: el menú desplegable conserva el nombre del idioma. */
    .tt-header__actions .tt-lang__code,
    .tt-header__actions .tt-lang__chevron { display: none; }
    .tt-header__actions .tt-lang__toggle { padding: 8px; }
}

/* Tablet / móvil: menú desplegable */
@media (max-width: 960px) {
    .tt-header__inner {
        grid-template-columns: auto auto;
        justify-content: space-between;
    }

    .tt-nav,
    .tt-header__actions {
        display: none;
    }

    .tt-burger {
        display: block;
    }
}

@media (min-width: 961px) {
    .tt-mobile-nav {
        display: none;
    }
}

@media (max-width: 480px) {
    .tt-logo__name { font-size: 1.0625rem; }
    .tt-logo__sub  { letter-spacing: 0.2em; }
}

/* Isotipo servido como imagen (archivo de marca del tema o mediateca).
   El archivo de marca es cuadrado; la referencia lo presenta como disco.
   Para volver a un cuadrado redondeado: border-radius: 22%. */
img.tt-logo__mark {
    width: 42px;
    height: 42px;
    object-fit: cover;
    border-radius: 50%;
}

.tt-header.is-scrolled img.tt-logo__mark {
    width: 36px;
    height: 36px;
}

/* hero.css */
/* ==========================================================================
   TrialTrack — Hero
   Primera pantalla: copy a la izquierda, monitor con la captura real del
   Workload Dashboard a la derecha. Fondo continuo con el header.
   ========================================================================== */

.tt-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    min-height: calc(100vh - var(--tt-header-h));
    min-height: calc(100svh - var(--tt-header-h));
    padding-block: clamp(52px, 5.5vw, 88px) clamp(64px, 7vw, 108px);
    background-color: var(--tt-navy);
    color: var(--tt-on-dark);
}

/* --------------------------------------------------------------------------
   1. Fondo — navy profundo → dark teal, sin corte con el header
   -------------------------------------------------------------------------- */
.tt-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Base del degradado */
.tt-hero__bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 720px at 78% 10%, rgba(0, 205, 187, 0.13), transparent 62%),
        radial-gradient(900px 680px at 96% 104%, rgba(11, 85, 80, 0.60), transparent 64%),
        linear-gradient(158deg, #0F1F33 0%, #123044 50%, #0B5550 128%);
}

/* Costura con el header: repite su degradado horizontal y se disuelve */
.tt-hero__seam {
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: clamp(240px, 44%, 460px);
    background: var(--tt-gradient-header);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 100%);
            mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 100%);
}

/* Glow teal difuso tras el producto */
.tt-hero__glow {
    position: absolute;
    top: -8%;
    right: -14%;
    width: min(820px, 72vw);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 205, 187, 0.20) 0%,
        rgba(0, 205, 187, 0.07) 40%,
        transparent 70%);
    filter: blur(14px);
}

/* Curva ancha, apenas insinuada */
.tt-hero__curve {
    position: absolute;
    top: 8%;
    left: 46%;
    width: min(1500px, 130vw);
    aspect-ratio: 1;
    border: 1px solid rgba(0, 205, 187, 0.10);
    border-radius: 50%;
    -webkit-mask-image: linear-gradient(200deg, #000 8%, transparent 46%);
            mask-image: linear-gradient(200deg, #000 8%, transparent 46%);
}

/* Trama de puntos */
.tt-hero__dots {
    position: absolute;
    left: -32px;
    bottom: 8%;
    width: 300px;
    height: 240px;
    opacity: 0.45;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1px);
    background-size: 18px 18px;
    -webkit-mask-image: radial-gradient(closest-side, #000, transparent);
            mask-image: radial-gradient(closest-side, #000, transparent);
}

/* --------------------------------------------------------------------------
   2. Rejilla
   -------------------------------------------------------------------------- */
.tt-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    align-items: center;
    gap: clamp(26px, 2.4vw, 44px);
    width: 100%;
}

/* Desvanecido al hacer scroll (lo alimenta hero.js) */
.tt-hero__inner {
    opacity: var(--tt-hero-fade, 1);
    translate: 0 var(--tt-hero-shift, 0px);
}

/* --------------------------------------------------------------------------
   3. Copy
   -------------------------------------------------------------------------- */
.tt-hero__eyebrow {
    margin-bottom: var(--tt-sp-4);
}

.tt-hero__title {
    font-size: clamp(2.1rem, 3.1vw + 0.35rem, 2.85rem);
    line-height: 1.1;
    letter-spacing: -0.028em;
    color: var(--tt-white);
    text-wrap: initial;
}

.tt-hero__lead {
    max-width: 46ch;
    margin-top: clamp(16px, 1.6vw, 22px);
    font-size: var(--tt-fs-lg);
    line-height: 1.62;
    color: var(--tt-on-dark-muted);
}

.tt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: clamp(26px, 2.8vw, 36px);
}

.tt-hero__actions .tt-btn__arrow {
    display: inline-flex;
    margin-inline-start: -2px;
}

/* Indicadores de confianza — fila de iconos, sin tarjetas */
.tt-hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px clamp(11px, 1.2vw, 16px);
    margin-top: clamp(28px, 3vw, 40px);
}

.tt-hero__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: -0.002em;
    color: var(--tt-on-dark-muted);
}

.tt-hero__trust-item svg {
    flex: none;
    width: 14px;
    height: 14px;
    color: var(--tt-turquoise);
}

/* --------------------------------------------------------------------------
   4. Monitor
   -------------------------------------------------------------------------- */
.tt-hero__visual {
    position: relative;
    /* El producto se acerca al borde del viewport sin desalinear el texto,
       que sigue anclado al contenedor común con el header. */
    margin-inline-end: calc(-1 * var(--tt-hero-bleed, 0px));
}

@media (min-width: 1181px) {
    .tt-hero {
        --tt-hero-bleed: clamp(0px, (100vw - var(--tt-container)) / 2, 96px);
    }
}

.tt-monitor {
    position: relative;
    /* Perspectiva frontal muy ligera; el cursor solo desplaza, no rota. */
    transform: perspective(2400px) rotateY(-2.2deg) rotateX(1deg);
    transform-origin: 60% 50%;
}

/* Glow de apoyo detrás del marco */
.tt-monitor::before {
    content: "";
    position: absolute;
    inset: 8% 5% 2%;
    z-index: -1;
    border-radius: 40px;
    background: radial-gradient(58% 58% at 50% 46%, rgba(0, 205, 187, 0.30), transparent 72%);
    filter: blur(46px);
}

.tt-monitor__frame {
    position: relative;
    padding: 9px 9px 11px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;
    background: linear-gradient(158deg, #333B45 0%, #1B2027 44%, #0C1015 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.09),
        0 42px 84px -34px rgba(3, 10, 18, 0.90),
        0 18px 44px -26px rgba(3, 10, 18, 0.70);
}

/* Cámara: un punto, sin marca */
.tt-monitor__frame::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    transform: translateX(-50%);
}

.tt-monitor__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1733 / 908;
    border-radius: 8px;
    background: #F2F6FA;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.tt-monitor__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

/* Reflejo mínimo: da vidrio sin restar legibilidad a la captura */
.tt-monitor__screen::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(116deg,
        rgba(255, 255, 255, 0.10) 0%,
        rgba(255, 255, 255, 0.02) 26%,
        transparent 46%);
}

.tt-monitor__stand {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tt-monitor__neck {
    width: clamp(64px, 7%, 96px);
    height: 17px;
    background: linear-gradient(180deg, #262C34 0%, #171B21 100%);
    box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.05);
}

.tt-monitor__base {
    width: clamp(170px, 22%, 260px);
    height: 9px;
    border-radius: 0 0 10px 10px / 0 0 16px 16px;
    background: linear-gradient(180deg, #2C333C 0%, #11151A 100%);
    box-shadow: 0 20px 30px -20px rgba(3, 10, 18, 0.9);
}

/* --------------------------------------------------------------------------
   5. Fragmentos reales del producto
   -------------------------------------------------------------------------- */
.tt-hero__frag {
    position: absolute;
    z-index: 2;
}

.tt-hero__frag-inner {
    display: block;
    overflow: hidden;
    border-radius: 12px;
    background: var(--tt-white);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12),
        0 26px 52px -24px rgba(3, 10, 18, 0.85);
}

.tt-hero__frag img {
    width: 100%;
    height: auto;
}

.tt-hero__frag--alerts {
    left: -3%;
    bottom: 5%;
    width: clamp(168px, 25%, 208px);
}

.tt-hero__frag--week {
    right: 3%;
    top: -4%;
    width: clamp(220px, 33%, 274px);
}

/* --------------------------------------------------------------------------
   6. Entrada y profundidad
   -------------------------------------------------------------------------- */

/* El visual entra igual que el resto, más un escalado casi imperceptible. */
.js .tt-hero__visual[data-reveal] {
    transform: translateY(25px) scale(0.98);
}

.js .tt-hero__visual[data-reveal].is-revealed {
    transform: none;
}

/* Profundidad con el cursor: solo traslación (propiedad `translate`, para no
   pisar el `transform` de la perspectiva ni el de la animación de entrada). */
[data-parallax] {
    translate: var(--tt-par-x, 0px) var(--tt-par-y, 0px);
    transition: translate 320ms var(--tt-ease-out);
}

/* --------------------------------------------------------------------------
   7. Responsive
   -------------------------------------------------------------------------- */

/* Tablet ancha: dos columnas más ajustadas */
@media (max-width: 1180px) {
    .tt-hero__inner {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }

    .tt-hero__frag--alerts { left: -1%; bottom: 4%; }
    .tt-hero__frag--week   { right: 0; top: -6%; }
}

/* Tablet: se mantienen dos columnas mientras hay sitio */
@media (max-width: 1024px) {
    .tt-hero__lead {
        max-width: 42ch;
        font-size: var(--tt-fs-base);
    }

    /* Los fragmentos dejan de caber sin invadir el texto */
    .tt-hero__frag {
        display: none;
    }

    /* La columna de texto ya no da para una sola fila de indicadores */
    .tt-hero__trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px 16px;
    }
}

/* Móvil: texto primero, mockup debajo a casi todo el ancho */
@media (max-width: 860px) {
    .tt-hero {
        padding-block: clamp(40px, 7vw, 56px) clamp(56px, 10vw, 72px);
    }

    .tt-hero__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(36px, 8vw, 52px);
    }

    .tt-hero__title {
        font-size: clamp(2rem, 6.4vw + 0.6rem, 2.6rem);
    }

    .tt-hero__lead {
        max-width: 56ch;
    }

    .tt-hero__trust {
        display: flex;
    }

    .tt-monitor {
        transform: none;
    }

    .tt-monitor__frame {
        padding: 7px 7px 9px;
        border-radius: 13px;
    }

    .tt-hero__glow {
        top: 34%;
        right: -30%;
    }

    .tt-hero__dots {
        display: none;
    }
}

@media (max-width: 640px) {
    .tt-hero__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* Indicadores en 2 × 2 */
    .tt-hero__trust {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-parallax] {
        translate: none;
    }

    .tt-hero__inner {
        opacity: 1;
        translate: none;
    }
}

/* metrics.css */
/* ==========================================================================
   TrialTrack — Panel de métricas
   Un único panel blanco montado sobre el borde inferior del hero. Hace de
   bisagra entre el bloque oscuro y el fondo claro: por eso la sección no
   tiene fondo propio y se apoya en el del <body>.
   ========================================================================== */

.tt-metrics {
    position: relative;
    z-index: 2;
    /* Solape sobre el hero. Lo que sobresale por debajo cae ya en el fondo claro. */
    margin-top: calc(-1 * clamp(46px, 5.6vw, 86px));
    padding-bottom: clamp(60px, 7vw, 108px);
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 16px);
}

/* El SVG que solo aporta el degradado no debe ocupar sitio. */
.tt-metrics__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   1. Panel
   -------------------------------------------------------------------------- */
.tt-metrics__panel {
    position: relative;
    padding: clamp(26px, 2.6vw, 38px) clamp(18px, 2.4vw, 34px);
    border: 1px solid var(--tt-border-soft);
    border-radius: 18px;
    background: var(--tt-surface);
    box-shadow:
        0 26px 60px -30px rgba(15, 31, 51, 0.30),
        0 10px 24px -16px rgba(15, 31, 51, 0.14),
        var(--tt-shadow-xs);
}

/* Hairline turquesa en el borde superior: enlaza el panel con el hero. */
.tt-metrics__panel::before {
    content: "";
    position: absolute;
    inset-inline: clamp(28px, 8vw, 120px);
    top: -1px;
    height: 1px;
    background: var(--tt-gradient-hairline);
    opacity: 0.85;
}

/* --------------------------------------------------------------------------
   2. Rejilla y separadores
   Líneas verticales muy suaves, desvanecidas por los extremos: el panel se lee
   como una pieza dividida, no como cinco tarjetas juntas.
   -------------------------------------------------------------------------- */
.tt-metrics__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tt-metric {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    height: 100%;
    padding-inline: clamp(14px, 1.7vw, 26px);
}

.tt-metric::before {
    content: "";
    position: absolute;
    inset-block: 4%;
    left: 0;
    width: 1px;
    background: linear-gradient(
        180deg,
        transparent 0%,
        var(--tt-border) 26%,
        var(--tt-border) 74%,
        transparent 100%
    );
}

.tt-metric:nth-child(5n + 1)::before {
    display: none;
}

/* --------------------------------------------------------------------------
   3. Cifra y descripción
   -------------------------------------------------------------------------- */
.tt-metric__value {
    display: flex;
    align-items: baseline;
    color: var(--tt-text-strong);
    font-size: clamp(1.75rem, 1.15vw + 1.48rem, 2.375rem);
    font-weight: 700;
    letter-spacing: -0.032em;
    line-height: 1;
}

/* Prefijos y sufijos ("+", "%") en turquesa: dan carácter sin robar peso. */
.tt-metric__affix {
    color: var(--tt-teal);
}

/* Empuja el gráfico al pie: con una o dos líneas de descripción, los cinco
   mini-gráficos quedan siempre a la misma altura. */
.tt-metric__label {
    flex: 1 0 auto;
    color: var(--tt-text-muted);
    font-size: var(--tt-fs-xs);
    font-weight: 500;
    line-height: 1.35;
    text-wrap: balance;
}

/* --------------------------------------------------------------------------
   4. Mini-gráficos decorativos
   SVG plano: sin librerías. El dibujado se apoya en pathLength="1", así el
   trazo no depende de la longitud real de la curva.
   -------------------------------------------------------------------------- */
.tt-metric__viz {
    display: block;
    width: 100%;
    margin-top: 4px;
}

.tt-metric__viz--line,
.tt-metric__viz--bars {
    max-width: 88px;
}

.tt-metric__viz--ring {
    max-width: 38px;
}

.tt-metric__viz svg {
    width: 100%;
    height: auto;
    overflow: visible;
}

/* Sparkline */
.tt-metric__spark {
    fill: none;
    stroke: var(--tt-teal);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tt-metric__area {
    /* Degradado compartido, definido una sola vez en la plantilla. */
    fill: url(#tt-spark-fade);
    stroke: none;
}

/* Anillo de progreso */
.tt-metric__track {
    fill: none;
    stroke: var(--tt-border);
    stroke-width: 2.4;
}

.tt-metric__ring {
    fill: none;
    stroke: var(--tt-turquoise);
    stroke-width: 2.4;
    /* Corte recto: así el 2% que falta se ve, y el anillo no miente. */
    stroke-linecap: butt;
    /* Trazo del largo indicado por --tt-ring, con hueco suficiente para no repetir. */
    stroke-dasharray: var(--tt-ring, 1) 1;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}

/* Barras */
.tt-metric__bar {
    fill: var(--tt-teal-400);
}

.tt-metric__bar:last-of-type {
    fill: var(--tt-turquoise);
}

/* --------------------------------------------------------------------------
   5. Entrada — se dibuja una sola vez, al entrar en pantalla
   Los estados iniciales se aplican solo con JS activo: sin JS todo se ve.
   -------------------------------------------------------------------------- */
.js .tt-metric__spark {
    stroke-dasharray: 1 1;
    stroke-dashoffset: 1;
}

/* El desfase arranca igual que el trazo: así el anillo parte de cero exacto. */
.js .tt-metric__ring {
    stroke-dashoffset: var(--tt-ring, 1);
}

.js .tt-metric__area {
    opacity: 0;
}

.js .tt-metric__bar {
    transform: scaleY(0);
    transform-box: fill-box;
    transform-origin: 50% 100%;
}

.js .tt-metrics__panel.is-in .tt-metric__spark,
.js .tt-metrics__panel.is-in .tt-metric__ring {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 900ms var(--tt-ease-out) calc(180ms + var(--i, 0) * 90ms);
}

.js .tt-metrics__panel.is-in .tt-metric__area {
    opacity: 1;
    transition: opacity 600ms var(--tt-ease) calc(420ms + var(--i, 0) * 90ms);
}

.js .tt-metrics__panel.is-in .tt-metric__bar {
    transform: scaleY(1);
    transition: transform 520ms var(--tt-ease-out) calc(320ms + var(--i, 0) * 55ms);
}

/* --------------------------------------------------------------------------
   6. Responsive
   El panel nunca se rompe en tarjetas: solo cambia de columnas y los
   separadores se recolocan con él.
   -------------------------------------------------------------------------- */
@media (max-width: 1060px) {
    .tt-metrics__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        row-gap: clamp(24px, 3vw, 32px);
    }

    .tt-metric:nth-child(5n + 1)::before { display: block; }
    .tt-metric:nth-child(3n + 1)::before { display: none; }
}

@media (max-width: 640px) {
    .tt-metrics {
        margin-top: calc(-1 * clamp(34px, 8vw, 52px));
    }

    .tt-metrics__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 26px;
    }

    .tt-metric:nth-child(3n + 1)::before { display: block; }
    .tt-metric:nth-child(2n + 1)::before { display: none; }

    /* La quinta métrica cierra el panel a todo lo ancho en vez de dejar hueco. */
    .tt-metric:nth-child(5) {
        grid-column: 1 / -1;
    }
}

/* --------------------------------------------------------------------------
   7. Movimiento reducido — el panel llega dibujado, sin trazos ni contador
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .js .tt-metric__spark,
    .js .tt-metric__ring {
        stroke-dashoffset: 0;
    }

    .js .tt-metric__area {
        opacity: 1;
    }

    .js .tt-metric__bar {
        transform: none;
    }
}

/* trust.css */
/* ==========================================================================
   TrialTrack — Barra de confianza
   Tres señales de alto nivel entre el panel de métricas y "All modules. One
   platform.". Ocupa el aire que ya había entre ambas: no abre banda propia, no
   pinta fondo y no lleva tarjetas. Solo un hairline superior que cierra el
   bloque del hero, y una fila de iconos y texto pequeño.
   ========================================================================== */

.tt-trust {
    position: relative;
    padding-block: clamp(10px, 1.6vw, 20px) 0;
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 16px);
}

/* --------------------------------------------------------------------------
   1. Fila
   El hueco entre indicadores es una variable porque el separador se coloca en
   su mitad: al cambiar el hueco, el separador se recoloca solo.
   -------------------------------------------------------------------------- */
.tt-trust__list {
    --tt-trust-gap: clamp(16px, 2.6vw, 32px);

    position: relative;
    display: flex;
    /* O cabe entera, o pasa a la retícula: nunca se parte por su cuenta.
       Un separador colgando al principio de una línea envuelta se vería. */
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: var(--tt-trust-gap);
    padding-top: clamp(18px, 2.2vw, 28px);
}

/* Cierre del bloque del hero: un pelo de línea, disuelto por los extremos. */
.tt-trust__list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(440px, 100%);
    height: 1px;
    translate: -50% 0;
    background: linear-gradient(90deg,
        rgba(15, 31, 51, 0) 0%,
        rgba(15, 31, 51, 0.10) 50%,
        rgba(15, 31, 51, 0) 100%);
}

/* --------------------------------------------------------------------------
   2. Indicador
   Información secundaria: tipografía pequeña, peso medio y color de texto
   normal. Nunca compite con el titular ni con los botones del hero.
   -------------------------------------------------------------------------- */
.tt-trust__item {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.002em;
    color: var(--tt-text);
}

.tt-trust__label {
    white-space: nowrap;
}

.tt-trust__icon {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--tt-turquoise);
}

/* Separador: hairline vertical en la mitad del hueco, no un borde de caja. */
.tt-trust__item + .tt-trust__item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc(var(--tt-trust-gap) / -2);
    width: 1px;
    height: 12px;
    translate: 0 -50%;
    background: var(--tt-border-strong);
}

/* --------------------------------------------------------------------------
   3. Adaptación
   Los cortes los marca el idioma más largo, no el inglés: los tres
   indicadores miden 560 px en español y 372 px en inglés, así que la fila
   entera solo se sostiene mientras quepa la versión española.
   -------------------------------------------------------------------------- */

/* Cuerpo pequeño: la fila baja de 498 px y aún cabe entera en español. */
@media (max-width: 767px) {
    .tt-trust__list {
        --tt-trust-gap: 18px;
        padding-top: clamp(16px, 4vw, 22px);
    }

    .tt-trust__item {
        gap: 6px;
        font-size: 0.7rem;
    }

    .tt-trust__icon {
        width: 13px;
        height: 13px;
    }
}

/* Dos arriba y uno centrado debajo, pegados. Nunca pastillas ni botones:
   el indicador sigue siendo icono y texto. */
@media (max-width: 600px) {
    .tt-trust__list {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: center;
        column-gap: var(--tt-trust-gap);
        row-gap: 10px;
    }

    .tt-trust__item {
        justify-content: center;
    }

    .tt-trust__item:nth-child(3) {
        grid-column: 1 / -1;
    }

    .tt-trust__item + .tt-trust__item:nth-child(3)::before {
        display: none;
    }
}

/* Pantallas muy estrechas: ni la primera fila cabe en español. Uno debajo de
   otro y sin separadores, que ahí ya no separan nada. */
@media (max-width: 359px) {
    .tt-trust__list {
        grid-template-columns: auto;
    }

    .tt-trust__item + .tt-trust__item::before {
        display: none;
    }
}

/* platform.css */
/* ==========================================================================
   TrialTrack — "All modules. One platform."
   Diagrama radial del ecosistema. La geometría (posición de cada módulo y
   extremos de cada línea) la calcula PHP y llega en --x / --y y en el path del
   SVG; aquí solo se define el aspecto y el movimiento.
   ========================================================================== */

.tt-platform {
    background-color: var(--tt-bg);
    /* El panel de métricas ya ha dejado aire arriba: no hace falta repetirlo. */
    padding-block: clamp(24px, 3vw, 56px) clamp(72px, 8vw, 128px);
}

.tt-platform__inner {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(40px, 5vw, 88px);
    align-items: center;
}

.tt-platform__title {
    margin-top: var(--tt-sp-4);
    /* Algo por debajo del h2 general: cada línea del titular cabe entera. */
    font-size: clamp(1.75rem, 1.8vw + 1.2rem, 2.5rem);
    text-wrap: pretty;
}

/* ==========================================================================
   1. ESCENARIO
   Cuadrado perfecto: el SVG comparte sus coordenadas (viewBox 0 0 100 100),
   así los extremos de las líneas caen exactamente donde están los módulos.
   ========================================================================== */
.tt-eco {
    position: relative;
    /* Necesario cuando la rejilla se apila y centra: sin esto el diagrama
       se encogería a su contenido en vez de ocupar el ancho disponible. */
    width: 100%;
}

.tt-eco__stage {
    position: relative;
    width: min(100%, 640px);
    margin-inline: auto;
    aspect-ratio: 1;
}

/* ==========================================================================
   2. LÍNEAS DE CONEXIÓN
   Una por módulo, siempre del centro hacia fuera. Nunca entre módulos.
   ========================================================================== */
.tt-eco__links {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.tt-eco__link {
    stroke: var(--tt-turquoise);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 2 5;
    opacity: 0.35;
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        stroke-width var(--tt-dur) var(--tt-ease);
}

/* Módulo señalado: solo se enciende su línea. */
.tt-eco__stage[data-eco-active] .tt-eco__link {
    opacity: 0.18;
}

.tt-eco__stage[data-eco-active] .tt-eco__link.is-active {
    opacity: 0.9;
    stroke-width: 1.7;
}

/* Nodo central señalado: se encienden todas a la vez. */
.tt-eco__stage[data-eco-active="all"] .tt-eco__link {
    opacity: 0.8;
}

/* ==========================================================================
   3. NODO CENTRAL
   ========================================================================== */
.tt-eco__center {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.tt-eco__core {
    position: relative;
    display: grid;
    place-items: center;
    width: clamp(132px, 27vw, 174px);
    aspect-ratio: 1;
    border: 1px solid rgba(0, 205, 187, 0.30);
    border-radius: var(--tt-radius-full);
    background:
        radial-gradient(circle at 50% 26%, rgba(0, 205, 187, 0.13), transparent 58%),
        linear-gradient(152deg, #14263C 0%, #0F1F33 54%, #0B4B48 140%);
    box-shadow:
        0 0 0 8px rgba(0, 205, 187, 0.045),
        0 22px 44px -22px rgba(8, 18, 31, 0.70);
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur-slow) var(--tt-ease);
}

/* Glow turquesa: muy abierto y muy bajo, apenas un halo. */
.tt-eco__core::before {
    content: "";
    position: absolute;
    inset: -34%;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(0, 205, 187, 0.20) 0%, transparent 66%);
    opacity: 0.55;
    transition: opacity var(--tt-dur-slow) var(--tt-ease);
    pointer-events: none;
}

/* Hover / foco sobre el centro: el halo sube, nada se mueve ni gira. */
.tt-eco__stage[data-eco-active="all"] .tt-eco__core {
    border-color: rgba(0, 205, 187, 0.52);
    box-shadow:
        0 0 0 10px rgba(0, 205, 187, 0.07),
        0 24px 48px -22px rgba(8, 18, 31, 0.72);
}

.tt-eco__stage[data-eco-active="all"] .tt-eco__core::before {
    opacity: 1;
}

/* El logo oficial, sin recortes ni deformaciones.
   El tope evita que un logotipo pequeño de la biblioteca se amplíe hasta
   verse blando: para un nodo central nítido, deja el vectorial definitivo en
   assets/images/logo.svg (el tema lo usa antes que ninguna otra fuente). */
.tt-eco__core-mark {
    display: block;
    width: 50%;
    max-width: 76px;
}

.tt-eco__core-mark .tt-brand-mark {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   4. MÓDULOS
   Los diez con exactamente el mismo peso: mismo círculo, mismo icono, mismo
   tamaño de nombre. Sin descripciones.
   ========================================================================== */
.tt-eco__nodes {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tt-eco__slot {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: clamp(104px, 20%, 136px);
    transform: translate(-50%, -50%);
    transition: opacity var(--tt-dur) var(--tt-ease);
}

.tt-eco__node {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 4px;
    border-radius: var(--tt-radius-md);
    text-align: center;
    transition: transform var(--tt-dur) var(--tt-ease);
}

.tt-eco__icon {
    display: grid;
    place-items: center;
    width: 46%;
    min-width: 46px;
    aspect-ratio: 1;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-full);
    /* Pastel muy claro, idéntico para los diez. */
    background: linear-gradient(158deg, #F6FAFD 0%, #EAF1F7 100%);
    color: #5B7186;
    box-shadow: var(--tt-shadow-xs);
    transition:
        background-color var(--tt-dur) var(--tt-ease),
        background-image var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-eco__glyph {
    width: 48%;
    height: auto;
}

.tt-eco__label {
    color: var(--tt-text);
    font-size: var(--tt-fs-xs);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.28;
    text-wrap: balance;
}

/* --- Hover y foco: mismo resultado, se llega igual con ratón que con teclado */
.tt-eco__node:hover,
.tt-eco__node:focus-visible {
    transform: translateY(-4px);
}

.tt-eco__node:hover .tt-eco__icon,
.tt-eco__node:focus-visible .tt-eco__icon {
    border-color: rgba(0, 205, 187, 0.45);
    background-image: linear-gradient(158deg, #F1FCFA 0%, var(--tt-turquoise-50) 100%);
    color: var(--tt-turquoise);
    box-shadow: 0 10px 22px -12px rgba(7, 153, 141, 0.45);
}

.tt-eco__node:focus-visible {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: 4px;
}

/* --- Distintivo Premium (assets/css/base.css)

   Colgado del nodo, no dentro de él: sale del flujo para que el módulo conserve
   milímetro a milímetro su sitio en la órbita. Los diez iconos siguen alineados
   en el mismo círculo y los diez nombres a la misma altura; lo único que cambia
   es que dos llevan una etiqueta debajo. Se centra con `translate`, que deja
   libre `transform` para la entrada. */
.tt-premium--eco {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    margin-top: 6px;
}

.tt-eco__node:hover .tt-premium,
.tt-eco__node:focus-visible .tt-premium {
    --tt-premium-border: var(--tt-premium-border-lit);
    --tt-premium-bg:     var(--tt-premium-bg-lit);
    --tt-premium-text:   var(--tt-premium-text-lit);
}

/* El resto baja de intensidad, pero solo lo justo: nunca se ocultan. */
.tt-eco__stage[data-eco-active]:not([data-eco-active="all"]) .tt-eco__slot {
    opacity: 0.72;
}

.tt-eco__stage[data-eco-active] .tt-eco__slot.is-active {
    opacity: 1;
}

/* Conexión simplificada del layout móvil: oculta mientras el diagrama es radial. */
.tt-eco__spine {
    display: none;
}

/* ==========================================================================
   5. ENTRADA
   Orden: nodo central → líneas → iconos → nombres. Poco más de un segundo.
   ========================================================================== */
.js .tt-eco__core {
    opacity: 0;
    transform: scale(0.9);
}

.js .tt-eco__links {
    opacity: 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0) 100%);
            mask-image: radial-gradient(closest-side, #000 58%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
            mask-position: 50% 50%;
    /* La máscara crece desde el centro: las líneas se dibujan hacia fuera. */
    -webkit-mask-size: 0% 0%;
            mask-size: 0% 0%;
}

.js .tt-eco__icon {
    opacity: 0;
    transform: scale(0.86);
}

.js .tt-eco__label,
.js .tt-premium--eco {
    opacity: 0;
    transform: translateY(6px);
}

.js .tt-eco.is-in .tt-eco__core {
    opacity: 1;
    transform: none;
    transition:
        opacity 380ms var(--tt-ease-out),
        transform 460ms var(--tt-ease-out);
}

.js .tt-eco.is-in .tt-eco__links {
    opacity: 1;
    -webkit-mask-size: 120% 120%;
            mask-size: 120% 120%;
    -webkit-transition: opacity 180ms linear 210ms, -webkit-mask-size 720ms var(--tt-ease-out) 210ms;
            transition: opacity 180ms linear 210ms, mask-size 720ms var(--tt-ease-out) 210ms;
}

.js .tt-eco.is-in .tt-eco__icon {
    opacity: 1;
    transform: none;
    transition:
        opacity 320ms var(--tt-ease-out) calc(430ms + var(--i) * 32ms),
        transform 360ms var(--tt-ease-out) calc(430ms + var(--i) * 32ms),
        background-color var(--tt-dur) var(--tt-ease),
        background-image var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.js .tt-eco.is-in .tt-eco__label,
.js .tt-eco.is-in .tt-premium--eco {
    opacity: 1;
    transform: none;
    transition:
        opacity 300ms var(--tt-ease-out) calc(520ms + var(--i) * 32ms),
        transform 340ms var(--tt-ease-out) calc(520ms + var(--i) * 32ms);
}

/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */

/* Tablet: la composición radial se mantiene entera, solo encoge de diámetro. */
@media (max-width: 1080px) {
    .tt-platform__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(32px, 5vw, 52px);
        justify-items: center;
        text-align: center;
    }

    .tt-platform__intro {
        max-width: 560px;
    }

    .tt-eco__stage {
        width: min(100%, 560px);
    }
}

/* Móvil: el diagrama radial se volvería ilegible, así que cambia de forma.
   TrialTrack arriba, una línea de conexión y los diez módulos en dos columnas.
   No se pierde ningún módulo. */
@media (max-width: 700px) {
    .tt-eco__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        aspect-ratio: auto;
    }

    .tt-eco__links {
        display: none;
    }

    .tt-eco__center {
        position: static;
        transform: none;
    }

    .tt-eco__core {
        width: clamp(116px, 34vw, 140px);
    }

    .tt-eco__spine {
        display: block;
        width: 0;
        height: 40px;
        border-left: 1.5px dashed rgba(0, 205, 187, 0.55);
    }

    .tt-eco__nodes {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(20px, 5vw, 30px) clamp(12px, 4vw, 24px);
        width: 100%;
        padding-top: clamp(20px, 5vw, 30px);
        border-top: 1px dashed rgba(0, 205, 187, 0.28);
    }

    .tt-eco__slot {
        position: static;
        width: auto;
        transform: none;
    }

    .tt-eco__icon {
        width: 52px;
    }

    /* Sin órbita que preservar, el distintivo vuelve al flujo: es la última
       línea de la ficha y crece la fila entera, que es donde toca. */
    .tt-premium--eco {
        position: static;
        translate: none;
        margin-top: 0;
    }
}

/* ==========================================================================
   7. MOVIMIENTO REDUCIDO
   El diagrama llega montado: sin secuencia de entrada ni desplazamientos.
   El resalte de líneas al señalar un módulo se conserva, porque es color.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .js .tt-eco__core,
    .js .tt-eco__icon,
    .js .tt-eco__label,
    .js .tt-premium--eco {
        opacity: 1;
        transform: none;
    }

    .js .tt-eco__links {
        opacity: 1;
        -webkit-mask-image: none;
                mask-image: none;
    }

    .tt-eco__node:hover,
    .tt-eco__node:focus-visible {
        transform: none;
    }
}

/* workflow.css */
/* ==========================================================================
   TrialTrack — "Why TrialTrack"
   Fragmentado → TrialTrack → conectado.

   La composición vive sobre un lienzo de 1160 × 560 que el SVG usa como
   viewBox y el escenario reproduce con aspect-ratio. Por eso todas las
   posiciones van en porcentaje: al encoger el escenario, líneas y fichas
   encogen juntas y los extremos siguen cayendo donde deben.

   PHP calcula la geometría (inc/workflow.php); aquí solo hay aspecto y
   movimiento.
   ========================================================================== */

.tt-wf {
    /* La sección anterior es --tt-bg: el blanco marca el cambio sin un borde. */
    background-color: var(--tt-white);
    padding-block: clamp(72px, 8vw, 124px);
}

/* ==========================================================================
   1. CABECERA
   Corta y centrada. Aquí el protagonista es el diagrama, no el texto.
   ========================================================================== */
.tt-wf__head {
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(40px, 4.5vw, 68px);
    text-align: center;
}

.tt-wf__title {
    margin-top: var(--tt-sp-4);
    text-wrap: pretty;
}

.tt-wf__lead {
    max-width: 620px;
    margin-top: var(--tt-sp-5);
    margin-inline: auto;
    font-size: var(--tt-fs-lg);
}

/* ==========================================================================
   2. ESCENARIO
   Proporción fija: el SVG (preserveAspectRatio="xMidYMid meet") y las fichas
   en porcentaje comparten exactamente el mismo sistema de coordenadas.
   ========================================================================== */
.tt-wf__diagram {
    width: 100%;
}

.tt-wf__stage {
    position: relative;
    width: min(100%, 1160px);
    margin-inline: auto;
    aspect-ratio: 1160 / 560;
}

.tt-wf__wires {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* --- Hilos que no llegan a ninguna parte: el matiz "fragmentado". --------- */
.tt-wf__thread {
    stroke: #BFCEDD;
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 3 7;
    opacity: 0.6;
}

/* --- Líneas que convergen en TrialTrack ---------------------------------- */
.tt-wf__wire {
    stroke: var(--tt-turquoise);
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.42;
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        stroke-width var(--tt-dur) var(--tt-ease);
}

/* --- Salida limpia hacia el espacio conectado ---------------------------- */
.tt-wf__out,
.tt-wf__tip {
    stroke: var(--tt-turquoise);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
}

/* Al señalar una ficha, solo se enciende su recorrido. */
.tt-wf__stage[data-wf-active] .tt-wf__wire { opacity: 0.2; }

.tt-wf__stage[data-wf-active] .tt-wf__wire.is-lit {
    opacity: 0.95;
    stroke-width: 2.2;
}

/* ==========================================================================
   3. ZONA FRAGMENTADA
   Fichas sueltas, cada una en su sitio y con una inclinación mínima. Nada de
   rejilla: se lee "información repartida", no "lista de features".
   ========================================================================== */
.tt-wf__fragments {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tt-wf__chip {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: max-content;
    /* El centro de la ficha es el origen de su línea: la tapa hasta que sale
       por el borde derecho, así no hace falta cuadrar anchos. */
    transform: translate(-50%, -50%) rotate(var(--r, 0deg));
    transition:
        transform var(--tt-dur) var(--tt-ease),
        opacity var(--tt-dur) var(--tt-ease);
}

.tt-wf__chip-card {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    background: var(--tt-white);
    box-shadow: var(--tt-shadow-xs);
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-wf__chip-icon {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: var(--tt-radius-sm);
    background: linear-gradient(158deg, #F5F9FD 0%, #E9F0F7 100%);
    color: #6E8399;
    transition:
        background-image var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease);
}

.tt-wf__glyph {
    width: 15px;
    height: 15px;
}

.tt-wf__chip-label {
    font-size: var(--tt-fs-xs);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--tt-text-muted);
    transition: color var(--tt-dur) var(--tt-ease);
}

/* --- Hover: apenas 2 px, y su línea hacia TrialTrack se enciende. --------- */
.tt-wf__chip:hover {
    transform: translate(-50%, calc(-50% - 2px)) rotate(var(--r, 0deg));
}

.tt-wf__chip:hover .tt-wf__chip-card {
    border-color: rgba(0, 205, 187, 0.45);
    box-shadow: 0 8px 18px -12px rgba(7, 153, 141, 0.5);
}

.tt-wf__chip:hover .tt-wf__chip-icon {
    background-image: linear-gradient(158deg, #F1FCFA 0%, var(--tt-turquoise-50) 100%);
    color: var(--tt-teal);
}

.tt-wf__chip:hover .tt-wf__chip-label {
    color: var(--tt-text);
}

/* El resto baja de intensidad lo justo: nunca desaparece. */
.tt-wf__stage[data-wf-active] .tt-wf__chip { opacity: 0.66; }
.tt-wf__stage[data-wf-active] .tt-wf__chip.is-lit { opacity: 1; }

/* ==========================================================================
   4. NODO CENTRAL
   Mismo lenguaje que el diagrama del ecosistema, en pequeño.
   ========================================================================== */
.tt-wf__hub {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    transform: translate(-50%, -50%);
}

.tt-wf__core {
    position: relative;
    display: grid;
    place-items: center;
    width: 118px;
    aspect-ratio: 1;
    border: 1px solid rgba(0, 205, 187, 0.3);
    border-radius: var(--tt-radius-full);
    background:
        radial-gradient(circle at 50% 26%, rgba(0, 205, 187, 0.13), transparent 58%),
        linear-gradient(152deg, #14263C 0%, #0F1F33 54%, #0B4B48 140%);
    box-shadow:
        0 0 0 7px rgba(0, 205, 187, 0.045),
        0 18px 38px -20px rgba(8, 18, 31, 0.7);
}

/* Halo turquesa: muy abierto y muy bajo. Es lo que "se ilumina" al final. */
.tt-wf__core::before {
    content: "";
    position: absolute;
    inset: -32%;
    z-index: -1;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(0, 205, 187, 0.22) 0%, transparent 66%);
    pointer-events: none;
}

.tt-wf__core-mark {
    display: block;
    width: 52%;
    max-width: 62px;
}

.tt-wf__core-mark .tt-brand-mark {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   5. ESPACIO CONECTADO
   Representación abstracta de un único entorno: raíl, cabecera y bloques
   alineados. No es una captura ni describe pantallas concretas.
   ========================================================================== */
.tt-wf__workspace {
    position: absolute;
    left: 61.5%;
    right: 0.9%;
    top: 20.5%;
    bottom: 20.5%;
    z-index: 2;
    display: flex;
    gap: 12px;
    padding: 13px;
    border: 1px solid var(--tt-border-soft);
    border-radius: 16px;
    background: var(--tt-white);
    box-shadow:
        0 24px 48px -28px rgba(15, 31, 51, 0.28),
        0 6px 16px -12px rgba(15, 31, 51, 0.1);
    overflow: hidden;
}

/* --- Raíl lateral simplificado ------------------------------------------- */
.tt-wf__rail {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    width: 42px;
    padding: 9px 0;
    border-radius: 11px;
    background: linear-gradient(180deg, #F4F8FC 0%, #EDF3F9 100%);
}

.tt-wf__rail-mark {
    width: 17px;
    height: 17px;
    border-radius: 6px;
    background: var(--tt-navy);
    box-shadow: inset 0 0 0 2px rgba(0, 205, 187, 0.55);
}

.tt-wf__rail-tab {
    width: 20px;
    height: 8px;
    border-radius: 4px;
    background: #DCE5EF;
}

.tt-wf__rail-tab.is-on {
    background: var(--tt-turquoise-100);
    box-shadow: inset 0 0 0 1px rgba(0, 205, 187, 0.45);
}

/* --- Cuerpo -------------------------------------------------------------- */
.tt-wf__panel {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    min-height: 0;
}

.tt-wf__panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: none;
}

.tt-wf__panel-bar {
    width: 92px;
    height: 8px;
    border-radius: 4px;
    background: #E3EBF4;
}

.tt-wf__panel-pill {
    width: 46px;
    height: 15px;
    border-radius: var(--tt-radius-full);
    background: var(--tt-turquoise-50);
    box-shadow: inset 0 0 0 1px rgba(0, 205, 187, 0.3);
}

.tt-wf__panel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: repeat(4, minmax(0, 1fr));
    gap: 9px;
    flex: 1;
    min-height: 0;
}

.tt-wf__block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    padding: 9px 10px;
    border: 1px solid var(--tt-border-soft);
    border-radius: 10px;
    background: #FBFDFF;
    overflow: hidden;
}

.tt-wf__block--wide {
    grid-column: 1;
    grid-row: 1 / -1;
    /* Título arriba, mes ocupando el hueco, agenda abajo. */
    justify-content: flex-start;
    gap: 10px;
}

.tt-wf__block-head {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tt-wf__block-glyph {
    width: 14px;
    height: 14px;
    flex: none;
    color: var(--tt-teal);
}

.tt-wf__block-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: -0.008em;
    line-height: 1.2;
    color: var(--tt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-wf__block-lines {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.tt-wf__block-lines i {
    height: 5px;
    border-radius: 3px;
    background: #E7EEF6;
}

.tt-wf__block-lines i:first-child { width: 72%; }
.tt-wf__block-lines i:last-child  { width: 44%; }

/* Rejilla de días: el calendario, reducido a su forma. Las seis semanas se
   reparten la altura sobrante del bloque, así no queda medio vacío. */
.tt-wf__month {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-auto-rows: minmax(0, 1fr);
    gap: 5px;
    min-height: 0;
}

.tt-wf__day {
    min-height: 0;
    border-radius: 3px;
    background: #E7EEF6;
}

.tt-wf__day.is-on {
    background: var(--tt-turquoise-100);
}

.tt-wf__day.is-on:nth-child(17) {
    background: var(--tt-mint-bg);
}

/* Tres apuntes bajo el mes: cierran el bloque por abajo. */
.tt-wf__agenda {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: 6px;
}

.tt-wf__agenda i {
    height: 6px;
    border-radius: 3px;
    background: #E7EEF6;
}

.tt-wf__agenda i:nth-child(1) { width: 84%; }
.tt-wf__agenda i:nth-child(2) { width: 62%; background: var(--tt-turquoise-100); }
.tt-wf__agenda i:nth-child(3) { width: 72%; }

/* ==========================================================================
   6. ETIQUETAS DE ZONA
   ========================================================================== */
.tt-wf__zone {
    position: absolute;
    top: 88.5%;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: var(--tt-ls-eyebrow);
    line-height: 1.2;
    text-transform: uppercase;
}

.tt-wf__zone::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: none;
    border-radius: var(--tt-radius-full);
}

.tt-wf__zone--before {
    left: 3%;
    color: var(--tt-text-soft);
}

.tt-wf__zone--before::before {
    background: #C3D0DE;
}

.tt-wf__zone--after {
    left: 61.5%;
    color: var(--tt-teal);
}

.tt-wf__zone--after::before {
    background: var(--tt-turquoise);
}

/* Conectores del relato vertical: ocultos mientras la composición es horizontal. */
.tt-wf__step {
    display: none;
}

/* ==========================================================================
   7. ENTRADA
   Fichas → líneas convergiendo → TrialTrack se ilumina → espacio conectado.
   Poco más de 1,2 s de principio a fin.
   ========================================================================== */
.js .tt-wf__chip-card,
.js .tt-wf__zone--before {
    opacity: 0;
    transform: translateY(10px);
}

.js .tt-wf__thread {
    opacity: 0;
}

.js .tt-wf__wire {
    stroke-dasharray: 1;   /* pathLength="1": la línea se dibuja sola */
    stroke-dashoffset: 1;
}

.js .tt-wf__out {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.js .tt-wf__tip {
    opacity: 0;
}

.js .tt-wf__core {
    opacity: 0;
    transform: scale(0.92);
}

.js .tt-wf__core::before {
    opacity: 0.3;
}

.js .tt-wf__zone--after,
.js .tt-wf__workspace {
    opacity: 0;
    transform: translateY(12px);
}

.js .tt-wf__block,
.js .tt-wf__rail,
.js .tt-wf__panel-top {
    opacity: 0;
}

/* --- Secuencia ----------------------------------------------------------- */
.js .tt-wf__diagram.is-in .tt-wf__zone--before {
    opacity: 1;
    transform: none;
    transition:
        opacity 320ms var(--tt-ease-out) 120ms,
        transform 340ms var(--tt-ease-out) 120ms;
}

.js .tt-wf__diagram.is-in .tt-wf__chip-card {
    opacity: 1;
    transform: none;
    transition:
        opacity 320ms var(--tt-ease-out) calc(var(--i) * 45ms),
        transform 360ms var(--tt-ease-out) calc(var(--i) * 45ms),
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.js .tt-wf__diagram.is-in .tt-wf__thread {
    opacity: 0.6;
    transition: opacity 300ms linear 260ms;
}

.js .tt-wf__diagram.is-in .tt-wf__wire {
    stroke-dashoffset: 0;
    transition:
        stroke-dashoffset 380ms var(--tt-ease-out) calc(420ms + var(--i) * 26ms),
        opacity var(--tt-dur) var(--tt-ease),
        stroke-width var(--tt-dur) var(--tt-ease);
}

.js .tt-wf__diagram.is-in .tt-wf__core {
    opacity: 1;
    transform: none;
    transition:
        opacity 340ms var(--tt-ease-out) 400ms,
        transform 380ms var(--tt-ease-out) 400ms;
}

/* El destello final: solo sube el halo, nada se mueve. */
.js .tt-wf__diagram.is-in .tt-wf__core::before {
    opacity: 1;
    transition: opacity 420ms var(--tt-ease) 780ms;
}

.js .tt-wf__diagram.is-in .tt-wf__out {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 300ms var(--tt-ease-out) 820ms;
}

.js .tt-wf__diagram.is-in .tt-wf__tip {
    opacity: 0.9;
    transition: opacity 220ms linear 1040ms;
}

.js .tt-wf__diagram.is-in .tt-wf__zone--after {
    opacity: 1;
    transform: none;
    transition:
        opacity 320ms var(--tt-ease-out) 940ms,
        transform 340ms var(--tt-ease-out) 940ms;
}

.js .tt-wf__diagram.is-in .tt-wf__workspace {
    opacity: 1;
    transform: none;
    transition:
        opacity 380ms var(--tt-ease-out) 860ms,
        transform 420ms var(--tt-ease-out) 860ms;
}

.js .tt-wf__diagram.is-in .tt-wf__rail,
.js .tt-wf__diagram.is-in .tt-wf__panel-top {
    opacity: 1;
    transition: opacity 280ms var(--tt-ease-out) 920ms;
}

.js .tt-wf__diagram.is-in .tt-wf__block {
    opacity: 1;
    transition: opacity 280ms var(--tt-ease-out) calc(920ms + var(--i) * 24ms);
}

/* ==========================================================================
   8. BENEFICIOS
   Fila editorial: iconos, titular y una frase. Sin tarjetas.
   ========================================================================== */
.tt-wf__benefits {
    --tt-reveal-y: 12px;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(16px, 2vw, 30px);
    margin-top: clamp(48px, 5.5vw, 84px);
}

.tt-wf__benefit + .tt-wf__benefit {
    padding-left: clamp(16px, 2vw, 30px);
    border-left: 1px solid var(--tt-border-soft);
}

.tt-wf__benefit-icon {
    display: block;
    color: var(--tt-turquoise);
}

.tt-wf__benefit-glyph {
    width: 24px;
    height: 24px;
}

.tt-wf__benefit-title {
    margin-top: 18px;
    font-size: var(--tt-fs-h4);
    font-weight: 600;
    color: var(--tt-text-strong);
}

.tt-wf__benefit-text {
    margin-top: 10px;
    font-size: var(--tt-fs-sm);
    color: var(--tt-text-muted);
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Tablet ancha: la composición aguanta entera; solo encoge de escala. */
@media (max-width: 1080px) {
    .tt-wf__core { width: 104px; }

    .tt-wf__chip-card { padding: 7px 10px; gap: 7px; }
    .tt-wf__chip-icon { width: 22px; height: 22px; }
    .tt-wf__glyph { width: 13px; height: 13px; }
    .tt-wf__chip-label { font-size: 12px; }

    .tt-wf__workspace { gap: 9px; padding: 10px; border-radius: 14px; }
    .tt-wf__rail { width: 34px; gap: 7px; padding: 7px 0; }
    .tt-wf__rail-tab { width: 16px; height: 6px; }
    .tt-wf__rail-mark { width: 14px; height: 14px; }
    .tt-wf__panel { gap: 8px; }
    .tt-wf__panel-bar { width: 70px; height: 6px; }
    .tt-wf__panel-pill { width: 36px; height: 12px; }
    .tt-wf__panel-grid { gap: 7px; }
    .tt-wf__block { padding: 7px 8px; gap: 6px; border-radius: 8px; }
    .tt-wf__block-label { font-size: 10px; }
    .tt-wf__block-lines i { height: 4px; }
    .tt-wf__month { gap: 4px; }
    .tt-wf__agenda { gap: 5px; }
    .tt-wf__agenda i { height: 5px; }

    .tt-wf__benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px);
    }

    /* Con dos columnas, la separación vertical la marca el aire, no una línea. */
    .tt-wf__benefit + .tt-wf__benefit {
        padding-left: 0;
        border-left: 0;
    }

    .tt-wf__benefit:nth-child(2n) {
        padding-left: clamp(20px, 3vw, 36px);
        border-left: 1px solid var(--tt-border-soft);
    }
}

/* Móvil y tablet estrecha: el diagrama deja de ser horizontal y se convierte
   en un relato vertical. No se pierde ninguna pieza. */
@media (max-width: 900px) {
    .tt-wf__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        aspect-ratio: auto;
    }

    .tt-wf__wires {
        display: none;
    }

    .tt-wf__zone,
    .tt-wf__hub,
    .tt-wf__workspace {
        position: static;
        transform: none;
    }

    .tt-wf__zone {
        justify-content: center;
        width: 100%;
        margin-bottom: 20px;
    }

    .tt-wf__fragments {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
        max-width: 480px;
    }

    .tt-wf__chip {
        position: static;
        width: auto;
        transform: none;
    }

    .tt-wf__chip:hover {
        transform: translateY(-2px);
    }

    .tt-wf__chip-card {
        width: 100%;
    }

    .tt-wf__chip-label {
        white-space: normal;
    }

    /* Conector vertical entre los tres pasos del relato. */
    .tt-wf__step {
        display: block;
        width: 0;
        height: 36px;
        border-left: 1.5px dashed rgba(0, 205, 187, 0.55);
    }

    .tt-wf__core { width: 100px; }

    .tt-wf__zone--after {
        margin-top: 24px;
    }

    .tt-wf__workspace {
        width: 100%;
        max-width: 480px;
        padding: 12px;
        gap: 10px;
    }

    .tt-wf__panel-grid {
        grid-template-rows: repeat(4, minmax(44px, auto));
    }
}

@media (max-width: 560px) {
    .tt-wf__fragments {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .tt-wf__benefits {
        grid-template-columns: minmax(0, 1fr);
        gap: 34px;
    }

    .tt-wf__benefit:nth-child(2n) {
        padding-left: 0;
        border-left: 0;
    }

    .tt-wf__rail {
        width: 30px;
    }

    .tt-wf__panel-grid {
        gap: 8px;
    }
}

/* ==========================================================================
   10. MOVIMIENTO REDUCIDO
   La composición llega montada, en su estado final: conectada.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .js .tt-wf__chip-card,
    .js .tt-wf__zone--before,
    .js .tt-wf__zone--after,
    .js .tt-wf__workspace,
    .js .tt-wf__core {
        opacity: 1;
        transform: none;
    }

    .js .tt-wf__thread { opacity: 0.6; }
    .js .tt-wf__tip    { opacity: 0.9; }

    .js .tt-wf__wire,
    .js .tt-wf__out {
        stroke-dasharray: none;
        stroke-dashoffset: 0;
    }

    .js .tt-wf__core::before,
    .js .tt-wf__block,
    .js .tt-wf__rail,
    .js .tt-wf__panel-top {
        opacity: 1;
    }
}

/* explore.css */
/* ==========================================================================
   TrialTrack — "Explore the platform"

   Sección editorial: el producto se enseña, no se documenta.

   Un solo sistema visual para los diez módulos, en dos composiciones:

     · Los cuatro troncales alternan texto y preview a lado y lado. La preview
       ocupa poco más de la mitad del bloque; el texto, poco menos de dos
       quintos. Entre bloque y bloque, aire.
     · Los seis restantes van en una retícula de 3 x 2. Todas las fichas
       comparten estructura, icono, jerarquía de texto y —esto es lo que hace
       que la retícula se lea como una— una preview del mismo tamaño exacto.

   La diferencia entre unos y otros es de composición, no de importancia.

   Reglas de la casa para las capturas (.tt-shot):
     · Viven dentro de un marco con overflow oculto. Siempre se ve un recorte,
       y el recorte se nota buscado: la interfaz entra por el ángulo superior
       izquierdo del marco y se va por la derecha y por abajo.
     · Un degradado muy suave funde esos dos bordes con el fondo de la página,
       para que la captura no se lea como una lámina documental completa.
     · El hover levanta la ficha 2–3px y escala la imagen 1.015 como mucho:
       nunca revela un solo píxel más de pantalla del que ya se veía.
     · La imagen no es enlace, no se puede arrastrar y no tiene puntero: no hay
       lightbox, ni zoom, ni ampliación, ni acceso al archivo original.

   Nota sobre movimiento: los desplazamientos de hover y de entrada de la imagen
   van en `translate`, no en `transform`. `transform` es de los reveals de
   base.css y, si se comparte, la regla .is-revealed (más específica y anterior)
   se come el gesto del hover.
   ========================================================================== */

.tt-explore {
    /* La sección anterior ("Why TrialTrack") es blanca. */
    background-color: var(--tt-bg);
    padding-block: clamp(72px, 8vw, 124px);

    /* Color al que se funden los bordes de las capturas. */
    --tt-shot-fade: 247, 249, 252;

    /* Medidas del sistema, en un solo sitio: cambiar el aire o el tamaño de
       las previews es cambiar estas líneas. */
    --tt-shot-radius: 16px;
    --tt-preview-max: 620px;                     /* ancho tope de la troncal */
    --tt-copy-max: 420px;
    --tt-tile-pad: clamp(22px, 2vw, 28px);       /* aire interior de la ficha */
    --tt-tile-shot-h: 176px;                     /* alto de la preview del bento */

    /* Cuánto más grande que su marco se pinta la captura. Es el mando del
       recorte: subirlo enseña menos pantalla y más grande. Cada composición
       fija el suyo y el responsive lo reajusta; nada más toca el encuadre. */
    --tt-shot-zoom: 116%;
}

/* ==========================================================================
   1. CABECERA
   ========================================================================== */
.tt-explore__head {
    max-width: 700px;
    margin-inline: auto;
    margin-bottom: clamp(56px, 7vw, 104px);
    text-align: center;
}

.tt-explore__title {
    margin-top: var(--tt-sp-4);
    text-wrap: balance;
}

.tt-explore__lead {
    max-width: 600px;
    margin-top: var(--tt-sp-5);
    margin-inline: auto;
    font-size: var(--tt-fs-lg);
}

/* ==========================================================================
   2. PIEZAS COMUNES — icono, título y texto de cada módulo

   Mismo icono, mismo tamaño y misma jerarquía en las dos composiciones. Lo
   único que cambia entre una troncal y una ficha del bento es el cuerpo del
   título y del párrafo.
   ========================================================================== */
.tt-explore__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--tt-radius-md);
    border: 1px solid var(--tt-turquoise-100);
    background: var(--tt-turquoise-50);
    color: var(--tt-teal-800);
}

/* El glifo lo sirve trialtrack_platform_icon(): mismo dibujo que el diagrama
   del ecosistema y que la barra lateral de la aplicación, aquí a tamaño fijo. */
.tt-explore__icon .tt-eco__glyph {
    width: 21px;
}

.tt-explore__module {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-h3);
    font-weight: 700;
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
}

.tt-explore__text {
    margin-top: var(--tt-sp-3);
    color: var(--tt-text-muted);
}

/* --- Distintivo Premium (assets/css/base.css)

   Al lado del nombre y dentro del propio <h3>: si el título se parte, la
   etiqueta se va con él. Va a media altura de las mayúsculas para que se lea
   como un dato del título y no como una segunda línea. Tamaño y color son los
   del componente, aquí solo se decide el sitio. */
.tt-premium--module {
    margin-left: var(--tt-sp-3);
    vertical-align: middle;
}

/* La ficha del bento sí responde al puntero: el distintivo sube de contraste
   con ella, a la vez y con el mismo tiempo. */
.tt-explore__tile:hover .tt-premium {
    --tt-premium-border: var(--tt-premium-border-lit);
    --tt-premium-bg:     var(--tt-premium-bg-lit);
    --tt-premium-text:   var(--tt-premium-text-lit);
}

/* ==========================================================================
   3. MÓDULOS TRONCALES — texto y captura alternando lado
   ========================================================================== */
.tt-explore__features {
    display: grid;
    gap: clamp(72px, 8vw, 128px);
}

.tt-explore__row {
    position: relative;
    display: grid;
    /* ~38% para el texto, ~53% para la preview: el resto es aire entre los dos. */
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 32px);
}

/* Las filas pares invierten la composición: el ritmo de la sección. */
.tt-explore__row:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr);
}

.tt-explore__row:nth-child(even) .tt-explore__copy {
    grid-column: 2;
    grid-row: 1;
}

.tt-explore__row:nth-child(even) .tt-explore__preview {
    grid-column: 1;
    grid-row: 1;
}

/* Texto y preview se pegan cada uno a su borde del contenedor: el aire queda
   en el centro y la columna editorial se lee recta de arriba abajo. */
.tt-explore__copy {
    max-width: var(--tt-copy-max);
    justify-self: start;
}

.tt-explore__preview {
    width: 100%;
    max-width: var(--tt-preview-max);
    justify-self: end;
}

.tt-explore__row:nth-child(even) .tt-explore__copy {
    justify-self: end;
}

.tt-explore__row:nth-child(even) .tt-explore__preview {
    justify-self: start;
}

.tt-explore__copy .tt-explore__text {
    font-size: var(--tt-fs-lg);
}

/* Ancla espejo para los enlaces del diagrama del ecosistema. No ocupa sitio. */
.tt-explore__alias {
    position: absolute;
    top: 0;
    width: 1px;
    height: 1px;
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 32px);
}

/* ==========================================================================
   4. LA CAPTURA
   ========================================================================== */
.tt-shot {
    margin: 0;
    transition: translate var(--tt-dur) var(--tt-ease);
}

.tt-shot__frame {
    position: relative;
    display: block;
    overflow: hidden;              /* aquí se queda dentro lo que no se enseña */
    aspect-ratio: 16 / 10;         /* 620px de ancho → 388px de alto */
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-shot-radius);
    background: var(--tt-white);
    box-shadow:
        0 18px 38px -20px rgba(15, 31, 51, 0.20),
        0 4px 12px -8px rgba(15, 31, 51, 0.10);
    transition: box-shadow var(--tt-dur-slow) var(--tt-ease);
}

.tt-shot__img {
    display: block;
    /* Más grande que el marco: al recorte del archivo se le da otro mordisco
       aquí. La pantalla entra por el ángulo superior izquierdo y se va por los
       otros dos lados; nunca se ve una interfaz completa. */
    width: var(--tt-shot-zoom);
    max-width: none;               /* base.css limita las imágenes al 100% */
    height: var(--tt-shot-zoom);
    object-fit: cover;
    object-position: left top;
    pointer-events: none;          /* sin menú contextual sobre la imagen */
    user-select: none;
    -webkit-user-drag: none;
    transition:
        transform var(--tt-dur-slow) var(--tt-ease-out),
        translate var(--tt-dur-reveal) var(--tt-ease-out);
}

/* El degradado que funde la captura con la página. Estrecho y muy suave: se
   quiere que siga leyéndose como software real, no como una imagen difuminada.
   Va por la derecha y por abajo, que es justo por donde el recorte trunca la
   interfaz: la pantalla se disuelve donde se acaba. */
.tt-shot__fade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            to right,
            rgba(var(--tt-shot-fade), 0) 70%,
            rgba(var(--tt-shot-fade), 0.36) 88%,
            rgba(var(--tt-shot-fade), 0.86) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(var(--tt-shot-fade), 0) 72%,
            rgba(var(--tt-shot-fade), 0.34) 90%,
            rgba(var(--tt-shot-fade), 0.82) 100%
        );
}

/* Hover: un gesto, no una lupa. */
.tt-shot:hover {
    translate: 0 -3px;
}

.tt-shot:hover .tt-shot__frame {
    box-shadow:
        0 26px 52px -20px rgba(15, 31, 51, 0.24),
        0 8px 18px -12px rgba(15, 31, 51, 0.12);
}

.tt-shot:hover .tt-shot__img {
    transform: scale(1.015);
}

/* Entrada: además del reveal del bloque, la imagen recorre 8px dentro del
   marco. Es un apunte de movimiento, no un scroll de la captura. */
.js .tt-explore__preview[data-reveal] .tt-shot__img,
.js .tt-explore__tile[data-reveal] .tt-shot__img {
    translate: 0 8px;
    transition-delay: 0ms, var(--tt-reveal-delay, 0ms);
}

.js .tt-explore__preview[data-reveal].is-revealed .tt-shot__img,
.js .tt-explore__tile[data-reveal].is-revealed .tt-shot__img {
    translate: 0 0;
}

/* ==========================================================================
   5. RETÍCULA BENTO — Tasks, Drugs, Clinical Map, Analytics, Documentation
      y Study Activations

   Tres columnas por dos filas, seis fichas idénticas en estructura. Ninguna
   pesa más que otra: lo que las distingue es el módulo, no el tamaño.
   ========================================================================== */
.tt-explore__bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(20px, 2vw, 26px);
    margin-top: clamp(80px, 9vw, 132px);
}

.tt-explore__tile {
    grid-column: span var(--span, 4);
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: clamp(330px, 26vw, 374px);
    padding: var(--tt-tile-pad) var(--tt-tile-pad) 0;
    overflow: hidden;              /* la captura se sale y el borde la corta */
    border: 1px solid var(--tt-border-soft);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-white);
    box-shadow: var(--tt-shadow-sm);
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 32px);

    /* Entrada un punto más corta que la de los bloques troncales: seis fichas
       moviéndose 20px a la vez es mucho movimiento. */
    --tt-reveal-y: 14px;

    /* Recorte propio: la ficha es más pequeña, así que enseña un poco menos. */
    --tt-shot-zoom: 118%;
}

/* La ficha lleva el [data-reveal]: se repiten aquí las transiciones del reveal
   (mismo tiempo y mismo retardo que en base.css) y se añaden las del hover. */
.tt-explore__tile,
.tt-explore__tile[data-reveal] {
    transition:
        opacity var(--tt-dur-reveal) var(--tt-ease-out),
        transform var(--tt-dur-reveal) var(--tt-ease-out),
        translate var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur-slow) var(--tt-ease);
    transition-delay:
        var(--tt-reveal-delay, 0ms),
        var(--tt-reveal-delay, 0ms),
        0ms,
        0ms,
        0ms;
}

.tt-explore__tile:hover {
    translate: 0 -2px;
    border-color: var(--tt-border);
    box-shadow: var(--tt-shadow-md);
}

/* El texto va entero antes de la preview y manda sobre ella: la ficha se lee,
   no se mira. */
.tt-explore__tile-copy {
    max-width: 320px;
}

.tt-explore__tile .tt-explore__module {
    font-size: var(--tt-fs-h4);
}

.tt-explore__tile .tt-explore__text {
    margin-top: var(--tt-sp-2);
    font-size: var(--tt-fs-sm);
}

/* La preview asoma por el borde inferior y se va por la derecha. Alto fijo —el
   mismo en las seis fichas, con textos de distinto largo—, para que la retícula
   se lea como un sistema y no como seis recortes sueltos. Ocupa algo menos de
   la mitad de la ficha. */
/* El sangrado es exactamente el aire interior de la ficha: la preview llega
   al borde derecho, ni antes ni después, y en cualquier ancho de pantalla. */
.tt-explore__tile .tt-shot {
    display: flex;
    flex: none;
    height: var(--tt-tile-shot-h);
    margin-top: auto;
    margin-inline: 0 calc(var(--tt-tile-pad) * -1);
}

.tt-explore__tile .tt-shot__frame {
    flex: 1;
    aspect-ratio: auto;
    border-bottom: 0;
    border-radius: var(--tt-shot-radius) var(--tt-shot-radius) 0 0;
    box-shadow: 0 10px 24px -18px rgba(15, 31, 51, 0.26);
}

/* El mapa clínico es una composición centrada: encuadrarla por la izquierda
   dejaría fuera media pantalla de entrada. */
.tt-shot--clinical-map .tt-shot__img {
    object-position: center top;
}

/* Dentro de la ficha el fondo es blanco, no el de la página. */
.tt-explore__tile .tt-shot__fade {
    background:
        linear-gradient(
            to right,
            rgba(255, 255, 255, 0) 66%,
            rgba(255, 255, 255, 0.46) 88%,
            rgba(255, 255, 255, 0.88) 100%
        ),
        linear-gradient(
            to bottom,
            rgba(255, 255, 255, 0) 76%,
            rgba(255, 255, 255, 0.3) 100%
        );
}

/* La ficha entera ya se ha levantado: la captura no repite el gesto. */
.tt-explore__tile .tt-shot:hover {
    translate: none;
}

.tt-explore__tile .tt-shot:hover .tt-shot__frame {
    box-shadow: 0 10px 24px -18px rgba(15, 31, 51, 0.26);
}

.tt-explore__tile:hover .tt-shot__img {
    transform: scale(1.01);
}

/* ==========================================================================
   6. RESPONSIVE
   Cambia la composición, no el trato de la captura: sigue siendo un recorte
   pequeño con el borde fundido. En ningún ancho se amplía para compensar.
   ========================================================================== */
/* De aquí hacia abajo el marco de la troncal se estrecha con la pantalla. Si
   el recorte no se apretara, la interfaz se iría pintando cada vez más pequeña
   hasta volverse ilegible. Se sube el zoom a cada escalón para que la captura
   se vea siempre al mismo tamaño que en escritorio: lo que cambia con el ancho
   es cuánta pantalla se enseña —siempre menos—, nunca a qué tamaño. */
@media (max-width: 1180px) {
    .tt-explore__row,
    .tt-explore__row:nth-child(even) {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
        gap: clamp(28px, 4vw, 56px);
    }

    .tt-explore__row {
        --tt-shot-zoom: 126%;
    }
}

@media (max-width: 1024px) {
    .tt-explore__row {
        --tt-shot-zoom: 146%;
    }

    /* Dos columnas: tres fichas de 376px no caben con holgura. */
    .tt-explore__tile {
        grid-column: span 6;
        min-height: 322px;
    }

    .tt-explore__tile-copy {
        max-width: 420px;
    }
}

@media (max-width: 860px) {
    /* Texto arriba, captura debajo, en todas las filas. */
    .tt-explore__row,
    .tt-explore__row:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--tt-sp-6);
    }

    .tt-explore__row:nth-child(even) .tt-explore__copy,
    .tt-explore__row:nth-child(even) .tt-explore__preview {
        grid-column: 1;
        grid-row: auto;
    }

    /* Al perder la columna de al lado la preview no se estira hasta el borde:
       el tope del marco es lo que impide que en una tablet estrecha la interfaz
       acabe pintada más grande que en escritorio. */
    .tt-explore {
        --tt-copy-max: 520px;
        --tt-preview-max: 460px;
    }

    .tt-explore__copy,
    .tt-explore__row:nth-child(even) .tt-explore__copy,
    .tt-explore__preview,
    .tt-explore__row:nth-child(even) .tt-explore__preview {
        justify-self: start;
    }

    /* Último escalón del zoom. En el móvil se ve poco más de la mitad de la
       captura, al mismo tamaño que en escritorio: un fragmento nítido en vez de
       la pantalla entera encogida. Menos interfaz a la vista, no más. */
    .tt-explore__row {
        --tt-shot-zoom: 176%;
    }
}

@media (max-width: 767px) {
    .tt-explore__bento {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt-explore__tile {
        grid-column: 1;
        min-height: 300px;
    }

    .tt-explore__tile-copy {
        max-width: none;
    }
}

/* ==========================================================================
   7. MOVIMIENTO REDUCIDO
   base.css ya anula las duraciones; aquí se quitan además los gestos.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tt-shot:hover,
    .tt-explore__tile:hover {
        translate: none;
    }

    .tt-shot:hover .tt-shot__img,
    .tt-explore__tile:hover .tt-shot__img {
        transform: none;
    }

    .js .tt-explore__preview[data-reveal] .tt-shot__img,
    .js .tt-explore__tile[data-reveal] .tt-shot__img {
        translate: none;
    }
}

/* security.css */
/* ==========================================================================
   TrialTrack — "Security"

   La única sección oscura del cuerpo de la página. Repite el navy → dark teal
   del hero y del header, así que no es un bloque de color nuevo: es el mismo
   material de marca, reaparecido. Las esquinas superiores redondeadas y el aire
   que deja arriba evitan el corte seco contra "Explore the platform".

   La composición vive sobre un lienzo de 1120 × 660 que el SVG usa como viewBox
   y el escenario reproduce con aspect-ratio. Por eso todo va en porcentaje: al
   encoger el escenario, líneas, núcleo y paneles encogen juntos y los extremos
   siguen cayendo donde deben.

   PHP calcula la geometría (inc/security.php); aquí solo hay aspecto y
   movimiento.

   Dos notas sobre movimiento, las dos por el mismo motivo —no pisar una
   propiedad con dos gestos distintos—:

     · Los paneles se colocan con `transform` (el translate(-50%,-50%) del
       centrado), así que el hover se mueve en `translate`.
     · La entrada va en `animation` con fill-mode `backwards`, no en
       `transition`. Una transición con retardo dejaría ese retardo puesto para
       siempre y el hover respondería medio segundo tarde; la animación se gasta
       y devuelve el elemento a su estilo normal.
   ========================================================================== */

.tt-security {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    /* La sección anterior es clara: las esquinas la dejan asomar. */
    border-start-start-radius: clamp(28px, 4vw, 56px);
    border-start-end-radius: clamp(28px, 4vw, 56px);

    padding-block: clamp(80px, 9vw, 132px) clamp(64px, 7vw, 104px);
    background-color: var(--tt-navy);
    color: var(--tt-on-dark);

    /* Filo turquesa sobre el borde curvo: marca el cambio sin dibujar una raya. */
    box-shadow: inset 0 1px 0 rgba(0, 205, 187, 0.16);
}

/* ==========================================================================
   1. FONDO
   Degradado de marca, una trama apenas presente y un halo detrás del núcleo.
   Todo decorativo: si se quitara, la sección se leería exactamente igual.
   ========================================================================== */
.tt-security__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(1000px 640px at 12% 4%, rgba(11, 85, 80, 0.42), transparent 60%),
        linear-gradient(158deg, #0F1F33 0%, #123044 52%, #0B5550 132%);
}

/* Rejilla técnica, al límite de lo perceptible. */
.tt-security__grid {
    position: absolute;
    inset: 0;
    opacity: 0.5;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 68px 68px;
    -webkit-mask-image: radial-gradient(1200px 760px at 50% 46%, #000 0%, transparent 78%);
            mask-image: radial-gradient(1200px 760px at 50% 46%, #000 0%, transparent 78%);
}

/* Halo teal difuso alrededor del núcleo. */
.tt-security__halo {
    position: absolute;
    left: 50%;
    top: 54%;
    width: min(920px, 88vw);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 205, 187, 0.15) 0%,
        rgba(0, 205, 187, 0.05) 38%,
        transparent 68%);
    filter: blur(12px);
}

/* ==========================================================================
   2. CABECERA
   Corta. Aquí el protagonista es la composición, no el texto.
   ========================================================================== */
.tt-security__head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(44px, 5vw, 76px);
    text-align: center;
}

.tt-security__title {
    margin-top: var(--tt-sp-4);
    color: var(--tt-on-dark);
    text-wrap: pretty;
}

.tt-security__lead {
    max-width: 640px;
    margin-top: var(--tt-sp-5);
    margin-inline: auto;
    color: var(--tt-on-dark-muted);
    font-size: var(--tt-fs-lg);
}

/* ==========================================================================
   3. ESCENARIO
   Proporción fija: el SVG (preserveAspectRatio="xMidYMid meet") y los paneles
   en porcentaje comparten exactamente el mismo sistema de coordenadas.
   ========================================================================== */
.tt-sec {
    width: 100%;
}

.tt-sec__stage {
    position: relative;
    width: min(100%, 1120px);
    margin-inline: auto;
    aspect-ratio: 1120 / 660;
}

/* ==========================================================================
   4. CONEXIONES
   Una por capacidad, siempre del núcleo hacia fuera. Nunca entre capacidades:
   el mensaje es "varias capas protegen una plataforma", no un diagrama de
   flujo. Sin flechas y sin puntas.
   ========================================================================== */
.tt-sec__links {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.tt-sec__link {
    stroke: var(--tt-turquoise);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.3;
    vector-effect: non-scaling-stroke;
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        stroke-width var(--tt-dur) var(--tt-ease);
}

/* Capacidad señalada: solo se enciende su conexión. */
.tt-sec__stage[data-sec-active] .tt-sec__link { opacity: 0.16; }

.tt-sec__stage[data-sec-active] .tt-sec__link.is-lit {
    opacity: 0.92;
    stroke-width: 1.8;
}

/* Núcleo señalado: se encienden las seis, ligeramente. */
.tt-sec__stage[data-sec-active="all"] .tt-sec__link {
    opacity: 0.68;
}

/* ==========================================================================
   5. NÚCLEO DE SEGURIDAD
   Un disco con el escudo y el nombre, y tres anillos concéntricos alrededor.
   Con el borde del propio disco son cuatro capas —autenticación, autorización,
   protección y trazabilidad—, pero ninguna lleva etiqueta: el diagrama no es
   una leyenda. Y nada gira ni late: aquí no hay nada parpadeando.
   ========================================================================== */
.tt-sec__core {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 15%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: var(--tt-radius-full);
}

/* Halo del núcleo: muy abierto y muy bajo. Es lo que "responde" al hover.
   Vive en el núcleo y no en el disco para que la entrada del disco (que crea
   contexto de apilado mientras dura) no lo saque a primer plano. */
.tt-sec__core::before {
    content: "";
    position: absolute;
    inset: -44%;
    z-index: -1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 205, 187, 0.22) 0%, transparent 66%);
    opacity: 0.5;
    pointer-events: none;
    transition: opacity var(--tt-dur-slow) var(--tt-ease);
}

.tt-sec__core:focus-visible {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: 14px;
}

.tt-sec__rings {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
    transition: transform var(--tt-dur-slow) var(--tt-ease);
}

.tt-sec__ring {
    position: absolute;
    display: block;
    border: 1px solid rgba(0, 205, 187, 0.20);
    border-radius: 50%;
}

.tt-sec__ring:nth-child(1) { inset: -9%; }
.tt-sec__ring:nth-child(2) { inset: -18%; border-color: rgba(0, 205, 187, 0.14); }

/* El anillo exterior, discontinuo y aún más bajo: la capa que apenas se intuye.
   Es donde nacen las conexiones (inc/security.php, TRIALTRACK_SEC_RING). */
.tt-sec__ring:nth-child(3) {
    inset: -27%;
    border-style: dashed;
    border-color: rgba(0, 205, 187, 0.12);
}

.tt-sec__disc {
    display: grid;
    place-items: center;
    gap: 8%;
    width: 100%;
    aspect-ratio: 1;
    padding: 12%;
    border: 1px solid rgba(0, 205, 187, 0.30);
    border-radius: var(--tt-radius-full);
    background:
        radial-gradient(circle at 50% 26%, rgba(0, 205, 187, 0.14), transparent 58%),
        linear-gradient(152deg, #14263C 0%, #0F1F33 54%, #0B4B48 140%);
    box-shadow:
        0 0 0 8px rgba(0, 205, 187, 0.04),
        0 22px 46px -22px rgba(3, 10, 18, 0.85);
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur-slow) var(--tt-ease);
}

.tt-sec__crest {
    display: block;
    color: var(--tt-turquoise);
}

.tt-sec__crest-glyph {
    width: clamp(24px, 3.1vw, 34px);
    height: auto;
    stroke-width: 1.4;
}

.tt-sec__core-label {
    display: grid;
    gap: 2px;
    text-align: center;
    line-height: 1.15;
}

.tt-sec__core-name {
    color: var(--tt-on-dark);
    font-size: clamp(10px, 1.02vw, 12px);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.tt-sec__core-word {
    color: var(--tt-turquoise);
    font-size: clamp(9px, 0.94vw, 11px);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* --- Hover y foco sobre el núcleo: el halo sube y los anillos respiran unos
       2-3 px. Nada gira, nada parpadea. ------------------------------------ */
.tt-sec__stage[data-sec-active="all"] .tt-sec__core::before {
    opacity: 1;
}

.tt-sec__stage[data-sec-active="all"] .tt-sec__disc {
    border-color: rgba(0, 205, 187, 0.50);
    box-shadow:
        0 0 0 10px rgba(0, 205, 187, 0.06),
        0 24px 50px -22px rgba(3, 10, 18, 0.88);
}

.tt-sec__stage[data-sec-active="all"] .tt-sec__rings {
    transform: scale(1.018);
}

/* Al señalar una capacidad, el núcleo apenas se entera: solo el halo. */
.tt-sec__stage[data-sec-active]:not([data-sec-active="all"]) .tt-sec__core::before {
    opacity: 0.78;
}

/* ==========================================================================
   6. CAPACIDADES
   Las seis con exactamente el mismo peso: mismo panel, mismo icono, mismo
   tamaño de título y de texto. Aquí no hay principales ni secundarias.
   ========================================================================== */
.tt-sec__items {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.tt-sec__item {
    position: absolute;
    left: var(--x);
    top: var(--y);
    /* 284 de los 1120 del lienzo: el mismo ancho con el que PHP corta la línea. */
    width: 25.357%;
    padding: 15px 16px 16px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    background: linear-gradient(158deg,
        rgba(255, 255, 255, 0.055) 0%,
        rgba(255, 255, 255, 0.022) 100%);
    transform: translate(-50%, -50%);
    transition:
        opacity var(--tt-dur) var(--tt-ease),
        translate var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-sec__item-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tt-sec__item-icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(0, 205, 187, 0.20);
    border-radius: 9px;
    background: rgba(0, 205, 187, 0.07);
    color: var(--tt-turquoise-300);
    transition:
        color var(--tt-dur) var(--tt-ease),
        border-color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease);
}

.tt-sec__glyph {
    width: 17px;
    height: 17px;
}

.tt-sec__item-title {
    color: var(--tt-on-dark);
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    letter-spacing: -0.012em;
    line-height: 1.25;
    text-wrap: balance;
}

.tt-sec__item-text {
    margin-top: 9px;
    /* 0.68 es el mínimo que mantiene 4.5:1 sobre la esquina más clara del
       degradado. Por debajo, el texto pequeño deja de cumplir sobre el teal. */
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
    line-height: 1.5;
    text-wrap: pretty;
}

/* --- Hover y foco: mismo resultado, se llega igual con ratón que con teclado */
.tt-sec__item:hover,
.tt-sec__item:focus-visible {
    translate: 0 -2px;
    border-color: rgba(0, 205, 187, 0.34);
    background-color: rgba(255, 255, 255, 0.03);
    box-shadow: 0 14px 30px -18px rgba(3, 10, 18, 0.9);
}

.tt-sec__item:hover .tt-sec__item-icon,
.tt-sec__item:focus-visible .tt-sec__item-icon {
    border-color: rgba(0, 205, 187, 0.44);
    background-color: rgba(0, 205, 187, 0.12);
    color: var(--tt-turquoise);
}

.tt-sec__item:focus-visible {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: 4px;
}

/* El resto no se agita: solo baja un punto de intensidad. */
.tt-sec__stage[data-sec-active]:not([data-sec-active="all"]) .tt-sec__item {
    opacity: 0.7;
}

.tt-sec__stage[data-sec-active] .tt-sec__item.is-lit {
    opacity: 1;
}

/* Conector vertical del layout apilado: no existe mientras el diagrama es radial. */
.tt-sec__spine {
    display: none;
}

/* ==========================================================================
   7. FRASE DE CIERRE
   Una línea, con su escudo, sobre un filo turquesa. No es una llamada a la
   acción: no lleva botón, ni enlace, ni caja.
   ========================================================================== */
.tt-security__statement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--tt-sp-3);
    max-width: 760px;
    margin-inline: auto;
    margin-top: clamp(44px, 5vw, 76px);
    padding-top: clamp(24px, 3vw, 36px);
    border-top: 1px solid rgba(0, 205, 187, 0.14);
    /* Discreta, pero no por debajo de 4.5:1: cae sobre la parte teal del fondo. */
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--tt-fs-sm);
    text-align: center;
    text-wrap: pretty;
}

.tt-security__statement-icon {
    display: block;
    flex: none;
    color: rgba(0, 205, 187, 0.68);
}

.tt-security__statement-glyph {
    width: 18px;
    height: 18px;
}

/* ==========================================================================
   8. SECUENCIA DE ENTRADA
   Núcleo → anillos → líneas → capacidades. Poco más de 1,2 s de principio a
   fin, y una sola vez: JS pone .is-in cuando la sección entra en pantalla.

   Cada paso es una animación con fill-mode `backwards`: durante su retardo se
   ve el fotograma inicial, y al terminar el elemento vuelve a su estilo normal.
   Así el retardo no se queda pegado al hover.
   ========================================================================== */
@keyframes tt-sec-core-in {
    from { opacity: 0; scale: 0.94; }
}

@keyframes tt-sec-ring-in {
    from { opacity: 0; scale: 0.9; }
}

@keyframes tt-sec-draw {
    from { stroke-dashoffset: 1; }
}

@keyframes tt-sec-item-in {
    from { opacity: 0; translate: 0 14px; }
}

/* Estado de partida: solo con JS, para no dejar nada invisible sin él.
   Va en :not(.is-in) —y no como un opacity:1 en .is-in— para no ganarle en
   especificidad al atenuado de la sección 6, que también toca la opacidad. */
.js .tt-sec__link {
    stroke-dasharray: 1;   /* pathLength="1": la línea se dibuja sola */
}

.js .tt-sec:not(.is-in) .tt-sec__disc,
.js .tt-sec:not(.is-in) .tt-sec__ring,
.js .tt-sec:not(.is-in) .tt-sec__item {
    opacity: 0;
}

.js .tt-sec:not(.is-in) .tt-sec__link {
    stroke-dashoffset: 1;
}

/* --- Secuencia: solo animación. Todo lo demás sigue en su regla de siempre,
       así el hover conserva su propia transición, sin retardo. ------------- */
.js .tt-sec.is-in .tt-sec__disc {
    animation: tt-sec-core-in 380ms var(--tt-ease-out) backwards;
}

.js .tt-sec.is-in .tt-sec__ring {
    animation: tt-sec-ring-in 440ms var(--tt-ease-out) calc(140ms + var(--i) * 90ms) backwards;
}

.js .tt-sec.is-in .tt-sec__link {
    animation: tt-sec-draw 380ms var(--tt-ease-out) calc(380ms + var(--i) * 40ms) backwards;
}

.js .tt-sec.is-in .tt-sec__item {
    animation: tt-sec-item-in 380ms var(--tt-ease-out) calc(560ms + var(--i) * 70ms) backwards;
}

/* ==========================================================================
   9. RESPONSIVE
   ========================================================================== */

/* Tableta ancha: el diagrama aguanta entero, solo encoge de escala. */
@media (max-width: 1120px) {
    .tt-sec__item {
        padding: 13px 14px 14px;
        border-radius: 13px;
    }

    .tt-sec__item-icon  { width: 27px; height: 27px; border-radius: 8px; }
    .tt-sec__glyph      { width: 15px; height: 15px; }
    .tt-sec__item-title { font-size: 13px; }
    .tt-sec__item-text  { margin-top: 7px; font-size: 11.5px; }
}

/* Tableta y móvil: el diagrama deja de ser radial. Primero la arquitectura,
   después las seis capacidades —tres y tres—, sin perder ninguna. La conexión
   se mantiene con una línea vertical discreta. */
@media (max-width: 960px) {
    .tt-sec__stage {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        aspect-ratio: auto;
    }

    .tt-sec__links {
        display: none;
    }

    .tt-sec__core {
        position: relative;
        left: auto;
        top: auto;
        width: clamp(150px, 26vw, 184px);
        transform: none;
    }

    .tt-sec__core:focus-visible {
        outline-offset: 12px;
    }

    .tt-sec__crest-glyph { width: 30px; }
    .tt-sec__core-name   { font-size: 12px; }
    .tt-sec__core-word   { font-size: 11px; }

    /* La conexión, ya sin diagrama: un solo hilo del núcleo a las capacidades. */
    .tt-sec__spine {
        display: block;
        width: 0;
        height: clamp(34px, 5vw, 52px);
        margin-top: clamp(26px, 3.5vw, 40px);
        border-left: 1.5px dashed rgba(0, 205, 187, 0.42);
    }

    .tt-sec__items {
        position: static;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        width: 100%;
        margin-top: clamp(26px, 3.5vw, 40px);
    }

    .tt-sec__item {
        position: static;
        width: auto;
        padding: 15px 16px 16px;
        transform: none;
    }

    /* Sin diagrama no hay conexión que apagar: las seis siguen igual de legibles. */
    .tt-sec__stage[data-sec-active]:not([data-sec-active="all"]) .tt-sec__item {
        opacity: 1;
    }
}

/* Móvil: dos columnas. Las seis siguen visibles y a tamaño legible. */
@media (max-width: 767px) {
    .tt-sec__items {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .tt-sec__item-title { font-size: var(--tt-fs-sm); }
    .tt-sec__item-text  { font-size: 12px; }

    .tt-security__statement {
        text-align: left;
    }
}

/* Móvil estrecho: lista vertical antes de que el texto empiece a partirse. */
@media (max-width: 460px) {
    .tt-sec__items {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   10. MOVIMIENTO REDUCIDO
   La composición llega montada, en su estado final. Ni líneas dibujándose, ni
   anillos creciendo, ni desplazamientos.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* Mismos selectores que la secuencia, para ganarle por orden. */
    .js .tt-sec:not(.is-in) .tt-sec__disc,
    .js .tt-sec:not(.is-in) .tt-sec__ring,
    .js .tt-sec:not(.is-in) .tt-sec__item {
        opacity: 1;
    }

    .js .tt-sec:not(.is-in) .tt-sec__link {
        stroke-dashoffset: 0;
    }

    .js .tt-sec .tt-sec__disc,
    .js .tt-sec .tt-sec__ring,
    .js .tt-sec .tt-sec__link,
    .js .tt-sec .tt-sec__item {
        animation: none !important;
    }

    .tt-sec__item:hover,
    .tt-sec__item:focus-visible {
        translate: none;
    }

    .tt-sec__stage[data-sec-active="all"] .tt-sec__rings {
        transform: none;
    }
}

/* faq.css */
/* ==========================================================================
   TrialTrack — FAQ
   Acordeón nativo (<details>). El bloque más denso en texto de la página, así
   que manda la legibilidad: medida de línea corta, interlineado amplio y
   ningún adorno que compita con la lectura.
   ========================================================================== */

.tt-faq {
    background-color: var(--tt-bg);
    padding-block: clamp(72px, 8vw, 120px);
}

/* --------------------------------------------------------------------------
   1. CABECERA
   -------------------------------------------------------------------------- */
.tt-faq__head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(36px, 4vw, 56px);
    text-align: center;
}

.tt-faq__title {
    margin-top: var(--tt-sp-3);
    font-size: var(--tt-fs-h2);
    font-weight: 700;
    line-height: var(--tt-lh-tight);
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
}

.tt-faq__lead {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-lg);
    line-height: var(--tt-lh-base);
    color: var(--tt-text-muted);
}

/* --------------------------------------------------------------------------
   2. LISTA
   -------------------------------------------------------------------------- */
.tt-faq__list {
    display: grid;
    gap: var(--tt-sp-3);
    max-width: 880px;
    margin-inline: auto;
}

.tt-faq__item {
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-xs);
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-faq__item:hover {
    border-color: var(--tt-border-strong);
}

.tt-faq__item[open] {
    border-color: rgba(0, 205, 187, 0.42);
    box-shadow: var(--tt-shadow-sm);
}

/* --------------------------------------------------------------------------
   3. PREGUNTA
   El <summary> es el control: recibe el foco y el clic. El <h3> que lleva
   dentro existe para el esquema del documento —y para que un buscador vea una
   jerarquía de encabezados— sin robarle el papel de botón.
   -------------------------------------------------------------------------- */
.tt-faq__question {
    display: flex;
    align-items: flex-start;
    gap: var(--tt-sp-4);
    padding: clamp(18px, 2vw, 24px) clamp(20px, 2.2vw, 28px);
    cursor: pointer;
    list-style: none;
}

/* Safari pinta su propio triángulo si no se le dice lo contrario. */
.tt-faq__question::-webkit-details-marker {
    display: none;
}

.tt-faq__question:focus-visible {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: -2px;
    border-radius: var(--tt-radius-md);
}

.tt-faq__question-text {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--tt-fs-h4);
    font-weight: 600;
    line-height: var(--tt-lh-snug);
    letter-spacing: -0.012em;
    color: var(--tt-text-strong);
}

.tt-faq__marker {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    margin-top: -2px;
    border-radius: var(--tt-radius-full);
    background: var(--tt-turquoise-50);
    color: var(--tt-teal);
    transition: transform var(--tt-dur) var(--tt-ease),
                background-color var(--tt-dur) var(--tt-ease);
}

.tt-faq__item[open] .tt-faq__marker {
    transform: rotate(135deg);
    background: var(--tt-turquoise-100);
}

/* --------------------------------------------------------------------------
   4. RESPUESTA
   -------------------------------------------------------------------------- */
.tt-faq__answer {
    padding: 0 clamp(20px, 2.2vw, 28px) clamp(20px, 2.2vw, 26px);
}

.tt-faq__answer p {
    max-width: 74ch;
    margin: 0;
    font-size: var(--tt-fs-base);
    line-height: 1.68;
    color: var(--tt-text-muted);
}

/* --------------------------------------------------------------------------
   5. CIERRE
   -------------------------------------------------------------------------- */
.tt-faq__more {
    max-width: 880px;
    margin: var(--tt-sp-6) auto 0;
    font-size: var(--tt-fs-sm);
    color: var(--tt-text-soft);
    text-align: center;
}

.tt-faq__more-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 4px;
    font-weight: 600;
    color: var(--tt-teal);
    text-decoration: none;
}

.tt-faq__more-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tt-faq__more-link svg {
    transition: transform var(--tt-dur-fast) var(--tt-ease);
}

.tt-faq__more-link:hover svg {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   6. MÓVIL
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .tt-faq__question {
        gap: var(--tt-sp-3);
    }

    .tt-faq__question-text {
        font-size: var(--tt-fs-base);
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-faq__marker,
    .tt-faq__more-link svg {
        transition: none;
    }
}

/* contact.css */
/* ==========================================================================
   TrialTrack — "Contact / Request demo"

   La página vuelve a la luz después del bloque oscuro de "Security". El fondo
   arranca en el gris azulado de la página y se aclara hacia blanco a la altura
   de la tarjeta, de modo que el formulario queda sobre el punto más claro sin
   necesidad de dibujarle un marco alrededor.

   Dos columnas: el argumento a la izquierda, una sola tarjeta a la derecha. La
   tarjeta no crece hasta el ancho de la pantalla a propósito —un formulario a
   toda página se lee como un alta— y por eso la retícula reparte el espacio en
   lugar de estirarlo.

   Los estados del formulario (`.tt-field.has-error`, `.tt-form__submit.is-loading`,
   `.tt-panel.is-sent`) los pone assets/js/contact.js; aquí solo se pintan.
   ========================================================================== */

/* `hidden` por encima de todo: en cuanto una clase fija un `display`, la regla
   del navegador para [hidden] deja de aplicarse y el elemento oculto se ve. */
.tt-form__status[hidden],
.tt-field__error[hidden],
.tt-panel__sent[hidden] {
    display: none;
}

.tt-contact {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(76px, 8.5vw, 128px);
    background:
        linear-gradient(180deg,
            var(--tt-bg) 0%,
            var(--tt-white) 34%,
            var(--tt-white) 100%);
}

/* Halo turquesa detrás de la tarjeta. Decorativo: si se quita, no cambia nada. */
.tt-contact__bg {
    position: absolute;
    top: -10%;
    right: -14%;
    z-index: -1;
    display: block;
    width: min(880px, 78vw);
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle,
        rgba(0, 205, 187, 0.10) 0%,
        rgba(0, 205, 187, 0.04) 42%,
        transparent 70%);
}

.tt-contact__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
    gap: clamp(40px, 4.5vw, 80px);
    /* La tarjeta es bastante más alta que el texto: centrarlo deja aire arriba
       y abajo en lugar de un hueco largo debajo del último punto. */
    align-items: center;
}

/* ==========================================================================
   1. COLUMNA IZQUIERDA — el argumento final
   ========================================================================== */
.tt-contact__copy {
    max-width: 540px;
}

.tt-contact__title {
    margin-top: var(--tt-sp-3);
    /* Un punto por debajo del h2 general: el titular lleva salto de línea
       escrito y a tamaño completo no le cabe la primera línea. */
    font-size: clamp(1.75rem, 1.5vw + 1.24rem, 2.375rem);
    /* Los saltos ya están decididos; equilibrar líneas los volvería a repartir. */
    text-wrap: pretty;
}

.tt-contact__lead {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-lg);
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Los tres puntos de apoyo
   -------------------------------------------------------------------------- */
.tt-contact__points {
    display: grid;
    gap: 14px;
    margin-top: clamp(24px, 2.6vw, 34px);
}

.tt-contact__point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    font-size: var(--tt-fs-sm);
    color: var(--tt-text);
    line-height: 1.5;
}

.tt-contact__point-icon {
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--tt-turquoise-50);
    color: var(--tt-teal-700);
}

.tt-contact__point-glyph {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
}

/* --------------------------------------------------------------------------
   Contacto directo — solo aparece si hay dirección configurada
   -------------------------------------------------------------------------- */
.tt-contact__direct {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: clamp(26px, 3vw, 38px);
    padding-top: clamp(20px, 2.4vw, 28px);
    border-top: 1px solid var(--tt-border-soft);
    font-size: var(--tt-fs-sm);
}

.tt-contact__direct-glyph {
    width: 16px;
    height: 16px;
    color: var(--tt-text-soft);
}

.tt-contact__direct-label {
    color: var(--tt-text-muted);
}

.tt-contact__direct-link {
    font-weight: 600;
    color: var(--tt-teal-800);
    box-shadow: inset 0 -1px 0 rgba(7, 153, 141, 0.3);
    transition: color var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-contact__direct-link:hover {
    color: var(--tt-teal);
    box-shadow: inset 0 -1px 0 var(--tt-turquoise);
}

/* ==========================================================================
   2. LA TARJETA
   ========================================================================== */
.tt-panel {
    position: relative;
    padding: clamp(26px, 2.8vw, 40px);
    border: 1px solid var(--tt-border);
    border-radius: 20px;
    background: var(--tt-white);
    box-shadow:
        0 1px 2px rgba(15, 31, 51, 0.04),
        0 24px 48px -28px rgba(15, 31, 51, 0.22);
}

.tt-panel__title {
    font-size: var(--tt-fs-h3);
}

.tt-panel__lead {
    margin-top: 6px;
    font-size: var(--tt-fs-sm);
}

.tt-form {
    margin-top: clamp(22px, 2.4vw, 30px);
}

/* Trampa antibots: fuera de la vista y fuera del recorrido de tabulación. */
.tt-form__hp {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

.tt-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 16px;
}

/* ==========================================================================
   3. CAMPOS
   ========================================================================== */
.tt-field {
    /* Un fieldset necesita que se le quite el estilo de agente de usuario. */
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.tt-field--full {
    grid-column: 1 / -1;
}

.tt-field__label {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 0;
    margin-bottom: 7px;
    font-size: var(--tt-fs-xs);
    font-weight: 600;
    color: var(--tt-text);
}

.tt-field__optional {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tt-text-soft);
}

.tt-field__control {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--tt-field-border);
    border-radius: var(--tt-radius);
    background: var(--tt-field-bg);
    color: var(--tt-text);
    font-size: var(--tt-fs-sm);
    line-height: 1.45;
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        box-shadow var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease);
}

.tt-field__control::placeholder {
    color: var(--tt-text-soft);
}

.tt-field__control--area {
    min-height: 104px;
    resize: vertical;
}

.tt-field__control:hover {
    border-color: var(--tt-text-soft);
}

/* Foco: aro turquesa pegado al campo. Sustituye al contorno general de base.css
   —el mismo gesto, más ajustado— para que no se dibujen dos anillos. */
.tt-field__control:focus,
.tt-field__control:focus-visible {
    outline: none;
    border-color: var(--tt-turquoise);
    box-shadow: var(--tt-field-ring);
}

/* --------------------------------------------------------------------------
   Desplegables
   -------------------------------------------------------------------------- */
.tt-field__select {
    position: relative;
}

.tt-field__select .tt-field__control {
    /* Sitio para la punta de flecha, y fuera la nativa. */
    padding-right: 38px;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

/* Mientras no se elige nada, el texto es una indicación, no un valor. */
.tt-field__select .tt-field__control:invalid {
    color: var(--tt-text-soft);
}

.tt-field__chevron {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: var(--tt-text-soft);
    pointer-events: none;
    transition: color var(--tt-dur) var(--tt-ease);
}

.tt-field__select:focus-within .tt-field__chevron {
    color: var(--tt-teal);
}

/* --------------------------------------------------------------------------
   Error de campo
   -------------------------------------------------------------------------- */
.tt-field__error {
    margin-top: 6px;
    font-size: var(--tt-fs-xs);
    line-height: 1.4;
    color: var(--tt-error-text);
}

.tt-field.has-error .tt-field__control {
    border-color: var(--tt-error-border);
    background: var(--tt-error-bg);
}

.tt-field.has-error .tt-field__control:focus {
    box-shadow: 0 0 0 3px rgba(233, 86, 75, 0.16);
}

/* ==========================================================================
   4. QUÉ QUIERE VERSE — fichas seleccionables
   Once opciones en forma de lista serían media pantalla; en fichas caben en
   tres o cuatro líneas y se leen de un vistazo.
   ========================================================================== */
.tt-field--chips .tt-field__label {
    margin-bottom: 10px;
}

.tt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tt-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 13px 7px 9px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-full);
    background: var(--tt-white);
    font-size: var(--tt-fs-xs);
    color: var(--tt-text-muted);
    cursor: pointer;
    user-select: none;
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease),
        color var(--tt-dur) var(--tt-ease);
}

.tt-chip:hover {
    border-color: var(--tt-border-strong);
    color: var(--tt-text);
}

/* La casilla real sigue ahí, encima de su ficha: el teclado y los lectores de
   pantalla la usan tal cual. Solo se le quita la pintura. */
.tt-chip__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.tt-chip__box {
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border: 1px solid var(--tt-border-strong);
    border-radius: 5px;
    background: var(--tt-white);
    color: var(--tt-white);
    transition:
        border-color var(--tt-dur) var(--tt-ease),
        background-color var(--tt-dur) var(--tt-ease);
}

.tt-chip__glyph {
    width: 11px;
    height: 11px;
    stroke-width: 3;
    opacity: 0;
    transform: scale(0.6);
    transition:
        opacity var(--tt-dur-fast) var(--tt-ease),
        transform var(--tt-dur) var(--tt-ease-out);
}

.tt-chip__input:checked ~ .tt-chip__box {
    border-color: var(--tt-teal);
    background: var(--tt-teal);
}

.tt-chip__input:checked ~ .tt-chip__box .tt-chip__glyph {
    opacity: 1;
    transform: none;
}

.tt-chip:has(.tt-chip__input:checked) {
    border-color: rgba(7, 153, 141, 0.42);
    background: var(--tt-turquoise-50);
    color: var(--tt-teal-800);
    font-weight: 600;
}

.tt-chip:has(.tt-chip__input:focus-visible) {
    outline: 2px solid var(--tt-turquoise);
    outline-offset: 2px;
}

/* ==========================================================================
   5. ENVÍO
   ========================================================================== */
.tt-form__submit {
    width: 100%;
    margin-top: clamp(20px, 2.2vw, 26px);
}

.tt-form__submit-arrow {
    width: 16px;
    height: 16px;
}

/* Cargando: la etiqueta y la flecha ceden el sitio a la ruedecilla, sin que el
   botón cambie de tamaño. */
.tt-form__spinner {
    position: absolute;
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: var(--tt-white);
    border-radius: 50%;
    opacity: 0;
    animation: tt-spin 700ms linear infinite;
}

.tt-form__submit {
    position: relative;
}

.tt-form__submit.is-loading {
    cursor: progress;
}

.tt-form__submit.is-loading .tt-form__submit-label,
.tt-form__submit.is-loading .tt-form__submit-arrow {
    opacity: 0;
}

.tt-form__submit.is-loading .tt-form__spinner {
    opacity: 1;
}

.tt-form__submit[disabled] {
    transform: none;
}

.tt-form__submit[disabled]:hover {
    transform: none;
    box-shadow: var(--tt-shadow-sm);
}

@keyframes tt-spin {
    to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Aviso general — se pinta bajo el botón, nunca en un cuadro de alerta
   -------------------------------------------------------------------------- */
.tt-form__status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid var(--tt-error-border);
    border-radius: var(--tt-radius);
    background: var(--tt-red-bg);
    font-size: var(--tt-fs-xs);
    line-height: 1.45;
    color: var(--tt-error-text);
}

.tt-form__consent {
    margin-top: 14px;
    font-size: var(--tt-fs-xs);
    line-height: 1.55;
    color: var(--tt-text-soft);
}

.tt-form__consent-link {
    color: var(--tt-teal-800);
    font-weight: 600;
    box-shadow: inset 0 -1px 0 rgba(7, 153, 141, 0.28);
    transition: color var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-form__consent-link:hover {
    color: var(--tt-teal);
    box-shadow: inset 0 -1px 0 var(--tt-turquoise);
}

/* ==========================================================================
   6. ENVIADO
   La tarjeta se queda; dentro cambia el contenido. Nada de redirecciones: el
   visitante sigue donde estaba y ve confirmado lo que acaba de hacer.
   ========================================================================== */
.tt-panel__sent {
    padding-block: clamp(20px, 3vw, 40px);
    text-align: center;
}

.tt-panel__sent:focus {
    outline: none;
}

.tt-panel__sent-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin: 0 auto clamp(16px, 1.8vw, 22px);
    border-radius: 50%;
    background: var(--tt-mint-bg);
    color: var(--tt-mint);
}

.tt-panel__sent-glyph {
    width: 24px;
    height: 24px;
    stroke-width: 2.2;
}

.tt-panel__sent-title {
    font-size: var(--tt-fs-h4);
    color: var(--tt-success-text);
    text-wrap: balance;
}

.tt-panel__sent-text {
    margin-top: 8px;
    font-size: var(--tt-fs-sm);
    max-width: 34ch;
    margin-inline: auto;
}

/* La entrada del panel de confirmación: aparece, no salta. */
.js .tt-panel.is-sent .tt-panel__sent {
    animation: tt-panel-sent var(--tt-dur-slow) var(--tt-ease-out) backwards;
}

@keyframes tt-panel-sent {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   7. RESPONSIVE
   ========================================================================== */

/* Tableta: dos columnas mientras quepan; por debajo, una sola. */
@media (max-width: 1023px) {
    .tt-contact__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(34px, 5vw, 48px);
        align-items: start;
    }

    .tt-contact__copy {
        max-width: 620px;
    }
}

@media (max-width: 599px) {
    /* Todos los campos a ancho completo. */
    .tt-form__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .tt-panel {
        padding: 22px 18px;
        border-radius: 18px;
    }

    .tt-chip {
        font-size: 12px;
    }
}

/* ==========================================================================
   8. MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .tt-form__spinner {
        animation: none;
        /* Sin giro, la ruedecilla se convierte en un aro fijo: sigue diciendo
           "esto está en marcha" sin mover nada. */
        border-color: rgba(255, 255, 255, 0.55);
        border-top-color: var(--tt-white);
    }

    .js .tt-panel.is-sent .tt-panel__sent {
        animation: none;
    }
}

/* final-cta.css */
/* ==========================================================================
   TrialTrack — "Final CTA"

   Un bloque oscuro y redondeado sobre el blanco del contacto. Repite el
   navy → dark teal del hero y del header: es el mismo material de marca
   reapareciendo al final, no un color nuevo.

   Dentro no hay producto. La decoración —marca de agua, arcos y nodos— es una
   referencia al ecosistema de módulos reducida a su esqueleto, a una fracción
   de opacidad. Nada de ella supera el peso del titular; si se apagara entera,
   el bloque diría exactamente lo mismo.

   El paralaje del cursor está limitado a 3 px por CSS, no por JS: assets/js/cta.js
   solo entrega una posición normalizada (-1 → 1) y aquí se decide cuánto vale
   eso en píxeles. Así el tope no puede escaparse desde el JavaScript.
   ========================================================================== */

.tt-cta {
    /* La sección anterior termina en blanco. */
    background-color: var(--tt-white);
    padding-block: clamp(20px, 3vw, 44px) clamp(64px, 7vw, 104px);
}

.tt-cta__panel {
    /* Amplitud máxima del paralaje. El JS no puede subir de aquí. */
    --tt-cta-travel: 3px;
    --tt-cta-dx: 0px;
    --tt-cta-dy: 0px;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(56px, 7.5vw, 108px) clamp(24px, 5vw, 72px);
    border-radius: clamp(24px, 3.2vw, 40px);
    background: var(--tt-navy);
    color: var(--tt-on-dark);
    text-align: center;
    box-shadow:
        inset 0 1px 0 rgba(0, 205, 187, 0.16),
        0 30px 60px -34px rgba(8, 18, 31, 0.55);
}

/* ==========================================================================
   1. FONDO
   ========================================================================== */
.tt-cta__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
    background:
        radial-gradient(760px 460px at 8% 6%, rgba(11, 85, 80, 0.5), transparent 62%),
        linear-gradient(126deg, #0F1F33 0%, #123044 54%, #0B5550 124%);
}

/* Halo teal difuso, descentrado para que el bloque no quede simétrico. */
.tt-cta__glow {
    position: absolute;
    top: 50%;
    left: 76%;
    width: min(640px, 74%);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(0, 205, 187, 0.20) 0%,
        rgba(0, 205, 187, 0.06) 40%,
        transparent 70%);
    filter: blur(10px);
}

/* Marca de agua: el isotipo del header, casi apagado, saliéndose por la derecha. */
.tt-cta__mark {
    position: absolute;
    top: 50%;
    right: clamp(-90px, -4vw, -40px);
    transform: translateY(-50%);
    opacity: 0.07;
    line-height: 0;
}

.tt-cta__mark .tt-brand-mark {
    width: clamp(180px, 22vw, 280px);
    height: auto;
}

/* --------------------------------------------------------------------------
   Arcos: el trazo del ecosistema, sin nombres y sin retícula
   -------------------------------------------------------------------------- */
.tt-cta__web {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.tt-cta__arc {
    fill: none;
    stroke: rgba(0, 205, 187, 0.26);
    /* Con non-scaling-stroke el grosor se lee en píxeles de pantalla, no en
       unidades del viewBox: aquí 1 es una línea de un píxel. */
    stroke-width: 1;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Los arcos se dibujan al entrar el bloque en pantalla. */
.js .tt-cta__panel .tt-cta__arc {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.js .tt-cta__panel.is-in .tt-cta__arc {
    animation: tt-cta-draw 1100ms var(--tt-ease-out) forwards;
    animation-delay: calc(var(--i) * 70ms);
}

@keyframes tt-cta-draw {
    to { stroke-dashoffset: 0; }
}

/* --------------------------------------------------------------------------
   Nodos: en HTML y no en el SVG, para que no se deformen cuando el bloque se
   estira a lo ancho. El centrado va en `translate` y el paralaje se suma ahí
   mismo: una sola propiedad, un solo gesto.
   -------------------------------------------------------------------------- */
.tt-cta__node {
    position: absolute;
    top: var(--y);
    left: var(--x);
    width: calc(var(--r) * 2);
    height: calc(var(--r) * 2);
    border-radius: 50%;
    background: var(--tt-turquoise);
    opacity: 0.55;
    box-shadow: 0 0 0 4px rgba(0, 205, 187, 0.08);
    translate:
        calc(-50% + var(--tt-cta-dx) * var(--depth))
        calc(-50% + var(--tt-cta-dy) * var(--depth));
    transition: translate 420ms var(--tt-ease-out);
}

.js .tt-cta__panel .tt-cta__node {
    opacity: 0;
}

.js .tt-cta__panel.is-in .tt-cta__node {
    animation: tt-cta-node 520ms var(--tt-ease-out) forwards;
    animation-delay: calc(320ms + var(--i) * 60ms);
}

@keyframes tt-cta-node {
    from { opacity: 0; }
    to   { opacity: 0.55; }
}

/* ==========================================================================
   2. CONTENIDO
   ========================================================================== */
.tt-cta__inner {
    position: relative;
    max-width: 660px;
    margin-inline: auto;
}

.tt-cta__title {
    font-size: var(--tt-fs-h2);
    color: var(--tt-on-dark);
}

.tt-cta__lead {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-lg);
    color: var(--tt-on-dark-muted);
}

.tt-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--tt-sp-3);
    margin-top: clamp(28px, 3.2vw, 40px);
}

/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */
@media (max-width: 767px) {
    .tt-cta__actions {
        flex-direction: column;
        align-items: stretch;
    }

    /* base.css ya estira los botones en móvil; aquí solo se apilan. */
    .tt-cta__mark {
        right: -70px;
        opacity: 0.05;
    }
}

/* ==========================================================================
   4. MOVIMIENTO REDUCIDO
   El bloque llega montado: arcos completos, nodos visibles, nada que se dibuje
   ni se desplace.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .js .tt-cta__panel .tt-cta__arc {
        stroke-dashoffset: 0;
    }

    .js .tt-cta__panel .tt-cta__node {
        opacity: 0.55;
    }

    .js .tt-cta__panel .tt-cta__arc,
    .js .tt-cta__panel .tt-cta__node {
        animation: none !important;
    }

    .tt-cta__node {
        translate: -50% -50%;
        transition: none;
    }
}

/* footer.css */
/* ==========================================================================
   TrialTrack — Pie de página

   El suelo de la página: navy profundo, un punto más oscuro que el bloque de
   cierre, para que se lea como base y no como una sección más. Tipografía
   pequeña, mucho aire y enlaces discretos que solo se encienden al pasar por
   encima.

   Es deliberadamente corto. Aquí no hay mapa del sitio, ni redes, ni un segundo
   "Request demo": el bloque de arriba acaba de pedirlo.

   Las columnas las decide inc/footer.php —una columna sin enlaces no llega a
   pintarse—, así que este CSS tiene que quedar bien con tres, con dos y con
   una sola. Por eso la navegación es flexible y no una retícula de tres.
   ========================================================================== */

.tt-footer {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-block: clamp(48px, 5.5vw, 76px) clamp(28px, 3vw, 40px);
    background:
        radial-gradient(760px 420px at 6% 0%, rgba(11, 85, 80, 0.34), transparent 62%),
        linear-gradient(180deg, #0B1826 0%, #08121F 100%);
    color: var(--tt-on-dark-muted);
    font-size: var(--tt-fs-sm);
}

/* Filo turquesa sobre el borde superior: separa sin dibujar una raya. */
.tt-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: var(--tt-gradient-hairline);
    pointer-events: none;
}

/* ==========================================================================
   1. PARTE ALTA — marca y navegación
   ========================================================================== */
.tt-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr);
    gap: clamp(36px, 5vw, 80px);
    align-items: start;
}

.tt-footer__brand {
    max-width: 320px;
}

.tt-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

.tt-footer__logo .tt-brand-mark {
    width: 38px;
    height: 38px;
}

.tt-footer__wordmark {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.tt-footer__name {
    font-size: var(--tt-fs-base);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tt-on-dark);
}

.tt-footer__name b {
    font-weight: 700;
    color: var(--tt-turquoise);
}

.tt-footer__sub {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--tt-on-dark-soft);
}

.tt-footer__tagline {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-sm);
    line-height: 1.6;
    color: var(--tt-on-dark-soft);
}

/* --------------------------------------------------------------------------
   Columnas. Flexible a propósito: el número de columnas depende de las páginas
   que existan en WordPress, no de este archivo.
   -------------------------------------------------------------------------- */
.tt-footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: clamp(28px, 5vw, 72px);
}

.tt-footer__col {
    min-width: 128px;
}

.tt-footer__col-title {
    margin-bottom: var(--tt-sp-4);
    font-size: var(--tt-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tt-ls-eyebrow);
    text-transform: uppercase;
    color: var(--tt-on-dark);
}

.tt-footer__list {
    display: grid;
    gap: 11px;
}

.tt-footer__link {
    font-size: var(--tt-fs-sm);
    color: var(--tt-on-dark-soft);
    /* La dirección de correo es la entrada más larga de las columnas y no
       tiene espacios: sin esto desbordaría la columna en pantallas estrechas. */
    overflow-wrap: anywhere;
    transition: color var(--tt-dur) var(--tt-ease);
}

.tt-footer__link:hover {
    color: var(--tt-turquoise);
}

/* ==========================================================================
   2. LÍNEA DE CIERRE
   ========================================================================== */
.tt-footer__rule {
    height: 1px;
    margin-block: clamp(32px, 4vw, 52px) clamp(18px, 2vw, 24px);
    border: 0;
    background: var(--tt-on-dark-line);
}

.tt-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--tt-sp-4);
}

.tt-footer__copy {
    font-size: var(--tt-fs-xs);
    color: var(--tt-on-dark-soft);
}

.tt-footer__meta {
    display: flex;
    align-items: center;
    gap: var(--tt-sp-5);
}


/* ==========================================================================
   3. RESPONSIVE
   ========================================================================== */
@media (max-width: 899px) {
    .tt-footer__top {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(32px, 5vw, 44px);
    }

    .tt-footer__nav {
        justify-content: flex-start;
        gap: clamp(28px, 8vw, 56px);
    }

    .tt-footer__brand {
        max-width: 420px;
    }
}

@media (max-width: 479px) {
    .tt-footer__col {
        min-width: 42%;
    }

    .tt-footer__bottom {
        align-items: flex-start;
        flex-direction: column-reverse;
        gap: var(--tt-sp-5);
    }
}

/* content.css */
/* ==========================================================================
   TrialTrack — Contenido editorial
   Páginas, entradas, archivos, búsqueda y 404. Todo lo que no es la landing.

   La landing vende; esto se lee. Por eso aquí manda la tipografía: medida de
   línea corta, interlineado alto y jerarquía clara. Es también el contenido por
   el que esta web puede posicionar en búsquedas que no son de marca, así que
   tiene que estar tan cuidado como la portada.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ARMAZÓN
   -------------------------------------------------------------------------- */
.tt-page {
    padding-block: clamp(48px, 6vw, 88px) clamp(64px, 8vw, 112px);
    background-color: var(--tt-bg);
}

.tt-page__inner {
    max-width: 760px;
    margin-inline: auto;
}

.tt-page--wide .tt-page__inner {
    max-width: var(--tt-container);
}

/* --------------------------------------------------------------------------
   2. MIGAS DE PAN
   Se pintan de verdad, no solo en JSON-LD: Google prefiere la ruta que también
   ve el visitante, y son enlaces internos que reparten autoridad hacia arriba.
   -------------------------------------------------------------------------- */
.tt-breadcrumbs {
    margin-bottom: var(--tt-sp-5);
    font-size: var(--tt-fs-xs);
    color: var(--tt-text-soft);
}

.tt-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.tt-breadcrumbs__item + .tt-breadcrumbs__item::before {
    content: "/";
    color: var(--tt-border-strong);
}

.tt-breadcrumbs__link {
    color: var(--tt-text-muted);
    text-decoration: none;
}

.tt-breadcrumbs__link:hover {
    color: var(--tt-teal);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tt-breadcrumbs__current {
    overflow: hidden;
    color: var(--tt-text);
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46ch;
}

/* --------------------------------------------------------------------------
   3. CABECERA DE LA ENTRADA
   -------------------------------------------------------------------------- */
.tt-entry__head {
    margin-bottom: clamp(28px, 3vw, 44px);
}

.tt-entry__title {
    margin: 0;
    font-size: var(--tt-fs-h1);
    font-weight: 700;
    line-height: var(--tt-lh-tight);
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
    text-wrap: balance;
}

.tt-entry__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--tt-sp-3);
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-sm);
    color: var(--tt-text-soft);
}

.tt-entry__meta a {
    color: var(--tt-teal);
    text-decoration: none;
}

.tt-entry__meta a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tt-entry__dot {
    color: var(--tt-border-strong);
}

.tt-entry__cover {
    margin: clamp(28px, 3vw, 40px) 0 0;
    border-radius: var(--tt-radius-lg);
    overflow: hidden;
    box-shadow: var(--tt-shadow-md);
}

.tt-entry__cover img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   4. CUERPO DEL TEXTO
   -------------------------------------------------------------------------- */
.tt-prose {
    font-size: var(--tt-fs-lg);
    line-height: 1.72;
    color: var(--tt-text);
}

.tt-prose > * + * {
    margin-top: 1.15em;
}

.tt-prose h2,
.tt-prose h3,
.tt-prose h4 {
    margin-top: 1.9em;
    margin-bottom: 0.5em;
    font-weight: 700;
    line-height: var(--tt-lh-snug);
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
    scroll-margin-top: calc(var(--tt-header-h-sticky) + 20px);
}

.tt-prose h2 { font-size: var(--tt-fs-h2); }
.tt-prose h3 { font-size: var(--tt-fs-h3); }
.tt-prose h4 { font-size: var(--tt-fs-h4); }

.tt-prose a {
    color: var(--tt-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.tt-prose a:hover {
    color: var(--tt-teal-700);
}

.tt-prose strong { font-weight: 700; color: var(--tt-text-strong); }

.tt-prose ul,
.tt-prose ol {
    padding-left: 1.4em;
}

.tt-prose li + li {
    margin-top: 0.45em;
}

.tt-prose ul { list-style: disc; }
.tt-prose ol { list-style: decimal; }

.tt-prose blockquote {
    margin-inline: 0;
    padding: var(--tt-sp-4) var(--tt-sp-5);
    border-left: 3px solid var(--tt-turquoise);
    border-radius: 0 var(--tt-radius) var(--tt-radius) 0;
    background: var(--tt-turquoise-50);
    font-size: var(--tt-fs-base);
    color: var(--tt-text);
}

.tt-prose blockquote p { margin: 0; }
.tt-prose blockquote p + p { margin-top: 0.8em; }

.tt-prose img,
.tt-prose figure img {
    height: auto;
    border-radius: var(--tt-radius-md);
}

.tt-prose figure {
    margin-inline: 0;
}

.tt-prose figcaption {
    margin-top: var(--tt-sp-2);
    font-size: var(--tt-fs-xs);
    color: var(--tt-text-soft);
    text-align: center;
}

.tt-prose code {
    padding: 2px 6px;
    border-radius: var(--tt-radius-sm);
    background: var(--tt-surface-alt);
    font-family: var(--tt-font-mono);
    font-size: 0.9em;
}

.tt-prose pre {
    overflow-x: auto;
    padding: var(--tt-sp-5);
    border-radius: var(--tt-radius-md);
    background: var(--tt-navy);
    color: var(--tt-on-dark);
    font-family: var(--tt-font-mono);
    font-size: var(--tt-fs-sm);
    line-height: 1.6;
}

.tt-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.tt-prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--tt-fs-sm);
}

.tt-prose th,
.tt-prose td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--tt-border);
    text-align: left;
}

.tt-prose th {
    font-weight: 600;
    color: var(--tt-text-strong);
    background: var(--tt-surface-alt);
}

.tt-prose hr {
    height: 1px;
    margin-block: 2.2em;
    border: 0;
    background: var(--tt-border);
}

/* --------------------------------------------------------------------------
   5. PIE DE LA ENTRADA
   -------------------------------------------------------------------------- */
.tt-entry__foot {
    margin-top: clamp(40px, 5vw, 64px);
    padding-top: var(--tt-sp-5);
    border-top: 1px solid var(--tt-border);
}

.tt-entry__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-sp-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tt-entry__tag {
    padding: 5px 12px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-full);
    background: var(--tt-surface);
    font-size: var(--tt-fs-xs);
    color: var(--tt-text-muted);
    text-decoration: none;
}

.tt-entry__tag:hover {
    border-color: var(--tt-turquoise);
    color: var(--tt-teal);
}

/* Enlaces a la entrada anterior y la siguiente: el paseo del rastreador. */
.tt-entry__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--tt-sp-4);
    margin-top: var(--tt-sp-6);
}

.tt-entry__nav-link {
    display: block;
    padding: var(--tt-sp-4) var(--tt-sp-5);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-md);
    background: var(--tt-surface);
    text-decoration: none;
    transition: border-color var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease);
}

.tt-entry__nav-link:hover {
    border-color: var(--tt-turquoise);
    box-shadow: var(--tt-shadow-sm);
}

.tt-entry__nav-label {
    display: block;
    font-size: var(--tt-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tt-ls-eyebrow);
    text-transform: uppercase;
    color: var(--tt-teal);
}

.tt-entry__nav-title {
    display: block;
    margin-top: 6px;
    font-size: var(--tt-fs-base);
    font-weight: 600;
    color: var(--tt-text-strong);
}

.tt-entry__nav-link--next { text-align: right; }

/* --------------------------------------------------------------------------
   6. ARCHIVOS Y BÚSQUEDA
   -------------------------------------------------------------------------- */
.tt-archive__head {
    max-width: 720px;
    margin-bottom: clamp(32px, 4vw, 52px);
}

.tt-archive__title {
    margin: var(--tt-sp-3) 0 0;
    font-size: var(--tt-fs-h1);
    font-weight: 700;
    line-height: var(--tt-lh-tight);
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
}

.tt-archive__lead {
    margin-top: var(--tt-sp-4);
    font-size: var(--tt-fs-lg);
    line-height: var(--tt-lh-base);
    color: var(--tt-text-muted);
}

.tt-archive__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(20px, 2.4vw, 32px);
}

.tt-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-xs);
    transition: transform var(--tt-dur) var(--tt-ease),
                box-shadow var(--tt-dur) var(--tt-ease),
                border-color var(--tt-dur) var(--tt-ease);
}

.tt-card:hover {
    transform: translateY(-3px);
    border-color: var(--tt-border-strong);
    box-shadow: var(--tt-shadow-md);
}

.tt-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--tt-surface-alt);
}

.tt-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tt-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--tt-sp-3);
    padding: clamp(20px, 2vw, 26px);
}

.tt-card__meta {
    font-size: var(--tt-fs-xs);
    color: var(--tt-text-soft);
}

.tt-card__title {
    margin: 0;
    font-size: var(--tt-fs-h4);
    font-weight: 700;
    line-height: var(--tt-lh-snug);
    letter-spacing: -0.012em;
}

.tt-card__title a {
    color: var(--tt-text-strong);
    text-decoration: none;
}

.tt-card__title a:hover {
    color: var(--tt-teal);
}

.tt-card__excerpt {
    margin: 0;
    font-size: var(--tt-fs-sm);
    line-height: 1.65;
    color: var(--tt-text-muted);
}

.tt-card__more {
    margin-top: auto;
    padding-top: var(--tt-sp-2);
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    color: var(--tt-teal);
    text-decoration: none;
}

.tt-card__more:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   7. PAGINACIÓN
   -------------------------------------------------------------------------- */
.tt-pagination {
    margin-top: clamp(40px, 5vw, 64px);
}

.tt-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--tt-sp-2);
}

.tt-pagination .page-numbers {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 12px;
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius);
    background: var(--tt-surface);
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    color: var(--tt-text-muted);
    text-decoration: none;
    transition: border-color var(--tt-dur) var(--tt-ease),
                color var(--tt-dur) var(--tt-ease);
}

.tt-pagination .page-numbers:hover {
    border-color: var(--tt-turquoise);
    color: var(--tt-teal);
}

.tt-pagination .page-numbers.current {
    border-color: transparent;
    background: var(--tt-gradient-accent);
    color: var(--tt-white);
}

.tt-pagination .page-numbers.dots {
    border-color: transparent;
    background: none;
}

/* --------------------------------------------------------------------------
   8. BUSCADOR
   -------------------------------------------------------------------------- */
.tt-searchform {
    display: flex;
    gap: var(--tt-sp-2);
    max-width: 520px;
}

.tt-searchform__field {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid var(--tt-field-border);
    border-radius: var(--tt-radius);
    background: var(--tt-field-bg);
    font-family: inherit;
    font-size: var(--tt-fs-base);
    color: var(--tt-text);
}

.tt-searchform__field:focus {
    outline: none;
    border-color: var(--tt-turquoise);
    box-shadow: var(--tt-field-ring);
}

/* --------------------------------------------------------------------------
   9. SIN RESULTADOS Y 404
   -------------------------------------------------------------------------- */
.tt-empty {
    max-width: 620px;
    padding: clamp(32px, 4vw, 56px);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-surface);
}

.tt-empty__title {
    margin: 0;
    font-size: var(--tt-fs-h3);
    font-weight: 700;
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text-strong);
}

.tt-empty__text {
    margin: var(--tt-sp-4) 0 0;
    font-size: var(--tt-fs-base);
    line-height: var(--tt-lh-base);
    color: var(--tt-text-muted);
}

.tt-empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tt-sp-3);
    margin-top: var(--tt-sp-5);
}

.tt-empty__links {
    margin: var(--tt-sp-5) 0 0;
    padding: 0;
    list-style: none;
}

.tt-empty__links li + li {
    margin-top: var(--tt-sp-2);
}

.tt-empty__links a {
    font-size: var(--tt-fs-sm);
    font-weight: 600;
    color: var(--tt-teal);
    text-decoration: none;
}

.tt-empty__links a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tt-404__code {
    display: block;
    font-family: var(--tt-font-mono);
    font-size: var(--tt-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--tt-ls-eyebrow);
    text-transform: uppercase;
    color: var(--tt-teal);
}

/* consent.css */
/* ==========================================================================
   TrialTrack — Aviso de cookies
   Aparece desde abajo, ya con su altura reservada por el transform: nunca
   empuja el contenido de la página, así que no suma nada al CLS.
   ========================================================================== */

.tt-consent {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 1100;
    padding: var(--tt-sp-4);
    transform: translateY(110%);
    transition: transform var(--tt-dur-slow) var(--tt-ease-out);
    pointer-events: none;
}

.tt-consent.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}

.tt-consent__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2.5vw, 40px);
    width: 100%;
    max-width: var(--tt-container);
    margin-inline: auto;
    padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 28px);
    border: 1px solid var(--tt-border);
    border-radius: var(--tt-radius-lg);
    background: var(--tt-surface);
    box-shadow: var(--tt-shadow-lg);
}

.tt-consent__copy {
    flex: 1 1 auto;
    min-width: 0;
}

.tt-consent__title {
    margin: 0 0 4px;
    font-size: var(--tt-fs-sm);
    font-weight: 700;
    color: var(--tt-text-strong);
}

.tt-consent__text {
    margin: 0;
    max-width: 82ch;
    font-size: var(--tt-fs-xs);
    line-height: 1.6;
    color: var(--tt-text-muted);
}

.tt-consent__link {
    color: var(--tt-teal);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tt-consent__actions {
    flex: 0 0 auto;
    display: flex;
    gap: var(--tt-sp-2);
}

.tt-consent__btn {
    white-space: nowrap;
}

@media (max-width: 780px) {
    .tt-consent__inner {
        flex-direction: column;
        align-items: stretch;
        gap: var(--tt-sp-4);
    }

    .tt-consent__actions {
        flex-direction: row-reverse;
    }

    .tt-consent__btn {
        flex: 1 1 0;
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tt-consent {
        transition: none;
    }
}

/* sections.css */
/* ==========================================================================
   TrialTrack — Secciones
   Cada sección de la landing añade aquí (o en su propia hoja) sus estilos.
   Por ahora contiene el andamiaje de las secciones pendientes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Andamiaje: marcador visible de sección pendiente.
   Se elimina automáticamente al crear el template-part real de la sección.
   -------------------------------------------------------------------------- */
.tt-placeholder {
    display: flex;
    align-items: center;
    min-height: 220px;
    border-bottom: 1px dashed var(--tt-border);
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 14px,
            rgba(15, 31, 51, 0.018) 14px 28px
        ),
        var(--tt-white);
}

.tt-placeholder:nth-of-type(even) {
    background:
        repeating-linear-gradient(
            135deg,
            transparent 0 14px,
            rgba(15, 31, 51, 0.018) 14px 28px
        ),
        var(--tt-bg);
}

.tt-placeholder__inner {
    display: flex;
    align-items: baseline;
    gap: var(--tt-sp-4);
    flex-wrap: wrap;
}

.tt-placeholder__label {
    font-size: var(--tt-fs-h3);
    font-weight: 700;
    letter-spacing: var(--tt-ls-tight);
    color: var(--tt-text);
}

.tt-placeholder__anchor {
    font-family: var(--tt-font-mono);
    font-size: var(--tt-fs-xs);
    color: var(--tt-teal);
}

.tt-placeholder__note {
    width: 100%;
    font-size: var(--tt-fs-sm);
    color: var(--tt-text-soft);
}