From c7328bb80dd35a71e2b6116148043b9a3e4a767e Mon Sep 17 00:00:00 2001 From: Carlos Facundo Tello Date: Sat, 29 Aug 2026 01:33:19 -0300 Subject: [PATCH] =?UTF-8?q?feat(ux):=20redise=C3=B1o=20y=20modernizacion?= =?UTF-8?q?=20visual=20de=20lineas=20y=20tarjetas=20en=20info-modal=20(Man?= =?UTF-8?q?ual,=20Beneficios,=20Privacidad)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../info-modal/info-modal.component.html | 295 ++++++--- .../info-modal/info-modal.component.scss | 598 +++++++++--------- 2 files changed, 508 insertions(+), 385 deletions(-) diff --git a/src/app/components/info-modal/info-modal.component.html b/src/app/components/info-modal/info-modal.component.html index 4a4d798..5bc1fc6 100644 --- a/src/app/components/info-modal/info-modal.component.html +++ b/src/app/components/info-modal/info-modal.component.html @@ -30,46 +30,108 @@

Aprendé a usar tu Ecosistema Digital

-
-
-

1. Mi Cartelera (Horarios y Aulas)

-

Visualizá todas las materias organizadas por día. Usá la barra de búsqueda para filtrar rápido por nombre, - aula o código.

-
    -
  • Favoritos: Toca la estrella ⭐ para activar notificaciones automáticas y recordatorios 30 - min antes de clase.
    • -
  • Sincronización: Desliza hacia abajo para traer los últimos datos oficiales.
    • -
-
+
+ + +
+
+
+ +
+
+ Módulo 1 +

Mi Cartelera (Horarios y Aulas)

+
+
+

+ Consultá tus materias organizadas por día. Usá el buscador rápido por nombre, aula o código oficial. +

+
+
+ + Favoritos: Tocá la estrella ⭐ para recibir notificaciones y recordatorios 30 min antes de clase. +
+
+ + Sincronización: Deslizá hacia abajo para actualizar con la cartelera oficial. +
+
+
-
-

2. Mi Carrera (Seguimiento)

-

Accedé desde el botón inferior para ver tu plan de estudios.

-
    -
  • Estados: Marcá materias como Aprobadas (Fucsia) o En Curso (Celeste). -
    • -
  • Optativas: Elegí tus materias directamente desde el selector para completar tu progreso. -
    • -
-
+ +
+
+
+ +
+
+ Módulo 2 +

Mi Carrera (Seguimiento)

+
+
+

+ Accedé desde el botón inferior para ver tu plan de estudios y seguir tu progreso académico. +

+
+
+ + Estados: Marcá materias como Aprobadas (Fucsia) o En Curso (Celeste). +
+
+ + Optativas: Seleccioná tus materias electivas directamente desde la grilla. +
+
+
-
-

3. Agenda y Exámenes

-

En el menú de cada materia (`...`) podés agendar Parciales, Finales o TPs. Verás insignias - de colores avisándote la proximidad.

-
+ +
+
+
+ +
+
+ Módulo 3 +

Agenda y Exámenes

+
+
+

+ En el menú de cada materia (...) podés agendar Parciales, Finales y Trabajos Prácticos con alertas visuales de proximidad. +

+
-
-

4. Credencial Digital QR

-

Tocá el logo arriba a la izquierda para abrir tu credencial. La app subirá el brillo automáticamente para - facilitar el escaneo.

-
+ +
+
+
+ +
+
+ Módulo 4 +

Credencial Digital QR

+
+
+

+ Tocá el logo de la Universidad en la barra superior para abrir tu credencial. La app optimiza el brillo automáticamente para el molinete y funciona 100% offline. +

+
+ + +
+
+
+ +
+
+ Módulo 5 +

Respaldo y Seguridad

+
+
+

+ En Perfil > Guardar Respaldo exportá tu archivo CSV seguro. Podés restaurarlo en cualquier momento sin perder tus datos. +

+
-
-

5. Mantené tus datos seguros

-

Usa Perfil > Guardar Respaldo para exportar un archivo CSV. Si cambias de teléfono, podés - restaurarlo desde el mismo lugar.

-
@@ -81,17 +143,37 @@

Tus datos son tuyos y de nadie más

-
-

Sin Intermediarios

-

Aulas UNICABA no tiene servidores propios. Cada vez que sincronizás la cartelera o tu credencial, la conexión - viaja directo de tu teléfono al servidor de la Universidad.

