/* =========================================================
   QM Proyectos – main.css
   Paleta y tipografía tomadas de la web original (Betheme)
   ========================================================= */
:root {
	--qm-text: #6c6b70;
	--qm-accent: #025479;
	--qm-dark: #404040;
	--qm-bg: #fcfcfc;
	--qm-soft: #f3f3f3;          /* rgba(64,64,64,.04) sobre #fcfcfc */
	--qm-muted: #a8a8a8;
	--qm-white: #fff;
	--qm-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--qm-header-h: 90px;
	--qm-container: 1220px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--qm-font);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.6;
	color: var(--qm-text);
	background: var(--qm-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--qm-accent); text-decoration: none; }
h1, h2, h3, h4 { color: var(--qm-text); margin: 0 0 .6em; line-height: 1.2; }
h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 300; text-transform: uppercase; }
h2 { font-size: clamp(20px, 2.6vw, 29px); font-weight: 200; }
h3 { font-size: clamp(18px, 2vw, 24px); font-weight: 200; }
h4 { font-size: 21px; font-weight: 500; }
p { margin: 0 0 1em; line-height: 1.6; }
strong { font-weight: 700; }
.center { text-align: center; }

.container { width: 100%; max-width: var(--qm-container); margin: 0 auto; padding: 0 20px; }
.container.narrow { max-width: 860px; }

.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 10px; top: 10px; z-index: 9999; background: #fff; padding: 8px 12px; }

