/* =========================================================================
   OCTAGENOS — layout y componentes (clon + mejoras del diseño actual)
   ========================================================================= */

/* ---------- HEADER ---------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 2px 14px rgba(12,16,21,0.05);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--space-md); min-height: var(--header-h);
}
.site-header__title {
	font-family: var(--font-heading); font-weight: var(--fw-bold);
	font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.04em;
	color: var(--color-secondary);
}
.custom-logo { max-height: 56px; width: auto; }

.primary-nav__list {
	display: flex; align-items: center; gap: clamp(0.8rem, 0.4rem + 1.4vw, 2rem);
	list-style: none; margin: 0; padding: 0;
}
.primary-nav__list a {
	font-family: var(--font-heading); font-weight: var(--fw-medium);
	text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.02rem;
	color: var(--color-secondary); padding: 0.4em 0; position: relative;
}
.primary-nav__list a::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0;
	background: var(--color-primary); transition: width var(--transition);
}
.primary-nav__list a:hover, .primary-nav__list .current-menu-item > a { color: var(--color-primary); }
.primary-nav__list a:hover::after, .primary-nav__list .current-menu-item > a::after { width: 100%; }

/* Submenús desplegables */
.primary-nav__list .menu-item-has-children { position: relative; }
.primary-nav__list .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 210px;
	list-style: none; margin: 0; padding: 0.4rem 0;
	background: var(--color-white); border: 1px solid var(--color-border);
	box-shadow: var(--shadow); border-radius: var(--radius);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
	z-index: 50;
}
.primary-nav__list .menu-item-has-children:hover > .sub-menu,
.primary-nav__list .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.primary-nav__list .sub-menu li { display: block; }
.primary-nav__list .sub-menu a { display: block; padding: 0.5em 1.2em; font-size: 0.95rem; white-space: nowrap; }
.primary-nav__list .sub-menu a::after { display: none; }
.primary-nav__list .menu-item-has-children > a::before {
	content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.4em;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px); vertical-align: middle;
}

/* Toggle móvil */
.nav-toggle {
	display: none; flex-direction: column; gap: 5px;
	background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--color-secondary); transition: var(--transition); }

/* Cluster derecho del header: Armadera + teléfono + CTA */
.site-header__actions { display: flex; align-items: center; gap: clamp(0.6rem, 0.3rem + 1vw, 1.2rem); }
.site-header__armadera { display: inline-flex; padding-right: clamp(0.6rem, 1vw, 1.2rem); border-right: 1px solid var(--color-border); }
.site-header__armadera img { height: 44px; width: auto; }
.site-header__phone { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--color-secondary); font-family: var(--font-heading); font-weight: var(--fw-medium); }
.site-header__phone:hover { color: var(--color-primary); }
.site-header__phone-ico { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 0.95rem; }
.site-header__cta { padding: 0.6em 1.1em; font-size: 0.92rem; }

/* ---------- HERO ---------- */
.hero {
	position: relative; color: var(--color-white);
	min-height: clamp(460px, 70vh, 720px);
	display: grid; align-items: center;
	background: var(--color-secondary);
}
.hero__bg {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	z-index: 0;
}
.hero__bg::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(12,16,21,0.85) 0%, rgba(12,16,21,0.55) 55%, rgba(12,16,21,0.30) 100%);
}
.hero__inner { position: relative; z-index: 1; padding-block: var(--space-xl); max-width: 760px; }
.hero__eyebrow {
	font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.18em;
	color: var(--color-primary); font-weight: var(--fw-bold); margin-bottom: var(--space-sm);
}
.hero__title { color: var(--color-white); margin-bottom: var(--space-sm); }
.hero__text { font-size: 1.15rem; color: var(--color-white-soft); margin-bottom: var(--space-md); max-width: 56ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.hero .btn--ghost { color: var(--color-white); border-color: rgba(255,255,255,0.6); }
.hero .btn--ghost:hover { background: var(--color-white); color: var(--color-secondary); border-color: var(--color-white); }

/* ---------- SECTION TITLES ---------- */
.section__head { text-align: center; max-width: 720px; margin: 0 auto var(--space-lg); }
.section__eyebrow {
	font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.16em;
	color: var(--color-primary); font-weight: var(--fw-bold); display: block; margin-bottom: 0.5rem;
}
.section__title { position: relative; display: inline-block; }
.section__title::after {
	content: ""; display: block; width: 64px; height: 4px; background: var(--color-primary);
	margin: 0.8rem auto 0;
}

/* ---------- SERVICIOS ---------- */
.servicios__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-sm) var(--space-md);
}
.servicios__list li {
	position: relative; padding-left: 2rem; line-height: 1.5;
}
.servicios__list li::before {
	content: "▸"; position: absolute; left: 0; top: 0; color: var(--color-primary); font-weight: bold;
}

/* ---------- EXPERTISE ---------- */
.expertise__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.expertise__media { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: var(--space-sm); }
.expertise__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4/3; }
.expertise__media img:first-child { grid-column: 1 / -1; aspect-ratio: 16/8; }
.expertise__text h2 { margin-bottom: var(--space-sm); }
.expertise__text p { margin-bottom: var(--space-md); }

