/*
  Stylesheet for the Ya Mismo Delivery landing page.
  The colours and layout aim to emulate the clean, minimal aesthetic
  shown in the provided examples. Feel free to adjust variables or
  styles to better suit your brand.
*/

:root {
  --color-main: #021f5b;
  /* dark navy used for headings and buttons */
  --color-accent: #01398d;
  /* slightly lighter shade for hover states */
  --color-background: #f5f8fe;
  /* soft light background */
  --color-text: #031b4e;
  /* primary text colour */
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  background: var(--color-background);
  color: var(--color-text);
  /* Add bottom padding equal to the height of the fixed promotional banner
     so that the footer content (like copyright and developer credit) is not
     hidden behind the banner when scrolling to the bottom of the page. */
  padding-bottom: 4rem;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Navigation bar */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/* Style the logo container in the navigation bar so that the square logo
   blends with the page background and removes undesired white margins. */
/* Remove the coloured box around the navigation logo so that it blends
   directly with the page background. */
.logo {
  background-color: transparent;
  border-radius: 0;
  padding: 0;
  display: inline-block;
}

/* Container for navigation actions (Play Store badge and WhatsApp button). */
.nav-actions {
  display: flex;
  gap: 4rem;
  align-items: center;
}

/* Style for the Play Store button in the navigation bar. The image is contained
   inside the anchor tag and scaled to maintain aspect ratio. */
.nav-actions .play-store-btn img {
  height: 40px;
  width: auto;
  display: block;
}

.logo img {
  /* Enlarge the top logo by approximately 400% (4×) compared to its original size. */
  height: 220px;
  width: auto;
  object-fit: contain;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

nav a,
nav a:link,
nav a:visited,
nav a:hover,
nav a:active {
  color: #001a57;
  /* azul profesional */
  text-decoration: none;
  font-weight: 500;
}

nav a {
  position: relative;
  padding-bottom: 5px;
}

/* Línea animada */
nav a::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  background: #ffb300;
  /* dorado */
  left: 0;
  bottom: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(.5, 1.5, .5, 1);
}

nav a:hover::after {
  transform: scaleX(1);
}
.whatsapp-btn {
  /* WhatsApp button uses the signature green colour to align with the
     WhatsApp brand. */
  background-color: #25d366;
  color: #ffffff;
  padding: 0.7rem 1.5rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.3s ease;
}

.whatsapp-btn:hover {
  /* Slightly darker shade on hover */
  background-color: #1ebe5d;
}

/* Hero section */
.hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 2.5rem 0;
  background: linear-gradient(180deg, #e6effd, #ffffff);
  border-radius: 15px;
  margin-top: 1rem;
}

.hero-text {
  flex: 1 1 50%;
  padding: 1rem;
}

.hero-text h1 {
  font-size: 2.8rem;
  color: var(--color-main);
  margin-bottom: 1rem;
}

.hero-text p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  color: #555c72;
}

