/* Aqualark — Design 04: Precision and Proximity. Utility layer on top of theme.json. */

/*
 * --aqualark-gold-text: a darkened version of the brand gold (#c29037), used
 * ONLY where gold sits behind/under small text (kickers, indices, footer
 * headings). The full-saturation brand gold fails WCAG AA contrast (~2.6-2.9:1)
 * against the site's light backgrounds at these font sizes — this variant
 * clears 4.9:1+ on all of them while still reading as gold. Buttons, borders,
 * chips and other decorative gold uses are unaffected on purpose.
 */
:root { --aqualark-gold-text: #876426; }

.aqualark-kicker {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--aqualark-gold-text);
	font-weight: 500;
	display: block;
	margin-bottom: 14px;
}

/* ---------- Header (two rows: big logo / centered nav) ---------- */
.aqualark-header { position: sticky; top: 0; z-index: 40; }
.aqualark-header-row1 { align-items: center; }
.aqualark-header .wp-block-site-logo img { height: 96px; width: auto; }
.aqualark-header-row2 {
	align-items: center;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 2px solid var(--wp--preset--color--gold);
}
.aqualark-nav { font-family: var(--wp--preset--font-family--body); }
.aqualark-nav .wp-block-navigation-item__content { padding: 8px 14px; font-weight: 500; }
.aqualark-btn-header a { padding: 13px 24px !important; font-size: 0.85rem !important; }