/* ---------- CTA BAND ---------- */
.cta-band {
	background: var(--color-primary); color: var(--color-white);
	padding-block: var(--space-lg); text-align: center;
}
.cta-band h2 { color: var(--color-white); margin-bottom: var(--space-md); }
.cta-band .btn { background: var(--color-white); color: var(--color-primary); border-color: var(--color-white); }
.cta-band .btn:hover { background: var(--color-secondary); color: var(--color-white); border-color: var(--color-secondary); }

/* ---------- BANDA INMOBILIARIA (enlace al micrositio) ---------- */
.promo-inmo {
	position: relative; overflow: hidden; color: var(--color-white);
	background: var(--color-secondary); border-radius: var(--radius-lg);
	display: grid; gap: var(--space-md); padding: clamp(2rem, 1rem + 4vw, 4rem);
	text-align: center;
}
.promo-inmo h2 { color: var(--color-white); }
.promo-inmo p { margin: 0 auto; color: var(--color-white-soft); }

/* ---------- FOOTER ---------- */
.site-footer { background: var(--color-secondary); color: var(--color-white-soft); margin-top: var(--space-xl); }
.site-footer__inner {
	display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-lg);
	padding-block: var(--space-lg);
}
.site-footer__title { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 1.4rem; color: var(--color-white); text-transform: uppercase; }
.site-footer__tagline { color: var(--color-white-soft); }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__list a { color: var(--color-white-soft); }
.site-footer__list a:hover { color: var(--color-white); }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,0.12); padding-block: var(--space-sm); }
.site-footer__bar small { color: var(--color-text-light); }

/* ---------- FORMULARIOS ---------- */
.form-field { margin-bottom: var(--space-sm); }
.form-field label { display: block; font-weight: var(--fw-medium); margin-bottom: 0.3rem; }
.form-field input, .form-field textarea, .form-field select {
	width: 100%; padding: 0.7em 0.9em; border: 1px solid var(--color-border);
	border-radius: var(--radius); font: inherit; background: var(--color-white);
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--color-primary); border-color: var(--color-primary); }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width: 1024px) {
	.expertise__grid { grid-template-columns: 1fr; gap: var(--space-md); }
	.site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
	.nav-toggle { display: flex; order: 3; }
	.site-header__actions { order: 2; margin-left: auto; }
	.site-header__armadera, .site-header__phone { display: none; }
	.site-header__cta { font-size: 0.78rem; padding: 0.5em 0.8em; }
	.primary-nav {
		position: fixed; inset: var(--header-h) 0 auto 0;
		background: var(--color-white); border-bottom: 1px solid var(--color-border);
		transform: translateY(-120%); transition: transform var(--transition);
		box-shadow: var(--shadow);
	}
	body.nav-open .primary-nav { transform: translateY(0); }
	.primary-nav__list { flex-direction: column; align-items: stretch; padding: var(--space-sm) var(--gutter); gap: 0; }
	.primary-nav__list li { border-bottom: 1px solid var(--color-border); }
	.primary-nav__list a { display: block; padding: 0.9em 0; }
	/* Submenús: apilados y visibles en móvil */
	.primary-nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: 0; padding: 0 0 0 1rem; min-width: 0;
	}
	.primary-nav__list .sub-menu a { padding: 0.7em 0; }
	.primary-nav__list .menu-item-has-children > a::before { display: none; }
	.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}

/* =========================================================================
   PÁGINAS INTERNAS
   ========================================================================= */
.page-banner {
	background: var(--color-secondary); color: var(--color-white);
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
	border-bottom: 4px solid var(--color-primary);
}
.page-banner__title { color: var(--color-white); margin: 0; }
.page-banner .section__eyebrow { margin-bottom: 0.4rem; }

/* Tarjetas de valores / servicios */
.value-card {
	background: var(--color-white); border: 1px solid var(--color-border);
	border-radius: var(--radius); padding: var(--space-md);
	transition: transform var(--transition), box-shadow var(--transition);
}
.value-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.value-card h3 { color: var(--color-primary); margin-bottom: 0.5rem; }

/* Galería de proyectos */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-sm); }
.gallery__item { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); }
.gallery__item img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform 0.4s ease; }
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item figcaption {
	position: absolute; inset: auto 0 0 0; padding: 0.8rem 1rem;
	background: linear-gradient(transparent, rgba(12,16,21,0.85));
	color: var(--color-white); font-family: var(--font-heading); text-transform: uppercase;
	letter-spacing: 0.03em; font-size: 0.95rem;
}

/* Contacto */
.contacto__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-lg); align-items: start; }
.contacto__list { list-style: none; padding: 0; margin: 0 0 var(--space-md); display: grid; gap: 0.6rem; }
.contacto__list strong { color: var(--color-secondary); }
.contacto__social { display: flex; gap: var(--space-sm); margin-top: var(--space-sm); }
.contacto__social a { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; }

