/* ============================================================================
   INGClean® · Estilos del sitio público en /preview/
   ----------------------------------------------------------------------------
   Filosofía: dark mode tech premium, coherente con la app móvil React/Capacitor.
   Linear/Stripe style con identidad INGClean, no agencia con neones.
   Stack: CSS plano, variables nativas, sin frameworks, sin build step.
   ============================================================================ */


/* ===== 1. RESET MÍNIMO ===================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul[role="list"],
ol[role="list"],
ul.footer-column__list,
ul.lang-toggle {
    list-style: none;
    padding: 0;
}

img, picture, svg, video {
    display: block;
    max-width: 100%;
    height: auto;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

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

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


/* ===== 2. DESIGN TOKENS ==================================================== */

:root {
    /* --- Colores · alineados con la app móvil INGClean® --- */
    --bg-base:        #02040b;
    --bg-layer:       #0a1228;
    --bg-deep:        #010207;
    --bg-elev:        rgba(255, 255, 255, 0.03);
    --bg-elev-2:      rgba(255, 255, 255, 0.05);

    --brand:          #2A8DFF;
    --brand-glow:     #4FB5FF;
    --brand-deep:     #0B3D91;

    --cyan:           #00E5FF;
    --emerald:        #00FFA3;  /* decorativo · pilares de seguridad, badges partner */

    /* --- Estados funcionales · NO confundir con los acentos decorativos --- */
    --success:        #00FFA3;  /* funcional · lead enviado, validación pasada */
    --warn:           #FFB547;  /* alertas suaves · avisos informativos */
    --danger:         #FF5470;  /* errores hard de form, fallos críticos */

    --text:           #FFFFFF;
    --text-muted:     rgba(255, 255, 255, 0.62);
    --text-dim:       rgba(255, 255, 255, 0.32);
    --text-line:      rgba(255, 255, 255, 0.08);
    --text-edge:      rgba(255, 255, 255, 0.06);

    /* --- Tipografía · cargada desde Google Fonts en inc/header.php --- */
    --font-display:   'Saira', system-ui, -apple-system, sans-serif;
    --font-brand:     'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Escala fluida · clamp(mínimo, preferido, máximo) */
    --text-xs:        0.75rem;
    --text-sm:        0.875rem;
    --text-base:      1rem;
    --text-lg:        1.125rem;
    --text-xl:        clamp(1.25rem, 1.4vw, 1.5rem);
    --text-2xl:       clamp(1.5rem, 2vw, 1.875rem);
    --text-3xl:       clamp(1.875rem, 2.8vw, 2.5rem);
    --text-4xl:       clamp(2.25rem, 4vw, 3.5rem);
    --text-5xl:       clamp(3rem, 5vw, 4.5rem);
    --text-display:   clamp(3.5rem, 7vw, 7.5rem);

    /* Spacing · base 4 */
    --space-1:        0.25rem;
    --space-2:        0.5rem;
    --space-3:        0.75rem;
    --space-4:        1rem;
    --space-5:        1.25rem;
    --space-6:        1.5rem;
    --space-8:        2rem;
    --space-10:       2.5rem;
    --space-12:       3rem;
    --space-16:       4rem;
    --space-20:       5rem;
    --space-24:       6rem;
    --space-32:       8rem;

    /* Radios */
    --radius-sm:      8px;
    --radius-md:      16px;
    --radius-lg:      24px;
    --radius-xl:      32px;
    --radius-pill:    9999px;

    /* Sombras · todas tintadas en azul, ninguna en negro puro */
    --shadow-sm:      0 2px 8px rgba(11, 61, 145, 0.18);
    --shadow-md:      0 12px 32px rgba(11, 61, 145, 0.28);
    --shadow-lg:      0 32px 80px rgba(11, 61, 145, 0.45);
    --shadow-glow:    0 0 32px rgba(79, 181, 255, 0.18);
    --shadow-inset:   inset 0 1px 1px rgba(79, 181, 255, 0.18);
    --shadow-edge:    inset 0 0 0 1px var(--text-edge);

    /* Easing curves · spring-friendly */
    --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
    --ease-stripe:    cubic-bezier(0.32, 0.72, 0, 1);

    /* Transitions reutilizables */
    --t-fast:         150ms var(--ease-out-quart);
    --t-base:         280ms var(--ease-stripe);
    --t-slow:         600ms var(--ease-out-expo);

    /* Layout · container y secciones */
    --container-max:  1320px;
    --container-px:   clamp(1.25rem, 4vw, 3rem);
    --section-py:     clamp(5rem, 10vw, 9rem);

    /* Z-index scale · disciplinado */
    --z-base:         1;
    --z-elevated:     10;
    --z-sticky:       80;
    --z-topbar:       100;
    --z-overlay:      200;
    --z-modal:        300;
}


/* ===== 3. BASE · TIPOGRAFÍA Y CUERPO ======================================= */

html, body {
    height: 100%;
}

body {
    min-height: 100dvh;
    margin: 0;
    background-color: var(--bg-base);
    color: var(--text);
    font-family: var(--font-display);
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.55;
    letter-spacing: -0.005em;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--text);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 700;
}

h2 {
    font-size: var(--text-3xl);
    font-weight: 700;
}

h3 {
    font-size: var(--text-2xl);
    font-weight: 600;
}

h4 {
    font-size: var(--text-xl);
    font-weight: 600;
}

p {
    line-height: 1.65;
    text-wrap: pretty;
}

.lead {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 62ch;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

::selection {
    background-color: rgba(79, 181, 255, 0.32);
    color: var(--text);
}


/* ===== 4. LAYOUT PRIMITIVES ================================================ */

.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-px);
}

.section {
    padding-block: var(--section-py);
    position: relative;
}

.section--narrow {
    padding-block: clamp(3rem, 6vw, 5rem);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
}

.grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.grid-4 {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.stack-sm > * + * { margin-top: var(--space-2); }
.stack-md > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-8); }
.stack-xl > * + * { margin-top: var(--space-12); }


/* ===== 5. COMPONENTES BASE ================================================= */

/* --- Wordmark INGClean® ---------------------------------------------------- */

.brand {
    font-family: var(--font-brand);
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.01em;
    color: var(--text);
    display: inline;
}

.brand__reg {
    color: var(--brand-glow);
    font-size: 0.5em;
    vertical-align: super;
    font-weight: 400;
    font-style: normal;
    letter-spacing: 0;
    margin-inline-start: 0.05em;
}


/* --- Eyebrows · pill micro-label superior --------------------------------- */

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.eyebrow::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: var(--shadow-glow);
}

.eyebrow--plain::before {
    display: none;
}


/* --- Botones · primary y ghost, con button-in-button arrow ---------------- */

.btn {
    --btn-bg:           var(--brand);
    --btn-color:        var(--text);
    --btn-border:       transparent;
    --btn-arrow-bg:     var(--brand-deep);
    --btn-arrow-color:  var(--text);
    --btn-shadow:       var(--shadow-md);

    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-6);
    background-color: var(--btn-bg);
    color: var(--btn-color);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: var(--text-base);
    letter-spacing: -0.01em;
    text-decoration: none;
    box-shadow: var(--btn-shadow), var(--shadow-inset);
    transition: transform var(--t-base),
                background-color var(--t-base),
                box-shadow var(--t-base),
                color var(--t-base);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

.btn:hover {
    background-color: var(--brand-glow);
    box-shadow: var(--shadow-lg), var(--shadow-inset);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(1px);
    box-shadow: var(--shadow-sm), var(--shadow-inset);
}

.btn__label {
    line-height: 1;
}

.btn__arrow {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background-color: var(--btn-arrow-bg);
    color: var(--btn-arrow-color);
    transition: transform var(--t-base), background-color var(--t-base);
    flex-shrink: 0;
}

.btn__arrow svg {
    width: 16px;
    height: 16px;
}

.btn:hover .btn__arrow {
    transform: translateX(2px);
    background-color: rgba(255, 255, 255, 0.18);
}

/* Variante ghost · borde sutil, sin fill */
.btn-ghost {
    --btn-bg:           transparent;
    --btn-color:        var(--brand-glow);
    --btn-border:       rgba(79, 181, 255, 0.32);
    --btn-arrow-bg:     rgba(79, 181, 255, 0.12);
    --btn-arrow-color:  var(--brand-glow);
    --btn-shadow:       none;
}

.btn-ghost:hover {
    background-color: rgba(79, 181, 255, 0.08);
    color: var(--text);
    box-shadow: var(--shadow-glow);
    --btn-arrow-color: var(--text);
}

/* Variante small */
.btn-sm {
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    font-size: var(--text-sm);
}

.btn-sm .btn__arrow {
    width: 24px;
    height: 24px;
}

.btn-sm .btn__arrow svg {
    width: 12px;
    height: 12px;
}


/* --- Tarjeta-pilar con doppelrand (doble borde anidado) ------------------ */

.pillar-card {
    background-color: var(--bg-elev);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.pillar-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-edge), var(--shadow-lg);
}

.pillar-card__inner {
    background-color: var(--bg-layer);
    border-radius: calc(var(--radius-xl) - 6px);
    padding: var(--space-8);
    height: 100%;
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.pillar-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(42, 141, 255, 0.18), rgba(0, 229, 255, 0.08));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-glow);
}

.pillar-card__title {
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: 1.2;
}

.pillar-card__body {
    color: var(--text-muted);
    line-height: 1.6;
    font-size: var(--text-base);
}


/* --- Form fields · label arriba, error abajo ----------------------------- */

.form-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.form-field__label {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0;
}

.form-field__label--required::after {
    content: ' *';
    color: var(--brand-glow);
}

.form-field__input,
.form-field__select,
.form-field__textarea {
    width: 100%;
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    color: var(--text);
    font-size: var(--text-base);
    transition: border-color var(--t-base), background-color var(--t-base), box-shadow var(--t-base);
}

/* Select dark mode · color-scheme dice al browser que es un widget oscuro
   (scrollbar, focus ring del SO se renderizan dark). Appearance:none nos
   permite reemplazar el chevron nativo con un SVG inline coherente.        */
.form-field__select {
    color-scheme: dark;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%234FB5FF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    background-size: 12px;
    padding-right: calc(var(--space-4) + 20px);
    cursor: pointer;
}

/* Options · styling explícito para que el dropdown se vea dark en Chrome/Edge/Firefox
   (Safari iOS tiene un dropdown del sistema con styling limitado · color-scheme ayuda). */
