:root{
    --blanco:#ffffff;
    --oscuro:#212121;
    --primario:#FFC107;
    --secundario:#0097A7;
    --gris:#757575;
    --grisClaro: #DFE9F3;
    --blancoSombra: #ece8e8;
    --oscuroclaro:#000000;
}

/*Globales*/
html{
    font-size: 62.5%;
    box-sizing: border-box;
    scroll-snap-type: y mandatory;
    
}
/*scroll snap*/
.servicios,
.navegacion-principal,
.titulo,
.formulario,
.footer{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.hero,
.contenido-hero,
.hero-img,
.formulario,
.footer{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}
.servicio,
.w-sm-100,
.formulario,
.footer{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

.titulo,
.nav-bg,
.navegacion-principal,
.hero,
.contenido-hero,
.sombra,
.sobre-nosotros,
.formulario-transparente,
.formulario,
.galeria,
.mecanica-general,
.descripcion{
    scroll-snap-align: center;
    scroll-snap-stop: always;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body{
    font-size: 16px;
    font-family: "Krub", sans-serif;
    font-weight: 500;
    background-image: linear-gradient(to top, var(--grisClaro) 0%, var(--blanco) 100%);
    
} 

.contenedor{ /*Es donde están los navegadores el padding los ubica en el lugar correcto*/
    max-width: 120rem;
    margin: 0 auto;
}

.boton{
    background-color: var(--secundario);
    color: var(--blanco);
    padding: 1rem 3rem;
    margin-top: 3rem;
    font-size: 2rem;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold;
    border-radius: .5rem;
    width: 82%;
    text-align: center;
    border: none;
}

@media (min-width: 768px) {
    .boton{
        width: auto;
    }
}

.boton:hover{
    cursor: pointer;
}

.sombra{/*es el contenedor de los cuadrados del menu, se puede modificar los efectos de la caja*/
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.75);
    -webkit-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.75);
    background-color: var(--blanco);
    padding: 2rem;
    border-radius: 1rem;
    width: 95.8%;          /* más ancho */
    margin: -30px auto 0 auto; /* puedo bajarlo y lo sube hacia arriba */

}

.sombra{
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.75);
    background-color: var(--blanco);
    padding: 4rem;       /* agrandado */
    border-radius: 1rem;
}

/*tipografía*/
h1{
    font-size: 3.8rem;
}

h2{
    font-size: 2.8rem;
}

h3{
    font-size: 2.2rem;
}

h1,h2,h3{
    text-align: center;
}

.titulo-taller{
    font-size: 4.5rem;
    color: var(--blanco);
    font-family: "Krub", sans-serif;;
    font-weight: bold;
    text-align: center; /*centra el texto*/
    margin-bottom: 2rem; /*separa del icono*/
}



.sobre-nosotros{
    letter-spacing: 2px;
}

p{
    line-height: 24px;
    font-family: sans-serif;
    font-size: 2rem;
    font-weight: normal;
}

/*Títulos*/
.titulo span {
    font-size: 2rem;
    color: red;
}

/*utilidades*/
.w-sm-100{
    width: 100%;
}
@media (min-width: 768px) {
    .w-sm-100{
        width: auto;
    }
}

.flex{
  display: flex;
}

.alinear-derecha{
  justify-content: flex-end;
}

/*Navegación principal*/
.nav-bg{
    background-color: var(--secundario);
}

.navegacion-principal{/*modificamos el comportamiento de la navegación por ejemplo scroll etc*/
    display: flex;
    flex-direction: column;
}

@media (min-width: 768px) {
    .navegacion-principal{
        flex-direction: row;
        justify-content: space-between;
    }
}
.navegacion-principal a{ /*modificamos el estilo y comportamiento de la navegacion*/
    display: block;
    text-align: center;
    color: var(--blanco);
    text-decoration: none;
    font-size: 2rem;
    font-weight: 500;
    padding: 0.9rem;
}

.navegacion-principal a:hover{  /*aqui es el efecto de que damos a la navegación*/
    background-color: var(--primario);
    color: var(--oscuro);
}

/* ===== Responsive solo para Tablets e iPads (768px - 1024px) ===== */
@media (min-width: 768px) and (max-width: 1024px) {
  .navegacion-principal {
    flex-direction: row;        /* menú en fila */
    justify-content: space-around;    /* centra todos los enlaces */
  }

}

.hero {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem; /* espacio alrededor */
  background-color: var(--grisClaro);
  min-height: 400px; /* evita que el texto baje cuando cargue la imagen */
}

.hero-img {
  display: block;
  width: 100%;        /* se adapta al ancho */
  max-width: 499px;   /* límite máximo */
  height: auto; /* mantiene proporción */
  background-size: cover; /*contiene la imagen en el centro */
  margin-top: -30px

}

.titulo {
  display: flex;
  justify-content: center;  /* centra horizontalmente */
  align-items: center;      /* centra verticalmente */
  margin: -5rem ;
  padding:-6rem;

}

.titulo-icono {
  width: 150px;   /* ajustá el tamaño a gusto */
  height: auto;
  margin-left: -1%;
}

@media (max-width: 768px) {
  .titulo-taller {
    font-size: 2.5rem;
  }

  .contenido-hero p {
    font-size: 1.4rem;
  }
}
  
.contenido-hero h2,
.contenido-hero p{
 color: var(--blanco);
}

.contenido-hero .ubicacion{
    display: flex;
    align-items: center;    /* centra ícono con texto */
    justify-content: center;/* centra todo el bloque */
    gap: 10px;              /* espacio entre ícono y texto */
}

