/* ============================================================
   insBrand.css — MOVIMIENTO Y TIPOGRAFÍA DE LA CASA, EN UN SOLO SITIO
   ============================================================

   🌳 De qué defecto nace (A0.3 del rebranding, 25-ago-2026). InsCore.Web/wwwroot/css/theme.css y
   InsCore.Backoffice.Web/wwwroot/css/theme.css declaraban EXACTAMENTE los mismos cuatro tokens de
   duración y la misma curva, byte a byte, cada uno en su propio :root — y ya habían empezado a
   divergir en otras zonas del fichero (el backoffice pinta el body a #050d1a mientras su paleta de
   entonces decía #121212). Una forma canónica repetida en dos sitios es una forma canónica que puede
   divergir en dos sitios. InsCore.PortalCliente/wwwroot/portal.css no tenía NINGÚN bloque
   prefers-reduced-motion: al centralizar aquí, el portal lo hereda sin tener que escribirlo.

   🎯 Valores del manual de marca entregado (vol. 2, sección Movimiento), que sustituyen a los
   anteriores --anim-fast 180ms / --anim-normal 280ms / --anim-slow 500ms y a la curva
   cubic-bezier(0.16, 1, 0.3, 1): ningún cambio visual es gratis, éste es el que pidió el manual.

   ⚠️ Solo tokens de MOVIMIENTO. Los tokens de superficie/glass/radio de cada host (glass-bg, orbes,
   sombras, radios de tarjeta/input/botón) NO entran aquí: son decisiones estéticas de mayor alcance
   que se resuelven cuando se trabaje el theme.css completo de cada host en su propio carril
   (A1/A2), contra el manual, no de oficio en esta fase de cimientos.
*/

:root {
    /* Duraciones. Nada supera 400ms en interacción directa: por encima, la interfaz se percibe lenta
       aunque sea fluida. */
    --dur-instant: 90ms;   /* cambio de color, foco */
    --dur-fast:    150ms;  /* hover, pulsación */
    --dur-base:    240ms;  /* desplegables, pestañas */
    --dur-slow:    400ms;  /* modales, entrada de página */

    /* Curvas. */
    --ease-out:    cubic-bezier(.2, .8, .2, 1);    /* por defecto: todo lo que entra */
    --ease-inout:  cubic-bezier(.65, 0, .35, 1);   /* bucles y transiciones continuas */
    --ease-over:   cubic-bezier(.34, 1.56, .64, 1); /* SOLO confirmaciones, con rebote */
}

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

/* ── LA MARCA EN MOVIMIENTO ─────────────────────────────────────────────────────────────────────
   Eran CUATRO comportamientos y quedan DOS (`None` y `Float`). Los otros tres —parpadeo, antena y
   mirada— colgaban de piezas que EL NÚCLEO ya no tiene: no hay pupilas ni antena que animar. Se
   retiran con ellas, no se dejan apuntando al vacío.

   📏 Medido antes de borrar, que es lo que separa retirar de romper: de las cuatro, sólo `an-float`
   tenía consumidores (2, en Home.razor). Blink, Antenna y Gaze estaban declaradas y no las ejercía
   nadie — la clase «entregado no es ejercido», por su lado barato. */
@keyframes ins-mascot-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

.ins-mascot.an-float { animation: ins-mascot-float 3.6s var(--ease-inout) infinite; }

/* ── 🏷️ EL NOMBRE DE LA CASA, CUANDO SE MENCIONA ────────────────────────────────────────────────
   Encargo suyo, s109: *«quiero tener centralizada la tipografía para nuestros nombres, por ejemplo
   abistack y abi4broker, y cuando se hace mención de esos se resalta»*.

   🎯 SON DOS SSOT, Y HACÍA FALTA EL SEGUNDO. El de los NOMBRES ya existía
   (`InsCore.SharedKernel.Branding.ProductBrand`), y sus 73 consumidores no escriben el nombre a mano.
   Lo que no existía era un sitio donde decidir CÓMO SE VE: los 73 lo pintaban como texto plano, así
   que no había nada que cambiar en un solo lugar. Esta regla es ese sitio.
       · cambiar el NOMBRE   → ProductBrand
       · cambiar el ASPECTO  → esta regla, y nada más

   ✂️ Y NO ES «WORD ART», a propósito. Él usó esa palabra y se le razonó en contra antes de decidir:
   contorno, sombra o degradado sobre un nombre inline envejecen mal, se rompen a cuerpo de texto, y
   aquí hay un problema añadido —el nombre del TENANT está al lado en la misma cabecera—: si el
   nuestro grita, competimos con la marca de la correduría en su propia pantalla. Eligió «logotipo
   inline», que es lo que hacen de verdad las marcas cuyo nombre no pasa desapercibido: el nombre va
   en la tipografía de DISPLAY, no en la del texto. Syne contra Inter son dos caras muy distintas, así
   que `abistack` dentro de una frase se lee como logotipo sin ningún efecto.

   📐 El `font-size` de 0,94em NO es un ajuste fino opcional: Syne corre más ancha y más alta que
   Inter, así que a 1em el nombre sale MAYOR que el texto que lo rodea y parece un error de
   maquetación. Compensa ópticamente. Si algún día cambia la cara de display, se recalibra aquí. */