.form-field__select option {
    background-color: var(--bg-layer);
    color: var(--text);
    padding: 8px 12px;
}

.form-field__select option[value=""],
.form-field__select option:disabled {
    color: var(--text-dim);
}

.form-field__input::placeholder,
.form-field__textarea::placeholder {
    color: var(--text-dim);
}

.form-field__input:hover,
.form-field__select:hover,
.form-field__textarea:hover {
    border-color: rgba(79, 181, 255, 0.32);
}

.form-field__input:focus,
.form-field__select:focus,
.form-field__textarea:focus {
    outline: none;
    border-color: var(--brand-glow);
    background-color: var(--bg-elev-2);
    box-shadow: 0 0 0 4px rgba(79, 181, 255, 0.12);
}

.form-field__helper {
    font-size: var(--text-xs);
    color: var(--text-dim);
}

.form-field__error {
    font-size: var(--text-xs);
    color: var(--danger);
    display: none;
}

.form-field.is-invalid .form-field__input,
.form-field.is-invalid .form-field__select,
.form-field.is-invalid .form-field__textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(255, 84, 112, 0.12);
}

.form-field.is-invalid .form-field__error {
    display: block;
}

/* Honeypot · oculto visualmente y para asistencia, no tabable */
.honeypot {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== 6. TOPBAR FLOTANTE ================================================= */

.topbar {
    position: fixed;
    top: clamp(0.75rem, 2vw, 1.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: var(--z-topbar);
    width: calc(100% - 1.5rem);
    max-width: 1180px;
    padding: var(--space-2) var(--space-4);
    background-color: rgba(10, 18, 40, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-md), var(--shadow-edge);
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-height: 44px;
}

.topbar__brand {
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--text);
    text-decoration: none;
    transition: opacity var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: 1.125rem;  /* 18px · separación entre logo y wordmark, respira mejor */
}

.topbar__brand:hover {
    opacity: 0.85;
}

/* Logo PNG en el topbar · cuadrado · width/height fijo evita layout shift */
.topbar__logo {
    width: 40px;
    height: 40px;
    flex-shrink: 0;          /* no se comprime aunque el wordmark presione */
    display: block;
}

/* Wordmark texto · se oculta en pantallas muy chicas (≤400px) para que el
   logo solo lleve el branding sin saturar la barra. Mantiene a11y porque
   el <a> sigue teniendo aria-label="brand_home". */
.topbar__wordmark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

@media (max-width: 400px) {
    .topbar__wordmark {
        display: none;
    }
}


/* --- Lang toggle · pequeño selector ES/EN -------------------------------- */

.lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    list-style: none;
    padding: 0;
}

.lang-toggle__btn {
    color: var(--text-muted);
    text-decoration: none;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: color var(--t-fast), background-color var(--t-fast);
}

.lang-toggle__btn:hover {
    color: var(--text);
}

.lang-toggle__btn.is-active {
    color: var(--cyan);
    background-color: rgba(0, 229, 255, 0.08);
}

.lang-toggle__sep {
    color: var(--text-dim);
    user-select: none;
}


/* ===== 7. SITE FOOTER ===================================================== */

.site-footer {
    position: relative;
    margin-top: var(--space-32);
    padding-top: clamp(4rem, 8vw, 7rem);
    padding-bottom: var(--space-10);
    background-color: var(--bg-deep);
    color: var(--text-muted);
    z-index: var(--z-base);
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(79, 181, 255, 0.32) 30%,
        rgba(0, 229, 255, 0.45) 50%,
        rgba(79, 181, 255, 0.32) 70%,
        transparent 100%);
}

/* --- Anclas de marca · cobertura geográfica + alcance del servicio ----- */

.site-footer__anchors {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-bottom: var(--space-12);
    border-bottom: 1px solid var(--text-edge);
}

.anchor-block {
    padding: var(--space-6) var(--space-6);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inset);
}

.anchor-block__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-3);
}

.anchor-block__text {
    font-size: var(--text-lg);
    color: var(--text);
    line-height: 1.45;
    text-wrap: balance;
}


/* --- Audience splitter CTA ------------------------------------------------ */

.site-footer__cta {
    padding-block: clamp(3rem, 6vw, 5rem);
    text-align: center;
}

.site-footer__cta-title {
    font-size: var(--text-3xl);
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--space-3);
    text-wrap: balance;
}

.site-footer__cta-sub {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 52ch;
    margin: 0 auto var(--space-8);
    line-height: 1.55;
}

.site-footer__cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
}


/* --- Tres columnas: nav rápida · legal · contacto ------------------------ */

.site-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    padding-block: var(--space-10);
    border-top: 1px solid var(--text-edge);
    border-bottom: 1px solid var(--text-edge);
}

.footer-column__title {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: var(--space-4);
}

.footer-column__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.footer-column__link {
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--t-fast);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.footer-column__link:hover {
    color: var(--text);
}

.footer-column__city {
    color: var(--text-dim);
    font-size: var(--text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

/* Indicador de email pendiente · línea punteada sutil bajo el link */
.footer-column__link[data-pending="true"] {
    border-bottom: 1px dashed rgba(79, 181, 255, 0.32);
    padding-bottom: 1px;
}


/* --- Línea final: copyright + redes sociales ----------------------------- */

.site-footer__bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    padding-top: var(--space-8);
}

/* Brand block del footer · logo + copyright apilados en mobile, lado a lado
   en desktop (el media-query de site-footer__bottom flex-row lo cubre). */
.site-footer__brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Logo PNG del footer · 56px alto (entre 48-64 según pediste).
   width auto preserva aspect ratio del PNG 126×128. */
.site-footer__logo {
    height: 56px;
    width: auto;
    display: block;
    opacity: 0.85;             /* sutil descuento del brillo en footer */
    transition: opacity var(--t-fast);
}

.site-footer__logo:hover {
    opacity: 1;
}

.site-footer__copyright {
    font-size: var(--text-sm);
    color: var(--text-dim);
    text-align: center;
    margin: 0;
}

.site-footer__socials {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    border-radius: var(--radius-pill);
    transition: color var(--t-fast), background-color var(--t-fast), transform var(--t-fast);
}

.social-link svg {
    width: 18px;
    height: 18px;
}

.social-link:hover {
    color: var(--brand-glow);
    background-color: rgba(79, 181, 255, 0.08);
    transform: translateY(-1px);
}

/* Placeholder pendiente · cursor de aviso sutil */
.social-link[data-pending="true"] {
    opacity: 0.78;
}


/* ===== 8. ACCESIBILIDAD ==================================================== */

.skip-link {
    position: absolute;
    top: -100px;
    left: var(--space-4);
    z-index: var(--z-modal);
    background-color: var(--brand);
    color: var(--text);
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: var(--text-sm);
    text-decoration: none;
    transition: top var(--t-fast);
}

.skip-link:focus {
    top: var(--space-4);
}

.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ===== 9. EFECTOS AMBIENTALES · grid 3D + HUD corners ===================== */

.bg-grid {
    position: fixed;
    inset: -15% -15%;
    z-index: -1;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(79, 181, 255, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79, 181, 255, 0.06) 1px, transparent 1px);
    background-size: 72px 72px;
    background-position: center;
    transform-origin: 50% 50%;
    transform: perspective(1400px) rotateX(56deg) translateZ(-220px) scale(1);
    -webkit-mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 50%, transparent 100%);
            mask-image: radial-gradient(ellipse 85% 65% at 50% 40%, #000 50%, transparent 100%);
    animation: bg-grid-breathe 8s ease-in-out infinite;
    will-change: transform, opacity;
}

@keyframes bg-grid-breathe {
    0%, 100% {
        transform: perspective(1400px) rotateX(56deg) translateZ(-220px) scale(1);
        opacity: 0.7;
    }
    50% {
        transform: perspective(1400px) rotateX(56deg) translateZ(-220px) scale(1.04);
        opacity: 0.95;
    }
}

/* HUD corners · marcos de las cuatro esquinas, decorativos */

.hud-corners {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: var(--z-base);
}

.hud-corner {
    position: absolute;
    width: 28px;
    height: 28px;
    border-color: rgba(79, 181, 255, 0.45);
    border-style: solid;
    border-width: 0;
}

.hud-corner--tl {
    top: clamp(0.75rem, 2vw, 1.5rem);
    left: clamp(0.75rem, 2vw, 1.5rem);
    border-top-width: 1px;
    border-left-width: 1px;
}
.hud-corner--tr {
    top: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    border-top-width: 1px;
    border-right-width: 1px;
}
.hud-corner--bl {
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    left: clamp(0.75rem, 2vw, 1.5rem);
    border-bottom-width: 1px;
    border-left-width: 1px;
}
.hud-corner--br {
    bottom: clamp(0.75rem, 2vw, 1.5rem);
    right: clamp(0.75rem, 2vw, 1.5rem);
    border-bottom-width: 1px;
    border-right-width: 1px;
}


/* ===== 10. EFECTOS DE HERO · scan-line + matrix-rain ====================== */
/* Estos efectos se activan SOLO en heroes (no en pestañas internas) agregando
   las clases .with-scanline / .with-matrix al contenedor del hero.            */

.with-scanline {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.with-scanline::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(0, 229, 255, 0.18) 49%,
        rgba(0, 229, 255, 0.32) 50%,
        rgba(0, 229, 255, 0.18) 51%,
        transparent 100%);
    background-size: 100% 320px;
    background-repeat: no-repeat;
    background-position: 0 -320px;
    mix-blend-mode: screen;
    animation: scanline-sweep 7s linear infinite;
    z-index: 2;
}

@keyframes scanline-sweep {
    0%   { background-position: 0 -320px; }
    100% { background-position: 0 calc(100% + 320px); }
}

.with-matrix {
    position: relative;
    isolation: isolate;
}

.with-matrix::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='280' height='320'><text x='10' y='30' font-family='monospace' font-size='12' fill='%234FB5FF' opacity='0.55'>10110</text><text x='80' y='80' font-family='monospace' font-size='12' fill='%232A8DFF' opacity='0.45'>01001</text><text x='150' y='130' font-family='monospace' font-size='12' fill='%2300E5FF' opacity='0.35'>11010</text><text x='40' y='180' font-family='monospace' font-size='12' fill='%234FB5FF' opacity='0.5'>10011</text><text x='200' y='220' font-family='monospace' font-size='12' fill='%232A8DFF' opacity='0.45'>00110</text><text x='100' y='280' font-family='monospace' font-size='12' fill='%2300E5FF' opacity='0.4'>01101</text></svg>");
    background-repeat: repeat;
    opacity: 0.22;
    mix-blend-mode: screen;
    z-index: 1;
}