+
+ +
+
+
+ +
+

Sin Servidores Intermediarios

+
+

Aulas UNICABA no almacena tus datos en servidores intermedios. Cada sincronización de cartelera o credencial viaja directamente entre tu dispositivo y el servidor oficial de la Universidad.

+
-

Tratamiento de Credenciales

-

Tus claves de Moodle o SIU Guaraní se guardan de forma encriptada en el almacenamiento seguro de tu - dispositivo. Nunca salen de tu teléfono hacia terceros.

+
+
+
+ +
+

Almacenamiento Local Seguro

+
+

Tus claves de Moodle o SIU Guaraní se guardan de forma encriptada en el almacenamiento seguro de tu teléfono y nunca se transmiten a terceros.

+
-

Analíticas y Rastreos

-

No usamos Google Analytics ni SDKs de seguimiento. No hay publicidad. Cero telemetría invasiva.

+
+
+
+ +
+

Cero Rastreadores y Sin Publicidad

+
+

No utilizamos Google Analytics, ni cookies publicitarias ni SDKs de telemetría invasiva. Tu actividad académica es estrictamente privada.

+

Aulas UNICABA v1.2.4 • Independiente y Offline-First

@@ -118,14 +200,15 @@

ON FIT

-

Gimnasio & Bienestar

+

Gimnasio & Bienestar

25% OFF
-

- 25% de descuento sobre el valor de la membresía mensual con acceso libre a sus 20 sedes en todo el AMBA. -

+
+ 25% de descuento sobre el valor de la membresía mensual + Acceso libre a sus 20 sedes en todo el AMBA +

¿Qué incluye la membresía?

- - Presentá tu Credencial Digital de la app para acreditar pertenencia a la Universidad. + + Presentá tu Credencial Digital de la app para acreditar pertenencia.
- Consultar por WhatsApp (+54 9 11 5850-0830) + Consultar por WhatsApp @@ -163,15 +246,22 @@ 10% OFF -

10% de descuento en productos (excluye promociones vigentes).

+
+ 10% de descuento en productos + (excluye promociones vigentes) +
- - Tte. Gral. Perón 893, CABA (a metros de la sede) + +
+ Tte. Gral. Perón 893, CABA + (a metros de la sede) + Ver mapa +
- - Lun a Vie de 8 a 20 h • Sábados de 8 a 16 h + + Lun a Vie de 8 a 20 h • Sábados de 8 a 16 h
@@ -184,21 +274,27 @@
-

Café & Chocolate

-

Cafetería & Delicatessen

+

Café & Chocolate

+

Cafetería & Delicatessen

10% OFF -

10% de descuento en productos (excluye promociones vigentes).

+
+ 10% de descuento en productos + (excluye promociones vigentes) +
- - Bartolomé Mitre 807, CABA + +
+ Bartolomé Mitre 807, CABA + Ver mapa +
- - Lun a Vie de 8 a 19 h • Sábados de 8 a 14 h + + Lun a Vie de 8 a 19 h • Sábados de 8 a 14 h
@@ -217,15 +313,21 @@ 10% OFF -

10% de descuento en productos (excluye promociones vigentes).

+
+ 10% de descuento en productos + (excluye promociones vigentes) +
- - Tucumán 1596, CABA + +
+ Tucumán 1596, CABA + Ver mapa +
- - Mar a Vie de 8 a 19 h • Sáb y Dom de 9:30 a 14:30 h + + Mar a Vie de 8 a 19 h • Sáb y Dom de 9:30 a 14:30 h
@@ -239,20 +341,26 @@

Atlas Comercial

-

Librería & Papelería

+

Librería & Papelería

10% OFF -

10% de descuento en productos (excluye promociones vigentes).

+
+ 10% de descuento en productos + (excluye promociones vigentes) +
- - Bartolomé Mitre 839, CABA + +
+ Bartolomé Mitre 839, CABA + Ver mapa +
- - Lun a Vie de 9 a 18 h + + Lun a Vie de 9 a 18 h
@@ -266,22 +374,25 @@

Fluire Studio

-

Pilates & Salud

+

Pilates & Salud

Hasta 20% OFF -

- 10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio. -

+
+ 10% OFF en 1 mes • 20% OFF abonando 4 meses +
- - Esmeralda 135, piso 4 B, CABA + +
+ Esmeralda 135, piso 4 B, CABA + Ver mapa +
- - Contacto: fluire.studio.ba@gmail.com + + fluire.studio.ba@gmail.com
Transporte de Larga Distancia

