/* ===================================================================== Say Mucho · brands.css Las 3 propuestas de marca aplicadas a la app, para compararlas. Se activan con . Sin data-brand, la app usa su estilo actual de styles.css (este archivo no lo toca). 1 = Charla (violeta + coral · Bricolage Grotesque + Figtree) 2 = Apertura ¡! (tinta + lima · Archivo ancho + Inter) 3 = Tu voz (petróleo + caléndula · Fraunces + DM Sans) Las fuentes de Google Fonts se cargan desde JS (no hay @import). ===================================================================== */ /* ===================================================================== 0 · Común a las 3 opciones ===================================================================== */ /* Letras */ :root[data-brand] body { font-family: var(--font-body); } :root[data-brand] h1, :root[data-brand] h2, :root[data-brand] h3, :root[data-brand] .brand-text, :root[data-brand] .flashcard .big, :root[data-brand] .score-big, :root[data-brand] .week-num, :root[data-brand] .steps li a::before { font-family: var(--font-head); } :root[data-brand] .btn, :root[data-brand] .tab { font-family: var(--font-btn); } /* Las respuestas de ejercicios son frases: mejor con la letra de texto */ :root[data-brand] .option { font-family: var(--font-body); } /* Cabecera: símbolo en lugar del emoji */ .brand-logo { display: none; } .brand-slogan { margin: 0; font-weight: 700; color: var(--muted); } :root[data-brand] .brand-mark { display: none; } :root[data-brand] .brand-logo { display: block; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 7px; } :root[data-brand] .brand-text { white-space: nowrap; } @media (prefers-color-scheme: dark) { /* Aro fino para que el cuadrado del símbolo no se pierda sobre fondo oscuro */ :root[data-brand] .brand-logo { box-shadow: 0 0 0 1px rgba(255, 255, 255, .16); } } /* Pantallas estrechas con botón "atrás": solo el símbolo (el enlace ya tiene aria-label) */ @media (max-width: 440px) { :root[data-brand] .topbar-inner:has(#backBtn:not([hidden])) .brand-text { display: none; } } /* Tarjeta principal de inicio (.hero): colores por variables de cada opción */ :root[data-brand] .hero { position: relative; overflow: hidden; isolation: isolate; background: linear-gradient(140deg, var(--hero-bg), var(--hero-bg-2)); color: var(--hero-ink); } :root[data-brand] .hero > * { position: relative; z-index: 1; } :root[data-brand] .hero h1 { color: var(--hero-ink); } :root[data-brand] .hero p { color: var(--hero-muted); } /* app.js pone color en línea al eyebrow: hace falta !important */ :root[data-brand] .hero .eyebrow { color: var(--hero-muted) !important; padding-right: 48px; } :root[data-brand] .hero .btn.primary { background: var(--hero-btn); color: var(--hero-btn-ink); } :root[data-brand] .hero .btn.primary:hover { background: var(--hero-btn-hover); } :root[data-brand] .hero .stat { background: var(--hero-stat); } /* Estrellas de valoración (color legible en cada paleta) */ :root[data-brand] .stars, :root[data-brand] .star-btn.on { color: var(--star); } /* ===================================================================== 1 · CHARLA — dos burbujas que se cruzan. Redondeada, alegre, cercana. ===================================================================== */ /* Tokens · claro */ :root[data-brand="1"] { --bg: #F6F4FF; --surface: #FFFFFF; --surface-2: #ECE8FF; --text: #1D1A33; --muted: #5B5775; --primary: #5137E8; --primary-hover: #4129C9; --primary-ink: #FFFFFF; --accent: #FF6B57; --accent-soft: #FFE4DF; --ok: #127A55; --ok-soft: #DDF5EA; --bad: #B42318; --bad-soft: #FDE5E3; --border: #E4E0F5; --focus: #D93A26; --shadow: 0 1px 2px rgba(29, 26, 51, .06), 0 6px 18px rgba(29, 26, 51, .07); --radius: 22px; --radius-sm: 14px; --font-head: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-btn: var(--font-head); --star: #E0452F; --hero-bg: #5137E8; --hero-bg-2: #4329D6; --hero-ink: #FFFFFF; --hero-muted: #E4DFFF; --hero-btn: #FFFFFF; --hero-btn-ink: #5137E8; --hero-btn-hover: #EFEBFF; --hero-stat: rgba(255, 255, 255, .16); color-scheme: light; } /* Tokens · oscuro */ @media (prefers-color-scheme: dark) { :root[data-brand="1"] { --bg: #121027; --surface: #1D1A38; --surface-2: #2A2552; --text: #F3F1FF; --muted: #B7B2D6; --primary: #A89CFF; --primary-hover: #BDB3FF; --primary-ink: #15102E; --accent: #FF8A78; --accent-soft: #4A2A33; --ok: #5CD6A6; --ok-soft: #173A2E; --bad: #FF8F86; --bad-soft: #4A2230; --border: #3A3566; --focus: #FF8A78; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .3); --star: #FF8A78; --hero-bg: #2A2552; --hero-bg-2: #231F48; --hero-ink: #F3F1FF; --hero-muted: #C9C3EE; --hero-btn: #A89CFF; --hero-btn-ink: #15102E; --hero-btn-hover: #BDB3FF; --hero-stat: rgba(255, 255, 255, .08); color-scheme: dark; } } /* Títulos */ :root[data-brand="1"] h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.025em; } :root[data-brand="1"] h2 { font-weight: 800; letter-spacing: -.015em; } :root[data-brand="1"] h3 { font-weight: 700; } /* Cabecera */ :root[data-brand="1"] .topbar { border-bottom-color: transparent; box-shadow: 0 1px 0 var(--border); } :root[data-brand="1"] .brand-text { font-weight: 500; letter-spacing: -.02em; } :root[data-brand="1"] .brand-text b { font-weight: 800; } :root[data-brand="1"] .icon-btn { border-radius: 50%; } /* Botones: píldora */ :root[data-brand="1"] .btn { border-radius: 999px; font-weight: 700; } :root[data-brand="1"] .btn.primary { box-shadow: 0 6px 16px -8px rgba(81, 55, 232, .7); } :root[data-brand="1"] .option { border-radius: 18px; } :root[data-brand="1"] .tab { border-radius: 999px; } :root[data-brand="1"] .tab[aria-current="page"] { background: var(--surface-2); } :root[data-brand="1"] .badge { font-family: var(--font-head); } /* Tarjetas */ :root[data-brand="1"] .card { border-color: transparent; } :root[data-brand="1"] .card.soft { background: var(--surface-2); } :root[data-brand="1"] .fb-new { border-color: var(--primary); } /* Tarjeta de inicio: dos burbujas (blanca + coral) como en el logo */ :root[data-brand="1"] .hero { border-radius: 26px; box-shadow: 0 12px 28px -14px rgba(81, 55, 232, .7); } :root[data-brand="1"] .hero::before, :root[data-brand="1"] .hero::after { content: ""; position: absolute; z-index: 0; width: 28px; height: 20px; } :root[data-brand="1"] .hero::before { top: 12px; right: 32px; border-radius: 10px 10px 10px 3px; background: rgba(255, 255, 255, .9); } :root[data-brand="1"] .hero::after { top: 20px; right: 14px; border-radius: 10px 10px 3px 10px; background: var(--accent); opacity: .92; } :root[data-brand="1"] .hero h1 { font-size: 1.85rem; } :root[data-brand="1"] .hero .stat { border-radius: 999px; } @media (prefers-color-scheme: dark) { :root[data-brand="1"] .hero { box-shadow: var(--shadow); } :root[data-brand="1"] .hero::before { background: rgba(243, 241, 255, .85); } :root[data-brand="1"] .btn.primary { box-shadow: none; } } /* Lista de semanas */ :root[data-brand="1"] .week-item { border-radius: 20px; border-color: transparent; box-shadow: var(--shadow); } :root[data-brand="1"] .week-item:hover { border-color: var(--primary); } :root[data-brand="1"] .week-num { border-radius: 50%; background: var(--surface-2); color: var(--primary); } :root[data-brand="1"] .progress > span { background: linear-gradient(90deg, var(--primary), var(--accent)); } /* Semana: ruta de 5 días y bloques */ :root[data-brand="1"] .day-chip { border-radius: 18px; } :root[data-brand="1"] .day-chip.next { border-color: var(--primary); background: var(--surface-2); } :root[data-brand="1"] .tile { border-radius: 20px; border-color: transparent; box-shadow: var(--shadow); } :root[data-brand="1"] .tile:hover { border-color: var(--primary); } :root[data-brand="1"] .tile .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 16px 16px 16px 5px; background: var(--surface-2); font-size: 1.3rem; } :root[data-brand="1"] .tile .t { font-family: var(--font-head); font-weight: 700; } :root[data-brand="1"] .steps li a { border-radius: 20px; } /* Chips y diálogos como burbujas de chat */ :root[data-brand="1"] .chip { border-radius: 999px; } :root[data-brand="1"] .line { border-radius: 18px 18px 18px 6px; } :root[data-brand="1"] .line.s1 { border-radius: 18px 18px 6px 18px; } :root[data-brand="1"] .flashcard { border-radius: 26px; } :root[data-brand="1"] .text-input { border-radius: 14px; } :root[data-brand="1"] .rec-btn { box-shadow: 0 0 0 8px var(--surface-2), var(--shadow); } /* Eslogan: dentro de una burbuja */ :root[data-brand="1"] .brand-slogan { width: fit-content; max-width: 100%; padding: 8px 16px; border-radius: 18px 18px 18px 5px; background: var(--surface-2); color: var(--text); font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.25; } /* ===================================================================== 2 · APERTURA ¡! — editorial: papel, tinta negra y toque lima. ===================================================================== */ /* Tokens · claro */ :root[data-brand="2"] { --bg: #F3F2ED; --surface: #FFFFFF; --surface-2: #E7E6DF; --text: #141414; --muted: #5E5D58; --primary: #141414; --primary-hover: #34342F; --primary-ink: #FFFFFF; --accent: #D2F34C; --accent-soft: #E8F8A8; --ok: #0B7A4B; --ok-soft: #E2F5E9; --bad: #B42318; --bad-soft: #FDE5E3; --border: #D6D4CB; --focus: #2456C9; --shadow: 0 1px 0 rgba(20, 20, 20, .06); --radius: 10px; --radius-sm: 6px; --font-head: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-btn: var(--font-head); --line-strong: #141414; --star: #141414; --hero-bg: #FFFFFF; --hero-bg-2: #FFFFFF; --hero-ink: #141414; --hero-muted: #5E5D58; --hero-btn: #141414; --hero-btn-ink: #FFFFFF; --hero-btn-hover: #34342F; --hero-stat: transparent; color-scheme: light; } /* Tokens · oscuro */ @media (prefers-color-scheme: dark) { :root[data-brand="2"] { --bg: #0F0F0E; --surface: #1B1B19; --surface-2: #2A2A27; --text: #F3F2ED; --muted: #A9A8A0; --primary: #D2F34C; --primary-hover: #E0F87A; --primary-ink: #141414; --accent: #D2F34C; --accent-soft: #2F3A0E; --ok: #4FD08A; --ok-soft: #15301F; --bad: #FF8F86; --bad-soft: #3D1C1A; --border: #3A3A36; --focus: #8DB4FF; --shadow: none; --line-strong: #DCDBD4; --star: #D2F34C; --hero-bg: #1B1B19; --hero-bg-2: #1B1B19; --hero-ink: #F3F2ED; --hero-muted: #A9A8A0; --hero-btn: #D2F34C; --hero-btn-ink: #141414; --hero-btn-hover: #E0F87A; --hero-stat: transparent; color-scheme: dark; } } /* Títulos: Archivo ancho y pesado */ :root[data-brand="2"] h1 { font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; line-height: 1.08; } :root[data-brand="2"] h2 { font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; } :root[data-brand="2"] h3 { font-weight: 700; font-stretch: 105%; } /* Cabecera: papel liso con línea de tinta */ :root[data-brand="2"] .topbar { background: var(--bg); backdrop-filter: none; border-bottom: 2px solid var(--line-strong); } :root[data-brand="2"] .brand-text { font-size: 1.08rem; font-weight: 800; font-stretch: 108%; letter-spacing: -.01em; } /* "Mucho" subrayado con marcador lima */ :root[data-brand="2"] .brand-text b { color: inherit; padding: 0 .08em; background: linear-gradient(transparent 58%, var(--accent) 58%, var(--accent) 92%, transparent 92%); } :root[data-brand="2"] .icon-btn { border-radius: 8px; } :root[data-brand="2"] .icon-btn:hover { background: var(--accent-soft); } @media (max-width: 380px) { :root[data-brand="2"] .brand-text { font-size: 1rem; font-stretch: 104%; } } @media (prefers-color-scheme: dark) { :root[data-brand="2"] .brand-text b { background: none; color: var(--accent); } } /* Botones: rectos, tinta */ :root[data-brand="2"] .btn { border-radius: 8px; font-weight: 700; font-stretch: 105%; } :root[data-brand="2"] .btn.big { border-radius: 10px; } :root[data-brand="2"] .btn.outline { border-width: 1.5px; border-color: var(--line-strong); } :root[data-brand="2"] .btn[aria-pressed="true"] { border-color: var(--line-strong); } :root[data-brand="2"] .option { border-width: 1.5px; border-color: var(--line-strong); } :root[data-brand="2"] .option.correct { border-color: var(--ok); } :root[data-brand="2"] .option.wrong { border-color: var(--bad); } :root[data-brand="2"] .tab { border-radius: 8px; border-width: 1.5px; border-color: var(--line-strong); } :root[data-brand="2"] .tab[aria-current="page"] { background: var(--accent); border-color: var(--line-strong); color: #141414; } :root[data-brand="2"] .badge { border-radius: 4px; font-family: var(--font-head); } /* Tarjetas con borde de tinta, sin sombra */ :root[data-brand="2"] .card { border: 1.5px solid var(--line-strong); box-shadow: none; } :root[data-brand="2"] .card.soft { border-color: transparent; } :root[data-brand="2"] .fb-new { border-width: 2px; border-color: var(--line-strong); } /* Tarjeta de inicio: papel, borde de tinta y sombra lima desplazada */ :root[data-brand="2"] .hero { border: 2px solid var(--line-strong); border-radius: 12px; box-shadow: 6px 6px 0 var(--accent); } :root[data-brand="2"] .hero .eyebrow { display: inline-block; padding: 3px 8px; border-radius: 4px; background: var(--accent); color: #141414 !important; font-size: .72rem; font-weight: 800; letter-spacing: .07em; } :root[data-brand="2"] .hero h1 { font-stretch: 115%; margin-top: 6px; } :root[data-brand="2"] .hero .stat { border: 1.5px solid var(--line-strong); border-radius: 6px; } /* Lista de semanas: número grande, filas con borde */ :root[data-brand="2"] .week-item { border: 1.5px solid var(--line-strong); border-radius: 10px; } :root[data-brand="2"] .week-item:hover { background: var(--accent-soft); border-color: var(--line-strong); } :root[data-brand="2"] .week-num { width: 40px; place-items: center start; background: transparent; font-size: 1.5rem; font-stretch: 115%; } :root[data-brand="2"] .week-body .t { font-family: var(--font-head); font-weight: 700; } /* Barra de progreso: lima con borde de tinta (el lima solo no se ve sobre papel) */ :root[data-brand="2"] .progress, :root[data-brand="2"] .mini-bar { height: 10px; background: var(--surface); border: 1.5px solid var(--line-strong); } /* Semana: ruta de 5 días y bloques */ :root[data-brand="2"] .day-chip { border-width: 1.5px; border-color: var(--line-strong); border-radius: 8px; } :root[data-brand="2"] .day-chip.done { border-color: var(--ok); } /* Día siguiente en lima con texto de tinta (también en modo oscuro) */ :root[data-brand="2"] .day-chip.next { background: var(--accent); border-color: var(--line-strong); color: #141414; } :root[data-brand="2"] .day-chip.next .muted { color: #141414; } :root[data-brand="2"] .tile { border: 1.5px solid var(--line-strong); border-radius: 10px; } :root[data-brand="2"] .tile:hover { background: var(--accent-soft); border-color: var(--line-strong); } :root[data-brand="2"] .tile .t { font-family: var(--font-head); font-weight: 800; font-stretch: 105%; } :root[data-brand="2"] .steps li a { border: 1.5px solid var(--line-strong); border-radius: 10px; } :root[data-brand="2"] .steps li a::before { border-radius: 4px; } /* Chips, diálogos, tarjetas de vocabulario, formularios */ :root[data-brand="2"] .chip { border-radius: 6px; border-width: 1.5px; border-color: var(--line-strong); } :root[data-brand="2"] .chip.on { border-color: var(--ok); } :root[data-brand="2"] .line { border-radius: 10px; border-width: 1.5px; } :root[data-brand="2"] .line[aria-current="true"] { border-color: var(--line-strong); } :root[data-brand="2"] .flashcard { border-color: var(--line-strong); border-radius: 12px; box-shadow: 5px 5px 0 var(--accent); } :root[data-brand="2"] .flashcard .big { font-weight: 800; font-stretch: 108%; } :root[data-brand="2"] .text-input { border-radius: 8px; border-width: 1.5px; border-color: var(--line-strong); } :root[data-brand="2"] .note, :root[data-brand="2"] .inbox-item.pending { border-left-color: var(--line-strong); } :root[data-brand="2"] .star-btn.on, :root[data-brand="2"] .rate-btn.on, :root[data-brand="2"] .conf-btn.on { border-color: var(--line-strong); } :root[data-brand="2"] .rec-btn { box-shadow: 4px 4px 0 var(--accent); } @media (prefers-color-scheme: dark) { :root[data-brand="2"] .rec-btn { box-shadow: 0 0 0 6px var(--accent-soft); } } /* Eslogan: titular ancho con subrayado lima */ :root[data-brand="2"] .brand-slogan { color: var(--text); font-family: var(--font-head); font-size: 1.6rem; font-weight: 800; font-stretch: 112%; letter-spacing: -.015em; line-height: 1.1; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: .22em; text-underline-offset: .1em; text-decoration-skip-ink: none; } /* ===================================================================== 3 · TU VOZ — onda de voz que dibuja una M. Tranquila, adulta, cálida. ===================================================================== */ /* Tokens · claro */ :root[data-brand="3"] { --bg: #F2F4F1; --surface: #FFFFFF; --surface-2: #E3ECEA; --text: #15211F; --muted: #55625F; --primary: #0F4C5C; --primary-hover: #0B3B48; --primary-ink: #FFFFFF; --accent: #F2B33D; --accent-soft: #FCEFD2; --ok: #1A7049; --ok-soft: #DDF2E5; --bad: #B42318; --bad-soft: #FCE4E1; --border: #DCE3E0; --focus: #2456C9; --shadow: 0 1px 2px rgba(15, 76, 92, .06), 0 6px 16px rgba(15, 76, 92, .07); --radius: 20px; --radius-sm: 12px; --font-head: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-btn: var(--font-body); --accent-ink: #15211F; --wave: rgba(255, 255, 255, .32); --star: #B36B00; --hero-bg: #0F4C5C; --hero-bg-2: #0B3B48; --hero-ink: #FFFFFF; --hero-muted: #CFE3E0; --hero-btn: #F2B33D; --hero-btn-ink: #15211F; --hero-btn-hover: #F6C25E; --hero-stat: rgba(255, 255, 255, .12); color-scheme: light; } /* Tokens · oscuro */ @media (prefers-color-scheme: dark) { :root[data-brand="3"] { --bg: #0D1719; --surface: #16252A; --surface-2: #1F3438; --text: #EAF1EF; --muted: #A3B4B1; --primary: #7CCBD6; --primary-hover: #9AD8E1; --primary-ink: #08262C; --accent: #F5C15A; --accent-soft: #3D3220; --ok: #6BD39A; --ok-soft: #173527; --bad: #FF8F86; --bad-soft: #43201E; --border: #2C4247; --focus: #F5C15A; --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 6px 16px rgba(0, 0, 0, .3); --accent-ink: #08262C; --wave: rgba(234, 241, 239, .28); --star: #F5C15A; --hero-bg: #17363D; --hero-bg-2: #122B31; --hero-ink: #EAF1EF; --hero-muted: #B5CBC7; --hero-btn: #F5C15A; --hero-btn-ink: #08262C; --hero-btn-hover: #F8CF7A; --hero-stat: rgba(255, 255, 255, .08); color-scheme: dark; } } /* Títulos: serifa suave */ :root[data-brand="3"] h1 { font-size: 1.75rem; font-weight: 600; letter-spacing: -.015em; } :root[data-brand="3"] h2 { font-weight: 600; letter-spacing: -.01em; } :root[data-brand="3"] h3 { font-weight: 600; } /* Cabecera: "Say" en cursiva, "Mucho" recta en petróleo */ :root[data-brand="3"] .topbar { background: color-mix(in srgb, var(--surface) 88%, transparent); } @supports not (background: color-mix(in srgb, red 50%, blue)) { :root[data-brand="3"] .topbar { background: var(--surface); } } :root[data-brand="3"] .brand-text { font-size: 1.25rem; font-style: italic; font-weight: 400; } :root[data-brand="3"] .brand-text b { font-style: normal; font-weight: 650; } :root[data-brand="3"] .icon-btn { border-radius: 50%; } @media (max-width: 380px) { :root[data-brand="3"] .brand-text { font-size: 1.1rem; } } /* Botones */ :root[data-brand="3"] .btn { border-radius: 14px; font-weight: 700; } :root[data-brand="3"] .btn.big { border-radius: 16px; } :root[data-brand="3"] .btn.primary { box-shadow: 0 6px 14px -8px rgba(15, 76, 92, .7); } :root[data-brand="3"] .tab { border-radius: 999px; border-width: 1.5px; } :root[data-brand="3"] .tab[aria-current="page"] { background: var(--surface-2); } @media (prefers-color-scheme: dark) { :root[data-brand="3"] .btn.primary { box-shadow: none; } } /* Tarjetas */ :root[data-brand="3"] .card.soft { background: var(--surface-2); } /* Tarjeta de inicio: petróleo con la onda (la barra central, caléndula, es "tu voz") */ :root[data-brand="3"] .hero { border-radius: 24px; box-shadow: 0 12px 28px -16px rgba(15, 76, 92, .8); } :root[data-brand="3"] .hero::before { content: ""; position: absolute; z-index: 0; top: 18px; right: 20px; width: 31px; height: 22px; background: linear-gradient(var(--wave), var(--wave)) 0 0 / 5px 100% no-repeat, linear-gradient(var(--wave), var(--wave)) 6.5px 100% / 5px 70% no-repeat, linear-gradient(var(--hero-btn), var(--hero-btn)) 13px 100% / 5px 42% no-repeat, linear-gradient(var(--wave), var(--wave)) 19.5px 100% / 5px 70% no-repeat, linear-gradient(var(--wave), var(--wave)) 26px 0 / 5px 100% no-repeat; } :root[data-brand="3"] .hero h1 { font-size: 1.85rem; } :root[data-brand="3"] .hero .stat { border-radius: 999px; } @media (prefers-color-scheme: dark) { :root[data-brand="3"] .hero { box-shadow: var(--shadow); } } /* Lista de semanas */ :root[data-brand="3"] .week-item { border-radius: 18px; } :root[data-brand="3"] .week-item:hover { border-color: var(--primary); } :root[data-brand="3"] .week-num { border-radius: 14px; background: var(--surface-2); color: var(--primary); font-size: 1.2rem; font-style: italic; font-weight: 600; } :root[data-brand="3"] .week-body .t { font-family: var(--font-head); font-weight: 600; } :root[data-brand="3"] .progress > span { background: var(--primary); } /* Semana: ruta de 5 días y bloques */ :root[data-brand="3"] .day-chip { border-width: 1.5px; border-radius: 16px; } :root[data-brand="3"] .day-chip.next { border-color: var(--primary); background: var(--surface-2); } :root[data-brand="3"] .tile { border-radius: 18px; box-shadow: var(--shadow); } :root[data-brand="3"] .tile:hover { border-color: var(--primary); } :root[data-brand="3"] .tile .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--surface-2); font-size: 1.3rem; } :root[data-brand="3"] .tile .t { font-family: var(--font-head); font-size: 1.08rem; font-weight: 600; } :root[data-brand="3"] .steps li a { border-radius: 18px; } :root[data-brand="3"] .steps li a::before { font-style: italic; font-weight: 600; } /* Chips, diálogos, tarjetas de vocabulario, formularios */ :root[data-brand="3"] .chip { border-width: 1.5px; } :root[data-brand="3"] .line { border-radius: 16px; border-width: 1.5px; } :root[data-brand="3"] .flashcard { border-radius: 24px; border-width: 1.5px; } :root[data-brand="3"] .flashcard .big { font-weight: 600; } :root[data-brand="3"] .score-big { font-weight: 600; } :root[data-brand="3"] .text-input { border-radius: 14px; border-width: 1.5px; } /* Botón de grabar en caléndula: es "tu voz" */ :root[data-brand="3"] .rec-btn { background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 8px var(--accent-soft), var(--shadow); } /* Eslogan: cursiva serif en petróleo, con la onda delante */ :root[data-brand="3"] .brand-slogan { color: var(--primary); font-family: var(--font-head); font-size: 1.3rem; font-style: italic; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; } :root[data-brand="3"] .brand-slogan::before { content: ""; display: inline-block; width: 19px; height: 15px; margin-right: .45em; vertical-align: -1px; background: linear-gradient(var(--primary), var(--primary)) 0 0 / 3px 100% no-repeat, linear-gradient(var(--primary), var(--primary)) 4px 100% / 3px 70% no-repeat, linear-gradient(var(--accent), var(--accent)) 8px 100% / 3px 42% no-repeat, linear-gradient(var(--primary), var(--primary)) 12px 100% / 3px 70% no-repeat, linear-gradient(var(--primary), var(--primary)) 16px 0 / 3px 100% no-repeat; }