/* ============================================================
   ANIMACIÓN 1: APLANADORA CLÁSICA (PÁGINA DE CONTACTO)
   ============================================================ */
.contact-container {
  position: relative; 
  overflow: hidden;   
  padding-bottom: 110px; 
}

.contact-container::after {
  content: ''; 
  position: absolute;
  bottom: 0px;  
  left: -300px; 
  width: 260px; 
  height: 95px; 
  
  /* SVG: Aplanadora y Supervisor */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 100'><g><animateTransform attributeName='transform' type='translate' values='0,0; 0,1.5; 0,0' dur='0.12s' repeatCount='indefinite'/><rect x='115' y='15' width='6' height='30' fill='%23555' rx='2'/><g><circle cx='119' cy='10' r='6' fill='%23bbb' opacity='0.8'><animate attributeName='cy' values='10;-15' dur='1.5s' repeatCount='indefinite'/><animate attributeName='r' values='6;14' dur='1.5s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.8;0' dur='1.5s' repeatCount='indefinite'/></circle><circle cx='119' cy='15' r='5' fill='%23aaa' opacity='0.6'><animate attributeName='cy' values='15;-5' dur='1.5s' begin='0.75s' repeatCount='indefinite'/><animate attributeName='r' values='5;12' dur='1.5s' begin='0.75s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.6;0' dur='1.5s' begin='0.75s' repeatCount='indefinite'/></circle></g><path d='M60 30 L100 30 L105 50 L55 50 Z' fill='%23FFC107'/><path d='M65 35 L95 35 L98 45 L62 45 Z' fill='%23CCEEFF'/><circle cx='80' cy='40' r='4' fill='%232C3E50' opacity='0.7'/><rect x='55' y='25' width='50' height='5' fill='%23222' rx='2'/><rect x='45' y='50' width='90' height='22' fill='%23FFC107' rx='4'/><rect x='50' y='58' width='80' height='3' fill='%23D39E00'/></g><g><animateTransform attributeName='transform' type='rotate' values='0 65 72; 360 65 72' dur='1.5s' repeatCount='indefinite'/><circle cx='65' cy='72' r='16' fill='%23222'/><circle cx='65' cy='72' r='8' fill='%23CCC'/><circle cx='65' cy='72' r='3' fill='%23555'/><rect x='63' y='58' width='4' height='28' fill='%23999' rx='1'/><rect x='51' y='70' width='28' height='4' fill='%23999' rx='1'/></g><g><animateTransform attributeName='transform' type='rotate' values='0 120 72; 360 120 72' dur='1.2s' repeatCount='indefinite'/><circle cx='120' cy='72' r='18' fill='%23888'/><circle cx='120' cy='72' r='15' fill='%23AAA'/><circle cx='120' cy='72' r='4' fill='%23666'/><line x1='120' y1='54' x2='120' y2='90' stroke='%23999' stroke-width='2'/><line x1='102' y1='72' x2='138' y2='72' stroke='%23999' stroke-width='2'/></g><rect x='0' y='86' width='55' height='4' fill='%23333'/><g transform='translate(190, 42)'><g><rect x='4' y='25' width='6' height='20' fill='%231F618D' rx='3'><animateTransform attributeName='transform' type='rotate' values='20 7 25; -20 7 25; 20 7 25' dur='1.2s' repeatCount='indefinite'/></rect><rect x='-2' y='25' width='6' height='20' fill='%232980B9' rx='3'><animateTransform attributeName='transform' type='rotate' values='-20 1 25; 20 1 25; -20 1 25' dur='1.2s' repeatCount='indefinite'/></rect></g><path d='M-4 8 L10 8 L12 28 L-6 28 Z' fill='%23E67E22'/><rect x='-5' y='12' width='16' height='3' fill='%23F1C40F'/><rect x='-5' y='20' width='17' height='3' fill='%23F1C40F'/><circle cx='3' cy='2' r='6' fill='%23FAD7A1'/><path d='M-5 0 A 8 8 0 0 1 11 0 L15 1 L-7 1 Z' fill='%23F1C40F'/><rect x='6' y='10' width='4' height='15' fill='%23D35400' rx='2'><animateTransform attributeName='transform' type='rotate' values='-20 8 10; 20 8 10; -20 8 10' dur='1.2s' repeatCount='indefinite'/></rect><g><animateTransform attributeName='transform' type='rotate' values='0 0 10; -45 0 10; 0 0 10' dur='2.4s' repeatCount='indefinite'/><rect x='-2' y='10' width='5' height='16' fill='%23E67E22' rx='2'/><circle cx='1' cy='26' r='3' fill='%23FAD7A1'/><rect x='0' y='25' width='4' height='6' fill='%23333' rx='1'/></g></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 10; 
  filter: drop-shadow(0px 10px 5px rgba(0,0,0,0.15));
  
  animation: moveMachineContact 22s linear infinite; 
  will-change: left; 
}


/* ============================================================
   ANIMACIÓN 2: NUEVO CAMIÓN MEZCLADOR (PÁGINA DE PROMOCIONES)
   ============================================================ */
.promotions {
  position: relative; 
  overflow: hidden;   
  padding-bottom: 170px !important; 
}

