style(home): ajustar ancho del segmento al 85% en iOS

README.md

@@ -1,6 +1,6 @@
 # Aulas UNICABA 🎓📱
 
-[![Version](https://img.shields.io/badge/version-1.2.3-blue.svg)](package.json)
+[![Version](https://img.shields.io/badge/version-1.2.4-blue.svg)](package.json)
 [![Angular](https://img.shields.io/badge/Angular-20.3-red.svg)](https://angular.io/)
 [![Ionic](https://img.shields.io/badge/Ionic-v8-blue.svg)](https://ionicframework.com/)
 [![Capacitor](https://img.shields.io/badge/Capacitor-v8.2-119EFF.svg)](https://capacitorjs.com/)

android/app/build.gradle

@@ -7,8 +7,8 @@ android {
         applicationId "ar.edu.unicaba.cartelera"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionCode 16  
+        versionCode 17  
-        versionName "1.2.3"
+        versionName "1.2.4"
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
         aaptOptions {
              // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.

ios/App/App.xcodeproj/project.pbxproj

@@ -296,14 +296,14 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 17;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 1.2.4;
 				OTHER_SWIFT_FLAGS = "$(inherited) \"-D\" \"COCOAPODS\" \"-DDEBUG\"";
 				PRODUCT_BUNDLE_IDENTIFIER = ar.edu.unicaba.cartelera;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -318,14 +318,14 @@
 			buildSettings = {
 				ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 17;
 				INFOPLIST_FILE = App/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 1.0;
+				MARKETING_VERSION = 1.2.4;
 				PRODUCT_BUNDLE_IDENTIFIER = ar.edu.unicaba.cartelera;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = "";

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "aulas-unicaba",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "aulas-unicaba",
-      "version": "1.2.3",
+      "version": "1.2.4",
       "dependencies": {
         "@angular/animations": "~20.3.18",
         "@angular/common": "~20.3.18",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "aulas-unicaba",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "author": "Ionic Framework",
   "homepage": "https://ionicframework.com/",
   "scripts": {

privacidad-aulas-unicaba.md

@@ -27,4 +27,4 @@ La aplicación ha sido diseñada bajo una arquitectura de "cliente liviano" con
 Esta innovación tecnológica es de carácter informativo. La precisión estricta de asignación de las aulas depende originariamente de la pre-carga impuesta por el cuerpo no-docente en el documento de Spreadsheets. En escenarios contradictorios, la palabra oficial del ala administrativa universitaria primará sobre la respuesta sincronizada en Aulas UNICABA.
 
 ---
-*Última actualización: 28 de Agosto, 2026 - v1.2.3*
+*Última actualización: 29 de Agosto, 2026 - v1.2.4*

src/app/components/info-modal/info-modal.component.html

@@ -30,46 +30,108 @@
       <p class="subtitle">Aprendé a usar tu Ecosistema Digital</p>
     </div>
 
-    <div class="info-body">
+    <div class="guide-cards-container">
-      <section>
-        <h3>1. Mi Cartelera (Horarios y Aulas)</h3>
-        <p>Visualizá todas las materias organizadas por día. Usá la barra de búsqueda para filtrar rápido por nombre,
-          aula o código.</p>
-        <ul>
-          <li><strong>Favoritos:</strong> Toca la estrella ⭐ para activar notificaciones automáticas y recordatorios 30
-            min antes de clase.</li>
-          <li><strong>Sincronización:</strong> Desliza hacia abajo para traer los últimos datos oficiales.</li>
-        </ul>
-      </section>
       
-      <section>
+      <!-- Paso 1: Cartelera -->
-        <h3>2. Mi Carrera (Seguimiento)</h3>
+      <div class="guide-card">
-        <p>Accedé desde el botón inferior para ver tu plan de estudios.</p>
+        <div class="guide-card-header">
-        <ul>
+          <div class="guide-icon-badge step-1">
-          <li><strong>Estados:</strong> Marcá materias como <em>Aprobadas</em> (Fucsia) o <em>En Curso</em> (Celeste).
+            <ion-icon name="calendar-outline"></ion-icon>
-          </li>
+          </div>
-          <li><strong>Optativas:</strong> Elegí tus materias directamente desde el selector para completar tu progreso.
+          <div class="guide-title-wrap">
-          </li>
+            <span class="guide-tag">Módulo 1</span>
-        </ul>
+            <h3>Mi Cartelera (Horarios y Aulas)</h3>
-      </section>
+          </div>
+        </div>
+        <p class="guide-text">
+          Consultá tus materias organizadas por día. Usá el buscador rápido por nombre, aula o código oficial.
+        </p>
+        <div class="guide-highlights">
+          <div class="highlight-item">
+            <ion-icon name="star" color="warning"></ion-icon>
+            <span><strong>Favoritos:</strong> Tocá la estrella ⭐ para recibir notificaciones y recordatorios 30 min antes de clase.</span>
+          </div>
+          <div class="highlight-item">
+            <ion-icon name="sync-outline" color="primary"></ion-icon>
+            <span><strong>Sincronización:</strong> Deslizá hacia abajo para actualizar con la cartelera oficial.</span>
+          </div>
+        </div>
+      </div>
 
-      <section>
+      <!-- Paso 2: Carrera -->
-        <h3>3. Agenda y Exámenes</h3>
+      <div class="guide-card">
-        <p>En el menú de cada materia (`...`) podés agendar <strong>Parciales, Finales o TPs</strong>. Verás insignias
+        <div class="guide-card-header">
-          de colores avisándote la proximidad.</p>
+          <div class="guide-icon-badge step-2">
-      </section>
+            <ion-icon name="school-outline"></ion-icon>
+          </div>
+          <div class="guide-title-wrap">
+            <span class="guide-tag">Módulo 2</span>
+            <h3>Mi Carrera (Seguimiento)</h3>
+          </div>
+        </div>
+        <p class="guide-text">
+          Accedé desde el botón inferior para ver tu plan de estudios y seguir tu progreso académico.
+        </p>
+        <div class="guide-highlights">
+          <div class="highlight-item">
+            <ion-icon name="checkmark-circle-outline" color="secondary"></ion-icon>
+            <span><strong>Estados:</strong> Marcá materias como <em>Aprobadas</em> (Fucsia) o <em>En Curso</em> (Celeste).</span>
+          </div>
+          <div class="highlight-item">
+            <ion-icon name="list-outline" color="tertiary"></ion-icon>
+            <span><strong>Optativas:</strong> Seleccioná tus materias electivas directamente desde la grilla.</span>
+          </div>
+        </div>
+      </div>
 
-      <section>
+      <!-- Paso 3: Agenda -->
-        <h3>4. Credencial Digital QR</h3>
+      <div class="guide-card">
-        <p>Tocá el logo arriba a la izquierda para abrir tu credencial. La app subirá el brillo automáticamente para
+        <div class="guide-card-header">
-          facilitar el escaneo.</p>
+          <div class="guide-icon-badge step-3">
-      </section>
+            <ion-icon name="alarm-outline"></ion-icon>
+          </div>
+          <div class="guide-title-wrap">
+            <span class="guide-tag">Módulo 3</span>
+            <h3>Agenda y Exámenes</h3>
+          </div>
+        </div>
+        <p class="guide-text">
+          En el menú de cada materia (<code>...</code>) podés agendar <strong>Parciales, Finales y Trabajos Prácticos</strong> con alertas visuales de proximidad.
+        </p>
+      </div>
+
+      <!-- Paso 4: Credencial -->
+      <div class="guide-card">
+        <div class="guide-card-header">
+          <div class="guide-icon-badge step-4">
+            <ion-icon name="qr-code-outline"></ion-icon>
+          </div>
+          <div class="guide-title-wrap">
+            <span class="guide-tag">Módulo 4</span>
+            <h3>Credencial Digital QR</h3>
+          </div>
+        </div>
+        <p class="guide-text">
+          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 <strong>100% offline</strong>.
+        </p>
+      </div>
+
+      <!-- Paso 5: Respaldo -->
+      <div class="guide-card">
+        <div class="guide-card-header">
+          <div class="guide-icon-badge step-5">
+            <ion-icon name="shield-checkmark-outline"></ion-icon>
+          </div>
+          <div class="guide-title-wrap">
+            <span class="guide-tag">Módulo 5</span>
+            <h3>Respaldo y Seguridad</h3>
+          </div>
+        </div>
+        <p class="guide-text">
+          En <strong>Perfil &gt; Guardar Respaldo</strong> exportá tu archivo CSV seguro. Podés restaurarlo en cualquier momento sin perder tus datos.
+        </p>
+      </div>
 
-      <section>
-        <h3>5. Mantené tus datos seguros</h3>
-        <p>Usa <strong>Perfil > Guardar Respaldo</strong> para exportar un archivo CSV. Si cambias de teléfono, podés
-          restaurarlo desde el mismo lugar.</p>
-      </section>
     </div>
   </div>
 
@@ -81,20 +143,40 @@
       <p class="subtitle">Tus datos son tuyos y de nadie más</p>
     </div>
 
-    <div class="info-body">
+    <div class="privacy-cards-container">
-      <h3>Sin Intermediarios</h3>
-      <p>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.</p>
       
-      <h3>Tratamiento de Credenciales</h3>
+      <div class="privacy-card">
-      <p>Tus claves de Moodle o SIU Guaraní se guardan de forma encriptada en el almacenamiento seguro de tu
+        <div class="privacy-card-header">
-        dispositivo. Nunca salen de tu teléfono hacia terceros.</p>
+          <div class="privacy-icon-badge">
+            <ion-icon name="server-outline"></ion-icon>
+          </div>
+          <h3>Sin Servidores Intermediarios</h3>
+        </div>
+        <p>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.</p>
+      </div>
 
-      <h3>Analíticas y Rastreos</h3>
+      <div class="privacy-card">
-      <p>No usamos Google Analytics ni SDKs de seguimiento. No hay publicidad. Cero telemetría invasiva.</p>
+        <div class="privacy-card-header">
+          <div class="privacy-icon-badge">
+            <ion-icon name="key-outline"></ion-icon>
+          </div>
+          <h3>Almacenamiento Local Seguro</h3>
+        </div>
+        <p>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.</p>
+      </div>
+
+      <div class="privacy-card">
+        <div class="privacy-card-header">
+          <div class="privacy-icon-badge">
+            <ion-icon name="eye-off-outline"></ion-icon>
+          </div>
+          <h3>Cero Rastreadores y Sin Publicidad</h3>
+        </div>
+        <p>No utilizamos Google Analytics, ni cookies publicitarias ni SDKs de telemetría invasiva. Tu actividad académica es estrictamente privada.</p>
+      </div>
 
       <div class="footer-info ion-text-center">
-        <p><small>Aulas UNICABA v1.2.3 • Independiente y Offline-First</small></p>
+        <p><small>Aulas UNICABA v1.2.4 • Independiente y Offline-First</small></p>
       </div>
     </div>
   </div>
@@ -118,14 +200,15 @@
             </div>
             <div class="title-wrap">
               <h3>ON FIT</h3>
-              <p class="category">Gimnasio & Bienestar</p>
+              <p class="category">Gimnasio &amp; Bienestar</p>
             </div>
           </div>
           <ion-badge color="success" class="discount-badge">25% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">
+        <div class="benefit-headline">
-          25% de descuento sobre el valor de la membresía mensual con acceso libre a sus 20 sedes en todo el AMBA.
+          <span class="discount-lead">25% de descuento sobre el valor de la membresía mensual</span>
-        </p>
+          <span class="discount-sub">Acceso libre a sus 20 sedes en todo el AMBA</span>
+        </div>
         <div class="inclusion-box">
           <h4>¿Qué incluye la membresía?</h4>
           <ul>
@@ -137,15 +220,15 @@
         </div>
         <div class="meta-grid">
           <div class="meta-row">
-            <ion-icon name="information-circle-outline"></ion-icon>
+            <ion-icon name="information-circle-outline" class="meta-icon"></ion-icon>
-            <span>Presentá tu Credencial Digital de la app para acreditar pertenencia a la Universidad.</span>
+            <span class="meta-text">Presentá tu Credencial Digital de la app para acreditar pertenencia.</span>
           </div>
         </div>
         <ion-button expand="block" color="success" class="action-btn"
           href="https://wa.me/5491158500830?text=Hola!%20Soy%20de%20la%20Universidad%20de%20la%20Ciudad%20y%20deseo%20acceder%20al%20beneficio%20ON%20FIT"
           target="_blank">
           <ion-icon name="logo-whatsapp" slot="start"></ion-icon>
-          Consultar por WhatsApp (+54 9 11 5850-0830)
+          Consultar por WhatsApp
         </ion-button>
       </div>
 
@@ -163,15 +246,22 @@
           </div>
           <ion-badge color="warning" class="discount-badge">10% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
+        <div class="benefit-headline">
+          <span class="discount-lead">10% de descuento en productos</span>
+          <span class="discount-cond">(excluye promociones vigentes)</span>
+        </div>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Tte. Gral. Juan Domingo Perón 893, CABA')">
-            <ion-icon name="location-outline"></ion-icon>
+            <ion-icon name="location-outline" class="meta-icon"></ion-icon>
-            <span>Tte. Gral. Perón 893, CABA <em>(a metros de la sede)</em></span>
+            <div class="address-wrapper">
+              <span class="address-text">Tte. Gral. Perón 893, CABA</span>
+              <span class="address-extra"><em>(a metros de la sede)</em></span>
+              <span class="map-action-tag">Ver mapa <ion-icon name="open-outline"></ion-icon></span>
+            </div>
           </div>
           <div class="meta-row">
-            <ion-icon name="time-outline"></ion-icon>
+            <ion-icon name="time-outline" class="meta-icon"></ion-icon>
-            <span>Lun a Vie de 8 a 20 h • Sábados de 8 a 16 h</span>
+            <span class="meta-text">Lun a Vie de 8 a 20 h • Sábados de 8 a 16 h</span>
           </div>
         </div>
       </div>
@@ -184,21 +274,27 @@
               <ion-icon name="restaurant-outline"></ion-icon>
             </div>
             <div class="title-wrap">
-              <h3>Café & Chocolate</h3>
+              <h3>Café &amp; Chocolate</h3>
-              <p class="category">Cafetería & Delicatessen</p>
+              <p class="category">Cafetería &amp; Delicatessen</p>
             </div>
           </div>
           <ion-badge color="warning" class="discount-badge">10% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
+        <div class="benefit-headline">
+          <span class="discount-lead">10% de descuento en productos</span>
+          <span class="discount-cond">(excluye promociones vigentes)</span>
+        </div>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 807, CABA')">
-            <ion-icon name="location-outline"></ion-icon>
+            <ion-icon name="location-outline" class="meta-icon"></ion-icon>
-            <span>Bartolomé Mitre 807, CABA</span>
+            <div class="address-wrapper">
+              <span class="address-text">Bartolomé Mitre 807, CABA</span>
+              <span class="map-action-tag">Ver mapa <ion-icon name="open-outline"></ion-icon></span>
+            </div>
           </div>
           <div class="meta-row">
-            <ion-icon name="time-outline"></ion-icon>
+            <ion-icon name="time-outline" class="meta-icon"></ion-icon>
-            <span>Lun a Vie de 8 a 19 h • Sábados de 8 a 14 h</span>
+            <span class="meta-text">Lun a Vie de 8 a 19 h • Sábados de 8 a 14 h</span>
           </div>
         </div>
       </div>
@@ -217,15 +313,21 @@
           </div>
           <ion-badge color="danger" class="discount-badge">10% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
+        <div class="benefit-headline">
+          <span class="discount-lead">10% de descuento en productos</span>
+          <span class="discount-cond">(excluye promociones vigentes)</span>
+        </div>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Tucumán 1596, CABA')">
-            <ion-icon name="location-outline"></ion-icon>
+            <ion-icon name="location-outline" class="meta-icon"></ion-icon>
-            <span>Tucumán 1596, CABA</span>
+            <div class="address-wrapper">
+              <span class="address-text">Tucumán 1596, CABA</span>
+              <span class="map-action-tag">Ver mapa <ion-icon name="open-outline"></ion-icon></span>
+            </div>
           </div>
           <div class="meta-row">
-            <ion-icon name="time-outline"></ion-icon>
+            <ion-icon name="time-outline" class="meta-icon"></ion-icon>
-            <span>Mar a Vie de 8 a 19 h • Sáb y Dom de 9:30 a 14:30 h</span>
+            <span class="meta-text">Mar a Vie de 8 a 19 h • Sáb y Dom de 9:30 a 14:30 h</span>
           </div>
         </div>
       </div>
@@ -239,20 +341,26 @@
             </div>
             <div class="title-wrap">
               <h3>Atlas Comercial</h3>
-              <p class="category">Librería & Papelería</p>
+              <p class="category">Librería &amp; Papelería</p>
             </div>
           </div>
           <ion-badge color="primary" class="discount-badge">10% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">10% de descuento en productos (excluye promociones vigentes).</p>
+        <div class="benefit-headline">
+          <span class="discount-lead">10% de descuento en productos</span>
+          <span class="discount-cond">(excluye promociones vigentes)</span>
+        </div>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Bartolomé Mitre 839, CABA')">
-            <ion-icon name="location-outline"></ion-icon>
+            <ion-icon name="location-outline" class="meta-icon"></ion-icon>
-            <span>Bartolomé Mitre 839, CABA</span>
+            <div class="address-wrapper">
+              <span class="address-text">Bartolomé Mitre 839, CABA</span>
+              <span class="map-action-tag">Ver mapa <ion-icon name="open-outline"></ion-icon></span>
+            </div>
           </div>
           <div class="meta-row">
-            <ion-icon name="time-outline"></ion-icon>
+            <ion-icon name="time-outline" class="meta-icon"></ion-icon>
-            <span>Lun a Vie de 9 a 18 h</span>
+            <span class="meta-text">Lun a Vie de 9 a 18 h</span>
           </div>
         </div>
       </div>
@@ -266,22 +374,25 @@
             </div>
             <div class="title-wrap">
               <h3>Fluire Studio</h3>
-              <p class="category">Pilates & Salud</p>
+              <p class="category">Pilates &amp; Salud</p>
             </div>
           </div>
           <ion-badge color="tertiary" class="discount-badge">Hasta 20% OFF</ion-badge>
         </div>
-        <p class="benefit-desc">
+        <div class="benefit-headline">
-          10% de descuento abonando 1 mes de servicio y 20% de descuento abonando 4 meses de servicio.
+          <span class="discount-lead">10% OFF en 1 mes • 20% OFF abonando 4 meses</span>
-        </p>
+        </div>
         <div class="meta-grid">
-          <div class="meta-row">
+          <div class="meta-row clickable-address" (click)="openMap('Esmeralda 135, CABA')">
-            <ion-icon name="location-outline"></ion-icon>
+            <ion-icon name="location-outline" class="meta-icon"></ion-icon>
-            <span>Esmeralda 135, piso 4 B, CABA</span>
+            <div class="address-wrapper">
+              <span class="address-text">Esmeralda 135, piso 4 B, CABA</span>
+              <span class="map-action-tag">Ver mapa <ion-icon name="open-outline"></ion-icon></span>
+            </div>
           </div>
           <div class="meta-row">
-            <ion-icon name="mail-outline"></ion-icon>
+            <ion-icon name="mail-outline" class="meta-icon"></ion-icon>
-            <span>Contacto: fluire.studio.ba@gmail.com</span>
+            <span class="meta-text">fluire.studio.ba@gmail.com</span>
           </div>
         </div>
         <ion-button expand="block" fill="outline" color="tertiary" class="action-btn"
@@ -303,17 +414,23 @@
               <p class="category">Transporte de Larga Distancia</p>
             </div>
           </div>
-          <ion-badge color="secondary" class="discount-badge">Descuento Nacional</ion-badge>
+          <ion-badge color="secondary" class="discount-badge">Desc. Nacional</ion-badge>
+        </div>
+        <div class="benefit-headline">
+          <span class="discount-lead">Descuentos en pasajes de micro a todo el país</span>
+          <span class="discount-sub">A través del portal oficial de Central de Pasajes</span>
         </div>
-        <p class="benefit-desc">
-          Obtené descuentos en pasajes de micro a todo el país a través del portal de Central de Pasajes.
-        </p>
         <div class="meta-grid">
           <div class="meta-row">
-            <ion-icon name="checkmark-circle-outline"></ion-icon>
+            <ion-icon name="checkmark-circle-outline" class="meta-icon"></ion-icon>
-            <span>Entrá a <b>Perfil</b>, generá tu Certificado de Alumno Regular y subilo a <a href="https://soyestudiante.com.ar/" target="_blank">soyestudiante.com.ar</a>.</span>
+            <span class="meta-text">Entrá a <b>Perfil</b>, generá tu Certificado de Alumno Regular y subilo al portal.</span>
           </div>
         </div>
+        <ion-button expand="block" fill="outline" color="secondary" class="action-btn"
+          href="https://soyestudiante.com.ar/" target="_blank">
+          <ion-icon name="globe-outline" slot="start"></ion-icon>
+          Ir a SoyEstudiante.com.ar
+        </ion-button>
       </div>
 
     </div>

src/app/components/info-modal/info-modal.component.scss

@@ -1,101 +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);
+  --background: var(--modal-bg);
 }
 
 ion-segment {
-  --background: var(--ion-color-primary-shade);
+  --background: var(--segment-bg);
   border-radius: 0;
   
   ion-segment-button {
-    --color: rgba(255,255,255,0.7);
+    --color: rgba(255, 255, 255, 0.75);
-    --color-checked: white;
+    --color-checked: #ffffff;
-    --indicator-color: white;
+    --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: white;
+    background: #ffffff;
     padding: 10px;
     border-radius: 16px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    margin-bottom: 15px;
+    margin-bottom: 12px;
   }
 
   ion-icon {
-    font-size: 64px;
+    font-size: 56px;
-    margin-bottom: 5px;
+    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;
+    margin: 4px 0 0;
-    color: var(--ion-color-medium);
+    color: var(--text-muted);
-    font-size: 0.9rem;
+    font-size: 0.88rem;
     font-weight: 500;
   }
 }
 
-.info-body {
+/* =========================================================
-  background: white;
+   GUÍA DEL ESTUDIANTE (MANUAL)
-  border-radius: 20px;
+   ========================================================= */
-  padding: 20px;
+.guide-cards-container,
-  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
+.privacy-cards-container,
-  margin-bottom: 20px;
-
-  section {
-    margin-bottom: 25px;
-    &:last-child { margin-bottom: 0; }
-  }
-
-  h3 {
-    font-weight: 700;
-    font-size: 1rem;
-    color: var(--ion-color-dark);
-    margin: 0 0 10px;
-  }
-
-  p, li {
-    font-size: 0.9rem;
-    line-height: 1.5;
-    color: var(--ion-color-medium-shade);
-  }
-
-  ul {
-    padding-left: 20px;
-    margin: 10px 0;
-    li { margin-bottom: 8px; }
-  }
-}
-
-/* --- ESTILOS DE BENEFICIOS --- */
 .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: white;
   border-radius: 18px;
   padding: 18px;
-  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
-  border: 1px solid rgba(0,0,0,0.04);
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
 
   &.featured {
-    border: 1.5px solid var(--ion-color-primary);
+    border: 1.5px solid var(--h2-color);
-    background: linear-gradient(180deg, #ffffff 0%, rgba(var(--ion-color-primary-rgb), 0.02) 100%);
+    box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.16);
-    box-shadow: 0 6px 20px rgba(var(--ion-color-primary-rgb), 0.12);
   }
 
   .card-top {
@@ -116,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; }
+        &.cafe { background: rgba(255, 152, 0, 0.15); color: #f57c00; }
-        &.gym { background: #e8f5e9; color: #2e7d32; }
+        &.gym { background: rgba(76, 175, 80, 0.15); color: #388e3c; }
-        &.pilates { background: #ede7f6; color: #512da8; }
+        &.pilates { background: rgba(156, 39, 176, 0.15); color: #8e24aa; }
-        &.pasta { background: #fbe9e7; color: #d84315; }
+        &.pasta { background: rgba(255, 87, 34, 0.15); color: #e64a19; }
-        &.libreria { background: #e1f5fe; color: #0288d1; }
+        &.libreria { background: rgba(3, 169, 244, 0.15); color: #0288d1; }
-        &.travel { background: #e3f2fd; color: #1565c0; }
+        &.travel { background: rgba(33, 150, 243, 0.15); color: #1976d2; }
       }
 
       .title-wrap {
@@ -134,12 +285,12 @@ ion-segment {
           margin: 0;
           font-size: 1.05rem;
           font-weight: 800;
-          color: var(--ion-color-dark);
+          color: var(--text-title);
         }
         .category {
           margin: 2px 0 0;
-          font-size: 0.8rem;
+          font-size: 0.78rem;
-          color: var(--ion-color-medium);
+          color: var(--text-muted);
           font-weight: 600;
           text-transform: uppercase;
           letter-spacing: 0.5px;
@@ -156,11 +307,31 @@ ion-segment {
     }
   }
 
-  .benefit-desc {
+  .benefit-headline {
-    font-size: 0.92rem;
+    margin-bottom: 12px;
-    color: var(--ion-color-dark-shade);
+    display: flex;
-    margin: 0 0 12px;
+    flex-direction: column;
-    line-height: 1.45;
+    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 {
@@ -168,38 +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: var(--ion-color-medium-shade);
+      color: var(--text-sub);
       line-height: 1.4;
 
-      ion-icon {
+      .meta-icon {
         font-size: 16px;
-        margin-top: 2px;
+        color: var(--h2-color);
-        color: var(--ion-color-primary);
         flex-shrink: 0;
       }
+
+      .meta-text {
+        flex: 1;
+      }
+
+      &.clickable-address {
+        cursor: pointer;
+        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-wrapper {
+          display: flex;
+          flex-wrap: wrap;
+          align-items: center;
+          gap: 4px 6px;
+          flex: 1;
+
+          .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: var(--address-hover);
+        }
+
+        &:active {
+          transform: scale(0.985);
+          opacity: 0.8;
+        }
+      }
     }
   }
 
   .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: var(--ion-color-dark);
+      color: var(--text-title);
     }
 
     ul {
@@ -208,7 +442,7 @@ ion-segment {
       li {
         font-size: 0.82rem;
         margin-bottom: 4px;
-        color: #475569;
+        color: var(--text-body);
         &:last-child { margin-bottom: 0; }
       }
     }
@@ -224,8 +458,11 @@ ion-segment {
 }
 
 .footer-info {
-  margin-top: 30px;
+  margin-top: 25px;
-  opacity: 0.6;
+  p, small {
+    color: var(--text-muted);
+    font-size: 0.8rem;
+  }
 }
 
 .fade-in {

src/app/components/info-modal/info-modal.component.ts

@@ -18,4 +18,29 @@ export class InfoModalComponent {
   close() {
     this.modalCtrl.dismiss();
   }
+
+  openMap(address: string, event?: Event) {
+    if (event) {
+      event.stopPropagation();
+    }
+    const encodedAddress = encodeURIComponent(address);
+
+    // En iOS / Android se usan los esquemas nativos del sistema
+    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1);
+    const isAndroid = /android/i.test(navigator.userAgent);
+
+    let url = '';
+    if (isAndroid) {
+      // En Android, geo:0,0?q= abre el selector de mapas (Maps, Waze)
+      url = `geo:0,0?q=${encodedAddress}`;
+    } else if (isIOS) {
+      // En iOS, maps:// abre Apple Maps
+      url = `maps://?q=${encodedAddress}`;
+    } else {
+      // Fallback para Web / Escritorio
+      url = `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`;
+    }
+
+    window.open(url, '_system');
+  }
 }

src/app/home/home.page.scss

@@ -131,7 +131,32 @@
 
 .view-segment {
   background: var(--ion-background-color);
-  padding: 10px;
+  padding: 10px 0;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+
+  ion-segment {
+    width: 100%;
+    padding: 0 10px;
+
+    &.ios {
+      width: 85% !important;
+      max-width: 85% !important;
+      margin-left: auto !important;
+      margin-right: auto !important;
+      padding: 0 !important;
+    }
+  }
+}
+
+:host-context(.ios) .view-segment ion-segment {
+  width: 85% !important;
+  max-width: 85% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding: 0 !important;
 }
 
 .card-header-flex {

src/global.scss

@@ -35,3 +35,12 @@
 /* @import "@ionic/angular/css/palettes/dark.always.css"; */
 /* @import "@ionic/angular/css/palettes/dark.class.css"; */
 @import "@ionic/angular/css/palettes/dark.system.css";
+ 
+/* iOS 85% width for Home segments */
+.ios .view-segment ion-segment,
+.view-segment ion-segment.ios {
+  width: 85% !important;
+  max-width: 85% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+}