/* ===== 11. UTILIDADES ===================================================== */

.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }
.text-brand { color: var(--brand-glow); }
.text-cyan  { color: var(--cyan); }
.text-mono  { font-family: var(--font-mono); }

.mt-auto { margin-top: auto; }
.mb-auto { margin-bottom: auto; }


/* ===== 12. RESPONSIVE · mobile-first ====================================== */

@media (min-width: 640px) {
    .grid-2 { grid-template-columns: 1fr 1fr; }
    .site-footer__anchors { grid-template-columns: 1fr 1fr; }
    .site-footer__cta-buttons { flex-direction: row; }
}

@media (min-width: 768px) {
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }

    .site-footer__columns {
        grid-template-columns: 2fr 1fr 1.5fr;
        gap: var(--space-12);
    }

    .site-footer__bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    .site-footer__brand {
        flex-direction: row;     /* desktop: logo a la izq, copyright a la der */
        align-items: center;
        gap: 1rem;
    }

    .site-footer__copyright {
        text-align: start;
    }

    .topbar {
        padding: var(--space-2) var(--space-5);
    }
}

@media (min-width: 1024px) {
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ===== 13. MOTION REDUCTION · respetar accesibilidad ====================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .bg-grid {
        transform: perspective(1400px) rotateX(56deg) translateZ(-220px) scale(1);
        opacity: 0.7;
    }

    .with-scanline::after,
    .with-matrix::before {
        display: none;
    }
}


/* ===== 14. HOME NEUTRAL · hero · audience splitter · 4 pilares ============ */


/* --- 14.1 Hero principal ------------------------------------------------- */

.hero {
    position: relative;
    min-height: 90dvh;
    display: flex;
    align-items: center;
    /* Topbar (~52px) + nav-home sticky (~50px) + respiro · mismo clamp que .hero-page */
    padding-top: clamp(9rem, 16vw, 13rem);
    padding-bottom: var(--section-py);
    overflow: hidden;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;                /* todo el hero centrado horizontalmente */
    gap: var(--space-6);
    max-width: 980px;
    position: relative;
    z-index: 3;
}

/* Wrapper del bloque brand · contiene .hero__brand-row + .hero__brand-tagline.
   width:fit-content hace que el ancho del bloque se ajuste al hijo más ancho.
   Cuando el tagline mono wrappea a varias líneas (max-width 56ch), el block
   toma ese ancho y el tagline queda left-aligned al borde izquierdo (que es
   donde está la "I" del wordmark). Si el row es más ancho que el tagline, el
   block toma el ancho del row. En ambos casos: tagline alineado a la I.
   En mobile el block pasa a align-items: center (ver media query abajo). */
.hero__brand-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;            /* tagline alineado al borde izquierdo del bloque */
    width: fit-content;                 /* ancho = el del hijo más ancho */
    max-width: 100%;                    /* nunca desborda el .hero__inner */
}

/* Bloque brand del hero · <h1> que envuelve logo + wordmark inline.
   El font-size establecido acá da el contexto em para el .hero__logo
   (height 1.05em) y el .hero__brand-wordmark (font-size 1em). */
.hero__brand-row {
    display: inline-flex;
    align-items: center;
    gap: clamp(1.25rem, 2.5vw, 1.75rem);   /* 20px → 28px responsive */
    font-size: var(--text-display);
    line-height: 0.95;
    margin: var(--space-2) 0 0;
}

/* Logo dentro del .hero__brand-row · height proporcional al font-size del
   padre (1em ≈ font-size). 1.05em da un bounding box ~1.46× del cap-height
   visible del wordmark (cap ≈ 0.72em del font), notoriamente más grande sin
   abrumar. width: auto preserva aspect ratio del PNG 504×512. */
.hero__logo {
    height: 1.05em;
    width: auto;
    flex-shrink: 0;
    display: block;
}

/* Wordmark text inline · usa el font-size del padre brand-row · estilos
   tipográficos del helper brand() (Plus Jakarta Sans 800) ya aplican desde
   la clase .brand del span devuelto por brand(). */
.hero__brand-wordmark {
    display: inline-flex;
    align-items: center;
    line-height: 1;
    font-size: 1em;
}

/* Tagline mono debajo del brand-row · uppercase con tracking ancho.
   Espacio sutil arriba (sigue al brand) y más espacio abajo (antes del heading
   grande con split por palabras). */
.hero__brand-tagline {
    /* Offset que alinea la "P" de PLATAFORMA con la "I" de INGClean.
       El brand-row de arriba es: [logo] [gap] [wordmark]. Para que el
       contenido del tagline arranque donde empieza el wordmark, le damos
       padding-left = (logo width) + (gap).
       - logo width = 1.05em × aspect 504/512 ≈ 1.033em del font-size
         del brand-row (var(--text-display) = clamp(3.5rem, 7vw, 7.5rem))
       - logo width en abs ≈ clamp(3.62rem, 7.24vw, 7.76rem)
       - gap = clamp(1.25rem, 2.5vw, 1.75rem)
       - total padding-left ≈ clamp(4.87rem, 9.74vw, 9.51rem)
       Como el font-size del tagline es muy distinto al del brand-row,
       NO podemos usar em adentro del tagline para igualar el offset.
       El clamp absoluto escala proporcionalmente con la misma curve. */
    padding-left: clamp(4.85rem, 9.74vw, 9.5rem);
    max-width: 720px;          /* ancho suficiente para acomodar la frase EN
                                  (88 chars uppercase + letter-spacing 0.14em)
                                  en 2 líneas balanceadas por text-wrap: balance */
    margin: 0.25rem 0 0;
    font-family: var(--font-mono);
    font-size: clamp(0.6875rem, 1.1vw, 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--text-muted);
    text-shadow: 0 0 14px rgba(42, 141, 255, 0.18);
    text-align: left;
    text-wrap: balance;
}

/* Mobile · el alignment a la "I" se vería raro en pantallas chicas.
   Centramos el bloque entero y el tagline · sin padding-left. */
@media (max-width: 600px) {
    .hero__brand-block {
        align-items: center;
    }
    .hero__brand-tagline {
        padding-left: 0;
        text-align: center;
    }
}

.hero__heading {
    font-size: clamp(1.875rem, 3.2vw, 2.875rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    max-width: 26ch;
    margin-top: var(--space-2);
    text-align: center;                      /* centra el texto dentro de su max-width */
    text-wrap: balance;
}

.hero__tagline {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.6;
    max-width: 60ch;
    text-align: center;                      /* centra el texto dentro de su max-width */
    text-wrap: pretty;
}

.hero__anchors {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    width: 100%;
}

.hero-anchor {
    padding: var(--space-5);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inset);
}

.hero-anchor__label {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    margin-bottom: var(--space-2);
}

.hero-anchor__text {
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
    text-wrap: balance;
}

.hero__cta {
    margin-top: var(--space-4);
}


/* --- 14.2 Audience splitter · header centrado --------------------------- */

.audience {
    padding-block: var(--section-py);
    position: relative;
}

.audience__header {
    text-align: center;
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.audience__title {
    font-size: clamp(2rem, 3.5vw, 2.875rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.audience__subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 52ch;
    text-wrap: pretty;
}

.audience__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}


/* --- 14.3 Tarjetas del audience splitter -------------------------------- */

.audience-card {
    --card-accent:        var(--brand);
    --card-accent-glow:   var(--brand-glow);
    --card-accent-soft:   rgba(42, 141, 255, 0.18);
    --card-accent-deep:   var(--brand-deep);

    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-8);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    text-decoration: none;
    color: var(--text);
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform var(--t-base),
                border-color var(--t-base),
                box-shadow var(--t-base);
    box-shadow: var(--shadow-inset);
}

.audience-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 100% 0%,
                var(--card-accent-soft) 0%,
                transparent 55%);
    opacity: 0;
    transition: opacity var(--t-base);
    pointer-events: none;
    z-index: -1;
}

.audience-card:hover {
    transform: translateY(-3px);
    border-color: var(--card-accent);
    box-shadow: var(--shadow-lg), var(--shadow-inset);
}

.audience-card:hover::before {
    opacity: 1;
}

.audience-card:focus-visible {
    outline: 2px solid var(--card-accent-glow);
    outline-offset: 4px;
}

.audience-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent-glow);
    background: linear-gradient(135deg,
                var(--card-accent-soft),
                rgba(0, 229, 255, 0.06));
    box-shadow: var(--shadow-inset);
}

.audience-card__icon svg {
    width: 28px;
    height: 28px;
}

.audience-card__title {
    font-size: var(--text-2xl);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.audience-card__desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.6;
    flex: 1;
}

.audience-card__arrow {
    align-self: flex-start;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-pill);
    background-color: var(--card-accent-deep);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--t-base), background-color var(--t-base);
    margin-top: var(--space-2);
}

.audience-card__arrow svg {
    width: 16px;
    height: 16px;
}

.audience-card:hover .audience-card__arrow {
    transform: translateX(4px);
    background-color: var(--card-accent);
}

/* Variante Partner · tinte emerald · diferencia visual respecto al Cliente */
.audience-card--partner {
    --card-accent:        var(--emerald);
    --card-accent-glow:   var(--emerald);
    --card-accent-soft:   rgba(0, 255, 163, 0.16);
    --card-accent-deep:   rgba(0, 80, 50, 0.7);
}


/* --- 14.4 Sección de los 4 pilares · header + grid ---------------------- */

.pillars {
    padding-block: var(--section-py);
    position: relative;
}

