:root {
    --primario: #cacaca;
    --primario2: #dadada;
    --primarioOscuro: #555555;
    --secundario: #da341f;
    --secundarioOscuro: #c74848;
    --blanco: #FFF;
    --negro: #000;
    --fuentePrincipal:"Staatliches", sans-serif;
    .staatliches-regular    {
                            font-family: "Staatliches", sans-serif;
                            font-weight: 400;
                            font-style: normal;
                            }

}

html {
    box-sizing: border-box; 
    font-size: 62.5%;       /*10PX=1REM*/
    }

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

/*GLOBALES*/
body {
    background-color: var(--primario);
    font-size: 1.6rem;
    line-height: 1.5;
}
p {
    font-size: 1.8rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--blanco);
    text-align: center;
}

.p2 {
    font-size: 1.8rem;
    font-family: 'Times New Roman', Times, serif;
    color: var(--negro);
    text-align: center;
    margin: 1rem;
}
.p3 {
    font-size: 1.4rem;
    font-family: 'Times New Roman', Times, serif;
    color: var(--negro);
    text-align: center;
    margin: 1rem;
}


.section-background {
  background-image: url('../img modelos/60-lines.png');
  background-repeat: repeat;
  background-size: auto;
  background-color: var(--primario);
}

.section-background2 {
  background-size: auto;
  background-color: var(--primario2);
  margin: 3rem;
  border-radius: 10px;
  padding-bottom: 1rem;
  border: 2px inset black;
}


a {                             /*la a es de enlaces*/
    text-decoration: none;
}
img {
    width: 100%;
}
.contenedor {           /*parte central de la web sin los margenes*/
    max-width: 200rem;
    margin: 0 auto;
}
h1, h2, h3 {
    text-align: center;
    color: #2C3E50;
    font-family: var(--fuentePrincipal);
}
h1 {font-size: 4rem;}
h2 {font-size: 3.2rem; margin:1rem;}
h3 {font-size: 2.4rem;}

/*Header*/
.header {
    display: flex;
    justify-content: center;
}
.header__logo {
    max-width: 30rem;
    width: 100%;
    margin: 2rem auto;
    align-items: center;
    border-radius: 0%;
    box-shadow: 10px 10px var(--primarioOscuro);
    border-radius: 10px;
}
@media (min-width: 768) {
    .header__logo{width: 80%;}
}
@media (min-width: 992) {
    .header__logo{width: 60%;}
}
img {
    max-width: 100%;
}
/*Footes*/
.footer {
    background-color: var(--primarioOscuro);
    padding: 1rem 0;
    margin-top: 4rem;
    width: 100%;
}


.footer__text {
    font-family: var(--fuentePrincipal);
    
    text-align: center;
    font-size: 1.5rem;
}

/*Navegacion*/
.navegacion {
    background-color: var(--primarioOscuro);
    padding: 1rem 0; 
    width: 100%;
    /*pading es el margen incluidendo el elemento y margin es excluyendolo*/
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
    gap: 1rem;
}
@media (min-width: 768px) {
    .navegacion {
    background-color: var(--primarioOscuro);
    padding: 1rem 0; 
    width: 100%;
    /*pading es el margen incluidendo el elemento y margin es excluyendolo*/
    display: flex;
    justify-content: center;
    gap: 5rem;/*distancia ente las opciones de nav (old margin-raight)*/
    }
    
}
.navegacion__enlace {
    font-family: var(--fuentePrincipal);
    color: var(--blanco);
    font-size: 3rem;
}
/*.navegacion__enlace:last-of-type {
    margin-raight: 0;                   esto con version antigua
}*/
.navegacion__enlace--activo,
.navegacion__enlace:hover {
    color: var(--secundario);
}

/*Grid*/
.grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin: 2rem;
}
@media (min-width: 768px) {
    .grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
}
}

/*Grid2 para modelos foto render en coral*/
.grid2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin: 2rem;
}
@media (min-width: 460px) {
    .grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
}
}
@media (min-width: 768px) {
    .grid2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
}
}
@media (min-width: 900px) {
    .grid2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  
}
}

/*Grid3 para productos*/
.grid3 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin: 2rem;
}


@media (min-width: 768px) {
    .grid3 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);  
    height: 100%;
}
}
@media (min-width: 1111px) {
    .grid3 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  
    height: 100%;
}

}
@media (min-width: 1111px) {
    .producto3{
        grid-column-start: 2;
}
}

