:root{
--fondo-naranja:rgb(250, 176, 65);
--fuente-global: 'Roboto Slab', serif;
--fuente-anton: 'Anton', sans-serif;
--size-parrafo: 20px;
--futerheader:#2b3c4a;

}

body {
  margin: 0;
  padding: 0;
  font-family: var(--fuente-global)
}

h2 {
  font-family: var(--fuente-anton);
  font-size: 40px;
}

/*=================================================================*/
.header1 {
  background-color: #2b3c4a;
  display: flex;
  color: white;
  font-family: var(--fuente-anton);
  font-size: 22px;
  padding: 0.25rem;
  position: relative;
   align-items: center;
}

.center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2rem;
   align-items: center;
   margin: 0.80rem;
}

.header1 a {
  text-decoration: none;  
  color: inherit; 

}

.logoico {
  width: 1.8rem;
}


.headersvg {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;         

}

.logotext {
  transform: translateX(-170%);
  transition: transform 0.3s ease;
  white-space: nowrap;
}

.headersvg:hover .logotext {
  transform: translateX(0);
}



 /*=================================================================*/

.carrusel {
  background-color: var(--fondo-naranja);
}

.slider {
  position: relative;
  overflow: hidden;
  max-width: 900px;   
  margin: auto;
}

.slides {
  display: flex;
  width: 100%;
  max-width: 900px;
  margin: auto;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  display: flex;
  align-items: center;
  gap: 4%;
  height: 45vh;
  padding: 1rem;     
  box-sizing: border-box;
}

.slide img {
  width: 40%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

.text {
  width: 53%;
  font-size: 1.35rem;
}

.text p, .texto-destacado p{
  color: white;
  font-weight: bold;
   text-shadow: 0px 0px 3px black;
}

.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.3);
  color: white;
  border: none;
  font-size: 30px;
  padding: 10px;
  cursor: pointer;
}

.prev { left: 10px; }
.next { right: 10px; }

 /*=================================================================*/


.div-1-video {
  position: relative;
  width: 100%;
  height: 40vh;

}

.video1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  background: rgba(93, 92, 92, 0.45);
  pointer-events: none;
  padding-bottom: 12rem;
  font-size: 80px;
  color: white;
  font-family: var(--fuente-anton)
}


 /*=================================================================*/


.Nuestras-cervezas {
  margin: 1.5rem;
text-align: center;
 font-size: var(--size-parrafo);
}

.imagenes-our-beer {
  margin:0 auto;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  align-items: center;
  justify-items:center;
  gap: 1rem;  
}

.our-greek img{
  width: 12rem;
  border-radius: 1rem;
  transition-duration: 0.6s;
  transition-property: transform;
  transition-timing-function: ease;
  
}
.our-greek img:hover{

  transform: scale(1.07);;
  transition-duration: 0.4s; 
}

 /*=================================================================*/


.Destacado {
background-color: var(--fondo-naranja);
padding: 1rem;
text-align: center;
 font-size: var(--size-parrafo);
}

.Destacado img {
  width: 15rem;
  border-radius: 1rem;
  transition-duration: 0.7s;
  transition-property: transform;
  transition-timing-function: ease;
}

.contenedor-chopp {
  margin:0 auto;
  max-width: 900px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: top;
  justify-items:center;
  gap: 1rem;  
}

.Destacado h3{
  font-family: var(--fuente-anton);
  font-size: 36px;
}

.Destacado img:hover{

  transform: scale(1.08);;
  transition-duration: 0.4s; 
}

 /*=================================================================*/


.futer-nomark {
  width: 100%;
  max-width: 900px;

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 40px;

  padding: 40px 20px;
  color: white;
  background-color: var(--futerheader);

  justify-items: center;
  text-align: left;
}


.futer-nomark a{
  text-decoration: none;  
  color: inherit;   
}

.centrarfuter {
  background-color: var(--futerheader);
  display: flex;
  justify-content: center;
}
.futer-nomark > span {
  grid-column: 1 / -1;
  text-align: center;
  margin-top: 30px;
  font-size: 0.8rem;
  opacity: 0.7;
}
.list-contac-futer {
  list-style: none;
  padding: 0;
  margin: 0;
  
}