.pillars__header {
    text-align: center;
    max-width: 760px;
    margin-inline: auto;
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.pillars__title {
    font-size: clamp(2rem, 3.5vw, 2.875rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.pillars__lead {
    font-size: var(--text-lg);
    color: var(--text-muted);
    max-width: 62ch;
    text-wrap: pretty;
}

.pillars__grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

/* La clase base .pillar-card y .pillar-card__inner viven en sección 5.
   Acá ajustamos solo el ícono individual para más prominencia visual. */
.pillar-card__icon {
    width: 56px;
    height: 56px;
}

.pillar-card__icon svg {
    width: 28px;
    height: 28px;
}


/* --- 14.5 Responsive del Home neutral ----------------------------------- */

@media (min-width: 640px) {
    .hero__anchors {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 768px) {
    .audience__grid {
        grid-template-columns: 1fr 1fr;
    }
    .pillars__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .pillars__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* ===== 15. VISTA CLIENTE ================================================== */


/* --- 15.1 Nav contextual cliente · sticky bajo topbar ------------------- */

.nav-cliente {
    position: sticky;
    /* El topbar pill flota top clamp(0.75rem, 2vw, 1.5rem) con ~52px de alto.
       El nav-cliente se stickea unos 12-16px más abajo para no chocar.       */
    top: clamp(4.5rem, 9vw, 6rem);
    z-index: var(--z-sticky);
    padding: var(--space-3) 0;
    background-color: rgba(2, 4, 11, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--text-edge);
}

.nav-cliente__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav-cliente__badge {
    flex-shrink: 0;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(79, 181, 255, 0.32);
    border-radius: var(--radius-pill);
    background-color: rgba(42, 141, 255, 0.08);
    white-space: nowrap;
    line-height: 1;
}

.nav-cliente__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Mobile · fade edges para sugerir el scroll horizontal */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
}

.nav-cliente__list::-webkit-scrollbar {
    display: none;
}

.nav-cliente__item {
    flex-shrink: 0;
}

.nav-cliente__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: color var(--t-fast), background-color var(--t-fast);
    white-space: nowrap;
    position: relative;
}

.nav-cliente__link:hover {
    color: var(--text);
    background-color: rgba(79, 181, 255, 0.06);
}

.nav-cliente__link:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

/* Pestaña activa · selector semántico [aria-current="page"] · sin clase extra */
.nav-cliente__link[aria-current="page"] {
    color: var(--brand-glow);
    background-color: rgba(79, 181, 255, 0.10);
}

.nav-cliente__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--brand-glow);
    box-shadow: 0 0 8px rgba(79, 181, 255, 0.6);
}

/* Desktop · ya hay espacio para todas las pestañas, sacamos el mask de scroll */
@media (min-width: 768px) {
    .nav-cliente__list {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: visible;
        gap: var(--space-3);
    }
}


/* --- 15.1b Nav contextual HOME · 4 pestañas globales, sin badge -------- */
/* Mismo patrón que .nav-cliente__* (sticky, blur, brand-glow azul) pero
   sin badge y con justify-content: center para coherencia visual con el
   resto del home (todo centrado horizontalmente). */
.nav-home {
    position: sticky;
    top: clamp(4.5rem, 9vw, 6rem);
    z-index: var(--z-sticky);
    padding: var(--space-3) 0;
    background-color: rgba(2, 4, 11, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--text-edge);
}

.nav-home__inner {
    display: flex;
    align-items: center;
    justify-content: center;            /* 4 tabs centrados (vs flex-start de cliente/partner que tienen badge) */
}

.nav-home__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Mobile · fade edges para sugerir el scroll horizontal */
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
}

.nav-home__list::-webkit-scrollbar {
    display: none;
}

.nav-home__item {
    flex-shrink: 0;
}

.nav-home__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: color var(--t-fast), background-color var(--t-fast);
    white-space: nowrap;
    position: relative;
}

.nav-home__link:hover {
    color: var(--text);
    background-color: rgba(79, 181, 255, 0.06);
}

.nav-home__link:focus-visible {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

/* Pestaña activa · brand-glow azul + underline animado */
.nav-home__link[aria-current="page"] {
    color: var(--brand-glow);
    background-color: rgba(79, 181, 255, 0.10);
}

.nav-home__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--brand-glow);
    box-shadow: 0 0 8px rgba(79, 181, 255, 0.6);
}

/* Desktop · sacamos el mask del scroll horizontal (todo cabe) */
@media (min-width: 768px) {
    .nav-home__list {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: visible;
        gap: var(--space-3);
    }
}


/* --- 15.2 Hero específico de subpáginas · más sobrio que el home ------- */

.hero-page {
    position: relative;
    min-height: 70dvh;
    display: flex;
    align-items: center;
    /* Topbar (~52px) + nav-cliente sticky (~50px) + respiro · total clamp */
    padding-top: clamp(9rem, 16vw, 13rem);
    padding-bottom: var(--section-py);
}

.hero-page__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
    max-width: 880px;
    position: relative;
    z-index: 3;
}

.hero-page__heading {
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -0.02em;
    max-width: 14ch;
    text-wrap: balance;
}

.hero-page__subtitle {
    font-size: var(--text-xl);
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 58ch;
    text-wrap: pretty;
    margin-top: calc(var(--space-2) * -1);
}

.hero-page__cta {
    margin-top: var(--space-3);
}


/* --- 15.3 Zig-zag · 3 features alternados con visual decorativo ------- */

.features-zigzag {
    padding-block: var(--section-py);
}

.features-zigzag__header {
    max-width: 720px;
    margin-bottom: clamp(3rem, 6vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.features-zigzag__title {
    font-size: clamp(1.875rem, 3.5vw, 2.875rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.feature-block {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    align-items: center;
}

.feature-block + .feature-block {
    border-top: 1px solid var(--text-edge);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(3rem, 6vw, 5rem);
}

.feature-block__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56ch;
}

.feature-block__step {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.feature-block__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.feature-block__body {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.6;
    text-wrap: pretty;
}

.feature-block__visual {
    width: 100%;
}

/* Visual decorativo · doppelrand + SVG protagonista + chip de estado */

.feature-visual {
    position: relative;
    aspect-ratio: 1;
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    overflow: hidden;
    isolation: isolate;
}

.feature-visual::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--radius-xl) - 6px);
    background-color: var(--bg-layer);
    box-shadow: var(--shadow-inset);
    z-index: 0;
}

.feature-visual__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--brand-glow);
    padding: var(--space-6);
}

.feature-visual__chip {
    position: absolute;
    bottom: var(--space-5);
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--emerald);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: var(--space-2) var(--space-3);
    background-color: rgba(0, 255, 163, 0.10);
    border: 1px solid rgba(0, 255, 163, 0.32);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.feature-visual__chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.7);
}

@media (min-width: 768px) {
    .feature-block {
        grid-template-columns: 1fr 1fr;
        gap: clamp(3rem, 6vw, 5rem);
    }

    /* En la versión reverse, el visual va a la columna izquierda */
    .feature-block--reverse .feature-block__visual {
        order: -1;
    }
}


/* --- 15.3b CTA strip · cierre de página hacia contacto ---------------- */

.cta-strip {
    padding-block: var(--section-py);
}

.cta-strip__inner {
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 5vw, 4rem);
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    align-items: flex-start;
}

.cta-strip__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.cta-strip__subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 56ch;
    margin-top: var(--space-2);
}

@media (min-width: 768px) {
    .cta-strip__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
    }
}


/* --- 15.4 Steps timeline · pasos numerados con línea conectora vertical -- */

.steps {
    padding-block: var(--section-py);
}

.steps__list {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: step;
}

.step-block {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: var(--space-5);
    padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
    position: relative;
}

.step-block:last-child {
    padding-bottom: 0;
}

/* Línea SVG dashed conectando indicators · va del fondo del indicator
   anterior hasta el tope del siguiente. La hacemos con background gradient
   + background-size para emular dashed sin SVG real (más simple). */
.step-block:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 29px;
    bottom: 0;
    width: 2px;
    background-image: linear-gradient(to bottom,
        var(--brand-glow) 0%,
        var(--brand-glow) 50%,
        transparent 50%);
    background-size: 100% 12px;
    opacity: 0.4;
}

.step-indicator {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-pill);
    background-color: var(--bg-layer);
    border: 1px solid rgba(79, 181, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-inset), var(--shadow-sm);
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.step-indicator__number {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: 1.375rem;
    color: var(--brand-glow);
    letter-spacing: -0.01em;
    line-height: 1;
}

.step-block__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    padding-top: var(--space-3);
}

.step-block__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 56ch;
}

.step-block__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.step-block__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.step-block__body {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.6;
    text-wrap: pretty;
}

.step-block__visual {
    width: 100%;
}

@media (min-width: 768px) {
    .step-block {
        grid-template-columns: 80px 1fr;
        gap: var(--space-8);
    }

    .step-block:not(:last-child)::before {
        left: 39px;
    }

    .step-block__content {
        grid-template-columns: 1fr 1fr;
        gap: clamp(2.5rem, 5vw, 4rem);
        align-items: center;
    }

    /* En --reverse, el visual queda en la columna izquierda del content */
    .step-block--reverse .step-block__visual {
        order: -1;
    }

    .step-indicator {
        width: 80px;
        height: 80px;
    }

    .step-indicator__number {
        font-size: 1.625rem;
    }
}


/* --- 15.5 Hero con globe abstracto · porque.php ----------------------- */

.hero-page__inner--two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    max-width: 1200px;
}

.hero-page__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    align-items: flex-start;
}

.hero-page__visual {
    display: flex;
    justify-content: center;
    align-items: center;
}

.globe {
    position: relative;
    width: 280px;
    height: 280px;
    color: var(--brand-glow);
}

.globe__svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Pulse del núcleo central · cada 4s · sutil */
.globe__core {
    transform-box: fill-box;
    transform-origin: center;
    animation: globe-core-pulse 4s ease-in-out infinite;
}

@keyframes globe-core-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.08); opacity: 1;    }
}

/* Orbit de los nodos · 80s linear, muy lento, casi imperceptible.
   Rotamos alrededor del centro del SVG (180, 180) explícitamente. */
.globe__orbit {
    transform-origin: 180px 180px;
    animation: globe-orbit 80s linear infinite;
}

@keyframes globe-orbit {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .globe__core,
    .globe__orbit {
        animation: none;
    }
}

@media (min-width: 768px) {
    .hero-page__inner--two-col {
        grid-template-columns: 1.2fr 1fr;
    }
    .globe {
        width: 360px;
        height: 360px;
    }
}


/* --- 15.6 Bento asimétrico · 4 pilares + métricas --------------------- */

.bento {
    padding-block: var(--section-py);
}

.bento__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.bento__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.bento__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

/* Card base · doppelrand consistente con el resto del bloque */
.bento__card {
    background-color: var(--bg-elev);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    position: relative;
    overflow: hidden;
}

.bento__card-inner {
    background-color: var(--bg-layer);
    border-radius: calc(var(--radius-xl) - 6px);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    height: 100%;
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.bento__card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(42, 141, 255, 0.18), rgba(0, 229, 255, 0.08));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-glow);
    box-shadow: var(--shadow-inset);
}

.bento__card-icon svg {
    width: 28px;
    height: 28px;
}

