/* font-family: "Sedgwick Ave Display", cursive; */

:root{
    --color-1: #fff;
    --color-2: #222;
}
*,
*::before,
*::after {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
}

html {
    scroll-behavior: smooth;
}
body {
    padding: 0;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--color-2);
    color: var(--color-1);
}
/* ----LOGO STICKY---- */

#logo-sticky {
    position: fixed;
    width: 40px;
    height: auto;
    top: 10px;
    left: 10px;
    z-index: 1000;

    opacity: 0;
    transform: scale(0.8);
    pointer-events: none;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

#logo-sticky.show {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

#logo-sticky img {
    width: 40px;
    height: auto;
    border-radius: 50%;
    transition: transform 0.25s ease;
}
#logo-sticky:hover img{
    transform: scale(1.2);
}
/* -----PORTADA------ */

#portada{
    width: 100%;
    height: 50vh;
    background-color: blue;
    display: flex;
    justify-content: center;
    align-items: center;
}
#portada img{
    width: 70%;
}


#start{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 50px;
}
#start img{
    width: 60%;

}
/* -------------------------------
------------------------------- */

.car-wrapper {
    display: flex;
    align-items: baseline;
    justify-content: center;
}

.car-wrapper.pulse {
    animation: glowOnly 1.6s ease-in-out infinite;
}

@keyframes glowOnly {
    0% {
        filter: drop-shadow(0 0 0 rgba(255,140,0,0));
    }
    50% {
        filter:
            drop-shadow(0 0 10px rgba(255,140,0,.55))
            drop-shadow(0 0 22px rgba(255,90,0,.35));
    }
    100% {
        filter: drop-shadow(0 0 0 rgba(255,140,0,0));
    }
}

/* -------------------------------
------------------------------- */

/* Texto cliqueable*/
#wave-text {
    font-size: 1.2rem;
    font-weight: bold;
    display: inline-block;
    white-space: nowrap;
    
        cursor: pointer;
    transition: opacity 0.8s ease;
}

/* Texto desaparece */
#wave-text.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* Letras */
#wave-text span {
    display: inline-block;
    animation: wave 1.5s ease-in-out infinite;
    animation-delay: calc(var(--i) * 0.06s);
}

/* Keyframes */
@keyframes wave {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.3); /* +30% */
        color: rgb(238, 110, 59);
    }
    100% {
        transform: scale(1);
    }
}

/* Auto preparado para animarse */
#start img {
    display: block;
    transition:
        transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.3s ease;
    will-change: transform, filter;
    transform-origin: center;
}

/* estado de salida */
#start img.drive-away {
    transform:
        translateX(120vw)
        rotate(-6deg)
        scale(1.1);
    filter: blur(1px);
}

/* Texto de bienvenida */
#welcome-text {
    font-family: "Sedgwick Ave Display", cursive;
    font-size: 2rem;
    /* font-weight: bold; */
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 1s ease, transform 1s ease;
    text-align: center;
}

#welcome-text.show {
    opacity: 1;
    transform: translateY(0);
}
#spanDiegast{
    font-size: 2.8rem;
    color: orange;
}
#spanColecc{
    font-size: 2.5rem;
    color: rgb(255, 72, 0);
}




/* ================= CATEGORIAS ================= */

#catalogos{
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    width: 100%;
    text-align: center;
    /* font-family: Verdana, Geneva, Tahoma, sans-serif; */
    font-weight: bolder;
    font-size: 1.5rem;
    color: orange;
    background-color: #525252;
    padding: 15px;
}

#catalogos.show {
    opacity: 1;
}

/* CONTENEDOR */
#categAutos {
    display: none;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px 10px;

    opacity: 0;
    transform: translateX(-80px);
}

/* estado visible */
footer.show,
#categAutos.show {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

#categAutos > a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* ITEMS */
.categoriaAutos {
    display: grid;
    place-items: center;
}