.cta-btn {
  display: inline-block;
  /* Use a gradient for a modern, eye‑catching call‑to‑action */
  background-image: linear-gradient(135deg, var(--color-accent), var(--color-main));
  color: #ffffff;
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 25px;
  text-decoration: none;
  font-weight: bold;
  /* Add box shadow and transition for smooth movement and depth */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-btn:hover {
  /* Lift the button slightly and intensify the shadow when hovered */
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

/* Hero image container now holds both the moto icon and the cities list. */
.hero-image {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 1rem;
  text-align: left;
}

/* Container around the logo in the hero section. It uses a radial gradient
   starting with the same dark colour as the icon and fading out to
   transparency so the image blends naturally into the section background. */
.hero-image .logo-wrapper {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  /* Remove special background and border on the wrapper since the
     scooter icon is now displayed directly on the hero background. */
  padding: 0;
  background: none;
  border-radius: 0;
}

.hero-image .logo-wrapper img {
  width: 100%;
  height: auto;
  display: block;
  /* ensure the icon is fully opaque; earlier global rules set a lower opacity */
  opacity: 1 !important;
  /* Use blend mode to merge the icon with the gradient background and avoid
     visible rectangular edges left from transparency thresholding. */
  mix-blend-mode: multiply;
}

/* When using the transparent scooter icon directly on the hero background,
   ensure it scales nicely and retains full opacity without blending. */
.hero-image .moto-icon {
  max-width: 100%;
  height: auto;
  display: block;
  opacity: 1;
}

/* List of cities displayed next to the moto icon in the hero section */
.cities-list {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--color-main);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
}

.cities-list li+li {
  margin-top: 0.4rem;
}

/* Style for city names in the hero section. Each item responds to
   hover events declared in the JavaScript by updating the background
   image. When the user hovers over a city name, we also change the
   text colour to a bright green for better contrast against the
   photographic background. */
.city-item {
  cursor: pointer;
  /* smooth colour transition */
  transition: color 0.3s ease;
}

.city-item:hover {
  /* neon green (phosphorescent) colour for high contrast */
  color: #39ff14;
}

/* When the hero section has the green-highlight class applied, the
   heading text and scooter icon change to a neon green colour.
   The filter on the icon shifts its blue hue towards green and
   increases brightness and saturation so it remains visible on
   darker photographic backgrounds. */
.hero.green-highlight h1 {
  color: #39ff14;
}

.hero.green-highlight .moto-icon {
  /* Adjust the hue and brightness to approximate a fluorescent green.
     Rotating the hue by ~100deg shifts the deep blue of the scooter
     icon towards green; increasing saturation and brightness makes the
     colour more vivid on dark backgrounds. */
  /* Shift the original blue colour (~240deg hue) to green (~120deg) by
     rotating the hue −120 degrees. Increase saturation and brightness
     to make the green vivid and phosphorescent on dark photographs. */
  filter: hue-rotate(-120deg) saturate(400%) brightness(2.5);
}

/*
 * When the pointer hovers over one of the cities, the heading and moto
 * icon should disappear temporarily to allow the city photograph to
 * take centre stage. The `.vanish` class applied to the `.hero`
 * container fades out these elements. The transition ensures the
 * disappearance is smooth, and when the class is removed the original
 * opacity is restored.
 */
.hero.vanish h1,
.hero.vanish .moto-icon {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/*
 * Animate the moto icon so that it moves across the hero section and
 * fades out. When the user hovers over a city, this class is added via
 * JavaScript and removed when the effect resets. The animation shifts
 * the icon to the right beyond the visible area and gradually reduces
 * its opacity to zero.
 */
@keyframes motoMoveOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(250%);
    opacity: 0;
  }
}

.moto-icon.animate-out {
  animation: motoMoveOut 1.5s forwards;
}

/* Allow the moto icon to move relative to its position when animated */
.moto-icon {
  position: relative;
}

.hero-image img {
  max-width: 100%;
  height: auto;
}

/* App download section */
.app-section {
  text-align: center;
  padding: 3rem 0;
}

.app-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-main);
}

.app-section p {
  margin-bottom: 1.5rem;
  color: #555c72;
}

.google-play-btn {
  display: inline-block;
  background-color: #000000;
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.3s ease;
}

.google-play-btn:hover {
  background-color: #333333;
}

/* Contact section */
.contact-section {
  text-align: center;
  padding: 2rem 0;
  background-color: #eaf2fe;
  border-radius: 15px;
  margin-top: 2rem;
}

.contact-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-main);
}

.contact-section p {
  margin-bottom: 0.5rem;
  color: #555c72;
}

.contact-section .phone {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--color-main);
}

/* Footer */
footer {
  background-color: var(--color-main);
  color: #ffffff;
  text-align: center;
  padding: 1rem 0;
  margin-top: 3rem;
  border-radius: 8px 8px 0 0;
}

/* Services section */
.services-section {
  margin-top: 3rem;
}

.services-section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-main);
  text-align: center;
}

.services-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
}

