:root {
  --bg: #0c1118;
  --bg-soft: #131b26;
  --card: #182230;
  --primary: #ff2a2abe;
  --accent: #45e0b0;
  --text: #f1f5fb;
  --muted: #b6c4d8;
  --danger: #ff6b6b;
}

/* HERO INMOTIKA */

.hero{
  position: relative;
  height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("imagenes/back.jpg"); /* imagen domótica */
  background-size: cover;
  background-position: center;

  font-family: 'Montserrat', sans-serif;
}

/* capa oscura para mejorar lectura */

.hero-overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}

/* contenido */

.hero-content{
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 900px;
  padding: 20px;
}

/* titulo */

.hero h1{
  font-size: 60px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 20px;
}

/* texto */

.hero p{
  font-size: 18px;
  color: var(--muted);
  margin-bottom: 35px;
}

/* botón */

.hero-btn{
  display: inline-block;
  background: var(--primary);
  color: white;
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.hero-btn:hover{
  background: var(--accent);
  transform: translateY(-3px);
}

/* responsive */

@media (max-width:900px){

.hero h1{
font-size:38px;
}

.hero p{
font-size:16px;
}

}

/* SECCION WHY INMOTIKA */

.why-inmotika{
  padding:100px 20px;
  background:var(--bg-soft);
}

.why-grid{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
  align-items:center;
}

/* IMAGEN */

.why-image img{
  width:100%;
  max-width:450px;
}

/* CONTENIDO */

.why-content h2{
  font-size:36px;
  margin-bottom:20px;
  color:var(--text);
}

.why-sub{
  color:var(--muted);
  margin-bottom:30px;
  font-size:16px;
}

/* LISTA */

.why-list{
  list-style:none;
  padding:0;
}

.why-list li{
  margin-bottom:18px;
  color:var(--text);
  position:relative;
  padding-left:25px;
  line-height:1.5;
}

.why-list li::before{
  content:"›";
  position:absolute;
  left:0;
  color:var(--accent);
  font-size:22px;
  font-weight:700;
}

/* RESPONSIVE */

@media (max-width:900px){

.why-grid{
grid-template-columns:1fr;
text-align:center;
}

.why-image{
order:-1;
}

.why-image img{
margin:auto;
}


}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: "Montserrat", sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; }
img { width: 100%; display: block; }
.container { width: min(1140px, 92%); margin: 0 auto; }
.section { padding: 92px 0; }
.eyebrow { color: var(--accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .6rem; }
h1, h2, h3 { line-height: 1.2; margin-bottom: .9rem; }
p { color: var(--muted); }

.page-loader { position: fixed; inset: 0; background: #070b11; display: grid; place-items: center; z-index: 3000; transition: opacity .5s ease, visibility .5s ease; }
.page-loader.hide { opacity: 0; visibility: hidden; }
.loader-content { text-align: center; animation: zoomIn .8s ease; }
.loader-spinner { width: 62px; height: 62px; border: 3px solid rgba(255,255,255,.2); border-top-color: var(--primary); border-radius: 50%; margin: 0 auto 1rem; animation: spin 1s linear infinite; }
.logo-image { display: block; height: auto; }
.logo-loader { width: clamp(220px, 42vw, 370px); filter: drop-shadow(0 6px 16px rgba(0,0,0,.5)); }
.logo-header { width: 170px; }

.header { position: fixed; top: 0; width: 100%; z-index: 1000; background: rgba(8, 12, 18, .76); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(255,255,255,.09); }
.nav-wrapper { min-height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-menu { display: flex; gap: 1rem; }
.nav-menu a { color: var(--text); text-decoration: none; font-size: .95rem; transition: color .25s ease; }
.nav-menu a:hover { color: var(--accent); }
.social-icons { display: flex; gap: .55rem; }
.social-icons a { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.3); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text); transition: transform .25s ease, background .25s ease, color .25s ease; }
.social-icons a:hover { transform: translateY(-2px); background: var(--primary); color: #001424; }
.social-icons svg { width: 16px; height: 16px; fill: currentColor; }
.menu-toggle { display: none; background: transparent; border: none; cursor: pointer; }
.menu-toggle span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; }

.hero-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
.eyebrow { color:var(--accent); text-transform:uppercase; letter-spacing:.11em; font-size:.78rem; }
h1 { font-size:clamp(1.8rem,4vw,3rem); margin:.4rem 0 1rem; }
.btn { border:0; border-radius:999px; padding:.75rem 1.2rem; background:linear-gradient(130deg,var(--primary),#0079ff); color:#fff; text-decoration:none; cursor:pointer; }
.btn-secondary { background: rgba(255,255,255,.12); }

.carousel { margin-top:1rem; position:relative; height:min(44vh,380px); border-radius:14px; overflow:hidden; box-shadow:0 16px 30px rgba(0,0,0,.35); }
.slides { height:100%; position:relative; }
.slide { position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transform:scale(1.03); transition:opacity .7s ease, transform .9s ease; }
.slide.active { opacity:1; transform:scale(1); }
.carousel-btn { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border:0; border-radius:50%; background:rgba(4,10,18,.74); color:#fff; cursor:pointer; }
.prev { left:10px; } .next { right:10px; }
.carousel-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.carousel-dots button { width:10px; height:10px; border-radius:50%; border:0; background:rgba(255,255,255,.5); }
.carousel-dots button.active { background:var(--accent); }

.cards-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin:1rem 0; }
.info-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.09); border-radius:14px; padding:1rem; }

.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1rem; }
.service-card { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; overflow:hidden; transition:.25s; cursor:pointer; }
.service-card:hover { transform:translateY(-6px); border-color:var(--primary); }
.service-card img { width:100%; height:160px; object-fit:cover; }
.service-body { padding:1rem; }
.price { color:var(--accent); font-weight:700; }