.bento__card-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.bento__card-title {
    font-size: clamp(1.25rem, 2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.bento__card-body {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.6;
}

.bento__card-chip {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--emerald);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: 4px var(--space-3);
    background-color: rgba(0, 255, 163, 0.10);
    border: 1px solid rgba(0, 255, 163, 0.32);
    border-radius: var(--radius-pill);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: auto;
}

.bento__card-chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.7);
}

/* Hero card (pilar 1) · más prominente */
.bento__card--hero .bento__card-icon {
    width: 64px;
    height: 64px;
}

.bento__card--hero .bento__card-icon svg {
    width: 32px;
    height: 32px;
}

.bento__card--hero .bento__card-title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.bento__card-bullets {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.bento__card-bullets li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
}

.bento__card-bullets li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-color: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.45);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='%2300FFA3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

/* Métrica destacada dentro del pilar 1 */
.bento__card-metric {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--text-edge);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.bento__card-metric-cifra {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(2.25rem, 4vw, 3rem);
    color: var(--brand-glow);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bento__card-metric-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    line-height: 1.4;
}

/* Card de 4 métricas · grid interno 2x2 */
.bento__card--metrics .bento__card-inner {
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.bento__metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
    height: 100%;
}

.bento__metric {
    padding: var(--space-4);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    box-shadow: var(--shadow-inset);
    justify-content: center;
}

.bento__metric-cifra {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    color: var(--brand-glow);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bento__metric-label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    line-height: 1.4;
}

/* Bento responsive · simplificación progresiva entre breakpoints */

@media (min-width: 640px) {
    .bento__grid {
        grid-template-columns: 1fr 1fr;
    }
    .bento__card--hero {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .bento__grid {
        grid-template-columns: repeat(12, 1fr);
        grid-auto-flow: dense;
    }
    .bento__card--hero       { grid-column: span 8; grid-row: span 2; }
    .bento__card--gps        { grid-column: span 4; }
    .bento__card--background { grid-column: span 4; }
    .bento__card--payments   { grid-column: span 6; }
    .bento__card--metrics    { grid-column: span 6; }
}


/* --- 15.7 Visibility · texto + badges + mapa GPS ---------------------- */

.visibility {
    padding-block: var(--section-py);
}

.visibility__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
}

.visibility__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-width: 56ch;
}

.visibility__title {
    font-size: clamp(1.875rem, 3vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.visibility__body {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.6;
}

.badge-list {
    list-style: none;
    padding: 0;
    margin: var(--space-4) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.badge-list__item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.4;
}

.badge-list__check {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.45);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--emerald);
}

.badge-list__check svg {
    width: 12px;
    height: 12px;
}

/* Mapa GPS · card doppelrand con SVG decorativo + chip flotante */

.visibility__map {
    width: 100%;
}

.gps-map {
    position: relative;
    aspect-ratio: 1.15 / 1;
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    overflow: hidden;
    isolation: isolate;
}

.gps-map::before {
    content: '';
    position: absolute;
    inset: 6px;
    border-radius: calc(var(--radius-xl) - 6px);
    background-color: var(--bg-layer);
    box-shadow: var(--shadow-inset);
    z-index: 0;
}

.gps-map__svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    padding: var(--space-4);
    color: var(--brand-glow);
}

/* Pulse del pin destino · 2.5s ease-out, scale + fade */
.gps-map__pulse {
    transform-box: fill-box;
    transform-origin: center;
    animation: gps-pulse 2.5s ease-out infinite;
}

@keyframes gps-pulse {
    0%   { transform: scale(0.7); opacity: 0.6; }
    100% { transform: scale(2);   opacity: 0;   }
}

.gps-map__chip {
    position: absolute;
    top: var(--space-5);
    right: var(--space-5);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--emerald);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: var(--space-2) var(--space-3);
    background-color: rgba(0, 255, 163, 0.10);
    border: 1px solid rgba(0, 255, 163, 0.32);
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.gps-map__chip::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    .gps-map__pulse {
        animation: none;
    }
}

@media (min-width: 768px) {
    .visibility__layout {
        grid-template-columns: 1fr 1.1fr;
    }
}


/* --- 15.8 Antes y durante · 2 moment cards simétricas ---------------- */

.moments {
    padding-block: var(--section-py);
}

.moments__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.moments__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.moments__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.moment-card {
    background-color: var(--bg-elev);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    position: relative;
}

.moment-card__inner {
    background-color: var(--bg-layer);
    border-radius: calc(var(--radius-xl) - 6px);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    height: 100%;
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.moment-card__visual {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-glow);
    box-shadow: var(--shadow-inset);
}

.moment-card__visual svg {
    width: 40px;
    height: 40px;
}

.moment-card__label {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--brand-glow);
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

.moment-card__title {
    font-size: clamp(1.375rem, 2.5vw, 1.875rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.moment-card__items {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.moment-card__items li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.5;
}

.moment-card__items li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-color: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.45);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='%2300FFA3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .moments__grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* --- 15.9 Plataforma escalable · 4 features bottom ------------------- */

.platform {
    padding-block: var(--section-py);
}

.platform__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.platform__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.platform__subtitle {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 60ch;
}

.platform__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.platform-feature {
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--t-base), transform var(--t-base);
}

.platform-feature:hover {
    border-color: rgba(79, 181, 255, 0.32);
    transform: translateY(-2px);
}

.platform-feature__icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(42, 141, 255, 0.16), rgba(0, 229, 255, 0.06));
    color: var(--brand-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.platform-feature__icon svg {
    width: 22px;
    height: 22px;
}

.platform-feature__title {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.platform-feature__body {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.55;
}

@media (min-width: 640px) {
    .platform__grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1024px) {
    .platform__grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* --- 15.10 Servicios · Residencial · featured + grid 2x2 ----------- */

.residential {
    padding-block: var(--section-py);
}

.residential__header {
    max-width: 720px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.residential__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.residential__lead {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 60ch;
}

/* Featured · overview del residencial · doppelrand 2-col en desktop */

.residential-featured {
    background-color: var(--bg-elev);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.residential-featured__inner {
    background-color: var(--bg-layer);
    border-radius: calc(var(--radius-xl) - 6px);
    padding: clamp(1.75rem, 4vw, 3rem);
    box-shadow: var(--shadow-inset);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
    align-items: center;
}

.residential-featured__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.residential-featured__title {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.residential-featured__body {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.6;
}

.residential-featured__bullets {
    list-style: none;
    padding: 0;
    margin: var(--space-2) 0 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.residential-featured__bullets li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    font-size: var(--text-base);
    color: var(--text);
    line-height: 1.5;
}

.residential-featured__bullets li::before {
    content: '';
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 3px;
    background-color: rgba(0, 255, 163, 0.12);
    border: 1px solid rgba(0, 255, 163, 0.45);
    border-radius: 50%;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8l3 3 5-6' stroke='%2300FFA3' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-size: 12px;
    background-position: center;
    background-repeat: no-repeat;
}

.residential-featured__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--brand-glow);
}

.residential-featured__visual svg {
    width: 100%;
    height: auto;
    max-width: 280px;
}

/* Grid 2x2 de los 4 subtipos · cards compactas */

.residential-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.service-card {
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-inset);
    transition: border-color var(--t-base), transform var(--t-base);
}

.service-card:hover {
    border-color: rgba(79, 181, 255, 0.32);
    transform: translateY(-2px);
}

.service-card__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(42, 141, 255, 0.16), rgba(0, 229, 255, 0.06));
    color: var(--brand-glow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.service-card__icon svg {
    width: 26px;
    height: 26px;
}

.service-card__title {
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.service-card__body {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.55;
}

@media (min-width: 768px) {
    .residential-featured__inner {
        grid-template-columns: 1.4fr 1fr;
        gap: clamp(2rem, 5vw, 4rem);
    }
    .residential-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* --- 15.11 Servicios · Comercial · coming soon banner 2-col -------- */

.commercial {
    padding-block: var(--section-py);
}

.commercial__banner {
    background-color: var(--bg-deep);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: clamp(2rem, 5vw, 4rem);
    box-shadow: var(--shadow-inset);
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Subtle warm wash · señala "no es el principal pero está vivo" */
.commercial__banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg,
        transparent 0%,
        rgba(255, 181, 71, 0.04) 100%);
    pointer-events: none;
}

.commercial__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.commercial__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--warn);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    padding: var(--space-2) var(--space-3);
    background-color: rgba(255, 181, 71, 0.08);
    border: 1px solid rgba(255, 181, 71, 0.32);
    border-radius: var(--radius-pill);
}

.commercial__badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
    box-shadow: 0 0 8px rgba(255, 181, 71, 0.6);
}

.commercial__title {
    font-size: clamp(1.875rem, 3.5vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-wrap: balance;
    color: var(--text);
    opacity: 0.92;
}

.commercial__body {
    font-size: var(--text-lg);
    color: var(--text-muted);
    line-height: 1.55;
    max-width: 56ch;
}

.commercial__cta {
    margin-top: var(--space-3);
}

.commercial__visual {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

.commercial__visual svg {
    width: 100%;
    height: auto;
    max-width: 220px;
    opacity: 0.7;
}

@media (min-width: 768px) {
    .commercial__banner {
        grid-template-columns: 1.4fr 1fr;
    }
    .commercial__visual svg {
        max-width: 240px;
    }
}


/* --- 15.12 Contact · form 2-col layout + componentes de input ------- */

.contact {
    padding-block: var(--section-py);
}

.contact-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    align-items: start;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 4vw, 2.5rem);
    box-shadow: var(--shadow-inset);
}

.contact-form__title {
    font-size: clamp(1.375rem, 2.2vw, 1.625rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    margin-bottom: var(--space-2);
}

.contact-form__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.contact-form__submit {
    align-self: flex-start;
    margin-top: var(--space-2);
}

.form-required-note {
    font-size: var(--text-xs);
    color: var(--text-dim);
    margin: 0;
    font-style: italic;
}


/* Fieldset · contenedor de radios sin border-default del navegador */

.form-fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.form-fieldset legend {
    /* legend reusa estilo de form-field__label */
    padding: 0;
}


/* Radios estilizados como pills con :has() · CSS moderno */

.form-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.form-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background-color: var(--bg-elev-2);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: border-color var(--t-fast), background-color var(--t-fast);
    position: relative;
}

.form-radio:hover {
    border-color: rgba(79, 181, 255, 0.32);
}

.form-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-radio:has(input:checked) {
    border-color: var(--brand-glow);
    background-color: rgba(79, 181, 255, 0.10);
}

.form-radio:has(input:focus-visible) {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

.form-radio__label {
    font-size: var(--text-sm);
    color: var(--text);
    line-height: 1;
}


/* Checkbox de consentimiento · estilo custom */

.form-field--checkbox {
    gap: var(--space-2);
}

.form-checkbox {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
    line-height: 1.5;
    position: relative;
}

.form-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-checkbox__box {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background-color: var(--bg-elev-2);
    border: 1px solid var(--text-line);
    border-radius: 4px;
    position: relative;
    transition: border-color var(--t-fast), background-color var(--t-fast);
}

.form-checkbox:has(input:checked) .form-checkbox__box {
    background-color: var(--brand);
    border-color: var(--brand);
}

.form-checkbox:has(input:checked) .form-checkbox__box::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 5px;
    height: 10px;
    border: solid var(--text);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.form-checkbox:has(input:focus-visible) .form-checkbox__box {
    outline: 2px solid var(--brand-glow);
    outline-offset: 2px;
}

.form-checkbox__label {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.5;
}


/* Form message · success / info / error (lo emite lead-form.js) */

.form-message {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    line-height: 1.5;
    display: none;
}

.form-message.is-success {
    display: block;
    background-color: rgba(0, 255, 163, 0.10);
    border: 1px solid rgba(0, 255, 163, 0.32);
    color: var(--success);
}

.form-message.is-info {
    display: block;
    background-color: rgba(79, 181, 255, 0.10);
    border: 1px solid rgba(79, 181, 255, 0.32);
    color: var(--brand-glow);
}

.form-message.is-error {
    display: block;
    background-color: rgba(255, 84, 112, 0.10);
    border: 1px solid rgba(255, 84, 112, 0.32);
    color: var(--danger);
}


/* Submit en estado loading · sutil con opacity, sin spinner extra */

.btn.is-loading {
    opacity: 0.78;
    pointer-events: none;
    cursor: wait;
}


/* --- 15.13 Contact · trust sidebar (sticky desktop) + escape hatch -- */

.contact-sidebar {
    width: 100%;
}

.contact-sidebar__inner {
    background-color: var(--bg-elev);
    border: 1px solid var(--text-line);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contact-sidebar__title {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.contact-sidebar__subtitle {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: 1.55;
    margin: calc(var(--space-2) * -1) 0 var(--space-1);
}

.contact-sidebar__escape {
    margin-top: var(--space-3);
    padding-top: var(--space-4);
    border-top: 1px dashed var(--text-edge);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.contact-sidebar__escape-text {
    font-size: var(--text-xs);
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    font-family: var(--font-mono);
    margin: 0;
}

.contact-sidebar__escape-link {
    color: var(--brand-glow);
    text-decoration: none;
    font-size: var(--text-sm);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    transition: color var(--t-fast);
}

.contact-sidebar__escape-link:hover {
    color: var(--text);
}

.contact-sidebar__escape-link svg {
    width: 14px;
    height: 14px;
}


/* Aria-invalid styling · refuerzo a11y · selector más fuerte que .is-invalid */

[aria-invalid="true"].form-field__input,
[aria-invalid="true"].form-field__select,
[aria-invalid="true"].form-field__textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 4px rgba(255, 84, 112, 0.12);
}


/* Responsive del contact layout */

@media (min-width: 640px) {
    .contact-form__row {
        grid-template-columns: 1fr 1fr;
    }
    .contact-form__row--phone {
        grid-template-columns: 110px 1fr;
    }
}

@media (min-width: 1024px) {
    .contact-layout {
        grid-template-columns: 2fr 1fr;
        gap: var(--space-10);
    }
    .contact-sidebar {
        position: sticky;
        top: clamp(7rem, 12vw, 9rem);
    }
}


/* ===== 16. VISTA PARTNER ================================================== */
/* Identidad emerald (#00FFA3) scoped a body.section-partner. La marca global
   INGClean® (topbar, HUD corners, bg-grid, footer) mantiene brand-glow azul. */


/* --- 16.1 Nav contextual partner · espejo de nav-cliente con tinte emerald -- */

.nav-partner {
    position: sticky;
    top: clamp(4.5rem, 9vw, 6rem);
    z-index: var(--z-sticky);
    padding: var(--space-3) 0;
    background-color: rgba(2, 4, 11, 0.72);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--text-edge);
}

.nav-partner__inner {
    display: flex;
    align-items: center;
    gap: var(--space-5);
}

.nav-partner__badge {
    flex-shrink: 0;
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--emerald);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(0, 255, 163, 0.32);
    border-radius: var(--radius-pill);
    background-color: rgba(0, 255, 163, 0.08);
    white-space: nowrap;
    line-height: 1;
}

.nav-partner__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--space-2);
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
            mask-image: linear-gradient(to right,
        transparent 0,
        #000 12px,
        #000 calc(100% - 12px),
        transparent 100%);
}