.list-contac-futer li a {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 5px;
}
.futer-nomark nav {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.futer-nomark img {
  background-color: white;
  border-radius: 15px;
}


 /*=================================================================*/

.marcas-slide img {
  width: 10rem;
}
.Nuestras-Marcas {
  margin: auto;
  text-align: center;
}
.provisional {
  padding: 1.2rem;
  padding-bottom: 3rem;
}
 /*=================================================================*/
 /*===================CONTACTO.HTML=================================*/

.contactemos {
  margin: 0;
  padding: 0;
}
.ven-a-visitar {
  background-color: var(--fondo-naranja);
  padding: 2rem 2rem 2rem 2rem;
}

.ven-a-visitar h2, .ven-a-visitar p {
margin: 0;
}


.ven-a-visitar p {
  color: white;
  font-weight: bold;
   text-shadow: 0px 0px 3px black;
  font-size: var(--size-parrafo);
  font-family: var(--fuente-global);
  
}

.formulario {
  display: flex;
  justify-content: center;
  align-items: center; 
  gap: 2rem;           
  background-color: white;
  padding: 2rem;
  border-radius: 10px;

}
.formulario img {
  width: 28rem;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.formcontacto {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 25rem; 
}
.input1, .caja-area {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 1rem;
}
.btn-enviar {
  padding: 0.7rem;
  border: none;
  border-radius: 5px;
  background-color: var(--fondo-naranja);
  color: white;
  font-size: 1rem;
  cursor: pointer;
}


/* ====================NOSOTROS.HTML======================*/
.nosotros h2, .nosotros p {
margin: 0;
}

.nosotros {
  width: 50rem;
  padding: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}
.nosotros p, .armar-chopp p {
  font-family: var(--fuente-global);
  font-weight:700;
  color: white;
 text-shadow: 0px 0px 3px black;
 font-size: 20px;
}
.nosotros img {
  width: 22rem;
  border-radius: 5px;
}
.todo-us {
  display: flex;
  justify-content: center;
    background-color: var(--fondo-naranja);
}
 /*========================CATALOGO========================*/

.catalogo-cont {
  display: flex;
  justify-content: center; /* centra el UL en la página */
  padding: 2rem 1rem;
}

.catalogo1 {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); 
  gap: 2rem; 
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 60vw;

}

.catalogo1 li {
  display: flex;
  flex-direction: column; 
  align-items: center;    
  text-align: center;
  background-color: #fff; 
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.catalogo1 img {
  width: 10rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
}

.armar-chopp video {
  width: 18rem;
  border-radius: 5px;
}

.armar-choppe {
  display: flex;
  justify-content: center;
    background-color: var(--fondo-naranja);
}
.armar-chopp {
  width: 50rem;
  padding: 2rem;
  display: flex;
  justify-content: center;
    background-color: var(--fondo-naranja);
    gap: 2rem;
}
 /*========================MEDIAQUERY========================*/


@media (width < 1000px) {
h2{
  font-size: 24px;
}
p {
  font-size: 11px;
}
  .div-1-video {
  width: 100%;
  height: 25vh;
}
.overlay {
  font-size: 32px;
  padding-bottom: 6rem;
}
.text {
  font-size: 12px;
}
.our-greek img{
  width: 8rem ;
}
.Nuestras-cervezas p {
   font-size: 11px;
}
.Destacado img {
  width: 10rem;
}
.contenedor-chopp h3{
  font-size: 22px;
}
.contenedor-chopp {
  gap: 0rem;
}
 .header1 {
    justify-content: center;
    font-size: 15px;
     align-items: center;
  }

  .center {
    position: static;          /* vuelve al flujo normal */
    transform: none;           /* elimina el translate */
    left: auto;       
   justify-content: center; 
   gap: 0.5rem;       /* limpia left */
   align-items: center;
  }
  .logotext {
    display: none;
  }


 .futer-nomark {
    grid-template-columns: 1fr;
    justify-items: stretch;
    text-align: left;
  }

  /* TODAS las secciones alineadas igual */
  .futer-1,
  .futer-2,
  .futer-3 {
    width: 100%;
    align-items: flex-start;
  }

  /* Iconos + texto alineados prolijos */
  .list-contac-futer li {
    justify-content: flex-start;
  }

  /* Ajuste de tamaños */
  .futer-nomark h4 {
    font-size: 1rem;
  }

  .futer-nomark a,
  .futer-nomark li,
  .futer-nomark span {
    font-size: 0.8rem;
  }

.marcas-slide img {
  width: 8rem;
}


/* ====================CONTACTO.HTML======================*/
  .formulario {
    flex-direction: column; 
    align-items: center;    
    gap: 1.5rem;           
  }

  .formcontacto {
    width: 100%;           
    max-width: 400px;      
  }

  .formulario img {
    width: 80%;            
    max-width: 300px;      
  }

/* ====================NOSOTROS.HTML======================*/
  .nosotros {
    flex-direction: column; 
    align-items: center;    
    gap: 1.5rem;        
    padding: 2rem;   
  }
  .nosotros img {
    width: 16rem;
  }
.nosotros p, .armar-chopp p{
font-size: 15px;
}
.armar-chopp {
  margin: 0;
  flex-direction: column;
  max-width: 100vw;
  align-content: center;
 align-items: center;
}
.armar-chopp video {
  width: 60vw;
}
}