/*grid3derechagran*/
.grid3derechagran {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin: 2rem;
}
@media (min-width: 768px) {
    .grid3derechagran {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  
    height: 100%;
}    
}
@media (min-width: 768px) {
.huecos2 {
    grid-column-start: 3;
    grid-column-end: 5;
}
}
@media (min-width: 768px) {
.huecos1 {
    grid-column-start: 2;
    grid-column-end: 3;
}
}
/*Grid4 para productos*/
.grid4 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    margin: 2rem;
}


@media (min-width: 768px) {
    .grid4 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    height: 100%;
}
}
@media (min-width: 1111px) {
    .grid4 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);  
    height: 100%;
}

}
@media (min-width: 1111px) {
    .producto4{
        grid-column-start: 3;
}
}

/*Grid4 centrado*/
.grid4centrado {
    display: grid;
    grid-template-columns: repeat(1, 1fr);  
    height: 100%;
    gap: 2rem;
    margin: 2rem;
}


@media (min-width: 768px) {
.grid4centrado {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  
    height: 100%;
    gap: 2rem;
    margin: 2rem;
}
}


@media (min-width: 768px) {
.producto5{grid-column-start: 2;grid-column-end: 4;}  
}

@media (min-width: 768px) {
.producto-centro{grid-column-start: 2;grid-column-end: 4;}  
}


/*Productos*/
.producto {
    background-color: var(--primarioOscuro);
    padding: 1rem;
    border-radius: 10px;

}
.producto__imagen {border-radius: 10px;}
.producto__nombre {
    font-size: 5rem;
}
.producto__imagen2{
    max-width: 100%;
    font-size: 5rem;
    border-radius: 10px;
    margin: 0 auto;
    object-fit: cover; /*para que la imagen ocupe todo el espacio*/
}
.producto__nombre2 {
    font-size: 3rem;
}
.producto1:hover {
    color: var(--secundario);
    box-shadow: 8px 8px var(--secundarioOscuro);
    border-radius: 10px;
    transition: 0.6s;
}
.producto1:hover .producto__nombre {color: var(--secundario);transition: 0.6s;}

.producto-centro:hover {
    color: var(--secundario);
    box-shadow: 8px 8px var(--secundarioOscuro);
    border-radius: 10px;
    transition: 0.6s;
}
.producto-centro:hover .producto__nombre {color: var(--secundario);transition: 0.6s;}

.producto2:hover {
    color: var(--secundario);
    box-shadow: 8px 8px var(--secundarioOscuro);
    border-radius: 10px;
    transition: 0.6s;
}
.producto2:hover .producto__nombre {color: var(--secundario);transition: 0.6s;}

.producto__precio {
    font-size: 2rem;
    color: var(--blanco);
}
.producto__precio2 {
    font-size: 2rem;
    color: var(--blanco);
    font-family: Arial, Helvetica, sans-serif;
    margin: 1rem 0;
    text-align: center;
    line-height: 1;
}
.producto__precio3 {
    font-size: 1.3rem;
    color: var(--blanco);
    font-family: Arial, Helvetica, sans-serif;
    margin: 1rem 0;
    text-align: center;
    line-height: 1;
}
.producto__nombre,
.producto__precio,
.producto__nombre2{
    font-family: var(--fuentePrincipal);
    margin: 1rem 0;
    text-align: center;
    line-height: 1.2;
}