.nav-partner__list::-webkit-scrollbar {
    display: none;
}

.nav-partner__item {
    flex-shrink: 0;
}

.nav-partner__link {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
    border-radius: var(--radius-pill);
    transition: color var(--t-fast), background-color var(--t-fast);
    white-space: nowrap;
    position: relative;
}

.nav-partner__link:hover {
    color: var(--text);
    background-color: rgba(0, 255, 163, 0.06);
}

.nav-partner__link:focus-visible {
    outline: 2px solid var(--emerald);
    outline-offset: 2px;
}

.nav-partner__link[aria-current="page"] {
    color: var(--emerald);
    background-color: rgba(0, 255, 163, 0.10);
}

.nav-partner__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -6px;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    border-radius: var(--radius-pill);
    background-color: var(--emerald);
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.6);
}

@media (min-width: 768px) {
    .nav-partner__list {
        -webkit-mask-image: none;
                mask-image: none;
        overflow-x: visible;
        gap: var(--space-3);
    }
}


/* --- 16.2 Overrides emerald scoped a body.section-partner ----------------- */
/* Identificadores visuales del POV partner. La marca global INGClean® (topbar,
   bg-grid, HUD corners, footer) mantiene brand-glow azul intacto. */

body.section-partner .eyebrow {
    color: var(--emerald);
}

body.section-partner .feature-block__step {
    color: var(--emerald);
}

body.section-partner .hero-anchor__label {
    color: var(--emerald);
}

body.section-partner .feature-visual__svg {
    color: var(--emerald);
}

/* CTA primary en vista partner · fill emerald, texto oscuro alto contraste,
   círculo de la flecha en fondo oscuro semitransparente con flecha emerald. */
body.section-partner .btn-primary {
    --btn-bg:           var(--emerald);
    --btn-color:        var(--bg-base);
    --btn-arrow-bg:     rgba(2, 4, 11, 0.75);
    --btn-arrow-color:  var(--emerald);
    --btn-shadow:       0 12px 32px rgba(0, 80, 50, 0.32);
}

body.section-partner .btn-primary:hover {
    background-color: #00ffd4;
    box-shadow: 0 32px 80px rgba(0, 80, 50, 0.45), var(--shadow-inset);
}

body.section-partner .btn-primary:hover .btn__arrow {
    background-color: rgba(0, 0, 0, 0.88);
    transform: translateX(2px);
}

body.section-partner .btn-primary:active {
    background-color: var(--emerald);
}


/* --- 16.3 Steps timeline · overrides emerald para vista partner ---------- */
/* Solo cambia color/border/línea conectora · misma estructura del cliente. */

body.section-partner .step-indicator {
    border-color: rgba(0, 255, 163, 0.4);
}

body.section-partner .step-indicator__number {
    color: var(--emerald);
}

body.section-partner .step-block__label {
    color: var(--emerald);
}

/* Línea dashed vertical entre indicators · emerald scoped */
body.section-partner .step-block:not(:last-child)::before {
    background-image: linear-gradient(to bottom,
        var(--emerald) 0%,
        var(--emerald) 50%,
        transparent 50%);
}


/* --- 16.4 Página porque · overrides emerald scoped partner ---------------- */
/* Globe, mapa GPS, bento card icons, métricas, plataforma features y moments
   visuals cambian a tinte emerald cuando body tiene section-partner. */

body.section-partner .globe {
    color: var(--emerald);
}

body.section-partner .gps-map__svg {
    color: var(--emerald);
}

body.section-partner .bento__card-icon {
    color: var(--emerald);
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.18), rgba(0, 229, 255, 0.08));
}

body.section-partner .pillar-card__icon {
    color: var(--emerald);
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.18), rgba(0, 229, 255, 0.08));
}

body.section-partner .bento__card-metric-cifra,
body.section-partner .bento__metric-cifra {
    color: var(--emerald);
}

body.section-partner .platform-feature__icon {
    color: var(--emerald);
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.16), rgba(0, 229, 255, 0.06));
}

body.section-partner .platform-feature:hover {
    border-color: rgba(0, 255, 163, 0.32);
}

body.section-partner .moment-card__visual {
    color: var(--emerald);
}


/* --- 16.5 Página requisitos · 3 grupos doppelrand + transparency note ---- */
/* Página única del Bloque 4 sin equivalente en cliente · solo aparece bajo
   body.section-partner, así que los colores emerald van hardcoded acá.    */

.requisitos {
    padding-block: var(--section-py);
}

.requisitos__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-5);
}

/* Card · doppelrand consistente con bento/audience/moment del bloque */
.requisitos__card {
    background-color: var(--bg-elev);
    border-radius: var(--radius-xl);
    padding: 6px;
    box-shadow: var(--shadow-edge);
    position: relative;
}

.requisitos__card-inner {
    background-color: var(--bg-layer);
    border-radius: calc(var(--radius-xl) - 6px);
    padding: clamp(1.5rem, 3vw, 2.25rem);
    height: 100%;
    box-shadow: var(--shadow-inset);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.requisitos__card-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.18), rgba(0, 229, 255, 0.08));
    color: var(--emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-inset);
}

.requisitos__card-icon svg {
    width: 28px;
    height: 28px;
}

.requisitos__card-title {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.requisitos__card-desc {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.55;
    text-wrap: pretty;
}

/* La lista de items usa .badge-list existente · solo ajustamos margen */
.requisitos__card .badge-list {
    margin-top: var(--space-2);
    gap: var(--space-3);
}

@media (min-width: 1024px) {
    .requisitos__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
        align-items: stretch;
    }
}


/* --- 16.5b · Transparency note · banner sutil con icon info emerald ----- */

.transparency {
    padding-block: clamp(2rem, 5vw, 4rem);
}

