/* ===== CHAT INTELIGENTE WHATSAPP ===== */
.wa-chat {
	background: var(--glass);
	border-radius: 12px;
	padding: 14px 10px;
	min-height: 80px;
	max-height: 180px;
	overflow-y: auto;
	margin-bottom: 12px;
	font-size: 15px;
}
.wa-msg {
	margin-bottom: 8px;
	padding: 8px 12px;
	border-radius: 10px;
	max-width: 90%;
	word-break: break-word;
}
.wa-bot {
	background: linear-gradient(90deg, var(--neon), #7ff0ff);
	color: #00131a;
	align-self: flex-start;
}
.wa-user {
	background: var(--card);
	color: var(--ink);
	align-self: flex-end;
	margin-left: auto;
}
.wa-form {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wa-options {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 6px;
}
.wa-options button {
	background: var(--glass);
	color: var(--muted);
	border: 1px solid var(--stroke);
	border-radius: 999px;
	padding: 7px 12px;
	cursor: pointer;
	font-size: 13px;
	transition: background .2s, color .2s;
}
.wa-options button:hover {
	background: linear-gradient(90deg, var(--neon), #7ff0ff);
	color: #00131a;
}
.wa-input {
	padding: 9px 12px;
	border-radius: 10px;
	border: 1px solid var(--stroke);
	background: var(--glass);
	color: var(--ink);
	font-size: 15px;
}
.wa-send {
	background: linear-gradient(90deg, var(--neon), #7ff0ff);
	color: #00131a;
	border: none;
	border-radius: 999px;
	padding: 10px 0;
	font-weight: bold;
	font-size: 15px;
	cursor: pointer;
	margin-top: 4px;
}
/* ===== MODAL WHATSAPP GUÍA INTELIGENTE ===== */
.wa-modal {
	display: none;
	position: fixed;
	z-index: 1200;
	left: 0; top: 0; width: 100vw; height: 100vh;
	background: rgba(10,20,30,0.92);
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
}
.wa-modal:target {
	display: flex;
}
.wa-modal-content {
	background: var(--card);
	border-radius: 18px;
	box-shadow: 0 8px 40px rgba(0,229,255,0.18);
	padding: 32px 28px 22px 28px;
	max-width: 340px;
	width: 100%;
	color: var(--ink);
	position: relative;
	text-align: left;
}
.wa-close {
	position: absolute;
	top: 16px;
	right: 18px;
	font-size: 2rem;
	background: none;
	border: none;
	color: var(--muted);
	cursor: pointer;
	font-weight: bold;
}
.wa-modal h3 {
	margin-top: 0;
	font-size: 1.2rem;
	margin-bottom: 18px;
}
.wa-questions {
	list-style: none;
	padding: 0;
	margin: 0 0 12px 0;
}
.wa-questions li {
	margin-bottom: 10px;
}
.wa-questions a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	background: var(--glass);
	color: var(--ink);
	text-decoration: none;
	font-weight: 500;
	transition: background .2s, color .2s;
}
.wa-questions a:hover {
	background: linear-gradient(90deg, var(--neon), #7ff0ff);
	color: #00131a;
}
.wa-note {
	color: var(--muted);
	font-size: 13px;
	margin-top: 10px;
}
.gallery-masonry video {
	width: 100%;
	border-radius: 12px;
	background: #000;
	box-shadow: 0 4px 24px rgba(0,0,0,0.13);
	margin-bottom: 0;
}
.gallery-masonry .card:hover video {
	box-shadow: 0 8px 32px rgba(0,229,255,0.18);
}
.gallery-lightbox video {
	max-width: 90vw;
	max-height: 80vh;
	border-radius: 18px;
	box-shadow: 0 8px 40px rgba(0,229,255,0.18);
	background: #000;
}
/* ===== GALERÍA MODERNA MASONRY Y FILTROS ===== */
.gallery-filters { margin: 10px 0 18px; }
.gallery-filters input { display: none; }
.gallery-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.pill { user-select: none; padding: 8px 14px; border: 1px solid var(--stroke); background: var(--card); border-radius: 999px; cursor: pointer; color: var(--muted); transition: background .2s, color .2s; }
#f-all:checked ~ .gallery-pills label[for="f-all"],
#f-techo:checked ~ .gallery-pills label[for="f-techo"],
#f-estructura:checked ~ .gallery-pills label[for="f-estructura"],
#f-piso:checked ~ .gallery-pills label[for="f-piso"] {
	color: #00131a; background: linear-gradient(90deg, var(--neon), #7ff0ff); border-color: transparent;
}

.gallery-masonry { column-count: 1; column-gap: 18px; }
@media (min-width:680px) { .gallery-masonry { column-count: 2; } }
@media (min-width:1024px) { .gallery-masonry { column-count: 3; } }
.gallery-masonry .card {
	break-inside: avoid; margin: 0 0 18px 0;
	border-radius: var(--radius);
	background: var(--card);
	border: 1px solid var(--stroke);
	box-shadow: var(--shadow);
	overflow: hidden; position:relative;
	outline: 1px solid color-mix(in oklab, var(--neon) 18%, transparent);
}
.gallery-masonry .thumb { position:relative; overflow:hidden; display:block; }
.gallery-masonry img { width:100%; height:auto; transform:scale(1.02); transition:transform .6s cubic-bezier(.2,.6,.2,1), filter .6s; border-radius: 12px; }
.gallery-masonry .card:hover img { transform:scale(1.06); box-shadow:0 8px 32px rgba(0,229,255,0.18); }
.gallery-masonry .card::after { content:''; position:absolute; inset:auto 0 0 0; height:2px; background:linear-gradient(90deg, transparent, var(--neon), transparent); opacity:.7; }
.gallery-masonry figcaption { padding:12px 14px; }
.gallery-masonry h3 { margin:0 0 6px; font-size:18px; }
.gallery-masonry small { color:var(--muted); }

/* Lightbox CSS-only */
.gallery-lightbox .zoom { display:none; position:fixed; z-index:1000; left:0; top:0; width:100vw; height:100vh; background:rgba(10,20,30,0.92); align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.gallery-lightbox .zoom:target { display:flex; align-items:center; justify-content:center; }
.gallery-lightbox img { max-width:90vw; max-height:80vh; border-radius:18px; box-shadow:0 8px 40px rgba(0,229,255,0.18); }
.gallery-lightbox .close { position:absolute; top:32px; right:48px; font-size:2.8rem; color:#fff; cursor:pointer; font-weight:bold; text-shadow:0 2px 12px #000; z-index:1100; text-decoration:none; }
/* GALERÍA MODERNA */
.gallery-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
	margin-bottom: 24px;
}
.gallery-thumb {
	border-radius: 14px;
	box-shadow: 0 4px 24px rgba(0,0,0,0.13);
	cursor: pointer;
	transition: transform 0.18s, box-shadow 0.18s;
	aspect-ratio: 4/3;
	object-fit: cover;
}
.gallery-thumb:hover {
	transform: scale(1.04) translateY(-4px);
	box-shadow: 0 8px 32px rgba(0,229,255,0.18);
	outline: 2px solid var(--neon);
}

/* LIGHTBOX */
.lightbox {
	display: none;
	position: fixed;
	z-index: 1000;
	left: 0; top: 0; width: 100vw; height: 100vh;
	background: rgba(10,20,30,0.92);
	align-items: center;
	justify-content: center;
	backdrop-filter: blur(2px);
}
.lightbox.active {
	display: flex;
}
.lightbox img {
	max-width: 90vw;
	max-height: 80vh;
	border-radius: 18px;
	box-shadow: 0 8px 40px rgba(0,229,255,0.18);
}
.lightbox-close {
	position: absolute;
	top: 32px;
	right: 48px;
	font-size: 2.8rem;
	color: #fff;
	cursor: pointer;
	font-weight: bold;
	text-shadow: 0 2px 12px #000;
	z-index: 1100;
}
/* ========== THEME TOKENS ========== */
:root{
	--bg:#0b0f14; --ink:#dbe7ff; --muted:#8aa0b6; --neon:#00e5ff; --brand:#f6b108;
	--card:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.12); --radius:16px; --shadow:0 8px 40px rgba(0,0,0,.35);
}
:root[data-theme="light"]{
	--bg:#f7fbff; --ink:#0c1a2a; --muted:#4a6177; --neon:#007b8a; --brand:#f6b108;
	--card:#ffffff; --stroke:#e3ecf5; --shadow:0 8px 36px rgba(8,25,41,.08);
}
*{box-sizing:border-box} html,body{height:100%}
body{
	margin:0; font-family:Manrope,system-ui,-apple-system,Segoe UI,Roboto;
	color:var(--ink); background:var(--bg);
	background-image:
		radial-gradient(1200px 600px at 80% -10%, rgba(0,229,255,.08), transparent 60%),
		radial-gradient(900px 600px at -10% 90%, rgba(246,177,8,.08), transparent 60%),
		linear-gradient(to bottom, rgba(255,255,255,.02), rgba(255,255,255,.01));
}
:root[data-theme="light"] body{background-image:none}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
.container{max-width:1200px; margin:auto; padding:0 20px}
button{font:inherit; cursor:pointer}

/* GRID BACKDROP */
.grid-bg{position:fixed; inset:0; pointer-events:none; opacity:.18; z-index:-1;
	background:linear-gradient(transparent 97%, var(--stroke) 98%) 0 0/ 26px 26px,
						 linear-gradient(90deg, transparent 97%, var(--stroke) 98%) 0 0/ 26px 26px}
:root[data-theme="light"] .grid-bg{opacity:.08}

/* NAV */
header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(130%) blur(8px);
	background:linear-gradient(180deg, rgba(8,12,18,.7), rgba(8,12,18,.35)); border-bottom:1px solid var(--stroke)}
:root[data-theme="light"] header{background:#ffffffcc}
.nav{height:72px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{width:42px; height:42px; border-radius:10px; object-fit:cover; box-shadow:0 0 0 2px rgba(255,255,255,.07)}
.brand b{letter-spacing:.4px}
.menu{display:flex; gap:22px; align-items:center}
.menu a{color:var(--muted)}
.menu a:hover{color:var(--ink)}
.btn{padding:10px 16px; border-radius:999px; border:1px solid var(--neon); color:#00131a; background:linear-gradient(90deg, var(--neon), #7ff0ff)}
.btn.ghost{border:1px solid var(--stroke); background:transparent; color:var(--ink)}
.burger{display:none; background:none; color:var(--ink); font-size:26px}
.switch{display:flex; align-items:center; gap:10px}
.select{appearance:none; padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); color:var(--ink)}
.theme{padding:8px 12px; border-radius:999px; border:1px solid var(--stroke); background:var(--card); color:var(--ink)}

/* HERO */
.hero{padding:70px 0 48px; position:relative; overflow:hidden}
.kicker{display:inline-flex; gap:8px; align-items:center; color:#00131a;
	background:linear-gradient(90deg, var(--brand), #ffd36a); padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px}
h1{font-size:clamp(32px, 5vw, 56px); line-height:1.02; margin:14px 0 10px; font-weight:800}
h1 .neon{color:var(--neon); text-shadow:0 0 16px rgba(0,229,255,.35)}
.hero-wrap{display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:center}
.hero p{color:var(--muted); max-width:60ch}
.cta{display:flex; gap:12px; margin-top:14px}
section{padding:52px 0}
h2{font-size:28px; margin:0 0 16px}
.lead{color:var(--muted); margin:-4px 0 16px}

/* CARDS */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.card{background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow)}
.card h3{margin:8px 0 6px; font-size:18px}
.badge{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:10px; color:#00131a;
	background:linear-gradient(90deg, var(--brand), #ffd36a); font-weight:800}

/* SERVICES */
.service .thumb{height:160px; border-radius:12px; overflow:hidden; margin-bottom:10px}
.service .thumb img{width:100%; height:100%; object-fit:cover}

/* GALLERY */

/* STEPS */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.step{position:relative; padding:18px; background:var(--card); border:1px solid var(--stroke); border-radius:var(--radius)}
.step:before{content:attr(data-num); position:absolute; top:-12px; right:12px; font-weight:800; color:var(--neon); text-shadow:0 0 12px rgba(0,229,255,.35)}

/* CONTACT */
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
input,textarea{width:100%; padding:12px 14px; color:var(--ink); background:rgba(255,255,255,.04);
	border:1px solid var(--stroke); border-radius:12px; outline:none}
:root[data-theme="light"] input,:root[data-theme="light"] textarea{background:#fff}
textarea{grid-column:1/-1; min-height:120px; resize:vertical}
.send{grid-column:1/-1; padding:12px 16px; border-radius:12px; border:1px solid var(--neon);
	background:linear-gradient(90deg, var(--neon), #7ff0ff); color:#00131a; font-weight:800}

/* FOOTER */
footer{border-top:1px solid var(--stroke); padding:26px 0; color:var(--muted)}
.foot{display:flex; align-items:center; justify-content:space-between; gap:12px}
.foot .brand img{width:36px; height:36px}

/* WHATSAPP FAB */
.fab{position:fixed; right:18px; bottom:18px; width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
	color:#fff; background:#25D366; box-shadow:0 14px 30px rgba(0,0,0,.35); z-index:10}

/* REVEAL */
.reveal{opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease}
.reveal.show{opacity:1; transform:none}

/* MOBILE */
@media (max-width: 960px){
  .hero-wrap{grid-template-columns:1fr}
  .cards, .steps{grid-template-columns:1fr}
  .menu{display:none; position:absolute; right:16px; top:72px; background:rgba(10,14,20,.98); border:1px solid var(--stroke);
    padding:12px; border-radius:12px; flex-direction:column}
  :root[data-theme="light"] .menu{background:#fff}
  .burger{display:block}
  .form{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
	.scan{animation:none}
	.reveal{transition:none}
}
/* MEJORAS RESPONSIVE PARA TELÉFONOS MODERNOS */
@media (max-width: 600px) {
	body, .container {
		padding: 0 6px !important;
	}
	h1 {
		font-size: 2rem;
		margin-top: 10px;
	}
	h2 {
		font-size: 1.2rem;
		margin-bottom: 10px;
	}
	.hero {
		padding: 38px 0 24px;
	}
	.gallery-masonry {
		column-count: 1 !important;
		column-gap: 10px;
	}
	.gallery-masonry .card {
		margin-bottom: 12px;
		border-radius: 12px;
	}
	.gallery-pills {
		gap: 6px;
		font-size: 13px;
	}
	.pill {
		padding: 6px 10px;
		font-size: 13px;
	}
	.wa-modal-content {
		max-width: 98vw;
		padding: 18px 6px 12px 6px;
		border-radius: 12px;
	}
	.wa-chat {
		font-size: 14px;
		min-height: 60px;
		max-height: 120px;
		padding: 8px 4px;
	}
	.wa-options button, .wa-send {
		font-size: 13px;
		padding: 8px 0;
	}
	.wa-input {
		font-size: 14px;
		padding: 7px 8px;
	}
	.wa-close {
		top: 8px;
		right: 10px;
		font-size: 1.5rem;
	}
	.cards, .steps {
		gap: 10px;
	}
	.card, .step {
		padding: 10px;
		border-radius: 10px;
	}
	.service .thumb {
		height: 100px;
		border-radius: 8px;
	}
	.form input, .form textarea {
		font-size: 14px;
		padding: 8px 10px;
		border-radius: 8px;
	}
	.send {
		padding: 10px 12px;
		font-size: 15px;
		border-radius: 8px;
	}
	footer {
		padding: 16px 0;
		font-size: 13px;
	}
	.foot {
		flex-direction: column;
		gap: 6px;
		text-align: center;
	}
	.foot .brand img {
		width: 28px;
		height: 28px;
	}
	.fab {
		width: 44px;
		height: 44px;
		right: 10px;
		bottom: 10px;
	}
}