/*Servicios*/
@media (min-width: 768px) {
    .servicios{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: 1rem;
    }
}

.servicio{ /*trabajamos los titulos de los menus como mecanica general etc*/
 display: flex;
 flex-direction: column;
 align-items: center;
}

.servicio h3{/*aqui se trabaja el color y el formato de las letras del menu*/
  color: var(--oscuro);
  font-weight: var(--oscuroclaro)
}

.servicio p{/*trabajamos el efecto del texto*/
    line-height: 2;
    text-align: center;
}

.servicio .iconos{/*trabajamos el efecto del menu donde están los iconos*/
    height: 15rem;
    width: 15rem;
    background-color: var(--blancoSombra);
    border-radius: 50%;
    box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.75);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
} 
.iconos{
    display: flex; /*se usa para alinear elementos en el centro*/

    align-items: center;/*acompaña a display: flex para centrar el elemento*/

    justify-content: center;/*acompaña a display: flex para centrar el elemento*/

    object-fit: cover; /*Hace que la imagen llene todo el contenedor sin deformarse.
                         Recorta (corta los bordes si hace falta) pero mantiene la proporción original.
                         Es ideal cuando quieres que una imagen de fondo, banner o ícono se vea completa y no se distorsione.*/

}
.imagen-redondeado{ /*modifica los iconos y el tamaño redondo en mis servicios*/
    width: 14.5rem;
    height: 14.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
}

.electricidad-auto{
   width: 14.5rem;
    height: 14.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
}

.suspension{
    width: 14.5rem;
    height: 14.5rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid;
}

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    padding: 20px;
}

.galeria img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    cursor: pointer;
    border-radius: 10px;
    transition: transform 0.3s;
}

.galeria img:hover {
    transform: scale(1.05);
}

/* ===== Lightbox ===== */
.lightbox {
    display: none; /* oculto por defecto */
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    align-items: center;
    justify-content: center;
}

.lightbox img {
    max-width: 80%;
    max-height: 80%;
    border-radius: 15px;
    object-fit: contain;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}



.titulo-mecanica{
    font-size: 2.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.descripcion{
     line-height: 2;
    text-align: center;
   
}

/*contacto*/
/* ===== Formulario ===== */
.formulario{ /*trabajamos el formato del formulario*/
  background-color: var(--gris);
  width: min( 60rem, 100%); /*utiliza el valor más pequeño*/
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1rem;
  box-sizing: border-box; /* evita que padding sume al ancho */
}
.formulario fieldset{ /*hacemos desaparecer la linea cuadrada que recubre el formulario*/
    border: none;
}

.formulario legend{ /*trabajamos el efecto del texto de contactanos llenando todos los campos*/
  text-align: center;
  font-size: 1.8rem;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 2rem;
  color: var(--primario);   
   margin-top: 14rem;  /* 👈 Esto lo baja un poco */
}


@media (min-width: 768px) {
    .contenedor-campos{  /*trabajamos la posición de las columnas de los inputs*/
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: auto auto auto 20rem;
        column-gap: 1rem;
    }
    .campo:nth-child(3), /*trabajamos la posición de los inputs*/
    .campo:nth-child(4),
    .campo:nth-child(5){
        grid-column: 1/3;
    }
}

.campo{
    margin-bottom: 1rem;
}
.campo label{ /*trabajamos el efecto del color de las letras del formulario*/
    color: var(--blanco);
    font-weight: bold;
    margin-bottom: 0.5rem;
    display: block;
}
.campo textarea{ /*es donde se aumenta el tamaño para escribir el mensaje*/
    height: 20rem;
    resize: vertical; /* que se pueda agrandar si hace falta */
}

.input-text{ /*trabajamos el tamaño donde se van a poner los datos*/
    width: 100%;
    border: none;
    padding: 1.5rem;
    border-radius: 0.5rem;
    box-sizing: border-box; /* evita desbordes */
}


/* Tablets y más grandes */
@media (min-width: 768px) {
  .contenedor-campos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 20rem;
    column-gap: 1rem;
  }

  .campo:nth-child(3),
  .campo:nth-child(4),
  .campo:nth-child(5) {
    grid-column: 1 / 3;
  }
}


/* ===== Responsive móviles pequeños (hasta 480px) ===== */
@media (max-width: 480px) {
  .formulario {
    width: 119.5%;          /* se expande casi todo el ancho */
    margin: 0 auto;      /* centrado */
    padding: 1rem;       /* menos alto */
    margin-left: -28.5px;
  }

  .campo textarea {
    height: 7rem;        /* más bajo */
  }

  .input-text {
    padding: 1rem;       /* inputs más bajos */
  }

  .boton {
    width: 100%;         /* botón ocupa todo el ancho */
    font-size: 1.6rem;
  }
}

/* ===== Responsive móviles grandes (481px a 600px) ===== */
@media (min-width: 481px) and (max-width: 600px) {
  .formulario {
    width: 99%;          /* se expande bastante pero no al 100% */
    margin: 0 auto;
    padding: 1.5rem;     /* un poco más cómodo que en los pequeños */
  }

  .campo textarea {
    height: 10rem;       /* más alto que en móviles chicos */
  }

  .input-text {
    padding: 1.3rem;
  }

  .boton {
    width: 100%;
    font-size: 1.7rem;
  }
}



html, body {
  overflow-x: hidden;
}


.footer{ /*es el pie de página*/
    text-align: center;
}