@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;800;900&display=swap');
:root{
  --bg: #FBFCF1;
  --text: #000000;
  --primary: #0F726B;
  --primary-light: #56BDB9;
  --accent: #828C51;
  --gray: #8e8e8e;
  --white: #fff;
  --shadow: 0 0 20px rgba(0,0,0,.1);
  --shadow-inset: rgb(204, 219, 232) 3px 3px 6px 0px inset, rgba(255, 255, 255, 0.5) -3px -3px 6px 1px inset;
  --radius-lg: 35px;
  --radius-md: 15px;
  --radius-sm: 12px;
  --max-width: 1198px;
  --transition: .3s ease;
}

/* RESET */
*, *::before, *::after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html { 
  scroll-behavior: smooth;
  min-height: 100%;
}

body{
  font-family: 'Poppins', system-ui, sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}

img, svg, video{
  max-width: 100%;
  height: auto;
  display: block;
}

a { 
  color: inherit; 
  text-decoration: none; 
}

ul { list-style: none; }

main{ flex: 1; }

/* HEADER */
.header{
  padding-block: 7.5rem 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.header-content{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex: 1;
  gap: 2rem;
}

.header-txt{
  margin-top: 7.5rem;
  color: var(--primary);
  margin-left: 1rem;
}

.header-txt h1{
  font-size: clamp(2.5rem, 5vw, 3.125rem);
  color: var(--primary-light);
  text-transform: uppercase;
  line-height: 1.1;
}

.header-txt p{
  color: black;
  width: auto;
  text-align: justify;
  margin-bottom: 2.5rem;
}

.header-image{
  flex: 1;
  text-align: center;
}

/* MENU */
.menu{
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
}

.logo img{
  margin-left: 0.625rem;
  width: 80px;
  height: 80px;
}

.menu .navbar ul{
  display: flex;
  gap: 0.5rem;
}

.navbar a{
  font-size: 1.125rem;
  padding: 1.25rem;
  color: var(--primary-light);
  display: block;
  transition: color var(--transition);
}

.navbar a:hover,
.navbar a:focus-visible{
  color: var(--primary);
}

/* MENU HAMBURGUESA SOLO CSS */
#menu{ display: none; }

.menu label{
  cursor: pointer;
  display: none;
}

.menu-icono{ width: 25px; }

#layer{ margin-top: 5px; }

/* TEXTOS HEADER CONTACTO */
h1#nombre-header-contacto{   
  font-size: clamp(2rem, 5vw, 2.8rem);
  color: var(--primary);
  text-align: center;    
  text-shadow: 0 0 10px var(--white), 0 0 10px var(--primary), 0 0 20px var(--primary);
  margin-bottom: 1.375rem;
}

h2#direccion{
  font-size: clamp(1.5rem, 4vw, 2rem);
  color: var(--primary);
  text-align: center;    
  text-shadow: 0 0 10px var(--white), 0 0 20px var(--primary), 0 0 30px var(--primary);
  margin-bottom: 1rem;
}

h3#telefono{
  font-size: 1.4375rem;
  color: var(--primary);
  text-align: center;    
  text-shadow: 0 0 10px var(--white), 0 0 20px var(--primary), 0 0 30px var(--primary);
  margin-bottom: 0.25rem;
}

.bastardilla {
  line-height: 3;
  text-transform: uppercase;
}

/* RESEÑAS */
.reseñas h2 {
  text-align: center;
  margin-top: 2.25rem;
}

.fila_reseñas {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
}

.reseña {
  width: 300px;
  text-align: center;
  color: black;
}

.reseña img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--primary-light);
  margin-inline: auto;
}

.prismaticos {
  width: fit-content;
  margin: 6.25rem auto 1.5rem;
}

/* BOTONES UNIFICADOS */
.btn,
.botonarticulo,
.btn-1{
  position: relative;
  display: inline-block;
  padding: 1rem 1.5rem;
  background: var(--primary);
  color: var(--primary-light);
  border-radius: var(--radius-lg);
  border: none;
  cursor: pointer;
  overflow: hidden;
  transition: color var(--transition);
  z-index: 1;
}