/* ---------- Cards ---------- */
.aqualark-card {
	background: #fff;
	border-radius: var(--wp--custom--radius--md);
	box-shadow: var(--wp--custom--shadow--card);
	border: 1px solid var(--wp--preset--color--line);
	padding: 28px;
	height: 100%;
}
.aqualark-card-index { font-family: var(--wp--preset--font-family--mono); color: var(--aqualark-gold-text); font-size: 0.75rem; margin-bottom: 12px; display: block; }
.aqualark-card-accent { background: var(--wp--preset--color--primary); border: none; color: #fff; }
.aqualark-card-accent p, .aqualark-card-accent h3 { color: #fff; }

/* ---------- Hero ---------- */
.aqualark-hero-media { position: relative; border-radius: var(--wp--custom--radius--lg); overflow: hidden; }
.aqualark-hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.aqualark-hero-media::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(100deg, rgba(33,29,25,0.55) 0%, rgba(33,29,25,0.05) 55%, rgba(33,29,25,0) 75%);
	pointer-events: none;
}
.aqualark-hero-media::after {
	content: ""; position: absolute; top: 20px; left: 20px; width: 16px; height: 16px;
	border-top: 2px solid var(--wp--preset--color--gold); border-left: 2px solid var(--wp--preset--color--gold);
}
.aqualark-hero-tag {
	position: absolute; bottom: 22px; left: 22px; z-index: 2;
	background: rgba(33,29,25,0.72); color: #fff !important;
	padding: 8px 12px; border-radius: 6px; font-size: 0.7rem !important;
	letter-spacing: 0.06em; font-family: var(--wp--preset--font-family--mono);
	margin: 0 !important;
}

/* ---------- Servicio cercano tag row ---------- */
.aqualark-tag-row { border: 1px solid var(--wp--preset--color--line); border-radius: 10px; overflow: hidden; }
.aqualark-tag-row > div { flex: 1; text-align: center; padding: 14px 8px; background: #fff; }
.aqualark-tag-row > div + div { border-left: 1px solid var(--wp--preset--color--line); }
.aqualark-tag-row p { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--primary); margin: 0; }

/* ---------- Methodology ---------- */
.aqualark-methodology { position: relative; }
.aqualark-methodology-line { position: absolute; top: 22px; left: 5%; right: 5%; height: 1px; background: var(--wp--preset--color--line); }
.aqualark-step-circle {
	width: 44px; height: 44px; border-radius: 50%; background: var(--wp--preset--color--primary);
	color: #fff; display: flex; align-items: center; justify-content: center;
	font-family: var(--wp--preset--font-family--mono); font-size: 0.8rem; position: relative; z-index: 1;
	margin-bottom: 16px;
}
.aqualark-step-circle.is-gold { background: var(--aqualark-gold-text); }

/* ---------- Solutions grid ---------- */
.aqualark-solution-card { border-radius: var(--wp--custom--radius--md); overflow: hidden; box-shadow: var(--wp--custom--shadow--card); border: 1px solid var(--wp--preset--color--line); background: #fff; height: 100%; }
.aqualark-solution-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.aqualark-solution-card .aqualark-solution-body { padding: 18px; }
.aqualark-solution-card .aqualark-solution-body p { margin: 0; font-weight: 600; font-size: 0.9rem; }

/* ---------- CTA final ---------- */
.aqualark-cta-final { background: var(--wp--preset--color--ink); color: #fff; }
.aqualark-cta-final h2, .aqualark-cta-final p { color: #fff; }
.aqualark-chip { display: inline-block; font-family: var(--wp--preset--font-family--mono); border: 1px solid #3d382f; border-radius: 100px; padding: 9px 16px; font-size: 0.75rem; margin: 4px; color: #fff; }

/* ---------- Interior hero ---------- */
.aqualark-interior-hero { min-height: 420px; align-items: center; }
.aqualark-crumb { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; color: var(--wp--preset--color--steel); }
.aqualark-challenge-card, .aqualark-evaluate-tag { font-family: var(--wp--preset--font-family--mono); }
.aqualark-safety-callout { background: var(--wp--preset--color--ink); color: #fff; border-radius: var(--wp--custom--radius--lg); padding: 56px; }
.aqualark-safety-callout h2, .aqualark-safety-callout p { color: #fff; }
.aqualark-safety-callout .is-style-outline .wp-block-button__link,
.has-ink-background-color .is-style-outline .wp-block-button__link {
	color: #fff;
	border-color: #fff;
}
.aqualark-safety-callout .is-style-outline .wp-block-button__link:hover,
.has-ink-background-color .is-style-outline .wp-block-button__link:hover {
	color: var(--wp--preset--color--ink);
	background: #fff;
}

/* ---------- Recursos técnicos: post hero (revista de campo) ---------- */
.aqualark-post-hero { position: relative; height: 420px; overflow: hidden; margin-bottom: 0; }
.aqualark-post-hero .wp-block-post-featured-image { margin: 0; height: 100%; }
.aqualark-post-hero .wp-block-post-featured-image img { width: 100%; height: 420px; object-fit: cover; display: block; }
.aqualark-post-hero-overlay {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(180deg, rgba(33,29,25,0.15) 0%, rgba(33,29,25,0.9) 100%);
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: 40px;
}
.aqualark-post-hero-overlay .aqualark-kicker { color: #e7c88c; margin: 0 0 12px; }
.aqualark-post-hero-overlay h1 { color: #fff; margin: 0; max-width: 780px; }

/* ---------- Recursos técnicos: tarjetas de riesgo/peligro con numeral grande ---------- */
.aqualark-hazard-card { position: relative; overflow: hidden; }
.aqualark-hazard-num {
	font-family: var(--wp--preset--font-family--mono); font-weight: 600;
	font-size: 2.5rem; color: var(--wp--preset--color--bg-soft);
	position: absolute; top: 6px; right: 14px; line-height: 1; z-index: 0;
}
.aqualark-hazard-card h3, .aqualark-hazard-card p { position: relative; z-index: 1; }
.aqualark-pull-gold { font-family: var(--wp--preset--font-family--heading); color: var(--aqualark-gold-text); font-size: 1.5rem; font-weight: 700; line-height: 1.35; margin: 8px 0; }

/* ---------- Checklist de autodiagnóstico interactivo ---------- */
.aq-checklist { display: grid; grid-template-columns: 1fr 320px; gap: 40px; align-items: start; margin-top: 8px; }
.aq-cl-meta { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 20px; background: #fff; margin-bottom: 28px; }
.aq-cl-meta label { display: block; font-family: var(--wp--preset--font-family--mono); font-size: 0.65rem; letter-spacing: 0.06em; color: var(--wp--preset--color--steel); text-transform: uppercase; margin-bottom: 6px; }
.aq-cl-meta input[type=text] { width: 100%; border: none; border-bottom: 1px solid var(--wp--preset--color--line); padding: 4px 0; font-family: var(--wp--preset--font-family--body); font-size: 0.9rem; background: transparent; }
.aq-cl-meta input[type=text]:focus { outline: none; border-bottom-color: var(--wp--preset--color--primary); }
.aq-cl-block-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--wp--preset--color--primary); text-transform: uppercase; margin: 32px 0 16px; }
.aq-cl-block-label:first-child { margin-top: 0; }
.aq-cl-question { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 14px; padding: 18px 20px; margin-bottom: 12px; }
.aq-cl-qtext { font-size: 0.92rem; line-height: 1.5; margin: 0 0 14px; color: var(--wp--preset--color--ink); }
.aq-cl-opts { display: flex; gap: 8px; flex-wrap: wrap; }
.aq-cl-opt { font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--wp--preset--color--line); background: #fff; color: var(--wp--preset--color--steel); }
.aq-cl-opt:hover { border-color: var(--wp--preset--color--primary); }
.aq-cl-opt.is-selected { background: var(--wp--preset--color--primary); color: #fff; border-color: var(--wp--preset--color--primary); }
.aq-cl-panel { position: sticky; top: 24px; background: var(--wp--preset--color--ink); border-radius: var(--wp--custom--radius--lg); padding: 32px 28px; }
.aq-cl-panel-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.1em; color: #a39d92; text-transform: uppercase; margin-bottom: 20px; }
.aq-cl-gauge-wrap { display: flex; justify-content: center; margin-bottom: 8px; }
.aq-cl-gauge-pct { font-family: var(--wp--preset--font-family--heading); font-size: 1.9rem; font-weight: 800; fill: #fff; }
.aq-cl-progress { text-align: center; font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; color: var(--wp--preset--color--steel); margin-bottom: 18px; }
.aq-cl-classlabel { text-align: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.92rem; margin: 14px 0 6px; }
.aq-cl-classtext { text-align: center; color: #a39d92; font-size: 0.78rem; line-height: 1.55; margin: 0 0 22px; }
.aq-cl-panel .wp-block-button__link { display: block; text-align: center; }
.aq-cl-send { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 20px; }
.aq-cl-send-label { font-family: var(--wp--preset--font-family--mono); font-size: 0.68rem; letter-spacing: 0.08em; color: #a39d92; text-transform: uppercase; margin-bottom: 12px; text-align: center; }
.aq-cl-send .aq-cl-hp { position: absolute; left: -9999px; opacity: 0; }
.aq-cl-send input[data-aq-cl-field] { display: block; width: 100%; margin-bottom: 8px; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #fff; font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; }
.aq-cl-send input[data-aq-cl-field]::placeholder { color: #746e64; }
.aq-cl-send input[data-aq-cl-field]:focus { outline: none; border-color: var(--wp--preset--color--gold); }
.aq-cl-submit-btn { display: block; width: 100%; margin-top: 6px; padding: 12px; border: none; border-radius: 10px; background: var(--wp--preset--color--primary); color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 600; font-size: 0.85rem; cursor: pointer; }
.aq-cl-submit-btn:hover { background: #4b52a8; }
.aq-cl-submit-btn:disabled { opacity: 0.6; cursor: default; }
.aq-cl-send-notice { margin: 10px 0 0; font-size: 0.8rem; text-align: center; line-height: 1.5; }
.aq-cl-send-notice.is-success { color: #7fb2a8; }
.aq-cl-send-notice.is-error { color: #d1893f; }
@media (max-width: 780px) {
	.aq-checklist { grid-template-columns: 1fr; }
	.aq-cl-panel { position: static; }
	.aq-cl-meta { grid-template-columns: 1fr 1fr; }
}

/* ---------- Contact form ---------- */
.aqualark-form-field { margin-bottom: 18px; }
.aqualark-form-field label { display: block; font-weight: 600; font-size: 0.85rem; margin-bottom: 6px; }
.aqualark-form-field input[type=text], .aqualark-form-field input[type=email], .aqualark-form-field input[type=tel], .aqualark-form-field select, .aqualark-form-field textarea {
	width: 100%; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 12px 14px;
	font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; background: #fff;
}
.aqualark-form-field textarea { min-height: 120px; resize: vertical; }
.aqualark-symptom-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; }
.aqualark-symptom-grid label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 400; border: 1px solid var(--wp--preset--color--line); border-radius: 8px; padding: 10px 12px; }
.aqualark-hp-field { position: absolute; left: -9999px; opacity: 0; }
.aqualark-form-notice { border-radius: 10px; padding: 14px 18px; margin-bottom: 24px; font-size: 0.9rem; }
.aqualark-form-notice.is-success { background: #eef1e4; color: #3c5a1e; }
.aqualark-form-notice.is-error { background: #f7e8e4; color: #8a3b24; }

/* ---------- Footer (centered) ---------- */
.aqualark-footer-inner { text-align: center; }
.aqualark-footer .wp-block-site-logo { justify-content: center; }
.aqualark-footer .wp-block-site-logo img { height: auto; }
.aqualark-footer-groups { column-gap: 72px; row-gap: 32px; text-align: left; margin-bottom: 0; align-items: flex-start !important; }
.aqualark-footer-heading {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.7rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--aqualark-gold-text);
	font-weight: 500;
	margin: 0 0 16px;
}
.aqualark-footer-nav .wp-block-navigation-item__content {
	font-size: 0.85rem;
	color: var(--wp--preset--color--steel);
	padding: 5px 0;
}
.aqualark-footer-bottom { column-gap: 16px; row-gap: 4px; }

/* ---------- WhatsApp FAB ---------- */
.aqualark-whatsapp-fab {
	position: fixed; bottom: 26px; right: 26px; z-index: 60;
	width: 56px; height: 56px; border-radius: 50%; background: #25D366; color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0,0,0,0.22);
	transition: transform 150ms ease;
}
.aqualark-whatsapp-fab:hover { transform: scale(1.06); color: #fff; }

/* ---------- Motion ---------- */
.aqualark-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
	.aqualark-reveal { opacity: 0; transform: translateY(14px); transition: opacity 500ms ease, transform 500ms ease; }
	.aqualark-reveal.is-visible { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
	.aqualark-header .wp-block-site-logo img { height: 56px; }
	.aqualark-header-row2 { justify-content: flex-end; }
	.aqualark-methodology-line { display: none; }
	.aqualark-safety-callout { padding: 32px; }
	.aqualark-whatsapp-fab { bottom: 18px; right: 18px; width: 50px; height: 50px; }
	.aqualark-footer-groups { flex-wrap: wrap !important; justify-content: center !important; row-gap: 36px; }
}