body {
  font-family: sans-serif;
  margin: 0;
  background-color: white;
  color: #333;
}

.hero {
  background: url(/media/img/CM%207431-min.webp) center/cover no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-color: rgb(4, 49, 27);
  min-height: 100vh;
  height: auto;
  color: white;
  display: flex;
  justify-content: center;
  align-items: start;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 0, 0, 1);
  border: white;
  padding: 3rem 1rem;
}
.hero2 {
  background: url(/media/img/CM%207468-min.webp) center/cover no-repeat;
  background-attachment: fixed;
  min-height: 50vh;
  height: auto;
}

.hero3 {
  background: url(/media/img/imgs/IMG1.png) center/cover no-repeat;
  background-attachment: fixed;
  background-size: contain;
  min-height: 60vh;
}

.overlay {
  background: rgba(0, 0, 0, 0);
  height: 100%;
  display: flex;
  justify-content: center; /* centra horizontalmente */
  align-items: center;     /* centra verticalmente (mejor para móviles) */
  padding-top: 10rem;
}
.hero-content {
  max-width: 900px;

}
h2{
  font-size: 2rem;
  margin-bottom: 1rem;
  font-weight: bold;
}
.hero h1 {
  font-size: clamp(1.8rem, 5vw, 4rem);
  margin-bottom: 1rem;
}
.hero p {
  font-size: clamp(1rem, 3.5vw, 2rem);
  margin-bottom: 1.5rem;
}
.hero-buttons .btn {
  margin-right: 1rem;
}
.city-transport {
  padding: 4rem 1rem;
  border-top: 1px solid #eee;
  background: linear-gradient(180deg, rgba(249,250,251,0.7), rgba(255,255,255,0.9));
}
.city-transport .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem;
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding-bottom: 2rem;
  flex-wrap: wrap;
}
.city-transport .container img {
  flex: 1 1 350px;
  max-width: 350px;
  width: 100%;
  max-height: 350px;
  height: auto;
  object-fit: contain;
  border-radius: 0.75rem;
  box-shadow: 0 6px 20px rgba(2,6,23,0.12);
  border: 4px solid rgba(255,255,255,0.75);
}

.city-transport .container > div {
  flex: 1 1 360px;
}

.city-transport h2 {
  color: #063a0b;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.city-transport p {
  color: #1f2937;
  line-height: 1.6;
  margin-bottom: 0.6rem;
}

/* Alternate row layout so every other container flips image/text */
.city-transport .container:nth-of-type(even) {
  flex-direction: row-reverse;
}

/* Responsive: stack columns on smaller screens */
@media (max-width: 900px) {
  .city-transport .container {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  .city-transport .container img {
    height: 260px;
    margin-bottom: 1rem;
  }
  .city-transport .container:nth-of-type(even) {
    flex-direction: column;
  }
  .city-transport .container > div {
    padding: 0 1rem;
  }
}
.main-content {
  max-width: 1200px;
  margin: auto;
  padding: 6rem 2rem;
}
.card-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-bottom: 4rem;
}
.card {
  background: white;
  border: 1px solid #ddd;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.card h3 {
  color: #1e40af;
  text-align: center;
}
.card p {
  text-align: center;
}
.quote-section {
  background: #f9fafb;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  margin-bottom: 4rem;
}
.quote-form {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-top: 1rem;
}
input {
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 0.5rem;
  width: 100%;
}
.about-us,
.testimonials,
.contact {
  text-align: center;
  margin: 4rem;
}
.testimonial-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}
.testimonial {
  background: #f1f5f9;
  padding: 1.5rem;
  border-radius: 1rem;
  font-style: italic;
  border: 1px solid #ccc;
}
footer {
  background: #f1f1f1;
  padding: 2rem;
  text-align: center;
  color: #666;
  border-top: 1px solid #ddd;

}
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.9rem;
}
.btn.blue {
  background-color: #2563eb;
  color: white;
}
.btn.green {
  background-color: #15803d;
  color: white;
}
.btn.light {
  background-color: #e5e7eb;
  color: #111827;
}
.navheader{
  position: fixed;  /* fija el nav en la pantalla */
  top: 0;           /* pegado arriba */
  left: 0;
  width: 100%;      /* ocupa todo el ancho */
  color: white;
  z-index: 1000;    /* encima de todo el contenido */
  padding: 1rem 2rem;
}
nav {
  margin: 27px auto 0;

  position: relative;
  max-width: 100%;
  width: 580px;
  height: 50px;
  background-color: #063a0b;
  border-radius: 8px;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 10px;
}
nav a {
  line-height: 50px;
  height: 100%;
  font-size: 15px;
  display: inline-block;
  position: relative;
  z-index: 1;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center;
  color: white;
  cursor: pointer;
}
.navheader a,
.navheader a:visited,
.navheader a:hover,
.navheader a:active {
  text-decoration: none;
  color:white
}