.modal { position:fixed; inset:0; background:rgba(0,0,0,.65); opacity:0; pointer-events:none; display:grid; place-items:center; transition:.25s; z-index:900; }
.modal.open { opacity:1; pointer-events:auto; }
.modal-box { width:min(760px,92vw); background:#0b1827; border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:1rem; position:relative; }
.modal-close { position:absolute; top:8px; right:10px; border:0; background:none; color:#fff; font-size:1.6rem; cursor:pointer; }
.modal-box img { width:100%; max-height:320px; object-fit:cover; border-radius:10px; }

.cart-list { display:grid; gap:.7rem; }
.cart-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:1rem; }
.cart-actions { display:flex; justify-content:space-between; align-items:center; margin-top:1rem; flex-wrap:wrap; }
.row { display:flex; gap:6px; align-items:center; }
.row button { border:0; border-radius:8px; padding:.3rem .6rem; background:rgba(255,255,255,.12); color:#fff; cursor:pointer; }

/* SECCION CONTACTO */

.contact-section{

min-height:100vh;

display:flex;
align-items:center;
justify-content:center;

padding:120px 20px;

background:

linear-gradient(
180deg,
#0b0f16 0%,
#0d1524 100%
);

}


/* CONTENEDOR */

.contact-container{

width:100%;
max-width:850px;

background:rgba(255,255,255,0.03);

backdrop-filter:blur(15px);

border-radius:18px;

padding:50px 40px;

box-shadow:

0 10px 40px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.05);

}


/* TITULO */

.contact-header{

text-align:center;

margin-bottom:40px;

}

.contact-header h1{

font-size:38px;
margin-bottom:10px;

}

.contact-subtitle{

color:#9ca3af;

max-width:500px;

margin:auto;

}


/* GRID FORM */

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

margin-bottom:20px;

}

.full-width{

display:block;

margin-bottom:20px;

}


/* LABEL */

.contact-form label{

display:flex;
flex-direction:column;

font-size:14px;

color:#cbd5e1;

}


/* INPUTS */

.contact-form input,
.contact-form select,
.contact-form textarea{

margin-top:6px;

padding:12px 14px;

border-radius:10px;

border:1px solid rgba(255,255,255,0.1);

background:#0b111b;

color:white;

font-size:14px;

transition:all .25s;

}


/* EFECTO FOCUS */

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{

outline:none;

border-color:#2aa7ff;

box-shadow:0 0 0 2px rgba(42,167,255,0.25);

}


/* BOTON */

.btn-contact{

width:100%;

margin-top:10px;

padding:14px;

border:none;

border-radius:12px;

background:linear-gradient(
90deg,
#8f0202,
#8f0202
);

color:white;

font-weight:600;

font-size:16px;

cursor:pointer;

transition:all .3s;

}

.btn-contact:hover{

transform:translateY(-2px);

box-shadow:0 10px 25px rgba(0,0,0,0.5);

}


/* MENSAJE */

#formMsg{

margin-top:15px;

text-align:center;

font-size:14px;

}


/* RESPONSIVE */

@media (max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.contact-container{

padding:40px 25px;

}

.contact-header h1{

font-size:30px;

}

}
.reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

@keyframes spin { to { transform:rotate(360deg); } }
@keyframes fadeZoom { from { opacity:0; transform:scale(.9);} to {opacity:1; transform:scale(1);} }

@media (max-width: 960px) {
  .menu-toggle { display:block; cursor:pointer; }
  .main-nav { position:absolute; top:72px; right:4%; width:min(280px,90vw); flex-direction:column; align-items:flex-start; padding:1rem; background:rgba(7,19,31,.97); border:1px solid rgba(255,255,255,.08); border-radius:12px; opacity:0; pointer-events:none; transform:scale(.95); transition:.3s; }
  .main-nav.open { opacity:1; pointer-events:auto; transform:scale(1); }
  .social-icons { display:none; }
}

@media (max-width: 980px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
  .menu-toggle { display: block; }
  .nav-menu { position: absolute; top: 80px; right: 4%; background: #0f1824; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; padding: .85rem; flex-direction: column; min-width: 210px; opacity: 0; pointer-events: none; transform: scale(.96); transition: .2s ease; }
  .nav-menu.open { opacity: 1; pointer-events: auto; transform: scale(1); }
  .social-icons { display: none; }
}

@media (max-width: 680px) {
  .section { padding: 76px 0; }
  .services-grid { grid-template-columns: 1fr; }
  .carousel { grid-template-columns: 1fr; }
  .carousel-btn { justify-self: center; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes zoomIn { from { transform: scale(.85); opacity: .4; } to { transform: scale(1); opacity: 1; } }