/* IMAGEN */
.categoriaAutos img {
    width: 100%;
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* TEXTO */
.categoriaAutos a{
    text-decoration: none;
    color: inherit;
    display: block;
}
.categoriaAutos p {


    font-family: "Sedgwick Ave Display", cursive;

    grid-column: 1 / 2;
    grid-row: 1 / 2;
    font-size: 2rem;
    text-align: center;
    text-shadow:
        -1px -1px 0 black,
         1px -1px 0 black,
        -1px  1px 0 black,
         1px  1px 0 black;
    transition: transform 0.3s ease;
}

#categAutos a:visited,
#categAutos a:hover,
#categAutos a:active,
#categAutos a:focus {
    color: inherit;
    text-decoration: none;
}

#categAutos > a:hover .categoriaAutos p {
    transform: scale(1.2);
    color: orange;
}
footer{
    /* display: flex; */
    display: none;
    opacity: 0;


    flex-direction: column;
    align-items: start;
    margin-top: 70px;
    margin-left: 10px;
    margin-bottom: 20px;
}
footer a{
    text-decoration: none;
    color: var(--color-1);
}
#desarrollo{
    margin-top: 50px;
    color: grey;
    display: flex;
    flex-direction: row-reverse;
    margin-left: 10px;
}

#desarrollo p{
    margin: 0;
    padding-left: 10px;
}

#desarrollo a{
    color: grey;
}
#desarrollo .credito {
    font-size: 0.8em;
    color: rgb(83, 83, 83);
}

#desarrollo .credito a {
    color: rgb(83, 83, 83);
}

.footItem{
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px;
}

/* ------SECCIONES QUE SE DESPRENDEN DEL INDEX----- */
/* ------SECCIONES QUE SE DESPRENDEN DEL INDEX----- */

#portadaSeccion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#portadaSeccion img{
    width: 50%;
    padding-top: 50px;
}
#portadaSeccionNosotros{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-image: url(./IMAGES/3PorcheVertical.webp);
    background-position: center 55%;
    background-size: 100% auto;
}
#portadaSeccionNosotros img{
    width: 50%;
    padding: 50px 0 20px 0;

}
#portadaSeccionNosotros p{
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
}
#fotosNosotros img{
    width: 100%;
    padding: 0 5px;
}
#seccEncabezado {
    font-family: "Sedgwick Ave Display", cursive;
    font-size: 2rem;
    text-align: center;
}
#seccEncabezadoNosotros {
    font-family: "Sedgwick Ave Display", cursive;
    font-size: 2rem;
    text-align: center;
    padding-bottom: 50px;
}

#spanTipoCategoria{
    font-size: 3rem;
    color: rgb(255, 72, 0);
}

.descripcionCategoria{
    margin: 0 10px 50px 10px;
    display: flex;
    flex-direction: column;
    line-height: 1.6;
    text-align: justify;
}
#descripcionDiegastTexto{
    padding-top: 30px;
    margin: 0 10px 30px 10px;
}

/* VISUALIZACION DE MENU Y BOTON BACK */

#barra-menu-movil,
.botonBack {
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


/* Estado oculto */
.oculto-scroll {
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
}

/* Estado visible */
.visible-scroll {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}


/* BARRA MENU MOVIL */

#barra-menu-movil{
    position: fixed;
    top: 0;
    width: 100%;
    /* background-color: rgb(165, 42, 42, 0.5); */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 101;
}


/* MENU BURGUER */

#containerBurguer{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 10px;
    border-radius: 0 0 0 10px;
    background-color: rgb(34, 34, 34, 0.7);
}

.buttons__burger {
  --size: 2.5rem;
  --clr: #fff;
  width: var(--size);
  height: calc(0.7 * var(--size));
  cursor: pointer;
  position: relative;
  display: block;
}

.buttons__burger #burger {
  display: none;
  width: 100%;
  height: 100%;
}

.buttons__burger span {
  display: block;
  position: absolute;
  width: 100%;
  border-radius: 0.5rem;
  border: 2px solid var(--clr);
  background-color: var(--clr);
  transition: 0.15s ease-in-out;

}

.buttons__burger span:nth-of-type(1) {
  top: 0;
  right: 0;
  transform-origin: right center;
}