.promotions::after {
  content: ''; 
  position: absolute;
  bottom: 20px;  
  left: -300px; 
  width: 260px; 
  height: 95px; 
  
  /* SVG ACTUALIZADO: Camión pesado americano, trompo con franjas naranjas y luz de sirena */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 100'><ellipse cx='130' cy='92' rx='100' ry='4' fill='%23000' opacity='0.2'/><g><circle cx='195' cy='15' r='6' fill='%23bbb' opacity='0.8'><animate attributeName='cy' values='15;-10' dur='1.5s' repeatCount='indefinite'/><animate attributeName='r' values='6;15' dur='1.5s' repeatCount='indefinite'/><animate attributeName='opacity' values='0.8;0' dur='1.5s' repeatCount='indefinite'/></circle></g><g><animateTransform attributeName='transform' type='translate' values='0,0; 0,1.5; 0,0' dur='0.15s' repeatCount='indefinite'/><rect x='192' y='15' width='6' height='30' fill='%23555' rx='2'/><path d='M 45 65 L 75 25 L 140 20 L 150 70 Z' fill='%23BDC3C7'/><path d='M 40 60 L 70 20 L 145 25 L 145 65 Z' fill='%23ECF0F1'/><path d='M 55 45 L 90 22' stroke='%23E67E22' stroke-width='8' stroke-linecap='round'/><path d='M 75 60 L 120 23' stroke='%23E67E22' stroke-width='8' stroke-linecap='round'/><path d='M 105 65 L 140 35' stroke='%23E67E22' stroke-width='8' stroke-linecap='round'/><path d='M 35 30 L 50 70 L 30 70 Z' fill='%237F8C8D'/><rect x='30' y='65' width='25' height='10' fill='%2334495E'/><rect x='145' y='35' width='45' height='35' fill='%23FFC107' rx='5'/><path d='M 190 50 L 225 55 L 225 70 L 190 70 Z' fill='%23FFC107'/><rect x='220' y='55' width='6' height='15' fill='%2395A5A6'/><rect x='226' y='58' width='4' height='10' fill='%237F8C8D'/><path d='M 150 38 L 180 38 L 185 50 L 150 50 Z' fill='%23CCEEFF'/><path d='M 165 50 L 165 65' stroke='%23D39E00' stroke-width='2'/><path d='M 185 70 A 20 20 0 0 1 225 70 Z' fill='%2334495E'/><path d='M 40 70 A 20 20 0 0 1 80 70 Z' fill='%2334495E'/><path d='M 85 70 A 20 20 0 0 1 125 70 Z' fill='%2334495E'/><rect x='35' y='68' width='190' height='6' fill='%232C3E50' rx='2'/><rect x='225' y='66' width='10' height='6' fill='%237F8C8D' rx='2'/><rect x='160' y='30' width='8' height='5' fill='%23E74C3C'/><circle cx='164' cy='30' r='4' fill='%23E74C3C'><animate attributeName='opacity' values='1;0;1' dur='0.5s' repeatCount='indefinite'/></circle></g><g><animateTransform attributeName='transform' type='rotate' values='0 60 78; 360 60 78' dur='1.2s' repeatCount='indefinite'/><circle cx='60' cy='78' r='14' fill='%23222'/><circle cx='60' cy='78' r='7' fill='%23BDC3C7'/><circle cx='60' cy='78' r='3' fill='%23333'/></g><g><animateTransform attributeName='transform' type='rotate' values='0 105 78; 360 105 78' dur='1.2s' repeatCount='indefinite'/><circle cx='105' cy='78' r='14' fill='%23222'/><circle cx='105' cy='78' r='7' fill='%23BDC3C7'/><circle cx='105' cy='78' r='3' fill='%23333'/></g><g><animateTransform attributeName='transform' type='rotate' values='0 205 78; 360 205 78' dur='1.2s' repeatCount='indefinite'/><circle cx='205' cy='78' r='14' fill='%23222'/><circle cx='205' cy='78' r='7' fill='%23BDC3C7'/><circle cx='205' cy='78' r='3' fill='%23333'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 10; 
  
  animation: moveMachinePromo 22s linear infinite; 
  will-change: left; 
}


/* ============================================================
   RECORRIDOS SEPARADOS (PARA AJUSTAR LA DISTANCIA EXACTA)
   ============================================================ */

/* Animación 1: Recorrido para el contenedor de 800px (Contacto) */
@keyframes moveMachineContact {
  0% { left: -300px; }
  100% { left: 100%; }
}

/* Animación 2: Recorrido simulado de 800px en pantalla completa (Promociones) */
@keyframes moveMachinePromo {
  0% { left: calc(50% - 480px); } 
  100% { left: calc(50% + 380px); } 
}


/* ============================================================
   RESPONSIVE (MÓVILES)
   ============================================================ */
@media (max-width: 768px) {
  .contact-container {
    padding-bottom: 85px;
  }
  
  .promotions {
    padding-bottom: 120px !important; 
  }

  .contact-container::after,
  .promotions::after {
    width: 180px; 
    height: 65px; 
  }
  
  .contact-container::after {
    bottom: 5px; 
    animation-duration: 15s; 
  }
  
  .promotions::after {
    bottom: 15px; 
    animation: moveMachineContact 15s linear infinite; 
  }
}