/* Formulario de contacto */
.contact-form .section__title { text-align: left; }
.contact-form .section__title::after { margin-left: 0; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-sm); }
.contact-form__notice { padding: 0.9rem 1.1rem; border-radius: var(--radius); margin-bottom: var(--space-sm); }
.contact-form__notice--ok { background: #e7f6ec; color: #1d7a3e; border: 1px solid #b6e2c4; }
.contact-form__notice--error { background: #fdecec; color: #b3261e; border: 1px solid #f3c2c0; }

@media (max-width: 860px) {
	.contacto__grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   HOME — clon fiel del original
   ========================================================================= */

/* Hero: deja espacio abajo para las tarjetas que se superponen */
.hero__inner { padding-bottom: calc(var(--space-xl) + 40px); }

/* 3 tarjetas destacadas (superpuestas al hero) */
.features { position: relative; z-index: 3; margin-top: -90px; }
.features__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.feature-card { background: var(--color-primary); color: var(--color-white); padding: var(--space-md); border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.feature-card__title { color: var(--color-white); font-size: 1.3rem; margin-bottom: 0.6rem; }
.feature-card__text { color: rgba(255,255,255,0.92); max-width: none; margin: 0; }

/* Por qué escogernos */
.whyus__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.whyus__text h2 { margin: 0.4rem 0 var(--space-sm); }
.whyus__checks { list-style: none; padding: 0; margin: var(--space-md) 0; display: grid; gap: 0.7rem; }
.whyus__checks li { position: relative; padding-left: 2.2rem; font-weight: var(--fw-medium); }
.whyus__checks li::before {
	content: "✓"; position: absolute; left: 0; top: -2px;
	width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
	background: var(--color-primary); color: #fff; border-radius: 50%; font-size: 0.85rem;
}
.whyus__media { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.whyus__media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); aspect-ratio: 4/3; }
.whyus__media img:first-child { grid-column: 1 / -1; aspect-ratio: 16/7; }

/* Nuestros servicios (6 tarjetas con foto) */
.services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.service-card { background: var(--color-white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--transition), box-shadow var(--transition); }
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service-card__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.service-card__body { padding: var(--space-md); }
.service-card__title { color: var(--color-primary); font-size: 1.2rem; margin-bottom: 0.5rem; }
.service-card__body p { margin: 0; color: var(--color-text); }
.services__cta { text-align: center; margin-top: var(--space-lg); }

/* Acordeones rojos */
.accordions { padding-block: var(--section-y); }
.accordion { margin-bottom: 0.7rem; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--color-border); }
.accordion__summary {
	background: var(--color-primary); color: var(--color-white); cursor: pointer;
	padding: 1em 1.4em; font-family: var(--font-heading); font-weight: var(--fw-bold);
	text-transform: uppercase; letter-spacing: 0.02em; list-style: none;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.accordion__summary::-webkit-details-marker { display: none; }
.accordion__summary::after { content: "+"; font-size: 1.4rem; line-height: 1; }
.accordion[open] .accordion__summary::after { content: "−"; }
.accordion[open] .accordion__summary { background: var(--color-accent); }
.accordion__content { background: var(--color-white); padding: var(--space-md) var(--space-md); }
.accordion__content ul { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.5rem; }
.accordion__content strong { color: var(--color-secondary); }

/* Banda de contacto sobre el footer */
.footer-contact { background: var(--color-bg-alt); padding-block: var(--section-y); }

/* Footer (clon) */
.site-footer__top { display: grid; grid-template-columns: 1.3fr 1fr 1.2fr; gap: var(--space-lg); padding-block: var(--space-lg); align-items: start; }
.site-footer__heading { color: var(--color-white); font-size: 1.2rem; margin-bottom: var(--space-sm); }
.site-footer__brand .custom-logo { max-height: 64px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--space-sm); }
.site-footer__social { display: flex; flex-direction: column; gap: 0.5rem; }
.site-footer__social a { color: var(--color-white-soft); }
.site-footer__social a:hover { color: var(--color-white); }
.site-footer__contact-card { background: var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-md); }
.site-footer__contact-card .site-footer__heading { margin-top: 0; }
.site-footer__contact { list-style: none; padding: 0; margin: 0 0 var(--space-sm); display: grid; gap: 0.5rem; }
.site-footer__contact a, .site-footer__contact li { color: var(--color-white); }
.site-footer__contact-card .btn--whatsapp { width: 100%; justify-content: center; }

@media (max-width: 1024px) {
	.services__grid { grid-template-columns: repeat(2, 1fr); }
	.features__grid { grid-template-columns: 1fr; }
	.features { margin-top: -50px; }
	.whyus__grid { grid-template-columns: 1fr; }
	.site-footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
	.services__grid { grid-template-columns: 1fr; }
	.features { margin-top: 0; padding-top: var(--space-md); }
}

/* =========================================================================
   ANIMACIONES DE ENTRADA (fadeInUp en código limpio)
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
	.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.7s ease, transform 0.7s ease; }
	.reveal.is-visible { opacity: 1; transform: none; }
}