/* ---------- Botones ---------- */
.btn-dark, .btn-light {
	display: inline-block;
	padding: 12px 30px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	transition: background .25s, color .25s;
}
.btn-dark { background: rgba(0,0,0,.75); color: #fff; }
.btn-dark:hover { background: #fff; color: #000; }
.about .btn-dark { background: var(--qm-dark); border-radius: 4px; }
.about .btn-dark:hover { background: var(--qm-accent); color: #fff; }
.btn-light { background: #fff; color: var(--qm-dark); }
.btn-light:hover { background: var(--qm-accent); color: #fff; }

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--qm-white);
	box-shadow: 0 2px 5px rgba(0,0,0,.06);
}
.header-inner { display: flex; align-items: center; justify-content: space-between; height: var(--qm-header-h); }
.site-logo img { height: 60px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 28px; }
.qm-menu, .header-social { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; }
.qm-menu { gap: 34px; }
.qm-menu > li { position: relative; }
.qm-menu > li > a {
	display: flex; align-items: center; gap: 6px;
	height: var(--qm-header-h);
	font-size: 15px; font-weight: 500; letter-spacing: .3px;
	color: var(--qm-text);
	transition: color .2s;
}
.qm-menu > li.menu-item-has-children > a::after {
	content: ""; border: 4px solid transparent; border-top-color: currentColor; margin-top: 4px;
}
.qm-menu > li > a:hover,
.qm-menu > li.current-menu-item > a,
.qm-menu > li.current-menu-ancestor > a { color: #000; }

.qm-menu .sub-menu {
	list-style: none; margin: 0; padding: 8px 0;
	position: absolute; top: 100%; left: -16px; min-width: 240px;
	background: #f2f2f2;
	box-shadow: 0 8px 20px rgba(0,0,0,.08);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: all .2s;
}
.qm-menu li:hover > .sub-menu,
.qm-menu li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.qm-menu .sub-menu a { display: block; padding: 10px 18px; font-size: 14px; color: var(--qm-text); }
.qm-menu .sub-menu a:hover { color: #2e2e2e; background: #e9e9e9; }

.header-social { gap: 14px; }
.header-social a, .footer-social a { display: block; width: 20px; height: 20px; color: var(--qm-text); transition: color .2s; }
.header-social a:hover, .footer-social a:hover { color: var(--qm-accent); }
.header-social svg, .footer-social svg { width: 100%; height: 100%; fill: currentColor; }

.nav-toggle {
	display: none; background: none; border: 0; padding: 10px; cursor: pointer;
	flex-direction: column; gap: 5px;
}
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--qm-text); transition: transform .25s, opacity .25s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO / SLIDER
   ========================================================= */
.hero {
	position: relative;
	height: min(calc(100vh - var(--qm-header-h)), 780px);
	min-height: 480px;
	overflow: hidden;
	background: #222;
}
.hero-slide {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .8s ease;
}
.hero-slide.is-active { opacity: 1; z-index: 1; }
.hero-slide img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover;
	filter: contrast(.95) saturate(1.1) brightness(1.02); /* aproximación del filtro "hudson" */
}
.hero-slide::after { /* leve degradado para legibilidad */
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 55%);
}
.hero-content {
	position: relative; z-index: 2; height: 100%;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	padding-left: clamp(20px, 10vw, 160px);
}
.hero-title {
	max-width: 680px;
	margin: 0 0 40px;
	font-size: clamp(38px, 5.5vw, 80px);
	line-height: .9;
	font-weight: 700;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 2px 18px rgba(0,0,0,.25);
	transform: translateY(20px); opacity: 0;
	transition: transform .8s .2s, opacity .8s .2s;
}
.hero-slide.is-active .hero-title { transform: none; opacity: 1; }

.hero-arrow {
	position: absolute; top: 50%; z-index: 3; transform: translateY(-50%);
	width: 50px; height: 50px; border: 0; background: transparent; cursor: pointer;
	color: #fff; opacity: .85; transition: opacity .2s;
}
.hero-arrow:hover { opacity: 1; }
.hero-arrow svg { width: 40px; height: 40px; }
.hero-arrow.prev { left: 20px; }
.hero-arrow.next { right: 20px; }

.hero-dots {
	position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3;
	display: flex; gap: 12px;
}
.hero-dots button {
	width: 11px; height: 11px; padding: 0; border-radius: 50%; cursor: pointer;
	border: 2px solid var(--qm-dark); background: transparent; transition: background .25s, transform .25s;
}
.hero-dots button[aria-selected="true"] { background: var(--qm-dark); transform: scale(1.2); }

/* =========================================================
   INTRO
   ========================================================= */
.intro { padding: 64px 0 100px; text-align: center; }
.intro p { font-size: 15px; max-width: 720px; margin-left: auto; margin-right: auto; }
.intro h3 { margin-top: 1.4em; }

/* =========================================================
   CATEGORÍAS (trailer boxes)
   ========================================================= */
.cats {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0 2%;
	padding: 0 5% 80px;
}
.cat-card { display: block; color: var(--qm-text); }
.cat-img { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #e8e8e8; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.cat-card:hover .cat-img img { transform: scale(1.06); }
.cat-card h2 {
	margin: 18px 0 8px;
	font-size: clamp(15px, 1.5vw, 22px);
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: .5px;
	transition: color .2s;
}
.cat-line { display: block; width: 40px; height: 2px; background: var(--qm-accent); transition: width .35s; }
.cat-card:hover h2 { color: var(--qm-accent); }
.cat-card:hover .cat-line { width: 100%; }

/* =========================================================
   NOSOTROS
   ========================================================= */
.about { background: var(--qm-soft); padding: 40px 0 60px; text-align: center; }
.fancy-heading { text-align: center; margin-bottom: 24px; }
.fh-icon { display: block; width: 2px; height: 40px; margin: 0 auto 16px; background: var(--qm-accent); }
.fancy-heading h2 { font-size: clamp(26px, 3vw, 38px); text-transform: uppercase; letter-spacing: 1px; }
.about .container h2 { margin-top: .8em; }
.about p { font-size: 15px; }
.about .btn-dark { margin-top: 10px; }

/* =========================================================
   BANDA OSCURA
   ========================================================= */
.band { background: var(--qm-dark); padding: 50px 0; color: #fff; }
.band-inner { display: flex; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.band p { margin: 0; font-size: clamp(18px, 2vw, 24px); font-weight: 300; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer { background: #fff; padding: 40px 0 20px; }
.footer-grid { display: flex; justify-content: center; }
.footer-col { padding: 0 40px; min-width: 240px; }
.footer-col + .footer-col { border-left: 1px solid var(--qm-text); }
.site-footer h4 { font-size: 21px; font-weight: 500; margin-bottom: 18px; }
.site-footer h4 a { color: var(--qm-text); }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links a { font-size: 14px; line-height: 2; color: var(--qm-text); }
.footer-links a:hover, .site-footer h4 a:hover { color: var(--qm-accent); }
.footer-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 24px; max-width: 320px; }
.footer-partners img { max-width: 100px; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.footer-partners img.sm { max-width: 70px; }
.footer-partners a:hover img { filter: none; opacity: 1; }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 15px; }
.footer-social a { width: 26px; height: 26px; }
.footer-copy { text-align: center; font-size: 12px; color: var(--qm-muted); margin: 30px 0 0; }

.back-to-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 50;
	width: 42px; height: 42px; display: grid; place-items: center;
	background: rgba(64,64,64,.85); color: #fff; border-radius: 50%;
	opacity: 0; pointer-events: none; transition: opacity .3s;
}
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top.show { opacity: 1; pointer-events: auto; }

/* =========================================================
   PÁGINAS INTERNAS / BLOG
   ========================================================= */
.page-head { background: #f7f7f7; padding: 50px 0; text-align: center; }
.page-head h1 { font-size: clamp(22px, 3vw, 30px); font-weight: 500; letter-spacing: 1px; margin: 0; }
.page-head time { font-size: 13px; color: var(--qm-muted); }
.entry { padding-top: 50px; padding-bottom: 70px; }
.entry img { margin: 20px auto; }
.entry-thumb { margin-bottom: 30px; }
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; padding-top: 50px; padding-bottom: 30px; }
.post-card { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.post-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.post-body { padding: 20px; }
.post-body time { font-size: 12px; color: var(--qm-muted); }
.post-body h2 { font-size: 20px; font-weight: 500; margin: 6px 0 10px; }
.post-body h2 a { color: var(--qm-text); }
.post-body h2 a:hover { color: var(--qm-accent); }
.pager { padding-bottom: 60px; text-align: center; }
.pager .page-numbers { display: inline-block; padding: 6px 12px; margin: 0 2px; color: var(--qm-text); }
.pager .page-numbers.current { background: var(--qm-accent); color: #fff; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1239px) {
	:root { --qm-header-h: 70px; }
	.site-logo img { height: 46px; }
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed; top: var(--qm-header-h); right: 0; bottom: 0;
		width: min(300px, 85vw);
		flex-direction: column; align-items: stretch; gap: 0;
		background: var(--qm-text); padding: 10px 0 30px;
		transform: translateX(100%); transition: transform .3s ease;
		overflow-y: auto;
	}
	.site-nav.is-open { transform: none; }
	.qm-menu { flex-direction: column; align-items: stretch; gap: 0; }
	.qm-menu > li > a { height: auto; padding: 14px 25px; color: #d0d0d0; }
	.qm-menu > li > a:hover { color: #fff; }
	.qm-menu .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; background: rgba(0,0,0,.12); display: none; padding: 0;
	}
	.qm-menu li.open > .sub-menu { display: block; }
	.qm-menu .sub-menu a { color: #c8c8c8; padding: 12px 35px; }
	.qm-menu .sub-menu a:hover { background: transparent; color: #fff; }
	.header-social { padding: 20px 25px 0; }
	.header-social a { color: #d0d0d0; }

	.cats { grid-template-columns: repeat(3, 1fr); gap: 30px 4%; }
}
@media (max-width: 767px) {
	.hero { height: 72vh; min-height: 420px; }
	.hero-content { padding-left: 30px; padding-right: 30px; }
	.hero-title { font-size: clamp(34px, 11vw, 52px); margin-bottom: 28px; }
	.hero-arrow { display: none; }
	.intro { padding: 40px 0 50px; }
	.cats { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; padding: 0 20px 50px; }
	.footer-grid { flex-direction: column; align-items: center; text-align: center; gap: 30px; }
	.footer-col { padding: 0; }
	.footer-col + .footer-col { border-left: 0; }
	.footer-partners { display: none; } /* igual que la web original */
	.footer-social { justify-content: center; }
}
@media (max-width: 359px) {
	.cats { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* =========================================================
   v1.1 – PÁGINAS INTERNAS
   ========================================================= */
.page-hero {
	position: relative; padding: 70px 0; text-align: center;
	background: #f7f7f7 center / cover no-repeat;
}
.page-hero h1 { margin: 0; font-size: clamp(24px, 3.4vw, 40px); font-weight: 300; letter-spacing: 1px; }
.page-hero p { margin: 12px auto 0; max-width: 720px; font-size: 16px; }
.page-hero.has-img { padding: clamp(90px, 14vw, 170px) 0; color: #fff; }
.page-hero.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,.25)); }
.page-hero.has-img .container { position: relative; }
.page-hero.has-img h1, .page-hero.has-img p { color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.35); }

.entry { font-size: 15px; }
.entry h2 { margin-top: 1.6em; }
.entry h2:first-child, .entry > *:first-child { margin-top: 0; }
.entry ul { padding-left: 1.2em; }
.entry .lead, .lead { font-size: 17px; line-height: 1.7; }
.entry iframe { width: 100%; border: 0; }

.qm-section { padding: 60px 0; }
.qm-section.alt, .projects-section.alt { background: var(--qm-soft); }
.btn-outline {
	display: inline-block; padding: 11px 28px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
	border: 2px solid var(--qm-dark); color: var(--qm-dark); border-radius: 4px; transition: all .2s;
}
.btn-outline:hover { background: var(--qm-dark); color: #fff; }
.project-nav { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }

/* Cuadrícula de proyectos */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 26px; margin: 10px 0 40px; }
.project-card { display: block; background: #fff; color: var(--qm-text); box-shadow: 0 2px 12px rgba(0,0,0,.06); transition: transform .3s, box-shadow .3s; }
.project-card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.project-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e8e8e8; }
.project-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.project-card:hover .project-img img { transform: scale(1.06); }
.project-body { display: block; padding: 16px 18px 18px; }
.project-body h3 { margin: 0 0 6px; font-size: 17px; font-weight: 500; text-transform: uppercase; letter-spacing: .3px; }
.project-more { font-size: 13px; color: var(--qm-accent); font-weight: 500; }

/* Bloques reutilizables dentro del contenido */
.qm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; margin: 40px 0; }
.qm-split img { width: 100%; height: auto; }
.qm-features, .qm-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 30px 0 40px; }
.qm-values { grid-template-columns: repeat(5, 1fr); }
.qm-feature, .qm-value { background: #fff; padding: 26px 22px; box-shadow: 0 2px 12px rgba(0,0,0,.05); border-top: 3px solid var(--qm-accent); }
.qm-value { text-align: center; }
.qm-feature h3, .qm-value h3 { font-size: 17px; font-weight: 600; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .4px; }
.qm-feature p, .qm-value p { margin: 0; font-size: 14px; }
.qm-icon { display: block; width: 38px; height: 38px; margin-bottom: 14px; color: var(--qm-accent); }
.qm-value .qm-icon { margin: 0 auto 14px; }
.qm-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.6; }

.qm-specs { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin: 30px 0 40px; }
.qm-spec { background: var(--qm-dark); color: #e6e6e6; padding: 24px 22px; }
.qm-spec h3 { color: #fff; font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.qm-spec .serie { display: block; color: #9fc6db; font-size: 13px; margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px; }
.qm-spec ul { list-style: none; padding: 0; margin: 0; font-size: 13px; line-height: 1.8; }
.qm-spec li strong { color: #fff; font-weight: 600; }

.wp-block-gallery.has-nested-images, .qm-gallery { gap: 10px !important; }
.qm-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin: 20px 0 40px; }
.qm-gallery img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }

/* Contacto */
.qm-contact { display: grid; grid-template-columns: 1fr 1.2fr; gap: 40px; margin: 10px 0 40px; }
.qm-contact-info { list-style: none; padding: 0; margin: 0 0 24px; }
.qm-contact-info li { padding: 10px 0; border-bottom: 1px solid #e5e5e5; font-size: 15px; }
.qm-contact-info strong { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .8px; color: var(--qm-muted); }
.wpcf7 input:not([type=submit]), .wpcf7 textarea, .wpcf7 select {
	width: 100%; padding: 12px 14px; border: 1px solid #ddd; background: #fff; font: inherit; font-size: 15px; color: var(--qm-text);
}
.wpcf7 input:focus, .wpcf7 textarea:focus { outline: 2px solid var(--qm-accent); outline-offset: 0; border-color: transparent; }
.wpcf7 p { margin: 0 0 14px; }
.wpcf7 input[type=submit] {
	background: var(--qm-dark); color: #fff; border: 0; padding: 13px 34px; font-weight: 700; text-transform: uppercase;
	letter-spacing: .5px; cursor: pointer; border-radius: 4px; transition: background .2s;
}
.wpcf7 input[type=submit]:hover { background: var(--qm-accent); }

@media (max-width: 959px) {
	.qm-split, .qm-contact { grid-template-columns: 1fr; }
	.qm-features { grid-template-columns: repeat(2, 1fr); }
	.qm-values { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.qm-features, .qm-values { grid-template-columns: 1fr; }
}