Mejoras mobile: cards antes/despues, texto FAL, ocultar calculadoras vacías

Author: FACTTIC

css/main.css

@@ -1422,24 +1422,28 @@ section[id] {
   margin-bottom: var(--space-6);
 }
 
-/* Flecha visual entre cards en mobile */
+/* Mobile: separar cards con flecha entre ellas */
 @media (max-width: 639px) {
   .antes-despues {
-    gap: var(--space-2);
-  }
-
-  .antes-despues .antes-card {
-    margin-bottom: 0;
+    gap: var(--space-4);
+    position: relative;
   }
 
-  .antes-despues .antes-card::after {
+  .antes-despues::after {
     content: '↓';
     display: block;
     text-align: center;
-    font-size: var(--text-xl);
+    font-size: var(--text-2xl);
     color: var(--color-ink-muted);
-    padding: var(--space-2) 0;
-    margin-top: var(--space-4);
+    order: 1;
+  }
+
+  .antes-despues .antes-card {
+    order: 0;
+  }
+
+  .antes-despues .despues-card {
+    order: 2;
   }
 }
 
@@ -2235,11 +2239,7 @@ section[id] {
 .cambio-comparacion {
   display: flex;
   align-items: stretch;
-  gap: var(--space-2);
-  background: var(--color-paper-alt);
-  border: 1px dashed var(--color-border);
-  border-radius: var(--radius-sm);
-  padding: var(--space-3);
+  gap: var(--space-3);
   font-size: var(--text-sm);
 }
 
@@ -2249,14 +2249,10 @@ section[id] {
   display: flex;
   flex-direction: column;
   gap: 2px;
-}
-
-.cambio-antes {
-  padding-right: var(--space-2);
-}
-
-.cambio-ahora {
-  padding-left: var(--space-2);
+  padding: var(--space-3);
+  background: var(--color-paper);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
 }
 
 .cambio-label {
@@ -2313,17 +2309,21 @@ section[id] {
 @media (max-width: 640px) {
   .cambio-comparacion {
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--space-1);
   }
 
   .cambio-flecha {
     transform: rotate(90deg);
-    padding: var(--space-1) 0;
+    padding: 0;
+    margin: var(--space-1) 0;
   }
 
   .cambio-antes,
   .cambio-ahora {
-    padding: 0;
+    padding: var(--space-2);
+    background: var(--color-paper);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
   }
 }
 

index.html

@@ -326,7 +326,7 @@ <h4 class="cambios-titulo">Lo que cambia con esta reforma</h4>
                     <div class="cambio-flecha">→</div>
                     <div class="cambio-ahora">
                       <span class="cambio-label">AHORA</span>
-                      <span class="cambio-valor">3+ años = reset</span>
+                      <span class="cambio-valor">+3 años afuera: desde cero</span>
                     </div>
                   </div>
                 </div>
@@ -391,8 +391,8 @@ <h4 class="cambios-titulo">Lo que cambia con esta reforma</h4>
                 <p class="cambios-nota"><strong>Ojo:</strong> Si te despiden después de que entre en vigencia esta ley, te aplican el nuevo cálculo aunque te hayan contratado hace años.</p>
               </div>
 
-              <div id="calc-indemnizacion" class="calculadora" aria-label="Calculadora de indemnización personalizada">
-                <div class="calc-personalizada" hidden>
+              <div id="calc-indemnizacion" class="calculadora" aria-label="Calculadora de indemnización personalizada" hidden>
+                <div class="calc-personalizada">
                   <!-- Contenido generado por JS -->
                 </div>
               </div>
@@ -455,8 +455,8 @@ <h3>ANTES</h3>
                 </div>
                 <div class="despues-card">
                   <h3>AHORA</h3>
-                  <p class="descripcion">Fondo financiero</p>
-                  <p class="detalle">El empleador aporta todos los meses a un fondo que manejan bancos y financieras. Si te despiden, tu indemnización puede salir de ahí.</p>
+                  <p class="descripcion">Fondo financiero (FAL)</p>
+                  <p class="detalle">El empleador aporta a un fondo administrado por bancos y financieras. Esa plata sale de lo que antes iba a ANSES para jubilaciones. Si te despiden, tu indemnización puede salir de ahí.</p>
                 </div>
               </div>
 
@@ -1044,8 +1044,8 @@ <h4 class="cambios-titulo">Lo que cambia</h4>
                 </div>
               </div>
 
-              <div id="calc-cuota" class="calculadora" aria-label="Calculadora de cuota sindical">
-                <div class="calc-personalizada" hidden>
+              <div id="calc-cuota" class="calculadora" aria-label="Calculadora de cuota sindical" hidden>
+                <div class="calc-personalizada">
                   <h4>Tu situación, <span class="user-name">trabajador</span></h4>
                   <div class="calc-cuota-result">
                     <p class="afiliado-si" hidden>