/*Imagenes grandes*/
.grafico{
    min-height: 30rem;
    background-image: url(../img/grafico1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}
.grafico--camisas {
    grid-row: 2 / 3;
    grid-column: 1 / 3;
}
.grafico--node {
    background-image: url(../img/grafico2.jpg);
    grid-column:  1 / 3;
    grid-row: 8 / 9;
}
@media (min-width: 768px) {         /*lo de ariba para dispositivos pequeños este cambia de lado*/
    .grafico--node {
        grid-row: 5 / 6;
        grid-column: 2 / 4;
    }
}

/*Nosotros*/
.nosotros {
    display: grid;
    grid-template-rows: repeat(2, auto);
    
    
}
@media (min-width: 768px) {
    .nosotros {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 1rem;
        gap: 5rem;
        margin: 1rem;
    }
}

.nosotros__imagen {
    grid-row: 1 / 2;
    border-radius: 10px;
    box-shadow: 10px 10px #222222; 
}
@media (min-width: 768px) {
    .nosotros__imagen {
        grid-column: 2 / 3;
        min-height: 25rem;
        max-height: 40rem;
        min-width: 25rem;
        max-width: 40rem;
        
    }
    
}


/*Bloques de nosotros.html*/
.bloques {
    display: grid;
    grid-template-columns: repeat( 2 , 1fr);
    gap: 2rem;
    
}
@media (min-width: 768px) {
    .bloques {
    grid-template-columns: repeat( 4 , 1fr);
}
}

.bloque {
    text-align: center;
}
.bloque__titulo {
    margin: 0;
}
.ps {background-color: var(--secundarioOscuro); border-radius: 10px;}
.pp {color: #000; font-style: var(--fuentePrincipal); font-size: 1.5rem;}


.contenedor, .comprar {margin-top: 3rem;}

/*Producto.html*/

@media (min-width: 768px) {
    .camisa {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 2rem;
    }
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.formulario {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;

}

.formulario__campo {
    /*border-color: var(--primarioOscuro);
    border-width: 1rem;
    border-style: solid;  forma antigua*/ 

    border: 1rem solid var(--primarioOscuro);
    background-color:transparent;
    color: var(--secundario);
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    padding: 1rem;
    text-align: center;
    appearance: none; /*quitar flecha*/
}

.c1 {grid-column: 1/3;}
.c5 {grid-column: 1/3;}
.c4 {grid-column: 1/3;}


.formulario__submit {
    background-color: var(--secundario);
    border: none;
    font-size: 2rem;
    font-family: var(--fuentePrincipal);
    padding: 2rem;
    transition: background-color .3s ease;
    transition: font-size .3s ease;
    grid-column: 1 / 3;
}
.formulario__submit:hover {
    font-size: 2.4rem;
    cursor: pointer;
    background-color: rgb(235, 41, 41);
}
.formulario__submit {color: rgb(58, 58, 58);}

.subrayado {
  text-decoration: underline;
  text-underline-offset: 0.5rem;
  margin: 10px 0;
  white-space: pre-wrap; /* Importante para preservar los espacios */
}

.body_ancho {
  min-height: 100vh; /* 100% de la altura del viewport */
  display: flex;
  flex-direction: column;
}

.sticky-footer{
    margin-top: auto; /* Empuja el footer al fondo si hay poco contenido */
}

.altura{max-height: 45rem;}





/*=== LANDING PAGE ===*/

.item-landing {
  grid-column: 1 / 3;
}

/*Productos*/
.producto-land {
    background-color: var(--primarioOscuro);
    padding: 1rem;
    border-radius: 10px;

}

/*Productos*/


  .producto-land2 {
   
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #E7E7F5;
    padding: 2rem;
    border: 10px solid #555555;
    border-radius: 17px;
  }

.header__logo-land {
    max-width: 35rem;
    width: 100%;
    margin: 2rem auto;
    align-items: center;
    border-radius: 0%;
    box-shadow: 10px 10px var(--primarioOscuro);
    border-radius: 10px;
}
@media (min-width: 768) {
    .header__logo-land{width: 80%;}
}
@media (min-width: 992) {
    .header__logo-land{width: 60%;}
}

.section-background-land {
  background-size: auto;
  background-color: #f7f7f7;
  margin: 1rem;
  border-radius: 10px;
  padding-bottom: 1rem;
  border: 2px inset black;
}

.botton-land {
  display: block;
  width: fit-content;      /* el botón se ajusta a su texto */
  margin: 3rem auto;       /* centra horizontalmente */
  text-align: center;
  background-color: rgb(255, 80, 80);
  border: none;
  font-size: 4rem;
  color: var(--blanco);
  font-family: var(--fuentePrincipal);
  padding: 2rem 4rem;
  transition: background-color .3s ease, font-size .3s ease;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 3px 3px #b4b4b4;
}

.botton-land:hover {
    background-color: rgb(230, 66, 66);
    font-size: 4.3rem;
    box-shadow: 5px 5px #7c7c7c;
    transition-duration: 0.4s;
}


.land-title {
    text-align: center;
    color: rgb(255, 80, 80);
    font-family: var(--fuentePrincipal);
    font-size: 5rem;
    margin-top: 1rem;
    margin-bottom: 0.7rem;  
}






@media (min-width: 0px) {
       .producto__nombre2-step {
    text-align: center;
    color: rgb(255, 80, 80);
    font-family: var(--fuentePrincipal);
    font-size: 4rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem; 
    justify-content: center;
}
}

@media (min-width: 1620px) {
    .producto__nombre2-step {
    text-align: center;
    color: rgb(255, 80, 80);
    font-family: var(--fuentePrincipal);
    font-size: 5rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem; 
}
}
@media (min-width: 1620px) {
    .landing-step {
    text-align: center;
    color: var(--blanco);
    font-family: var(--fuentePrincipal);
    font-size: 3rem;
    margin-top: 1rem;
    margin-bottom:  2rem; 
    justify-content: center;
}
}

/* === GRID AJUSTADO === */
.grid-landing {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 2rem;
  margin: 2rem;
}

@media (min-width: 1111px) {
  .grid-landing {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch; /* mantiene altura uniforme entre columnas */
    gap: 2rem;
    margin: 2rem;
  } 

  .producto-land {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .producto-land2 {
    grid-column: 2 / 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #E7E7F5;
    padding: 2rem;
    border: 10px solid #555555;
    border-radius: 17px;
  }
}

/* === GIF CUADRADO === */
.gif1 {
  width: 100%;
  aspect-ratio: 1.08 / 0.95; /* mantiene el contenedor cuadrado */
  object-fit: cover;   /* rellena sin deformar */
  display: block;
  border: 2px solid #555555;
  background-clip:content-box;
  background-color: #000;  
  border-radius: 1.8rem;
  border-width: 1rem;
}

/* === BLOQUE DE PASOS === */
.landing-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}

/* === CADA PASO === */
.landing-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 60ch);
  align-items: start;
  justify-content: center;
  color: #293133;
  font-family: var(--fuentePrincipal);
  font-size: 1.8rem;
  line-height: 1.4;
  text-align: left; /* centramos el texto dentro de su celda */
  margin: 0 auto;
}

@media (min-width:400px) {
    .landing-step {
  display: grid;
  grid-template-columns: 3rem minmax(0, 60ch);
  align-items: start;
  justify-content: center;
  color: #293133;
  font-family: var(--fuentePrincipal);
  font-size: 2.5rem;
  line-height: 1.4;
  text-align: left; /* centramos el texto dentro de su celda */
  margin: 0 auto;
}
}

/* NÚMERO DE PASO */

@media (max-width:767px ) {
    .step-num {
    color: rgb(255, 52, 52);
    font-weight: bold;
    
    /* Make it circular */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2em;           /* Equal width and height */
    height: 2em;
    border-radius: 50%;
    background-color: #222222;  /* Your desired background color */
    margin-left: 47%;
    }
}


@media (min-width: 768px) {
    .step-num {
  color: rgb(255, 52, 52);
  font-weight: bold;
  text-align: center;
  padding-right: 1rem;
  padding-left: 1rem;
  background-color: #222222;
  background-attachment: fixed;
  border-radius: 50%; 
    }
}

/* === MÓVIL === */
@media (max-width: 767px) {
  .landing-step {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .step-num {
    text-align: center;
    padding-right: 0;
    margin-bottom: 0.5rem;
  }
}

.nota-landing {
    font-size: 1.2rem;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--negro);
    justify-content: center;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-top: 2rem;
}  

.producto-land-video {
    
    padding: 1rem;

    
}

@media (min-width: 1111px) {
    .producto-land-video {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}


/* Fondo semitransparente de overlay */
#cookie-banner {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  font-family: "Inter", "Segoe UI", sans-serif;
}

/* Caja del aviso */
.cookie-content {
  background: var(--blanco);
  color: var(--primarioOscuro);
  border-radius: 1rem;
  padding: 2rem;
  max-width: 600px;
  width: 90%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  text-align: center;
  animation: fadeIn 0.4s ease;
}

/* Animación de aparición */
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}

