/* ==============================================================
   Telura Technology – Estilos mejorados (v2.0)
============================================================== */

/* 1. Variables de color */
:root {
    /* Paleta corporativa */
    --color-bg-base:#7070BD; /* #3F5F9E;            /* Gris oscuro, más claro que antes */
    --color-primary: #0066FF;
    --color-secondary: #0044CC;
    --color-accent: #EDCF07; /*#00BFFF; */
    --color-text: #fff;
	--color-textmenu: #5461AB;
    --color-muted: #AFAFB3; /*#bbb;*/
	--color-button-primary: #526175; /*#9EAEDE; */
    --color-button-secondary: #6A6A85; /* #D5DCF5;	*/
	--size-carrusel : 350px;
}

/* 2. Reset y tipografía */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; line-height: 1.5; }
body {
    background-color: rgba(255, 255, 255,0.4); 
    background-image: url('../assets/bg_bn.jpg'); /* Imagen de fondo */
    background-size: auto;
    background-position: top; 
    background-attachment: fixed; 
    color: var(--color-text); 
    min-height: 100vh;
    font-family: 'Inter', sans-serif;
    position: relative;
}
body::before {                 /* Overlay para legibilidad */
    content:"";
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:rgba(0,0,0,.55);

}

/* 3. Contenedor genérico */
.container{max-width:1200px;margin-inline:auto;padding-inline:1rem;position:relative;z-index:2;}
.subcontainer{max-width:1200px;display: flex;margin-inline:5px;padding-inline:1rem;position:relative;z-index:2;}

/* 4. Tipografía */
h1,h2,h3{font-weight:600;line-height:1.2;}
h1{font-size:2.5rem;}
h2{font-size:2rem;margin-top:1.5rem;}
h3{font-size:1.75rem;margin-bottom:.75rem;}

/* 5. Botones */
.btn-primary{
    display:inline-block;background-color:var(--color-button-primary);
    color:var(--color-text);padding:.75rem 1.5rem;border-radius:4px;
    text-decoration:none;transition:background .3s ease;
	justify-content: center;
}
.btn-primary:hover{background-color:var(--color-button-secondary);}

.btn-primary img {
	display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center;    /* Centra verticalmente */
    gap: 10px;  	
}

/* 6. Header + Banner */
.site-header{
    background:#fff;
    padding-block:.75rem;
    border-bottom:2px solid var(--color-accent);
    position:relative; z-index:3;
}
.banner-logo{
    text-align:center;margin-bottom:.5rem;
}
.banner-logo img{height:120px;}
nav ul{list-style:none;display:flex;font-size:1rem;justify-content:center;gap:1rem;}
nav a{color:var(--color-textmenu);text-decoration:none;transition:color .3s ease;}
nav a:hover{color:var(--color-accent);}

/* 7. Sección Hero */
.hero-section{
    padding-block:2rem 2rem;
    text-align:center;
    position:relative;
}
.hero-section h2{margin-bottom:.5rem;}
.hero-section p{margin-bottom:1.5rem;font-size:1.125rem;}

/* 8. Sección de servicios + adornos tecnológicos */
.service-section{
    padding-block:3rem 2rem;
    border-top:1px solid var(--color-muted);
    position:relative;
}
.service-section:nth-child(even){background-color:rgba(255, 255, 255,0.2);} /*var(--color-button-secondary);}/* Adornos SVG */
.service-section::before{
    content:"";
    position:absolute;top:-30px;right:-30px;
    width:80px;height:80px;
    background:url('../assets/icons/circuit.svg') no-repeat center / contain;
    opacity:.15;
}

/* 9. Formulario contacto */
.contact-section form{display:grid;gap:1rem;max-width:500px;margin-inline:auto;}
label{font-weight:600;}
input,textarea{
    width:100%;padding:1rem;border-radius:4px;border:none;
    background-color:#fff;color:var(--color-text);
}
textarea{resize:vertical;}

/* 10. Footer */
.site-footer{text-align:center;padding-block:1rem;background-color:#000;font-size:.875rem;color:var(--color-muted);position:relative;z-index:3;}

/* ==============================================================
   Media Queries – Responsividad
============================================================== */

@media (max-width:768px){
    nav ul{flex-direction:column;}
    .hero-section h2{font-size:1.75rem;}
}

.img-prin1{
	
	background-color: rgba(0, 0, 0, 0.6); /* Negro con 60% de opacidad */
	color: #fff;
	padding: 5px;	
	opacity: 0.5;
	border-radius: 10px;
	width:280px;height:180px;
	
}
.img-prin2{
	
    background-color: hsla(200, 100%, 10%, 0.5); /* Azul con 40% de opacidad */
    color: #fff;
    padding: 5px;
	opacity: 0.8;
  	border-radius: 10px;
	width:300px;height:300px;
	
}

.img-prin-sec{
	
	background-color: rgba(0, 0, 0, 0.6); /* Negro con 60% de opacidad */
	color: #fff;
	padding: 5px;	
	opacity: 0.7;
	border-radius: 10px;
	width:200px;height:200px;
	
}

.carousel-container {
  position: relative;
  width: var(--size-carrusel);
  max-width: var(--size-carrusel);
  margin: auto;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-slide {
  display: flex;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  
  width: var(--size-carrusel); /* 10 imágenes */
}

.carousel-slide img {
  width: var(--size-carrusel);
  height: var(--size-carrusel);
  flex-shrink: 0;
}

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 40px;
  color: white;
  background: rgba(0,0,0,0.3);
  border: none;
  cursor: pointer;
  padding: 10px 20px;
  z-index: 5;
}

.carousel-btn:hover {
  background: rgba(0,0,0,0.7);
}

.prev {
  left: 10px;
}

.next {
  right: 10px;
}

.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.dot.active {
  background-color: white;
}