/*
Theme Name: Con K Inmobiliaria Child
Theme URI: https://conk-inmobiliaria.local
Description: Astra child theme for Con K Inmobiliaria — region-aware real estate catalog with Wasi sync, subscribers, and WhatsApp CTA.
Author: Conk
Template: astra
Version: 1.0.0
License: GPL-2.0-or-later
Text Domain: conk-inmobiliaria
*/

/*
 * Consolidated CSS — Con K Inmobiliaria Astra child theme.
 *
 * Sections (use Find to navigate):
 *   1. Design tokens (CSS variables + base reset)
 *   2. Topbar (binacional region chip + contact + socials)
 *   3. Tricolor stripe (binacional flag — top of every template)
 *   4. Hero searchbar (compact form on single/archive)
 *   5. Property cards (archive grid + carousel + badges)
 *   6. Single property (gallery, overview, ficha, amenidades, sidebar form)
 *   7. Marquee keyframe + reduced-motion fallback
 *   8. Footer (4-column grid + bottom bar)
 *   9. Buttons + utilities (btn, badge, pager, breadcrumb)
 *  10. Responsive breakpoints
 *
 * Total target: ~410 lines consolidated from the v2 mockup.
 */

:root {
  --conk-navy: #012F6E;
  --conk-navy-deep: #021A40;
  --conk-blue: #25A0F8;
  --conk-blue-strong: #1387E4;
  --conk-blue-soft: #8CC7F7;
  --conk-blue-wash: #EAF3FD;
  --conk-blue-wash2: #EDF1F7;
  --conk-gold: #E9A23C;
  --conk-gold-deep: #C67F19;
  --conk-ink: #1A2432;
  --conk-muted: #6A7386;
  --conk-line: #E7EAF1;
  --conk-panel: #F5F7FB;
  --conk-wa: #25D366;
  --conk-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --conk-co-y: #FCD116;
  --conk-co-b: #003893;
  --conk-co-r: #CE1126;
  --conk-ve-y: #FFCC00;
  --conk-ve-b: #00247D;
  --conk-ve-r: #CF142B;
  --conk-shadow-sm: 0 1px 2px rgba(2, 26, 64, .05), 0 8px 22px rgba(2, 26, 64, .06);
  --conk-shadow-md: 0 14px 40px rgba(2, 26, 64, .12);
  --conk-shadow-lg: 0 30px 70px rgba(2, 26, 64, .20);
}

/* ---------- 1. Base reset + typography ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body { margin: 0; font-family: var(--conk-sans); color: var(--conk-ink); background: #fff; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }

img { max-width: 100%; display: block; }

a { text-decoration: none; color: inherit; }

button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 { text-wrap: balance; }

p, li, .lead, .tt small, .desc p, .dloc, .ctatx p, .lsub, .sub { text-wrap: pretty; }

.conk-wrap { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

.conk-section { padding: 56px 0; }

/* The sticky header partially covers the breadcrumb on first paint —
 * nudge the archive/detail content down a touch to clear it. */
.conk-archive,
.conk-detail {
  padding-top: 8px;
}

/* Filter bar rows (Row 1: seg/search/buscar — Row 2: tipo/precio/hab —
 * Row 3: Más filtros toggle) — each is its own .conk-fbar block, stacked
 * with a little breathing room between them. */
.conk-fbar-row1,
.conk-fbar-row2 {
  margin-bottom: 12px;
}

.conk-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }

.conk-section-head h2 { margin: 0; font-size: clamp(23px, 3.4vw, 30px); font-weight: 700; letter-spacing: -.02em; color: var(--conk-navy-deep); }

.conk-section-head .sub { color: var(--conk-muted); font-size: 14px; margin-top: 6px; }

.conk-viewall { color: var(--conk-blue-strong); font-weight: 600; font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; }

.conk-viewall:hover { color: var(--conk-navy); }

.conk-h1 { margin: 0; font-size: clamp(24px, 3.6vw, 32px); font-weight: 800; letter-spacing: -.02em; color: var(--conk-navy-deep); }

.conk-lsub { margin: 8px 0 0; color: var(--conk-muted); font-size: 14px; }

.conk-lsub b { color: var(--conk-navy-deep); }

.conk-muted { color: var(--conk-muted); }

.conk-note { font-size: 12px; color: #9aa3b5; font-style: italic; }

.conk-breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--conk-muted); margin-bottom: 14px; }

.conk-breadcrumbs a { color: var(--conk-blue-strong); }

.conk-breadcrumbs a:hover { color: var(--conk-navy); }

.conk-breadcrumbs span.sep { color: #c2c9d6; }

.conk-breadcrumbs span.current { color: var(--conk-navy-deep); font-weight: 600; }

/* ---------- 2. Topbar ---------- */

.conk-topbar { background: var(--conk-navy-deep); color: #cfd8ea; font-size: 12.5px; }

.conk-topbar .conk-wrap { display: flex; align-items: center; justify-content: space-between; height: 40px; gap: 14px; }

.conk-topbar .tb-left { display: flex; align-items: center; gap: 22px; min-width: 0; overflow: hidden; }

.conk-topbar .tb-left span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }

.conk-topbar .tb-left a { color: inherit; }

.conk-topbar .tb-left a:hover { color: #fff; }

.conk-topbar .tb-left svg { opacity: .8; flex: 0 0 auto; }

.conk-topbar .tb-right { display: flex; align-items: center; gap: 12px; white-space: nowrap; }

.conk-topbar .tb-right a:not(.conk-region-pill) { width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, .08); display: grid; place-items: center; transition: background .15s; }

.conk-topbar .tb-right a:not(.conk-region-pill):hover { background: var(--conk-blue); }

.conk-topbar .tb-right .flw { color: #8b97b5; margin-right: 2px; font-size: 12px; }

@media (max-width: 640px) { .conk-topbar .tb-left > span:nth-child(1), .conk-topbar .tb-right .flw { display: none; } }

/* ---------- 3. Tricolor stripe (binacional) ---------- */

.conk-tricolor { height: 4px; flex: 0 0 auto; background: linear-gradient(90deg, var(--conk-gold) 0 33.3%, var(--conk-blue) 33.3% 66.6%, var(--conk-co-r) 66.6% 100%); }

body[data-conk-region="VE"] .conk-tricolor,
.conk-tricolor.is-ve { background: linear-gradient(90deg, var(--conk-ve-y) 0 33.3%, var(--conk-ve-b) 33.3% 66.6%, var(--conk-ve-r) 66.6% 100%); }

.conk-flag-strip { width: 22px; height: 14px; border-radius: 3px; flex: 0 0 auto; background: linear-gradient(180deg, var(--conk-co-y) 0 50%, var(--conk-co-b) 50% 75%, var(--conk-co-r) 75% 100%); box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); display: inline-block; vertical-align: middle; }

/* ---------- 4. Buttons + badges ---------- */

.conk-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 10px; font-weight: 600; font-size: 14px; padding: 12px 20px; line-height: 1; transition: transform .15s, box-shadow .15s; cursor: pointer; }

.conk-btn:hover { transform: translateY(-1px); }