.btn-1{ 
  border-radius: var(--radius-md); 
  padding: 0.7rem 1.5rem;
}

.btn::before,
.botonarticulo::before,
.btn-1::before{
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  height: 100%;
  background: var(--primary-light);
  transition: width var(--transition);
  z-index: -1;
}

.btn:hover::before,
.botonarticulo:hover::before,
.btn-1:hover::before{
  width: 100%;
}

.btn:hover,
.botonarticulo:hover,
.btn-1:hover{
  color: var(--primary);
}

.btn{
  width: 50%;
  margin-top: 0.625rem;
  margin-left: 0.4375rem;
  padding: 0.9375rem;
  border-radius: 25px;
}

.btn:hover{
  background: #82e6e3;
  color: #184744;
}

/* BLOG + ASIDE */
#nueva{
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
}

.article{
  width: 100%;
  padding-bottom: 0.625rem;
  max-width: 500px;
  margin-inline: auto;
}

.article h2{
  margin-bottom: 1rem;
}

hr.gradient{
  margin-block: 0.3125rem 0.9375rem;
  border: 0;
  height: 2px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.article p{
  width: 100%;
  font-family: 'Gill Sans','Gill Sans MT',sans-serif;
  font-size: 1.125rem;
  text-align: justify;
  text-align-last: left;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.article {
  overflow: hidden;
}
.oculto{
    display:none;
}

/* FECHA ARTÍCULOS */
.contenedor_fecha{
  width: fit-content;
  min-width: 180px;
  height: auto;
  padding: 0.625rem;
  background-color: var(--bg);
  border-radius: var(--radius-sm);
  margin: 0.9375rem auto;   
  z-index: 999;
  box-shadow: var(--shadow-inset);
}

.fecha_articulo{
  font-family: Oswald, 'Courier New', Courier, monospace;
  color: var(--gray);
  text-align: center;
  z-index: 1000;    
}
/* Artículos pero de la página artículos*/
.articleI{
gap:30px;
justify-content:space-between;
flex-wrap:wrap;

}
#ladillos{
    margin-top: 2rem;
    margin-bottom: 2rem;
}





/* ASIDE */
aside{
  margin-top: 2.5rem;
  padding: 1.25rem;
  border-radius: 10px;
}

/* SERVICIOS */
.servicios{
  padding-block: 5.625rem;
  text-align: center;
  margin-top: 1.25rem;
}

.servicios h1{
  color: var(--primary);
  font-size: clamp(2rem, 6vw, 3.125rem);
  margin-bottom: 1.25rem;
}

.servicios h3{ font-size: 1.3em; }

.servicios-content{
  display: flex;
  gap: 1.875rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 2.5rem;
}

.servicios p{ text-align-last: left; }

.servicio-1{
  flex: 1 1 250px;
  padding: 1.5625rem;
  box-shadow: var(--shadow);
}

.servicio-1 i{
  font-size: 1.875rem;
  color: var(--primary-light);
  margin-bottom: 0.625rem;
}

/* SLIDER NOSOTROS */
.slider{
  width: 90%;
  max-width: 500px;
  aspect-ratio: 16/14;
  overflow: hidden;         
  margin: 6.25rem auto;
  position: relative;
}

#texto_slider{
  text-align: center;
  margin-block: -4rem 1rem;
}

#nosotros p{
  max-width: 500px;
  text-align: justify;
  margin: 0 auto 2.5rem;
}

#nosotros h1{ text-align: center; }

.cinta{
  display: flex;
  width: calc(100% * 12);
  height: 100%;
  animation: mover 36s linear infinite;
}

