/* ============================================================
   VIMEC — Ingeniería y Mecanizados
   Archivo: css/styles.css
   Descripción: Todos los estilos visuales del sitio.

   ÍNDICE:
   1. Reset y base
   2. Clases reutilizables — Navbar
   3. Clases reutilizables — Hero
   4. Clases reutilizables — Cards
   5. Clases reutilizables — Carrusel
   6. Clases reutilizables — Formulario
   7. Clases reutilizables — Footer
   8. Menú hamburguesa (mobile)
   9. Media queries — Tablet (max 1024px)
   10. Media queries — Móvil (max 640px)
   ============================================================ */


/* ── 1. RESET Y BASE ─────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth; /* Navegación suave al hacer click en links internos */
}

body {
  margin: 0;
  background: #2B2D30;   /* Color de fondo general — gris oscuro */
  color: #EDEDED;         /* Color de texto general — casi blanco */
  font-family: 'Inter', sans-serif;
  overflow-x: hidden;     /* Evita scroll horizontal */
}

section {
  scroll-margin-top: 72px; /* Offset para que el navbar fijo no tape el contenido al navegar */
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #2471A3 !important; /* Borde azul al hacer foco en campos del formulario */
}

::placeholder {
  color: #7E8288; /* Color del texto de placeholder en inputs */
}

@keyframes vimecFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}


/* ── 2. CLASES — NAVBAR ──────────────────────────────────── */

/* Link de navegación normal */
.nav-link {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #EDEDED;
  text-decoration: none;
  padding: 9px 16px;
  border-radius: 3px;
  transition: color .2s;
}
.nav-link:hover {
  color: #2471A3;
}

/* Botón "Contacto" en el navbar — fondo rojo */
.nav-cta {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 10px 22px;
  border-radius: 3px;
  background: #C0392B;
  margin-left: 10px;
  transition: filter .2s, box-shadow .2s;
}
.nav-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 6px 18px rgba(192,57,43,.4);
}


/* ── 3. CLASES — HERO ────────────────────────────────────── */

/* Botón principal del hero "Solicitar Cotización" */
.hero-cta {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  padding: 16px 36px;
  border-radius: 3px;
  background: #C0392B;
  transition: filter .2s, box-shadow .2s, transform .2s;
}
.hero-cta:hover {
  filter: brightness(1.12);
  box-shadow: 0 10px 28px rgba(192,57,43,.45);
  transform: translateY(-2px);
}

/* Botón secundario del hero "Ver Máquinas" — solo borde */
.hero-outline {
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #EDEDED;
  text-decoration: none;
  padding: 15px 32px;
  border-radius: 3px;
  border: 1px solid #5D6066;
  transition: border-color .2s, color .2s;
}
.hero-outline:hover {
  border-color: #2471A3;
  color: #fff;
}

/* Links de contacto rápido en el hero (email, teléfono, dirección) */
.hero-info-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #2471A3;
  text-decoration: none;
  transition: color .2s;
  font-size: 16px;
  font-weight: 700;
}
.hero-info-link:hover {
  color: #fff;
}


/* ── 4. CLASES — CARDS (máquinas y proyectos) ────────────── */

/* Contenedor de cada tarjeta */
.card-wrap {
  background: #3C3F44;
  border: 1px solid #43474d;
  border-radius: 4px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform .25s, box-shadow .25s;
}
.card-wrap:hover {
  transform: translateY(-6px);                  /* Sube levemente al pasar el cursor */
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}


/* ── 5. CLASES — CARRUSEL ────────────────────────────────── */

/* Fila de items del carrusel — la transición CSS hace el deslizamiento */
.car-track {
  display: flex;
  gap: 24px;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
  will-change: transform; /* Mejora rendimiento de la animación */
}

/* Cada item del carrusel */
.car-item {
  flex-shrink: 0; /* Evita que los items se encojan */
}

/* Botones de navegación del carrusel (flechas) */
.car-btn {
  position: absolute;
  z-index: 6;
  top: 50%;
  transform: translateY(-50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  background: #C0392B;
  color: #fff;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,.4);
  transition: filter .2s;
}
.car-btn:hover {
  filter: brightness(1.14);
}
.car-btn-left  { left:  -24px; } /* Flecha izquierda sobresale del borde */
.car-btn-right { right: -24px; } /* Flecha derecha sobresale del borde */


/* ── 6. CLASES — FORMULARIO ──────────────────────────────── */

/* Botón de envío del formulario */
.submit-btn {
  width: 100%;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  border: none;
  cursor: pointer;
  padding: 17px;
  border-radius: 3px;
  background: #C0392B;
  transition: filter .2s, box-shadow .2s;
}
.submit-btn:hover {
  filter: brightness(1.12);
  box-shadow: 0 8px 22px rgba(192,57,43,.42);
}

/* Links de contacto en el panel del formulario (email, teléfono) */
.contact-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #BfC3C8;
  text-decoration: none;
  transition: color .2s;
  font-size: 15px;
}
.contact-link:hover {
  color: #fff;
}

