/* =========================================================
   Fibra y Piscinas — estilos principales
   ========================================================= */

:root{
	--fyp-primary: #063a52;
	--fyp-primary-dark: #04283a;
	--fyp-secondary: #17b6d0;
	--fyp-accent: #ffb703;
	--fyp-ink: #102733;
	--fyp-muted: #5b7280;
	--fyp-bg: #ffffff;
	--fyp-bg-muted: #f3f8fa;
	--fyp-border: #e3edf0;
	--fyp-radius: 16px;
	--fyp-radius-sm: 10px;
	--fyp-shadow: 0 20px 40px -20px rgba(6, 58, 82, 0.25);
	--fyp-font-heading: 'Poppins', 'Segoe UI', sans-serif;
	--fyp-font-body: 'Inter', 'Segoe UI', sans-serif;
	--fyp-container: 1180px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
section[id]{ scroll-margin-top: 112px; }
@media (max-width: 782px){
	section[id]{ scroll-margin-top: 84px; }
}
body{
	margin: 0;
	font-family: var(--fyp-font-body);
	color: var(--fyp-ink);
	background: var(--fyp-bg);
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4{
	font-family: var(--fyp-font-heading);
	color: var(--fyp-primary);
	line-height: 1.2;
	margin: 0 0 .5em;
	font-weight: 700;
}
p{ margin: 0 0 1em; color: var(--fyp-muted); }
button{ font-family: inherit; }

.screen-reader-text{
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px,1px,1px,1px);
	white-space: nowrap;
}
.skip-link{
	position: absolute; left: 0; top: -60px; z-index: 10000;
	background: var(--fyp-primary); color:#fff; padding: 10px 18px;
	transition: top .2s ease;
}
.skip-link:focus{ top: 0; position: fixed; }

.container{
	max-width: var(--fyp-container);
	margin: 0 auto;
	padding: 0 24px;
}

/* ---------- Botones ---------- */
.btn{
	display: inline-flex;
	align-items: center;
	gap: 8px;
	justify-content: center;
	padding: 13px 26px;
	border-radius: 999px;
	font-weight: 600;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease;
	white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn svg{ width: 18px; height: 18px; }
.btn--primary{ background: var(--fyp-primary); color: #fff; }
.btn--primary:hover{ background: var(--fyp-primary-dark); color:#fff; }
.btn--accent{ background: var(--fyp-accent); color: var(--fyp-primary-dark); }
.btn--accent:hover{ background: #ffa400; color: var(--fyp-primary-dark); }
.btn--ghost{ background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.6); backdrop-filter: blur(4px); }
.btn--ghost:hover{ background: rgba(255,255,255,.22); color:#fff; }
.btn--outline{ background: transparent; color: var(--fyp-primary); border-color: var(--fyp-primary); }
.btn--outline:hover{ background: var(--fyp-primary); color:#fff; }
.btn--lg{ padding: 16px 32px; font-size: 1rem; }
.btn--sm{ padding: 9px 18px; font-size: .85rem; }

.eyebrow{
	display: inline-block;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: .78rem;
	color: var(--fyp-secondary);
	margin-bottom: 12px;
}
.eyebrow--light{ color: #b9e9f2; }

.icon svg{ width: 20px; height: 20px; display:block; }

/* ---------- Topbar ---------- */
.site-topbar{
	background: var(--fyp-primary-dark);
	color: #cfe4ea;
}
.site-topbar__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 24px;
	font-size: .82rem;
}
.site-topbar__contact{ display: flex; gap: 22px; flex-wrap: wrap; }
.site-topbar__contact a{ display: inline-flex; align-items: center; gap: 6px; color: #cfe4ea; }
.site-topbar__contact a:hover{ color: #fff; }
.site-topbar__contact .icon svg{ width: 15px; height: 15px; }
.site-topbar__social{ display: flex; align-items: center; gap: 14px; }
.site-topbar__social a{ display: inline-flex; color: #cfe4ea; }
.site-topbar__social a:hover{ color: #fff; }
.site-topbar__social svg{ width: 16px; height: 16px; }

/* ---------- Header ---------- */
.site-header{
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255,255,255,.92);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--fyp-border);
}
.site-header__inner{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 24px;
}
.site-title-link{ display: inline-flex; align-items: center; }
.site-title{
	font-family: var(--fyp-font-heading);
	font-weight: 800;
	font-size: 1.3rem;
	color: var(--fyp-primary);
}
.custom-logo{ max-height: var(--fyp-logo-height, 56px); width: auto; transition: max-height .15s ease; }

.main-nav__list{
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}
.main-nav__list a{
	font-weight: 600;
	font-size: .95rem;
	color: var(--fyp-primary);
	padding: 6px 2px;
	border-bottom: 2px solid transparent;
	transition: border-color .15s ease, color .15s ease;
}
.main-nav__list a:hover{ color: var(--fyp-secondary); border-color: var(--fyp-secondary); }

.site-header__actions{ display: flex; align-items: center; gap: 18px; }
.header-cta{ display: inline-flex; }

/* Submenú desplegable (Piscinas) */
.menu-item-has-children{ position: relative; display: flex; align-items: center; gap: 4px; }
.submenu-toggle{
	display: none;
	background: none; border: none; cursor: pointer;
	color: var(--fyp-primary);
	padding: 4px;
}
.submenu-toggle svg{ width: 16px; height: 16px; transition: transform .2s ease; }
.sub-menu{
	position: absolute;
	top: 100%; left: 0;
	background: #fff;
	border: 1px solid var(--fyp-border);
	border-radius: var(--fyp-radius-sm);
	box-shadow: var(--fyp-shadow);
	min-width: 220px;
	padding: 8px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
	z-index: 20;
}
.menu-item-has-children:hover .sub-menu,
.menu-item-has-children:focus-within .sub-menu{
	opacity: 1; visibility: visible; transform: translateY(0);
}
.sub-menu a{
	display: block;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: .9rem;
	white-space: nowrap;
}
.sub-menu a:hover{ background: var(--fyp-bg-muted); border-color: transparent; }

.nav-toggle{
	display: none;
	flex-direction: column;
	gap: 5px;
	width: 34px; height: 34px;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: 1px solid var(--fyp-border);
	border-radius: 8px;
	cursor: pointer;
}
.nav-toggle span{
	display: block;
	width: 20px; height: 2px;
	background: var(--fyp-primary);
	transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle.is-active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2){ opacity: 0; }
.nav-toggle.is-active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero ---------- */
.hero{
	position: relative;
	min-height: 88vh;
	display: flex;
	align-items: center;
	color: #fff;
	background: linear-gradient(135deg, #063a52, #0c6382);
	overflow: hidden;
}
.hero__bg{
	position: absolute;
	inset: -20px;
	background: var(--hero-image, linear-gradient(135deg, #063a52, #0c6382)) center/cover no-repeat;
	animation: fyp-kenburns 24s ease-in-out infinite alternate;
	will-change: transform;
}
.hero__overlay{
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(4,32,46,.55), rgba(4,32,46,.85)),
		radial-gradient(60% 60% at 20% 20%, rgba(23,182,208,.25), transparent 60%);
	pointer-events: none;
}
.hero__inner{ position: relative; z-index: 2; padding: 120px 24px 90px; max-width: 760px; }
@keyframes fyp-kenburns{
	0%{ transform: scale(1) translate(0, 0); }
	100%{ transform: scale(1.15) translate(-1.5%, -1.5%); }
}
@media (prefers-reduced-motion: reduce){
	.hero__bg{ animation: none; }
}
.hero__title{ color: #fff; font-size: clamp(2.1rem, 4.5vw, 3.4rem); margin-bottom: .4em; }
.hero__subtitle{ color: #e4f3f6; font-size: 1.15rem; max-width: 620px; }
.hero__actions{ display: flex; gap: 16px; flex-wrap: wrap; margin: 28px 0; }
.hero__badges{ display: flex; gap: 24px; flex-wrap: wrap; margin-top: 20px; }
.hero__badges li{ display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #d8f0f5; }
.hero__badges .icon{ color: var(--fyp-accent); }
.hero__scroll{
	position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
	color: #fff; opacity: .8; animation: fyp-bounce 2s infinite;
}
@keyframes fyp-bounce{
	0%, 100%{ transform: translate(-50%, 0); }
	50%{ transform: translate(-50%, 8px); }
}

/* ---------- Secciones genéricas ---------- */
.section{ padding: 96px 0; }
.section--muted{ background: var(--fyp-bg-muted); }
.section-heading{ max-width: 680px; margin: 0 auto 48px; text-align: center; }
.section-heading--left{ margin: 0 0 20px; text-align: left; }
.section-heading--light h2, .section-heading--light .eyebrow{ color: #fff; }
.section-heading--light p{ color: #cfe8ee; }
.section-heading p{ margin-bottom: 0; }

/* ---------- Nosotros ---------- */
.nosotros__grid{
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 64px;
	align-items: center;
}
.nosotros__media{ position: relative; min-height: 380px; }
.nosotros__media-shape{
	position: absolute; inset: 0;
	background: linear-gradient(135deg, var(--fyp-secondary), var(--fyp-primary));
	border-radius: 28px;
	box-shadow: var(--fyp-shadow);
}
.nosotros__media-shape::after{
	content: "";
	position: absolute; inset: 18px;
	border: 2px solid rgba(255,255,255,.35);
	border-radius: 20px;
}
.nosotros__media-photo{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 28px;
	box-shadow: var(--fyp-shadow);
}
.nosotros__stat-card{
	position: absolute; bottom: -24px; right: -24px;
	background: #fff;
	border-radius: var(--fyp-radius);
	box-shadow: var(--fyp-shadow);
	padding: 20px 26px;
	text-align: center;
	min-width: 160px;
}
.nosotros__stat-card strong{ display:block; font-family: var(--fyp-font-heading); font-size: 1.8rem; color: var(--fyp-primary); }
.nosotros__stat-card span{ font-size: .8rem; color: var(--fyp-muted); }

.checklist{ display: flex; flex-direction: column; gap: 12px; margin: 22px 0; }
.checklist li, .contacto__list li{ display: flex; align-items: flex-start; gap: 10px; }
.checklist .icon{ color: var(--fyp-secondary); flex: none; margin-top: 2px; }

/* ---------- Proceso ---------- */
.proceso__grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	margin-bottom: 48px;
}
.proceso__card{
	background: #fff;
	border-radius: var(--fyp-radius);
	padding: 28px 24px;
	border: 1px solid var(--fyp-border);
	transition: transform .2s ease, box-shadow .2s ease;
}
.proceso__card:hover{ transform: translateY(-6px); box-shadow: var(--fyp-shadow); }
.proceso__num{
	display: inline-block;
	font-family: var(--fyp-font-heading);
	font-weight: 800;
	font-size: 1.6rem;
	color: var(--fyp-secondary);
	margin-bottom: 8px;
}
.proceso__card h3{ font-size: 1.1rem; }
.proceso__card p{ margin: 0; font-size: .92rem; }

.incluye-card{
	background: linear-gradient(135deg, var(--fyp-primary), var(--fyp-primary-dark));
	color: #fff;
	border-radius: var(--fyp-radius);
	padding: 40px;
}
.incluye-card h3{ color: #fff; margin-bottom: 20px; }
.incluye-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.incluye-grid li{ display: flex; align-items: flex-start; gap: 10px; padding: 6px 0; color: #dff2f6; border-bottom: 1px dashed rgba(255,255,255,.18); }
.incluye-grid li .icon{ color: var(--fyp-accent); margin-top: 2px; flex: none; }
.incluye-grid__extra{ border-bottom: none !important; font-weight: 600; }

/* ---------- Piscinas ---------- */
.piscinas-filter{ display: flex; gap: 10px; justify-content: center; margin-bottom: 36px; flex-wrap: wrap; }
.piscinas-filter__btn{
	padding: 10px 22px;
	border-radius: 999px;
	border: 2px solid var(--fyp-border);
	background: #fff;
	font-weight: 600;
	cursor: pointer;
	color: var(--fyp-primary);
	transition: all .15s ease;
}
.piscinas-filter__btn.is-active,
.piscinas-filter__btn:hover{ background: var(--fyp-primary); border-color: var(--fyp-primary); color:#fff; }

.piscinas-grid{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.piscina-card{
	background: #fff;
	border-radius: var(--fyp-radius);
	overflow: hidden;
	border: 1px solid var(--fyp-border);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
}
.piscina-card:hover{ transform: translateY(-6px); box-shadow: var(--fyp-shadow); }
.piscina-card.is-hidden{ display: none; }
.piscina-card__media{ display: block; position: relative; aspect-ratio: 7/5; overflow: hidden; background: var(--fyp-bg-muted); }
.piscina-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.piscina-card__placeholder{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--fyp-secondary); }
.piscina-card__placeholder svg{ width: 64px; height: 64px; }
.piscina-card__badge{
	position: absolute; top: 14px; left: 14px;
	font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 999px; color: #fff;
	background: var(--fyp-secondary);
}
.piscina-card__badge--empresarial{ background: var(--fyp-primary); }
.piscina-card__body{ padding: 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.piscina-card__body h3{ font-size: 1.15rem; margin-bottom: 0; }
.piscina-card__specs{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
.piscina-card__specs li{ display: flex; flex-direction: column; font-size: .85rem; }
.piscina-card__specs span{ color: var(--fyp-muted); }
.piscina-card__specs strong{ color: var(--fyp-primary); }
.piscina-card__modelo{ font-size: .85rem; font-style: italic; margin: 0; }
.piscina-card__teaser{ font-size: .95rem; font-weight: 600; color: var(--fyp-primary); margin: 0; }
.piscina-card__body > .btn{ margin-top: auto; }
.piscina-card__actions{ display: flex; gap: 10px; margin-top: auto; flex-wrap: wrap; }
.piscina-card__actions .btn{ flex: 1; }

/* ---------- Empresas ---------- */
.section--empresas{
	background: linear-gradient(160deg, var(--fyp-primary-dark), var(--fyp-primary) 55%, #0a5a78);
	color: #fff;
}
.empresas-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin-bottom: 48px;
}
.empresas-card{
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: var(--fyp-radius);
	padding: 28px 22px;
	backdrop-filter: blur(4px);
	transition: transform .2s ease, background .2s ease;
}
.empresas-card:hover{ transform: translateY(-6px); background: rgba(255,255,255,.12); }
.empresas-card .icon{ color: var(--fyp-accent); display: inline-flex; margin-bottom: 14px; }
.empresas-card .icon svg{ width: 30px; height: 30px; }
.empresas-card h3{ color: #fff; font-size: 1.05rem; }
.empresas-card p{ color: #d7ecf1; font-size: .9rem; margin: 0; }

.empresas-cta{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: var(--fyp-radius);
	padding: 32px;
}
.empresas-cta h3{ color: #fff; margin-bottom: 6px; }
.empresas-cta p{ color: #d7ecf1; margin: 0; }

/* ---------- Galería ---------- */
.gallery-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.gallery-item{
	display: block;
	border-radius: var(--fyp-radius-sm);
	overflow: hidden;
	aspect-ratio: 4/3;
	position: relative;
}
.gallery-item img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-item:hover img{ transform: scale(1.06); }

.lightbox{
	position: fixed; inset: 0; z-index: 2000;
	background: rgba(4,20,28,.92);
	display: flex; align-items: center; justify-content: center;
	padding: 40px;
}
.lightbox[hidden]{ display: none; }
.lightbox img{ max-width: 100%; max-height: 90vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.lightbox__close{
	position: absolute; top: 20px; right: 28px;
	background: transparent; border: none; color: #fff; font-size: 2.2rem; cursor: pointer; line-height: 1;
}

/* ---------- FAQs ---------- */
.faqs__grid{ display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }
.accordion__item{ border-bottom: 1px solid var(--fyp-border); }
.accordion__trigger{
	width: 100%;
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: none; border: none; text-align: left;
	padding: 20px 0;
	font-family: var(--fyp-font-heading);
	font-weight: 600; font-size: 1.02rem;
	color: var(--fyp-primary);
	cursor: pointer;
}
.accordion__icon{ flex: none; color: var(--fyp-secondary); transition: transform .2s ease; display: inline-flex; }
.accordion__trigger[aria-expanded="true"] .accordion__icon{ transform: rotate(180deg); }
.accordion__panel{ padding-bottom: 20px; }
.accordion__content p:last-child{ margin-bottom: 0; }

/* ---------- Contacto ---------- */
.contacto__grid{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; }
.contacto__list{ display: flex; flex-direction: column; gap: 18px; margin: 26px 0; }
.contacto__list .icon{ color: var(--fyp-secondary); flex: none; margin-top: 2px; }
.contacto__list strong{ display: block; color: var(--fyp-primary); font-size: .85rem; }
.contacto__list span{ color: var(--fyp-muted); font-size: .92rem; }

.contacto__form-wrap{
	background: #fff;
	border-radius: var(--fyp-radius);
	padding: 34px;
	border: 1px solid var(--fyp-border);
	box-shadow: var(--fyp-shadow);
}
.quote-form{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.quote-form__row{ display: flex; flex-direction: column; gap: 6px; }
.quote-form__row--full{ grid-column: 1 / -1; }
.quote-form label{ font-size: .85rem; font-weight: 600; color: var(--fyp-primary); }
.quote-form input, .quote-form select, .quote-form textarea{
	border: 1px solid var(--fyp-border);
	border-radius: var(--fyp-radius-sm);
	padding: 12px 14px;
	font-family: inherit;
	font-size: .95rem;
	background: var(--fyp-bg-muted);
	transition: border-color .15s ease, background .15s ease;
}
.quote-form input:focus, .quote-form select:focus, .quote-form textarea:focus{
	outline: none;
	border-color: var(--fyp-secondary);
	background: #fff;
}
.quote-form__submit{ grid-column: 1 / -1; margin-top: 6px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.quote-form__submit .icon svg{ width: 20px; height: 20px; }

.phone-input{ display: flex; align-items: stretch; }
.phone-input__prefix{
	display: flex; align-items: center;
	padding: 0 12px;
	border: 1px solid var(--fyp-border);
	border-right: none;
	border-radius: var(--fyp-radius-sm) 0 0 var(--fyp-radius-sm);
	background: var(--fyp-border);
	color: var(--fyp-primary);
	font-weight: 600;
	font-size: .95rem;
}
.phone-input input{
	border-radius: 0 var(--fyp-radius-sm) var(--fyp-radius-sm) 0 !important;
	flex: 1;
	min-width: 0;
}
.fyp-hp-field{ position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.pool-picker{ display: flex; flex-wrap: wrap; gap: 10px; max-height: 320px; overflow-y: auto; padding: 4px 2px; }
.pool-picker__item{
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: 6px;
	width: 92px;
	padding: 8px 6px;
	border-radius: var(--fyp-radius-sm);
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	transition: border-color .15s ease, background .15s ease;
}
.pool-picker__item:hover{ background: var(--fyp-bg-muted); }
.pool-picker__input{ position: absolute; width: 1px; height: 1px; opacity: 0; }
.pool-picker__thumb{
	width: 76px; height: 54px;
	border-radius: 8px;
	overflow: hidden;
	background: var(--fyp-bg-muted);
	display: flex; align-items: center; justify-content: center;
	outline: 2px solid transparent;
	outline-offset: -2px;
}
.pool-picker__thumb img{ width: 100%; height: 100%; object-fit: cover; }
.pool-picker__thumb--generic{ color: var(--fyp-secondary); }
.pool-picker__thumb--generic svg{ width: 26px; height: 26px; }
.pool-picker__name{ font-size: .72rem; color: var(--fyp-muted); line-height: 1.2; }
.pool-picker__input:checked ~ .pool-picker__thumb{ outline-color: var(--fyp-secondary); }
.pool-picker__item:has(.pool-picker__input:checked){ border-color: var(--fyp-secondary); background: var(--fyp-bg-muted); }
.pool-picker__input:checked ~ .pool-picker__name{ color: var(--fyp-primary); font-weight: 600; }
.pool-picker__input:focus-visible ~ .pool-picker__thumb{ outline-color: var(--fyp-primary); }

.form-alert{ padding: 14px 18px; border-radius: var(--fyp-radius-sm); margin-bottom: 20px; font-weight: 600; font-size: .92rem; }
.form-alert--success{ background: #e3f8ec; color: #147a4b; }
.form-alert--error{ background: #fdeaea; color: #b3261e; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--fyp-primary-dark); color: #cfe4ea; padding-top: 64px; }
.footer__grid{ display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.footer__col h3{ color: #fff; font-size: 1rem; margin-bottom: 18px; }
.footer__brand p{ color: #a9c6cf; font-size: .9rem; }
.site-title--footer{ color: #fff; font-family: var(--fyp-font-heading); font-weight: 800; font-size: 1.2rem; }
.footer__social{ display: flex; gap: 12px; margin-top: 16px; }
.footer__social a{
	width: 38px; height: 38px; border-radius: 50%;
	display: inline-flex; align-items: center; justify-content: center;
	background: rgba(255,255,255,.08); color: #fff;
	transition: background .15s ease;
}
.footer__social a svg{ width: 18px; height: 18px; }
.footer__social a:hover{ background: var(--fyp-secondary); }
.footer__contact-list, .footer__hours-list, .footer__menu{ display: flex; flex-direction: column; gap: 12px; }
.footer__contact-list li, .footer__hours-list li{ display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; color: #a9c6cf; }
.footer__contact-list .icon{ color: var(--fyp-secondary); flex: none; margin-top: 2px; }
.footer__menu a{ font-size: .9rem; color: #a9c6cf; }
.footer__menu a:hover{ color: #fff; }
.footer__bottom{ border-top: 1px solid rgba(255,255,255,.1); padding: 20px 0; margin-top: 24px; }
.footer__bottom-inner{ text-align: center; font-size: .82rem; color: #7fa0aa; }

/* ---------- WhatsApp flotante ---------- */
.whatsapp-float{
	position: fixed;
	bottom: 26px; right: 26px;
	width: 60px; height: 60px;
	background: #25D366;
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	box-shadow: 0 14px 30px -8px rgba(37,211,102,.6);
	z-index: 400;
	transition: transform .2s ease;
}
.whatsapp-float svg{ width: 30px; height: 30px; }
.whatsapp-float:hover{ transform: scale(1.08); color: #fff; }

/* ---------- Blog / páginas genéricas ---------- */
.page-wrap{ padding: 72px 24px; }
.page-wrap--sidebar{ display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start; }
.page-header h1{ margin-bottom: 8px; }
.page-thumbnail{ border-radius: var(--fyp-radius); overflow: hidden; margin: 20px 0; }
.blog-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.blog-card{ border: 1px solid var(--fyp-border); border-radius: var(--fyp-radius); overflow: hidden; }
.blog-card__media img{ aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.blog-card__body{ padding: 20px; }
.blog-card__meta{ font-size: .8rem; color: var(--fyp-muted); margin-bottom: 10px; }
.widget{ margin-bottom: 32px; }
.widget-title{ font-size: 1rem; }

.archive-header{ background: var(--fyp-primary); color: #fff; padding: 64px 0 48px; }
.archive-header h1{ color: #fff; margin: 0; }

.product-header{ padding: 40px 24px 0; max-width: 1000px; }
.product-header .eyebrow{ margin-bottom: 6px; }
.product-header h1{ margin: 0; }

.product-layout{ display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; padding: 28px 24px 0; align-items: start; }

.product-gallery__empty{
	display: flex; align-items: center; justify-content: center;
	aspect-ratio: 4/3;
	background: var(--fyp-bg-muted);
	border-radius: var(--fyp-radius);
	color: var(--fyp-secondary);
}
.product-gallery__empty svg{ width: 64px; height: 64px; }

.product-gallery__main{
	display: block;
	border-radius: var(--fyp-radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	background: var(--fyp-bg-muted);
}
.product-gallery__main-img{ width: 100%; height: 100%; object-fit: cover; }
.product-gallery__thumbs{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.product-gallery__thumb{
	width: 72px; height: 72px;
	border-radius: var(--fyp-radius-sm);
	overflow: hidden;
	padding: 0;
	border: 2px solid transparent;
	background: var(--fyp-bg-muted);
	cursor: pointer;
	opacity: .7;
	transition: opacity .15s ease, border-color .15s ease;
}
.product-gallery__thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.product-gallery__thumb:hover{ opacity: 1; }
.product-gallery__thumb.is-active{ opacity: 1; border-color: var(--fyp-secondary); }

.detail-badges{ display: flex; gap: 20px; flex-wrap: wrap; padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--fyp-border); }
.detail-badges li{ display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .87rem; color: var(--fyp-primary); }
.detail-badges .icon{ color: var(--fyp-secondary); }

.piscina-single__specs{ background: var(--fyp-bg-muted); border-radius: var(--fyp-radius); padding: 26px; align-self: start; }
.piscina-single__specs ul{ display: flex; flex-direction: column; gap: 10px; margin: 16px 0 22px; }
.piscina-single__specs li{ display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: .9rem; border-bottom: 1px dashed var(--fyp-border); padding-bottom: 8px; }
.piscina-single__specs span{ color: var(--fyp-muted); flex: none; }
.piscina-single__specs strong{ color: var(--fyp-primary); text-align: right; max-width: 65%; word-break: break-word; }

.piscina-single__content{ padding: 48px 24px; max-width: 900px; }
.piscina-single__content .checklist{ margin-top: 16px; }

.colores-grid{ display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 0 16px; }
.color-swatch{ display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; text-align: center; }
.color-swatch__circle{
	width: 52px; height: 52px;
	border-radius: 50%;
	display: block;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px var(--fyp-border), 0 4px 10px -4px rgba(0,0,0,.35);
}
.color-swatch__name{ font-size: .78rem; color: var(--fyp-muted); line-height: 1.25; }
.colores-ver-muestrario{ margin-top: 4px; }

.proyecto-single__content{ padding: 28px 24px 48px; max-width: 900px; }
.proyecto-single__content .product-gallery,
.proyecto-single__content .product-gallery__empty{ margin-bottom: 32px; }

.proyectos-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.proyecto-card{
	background: #fff;
	border-radius: var(--fyp-radius);
	overflow: hidden;
	border: 1px solid var(--fyp-border);
	transition: transform .2s ease, box-shadow .2s ease;
	display: flex;
	flex-direction: column;
}
.proyecto-card:hover{ transform: translateY(-6px); box-shadow: var(--fyp-shadow); }
.proyecto-card__media{ display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--fyp-bg-muted); }
.proyecto-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.proyecto-card:hover .proyecto-card__media img{ transform: scale(1.05); }
.proyecto-card__body{ padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.proyecto-card__body h3{ font-size: 1.1rem; margin-bottom: 0; }
.proyecto-card__body p{ font-size: .9rem; margin: 0; }
.proyecto-card__body .btn{ margin-top: auto; align-self: flex-start; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
	.nosotros__grid, .contacto__grid, .faqs__grid{ grid-template-columns: 1fr; }
	.proceso__grid{ grid-template-columns: repeat(2, 1fr); }
	.empresas-grid{ grid-template-columns: repeat(2, 1fr); }
	.piscinas-grid, .proyectos-grid{ grid-template-columns: repeat(2, 1fr); }
	.gallery-grid{ grid-template-columns: repeat(3, 1fr); }
	.footer__grid{ grid-template-columns: 1fr 1fr; }
	.blog-grid{ grid-template-columns: repeat(2, 1fr); }
	.page-wrap--sidebar{ grid-template-columns: 1fr; }
	.product-layout{ grid-template-columns: 1fr; }
	.nosotros__media{ min-height: 300px; }
}

@media (max-width: 782px){
	.site-topbar{ display: none; }
	.main-nav{
		position: fixed; inset: 72px 16px auto 16px;
		z-index: 600;
		max-height: calc(100vh - 96px);
		overflow-y: auto;
		background: #fff; border-radius: var(--fyp-radius);
		box-shadow: var(--fyp-shadow);
		padding: 12px;
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition: transform .2s ease, opacity .2s ease;
	}
	.main-nav.is-open{ transform: translateY(0); opacity: 1; pointer-events: auto; }
	.main-nav__list{ flex-direction: column; align-items: stretch; gap: 4px; }
	.main-nav__list a{ display: block; padding: 12px 14px; border-radius: 8px; }
	.main-nav__list a:hover{ background: var(--fyp-bg-muted); border-color: transparent; }
	.nav-toggle{ display: flex; }
	.header-cta{ display: none; }

	.menu-item-has-children{ flex-direction: column; align-items: stretch; gap: 0; }
	.submenu-toggle{ display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; height: 100%; padding: 0 14px; }
	.submenu-toggle[aria-expanded="true"] svg{ transform: rotate(180deg); }
	.sub-menu{
		position: static;
		opacity: 1; visibility: visible; transform: none;
		box-shadow: none; border: none;
		padding: 0 0 0 14px;
		max-height: 0;
		overflow: hidden;
		transition: max-height .2s ease;
	}
	.menu-item-has-children.is-open .sub-menu{ max-height: 200px; }
	.sub-menu a{ padding: 10px 12px; font-size: .88rem; }
}

@media (max-width: 640px){
	.section{ padding: 64px 0; }
	.hero__inner{ padding: 100px 20px 70px; }
	.proceso__grid, .empresas-grid, .piscinas-grid, .blog-grid, .proyectos-grid{ grid-template-columns: 1fr; }
	.gallery-grid{ grid-template-columns: repeat(2, 1fr); }
	.incluye-grid{ grid-template-columns: 1fr; }
	.quote-form{ grid-template-columns: 1fr; }
	.footer__grid{ grid-template-columns: 1fr; }
	.empresas-cta{ flex-direction: column; align-items: flex-start; }
	.nosotros__stat-card{ position: static; margin-top: 16px; }
	.whatsapp-float{ width: 52px; height: 52px; bottom: 18px; right: 18px; }
}