.cinta img{
  flex: 0 0 calc(100% / 12);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes mover{
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.slider:hover .cinta{
  animation-play-state: paused;
}

.imagen-blog{
  width: 100%;
  max-width: 350px;
  margin: 1rem auto;
}

.imagen-blog-articulos{
  width: 100%;
  max-width: 450px;
  margin: 0 auto 1.875rem;
  display: block;
 
}

#articuloarticular{
  max-width: 650px;
  text-align: justify;
  text-align-last: left;
}

/* FORMULARIOS */
.formulario{
  display: flex;
  justify-content: center;
}

#buscayencuentra{ margin-bottom: 0.3125rem; }

form{
  width: 100%;
  max-width: 500px;
  padding: 1.875rem;
  text-align: center;
  box-shadow: var(--shadow);
  margin: 1.625rem auto 2.25rem;
}

.input-container{ position: relative; }

.input-container i{
  position: absolute;
  top: 9px;
  left: 10px;
  padding: 10px;
  border-radius: 50%;
  background: var(--primary-light);
  color: var(--primary);
}

.input-container input,
textarea{
  width: 100%;
  padding: 0.9375rem 0.9375rem 0.9375rem 3.75rem;
  margin-bottom: 1.25rem;
  border-radius: 25px;
  border: 2px solid var(--primary);
  background: transparent;
  font-family: 'Poppins',sans-serif;
}

textarea{
  font-family: 'Poppins',sans-serif;
  font-size: 1.125rem;
}

.buscador-input{
  border: 2px double var(--primary-light); 
  border-radius: 25px; 
  padding: 1.25rem; 
  background-color: white; 
  text-align: center; 
  font-size: 1rem;
}

.resultados{ margin-top: 1.875rem; }

.resultado-item{
  padding: 0.9375rem;
  border-bottom: 1px dotted var(--primary);
}

.resultado-item h3{
  color: var(--primary);
  margin-bottom: 0.3125rem;
}

.resultado-item p{ color: #333; }

/* FOOTER */
.footer{
  padding-block: 3.125rem;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}

.footer-content{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  margin-inline: auto;
}

.redes{
  display: flex;
  gap: 0.4375rem;
  justify-content: center;
}

footer .redes i{
  font-size: 3.125rem;
  color: var(--primary-light);
  cursor: pointer;
  transition: transform var(--transition);
}

footer .redes i:hover{ transform: scale(1.2); }
footer .redes i.fa-facebook:hover{ color: #1877f2; }
footer .redes i.fa-instagram:hover{ color: #e4405f; }
footer .redes i.fa-pinterest:hover{ color: #bd081c; }
footer .redes i.fa-reddit:hover{ color: #ff4500; }
footer .redes i.fa-tiktok:hover{ color: #fcf7f7; background-color: black; }
footer .redes i.fa-x-twitter:hover{ color: #fdfdfd; background-color: black; }

#tirtor{
  position: relative;
  margin-top: -2.5px;
  margin-left: -2.2px;
  border-radius: 50%;
  padding: 2.4px;
  font-size: 2.9375rem;
}

footer .redes i:hover #tirtor{ transform: scale(0.8); }

#copyright, .copyright-text{    
  color: var(--primary-light);
  font-family: 'Oswald', sans-serif;
  margin-bottom: -5px;
  margin-right: 0.9375rem;  
}

#copyright:hover{ color: var(--primary); }
a#copyright:visited {
  color: purple;
  text-decoration: double;  
}

#flecha{    
  color: var(--primary-light);
  font-size: 3.4375rem;
  margin: 0.125rem;
  transition: transform 0.7s;
} 

#flecha:hover{
  transform: rotateY(20deg);
  color: var(--primary);
}

/* CONTENEDOL - ANIMACIONES */
#contenedol{
  aspect-ratio: 16/9;
  width: 80vw;
  position: relative;
  margin-inline: auto;
}

#contenedol .forma{
  height: 30%;
  width: 30%;
  position: absolute;
  background-color: rgb(40, 56, 48);
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

#contenedol .forma:nth-child(1){ background-color: #1E352F; z-index: 2; }
#contenedol .forma:nth-child(2){ background-color: #335145; z-index: 2; }
#contenedol .forma:nth-child(3){ background-color: #30532f; z-index: 1; }
#contenedol .forma:nth-child(4){ background-color: #AC92A6; z-index: 2; }
#contenedol .forma:nth-child(5){ background-color: #8ac15b; z-index: 2; }
#contenedol .forma:nth-child(6){ background-color: #A6C36F; z-index: 2; }
#contenedol .forma:nth-child(7){ background-color: #828C51; z-index: 2; }

#contenedol[redondez="1"] .forma{ border-radius: 6rem; }
#contenedol[redondez="2"] .forma{ border-radius: 0rem; }
#contenedol[redondez="3"] .forma{ border-radius: 30rem; }

#contenedol[configuracion="1"] .forma:nth-child(1){ left: 0%; top: 0%; height: 50%; width: 20%; }
#contenedol[configuracion="1"] .forma:nth-child(2){ left: 20%; top: 0%; height: 50%; width: 30%; }
#contenedol[configuracion="1"] .forma:nth-child(3){ left: 50%; top: 0%; height: 100%; width: 50%; }
#contenedol[configuracion="1"] .forma:nth-child(4){ left: 0%; top: 50%; height: 50%; width: 30%; }
#contenedol[configuracion="1"] .forma:nth-child(5){ left: 30%; top: 50%; height: 50%; width: 20%; }
#contenedol[configuracion="1"] .forma:nth-child(6){ left: 70%; top: 50%; height: 50%; width: 30%; }
#contenedol[configuracion="1"] .forma:nth-child(7){ left: 85%; top: 75%; height: 25%; width: 15%; }

#contenedol .forma:hover{
  background-color: var(--primary-light);
  transition: 100ms ease-in-out;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .slider{
    max-width: 300px;
    margin-top: 11.25rem;
  }
  .cinta{ animation-duration: 42s; }
}

@media (max-width: 768px){
  header{ margin-top: 3.125rem; }
  
  .header-txt h1{ font-size: 2.5rem; }
  .header-txt p{ max-width: 600px; text-align: justify; }
  
  .logo img{
    margin-left: 6.875rem;
    width: 60px;
    height: 60px;
    margin-bottom: 0.625rem;
  }
  
  .menu label{ display: block; }
  
  .menu .navbar{
    position: absolute;
    top: 100%;
    inset-inline: 0;
    background: var(--bg);
    display: none;
  }
  
  .menu .navbar ul{
    flex-direction: column;
  }
  
  .menu .navbar ul li{ width: 100%; }
  
  #menu:checked ~ .navbar{ display: block; }
  
  .header-content{
    flex-direction: column;
    text-align: center;
  }
  
  .article p{
    font-size: 1rem;
    max-width: 400px;
  }
  
  .servicios-content{ flex-direction: column; }
  
  .footer-content{
    flex-direction: column;
    text-align: center;
    margin-inline: auto;
  }
  
  form{ width: 100%; }
  
  #copyright{
    font-family: 'Oswald', sans-serif;
    margin-bottom: 0.9375rem;
    margin-right: 0.9375rem;
  }
}