/* Link "Cómo llegar" bajo el mapa */
.how-to-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: 'Rajdhani', sans-serif;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #2471A3;
  text-decoration: none;
}
.how-to-link:hover {
  color: #fff;
}


/* ── 7. CLASES — FOOTER ──────────────────────────────────── */

/* Botón de LinkedIn en el footer */
.li-btn {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  border: 1px solid #43474d;
  background: #3C3F44;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all .2s;
}
.li-btn:hover {
  background: #2471A3;
  border-color: #2471A3;
}


/* ── 8. MENÚ HAMBURGUESA (mobile) ────────────────────────── */

/* Botón de 3 líneas — oculto en desktop, visible en mobile/tablet */
#nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}

/* Las 3 líneas del hamburger */
#nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #EDEDED;
  border-radius: 2px;
  transition: all .3s;
}

/* Animación cuando el menú está abierto: convierte las líneas en X */
#nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#nav-hamburger.open span:nth-child(2) { opacity: 0; }
#nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Panel de navegación mobile — se despliega debajo del navbar */
#nav-mobile {
  display: none; /* Oculto por defecto */
  position: fixed;
  top: 72px; /* Justo debajo del navbar */
  left: 0;
  right: 0;
  background: rgba(22,24,27,.98);
  backdrop-filter: blur(12px);
  padding: 20px 0 28px;
  z-index: 48;
  border-bottom: 1px solid #34373b;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#nav-mobile.open {
  display: flex; /* Se muestra cuando tiene la clase 'open' */
}
#nav-mobile .nav-link { font-size: 18px; padding: 12px 24px; }
#nav-mobile .nav-cta  { font-size: 16px; margin: 8px 0 0; }


/* ── 9. RESPONSIVE — TABLET (hasta 1024px) ───────────────── */
@media (max-width: 1024px) {
  #nav-desktop   { display: none !important; }       /* Oculta links del navbar */
  #nav-hamburger { display: flex !important; }       /* Muestra el hamburger */
  #navbar        { padding: 0 24px !important; }
  #hero-content  { padding: 0 32px !important; }
  #maquinas      { padding: 80px 32px 72px !important; }
  #proyectos > div { padding: 80px 32px 72px !important; }
  #contacto      { padding: 80px 32px 72px !important; }
  footer         { padding: 28px 32px !important; }
  #contact-grid  { grid-template-columns: 1fr !important; gap: 48px !important; }
}


/* ── 10. RESPONSIVE — MÓVIL (hasta 640px) ───────────────── */
@media (max-width: 640px) {
  #navbar       { padding: 0 18px !important; }
  #hero-content { padding: 0 16px !important; }

  /* Tagline "VIMEC · Ingeniería y Mecanizados" */
  #hero-content b    { font-size: 13px !important; }
  #hero-content span[style*="width:38px"] { width: 22px !important; }

  /* H1 del hero: reducido en móvil */
  #hero-h1 {
    font-size: 24px !important;
    line-height: 1.12 !important;
    white-space: normal !important;
    margin-bottom: 14px !important;
  }

  #hero-sub  { font-size: 15px !important; margin-bottom: 24px !important; }

  /* Botones del hero: apilados verticalmente en móvil */
  #hero-ctas { flex-direction: column !important; align-items: flex-start !important; }

  #maquinas      { padding: 64px 18px 56px !important; }
  #proyectos > div { padding: 64px 18px 56px !important; }
  #contacto      { padding: 64px 18px 56px !important; }

  /* Títulos de sección (h2): reducidos en móvil */
  h2 { font-size: 32px !important; line-height: 1.1 !important; }

  /* Footer: apilado en móvil */
  footer {
    padding: 22px 18px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }

  /* Formulario: campos en columna en móvil */
  #form-grid-1,
  #form-grid-2 { grid-template-columns: 1fr !important; }

  /* Flechas del carrusel: no sobresalen en móvil y se centran
     sobre la imagen (208px fija) en lugar de toda la tarjeta */
  .car-btn {
    top: 104px !important;       /* Mitad de la imagen (208px / 2) */
    transform: none !important;  /* Cancela el translateY(-50%) del desktop */
    width: 44px  !important;
    height: 44px !important;
    font-size: 20px !important;
  }
  .car-btn-left  { left: 6px  !important; }
  .car-btn-right { right: 6px !important; }
}