.transparency-note {
    display: flex;
    gap: var(--space-5);
    align-items: flex-start;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background-color: var(--bg-elev);
    border: 1px dashed rgba(0, 255, 163, 0.32);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-inset);
}

.transparency-note__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0, 255, 163, 0.18), rgba(0, 229, 255, 0.08));
    color: var(--emerald);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.transparency-note__icon svg {
    width: 22px;
    height: 22px;
}

.transparency-note__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.transparency-note__eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--emerald);
    text-transform: uppercase;
    letter-spacing: 0.18em;
}

.transparency-note__body {
    font-size: var(--text-base);
    color: var(--text-muted);
    line-height: 1.6;
    text-wrap: pretty;
    margin: 0;
}


/* --- 16.6 Contacto partner · overrides emerald scoped del form + sidebar -- */

/* Asterisco * de campo requerido · brand → emerald en partner */
body.section-partner .form-field__label--required::after {
    color: var(--emerald);
}

/* Focus de inputs · borde emerald + box-shadow emerald */
body.section-partner .form-field__input:focus,
body.section-partner .form-field__select:focus,
body.section-partner .form-field__textarea:focus {
    border-color: var(--emerald);
    box-shadow: 0 0 0 4px rgba(0, 255, 163, 0.12);
}

/* Hover de inputs · border emerald sutil */
body.section-partner .form-field__input:hover,
body.section-partner .form-field__select:hover,
body.section-partner .form-field__textarea:hover {
    border-color: rgba(0, 255, 163, 0.32);
}

/* Chevron SVG del select · emerald (era brand-glow azul) */
body.section-partner .form-field__select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'><path d='M1 1l5 5 5-5' stroke='%2300FFA3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

/* Radio pills · hover, checked y focus → emerald */
body.section-partner .form-radio:hover {
    border-color: rgba(0, 255, 163, 0.32);
}

body.section-partner .form-radio:has(input:checked) {
    border-color: var(--emerald);
    background-color: rgba(0, 255, 163, 0.10);
}

body.section-partner .form-radio:has(input:focus-visible) {
    outline: 2px solid var(--emerald);
}

/* Checkbox consent · cuando checked, bg emerald (en lugar de brand) */
body.section-partner .form-checkbox:has(input:checked) .form-checkbox__box {
    background-color: var(--emerald);
    border-color: var(--emerald);
}

/* Color del check tick adentro del checkbox · contraste con emerald */
body.section-partner .form-checkbox:has(input:checked) .form-checkbox__box::after {
    border-color: var(--bg-base);
}

body.section-partner .form-checkbox:has(input:focus-visible) .form-checkbox__box {
    outline: 2px solid var(--emerald);
}

/* Link del escape hatch · emerald */
body.section-partner .contact-sidebar__escape-link {
    color: var(--emerald);
}


/* ===== 17. LEGAL · Privacy Policy ========================================= */
/* Página /legal/privacy.php · wrapper visual del documento exigido por App
   Store y Play. Layout 2-col en desktop (TOC sticky + prose 65ch), 1-col en
   mobile sin TOC. Sin tinte emerald: el legal es neutral (brand-glow azul). */


/* --- 17.1 · Hero compacto del legal --------------------------------------- */
/* Solo eyebrow + título + fecha. Sin doppelrand, sin CTA. El padding-top
   compensa la topbar fija para que el h1 no quede tapado al entrar. */
.legal-hero {
    padding: clamp(7rem, 12vw, 9rem) 0 clamp(2rem, 4vw, 3rem);
    border-bottom: 1px solid var(--border-soft);
}

.legal-hero__title {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0.5rem 0 1rem;
    color: var(--text-primary);
}

.legal-hero__date {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

.legal-hero__date-label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.legal-hero__date-value {
    color: var(--text-secondary);
}


/* --- 17.2 · Layout 2-col · TOC sticky + prose ----------------------------- */
.legal {
    padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
}

.legal__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 1024px) {
    .legal__layout {
        grid-template-columns: 240px 1fr;
        gap: 4rem;
        align-items: start;
    }
}


/* --- 17.3 · TOC sidebar · sticky en desktop, oculto mobile --------------- */
.legal__toc {
    display: none;
}

@media (min-width: 1024px) {
    .legal__toc {
        display: block;
        position: sticky;
        top: 6rem;
        max-height: calc(100vh - 8rem);
        overflow-y: auto;
    }
}

.legal__toc-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0 0 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-soft);
}

.legal__toc-list {
    list-style: none;
    counter-reset: toc;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.legal__toc-list li {
    counter-increment: toc;
}

.legal__toc-link {
    display: block;
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.375rem 0;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.legal__toc-link::before {
    content: counter(toc, decimal-leading-zero) " · ";
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--text-muted);
}

.legal__toc-link:hover,
.legal__toc-link:focus-visible {
    color: var(--brand);
    outline: none;
}


/* --- 17.4 · Prose body · 65ch + line-height holgado --------------------- */
.legal__prose {
    max-width: 65ch;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1rem;
}

.legal__intro {
    color: var(--text-muted);
    font-size: 1.0625rem;
    margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
    padding-bottom: clamp(2rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--border-soft);
}


/* --- 17.5 · Secciones · scroll-margin para anchor jumps ----------------- */
.legal__section {
    margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
    scroll-margin-top: 6rem;
}

.legal__section:last-of-type {
    margin-bottom: 0;
}

.legal__section p {
    margin: 0 0 1rem;
}

.legal__section p:last-child {
    margin-bottom: 0;
}

.legal__heading {
    font-family: var(--font-brand);
    font-weight: 800;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    margin: 0 0 1.25rem;
}


/* --- 17.6 · Listas · bullets dots emerald minimalistas ----------------- */
.legal__list {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.legal__list li {
    position: relative;
    padding-left: 1.5rem;
    line-height: 1.7;
}

.legal__list li::before {
    content: "";
    position: absolute;
    left: 0.25rem;
    top: 0.7rem;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--emerald);
    box-shadow: 0 0 8px rgba(0, 255, 163, 0.5);
}


/* --- 17.7 · Bloque de contacto destacado · sección 10 ----------------- */
.legal__contact {
    margin-top: 1.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border: 1px solid rgba(0, 255, 163, 0.18);
    border-radius: 0.75rem;
    background-color: rgba(0, 255, 163, 0.04);
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.legal__contact-row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

@media (min-width: 600px) {
    .legal__contact-row {
        flex-direction: row;
        gap: 1rem;
        align-items: baseline;
    }
}

.legal__contact-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--emerald);
    flex-shrink: 0;
    min-width: 5.5rem;
}

.legal__contact-value {
    color: var(--text-primary);
    text-decoration: none;
    word-break: break-all;
    transition: color 0.15s ease;
}

.legal__contact-value:hover,
.legal__contact-value:focus-visible {
    color: var(--emerald);
    outline: none;
}

/* Email con casilla aún no creada · mismo treatment que el footer */
.legal__contact-value[data-pending="true"] {
    text-decoration: underline dashed;
    text-underline-offset: 4px;
    cursor: help;
}


/* --- 17.8 · Responsive overrides para mobile --------------------------- */
@media (max-width: 1023px) {
    .legal__prose {
        max-width: 100%;
    }
}


/* ===== 18. MOTION SYSTEM · Bloque 6A · Paso 1 ============================= */
/* Sistema centralizado de movimiento. Tres pilares en este paso:
     a) Scroll-triggered reveals · cards y heros fade + slide-up al viewport
     b) Stagger entre hermanos · delay incremental por --i seteado por JS
     c) Hover lift refinado · easing pulido para todas las cards interactivas
   Todo gateado por prefers-reduced-motion: reduce (§18.10 apaga la capa entera).
   Los efectos JS-dependientes (counters, magnetic, slogan rotador, heading
   reveal) llegan en los pasos 6A.2 y 6A.3 — esta base solo cubre lo que
   marca el viewport. */


/* --- 18.1 · Motion tokens · curvas y duraciones centralizadas ----------- */
:root {
    /* Curva Apple smooth-out · entrada suave con overshoot mínimo */
    --ease-smooth:    cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Curva spring leve para microinteractions (botones, arrows) */
    --ease-spring:    cubic-bezier(0.34, 1.56, 0.64, 1);
    /* Curva estándar simétrica · para transiciones bidireccionales */
    --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);

    /* Duraciones canónicas · reveal grande / microinteraction / hover */
    --dur-reveal:     600ms;
    --dur-micro:      300ms;
    --dur-hover:      200ms;

    /* Paso del stagger entre hermanos · JS asigna --i a cada hijo */
    --stagger-step:   70ms;
}


/* --- 18.2 · .reveal base · estado inicial + estado "in viewport" ------- */
/* JS aplica .reveal a los selectores aprobados al cargar la página.
   El IntersectionObserver agrega .is-revealed cuando cada elemento entra al
   viewport. La transición corre UNA SOLA VEZ (once: true en JS). */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity var(--dur-reveal) var(--ease-smooth),
        transform var(--dur-reveal) var(--ease-smooth);
    will-change: opacity, transform;
}

.reveal.is-revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;  /* libera memoria del compositor una vez animado */
}


/* --- 18.3 · Stagger system · delay incremental por hermano ------------- */
/* JS recorre el contenedor .reveal--stagger y setea --i en cada hijo .reveal
   (0, 1, 2, 3...). El transition-delay aplica calc(var(--i) * stagger-step)
   para que entren en cascada en lugar de simultáneos. */
.reveal--stagger > .reveal {
    transition-delay: calc(var(--i, 0) * var(--stagger-step));
}


/* --- 18.4 · Counter wrappers · numéricos puros y cifras mixtas ---------- */
/* Dos tratamientos para las cifras de porque pages:
     (a) [data-counter="N"] · cifra con dígito inicial (100%, 4 capas).
         JS anima 0→N con RAF y mantiene sufijo fijo (% o " capas"/" layers").
         tabular-nums evita jitter de ancho mientras los dígitos cambian.
     (b) .metric-glow · cifras sin dígito animable (24/7, < 30s).
         Al entrar viewport hace fade + scale + glow con .is-counter-done. */
[data-counter] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.metric-glow {
    display: inline-block;
    transform: scale(0.92);
    transition:
        transform var(--dur-reveal) var(--ease-spring),
        text-shadow 800ms var(--ease-smooth);
    will-change: transform, text-shadow;
}