.cookie-content h3 {
  margin-bottom: 1rem;
  font-size: 1.4rem;
  color: var(--secundarioOscuro);
}

.cookie-content p {
  font-size: 1.4rem;
  line-height: 1.5;
  margin-bottom: 1.5rem;
}

.cookie-link {
  color: var(--secundario);
  text-decoration: underline;
  font-weight: 500;
  justify-content: center;
  text-align: center;
}

.cookie-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.cookie-buttons button {
  font-size: 1.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-decline {
  background: var(--primario2);
  border: 1px solid var(--primario);
  color: var(--primarioOscuro);
}

.btn-decline:hover {
  background: var(--primario);
}

.btn-accept {
  background: var(--secundario);
  border: none;
  color: var(--blanco);
  font-weight: 500;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

.btn-accept:hover {
  background: var(--secundarioOscuro);
}

.color-oscuro {
    font-size: large;
    color: var(--primarioOscuro);
    font-family: var(--fuentePrincipal);
    text-align: center;
}

.cookie-link {
  display: block;              /* 🔹 hace que vaya en una línea aparte */
  text-align: center;          /* 🔹 centra el enlace */
  margin-top: 0.5rem;
  color: var(--secundario);
  text-decoration: underline;
  font-weight: 500;
  font-size: 1rem;
  padding-bottom: 1rem;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.3s ease-in-out; }