.buttons__burger span:nth-of-type(2) {
  top: 50%;
  transform: translateY(-50%);
}

.buttons__burger span:nth-of-type(3) {
  top: 100%;
  right: 0;
  transform-origin: right center;
  transform: translateY(-100%);
}

.buttons__burger #burger:checked ~ span:nth-of-type(1) {
  transform: translateY(-30%) rotate(40deg);
  width: 50%;
  top: 50%;
}

.buttons__burger #burger:checked ~ span:nth-of-type(3) {
  transform: translateY(-70%) rotate(-40deg);
  width: 50%;
  top: 50%;
}

/* FIN CSS BURGUER */

/* MENU CATEGORIAS */

#menuCategorias{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 50px 10px 20px 0;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    background-color: rgb(34, 34, 34, 0.7);
    transform: translateX(100%);        /* oculto */
    transition: transform 0.4s ease;    /* animación */
    z-index: 100;
}
#menuCategorias.activo{
    transform: translateX(0);

}
#menuCategorias p{
    margin: 5px;
    text-align: right;
    color: white;
    /* font-weight: bold; */
    font-size: larger;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
#menuCategorias a{
    text-decoration: none;
}

#logo-sticky-secciones {

    transform: scale(0.8);
    width: 50px;
    height: auto;

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


#logo-sticky-secciones img {
    width: 50px;
    height: auto;
    border-radius: 50%;
    transition: transform 0.25s ease;
}
#logo-sticky-secciones:hover img{
    transform: scale(1.2);
}

/* ---------BOTÓN BACK-------- */

.botonBack img{
    width: 50px;
    height: auto;
    position: fixed;
    bottom: 10px;
    right: 10px;
}

/* ---------GRILLA PRODUCTOS--------- */

#grillaProducto {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
    padding: 5px;
}
.item {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 10px;
}
.itemFoto img {
    width: 100%;
    border-radius: 10px;
    display: block;
}
.itemFoto {
    display: grid;
    place-items: center;
}

/* Ambos ocupan la misma celda */

.itemTitulo {
    display: none;
}

.itemPrecio {
    display: flex;
    align-items: center;        /* centra vertical */
    justify-content: space-between;

    /* text-align: center; */
    font-weight: lighter;
    margin-top: 10px;
}
.itemPrecio p{
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
}
.itemPrecio a {
    display: flex;
    align-items: center;
    justify-content: center;

    height: 35px;
    width: auto;

    text-decoration: none;
}

.agregar-a-carrito img {
    width: 70px;
    height: 35px;
    display: block;
    transition: transform 0.25s ease;
    cursor: pointer;
    background-color: green;
    border-radius: 5px;

}

/* hover SOLO sobre el icono */
.agregar-a-carrito img:hover {
    transform: scale(1.15);
}
.botonComprar{
    display: none;
}


/* PANTALLAS MOVILES ORIENTACION LANDSCAPE */



/* PANTALLAS 992px */

@media (min-width: 992px) {
    #portada{
        height: 70vh;
    }
    #portada img{
        width: 25%;
    }
    #start{
        position: relative;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
    }

/* el wrapper es el que se posiciona */
.car-wrapper{
    position: absolute;
    left: 50px;
    width: 30%;
}