nav .animation {
  position: absolute;
  height: 100%;
  top: 0;
  z-index: 0;
  transition: all .5s ease 0s;
  border-radius: 8px;
}

.icons {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 1rem;
}

summary{
  font-weight: bold;
}


.navheader a:nth-child(1) {
  width: 100px;
}
.navheader a:nth-child(2) {
  width: 110px;
}
.navheader a:nth-child(3) {
  width: 100px;
}
.navheader a:nth-child(4) {
  width: 160px;
}
.navheader a:nth-child(5) {
  width: 120px;
}
nav .start-home, a:nth-child(1):hover~.animation {
  width: 100px;
  left: 0;
  background-color: #1abc9c;
}
nav .start-about, a:nth-child(2):hover~.animation {
  width: 110px;
  left: 100px;
  background-color: #e74c3c;
}
nav .start-blog, a:nth-child(3):hover~.animation {
  width: 100px;
  left: 205px;
  background-color: #3498db;
}
nav .start-portefolio, a:nth-child(4):hover~.animation {
  width: 160px;
  left: 300px;
  background-color: #9b59b6;
}
nav .start-contact, a:nth-child(5):hover~.animation {
  width: 120px;
  left: 460px;
  background-color: #e67e22;
}
p {
  line-height: 1.8;
}

.miCanvas{
  text-align: center;
}

/* Ocupa toda la pantalla */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white; /* puedes usar negro u otro color */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity 0.5s ease;
}
#preloader img{
  width: 30%;
  max-width: 300px;
}

.btn { touch-action: manipulation; }

/* Responsive overrides for smaller screens */
@media (max-width: 900px) {
  .hero { min-height: 55vh; background-attachment: scroll; padding-top: 4rem; }
  .hero2, .hero3 { background-attachment: scroll; }
  .overlay { align-items: center; padding-top: 1rem;}
  .hero-content { padding-top: 0rem; }
  nav {border-radius: 6px; margin: 2px auto 0; }
  nav a { font-size: 10px; padding: 0 1px; width: auto; }
  nav .animation { display: none; }
  .city-transport .container img { max-height: 260px; }
  #preloader img { width: 45%; max-width: 220px; }
  body { padding-top: 72px; }
}

@media (max-width: 480px) {
  .hero { min-height: 40vh; padding-top: 3rem; }
  .hero h1 { font-size: 1.6rem; }
  .hero p { font-size: 1rem; }
  .city-transport .container { padding: 0.75rem; }
  .city-transport .container img { max-height: 200px; }
  .card { padding: 1rem; }
  .navheader{ padding: 0.6rem 1rem; }
  body { padding-top: 64px; }
  input, .btn { font-size: 1rem; }
}

/* Mobile on-screen controls (hidden on larger screens) */
.canvas-wrapper { position: relative; display: block; width: 100%; }

.mobile-controls {
  display: none; /* shown only on small screens via media queries */
}

@media (max-width: 900px) {
  /* Position controls inside the canvas-wrapper (absolute) */
  .mobile-controls {
    display: flex;
    position: absolute;
    bottom: 18px;
    z-index: 2000;
    touch-action: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    pointer-events: auto;
  }
  /* left and right columns inside the canvas */
  .mobile-controls.left-controls { left: 18px; }
  .mobile-controls.right-controls { right: 18px; }
  .mobile-controls .mc-col { display:flex; gap:10px; flex-direction: column; align-items: center; }
  .mc-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    background: rgba(6,58,11,0.9);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(2,6,23,0.18);
  }
  .mc-btn:active { transform: scale(0.96); }
  .mc-up { width: 70px; height: 70px; }
}

@media (max-width: 480px) {
  .mc-btn { width: 56px; height: 56px; font-size: 16px; }
  .mobile-controls { bottom: 12px; padding-bottom: 1rem; }
}

/* Estilo normal (pantallas grandes) */
.item summary {
    display: block;        /* Esconde los títulos visibles tipo acordeón */
}

.item p {
    display: block;       /* Todo visible en PC */
}

/* --- SOLO en pantallas pequeñas --- */
@media (max-width: 900px) {

    .item summary {
        display: block;   
        padding: 10px;
        background: #e2e2e2;
        cursor: pointer;
        font-weight: bold;
        border-radius: 5px;
        margin: 4px;
    }
    .city-transport .container > div {
      flex: 1 1 300px;
    }

    .item p {
        padding: 10px;
    }
}