.ins-brand-name {
    font-family: 'Syne', var(--ins-font-body, system-ui), sans-serif;
    font-weight: 800;
    font-size: .94em;          /* compensación óptica contra Inter — ver nota de arriba */
    letter-spacing: -.01em;
    color: currentColor;       /* hereda: nunca compite con la marca del tenant que tiene al lado */
    white-space: nowrap;       /* un nombre propio no se parte al final de una línea */
}

/* La marca MADRE lleva además el color de acento de la casa, que es lo que la distingue del nombre de
   producto cuando los dos aparecen en la misma frase («Abi4Broker, con tecnología abistack»).

   🔴 s149 · ANTES LEÍA `--mud-palette-secondary` A SECAS, y ese token es el SECUNDARIO DEL TEMA VIVO. En
   los hosts internos es el cian de la casa y acertaba por casualidad; en el portal del cliente era —hasta
   esta sesión— el secundario DEL TENANT, así que en Atlas Seguros «abistack» salía ROJO escrito sobre una
   barra también ROJA, ilegible. La barrera de contraste del portal no lo veía porque mide contra el papel,
   el fondo y el cajón: nunca contra el AppBar, que es justo donde este nombre aterriza.

   🪤 Y el comentario que había aquí prometía «el violeta de la casa» cuando la casa dejó de ser violeta en
   la s110 (índigo + cian; ver `MascotArt`). Documentaba dos cosas que el código no cumplía.

   ⚖️ Ahora lee un token PROPIO. Su valor por defecto sigue siendo el secundario del tema —que en los tres
   hosts ya es de la casa— y cae a `currentColor` si no hay ninguno: en una tinta, o en un correo, el color
   no viaja. Quien lo pinte sobre una superficie que el tema no mide (el AppBar) lo redefine ahí, que es lo
   que hace el portal. */
.ins-brand-name.is-umbrella {
    color: var(--ins-brand-umbrella, var(--mud-palette-secondary, currentColor));
}

/* ── TIPOGRAFÍA AUTOALOJADA (A0.4 del rebranding) ────────────────────────────────────────────────
   Google Fonts remota expone la IP de quien la carga a un tercero en cada visita — es exposición a
   sanción, y la regla de oro del proyecto manda la opción robusta frente a la práctica. Los tres
   hosts pedían Inter y Syne a fonts.googleapis.com; ahora los sirve esta hoja, con los mismos
   binarios variables que Google Fonts distribuye (Inter v20, Syne v24), solo los subsets `latin` y
   `latin-ext` — suficiente para español, portugués e inglés, que son los idiomas de la casa; los
   demás subsets (cirílico, griego, vietnamita…) no se descargan.
   Lo vigila DesignTokensSsotTests, invertido: antes EXIGÍA el enlace remoto, ahora exige que NO
   exista ninguna referencia a fonts.googleapis.com/fonts.gstatic.com en ningún host. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                    U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/syne-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
                    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
                    U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Syne';
    font-style: normal;
    font-weight: 600 800;
    font-display: swap;
    src: url('fonts/syne-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
                    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── `.ins-icon` · el glifo de oficio, que NO es elastico ─────────────────────────────────────────
   El reparto vive AQUI y no en un `style` en linea. No es cosmetica: `RowsDeclareWhoYields` caza el
   `flex` en linea porque asi nacieron las nueve filas de M-172 —una accion que se encoge y se lee
   «Guarda…»—, y un gadget compartido que lo escribe en linea ensena ese patron a las 20 pantallas
   que lo consuman. Lo unico que queda en linea es el TAMANO, que si es del consumidor y ademas es
   lo que el propio guard deja pasar por ser tamano y no reparto. */
.ins-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}