/*
 * Paleta, tipografía y formas del contenido de cada *-info (a juego con su portada).
 *
 * --ic-bg / --ic-bg-2   fondos que se alternan entre secciones
 * --ic-ink / --ic-text / --ic-muted   títulos, párrafos y etiquetas
 * --ic-accent (+ -ink, -text)   color de marca; -text es la versión legible sobre el fondo
 * --ic-panel / --ic-glyph   panel de los capítulos y la letra gigante que lleva detrás
 */

.info-page--scroll {
    --ic-bg: #ffffff;
    --ic-bg-2: #f4f4f4;
    --ic-ink: #111111;
    --ic-text: #333333;
    --ic-muted: #5f5f5f;
    --ic-line: rgba(0, 0, 0, 0.12);
    --ic-accent: #111111;
    --ic-accent-ink: #ffffff;
    --ic-card: #ffffff;
    --ic-panel: linear-gradient(160deg, #2a2a2a, #111111);
    --ic-glyph: rgba(255, 255, 255, 0.14);
    --ic-display: system-ui, sans-serif;
    --ic-body: system-ui, sans-serif;
    --ic-radius: 16px;
}

/* Alcatel: blanco limpio y el azul de la marca; la portada deja elegir color como las carcasas de 1998 */
.info-page--scroll[data-brand="alcatel"] {
    --ic-bg: #f5fbfd;
    --ic-bg-2: #e7f5fa;
    --ic-ink: #06212e;
    --ic-text: #24404c;
    --ic-muted: #4d6a76;
    --ic-line: rgba(0, 110, 150, 0.18);
    --ic-accent: #00a9e0;
    --ic-accent-ink: #06212e;
    --ic-accent-text: #00729a;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 28% 22%, #8fe3ff, transparent 55%), linear-gradient(150deg, #00a9e0, #0079b0);
    --ic-glyph: rgba(255, 255, 255, 0.2);
    --ic-display: 'Rubik', system-ui, sans-serif;
    --ic-body: 'Rubik', system-ui, sans-serif;
    --ic-title-weight: 800;
    --ic-radius: 22px;
    --ic-chip-radius: 999px;
    --ic-panel-radius: 32px;
}

/* Apple: blanco y gris claro, la letra del sistema (SF Pro en sus dispositivos) y el azul de sus enlaces */
.info-page--scroll[data-brand="apple"] {
    --ic-bg: #ffffff;
    --ic-bg-2: #f5f5f7;
    --ic-ink: #1d1d1f;
    --ic-text: #424245;
    --ic-muted: #6e6e73;
    --ic-line: rgba(0, 0, 0, 0.1);
    --ic-accent: #0071e3;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #0066cc;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 50% 18%, #ffffff, transparent 62%), linear-gradient(180deg, #f5f5f7, #e8e8ed);
    --ic-glyph: rgba(29, 29, 31, 0.06);
    --ic-display: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ic-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Helvetica Neue', Arial, sans-serif;
    --ic-title-weight: 600;
    --ic-intro-weight: 600;
    --ic-title-track: -0.03em;
    --ic-radius: 18px;
    --ic-panel-radius: 28px;
}

.info-page--scroll[data-brand="fairphone"] {
    --ic-bg: #163d2b;
    --ic-bg-2: #10301f;
    --ic-ink: #f4f1ea;
    --ic-text: rgba(244, 241, 234, 0.84);
    --ic-muted: rgba(244, 241, 234, 0.64);
    --ic-line: rgba(244, 241, 234, 0.18);
    --ic-accent: #b9e4a7;
    --ic-accent-ink: #10301f;
    --ic-card: rgba(244, 241, 234, 0.05);
    --ic-panel: linear-gradient(rgba(244, 241, 234, 0.08) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(90deg, rgba(244, 241, 234, 0.08) 1px, transparent 1px) 0 0 / 32px 32px, linear-gradient(160deg, #2c6a4a, #1b4d34);
    --ic-glyph: rgba(185, 228, 167, 0.16);
    --ic-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --ic-body: 'Bricolage Grotesque', system-ui, sans-serif;
    --ic-label-font: 'IBM Plex Mono', ui-monospace, monospace;
    --ic-title-weight: 800;
    --ic-title-track: -0.03em;
    --ic-radius: 14px;
}

.info-page--scroll[data-brand="google"] {
    --ic-bg: #ffffff;
    --ic-bg-2: #f6f8fc;
    --ic-ink: #202124;
    --ic-text: #3c4043;
    --ic-muted: #5f6368;
    --ic-line: #e1e4e8;
    --ic-accent: #1a73e8;
    --ic-accent-ink: #ffffff;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 18% 22%, #c6dafc, transparent 46%), radial-gradient(circle at 84% 26%, #f8c9c4, transparent 42%), radial-gradient(circle at 26% 86%, #fde8a8, transparent 46%), radial-gradient(circle at 86% 84%, #c2e5cc, transparent 46%), #f1f3f4;
    --ic-glyph: rgba(26, 115, 232, 0.12);
    --ic-display: 'Figtree', system-ui, sans-serif;
    --ic-body: 'Figtree', system-ui, sans-serif;
    --ic-label-font: 'DM Mono', ui-monospace, monospace;
    --ic-title-weight: 800;
    --ic-title-track: -0.03em;
    --ic-radius: 24px;
    --ic-panel-radius: 36px;
}

/* Honor: la mesa de granito de la portada, el acero del calibre y el verde de su pantalla */
.info-page--scroll[data-brand="honor"] {
    --ic-bg: #141416;
    --ic-bg-2: #1b1b1e;
    --ic-ink: #f2f2f4;
    --ic-text: rgba(236, 237, 240, 0.84);
    --ic-muted: rgba(226, 227, 232, 0.66);
    --ic-line: rgba(236, 237, 240, 0.14);
    --ic-accent: #b9c4a8;
    --ic-accent-ink: #141416;
    --ic-accent-text: #c9d3b9;
    --ic-card: rgba(255, 255, 255, 0.04);
    --ic-panel: radial-gradient(circle at 30% 18%, rgba(255, 255, 255, 0.09), transparent 55%), linear-gradient(160deg, #2a2b30, #151518);
    --ic-glyph: rgba(185, 196, 168, 0.12);
    --ic-display: 'Barlow', system-ui, sans-serif;
    --ic-body: 'Barlow', system-ui, sans-serif;
    --ic-label-font: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
    /* Series del gráfico: del verde de la pantalla al gris acero, todas visibles sobre el granito */
    --ic-seg-1: #8d9a7c;
    --ic-seg-2: #6a7461;
    --ic-seg-3: #4d5348;
    --ic-seg-other: #3a3b40;
    --ic-title-weight: 600;
    --ic-title-track: -0.015em;
    --ic-radius: 10px;
    --ic-panel-radius: 18px;
}

/* Huawei: el estudio claro de la portada y el rojo de la marca */
.info-page--scroll[data-brand="huawei"] {
    --ic-bg: #f4f5f7;
    --ic-bg-2: #eceef1;
    --ic-ink: #15171b;
    --ic-text: #3a3f47;
    --ic-muted: #5a6069;
    --ic-line: #dde0e5;
    --ic-accent: #c7000b;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #b0000a;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 70% 30%, #ffffff, transparent 60%), linear-gradient(160deg, #eceef1, #dfe2e7);
    --ic-glyph: rgba(199, 0, 11, 0.1);
    --ic-display: 'Albert Sans', system-ui, sans-serif;
    --ic-body: 'Albert Sans', system-ui, sans-serif;
    --ic-title-weight: 800;
    --ic-title-track: -0.02em;
    --ic-radius: 8px;
    --ic-panel-radius: 16px;
    /* Series del gráfico: rojo de la marca y grises de los bloques de la portada */
    --ic-seg-1: #e86a72;
    --ic-seg-2: #9aa1ab;
    --ic-seg-3: #c5cad1;
    --ic-seg-other: #e2e5e9;
}

.info-page--scroll[data-brand="infinix"] {
    --ic-bg: #0b140f;
    --ic-bg-2: #0f1c14;
    --ic-ink: #f2ffe0;
    --ic-text: rgba(232, 255, 205, 0.82);
    --ic-muted: rgba(220, 255, 170, 0.6);
    --ic-line: rgba(212, 255, 0, 0.16);
    --ic-accent: #d4ff00;
    --ic-accent-ink: #0b140f;
    --ic-card: rgba(212, 255, 0, 0.04);
    --ic-panel: radial-gradient(circle at 70% 25%, rgba(212, 255, 0, 0.34), transparent 52%), linear-gradient(160deg, #1a3322, #0b140f);
    --ic-glyph: rgba(212, 255, 0, 0.12);
    --ic-display: 'Chakra Petch', system-ui, sans-serif;
    --ic-body: 'Chakra Petch', system-ui, sans-serif;
    --ic-title-weight: 700;
    --ic-radius: 4px;
    --ic-chip-radius: 2px;
    --ic-panel-radius: 6px;
    /* Series del gráfico: del lima de la portada a verdes más apagados, todos visibles sobre el fondo */
    --ic-seg-1: #a6c81a;
    --ic-seg-2: #73902a;
    --ic-seg-3: #4d6230;
    --ic-seg-other: #33433a;
}

.info-page--scroll[data-brand="motorola"] {
    --ic-bg: #f3e8d2;
    --ic-bg-2: #ece0c6;
    --ic-ink: #2b1a10;
    --ic-text: #4d3626;
    --ic-muted: #7a5b3b;
    --ic-line: rgba(160, 28, 42, 0.18);
    --ic-accent: #a01c2a;
    --ic-accent-ink: #f8eeda;
    --ic-card: #f8efdd;
    --ic-panel: repeating-conic-gradient(from -90deg at 50% 105%, rgba(255, 244, 214, 0.38) 0deg 5deg, transparent 5deg 14deg), linear-gradient(180deg, #ebd28f, #c9a24f);
    --ic-glyph: rgba(160, 28, 42, 0.16);
    --ic-display: 'Josefin Sans', system-ui, sans-serif;
    --ic-body: 'Jost', system-ui, sans-serif;
    --ic-label-font: 'Jost', system-ui, sans-serif;
    --ic-title-weight: 700;
    --ic-radius: 0px;
    --ic-chip-radius: 0px;
    --ic-panel-radius: 0px;
}

.info-page--scroll[data-brand="nothing"] {
    --ic-bg: #f4f4f2;
    --ic-bg-2: #eaeae7;
    --ic-ink: #0a0a0a;
    --ic-text: #2b2b2b;
    --ic-muted: #6a6a6a;
    --ic-line: rgba(0, 0, 0, 0.14);
    --ic-accent: #0a0a0a;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #d71921;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle, rgba(10, 10, 10, 0.2) 1.1px, transparent 1.6px) 0 0 / 14px 14px, #dcdcd8;
    --ic-glyph: rgba(10, 10, 10, 0.08);
    --ic-display: 'Doto', ui-monospace, monospace;
    --ic-body: 'Sora', system-ui, sans-serif;
    --ic-label-font: 'Sora', system-ui, sans-serif;
    --ic-title-weight: 900;
    --ic-title-case: uppercase;
    --ic-title-track: 0;
    --ic-radius: 18px;
    /* Series del gráfico: negro, rojo de la marca y grises de la pantalla de puntos */
    --ic-seg-1: #d71921;
    --ic-seg-2: #8a8a87;
    --ic-seg-3: #bcbcb9;
    --ic-seg-other: #d8d8d5;
}

.info-page--scroll[data-brand="nubia"] {
    --ic-bg: #070708;
    --ic-bg-2: #0e0e11;
    --ic-ink: #f4f4f6;
    --ic-text: rgba(235, 235, 245, 0.82);
    --ic-muted: rgba(230, 230, 240, 0.6);
    --ic-line: rgba(255, 31, 31, 0.22);
    --ic-accent: #ff1f1f;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #ff4a4a;
    --ic-card: rgba(255, 255, 255, 0.03);
    --ic-panel: linear-gradient(rgba(255, 31, 31, 0.22) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, rgba(255, 31, 31, 0.22) 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(circle at 50% 85%, #45090c, #0b0b0d 70%);
    --ic-glyph: rgba(255, 31, 31, 0.16);
    --ic-display: 'Rajdhani', system-ui, sans-serif;
    --ic-body: 'Rajdhani', system-ui, sans-serif;
    --ic-label-font: 'Share Tech Mono', ui-monospace, monospace;
    --ic-radius: 2px;
    --ic-chip-radius: 0px;
    --ic-panel-radius: 4px;
    /* Series del gráfico: el rojo de RedMagic y grises metálicos, todos visibles sobre el negro */
    --ic-seg-1: #b8b9c2;
    --ic-seg-2: #7c7d87;
    --ic-seg-3: #ff8a7a;
    --ic-seg-other: #3a3b42;
}

.info-page--scroll[data-brand="oneplus"] {
    --ic-bg: #ffffff;
    --ic-bg-2: #f3f3f3;
    --ic-ink: #0b0b0b;
    --ic-text: #333333;
    --ic-muted: #626262;
    --ic-line: rgba(0, 0, 0, 0.12);
    --ic-accent: #eb0029;
    --ic-accent-ink: #ffffff;
    --ic-card: #ffffff;
    --ic-panel: linear-gradient(155deg, #f2153b 0 48%, #c40022 48% 100%);
    --ic-glyph: rgba(255, 255, 255, 0.2);
    --ic-display: 'Outfit', system-ui, sans-serif;
    --ic-body: 'Outfit', system-ui, sans-serif;
    --ic-radius: 8px;
    --ic-chip-radius: 6px;
    --ic-panel-radius: 8px;
}

.info-page--scroll[data-brand="oppo"] {
    --ic-bg: #eef9f2;
    --ic-bg-2: #e2f3e9;
    --ic-ink: #0c3a23;
    --ic-text: #2c5440;
    --ic-muted: #4b765f;
    --ic-line: rgba(16, 160, 78, 0.18);
    --ic-accent: #10a04e;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #0b8a42;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 28% 18%, rgba(95, 240, 160, 0.9), transparent 52%), linear-gradient(160deg, #1fc067, #0b8f43);
    --ic-glyph: rgba(255, 255, 255, 0.22);
    --ic-display: 'Nunito', system-ui, sans-serif;
    --ic-body: 'Nunito', system-ui, sans-serif;
    --ic-title-weight: 800;
    --ic-title-track: -0.03em;
    --ic-radius: 24px;
    --ic-panel-radius: 40px;
}

.info-page--scroll[data-brand="poco"] {
    --ic-bg: #ffe100;
    --ic-bg-2: #f5d700;
    --ic-ink: #111111;
    --ic-text: #2a2400;
    --ic-muted: #4d4300;
    --ic-line: rgba(0, 0, 0, 0.2);
    --ic-accent: #111111;
    --ic-accent-ink: #ffe100;
    --ic-card: #fff27a;
    --ic-panel: repeating-linear-gradient(-12deg, transparent 0 26px, rgba(255, 225, 0, 0.09) 26px 28px), #111111;
    --ic-glyph: rgba(255, 225, 0, 0.24);
    --ic-display: 'Archivo Black', system-ui, sans-serif;
    --ic-body: 'Archivo', system-ui, sans-serif;
    --ic-title-weight: 400;
    --ic-intro-weight: 400;
    --ic-year-weight: 400;
    --ic-title-case: uppercase;
    --ic-title-track: -0.01em;
    --ic-radius: 0px;
    --ic-chip-radius: 0px;
    --ic-panel-radius: 0px;
}

.info-page--scroll[data-brand="realme"] {
    --ic-bg: #ffffff;
    --ic-bg-2: #fff7d6;
    --ic-ink: #111111;
    --ic-text: #333333;
    --ic-muted: #5c5c5c;
    --ic-line: rgba(0, 0, 0, 0.12);
    --ic-accent: #ffc915;
    --ic-accent-ink: #111111;
    --ic-accent-text: #8a6700;
    --ic-card: #ffffff;
    --ic-panel: linear-gradient(160deg, transparent 0 72%, rgba(17, 17, 17, 0.9) 72% 73%, transparent 73%), linear-gradient(160deg, #ffd84a, #ffc915);
    --ic-glyph: rgba(17, 17, 17, 0.1);
    --ic-display: 'Lexend', system-ui, sans-serif;
    --ic-body: 'Lexend', system-ui, sans-serif;
    --ic-radius: 10px;
    --ic-chip-radius: 8px;
}

.info-page--scroll[data-brand="samsung"] {
    --ic-bg: #eef1f6;
    --ic-bg-2: #e3e8f2;
    --ic-ink: #0b1240;
    --ic-text: #2e3560;
    --ic-muted: #59618a;
    --ic-line: rgba(20, 40, 160, 0.14);
    --ic-accent: #1428a0;
    --ic-accent-ink: #ffffff;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 72% 26%, rgba(143, 179, 255, 0.9), transparent 52%), radial-gradient(circle at 22% 82%, rgba(195, 166, 255, 0.8), transparent 50%), linear-gradient(160deg, #1a2a8c, #4a2ca6);
    --ic-glyph: rgba(255, 255, 255, 0.14);
    --ic-display: 'Manrope', system-ui, sans-serif;
    --ic-body: 'Manrope', system-ui, sans-serif;
    --ic-title-weight: 800;
    --ic-radius: 22px;
    --ic-panel-radius: 32px;
}

.info-page--scroll[data-brand="sony"] {
    --ic-bg: #f2eee6;
    --ic-bg-2: #e9e3d7;
    --ic-ink: #121212;
    --ic-text: #333333;
    --ic-muted: #6b665c;
    --ic-line: rgba(0, 0, 0, 0.14);
    --ic-accent: #121212;
    --ic-accent-ink: #ffffff;
    --ic-card: #f8f5ef;
    --ic-panel: linear-gradient(180deg, #1c2747 0%, #5a3d6b 42%, #e07a5f 76%, #f6c27a 100%);
    --ic-glyph: rgba(255, 255, 255, 0.16);
    --ic-display: 'Barlow', system-ui, sans-serif;
    --ic-body: 'Newsreader', Georgia, serif;
    --ic-label-font: 'Barlow', system-ui, sans-serif;
    --ic-radius: 2px;
    --ic-chip-radius: 0px;
    --ic-panel-radius: 2px;
}

.info-page--scroll[data-brand="tcl"] {
    --ic-bg: #e2e0db;
    --ic-bg-2: #d7d5cf;
    --ic-ink: #262626;
    --ic-text: #3b3833;
    --ic-muted: #5e5a54;
    --ic-line: rgba(0, 0, 0, 0.14);
    --ic-accent: #e30613;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #c4040f;
    --ic-card: #efede8;
    --ic-panel: radial-gradient(circle at 20% 10%, rgba(255, 250, 235, 0.9), transparent 55%), linear-gradient(160deg, #eceae3, #cfccc4);
    --ic-glyph: rgba(227, 6, 19, 0.12);
    --ic-display: 'Literata', Georgia, serif;
    --ic-body: 'Literata', Georgia, serif;
    --ic-title-weight: 800;
    --ic-radius: 4px;
    --ic-chip-radius: 2px;
    --ic-panel-radius: 6px;
}

.info-page--scroll[data-brand="tecno"] {
    --ic-bg: #14110f;
    --ic-bg-2: #1c1714;
    --ic-ink: #f6ebe1;
    --ic-text: rgba(246, 235, 225, 0.82);
    --ic-muted: rgba(240, 220, 200, 0.62);
    --ic-line: rgba(224, 176, 136, 0.18);
    --ic-accent: #e0b088;
    --ic-accent-ink: #1a120d;
    --ic-card: rgba(255, 240, 225, 0.04);
    --ic-panel: linear-gradient(90deg, #f6e1d3 0 16.6%, #ecc3a6 16.6% 33.3%, #d29a74 33.3% 50%, #b0724d 50% 66.6%, #8a5035 66.6% 83.3%, #5a2e20 83.3%);
    --ic-glyph: rgba(255, 255, 255, 0.22);
    --ic-display: 'Be Vietnam Pro', system-ui, sans-serif;
    --ic-body: 'Be Vietnam Pro', system-ui, sans-serif;
    --ic-title-weight: 800;
    --ic-radius: 14px;
}

.info-page--scroll[data-brand="vivo"] {
    --ic-bg: #eef0f5;
    --ic-bg-2: #e3e7ef;
    --ic-ink: #11131b;
    --ic-text: #343849;
    --ic-muted: #5b6072;
    --ic-line: rgba(65, 95, 255, 0.14);
    --ic-accent: #415fff;
    --ic-accent-ink: #ffffff;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 74% 24%, rgba(65, 95, 255, 0.6), transparent 48%), radial-gradient(circle at 20% 80%, rgba(150, 110, 255, 0.35), transparent 45%), linear-gradient(160deg, #1d2134, #0c0e15);
    --ic-glyph: rgba(255, 255, 255, 0.1);
    --ic-display: 'DM Sans', system-ui, sans-serif;
    --ic-body: 'DM Sans', system-ui, sans-serif;
    --ic-radius: 22px;
    --ic-panel-radius: 50% 50% 32px 32px / 30% 30% 32px 32px;
}

.info-page--scroll[data-brand="xiaomi"] {
    --ic-bg: #ffffff;
    --ic-bg-2: #fff2e8;
    --ic-ink: #1d0c00;
    --ic-text: #3d2a1d;
    --ic-muted: #6b5446;
    --ic-line: rgba(255, 105, 0, 0.18);
    --ic-accent: #ff6900;
    --ic-accent-ink: #ffffff;
    --ic-accent-text: #d65500;
    --ic-card: #ffffff;
    --ic-panel: radial-gradient(circle at 70% 26%, rgba(255, 196, 140, 0.9), transparent 52%), linear-gradient(160deg, #ff7a1a, #ff5a00);
    --ic-glyph: rgba(255, 255, 255, 0.24);
    --ic-display: 'Inter', system-ui, sans-serif;
    --ic-body: 'Inter', system-ui, sans-serif;
    --ic-title-track: -0.035em;
    --ic-radius: 22px;
    --ic-chip-radius: 14px;
    --ic-panel-radius: 33%;
}

.info-page--scroll[data-brand="zte"] {
    --ic-bg: #021627;
    --ic-bg-2: #04213a;
    --ic-ink: #ffffff;
    --ic-text: rgba(226, 238, 255, 0.82);
    --ic-muted: rgba(196, 222, 255, 0.64);
    --ic-line: rgba(79, 180, 255, 0.18);
    --ic-accent: #4fb4ff;
    --ic-accent-ink: #021627;
    --ic-card: rgba(79, 180, 255, 0.05);
    --ic-panel: radial-gradient(circle at 50% 18%, rgba(79, 180, 255, 0.55), transparent 52%), linear-gradient(170deg, #0a4c8a, #062544);
    --ic-glyph: rgba(255, 255, 255, 0.1);
    --ic-display: 'Titillium Web', system-ui, sans-serif;
    --ic-body: 'Titillium Web', system-ui, sans-serif;
    --ic-radius: 6px;
    --ic-panel-radius: 10px;
}