.metric-glow.is-counter-done {
    transform: scale(1);
    text-shadow:
        0 0 12px rgba(42, 141, 255, 0.55),
        0 0 28px rgba(42, 141, 255, 0.25);
    will-change: auto;
}

/* En vista partner el glow es emerald (coherente con el tinte de la sección) */
body.section-partner .metric-glow.is-counter-done {
    text-shadow:
        0 0 12px rgba(0, 255, 163, 0.55),
        0 0 28px rgba(0, 255, 163, 0.25);
}

/* Cuando un [data-counter] termina su animación también recibe la clase
   .is-counter-done · permite un fade-bump opcional similar al glow */
[data-counter].is-counter-done {
    text-shadow:
        0 0 8px rgba(42, 141, 255, 0.35);
    transition: text-shadow 400ms var(--ease-smooth);
}

body.section-partner [data-counter].is-counter-done {
    text-shadow:
        0 0 8px rgba(0, 255, 163, 0.35);
}


/* --- 18.5 · Magnetic buttons + arrow microinteraction ------------------ */
/* .btn-primary se "imanta" sutilmente al cursor mediante --mx/--my que
   JS setea en mousemove (clamp ±6px). El arrow icon además hace translateX
   al hover como microinteraction. Reset on mouseleave. */
.btn-primary {
    transform: translate(var(--mx, 0), var(--my, 0));
    transition:
        transform var(--dur-micro) var(--ease-spring),
        background-color var(--dur-micro) var(--ease-smooth),
        border-color var(--dur-micro) var(--ease-smooth),
        box-shadow var(--dur-micro) var(--ease-smooth);
}

.btn-primary .btn__arrow svg {
    transition: transform var(--dur-micro) var(--ease-spring);
}

.btn-primary:hover .btn__arrow svg,
.btn-primary:focus-visible .btn__arrow svg {
    transform: translateX(3px);
}


/* --- 18.6 · Hover lift refinado · cards interactivas ------------------ */
/* Override de hover de las cards para que el lift sea más smooth y
   coherente con el resto del motion. No cambia magnitudes — solo curva y
   duración. Aplica a las 8 familias de cards aprobadas. */
.pillar-card,
.bento__card,
.moment-card,
.service-card,
.requisitos__card,
.audience-card,
.platform-feature,
.step-card {
    transition:
        transform var(--dur-hover) var(--ease-smooth),
        border-color var(--dur-hover) var(--ease-smooth),
        background-color var(--dur-hover) var(--ease-smooth),
        box-shadow var(--dur-hover) var(--ease-smooth);
}


/* --- 18.7 · Slogan rotator del hero · 4 slogans alternando ------------- */
/* Contenedor en grid stack · todos los slogans superpuestos en grid-area 1/1
   para evitar layout shift. Solo .is-active tiene opacity 1, los demás 0.
   JS rota la clase .is-active cada 4s (pause on hover detectado en JS).
   Fallback: si JS no carga, el slogan 1 queda visible estático. */
.hero__slogan-rotator {
    display: grid;
    place-items: center;
    min-height: 2.4em;
    margin: 1rem auto 1.25rem;
    max-width: 56ch;
    padding: 0 1rem;
    /* will-change opacity en los hijos · no en el contenedor */
}

.hero__slogan {
    grid-area: 1 / 1;
    opacity: 0;
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: clamp(0.95rem, 1.4vw, 1.0625rem);
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1.5;
    text-align: center;
    text-shadow: 0 0 14px rgba(42, 141, 255, 0.15);
    transition: opacity 500ms var(--ease-smooth);
    will-change: opacity;
}

.hero__slogan.is-active {
    opacity: 1;
}


/* --- 18.9 · Heading split reveal · palabras en cascada al cargar ------- */
/* JS toma .hero__heading, separa el textContent por palabras, envuelve cada
   una en <span class="word" style="--i:N">. CSS aplica opacity 0 + slide-up
   inicial; al agregar .is-revealed cada palabra anima con su propio --i
   (stagger 80ms). Si JS no carga, el heading muestra el texto plano normal. */
.heading-split .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition:
        opacity var(--dur-reveal) var(--ease-smooth),
        transform var(--dur-reveal) var(--ease-smooth);
    transition-delay: calc(var(--i, 0) * 80ms);
    will-change: opacity, transform;
}

.heading-split.is-revealed .word {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}


/* --- 18.10 · prefers-reduced-motion · apaga TODO el motion nuevo ------- */
/* El usuario que pidió reducir movimiento ve los reveals como contenido
   estático visible al cargar. JS también respeta este flag y no monta los
   observers ni los rotators ni los counters. */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .reveal.is-revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .reveal--stagger > .reveal {
        transition-delay: 0ms !important;
    }

    /* Hover lift se mantiene pero sin transiciones (cambio instantáneo) */
    .pillar-card,
    .bento__card,
    .moment-card,
    .service-card,
    .requisitos__card,
    .audience-card,
    .platform-feature,
    .step-card {
        transition: none !important;
    }

    /* Cifras mixtas · sin escalar ni glow, mostrar valor final tal cual */
    .metric-glow,
    .metric-glow.is-counter-done {
        transform: none !important;
        transition: none !important;
        text-shadow: none !important;
    }

    /* Counters numéricos · JS detecta el flag y muestra el valor final
       al instante sin animar (ver guard en motion.js initCounters) */
    [data-counter].is-counter-done {
        text-shadow: none !important;
        transition: none !important;
    }

    /* Magnetic buttons · cancelar el translate del cursor y el arrow */
    .btn-primary,
    .btn-primary .btn__arrow svg {
        transform: none !important;
        transition: none !important;
    }

    /* Slogan rotator · JS guard ya impide que arranque el timer; acá nos
       aseguramos de que solo el primer slogan quede visible (estático). */
    .hero__slogan {
        opacity: 0 !important;
        transition: none !important;
    }
    .hero__slogan:first-child {
        opacity: 1 !important;
    }

    /* Heading split · JS guard ya impide el split, pero por las dudas también
       neutralizamos cualquier .word que hubiera sobrevivido (todo opacity 1). */
    .heading-split .word,
    .heading-split.is-revealed .word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Matrix intro · JS no crea el canvas en reduced-motion; este display:none
       es belt-and-suspenders por si algún canvas se crease por otro path. */
    .matrix-intro {
        display: none !important;
    }
}


/* ===== 19. MATRIX INTRO · 10s rain en home neutral · Tarea final ========= */
/* Canvas overlay full-screen creado dinámicamente por JS al cargar /preview/.
   Códigos binarios "0" y "1" cayendo en azul brand · réplica del efecto del
   coming soon viejo pero con duración LIMITADA: 10s de rain + 2s de fade-out
   + remove del DOM. Solo se ejecuta una vez por carga de página.
   NO se renderiza si prefers-reduced-motion (guard global del motion.js).
   ============================================================================ */

.matrix-intro {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;            /* arriba del .bg-grid (-1), debajo del hero__inner (3) */
    pointer-events: none;
    opacity: 0.32;          /* más visible que el .with-matrix::before (0.22) */
    mix-blend-mode: screen;
    transition: opacity 2000ms var(--ease-smooth);
}

.matrix-intro.is-fading-out {
    opacity: 0;
}


/* ===== 20. CTA DESCARGA APPS · global, antes del footer en todas las páginas */
/* Bloque marketing con badges App Store + Google Play. Los <a> tienen
   data-pending="true" hasta que las apps estén live en las stores. Hover
   neón azul multi-layer glow · feature exclusiva de esta sección (no usa
   .btn-primary porque los badges tienen su propio lenguaje visual oficial
   de Apple / Google que no se debe alterar — solo se decora con sombra). */

.cta-apps {
    padding: clamp(3rem, 6vw, 5rem) clamp(1.25rem, 4vw, 3rem);
    text-align: center;
    border-top: 1px solid var(--text-edge);
    background: linear-gradient(180deg, transparent, rgba(42, 141, 255, 0.02));
}

.cta-apps__title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.cta-apps__subtitle {
    font-size: clamp(0.875rem, 1.4vw, 1rem);
    color: var(--text-muted);
    margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cta-apps__badges {
    display: flex;
    gap: clamp(1rem, 2vw, 1.5rem);
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.cta-apps__badge {
    display: inline-block;
    line-height: 0;
    border-radius: 12px;
    /* Fondo blanco casi opaco · necesario para que los badges oficiales de
       Apple/Google (negros con texto blanco) tengan contraste sobre el dark
       mode del sitio. Padding genera respiro entre el borde del wrapper y
       el badge mismo. */
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 14px;
    transition:
        transform var(--dur-hover) var(--ease-smooth),
        box-shadow var(--dur-hover) var(--ease-smooth),
        background var(--dur-hover) var(--ease-smooth);
    position: relative;
    isolation: isolate;
}

.cta-apps__badge img {
    /* Más chico que antes porque el wrapper ahora tiene 8+8 = 16px de padding
       vertical · el conjunto wrapper+badge mantiene tamaño visual similar. */
    height: clamp(40px, 6vw, 52px);
    width: auto;
    display: block;
}

/* Efecto neón azul al hover · multi-layer glow más intenso + fondo blanco
   puro (sin transparencia) para que el badge cobre máxima legibilidad. */
.cta-apps__badge:hover,
.cta-apps__badge:focus-visible {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 1);
    box-shadow:
        0 0 0 1px rgba(79, 181, 255, 0.5),
        0 0 24px rgba(79, 181, 255, 0.55),
        0 0 48px rgba(79, 181, 255, 0.35),
        0 0 72px rgba(79, 181, 255, 0.2),
        0 8px 24px rgba(0, 0, 0, 0.4);
}

.cta-apps__badge:active {
    transform: translateY(-1px);
}

/* Pending state · cursor not-allowed indica visualmente "no clickeable aún".
   Cuando las apps estén live, se quita data-pending y el href apunta al store. */
.cta-apps__badge[data-pending="true"],
.cta-apps__badge[data-pending="true"]:hover {
    cursor: not-allowed;
}

/* Mobile · badges apilados verticalmente con padding ajustado */
@media (max-width: 480px) {
    .cta-apps__badges {
        flex-direction: column;
        gap: 1rem;
    }
}

/* Reduced-motion · sin transform/glow animado, solo mantiene borde sutil */
@media (prefers-reduced-motion: reduce) {
    .cta-apps__badge,
    .cta-apps__badge:hover {
        transform: none !important;
        transition: none !important;
    }
    .cta-apps__badge:hover {
        box-shadow: 0 0 0 1px rgba(79, 181, 255, 0.4) !important;
    }
}