.conk-btn-primary { background: var(--conk-blue); color: #fff; box-shadow: 0 8px 20px rgba(37, 160, 248, .32); }

.conk-btn-primary:hover { box-shadow: 0 12px 26px rgba(37, 160, 248, .42); }

.conk-btn-navy { background: var(--conk-navy); color: #fff; }

.conk-btn-navy:hover { background: var(--conk-navy-deep); }

.conk-btn-outline { background: #fff; color: var(--conk-navy); border: 1.5px solid var(--conk-line); }

.conk-btn-outline:hover { border-color: var(--conk-blue); color: var(--conk-blue-strong); }

.conk-btn-wa { background: var(--conk-wa); color: #053A1B; }

.conk-btn-wa:hover { background: #1fbb5a; }

.conk-btn-wfull { width: 100%; padding: 13px; }

.conk-badge { position: absolute; top: 12px; left: 12px; color: #fff; font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; letter-spacing: .01em; backdrop-filter: blur(2px); }

.conk-badge.sale { background: var(--conk-navy); }

.conk-badge.rent { background: var(--conk-blue); }

.conk-badge.feat { background: var(--conk-gold); color: #3a2400; }

.conk-badge.new { background: var(--conk-co-r); }

.conk-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 20px; background: var(--conk-blue-wash); color: var(--conk-navy); font-size: 12px; font-weight: 600; }

.conk-pager { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 34px; }

.conk-pager .page-numbers { min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid var(--conk-line); background: #fff; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--conk-navy); display: inline-flex; align-items: center; justify-content: center; }

.conk-pager .page-numbers:hover { border-color: var(--conk-blue); color: var(--conk-blue-strong); }

.conk-pager .page-numbers.current { background: var(--conk-navy); color: #fff; border-color: var(--conk-navy); }

/* ---------- 5. Property cards (archive) ---------- */

.conk-pgrid { display: grid; grid-template-columns: 1fr; gap: 22px; }

@media (min-width: 600px) { .conk-pgrid { grid-template-columns: 1fr 1fr; gap: 22px; } }

@media (min-width: 940px) { .conk-pgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }

.conk-pcard { background: #fff; border: 1px solid var(--conk-line); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease; color: inherit; will-change: transform; }

.conk-pcard:hover { box-shadow: var(--conk-shadow-md); transform: translateY(-4px); border-color: rgba(37, 160, 248, .35); }

/* `.conk-pcard` is a plain `<div>` — cards with a footer CTA (the WhatsApp
 * button, an `<a>`) can't wrap the whole card in one big `<a>` too, since
 * nested `<a>` tags are invalid HTML and get silently split apart by the
 * browser's parser (this broke every archive/taxonomy card once the
 * WhatsApp button started actually rendering). `.conk-pcard-link` is the
 * real link, wrapping just the media+body; the footer's own links
 * (WhatsApp CTA, "Ver detalle") sit outside it as siblings. */
.conk-pcard-link { display: block; color: inherit; text-decoration: none; }

.conk-pcard-link:focus-visible { outline: 2px solid var(--conk-blue); outline-offset: 2px; }

.conk-pcard .media { position: relative; aspect-ratio: 16/11; overflow: hidden; background: var(--conk-blue-wash); }

.conk-pcard .media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s ease; }

.conk-pcard:hover .media img { transform: scale(1.06); }

.conk-pcard .body { padding: 16px 17px 18px; display: flex; flex-direction: column; flex: 1; gap: 9px; }

.conk-pcard .body h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--conk-navy-deep); line-height: 1.3; letter-spacing: -.005em; }

/* 2-line clamp on card titles — keeps cards aligned in 4-up grids */
.conk-pcard .body h3 { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.3em * 2); }

.conk-pcard .loc { display: flex; align-items: center; gap: 6px; color: var(--conk-muted); font-size: 13px; margin: 0; min-height: 18px; }

.conk-pcard .loc svg { flex: 0 0 auto; opacity: .8; }

.conk-pcard .price { color: var(--conk-blue-strong); font-weight: 700; font-size: 19px; letter-spacing: -.01em; margin: 4px 0 0; line-height: 1.15; }

.conk-pcard .price small { color: var(--conk-muted); font-weight: 500; font-size: 12.5px; margin-left: 4px; }

.conk-pcard .specs { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--conk-line); color: var(--conk-muted); font-size: 12.5px; }

.conk-pcard .specs span { display: inline-flex; align-items: center; gap: 6px; }

.conk-pcard .specs b { color: var(--conk-navy-deep); font-weight: 600; }

.conk-pcard .footer { padding: 0 17px 16px; display: flex; gap: 8px; align-items: center; margin-top: auto; }

.conk-pcard .footer .conk-btn { flex: 1; padding: 10px 12px; font-size: 13px; }

/* The WhatsApp CTA (`.conk-whatsapp-cta`, from the plugin's own stylesheet)
 * isn't a `.conk-btn` — its default 999px pill + unconstrained width let it
 * balloon to most of the footer, squeezing "Ver detalle" into a cramped,
 * wrapped sliver next to it. Match `.conk-btn`'s 10px radius and split the
 * footer 50/50 between the two, same as every other card action row. */
.conk-pcard .footer .conk-whatsapp-cta {
  flex: 1;
  padding: 10px 8px;
  font-size: 12.5px;
  line-height: 1.25;
  border-radius: 10px;
  justify-content: center;
  text-align: center;
}

.conk-pcard .footer .conk-detail-link {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--conk-blue-strong);
  font-weight: 600;
  font-size: 13px;
}

.conk-pcard .footer .conk-detail-link:hover { color: var(--conk-navy); }

.conk-empty { padding: 60px 20px; text-align: center; background: var(--conk-panel); border-radius: 16px; color: var(--conk-muted); }

/* PR 8.5: binacional counter (home.json sec-binacional w-bin-co / w-bin-ve).
 * The Elementor counter widget was replaced with `[conk_property_count]`
 * wrapped in `.conk-bin-counter` so the live WP_Query count renders with
 * the same large bold typography as the hardcoded counter. */
.conk-bin-counter {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  color: var(--conk-navy-deep);
  line-height: 1.05;
  letter-spacing: -.01em;
}

.conk-bin-counter.is-ve { color: #FFC400; }

/* ---------- 6. Filter bar ---------- */

/* position:sticky dropped — with two competing sticky elements (the real
 * Elementor header + this bar) and an ancestor chain that isn't fully
 * predictable across HFE/Elementor/Astra wrappers, sticky is exactly the
 * kind of thing that silently misbehaves (including full-width layout
 * shifts) without throwing any visible error. Not essential to the
 * feature — a plain static bar is a strictly safer default. */
.conk-filters { background: #fff; border: 1px solid var(--conk-line); border-radius: 16px; margin: 0 20px 20px; padding: 18px 20px 16px; box-shadow: 0 6px 18px rgba(2, 26, 64, .04); overflow-x: auto; }

.conk-filters .conk-wrap { max-width: none; margin: 0; padding: 0; }

@media (min-width: 1240px) {
  .conk-filters { margin-left: auto; margin-right: auto; max-width: 1200px; }
}

.conk-fbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }

.conk-seg { display: flex; background: var(--conk-blue-wash); border-radius: 12px; padding: 5px; gap: 3px; flex: 0 0 auto; align-self: stretch; }

.conk-seg-btn { border: 0; background: transparent; font-weight: 600; font-size: 14px; color: var(--conk-navy); padding: 10px 17px; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }

.conk-seg-btn.is-on { background: var(--conk-navy); color: #fff; box-shadow: 0 4px 10px rgba(1, 47, 110, .25); }

.conk-seg-btn:not(.is-on):hover { background: rgba(255, 255, 255, .55); }

.conk-fsearch { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid var(--conk-line); border-radius: 12px; color: var(--conk-muted); background: #fff; transition: border-color .15s, box-shadow .15s; }

.conk-fsearch:focus-within { border-color: var(--conk-blue); box-shadow: 0 0 0 3px rgba(37, 160, 248, .14); }

.conk-fsearch input { border: 0; outline: none; font-family: inherit; font-size: 14.5px; width: 100%; color: var(--conk-ink); background: none; padding: 13px 0; }

.conk-fsel { display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid var(--conk-line); border-radius: 12px; padding: 8px 14px; min-width: 145px; background: #fff; transition: border-color .15s, box-shadow .15s; }

.conk-fsel:focus-within { border-color: var(--conk-blue); box-shadow: 0 0 0 3px rgba(37, 160, 248, .14); }

.conk-fsel > label, .conk-fsel > small { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--conk-muted); font-weight: 600; }

.conk-fsel select { border: 0; outline: none; font-family: inherit; font-size: 14.5px; color: var(--conk-navy-deep); font-weight: 500; background: none; cursor: pointer; padding: 2px 0; width: 100%; }

.conk-fprice { display: flex; flex-direction: column; justify-content: center; gap: 3px; border: 1px solid var(--conk-line); border-radius: 12px; padding: 8px 14px; background: #fff; min-width: 200px; transition: border-color .15s, box-shadow .15s; }

.conk-fprice:focus-within { border-color: var(--conk-blue); box-shadow: 0 0 0 3px rgba(37, 160, 248, .14); }

.conk-fprice-label { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--conk-muted); font-weight: 600; }

.conk-pr2 { display: flex; align-items: center; gap: 9px; }

.conk-pr2 input { width: 100%; flex: 1 1 0; min-width: 0; border: 0; outline: none; font-family: inherit; font-size: 14.5px; color: var(--conk-navy-deep); background: none; padding: 2px 0; }

/* Small dot between Min/Max — reads as "range", not two unrelated fields. */
.conk-pr2-sep { width: 4px; height: 4px; flex: 0 0 auto; border-radius: 50%; background: #c2c9d6; }

/* Row 2 (Tipo / Precio / Habitaciones) fills the full bar width — three
 * equal-ish flexible controls instead of leaving space unused. */
.conk-fbar-row2 > .conk-fsel,
.conk-fbar-row2 > .conk-fprice {
  flex: 1 1 0;
  min-width: 160px;
}

/* Bump the submit button visual weight — was the same size as fields, now
 * matches mockup v2's "find" button. */
.conk-fbar > .conk-btn { padding: 14px 22px; font-size: 14px; border-radius: 12px; align-self: stretch; }

.conk-fnote { margin: 12px 0 0; font-size: 12px; color: #9aa3b5; font-style: italic; }

/* Screen-reader-only utility (PR 8.5 a11y) — visually hidden but exposed to
 * assistive tech so every filter control has an accessible label. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible focus ring on every filter control (PR 8.5 a11y — extends the
 * existing `.conk-pcard:focus-visible` rule from PR 6). */
.conk-filters input:focus-visible,
.conk-filters select:focus-visible,
.conk-filters button:focus-visible,
.conk-filters .conk-seg-btn:focus-visible {
  outline: 2px solid var(--conk-navy);
  outline-offset: 2px;
}

/* PR 8.5: stack the filter bar vertically on small viewports so every
 * control reaches full content width and the form stays usable at 320px. */
@media (max-width: 760px) {
  .conk-filters { flex-direction: column; }
  .conk-fbar { flex-direction: column; align-items: stretch; }
  .conk-fbar > .conk-btn { align-self: stretch; }
  .conk-seg { align-self: stretch; }
  .conk-fsearch,
  .conk-fsel,
  .conk-fprice { min-width: 0; }
}

/* ---------- 7. Single property page ---------- */

.conk-detail-head { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }

.conk-detail-badges { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }

.conk-dbadge { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: 20px; color: #fff; display: inline-block; }

.conk-dbadge.sale { background: var(--conk-navy); }

.conk-dbadge.rent { background: var(--conk-blue); }

.conk-dbadge.feat { background: var(--conk-gold); color: #3a2400; }

.conk-dloc { display: flex; align-items: center; gap: 7px; color: var(--conk-muted); font-size: 14.5px; margin: 8px 0 0; }

.conk-dprice { text-align: right; display: flex; flex-direction: column; gap: 2px; }

.conk-dprice .pnum { font-size: clamp(24px, 3.4vw, 30px); font-weight: 800; color: var(--conk-blue-strong); letter-spacing: -.01em; line-height: 1; }

.conk-dprice .pper { font-size: 13px; color: var(--conk-muted); }

.conk-dprice .pcode { font-size: 12px; color: #9aa3b5; margin-top: 4px; }

.conk-dgrid { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: start; }

@media (min-width: 940px) { .conk-dgrid { grid-template-columns: 1fr 360px; gap: 30px; } }

.conk-dmain { min-width: 0; display: flex; flex-direction: column; gap: 22px; }

.conk-card { background: #fff; border: 1px solid var(--conk-line); border-radius: 16px; padding: 22px; box-shadow: var(--conk-shadow-sm); }

.conk-card h2 { margin: 0 0 16px; font-size: 18px; font-weight: 700; color: var(--conk-navy-deep); }

/* gallery — legacy .conk-gmain / .conk-gthumbs 4-thumb grid removed in
 * PR wasi-images (superseded by `.conk-gallery-carousel`, see the
 * "Gallery carousel" section below). */

/* overview */

.conk-ov { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 10px; padding: 18px; }

@media (min-width: 560px) { .conk-ov { grid-template-columns: repeat(3, 1fr); } }

@media (min-width: 940px) { .conk-ov { grid-template-columns: repeat(6, 1fr); } }

.conk-ovi { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 8px 4px; }

.conk-ovi svg { width: 26px; height: 26px; color: var(--conk-blue-strong); }

.conk-ovi b { font-size: 15px; color: var(--conk-navy-deep); font-weight: 700; }

.conk-ovi small { font-size: 11.5px; color: var(--conk-muted); }

/* description */

.conk-desc p { margin: 0 0 12px; color: #39435a; font-size: 15px; line-height: 1.7; }

.conk-desc ul { margin: 0 0 12px; padding-left: 18px; color: #39435a; font-size: 14.5px; line-height: 1.9; }

/* ficha técnica */

.conk-dtable { display: grid; grid-template-columns: 1fr; gap: 0; }

@media (min-width: 560px) { .conk-dtable { grid-template-columns: 1fr 1fr; gap: 0 26px; } }

.conk-dtable .row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--conk-line); font-size: 14px; }

.conk-dtable .row span { color: var(--conk-muted); }

.conk-dtable .row b { color: var(--conk-navy-deep); font-weight: 600; text-align: right; }

/* amenidades */

.conk-amen { display: grid; grid-template-columns: 1fr; gap: 12px; }

@media (min-width: 560px) { .conk-amen { grid-template-columns: 1fr 1fr; } }

.conk-amen span { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #39435a; }

.conk-amen svg { width: 20px; height: 20px; color: var(--conk-blue-strong); flex: 0 0 auto; }

/* sidebar contact form */

.conk-dside { position: relative; }

@media (min-width: 940px) { .conk-dside { position: sticky; top: 92px; } }

/* PR responsive-ui-polish-1a / T2 — Mobile sidebar reorder (v3 canonical).
 * On phones the contact form must appear ABOVE the gallery so visitors
 * can submit the lead form before scrolling past the images (matches
 * conk-preview-v3/inmueble.html line 345). On desktop the sidebar
 * returns to its grid position (right column, sticky). */
@media (max-width: 939px) { .conk-dside { order: -1; } }

.conk-cform { background: #fff; border: 1px solid var(--conk-line); border-radius: 18px; padding: 22px; box-shadow: var(--conk-shadow-md); display: flex; flex-direction: column; gap: 14px; }

.conk-agentmini { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; border-bottom: 1px solid var(--conk-line); }

.conk-agentmini .av { width: 42px; height: 42px; border-radius: 11px; background: linear-gradient(150deg, var(--conk-navy), var(--conk-navy-deep)); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: 0 0 auto; }

.conk-agentmini b { display: block; font-size: 14.5px; color: var(--conk-navy-deep); font-weight: 700; }

.conk-agentmini small { font-size: 12.5px; color: var(--conk-muted); }

.conk-cform h3 { margin: 0; font-size: 16px; font-weight: 700; color: var(--conk-navy-deep); }

.conk-cbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 6px; }

.conk-cbtns .conk-btn { width: 100%; padding: 12px 8px; font-size: 13.5px; }

/* The WhatsApp CTA (`.conk-whatsapp-cta`, from the plugin's own stylesheet)
 * isn't a `.conk-btn` — its own 999px pill radius is meant for a short,
 * one-line button. Squeezed into this half-width grid cell its label wraps
 * to 3 lines, and at that height the same 999px radius rounds it into a
 * vertical stadium/blob instead of a button matching "Llamar" next to it. */
.conk-cbtns .conk-whatsapp-cta {
  width: 100%;
  padding: 12px 8px;
  font-size: 13.5px;
  border-radius: 10px;
  text-align: center;
  justify-content: center;
}

.conk-cform-note { font-size: 11.5px; color: #9aa3b5; text-align: center; margin: 8px 0 0; }

/* similar properties */

.conk-similar { margin-top: 36px; }

/* CTA band */

/* Full-bleed background — `.ast-container` (Astra's content wrapper) caps
 * this section at 1200px like everything else on the page; break out of it
 * with the standard 100vw/negative-margin trick so the band reaches both
 * edges of the viewport, matching the reference mockup. The inner
 * `.conk-wrap` still centers/caps the actual content at 1200px. */
.conk-ctaband {
  background: linear-gradient(120deg, var(--conk-navy-deep), var(--conk-navy) 65%, #083a7e);
  color: #fff;
  margin-top: 50px;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

.conk-ctaband .conk-wrap { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; padding: 38px 20px; }

/* Explicit color — Astra's own heading rule (`.entry-content h2`, etc.)
 * targets `h2` directly and wins over the inherited white from
 * `.conk-ctaband`'s `color:#fff` (a rule matching the element beats
 * inheritance regardless of the ancestor's specificity). `.conk-ctatx p`
 * already set its own color for the same reason — the heading needs one
 * too, or it renders in Astra's default dark heading color on this dark
 * background, unreadable. */
.conk-ctatx h2 { margin: 0 0 6px; font-size: clamp(21px, 3vw, 27px); font-weight: 700; letter-spacing: -.01em; color: #fff; }

.conk-ctatx p { margin: 0; color: #c3d2ea; font-size: 14.5px; }

.conk-ctabtns { display: flex; flex-wrap: wrap; gap: 12px; }

/* Match the WhatsApp CTA's corner radius to the outline "Llamar ahora"
 * button right next to it (`.conk-btn` uses 10px) — its own stylesheet
 * defaults to a 999px pill, which reads as a mismatched shape sitting next
 * to a rounded-rect button. */
.conk-ctabtns .conk-whatsapp-cta { border-radius: 10px; }

/* ---------- 8. Marquee ---------- */

.conk-marquee { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }

.conk-marquee .track { display: flex; gap: 16px; animation: conkMarqueeX 40s linear infinite; flex: 0 0 auto; }

@keyframes conkMarqueeX { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) { .conk-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .conk-marquee .track { animation: none; } }

/* ---------- 9. Footer ---------- */

.conk-footer { background: var(--conk-navy-deep); color: #c3d2ea; padding: 50px 0 24px; margin-top: 60px; font-size: 14px; }

.conk-foot-grid { display: grid; grid-template-columns: 1fr; gap: 32px; padding-bottom: 30px; }

@media (min-width: 640px) { .conk-foot-grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 960px) { .conk-foot-grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; } }

.conk-foot-grid h4 { margin: 0 0 14px; color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.conk-foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }

.conk-foot-grid a { color: #b6c5dc; transition: color .15s; }

.conk-foot-grid a:hover { color: var(--conk-blue); }

.conk-foot-brand p { margin: 12px 0 16px; color: #98aac4; line-height: 1.6; }

.conk-foot-brand .soc { display: flex; gap: 8px; }

.conk-foot-brand .soc a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14); display: grid; place-items: center; transition: background .15s, border-color .15s; }

.conk-foot-brand .soc a:hover { background: var(--conk-blue); border-color: var(--conk-blue); }

.conk-foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding-top: 22px; font-size: 13px; color: #8b97b5; }

.conk-foot-bottom .heart-line { display: inline-flex; align-items: center; gap: 6px; }

/* ---------- 10. Astra bridge ---------- */

.ast-container,
.ast-article-single { max-width: 1200px; }

.site-content .conk-detail,
.site-content .conk-archive,
.site-content .conk-listhead { padding: 0; }

/* `.site-content .ast-container` is `display:flex; flex-direction:row;
 * flex-wrap:nowrap` (Astra's own layout mechanism) — single-property.php
 * outputs 3 sibling top-level sections (`.conk-detail`, `.conk-related`,
 * `.conk-ctaband`). Giving them `width:100%` alone just made all three
 * *fight* for the same nowrap row (each squeezed to ~1/3 width, still side
 * by side); flex-wrap didn't help either since 3×100% never wraps onto
 * separate lines cleanly. Reverting the content container to plain block
 * stacking is what's actually wanted here — nothing in this theme relies
 * on the content area itself being a flex row. */
.site-content .ast-container {
  display: block;
}

/* hide Astra post meta noise on property pages */

.single-cpt_property .entry-title,
.single-cpt_property .posted-on,
.single-cpt_property .byline,
.single-cpt_property .entry-meta { display: none; }

/* ---------- 11. Responsive ---------- */

@media (max-width: 600px) { .conk-detail-head { flex-direction: column; } .conk-dprice { text-align: left; } }

/* ---------- 12. PR 8.6 — Tricolor stripe (rendered from Elementor header + contact page) ---------- */

/* The `<div class="conk-tricolor">` is emitted by the Elementor html widget
 * (see `header.json` + `contact.json`). The 3 nested spans provide a solid
 * CSS-only stripe — no image dependency (REQ-5). */
/* Elementor's own section-stretched JS already breaks this out of the
 * .ast-container padding correctly (same mechanism the topbar/header
 * sections rely on, and their backgrounds do reach the true edge). The
 * visible gap was Elementor's default 10px column padding
 * (.elementor-column-gap-default > .elementor-column > .elementor-element-populated),
 * never zeroed for this section. */
.conk-tricolor-section > .elementor-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.conk-tricolor-section .elementor-element-populated {
  padding: 0 !important;
}

.conk-tricolor {
  display: flex;
  height: 4px;
  width: 100%;
  flex: 0 0 auto;
}

.conk-tricolor > span {
  flex: 1 1 0;
  display: block;
}

.conk-tricolor > span:nth-child(1) { background: var(--conk-co-y); }
.conk-tricolor > span:nth-child(2) { background: var(--conk-co-b); }
.conk-tricolor > span:nth-child(3) { background: var(--conk-co-r); }

/* VE mirror — applied when the cookie selects Venezuela */
body.conk-region-ve .conk-tricolor > span:nth-child(1) { background: var(--conk-ve-y); }
body.conk-region-ve .conk-tricolor > span:nth-child(2) { background: var(--conk-ve-b); }
body.conk-region-ve .conk-tricolor > span:nth-child(3) { background: var(--conk-ve-r); }

/* ---------- 13. PR 8.6 — Topbar (HFE-injected) ---------- */

.conk-topbar-section {
  position: relative;
  z-index: 51;
}

/* Cap the strip at 40px tall to match the reference design — Elementor's
 * legacy column (ck-topbar-col) and container (ck-topbar-row/-left/-right)
 * defaults add vertical padding that otherwise pushes this well past 40px. */
.conk-topbar-section,
.conk-topbar-section .elementor-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.conk-topbar-section .elementor-column,
.conk-topbar-section .e-con,
.conk-topbar-section .e-con-inner,
.conk-topbar-section .elementor-widget-wrap {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.conk-topbar-section .conk-topbar-row {
  min-height: 40px;
  height: 40px;
}

.conk-topbar-section .elementor-container,
.conk-topbar-section .conk-topbar-row {
  align-items: center;
}

.conk-topbar-section .tb-left,
.conk-topbar-section .tb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}

.conk-topbar-section .tb-left { gap: 22px; min-width: 0; overflow: hidden; }

.conk-topbar-section .tb-left .elementor-widget-text-editor,
.conk-topbar-section .tb-right .elementor-widget-text-editor {
  margin: 0;
}

.conk-topbar-section .tb-email,
.conk-topbar-section .tb-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #cfd8ea;
  line-height: 1.2;
}

.conk-topbar-section .tb-email a,
.conk-topbar-section .tb-phone a {
  color: inherit;
  text-decoration: none;
}

.conk-topbar-section .tb-email a:hover,
.conk-topbar-section .tb-phone a:hover {
  color: #ffffff;
}

.conk-topbar-section .tb-email svg,
.conk-topbar-section .tb-phone svg {
  opacity: .8;
  flex: 0 0 auto;
  width: 13px !important;
  height: 13px !important;
}

/* Binac chip in topbar right side — shows two micro flags + "+9 años binacional". */
.conk-topbar-section .binac-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #cfd8ea;
  font-size: 12px;
  font-weight: 500;
  margin-right: 6px;
}

.conk-topbar-section .binac-chip .cf {
  display: inline-block;
  width: 14px;
  height: 9px;
  border-radius: 2px;
  vertical-align: middle;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12);
}

.conk-topbar-section .binac-chip .cf.co {
  background: linear-gradient(180deg, var(--conk-co-y) 0 50%, var(--conk-co-b) 50% 75%, var(--conk-co-r) 75% 100%);
}

.conk-topbar-section .binac-chip .cf.ve {
  background: linear-gradient(180deg, var(--conk-ve-y) 0 33.3%, var(--conk-ve-b) 33.3% 66.6%, var(--conk-ve-r) 66.6% 100%);
}

.conk-topbar-section .binac-chip small {
  font-size: 11.5px;
  letter-spacing: .02em;
  color: #b6c5dc;
}

/* Region selector widget — topbar variant */
.conk-topbar-section .elementor-widget-conk-region-selector {
  margin: 0;
}

/* !important here: the plugin's conk-region-selector.css loads after this
 * file and would otherwise win with taller padding sized for a general
 * (non-topbar) usage of the same widget. */
.conk-topbar-section .conk-region-pill {
  background: transparent;
  color: #8b97b5;
  border: 0 !important;
  padding: 3px 9px !important;
  border-radius: 999px;
  font-size: 11.5px !important;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color .15s, background .15s;
}

.conk-topbar-section .conk-region-pill__flag {
  font-size: 12px !important;
}

.conk-topbar-section .conk-region-pill:hover {
  color: #ffffff;
}

.conk-topbar-section .conk-region-pill.is-active {
  color: #ffffff;
  background: rgba(255, 255, 255, .12);
}

/* Síguenos label + socials in topbar right */
.conk-topbar-section .tb-right .flw {
  color: #8b97b5;
  font-size: 12px;
  margin-right: 2px;
}

.conk-topbar-section .tb-right .elementor-widget-social-icons {
  margin: 0;
}

.conk-topbar-section .tb-right .elementor-widget-social-icons a {
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}

.conk-topbar-section .tb-right .elementor-widget-social-icons a:hover {
  background: var(--conk-blue);
  color: #ffffff;
}

/* Simplified topbar on mobile — phone + socials only (matches the current
 * mockup). Previously the whole strip was hidden below 760px; now only the
 * elements that don't fit (email, "Síguenos" label, region pill) drop. */
@media (max-width: 759px) {
  .conk-topbar-section .tb-email,
  .conk-topbar-section .tb-right .flw,
  .conk-topbar-section .elementor-widget-conk-region-selector {
    display: none;
  }
  .conk-topbar-section .tb-left,
  .conk-topbar-section .tb-right {
    gap: 10px;
  }
  /* Elementor's own mobile breakpoint (post-299.css) forces both legacy
   * topbar columns to 100% width, which stacked phone and socials onto two
   * separate lines even though the row itself doesn't wrap. Shrink both to
   * their content so they share one line, phone left / socials right. */
  .conk-topbar-section .elementor-element-ck-topbar-left-col,
  .conk-topbar-section .elementor-element-ck-topbar-right-col {
    width: auto !important;
  }
  .conk-topbar-section .elementor-element-ck-topbar-row,
  .conk-topbar-section .conk-topbar-row {
    justify-content: space-between !important;
  }
}

/* ---------- 14. PR 8.6 — Sticky header + backdrop blur ---------- */

.conk-header-section {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--conk-line);
  transition: box-shadow .2s ease, background .2s ease;
}

/* When JS toggles `.is-stuck` (after scrolling past 80vh) the header
 * strengthens its background — REQ-6 backdrop blur trigger. */
.conk-header-section.is-stuck {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 6px 22px rgba(2, 26, 64, .08);
}

/* Logo + nav + CTA + burger layout */
.conk-header-section .conk-header-row {
  align-items: center;
}

.conk-header-section .ck-logo,
.conk-header-section .elementor-element-ck-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.conk-header-section .ck-logo img,
.conk-header-section .elementor-element-ck-logo img {
  height: 46px;
  width: auto;
  display: block;
}

.conk-header-section .ck-nav-row {
  display: flex;
  align-items: center;
  gap: 24px;
}

.conk-header-section .nav-link {
  color: #33405a;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color .15s;
}

.conk-header-section .nav-link:hover {
  color: var(--conk-blue-strong);
}

.conk-header-section .nav-link.active {
  color: var(--conk-navy-deep);
  font-weight: 600;
}

.conk-header-section .ck-head-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
}

/* Elementor's own mobile breakpoint (post-299.css) forces the legacy
 * actions column to a fixed 40% width — sized for logo + CTA + burger
 * together. With the CTA hidden below 760px it only holds the burger, so
 * that 40% (~124px) plus the logo group's own width overflowed the row and
 * wrapped the burger onto its own line below the logo. Shrink the column
 * to its content instead. */
@media (max-width: 767px) {
  .conk-header-section .elementor-element-ck-head-actions-col {
    width: auto !important;
  }
  /* The logo/nav group carries a hardcoded width:100% (sized for the
   * desktop nav-row it also holds) which, combined with flex-wrap, always
   * forced the actions column onto its own line below the logo — even
   * though both easily fit on one line once the actions column shrinks.
   * flex-basis auto (from content) lets them share the row properly. */
  .conk-header-section .elementor-element-ck-header-left {
    width: auto !important;
    flex: 1 1 auto !important;
  }
  /* Every nested Elementor "boxed" wrapper in this row (row → header-left →
   * their respective .e-con-inner) carries its own 10px vertical padding
   * meant for the desktop layout; stacked together they padded the mobile
   * header far past the ~46px logo it actually needs to fit. Zero them out
   * and let the compact 12px rule below own the row's height instead. */
  .conk-header-section .elementor-element-ck-header-row,
  .conk-header-section .elementor-element-ck-header-row > .e-con-inner,
  .conk-header-section .elementor-element-ck-header-left,
  .conk-header-section .elementor-element-ck-header-left > .e-con-inner {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .conk-header-section .elementor-element-ck-header-row {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  .conk-header-section .ck-logo img,
  .conk-header-section .elementor-element-ck-logo img {
    height: 38px !important;
  }
  .conk-header-section .ck-burger,
  .conk-header-section .elementor-element-ck-burger {
    width: 36px !important;
    height: 36px !important;
  }
  /* Logo and burger were sitting at different vertical offsets. Root cause:
   * this inner row still carries Elementor's `--flex-wrap-mobile: wrap`, so
   * with the (hidden but still flex-participating) nav column present it's
   * a genuine 2-line flex container — logo on line 1, nav column on line 2
   * — and multi-line `align-content` distributes those LINES edge-to-edge
   * (one pinned top, one pinned bottom) rather than `align-items` centering
   * each item within a single shared line. Forcing one line fixes it. */
  .conk-header-section .elementor-element-ck-header-left > .e-con-inner {
    flex-wrap: nowrap !important;
  }
}

/* The icon widget's own wrapper markup (.elementor-icon-wrapper >
 * .elementor-icon > svg) centers the svg via line-height/vertical-align by
 * default, which left it visibly off-center inside the 36px circle. Force
 * real flex centering through every layer instead. */
.conk-header-section .ck-burger .elementor-icon-wrapper,
.conk-header-section .elementor-element-ck-burger .elementor-icon-wrapper,
.conk-header-section .ck-burger .elementor-icon,
.conk-header-section .elementor-element-ck-burger .elementor-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Elementor's css_classes control does not apply to this button widget on
 * this install (same bug as the burger below) — the DOM class is actually
 * `elementor-element-ck-publish-cta`, so `.ck-header-cta` alone never
 * matched and the CTA rendered on every viewport, including mobile, where
 * it wrapped the header row onto extra lines above the burger. */
.conk-header-section .ck-header-cta,
.conk-header-section .ck-publish-cta,
.conk-header-section .elementor-element-ck-publish-cta {
  display: none;
}

@media (min-width: 760px) {
  .conk-header-section .ck-header-cta,
  .conk-header-section .ck-publish-cta,
  .conk-header-section .elementor-element-ck-publish-cta { display: inline-flex; }
}

/* Burger shows under 1000px. Elementor's css_classes control does not apply
 * to native widgets on this install (icon/image), so .elementor-element-{id}
 * is the selector that is actually guaranteed present in the DOM. */
.conk-header-section .ck-burger,
.conk-header-section .elementor-element-ck-burger {
  display: inline-flex;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--conk-line);
  background: #ffffff;
  align-items: center;
  justify-content: center;
  color: var(--conk-navy-deep);
  cursor: pointer;
  overflow: hidden;
}

/* The icon widget's own SVG renders at a fixed 50×50 regardless of its
 * 40×40 circle wrapper — it overflowed the circle, reading as an oversized,
 * disproportionate burger. Constrain it to fit with a little breathing room. */
.conk-header-section .ck-burger svg,
.conk-header-section .elementor-element-ck-burger svg {
  width: 18px !important;
  height: 18px !important;
}

@media (min-width: 1000px) {
  .conk-header-section .ck-burger,
  .conk-header-section .elementor-element-ck-burger { display: none; }
}

/* Reduced-motion — backdrop blur is NOT motion, so it still applies.
 * Only transform/scale transitions get suppressed. */
@media (prefers-reduced-motion: reduce) {
  .conk-header-section { transition: none; }
}

/* ---------- 15. PR 8.6 — 4-col footer (Elementor + HFE) ---------- */

.conk-footer-section {
  position: relative;
  color: #c3d2ea;
}

/* Footer rebuilt 2026-08-23 as an all-container tree (no legacy
 * "column" elType) specifically to get away from the percentage-sum-to-
 * exactly-100% fragility that broke every earlier attempt (rounding +
 * Elementor's own per-ID width rules kept winning in unpredictable ways).
 * Each column now sizes itself via flex-basis + min-width, fully fluid —
 * no responsive breakpoints needed, it wraps naturally when it runs out
 * of room. */
.conk-footer-section .conk-foot-grid {
  width: 100%;
}

.elementor-element-ck-footer-brand {
  flex: 1 1 260px;
  max-width: 340px;
}

.elementor-element-ck-footer-col-quick,
.elementor-element-ck-footer-col-types {
  flex: 1 1 140px;
}

.elementor-element-ck-footer-col-contact {
  flex: 1.3 1 220px;
}

.conk-footer-section .conk-foot-grid h4,
.conk-footer-section .conk-foot-grid h5 {
  margin: 0 0 14px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.conk-footer-section .conk-foot-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.conk-footer-section .conk-foot-grid a {
  color: #b6c5dc;
  transition: color .15s;
  text-decoration: none;
}

.conk-footer-section .conk-foot-grid a:hover {
  color: var(--conk-blue);
}

/* Footer logo widget's css_classes never reaches the DOM here either (same
 * bug as the header logo — image_custom_dimension can't apply without a
 * real attachment ID) so it rendered at native full resolution. Target the
 * guaranteed .elementor-element-{id} selector instead. */
.elementor-element-ck-footer-logo img {
  height: 88px;
  width: auto;
  display: block;
}

/* Brand column socials row */
.conk-footer-section .soc .elementor-widget-social-icons {
  margin: 0;
}

.conk-footer-section .soc .elementor-widget-social-icons a {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: background .15s, color .15s;
}

.conk-footer-section .soc .elementor-widget-social-icons a:hover {
  background: var(--conk-blue);
  border-color: var(--conk-blue);
  color: #ffffff;
}

/* Contact column icon list */
.conk-footer-section .conk-foot-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.conk-footer-section .conk-foot-contact li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #cfd8ea;
  line-height: 1.6;
}

/* Bottom bar (copyright + heart line) */
.conk-footer-bottom-section {
  background: #021A40;
}

.conk-footer-bottom-section .conk-foot-bottom {
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 4px;
}

/* ---------- 16. PR 8.6 — Binacional strip above 4-col ---------- */

.conk-footer-binstrip-section {
  background: var(--conk-navy-deep);
  color: #ffffff;
  position: relative;
}

.conk-footer-binstrip-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--conk-co-y) 0 33.3%, var(--conk-co-b) 33.3% 66.6%, var(--conk-co-r) 66.6% 100%);
}

body.conk-region-ve .conk-footer-binstrip-section::before {
  background: linear-gradient(90deg, var(--conk-ve-y) 0 33.3%, var(--conk-ve-b) 33.3% 66.6%, var(--conk-ve-r) 66.6% 100%);
}

.conk-footer-binstrip-section .conk-binstrip-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.conk-footer-binstrip-section .conk-footer-binstrip {
  align-items: center;
}

.conk-footer-binstrip-section .elementor-heading-title {
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  margin: 0;
}

/* ---------- 17. PR 8.6 — Region hooks (.conk-region-co, .conk-region-ve) ---------- */

/* Default gradient for CO is 90deg (left-to-right). The body class is
 * injected server-side from the `conk_region` cookie via the `body_class`
 * filter in `functions.php`. Elementor templates can then key off
 * `body.conk-region-ve` for the mirrored 270deg gradient (REQ-14). */

body.conk-region-co .conk-hero-section .elementor-background-overlay {
  background-image: linear-gradient(90deg, rgba(2, 26, 64, .9) 0%, rgba(2, 26, 64, .66) 30%, rgba(2, 26, 64, .22) 56%, rgba(2, 26, 64, 0) 78%);
}

body.conk-region-ve .conk-hero-section .elementor-background-overlay {
  background-image: linear-gradient(270deg, rgba(2, 26, 64, .9) 0%, rgba(2, 26, 64, .66) 30%, rgba(2, 26, 64, .22) 56%, rgba(2, 26, 64, 0) 78%);
}

/* VE hero background photo (Caracas mountain skyline) replaces the CO one
 * (Bogotá skyline) — client request 2026-08-24, image #5. */
body.conk-region-ve .conk-hero-section {
  background-image: url('/wp-content/themes/astra-conk-child/assets/img/caracas.jpg') !important;
}

/* VE hero content (badge + title + CTAs + trust strip) is right-aligned,
 * mirroring the CO layout — client feedback 2026-08-24 (image #6/#7
 * reference). The search bar underneath stays full-width/left as-is. The
 * widget-wrap is `display:block`, so `text-align:right` alone correctly
 * repositions inline-level children (the pin badge) and right-aligns text
 * inside block children (the h1's wrapped lines). The CTA row and trust
 * card are flex containers (block-level outer box) that don't respond to
 * an ancestor's `text-align`, so they get an explicit `margin-left: auto`. */
body.conk-region-ve .conk-hero-section .elementor-element-col-hero > .elementor-widget-wrap {
  text-align: right;
}

/* The heading widget's own `align:left` Elementor setting renders as a
 * same-specificity rule directly on `.elementor-heading-title`, which
 * beats the ancestor `text-align:right` above (not inherited, overridden). */
body.conk-region-ve .conk-hero-section .elementor-element-w-hero-title .elementor-heading-title {
  text-align: right !important;
  /* 3 explicit <br>-separated lines (client reference model) -- the
   * ~578px max-width above would wrap some of them a second time. */
  max-width: none !important;
  /* The heading's own box shrinks to a fixed max-width (~578px) anchored
   * at the column's left edge — text-align alone only aligns the text
   * INSIDE that narrow box, not the box itself, which read as "stuck in
   * the middle" instead of flush right (client feedback 2026-08-24).
   * margin-left:auto pushes the whole box to the right edge to match the
   * badge/CTAs/trust strip. */
  margin-left: auto !important;
}

body.conk-region-ve .conk-hero-section .elementor-element-w-hero-cta-row,
body.conk-region-ve .conk-hero-section .conk-hero-trust {
  margin-left: auto;
  width: max-content;
  max-width: 100%;
}

body.conk-region-ve .conk-hero-section .elementor-element-w-hero-cta-row {
  justify-content: flex-end;
}

/* Region-aware tricolor / flag variations live in sections 12 + 16 above. */

/* ---------- 18. PR 8.6 — Contact page chrome (topbar/tricolor on contact.json) ---------- */

.conk-contact-hero {
  position: relative;
  overflow: hidden;
}

.conk-contact-form-section .elementor-widget-shortcode {
  width: 100%;
}

.conk-contact-office-section .conk-contact-office-grid {
  align-items: start;
}

.conk-contact-office-section .conk-foot-contact {
  display: flex;
  flex-direction: column;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  color: #1A2432;
}

.conk-contact-office-section .conk-foot-contact li {
  line-height: 1.6;
}

.conk-contact-office-section .ck-contact-wa-cta {
  margin-top: 18px;
}

/* ---------- 19. PR 8.6 — JS-driven sticky sentinel + is-stuck class ---------- */

/* The sticky sentinel is an empty div injected at the top of `<body>` by
 * the small vanilla script in `assets/js/conk-sticky-header.js` (added in
 * PR 8.6.1 or via the HFE plugin's built-in sticky handler — PR 8.6 only
 * ships the CSS that responds to the `.is-stuck` class). The sentinel
 * itself has no styling; we only reserve space for the sticky header so
 * page content does not jump when `.is-stuck` engages. */
.conk-sticky-sentinel {
  width: 100%;
  height: 1px;
  display: block;
}

/* ---------- 20. PR 8.6 — Responsive chrome ---------- */

@media (max-width: 999px) {
  .conk-header-section .ck-burger,
  .conk-header-section .elementor-element-ck-burger { display: inline-flex; }
}

/* Mobile burger dropdown — reuses the existing nav-links + CTA widgets
 * (already in the DOM, just hidden under 1000/760px) instead of duplicating
 * markup. The burger click handler (wp_footer, functions.php) toggles
 * `.conk-mnav-open` on `.conk-header-section`.
 *
 * The two widgets live in different branches of the header's Elementor tree
 * — nav-row under the logo container, CTA under the actions column next to
 * the burger — with no shared flex parent. Reflowing them in place via
 * `order` made each fight its own container for width, which kept dragging
 * the whole actions column (burger included) down onto its own line.
 * Positioning them as an absolute overlay below the header sidesteps that:
 * the burger and logo stay on one row regardless of the panel's state. */
@media (max-width: 999px) {
  .conk-header-section .ck-nav-row,
  .conk-header-section .elementor-element-ck-nav-row {
    display: none;
  }
  /* `position`/`top`/`left`/`right` are set in JS (functions.php) as
   * `position: fixed` + measured pixel coordinates — see the comment on
   * that handler for why. This only styles the panel once JS has placed
   * it, and fixes the *inner* wrapper's own direction: the outer box is an
   * Elementor "boxed" container, which Elementor's own CSS always renders
   * as column (one child, the true row/column layout lives one level
   * deeper on `.e-con-inner`, still row until overridden here). */
  .conk-header-section.conk-mnav-open .ck-nav-row,
  .conk-header-section.conk-mnav-open .elementor-element-ck-nav-row {
    display: flex;
    margin: 0;
    padding: 18px 20px 14px;
    background: #ffffff;
    border-top: 1px solid var(--conk-line);
    box-shadow: 0 16px 30px rgba(2, 26, 64, .1);
    z-index: 60;
  }
  .conk-header-section.conk-mnav-open .ck-nav-row > .e-con-inner,
  .conk-header-section.conk-mnav-open .elementor-element-ck-nav-row > .e-con-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
  }
}

@media (max-width: 759px) {
  .conk-header-section .ck-header-cta,
  .conk-header-section .ck-publish-cta,
  .conk-header-section .elementor-element-ck-publish-cta {
    display: none;
  }
  .conk-header-section.conk-mnav-open .ck-header-cta,
  .conk-header-section.conk-mnav-open .ck-publish-cta,
  .conk-header-section.conk-mnav-open .elementor-element-ck-publish-cta {
    display: flex;
    background: #ffffff;
    padding: 12px 20px 18px;
    box-shadow: 0 16px 30px rgba(2, 26, 64, .1);
    z-index: 60;
  }
  .conk-header-section.conk-mnav-open .ck-publish-cta .elementor-button,
  .conk-header-section.conk-mnav-open .elementor-element-ck-publish-cta .elementor-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .conk-footer-section .conk-foot-grid { gap: 28px; }
  .conk-footer-bottom-section .conk-foot-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (max-width: 600px) {
  .conk-footer-binstrip-section .conk-binstrip-left small { display: none; }
}


@media (max-width: 940px) { .conk-card { padding: 18px 16px; } }

/* ========================================================================
 * PR 8.6.1 — Home page sections (v3 design)
 * ========================================================================
 *
 * Visual contract for the 8 v3 sections shipped via home.json:
 *
 *   1. Hero (bg + overlay + pin + h1 + 2 CTAs + trust strip + 5-field search)
 *   2. 6-card property types grid (Apartamentos / Casas / Casas campestres
 *      / Locales / Oficinas / Lotes) with live counts via
 *      [conk_property_count tipo="X" region="co"]
 *   3. Featured 4-card grid via [conk_featured_properties limit="4"]
 *   4. Binacional strip (key icon + h3 + flag mini)
 *   5. Why-choose 4-item grid
 *   6. Agents marquee section (60s loop, reduced-motion fallback)
 *      — STUB content in PR 8.6.1, full implementation PR 8.7
 *   7. Testimonials marquee (5 cards, 90s loop)
 *   8. Newsletter navy box (CF7 inline form)
 *
 * The CSS is split into numbered sections (1–8) for easy grep + review.
 */

/* ---------- PR 8.6.1 / 1. Hero ---------- */

.conk-hero-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.conk-hero-section .elementor-background-overlay {
  /* The Elementor background overlay is layered on top of the bg image.
   * Body-class hooks (.conk-region-co / .conk-region-ve) defined in PR 8.6
   * (section 17) re-skin this element directly with the region gradient,
   * replacing Elementor's flat overlay color. */
  z-index: 1;
  background-color: transparent !important;
  /* Elementor's own generated CSS sets opacity:0.5 on this element (kit
   * default), which would wash out our gradient's own rgba alphas. */
  opacity: 1 !important;
}

.conk-hero-section > .elementor-container,
.conk-hero-section > .elementor-column-wrap,
.conk-hero-section > .elementor-widget-wrap {
  position: relative;
  z-index: 2;
}

.conk-hero-section .conk-hero-pin {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .24);
  color: #ffffff;
  font-weight: 600;
  font-size: 12.5px;
  padding: 7px 13px;
  border-radius: 30px;
  margin-bottom: 18px;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.conk-hero-section .conk-hero-pin b {
  background: var(--conk-gold);
  color: #3a2400;
  border-radius: 20px;
  font-size: 11px;
  padding: 2px 9px;
  font-weight: 700;
}

.conk-hero-section .conk-hero-pin .conk-hero-pintx {
  white-space: nowrap;
}

/* max-width:17ch must target the heading text itself, not the widget
 * wrapper div — the wrapper's own (much smaller, inherited) font-size was
 * what "ch" was resolving against, producing a column far narrower than
 * intended and forcing a near one-word-per-line wrap. */
.conk-hero-section .conk-hero-h1,
.conk-hero-section .elementor-element-w-hero-title .elementor-heading-title {
  color: #ffffff !important;
  text-shadow: 0 2px 20px rgba(0, 0, 0, .22);
  max-width: 17ch;
  margin-bottom: 12px !important;
}

.conk-hero-section .conk-hero-h1 em {
  font-style: normal;
  color: var(--conk-blue-soft);
}

.conk-hero-section .elementor-widget-button {
  display: inline-block;
  margin-right: 12px;
}

.conk-hero-section .conk-hero-cta-primary .elementor-button {
  background: var(--conk-blue) !important;
  box-shadow: 0 8px 20px rgba(37, 160, 248, .32);
}

.conk-hero-section .conk-hero-cta-secondary .elementor-button {
  background: transparent !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

/* Trust strip (avatar stack + "10.000 clientes felices" text). */
.conk-hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  margin-top: 22px;
  max-width: 100%;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .24);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
}

.conk-hero-avatars {
  display: flex;
  flex: 0 0 auto;
}

.conk-hero-avatars img,
.conk-hero-avatars .conk-hero-more {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, .9);
  object-fit: cover;
  margin-left: -11px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.conk-hero-avatars img:first-of-type {
  margin-left: 0;
}

.conk-hero-avatars .conk-hero-more {
  background: var(--conk-blue);
  color: #ffffff;
  display: grid;
  place-items: center;
  font-weight: 700;
  font-size: 13px;
}

.conk-hero-tt b {
  display: block;
  font-size: 14px;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.25;
}

.conk-hero-tt small {
  color: #dbe6f5;
  font-size: 12.5px;
  line-height: 1.35;
}

/* Hero searchbar — inline 5-field form. */
.conk-hero-searchbar {
  margin-top: 22px;
  position: relative;
  z-index: 5;
}

.conk-hero-searchbar .conk-hero-searchbox {
  background: #ffffff;
  border: 1px solid var(--conk-line);
  border-radius: 16px;
  box-shadow: var(--conk-shadow-md);
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  align-items: stretch;
}

@media (min-width: 720px) {
  .conk-hero-searchbar .conk-hero-searchbox {
    grid-template-columns: repeat(2, 1fr) auto;
    gap: 4px;
  }
}

@media (min-width: 1040px) {
  .conk-hero-searchbar .conk-hero-searchbox {
    grid-template-columns: 1.5fr 1fr 1fr 1.15fr .9fr auto;
  }
}

.conk-hero-field {
  position: relative;
  border-radius: 11px;
  padding: 9px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  cursor: pointer;
}

@media (max-width: 719px) {
  .conk-hero-field { border: 1px solid var(--conk-line); }
}

@media (min-width: 720px) {
  .conk-hero-field:not(:last-of-type)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background: var(--conk-line);
  }
}

.conk-hero-field small {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--conk-muted);
  font-weight: 600;
}

.conk-hero-field input,
.conk-hero-field select {
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--conk-navy-deep);
  font-weight: 500;
  background: none;
  padding: 2px 0;
  width: 100%;
  cursor: pointer;
}

.conk-hero-field input::placeholder {
  color: #aab2c2;
  font-weight: 400;
}

.conk-hero-searchbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--conk-navy);
  color: #ffffff;
  border: 0;
  border-radius: 12px;
  font-weight: 600;
  font-size: 14.5px;
  padding: 0 24px;
  min-height: 54px;
  cursor: pointer;
  transition: background .15s;
}

.conk-hero-searchbtn:hover {
  background: var(--conk-navy-deep);
}

/* Mobile gradient override (vertical navy fade for narrow viewports). */
@media (max-width: 939px) {
  .conk-hero-section .elementor-background-overlay {
    background: linear-gradient(180deg, rgba(2, 26, 64, .88) 0%, rgba(2, 26, 64, .6) 52%, rgba(2, 26, 64, .42) 100%) !important;
  }
  .conk-hero-section .conk-hero-pin .conk-hero-pintx {
    white-space: normal;
  }
  .conk-hero-section .conk-hero-h1 {
    font-size: clamp(28px, 7vw, 40px) !important;
  }
}

/* ---------- PR 8.6.1 / 2. 6-card property types grid ---------- */

.conk-types-section .conk-section-sub,
.conk-featured-section .conk-section-sub,
.conk-agents-section .conk-section-sub,
.conk-tst-section .conk-section-sub,
.conk-why-section .conk-section-sub {
  margin: 8px 0 24px;
  color: var(--conk-muted);
  font-size: 14.5px;
}

/* The "Conoce a tu asesora" heading is center-aligned (native Elementor
 * align:center), but the subtitle text-editor widget below it has no
 * alignment control of its own — it was defaulting to left. */
.conk-agents-section .conk-agents-sub,
.conk-tst-section .conk-tst-sub {
  text-align: center;
}

/* The Elementor container behind .conk-types-grid is a real flex-wrap
 * container (native flex_direction/flex_wrap/gap settings, confirmed
 * present in the live _elementor_data) — Elementor's own .e-flex/.e-con
 * classes set display:flex with higher specificity than a plain
 * .conk-types-grid{display:grid} rule ever could, so the grid declaration
 * silently never applied and every icon-box fell back to full-row width.
 * Size the cards via flex-basis instead of fighting the container's display. */
.conk-types-grid .elementor-widget-icon-box {
  flex: 0 1 calc(50% - 8px);
  border: 1px solid var(--conk-line);
  border-radius: 14px;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  text-align: center;
  box-sizing: border-box;
  position: relative;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-title a {
  position: static;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-title a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-content {
  text-align: center;
}

.conk-types-view-all .elementor-button,
.elementor-element-w-types-view-all .elementor-button,
.elementor-element-w-featured-view-all .elementor-button {
  white-space: nowrap;
}

@media (min-width: 620px) {
  .conk-types-grid .elementor-widget-icon-box { flex-basis: calc(33.333% - 11px); }
}

@media (min-width: 960px) {
  .conk-types-grid .elementor-widget-icon-box { flex-basis: calc(16.666% - 14px); }
}

.conk-types-grid .elementor-widget-icon-box:hover {
  border-color: var(--conk-blue);
  box-shadow: var(--conk-shadow-sm);
  transform: translateY(-2px);
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--conk-blue-wash);
  color: var(--conk-blue-strong);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-icon i,
.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-icon svg {
  font-size: 20px !important;
  width: 20px !important;
  height: 20px !important;
}

/* Elementor's own per-widget generated CSS (icon-box "position" setting)
 * sets text-align on the wrapper/content with higher specificity than our
 * class-based rule — force centering explicitly on both levels. */
/* Elementor's own per-widget-ID CSS (generated from the icon-box "position"
 * control) targets this exact wrapper with 4-class specificity
 * (.elementor-{post} .elementor-element.elementor-element-{id} ...), beating
 * our 3-class selector — every layout property here needs !important. */
.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100%;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-content {
  text-align: center !important;
  width: 100%;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-title {
  font-size: 14px;
  color: var(--conk-navy-deep);
  font-weight: 600;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: visible;
}

.conk-types-grid .elementor-widget-icon-box .elementor-icon-box-description {
  color: var(--conk-muted);
  font-size: 12.5px;
  margin: 0;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: visible;
}

/* ---------- PR 8.6.1 / 3. Featured 4-card grid ---------- */

/* `.conk-featured-grid` is the shortcode's own wrapper — scoping these
 * rules to `.conk-featured-section` (the home page's usage) meant the SAME
 * shortcode output on single-property.php (wrapped in `.conk-related`
 * there, not `.conk-featured-section`) got no grid at all: cards fell back
 * to plain block stacking with no shared row height, so each card's photo
 * rendered at its own unconstrained aspect ratio — normal-looking when the
 * photo happened to be tall, a big blank color block when it didn't. */
.conk-featured-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

@media (min-width: 620px) {
  .conk-featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 960px) {
  .conk-featured-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.conk-featured-section .conk-featured-empty {
  text-align: center;
  color: var(--conk-muted);
  font-size: 14.5px;
  padding: 32px 16px;
  background: #ffffff;
  border: 1px dashed var(--conk-line);
  border-radius: 14px;
}

/* Reuse the archive-card markup for featured cards (see archive-property.php).
 * The archive CSS (`.conk-pcard`) already styles the media + body + price
 * rows; we only need to override the badge color since the featured card
 * uses a "Destacado" badge rather than sale/rent. */
.conk-featured-section .conk-card .conk-card-thumb {
  display: block;
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--conk-blue-wash);
}

.conk-featured-section .conk-card .conk-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s;
}

.conk-featured-section .conk-card:hover .conk-card-thumb img {
  transform: scale(1.05);
}

.conk-featured-section .conk-card .conk-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--conk-gold);
  color: #3a2400;
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 20px;
  letter-spacing: .01em;
}

.conk-featured-section .conk-card .conk-card-thumb-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(150deg, var(--conk-blue-wash), #dfecfb);
}

/* ---------- PR 8.6.1 / 4. Binacional strip ---------- */

.conk-binac-section {
  background: linear-gradient(120deg, var(--conk-navy-deep) 0%, var(--conk-navy) 60%, #083a7e 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.conk-binac-section::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

.conk-binac-section .elementor-container {
  align-items: center;
}

.conk-binac-section .elementor-column {
  position: relative;
  z-index: 1;
}

/* The icon widget's css_classes ("conk-binac-key") never reaches the DOM on
 * this Elementor version (see discovery-elementor-css-classes-bug) — the
 * .elementor-element-w-binac-key fallback is what's actually present, so the
 * rounded icon box (and therefore any vertical-centering relative to it)
 * silently never rendered. */
.conk-binac-key,
.elementor-element-w-binac-key {
  width: 74px !important;
  max-width: 74px !important;
  height: 74px !important;
  flex: 0 0 74px !important;
  border-radius: 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  color: var(--conk-gold);
  box-sizing: border-box;
}

/* Cap the icon+text block's width so it doesn't grow to fill the whole row
 * — otherwise the "+9 años" badge has no room left and wraps onto its own
 * line instead of sitting beside it. */
.elementor-element-w-binac-icon-text {
  flex: 1 1 560px;
  max-width: 640px;
}

.conk-binac-h3 {
  margin: 0 !important;
  color: #ffffff !important;
}

.conk-binac-h3 span {
  color: var(--conk-gold);
}

.conk-binac-p {
  margin: 8px 0 0;
  color: #c3d2ea;
  font-size: 14.5px;
  max-width: 52ch;
}

.conk-binac-flagbig {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  padding: 12px 18px;
  border-radius: 14px;
  white-space: nowrap;
  font-weight: 600;
  font-size: 14px;
  color: #ffffff;
}

.conk-binac-flagbig .conk-flag-strip.is-co,
.conk-binac-flagbig .conk-flag-strip.is-ve {
  width: 22px;
  height: 14px;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .05);
}

.conk-binac-flagbig .conk-flag-strip.is-co {
  background: linear-gradient(180deg, var(--conk-co-y) 0 50%, var(--conk-co-b) 50% 75%, var(--conk-co-r) 75% 100%);
}

.conk-binac-flagbig .conk-flag-strip.is-ve {
  background: linear-gradient(180deg, var(--conk-ve-y) 0 33.3%, var(--conk-ve-b) 33.3% 66.6%, var(--conk-ve-r) 66.6% 100%);
}

.conk-binac-flagbig .conk-binac-yrs {
  color: var(--conk-gold);
  font-weight: 700;
  margin-right: 4px;
}

/* Mobile: stack the binac strip columns. */
@media (max-width: 759px) {
  .conk-binac-section .elementor-column {
    margin-bottom: 16px;
  }
  .conk-binac-flagbig {
    white-space: normal;
    flex-wrap: wrap;
  }
}

/* ---------- PR 8.6.1 / 5. Why-choose 4-item grid ---------- */

.conk-why-section {
  background: var(--conk-panel);
}

.conk-why-section .conk-why-intro {
  text-align: center;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* Same root cause as .conk-types-grid (see the note above it): the
 * Elementor container behind .conk-why-grid is a real flex-wrap container
 * (native settings), whose .e-flex/.e-con classes beat a plain
 * display:grid rule on specificity — so grid-template-columns silently
 * never applied. Size via flex-basis instead. The individual card class
 * (.conk-why-item, via css_classes) also never reaches the DOM — see
 * discovery-elementor-css-classes-bug — so target .elementor-widget-icon-box. */
.conk-why-grid {
  margin-top: 16px;
}

.conk-why-grid .elementor-widget-icon-box {
  flex: 0 1 100%;
  background: #ffffff;
  border: 1px solid var(--conk-line);
  border-radius: 16px;
  padding: 24px 22px;
  text-align: center;
  box-sizing: border-box;
}

@media (min-width: 560px) {
  .conk-why-grid .elementor-widget-icon-box { flex-basis: calc(50% - 9px); }
}

@media (min-width: 960px) {
  .conk-why-grid .elementor-widget-icon-box { flex-basis: calc(25% - 13.5px); }
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-content {
  text-align: center !important;
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  background: var(--conk-blue-wash);
  color: var(--conk-blue-strong);
  display: grid;
  place-items: center;
  margin: 0 0 16px;
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-icon i,
.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-icon svg {
  font-size: 22px !important;
  width: 22px !important;
  height: 22px !important;
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-title {
  font-size: 16px;
  color: var(--conk-navy-deep);
  font-weight: 600;
  margin: 0 0 7px;
}

.conk-why-grid .elementor-widget-icon-box .elementor-icon-box-description {
  margin: 0;
  color: var(--conk-muted);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---------- PR 8.6.1 / 6. Agents marquee (60s, reduced-motion) ---------- */

.conk-agents-section .conk-marquee-note,
.conk-tst-section .conk-marquee-note {
  text-align: center;
  color: var(--conk-muted);
  font-size: 12px;
  margin-top: 18px;
  font-style: italic;
}

/* PR 8.7 — full agents marquee surface. Replaces the PR 8.6.1 stub
 * (`.conk-team-marquee-placeholder`) + the forward-compatible
 * `.conk-marquee-team` placeholder CSS. The shortcode renders:
 *   - `<ul class="conk-team-marquee">` = the outer container (overflow:
 *     hidden + mask gradient for soft edges).
 *   - `<li class="conk-team-track">` = the inner flex track that
 *     animates via `@keyframes conkMarqueeTeam`.
 *   - `<article class="conk-team-card">` = one card per agent (image
 *     + name + WhatsApp CTA).
 *
 * The duplicated track (`.conk-team-track--clone`, `aria-hidden="true"`)
 * gives the marquee a seamless loop without JavaScript: the keyframe
 * translates -50% so the second copy takes the first's place.
 */
/* 2026-08-24: back to a scrolling carousel per client request, but built
 * differently from the pre-2026-08-23 marquee that got replaced (that one
 * never showed more than ~4 cards before an off-screen gap at cycle end).
 * Two identical `.conk-team-track` lists sit side by side inside an
 * overflow:hidden flex row and both animate the SAME `translateX(-100%)`
 * over the SAME duration — track 2 always lands exactly where track 1
 * started, so the loop never has a gap or a visible jump regardless of
 * advisor count. No JS. The edge mask is intentionally subtle (24px). */
.conk-team-carousel {
  display: flex;
  overflow: hidden;
  margin: 8px 0 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

.conk-team-track {
  display: flex;
  flex: 0 0 auto;
  gap: 18px;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: conkTeamScroll 76s linear infinite;
}

@keyframes conkTeamScroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .conk-team-carousel { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .conk-team-track { animation: none; }
}

/* Venezuela has only 3 advisors -- a moving carousel of 3 cards reads as
 * broken (barely any motion, nothing meaningful to loop). Static, centered
 * grid instead (client request 2026-08-24), reusing the same card styles. */
.conk-team-grid-ve {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

/* Per-card surface (spec REQ-1 + REQ-6). Fixed width (was 100% under the
 * grid) so the flex track has a predictable, sum-able width to animate. */
.conk-team-card {
  width: 220px;
  flex: 0 0 auto;
  background: #ffffff;
  border: 1px solid var(--conk-line);
  border-radius: 18px;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  box-shadow: 0 6px 18px rgba(8, 17, 40, 0.04);
}

/* The source photos are portrait headshots (~4:5); a fixed 200px height on
 * a ~280px-wide card forced a near-square crop, which cut off much more of
 * the photo than intended and read as an odd "zoomed in" close-up. Sizing
 * the box to the photos' own aspect ratio keeps the full headshot in frame. */
.conk-team-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 12px;
  background: var(--conk-blue-wash2);
}

.conk-team-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: var(--conk-blue-wash2);
}

/* Wraps the photo/placeholder so the role badge can be positioned over it. */
.conk-team-card-photo-wrap {
  position: relative;
  display: block;
  width: 100%;
}

/* Role badge over the advisor photo (content-parity D12). */
.conk-team-card .tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(2, 26, 64, 0.82);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: 20px;
  z-index: 1;
}

/* SVG person placeholder shown when the advisor has no photo. */
.conk-team-card .ph-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  background: var(--conk-blue-wash2);
}

/* Tagline below the advisor name (content-parity D12). */
.conk-team-card .role {
  display: block;
  font-size: 12.5px;
  color: var(--conk-muted);
  text-align: center;
  margin-top: -4px;
}

.conk-team-card .role.co {
  color: var(--conk-navy);
}

.conk-team-name {
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.3;
  color: var(--conk-navy-deep);
  text-align: center;
  margin-top: 2px;
}

/* Focus ring on the card itself (kept even though cards have no
 * interactive content now, in case a future keyboard-nav affordance
 * lands on it). */
.conk-team-card:focus-visible {
  outline: 2px solid var(--conk-navy-deep);
  outline-offset: 2px;
}

/* ---------- PR 8.6.1 / 7. Testimonials marquee (90s, reduced-motion) ---------- */

/* 2026-08-23: dropped the scrolling animation for a static wrapping row,
 * same call as the advisor grid (see architecture-advisor-cpt) — the
 * animation targeted `.elementor-container`, a legacy-section class that
 * this element (a modern flex `container`) never renders, so it was
 * already dead; the layout bug (head/track columns side by side instead
 * of stacked) was the real, user-visible issue. */
.conk-marquee-tst {
  position: relative;
  margin-top: 8px;
}

/* Testimonial card — Elementor renders `<div class="elementor-widget-testimonial">`
 * inside a wrapper. We style the inner wrapper so the card looks like the
 * v3 mockup's testimonial tile (white card, quote icon, body, stars, who). */
/* Fixed 3×2 grid — max 6 testimonials by design (see class-conk-... home.json
 * comment / project memory: capped after removing the 5 marquee-loop
 * duplicates that were never meant to render as separate cards). */
.conk-marquee-tst .elementor-widget-testimonial {
  width: 100%;
  flex: 0 1 100%;
  border: 1px solid var(--conk-line);
  border-radius: 16px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  gap: 10px;
  box-sizing: border-box;
}

@media (min-width: 620px) {
  .conk-marquee-tst .elementor-widget-testimonial { flex-basis: calc(50% - 9px); }
}

@media (min-width: 960px) {
  .conk-marquee-tst .elementor-widget-testimonial { flex-basis: calc(33.333% - 12px); }
}

.conk-marquee-tst .elementor-widget-testimonial .elementor-testimonial-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

.conk-marquee-tst .elementor-widget-testimonial .elementor-testimonial-content {
  margin: 0;
  color: #39435a;
  font-size: 14.5px;
  line-height: 1.6;
  flex: 1;
}

.conk-marquee-tst .elementor-widget-testimonial .elementor-testimonial-name {
  font-size: 14.5px;
  color: var(--conk-navy-deep);
  font-weight: 600;
  line-height: 1.2;
}

.conk-marquee-tst .elementor-widget-testimonial .elementor-testimonial-job {
  color: var(--conk-muted);
  font-size: 12.5px;
}

.conk-marquee-tst .elementor-widget-testimonial .elementor-testimonial-image img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
}

/* PR responsive-ui-polish-1a / T12 — initials avatar fallback for
 * testimonials without a photo, matching the reference model's
 * per-person color-coded circle. Scoped via `.conk-tst-section` (a
 * section-level `css_classes` value, which DOES render — that control
 * is only broken for widget-level elements, see the note above). */
.conk-tst-section .elementor-testimonial-meta-inner {
  display: flex;
  align-items: center;
  gap: 12px;
}

.elementor-element-w-tst-1 .elementor-testimonial-meta-inner::before,
.elementor-element-w-tst-6 .elementor-testimonial-meta-inner::before {
  content: "AL";
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #F4A63B;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

.elementor-element-w-tst-2 .elementor-testimonial-meta-inner::before,
.elementor-element-w-tst-7 .elementor-testimonial-meta-inner::before {
  content: "AG";
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #9333EA;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}

/* PR responsive-ui-polish-1a / T12 — "Reseña de Google" badge, only on
 * the 2 real Google-review testimonials (w-tst-1/2 + their T7 clones
 * w-tst-6/7). Targets `.elementor-element-{id}` (always rendered by
 * Elementor for the widget's own custom `id`) instead of `css_classes`
 * — that control is registered only for column/container/section in
 * this Elementor version (confirmed via plugin source), so the
 * `css_classes: "conk-tst-real"` value in home.json is silently
 * ignored at render time. See apply-progress-T12.md for the full
 * cross-cutting finding (affects `.conk-tst-card` / `.conk-type-card`
 * too, from T7/T8/T13 — not fixed here, flagged separately). */
.elementor-element-w-tst-1 .elementor-testimonial-content::after,
.elementor-element-w-tst-2 .elementor-testimonial-content::after,
.elementor-element-w-tst-6 .elementor-testimonial-content::after,
.elementor-element-w-tst-7 .elementor-testimonial-content::after {
  content: "Reseña de Google";
  display: block;
  margin-top: 10px;
  padding-left: 18px;
  font-size: 11.5px;
  font-weight: 600;
  color: #5f6b7a;
  background: conic-gradient(#4285F4 0 25%, #34A853 25% 50%, #FBBC05 50% 75%, #EA4335 75% 100%) no-repeat left center;
  background-size: 12px 12px;
}

/* ---------- PR 8.6.1 / 8. Newsletter navy box ---------- */

.conk-news-section {
  padding-bottom: 56px;
}

.conk-news-box {
  background: linear-gradient(120deg, var(--conk-navy-deep), var(--conk-navy));
  border-radius: 22px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  box-shadow: var(--conk-shadow-lg);
  color: #ffffff;
}

@media (min-width: 820px) {
  .conk-news-box {
    grid-template-columns: 280px 1fr;
  }
}

.conk-news-box .conk-news-pic {
  position: relative;
  min-height: 150px;
  display: none;
}

@media (min-width: 820px) {
  .conk-news-box .conk-news-pic {
    display: block;
  }
}

.conk-news-box .conk-news-pic img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.conk-news-box .conk-news-txt {
  padding: 24px clamp(24px, 4vw, 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
}

.conk-news-box .conk-news-txt h3 {
  margin: 0;
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 700;
  letter-spacing: -.01em;
  color: #ffffff;
}

.conk-news-box .conk-news-txt p {
  margin: 0;
  color: #c3d2ea;
  font-size: 14px;
  width: 100%;
  max-width: none;
}

/* CF7 wraps the whole form body in ONE <p> with <br> between fields, so
 * flex/order on that <p> depends on exact DOM order and kept losing to
 * Astra's CF7 compat CSS (`.wpcf7-form-control-wrap{width:100%}`) in
 * unpredictable ways. An explicit named grid sidesteps both problems —
 * every field is placed by name, not by source order or flex-wrap math. */
.conk-news-box .wpcf7 form p {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "email  submit"
    "accept accept";
  align-items: center;
  gap: 10px 12px;
  margin-top: 4px;
}

.conk-news-box .wpcf7 form p br {
  display: none;
}

.conk-news-box .wpcf7 .wpcf7-form-control-wrap[data-name="your-email"] {
  grid-area: email;
  width: auto !important;
}

.conk-news-box .wpcf7 input[type="submit"],
.conk-news-box .wpcf7 button[type="submit"] {
  grid-area: submit;
}

.conk-news-box .wpcf7 .wpcf7-form-control-wrap[data-name="habeas-data"] {
  grid-area: accept;
  width: auto !important;
}

.conk-news-box .wpcf7 input[type="email"],
.conk-news-box .wpcf7 input[type="text"] {
  width: 100%;
  border: 0;
  border-radius: 10px;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 14px;
  background: #ffffff;
  color: var(--conk-ink);
  box-sizing: border-box;
}

.conk-news-box .wpcf7 input[type="email"]::placeholder,
.conk-news-box .wpcf7 input[type="text"]::placeholder {
  color: #98a2b3;
}

.conk-news-box .wpcf7 input[type="submit"],
.conk-news-box .wpcf7 button[type="submit"] {
  padding: 14px 24px;
  border: 0;
  border-radius: 10px;
  background: var(--conk-blue);
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}

.conk-news-box .wpcf7 input[type="submit"]:hover,
.conk-news-box .wpcf7 button[type="submit"]:hover {
  background: var(--conk-blue-strong);
}

.conk-news-box .wpcf7 .acceptance,
.conk-news-box .wpcf7 .wpcf7-acceptance,
.conk-news-box .wpcf7 .wpcf7-list-item-label,
.conk-news-box .wpcf7 .acceptance label,
.conk-news-box .wpcf7 .wpcf7-acceptance label {
  color: #ffffff !important;
  font-size: 12px;
  line-height: 1.4;
}

.conk-news-box .wpcf7 .acceptance a,
.conk-news-box .wpcf7 .wpcf7-acceptance a {
  color: #ffffff !important;
  text-decoration: underline;
}

.conk-news-box .wpcf7 .acceptance,
.conk-news-box .wpcf7 .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.conk-news-box .wpcf7-not-valid-tip {
  color: var(--conk-co-r);
  font-size: 12px;
}

/* ---------- PR 8.6.1 / R. Responsive sweep for the home sections ---------- */

@media (max-width: 759px) {
  .conk-types-grid { gap: 12px; }
  .conk-types-grid .elementor-widget-icon-box { padding: 14px; }
  .conk-why-grid .conk-why-item { padding: 20px 18px; }
  .conk-news-box .conk-news-txt { padding: 26px 22px; }
}

@media (max-width: 519px) {
  .conk-hero-section {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
  }
  .conk-hero-trust {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .conk-hero-section .conk-hero-cta-primary,
  .conk-hero-section .conk-hero-cta-secondary {
    display: block;
    margin-right: 0;
  }
  .conk-hero-section .conk-hero-cta-secondary {
    margin-top: 10px;
  }
}

/* ---------- PR 8.6.2 — Archive: 3-image hover carousel + pager + filters ---------- */

/* 3-image hover carousel (astra-child-theme REQ-5).
 *
 * The CSS-only keyframe cycles through images 1 → 2 → 3 → 1 on hover at
 * a 2-second-per-step pace (6-second loop). `prefers-reduced-motion: reduce`
 * short-circuits the keyframe so users who opt out of motion see the first
 * image statically with no auto-cycle (spec REQ-5 scenario 2). The dots
 * (`.conk-cdots i`) sync with the keyframe via `nth-child` step delays. */
.conk-pcard .conk-cslide {
  position: absolute;
  inset: 0;
}
.conk-pcard .conk-cslide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.conk-pcard .conk-cslide img.is-on { opacity: 1; }

/* Indicator dots (3 dots, current image highlighted). */
.conk-pcard .conk-cdots {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 5px;
  z-index: 4;
  pointer-events: none;
}
.conk-pcard .conk-cdots i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: width .2s ease, background .2s ease;
}
.conk-pcard .conk-cdots i.is-on {
  background: #ffffff;
  width: 16px;
  border-radius: 3px;
}

/* Hover cycle: swap to image 2 at 2s, image 3 at 4s, back to image 1 at 6s.
 * Uses per-child animation-delay so the same `@keyframes` drives all three
 * steps. Pauses cleanly on cursor leave because `:hover` is the trigger. */
@keyframes conkCarouselStep {
  0%, 33%   { opacity: 0; }
  6%, 28%   { opacity: 1; }
  34%, 100% { opacity: 0; }
}
@keyframes conkCarouselShow {
  0%, 100% { opacity: 1; }
}
.conk-pcard:hover .conk-cslide img:nth-child(1) {
  animation: conkCarouselShow 6s linear forwards;
}
.conk-pcard:hover .conk-cslide img:nth-child(2) {
  animation: conkCarouselStep 6s linear forwards;
}
.conk-pcard:hover .conk-cslide img:nth-child(3) {
  animation: conkCarouselStep 6s linear forwards;
  animation-delay: 2s;
}
.conk-pcard:hover .conk-cdots i:nth-child(1) {
  animation: conkCarouselShow 6s linear forwards;
}
.conk-pcard:hover .conk-cdots i:nth-child(2) {
  animation: conkCarouselStep 6s linear forwards;
}
.conk-pcard:hover .conk-cdots i:nth-child(3) {
  animation: conkCarouselStep 6s linear forwards;
  animation-delay: 2s;
}

/* Reduced-motion: instant swap on hover, no keyframe. */
@media (prefers-reduced-motion: reduce) {
  .conk-pcard:hover .conk-cslide img,
  .conk-pcard:hover .conk-cdots i {
    animation: none;
  }
  .conk-pcard:hover .conk-cslide img:nth-child(2):hover,
  .conk-pcard .conk-cslide img.is-on { opacity: 1; }
  .conk-pcard .conk-cslide img { transition: none; }
}

/* Custom pager (1 / 2 / 3 / ›) preserving filter state.
 * Replaces `the_posts_pagination()` from PR 6 because WP's default pager
 * drops filter params on click. */
.conk-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 34px;
  flex-wrap: wrap;
}
.conk-pg {
  min-width: 40px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--conk-line);
  background: #ffffff;
  border-radius: 10px;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--conk-navy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.conk-pg:hover {
  border-color: var(--conk-blue);
  color: var(--conk-blue-strong);
}
.conk-pg.is-on {
  background: var(--conk-navy);
  color: #ffffff;
  border-color: var(--conk-navy);
}
.conk-pg-gap {
  min-width: 24px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #c2c9d6;
  font-weight: 600;
  font-size: 14px;
}

/* "Más filtros" disclosure panel — collapsible section with the deeper
 * filters (baños / área min / ciudad / región radio). Opens on click via
 * a `[hidden]` toggle handled by `archive-property.php` JS. */
.conk-fmore {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 15px;
  align-self: stretch;
}
.conk-fmore[aria-expanded="true"] { background: var(--conk-blue-wash); }

.conk-fmore-panel {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--conk-line);
}
.conk-fmore-panel[hidden] { display: none; }

.conk-fbar-more {
  gap: 10px;
  align-items: stretch;
}
.conk-fbar-more .conk-fsel { flex: 1 1 160px; min-width: 0; }
.conk-fbar-more input[type="text"],
.conk-fbar-more input[type="number"] {
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--conk-navy-deep);
  font-weight: 500;
  background: none;
  padding: 2px 0;
  width: 100%;
}

/* Stack the Más-filtros row on narrow viewports so every control reaches
 * full content width (matches the small-viewport rule from PR 8.5). */
@media (max-width: 760px) {
  .conk-fmore-panel .conk-fbar-more { flex-direction: column; align-items: stretch; }
}

/* ---------- PR wasi-images — Gallery carousel (supersedes PR 8.6.3 lightbox) ---------- */

/* T6 — carousel container. `.conk-gallery-carousel--single` / `--empty` are
 * the non-carousel render modes (1 image / 0 images) — a bare `<img>`, no
 * `.conk-gc-hero` wrapper, so they keep sizing themselves directly via
 * aspect-ratio like before. The real multi-image carousel is now a hero
 * slide (`.conk-gc-hero`, same sizing) plus a thumbnail strip below it
 * (supersedes the earlier dot-indicator design). */
.conk-gallery-carousel {
  margin-bottom: 22px;
}
.conk-gallery-carousel--single,
.conk-gallery-carousel--empty {
  display: block;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--conk-blue-wash);
  box-shadow: var(--conk-shadow-md);
}
@media (min-width: 940px) {
  .conk-gallery-carousel--single,
  .conk-gallery-carousel--empty { aspect-ratio: auto; height: 452px; }
}
.conk-gallery-carousel--single img,
.conk-gallery-carousel--empty img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.conk-gc-hero {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--conk-blue-wash);
  box-shadow: var(--conk-shadow-md);
  margin-bottom: 14px;
}
@media (min-width: 940px) {
  .conk-gc-hero { aspect-ratio: auto; height: 452px; }
}

/* Slide track — flex row translated by JS (`translateX(-N * 100%)`). */
.conk-gc-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform .35s ease;
}
.conk-gc-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}
.conk-gc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Prev/next buttons — same visual language as the old lightbox controls.
 * Astra's own `button` default (padding: 15px 30px) beats a plain 2-class
 * selector on specificity in this cascade, stretching these into 60×40
 * ovals instead of clean 40×40 circles (and, since both were affected
 * identically, made prev/next only LOOK misaligned relative to each
 * other). `!important` on the box dimensions settles it regardless of
 * where Astra's rule falls in specificity/order. */
.conk-gc-prev,
.conk-gc-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .92);
  color: var(--conk-navy-deep);
  border: 0;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  font-size: 22px;
  line-height: 1;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transition: background .15s, transform .15s;
}
.conk-gc-prev { left: 14px; }
.conk-gc-next { right: 14px; }
.conk-gc-prev:hover,
.conk-gc-next:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.conk-gc-prev:focus-visible,
.conk-gc-next:focus-visible {
  outline: 3px solid var(--conk-blue);
  outline-offset: 2px;
}

/* Thumbnail strip — doubles as the slide picker (was dot indicators).
 * Scrolls horizontally on its own when a property has more photos than fit
 * the row, instead of hiding any of them. */
.conk-gc-thumbs {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.conk-gc-thumb {
  flex: 0 0 auto;
  width: 88px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  cursor: pointer;
  background: var(--conk-blue-wash);
  transition: border-color .15s, opacity .15s;
  opacity: .7;
}
.conk-gc-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.conk-gc-thumb:hover {
  opacity: 1;
}
.conk-gc-thumb.is-active {
  border-color: var(--conk-blue);
  opacity: 1;
}
.conk-gc-thumb:focus-visible {
  outline: 2px solid var(--conk-blue);
  outline-offset: 2px;
}

/* Reduced-motion: JS never starts the auto-rotate timer; here we also drop
 * the slide-swap transition so a manual prev/next click doesn't animate. */
@media (prefers-reduced-motion: reduce) {
  .conk-gc-track { transition: none; }
  .conk-gc-prev,
  .conk-gc-next,
  .conk-gc-thumb { transition: none; }
}

/* T2 — Features grid: icon + label tile. Auto-fit so any count of features
 * flows cleanly without media queries; the icon stays square, the label
 * wraps if it's long. */
.conk-features-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.conk-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--conk-line);
  border-radius: 12px;
  background: var(--conk-blue-wash2);
  color: var(--conk-navy-deep);
  font-size: 14px;
  font-weight: 500;
  min-height: 52px;
}
.conk-feature svg {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: var(--conk-blue-strong);
  stroke: var(--conk-blue-strong);
}

/* T3 — Ficha técnica em-dash for missing values. Deliberately its own
 * class, not `.conk-empty` — that name is already the big "no results
 * found" panel (padding:60px, background panel, border-radius:16px, see
 * above). Reusing it here for a tiny inline dash inflated every missing
 * ficha técnica value into a ~120px-tall rounded box that bled into the
 * rows above/below it, since a later same-selector rule only overrides
 * the properties it explicitly sets (color/font-weight/letter-spacing) —
 * padding/background/radius from the earlier rule still applied. */
.conk-dval-empty {
  color: #b6bdcc;
  font-weight: 400;
  letter-spacing: .02em;
}

/* T4 — Amenidades chips (`.conk-chip`) inside `.conk-amen-chips` flex row. */
.conk-amen-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.conk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  background: var(--conk-blue-wash);
  color: var(--conk-navy-deep);
  border: 1px solid var(--conk-blue-wash);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
.conk-chip svg {
  width: 14px;
  height: 14px;
  color: var(--conk-blue-strong);
  stroke: var(--conk-blue-strong);
  flex: 0 0 auto;
}

/* T6 — Related strip wrapper for the featured shortcode output. The
 * featured shortcode already wraps everything in `.conk-featured-grid`;
 * we just add a section header + container so it reads as "related" on
 * the single template. */
section.conk-featured-grid {
  background: var(--conk-blue-wash2);
  border-radius: 16px;
  padding: 28px 22px;
  margin: 28px auto;
  max-width: 1200px;
}
/* Breathing room before the whole "Propiedades destacadas" block — without
 * it, the heading sat flush against the sidebar card above it. */
.conk-related {
  margin-top: 44px;
}
.conk-related-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 22px;
  gap: 16px;
  flex-wrap: wrap;
}
.conk-related-head h2 {
  margin: 0;
  font-size: clamp(20px, 3.2vw, 26px);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--conk-navy-deep);
}
.conk-related-head .sub {
  color: var(--conk-muted);
  font-size: 14px;
  margin-top: 6px;
}

/* Small-viewport adjustments for new components. */
@media (max-width: 760px) {
  .conk-features-grid { grid-template-columns: 1fr 1fr; }
  .conk-feature { padding: 10px 12px; font-size: 13.5px; min-height: 48px; }
  .conk-gc-prev,
  .conk-gc-next { width: 34px !important; height: 34px !important; font-size: 18px; }
}
@media (max-width: 480px) {
  .conk-features-grid { grid-template-columns: 1fr; }
  .conk-amen-chips { gap: 6px; }
  .conk-chip { padding: 6px 11px; font-size: 12.5px; }
}