.service-item {
  background-color: #ffffff;
  border: 1px solid #dbe4f6;
  border-radius: 12px;
  padding: 1.5rem;
  flex: 1 1 250px;
  max-width: 300px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.service-item h3 {
  color: var(--color-main);
  margin-bottom: 0.8rem;
  font-size: 1.3rem;
}

.service-item p {
  color: #555c72;
  font-size: 1rem;
}

/*
 * Icon style for each service. These emoticons provide a visual cue for
 * the type of service offered. The font size and margin are chosen to
 * maintain harmony with the surrounding text and layout.
 */
.service-icon {
  font-size: 2.5rem;
  margin-bottom: 0.75rem;
  /* Use the primary color defined in the CSS variables for consistency */
  color: var(--color-main);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styles for the company email displayed in the contact section */
.contact-email {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  font-size: 1rem;
  color: var(--color-main);
}

.contact-email a {
  color: var(--color-main);
  text-decoration: none;
}

.contact-email a:hover {
  text-decoration: underline;
}

.email-icon {
  font-size: 1.3rem;
  line-height: 1;
}

/* How it works section */
.how-section {
  margin-top: 3rem;
  text-align: center;
}

.how-section h2 {
  font-size: 2rem;
  margin-bottom: 1.2rem;
  color: var(--color-main);
}

.steps {
  list-style: none;
  max-width: 600px;
  margin: 0 auto;
  padding: 0;
  text-align: left;
}

.steps li {
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  color: #555c72;
}

.steps li::before {
  content: '✔';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--color-main);
}

.steps strong {
  color: var(--color-main);
}

/* Testimonials section */
.testimonials-section {
  margin-top: 3rem;
  text-align: center;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* Partners/clients section */
.partners-section {
  margin-top: 3rem;
  text-align: center;
}

.partners-section h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: var(--color-main);
}

/*
  Carousel styles for partners grid. We remove wrapping and use overflow hidden to
  allow a smooth horizontal scroll animation driven by JavaScript. The items
  are duplicated in JS to create an infinite loop. See js/main.js for logic.
*/
.partners-section {
  overflow-x: hidden;
}

.partners-grid {
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;
  justify-content: flex-start;
  will-change: transform;
}

.partner-item {
  /*
   * Each partner item is now a flex container that centers its
   * child <img> element. Using flexbox ensures the logo scales
   * proportionally and remains centered within the card. The card
   * dimensions have been increased so logos appear larger. Feel free
   * to tweak width and height as desired.
   */
  /*
   * Further enlarge the partner cards so that logos appear prominently.
   * The cards are now wider and taller (400×250px) to better showcase
   * horizontal logos. If you find they still look small, you can
   * increase these values again. Use min-width to ensure they never
   * shrink below the desired size when the carousel is duplicated.
   */
  width: 400px;
  min-width: 400px;
  height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  /* Add a smooth transition so scaling on hover feels fluid */
  transition: transform 0.3s ease;
}

/* Slightly enlarge partner logos on hover for a subtle interactive effect */
.partner-item:hover {
  /* Enlarge the establishment logo significantly when hovered */
  transform: scale(1.3);
}

/*
 * Make logos fill most of the partner card while preserving their aspect ratio.
 * `max-width` and `max-height` ensure the image never exceeds the card’s
 * dimensions. `object-fit: contain` keeps the whole logo visible even
 * if it doesn’t fill the entire card, and margins will automatically
 * center the image thanks to the flexbox layout on the parent.
 */
.partner-item img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.testimonials-section h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-main);
}

.testimonials-section p {
  font-style: italic;
  color: #555c72;
  max-width: 700px;
  margin: 0 auto;
}

/* Testimonials styling */
.testimonial {
  background-color: #ffffff;
  border: 1px solid #dbe4f6;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  margin-bottom: 1.5rem;
  text-align: left;
}

.testimonial-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.testimonial-name {
  font-weight: 600;
  color: var(--color-main);
}

.testimonial-date {
  font-size: 0.9rem;
  color: #555c72;
}