- Descuento Nacional + Desc. Nacional + +
+ Descuentos en pasajes de micro a todo el país + A través del portal oficial de Central de Pasajes
-

- Obtené descuentos en pasajes de micro a todo el país a través del portal de Central de Pasajes. -

- - Entrá a Perfil, generá tu Certificado de Alumno Regular y subilo a soyestudiante.com.ar. + + Entrá a Perfil, generá tu Certificado de Alumno Regular y subilo al portal.
+ + + Ir a SoyEstudiante.com.ar + diff --git a/src/app/components/info-modal/info-modal.component.scss b/src/app/components/info-modal/info-modal.component.scss index 28cdc6d..591e0fd 100644 --- a/src/app/components/info-modal/info-modal.component.scss +++ b/src/app/components/info-modal/info-modal.component.scss @@ -1,113 +1,254 @@ +:host { + --modal-bg: var(--ion-color-light, #f4f5f8); + --card-bg: #ffffff; + --card-border: rgba(0, 0, 0, 0.05); + --card-shadow: 0 3px 12px rgba(0, 0, 0, 0.04); + --text-title: #1c1c1e; + --text-body: #4a4a52; + --text-sub: #55555e; + --text-muted: #777780; + --border-line: #f0f0f4; + --address-bg: rgba(var(--ion-color-primary-rgb), 0.04); + --address-border: rgba(var(--ion-color-primary-rgb), 0.1); + --address-hover: rgba(var(--ion-color-primary-rgb), 0.08); + --address-text: #1a1a1a; + --map-tag-bg: #ffffff; + --map-tag-color: var(--ion-color-primary); + --map-tag-border: rgba(var(--ion-color-primary-rgb), 0.2); + --h2-color: var(--ion-color-primary); + --segment-bg: rgba(0, 0, 0, 0.15); + --segment-indicator: #ffffff; +} + +@media (prefers-color-scheme: dark) { + :host { + --modal-bg: var(--ion-background-color, #121212); + --card-bg: var(--ion-color-step-100, #1c1c1e); + --card-border: var(--ion-color-step-200, #2c2c30); + --card-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); + --text-title: #ffffff; + --text-body: #d1d2d8; + --text-sub: #b5b6bc; + --text-muted: #a0a0a8; + --border-line: rgba(255, 255, 255, 0.08); + --address-bg: rgba(100, 181, 246, 0.08); + --address-border: rgba(100, 181, 246, 0.2); + --address-hover: rgba(100, 181, 246, 0.15); + --address-text: #64b5f6; + --map-tag-bg: rgba(100, 181, 246, 0.18); + --map-tag-color: #90caf9; + --map-tag-border: rgba(100, 181, 246, 0.35); + --h2-color: #ff8ab6; + --segment-bg: rgba(0, 0, 0, 0.35); + --segment-indicator: #ff8ab6; + } +} + .privacy-content { - --background: var(--ion-color-light, #f4f5f8); + --background: var(--modal-bg); } ion-segment { - --background: rgba(0, 0, 0, 0.15); + --background: var(--segment-bg); border-radius: 0; ion-segment-button { --color: rgba(255, 255, 255, 0.75); --color-checked: #ffffff; - --indicator-color: #ffffff; + --indicator-color: var(--segment-indicator); font-weight: 600; } } .logo-container { - padding: 10px 0 20px; + padding: 10px 0 18px; .info-logo { - height: 80px; + height: 76px; background: #ffffff; padding: 10px; border-radius: 16px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - margin-bottom: 15px; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); + margin-bottom: 12px; } ion-icon { - font-size: 64px; - margin-bottom: 5px; + font-size: 56px; + margin-bottom: 4px; } h2 { font-weight: 800; margin: 0; - color: var(--ion-color-primary); + color: var(--h2-color); + font-size: 1.45rem; } .subtitle { - margin: 5px 0 0; - color: var(--ion-color-medium, #666666); - font-size: 0.9rem; + margin: 4px 0 0; + color: var(--text-muted); + font-size: 0.88rem; font-weight: 500; } } -.info-body { - background: #ffffff; - border-radius: 20px; - padding: 20px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); - border: 1px solid rgba(0, 0, 0, 0.04); - margin-bottom: 20px; - - section { - margin-bottom: 25px; - &:last-child { margin-bottom: 0; } - } - - h3 { - font-weight: 700; - font-size: 1.05rem; - color: var(--ion-color-dark, #1c1c1e); - margin: 0 0 10px; - } - - p, li { - font-size: 0.92rem; - line-height: 1.55; - color: #4a4a52; - } - - strong { - color: #1a1a1a; - } - - em { - color: var(--ion-color-primary); - font-style: normal; - font-weight: 600; - } - - ul { - padding-left: 20px; - margin: 10px 0; - li { margin-bottom: 8px; } - } -} - -/* --- ESTILOS DE BENEFICIOS --- */ +/* ========================================================= + GUÍA DEL ESTUDIANTE (MANUAL) + ========================================================= */ +.guide-cards-container, +.privacy-cards-container, .benefits-container { display: flex; flex-direction: column; - gap: 16px; + gap: 14px; margin-bottom: 25px; } +.guide-card, +.privacy-card, +.benefit-card { + background: var(--card-bg); + border-radius: 16px; + padding: 16px; + box-shadow: var(--card-shadow); + border: 1px solid var(--card-border); + transition: transform 0.2s ease, box-shadow 0.2s ease; +} + +.guide-card { + .guide-card-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 8px; + + .guide-icon-badge { + width: 38px; + height: 38px; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: center; + font-size: 20px; + flex-shrink: 0; + + &.step-1 { background: rgba(194, 24, 91, 0.12); color: #c2185b; } + &.step-2 { background: rgba(81, 45, 168, 0.12); color: #7e57c2; } + &.step-3 { background: rgba(2, 136, 209, 0.12); color: #0288d1; } + &.step-4 { background: rgba(46, 125, 50, 0.12); color: #2e7d32; } + &.step-5 { background: rgba(230, 81, 0, 0.12); color: #ef6c00; } + } + + .guide-title-wrap { + .guide-tag { + display: block; + font-size: 0.72rem; + font-weight: 700; + text-transform: uppercase; + color: var(--h2-color); + letter-spacing: 0.5px; + margin-bottom: 2px; + } + h3 { + margin: 0; + font-size: 0.98rem; + font-weight: 700; + color: var(--text-title); + } + } + } + + .guide-text { + margin: 0 0 10px; + font-size: 0.88rem; + line-height: 1.45; + color: var(--text-body); + &:last-child { margin-bottom: 0; } + } + + .guide-highlights { + display: flex; + flex-direction: column; + gap: 6px; + padding-top: 8px; + border-top: 1px solid var(--border-line); + + .highlight-item { + display: flex; + align-items: flex-start; + gap: 8px; + font-size: 0.83rem; + line-height: 1.4; + color: var(--text-sub); + + ion-icon { + font-size: 15px; + margin-top: 2px; + flex-shrink: 0; + } + + strong { + color: var(--text-title); + } + + em { + color: var(--h2-color); + font-style: normal; + font-weight: 600; + } + } + } +} + +/* ========================================================= + PRIVACIDAD ZERO-TRUST + ========================================================= */ +.privacy-card { + .privacy-card-header { + display: flex; + align-items: center; + gap: 10px; + margin-bottom: 8px; + + .privacy-icon-badge { + width: 36px; + height: 36px; + border-radius: 10px; + background: rgba(45, 211, 111, 0.15); + color: #2dd36f; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + flex-shrink: 0; + } + + h3 { + margin: 0; + font-size: 0.98rem; + font-weight: 700; + color: var(--text-title); + } + } + + p { + margin: 0; + font-size: 0.88rem; + line-height: 1.45; + color: var(--text-body); + } +} + +/* ========================================================= + COMUNIDAD DE BENEFICIOS + ========================================================= */ .benefit-card { - background: #ffffff; border-radius: 18px; padding: 18px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06); - border: 1px solid rgba(0, 0, 0, 0.06); - transition: transform 0.2s ease, box-shadow 0.2s ease; &.featured { - border: 1.5px solid var(--ion-color-primary); - background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.03) 100%); - box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.12); + border: 1.5px solid var(--h2-color); + box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.16); } .card-top { @@ -128,17 +269,15 @@ ion-segment { display: flex; align-items: center; justify-content: center; - background: rgba(var(--ion-color-primary-rgb), 0.1); - color: var(--ion-color-primary); font-size: 24px; flex-shrink: 0; - &.cafe { background: #fff3e0; color: #e65100; } - &.gym { background: #e8f5e9; color: #2e7d32; } - &.pilates { background: #ede7f6; color: #512da8; } - &.pasta { background: #fbe9e7; color: #d84315; } - &.libreria { background: #e1f5fe; color: #0288d1; } - &.travel { background: #e3f2fd; color: #1565c0; } + &.cafe { background: rgba(255, 152, 0, 0.15); color: #f57c00; } + &.gym { background: rgba(76, 175, 80, 0.15); color: #388e3c; } + &.pilates { background: rgba(156, 39, 176, 0.15); color: #8e24aa; } + &.pasta { background: rgba(255, 87, 34, 0.15); color: #e64a19; } + &.libreria { background: rgba(3, 169, 244, 0.15); color: #0288d1; } + &.travel { background: rgba(33, 150, 243, 0.15); color: #1976d2; } } .title-wrap { @@ -146,12 +285,12 @@ ion-segment { margin: 0; font-size: 1.05rem; font-weight: 800; - color: #1a1a1a; + color: var(--text-title); } .category { margin: 2px 0 0; - font-size: 0.8rem; - color: #666666; + font-size: 0.78rem; + color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; @@ -168,11 +307,31 @@ ion-segment { } } - .benefit-desc { - font-size: 0.92rem; - color: #33333a; - margin: 0 0 12px; - line-height: 1.45; + .benefit-headline { + margin-bottom: 12px; + display: flex; + flex-direction: column; + gap: 2px; + + .discount-lead { + font-size: 0.94rem; + font-weight: 700; + color: var(--text-title); + line-height: 1.4; + } + + .discount-cond { + font-size: 0.82rem; + font-weight: 500; + color: var(--text-muted); + font-style: italic; + } + + .discount-sub { + font-size: 0.84rem; + color: var(--text-body); + font-weight: 500; + } } .meta-grid { @@ -180,87 +339,101 @@ ion-segment { flex-direction: column; gap: 8px; padding-top: 10px; - border-top: 1px dashed #e0e0e0; + border-top: 1px dashed var(--border-line); margin-bottom: 12px; .meta-row { display: flex; - align-items: flex-start; + align-items: center; gap: 8px; font-size: 0.84rem; - color: #55555e; + color: var(--text-sub); line-height: 1.4; - ion-icon { + .meta-icon { font-size: 16px; - margin-top: 2px; - color: var(--ion-color-primary); + color: var(--h2-color); flex-shrink: 0; } + .meta-text { + flex: 1; + } + &.clickable-address { cursor: pointer; - padding: 3px 6px; - margin: -3px -6px; - border-radius: 8px; - transition: background-color 0.2s ease, opacity 0.15s ease; + padding: 6px 10px; + margin: -2px -6px; + border-radius: 10px; + background: var(--address-bg); + border: 1px solid var(--address-border); + transition: all 0.2s ease; - .address-text { - color: var(--ion-color-primary); - font-weight: 700; - text-decoration: underline; - text-underline-offset: 3px; - text-decoration-color: rgba(var(--ion-color-primary-rgb), 0.4); - } + .address-wrapper { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 4px 6px; + flex: 1; - .link-hint-icon { - font-size: 12px; - margin-top: 0; - margin-left: 2px; - opacity: 0.75; - display: inline-block; - vertical-align: middle; + .address-text { + color: var(--address-text); + font-weight: 700; + text-decoration: underline; + text-underline-offset: 3px; + } + + .address-extra { + font-size: 0.8rem; + color: var(--text-muted); + font-style: italic; + } + + .map-action-tag { + font-size: 0.72rem; + font-weight: 700; + color: var(--map-tag-color); + display: inline-flex; + align-items: center; + gap: 2px; + background: var(--map-tag-bg); + padding: 2px 7px; + border-radius: 6px; + border: 1px solid var(--map-tag-border); + flex-shrink: 0; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); + margin-left: auto; + + ion-icon { + font-size: 11px; + } + } } &:hover { - background-color: rgba(var(--ion-color-primary-rgb), 0.06); + background: var(--address-hover); } &:active { - opacity: 0.7; - background-color: rgba(var(--ion-color-primary-rgb), 0.12); + transform: scale(0.985); + opacity: 0.8; } } - - em { - color: #777777; - font-style: italic; - } - - b, strong { - color: #1a1a1a; - } - - a { - color: var(--ion-color-primary); - font-weight: 600; - text-decoration: underline; - } } } .inclusion-box { - background: #f8fafc; + background: rgba(0, 0, 0, 0.03); border-radius: 12px; padding: 12px 14px; margin: 10px 0; - border-left: 3px solid var(--ion-color-success); + border-left: 3px solid var(--ion-color-success, #2dd36f); h4 { margin: 0 0 6px; font-size: 0.85rem; font-weight: 700; - color: #1e293b; + color: var(--text-title); } ul { @@ -269,7 +442,7 @@ ion-segment { li { font-size: 0.82rem; margin-bottom: 4px; - color: #475569; + color: var(--text-body); &:last-child { margin-bottom: 0; } } } @@ -285,9 +458,9 @@ ion-segment { } .footer-info { - margin-top: 30px; + margin-top: 25px; p, small { - color: #77777d; + color: var(--text-muted); font-size: 0.8rem; } } @@ -300,170 +473,3 @@ ion-segment { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } - -/* ========================================================= - MODO OSCURO (DARK MODE) - OPTIMIZACIÓN DE CONTRASTE - ========================================================= */ -@media (prefers-color-scheme: dark) { - .privacy-content { - --background: var(--ion-background-color, #121212); - } - - ion-segment { - --background: rgba(0, 0, 0, 0.35); - - ion-segment-button { - --color: rgba(255, 255, 255, 0.7); - --color-checked: #ffffff; - --indicator-color: #ff8ab6; - } - } - - .logo-container { - .info-logo { - background: rgba(255, 255, 255, 0.95); - box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); - } - - h2 { - color: #ff8ab6; - } - - .subtitle { - color: #a6a7ab; - } - } - - .info-body { - background: var(--ion-color-step-100, #1c1c1e); - border: 1px solid var(--ion-color-step-200, #2c2c30); - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35); - - h3 { - color: #ffffff; - } - - p, li { - color: #d1d2d8; - } - - strong { - color: #ffffff; - } - - em { - color: #ff8ab6; - } - } - - .benefit-card { - background: var(--ion-color-step-100, #1c1c1e); - border: 1px solid var(--ion-color-step-200, #2d2d32); - box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3); - - &.featured { - background: linear-gradient(180deg, #251e27 0%, var(--ion-color-step-100, #1c1c1e) 100%); - border: 1.5px solid #ff8ab6; - box-shadow: 0 6px 24px rgba(180, 62, 142, 0.28); - } - - .card-top { - .brand-info { - .brand-icon { - &.cafe { background: rgba(255, 152, 0, 0.2); color: #ffb74d; } - &.gym { background: rgba(76, 175, 80, 0.2); color: #81c784; } - &.pilates { background: rgba(186, 104, 200, 0.22); color: #e1bee7; } - &.pasta { background: rgba(255, 87, 34, 0.2); color: #ff8a65; } - &.libreria { background: rgba(3, 169, 244, 0.2); color: #4fc3f7; } - &.travel { background: rgba(33, 150, 243, 0.2); color: #64b5f6; } - } - - .title-wrap { - h3 { - color: #ffffff; - } - .category { - color: #a0a0a8; - } - } - } - } - - .benefit-desc { - color: #d1d2d8; - } - - .meta-grid { - border-top: 1px dashed rgba(255, 255, 255, 0.15); - - .meta-row { - color: #b5b6bc; - - ion-icon { - color: #ff8ab6; - } - - &.clickable-address { - .address-text { - color: #64b5f6; - text-decoration: underline; - text-decoration-color: rgba(100, 181, 246, 0.45); - } - - .link-hint-icon { - color: #64b5f6; - } - - &:hover { - background-color: rgba(100, 181, 246, 0.12); - } - - &:active { - background-color: rgba(100, 181, 246, 0.22); - } - } - - em { - color: #9fa1a8; - } - - b, strong { - color: #ffffff; - } - - a { - color: #64b5f6; - text-decoration: underline; - } - } - } - - .inclusion-box { - background: rgba(255, 255, 255, 0.04); - border-left: 3px solid #2dd36f; - border-top: 1px solid rgba(255, 255, 255, 0.08); - border-right: 1px solid rgba(255, 255, 255, 0.08); - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - - h4 { - color: #ffffff; - } - - ul li { - color: #d0d1d6; - } - } - - .action-btn[color="tertiary"] { - --color: #ba68c8; - --border-color: #ba68c8; - } - } - - .footer-info { - p, small { - color: #9e9ea6; - } - } -} -