@media (max-width: 600px){
  .slider{
    max-width: 95%;
    margin-block: 11.25rem 7.5rem;
  }
  .cinta{ animation-duration: 48s; }
  
  .navbar a{ font-size: 0.9375rem; }
  
  #contenedol {
    align-items: center;
    text-align: center;
  }
  
  #contenedol .forma{
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  .prismaticos {
    width: fit-content;
    margin-top: 15rem;
  }
}

@media (max-width: 480px){
  body{
    padding-inline: 0.75rem;
    overflow-x: hidden;
  }
  .oculto{
    display:none;
}
  
  
  header{
    min-height: auto;
    padding-top: 5.625rem;
    flex-direction: column;
    align-items: center;
  }
  
  .header-txt{
    margin-top: 0;
    margin-left: 0;
    text-align: center;
  }
  
  .header-txt h1{
    font-size: 2rem;
    word-break: break-word;
  }
  
  .header-txt p{
    width: 100%;
    font-size: 0.9375rem;
  }
  
  .menu .navbar ul{ flex-direction: column; }
  
  .article{ position: relative; width: 100%; }
  .article p{ max-width: 100%;}
 
  
  
  .imagen-blog,
  .imagen-blog-articulos{ width: 100%; }
  
  form{
    width: 100%;
    padding: 1.25rem;
  }
  
  .btn{ width: 100%; }
  
  .fila_reseñas{
    flex-direction: column;
    align-items: center;
  }
 .reseña {
     color: black;
 }
  
  .reseña{ width: 100%; }
  .footer{ width: 100%; }
}