.testimonial-stars {
  color: #fbc02d;
  /* gold colour for stars */
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.testimonial-comment {
  color: #555c72;
  font-size: 1rem;
  line-height: 1.4;
}

/* Footer layout adjustments */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left,
.footer-right {
  margin: 0.5rem 0;
}

/* Developer credit link styling */
/*
 * The developer credit is presented as a flexible link containing the
 * Google Developer icon and two lines of text (the name and the role).
 * To ensure the name and role are stacked vertically beneath each other,
 * we use a nested container (.developer-info) that has a column
 * flex‑direction. We also enlarge the icon to improve legibility and
 * remove any artificial background around it so the coloured loops sit
 * directly on the dark footer.
 */
.developer-link {
  color: inherit;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Container that holds the developer name and role.  By using
   flex-direction: column we ensure the text appears on two separate lines. */
.developer-info {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.developer-name {
  font-weight: bold;
  font-size: 1rem;
}

.developer-role {
  font-size: 0.8rem;
}

.developer-link:hover {
  text-decoration: underline;
}

/* Enlarge the Google Developer icon and remove any background.  The
 * dimensions have been increased to approximately 80px (around 80 % larger
 * than the previous version).  Setting background-color to transparent
 * prevents coloured boxes from appearing behind the icon. */
.dev-icon {
  width: 250px;
  height: 120px;
  display: inside;
  background-color: transparent;
  border-radius: 2;
  padding: 1;
}

/* Promotional banner at the bottom of the page */
.promo-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f39c12;
  /* orange tone for promotion */
  color: #ffffff;
  text-align: center;
  padding: 0.8rem 1rem;
  font-weight: bold;
  z-index: 998;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Floating WhatsApp button */
.whatsapp-float-link {
  position: fixed;
  bottom: 5rem;
  /* sits above the promo banner */
  right: 1.5rem;
  z-index: 999;
  text-decoration: none;
}

.whatsapp-float {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background-color: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.whatsapp-float img {
  width: 34px;
  height: 34px;
}

/* Override Google Play button styles to include official colours */
.google-play-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: #000000;
  color: #ffffff;
  padding: 0.8rem 2rem;
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: background 0.3s ease;
}

.google-play-btn:hover {
  background-color: #333333;
}

.google-play-btn::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  /* Build a multi‑colour triangle using layered gradients to evoke the Google Play icon */
  background-image:
    linear-gradient(135deg, #00c853 50%, transparent 50%),
    /* green */
    linear-gradient(-135deg, #ff3d00 50%, transparent 50%),
    /* red */
    linear-gradient(45deg, #2962ff 50%, transparent 50%),
    /* blue */
    linear-gradient(-45deg, #ffd600 50%, transparent 50%);
  /* yellow */
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* The opacity of the hero image is now controlled on the specific
   .logo-wrapper img rule to avoid unintended fading. */
/* Make the coloured icon triangular instead of square */
.google-play-btn::before {
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Trabaja con nosotros section */
.apply-section,
.thankyou-section {
  margin-top: 3rem;
  padding: 2rem 0;
  text-align: center;
}

.apply-section h1,
.thankyou-section h1 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--color-main);
}

.apply-section p,
.thankyou-section p {
  color: #555c72;
  margin-bottom: 1.5rem;
}

.apply-form {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

.apply-form .form-group {
  margin-bottom: 1rem;
}

.apply-form label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: 600;
  color: var(--color-main);
}

.apply-form input,
.apply-form textarea {
  width: 100%;
  padding: 0.6rem;
  border: 1px solid #dbe4f6;
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
}

.apply-form button {
  margin-top: 1rem;
}

.social-links {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 25px;
}

.social-links img {
  width: 55px;
  height: 55px;
  transition: transform 0.2s ease;
  cursor: pointer;
}

.social-links img:hover {
  transform: scale(1.15);
}

/*
  Simple fade-up animation for all sections. On page load, each section will
  animate in sequence to create a dynamic effect without relying on JavaScript.
*/
@keyframes fade-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

section {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-up 0.8s ease-out forwards;
}

/* Stagger the section animations for a cascading effect */
section:nth-of-type(1) {
  animation-delay: 0.2s;
}
section:nth-of-type(2) {
  animation-delay: 0.4s;
}
section:nth-of-type(3) {
  animation-delay: 0.6s;
}
section:nth-of-type(4) {
  animation-delay: 0.8s;
}
section:nth-of-type(5) {
  animation-delay: 1s;
}
section:nth-of-type(6) {
  animation-delay: 1.2s;
}

/*
  Scroll reveal classes.
  Elements with the class `.hidden` start slightly translated and transparent.
  When `.visible` is added via IntersectionObserver in `js/main.js`, they fade
  in and move to their final position.
*/
.hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.visible {
  opacity: 1;
  transform: none;
}