/* la imagen vive DENTRO del wrapper */
.car-wrapper img{
    width: 100%;
    height: auto;
    position: relative; /* o sin position */
}

    #wave-text{
        text-align: center;
    }
    
    #start img {
        transition: transform 2s ease, opacity 1.5s ease;
    }
    #welcome-text {
        font-size: 3rem;
    }
    #spanDiegast{
        font-size: 3.8rem;
        color: orange;
    }
    #spanColecc{
        font-size: 3.5rem;
        color: rgb(255, 72, 0);
    }

    #catalogos{
        font-size: 2.5rem;
    }
    #categAutos {
        grid-template-columns: repeat(2, 1fr);
    }

    .categoriaAutos p {

        font-size: 2.5rem;

    }


    footer{
        margin-top: 70px;
        margin-left: 20px;
        margin-bottom: 20px;
    }

    .footItem{
        gap: 30px;
    }
    .footItem img {
        transition: transform 0.3s ease;
    }

    .footItem:hover img {
        transform: scale(1.15);
    }
    .descripcion{
        margin: 80px 50px 80px 50px;
    }

    /* --------SECCIONES-------- */

    #portadaSeccion img{
        width: 20%;
        padding-top: 100px;
    }


    #seccEncabezado {
        font-size: 3rem;
    }

    #spanTipoCategoria{
        font-size: 4rem;
    }

    #portadaSeccionNosotros{
        display: flex;
        flex-direction: column;
        align-items: center;
        background-image: url(./IMAGES/autosEnfrentados.webp);
        background-size: auto 100%;
    }
    #portadaSeccionNosotros img{
        width: 25%;
        padding: 100px 0 20px 0;

    }
    #portadaSeccionNosotros p{
    text-shadow:
        -2px -2px 0 #000,
        2px -2px 0 #000,
        -2px  2px 0 #000,
        2px  2px 0 #000;
    }
    #descripcionDiegastTexto{
        padding: 0;
        margin: 100px 50px 100px 50px;
    }

    .descripcionCategoria {
        margin: 10px 50px 50px 50px;
        display: flex;
        flex-direction: column;
        line-height: 1.6;
        text-align: justify;
    }
    .descripcionCategoria p{
        margin: 0 50px;
        font-size: 1.3rem;
    }

    #fotosNosotros{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
        gap: 5px;
        padding: 5px;
    }
    #fotosNosotros img{
        padding: 0;
    }

    /* -----------MENU CATEGORIAS-------- */

    #menuCategorias{
        position: fixed;          /* ya no es overlay */
        top: 0;
        transform: translateX(0);  /* siempre visible */
        width: 100%;
        padding: 10px 15px;
        background-color: #3a3a3a;
        transition: none;
        flex-direction: row;       /* opcional */
        justify-content: flex-end;
    }
    #menuCategorias p{
        color: orange;
        font-weight: bold;
    }
    #menuCategorias a {
        position: relative;
        padding: 8px 10px;
        text-decoration: none;
    }

    #menuCategorias a::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 2px;
        width: 0;
        height: 2px;
        background-color: orange;
        transition: width 0.3s ease, left 0.3s ease;
    }

    #menuCategorias a:hover::after {
        width: calc(100% - 20px);
        left: 10px;
    }
    







    /* --------GRILLA PRODUCTOS----------- */
    #grillaProducto {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        padding: 5px;
    }
    .itemTitulo {
        display: block;
        width: 100%;
        padding: 15px 15px;
        font-size: 1rem;

        margin: 0;
        padding: 5px 5px;
        margin-top: 5px;

        text-align: center;


        background: rgba(0, 0, 0);
        border-radius: 10px;

    }
    .agregar-a-carrito{
        display: none;
    }
    .botonComprar{
        display: block;
        color: white;
        background-color: green;
        padding: 10px 30px;
        border-radius: 10px;
    }
    .botonComprar:hover{
        background-color: greenyellow;
        color: black;
    }
    



    

}  
@media (min-width: 1200px) {
    #welcome-text {
        font-family: "Sedgwick Ave Display", cursive;
        font-size: 4rem;
        /* font-weight: bold; */
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 1s ease, transform 1s ease;
        text-align: center;
    }

    #welcome-text.show {
        opacity: 1;
        transform: translateY(0);
    }
    #spanDiegast{
        font-size: 4.8rem;
        color: orange;
    }
    #spanColecc{
        font-size: 4.5rem;
        color: rgb(255, 72, 0);
    }
    .categoriaAutos p {

        font-size: 3.5rem;

    }

    #seccEncabezado {
        font-size: 3.5rem;
    }

    #spanTipoCategoria{
        font-size: 4.5rem;
    }

    /* --------GRILLA PRODUCTOS----------- */
    #grillaProducto {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 5px;
        padding: 5px;
    }




}